| | |
| | | <template> |
| | | <div class="system-edit-user-container"> |
| | | <el-dialog |
| | | title="新建事故快报" |
| | | v-model="isShowDialog" |
| | | width="769px" |
| | | draggable |
| | | :fullscreen="full" |
| | | > |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form |
| | | ref="ruleFormRef" |
| | | :model="ruleForm" |
| | | size="default" |
| | | label-width="120px" |
| | | > |
| | | <el-row :gutter="35"> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="申报人姓名" prop="teamName"> |
| | | <el-input v-model="ruleForm.teamName" 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.resource"> |
| | | <el-radio label="男" /> |
| | | <el-radio label="女" /> |
| | | </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.responsibleDepartment" |
| | | :data="data" 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="teamLeader"> |
| | | <el-input |
| | | v-model="ruleForm.teamLeader" |
| | | placeholder="请选择" |
| | | class="input-with-select" |
| | | > |
| | | <template #append> |
| | | <el-button :icon="Search" @click="daiInpt"/> |
| | | </template> |
| | | </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="telephone"> |
| | | <el-date-picker |
| | | v-model="value1" |
| | | type="datetime" |
| | | 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="teamLevel"> |
| | | <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> |
| | | <el-option label="轻微伤" value="admin"></el-option> |
| | | <el-option label="轻伤" value="common"></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-date-picker |
| | | v-model="value1" |
| | | type="datetime" |
| | | 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="teamName"> |
| | | <el-input v-model="ruleForm.teamName" 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="teamName"> |
| | | <el-input v-model="ruleForm.teamName" 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="teamName"> |
| | | <el-input v-model="ruleForm.teamName" 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="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> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="注意事项" prop="teamName"> |
| | | <el-input v-model="ruleForm.teamName" 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.resource"> |
| | | <el-radio label="是" /> |
| | | <el-radio label="否" /> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | <div class="system-edit-user-container"> |
| | | <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" :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" :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="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="请选择" 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="accidentName"> |
| | | <el-input v-model="ruleForm.accidentName" :disabled="true" placeholder="请选择" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" @click="daiInpt" /> |
| | | </template> |
| | | </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="occurrenceTime"> |
| | | <el-date-picker |
| | | v-model="ruleForm.occurrenceTime" |
| | | :disabled="true" |
| | | type="datetime" |
| | | class="w100" |
| | | placeholder="选择日期时间" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | /> |
| | | </el-form-item> |
| | | </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" :disabled="disabled" class="w100" placeholder="请选择"> |
| | | <el-option label="轻伤" :value="1"></el-option> |
| | | <el-option label="重伤" :value="2"></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="申报日期" prop="declareDate"> |
| | | <el-date-picker |
| | | v-model="ruleForm.declareDate" |
| | | :disabled="disabled" |
| | | type="datetime" |
| | | class="w100" |
| | | placeholder="选择日期时间" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | /> |
| | | </el-form-item> |
| | | </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" :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" :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" :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="相关附件"> |
| | | <uploaderImg :fileList="fileList" :name="INCIDENT_MANAGE" |
| | | @successUploader="successUploader" :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" :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="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> |
| | | </el-form-item> |
| | | </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.describe" type="textarea" placeholder="请填写备注" maxlength="150"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <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> |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="onCancel" size="default">关闭</el-button> |
| | | <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button> |
| | | <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> |
| | | <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <AccidentName ref="showRef"/> |
| | | <userSelections ref="userRef"/> |
| | | <RegionsDialog ref="openRef"/> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <AccidentName @selectItem="onSelectItem" ref="showRef" /> |
| | | <userSelections ref="userRef" /> |
| | | <RegionsDialog ref="openRef" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { |
| | | reactive, |
| | | ref, |
| | | defineComponent |
| | | reactive, |
| | | ref, |
| | | defineComponent, |
| | | onMounted |
| | | } from 'vue'; |
| | | |
| | | import type { |
| | | UploadUserFile, |
| | | FormInstance, |
| | | } 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 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/contingencyManagement/emergencyResources'; |
| | | import { accidentManagementSystemApi } from '/@/api/workInjuryDeclaration'; |
| | | import { goalManagementApi } from '/@/api/goalManagement'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'openAdd', |
| | | components: { |
| | | AccidentName, |
| | | UserSelections, |
| | | RegionsDialog, |
| | | }, |
| | | setup() { |
| | | const isShowDialog = ref(false) |
| | | name: 'openAdd', |
| | | components: { |
| | | AccidentName, |
| | | UserSelections, |
| | | RegionsDialog, |
| | | uploaderImg |
| | | }, |
| | | setup(props, { emit }) { |
| | | const isShowDialog = ref(false); |
| | | |
| | | const ruleFormRef = ref<FormInstance>() |
| | | //定义表单 |
| | | const ruleForm = reactive({ |
| | | teamName: '', // 队伍名称 |
| | | teamLeader: '', //队伍负责人 |
| | | department: [], // 负责人部门 |
| | | phone: '', // 负责人手机 |
| | | telephone: '', // 固定电话 |
| | | }); |
| | | // 打开弹窗 |
| | | const openDialog = () => { |
| | | // state.ruleForm = row; |
| | | isShowDialog.value = true; |
| | | }; |
| | | // 关闭弹窗 |
| | | const closeDialog = () => { |
| | | isShowDialog.value = false; |
| | | }; |
| | | // 取消 |
| | | const onCancel = () => { |
| | | closeDialog(); |
| | | }; |
| | | //日期选择器 |
| | | const value1 = ref('') |
| | | // 上传附件 |
| | | const fileList = ref<UploadUserFile[]>([]) |
| | | // 可选择树 |
| | | const treeSelect = ref() |
| | | const tree = [ |
| | | { |
| | | value: '1', |
| | | label: 'Level one 1', |
| | | children: [ |
| | | { |
| | | value: '1-1', |
| | | label: 'Level two 1-1', |
| | | children: [ |
| | | { |
| | | value: '1-1-1', |
| | | label: 'Level three 1-1-1', |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '2', |
| | | label: 'Level one 2', |
| | | children: [ |
| | | { |
| | | value: '2-1', |
| | | label: 'Level two 2-1', |
| | | children: [ |
| | | { |
| | | value: '2-1-1', |
| | | label: 'Level three 2-1-1', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '2-2', |
| | | label: 'Level two 2-2', |
| | | children: [ |
| | | { |
| | | value: '2-2-1', |
| | | label: 'Level three 2-2-1', |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '3', |
| | | label: 'Level one 3', |
| | | children: [ |
| | | { |
| | | value: '3-1', |
| | | label: 'Level two 3-1', |
| | | children: [ |
| | | { |
| | | value: '3-1-1', |
| | | label: 'Level three 3-1-1', |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '3-2', |
| | | label: 'Level two 3-2', |
| | | children: [ |
| | | { |
| | | value: '3-2-1', |
| | | label: 'Level three 3-2-1', |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | ] |
| | | //定义树形下拉框 |
| | | const responsibleDepartment = ref() |
| | | const data = [ |
| | | { |
| | | value: '1', |
| | | label: '广汇能源综合物流发展有限责任公司', |
| | | children: [ |
| | | { |
| | | value: '1-1', |
| | | label: '经营班子', |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '2', |
| | | label: '生产运行部', |
| | | children: [ |
| | | { |
| | | value: '2-1', |
| | | label: '灌装一班', |
| | | children: [] |
| | | }, |
| | | { |
| | | value: '2-2', |
| | | label: '工艺四班', |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | value: '3', |
| | | label: '设备部', |
| | | children: [ |
| | | { |
| | | value: '3-1', |
| | | label: '仪表班', |
| | | children: [], |
| | | }, |
| | | { |
| | | value: '3-2', |
| | | label: '机修班', |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | ] |
| | | // 必填项提示 |
| | | // 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 showRef=ref() |
| | | const daiInpt=()=>{ |
| | | showRef.value.openDailog() |
| | | } |
| | | // 表单提交验证必填项 |
| | | const submitForm = async (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | console.log('submit!') |
| | | } else { |
| | | console.log('error submit!', fields) |
| | | } |
| | | }) |
| | | } |
| | | // 选择区域弹窗 |
| | | const openRef=ref() |
| | | const regionsDialog=()=>{ |
| | | openRef.value.openDailog() |
| | | } |
| | | // 打开用户选择弹窗 |
| | | const userRef = ref(); |
| | | const openUser = () => { |
| | | userRef.value.openDialog(); |
| | | }; |
| | | //全屏 |
| | | const full = ref(false); |
| | | const toggleFullscreen = () => { |
| | | if (full.value == false) { |
| | | full.value = true; |
| | | } else { |
| | | full.value = false; |
| | | } |
| | | }; |
| | | return { |
| | | daiInpt, |
| | | openDialog, |
| | | closeDialog, |
| | | isShowDialog, |
| | | onCancel, |
| | | fileList, |
| | | responsibleDepartment, |
| | | data, |
| | | Search, |
| | | ruleForm, |
| | | value1, |
| | | treeSelect, |
| | | tree, |
| | | showRef, |
| | | ruleFormRef, |
| | | submitForm, |
| | | // rules, |
| | | openUser, |
| | | userRef, |
| | | regionsDialog, |
| | | openRef, |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | full, |
| | | }; |
| | | }, |
| | | const ruleFormRef = ref<FormInstance>(); |
| | | //定义表单 |
| | | const ruleForm = ref({ |
| | | declareUserName: '', |
| | | declareUserGender: '', |
| | | declareDepartmentId: '', |
| | | accidentName:'', |
| | | accidentExpressId: '', |
| | | workInjuryType: '', |
| | | declareDate: '', |
| | | lostTime: '', |
| | | visitHospital: '', |
| | | visitResult: '', |
| | | mattersNeedingAttention: '', |
| | | completeMaterials: '', |
| | | remark: '', |
| | | fileList: [ |
| | | { |
| | | fileName: '', |
| | | fileUrl: '', |
| | | }, |
| | | ], |
| | | }); |
| | | const titles = ref(); |
| | | const disabled = ref(); |
| | | // 打开弹窗 |
| | | const openDialog = (title: string, id: number, type: boolean) => { |
| | | isShowDialog.value = true; |
| | | titles.value = title; |
| | | disabled.value = type; |
| | | if (title == '查看工伤申报' || title == '修改工伤申报') { |
| | | accidentManagementSystemApi() |
| | | .seeAccidentManagementSystem(id) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ruleForm.value = res.data.data; |
| | | fileList.value = (res.data.data.fileList?res.data.data.fileList:[]) |
| | | initFileListData() |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | const initFileListData = async () => { |
| | | for(var a = 0;a<fileList.value.length;a++){ |
| | | await goalManagementApi() |
| | | .searchFile(fileList.value[a].fileName) |
| | | .then((res) => { |
| | | fileList.value[a].url = res.data |
| | | }) |
| | | } |
| | | } |
| | | // 上传成功组装数据 |
| | | const successUploader = (list) =>{ |
| | | fileList.value = list |
| | | const formFileList = [] |
| | | for(var a = 0;a<fileList.value.length;a++){ |
| | | formFileList.push( |
| | | { |
| | | fileName:fileList.value[a].fileName, |
| | | fileUrl:'' |
| | | } |
| | | ) |
| | | } |
| | | ruleForm.value.fileList = formFileList |
| | | } |
| | | //日期选择器 |
| | | const value1 = ref(''); |
| | | // 上传附件 |
| | | const fileList = ref<UploadUserFile[]>([]); |
| | | // 可选择树 |
| | | const treeSelect = ref(); |
| | | const tree = [ |
| | | ]; |
| | | //定义树形下拉框 |
| | | const responsibleDepartment = ref(); |
| | | const data = [ |
| | | |
| | | ]; |
| | | //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(); |
| | | fileList.value=[] |
| | | isShowDialog.value = false; |
| | | }; |
| | | // 必填项提示 |
| | | 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(); |
| | | const daiInpt = () => { |
| | | showRef.value.openDailog(); |
| | | }; |
| | | //事故快报回填 |
| | | const onSelectItem = (item: any) => { |
| | | 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) => { |
| | | if(!ruleForm.value.fileList){ |
| | | ruleForm.value.fileList = [] |
| | | } |
| | | if (title == '新建工伤申报') { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | isShowDialog.value = false; |
| | | delete ruleForm.value.accidentName |
| | | delete ruleForm.value.occurrenceTime |
| | | delete ruleForm.value.id |
| | | accidentManagementSystemApi() |
| | | .workAdd(ruleForm.value) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'success', |
| | | }); |
| | | emit('myAdd', true); |
| | | } else { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'error', |
| | | }); |
| | | emit('myAdd', true); |
| | | } |
| | | formEl.resetFields(); |
| | | }); |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | | }); |
| | | } else if (title == '修改工伤申报') { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | isShowDialog.value = false; |
| | | delete ruleForm.value.accidentName |
| | | delete ruleForm.value.occurrenceTime |
| | | accidentManagementSystemApi() |
| | | .workView(ruleForm.value) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: '修改成功', |
| | | type: 'success', |
| | | }); |
| | | emit('myAdd', true); |
| | | } else { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'error', |
| | | }); |
| | | emit('myAdd', true); |
| | | } |
| | | formEl.resetFields(); |
| | | }); |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | | }); |
| | | formEl.resetFields(); |
| | | ruleForm.value = { |
| | | declareUserName: '', |
| | | declareUserGender: '', |
| | | declareDepartmentId: '', |
| | | accidentExpressId: '', |
| | | workInjuryType: '', |
| | | declareDate: '', |
| | | lostTime: '', |
| | | visitHospital: '', |
| | | visitResult: '', |
| | | mattersNeedingAttention: '', |
| | | completeMaterials: '', |
| | | remark: '', |
| | | fileList: [ |
| | | { |
| | | fileName: '', |
| | | fileUrl: '', |
| | | }, |
| | | ], |
| | | }; |
| | | } |
| | | }; |
| | | const resetForm = (formEl: FormInstance | undefined) => { |
| | | isShowDialog.value = false; |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | }; |
| | | // 选择区域弹窗 |
| | | const openRef = ref(); |
| | | const regionsDialog = () => { |
| | | openRef.value.openDailog(); |
| | | }; |
| | | // 打开用户选择弹窗 |
| | | const userRef = ref(); |
| | | const openUser = () => { |
| | | userRef.value.openDialog(); |
| | | }; |
| | | //全屏 |
| | | const full = ref(false); |
| | | const toggleFullscreen = () => { |
| | | if (full.value == false) { |
| | | full.value = true; |
| | | } else { |
| | | full.value = false; |
| | | } |
| | | }; |
| | | return { |
| | | daiInpt, |
| | | openDialog, |
| | | isShowDialog, |
| | | fileList, |
| | | responsibleDepartment, |
| | | data, |
| | | Search, |
| | | ruleForm, |
| | | value1, |
| | | treeSelect, |
| | | tree, |
| | | showRef, |
| | | ruleFormRef, |
| | | submitForm, |
| | | rules, |
| | | openUser, |
| | | userRef, |
| | | regionsDialog, |
| | | openRef, |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | full, |
| | | resetForm, |
| | | titles, |
| | | disabled, |
| | | emit, |
| | | onSelectItem, |
| | | department, |
| | | getTreeList, |
| | | newTreeList, |
| | | propse, |
| | | closeDialog, |
| | | uploaderImg, |
| | | successUploader, |
| | | initFileListData |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | | .textarea{ |
| | | height: 168px!important; |
| | | .textarea { |
| | | height: 168px !important; |
| | | } |
| | | .textarea ::v-deep .el-textarea__inner{ |
| | | height: 168px!important; |
| | | .textarea ::v-deep .el-textarea__inner { |
| | | height: 168px !important; |
| | | } |
| | | ::v-deep .el-table__cell { |
| | | font-weight: 400; |
| | | font-weight: 400; |
| | | } |
| | | .el-divider--horizontal{ |
| | | height: 0; |
| | | margin: 0; |
| | | border-top: transparent; |
| | | .el-divider--horizontal { |
| | | height: 0; |
| | | margin: 0; |
| | | border-top: transparent; |
| | | } |
| | | .el-select{ |
| | | width: 100%; |
| | | .el-select { |
| | | width: 100%; |
| | | } |
| | | </style> |
| | | </style> |