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

<template>
  <VerticalFlexLayout>
    <template #static>
      <Breadcrumb />
    </template>
    <div>
      <div style="margin: 20px">
        <el-button type="primary" @click="openEditDrawer()" v-permission="PERM_NOTICE.PERSONNEL_GROUP">
          <template #icon>
            <el-icon>
              <PlusOutlined />
            </el-icon>
          </template>
          新建人员分组
        </el-button>

        <el-table :data="personGroupList" style="margin-top: 20px">
          <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" />
      </div>
    </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 } from 'element-plus';
  import { msgConfirm } from '@/utils/element-plus/messageBox';

  import { PERM_NOTICE } from '@/types/permission/constants';
  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
  import Breadcrumb from '@/components/Breadcrumb.vue';

  const { personGroupListRequestParams, personGroupList, total, 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) {
    msgConfirm('确认删除，删除后无法恢复，确认删除吗？', '提示', {
      type: 'warning',
    }).then(() => {
      deleteUserGroup(row.id)
        .then(() => {
          queryPersonGroupList();
          ElMessage.success('删除成功');
        })
        .catch((e) => {
          ElMessage.error(e);
        });
    });
  }

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

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