From bbf935c44b77eb0997f9332cd0e7f820f2bd2804 Mon Sep 17 00:00:00 2001 From: zhaojiale <631455805@qq.com> Date: 星期三, 03 八月 2022 15:41:37 +0800 Subject: [PATCH] 事故快报除图片外完成 --- src/components/uploaderImg/index.vue | 65 +++ src/api/accidentManagementSystem/index.ts | 27 + src/views/accidentManagementSystem/accidentExpress/index.vue | 16 src/views/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue | 807 ++++++++++++++++++++++++-------------------- src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue | 125 +++--- 5 files changed, 610 insertions(+), 430 deletions(-) diff --git a/src/api/accidentManagementSystem/index.ts b/src/api/accidentManagementSystem/index.ts index 7573c9c..64a27b0 100644 --- a/src/api/accidentManagementSystem/index.ts +++ b/src/api/accidentManagementSystem/index.ts @@ -36,8 +36,9 @@ // 事故快报删除 accidentDele:(params:object)=>{ return request({ - url:`/accidentExpress/batchDelete/${params}`, - method:"get", + url:`/accidentExpress/batchDelete`, + method:"post", + data:params }) }, // 工伤申报一览 @@ -78,5 +79,27 @@ method:"get", }) }, + // 伤亡人员一览 + casualtyList:(id:number)=>{ + return request({ + url:`/accidentExpress/casualty/list/${id}`, + method:"get", + }) + }, + // 伤亡人员新增 + casualtyAdd:(params:object)=>{ + return request({ + url:`/accidentExpress/casualty/add`, + method:"post", + data:params + }) + }, + // 伤亡人员删除 + casualtyDel:(id:number)=>{ + return request({ + url:`/accidentExpress/casualty/del/${id}`, + method:"get", + }) + }, } } \ No newline at end of file diff --git a/src/components/uploaderImg/index.vue b/src/components/uploaderImg/index.vue new file mode 100644 index 0000000..b769025 --- /dev/null +++ b/src/components/uploaderImg/index.vue @@ -0,0 +1,65 @@ +<template> + <el-upload + v-model:file-list="fileList" + action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" + list-type="picture-card" + :on-preview="handlePictureCardPreview" + :on-remove="handleRemove" + :on-success="successFile" + :on-error="errorFile" + > + <el-icon><Plus /></el-icon> + </el-upload> + + <el-dialog v-model="dialogVisible"> + <img w-full :src="dialogImageUrl" alt="Preview Image" /> + </el-dialog> +</template> +<script lang="ts"> + import { ref,defineComponent } from 'vue' + import { Plus } from '@element-plus/icons-vue' + import type { UploadProps, UploadUserFile } from 'element-plus' + + export default defineComponent({ + props: { + // svg 图标组件名字 + fileList: { + type: Array, + }, + }, + components: { + Plus + }, + setup() { + + const dialogImageUrl = ref('') + const dialogVisible = ref(false) + + const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { + console.log(uploadFile, uploadFiles) + } + + const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => { + dialogImageUrl.value = uploadFile.url! + dialogVisible.value = true + } + + const successFile = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => { + console.log(response, uploadFile,uploadFiles) + } + const errorFile = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => { + console.log(error, uploadFile,uploadFiles) + } + + + return { + dialogImageUrl, + dialogVisible, + handleRemove, + handlePictureCardPreview, + successFile, + errorFile + }; + }, + }); +</script> \ No newline at end of file diff --git a/src/views/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue b/src/views/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue index e0874b6..c586c23 100644 --- a/src/views/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue +++ b/src/views/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue @@ -1,378 +1,461 @@ <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="name"> - <el-input v-model="ruleForm.name" 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="sex"> - <el-select v-model="ruleForm.sex" 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="身份证号码" 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-input v-model="ruleForm.describe" 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="受损描述"> - <el-input v-model="ruleForm.describe" 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-button size="default" type="primary">添加</el-button> - </el-col> - <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> - <el-table :data="tableData" style="width: 100%"> - <el-table-column prop="姓名" label="Date" width="180" /> - <el-table-column prop="性别" label="Name" width="180" /> - <el-table-column prop="身份证" label="Address" /> - <el-table-column prop="伤害描述" label="Address" /> - <el-table-column prop="受损描述" label="Address" /> - </el-table> - </el-col> - </el-row> - </el-form> - <template #footer> + <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="name"> + <el-input v-model="ruleForm.name" 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="sex"> + <el-select v-model="ruleForm.gender" class="w100" placeholder="请选择人员性别"> + <el-option label="男" value="false"></el-option> + <el-option label="女" value="true"></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="teamName"> + <el-input v-model="ruleForm.card" 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-input v-model="ruleForm.injuryDesc" 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="受损描述"> + <el-input v-model="ruleForm.damageDesc" 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-button v-if="!disabled" size="default" type="primary" @click="onAdd()">添加</el-button> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="name" label="姓名"/> + <el-table-column prop="gender" label="性别"> + <template #default="scope"> + <div v-if="scope.row.gender==false"> + 男 + </div> + <div v-else> + 女 + </div> + </template> + </el-table-column> + <el-table-column prop="card" label="身份证"/> + <el-table-column prop="injuryDesc" label="伤害描述"/> + <el-table-column prop="damageDesc" label="受损描述"/> + <el-table-column v-if="!disabled" label="操作" width="60" align="center" fixed="right"> + <template #default="scope"> + <el-button size="small" text type="primary" @click="onDelete(scope.row.id)"> + 删除 + </el-button> + </template> + </el-table-column> + </el-table> + </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> </span> - </template> - </el-dialog> - <CheckTemplate ref="Shows"/> - <userSelections ref="userRef"/> - <RegionsDialog ref="openRef"/> - </div> + </template> + </el-dialog> + <CheckTemplate ref="Shows"/> + <userSelections ref="userRef"/> + <RegionsDialog ref="openRef"/> + </div> </template> <script lang="ts"> -import { - reactive, - ref, - defineComponent -} from 'vue'; + import { + reactive, + ref, + defineComponent + } from 'vue'; -import type { - UploadUserFile, - FormInstance, - // FormRules, -} from 'element-plus' + 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 CheckTemplate from '/@/components/checkTemplate/index.vue' + import RegionsDialog from '/@/components/regionsDialog/index.vue' + import {accidentManagementSystemApi} from '/@/api/accidentManagementSystem'; -import { - Search, - FullScreen -} from '@element-plus/icons-vue' -import UserSelections from "/@/components/userSelections/index.vue" -import CheckTemplate from '/@/components/checkTemplate/index.vue' -import RegionsDialog from '/@/components/regionsDialog/index.vue' + export default defineComponent({ + name: 'openEdit', + components: { + CheckTemplate, + UserSelections, + RegionsDialog, + }, + setup() { + const isShowDialog = ref(false) -export default defineComponent({ - name: 'openEdit', - components: { - CheckTemplate, - UserSelections, - RegionsDialog, - }, - setup() { - const isShowDialog = ref(false) + const ruleFormRef = ref<FormInstance>() + //定义表单 + const accidentExpressId = ref() + const ruleForm = reactive({ + accidentExpressId: accidentExpressId, + name: '', // 姓名 + gender: '', //性别 + card: '', // 身份证 + injuryDesc: '', // 伤害描述 + damageDesc: '', // 受损描述 + }); + const tableData = ref([]) + const disabled = ref([]) + // 打开弹窗 + const openDialog = (id, type) => { + accidentExpressId.value = id + isShowDialog.value = true; + disabled.value = type + onList() + }; + // 一览 + const onList = () => { + accidentManagementSystemApi() + .casualtyList(accidentExpressId.value) + .then((res) => { + if (res.data.code == '200') { + tableData.value = res.data.data + console.log('伤亡人员一览', tableData.value) + } + }) + }; + // 添加 + const onAdd = () => { + if (accidentExpressId.value != null && accidentExpressId.value != '') { + accidentManagementSystemApi() + .casualtyAdd(ruleForm) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: '添加成功', + type: 'success', + }); + onList() + } + }) + } else { + ElMessage({ + showClose: true, + message: '请先添加事故快报', + type: 'error', + }); + } + }; + // 删除 + const onDelete = (id) => { + accidentManagementSystemApi() + .casualtyDel(id) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: '删除成功', + type: 'success', + }); + onList() + } + }) + }; + // 关闭弹窗 + 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 submitForm = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid, fields) => { + if (valid) { + console.log('submit!') + closeDialog(); + } else { + console.log('error submit!', fields) + } + }) - const ruleFormRef = ref<FormInstance>() - //定义表单 - const ruleForm = reactive({ - teamName: '', // 队伍名称 - teamLeader: '', //队伍负责人 - department: [], // 负责人部门 - phone: '', // 负责人手机 - telephone: '', // 固定电话 + } + // 应急队伍弹窗 + const Shows = ref() + const daiInpt = () => { + Shows.value.openDailog() + } + // 选择区域弹窗 + 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 { + openDialog, + closeDialog, + isShowDialog, + onCancel, + fileList, + responsibleDepartment, + data, + Search, + ruleForm, + value1, + treeSelect, + tree, + daiInpt, + Shows, + ruleFormRef, + submitForm, + // rules, + openUser, + userRef, + regionsDialog, + openRef, + toggleFullscreen, + FullScreen, + full, + tableData, + onAdd, + onDelete, + accidentExpressId, + disabled + }; + }, }); - // 打开弹窗 - 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 submitForm = async (formEl: FormInstance | undefined) => { - if (!formEl) return - await formEl.validate((valid, fields) => { - if (valid) { - console.log('submit!') - closeDialog(); - } else { - console.log('error submit!', fields) - } - }) - - } - // 应急队伍弹窗 - const Shows=ref() - const daiInpt=()=>{ - Shows.value.openDailog() - } - // 选择区域弹窗 - 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 { - openDialog, - closeDialog, - isShowDialog, - onCancel, - fileList, - responsibleDepartment, - data, - Search, - ruleForm, - value1, - treeSelect, - tree, - daiInpt, - Shows, - ruleFormRef, - submitForm, - // rules, - openUser, - userRef, - regionsDialog, - openRef, - toggleFullscreen, - FullScreen, - full, - }; - }, -}); </script> <style scoped lang="scss"> -.textarea{ - height: 168px!important; -} -.textarea ::v-deep .el-textarea__inner{ - height: 168px!important; -} -::v-deep .el-table__cell { - font-weight: 400; -} -.el-divider--horizontal{ - height: 0; - margin: 0; - border-top: transparent; -} -.el-select{ - width: 100%; -} + .textarea { + height: 168px !important; + } + + .textarea ::v-deep .el-textarea__inner { + height: 168px !important; + } + + ::v-deep .el-table__cell { + font-weight: 400; + } + + .el-divider--horizontal { + height: 0; + margin: 0; + border-top: transparent; + } + + .el-select { + width: 100%; + } </style> \ No newline at end of file diff --git a/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue b/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue index 0bf5e23..913ac7f 100644 --- a/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue +++ b/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue @@ -1,27 +1,30 @@ <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" @@ -32,30 +35,33 @@ </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" @@ -64,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.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> @@ -97,6 +106,7 @@ 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'; @@ -107,6 +117,7 @@ UserSelections, RegionsDialog, NumberOfCasualties, + uploaderImg }, setup(props, { emit }) { const isShowDialog = ref(false); @@ -123,12 +134,8 @@ occurrencePlace: '', accidentDepartmentId: '', accidentName: '', - fileList: [ - { - fileUrl: 'url', - fileName: 'name', - }, - ], + fileList: [], + id:'' }); const titles = ref(); const disabled = ref(); @@ -151,28 +158,22 @@ 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": [] - } - ] - } ]; //el-tree-select回显 const propse = { @@ -234,7 +235,7 @@ trigger: 'change', }, ], - occurrenceTime: [{ type: 'date', required: true, message: '发生时间不能为空', trigger: 'change' }], + occurrenceTime: [{ type: 'date', required: true, message: '发生时间不能为空', trigger: 'blur' }], accidentCause: [ { required: true, @@ -280,6 +281,7 @@ await formEl.validate((valid, fields) => { if (valid) { isShowDialog.value = false; + ruleForm.value.id = null accidentManagementSystemApi() .accidentAdd(ruleForm.value) .then((res) => { @@ -310,10 +312,10 @@ if (valid) { isShowDialog.value = false; ruleForm.value.fileList = [ - { - fileUrl: 'url', - fileName: 'name', - }, + // { + // fileUrl: 'url', + // fileName: 'name', + // }, ]; accidentManagementSystemApi() .accidentView(ruleForm.value) @@ -340,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(); @@ -429,7 +432,9 @@ propse, department, getTreeList, - newTreeList + newTreeList, + closeDialog, + fileListDemo }; }, }); diff --git a/src/views/accidentManagementSystem/accidentExpress/index.vue b/src/views/accidentManagementSystem/accidentExpress/index.vue index aa8b3cc..ce1a6df 100644 --- a/src/views/accidentManagementSystem/accidentExpress/index.vue +++ b/src/views/accidentManagementSystem/accidentExpress/index.vue @@ -39,11 +39,16 @@ <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange"> <el-table-column align="center" type="selection" width="55" /> <el-table-column align="center" prop="accidentName" label="事故名称" show-overflow-tooltip sortable></el-table-column> - <el-table-column align="center" prop="accidentDepartmentId" label="事故部门" show-overflow-tooltip sortable></el-table-column> + <el-table-column align="center" prop="deptName" label="事故部门" show-overflow-tooltip sortable></el-table-column> <el-table-column align="center" prop="occurrencePlace" label="发生地点" show-overflow-tooltip sortable></el-table-column> <el-table-column align="center" prop="occurrenceTime" label="发生时间" show-overflow-tooltip sortable></el-table-column> - <el-table-column align="center" prop="accidentCause" label="事故原因" show-overflow-tooltip sortable></el-table-column> - <el-table-column align="center" prop="createUid" label="创建人" show-overflow-tooltip sortable></el-table-column> + <el-table-column align="center" prop="accidentCause" label="事故原因" show-overflow-tooltip sortable> + <template #default="scope"> + <div v-if="scope.row.accidentCause=='1'">人的不安全行为</div> + <div v-if="scope.row.accidentCause=='2'">物的不安全状态</div> + </template> + </el-table-column> + <el-table-column align="center" prop="createName" label="创建人" show-overflow-tooltip sortable></el-table-column> <el-table-column align="center" prop="gmtModitify" label="更新时间" show-overflow-tooltip sortable></el-table-column> <el-table-column label="操作" width="260" align="center" fixed="right"> <template #default="scope"> @@ -163,8 +168,7 @@ for (let i = 0; i < valId.length; i++) { arr.push(valId[i].id); } - deletAll.value = arr.toString(); - console.log(deletAll.value); + deletAll.value = arr; if (val.length == 1) { warning.value = false; danger.value = false; @@ -199,7 +203,7 @@ }) .then(() => { accidentManagementSystemApi() - .accidentDele(data) + .accidentDele([data]) .then((res) => { if (res.data.code == 200) { ElMessage({ -- Gitblit v1.9.2