From aeef44031f90e5a7b0cb05da884b38f5047e7d21 Mon Sep 17 00:00:00 2001 From: zhaojiale <631455805@qq.com> Date: 星期四, 04 八月 2022 15:21:02 +0800 Subject: [PATCH] 工伤申报除图片外完成 --- src/views/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue | 359 ++++++++++++++++++++++++++++------------------------------- 1 files changed, 170 insertions(+), 189 deletions(-) diff --git a/src/views/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue b/src/views/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue index 6a9b467..524521f 100644 --- a/src/views/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue +++ b/src/views/accidentManagementSystem/workInjuryDeclaration/component/openAdd.vue @@ -1,30 +1,31 @@ <template> <div class="system-edit-user-container"> - <el-dialog :title="titles" v-model="isShowDialog" width="769px" draggable :fullscreen="full"> + <el-dialog :title="titles" v-model="isShowDialog" width="769px" draggable :fullscreen="full" @close="closeDialog(ruleFormRef)"> <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> - <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px" :disabled="disabled"> + <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px" :rules="rules"> <el-row :gutter="35"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="申报人姓名" prop="declareUserName"> - <el-input v-model="ruleForm.declareUserName" placeholder="请填写申报人姓名"></el-input> + <el-input v-model="ruleForm.declareUserName" :disabled="disabled" placeholder="请填写申报人姓名"></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="申报人性别"> - <el-radio-group v-model="ruleForm.declareUserGender"> + <el-form-item label="申报人性别" prop="declareUserGender"> + <el-radio-group v-model="ruleForm.declareUserGender" :disabled="disabled"> <el-radio :label="false">男</el-radio> <el-radio :label="true">女</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="申报人部门" placeholder="请选择"> - <el-tree-select v-model="ruleForm.declareDepartmentId" :data="data" class="w100" placeholder="请选择" /> + <el-form-item label="申报人部门" placeholder="请选择" prop="declareDepartmentId"> + <el-tree-select v-model="ruleForm.declareDepartmentId" :disabled="disabled" + :data="newTreeList" :props="propse" class="w100" placeholder="请选择" /> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="事故名称" prop="accidentExpressId"> - <el-input v-model="ruleForm.accidentExpressId" placeholder="请选择" class="input-with-select"> + <el-form-item label="事故名称" prop="accidentName"> + <el-input v-model="ruleForm.accidentName" :disabled="true" placeholder="请选择" class="input-with-select"> <template #append> <el-button :icon="Search" @click="daiInpt" /> </template> @@ -35,6 +36,7 @@ <el-form-item label="事故发生时间" prop="occurrenceTime"> <el-date-picker v-model="ruleForm.occurrenceTime" + :disabled="true" type="datetime" class="w100" placeholder="选择日期时间" @@ -44,16 +46,17 @@ </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="工伤类型" prop="workInjuryType"> - <el-select v-model="ruleForm.workInjuryType" class="w100" placeholder="请选择"> + <el-select v-model="ruleForm.workInjuryType" :disabled="disabled" class="w100" placeholder="请选择"> <el-option label="轻微伤" value="轻微伤"></el-option> <el-option label="轻伤" value="轻伤"></el-option> </el-select> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="申报日期"> + <el-form-item label="申报日期" prop="declareDate"> <el-date-picker v-model="ruleForm.declareDate" + :disabled="disabled" type="datetime" class="w100" placeholder="选择日期时间" @@ -63,42 +66,32 @@ </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="损失工时" prop="lostTime"> - <el-input v-model="ruleForm.lostTime" placeholder="请填写损失工时"></el-input> + <el-input v-model="ruleForm.lostTime" :disabled="disabled" placeholder="请填写损失工时"></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="就诊医院" prop="visitHospital"> - <el-input v-model="ruleForm.visitHospital" placeholder="请填写就诊医院"></el-input> + <el-input v-model="ruleForm.visitHospital" :disabled="disabled" placeholder="请填写就诊医院"></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="就诊结果" prop="visitResult"> - <el-input v-model="ruleForm.visitResult" placeholder="请填写就诊结果"></el-input> + <el-input v-model="ruleForm.visitResult" :disabled="disabled" placeholder="请填写就诊结果"></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <el-form-item label="相关附件"> - <el-upload - v-model:file-list="ruleForm.fileList" - class="upload-demo" - action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" - :on-change="handleChange" - > - <el-button type="primary">点击上传</el-button> - <template #tip> - <div class="el-upload__tip">添加相关附件</div> - </template> - </el-upload> + <uploaderImg :fileList="fileList" :disabled="disabled"></uploaderImg> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="注意事项" prop="mattersNeedingAttention"> - <el-input v-model="ruleForm.mattersNeedingAttention" placeholder="请填写注意事项"></el-input> + <el-input v-model="ruleForm.mattersNeedingAttention" :disabled="disabled" placeholder="请填写注意事项"></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="材料是否齐全"> - <el-radio-group v-model="ruleForm.completeMaterials"> + <el-form-item label="材料是否齐全" prop="completeMaterials"> + <el-radio-group v-model="ruleForm.completeMaterials" :disabled="disabled"> <el-radio :label="false">否</el-radio> <el-radio :label="true">是</el-radio> </el-radio-group> @@ -106,8 +99,8 @@ </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="备注"> - <el-input v-model="ruleForm.remark" type="textarea" placeholder="请填写备注" maxlength="150"></el-input> + <el-form-item label="备注" prop="remark"> + <el-input v-model="ruleForm.remark" :disabled="disabled" type="textarea" placeholder="请填写备注" maxlength="150"></el-input> </el-form-item> </el-col> </el-row> @@ -127,19 +120,22 @@ <script lang="ts"> import { - // reactive, + reactive, ref, defineComponent, + onMounted } from 'vue'; -import type { UploadUserFile, FormInstance } from 'element-plus'; +import type { UploadUserFile, FormInstance,FormRules } from 'element-plus'; import { ElMessage } from 'element-plus'; import { Search, FullScreen } from '@element-plus/icons-vue'; import UserSelections from '/@/components/userSelections/index.vue'; import AccidentName from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue'; import RegionsDialog from '/@/components/regionsDialog/index.vue'; +import uploaderImg from '/@/components/uploaderImg/index.vue'; import { emergencySuppliesApi } from '/@/api/emergencyResources'; import { accidentManagementSystemApi } from '/@/api/workInjuryDeclaration'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ name: 'openAdd', @@ -147,6 +143,7 @@ AccidentName, UserSelections, RegionsDialog, + uploaderImg }, setup(props, { emit }) { const isShowDialog = ref(false); @@ -157,6 +154,7 @@ declareUserName: '', declareUserGender: '', declareDepartmentId: '', + accidentName:'', accidentExpressId: '', workInjuryType: '', declareDate: '', @@ -197,167 +195,141 @@ // 可选择树 const treeSelect = ref(); const tree = [ - { - value: '1', - label: 'Level one 1', - children: [ - { - value: '11', - label: 'Level two 1-1', - children: [ - { - value: '111', - label: 'Level three 1-1-1', - }, - ], - }, - ], - }, - { - value: '2', - label: 'Level one 2', - children: [ - { - value: '21', - label: 'Level two 2-1', - children: [ - { - value: '211', - label: 'Level three 2-1-1', - }, - ], - }, - { - value: '22', - label: 'Level two 2-2', - children: [ - { - value: '221', - label: 'Level three 2-2-1', - }, - ], - }, - ], - }, - { - value: '3', - label: 'Level one 3', - children: [ - { - value: '31', - label: 'Level two 3-1', - children: [ - { - value: '311', - label: 'Level three 3-1-1', - }, - ], - }, - { - value: '32', - label: 'Level two 3-2', - children: [ - { - value: '321', - label: 'Level three 3-2-1', - }, - ], - }, - ], - }, ]; //定义树形下拉框 const responsibleDepartment = ref(); const data = [ - { - value: '1', - label: '广汇能源综合物流发展有限责任公司', - children: [ - { - value: '11', - label: '经营班子', - children: [], - }, - ], - }, - { - value: '2', - label: '生产运行部', - children: [ - { - value: '21', - label: '灌装一班', - children: [], - }, - { - value: '22', - label: '工艺四班', - children: [], - }, - ], - }, - { - value: '3', - label: '设备部', - children: [ - { - value: '31', - label: '仪表班', - children: [], - }, - { - value: '32', - label: '机修班', - children: [], - }, - ], - }, + ]; + //el-tree-select回显 + const propse = { + label: 'depName', + children: 'children', + }; + const newTreeList = []; + //得到部门树 + const department = async () => { + await goalManagementApi() + .getTreedepartment() + .then((res) => { + if (res.data.code == 200) { + data.value = res.data.data; + getTreeList(res.data.data, newTreeList); + } else { + ElMessage.error(res.data.msg); + } + }); + }; + // 递归树状数据且修改字段名 + const getTreeList = (treeList, newTreeList) => { + treeList.map((c) => { + let tempData = { + depName: c.depName, + value: c.depId, + children: [], + }; + if (c.children && c.children.length > 0) { + tempData.children = []; + getTreeList(c.children, tempData.children); + } + newTreeList.push(tempData); + }); + }; + onMounted(() => { + department(); + }); + // 关闭弹窗 + const closeDialog = (formEl: FormInstance | undefined) => { + formEl.resetFields(); + isShowDialog.value = false; + }; // 必填项提示 - // const rules = reactive<FormRules>({ - // teamName: [ - // { - // required: true, - // message: '队伍名称不能为空', - // trigger: 'change', - // }, - // ], - // teamLevel: [ - // { - // required: true, - // message: '队伍级别不能为空', - // trigger: 'change', - // }, - // ], - // teamLeader: [ - // { - // required: true, - // message: '队伍负责人不能为空', - // trigger: 'change', - // }, - // ], - // responsibleDepartment: [ - // { - // required: true, - // message: '负责人部门不能为空', - // trigger: 'change', - // }, - // ], - // teamPhone: [ - // { - // required: true, - // message: '负责人手机不能为空', - // trigger: 'change', - // }, - // ], - // telephone: [ - // { - // required: true, - // message: '固定电话不能为空', - // trigger: 'change', - // }, - // ], - // }) + const rules = reactive<FormRules>({ + declareUserName: [ + { + required: true, + message: '申报人姓名不能为空', + trigger: 'change', + }, + ], + declareUserGender: [ + { + required: true, + message: '申报人性别不能为空', + trigger: 'change', + }, + ], + declareDepartmentId: [ + { + required: true, + message: '申报人部门不能为空', + trigger: 'change', + }, + ], + accidentName: [ + { + required: true, + message: '事故名称不能为空', + trigger: 'change', + }, + ], + workInjuryType: [ + { + required: true, + message: '工伤类型不能为空', + trigger: 'change', + }, + ], + declareDate: [ + { + required: true, + message: '申报日期不能为空', + trigger: 'blur', + }, + ], + lostTime: [ + { + required: true, + message: '损失工时不能为空', + trigger: 'change', + }, + ], + visitHospital: [ + { + required: true, + message: '就诊医院不能为空', + trigger: 'change', + }, + ], + visitResult: [ + { + required: true, + message: '就诊结果不能为空', + trigger: 'change', + }, + ], + mattersNeedingAttention: [ + { + required: true, + message: '注意事项不能为空', + trigger: 'change', + }, + ], + completeMaterials: [ + { + required: true, + message: '材料状态不能为空', + trigger: 'change', + }, + ], + remark: [ + { + required: true, + message: '备注不能为空', + trigger: 'change', + }, + ] + }) // 事故名称弹窗 const showRef = ref(); @@ -366,8 +338,11 @@ }; //事故快报回填 const onSelectItem = (item: any) => { - alert(1); console.log('item', item); + ruleForm.value.accidentExpressId = item[0].id + ruleForm.value.accidentName = item[0].accidentName + ruleForm.value.occurrenceTime = item[0].occurrenceTime + }; // 表单提交验证必填项 const submitForm = async (title: string, formEl: FormInstance | undefined) => { @@ -491,7 +466,7 @@ showRef, ruleFormRef, submitForm, - // rules, + rules, openUser, userRef, regionsDialog, @@ -504,6 +479,12 @@ disabled, emit, onSelectItem, + department, + getTreeList, + newTreeList, + propse, + closeDialog, + uploaderImg }; }, }); -- Gitblit v1.9.2