From 53ed3f94c44709c5d571d580dccd8149f020ffb7 Mon Sep 17 00:00:00 2001
From: 13937891274 <kxc0822>
Date: 星期五, 22 七月 2022 11:00:42 +0800
Subject: [PATCH] 应急预案一览对接
---
src/views/contingencyManagement/contingency/component/openSee.vue | 246 ++++++++++++++++++++++++++++++-------------------
1 files changed, 151 insertions(+), 95 deletions(-)
diff --git a/src/views/contingencyManagement/contingency/component/openSee.vue b/src/views/contingencyManagement/contingency/component/openSee.vue
index abfd5e9..066f66d 100644
--- a/src/views/contingencyManagement/contingency/component/openSee.vue
+++ b/src/views/contingencyManagement/contingency/component/openSee.vue
@@ -1,22 +1,27 @@
<template>
<div class="system-edit-user-container">
<el-dialog
- title="查看应急队伍管理"
+ :title="title"
v-model="isShowDialog"
width="769px"
draggable
:fullscreen="full"
>
<el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
- <el-form :model="ruleForm" size="default" label-width="90px">
+ <el-form
+ :model="ruleForm"
+ size="default"
+ :rules="rules"
+ 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="队伍名称">
+ <el-form-item label="队伍名称" prop="teamName">
<el-input v-model="ruleForm.teamName" :disabled="true"></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="队伍级别">
+ <el-form-item label="队伍级别" prop="teamLevel">
<el-select v-model="ruleForm.teamLevel" :disabled="true" class="w100">
<el-option label="公司" value="admin"></el-option>
<el-option label="分厂-车间" value="common"></el-option>
@@ -25,9 +30,9 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="队伍负责人">
+ <el-form-item label="队伍负责人" prop="principalUid">
<el-input
- v-model="ruleForm.teamLeader"
+ v-model="ruleForm.principalUid"
placeholder="Please input"
class="input-with-select"
:disabled="true"
@@ -39,27 +44,27 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
- <el-form-item label="负责人部门">
- <el-tree-select v-model="ruleForm.responsibleDepartment" :data="data" :disabled="true" class="w100"/>
+ <el-form-item label="负责人部门" prop="principalDepartmentId">
+ <el-tree-select v-model="ruleForm.principalDepartmentId" :data="data" :disabled="true" 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="负责人手机">
- <el-input v-model="ruleForm.teamPhone" :disabled="true"></el-input>
+ <el-form-item label="负责人手机" prop="principalPhone">
+ <el-input v-model="ruleForm.principalPhone" :disabled="true"></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="固定电话">
- <el-input v-model="ruleForm.telephone" :disabled="true"></el-input>
+ <el-form-item label="固定电话" prop="telephoneNumber">
+ <el-input v-model="ruleForm.telephoneNumber" :disabled="true"></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" :disabled="true" maxlength="150"></el-input>
+ <el-form-item label="队伍描述" prop="teamDesc">
+ <el-input class="textarea" v-model="ruleForm.teamDesc" type="textarea" :disabled="true" maxlength="150"></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-form-item label="相关附件" prop="fileList">
<el-upload
v-model:file-list="fileList"
class="upload-demo"
@@ -121,6 +126,7 @@
import type {
UploadUserFile,
TabsPaneContext,
+ FormRules,
} from 'element-plus'
import {
Search,
@@ -128,29 +134,12 @@
} from '@element-plus/icons-vue'
// import AddTeamLeader from '/@/views/contingency/component/addEmergencyPersonnel.vue';
// 定义接口来定义对象的类型
-interface DeptData {
- deptName: string;
- createTime: string;
- status: boolean;
- sort: number | string;
- describe: string;
+interface MenuDataTree {
id: number;
- children?: DeptData[];
+ label: string;
+ children?: MenuDataTree[];
}
-interface RuleFormRow {
- teamName: string;
- teamLevel: string;
- teamLeader: string;
- department: any;
- phone: string;
- telephone: string;
- describe: string;
-}
-interface UserState {
- isShowDialog: boolean;
- ruleForm: RuleFormRow;
- deptData: Array<DeptData>;
-}
+
// 定义表格数据类型
interface User {
personnelName: string
@@ -158,39 +147,66 @@
phone: string;
position: string;
}
-// // 定义表格数据类型
-// interface Team {
-// personnelName: string
-// teamLevel: string
-// teamDescription: string
-// teamPhone: string
-// phone: string;
-// describe: string;
-// responsibleDepartment: string
-// }
+
+interface RoleState {
+ title:string,
+ // buttonName:string,
+ isShowDialog: boolean;
+ ruleForm: {
+ teamName: string;
+ teamLevel: string;
+ principalUid: number;
+ principalDepartmentId: number;
+ principalPhone: string;
+ telephoneNumber: string;
+ teamDesc: string;
+ fileList: string,
+ };
+ menuData: Array<MenuDataTree>;
+}
export default defineComponent({
name: 'openSee',
components: {
// Search,
},
setup() {
- const state = reactive<UserState>({
+ const state = reactive<RoleState>({
isShowDialog: false,
+ title:'',
+ // buttonName:'',
ruleForm: {
teamName: '', // 队伍名称
teamLevel: '', // 队伍级别
- teamLeader: '', //队伍负责人
- department: [], // 负责人部门
- phone: '', // 负责人手机
- telephone: '', // 固定电话
- describe: '', // 队伍描述
+ principalUid: 1, // 队伍负责人
+ principalDepartmentId: 2, //负责人部门
+ principalPhone: '', // 负责人手机
+ telephoneNumber: '', // 固定电话
+ teamDesc: '', //队伍描述
+ fileList: [],
},
- deptData: [], // 部门数据
+ menuData: [],
});
// 打开弹窗
- const openDialog = (row: RuleFormRow) => {
- state.ruleForm = row;
+ const openDialog = (type: string, value: any) => {
state.isShowDialog = true;
+ if(type === '查看'){
+ state.title = '查看应急队伍管理'
+ // state.buttonName = '新增'
+ state.ruleForm = {
+ teamName: '', // 队伍名称
+ teamLevel: '', // 队伍级别
+ principalUid: 1, // 队伍负责人
+ principalDepartmentId: 2, //负责人部门
+ principalPhone: '', // 负责人手机
+ telephoneNumber: '', // 固定电话
+ teamDesc: '', //队伍描述
+ fileList: [],
+ }
+ }else{
+ // state.title = '修改应急队伍管理'
+ // // state.buttonName = '确定'
+ // state.ruleForm = JSON.parse(JSON.stringify(value))
+ }
};
// 关闭弹窗
const closeDialog = () => {
@@ -200,39 +216,39 @@
const onCancel = () => {
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 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[]>([])
@@ -319,16 +335,55 @@
}
]
- // //添加队伍负责人
- // const addRef = ref();
- // //添加队伍负责人弹窗
- // const onAddTeamLeader = () => {
- // addRef.value.openDialog();
- // };
+ // 必填项提示
+ const rules = reactive<FormRules>({
+ teamName: [
+ {
+ required: true,
+ message: '队伍名称不能为空',
+ trigger: 'change',
+ },
+ ],
+ teamLevel: [
+ {
+ required: true,
+ message: '队伍级别不能为空',
+ trigger: 'change',
+ },
+ ],
+ principalUid: [
+ {
+ required: true,
+ message: '队伍负责人不能为空',
+ trigger: 'change',
+ },
+ ],
+ principalDepartmentId: [
+ {
+ required: true,
+ message: '负责人部门不能为空',
+ trigger: 'change',
+ },
+ ],
+ principalPhone: [
+ {
+ required: true,
+ message: '负责人手机不能为空',
+ trigger: 'change',
+ },
+ ],
+ telephoneNumber: [
+ {
+ required: true,
+ message: '固定电话不能为空',
+ trigger: 'change',
+ },
+ ],
+ })
//全屏
const full = ref(false);
const toggleFullscreen = () => {
- if (full.value == false) {
+ if(full.value == false) {
full.value = true;
} else {
full.value = false;
@@ -352,6 +407,7 @@
toggleFullscreen,
FullScreen,
full,
+ rules,
};
},
});
--
Gitblit v1.9.2