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

<template>
  <VerticalFlexLayout>
    <template #static>
      <Breadcrumb />
    </template>
    <div>
      <el-card shadow="never">
        <template #header>
          <el-button type="primary" @click="openEditDrawer()" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
            <template #icon>
              <el-icon>
                <PlusOutlined />
              </el-icon>
            </template>
            新建人员分组
          </el-button>
        </template>

        <el-table :data="personGroupList">
          <el-table-column label="分组名" prop="name" />
          <el-table-column label="分组描述" prop="description" />
          <el-table-column label="人员数量" prop="total" />
          <el-table-column label="创建人" prop="operatorName" />
          <el-table-column label="创建时间" prop="operationTime" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <section class="actions">
                <el-button type="primary" link @click="openCheckDrawer(row)">查看</el-button>
                <el-button type="primary" link @click="openEditDrawer(row)" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
                  编辑
                </el-button>
                <el-button type="primary" link @click="deleteGroup(row)" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
                  删除
                </el-button>
              </section>
            </template>
          </el-table-column>
        </el-table>

        <section class="paginationPosition">
          <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>
  </VerticalFlexLayout>
</template>

<script setup lang="ts">
  import { PlusOutlined } from '@vicons/antd';
  import { 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';
  import { PERM_NOTICE } from '@/types/permission/constants';
  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
  import Breadcrumb from '@/components/Breadcrumb.vue';

  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: '取消',
      customClass: 'customMessageBox--warn',
    })
      .then(() => {
        deleteUserGroup(row.id).then(() => {
          queryPersonGroupList();
          ElMessage.success('删除成功');
        });
      })
      .catch((e) => {
        ElMessage.error(e);
      });
  }

  const onSubmit = () => {
    queryPersonGroupList();
  };

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