| | |
| | | <template> |
| | | <div class="system-edit-user-container"> |
| | | <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full"> |
| | | <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full" @close="closeDialog(ruleFormRef)"> |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form ref="ruleFormRef" :disabled="disabled" :model="ruleForm" :rules="rules" size="default" label-width="140px"> |
| | | <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" size="default" 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" placeholder="请填写事故名称"></el-input> |
| | | <el-input v-model="ruleForm.accidentName" :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="事故部门" placeholder="请选择" prop="accidentDepartmentId"> |
| | | <el-tree-select v-model="ruleForm.accidentDepartmentId" :props="propse" :data="newTreeList" class="w100" placeholder="请选择" /> |
| | | <el-tree-select |
| | | v-model="ruleForm.accidentDepartmentId" |
| | | :disabled="disabled" |
| | | :props="propse" |
| | | :data="newTreeList" |
| | | 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" placeholder="请填写发生地点"></el-input> |
| | | <el-input v-model="ruleForm.occurrencePlace" :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="occurrenceTime"> |
| | | <!--<el-input v-model="ruleForm.occurrenceTime" :disabled="disabled" placeholder="请填写发生时间"></el-input>--> |
| | | <el-date-picker |
| | | :disabled="disabled" |
| | | v-model="ruleForm.occurrenceTime" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | type="datetime" |
| | |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="事故原因" prop="accidentCause"> |
| | | <el-select v-model="ruleForm.accidentCause" class="w100" placeholder="请选择"> |
| | | <el-option label="人的不安全行为" value="admin"></el-option> |
| | | <el-option label="物的不安全状态" value="common"></el-option> |
| | | <el-select v-model="ruleForm.accidentCause" :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="casualties"> |
| | | <el-radio-group v-model="ruleForm.casualties" @change="typeChang"> |
| | | <el-radio-group v-model="ruleForm.casualties" :disabled="disabled" @change="typeChang"> |
| | | <el-radio :label="true">是</el-radio> |
| | | <el-radio :label="false">否</el-radio> |
| | | </el-radio-group> |
| | |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="事故简要经过" prop="accidentBriefProcess"> |
| | | <el-input v-model="ruleForm.accidentBriefProcess" type="textarea" placeholder="请填写事故简要经过" maxlength="150"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.accidentBriefProcess" |
| | | :disabled="disabled" |
| | | type="textarea" |
| | | placeholder="请填写事故简要经过" |
| | | maxlength="150" |
| | | ></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="accidentCausesPreliminaryAnalysis"> |
| | | <el-input |
| | | v-model="ruleForm.accidentCausesPreliminaryAnalysis" |
| | | :disabled="disabled" |
| | | type="textarea" |
| | | placeholder="请填写事故原因初步分析" |
| | | maxlength="150" |
| | |
| | | </el-col> |
| | | <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="应急防范措施" prop="emergencyPrecautions"> |
| | | <el-input v-model="ruleForm.emergencyPrecautions" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.emergencyPrecautions" |
| | | :disabled="disabled" |
| | | type="textarea" |
| | | placeholder="请填写应急防范措施" |
| | | maxlength="150" |
| | | ></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-input v-model="ruleForm.fileList" type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input> |
| | | <el-form-item label="事故照片" prop="fileList"> |
| | | <!--<el-input v-model="ruleForm.fileList" :disabled="disabled"--> |
| | | <!--type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>--> |
| | | <uploaderImg :fileList="fileListDemo"></uploaderImg> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { reactive, ref, defineComponent, defineEmits,onMounted} from 'vue'; |
| | | import { reactive, ref, defineComponent, defineEmits, onMounted } from 'vue'; |
| | | |
| | | import type { UploadUserFile, FormInstance, FormRules } from 'element-plus'; |
| | | import { ElMessage } from 'element-plus'; |
| | |
| | | import NumberOfCasualties from '/@/views/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue'; |
| | | import UserSelections from '/@/components/userSelections/index.vue'; |
| | | import CheckTemplate from '/@/components/checkTemplate/index.vue'; |
| | | import uploaderImg from '/@/components/uploaderImg/index.vue'; |
| | | import RegionsDialog from '/@/components/regionsDialog/index.vue'; |
| | | import { accidentManagementSystemApi } from '/@/api/accidentManagementSystem'; |
| | | import { goalManagementApi } from '/@/api/goalManagement'; |
| | |
| | | UserSelections, |
| | | RegionsDialog, |
| | | NumberOfCasualties, |
| | | uploaderImg, |
| | | }, |
| | | setup(props, { emit }) { |
| | | const isShowDialog = ref(false); |
| | |
| | | occurrencePlace: '', |
| | | accidentDepartmentId: '', |
| | | accidentName: '', |
| | | fileList: [ |
| | | { |
| | | fileUrl: 'url', |
| | | fileName: 'name', |
| | | }, |
| | | ], |
| | | fileList: [], |
| | | id: '', |
| | | }); |
| | | const titles = ref(); |
| | | const disabled = ref(); |
| | |
| | | const value1 = ref(''); |
| | | // 上传附件 |
| | | const fileList = ref<UploadUserFile[]>([]); |
| | | const fileListDemo = ref<UploadUserFile[]>([ |
| | | { |
| | | name: 'food.jpeg', |
| | | url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100', |
| | | }, |
| | | { |
| | | name: 'food.jpeg', |
| | | url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100', |
| | | }, |
| | | ]); |
| | | // 可选择树 |
| | | const treeSelect = ref(); |
| | | |
| | | //定义树形下拉框 |
| | | const responsibleDepartment = ref(); |
| | | const data = [ |
| | | { |
| | | "value": 1, |
| | | "deptName": "总部门", |
| | | "children": [] |
| | | }, |
| | | { |
| | | "value": 3, |
| | | "deptName": "根部门2", |
| | | "children": [ |
| | | { |
| | | "value": 7, |
| | | "deptName": "子部门88", |
| | | "children": [] |
| | | } |
| | | ] |
| | | } |
| | | ]; |
| | | const data = []; |
| | | //el-tree-select回显 |
| | | const propse = { |
| | | label: 'depName', |
| | | children: 'children' |
| | | children: 'children', |
| | | }; |
| | | const newTreeList = [] |
| | | const newTreeList = []; |
| | | //得到部门树 |
| | | const department = async() => { |
| | | 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); |
| | | } |
| | | }); |
| | | .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:[] |
| | | 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); |
| | | } |
| | | if(c.children && c.children.length>0){ |
| | | tempData.children=[] |
| | | getTreeList(c.children,tempData.children) |
| | | } |
| | | newTreeList.push(tempData) |
| | | }) |
| | | } |
| | | newTreeList.push(tempData); |
| | | }); |
| | | }; |
| | | onMounted(() => { |
| | | department() |
| | | department(); |
| | | }); |
| | | // 必填项提示 |
| | | const rules = reactive<FormRules>({ |
| | |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | occurrenceTime: [{ type: 'date', required: true, message: '发生时间不能为空', trigger: 'change' }], |
| | | occurrenceTime: [{ type: 'date', required: true, message: '发生时间不能为空', trigger: 'blur' }], |
| | | accidentCause: [ |
| | | { |
| | | required: true, |
| | |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | isShowDialog.value = false; |
| | | ruleForm.value.id = null; |
| | | accidentManagementSystemApi() |
| | | .accidentAdd(ruleForm.value) |
| | | .then((res) => { |
| | |
| | | if (valid) { |
| | | isShowDialog.value = false; |
| | | ruleForm.value.fileList = [ |
| | | { |
| | | fileUrl: 'url', |
| | | fileName: 'name', |
| | | }, |
| | | // { |
| | | // fileUrl: 'url', |
| | | // fileName: 'name', |
| | | // }, |
| | | ]; |
| | | accidentManagementSystemApi() |
| | | .accidentView(ruleForm.value) |
| | |
| | | } |
| | | }); |
| | | formEl.resetFields(); |
| | | ruleForm.value = { |
| | | emergencyPrecautions: '', |
| | | accidentCausesPreliminaryAnalysis: '', |
| | | accidentBriefProcess: '', |
| | | casualties: '', |
| | | accidentCause: '', |
| | | occurrenceTime: '', |
| | | occurrencePlace: '', |
| | | accidentDepartmentId: '', |
| | | accidentName: '', |
| | | fileList: [ |
| | | { |
| | | fileUrl: 'url', |
| | | fileName: 'name', |
| | | }, |
| | | ], |
| | | }; |
| | | } |
| | | ruleForm.value = { |
| | | accidentExpressId: '', |
| | | emergencyPrecautions: '', |
| | | accidentCausesPreliminaryAnalysis: '', |
| | | accidentBriefProcess: '', |
| | | casualties: '', |
| | | accidentCause: '', |
| | | occurrenceTime: '', |
| | | occurrencePlace: '', |
| | | accidentDepartmentId: '', |
| | | accidentName: '', |
| | | fileList: [], |
| | | }; |
| | | }; |
| | | const resetForm = (formEl: FormInstance | undefined) => { |
| | | isShowDialog.value = false; |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | }; |
| | | const closeDialog = (formEl: FormInstance | undefined) => { |
| | | formEl.resetFields(); |
| | | console.log(ruleForm); |
| | | isShowDialog.value = false; |
| | | }; |
| | | // 是否有伤亡弹窗 |
| | | const typeChang = () => { |
| | |
| | | }; |
| | | const ShowUser = ref(); |
| | | const openDai = () => { |
| | | ShowUser.value.openDialog(); |
| | | ShowUser.value.openDialog(ruleForm.value.id, disabled.value); |
| | | }; |
| | | // 应急队伍弹窗 |
| | | const Shows = ref(); |
| | |
| | | propse, |
| | | department, |
| | | getTreeList, |
| | | newTreeList |
| | | newTreeList, |
| | | closeDialog, |
| | | fileListDemo, |
| | | }; |
| | | }, |
| | | }); |