From 6b29a994267c6d589555fa4c316bc00a13b10674 Mon Sep 17 00:00:00 2001 From: 13937891274 <kxc0822> Date: 星期五, 15 七月 2022 14:30:58 +0800 Subject: [PATCH] 应急预案启动记录 --- /dev/null | 443 ------------ src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue | 613 +++++++++++++++++ src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue | 709 ++++++++++++++++++++ src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue | 30 src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue | 296 ++++--- src/App.vue | 1 6 files changed, 1,496 insertions(+), 596 deletions(-) diff --git a/src/App.vue b/src/App.vue index e69c74b..4b91ce1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -98,3 +98,4 @@ }, }); </script> + diff --git a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue new file mode 100644 index 0000000..d199eb6 --- /dev/null +++ b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue @@ -0,0 +1,709 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog + title="查看演练实施评价" + v-model="isShowDialog" + width="769px" + draggable + > + <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="演练地点" 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="主办部门" prop="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="telephone" > + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="daiInpt"/> + </template> + </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="teamPhone"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="公司级" value="admin"></el-option> + <el-option label="分厂级" value="common"></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="telephone"> + <el-date-picker + v-model="value1" + class="w100" + type="datetime" + 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="telephone"> + <el-date-picker + v-model="value1" + class="w100" + type="datetime" + 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="telephone"> + <el-date-picker + v-model="value1" + class="w100" + type="datetime" + 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="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="制定部门" prop="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="telephone" > + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="openUser"/> + </template> + </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="teamLevel"> + <el-input v-model="ruleForm.name" class="textarea" type="textarea"></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-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="openUser"/> + </template> + </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="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="演练经费" prop="teamName"> + <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></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="teamLevel"> + <el-input v-model="ruleForm.name" class="textarea" type="textarea" placeholder="请填写备注信息"></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-upload + v-model:file-list="fileList" + class="upload-demo" + action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" + :on-change="handleChange" + > + <el-button type="primary" + >点击上传</el-button> + <template #tip> + <div class="el-upload__tip"> + 添加相关附件 + </div> + </template> + </el-upload> + </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-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="openUser"/> + </template> + </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="teamLevel"> + <el-input v-model="ruleForm.name" class="textarea" type="textarea" 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-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="openUser"/> + </template> + </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" + class="w100" + type="datetime" + placeholder="选择日期时间" + /> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <div class="el-divider--horizontal"> + <div class="el-divider__text"> + <h3>评价</h3> + </div> + </div> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="演练负责人" prop="telephone" > + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="openUser"/> + </template> + </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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="teamLeader"> + <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="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="存在问题和改进措施" prop="teamLevel"> + <el-input v-model="ruleForm.name" class="textarea" type="textarea" placeholder="请填写备注信息"></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="teamLevel"> + <el-input v-model="ruleForm.name" class="textarea" type="textarea" placeholder="请填写修改内容"></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-upload + v-model:file-list="fileList" + class="upload-demo" + action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" + :on-change="handleChange" + > + <el-button type="primary" + >点击上传</el-button> + <template #tip> + <div class="el-upload__tip"> + 添加相关附件 + </div> + </template> + </el-upload> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="onCancel" size="default">关闭</el-button> + </span> + </template> + </el-dialog> + <CheckTemplate ref="Shows"/> + <userSelections ref="userRef"/> + <RegionsDialog ref="openRef"/> + </div> +</template> + +<script lang="ts"> +import { + reactive, + ref, + defineComponent +} from 'vue'; + +import type { + UploadUserFile, + FormInstance, +} from 'element-plus' + +import { + Search +} 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: 'approvalProgress', + components: { + CheckTemplate, + UserSelections, + RegionsDialog, + }, + setup() { + 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 Shows=ref() + const daiInpt=()=>{ + Shows.value.openDailog() + } + // 选择区域弹窗 + const openRef=ref() + const regionsDialog=()=>{ + openRef.value.openDailog() + } + // 打开用户选择弹窗 + const userRef = ref(); + const openUser = () => { + userRef.value.openDialog(); + }; + return { + openDialog, + closeDialog, + isShowDialog, + onCancel, + fileList, + responsibleDepartment, + data, + Search, + ruleForm, + value1, + treeSelect, + tree, + daiInpt, + Shows, + ruleFormRef, + // rules, + openUser, + userRef, + regionsDialog, + openRef, + }; + }, +}); +</script> +<style scoped lang="scss"> +.el-form .el-form-item{ + margin-bottom: 18px !important; +} +::v-deep .el-form-item--default .el-form-item__label{ + text-align: right; + height: 100%; +} +.textarea{ + height: 90px!important; +} +.textarea ::v-deep .el-textarea__inner{ + height: 90px!important; +} +::v-deep .el-table__cell { + font-weight: 400; +} +.el-divider--horizontal{ + height: 0; + margin: 0; + border-top: transparent; +} +.el-select{ + width: 100%; +} +.el-divider--horizontal { + display: block; + height: 1px; + width: 100%; + margin: 24px 0; + background-color: #dcdfe6; + position: relative; +} +.el-divider__text { + position: absolute; + background-color: #fff; + padding: 0 20px; + color: #303133; + left: 50%; + font-weight: 500; + font-size: 14px; +} +</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/openAdd.vue b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/openAdd.vue deleted file mode 100644 index 1655473..0000000 --- a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/openAdd.vue +++ /dev/null @@ -1,443 +0,0 @@ -<template> - <div class="system-edit-user-container"> - <el-dialog - title="新建应急预案管理" - v-model="isShowDialog" - width="769px" - draggable - > - <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="适用部门" prop="responsibleDepartment"> - <el-tree-select - v-model="treeSelect" - :data="tree" - multiple - :render-after-expand="true" - show-checkbox - /> - <el-divider /> - </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-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> - <el-option label="综合应急预案" value="admin"></el-option> - <el-option label="现场处置方案" value="common"></el-option> - <el-option label="专项应急预案" value="common"></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="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="预案级别" prop="teamPhone"> - <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> - <el-option label="公司级" value="admin"></el-option> - <el-option label="分厂级" value="common"></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="telephone" > - <el-input - v-model="ruleForm.teamLeader" - placeholder="请选择" - class="input-with-select" - > - <template #append> - <el-button :icon="Search" @click="openUser"/> - </template> - </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-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="telephone"> -<!-- <el-tree-select--> -<!-- v-model="ruleForm.responsibleDepartment"--> -<!-- :data="data" class="w100"--> -<!-- placeholder="请选择"/>--> - <el-date-picker - v-model="value1" - type="datetime" - 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="telephone" @click="daiInpt" > - <el-input - v-model="ruleForm.teamLeader" - placeholder="请选择" - class="input-with-select" - > - <template #append> - <el-button :icon="Search"/> - </template> - </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-upload - v-model:file-list="fileList" - class="upload-demo" - action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" - :on-change="handleChange" - > - <el-button type="primary" - >点击上传</el-button> - <template #tip> - <div class="el-upload__tip"> - 添加相关附件 - </div> - </template> - </el-upload> - </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-input - v-model="ruleForm.teamLeader" - placeholder="请选择" - class="input-with-select" - > - <template #append> - <el-button :icon="Search" @click="regionsDialog"/> - </template> - </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> - </span> - </template> - </el-dialog> - <CheckTemplate ref="Shows"/> - <userSelections ref="userRef"/> - <RegionsDialog ref="openRef"/> - </div> -</template> - -<script lang="ts"> -import { - reactive, - ref, - defineComponent -} from 'vue'; - -import type { - UploadUserFile, - FormInstance, - // FormRules, -} from 'element-plus' - -import { - Search -} 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: 'openAdd', - components: { - CheckTemplate, - UserSelections, - RegionsDialog, - }, - setup() { - 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 Shows=ref() - const daiInpt=()=>{ - Shows.value.openDailog() - } - // 选择区域弹窗 - const openRef=ref() - const regionsDialog=()=>{ - openRef.value.openDailog() - } - // 打开用户选择弹窗 - const userRef = ref(); - const openUser = () => { - userRef.value.openDialog(); - }; - return { - openDialog, - closeDialog, - isShowDialog, - onCancel, - fileList, - responsibleDepartment, - data, - Search, - ruleForm, - value1, - treeSelect, - tree, - daiInpt, - Shows, - ruleFormRef, - submitForm, - // rules, - openUser, - userRef, - regionsDialog, - openRef, - }; - }, -}); -</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%; -} -</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue new file mode 100644 index 0000000..706e24d --- /dev/null +++ b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue @@ -0,0 +1,613 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog + title="新建待整改" + v-model="isShowDialog" + width="769px" + draggable + > + <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="整改单编号" prop="teamName"> + <el-input v-model="ruleForm.teamName" 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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" disabled placeholder="请选择"> + <el-option label="演练评价等" value="admin"></el-option> + <el-option label="现场处置方案" value="common"></el-option> + <el-option label="专项应急预案" value="common"></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="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="teamLevel"> + <el-input v-model="ruleForm.name" class="textarea" type="textarea"></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="teamLevel"> + <el-input v-model="ruleForm.name" class="textarea" type="textarea"></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="teamLeader"> + <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="隐患后果" prop="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="死亡" value="admin"></el-option> + <el-option label="重伤" value="common"></el-option> + <el-option label="轻伤" value="admin"></el-option> + <el-option label="火灾" value="common"></el-option> + <el-option label="交通事故" value="admin"></el-option> + <el-option label="财产损失" value="common"></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="teamLeader"> + <el-select v-model="ruleForm.teamLevel" class="w100" placeholder="请选择"> + <el-option label="化学品管理" value="admin"></el-option> + <el-option label="管理制度缺陷" value="common"></el-option> + <el-option label="设计缺陷" value="admin"></el-option> + <el-option label="其它" value="common"></el-option> + <el-option label="现场管理" value="admin"></el-option> + <el-option label="消防安全" value="common"></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="telephone"> + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + disabled + > + <template #append> + <el-button :icon="Search" @click="regionsDialog"/> + </template> + </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="telephone"> + <el-upload + class="avatar-uploader" + action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" + :show-file-list="false" + :on-success="handleAvatarSuccess" + :before-upload="beforeAvatarUpload" + > + <img v-if="imageUrl" :src="imageUrl" class="avatar" /> + <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> + </el-upload> + </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-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="openUser"/> + </template> + </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" + class="w100" + type="datetime" + 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="telephone" > + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + > + <template #append> + <el-button :icon="Search" @click="openUser"/> + </template> + </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" + class="w100" + type="datetime" + placeholder="选择日期时间" + /> + </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="teamPhone"> + <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="责任部门" placeholder="请选择"> + <el-tree-select + v-model="ruleForm.responsibleDepartment" + :data="data" class="w100" + placeholder="请选择"/> + </el-form-item> + </el-col> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="组织整改" name="first"> + <el-row style="margin: 0"> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" style="padding-left: 17.5px;padding-right: 17.5px;"> + <el-form-item label="整改意见" prop="teamLevel"> + <el-input v-model="ruleForm.name" class="textarea" type="textarea" disabled placeholder="请填写整改意见"></el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" style="padding-left: 17.5px;padding-right: 17.5px;"> + <el-form-item label="整改期限" prop="telephone"> + <el-date-picker + v-model="value1" + class="w100" + type="datetime" + placeholder="选择日期时间" + disabled + /> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" style="padding-left: 17.5px;padding-right: 17.5px;"> + <el-form-item label="填报人" prop="telephone" > + <el-input + v-model="ruleForm.teamLeader" + placeholder="请选择" + class="input-with-select" + disabled + > + <template #append> + <el-button :icon="Search" disabled @click="openUser"/> + </template> + </el-input> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" style="padding-left: 17.5px;padding-right: 17.5px;"> + <el-form-item label="填报日期" prop="telephone"> + <el-date-picker + v-model="value1" + class="w100" + type="datetime" + placeholder="选择日期时间" + disabled + /> + </el-form-item> + </el-col> + </el-row> + </el-tab-pane> + </el-tabs> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="onCancel" size="default">关闭</el-button> + </span> + </template> + </el-dialog> + <CheckTemplate ref="Shows"/> + <userSelections ref="userRef"/> + <RegionsDialog ref="openRef"/> + </div> +</template> + +<script lang="ts"> +import { + reactive, + ref, + defineComponent +} from 'vue'; +import { + ElMessage +} +from 'element-plus' +import type { + TabsPaneContext, + FormInstance, + UploadProps, +} from 'element-plus' +import { + Search, + Plus +} 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: 'rectificationDialog', + components: { + CheckTemplate, + UserSelections, + RegionsDialog, + }, + setup() { + 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 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 Shows=ref() + const daiInpt=()=>{ + Shows.value.openDailog() + } + // 选择区域弹窗 + const openRef=ref() + const regionsDialog=()=>{ + openRef.value.openDailog() + } + // 打开用户选择弹窗 + const userRef = ref(); + const openUser = () => { + userRef.value.openDialog(); + }; + const activeName = ref('first') + + const handleClick = (tab: TabsPaneContext, event: Event) => { + console.log(tab, event) + } + // 上传图片 + const imageUrl = ref('') + + const handleAvatarSuccess: UploadProps['onSuccess'] = ( + response, + uploadFile + ) => { + imageUrl.value = URL.createObjectURL(uploadFile.raw!) + } + + const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => { + if (rawFile.type !== 'image/jpeg') { + ElMessage.error('Avatar picture must be JPG format!') + return false + } else if (rawFile.size / 1024 / 1024 > 2) { + ElMessage.error('Avatar picture size can not exceed 2MB!') + return false + } + return true + } + return { + openDialog, + closeDialog, + isShowDialog, + onCancel, + responsibleDepartment, + data, + Search, + ruleForm, + value1, + treeSelect, + tree, + daiInpt, + Shows, + ruleFormRef, + // rules, + openUser, + userRef, + regionsDialog, + openRef, + activeName, + handleClick, + handleAvatarSuccess, + beforeAvatarUpload, + Plus, + }; + }, +}); +</script> +<style scoped lang="scss"> +.el-form .el-form-item{ + margin-bottom: 18px !important; +} +::v-deep .el-form-item--default .el-form-item__label{ + text-align: right; + height: 100%; +} +.textarea{ + height: 50px!important; +} +.textarea ::v-deep .el-textarea__inner{ + height: 50px!important; +} +::v-deep .el-table__cell { + font-weight: 400; +} +.el-divider--horizontal{ + height: 0; + margin: 0; + border-top: transparent; +} +.el-select{ + width: 100%; +} +.el-divider--horizontal { + display: block; + height: 1px; + width: 100%; + margin: 24px 0; + background-color: #dcdfe6; + position: relative; +} +.el-divider__text { + position: absolute; + background-color: #fff; + padding: 0 20px; + color: #303133; + left: 50%; + font-weight: 500; + font-size: 14px; +} +////上传图片 +//.avatar-uploader .avatar { +// width: 178px; +// height: 178px; +// display: block; +//} + +</style> + +<!--<style scoped>--> +<!--.avatar-uploader .avatar {--> +<!-- width: 178px;--> +<!-- height: 178px;--> +<!-- display: block;--> +<!--}--> +<!--</style>--> +<!--<style>--> +<!--.avatar-uploader .el-upload {--> +<!-- border: 1px dashed var(--el-border-color);--> +<!-- border-radius: 6px;--> +<!-- cursor: pointer;--> +<!-- position: relative;--> +<!-- overflow: hidden;--> +<!-- transition: var(--el-transition-duration-fast);--> +<!--}--> + +<!--.avatar-uploader .el-upload:hover {--> +<!-- border-color: var(--el-color-primary);--> +<!--}--> + +<!--.el-icon.avatar-uploader-icon {--> +<!-- font-size: 28px;--> +<!-- color: #8c939d;--> +<!-- width: 178px;--> +<!-- height: 178px;--> +<!-- text-align: center;--> +<!--}--> +<!--</style>--> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue index 2b8d46d..f64d99a 100644 --- a/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue +++ b/src/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/index.vue @@ -1,85 +1,97 @@ <template> <div class="system-user-container"> <el-card shadow="hover"> - <div class="button_Line"> - <div class="button_Left"> - <el-button size="default" type="primary" @click="onOpenAdd('新建')"> - <el-icon> - <Plus /> - </el-icon>新建 - </el-button> -<!-- <el-button size="default" type="warning" plain disabled>--> -<!-- <el-icon>--> -<!-- <Edit />--> -<!-- </el-icon>修改--> -<!-- </el-button>--> - <el-button size="default" type="danger" plain disabled> - <el-icon> - <Delete /> - </el-icon>删除 - </el-button> - </div> - <div class="button_Right"> - <el-button @click="upButton"> - <el-icon> - <Upload /> - </el-icon> - </el-button> - <el-button> - <el-icon> - <Download /> - </el-icon> - </el-button> - <el-button> - <el-icon> - <Refresh /> - </el-icon> - </el-button> - </div> - </div> - <el-table - :data="tableData" - style="width: 100%" - ref="multipleTableRef" - > - <el-table-column - type="selection" - width="55" - /> - <el-table-column prop="teamName" label="演练名称" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="teamLevel" label="演练地点" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="teamDescription" label="演练方式" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="phone" label="演练级别" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="attachments" label="计划演练日期" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="attachments" label="演练记录日期" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column> - <el-table-column label="操作" width="260" align="center" fixed="right"> - <template #default="scope"> - <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> - <el-icon style="margin-right: 5px;"> - <VideoPlay /> - </el-icon>启动 - </el-button> - <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> - <el-icon style="margin-right: 5px;"> - <VideoPause /> - </el-icon>废止 - </el-button> - <el-button size="small" text type="primary" @click="onOpenEdit(scope.row)"> - <el-icon style="margin-right: 5px;"> - <EditPen /> - </el-icon>修改 - </el-button> - <el-button size="small" text type="primary" @click="onRowDel(scope.row)"> - <el-icon> - <Delete /> - </el-icon>删除 - </el-button> - </template> - </el-table-column> - </el-table> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="待评价" name="first"> + <div class="button_Line"> + <div class="button_Left"> + <el-button size="default" type="danger" plain disabled> + <el-icon> + <Delete /> + </el-icon>删除 + </el-button> + </div> + <div class="button_Right"> + <el-button @click="upButton"> + <el-icon> + <Upload /> + </el-icon> + </el-button> + <el-button> + <el-icon> + <Download /> + </el-icon> + </el-button> + <el-button> + <el-icon> + <Refresh /> + </el-icon> + </el-button> + </div> + </div> + <el-table + :data="tableData" + style="width: 100%" + ref="multipleTableRef" + > + <el-table-column + type="selection" + width="55" + /> + <el-table-column prop="teamName" label="演练名称" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="teamLevel" label="演练地点" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="teamDescription" label="演练方式" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="phone" label="演练级别" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="attachments" label="计划演练日期" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="attachments" label="演练记录日期" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="attachments" label="应急预案" show-overflow-tooltip sortable></el-table-column> + <el-table-column label="操作" width="260" align="center" fixed="right"> + <template #default="scope"> + <el-button size="small" text disabled> + <el-icon style="margin-right: 5px;"> + <EditPen /> + </el-icon>评价 + </el-button> + <el-button size="small" text type="primary" @click="onApprovalProgress(scope.row)"> + 审批进度 + </el-button> + <el-button size="small" text type="primary" @click="onApprovalProgress(scope.row)"> + <el-icon style="margin-right: 5px;"> + <EditPen /> + </el-icon>查看评价 + </el-button> + <el-button size="small" text type="primary" @click="onRectificationDialog(scope.row)"> + <el-icon style="margin-right: 5px;"> + <EditPen /> + </el-icon>整改 + </el-button> + <el-button size="small" text disabled @click="onOpenEdit(scope.row)"> + 查看整改 + </el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-model:currentPage="pageIndex" + v-model:page-size="pageSize" + :page-sizes="[10, 20, 30]" + :pager-count="5" + :small="small" + :disabled="disabled" + :background="background" + layout="total, sizes, prev, pager, next, jumper" + :total="40" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + </el-tab-pane> + <el-tab-pane label="已评价" name="second">Config</el-tab-pane> + </el-tabs> </el-card> - <OpenAdd ref="addRef" /> + <ApprovalProgress ref="approvalRef" /> + <RectificationDialog ref="rectificationRef" /> <OpenEdit ref="editRef" /> <upData ref="upShow"></upData> </div> @@ -94,24 +106,20 @@ defineComponent } from 'vue'; import { - ElMessageBox, - ElMessage, ElTable, + TabsPaneContext, } from 'element-plus'; -import { Plus, - // Edit, - Delete, +import { + Plus, Upload, Download, Refresh, - // View, - VideoPause, - VideoPlay, EditPen, } from '@element-plus/icons-vue' -import OpenAdd from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/openAdd.vue'; +import ApprovalProgress from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/approvalProgress.vue'; import OpenEdit from '/@/views/contingencyManagement/panManagement/component/openEdit.vue'; import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue'; +import RectificationDialog from '/@/views/contingencyManagement/emergencyDrill/drillImplementationEvaluation/component/rectificationDialog.vue'; // 定义表格数据类型 interface User { @@ -144,30 +152,22 @@ export default defineComponent({ name: 'systemUser', components: { - OpenAdd, OpenEdit, - // View, EditPen, Plus, - // Edit, - Delete, Upload, Download, Refresh, - VideoPause, - VideoPlay, - UpData + UpData, + ApprovalProgress, + RectificationDialog }, setup() { - // const seeRef = ref(); - const editRef = ref(); - // 选择框 - // const value = ref(''); - // const options = - // { - // value: 'Option1', - // label: 'Option1', - // }; + const activeName = ref('first') + + const handleClick = (tab: TabsPaneContext, event: Event) => { + console.log(tab, event) + } const multipleTableRef = ref<InstanceType<typeof ElTable>>() const multipleSelection = ref<User[]>([]) @@ -231,42 +231,50 @@ teamLeader: '王磊', } ] - // 打开新增用户弹窗 - const addRef = ref(); - const onOpenAdd = () => { - addRef.value.openDialog(); - }; + // 打开修改用户弹窗 + const editRef = ref(); const onOpenEdit = (row: TableDataRow) => { editRef.value.openDialog(row); }; - // 删除用户 - const onRowDel = (row: TableDataRow) => { - ElMessageBox.confirm(`此操作将永久删除账户名称:“${row}”,是否继续?`, '提示', { - confirmButtonText: '确认', - cancelButtonText: '取消', - type: 'warning', - }) - .then(() => { - ElMessage.success('删除成功'); - }) - .catch(() => {}); + // 审批进度弹窗 + const approvalRef = ref(); + const onApprovalProgress = () => { + approvalRef.value.openDialog(); + }; + // 整改弹窗 + const rectificationRef = ref(); + const onRectificationDialog = () => { + rectificationRef.value.openDialog(); + }; + // 分页 + const pageIndex = ref(4); + const pageSize = ref(10); + // 分页改变 + const handleSizeChange = (val: number) => { + console.log(`${val} items per page`); + }; + // 分页未改变 + const handleCurrentChange = (val: number) => { + console.log(`current page: ${val}`); }; return { - // value, - // options, + activeName, + handleClick, multipleSelection, multipleTableRef, upButton, upShow, tableData, - // onOpenSee, //查看 - // seeRef, onOpenEdit, //编辑 - editRef, - onOpenAdd, //新增 - addRef, - onRowDel, + pageIndex, + pageSize, + handleSizeChange, + handleCurrentChange, + onApprovalProgress, + approvalRef, + onRectificationDialog, + rectificationRef, }; }, }); @@ -285,4 +293,38 @@ flex-direction: row; justify-content: space-between; } +//分页 +.pages{ + display: flex; + justify-content: flex-end; + margin-top: 15px; +} +::v-deep .el-pagination .el-pager li { + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; +} +::v-deep .el-pagination .el-pager li.is-active { + background-color: #409eff; + color: #fff; +} +::v-deep .el-pagination .btn-prev { + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; +} +::v-deep .el-pagination button:disabled{ + color: #c0c4cc; +} +::v-deep .el-pagination .btn-next{ + margin: 0 5px; + background-color: #f4f4f5; + color: #606266; + min-width: 30px; + border-radius: 2px; +} </style> \ No newline at end of file diff --git a/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue b/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue index 6e76097..1cbca46 100644 --- a/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue +++ b/src/views/contingencyManagement/emergencyResources/emergencySupplies/index.vue @@ -1,6 +1,10 @@ <template> <div class="system-user-container"> <el-card shadow="hover"> + <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> + <el-tab-pane label="待评价" name="first">User</el-tab-pane> + <el-tab-pane label="已评价" name="second">Config</el-tab-pane> + </el-tabs> <div class="system-user-search mb15"> <el-input size="default" placeholder="物资名称" style="max-width: 215px;"> </el-input> <el-button size="default" type="primary" class="ml10"> @@ -34,11 +38,6 @@ <Upload /> </el-icon> </el-button> - <!-- <el-button>--> - <!-- <el-icon>--> - <!-- <Download />--> - <!-- </el-icon>--> - <!-- </el-button>--> <el-button> <el-icon> <Refresh /> @@ -183,13 +182,6 @@ UpData }, setup() { - // 选择框 - // const value = ref(''); - // const options = - // { - // value: 'Option1', - // label: 'Option1', - // }; const multipleTableRef = ref<InstanceType<typeof ElTable>>() const multipleSelection = ref<User[]>([]) @@ -260,18 +252,6 @@ }) .catch(() => {}); }; - // 分页改变 - // const onHandleSizeChange = (val: number) => { - // state.tableData.param.pageSize = val; - // }; - // // 分页改变 - // const onHandleCurrentChange = (val: number) => { - // state.tableData.param.pageNum = val; - // }; - // 页面加载时 - // onMounted(() => { - // initTableData(); - // }); // 分页 const pageIndex = ref(4); const pageSize = ref(10); @@ -284,8 +264,6 @@ console.log(`current page: ${val}`); }; return { - // value, - // options, multipleSelection, multipleTableRef, upButton, -- Gitblit v1.9.2