应急队伍管理

zhaojiale

2022-08-05 88e3972bd623a80ce86ade12f9e1f5b593f00423

应急队伍管理

 src/api/contingency/index.ts

@@ -35,8 +35,9 @@
        // 应急队伍删除
        deleteEmergencyTeam: (params:object) => {
            return request({
                url: `/emergencyTeam/batchDelete/${params}`,
                method: 'get',
                url: `/emergencyTeam/batchDelete`,
                method: 'post',
                data:params
            });
        },
        // 应急队伍人员一览

 src/components/DailogSearchUserManger/index.vue

对比新文件
@@ -0,0 +1,223 @@
<template>
    <el-dialog v-model="dialogVisible" :fullscreen="full" title="用户选择" width="60%" draggable>
        <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
        <el-row>
            <el-col :span="6">
                <div class="userTree">
                    <el-input v-model="filterText" placeholder="请输入组织机构过滤"></el-input>
                    <div class="tree">
                        <el-tree ref="treeRef" :data="data" :props="propse" @node-click="handleNodeClick" :filter-node-method="filterNode" />
                    </div>
                </div>
            </el-col>
            <el-col :span="14" style="padding: 20px">
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon>
                    <el-row>
                        <el-col :span="10" :offset="1">
                            <el-form-item size="default">
                                <el-input v-model="ruleForm.pass" placeholder="登录名" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="1">
                            <el-form-item>
                                <el-button size="default" type="primary" >查询</el-button>
                                <el-button size="default">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-table :data="tableData" style="width: 100%; margin-top: 20px" @cell-click="radio">
                    <el-table-column align="center">
                        <template #default="scope">
                            <el-radio-group v-model="radio1">
                                <el-radio :label="scope.row.uid" size="large">{{ null }}</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="realName" label="登录名" />
                    <el-table-column align="center" prop="username" label="用户名" />
                    <el-table-column align="center" prop="address" label="所属机构" />
                    <el-table-column align="center" prop="address" label="所属部门" />
                    <el-table-column align="center" prop="type" label="状态" />
                </el-table>
                <el-pagination
                    style="padding: 20px 0; border-bottom: 1px solid #dedede"
                    v-model:currentPage="currentPage4"
                    v-model:page-size="pageSize4"
                    :page-sizes="[100, 200, 300, 400]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
            <el-col :span="4">
            <div v-if="dynamicTags[0]==''?false:true">
                <el-tag
                    v-for="tag in dynamicTags"
                    :key="tag"
                    class="mx-1"
                    style="margin: 5px"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                >
                    {{ tag.realName }}
                </el-tag>
                </div>
            </el-col>
        </el-row>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false" size="default">关闭</el-button>
                <el-button type="primary" @click="submitForm" size="default">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, reactive, watch } from 'vue';
import { FullScreen } from '@element-plus/icons-vue';
import { ElMessageBox, ElTree, ElMessage, ElButton, ElInput, TabsPaneContext } from 'element-plus';
import { goalManagementApi } from '/@/api/goalManagement';
interface Tree {
    label: string;
    children?: Tree[];
}
export default defineComponent({
    setup(props, { emit }) {
        //部门树
        const department = () => {
            goalManagementApi()
                .getTreedepartment()
                .then((res) => {
                    if (res.data.code == 200) {
                        data.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                });
        };
        const propse = {
            label: 'depName',
            children: 'children',
            value: 'depId',
        };
        //部门树查询
        const filterText = ref('');
        const treeRef = ref<InstanceType<typeof ElTree>>();
        watch(filterText, (val) => {
            treeRef.value!.filter(val);
        });
        const filterNode = (depName: string, data: Tree) => {
            if (!depName) return true;
            return data.depName.includes(depName);
        };
        onMounted(() => {
            department();
        });
        //左边树形部分点击获取回调
        const names = ref<any>();
        const handleNodeClick = (data: Tree) => {
            goalManagementApi()
                .getManName(data.depId)
                .then((res) => {
                    if (res.data.code == 200) {
                        tableData.value=res.data.data
                    }else{
                        ElMessage.error(res.data.msg);
                    }
                });
        };

        const data = ref();
        //中间表格
        // 搜索条件
        const ruleForm = reactive({
            pass: '',
            checkPass: '',
        });
        // 表格
        const tableData = ref();
        const currentPage4 = ref();
        const pageSize4 = ref();
        const handleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
        };
        const handleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
        };
        // 右方点击添加后显示标签
        const dynamicTags = ref(['']);
        const handleClose = (tag: any) => {
            dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
            radio1.value = '';
        };
        const radio1 = ref('');
        const radio = (event: any) => {
            dynamicTags.value[0] = event;
        };
        const types=ref()
        // 开启弹窗
        const dialogVisible = ref(false);
        const openDailog = (type:any) => {
            console.log(type)
            types.value=type
            dialogVisible.value = true;
        };
        //全屏
        const full = ref(false);
        const toggleFullscreen = () => {
            if (full.value == false) {
                full.value = true;
            } else {
                full.value = false;
            }
        };
        const submitForm = () => {
            emit('SearchUser', dynamicTags.value);
            dialogVisible.value = false;
        };
        return {
            types,
            filterText,
            treeRef,
            filterNode,
            propse,
            dialogVisible,
            names,
            data,
            handleNodeClick,
            openDailog,
            ruleForm,
            tableData,
            currentPage4,
            pageSize4,
            handleSizeChange,
            handleCurrentChange,
            radio1,
            dynamicTags,
            handleClose,
            FullScreen,
            full,
            toggleFullscreen,
            radio,
            submitForm,
        };
    },
});
</script>
<style scoped>
.userTree {
    border: 1px solid #ebeef5;
}
.userTree .el-input {
    padding: 10px;
    border-bottom: 1px solid #ebeef5;
}
.tree {
    height: 500px;
    overflow: hidden;
    overflow-y: auto;
}
</style>

 src/views/accidentManagementSystem/accidentReport/component/openAdd.vue

@@ -206,7 +206,7 @@
            </template>
        </el-dialog>
        <AccidentName @selectItem="onSelectItem" ref="Shows" />
        <DailogSearchUser @SearchUser="onUser" ref="userRef"  />
        <DailogSearchUserManger @SearchUser="onUser" ref="userRef"  />
        <RegionsDialog ref="openRef" />
    </div>
</template>
@@ -217,7 +217,7 @@
import type { UploadUserFile, FormInstance, FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Search, FullScreen } from '@element-plus/icons-vue';
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
import DailogSearchUserManger from '/@/components/DailogSearchUserManger/index.vue';
import AccidentName from '/@/views/accidentManagementSystem/workInjuryDeclaration/component/accidentName.vue';
import RegionsDialog from '/@/components/regionsDialog/index.vue';
import uploaderImg from '/@/components/uploaderImg/index.vue';
@@ -229,7 +229,7 @@
    name: 'openAdd',
    components: {
        AccidentName,
        DailogSearchUser,
        DailogSearchUserManger,
        RegionsDialog,
        uploaderImg
    },

 src/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue

@@ -3,9 +3,10 @@
    <el-dialog
        :title="titles"
        v-model="isShowDialog"
        width="769px"
        width="40%"
        draggable
        :fullscreen="full"
        @close="resetForm(ruleFormRef)"
    >
      <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
      <el-form
@@ -17,15 +18,15 @@
          label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="选择人员" prop="userUid">
            <el-form-item label="选择人员" prop="name">
              <el-input
                  v-model="ruleForm.userUid"
                  v-model="ruleForm.name"
                  placeholder="请选择"
                  class="input-with-select"
                  disabled
              >
                <template #append>
                  <el-button :icon="Search" @click="openUser" disabled/>
                  <el-button :icon="Search" @click="openUser"/>
                </template>
              </el-input>
            </el-form-item>
@@ -41,10 +42,10 @@
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="人员性别" prop="sex">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio label="男" />
                <el-radio label="女" />
            <el-form-item label="人员性别" prop="gender">
              <el-radio-group v-model="ruleForm.gender">
                <el-radio :label="false">男</el-radio>
                <el-radio :label="true">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
@@ -68,7 +69,7 @@
                </span>
      </template>
    </el-dialog>
    <DailogSearchUser ref="userRef" @SearchUser="onUser"/>
    <DailogSearchUserManger ref="userRef" @SearchUser="onUser"/>
  </div>
</template>

@@ -88,21 +89,21 @@
  Search,
  FullScreen,
} from '@element-plus/icons-vue'
import DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
import DailogSearchUserManger from "/@/components/DailogSearchUserManger/index.vue"
import {contingencyApi} from "/@/api/contingency";

export default defineComponent({
  name: 'addTeamLeader',
  components: {
    // Search,
    DailogSearchUser
    DailogSearchUserManger
  },
  setup(props, { emit }) {
    const isShowDialog = ref(false)
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = ref ({
      teamId: '',
      userUid: 1,
      userUid: '',
      gender: '',
      jobNumber: '', // 人员工号
      name: '', // 人员名称
@@ -148,6 +149,11 @@
    })
    const titles = ref();
    const disabled = ref();
    //继续添加
    const addForm = (formEl: FormInstance | undefined) => {
      emit('myAdd', ruleForm.value);
      formEl.resetFields();
    }
    // const submitForm = async (title: string, formEl: FormInstance | undefined) => {
    //   if (title == '新建应急队伍人员') {
    //     if (!formEl) return;
@@ -226,27 +232,28 @@
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            emit('onAdd', ruleForm.value);
            // contingencyApi()
            //     .addEmergencyTeamPersonnel(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();
            //     });
            // console.log('-------',ruleForm.value)
            // emit('myAdd', ruleForm.value);
            contingencyApi()
                .addEmergencyTeamPersonnel(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);
          }
@@ -258,7 +265,7 @@
          if (valid) {
            isShowDialog.value = false;
            contingencyApi()
                .editEmergencyTeam(ruleForm.value)
                .editEmergencyTeamPersonnel(ruleForm.value)
                .then((res) => {
                  if (res.data.code == 200) {
                    ElMessage({
@@ -284,7 +291,7 @@
        formEl.resetFields();
        ruleForm.value = {
          teamId: '',
          userUid: 1,
          userUid: '',
          gender: '',
          jobNumber: '', // 人员工号
          name: '', // 人员名称
@@ -298,11 +305,14 @@
      if (!formEl) return;
      formEl.resetFields();
    };

    // 打开弹窗
    const openDialog = (title: string, id: number, type: boolean) => {
    const openDialog = (title: string, id: number,teamId:number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      ruleForm.value.teamId = teamId

      if (title == '查看应急队伍人员' || title == '修改应急队伍人员') {
        contingencyApi()
            .seeEmergencyTeamPersonnel(id)
@@ -319,7 +329,8 @@
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.userUid=e.id
      ruleForm.value.userUid=e[0].uid
      ruleForm.value.name=e[0].realName
    };
    //全屏
    const full = ref(false);
@@ -350,7 +361,7 @@
      openUser,
      userRef,
      onUser,
      // addForm,
      addForm,
      submitForm,
    };
  },

 src/views/contingencyManagement/contingency/component/openAdd.vue

@@ -1,454 +1,503 @@
<template>
    <div class="system-edit-user-container">
        <el-dialog :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" :rules="rules" 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>
                    </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="公司"></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="principalUid">
                            <el-input v-model="ruleForm.principalUid" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser"/>
                                </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="principalDepartmentId">
                            <el-tree-select v-model="ruleForm.principalDepartmentId" :data="data" class="w100" :props="propse" clearable  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="principalPhone">
                            <el-input v-model="ruleForm.principalPhone" 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="telephoneNumber">
                            <el-input v-model="ruleForm.telephoneNumber" 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="队伍描述" prop="teamDesc">
                            <el-input class="textarea" v-model="ruleForm.teamDesc" 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="相关附件" prop="fileList">
                            <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-row>
            </el-form>
            <el-row :gutter="35">
                <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" :disabled="disabled">
                            <el-button type="primary" size="default" @click="onAddEmergencyPersonnel" :disabled="disabled">新增</el-button>
                            <el-table
                                :data="tableData"
                                style="width: 100%; margin-top: 15px"
                                ref="multipleTableRef"
                                :header-cell-style="{ background: '#f6f7fa', color: '#909399' }"
                :disabled="disabled"
                            >
                                <el-table-column prop="jobNumber" label="人员工号" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="name" 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 disabled size="small" @click="onEdit('详情',scope.row.id)" >查看 </el-button>
                                        <el-button disabled size="small" @click="onEdit('详情',scope.row.id)" style="margin-right: 5px">编辑 </el-button>
                                        <el-button disabled size="small" @click="onRowDel(scope.row.id)" style="margin-right: 5px">删除 </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
            <template #footer>
    <div class="system-edit-user-container">
        <el-dialog :title="titles" v-model="isShowDialog" width="50%" draggable :fullscreen="full" @close="resetForm(ruleFormRef)">
            <el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
            <el-form ref="ruleFormRef" :model="ruleForm" size="default" :rules="rules" 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>
                    </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="公司"></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="principalName">
                            <el-input v-model="ruleForm.principalName" placeholder="请选择" class="input-with-select">
                                <template #append>
                                    <el-button :icon="Search" @click="openUser"/>
                                </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="principalDepartmentId">
                            <el-tree-select v-model="ruleForm.principalDepartmentId" :data="data" class="w100"
                                            :props="propse" clearable 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="principalPhone">
                            <el-input v-model="ruleForm.principalPhone" 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="telephoneNumber">
                            <el-input v-model="ruleForm.telephoneNumber" 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="队伍描述" prop="teamDesc">
                            <el-input class="textarea" v-model="ruleForm.teamDesc" 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="相关附件" prop="fileList">
                            <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-row>
            </el-form>
            <el-row :gutter="35">
                <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" :disabled="disabled">新增
                            </el-button>
                            <el-table
                                    :data="tableData"
                                    style="width: 100%; margin-top: 15px"
                                    ref="multipleTableRef"
                                    :header-cell-style="{ background: '#f6f7fa', color: '#909399' }"
                                    :disabled="disabled"
                            >
                                <el-table-column prop="jobNumber" label="人员工号" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="name" 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="250" align="center">
                                    <template #default="scope">
                                        <el-button :disabled="disabled" size="small" @click="onEdit('查看应急队伍人员',scope.row.id)">查看
                                        </el-button>
                                        <el-button :disabled="disabled" size="small" @click="onEdit('修改应急队伍人员',scope.row.id)"
                                                   style="margin-right: 5px">编辑
                                        </el-button>
                                        <el-button :disabled="disabled" size="small" @click="onRowDel(scope.row.id)"
                                                   style="margin-right: 5px">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
                    <el-button size="default" v-if="disabled == true ? false : true" type="primary" @click="onSubmit(titles, ruleFormRef)">确定</el-button>
                    <el-button size="default" v-if="disabled == true ? false : true" type="primary"
                               @click="onSubmit(titles, ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <AddEmergencyPersonnel ref="addRef"  @myAdd="onMyAdd"/>
        <DailogSearchUser ref="userRef" @SearchUsers="onUser" />
    </div>
            </template>
        </el-dialog>
        <AddEmergencyPersonnel ref="addRef" @myAdd="onMyAdd"/>
        <DailogSearchUserManger ref="userRef" @SearchUser="onUser"/>
    </div>
</template>

<script lang="ts">
import {
  reactive,
  ref,
  defineComponent,
  onMounted,
  // toRefs,
} from 'vue';
import {
  ElMessage,
  ElMessageBox,
} from 'element-plus';
    import {
        reactive,
        ref,
        defineComponent,
        onMounted,
        // toRefs,
    } from 'vue';
    import {
        ElMessage,
        ElMessageBox,
    } from 'element-plus';

import type {
  UploadUserFile,
  TabsPaneContext,
  FormInstance,
  FormRules,
} from 'element-plus'
    import type {
        UploadUserFile,
        TabsPaneContext,
        FormInstance,
        FormRules,
    } from 'element-plus'

import {
  Search,
  FullScreen
} from '@element-plus/icons-vue'
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
import DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
import {contingencyApi} from "/@/api/contingency";
import {goalManagementApi} from "/@/api/goalManagement";
// import {releaseDrillPlanApi} from "/@/api/releaseDrillPlan";
    import {
        Search,
        FullScreen
    } from '@element-plus/icons-vue'
    import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
    import DailogSearchUserManger from "/@/components/DailogSearchUserManger/index.vue"
    import {contingencyApi} from "/@/api/contingency";
    import {goalManagementApi} from "/@/api/goalManagement";
    // import {releaseDrillPlanApi} from "/@/api/releaseDrillPlan";


export default defineComponent({
  name: 'openAdd',
  components: {
    AddEmergencyPersonnel,
    DailogSearchUser,
  },
  setup(prop, {emit}) {
    const isShowDialog = ref(false);
    const ruleFormRef = ref<FormInstance>();
    const ruleForm =ref({
        teamName: '', // 队伍名称
        teamLevel: '', // 队伍级别
        principalUid: '', // 队伍负责人
        principalDepartmentId: '',  //负责人部门
        principalPhone: '', // 负责人手机
        telephoneNumber: '', // 固定电话
        teamDesc: '',  //队伍描述
        fileList: [
          {
            fileUrl: 'url',
            fileName: 'name',
          }
        ],
        memberList: []
      });
    const titles = ref();
    const disabled = ref();
    // 打开弹窗
    const openDialog = (title: string,id: number, type: boolean) => {
      isShowDialog.value = true;
      titles.value = title;
      disabled.value = type;
      if (title == '查看应急队伍管理' || title == '修改应急队伍管理') {
        contingencyApi()
            .seeEmergencyTeam(id)
            .then((res) => {
              if (res.data.code == 200) {
                ruleForm.value = res.data.data;
              }
    export default defineComponent({
        name: 'openAdd',
        components: {
            AddEmergencyPersonnel,
            DailogSearchUserManger,
        },
        setup(prop, {emit}) {
            const isShowDialog = ref(false);
            const ruleFormRef = ref<FormInstance>();
            const ruleForm = ref({
                teamName: '', // 队伍名称
                teamLevel: '', // 队伍级别
                principalUid: '', // 队伍负责人
                principalName: '',
                principalDepartmentId: '',  //负责人部门
                principalPhone: '', // 负责人手机
                telephoneNumber: '', // 固定电话
                teamDesc: '',  //队伍描述
                fileList: [
                    {
                        fileUrl: 'url',
                        fileName: 'name',
                    }
                ],
                memberList: []
            });
      }
    }
    // 上传附件
    const fileList = ref<UploadUserFile[]>([])

    //部门树
    const department = () => {
      goalManagementApi()
          .getTreedepartment()
          .then((res) => {
            if (res.data.code == 200) {
              data.value = res.data.data;
            } else {
              ElMessage.error(res.data.msg);
            const titles = ref();
            const disabled = ref();
            const peopleInsertBtn = ref(false)
            const teamId = ref()
            // 打开弹窗
            const openDialog = (title: string, id: number, type: boolean) => {
                isShowDialog.value = true;
                titles.value = title;
                disabled.value = type;
                teamId.value = id
                //如果是新增  无法添加人员
                if(title == '新建应急队伍管理'){
                    peopleInsertBtn.value = true
                }else{
                    peopleInsertBtn.value = false
                }
                if (title == '查看应急队伍管理' || title == '修改应急队伍管理') {
                    contingencyApi()
                        .seeEmergencyTeam(id)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ruleForm.value = res.data.data;
                                listApi()
                            }
                        });
                }
            }
          });
    };
    //定义树形下拉框
    const principalDepartmentId = ref()
    const propse = {
      label: 'depName',
      children: 'children',
      value: 'depId',
    };
    const data=ref()
    onMounted(() => {
      department();
            // 上传附件
            const fileList = ref<UploadUserFile[]>([])

            //部门树
            const department = () => {
                goalManagementApi()
                    .getTreedepartment()
                    .then((res) => {
                        if (res.data.code == 200) {
                            data.value = res.data.data;
                        } else {
                            ElMessage.error(res.data.msg);
                        }
                    });
            };
            //定义树形下拉框
            const principalDepartmentId = ref()
            const propse = {
                label: 'depName',
                children: 'children',
                value: 'depId',
            };
            const data = ref()
            onMounted(() => {
                department();
            });
            // 打开用户选择弹窗
            const userRef = ref();
            const openUser = () => {
                userRef.value.openDailog();
            };
            const onUser = (e: any) => {
                ruleForm.value.principalUid = e[0].uid
                ruleForm.value.principalName = e[0].realName
            };
            //定义tabs切换
            const activeName = ref('first')
            const handleClick = (tab: TabsPaneContext, event: Event) => {
                console.log(tab, event)
            }

            // 必填项提示
            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) {
                    full.value = true;
                } else {
                    full.value = false;
                }
            };
            const onSubmit = async (title: string, formEl: FormInstance | undefined) => {
                if (title == '新建应急队伍管理') {
                    if (!formEl) return;
                    await formEl.validate((valid, fields) => {
                        if (valid) {
                            isShowDialog.value = false;
                            contingencyApi()
                                .addEmergencyTeam(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);
                        }
                    });
                } else if (title == '修改应急队伍管理') {
                    if (!formEl) return;
                    await formEl.validate((valid, fields) => {
                        if (valid) {
                            isShowDialog.value = false;
                            contingencyApi()
                                .editEmergencyTeam(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 = {
                        teamName: '', // 队伍名称
                        teamLevel: '', // 队伍级别
                        principalUid: '', // 队伍负责人
                        principalDepartmentId: '',  //负责人部门
                        principalPhone: '', // 负责人手机
                        telephoneNumber: '', // 固定电话
                        teamDesc: '',  //队伍描述
                        fileList: [
                            {
                                fileUrl: 'url',
                                fileName: 'name',
                            }
                        ],
                        memberList: []
                    };
                }
            };
            const resetForm = (formEl: FormInstance | undefined) => {
                isShowDialog.value = false;
                if (!formEl) return;
                formEl.resetFields();
                tableData.value=[]
            };
            // 定义表格数据
            const tableData = ref([]);
            //添加队伍负责人弹窗
            const addRef = ref();
            const onAddEmergencyPersonnel = () => {
                //未添加队伍 无法修改人员
                if(peopleInsertBtn.value == true){
                    ElMessage({
                        showClose: true,
                        message: '请先添加应急队伍',
                        type: 'warning',
                    });
                }else {
                    addRef.value.openDialog('新建应急队伍人员','',teamId.value);
                }

            };
            // 请求列表数据
            const listApi = async () => {
                let res = await contingencyApi().getEmergencyTeamPersonnelList(teamId.value);
                if (res.data.code == 200) {
                    tableData.value = res.data.data;
                } else {
                    ElMessage.error(res.data.msg);
                }
            };
            // 新增后刷新
            const onMyAdd = (e: object) => {
                listApi();
                // console.log(e)
                // item.value = e
                // tableData.value.push(item.value)
                // console.log(tableData)
            };
            // 打开修改弹窗
            const onEdit = (val: string, row: object) => {
                if (val == '查看应急队伍人员') {
                    addRef.value.openDialog('查看应急队伍人员', row,teamId.value, true);
                } else {
                    addRef.value.openDialog('修改应急队伍人员', row,teamId.value, false);
                }
            };
            // 删除
            const onRowDel = (data: any) => {
                ElMessageBox.confirm('确定删除所选项吗?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    contingencyApi()
                        .deleteEmergencyTeamPersonnel(data)
                        .then((res) => {
                            if (res.data.code == 200) {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'success',
                                });
                                listApi()
                            } else {
                                ElMessage({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: 'error',
                                });
                                listApi()
                            }
                        });
                })
                    .catch(() => {
                    });
            };
            return {
                openDialog,
                fileList,
                principalDepartmentId,
                data,
                activeName,
                handleClick,
                tableData,
                Search,
                resetForm,
                isShowDialog,
                ruleFormRef,
                ruleForm,
                rules,
                addRef,
                userRef,
                titles,
                disabled,
                propse,
                emit,
                onSubmit,
                openUser,
                onAddEmergencyPersonnel,
                toggleFullscreen,
                FullScreen,
                full,
                onUser,
                onMyAdd,
                listApi,
                onEdit,
                onRowDel,
                department,
                peopleInsertBtn,
                teamId
            };
        },
    });
    // 打开用户选择弹窗
    const userRef = ref();
    const openUser = () => {
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.principalUid = e.username
    };
    //定义tabs切换
    const activeName = ref('first')
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }

    // 必填项提示
    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) {
        full.value = true;
      } else {
        full.value = false;
      }
    };
    const onSubmit = async (title: string, formEl: FormInstance | undefined) => {
      if (title == '新建应急队伍管理') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            contingencyApi()
                .addEmergencyTeam(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);
          }
        });
      } else if (title == '修改应急队伍管理') {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            isShowDialog.value = false;
            contingencyApi()
                .editEmergencyTeam(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 = {
          teamName: '', // 队伍名称
          teamLevel: '', // 队伍级别
          principalUid: '', // 队伍负责人
          principalDepartmentId: '',  //负责人部门
          principalPhone: '', // 负责人手机
          telephoneNumber: '', // 固定电话
          teamDesc: '',  //队伍描述
          fileList: [
            {
              fileUrl: 'url',
              fileName: 'name',
            }
          ],
          memberList: []
        };
      }
    };
    const resetForm = (formEl: FormInstance | undefined) => {
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
    };
    // 定义表格数据
    const tableData = ref([]);
    //添加队伍负责人弹窗
    const addRef = ref();
    const onAddEmergencyPersonnel = (title:string,data: any) => {
      addRef.value.openDialog('新建应急队伍人员',data);
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
      if (e) {
        // listApi();
      } else {
        // listApi();
      }
    };
    // 打开修改弹窗
    const onEdit = (val: string, row: object) => {
      if (val == '详情') {
        addRef.value.openDialog('查看应急队伍人员',row,true);
      } else {
        addRef.value.openDialog('修改应急队伍人员',row,false);
      }
    };
    // 删除
    const onRowDel = (data: any) => {
      ElMessageBox.confirm('确定删除所选项吗?', '提示',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        contingencyApi()
            .deleteEmergencyTeamPersonnel(data)
            .then((res) => {
              if (res.data.code == 200) {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'success',
                });
              } else {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error',
                });
              }
            });
      })
          .catch(() => {});
    };
    return {
      openDialog,
      fileList,
      principalDepartmentId,
      data,
      activeName,
      handleClick,
      tableData,
      Search,
      resetForm,
      isShowDialog,
      ruleFormRef,
      ruleForm,
      rules,
      addRef,
      userRef,
      titles,
      disabled,
      propse,
      emit,
      onSubmit,
      openUser,
      onAddEmergencyPersonnel,
      toggleFullscreen,
      FullScreen,
      full,
      onUser,
      onMyAdd,
      // listApi,
      onEdit,
      onRowDel,
      department,
    };
  },
});
</script>
<style scoped lang="scss">
.textarea {
    height: 168px !important;
}
.textarea ::v-deep .el-textarea__inner {
    height: 168px !important;
}
::v-deep .el-table__cell {
    font-weight: 400;
}
    .textarea {
        height: 168px !important;
    }

    .textarea ::v-deep .el-textarea__inner {
        height: 168px !important;
    }

    ::v-deep .el-table__cell {
        font-weight: 400;
    }
</style>


 src/views/contingencyManagement/contingency/index.vue

@@ -202,8 +202,8 @@
      for (let i = 0; i < valId.length; i++) {
        arr.push(valId[i].id);
      }
      deleteAll.value = arr.toString();
      console.log(deleteAll.value);
      deleteAll.value = arr;
      console.log(deleteAll.value)
      if (val.length == 1) {
        warning.value = false;
        danger.value = false;
@@ -224,7 +224,7 @@
    // 打开新增应急队伍弹窗
    const addRef = ref();
    const onOpenAdd = () => {
      addRef.value.openDialog('新建应急队伍管理',false);
      addRef.value.openDialog('新建应急队伍管理');
    };
    // 新增后刷新
    const onMyAdd = (e: boolean) => {
@@ -250,7 +250,7 @@
        type: 'warning',
      }).then(() => {
        contingencyApi()
          .deleteEmergencyTeam(data)
          .deleteEmergencyTeam([data])
          .then((res) => {
            if (res.data.code == 200) {
              ElMessage({