应急队伍管理

zhaojiale

2022-08-05 88e3972bd623a80ce86ade12f9e1f5b593f00423

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

@@ -1,8 +1,9 @@
<template>
   <div class="system-edit-user-container">
      <el-dialog :title="titles" v-model="isShowDialog" width="769px" draggable :fullscreen="full">
        <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-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">
@@ -19,8 +20,8 @@
                  </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">
                        <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>
@@ -29,7 +30,8 @@
               </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-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">
@@ -44,7 +46,8 @@
               </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-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">
@@ -67,8 +70,9 @@
         <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-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"
@@ -80,11 +84,16 @@
                        <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">
                                <el-table-column label="操作" width="250" 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>
                                        <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>
@@ -95,12 +104,13 @@
         <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" />
        <DailogSearchUserManger ref="userRef" @SearchUser="onUser"/>
   </div>
</template>

@@ -129,7 +139,7 @@
  FullScreen
} from '@element-plus/icons-vue'
import AddEmergencyPersonnel from "/@/views/contingencyManagement/contingency/component/addEmergencyPersonnel.vue";
import DailogSearchUser from "/@/components/DailogSearchUser/index.vue"
    import DailogSearchUserManger from "/@/components/DailogSearchUserManger/index.vue"
import {contingencyApi} from "/@/api/contingency";
import {goalManagementApi} from "/@/api/goalManagement";
// import {releaseDrillPlanApi} from "/@/api/releaseDrillPlan";
@@ -139,7 +149,7 @@
  name: 'openAdd',
  components: {
    AddEmergencyPersonnel,
    DailogSearchUser,
            DailogSearchUserManger,
  },
  setup(prop, {emit}) {
    const isShowDialog = ref(false);
@@ -148,6 +158,7 @@
        teamName: '', // 队伍名称
        teamLevel: '', // 队伍级别
        principalUid: '', // 队伍负责人
                principalName: '',
        principalDepartmentId: '',  //负责人部门
        principalPhone: '', // 负责人手机
        telephoneNumber: '', // 固定电话
@@ -162,17 +173,27 @@
      });
    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()
              }
            });
      }
@@ -209,7 +230,8 @@
      userRef.value.openDailog();
    };
    const onUser = (e:any) => {
      ruleForm.value.principalUid = e.username
                ruleForm.value.principalUid = e[0].uid
                ruleForm.value.principalName = e[0].realName
    };
    //定义tabs切换
    const activeName = ref('first')
@@ -353,28 +375,48 @@
      isShowDialog.value = false;
      if (!formEl) return;
      formEl.resetFields();
                tableData.value=[]
    };
    // 定义表格数据
    const tableData = ref([]);
    //添加队伍负责人弹窗
    const addRef = ref();
    const onAddEmergencyPersonnel = (title:string,data: any) => {
      addRef.value.openDialog('新建应急队伍人员',data);
            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: boolean) => {
      if (e) {
        // listApi();
      } else {
        // listApi();
      }
            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,true);
                if (val == '查看应急队伍人员') {
                    addRef.value.openDialog('查看应急队伍人员', row,teamId.value, true);
      } else {
        addRef.value.openDialog('修改应急队伍人员',row,false);
                    addRef.value.openDialog('修改应急队伍人员', row,teamId.value, false);
      }
    };
    // 删除
@@ -393,16 +435,19 @@
                  message: res.data.msg,
                  type: 'success',
                });
                                listApi()
              } else {
                ElMessage({
                  showClose: true,
                  message: res.data.msg,
                  type: 'error',
                });
                                listApi()
              }
            });
      })
          .catch(() => {});
                    .catch(() => {
                    });
    };
    return {
      openDialog,
@@ -432,10 +477,12 @@
      full,
      onUser,
      onMyAdd,
      // listApi,
                listApi,
      onEdit,
      onRowDel,
      department,
                peopleInsertBtn,
                teamId
    };
  },
});
@@ -444,9 +491,11 @@
.textarea {
   height: 168px !important;
}

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

::v-deep .el-table__cell {
   font-weight: 400;
}