| | |
| | | <template> |
| | | <div class="system-edit-user-container"> |
| | | <el-dialog |
| | | title="查看应急预案启动记录" |
| | | :title="titles" |
| | | v-model="isShowDialog" |
| | | width="769px" |
| | | draggable |
| | |
| | | <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button> |
| | | <el-form |
| | | ref="ruleFormRef" |
| | | :rules="rules" |
| | | :model="ruleForm" |
| | | size="default" |
| | | label-width="120px" |
| | | :disabled="disabled" |
| | | > |
| | | <el-row :gutter="35"> |
| | | <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> |
| | | <el-form-item label="应急预案" prop="teamName"> |
| | | <el-input |
| | | v-model="ruleForm.teamLeader" |
| | | v-model="ruleForm.planId" |
| | | placeholder="请选择" |
| | | class="input-with-select" |
| | | > |
| | |
| | | <el-form-item label="备注"> |
| | | <el-input |
| | | class="textarea" |
| | | v-model="ruleForm.describe" |
| | | v-model="ruleForm.remark" |
| | | type="textarea" |
| | | maxlength="150" |
| | | placeholder="请填写备注" |
| | |
| | | </el-form> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button size="default" @click="onCancel">关闭</el-button> |
| | | <el-button size="default" @click="resetForm(ruleFormRef)">关闭</el-button> |
| | | <el-button size="default" v-if="disabled == true ? false : true" type="primary" @click="submitForm(titles, ruleFormRef)">确定</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | |
| | | <script lang="ts"> |
| | | import { |
| | | reactive, |
| | | toRefs, |
| | | ref, |
| | | defineComponent |
| | | } from 'vue'; |
| | | import type { |
| | | FormInstance, |
| | | } from 'element-plus' |
| | | import { ElMessage } from 'element-plus'; |
| | | import { |
| | | Search, |
| | | FullScreen |
| | |
| | | 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 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>; |
| | | } |
| | | import {emergencyPlanLogApi} from "/@/api/emergencyPlanLog"; |
| | | |
| | | export default defineComponent({ |
| | | name: 'openEdit', |
| | |
| | | AddEmergencyPersonnel, |
| | | EditEmergencyPersonnel |
| | | }, |
| | | setup() { |
| | | const state = reactive<UserState>({ |
| | | isShowDialog: false, |
| | | ruleForm: { |
| | | selectPeople:'111', //选择人员 |
| | | jobNumber: '', // 人员工号 |
| | | phone: '', // 手机号码 |
| | | personnelGender: '', //人员性别 |
| | | position: '', //职位 |
| | | personnelName: '', // 人员名称 |
| | | }, |
| | | deptData: [], // 部门数据 |
| | | }); |
| | | setup(props, { emit }) { |
| | | const isShowDialog = ref(false); |
| | | |
| | | // 关闭弹窗 |
| | | const closeDialog = () => { |
| | | state.isShowDialog = false; |
| | | }; |
| | | // 取消 |
| | | const onCancel = () => { |
| | | closeDialog(); |
| | | }; |
| | | // // 新增 |
| | | // const onSubmit = () => { |
| | | // closeDialog(); |
| | | // }; |
| | | const ruleFormRef = ref<FormInstance>(); |
| | | const ruleForm= ref({ |
| | | planId: '应急预案', //应急预案人员 |
| | | remark: '', // 备注 |
| | | }) |
| | | const titles = ref(); |
| | | const disabled = ref(); |
| | | |
| | | // 打开用户选择弹窗 |
| | | const userRef = ref(); |
| | | const openUser = () => { |
| | | userRef.value.openDialog(); |
| | | }; |
| | | |
| | | const ruleFormRef = ref<FormInstance>() |
| | | // 打开弹窗 |
| | | const openDialog = (row: RuleFormRow) => { |
| | | state.ruleForm = row; |
| | | state.isShowDialog = true; |
| | | const openDialog = (title: string, id: number, type: boolean) => { |
| | | isShowDialog.value = true; |
| | | titles.value = title; |
| | | disabled.value = type; |
| | | if (title == '查看应急预案启动记录' || title == '修改应急预案启动记录') { |
| | | emergencyPlanLogApi() |
| | | .seeEmergencyPlanLog(id) |
| | | .then((res) => { |
| | | if (res.data.code == 200) { |
| | | ruleForm.value = res.data.data; |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | // 表单提交验证必填项 |
| | | const submitForm = async (title: string, formEl: FormInstance | undefined) => { |
| | | if (title == '修改应急预案启动记录') { |
| | | if (!formEl) return; |
| | | await formEl.validate((valid, fields) => { |
| | | if (valid) { |
| | | isShowDialog.value = false; |
| | | emergencyPlanLogApi() |
| | | .editEmergencyPlanLog(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 = { |
| | | planId: '应急预案', //应急预案人员 |
| | | remark: '', // 备注 |
| | | }; |
| | | } |
| | | }; |
| | | const resetForm = (formEl: FormInstance | undefined) => { |
| | | isShowDialog.value = false; |
| | | if (!formEl) return; |
| | | formEl.resetFields(); |
| | | }; |
| | | //全屏 |
| | | const full = ref(false); |
| | |
| | | }; |
| | | return { |
| | | openDialog, |
| | | closeDialog, |
| | | onCancel, |
| | | Search, |
| | | ruleFormRef, |
| | | openUser, |
| | | userRef, |
| | | ...toRefs(state), |
| | | toggleFullscreen, |
| | | FullScreen, |
| | | full, |
| | | titles, |
| | | disabled, |
| | | emit, |
| | | ruleForm, |
| | | submitForm, |
| | | resetForm, |
| | | isShowDialog, |
| | | }; |
| | | }, |
| | | }); |