feat: 新增角色管理

src/apis/common/common.ts

@@ -9,6 +9,11 @@ export function listDeptTree(query: { description: string }) {
   return http.get<TreeNodeData[]>(`${BASE_URL}/tree/dept`, query)
 }
 
+/** @desc 查询菜单树 */
+export function listMenuTree(query: { description: string }) {
+  return http.get<TreeNodeData[]>(`${BASE_URL}/tree/menu`, query)
+}
+
 /** @desc 查询角色列表 */
 export function listRoleDict(query?: { name: string; status: number }) {
   return http.get<LabelValueState[]>(`${BASE_URL}/dict/role`, query)

src/apis/system/index.ts

@@ -1,3 +1,4 @@
+export * from './role'
 export * from './menu'
 export * from './dept'
 export * from './log'

src/apis/system/role.ts

@@ -0,0 +1,29 @@
+import http from '@/utils/http'
+import type * as System from './type'
+
+const BASE_URL = '/system/role'
+
+/** @desc 查询角色列表 */
+export function listRole(query: System.RoleQuery) {
+  return http.get<PageRes<System.RoleResp[]>>(`${BASE_URL}`, query)
+}
+
+/** @desc 查询角色详情 */
+export function getRole(id: string) {
+  return http.get<System.RoleDetailResp>(`${BASE_URL}/${id}`)
+}
+
+/** @desc 新增角色 */
+export function addRole(data: any) {
+  return http.post(`${BASE_URL}`, data)
+}
+
+/** @desc 修改角色 */
+export function updateRole(data: any, id: string) {
+  return http.put(`${BASE_URL}/${id}`, data)
+}
+
+/** @desc 删除角色 */
+export function deleteRole(ids: string | Array<string>) {
+  return http.del(`${BASE_URL}/${ids}`)
+}

src/apis/system/type.ts

@@ -1,3 +1,41 @@
+/** 系统角色类型 */
+export interface RoleResp {
+  id: string
+  name: string
+  code: string
+  sort: number
+  description: string
+  dataScope: number
+  status: 1 | 2
+  isSystem: boolean
+  createUserString: string
+  createTime: string
+  updateUserString: string
+  updateTime: string
+  disabled: boolean
+}
+export interface RoleDetailResp {
+  id: string
+  name: string
+  code: string
+  sort: number
+  description: string
+  menuIds: Array<number>
+  dataScope: number
+  deptIds: Array<number>
+  status: 1 | 2
+  isSystem: boolean
+  createUserString: string
+  createTime: string
+  updateUserString: string
+  updateTime: string
+  disabled: boolean
+}
+export interface RoleQuery extends PageQuery {
+  description?: string
+  status?: number
+}
+
 /** 系统菜单类型 */
 export interface MenuResp {
   id: string

src/hooks/app/index.ts

@@ -1,3 +1,4 @@
+export * from './useMenu'
 export * from './useDept'
 export * from './useRole'
 export * from './useDict'

src/hooks/app/useMenu.ts

@@ -0,0 +1,21 @@
+import { ref } from 'vue'
+import { listMenuTree } from '@/apis'
+import type { TreeNodeData } from '@arco-design/web-vue'
+
+/** 菜单模块 */
+export function useMenu(options?: { onSuccess?: () => void }) {
+  const loading = ref(false)
+  const menuList = ref<TreeNodeData[]>([])
+
+  const getMenuList = async (name?: string) => {
+    try {
+      loading.value = true
+      const res = await listMenuTree({ description: name })
+      menuList.value = res.data
+      options?.onSuccess && options.onSuccess()
+    } finally {
+      loading.value = false
+    }
+  }
+  return { menuList, getMenuList, loading }
+}

src/views/system/role/AddRoleModal.vue

@@ -0,0 +1,272 @@
+<template>
+  <a-drawer
+    v-model:visible="visible"
+    :title="title"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 580 ? 580 : '100%'"
+    @before-ok="save"
+    @close="reset"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" size="large" auto-label-width>
+      <a-alert v-if="!form.disabled" type="warning" style="margin-bottom: 15px">
+        变更功能权限或数据权限后，关联在线用户会自动下线！
+      </a-alert>
+      <fieldset>
+        <legend>基础信息</legend>
+        <a-form-item label="名称" field="name">
+          <a-input v-model.trim="form.name" placeholder="请输入名称" />
+        </a-form-item>
+        <a-form-item label="编码" field="code">
+          <a-input v-model.trim="form.code" placeholder="请输入编码" :disabled="isUpdate" />
+        </a-form-item>
+        <a-form-item label="排序" field="sort">
+          <a-input-number v-model="form.sort" placeholder="请输入排序" :min="1" mode="button" />
+        </a-form-item>
+        <a-form-item label="描述" field="description">
+          <a-textarea
+            v-model.trim="form.description"
+            placeholder="请输入描述"
+            show-word-limit
+            :max-length="200"
+            :auto-size="{ minRows: 3, maxRows: 5 }"
+          />
+        </a-form-item>
+        <a-form-item label="状态" field="status">
+          <a-switch
+            v-model="form.status"
+            :disabled="form.isSystem"
+            type="round"
+            :checked-value="1"
+            :unchecked-value="2"
+            checked-text="启用"
+            unchecked-text="禁用"
+          />
+        </a-form-item>
+      </fieldset>
+      <fieldset>
+        <legend>功能权限</legend>
+        <a-form-item hide-label :disabled="form.isSystem">
+          <a-space>
+            <a-checkbox v-model="isMenuExpanded" @change="onExpanded('menu')">展开/折叠</a-checkbox>
+            <a-checkbox v-model="isMenuCheckAll" @change="onCheckAll('menu')">全选/全不选</a-checkbox>
+            <a-checkbox v-model="isMenuCheckStrictly">父子联动</a-checkbox>
+          </a-space>
+          <template #extra>
+            <a-tree
+              ref="menuTreeRef"
+              v-model:checked-keys="form.menuIds"
+              :data="menuList"
+              :default-expand-all="isMenuExpanded"
+              :check-strictly="!isMenuCheckStrictly"
+              checkable
+            />
+          </template>
+        </a-form-item>
+      </fieldset>
+      <fieldset>
+        <legend>数据权限</legend>
+        <a-form-item hide-label field="dataScope">
+          <a-select
+            v-model.trim="form.dataScope"
+            :options="data_scope_enum"
+            placeholder="请选择数据权限"
+            :disabled="form.isSystem"
+          />
+        </a-form-item>
+        <a-form-item v-if="form.dataScope === 5" hide-label :disabled="form.isSystem">
+          <a-space>
+            <a-checkbox v-model="isDeptExpanded" @change="onExpanded('dept')">展开/折叠</a-checkbox>
+            <a-checkbox v-model="isDeptCheckAll" @change="onCheckAll('dept')">全选/全不选</a-checkbox>
+            <a-checkbox v-model="isDeptCheckStrictly">父子联动</a-checkbox>
+          </a-space>
+          <template #extra>
+            <a-tree
+              ref="deptTreeRef"
+              v-model:checked-keys="form.deptIds"
+              :data="deptList"
+              :default-expand-all="isDeptExpanded"
+              :check-strictly="!isDeptCheckStrictly"
+              checkable
+            />
+          </template>
+        </a-form-item>
+      </fieldset>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { getRole, addRole, updateRole } from '@/apis'
+import { Message, type FormInstance, type TreeNodeData } from '@arco-design/web-vue'
+import { useForm } from '@/hooks'
+import { useDict, useMenu, useDept } from '@/hooks/app'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const { data_scope_enum } = useDict('data_scope_enum')
+const { deptList, getDeptList } = useDept()
+const { menuList, getMenuList } = useMenu()
+
+const dataId = ref('')
+const isUpdate = computed(() => !!dataId.value)
+const title = computed(() => (isUpdate.value ? '修改角色' : '新增角色'))
+const formRef = ref<FormInstance>()
+
+const rules: FormInstance['rules'] = {
+  name: [{ required: true, message: '请输入名称' }],
+  code: [{ required: true, message: '请输入编码' }],
+  dataScope: [{ required: true, message: '请选择数据权限' }]
+}
+
+const { form, resetForm } = useForm({
+  name: '',
+  code: '',
+  sort: 999,
+  status: 1,
+  description: undefined,
+  menuIds: undefined,
+  dataScope: 4,
+  deptIds: undefined
+})
+
+const menuTreeRef = ref()
+const deptTreeRef = ref()
+const isMenuExpanded = ref(false)
+const isDeptExpanded = ref(true)
+const isMenuCheckAll = ref(false)
+const isDeptCheckAll = ref(false)
+const isMenuCheckStrictly = ref(true)
+const isDeptCheckStrictly = ref(true)
+// 重置
+const reset = () => {
+  isMenuExpanded.value = false
+  isMenuCheckAll.value = false
+  isDeptExpanded.value = true
+  isDeptCheckAll.value = false
+  menuTreeRef.value?.expandAll(isMenuExpanded.value)
+  deptTreeRef.value?.expandAll(isDeptExpanded.value)
+  formRef.value?.resetFields()
+  resetForm()
+}
+
+const visible = ref(false)
+// 新增
+const onAdd = () => {
+  if (!menuList.value.length) {
+    getMenuList()
+  }
+  reset()
+  isMenuCheckStrictly.value = true
+  isDeptCheckStrictly.value = true
+  dataId.value = ''
+  visible.value = true
+  if (!deptList.value.length) {
+    getDeptList()
+  }
+}
+
+// 修改
+const onUpdate = async (id: string) => {
+  if (!menuList.value.length) {
+    await getMenuList()
+  }
+  if (!deptList.value.length) {
+    await getDeptList()
+  }
+  reset()
+  isMenuCheckStrictly.value = false
+  isDeptCheckStrictly.value = false
+  dataId.value = id
+  const res = await getRole(id)
+  Object.assign(form, res.data)
+  visible.value = true
+}
+
+// 获取所有选中的菜单
+const getMenuAllCheckedKeys = () => {
+  // 获取目前被选中的菜单
+  const checkedNodes = menuTreeRef.value?.getCheckedNodes()
+  const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key)
+  // 获取半选中的菜单
+  const halfCheckedNodes = menuTreeRef.value?.getHalfCheckedNodes()
+  const halfCheckedKeys = halfCheckedNodes.map((item: TreeNodeData) => item.key)
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
+}
+
+// 获取所有选中的部门
+const getDeptAllCheckedKeys = () => {
+  if (!deptTreeRef.value) {
+    return []
+  }
+  // 获取目前被选中的部门
+  const checkedNodes = deptTreeRef.value?.getCheckedNodes()
+  const checkedKeys = checkedNodes.map((item: TreeNodeData) => item.key)
+  // 获取半选中的部门
+  const halfCheckedNodes = deptTreeRef.value?.getHalfCheckedNodes()
+  const halfCheckedKeys = halfCheckedNodes.map((item: TreeNodeData) => item.key)
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+  return checkedKeys
+}
+
+// 保存
+const save = async () => {
+  try {
+    const isInvalid = await formRef.value?.validate()
+    if (isInvalid) return false
+    form.menuIds = getMenuAllCheckedKeys()
+    form.deptIds = getDeptAllCheckedKeys()
+    if (isUpdate.value) {
+      await updateRole(form, dataId.value)
+      Message.success('修改成功')
+    } else {
+      await addRole(form)
+      Message.success('新增成功')
+    }
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// 展开/折叠
+const onExpanded = (type: string) => {
+  if (type === 'menu') {
+    menuTreeRef.value?.expandAll(isMenuExpanded.value)
+  } else if (type === 'dept') {
+    deptTreeRef.value?.expandAll(isDeptExpanded.value)
+  }
+}
+
+// 全选/全不选
+const onCheckAll = (type: string) => {
+  if (type === 'menu') {
+    menuTreeRef.value?.checkAll(isMenuCheckAll.value)
+  } else if (type === 'dept') {
+    deptTreeRef.value?.checkAll(isDeptCheckAll.value)
+  }
+}
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+defineExpose({ onAdd, onUpdate })
+</script>
+
+<style lang="scss" scoped>
+fieldset {
+  padding: 15px 15px 0 15px;
+  margin-bottom: 15px;
+  border: 1px solid var(--color-neutral-3);
+  border-radius: 3px;
+}
+fieldset legend {
+  color: rgb(var(--gray-10));
+  padding: 2px 5px 2px 5px;
+  border: 1px solid var(--color-neutral-3);
+  border-radius: 3px;
+}
+</style>

src/views/system/role/RoleDetailDrawer.vue

@@ -0,0 +1,87 @@
+<template>
+  <a-drawer
+    v-model:visible="visible"
+    title="角色详情"
+    :width="width >= 580 ? 580 : '100%'"
+    :footer="false"
+  >
+    <a-descriptions title="基础信息" :column="2" size="large" class="general-description">
+      <a-descriptions-item label="ID" :span="2">{{ dataDetail?.id }}</a-descriptions-item>
+      <a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
+      <a-descriptions-item label="编码">{{ dataDetail?.code }}</a-descriptions-item>
+      <a-descriptions-item label="状态">
+        <a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
+        <a-tag v-else color="red">禁用</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="数据权限">
+        <GiCellTag :value="dataDetail?.dataScope" :dict="data_scope_enum" />
+      </a-descriptions-item>
+      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
+      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
+      <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
+      <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
+      <a-descriptions-item label="描述" :span="2">{{ dataDetail?.description }}</a-descriptions-item>
+    </a-descriptions>
+    <a-descriptions title="功能权限" :column="2" size="large" class="general-description" style="margin-top: 20px; position: relative">
+      <a-descriptions-item :span="2">
+        <a-tree
+          ref="menuTreeRef"
+          :checked-keys="dataDetail?.menuIds"
+          :data="menuList"
+          default-expand-all
+          check-strictly
+          checkable
+        />
+      </a-descriptions-item>
+    </a-descriptions>
+    <a-descriptions v-if="dataDetail?.dataScope === 5" title="数据权限" :column="2" size="large" class="general-description" style="margin-top: 20px; position: relative">
+      <a-descriptions-item :span="2">
+        <a-tree
+          ref="deptTreeRef"
+          :checked-keys="dataDetail?.deptIds"
+          :data="deptList"
+          default-expand-all
+          check-strictly
+          checkable
+        />
+      </a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { getRole, type RoleDetailResp } from '@/apis'
+import { useDict, useMenu, useDept } from '@/hooks/app'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const { data_scope_enum } = useDict('data_scope_enum')
+const { deptList, getDeptList } = useDept()
+const { menuList, getMenuList } = useMenu()
+
+const visible = ref(false)
+const dataId = ref('')
+const dataDetail = ref<RoleDetailResp>()
+// 查询详情
+const getDataDetail = async () => {
+  const res = await getRole(dataId.value)
+  dataDetail.value = res.data
+}
+
+// 打开详情
+const open = async (id: string) => {
+  if (!menuList.value.length) {
+    await getMenuList()
+  }
+  if (!deptList.value.length) {
+    await getDeptList()
+  }
+  dataId.value = id
+  await getDataDetail()
+  visible.value = true
+}
+
+defineExpose({ open })
+</script>
+
+<style lang="scss" scoped></style>

src/views/system/role/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="gi_page">
+    <a-card title="角色管理" class="general-card">
+      <GiTable
+        row-key="id"
+        :data="dataList"
+        :columns="columns"
+        :loading="loading"
+        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+        :pagination="pagination"
+        :disabledColumnKeys="['name']"
+        @refresh="search"
+      >
+        <template #custom-left>
+          <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
+            <template #prefix><icon-search /></template>
+          </a-input>
+          <a-select
+            v-model="queryForm.status"
+            :options="DisEnableStatusList"
+            placeholder="请选择状态"
+            allow-clear
+            style="width: 150px"
+            @change="search"
+          />
+          <a-button @click="reset">重置</a-button>
+        </template>
+        <template #custom-right>
+          <a-button type="primary" @click="onAdd">
+            <template #icon><icon-plus /></template>
+            <span>新增</span>
+          </a-button>
+        </template>
+        <template #name="{ record }">
+          <a-link @click="openDetail(record)">{{ record.name }}</a-link>
+        </template>
+        <template #status="{ record }">
+          <GiCellStatus :status="record.status" />
+        </template>
+        <template #dataScope="{ record }">
+          <GiCellTag :value="record.dataScope" :dict="data_scope_enum" />
+        </template>
+        <template #isSystem="{ record }">
+          <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
+          <a-tag v-else color="arcoblue" size="small">否</a-tag>
+        </template>
+        <template #action="{ record }">
+          <a-space>
+            <template #split>
+              <a-divider direction="vertical" :margin="0" />
+            </template>
+            <a-link @click="onUpdate(record)">修改</a-link>
+            <a-link
+              status="danger"
+              :title="record.isSystem ? '系统内置数据不能删除' : undefined"
+              :disabled="record.disabled"
+              @click="onDelete(record)"
+            >
+              删除
+            </a-link>
+          </a-space>
+        </template>
+      </GiTable>
+
+      <AddRoleModal ref="AddRoleModalRef" @save-success="search" />
+      <RoleDetailDrawer ref="RoleDetailDrawerRef" />
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { listRole, deleteRole, type RoleResp } from '@/apis'
+import type { TableInstance } from '@arco-design/web-vue'
+import AddRoleModal from './AddRoleModal.vue'
+import RoleDetailDrawer from './RoleDetailDrawer.vue'
+import { useTable } from '@/hooks'
+import { useDict } from '@/hooks/app'
+import { isMobile } from '@/utils'
+import { DisEnableStatusList } from '@/constant/common'
+
+defineOptions({ name: 'Role' })
+
+const { data_scope_enum } = useDict('data_scope_enum')
+
+const columns: TableInstance['columns'] = [
+  {
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize)
+  },
+  { title: '名称', dataIndex: 'name', slotName: 'name', ellipsis: true, tooltip: true },
+  { title: '编码', dataIndex: 'code', ellipsis: true, tooltip: true },
+  { title: '状态', slotName: 'status', align: 'center' },
+  { title: '数据权限', dataIndex: 'dataScope', slotName: 'dataScope', ellipsis: true, tooltip: true },
+  { title: '排序', dataIndex: 'sort', align: 'center', show: false },
+  { title: '系统内置', slotName: 'isSystem', align: 'center', show: false },
+  { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
+  { title: '创建人', dataIndex: 'createUserString', show: false, ellipsis: true, tooltip: true },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
+  { title: '修改人', dataIndex: 'updateUserString', show: false, ellipsis: true, tooltip: true },
+  { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
+  { title: '操作', slotName: 'action', width: 200, align: 'center', fixed: !isMobile() ? 'right' : undefined }
+]
+
+const queryForm = reactive({
+  description: undefined,
+  status: undefined,
+  sort: ['createTime,desc']
+})
+
+const {
+  tableData: dataList,
+  loading,
+  pagination,
+  search,
+  handleDelete
+} = useTable((p) => listRole({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
+
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  queryForm.status = undefined
+  search()
+}
+
+// 删除
+const onDelete = (item: RoleResp) => {
+  return handleDelete(() => deleteRole(item.id), { content: `是否确定删除角色 [${item.name}]？`, showModal: true })
+}
+
+const AddRoleModalRef = ref<InstanceType<typeof AddRoleModal>>()
+// 新增
+const onAdd = () => {
+  AddRoleModalRef.value?.onAdd()
+}
+
+// 修改
+const onUpdate = (item: RoleResp) => {
+  AddRoleModalRef.value?.onUpdate(item.id)
+}
+
+const RoleDetailDrawerRef = ref<InstanceType<typeof RoleDetailDrawer>>()
+// 打开详情
+const openDetail = (item: RoleResp) => {
+  RoleDetailDrawerRef.value?.open(item.id)
+}
+
+</script>
+
+<style lang="scss" scoped></style>