From 00d4082a1709e7c32e7fdefc815266a58d87bf8e Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期一, 01 八月 2022 10:26:48 +0800 Subject: [PATCH] 对接 --- src/views/contingencyManagement/panManagement/component/openAdd.vue | 302 +++++++++++++++++++++++++++----------------------- 1 files changed, 162 insertions(+), 140 deletions(-) diff --git a/src/views/contingencyManagement/panManagement/component/openAdd.vue b/src/views/contingencyManagement/panManagement/component/openAdd.vue index 87df549..92db42c 100644 --- a/src/views/contingencyManagement/panManagement/component/openAdd.vue +++ b/src/views/contingencyManagement/panManagement/component/openAdd.vue @@ -1,27 +1,30 @@ <template> <div class="system-edit-user-container"> <el-dialog - title="新建应急预案管理" + :title="titles" v-model="isShowDialog" width="769px" draggable + :fullscreen="full" > + <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> <el-form ref="ruleFormRef" :model="ruleForm" size="default" label-width="120px" + :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="teamName"> - <el-input v-model="ruleForm.teamName" placeholder="请填写队伍名称"></el-input> + <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="treeSelect" + v-model="ruleForm.treeSelect" :data="tree" multiple :render-after-expand="true" @@ -31,36 +34,36 @@ </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-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="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-form-item label="危险源关联" prop="associatedDanger"> + <el-select v-model="ruleForm.associatedDanger" class="w100" placeholder="请选择"> + <el-option :label="true">是</el-option> + <el-option :label="false">否</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-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="telephone" > + <el-form-item label="编写人" prop="authorId" > <el-input - v-model="ruleForm.teamLeader" + v-model="ruleForm.authorId" placeholder="请选择" class="input-with-select" > @@ -71,33 +74,34 @@ </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-form-item label="编写部门" prop="authorDeptId"> <el-tree-select - v-model="ruleForm.responsibleDepartment" + v-model="ruleForm.authorDeptId" :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-form-item label="发布实施日期" prop="releaseDate"> <el-date-picker - v-model="value1" + 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="telephone" @click="daiInpt" > + <el-form-item label="应急队伍" prop="emergencyTeam"> <el-input - v-model="ruleForm.teamLeader" + v-model="ruleForm.emergencyTeam" placeholder="请选择" class="input-with-select" > <template #append> - <el-button :icon="Search"/> + <el-button :icon="Search" @click="daiInpt" /> </template> </el-input> </el-form-item> @@ -121,9 +125,9 @@ </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-form-item label="区域名称" prop="areaName"> <el-input - v-model="ruleForm.teamLeader" + v-model="ruleForm.areaName" placeholder="请选择" class="input-with-select" > @@ -137,20 +141,19 @@ </el-form> <template #footer> <span class="dialog-footer"> - <el-button @click="onCancel" size="default">关闭</el-button> - <el-button size="default" type="primary" @click="submitForm(ruleFormRef)">确定</el-button> + <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button> + <el-button size="default" type="primary" v-if="disabled == true ? false : true" @click="submitForm(titles, ruleFormRef)">确定</el-button> </span> </template> </el-dialog> <CheckTemplate ref="Shows"/> - <userSelections ref="userRef"/> + <DailogSearchUser ref="userRef" @SearchUser="onUser"/> <RegionsDialog ref="openRef"/> </div> </template> <script lang="ts"> import { - reactive, ref, defineComponent } from 'vue'; @@ -158,50 +161,70 @@ import type { UploadUserFile, FormInstance, - // FormRules, } from 'element-plus' - +import { ElMessage } from 'element-plus'; import { - Search + Search, + FullScreen } from '@element-plus/icons-vue' -import UserSelections from "/@/components/userSelections/index.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"; export default defineComponent({ name: 'openAdd', components: { CheckTemplate, - UserSelections, + DailogSearchUser, RegionsDialog, }, - setup() { - const isShowDialog = ref(false) + setup(prop, {emit}) { + const isShowDialog = ref(false); + const ruleFormRef = ref<FormInstance>(); + const ruleForm = ref({ + name: '', // 预案名称 + type: '', //预案类型 + associatedDanger: '', // 危险源关联 + level: '', // 预案级别 + authorId: '', // 编写人 + authorDeptId: '', // 编写部门 + releaseDate: '', // 发布实施日期 + fileList: [ + { + fileUrl: 'url', + fileName: 'name', + } + ], + emergencyTeam: '', //应急队伍 + areaList: [ + { + areaId: '', + } + ], //区域列表 + areaName: '', //区域名称 + teamList: [ + { + teamId: '', + } + ], + deptList: [ + { + departmentId: '', + } + ] + }) + const titles = ref(); + const disabled = ref(); - const ruleFormRef = ref<FormInstance>() - //定义表单 - const ruleForm = reactive({ - teamName: '', // 队伍名称 - teamLeader: '', //队伍负责人 - department: [], // 负责人部门 - phone: '', // 负责人手机 - telephone: '', // 固定电话 - }); // 打开弹窗 - const openDialog = () => { - // state.ruleForm = row; + const openDialog = (title: string, id: number, type: boolean) => { isShowDialog.value = true; - }; - // 关闭弹窗 - const closeDialog = () => { - isShowDialog.value = false; - }; - // 取消 - const onCancel = () => { - closeDialog(); + titles.value = title; + disabled.value = type; }; //日期选择器 - const value1 = ref('') + const releaseDate = ref('') // 上传附件 const fileList = ref<UploadUserFile[]>([]) // 可选择树 @@ -212,11 +235,11 @@ label: 'Level one 1', children: [ { - value: '1-1', + value: '11', label: 'Level two 1-1', children: [ { - value: '1-1-1', + value: '111', label: 'Level three 1-1-1', }, ], @@ -228,21 +251,21 @@ label: 'Level one 2', children: [ { - value: '2-1', + value: '21', label: 'Level two 2-1', children: [ { - value: '2-1-1', + value: '211', label: 'Level three 2-1-1', }, ], }, { - value: '2-2', + value: '22', label: 'Level two 2-2', children: [ { - value: '2-2-1', + value: '221', label: 'Level three 2-2-1', }, ], @@ -254,21 +277,21 @@ label: 'Level one 3', children: [ { - value: '3-1', + value: '31', label: 'Level two 3-1', children: [ { - value: '3-1-1', + value: '311', label: 'Level three 3-1-1', }, ], }, { - value: '3-2', + value: '32', label: 'Level two 3-2', children: [ { - value: '3-2-1', + value: '321', label: 'Level three 3-2-1', }, ], @@ -284,7 +307,7 @@ label: '广汇能源综合物流发展有限责任公司', children: [ { - value: '1-1', + value: '11', label: '经营班子', children: [], }, @@ -295,12 +318,12 @@ label: '生产运行部', children: [ { - value: '2-1', + value: '21', label: '灌装一班', children: [] }, { - value: '2-2', + value: '22', label: '工艺四班', children: [], }, @@ -311,74 +334,56 @@ label: '设备部', children: [ { - value: '3-1', + value: '31', label: '仪表班', children: [], }, { - value: '3-2', + value: '32', 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 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); + } + }) + } + }; + const resetForm = (formEl: FormInstance | undefined) => { + isShowDialog.value = false; + if (!formEl) return; + formEl.resetFields(); + }; // 应急队伍弹窗 const Shows=ref() const daiInpt=()=>{ @@ -392,30 +397,47 @@ // 打开用户选择弹窗 const userRef = ref(); const openUser = () => { - userRef.value.openDialog(); + userRef.value.openDailog(); + }; + const onUser = (e:any) => { + ruleForm.value.authorId=e.id + }; + //全屏 + const full = ref(false); + const toggleFullscreen = () => { + if (full.value == false) { + full.value = true; + } else { + full.value = false; + } }; return { openDialog, - closeDialog, - isShowDialog, - onCancel, fileList, responsibleDepartment, data, Search, - ruleForm, - value1, + releaseDate, treeSelect, tree, daiInpt, Shows, - ruleFormRef, submitForm, - // rules, openUser, userRef, regionsDialog, openRef, + toggleFullscreen, + FullScreen, + full, + titles, + disabled, + emit, + isShowDialog, + ruleFormRef, + ruleForm, + resetForm, + onUser, }; }, }); -- Gitblit v1.9.2