feat: 人员分组功能完善

src/types/person-group/type.ts

@@ -77,9 +77,9 @@ export interface PersonGroupItem {
   /*姓名 */
   realname: string;
   /*部门id */
-  deptId: number;
+  deptId?: number;
   /*部门名称 */
-  deptName: string;
+  deptName?: string;
   /*工号 */
   staffNo: string;
 }

src/views/system/person-group/PersonGroup.vue

@@ -2,7 +2,7 @@
   <div>
     <el-card>
       <template #header>
-        <el-button type="primary" @click="openDrawer()">
+        <el-button type="primary" @click="openEditDrawer()">
           <template #icon>
             <el-icon>
               <PlusOutlined />
@@ -12,18 +12,18 @@
         </el-button>
       </template>
 
-      <el-table height="calc(100vh - 300px)" :data="personGroupList">
+      <el-table height="calc(100vh - 256px)" :data="personGroupList">
         <el-table-column label="分组名" width="300" prop="name" />
         <el-table-column label="分组描述" prop="description" />
-        <el-table-column label="人员数量" width="100" prop="total" />
+        <el-table-column label="人员数量" width="200" prop="total" />
         <el-table-column label="创建人" width="200" prop="operatorName" />
         <el-table-column label="创建时间" width="200" prop="operationTime" />
         <el-table-column label="操作" width="240">
           <template #default="{ row }">
             <section class="actions">
-              <el-buton type="primary" link @click="">查看</el-buton>
-              <el-buton type="primary" link @click="">编辑</el-buton>
-              <el-buton type="primary" link @click="">删除</el-buton>
+              <el-button type="primary" link @click="openCheckDrawer(row)">查看</el-button>
+              <el-button type="primary" link @click="openEditDrawer(row)">编辑</el-button>
+              <el-button type="primary" link @click="deleteGroup(row)">删除</el-button>
             </section>
           </template>
         </el-table-column>
@@ -40,8 +40,8 @@
           @change="queryPersonGroupList"
         />
       </section>
-
-      <PersonGroupDrawer :title="drawerTitle" ref="drawerInstance" @submitted="onSubmit" />
+      <PersonGroupEditDrawer :title="drawerTitle" ref="editDrawerInstance" @submitted="onSubmit" />
+      <PersonGroupExhibitionDrawer :title="drawerTitle" ref="exhibitionDrawerInstance" />
     </el-card>
   </div>
 </template>
@@ -49,18 +49,42 @@
 <script setup lang="ts">
   import { PlusOutlined } from '@vicons/antd';
   import { QueryPersonGroupPageParams, PersonGroupListItem } from '@/types/person-group/type';
+  import { deleteUserGroup } from '@/api/system/person-group';
   import usePersonGroupListQuery from './hooks/usePersonGroupListQuery';
-  import PersonGroupDrawer from './components/PersonGroupDrawer.vue';
+  import PersonGroupEditDrawer from './components/PersonGroupEditDrawer.vue';
   import { onMounted, ref } from 'vue';
+  import PersonGroupExhibitionDrawer from './components/PersonGroupExhibitionDrawer.vue';
+  import { ElMessage, ElMessageBox } from 'element-plus';
 
   const { personGroupListRequestParams, personGroupList, total, setRequestParams, queryPersonGroupList } =
     usePersonGroupListQuery();
 
   const drawerTitle = ref('');
-  const drawerInstance = ref();
-  function openDrawer(row?: PersonGroupListItem) {
+  const editDrawerInstance = ref();
+  const exhibitionDrawerInstance = ref();
+  function openEditDrawer(row?: PersonGroupListItem) {
     drawerTitle.value = row ? '编辑人员分组' : '新建人员分组';
-    drawerInstance.value?.open(row);
+    editDrawerInstance.value?.open(row);
+  }
+
+  function openCheckDrawer(row: PersonGroupListItem) {
+    drawerTitle.value = '查看人员分组';
+    exhibitionDrawerInstance.value?.open(row);
+  }
+  function deleteGroup(row: PersonGroupListItem) {
+    ElMessageBox.confirm('确认删除，删除后无法恢复，确认删除吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    })
+      .then(() => {
+        deleteUserGroup(row.id).then(() => {
+          queryPersonGroupList();
+          ElMessage.success('删除成功');
+        });
+      })
+      .catch((e) => {
+        ElMessage.error(e);
+      });
   }
 
   const onSubmit = () => {

src/views/system/person-group/components/PersonGroupDrawer.vue

@@ -63,14 +63,14 @@
     <PersonGroupFilter
       ref="dialogInstance"
       :init-selected="selectedUser"
-      @cancel="handleCancle"
-      @submit="handleSubmit"
+      @cancel="handleDialogCancle"
+      @submit="handleDialogSubmit"
     />
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-  import { reactive, ref, computed } from 'vue';
+  import { reactive, ref, computed, watch } from 'vue';
   import {
     PersonGroupForm,
     AddPersonGroupParams,
@@ -134,14 +134,14 @@
           userIdList: formData.userList.map((x) => x.id),
           total: formData.userList.length,
           userGroupId: formData.id!,
-        });
+        } as EditPersonGroupParams);
       } else {
         await addUserGroup({
           name: formData.name,
           description: formData.description,
           userIdList: formData.userList.map((x) => x.id),
           total: formData.userList.length,
-        });
+        } as AddPersonGroupParams);
       }
       drawerOpened.value = false;
       ElMessage.success('提交成功');
@@ -151,10 +151,10 @@
     }
   };
 
-  const handleCancle = () => {
+  const handleDialogCancle = () => {
     dialogOpened.value = false;
   };
-  const handleSubmit = (selectedData: PersonGroupItem[]) => {
+  const handleDialogSubmit = (selectedData: PersonGroupItem[]) => {
     selectedUser.value = selectedData;
     formData.userList = selectedData;
     total.value = formData.userList.length;
@@ -167,11 +167,29 @@
       formData.id = res.userGroupId;
       formData.name = res.name;
       formData.description = res.description;
-      formData.userList = res.userList;
+      formData.userList = res.userList.map((x) => {
+        return {
+          checked: true,
+          id: x.id,
+          realname: x.realname,
+          deptName: x.deptName,
+          staffNo: x.staffNo,
+        } as PersonGroupItem;
+      });
+      selectedUser.value = formData.userList;
     }
     drawerOpened.value = true;
   };
 
+  watch(
+    () => formData.userList,
+    (newUserList) => {
+      total.value = newUserList.length;
+      const ids = newUserList.map((user) => user.id);
+      selectedUser.value = selectedUser.value.filter((user) => ids.includes(user.id));
+    },
+  );
+
   defineExpose({
     open,
   });

src/views/system/person-group/components/PersonGroupExhibitionDrawer.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-drawer :title="title" v-model="drawerOpened" destroy-on-close>
+    <div v-for="(item, index) in personList" :key="item.id">
+      <div class="person-group-item">{{ `${item.realname}   (${item.staffNo})     ${item.deptName}` }}</div>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref, computed, watch } from 'vue';
+  import {
+    PersonGroupForm,
+    AddPersonGroupParams,
+    EditPersonGroupParams,
+    PersonGroupItem,
+    PersonGroupListItem,
+  } from '@/types/person-group/type';
+  import { addUserGroup, modifyUserGroup, queryUserGroupDetail } from '@/api/system/person-group';
+
+  defineProps<{
+    title: string;
+  }>();
+
+  const drawerOpened = ref(false);
+
+  const personList = ref<PersonGroupItem[]>([]);
+
+  const open = async (row: PersonGroupListItem) => {
+    const res = await queryUserGroupDetail(row.id);
+    personList.value = res.userList;
+    drawerOpened.value = true;
+  };
+
+  defineExpose({
+    open,
+  });
+</script>
+
+<style scoped>
+  .person-group-item {
+    margin-bottom: 10px;
+    white-space: pre-wrap;
+  }
+</style>