From 25d3c170bf0913c27bfb5659a1bf5b0539c0fe15 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期二, 05 七月 2022 10:19:08 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqtOut
---
src/views/contingencyManagement/contingency/component/openEdit.vue | 450 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 450 insertions(+), 0 deletions(-)
diff --git a/src/views/contingencyManagement/contingency/component/openEdit.vue b/src/views/contingencyManagement/contingency/component/openEdit.vue
new file mode 100644
index 0000000..2ceb729
--- /dev/null
+++ b/src/views/contingencyManagement/contingency/component/openEdit.vue
@@ -0,0 +1,450 @@
+<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"/>
+ </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></el-table-column>
+ <el-table-column prop="personnelName" label="人员名称" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="phone" label="手机号码" show-overflow-tooltip></el-table-column>
+ <el-table-column prop="position" label="职位" show-overflow-tooltip></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>
+ <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 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: {
+ 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 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,
+ ...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
--
Gitblit v1.9.2