sl-sfy-safety/src/views/system/role/role.vue

<template>
  <VerticalFlexLayout>
    <template #static>
      <Breadcrumb />
    </template>

    <div class="content">
      <div class="toolbar">
        <div>
          <el-input
            :style="{ width: '320px' }"
            v-model="requestParams.queryParam!.roleName"
            clearable
            placeholder="请输入角色名称"
            @keyup.enter="queryRolesPage"
          />
          <el-button type="primary" :icon="Search" @click="queryRolesPage" style="margin-left: 20px">查询</el-button>
        </div>

        <el-button type="primary" @click="openDrawer()" v-permission="PERM_USER.ROLE"> 添加角色 </el-button>
      </div>

      <el-table :data="roleList">
        <el-table-column label="角色ID" width="100" prop="id" />
        <el-table-column label="角色名称" prop="roleName" width="480" />
        <el-table-column label="备注" prop="remark" width="800" />
        <el-table-column label="创建时间" width="240" prop="createdAt" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <section class="actions">
              <img src="@/assets/icons/edit.png" @click="openDrawer(row)" v-permission="PERM_USER.ROLE" />
              <img
                src="@/assets/icons/delete.png"
                @click="deleteRole(row.id)"
                v-permission="{ action: [PERM_USER.ROLE] }"
              />
            </section>
          </template>
        </el-table-column>
      </el-table>

      <section class="paginationPosition">
        <el-pagination
          background
          :layout="DEFAULT_LAYOUT"
          :page-sizes="[10, 30, 50]"
          :total="total"
          v-model:page-size="requestParams.pageSize"
          v-model:current-page="requestParams.pageNumber"
          @change="queryRolesPage"
        />
      </section>

      <RoleDrawer :title="drawerTitle" ref="drawerInstance" @submitted="onSubmitRole" />
    </div>
  </VerticalFlexLayout>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Search } from '@element-plus/icons-vue';
  import { DEFAULT_LAYOUT } from '@/constant/pagination';
  import RoleDrawer from './components/RoleDrawer.vue';
  import useRolesQuery from './hooks/useRolesQuery';
  import { Role } from '@/types/role/type';
  import { deleteRole as _deleteRole } from '@/api/system/role';
  import { PERM_USER } from '@/types/permission/constants';
  import Breadcrumb from '@/components/Breadcrumb.vue';
  import VerticalFlexLayout from '@/components/VerticalFlexLayout.vue';
  import { msgConfirm } from '@/utils/element-plus/messageBox';

  const { roleList, total, queryRolesPage, requestParams } = useRolesQuery();

  // drawer 相关变量
  const drawerTitle = ref('');
  const drawerInstance = ref<InstanceType<typeof RoleDrawer>>();

  const openDrawer = (row?: Role) => {
    drawerTitle.value = row ? '编辑角色' : '添加角色';
    drawerInstance.value?.open(row);
  };

  /**
   * 创建或编辑角色后重新获取列表
   */
  const onSubmitRole = () => {
    queryRolesPage();
  };

  /**
   * 删除角色
   */
  const deleteRole = async (roleId: number) => {
    try {
      await msgConfirm('删除后无法回复，确认删除吗？', '确认删除', { type: 'warning' });
      await _deleteRole(roleId);
      queryRolesPage();
    } catch (e) {
      console.error(e);
    }
  };

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

<style scoped>
  .actions {
    display: flex;
  }

  .actions > img {
    margin-right: 24px;
    cursor: pointer;
  }

  .content {
    padding: 20px;
  }
  .toolbar {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }
</style>