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

<template>
  <div>
    <el-card class="mb-3 proCard">
      <el-space align="center">
        <el-input
          :style="{ width: '320px' }"
          v-model="requestParams.queryParam!.roleName"
          clearable
          placeholder="请输入角色名称"
          @keyup.enter="queryRolesPage"
        />
        <el-button type="primary" :icon="Search" @click="queryRolesPage">查询</el-button>
      </el-space>
    </el-card>

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

      <el-table height="calc(100vh - 340px)" :data="roleList">
        <el-table-column label="角色ID" width="100" prop="id" />
        <el-table-column label="角色名称" prop="roleName" />
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="创建时间" width="200" prop="createdAt" />
        <el-table-column label="操作" width="160">
          <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="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="requestParams.pageSize"
          v-model:current-page="requestParams.pageNumber"
          @change="queryRolesPage"
        />
      </section>
    </el-card>

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

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { ElMessageBox } from 'element-plus';
  import { Search } from '@element-plus/icons-vue';
  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';

  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 ElMessageBox.confirm('确定删除该角色？', '提示', { 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;
  }
</style>