| | |
| | | <template> |
| | | <div class="system-edit-user-container"> |
| | | <el-dialog :title="titles" v-model="isShowDialog" width="800px" draggable :fullscreen="full" @close="closeDialog(ruleFormRef)"> |
| | | <el-dialog :title="titles" v-model="isShowDialog" width="800px" draggable :fullscreen="full" @close="resetForm(ruleFormRef)"> |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules" label-width="140px"> |
| | | <el-row :gutter="35"> |
| | | <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"> |
| | | <el-form-item label="事故快报" prop="accidentExpressId"> |
| | | <el-input v-model="accidentName" :disabled="true" placeholder="请选择" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" @click="daiInpt" /> |
| | | </template> |
| | |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="事故部门" placeholder="请选择" prop="accidentDepartmentId"> |
| | | <!--<el-input v-model="ruleForm.accidentDepartmentName" class="input-with-select" />--> |
| | | <el-tree-select v-model="ruleForm.accidentDepartmentId" :disabled="true" :data="newTreeList" |
| | | <el-tree-select v-model="accidentDepartmentId" :disabled="true" :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="occurrencePlace"> |
| | | <el-input v-model="ruleForm.occurrencePlace" :disabled="true" placeholder="请填写发生地点"></el-input> |
| | | <el-input v-model="occurrencePlace" :disabled="true" 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="occurrenceTime"> |
| | | <el-date-picker |
| | | v-model="ruleForm.occurrenceTime" |
| | | v-model="occurrenceTime" |
| | | :disabled="true" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | type="datetime" |
| | |
| | | //定义表单 |
| | | const ruleForm = ref({ |
| | | accidentExpressId:'', |
| | | accidentExpressName:'', |
| | | accidentDepartmentId:'', |
| | | accidentDepartmentName:'', |
| | | occurrencePlace:'', |
| | | occurrenceTime:'', |
| | | |
| | | |
| | | |
| | | accidentType: '', |
| | | accidentGrade: '', |
| | |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ruleForm.value = res.data.data; |
| | | accidentName.value = res.data.data.accidentName |
| | | accidentDepartmentId.value = res.data.data.accidentDepartmentId |
| | | occurrencePlace.value = res.data.data.occurrencePlace |
| | | occurrenceTime.value = res.data.data.occurrenceTime |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | // 关闭弹窗 |
| | | const closeDialog = (formEl: FormInstance | undefined) => { |
| | | formEl.resetFields(); |
| | | console.log(ruleForm) |
| | | isShowDialog.value = false; |
| | | }; |
| | | // 取消 |
| | | const onCancel = (formEl: FormInstance | undefined) => { |
| | | closeDialog(formEl); |
| | | resetForm(formEl); |
| | | }; |
| | | //日期选择器 |
| | | const value1 = ref(''); |
| | |
| | | ]; |
| | | // 必填项提示 |
| | | const rules = reactive<FormRules>({ |
| | | accidentDepartmentId: [ |
| | | accidentExpressId: [ |
| | | { |
| | | required: true, |
| | | message: '事故部门不能为空', |
| | | message: '快报不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | occurrenceTime: [ |
| | | { |
| | | required: true, |
| | | message: '发生时间不能为空', |
| | | trigger: 'blur', |
| | | }, |
| | | ], |
| | | accidentType: [ |
| | |
| | | }, |
| | | ], |
| | | }); |
| | | const accidentDepartmentId = ref() |
| | | const occurrencePlace = ref() |
| | | const occurrenceTime = ref() |
| | | const accidentName = ref() |
| | | //事故快报回填 |
| | | const onSelectItem = (item: any) => { |
| | | console.log('item', item[0]); |
| | | ruleForm.value.accidentExpressId = item[0].id |
| | | ruleForm.value.accidentName = item[0].accidentName |
| | | ruleForm.value.accidentDepartmentId = item[0].accidentDepartmentId |
| | | ruleForm.value.accidentDepartmentName = item[0].deptName |
| | | ruleForm.value.occurrencePlace = item[0].occurrencePlace |
| | | ruleForm.value.occurrenceTime = item[0].occurrenceTime |
| | | accidentName.value = item[0].accidentName |
| | | accidentDepartmentId.value = item[0].accidentDepartmentId |
| | | occurrencePlace.value = item[0].occurrencePlace |
| | | occurrenceTime.value = item[0].occurrenceTime |
| | | }; |
| | | // 表单提交验证必填项 |
| | | const submitForm = async (title: string, formEl: FormInstance | undefined) => { |
| | | delete ruleForm.value.accidentName |
| | | delete ruleForm.value.accidentDepartmentId |
| | | delete ruleForm.value.occurrencePlace |
| | | delete ruleForm.value.occurrenceTime |
| | | |
| | | if (title == '新建事故报告') { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | |
| | | formEl.resetFields(); |
| | | ruleForm.value = { |
| | | accidentExpressId:'', |
| | | accidentExpressName:'', |
| | | accidentDepartmentId:'', |
| | | accidentDepartmentName:'', |
| | | occurrencePlace:'', |
| | | occurrenceTime:'', |
| | | |
| | | |
| | | |
| | | accidentType: '', |
| | | accidentGrade: '', |
| | |
| | | isShowDialog.value = false; |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | // ruleForm.value.accidentExpressId = item[0].id |
| | | ruleForm.value = {} |
| | | accidentName.value = '' |
| | | accidentDepartmentId.value = '' |
| | | occurrencePlace.value = '' |
| | | occurrenceTime.value = '' |
| | | }; |
| | | const handleChange = (val: number) => { |
| | | console.log(val); |
| | |
| | | }; |
| | | return { |
| | | openDialog, |
| | | closeDialog, |
| | | isShowDialog, |
| | | onCancel, |
| | | fileList, |
| | |
| | | department, |
| | | getTreeList, |
| | | propse, |
| | | statusDisabled |
| | | statusDisabled, |
| | | accidentDepartmentId, |
| | | occurrencePlace, |
| | | occurrenceTime, |
| | | accidentName |
| | | }; |
| | | }, |
| | | }); |