From f931c3a8fe0a7bf5c59c3cd75b9f3b017d1d84be Mon Sep 17 00:00:00 2001 From: 13937891274 <kxc0822> Date: 星期三, 03 八月 2022 17:22:21 +0800 Subject: [PATCH] 数据对接 --- src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue | 277 +++++++++++++++++++++++------------------------------- 1 files changed, 119 insertions(+), 158 deletions(-) diff --git a/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue b/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue index 2bfd430..913ac7f 100644 --- a/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue +++ b/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue @@ -1,56 +1,67 @@ <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" :data="data" 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-date-picker v-model="ruleForm.occurrenceTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" class="w100" placeholder="选择日期时间" /> + <!--<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" + 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="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-button v-if="ruleForm.casualties" type="primary" style="margin-left: 20px" :icon="Edit" @click="openDai" round plain /> + <el-button v-if="ruleForm.casualties" type="primary" + style="margin-left: 20px" :icon="Edit" @click="openDai" round plain /> </el-form-item> </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" @@ -59,12 +70,15 @@ </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.describe" 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> @@ -84,7 +98,7 @@ </template> <script lang="ts"> -import { reactive, ref, defineComponent, defineEmits } from 'vue'; +import { reactive, ref, defineComponent, defineEmits,onMounted} from 'vue'; import type { UploadUserFile, FormInstance, FormRules } from 'element-plus'; import { ElMessage } from 'element-plus'; @@ -92,8 +106,10 @@ 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'; export default defineComponent({ name: 'openAdd', components: { @@ -101,6 +117,7 @@ UserSelections, RegionsDialog, NumberOfCasualties, + uploaderImg }, setup(props, { emit }) { const isShowDialog = ref(false); @@ -117,12 +134,8 @@ occurrencePlace: '', accidentDepartmentId: '', accidentName: '', - fileList: [ - { - fileUrl: 'url', - fileName: 'name', - }, - ], + fileList: [], + id:'' }); const titles = ref(); const disabled = ref(); @@ -131,7 +144,7 @@ isShowDialog.value = true; titles.value = title; disabled.value = type; - if (title == '事故块表详情' || title == '修改事故快报') { + if (title == '查看事故快报' || title == '修改事故快报') { accidentManagementSystemApi() .accidentScarh(id) .then((res) => { @@ -145,125 +158,60 @@ 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 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: '11', - 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: [], - }, - ], - }, ]; + //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 rules = reactive<FormRules>({ accidentName: [ @@ -287,7 +235,7 @@ trigger: 'change', }, ], - occurrenceTime: [{ type: 'date', required: true, message: '发生时间不能为空', trigger: 'change' }], + occurrenceTime: [{ type: 'date', required: true, message: '发生时间不能为空', trigger: 'blur' }], accidentCause: [ { required: true, @@ -333,6 +281,7 @@ await formEl.validate((valid, fields) => { if (valid) { isShowDialog.value = false; + ruleForm.value.id = null accidentManagementSystemApi() .accidentAdd(ruleForm.value) .then((res) => { @@ -362,6 +311,12 @@ await formEl.validate((valid, fields) => { if (valid) { isShowDialog.value = false; + ruleForm.value.fileList = [ + // { + // fileUrl: 'url', + // fileName: 'name', + // }, + ]; accidentManagementSystemApi() .accidentView(ruleForm.value) .then((res) => { @@ -387,37 +342,38 @@ } }); 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 = () => { console.log('tag', ruleForm); }; const ShowUser = ref(); const openDai = () => { - ShowUser.value.openDialog(); + ShowUser.value.openDialog(ruleForm.value.id,disabled.value); }; // 应急队伍弹窗 const Shows = ref(); @@ -456,7 +412,6 @@ ruleForm, value1, treeSelect, - tree, daiInpt, Shows, ruleFormRef, @@ -474,6 +429,12 @@ titles, disabled, emit, + propse, + department, + getTreeList, + newTreeList, + closeDialog, + fileListDemo }; }, }); @@ -496,4 +457,4 @@ .el-select { width: 100%; } -</style> \ No newline at end of file +</style> -- Gitblit v1.9.2