From f60473bc01862ba1e289e7764f9478b9675e9c68 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期五, 05 八月 2022 09:23:56 +0800 Subject: [PATCH] 对接 --- src/views/goalManagement/performanceAppraisal/component/DailogAq.vue | 190 ++++++++++++++++++++++++++++------------------- 1 files changed, 113 insertions(+), 77 deletions(-) diff --git a/src/views/goalManagement/performanceAppraisal/component/DailogAq.vue b/src/views/goalManagement/performanceAppraisal/component/DailogAq.vue index fdc54be..d7f272c 100644 --- a/src/views/goalManagement/performanceAppraisal/component/DailogAq.vue +++ b/src/views/goalManagement/performanceAppraisal/component/DailogAq.vue @@ -1,40 +1,48 @@ <template> - <el-dialog v-model="dialogVisible" :fullscreen="full" :title="titles" width="50%" draggable> + <el-dialog v-model="dialogVisible" :fullscreen="full" @close="handleClose(ruleFormRef)" :title="titles" width="50%" draggable> <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> - <el-form :model="form" label-width="120px"> + <el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules"> <el-row> <el-col :span="11"> - <el-form-item label="考核标题" size="default"> - <el-input v-model="form.title"></el-input> + <el-form-item label="考核标题" size="default" prop="title"> + <el-input v-model="form.title" placeholder="请填写考核标题"></el-input> </el-form-item> </el-col> <el-col :span="11" :offset="2"> - <el-form-item label="考核日期" size="default"> + <el-form-item label="考核日期" size="default" prop="examineDate"> <el-date-picker v-model="form.examineDate" format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="请选择" style="width: 100%" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> - <el-form-item label="合格分数" size="default"> - <el-input v-model="form.name" disabled /> + <el-form-item label="合格分数" size="default" prop="acceptanceNumber"> + <el-input v-model="form.acceptanceNumber" disabled /> </el-form-item> </el-col> <el-col :span="11" :offset="2"> - <el-form-item label="总分" size="default"> - <el-input v-model="form.examineTotalNumber" /> + <el-form-item label="总分" size="default" prop="examineTotalNumber"> + <el-input v-model="form.examineTotalNumber" disabled /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="11"> - <el-form-item label="考核部门" size="default"> - <el-tree-select v-model="form.examineDepartmentId" :data="data" class="w100" :props="propse" placeholder="请选择" /> + <el-form-item label="考核部门" size="default" prop="examineDepartmentId"> + <el-tree-select + v-model="form.examineDepartmentId" + :data="data" + class="w100" + @node-click="nameData1" + :props="propse" + check-strictly + placeholder="请选择" + /> </el-form-item> </el-col> <el-col :span="11" :offset="2"> - <el-form-item label="考核人" size="default"> - <el-input v-model="form.examinePersonId"> + <el-form-item label="考核人" size="default" prop="examinePersonName"> + <el-input v-model="form.examinePersonName"> <template #append> <el-button :icon="Search" @click="daiInpt(1)" /></template> </el-input> </el-form-item> @@ -42,13 +50,21 @@ </el-row> <el-row> <el-col :span="11"> - <el-form-item label="被考核部门" size="default"> - <el-tree-select v-model="form.beExaminedDepartmentId" :data="data" class="w100" :props="propse" placeholder="请选择" /> + <el-form-item label="被考核部门" size="default" prop="beExaminedDepartmentId"> + <el-tree-select + v-model="form.beExaminedDepartmentId" + :data="data" + @node-click="nameData2" + class="w100" + :props="propse" + check-strictly + placeholder="请选择" + /> </el-form-item> </el-col> <el-col :span="11" :offset="2"> - <el-form-item label="被考核人" size="default"> - <el-input v-model="form.beExaminedPersonId"> + <el-form-item label="被考核人" size="default" prop="beExaminedPersonName"> + <el-input v-model="form.beExaminedPersonName"> <template #append> <el-button :icon="Search" @click="daiInpt(2)" /></template> </el-input> </el-form-item> @@ -78,14 +94,14 @@ </el-row> <el-row> <el-col :span="11"> - <el-form-item label="考核模板" size="default"> - <el-input disabled v-model="form.examineTemplateId"> + <el-form-item label="考核模板" size="default" prop="examineTemplateName"> + <el-input disabled v-model="form.examineTemplateName"> <template #append> <el-button :icon="Search" @click="daiAdd" /></template> </el-input> </el-form-item> </el-col> <el-col :span="11" :offset="2"> - <el-form-item label="备注信息"> + <el-form-item label="备注信息" prop="memo"> <el-input v-model="form.memo" type="textarea"> </el-input> </el-form-item> </el-col> @@ -110,8 +126,8 @@ </el-table> <template #footer> <span class="dialog-footer"> - <el-button @click="resetForm" size="default">关闭</el-button> - <el-button type="primary" @click="submitForm" size="default">确定</el-button> + <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> + <el-button type="primary" @click="submitForm(ruleFormRef)" size="default">确定</el-button> </span> </template> </el-dialog> @@ -126,17 +142,24 @@ import { ElMessage, ElMessageBox } from 'element-plus'; import { goalManagementApi } from '/@/api/goalManagement'; import type { UploadProps, UploadUserFile } from 'element-plus'; +import type { FormInstance, FormRules } from 'element-plus'; export default defineComponent({ components: { DailogSearchUser, DailogSearch }, setup(props, { emit }) { const dialogVisible = ref<boolean>(false); + const ruleFormRef = ref<FormInstance>(); const form = ref({ beExaminedDepartmentId: '', ////被考核部门ID/外键 + beExaminedDepartmentName: '', beExaminedPersonId: '', ////被考核人ID/外键(可能有多个,用逗号隔开) + beExaminedPersonName: '', examineDate: '', ////考核日期 examineDepartmentId: '', ////考核部门ID/外键 + examineDepartmentName: '', examinePersonId: '', ////考核人ID/外键 + examinePersonName: '', examineTemplateId: 1, ////绩效考核模板ID/外键 + examineTemplateName: '', examineTotalNumber: '', ////总分 extraFile: '9', //责任书附件 itemDetail: '', ////考核项目 @@ -148,7 +171,7 @@ const disabled = ref(false); // 打开弹窗 const openDailog = (title: string, value: any, id: number) => { - department() + department(); dialogVisible.value = true; titles.value = `${title}安全考核管理`; disabled.value = title == '查看' ? true : false; @@ -163,55 +186,54 @@ } }); }; + // 验证 + const rules = reactive<FormRules>({ + title: [{ required: true, message: '考核标题不能为空', trigger: 'blur' }], + examineDate: [{ required: true, message: '考核日期不能为空', trigger: 'blur' }], + examineDepartmentId: [{ required: true, message: '考核部门不能为空', trigger: 'blur' }], + examinePersonName: [], + examinePersonId: [], + beExaminedDepartmentId: [{ required: true, message: '被考核部门不能为空', trigger: 'blur' }], + beExaminedPersonName: [], + beExaminedPersonId: [], + examineTemplateId: [], + examineTemplateName: [{ required: true, message: '考核模板不能为空', trigger: 'blur' }], + memo: [], + }); // 提交 - const submitForm = () => { - dialogVisible.value = false; - goalManagementApi() - .getexamineMngAddOrUpdate(form.value) - .then((res) => { - if (res.data.code == 200) { - ElMessage({ - message: res.data.msg, - type: 'success', + const submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + dialogVisible.value = false; + goalManagementApi() + .getexamineMngAddOrUpdate(form.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + emit('navAddorUpdata'); + } else { + ElMessage.error(res.data.msg); + } }); - emit('navAddorUpdata'); - } else { - ElMessage.error(res.data.msg); - } - }); - form.value = { - beExaminedDepartmentId: '', ////被考核部门ID/外键 - beExaminedPersonId: '', ////被考核人ID/外键(可能有多个,用逗号隔开) - examineDate: '', ////考核日期 - examineDepartmentId: '', ////考核部门ID/外键 - examinePersonId: '', ////考核人ID/外键 - examineTemplateId: '', ////绩效考核模板ID/外键 - examineTotalNumber: '', ////总分 - extraFile: '9', //责任书附件 - itemDetail: '', ////考核项目 - memo: '', ////备注信息 - numberDetailJson: '[{"id":"123","number":"123"}]', ////各个考核项目的具体得分,json格式。形式为:[{“id”:"123","number":"123"}] - title: '', ////考核标题 - }; + } else { + console.log('error submit!', fields); + } + }); }; // 取消 - const resetForm = () => { + const resetForm = (formEl: FormInstance | undefined) => { + if (!formEl) return; dialogVisible.value = false; - form.value = { - beExaminedDepartmentId: '', ////被考核部门ID/外键 - beExaminedPersonId: '', ////被考核人ID/外键(可能有多个,用逗号隔开) - examineDate: '', ////考核日期 - examineDepartmentId: '', ////考核部门ID/外键 - examinePersonId: '', ////考核人ID/外键 - examineTemplateId: '', ////绩效考核模板ID/外键 - examineTotalNumber: '', ////总分 - extraFile: '9', //责任书附件 - itemDetail: '', ////考核项目 - memo: '', ////备注信息 - numberDetailJson: '[{"id":"123","number":"123"}]', ////各个考核项目的具体得分,json格式。形式为:[{“id”:"123","number":"123"}] - title: '', ////考核标题 - }; + formEl.resetFields(); }; + const handleClose=(formEl: FormInstance | undefined)=>{ + if (!formEl) return; + formEl.resetFields(); + } const activeName = ref('1'); // 新增弹窗 const Show = ref(); @@ -220,7 +242,7 @@ }; // 安全目标指标弹窗 const Shows = ref(); - const daiInpt = (type:any) => { + const daiInpt = (type: any) => { Shows.value.openDailog(type); }; // 点击上传 @@ -253,13 +275,15 @@ () => false ); }; - const userId=(val:any,type:any)=>{ - if(type==1){ - form.value.examinePersonId=val.uid - }else if(type==2){ - form.value.beExaminedPersonId=val.uid - } - } + const userId = (val: any, type: any) => { + if (type == 1) { + form.value.examinePersonId = val.uid; + form.value.examinePersonName = val.realName; + } else if (type == 2) { + form.value.beExaminedPersonId = val.uid; + form.value.beExaminedPersonName = val.realName; + } + }; //全屏 const full = ref(false); const toggleFullscreen = () => { @@ -269,7 +293,7 @@ full.value = false; } }; - //部门 + //部门 const department = () => { goalManagementApi() .getTreedepartment() @@ -284,10 +308,22 @@ const propse = { label: 'depName', children: 'children', - value:"depId" + value: 'depId', }; - const data=ref() + const data = ref(); + const nameData1 = (val: any) => { + form.value.examineDepartmentName = val.depName; + }; + const nameData2 = (val: any) => { + form.value.beExaminedDepartmentName = val.depName; + console.log(form.value); + }; return { + rules, + handleClose, + nameData1, + nameData2, + ruleFormRef, department, propse, data, -- Gitblit v1.9.2