| | |
| | | <template> |
| | | <div class="system-edit-user-container"> |
| | | <el-dialog |
| | | title="新建应急预案管理" |
| | | :title="titles" |
| | | v-model="isShowDialog" |
| | | width="769px" |
| | | draggable |
| | |
| | | :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" |
| | |
| | | </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-form-item label="预案类型" prop="type"> |
| | | <el-select v-model="ruleForm.type" 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> |
| | | </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="是" value="0"></el-option> |
| | | <el-option label="否" value="1"></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-form-item label="预案级别" prop="level"> |
| | | <el-select v-model="ruleForm.level" 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> |
| | | </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" |
| | | > |
| | |
| | | </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" @click="daiInpt" > |
| | | <el-input |
| | | v-model="ruleForm.teamLeader" |
| | | v-model="ruleForm.emergencyTeam" |
| | | placeholder="请选择" |
| | | class="input-with-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="areaName"> |
| | | <el-input |
| | | v-model="ruleForm.teamLeader" |
| | | v-model="ruleForm.areaName" |
| | | placeholder="请选择" |
| | | class="input-with-select" |
| | | > |
| | |
| | | </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'; |
| | |
| | | import type { |
| | | UploadUserFile, |
| | | FormInstance, |
| | | // FormRules, |
| | | } from 'element-plus' |
| | | |
| | | import { ElMessage } from 'element-plus'; |
| | | import { |
| | | Search, |
| | | FullScreen |
| | | } from '@element-plus/icons-vue' |
| | | import UserSelections from "/@/components/userSelections/index.vue" |
| | | import 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[]>([]) |
| | | // 可选择树 |
| | |
| | | ], |
| | | }, |
| | | ] |
| | | // 必填项提示 |
| | | // 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=()=>{ |
| | |
| | | // 打开用户选择弹窗 |
| | | const userRef = ref(); |
| | | const openUser = () => { |
| | | userRef.value.openDialog(); |
| | | userRef.value.openDailog(); |
| | | }; |
| | | const onUser = (e:any) => { |
| | | ruleForm.value.authorId=e.id |
| | | }; |
| | | //全屏 |
| | | const full = ref(false); |
| | |
| | | }; |
| | | return { |
| | | openDialog, |
| | | closeDialog, |
| | | isShowDialog, |
| | | onCancel, |
| | | fileList, |
| | | responsibleDepartment, |
| | | data, |
| | | Search, |
| | | ruleForm, |
| | | value1, |
| | | releaseDate, |
| | | treeSelect, |
| | | tree, |
| | | daiInpt, |
| | | Shows, |
| | | ruleFormRef, |
| | | submitForm, |
| | | // rules, |
| | | openUser, |
| | | userRef, |
| | | regionsDialog, |
| | |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | full, |
| | | titles, |
| | | disabled, |
| | | emit, |
| | | isShowDialog, |
| | | ruleFormRef, |
| | | ruleForm, |
| | | resetForm, |
| | | onUser, |
| | | }; |
| | | }, |
| | | }); |