241 lines
9.3 KiB
Vue
241 lines
9.3 KiB
Vue
<template>
|
||
<!-- <Dialog :title="dialogTitle" v-model="dialogVisible">-->
|
||
|
||
<el-card class="hl-card" style="position: relative">
|
||
<template #header>
|
||
<span>编辑页</span>
|
||
</template>
|
||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="160px" v-loading="formLoading">
|
||
<!-- 基础信息 -->
|
||
<el-card class="hl-card-info">
|
||
<template #header>
|
||
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">任务单类型</span>
|
||
</template>
|
||
</el-card>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-row>
|
||
<el-col :span="8">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="业务类型" prop="type">
|
||
<el-select v-model="formData.type" placeholder="请选择业务类型" :disabled="true">
|
||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="岗位" prop="postId">
|
||
<el-select v-model="formData.postId" placeholder="请选择岗位">
|
||
<el-option v-for="item in postSelectList" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="formData.remark" placeholder="请输入备注" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-card class="hl-card-info">
|
||
<template #header>
|
||
<div class="hl-card-info-icona"></div><span class="hl-card-info-text">人员信息</span>
|
||
</template>
|
||
<el-row>
|
||
<el-col>
|
||
<el-card class="hl-incard">
|
||
<el-col>
|
||
<el-button type="primary" size="large" @click="userAddItem">新增</el-button>
|
||
</el-col>
|
||
<el-form ref="subFormRef" :model="formData.userList" label-width="0">
|
||
<el-table :data="formData.userList" class="hl-table">
|
||
<el-table-column type="index" label="序号" align="center" min-width="60" fixed />
|
||
<el-table-column prop="description" min-width="200" label="业务人员" align="center">
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.busyId" element-loading-background="rgb(255, 255, 255)" placeholder="请选择" >
|
||
<el-option v-for="item in userSelectList" :key="item.id" :label="item.username + ' ' + item.nickname" :value="item.id" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="postId" min-width="150" label="岗位" align="center">
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.postId" element-loading-background="rgb(255, 255, 255)" placeholder="请选择" >
|
||
<el-option v-for="item in postSelectList" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="description" min-width="200" label="是否是负责人" align="center">
|
||
<template #default="scope">
|
||
<el-select v-model="scope.row.isRes" element-loading-background="rgb(255, 255, 255)" placeholder="请选择" >
|
||
<el-option v-for="item in isResList" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" width="120" fixed="right">
|
||
<template #default="scope">
|
||
<el-button link type="danger" size="small" @click.prevent="handleDeleteUser(scope.$index)">
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</el-row>
|
||
<div class="hl-footer text-center">
|
||
<el-button @click="submitForm" type="primary" size="large">保
|
||
存</el-button>
|
||
<el-button @click="closeForm" size="large">取 消</el-button>
|
||
</div>
|
||
</el-form>
|
||
</el-card>
|
||
<!-- </Dialog>-->
|
||
</template>
|
||
<script setup lang="ts">
|
||
import * as FpUserDetailApi from '@/api/heli/fpuserdetail'
|
||
import {ref} from "vue";
|
||
import * as UserApi from "@/api/system/user";
|
||
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||
|
||
import router from "@/router";
|
||
import {handleTree} from "@/utils/tree";
|
||
|
||
const { t } = useI18n() // 国际化
|
||
const message = useMessage() // 消息弹窗
|
||
const userSelectList = ref<UserApi.UserVO[]>([])
|
||
const tagsViewStore = useTagsViewStore()
|
||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||
const dialogTitle = ref('') // 弹窗的标题
|
||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||
const formData = ref({
|
||
id: undefined,
|
||
type:1,
|
||
fpId: undefined,
|
||
busyId: undefined,
|
||
seqNo: undefined,
|
||
postId: 0,
|
||
isRes: undefined,
|
||
remark: undefined,
|
||
userList: [],
|
||
})
|
||
const formRules = reactive({
|
||
})
|
||
const isResList = ref([
|
||
{ id: 'Y', name: '是' },
|
||
{ id: 'N', name: '否' }
|
||
]);
|
||
const postSelectList = ref([
|
||
{ id: 0, name: '0' },
|
||
{ id: 1, name: '1' },
|
||
{ id: 2, name: '2' }
|
||
]);
|
||
const typeList = ref([
|
||
{ id: 1, name: '任务单'},
|
||
{ id: 2, name: '其他' }
|
||
]);
|
||
const formRef = ref() // 表单 Ref
|
||
onMounted(async () => {
|
||
const data = await UserApi.getSimpleUserList()
|
||
userSelectList.value = data
|
||
console.log(formData.value)
|
||
formData.value.userList=await FpUserDetailApi.selectFpUserDetail(formData.value)
|
||
})
|
||
/** 打开弹窗 */
|
||
// const open = async (type: string, id?: number) => {
|
||
// dialogVisible.value = true
|
||
// dialogTitle.value = t('action.' + type)
|
||
// formType.value = type
|
||
// resetForm()
|
||
// // 修改时，设置数据
|
||
// if (id) {
|
||
// formLoading.value = true
|
||
// try {
|
||
// formData.value = await FpUserDetailApi.getFpUserDetail(id)
|
||
// } finally {
|
||
// formLoading.value = false
|
||
// }
|
||
// }
|
||
// }
|
||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||
//删除人员信息
|
||
const handleDeleteUser = (index: number) => {
|
||
// formData.value.userList.push(formData.value.userList[index])
|
||
formData.value.userList.splice(index, 1)
|
||
}
|
||
const userAddItem = () => {
|
||
const newData = {
|
||
// 新数据的属性
|
||
busyId: '',
|
||
postId: '',
|
||
isRes: '',
|
||
}
|
||
formData.value.userList.push(newData)
|
||
}
|
||
const closeForm = async () => {
|
||
router.push({ path: '/base/fpuserdetail' })
|
||
tagsViewStore.delVisitedView(router.currentRoute.value)
|
||
}
|
||
/** 提交表单 */
|
||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||
const submitForm = async () => {
|
||
// 校验表单
|
||
await formRef.value.validate()
|
||
// 提交请求
|
||
formLoading.value = true
|
||
try {
|
||
// const data = FpUserDetailApi.createFpUserDetail(formData.value)
|
||
// if (formType.value === 'create') {
|
||
await FpUserDetailApi.createFpUserDetail(formData.value)
|
||
message.success(t('common.createSuccess'))
|
||
// } else {
|
||
// await FpUserDetailApi.updateFpUserDetail(data)
|
||
// message.success(t('common.updateSuccess'))
|
||
// }
|
||
dialogVisible.value = false
|
||
router.push({ path: '/base/fpuserdetail' })
|
||
tagsViewStore.delVisitedView(router.currentRoute.value)
|
||
// 发送操作成功的事件
|
||
// emit('success')
|
||
} finally {
|
||
formLoading.value = false
|
||
}
|
||
}
|
||
|
||
/** 重置表单 */
|
||
const resetForm = () => {
|
||
formData.value = {
|
||
type:undefined,
|
||
id: undefined,
|
||
fpId: undefined,
|
||
busyId: undefined,
|
||
seqNo: undefined,
|
||
postId: undefined,
|
||
isRes: undefined,
|
||
remark: undefined,
|
||
}
|
||
formRef.value?.resetFields()
|
||
}
|
||
const getUserList = async ( ) => {
|
||
formData.value.userList=await FpUserDetailApi.selectFpUserDetail(formData.value)
|
||
}
|
||
watch(() => formData.value.postId, (newValue) => {
|
||
getUserList()
|
||
});
|
||
|
||
</script>
|