refactor(system/role): 优化角色权限节点关联及独立切换效果

- 将 Pane1 组件重命名为 Permission，Pane2 组件重命名为 RoleUser - 优化角色权限节点关联及独立切换效果
2025-09-25 16:57:14 +08:00 · 2025-03-12 22:24:37 +08:00
parent 13a7262172
commit 657c83bf19
3 changed files with 8 additions and 12 deletions
--- a/src/views/system/role/components/RoleUser.vue
+++ b/src/views/system/role/components/RoleUser.vue
@@ -0,0 +1,179 @@
+<template>
+  <GiTable
+    row-key="id"
+    :data="dataList"
+    :columns="columns"
+    :loading="loading"
+    :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
+    :pagination="pagination"
+    :disabled-tools="['size', 'setting', 'fullscreen']"
+    :disabled-column-keys="['nickname']"
+    :row-selection="{ type: 'checkbox', showCheckedAll: true }"
+    :selected-keys="selectedKeys"
+    @select="select"
+    @select-all="selectAll"
+    @refresh="reset"
+  >
+    <template #toolbar-left>
+      <a-button v-permission="['system:role:assign']" type="primary" @click="onAssign">
+        <template #icon><icon-plus /></template>
+        <template #default>分配角色</template>
+      </a-button>
+      <a-button v-permission="['system:role:unassign']" type="primary" status="danger" :disabled="!selectedKeys.length" :title="!selectedKeys.length ? '请选择' : ''" @click="onMulDelete">
+        <template #icon><icon-delete /></template>
+        <template #default>取消分配</template>
+      </a-button>
+    </template>
+    <template #toolbar-right>
+      <a-input-search v-model="queryForm.description" placeholder="搜索用户名/昵称/描述" allow-clear @search="search" />
+      <a-button @click="reset">
+        <template #icon>
+          <icon-refresh />
+        </template>
+        <template #default>重置</template>
+      </a-button>
+    </template>
+    <template #gender="{ record }">
+      <GiCellGender :gender="record.gender" />
+    </template>
+    <template #roleNames="{ record }">
+      <GiCellTags :data="record.roleNames" />
+    </template>
+    <template #status="{ record }">
+      <GiCellStatus :status="record.status" />
+    </template>
+    <template #action="{ record }">
+      <a-space>
+        <a-link
+          v-permission="['system:role:unassign']"
+          status="danger"
+          :disabled="record.disabled"
+          :title="record.disabled ? '该用户为系统内置用户不能取消分配' : '取消分配'"
+          @click="onDelete(record)"
+        >
+          取消分配
+        </a-link>
+      </a-space>
+    </template>
+  </GiTable>
+
+  <RoleAssignModal ref="RoleAssignModalRef" @save-success="search" />
+</template>
+
+<script lang='tsx' setup>
+import { Message, Modal } from '@arco-design/web-vue'
+import RoleAssignModal from '../RoleAssignModal.vue'
+import { useResetReactive, useTable } from '@/hooks'
+import { type RoleUserQuery, type RoleUserResp, listRoleUser, unassignFromUsers } from '@/apis/system/role'
+import type { TableInstanceColumns } from '@/components/GiTable/type'
+import { isMobile } from '@/utils'
+import has from '@/utils/has'
+
+const props = withDefaults(defineProps<Props>(), {
+  roleId: '',
+})
+
+interface Props {
+  roleId: string
+}
+
+const [queryForm, resetForm] = useResetReactive<RoleUserQuery>({
+  sort: ['t1.id,desc'],
+})
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  selectedKeys,
+  select,
+  selectAll,
+  handleDelete,
+} = useTable((page) => listRoleUser(props.roleId, { ...queryForm, ...page }), { immediate: false })
+const columns: TableInstanceColumns[] = [
+  {
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
+    fixed: !isMobile() ? 'left' : undefined,
+  },
+  {
+    title: '昵称',
+    dataIndex: 'nickname',
+    slotName: 'nickname',
+    minWidth: 130,
+    ellipsis: true,
+    tooltip: true,
+    fixed: !isMobile() ? 'left' : undefined,
+  },
+  { title: '用户名', dataIndex: 'username', slotName: 'username', minWidth: 120, ellipsis: true, tooltip: true },
+  { title: '状态', dataIndex: 'status', slotName: 'status', align: 'center' },
+  { title: '性别', dataIndex: 'gender', slotName: 'gender', align: 'center' },
+  { title: '所属部门', dataIndex: 'deptName', minWidth: 140, ellipsis: true, tooltip: true },
+  { title: '角色', dataIndex: 'roleNames', slotName: 'roleNames', minWidth: 165 },
+  { title: '描述', dataIndex: 'description', minWidth: 130, ellipsis: true, tooltip: true },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slotName: 'action',
+    width: 100,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr([
+      'system:role:unassign',
+    ]),
+  },
+]
+
+// 重置
+const reset = () => {
+  resetForm()
+  search()
+}
+
+// 批量删除
+const onMulDelete = () => {
+  if (!selectedKeys.value.length) {
+    return Message.warning('请选择数据')
+  }
+  Modal.warning({
+    title: '提示',
+    content: `是否确定取消分配角色给所选的${selectedKeys.value.length}个用户？`,
+    hideCancel: false,
+    onOk: async () => {
+      await unassignFromUsers(selectedKeys.value)
+      Message.success('取消成功')
+      search()
+    },
+  })
+}
+
+// 删除
+const onDelete = (record: RoleUserResp) => {
+  return handleDelete(() => unassignFromUsers([record.id]), {
+    content: `是否确定取消分配角色给用户「${record.nickname}(${record.username})」？`,
+    successTip: '取消成功',
+    showModal: true,
+  })
+}
+
+const RoleAssignModalRef = ref<InstanceType<typeof RoleAssignModal>>()
+// 分配
+const onAssign = () => {
+  RoleAssignModalRef.value?.onOpen(props.roleId)
+}
+
+// 监听 roleId 的变化
+watch(
+  () => props.roleId,
+  async (newRoleId) => {
+    if (newRoleId) {
+      search()
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<style scoped lang="scss"></style>