| | |
| | | <template> |
| | | <div class="system-edit-user-container"> |
| | | <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full" @close="closeDialog(ruleFormRef)"> |
| | | <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full" |
| | | destroy-on-close @close="closeDialog(ruleFormRef)"> |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" size="default" label-width="140px"> |
| | | <el-row :gutter="35"> |
| | |
| | | </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" :disabled="disabled" |
| | | :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-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(ruleFormRef)" 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" :disabled="disabled" |
| | | 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-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" :disabled="disabled" |
| | | 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="事故照片" prop="fileList"> |
| | | <!--<el-input v-model="ruleForm.fileList" :disabled="disabled"--> |
| | | <!--type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>--> |
| | | <uploaderImg :fileList="fileListDemo"></uploaderImg> |
| | | <!--type="textarea" placeholder="请填写应急防范措施" maxlength="150"></el-input>--> |
| | | <uploaderImg :fileList="fileList" :disabled="disabled" |
| | | :systemName="'INCIDENT_MANAGE'" @successUploader="successUploader"></uploaderImg> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> |
| | | <el-button size="default" v-if="disabled == true ? false : true" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button> |
| | | <el-button size="default" v-if="disabled == true ? false : true" type="primary" |
| | | @click="submitForm(titles, ruleFormRef)">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | </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 { ElMessage,ElMessageBox, } from 'element-plus'; |
| | | import { Search, FullScreen, Edit } from '@element-plus/icons-vue'; |
| | | import NumberOfCasualties from '/@/views/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue'; |
| | | import UserSelections from '/@/components/userSelections/index.vue'; |
| | |
| | | UserSelections, |
| | | RegionsDialog, |
| | | NumberOfCasualties, |
| | | uploaderImg |
| | | uploaderImg, |
| | | }, |
| | | setup(props, { emit }) { |
| | | const isShowDialog = ref(false); |
| | |
| | | accidentDepartmentId: '', |
| | | accidentName: '', |
| | | fileList: [], |
| | | id:'' |
| | | id: '', |
| | | }); |
| | | const titles = ref(); |
| | | const disabled = ref(); |
| | | // 打开弹窗 |
| | | const openDialog = (title: string, id: number, type: boolean) => { |
| | | const openDialog = async (title: string, id: number, type: boolean) => { |
| | | isShowDialog.value = true; |
| | | titles.value = title; |
| | | disabled.value = type; |
| | |
| | | .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 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 fileList = ref([]); |
| | | // 上传成功组装数据 |
| | | 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 treeSelect = ref(); |
| | | |
| | | //定义树形下拉框 |
| | | const responsibleDepartment = ref(); |
| | | const data = [ |
| | | ]; |
| | | 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>({ |
| | |
| | | // const emit=defineEmits(['myAdd']) |
| | | // 表单提交验证必填项 |
| | | 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; |
| | | ruleForm.value.id = null |
| | | accidentManagementSystemApi() |
| | | .accidentAdd(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(); |
| | | if(ruleForm.value.id==null||ruleForm.value.id==''){ |
| | | ruleForm.value.id = null; |
| | | accidentManagementSystemApi() |
| | | .accidentAdd(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 { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: '添加成功', |
| | | type: 'success', |
| | | }); |
| | | emit('myAdd', true); |
| | | } |
| | | |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | isShowDialog.value = false; |
| | | ruleForm.value.fileList = [ |
| | | // { |
| | | // fileUrl: 'url', |
| | | // fileName: 'name', |
| | | // }, |
| | | ]; |
| | | accidentManagementSystemApi() |
| | | .accidentView(ruleForm.value) |
| | | .then((res) => { |
| | |
| | | formEl.resetFields(); |
| | | } |
| | | ruleForm.value = { |
| | | accidentExpressId:'', |
| | | accidentExpressId: '', |
| | | emergencyPrecautions: '', |
| | | accidentCausesPreliminaryAnalysis: '', |
| | | accidentBriefProcess: '', |
| | |
| | | }; |
| | | const closeDialog = (formEl: FormInstance | undefined) => { |
| | | formEl.resetFields(); |
| | | console.log(ruleForm) |
| | | isShowDialog.value = false |
| | | } |
| | | fileList.value = [] |
| | | console.log(ruleForm); |
| | | isShowDialog.value = false; |
| | | }; |
| | | // 是否有伤亡弹窗 |
| | | const typeChang = () => { |
| | | console.log('tag', ruleForm); |
| | | }; |
| | | const ShowUser = ref(); |
| | | const openDai = () => { |
| | | ShowUser.value.openDialog(ruleForm.value.id,disabled.value); |
| | | const openDai = async (formEl: FormInstance | undefined) => { |
| | | if(ruleForm.value.id==null||ruleForm.value.id==''){ |
| | | if(!ruleForm.value.fileList){ |
| | | ruleForm.value.fileList = [] |
| | | } |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | // isShowDialog.value = false; |
| | | ElMessageBox.confirm('确认添加此事故快报?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => { |
| | | accidentManagementSystemApi() |
| | | .accidentAdd(ruleForm.value) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'success', |
| | | }); |
| | | ruleForm.value.id = res.data.data.id |
| | | ShowUser.value.openDialog(ruleForm.value.id, disabled.value); |
| | | } else { |
| | | ElMessage({ |
| | | showClose: true, |
| | | message: res.data.msg, |
| | | type: 'error', |
| | | }); |
| | | } |
| | | }); |
| | | }) |
| | | .catch(() => {}); |
| | | } else { |
| | | console.log('error submit!', fields); |
| | | } |
| | | }); |
| | | // ElMessage({ |
| | | // showClose: true, |
| | | // message: '请先添加事故快报', |
| | | // type: 'info', |
| | | // }); |
| | | }else { |
| | | ShowUser.value.openDialog(ruleForm.value.id, disabled.value); |
| | | } |
| | | |
| | | }; |
| | | // 应急队伍弹窗 |
| | | const Shows = ref(); |
| | |
| | | getTreeList, |
| | | newTreeList, |
| | | closeDialog, |
| | | fileListDemo |
| | | successUploader |
| | | }; |
| | | }, |
| | | }); |