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>
|