From 9c9eeea46b5a6e83470f27c673099941b369f496 Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期五, 22 七月 2022 15:59:58 +0800 Subject: [PATCH] css --- src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue | 880 +++++++++++++++++++++++++++++++-------------------------- 1 files changed, 479 insertions(+), 401 deletions(-) diff --git a/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue b/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue index ea0c2f7..2bfd430 100644 --- a/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue +++ b/src/views/accidentManagementSystem/accidentExpress/component/openAdd.vue @@ -1,421 +1,499 @@ <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="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="事故部门" placeholder="请选择"> - <el-tree-select - v-model="ruleForm.responsibleDepartment" - :data="data" 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="teamLeader"> - <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="发生时间" prop="telephone"> - <el-date-picker - v-model="value1" - 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="teamLevel"> - <el-select v-model="ruleForm.teamLevel" 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="是否有伤亡"> - <el-radio-group v-model="ruleForm.resource" @change="typeChang"> - <el-radio label="是" /> - <el-radio label="否" /> - </el-radio-group> - </el-form-item> - <el-form-item v-if="ruleForm.resource" prop="delivery"> -<!-- <el-input v-model="ruleForm.delivery" placeholder="">--> -<!-- <template #append> <el-button :icon="Search" @click="openDai" /> </template--> -<!-- ></el-input>--> - <el-button :icon="Search" @click="openDai" /> - </el-form-item> - </el-col> + <div class="system-edit-user-container"> + <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full"> + <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-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-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-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-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-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> + </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 :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-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-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="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> - </el-col> - </el-row> - </el-form> - <template #footer> + <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-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" + 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="emergencyPrecautions"> + <el-input v-model="ruleForm.emergencyPrecautions" 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> + </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> + <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> </span> - </template> - </el-dialog> - <NumberOfCasualties ref="ShowUser"></NumberOfCasualties> - <CheckTemplate ref="Shows"/> - <userSelections ref="userRef"/> - <RegionsDialog ref="openRef"/> - </div> + </template> + </el-dialog> + <NumberOfCasualties ref="ShowUser"></NumberOfCasualties> + <CheckTemplate ref="Shows" /> + <userSelections ref="userRef" /> + <RegionsDialog ref="openRef" /> + </div> </template> <script lang="ts"> -import { - reactive, - ref, - defineComponent -} from 'vue'; +import { reactive, ref, defineComponent, defineEmits } from 'vue'; -import type { - UploadUserFile, - FormInstance, - // FormRules, -} from 'element-plus' - -import { - Search, - FullScreen -} from '@element-plus/icons-vue' -import NumberOfCasualties from '/@/views/accidentManagementSystem/accidentExpress/component/numberOfCasualties.vue' -import UserSelections from "/@/components/userSelections/index.vue" -import CheckTemplate from '/@/components/checkTemplate/index.vue' -import RegionsDialog from '/@/components/regionsDialog/index.vue' - +import type { UploadUserFile, FormInstance, FormRules } from 'element-plus'; +import { ElMessage } 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'; +import CheckTemplate from '/@/components/checkTemplate/index.vue'; +import RegionsDialog from '/@/components/regionsDialog/index.vue'; +import { accidentManagementSystemApi } from '/@/api/accidentManagementSystem'; export default defineComponent({ - name: 'openAdd', - components: { - CheckTemplate, - UserSelections, - RegionsDialog, - NumberOfCasualties, - }, - setup() { - const isShowDialog = ref(false) + name: 'openAdd', + components: { + CheckTemplate, + UserSelections, + RegionsDialog, + NumberOfCasualties, + }, + setup(props, { emit }) { + const isShowDialog = ref(false); - const ruleFormRef = ref<FormInstance>() - //定义表单 - const ruleForm = reactive({ - teamName: '', // 队伍名称 - teamLeader: '', //队伍负责人 - department: [], // 负责人部门 - phone: '', // 负责人手机 - telephone: '', // 固定电话 - }); - // 打开弹窗 - 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!') - } else { - console.log('error submit!', fields) - } - }) - } - // 是否有伤亡弹窗 - const typeChang=()=>{ - console.log('tag',ruleForm) - } - const ShowUser = ref(); - const openDai =()=>{ - ShowUser.value.openDialog() - } - // 应急队伍弹窗 - 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 { - ShowUser, - typeChang, - openDialog, - closeDialog, - isShowDialog, - onCancel, - fileList, - responsibleDepartment, - data, - Search, - ruleForm, - value1, - treeSelect, - tree, - daiInpt, - Shows, - ruleFormRef, - submitForm, - // rules, - openUser, - userRef, - regionsDialog, - openDai, - openRef, - toggleFullscreen, - FullScreen, - full, - }; - }, + const ruleFormRef = ref<FormInstance>(); + //定义表单 + const ruleForm = ref({ + emergencyPrecautions: '', + accidentCausesPreliminaryAnalysis: '', + accidentBriefProcess: '', + casualties: '', + accidentCause: '', + occurrenceTime: '', + occurrencePlace: '', + accidentDepartmentId: '', + accidentName: '', + fileList: [ + { + fileUrl: 'url', + fileName: 'name', + }, + ], + }); + const titles = ref(); + const disabled = ref(); + // 打开弹窗 + const openDialog = (title: string, id: number, type: boolean) => { + isShowDialog.value = true; + titles.value = title; + disabled.value = type; + if (title == '事故块表详情' || title == '修改事故快报') { + accidentManagementSystemApi() + .accidentScarh(id) + .then((res) => { + if (res.data.code == 200) { + ruleForm.value = res.data.data; + } + }); + } + }; + //日期选择器 + 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: '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: [], + }, + ], + }, + ]; + // 必填项提示 + const rules = reactive<FormRules>({ + accidentName: [ + { + required: true, + message: '事故名称不能为空', + trigger: 'change', + }, + ], + accidentDepartmentId: [ + { + required: true, + message: '事故部门不能为空', + trigger: 'change', + }, + ], + occurrencePlace: [ + { + required: true, + message: '发生地点不能为空', + trigger: 'change', + }, + ], + occurrenceTime: [{ type: 'date', required: true, message: '发生时间不能为空', trigger: 'change' }], + accidentCause: [ + { + required: true, + message: '事故原因不能为空', + trigger: 'change', + }, + ], + casualties: [ + { + required: true, + message: '是否有伤亡不能为空', + trigger: 'change', + }, + ], + accidentBriefProcess: [ + { + required: true, + message: '事故简要经过不能为空', + trigger: 'change', + }, + ], + accidentCausesPreliminaryAnalysis: [ + { + required: true, + message: '事故原因初步分析不能为空', + trigger: 'change', + }, + ], + emergencyPrecautions: [ + { + required: true, + message: '应急防范措施不能为空', + trigger: 'change', + }, + ], + }); + // 子传父 + // const emit=defineEmits(['myAdd']) + // 表单提交验证必填项 + const submitForm = async (title: string, formEl: FormInstance | undefined) => { + if (title == '新建事故快报') { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + isShowDialog.value = false; + 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 { + console.log('error submit!', fields); + } + }); + } else if (title == '修改事故快报') { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + isShowDialog.value = false; + accidentManagementSystemApi() + .accidentView(ruleForm.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: '修改成功', + type: 'success', + }); + emit('myAdd', true); + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + emit('myAdd', true); + } + formEl.resetFields(); + }); + } else { + console.log('error submit!', fields); + } + }); + formEl.resetFields(); + ruleForm.value = { + emergencyPrecautions: '', + accidentCausesPreliminaryAnalysis: '', + accidentBriefProcess: '', + casualties: '', + accidentCause: '', + occurrenceTime: '', + occurrencePlace: '', + accidentDepartmentId: '', + accidentName: '', + fileList: [ + { + fileUrl: 'url', + fileName: 'name', + }, + ], + }; + } + }; + const resetForm = (formEl: FormInstance | undefined) => { + isShowDialog.value = false; + if (!formEl) return; + formEl.resetFields(); + }; + // 是否有伤亡弹窗 + const typeChang = () => { + console.log('tag', ruleForm); + }; + const ShowUser = ref(); + const openDai = () => { + ShowUser.value.openDialog(); + }; + // 应急队伍弹窗 + 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 { + ShowUser, + typeChang, + openDialog, + isShowDialog, + fileList, + responsibleDepartment, + data, + Search, + Edit, + ruleForm, + value1, + treeSelect, + tree, + daiInpt, + Shows, + ruleFormRef, + submitForm, + resetForm, + rules, + openUser, + userRef, + regionsDialog, + openDai, + openRef, + toggleFullscreen, + FullScreen, + full, + titles, + disabled, + emit, + }; + }, }); </script> <style scoped lang="scss"> -.textarea{ - height: 168px!important; +.textarea { + height: 168px !important; } -.textarea ::v-deep .el-textarea__inner{ - height: 168px!important; +.textarea ::v-deep .el-textarea__inner { + height: 168px !important; } ::v-deep .el-table__cell { - font-weight: 400; + font-weight: 400; } -.el-divider--horizontal{ - height: 0; - margin: 0; - border-top: transparent; +.el-divider--horizontal { + height: 0; + margin: 0; + border-top: transparent; } -.el-select{ - width: 100%; +.el-select { + width: 100%; } </style> \ No newline at end of file -- Gitblit v1.9.2