sl-sfy-safety/src/views/system/person-group/PersonGroup.vue

<template>
  <div>
    <el-card>
      <template #header>
        <el-button type="primary" @click="openEditDrawer()">
          <template #icon>
            <el-icon>
              <PlusOutlined />
            </el-icon>
          </template>
          新建人员分组
        </el-button>
      </template>

      <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="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-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>
      </el-table>

      <section class="mt-4 flex justify-end">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-sizes="[10, 30, 50]"
          :total="total"
          v-model:page-size="personGroupListRequestParams.pageSize"
          v-model:current-page="personGroupListRequestParams.pageNumber"
          @change="queryPersonGroupList"
        />
      </section>
      <PersonGroupEditDrawer :title="drawerTitle" ref="editDrawerInstance" @submitted="onSubmit" />
      <PersonGroupExhibitionDrawer :title="drawerTitle" ref="exhibitionDrawerInstance" />
    </el-card>
  </div>
</template>

<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 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 editDrawerInstance = ref();
  const exhibitionDrawerInstance = ref();
  function openEditDrawer(row?: PersonGroupListItem) {
    drawerTitle.value = 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 = () => {
    queryPersonGroupList();
  };

  onMounted(() => {
    queryPersonGroupList();
  });
</script>