From 2dcd6731b0ba9359dac02931211e53e81e56be68 Mon Sep 17 00:00:00 2001 From: 13937891274 <kxc0822> Date: 星期五, 05 八月 2022 16:19:54 +0800 Subject: [PATCH] 应急预案管理数据对接 --- src/views/contingencyManagement/panManagement/component/abolishLibrary.vue | 12 /dev/null | 460 -------- src/views/contingencyManagement/panManagement/index.vue | 1077 ++++++++++---------- src/views/contingencyManagement/panManagement/component/openAdd.vue | 782 +++++++------- src/views/contingencyManagement/panManagement/component/initiateApproval.vue | 405 +++++++ src/views/contingencyManagement/panManagement/component/approval.vue | 430 ++++++++ 6 files changed, 1,760 insertions(+), 1,406 deletions(-) diff --git a/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue b/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue index f3bd004..c98722a 100644 --- a/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue +++ b/src/views/contingencyManagement/panManagement/component/abolishLibrary.vue @@ -48,12 +48,7 @@ </template> <script lang="ts"> -import { - ref, - reactive, - defineComponent, - onMounted, -} from 'vue'; +import { ref, reactive, defineComponent, onMounted } from 'vue'; import type { FormInstance } from 'element-plus'; import { @@ -129,9 +124,10 @@ type: 'error', }); emit('myAdd', true); - openDialog() + openDialog(); } - }).catch(() => {}); + }) + .catch(() => {}); }; // 分页 const pageIndex = ref(); diff --git a/src/views/contingencyManagement/panManagement/component/approval.vue b/src/views/contingencyManagement/panManagement/component/approval.vue new file mode 100644 index 0000000..5a8d3c0 --- /dev/null +++ b/src/views/contingencyManagement/panManagement/component/approval.vue @@ -0,0 +1,430 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog :title="titles" v-model="isShowDialog" width="40%" draggable :fullscreen="full" :close-on-click-modal="false"> + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> + <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px" :disabled="disabled"> + <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="responsibleDepartment"> + <el-tree-select + v-model="ruleForm.treeSelect" + :data="data" + multiple + :render-after-expand="true" + :props="propse" + show-checkbox + clearable + check-strictly + /> + <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="type"> + <el-select v-model="ruleForm.type" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="综合应急预案"></el-option> + <el-option label="现场处置方案" value="现场处置方案"></el-option> + <el-option label="专项应急预案" value="专项应急预案"></el-option> + <el-option label="其他预案" value="其他预案"></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="associatedDanger"> + <el-select v-model="ruleForm.associatedDanger" 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="level"> + <el-select v-model="ruleForm.level" class="w100" placeholder="请选择"> + <el-option label="公司级" value="公司级"></el-option> + <el-option label="分厂级" value="分厂级"></el-option> + <el-option label="车间级" value="车间级"></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="authorId"> + <el-input v-model="ruleForm.authorUid" 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="authorDeptId"> + <el-tree-select + v-model="ruleForm.authorDeptId" + check-strictly + :data="data" + class="w100" + :props="propse" + clearable + :render-after-expand="false" + 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="releaseDate"> + <el-date-picker + v-model="ruleForm.releaseDate" + type="datetime" + class="w100" + placeholder="选择日期时间" + value-format="YYYY-MM-DD HH:mm:ss" + /> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="应急队伍" prop="emergencyTeam"> + <el-input v-model="ruleForm.emergencyTeam" 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="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="areaName">--> + <!-- <el-input--> + <!-- v-model="ruleForm.areaName"--> + <!-- placeholder="请选择"--> + <!-- class="input-with-select"--> + <!-- >--> + <!-- <template #append>--> + <!-- <el-button :icon="Search" @click="regionsDialog"/>--> + <!-- </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="authorId"> + <el-radio-group v-model="ruleForm.resource"> + <el-radio label="不通过" /> + <el-radio label="通过" /> + </el-radio-group> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> + <el-form-item label="审批意见" prop="authorId"> + <el-input v-model="ruleForm.name" 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="authorId" @change="typeChang"> + <el-radio-group v-model="ruleForm.complete"> + <el-radio :label="false">是</el-radio> + <el-radio :label="true">否</el-radio> + </el-radio-group> + </el-form-item> + </el-col> + <el-col v-if="ruleForm.complete" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="审批人" prop="authorId"> + <el-input v-model="ruleForm.authorUid" placeholder="请选择" class="input-with-select"> + <template #append> + <el-button :icon="Search" @click="openUser" /> + </template> + </el-input> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> + <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button> + </span> + </template> + </el-dialog> + <CheckTemplate ref="Shows" /> + <DailogSearchUser ref="userRef" @SearchUser="onUser" /> + <RegionsDialog ref="openRef" /> + </div> +</template> + +<script lang="ts"> +import { ref, defineComponent, onMounted } from 'vue'; + +import type { UploadUserFile, FormInstance } from 'element-plus'; +import { ElMessage } from 'element-plus'; +import { Search, FullScreen } from '@element-plus/icons-vue'; +import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'; +import CheckTemplate from '/@/components/checkTemplate/index.vue'; +import RegionsDialog from '/@/components/regionsDialog/index.vue'; +import { emergencyPlanApi } from '/@/api/emergencyPlan'; +import { goalManagementApi } from '/@/api/goalManagement'; + +export default defineComponent({ + name: 'openAdd', + components: { + CheckTemplate, + DailogSearchUser, + RegionsDialog, + }, + setup(prop, { emit }) { + const isShowDialog = ref(false); + const ruleFormRef = ref<FormInstance>(); + const ruleForm = ref({ + name: '', // 预案名称 + type: '', //预案类型 + associatedDanger: '', // 危险源关联 + level: '', // 预案级别 + authorUid: '', // 编写人 + authorDeptId: '', // 编写部门 + releaseDate: '', // 发布实施日期 + fileList: [ + { + fileUrl: 'url', + fileName: 'name', + }, + ], + emergencyTeam: '', //应急队伍 + areaList: [], //区域列表 + teamList: [], + deptList: [], + abolishStatus: false, + }); + 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 == '修改应急预案管理') { + emergencyPlanApi() + .seeEmergencyTeam(id) + .then((res) => { + if (res.data.code == 200) { + ruleForm.value = res.data.data; + } + }); + } + }; + //日期选择器 + const releaseDate = ref(''); + // 上传附件 + const fileList = ref<UploadUserFile[]>([]); + //部门树 + const department = () => { + goalManagementApi() + .getTreedepartment() + .then((res) => { + if (res.data.code == 200) { + data.value = res.data.data; + } else { + ElMessage.error(res.data.msg); + } + }); + }; + const treeSelect = ref(); + // const trees = ref(); + const propse = { + label: 'depName', + children: 'children', + value: 'depId', + }; + onMounted(() => { + department(); + }); + //定义树形下拉框 + const responsibleDepartment = ref(); + const data = ref(); + + const submitForm = async (title: string, formEl: FormInstance | undefined) => { + if (title == '新建应急预案管理') { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + isShowDialog.value = false; + emergencyPlanApi() + .addEmergencyPlan(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; + emergencyPlanApi() + .editEmergencyTeam(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 = { + name: '', // 预案名称 + type: '', //预案类型 + associatedDanger: '', // 危险源关联 + level: '', // 预案级别 + authorUid: '', // 编写人 + authorDeptId: '', // 编写部门 + releaseDate: '', // 发布实施日期 + fileList: [ + { + fileUrl: 'url', + fileName: 'name', + }, + ], + emergencyTeam: '', //应急队伍 + areaList: [], //区域列表 + teamList: [], + deptList: [], + abolishStatus: false, + }; + } + }; + const resetForm = (formEl: FormInstance | undefined) => { + isShowDialog.value = false; + if (!formEl) return; + formEl.resetFields(); + }; + // 应急队伍弹窗 + const Shows = ref(); + const daiInpt = () => { + Shows.value.openDailog(); + }; + // 选择区域弹窗 + const openRef = ref(); + const regionsDialog = () => { + openRef.value.openDailog(); + }; + // 打开用户选择弹窗 + const userRef = ref(); + const openUser = () => { + userRef.value.openDailog(); + }; + //回显 + const onUser = (e: any) => { + ruleForm.value.authorUid = e.uid; + }; + const typeChang = () => { + console.log('tag', ruleForm); + }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; + return { + openDialog, + fileList, + responsibleDepartment, + data, + Search, + releaseDate, + treeSelect, + // trees, + propse, + department, + daiInpt, + Shows, + submitForm, + openUser, + userRef, + regionsDialog, + openRef, + toggleFullscreen, + FullScreen, + full, + titles, + disabled, + emit, + isShowDialog, + ruleFormRef, + ruleForm, + resetForm, + onUser, + typeChang, + }; + }, +}); +</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/panManagement/component/initiateApproval.vue b/src/views/contingencyManagement/panManagement/component/initiateApproval.vue new file mode 100644 index 0000000..204df4d --- /dev/null +++ b/src/views/contingencyManagement/panManagement/component/initiateApproval.vue @@ -0,0 +1,405 @@ +<template> + <div class="system-edit-user-container"> + <el-dialog :title="titles" v-model="isShowDialog" width="40%" draggable :fullscreen="full" :close-on-click-modal="false"> + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> + <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px" :disabled="disabled"> + <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="responsibleDepartment"> + <el-tree-select + v-model="ruleForm.treeSelect" + :data="data" + multiple + :render-after-expand="true" + :props="propse" + show-checkbox + clearable + check-strictly + /> + <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="type"> + <el-select v-model="ruleForm.type" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="综合应急预案"></el-option> + <el-option label="现场处置方案" value="现场处置方案"></el-option> + <el-option label="专项应急预案" value="专项应急预案"></el-option> + <el-option label="其他预案" value="其他预案"></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="associatedDanger"> + <el-select v-model="ruleForm.associatedDanger" 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="level"> + <el-select v-model="ruleForm.level" class="w100" placeholder="请选择"> + <el-option label="公司级" value="公司级"></el-option> + <el-option label="分厂级" value="分厂级"></el-option> + <el-option label="车间级" value="车间级"></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="authorId"> + <el-input v-model="ruleForm.authorUid" 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="authorDeptId"> + <el-tree-select + v-model="ruleForm.authorDeptId" + check-strictly + :data="data" + class="w100" + :props="propse" + clearable + :render-after-expand="false" + 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="releaseDate"> + <el-date-picker + v-model="ruleForm.releaseDate" + type="datetime" + class="w100" + placeholder="选择日期时间" + value-format="YYYY-MM-DD HH:mm:ss" + /> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="应急队伍" prop="emergencyTeam"> + <el-input v-model="ruleForm.emergencyTeam" 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="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="areaName">--> + <!-- <el-input--> + <!-- v-model="ruleForm.areaName"--> + <!-- placeholder="请选择"--> + <!-- class="input-with-select"--> + <!-- >--> + <!-- <template #append>--> + <!-- <el-button :icon="Search" @click="regionsDialog"/>--> + <!-- </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="authorId"> + <el-input v-model="ruleForm.authorUid" placeholder="请选择" class="input-with-select"> + <template #append> + <el-button :icon="Search" @click="openUser" /> + </template> + </el-input> + </el-form-item> + </el-col> + </el-row> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> + <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button> + </span> + </template> + </el-dialog> + <CheckTemplate ref="Shows" /> + <DailogSearchUser ref="userRef" @SearchUser="onUser" /> + <RegionsDialog ref="openRef" /> + </div> +</template> + +<script lang="ts"> +import { ref, defineComponent, onMounted } from 'vue'; + +import type { UploadUserFile, FormInstance } from 'element-plus'; +import { ElMessage } from 'element-plus'; +import { Search, FullScreen } from '@element-plus/icons-vue'; +import DailogSearchUser from '/@/components/DailogSearchUser/index.vue'; +import CheckTemplate from '/@/components/checkTemplate/index.vue'; +import RegionsDialog from '/@/components/regionsDialog/index.vue'; +import { emergencyPlanApi } from '/@/api/emergencyPlan'; +import { goalManagementApi } from '/@/api/goalManagement'; + +export default defineComponent({ + name: 'openAdd', + components: { + CheckTemplate, + DailogSearchUser, + RegionsDialog, + }, + setup(prop, { emit }) { + const isShowDialog = ref(false); + const ruleFormRef = ref<FormInstance>(); + const ruleForm = ref({ + name: '', // 预案名称 + type: '', //预案类型 + associatedDanger: '', // 危险源关联 + level: '', // 预案级别 + authorUid: '', // 编写人 + authorDeptId: '', // 编写部门 + releaseDate: '', // 发布实施日期 + fileList: [ + { + fileUrl: 'url', + fileName: 'name', + }, + ], + emergencyTeam: '', //应急队伍 + areaList: [], //区域列表 + teamList: [], + deptList: [], + abolishStatus: false, + }); + 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 == '修改应急预案管理') { + emergencyPlanApi() + .seeEmergencyTeam(id) + .then((res) => { + if (res.data.code == 200) { + ruleForm.value = res.data.data; + } + }); + } + }; + //日期选择器 + const releaseDate = ref(''); + // 上传附件 + const fileList = ref<UploadUserFile[]>([]); + //部门树 + const department = () => { + goalManagementApi() + .getTreedepartment() + .then((res) => { + if (res.data.code == 200) { + data.value = res.data.data; + } else { + ElMessage.error(res.data.msg); + } + }); + }; + const treeSelect = ref(); + // const trees = ref(); + const propse = { + label: 'depName', + children: 'children', + value: 'depId', + }; + onMounted(() => { + department(); + }); + //定义树形下拉框 + const responsibleDepartment = ref(); + const data = ref(); + + const submitForm = async (title: string, formEl: FormInstance | undefined) => { + if (title == '新建应急预案管理') { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + isShowDialog.value = false; + emergencyPlanApi() + .addEmergencyPlan(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; + emergencyPlanApi() + .editEmergencyTeam(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 = { + name: '', // 预案名称 + type: '', //预案类型 + associatedDanger: '', // 危险源关联 + level: '', // 预案级别 + authorUid: '', // 编写人 + authorDeptId: '', // 编写部门 + releaseDate: '', // 发布实施日期 + fileList: [ + { + fileUrl: 'url', + fileName: 'name', + }, + ], + emergencyTeam: '', //应急队伍 + areaList: [], //区域列表 + teamList: [], + deptList: [], + abolishStatus: false, + }; + } + }; + const resetForm = (formEl: FormInstance | undefined) => { + isShowDialog.value = false; + if (!formEl) return; + formEl.resetFields(); + }; + // 应急队伍弹窗 + const Shows = ref(); + const daiInpt = () => { + Shows.value.openDailog(); + }; + // 选择区域弹窗 + const openRef = ref(); + const regionsDialog = () => { + openRef.value.openDailog(); + }; + // 打开用户选择弹窗 + const userRef = ref(); + const openUser = () => { + userRef.value.openDailog(); + }; + //回显 + const onUser = (e: any) => { + ruleForm.value.authorUid = e.uid; + }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; + return { + openDialog, + fileList, + responsibleDepartment, + data, + Search, + releaseDate, + treeSelect, + // trees, + propse, + department, + daiInpt, + Shows, + submitForm, + openUser, + userRef, + regionsDialog, + openRef, + toggleFullscreen, + FullScreen, + full, + titles, + disabled, + emit, + isShowDialog, + ruleFormRef, + ruleForm, + resetForm, + onUser, + }; + }, +}); +</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/panManagement/component/openAdd.vue b/src/views/contingencyManagement/panManagement/component/openAdd.vue index 209fb2c..27fd2ce 100644 --- a/src/views/contingencyManagement/panManagement/component/openAdd.vue +++ b/src/views/contingencyManagement/panManagement/component/openAdd.vue @@ -1,429 +1,399 @@ <template> - <div class="system-edit-user-container"> - <el-dialog - :title="titles" - v-model="isShowDialog" - width="40%" - 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" - :disabled="disabled" - > - <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="responsibleDepartment"> - <el-tree-select - v-model="ruleForm.treeSelect" - :data="data" - multiple - :render-after-expand="true" - :props="propse" - show-checkbox - clearable - check-strictly - /> - <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="type"> - <el-select v-model="ruleForm.type" class="w100" placeholder="请选择"> - <el-option label="综合应急预案" value="综合应急预案"></el-option> - <el-option label="现场处置方案" value="现场处置方案"></el-option> - <el-option label="专项应急预案" value="专项应急预案"></el-option> - <el-option label="其他预案" value="其他预案"></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="associatedDanger"> - <el-select v-model="ruleForm.associatedDanger" 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="level"> - <el-select v-model="ruleForm.level" class="w100" placeholder="请选择"> - <el-option label="公司级" value="公司级"></el-option> - <el-option label="分厂级" value="分厂级"></el-option> - <el-option label="车间级" value="车间级"></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="authorId" > - <el-input - v-model="ruleForm.authorUid" - 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="authorDeptId"> - <el-tree-select - v-model="ruleForm.authorDeptId" - check-strictly - :data="data" - class="w100" - :props="propse" - clearable - :render-after-expand="false" - 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="releaseDate"> - <el-date-picker - v-model="ruleForm.releaseDate" - type="datetime" - class="w100" - placeholder="选择日期时间" - value-format="YYYY-MM-DD HH:mm:ss" - /> - </el-form-item> - </el-col> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="应急队伍" prop="emergencyTeam"> - <el-input - v-model="ruleForm.emergencyTeam" - 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="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="areaName">--> -<!-- <el-input--> -<!-- v-model="ruleForm.areaName"--> -<!-- 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> + <div class="system-edit-user-container"> + <el-dialog :title="titles" v-model="isShowDialog" width="40%" draggable :fullscreen="full" :close-on-click-modal="false"> + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> + <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px" :disabled="disabled"> + <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="responsibleDepartment"> + <el-tree-select + v-model="ruleForm.treeSelect" + :data="data" + multiple + :render-after-expand="true" + :props="propse" + show-checkbox + clearable + check-strictly + /> + <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="type"> + <el-select v-model="ruleForm.type" class="w100" placeholder="请选择"> + <el-option label="综合应急预案" value="综合应急预案"></el-option> + <el-option label="现场处置方案" value="现场处置方案"></el-option> + <el-option label="专项应急预案" value="专项应急预案"></el-option> + <el-option label="其他预案" value="其他预案"></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="associatedDanger"> + <el-select v-model="ruleForm.associatedDanger" 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="level"> + <el-select v-model="ruleForm.level" class="w100" placeholder="请选择"> + <el-option label="公司级" value="公司级"></el-option> + <el-option label="分厂级" value="分厂级"></el-option> + <el-option label="车间级" value="车间级"></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="authorId"> + <el-input v-model="ruleForm.authorName" 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="authorDeptId"> + <el-tree-select + v-model="ruleForm.authorDeptId" + check-strictly + :data="data" + class="w100" + :props="propse" + clearable + :render-after-expand="false" + 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="releaseDate"> + <el-date-picker + v-model="ruleForm.releaseDate" + type="datetime" + class="w100" + placeholder="选择日期时间" + value-format="YYYY-MM-DD HH:mm:ss" + /> + </el-form-item> + </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="应急队伍" prop="emergencyTeam"> + <el-input v-model="ruleForm.emergencyTeam" 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="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="areaName">--> + <!-- <el-input--> + <!-- v-model="ruleForm.areaName"--> + <!-- 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="resetForm(ruleFormRef)" size="default">关闭</el-button> - <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button> + <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button> </span> - </template> - </el-dialog> - <CheckTemplate ref="Shows"/> - <DailogSearchUser ref="userRef" @SearchUser="onUser"/> - <RegionsDialog ref="openRef"/> - </div> + </template> + </el-dialog> + <CheckTemplate ref="Shows" /> + <DailogSearchUserManger ref="userRef" @SearchUser="onUser" /> + <RegionsDialog ref="openRef" /> + </div> </template> <script lang="ts"> -import { - ref, - defineComponent, - onMounted, -} from 'vue'; +import { ref, defineComponent, onMounted } from 'vue'; -import type { - UploadUserFile, - FormInstance, -} from 'element-plus' +import type { UploadUserFile, FormInstance } from 'element-plus'; import { ElMessage } from 'element-plus'; -import { - Search, - FullScreen -} from '@element-plus/icons-vue' -import DailogSearchUser from "/@/components/DailogSearchUser/index.vue" -import CheckTemplate from '/@/components/checkTemplate/index.vue' -import RegionsDialog from '/@/components/regionsDialog/index.vue' -import {emergencyPlanApi} from "/@/api/emergencyPlan"; -import {goalManagementApi} from "/@/api/goalManagement"; +import { Search, FullScreen } from '@element-plus/icons-vue'; +import DailogSearchUserManger from '/@/components/DailogSearchUserManger/index.vue'; +import CheckTemplate from '/@/components/checkTemplate/index.vue'; +import RegionsDialog from '/@/components/regionsDialog/index.vue'; +import { emergencyPlanApi } from '/@/api/emergencyPlan'; +import { goalManagementApi } from '/@/api/goalManagement'; export default defineComponent({ - name: 'openAdd', - components: { - CheckTemplate, - DailogSearchUser, - RegionsDialog, - }, - setup(prop, {emit}) { - const isShowDialog = ref(false); - const ruleFormRef = ref<FormInstance>(); - const ruleForm = ref({ - name: '', // 预案名称 - type: '', //预案类型 - associatedDanger: '', // 危险源关联 - level: '', // 预案级别 - authorUid: '', // 编写人 - authorDeptId: '', // 编写部门 - releaseDate: '', // 发布实施日期 - fileList: [ - { - fileUrl: 'url', - fileName: 'name', - } - ], - emergencyTeam: '', //应急队伍 - areaList: [], //区域列表 - teamList: [], - deptList: [], - abolishStatus: false, - }) - const titles = ref(); - const disabled = ref(); + name: 'openAdd', + components: { + CheckTemplate, + DailogSearchUserManger, + RegionsDialog, + }, + setup(prop, { emit }) { + const isShowDialog = ref(false); + const ruleFormRef = ref<FormInstance>(); + const ruleForm = ref({ + name: '', // 预案名称 + type: '', //预案类型 + associatedDanger: '', // 危险源关联 + level: '', // 预案级别 + authorUid: '', // 编写人 + authorName: '', + authorDeptId: '', // 编写部门 + releaseDate: '', // 发布实施日期 + fileList: [ + { + fileUrl: 'url', + fileName: 'name', + }, + ], + emergencyTeam: '', //应急队伍 + areaList: [], //区域列表 + teamList: [], + deptList: [], + abolishStatus: false, + }); + 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 == '修改应急预案管理') { - emergencyPlanApi() - .seeEmergencyTeam(id) - .then((res) => { - if (res.data.code == 200) { - ruleForm.value = res.data.data; - } - }); - } - }; - //日期选择器 - const releaseDate = ref('') - // 上传附件 - const fileList = ref<UploadUserFile[]>([]) - //部门树 - const department = () => { - goalManagementApi() - .getTreedepartment() - .then((res) => { - if (res.data.code == 200) { - data.value = res.data.data; - } else { - ElMessage.error(res.data.msg); - } - }); - }; - const treeSelect = ref() - // const trees = ref(); - const propse = { - label: 'depName', - children: 'children', - value: 'depId', - }; - onMounted(() => { - department(); - }); - //定义树形下拉框 - const responsibleDepartment = ref() - const data = ref(); + // 打开弹窗 + const openDialog = (title: string, id: number, type: boolean) => { + isShowDialog.value = true; + titles.value = title; + disabled.value = type; + if (title == '查看应急预案管理' || title == '修改应急预案管理') { + emergencyPlanApi() + .seeEmergencyTeam(id) + .then((res) => { + if (res.data.code == 200) { + ruleForm.value = res.data.data; + } + }); + } + }; + //日期选择器 + const releaseDate = ref(''); + // 上传附件 + const fileList = ref<UploadUserFile[]>([]); + //部门树 + const department = () => { + goalManagementApi() + .getTreedepartment() + .then((res) => { + if (res.data.code == 200) { + data.value = res.data.data; + } else { + ElMessage.error(res.data.msg); + } + }); + }; + const treeSelect = ref(); + // const trees = ref(); + const propse = { + label: 'depName', + children: 'children', + value: 'depId', + }; + onMounted(() => { + department(); + }); + //定义树形下拉框 + const responsibleDepartment = ref(); + const data = ref(); - const submitForm = async (title: string, formEl: FormInstance | undefined) => { - if (title == '新建应急预案管理') { - if (!formEl) return; - await formEl.validate((valid, fields) => { - if (valid) { - isShowDialog.value = false; - emergencyPlanApi() - .addEmergencyPlan(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; - emergencyPlanApi() - .editEmergencyTeam(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 = { - name: '', // 预案名称 - type: '', //预案类型 - associatedDanger: '', // 危险源关联 - level: '', // 预案级别 - authorUid: '', // 编写人 - authorDeptId: '', // 编写部门 - releaseDate: '', // 发布实施日期 - fileList: [ - { - fileUrl: 'url', - fileName: 'name', - } - ], - emergencyTeam: '', //应急队伍 - areaList: [], //区域列表 - teamList: [], - deptList: [], - abolishStatus: false, - }; - } - }; - const resetForm = (formEl: FormInstance | undefined) => { - isShowDialog.value = false; - if (!formEl) return; - formEl.resetFields(); - }; - // 应急队伍弹窗 - const Shows=ref() - const daiInpt=()=>{ - Shows.value.openDailog() - } - // 选择区域弹窗 - const openRef=ref() - const regionsDialog=()=>{ - openRef.value.openDailog() - } - // 打开用户选择弹窗 - const userRef = ref(); - const openUser = () => { - userRef.value.openDailog(); - }; - //回显 - const onUser = (e:any) => { - ruleForm.value.authorUid=e.uid - }; - //全屏 - const full = ref(false); - const toggleFullscreen = () => { - if (full.value == false) { - full.value = true; - } else { - full.value = false; - } - }; - return { - openDialog, - fileList, - responsibleDepartment, - data, - Search, - releaseDate, - treeSelect, - // trees, - propse, - department, - daiInpt, - Shows, - submitForm, - openUser, - userRef, - regionsDialog, - openRef, - toggleFullscreen, - FullScreen, - full, - titles, - disabled, - emit, - isShowDialog, - ruleFormRef, - ruleForm, - resetForm, - onUser, - }; - }, + const submitForm = async (title: string, formEl: FormInstance | undefined) => { + if (title == '新建应急预案管理') { + if (!formEl) return; + await formEl.validate((valid, fields) => { + if (valid) { + isShowDialog.value = false; + emergencyPlanApi() + .addEmergencyPlan(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; + emergencyPlanApi() + .editEmergencyTeam(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 = { + name: '', // 预案名称 + type: '', //预案类型 + associatedDanger: '', // 危险源关联 + level: '', // 预案级别 + authorUid: '', // 编写人 + authorName: '', + authorDeptId: '', // 编写部门 + releaseDate: '', // 发布实施日期 + fileList: [ + { + fileUrl: 'url', + fileName: 'name', + }, + ], + emergencyTeam: '', //应急队伍 + areaList: [], //区域列表 + teamList: [], + deptList: [], + abolishStatus: false, + }; + } + }; + const resetForm = (formEl: FormInstance | undefined) => { + isShowDialog.value = false; + if (!formEl) return; + formEl.resetFields(); + }; + // 应急队伍弹窗 + const Shows = ref(); + const daiInpt = () => { + Shows.value.openDailog(); + }; + // 选择区域弹窗 + const openRef = ref(); + const regionsDialog = () => { + openRef.value.openDailog(); + }; + // 打开用户选择弹窗 + const userRef = ref(); + const openUser = () => { + userRef.value.openDailog(); + }; + //回显 + const onUser = (e: any) => { + ruleForm.value.authorUid = e[0].uid; + ruleForm.value.authorName = e[0].realName; + }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; + return { + openDialog, + fileList, + responsibleDepartment, + data, + Search, + releaseDate, + treeSelect, + // trees, + propse, + department, + daiInpt, + Shows, + submitForm, + openUser, + userRef, + regionsDialog, + openRef, + toggleFullscreen, + FullScreen, + full, + titles, + disabled, + emit, + isShowDialog, + ruleFormRef, + ruleForm, + resetForm, + onUser, + }; + }, }); </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 diff --git a/src/views/contingencyManagement/panManagement/component/openEdit.vue b/src/views/contingencyManagement/panManagement/component/openEdit.vue deleted file mode 100644 index dcafa12..0000000 --- a/src/views/contingencyManagement/panManagement/component/openEdit.vue +++ /dev/null @@ -1,460 +0,0 @@ -<template> - <div class="system-edit-user-container"> - <el-dialog title="编辑应急队伍管理" v-model="isShowDialog" width="769px"> - <el-form - ref="ruleFormRef" - :rules="rules" - :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"></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-select v-model="ruleForm.teamLevel" class="w100"> - <el-option label="公司" value="admin"></el-option> - <el-option label="分厂-车间" value="common"></el-option> - <el-option label="工序-班组等" value="shang"></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.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="responsibleDepartment"> - <el-tree-select v-model="ruleForm.responsibleDepartment" :data="data" class="w100"/> - </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-input v-model="ruleForm.teamPhone"></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.telephone"></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 - class="textarea" - v-model="ruleForm.describe" - type="textarea" - maxlength="150" - 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="24" :md="24" :lg="24" :xl="24" class="mb20"> - <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> - <el-tab-pane label="应急队伍人员" name="first"> - <el-button type="primary" size="default" @click="onAddEmergencyPersonnel">新增</el-button> - <el-table - :data="tableData" - style="width: 100%;margin-top: 15px;" - ref="multipleTableRef" - :header-cell-style="{background:'#f6f7fa',color:'#909399'}" - > - <el-table-column prop="jobNumber" label="人员工号" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="personnelName" 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="position" label="职位" show-overflow-tooltip sortable></el-table-column> - <el-table-column label="操作" width="200" align="center"> - <template #default="scope"> - <el-button size="small" type="primary" text="plain" >查看 - </el-button> - <el-button size="small" type="primary" text="plain" @click="onEditEmergencyPersonnel(scope.row)" style="margin-right: 5px;">编辑 - </el-button> - <el-button size="small" type="primary" text="plain" style="margin-right: 5px;">删除 - </el-button> - </template> - </el-table-column> - </el-table> - </el-tab-pane> - </el-tabs> - </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> - <userSelections ref="userRef"/> - <AddEmergencyPersonnel ref="addRef" /> - <EditEmergencyPersonnel ref="editRef" /> - </div> -</template> - -<script lang="ts"> -import { - reactive, - toRefs, - ref, - onMounted, - defineComponent -} from 'vue'; -import type { - UploadUserFile, - TabsPaneContext, - FormInstance, - FormRules, - ElTable, -} from 'element-plus' -import { - Search -} from '@element-plus/icons-vue' -import userSelections from "/@/components/userSelections/index.vue" -import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue"; -import EditEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/editEmergencyPersonnel.vue"; -// 定义表格数据类型 -interface User { - personnelName: string - jobNumber: string - phone: string; - position: string; -} -// 定义接口来定义对象的类型 -interface TableDataRow { - // userName: string; - // userNickname: string; - // roleSign: string; - // department: string[]; - // phone: string; - // email: string; -} -// 定义接口来定义对象的类型 -interface DeptData { - deptName: string; - createTime: string; - status: boolean; - sort: number | string; - describe: string; - id: number; - children?: DeptData[]; -} -// 定义接口来定义对象的类型 -interface RuleFormRow { - // teamName: string; - // teamLevel: string; - // teamLeader: string; - // responsibleDepartment: any - // teamPhone: string; - // telephone: string; - // describe: string; - selectPeople:string - jobNumber: string; - personnelName: string; - personnelGender: string; - phone: string; - position: string; -} -interface UserState { - isShowDialog: boolean; - ruleForm: RuleFormRow; - deptData: Array<DeptData>; -} - -export default defineComponent({ - name: 'openEdit', - components: { - userSelections, - AddEmergencyPersonnel, - EditEmergencyPersonnel - }, - setup() { - const state = reactive<UserState>({ - isShowDialog: false, - ruleForm: { - selectPeople:'111', //选择人员 - jobNumber: '', // 人员工号 - phone: '', // 手机号码 - personnelGender: '', //人员性别 - position: '', //职位 - personnelName: '', // 人员名称 - }, - deptData: [], // 部门数据 - }); - - // 关闭弹窗 - const closeDialog = () => { - state.isShowDialog = false; - }; - // 取消 - const onCancel = () => { - closeDialog(); - }; - // // 新增 - // const onSubmit = () => { - // closeDialog(); - // }; - // 初始化部门数据 - const initTableData = () => { - state.deptData.push({ - deptName: 'vueNextAdmin', - createTime: new Date().toLocaleString(), - status: true, - sort: Math.random(), - describe: '顶级部门', - id: Math.random(), - children: [ - { - deptName: 'IT外包服务', - createTime: new Date().toLocaleString(), - status: true, - sort: Math.random(), - describe: '总部', - id: Math.random(), - }, - { - deptName: '资本控股', - createTime: new Date().toLocaleString(), - status: true, - sort: Math.random(), - describe: '分部', - id: Math.random(), - }, - ], - }); - }; - // 页面加载时 - onMounted(() => { - initTableData(); - }); - // 上传附件 - const fileList = ref<UploadUserFile[]>([]) - - //定义树形下拉框 - 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: [], - }, - ], - }, - ] - //定义tabs切换 - const activeName = ref('first') - - const handleClick = (tab: TabsPaneContext, event: Event) => { - console.log(tab, event) - } - //添加队伍负责人弹窗 - const addRef = ref(); - const onAddEmergencyPersonnel = () => { - addRef.value.openDialog(); - }; - - //定义表格数据 - const multipleTableRef = ref<InstanceType<typeof ElTable>>() - const multipleSelection = ref<User[]>([]) - const tableData: User[] = [ - { - personnelName: '张志刚', - jobNumber: '1037', - position: '副组长', - phone: '13673321356', - }, - { - personnelName: '张志刚', - jobNumber: '1037', - position: '副组长', - phone: '13673321356', - }, - { - personnelName: '张志刚', - jobNumber: '1037', - position: '副组长', - phone: '13673321356', - }, - { - personnelName: '张志刚', - jobNumber: '1037', - position: '副组长', - phone: '13673321356', - } - ] - // 必填项提示 - 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 userRef = ref(); - const openUser = () => { - userRef.value.openDialog(); - }; - - const ruleFormRef = ref<FormInstance>() - // 打开弹窗 - const openDialog = (row: RuleFormRow) => { - state.ruleForm = row; - state.isShowDialog = true; - }; - // 表单提交验证必填项 - 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 editRef = ref(); - const onEditEmergencyPersonnel = (row: TableDataRow) => { - editRef.value.openDialog(row); - }; - return { - openDialog, - closeDialog, - onCancel, - // onSubmit, - fileList, - responsibleDepartment, - data, - activeName, - handleClick, - multipleSelection, - onAddEmergencyPersonnel, - onEditEmergencyPersonnel, - addRef, - editRef, - submitForm, - Search, - rules, - ruleFormRef, - tableData, - multipleTableRef, - openUser, - userRef, - ...toRefs(state), - }; - }, -}); -</script> -<style scoped lang="scss"> -.textarea{ - height: 168px!important; -} -.textarea ::v-deep .el-textarea__inner{ - height: 168px!important; -} -</style> \ No newline at end of file diff --git a/src/views/contingencyManagement/panManagement/index.vue b/src/views/contingencyManagement/panManagement/index.vue index 2f12a4e..14e7c33 100644 --- a/src/views/contingencyManagement/panManagement/index.vue +++ b/src/views/contingencyManagement/panManagement/index.vue @@ -1,585 +1,598 @@ <template> - <div class="system-user-container"> - <el-card shadow="hover"> - <div class="system-user-search mb15"> - <el-form :inline="true" class="demo-form-inline"> - <el-form-item> - <el-input size="default" v-model="listQuery.searchParams.name" placeholder="预案名称" style="max-width: 215px;"> </el-input> - </el-form-item> - <el-form-item> - <el-select size="default" v-model="listQuery.searchParams.type" placeholder="请选择预案类型" class="ml10" style="max-width: 215px;"> - <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-form-item> - <el-button size="default" type="primary" class="ml10" @click="onSubmit"> - 查询 - </el-button> - <el-button size="default" class="ml10" @click="submitReset"> - 重置 - </el-button> - </el-form-item> - </el-form> - </div> - <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="warning"> - <el-icon> - <Edit /> - </el-icon>修改 - </el-button> - <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll"> - <el-icon> - <Delete /> - </el-icon>删除 - </el-button> - <el-button size="default" type="primary" @click="onabolishLibrary"> - 废止库 - </el-button> - </div> - <div class="button_Right"> -<!-- <el-button size="default" @click="upButton">--> -<!-- <el-icon>--> -<!-- <Upload />--> -<!-- </el-icon>--> -<!-- </el-button>--> -<!-- <el-button size="default">--> -<!-- <el-icon>--> -<!-- <Download />--> -<!-- </el-icon>--> -<!-- </el-button>--> -<!-- <el-button size="default">--> -<!-- <el-icon>--> -<!-- <Refresh />--> -<!-- </el-icon>--> -<!-- </el-button>--> - </div> - </div> - <el-table - :data="tableData" - style="width: 100%" - ref="multipleTableRef" - @selection-change="handleSelectionChange" - > - <el-table-column - type="selection" - width="55" - /> - <el-table-column prop="name" label="预案名称" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="type" label="预案类型" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="level" label="预案级别" show-overflow-tooltip sortable></el-table-column> - <el-table-column prop="releaseDate" 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="isDialogFormVisible(scope.row.id)"> - <el-icon style="margin-right: 5px;"> - <VideoPlay /> - </el-icon>启动 - </el-button> - <el-button size="small" text type="primary" @click="abolish(scope.row.id)"> - <el-icon style="margin-right: 5px;"> - <VideoPause /> - </el-icon>废止 - </el-button> - <el-button size="small" text type="primary" @click="onEdit('修改',scope.row.id)"> - <el-icon style="margin-right: 5px;"> - <EditPen /> - </el-icon>修改 - </el-button> -<!-- <el-button size="small" text type="primary" @click="jumpFrom(0)">--> -<!-- <el-icon style="margin-right: 5px;">--> -<!-- <EditPen />--> -<!-- </el-icon>修改--> -<!-- </el-button>--> -<!-- <el-button size="small" text type="primary" @click="abolish(0)">--> -<!-- 发起审批--> -<!-- </el-button>--> - <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)"> - <el-icon> - <Delete /> - </el-icon>删除 - </el-button> - </template> - </el-table-column> - </el-table> - <div class="pages"> - <el-pagination - v-if="tableData.length == 0 ? false : true" - v-model:currentPage="pageIndex" - v-model:page-size="pageSize" - :page-sizes="[10, 20, 30]" - :pager-count="5" - class="mt15" - background - layout="total, sizes, prev, pager, next, jumper" - :total="total" - @size-change="onHandleSizeChange" - @current-change="onHandleCurrentChange" - /> - </div> - </el-card> - <OpenAdd ref="addRef" @myAdd="onMyAdd"/> - <AbolishLibrary ref="abolishRef"/> -<!-- <StartUp ref="startRef" @myAdd="startUp"/>--> - <el-dialog v-model="dialogFormVisible" width="30%" title="启动" :fullscreen="full"> - <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> - <el-form :model="form" ref="ruleFormRef" label-width="80px"> - <el-form-item label="备注" > - <el-input v-model="form.remark" type="textarea" autocomplete="off" /> - </el-form-item> - </el-form> - <template #footer> - <span class="dialog-footer"> - <el-button @click="dialogFormVisible = false">取消</el-button> - <el-button type="primary" @click="onDetermine" - >确定</el-button - > - </span> - </template> - </el-dialog> - </div> + <div class="system-user-container"> + <el-card shadow="hover"> + <div class="system-user-search mb15"> + <el-form :inline="true" class="demo-form-inline"> + <el-form-item> + <el-input size="default" v-model="listQuery.searchParams.name" placeholder="预案名称" style="max-width: 215px"> </el-input> + </el-form-item> + <el-form-item> + <el-select size="default" v-model="listQuery.searchParams.type" placeholder="请选择预案类型" class="ml10" style="max-width: 215px"> + <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-form-item> + <el-button size="default" type="primary" class="ml10" @click="onSubmit"> 查询 </el-button> + <el-button size="default" class="ml10" @click="submitReset"> 重置 </el-button> + </el-form-item> + </el-form> + </div> + <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="warning"> + <el-icon> + <Edit /> </el-icon + >修改 + </el-button> + <el-button size="default" type="danger" plain :disabled="danger" @click="onDeleteAll"> + <el-icon> + <Delete /> </el-icon + >删除 + </el-button> + <el-button size="default" type="primary" @click="onabolishLibrary"> 废止库 </el-button> + </div> + <div class="button_Right"> + <!-- <el-button size="default" @click="upButton">--> + <!-- <el-icon>--> + <!-- <Upload />--> + <!-- </el-icon>--> + <!-- </el-button>--> + <!-- <el-button size="default">--> + <!-- <el-icon>--> + <!-- <Download />--> + <!-- </el-icon>--> + <!-- </el-button>--> + <!-- <el-button size="default">--> + <!-- <el-icon>--> + <!-- <Refresh />--> + <!-- </el-icon>--> + <!-- </el-button>--> + </div> + </div> + <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55" /> + <el-table-column prop="name" label="预案名称" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="type" label="预案类型" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="level" label="预案级别" show-overflow-tooltip sortable></el-table-column> + <el-table-column prop="releaseDate" 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="isDialogFormVisible(scope.row.id)"> + <el-icon style="margin-right: 5px"> + <VideoPlay /> </el-icon + >启动 + </el-button> + <el-button size="small" text type="primary" @click="abolish(scope.row.id)"> + <el-icon style="margin-right: 5px"> + <VideoPause /> </el-icon + >废止 + </el-button> + <el-button size="small" text type="primary" @click="onEdit('修改', scope.row.id)"> + <el-icon style="margin-right: 5px"> + <EditPen /> </el-icon + >修改 + </el-button> + <el-button + size="small" + text + type="primary" + v-if="scope.row.approveStatus === 0 || scope.row.approveStatus === null" + @click="initiateApproval(scope.row.id)" + > + 发起审批 + </el-button> + <el-button + size="small" + text + type="primary" + v-if="scope.row.approveStatus === 1 || scope.row.checkApprove == true" + @click="onApproval(scope.row.id)" + > + 审批 + </el-button> + <el-button + size="small" + text + type="primary" + v-if="scope.row.approveStatus === 1 || scope.row.checkApprove == false" + @click="initiateApproval(scope.row.id)" + > + 查看审批 + </el-button> + <el-button size="small" text type="primary" v-if="scope.row.approveStatus === 2" @click="initiateApproval(scope.row.id)"> + 查看审批流程 + </el-button> + <!-- <el-button size="small" text type="primary" @click="jumpFrom(0)">--> + <!-- <el-icon style="margin-right: 5px;">--> + <!-- <EditPen />--> + <!-- </el-icon>修改--> + <!-- </el-button>--> + <!-- <el-button size="small" text type="primary" @click="abolish(0)">--> + <!-- 发起审批--> + <!-- </el-button>--> + <el-button size="small" text type="primary" @click="onRowDel(scope.row.id)"> + <el-icon> + <Delete /> </el-icon + >删除 + </el-button> + </template> + </el-table-column> + </el-table> + <div class="pages"> + <el-pagination + v-if="tableData.length == 0 ? false : true" + v-model:currentPage="pageIndex" + v-model:page-size="pageSize" + :page-sizes="[10, 20, 30]" + :pager-count="5" + class="mt15" + background + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="onHandleSizeChange" + @current-change="onHandleCurrentChange" + /> + </div> + </el-card> + <OpenAdd ref="addRef" @myAdd="onMyAdd" /> + <AbolishLibrary ref="abolishRef" /> + <InitiateApproval ref="initiateApprovalRef" /> + <Approval ref="approvalRef" /> + <!-- <StartUp ref="startRef" @myAdd="startUp"/>--> + <el-dialog v-model="dialogFormVisible" width="30%" title="启动" :fullscreen="full"> + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> + <el-form :model="form" ref="ruleFormRef" label-width="80px"> + <el-form-item label="备注"> + <el-input v-model="form.remark" type="textarea" autocomplete="off" /> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="dialogFormVisible = false">取消</el-button> + <el-button type="primary" @click="onDetermine">确定</el-button> + </span> + </template> + </el-dialog> + </div> </template> <script lang="ts"> -import { - reactive, - onMounted, - ref, - defineComponent -} from 'vue'; -import { - ElMessageBox, - ElMessage, -} from 'element-plus'; +import { reactive, onMounted, ref, defineComponent } from 'vue'; +import { ElMessageBox, ElMessage } from 'element-plus'; // import {useRouter} from "vue-router" -import type { - // FormInstance, -} from 'element-plus' -import { Plus, - Edit, - Delete, - Upload, - Download, - Refresh, - VideoPause, - VideoPlay, - EditPen, - FullScreen -} from '@element-plus/icons-vue' +import type {} from // FormInstance, +'element-plus'; +import { Plus, Edit, Delete, Upload, Download, Refresh, VideoPause, VideoPlay, EditPen, FullScreen } from '@element-plus/icons-vue'; import OpenAdd from '/@/views/contingencyManagement/panManagement/component/openAdd.vue'; // import StartUp from '/@/views/contingencyManagement/panManagement/component/startUp.vue'; import AbolishLibrary from '/@/views/contingencyManagement/panManagement/component/abolishLibrary.vue'; +import InitiateApproval from '/@/views/contingencyManagement/panManagement/component/initiateApproval.vue'; +import Approval from '/@/views/contingencyManagement/panManagement/component/approval.vue'; // import UpData from '/@/views/contingencyManagement/panManagement/component/upData.vue'; -import {emergencyPlanApi} from "/@/api/emergencyPlan"; -import {emergencyPlanLogApi} from "/@/api/emergencyPlanLog"; +import { emergencyPlanApi } from '/@/api/emergencyPlan'; +import { emergencyPlanLogApi } from '/@/api/emergencyPlanLog'; export default defineComponent({ - name: 'systemUser', - components: { - OpenAdd, - // StartUp, - AbolishLibrary, - EditPen, - Plus, - Edit, - Delete, - Upload, - Download, - Refresh, - VideoPause, - VideoPlay, - // UpData, - emergencyPlanApi - }, - setup(prop, {emit}) { - // 列表参数 - const listQuery = reactive({ - pageIndex: 1, - pageSize: 10, - searchParams: { - name: "", - type: "", - abolishStatus: false, - } - }) - // 定义表格数据 - const tableData = ref([]); - // 列表数据请求 - const onSubmit = async () => { - let res = await emergencyPlanApi().getEmergencyPlanList(listQuery) - if(res.data.code === '200'){ - tableData.value = res.data.data; - pageIndex.value = res.data.pageIndex; - pageSize.value = res.data.pageSize; - total.value = res.data.total; - }else{ - ElMessage({ - showClose: true, - type:'error', - message:res.data.msg - }) - } - } - // 重置 - const submitReset = () => { - listQuery.searchParams.name = ''; - listQuery.searchParams.type = ''; - onSubmit(); - }; - const warning = ref(true); - const danger = ref(true); + name: 'systemUser', + components: { + OpenAdd, + // StartUp, + InitiateApproval, + AbolishLibrary, + Approval, + EditPen, + Plus, + Edit, + Delete, + Upload, + Download, + Refresh, + VideoPause, + VideoPlay, + // UpData, + emergencyPlanApi, + }, + setup(prop, { emit }) { + // 列表参数 + const listQuery = reactive({ + pageIndex: 1, + pageSize: 10, + searchParams: { + name: '', + type: '', + abolishStatus: false, + }, + }); + // 定义表格数据 + const tableData = ref([]); + // 列表数据请求 + const onSubmit = async () => { + let res = await emergencyPlanApi().getEmergencyPlanList(listQuery); + if (res.data.code === '200') { + tableData.value = res.data.data; + pageIndex.value = res.data.pageIndex; + pageSize.value = res.data.pageSize; + total.value = res.data.total; + } else { + ElMessage({ + showClose: true, + type: 'error', + message: res.data.msg, + }); + } + }; + // 重置 + const submitReset = () => { + listQuery.searchParams.name = ''; + listQuery.searchParams.type = ''; + onSubmit(); + }; + const warning = ref(true); + const danger = ref(true); + // 上传 + // const upShow=ref() + // const upButton=()=>{ + // upShow.value.openDialog() + // } + // 启动弹窗 + const isDialogFormVisible = (data: any) => { + dialogFormVisible.value = true; + form.value.planId = data; + }; + const dialogFormVisible = ref(false); + const form = ref({ + remark: '', + }); + const onDetermine = () => { + dialogFormVisible.value = false; + emergencyPlanLogApi() + .addEmergencyPlanLog(form.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); + } + }); + form.value = { + remark: '', + }; + }; + // 打开新增用户弹窗 + const addRef = ref(); + const onOpenAdd = () => { + addRef.value.openDialog('新建应急预案管理', false); + }; + // 新增后刷新 + const onMyAdd = (e: boolean) => { + if (e) { + onSubmit(); + } else { + onSubmit(); + } + }; + // 打开修改应急预案管理弹窗 + const onEdit = (val: string, row: object) => { + if (val == '详情') { + addRef.value.openDialog('查看应急预案管理', row, true); + } else { + addRef.value.openDialog('修改应急预案管理', row, false); + } + }; - // 上传 - // const upShow=ref() - // const upButton=()=>{ - // upShow.value.openDialog() - // } - // 启动弹窗 - const isDialogFormVisible = (data: any) => { - dialogFormVisible.value=true - form.value.planId=data - } - const dialogFormVisible = ref(false) - const form = ref ({ - remark: '', - }) - const onDetermine = () => { - dialogFormVisible.value=false - emergencyPlanLogApi() - .addEmergencyPlanLog(form.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); - } - }); - form.value = { - remark: '', - } - } - // 打开新增用户弹窗 - const addRef = ref(); - const onOpenAdd = () => { - addRef.value.openDialog('新建应急预案管理',false); - }; - // 新增后刷新 - const onMyAdd = (e: boolean) => { - if (e) { - onSubmit(); - } else { - onSubmit(); - } - }; - // 打开修改应急预案管理弹窗 - const onEdit = (val: string, row: object) => { - if (val == '详情') { - addRef.value.openDialog('查看应急预案管理',row,true); - } else { - addRef.value.openDialog('修改应急预案管理',row,false); - } - }; + //打开废止库弹窗 + const abolishRef = ref(); + const onabolishLibrary = () => { + abolishRef.value.openDialog(); + }; + // 废止 + const abolish = (data: any) => { + ElMessageBox.confirm('确定要废止所选项吗?', '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + emergencyPlanApi() + .EmergencyTeam(data) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'success', + }); + onSubmit(); + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + onSubmit(); + } + }); + }) + .catch(() => {}); + }; - //打开废止库弹窗 - const abolishRef = ref(); - const onabolishLibrary = () => { - abolishRef.value.openDialog(); - }; - // 废止 - const abolish = (data: any) => { - ElMessageBox.confirm('确定要废止所选项吗?', '提示', { - confirmButtonText: '确认', - cancelButtonText: '取消', - type: 'warning', - }).then(() => { - emergencyPlanApi() - .EmergencyTeam(data) - .then((res) => { - if (res.data.code == 200) { - ElMessage({ - showClose: true, - message: res.data.msg, - type: 'success', - }); - onSubmit(); - } else { - ElMessage({ - showClose: true, - message: res.data.msg, - type: 'error', - }); - onSubmit(); - } - }); - }).catch(() => {}); - }; + // 删除用户 + const onRowDel = (id: number) => { + let arr = []; + arr.push(id); + ElMessageBox.confirm('确定删除所选项吗?', '提示', { + confirmButtonText: '确认', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + emergencyPlanApi() + .deleteEmergencyTeam(arr) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'success', + }); + onSubmit(); + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + onSubmit(); + } + }); + }) + .catch(() => {}); + }; - // 删除用户 - const onRowDel = (id: number) => { - let arr = []; - arr.push(id) - ElMessageBox.confirm('确定删除所选项吗?', '提示', { - confirmButtonText: '确认', - cancelButtonText: '取消', - type: 'warning', - }).then(() => { - emergencyPlanApi() - .deleteEmergencyTeam(arr) - .then((res) => { - if (res.data.code == 200) { - ElMessage({ - showClose: true, - message: res.data.msg, - type: 'success', - }); - onSubmit(); - } else { - ElMessage({ - showClose: true, - message: res.data.msg, - type: 'error', - }); - onSubmit(); - } - }); - }).catch(() => {}); - }; + const deleteAll = ref(); + const handleSelectionChange = (val: any) => { + let valId = JSON.parse(JSON.stringify(val)); + let arr = []; + for (let i = 0; i < valId.length; i++) { + arr.push(valId[i].id); + } + deleteAll.value = arr; + if (val.length == 1) { + warning.value = false; + danger.value = false; + } else if (val.length == 0) { + warning.value = true; + danger.value = true; + } else { + warning.value = true; + danger.value = false; + } + }; + // 多选删除 + const onDeleteAll = () => { + ElMessageBox.confirm('确定删除所选项吗?', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then(() => { + emergencyPlanApi() + .deleteEmergencyTeam(deleteAll.value) + .then((res) => { + if (res.data.code == 200) { + ElMessage({ + message: res.data.msg, + type: 'success', + }); + onSubmit(); + } else { + ElMessage({ + showClose: true, + message: res.data.msg, + type: 'error', + }); + onSubmit(); + } + }); + }) + .catch(() => {}); + }; + // 分页 + const pageIndex = ref(); + const pageSize = ref(); + const total = ref(); + // 分页改变 + const onHandleSizeChange = (val: number) => { + listQuery.pageSize = val; + }; + // 分页未改变 + const onHandleCurrentChange = (val: number) => { + listQuery.pageIndex = val; + }; - const deleteAll = ref(); - const handleSelectionChange = (val: any) => { - let valId = JSON.parse(JSON.stringify(val)); - let arr = []; - for (let i = 0; i < valId.length; i++) { - arr.push(valId[i].id); - } - deleteAll.value = arr; - if (val.length == 1) { - warning.value = false; - danger.value = false; - } else if (val.length == 0) { - warning.value = true; - danger.value = true; - } else { - warning.value = true; - danger.value = false; - } - }; -// 多选删除 - const onDeleteAll = () => { - ElMessageBox.confirm('确定删除所选项吗?', '提示', { - confirmButtonText: '确定', - cancelButtonText: '取消', - type: 'warning', - }) - .then(() => { - emergencyPlanApi() - .deleteEmergencyTeam(deleteAll.value) - .then((res) => { - if (res.data.code == 200) { - ElMessage({ - message: res.data.msg, - type: 'success', - }); - onSubmit(); - } else { - ElMessage({ - showClose: true, - message: res.data.msg, - type: 'error', - }); - onSubmit(); - } - }); - }) - .catch(() => {}); - }; - // 分页 - const pageIndex = ref(); - const pageSize = ref(); - const total = ref(); - // 分页改变 - const onHandleSizeChange = (val: number) => { - listQuery.pageSize = val; - }; - // 分页未改变 - const onHandleCurrentChange = (val: number) => { - listQuery.pageIndex = val; - }; - - // const router=useRouter() - // 修改跳转 - // const jumpFrom=(data:string)=>{ - // router.push({ - // path:"/processForm", - // query:{ - // type:data - // } - // }) - // } - // 发起审批跳转 - // const abolish=(data:string)=>{ - // router.push({ - // path:"/abolishDialog", - // query:{ - // type:data - // } - // }) - // } - //全屏 - const full = ref(false); - const toggleFullscreen = () => { - if (full.value == false) { - full.value = true; - } else { - full.value = false; - } - }; - // 页面加载时 - onMounted(() => { - onSubmit(); - }); - return { - // upButton, - // upShow, - tableData, - onSubmit, - onOpenAdd, //新增 - addRef, - onabolishLibrary, - abolishRef, - abolish, - onRowDel, - onHandleSizeChange, - onHandleCurrentChange, - // jumpFrom, - // router, - toggleFullscreen, - FullScreen, - full, - listQuery, - pageIndex, - pageSize, - total, - submitReset, - onMounted, - deleteAll, - warning, - danger, - handleSelectionChange, - onMyAdd, - onDeleteAll, - // dialogTableVisible, - dialogFormVisible, - isDialogFormVisible, - form, - emit, - onDetermine, - onEdit, - }; - }, + // const router=useRouter() + // 修改跳转 + // const jumpFrom=(data:string)=>{ + // router.push({ + // path:"/processForm", + // query:{ + // type:data + // } + // }) + // } + // 发起审批跳转 + // const abolish=(data:string)=>{ + // router.push({ + // path:"/abolishDialog", + // query:{ + // type:data + // } + // }) + // } + // 发起审批弹窗 + const initiateApprovalRef = ref(); + const initiateApproval = () => { + initiateApprovalRef.value.openDialog(); + }; + // 审批 + const approvalRef = ref(); + const onApproval = () => { + approvalRef.value.openDialog(); + }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } + }; + // 页面加载时 + onMounted(() => { + onSubmit(); + }); + return { + tableData, + onSubmit, + onOpenAdd, //新增 + addRef, + onabolishLibrary, + abolishRef, + abolish, + onRowDel, + onHandleSizeChange, + onHandleCurrentChange, + toggleFullscreen, + FullScreen, + full, + listQuery, + pageIndex, + pageSize, + total, + submitReset, + onMounted, + deleteAll, + warning, + danger, + handleSelectionChange, + onMyAdd, + onDeleteAll, + dialogFormVisible, + isDialogFormVisible, + form, + emit, + onDetermine, + onEdit, + initiateApproval, + initiateApprovalRef, + onApproval, + approvalRef, + }; + }, }); </script> <style scoped lang="scss"> -.table_Box{ - padding: 20px; - background-color: #fff; +.table_Box { + padding: 20px; + background-color: #fff; } -.tableForm{ - margin-top: 10px; +.tableForm { + margin-top: 10px; } /*按钮行*/ -.button_Line{ - display: flex; - flex-direction: row; - justify-content: space-between; - margin-bottom: 10px; +.button_Line { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-bottom: 10px; } .el-form .el-form-item { - margin-bottom: 0 !important; + margin-bottom: 0 !important; } .el-button--text { - margin-right: 15px; + margin-right: 15px; } .el-select { - width: 300px; + width: 300px; } .el-input { - width: 300px; + width: 300px; } .dialog-footer button:first-child { - margin-right: 10px; + margin-right: 10px; } //弹窗底部边框线 -::v-deep .el-dialog__footer{ - border-top: 1px solid #e8e8e8; - border-radius: 0 0 4px 4px; +::v-deep .el-dialog__footer { + border-top: 1px solid #e8e8e8; + border-radius: 0 0 4px 4px; } //弹窗顶部边框线 ::v-deep .el-dialog__header { - border-bottom: 1px solid #e8e8e8; - margin-right: 0; - border-radius: 4px 4px 0 0; + border-bottom: 1px solid #e8e8e8; + margin-right: 0; + border-radius: 4px 4px 0 0; } //表头 ::v-deep .el-table th.el-table__cell { - background-color: #f6f7fa; - font-weight: 400; - color: #909399; + background-color: #f6f7fa; + font-weight: 400; + color: #909399; } -.el-table .sort-caret.ascending{ - border-bottom-color: #c0c4cc; +.el-table .sort-caret.ascending { + border-bottom-color: #c0c4cc; } //分页 -.pages{ - display: flex; - justify-content: flex-end; - margin-top: 15px; +.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; + 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; + 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; + 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 button:disabled { + color: #c0c4cc; } -::v-deep .el-pagination .btn-next{ - margin: 0 5px; - background-color: #f4f4f5; - color: #606266; - min-width: 30px; - border-radius: 2px; +::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 -- Gitblit v1.9.2