对接角色管理接口

src/api/sys/user.ts

@@ -1,7 +1,7 @@
-import { defHttp } from '/@/utils/http/axios';
+import { defHttp } from '/@/utils/http/axios'
-import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel';
+import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel'
 
-import { ErrorMessageMode } from '/#/axios';
+import { ErrorMessageMode } from '/#/axios'
 
 enum Api {
   Login = '/api/auth/login',
@@ -22,20 +22,101 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal')
     {
       errorMessageMode: mode,
     },
-  );
+  )
 }
 
 /**
  * @description: getUserInfo
  */
 export function getUserInfo() {
-  return defHttp.get<GetUserInfoModel>({ url: Api.GetUserInfo }, { errorMessageMode: 'none' });
+  return defHttp.get<GetUserInfoModel>({ url: Api.GetUserInfo }, { errorMessageMode: 'none' })
 }
 
 export function getPermCode() {
-  return defHttp.get<string[]>({ url: Api.GetPermCode });
+  return defHttp.get<string[]>({ url: Api.GetPermCode })
 }
 
 export function doLogout() {
-  return defHttp.delete({ url: Api.Logout });
+  return defHttp.delete({ url: Api.Logout })
+}
+/**
+ * @description:权限数据
+ */
+export function getPermissions() {
+  return defHttp.get(
+    {
+      url: '/api/permissions',
+    },
+    {
+      errorMessageMode: 'none',
+    },
+  )
+}
+/**
+ * @description:角色列表
+ */
+export function getRoles(params, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: '/api/admin-roles',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+/**
+ * @description:添加角色
+ */
+export function addRoles(data, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post(
+    {
+      url: '/api/admin-roles',
+      data,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+/**
+ * @description:修改角色
+ */
+export function editRoles(id: string, data, mode: ErrorMessageMode = 'modal') {
+  return defHttp.put(
+    {
+      url: `/api/admin-roles/${id}`,
+      data,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+/**
+ * @description:获取角色详情
+ */
+export function getRolesInfo(id, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get(
+    {
+      url: `/api/admin-roles/${id} `,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+/**
+ * @description:删除角色
+ */
+export function deleteRoles(id: string, mode: ErrorMessageMode = 'modal') {
+  return defHttp.delete(
+    {
+      url: `/api/admin-roles/${id}`,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
 }

src/components/Tree/index.ts

@@ -0,0 +1,6 @@
+import BasicTree from './src/BasicTree.vue';
+import './style';
+
+export { BasicTree };
+export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
+export * from './src/types/tree';

src/components/Tree/src/BasicTree.vue

@@ -0,0 +1,455 @@
+<script lang="tsx">
+  import type { CSSProperties } from 'vue';
+  import type {
+    FieldNames,
+    TreeState,
+    TreeItem,
+    KeyType,
+    CheckKeys,
+    TreeActionType,
+  } from './types/tree';
+
+  import {
+    defineComponent,
+    reactive,
+    computed,
+    unref,
+    ref,
+    watchEffect,
+    toRaw,
+    watch,
+    onMounted,
+  } from 'vue';
+  import TreeHeader from './components/TreeHeader.vue';
+  import { Tree, Spin, Empty } from 'ant-design-vue';
+  import { TreeIcon } from './TreeIcon';
+  import { ScrollContainer } from '/@/components/Container';
+  import { omit, get, difference, cloneDeep } from 'lodash-es';
+  import { isArray, isBoolean, isEmpty, isFunction } from '/@/utils/is';
+  import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
+  import { filter, treeToList, eachTree } from '/@/utils/helper/treeHelper';
+  import { useTree } from './hooks/useTree';
+  import { useContextMenu } from '/@/hooks/web/useContextMenu';
+  import { CreateContextOptions } from '/@/components/ContextMenu';
+  import { treeEmits, treeProps } from './types/tree';
+  import { createBEM } from '/@/utils/bem';
+
+  export default defineComponent({
+    name: 'BasicTree',
+    inheritAttrs: false,
+    props: treeProps,
+    emits: treeEmits,
+    setup(props, { attrs, slots, emit, expose }) {
+      const [bem] = createBEM('tree');
+
+      const state = reactive<TreeState>({
+        checkStrictly: props.checkStrictly,
+        expandedKeys: props.expandedKeys || [],
+        selectedKeys: props.selectedKeys || [],
+        checkedKeys: props.checkedKeys || [],
+      });
+
+      const searchState = reactive({
+        startSearch: false,
+        searchText: '',
+        searchData: [] as TreeItem[],
+      });
+
+      const treeDataRef = ref<TreeItem[]>([]);
+
+      const [createContextMenu] = useContextMenu();
+
+      const getFieldNames = computed((): Required<FieldNames> => {
+        const { fieldNames } = props;
+        return {
+          children: 'children',
+          title: 'title',
+          key: 'key',
+          ...fieldNames,
+        };
+      });
+
+      const getBindValues = computed(() => {
+        let propsData = {
+          blockNode: true,
+          ...attrs,
+          ...props,
+          expandedKeys: state.expandedKeys,
+          selectedKeys: state.selectedKeys,
+          checkedKeys: state.checkedKeys,
+          checkStrictly: state.checkStrictly,
+          fieldNames: unref(getFieldNames),
+          'onUpdate:expandedKeys': (v: KeyType[]) => {
+            state.expandedKeys = v;
+            emit('update:expandedKeys', v);
+          },
+          'onUpdate:selectedKeys': (v: KeyType[]) => {
+            state.selectedKeys = v;
+            emit('update:selectedKeys', v);
+          },
+          onCheck: (v: CheckKeys, e) => {
+            let currentValue = toRaw(state.checkedKeys) as KeyType[];
+            if (isArray(currentValue) && searchState.startSearch) {
+              const { key } = unref(getFieldNames);
+              currentValue = difference(currentValue, getChildrenKeys(e.node.$attrs.node[key]));
+              if (e.checked) {
+                currentValue.push(e.node.$attrs.node[key]);
+              }
+              state.checkedKeys = currentValue;
+            } else {
+              state.checkedKeys = v;
+            }
+
+            const rawVal = toRaw(state.checkedKeys);
+            emit('update:value', rawVal);
+            emit('check', rawVal, e);
+          },
+          onRightClick: handleRightClick,
+        };
+        return omit(propsData, 'treeData', 'class');
+      });
+
+      const getTreeData = computed((): TreeItem[] =>
+        searchState.startSearch ? searchState.searchData : unref(treeDataRef),
+      );
+
+      const getNotFound = computed((): boolean => {
+        return !getTreeData.value || getTreeData.value.length === 0;
+      });
+
+      const {
+        deleteNodeByKey,
+        insertNodeByKey,
+        insertNodesByKey,
+        filterByLevel,
+        updateNodeByKey,
+        getAllKeys,
+        getChildrenKeys,
+        getEnabledKeys,
+        getSelectedNode,
+      } = useTree(treeDataRef, getFieldNames);
+
+      function getIcon(params: Recordable, icon?: string) {
+        if (!icon) {
+          if (props.renderIcon && isFunction(props.renderIcon)) {
+            return props.renderIcon(params);
+          }
+        }
+        return icon;
+      }
+
+      async function handleRightClick({ event, node }: Recordable) {
+        const { rightMenuList: menuList = [], beforeRightClick } = props;
+        let contextMenuOptions: CreateContextOptions = { event, items: [] };
+
+        if (beforeRightClick && isFunction(beforeRightClick)) {
+          let result = await beforeRightClick(node, event);
+          if (Array.isArray(result)) {
+            contextMenuOptions.items = result;
+          } else {
+            Object.assign(contextMenuOptions, result);
+          }
+        } else {
+          contextMenuOptions.items = menuList;
+        }
+        if (!contextMenuOptions.items?.length) return;
+        contextMenuOptions.items = contextMenuOptions.items.filter((item) => !item.hidden);
+        createContextMenu(contextMenuOptions);
+      }
+
+      function setExpandedKeys(keys: KeyType[]) {
+        state.expandedKeys = keys;
+      }
+
+      function getExpandedKeys() {
+        return state.expandedKeys;
+      }
+      function setSelectedKeys(keys: KeyType[]) {
+        state.selectedKeys = keys;
+      }
+
+      function getSelectedKeys() {
+        return state.selectedKeys;
+      }
+
+      function setCheckedKeys(keys: CheckKeys) {
+        state.checkedKeys = keys;
+      }
+
+      function getCheckedKeys() {
+        return state.checkedKeys;
+      }
+
+      function checkAll(checkAll: boolean) {
+        state.checkedKeys = checkAll ? getEnabledKeys() : ([] as KeyType[]);
+      }
+
+      function expandAll(expandAll: boolean) {
+        state.expandedKeys = expandAll ? getAllKeys() : ([] as KeyType[]);
+      }
+
+      function onStrictlyChange(strictly: boolean) {
+        state.checkStrictly = strictly;
+      }
+
+      watch(
+        () => props.searchValue,
+        (val) => {
+          if (val !== searchState.searchText) {
+            searchState.searchText = val;
+          }
+        },
+        {
+          immediate: true,
+        },
+      );
+
+      watch(
+        () => props.treeData,
+        (val) => {
+          if (val) {
+            handleSearch(searchState.searchText);
+          }
+        },
+      );
+
+      function handleSearch(searchValue: string) {
+        if (searchValue !== searchState.searchText) searchState.searchText = searchValue;
+        emit('update:searchValue', searchValue);
+        if (!searchValue) {
+          searchState.startSearch = false;
+          return;
+        }
+        const { filterFn, checkable, expandOnSearch, checkOnSearch, selectedOnSearch } =
+          unref(props);
+        searchState.startSearch = true;
+        const { title: titleField, key: keyField } = unref(getFieldNames);
+
+        const matchedKeys: string[] = [];
+        searchState.searchData = filter(
+          unref(treeDataRef),
+          (node) => {
+            const result = filterFn
+              ? filterFn(searchValue, node, unref(getFieldNames))
+              : node[titleField]?.includes(searchValue) ?? false;
+            if (result) {
+              matchedKeys.push(node[keyField]);
+            }
+            return result;
+          },
+          unref(getFieldNames),
+        );
+
+        if (expandOnSearch) {
+          const expandKeys = treeToList(searchState.searchData).map((val) => {
+            return val[keyField];
+          });
+          if (expandKeys && expandKeys.length) {
+            setExpandedKeys(expandKeys);
+          }
+        }
+
+        if (checkOnSearch && checkable && matchedKeys.length) {
+          setCheckedKeys(matchedKeys);
+        }
+
+        if (selectedOnSearch && matchedKeys.length) {
+          setSelectedKeys(matchedKeys);
+        }
+      }
+
+      function handleClickNode(key: string, children: TreeItem[]) {
+        if (!props.clickRowToExpand || !children || children.length === 0) return;
+        if (!state.expandedKeys.includes(key)) {
+          setExpandedKeys([...state.expandedKeys, key]);
+        } else {
+          const keys = [...state.expandedKeys];
+          const index = keys.findIndex((item) => item === key);
+          if (index !== -1) {
+            keys.splice(index, 1);
+          }
+          setExpandedKeys(keys);
+        }
+      }
+
+      watchEffect(() => {
+        treeDataRef.value = props.treeData as TreeItem[];
+      });
+
+      onMounted(() => {
+        const level = parseInt(props.defaultExpandLevel);
+        if (level > 0) {
+          state.expandedKeys = filterByLevel(level);
+        } else if (props.defaultExpandAll) {
+          expandAll(true);
+        }
+      });
+
+      watchEffect(() => {
+        state.expandedKeys = props.expandedKeys;
+      });
+
+      watchEffect(() => {
+        state.selectedKeys = props.selectedKeys;
+      });
+
+      watchEffect(() => {
+        state.checkedKeys = props.checkedKeys;
+      });
+
+      watch(
+        () => props.value,
+        () => {
+          state.checkedKeys = toRaw(props.value || []);
+        },
+        { immediate: true },
+      );
+
+      watch(
+        () => state.checkedKeys,
+        () => {
+          const v = toRaw(state.checkedKeys);
+          emit('update:value', v);
+          emit('change', v);
+        },
+      );
+
+      watchEffect(() => {
+        state.checkStrictly = props.checkStrictly;
+      });
+
+      const instance: TreeActionType = {
+        setExpandedKeys,
+        getExpandedKeys,
+        setSelectedKeys,
+        getSelectedKeys,
+        setCheckedKeys,
+        getCheckedKeys,
+        insertNodeByKey,
+        insertNodesByKey,
+        deleteNodeByKey,
+        updateNodeByKey,
+        getSelectedNode,
+        checkAll,
+        expandAll,
+        filterByLevel: (level: number) => {
+          state.expandedKeys = filterByLevel(level);
+        },
+        setSearchValue: (value: string) => {
+          handleSearch(value);
+        },
+        getSearchValue: () => {
+          return searchState.searchText;
+        },
+      };
+
+      function renderAction(node: TreeItem) {
+        const { actionList } = props;
+        if (!actionList || actionList.length === 0) return;
+        return actionList.map((item, index) => {
+          let nodeShow = true;
+          if (isFunction(item.show)) {
+            nodeShow = item.show?.(node);
+          } else if (isBoolean(item.show)) {
+            nodeShow = item.show;
+          }
+
+          if (!nodeShow) return null;
+
+          return (
+            <span key={index} class={bem('action')}>
+              {item.render(node)}
+            </span>
+          );
+        });
+      }
+
+      const treeData = computed(() => {
+        const data = cloneDeep(getTreeData.value);
+        eachTree(data, (item, _parent) => {
+          const searchText = searchState.searchText;
+          const { highlight } = unref(props);
+          const {
+            title: titleField,
+            key: keyField,
+            children: childrenField,
+          } = unref(getFieldNames);
+
+          const icon = getIcon(item, item.icon);
+          const title = get(item, titleField);
+
+          const searchIdx = searchText ? title.indexOf(searchText) : -1;
+          const isHighlight =
+            searchState.startSearch && !isEmpty(searchText) && highlight && searchIdx !== -1;
+          const highlightStyle = `color: ${isBoolean(highlight) ? '#f50' : highlight}`;
+
+          const titleDom = isHighlight ? (
+            <span class={unref(getBindValues)?.blockNode ? `${bem('content')}` : ''}>
+              <span>{title.substr(0, searchIdx)}</span>
+              <span style={highlightStyle}>{searchText}</span>
+              <span>{title.substr(searchIdx + (searchText as string).length)}</span>
+            </span>
+          ) : (
+            title
+          );
+          item[titleField] = (
+            <span
+              class={`${bem('title')} pl-2`}
+              onClick={handleClickNode.bind(null, item[keyField], item[childrenField])}
+            >
+              {slots?.title ? (
+                getSlot(slots, 'title', item)
+              ) : (
+                <>
+                  {icon && <TreeIcon icon={icon} />}
+                  {titleDom}
+                  <span class={bem('actions')}>{renderAction(item)}</span>
+                </>
+              )}
+            </span>
+          );
+          return item;
+        });
+        return data;
+      });
+
+      expose(instance);
+
+      return () => {
+        const { title, helpMessage, toolbar, search, checkable } = props;
+        const showTitle = title || toolbar || search || slots.headerTitle;
+        const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
+        return (
+          <div class={[bem(), 'h-full', attrs.class]}>
+            {showTitle && (
+              <TreeHeader
+                checkable={checkable}
+                checkAll={checkAll}
+                expandAll={expandAll}
+                title={title}
+                search={search}
+                toolbar={toolbar}
+                helpMessage={helpMessage}
+                onStrictlyChange={onStrictlyChange}
+                onSearch={handleSearch}
+                searchText={searchState.searchText}
+              >
+                {extendSlots(slots)}
+              </TreeHeader>
+            )}
+            <Spin wrapperClassName={unref(props.treeWrapperClassName)} spinning={unref(props.loading)} tip="加载中...">
+              <ScrollContainer style={scrollStyle} v-show={!unref(getNotFound)}>
+                <Tree {...unref(getBindValues)} showIcon={false} treeData={treeData.value} />
+              </ScrollContainer>
+              <Empty
+                v-show={unref(getNotFound)}
+                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                class="!mt-4"
+              />
+            </Spin>
+          </div>
+        );
+      };
+    },
+  });
+</script>

src/components/Tree/src/TreeIcon.ts

@@ -0,0 +1,13 @@
+import type { VNode, FunctionalComponent } from 'vue';
+
+import { h } from 'vue';
+import { isString } from '@vue/shared';
+import { Icon } from '/@/components/Icon';
+
+export const TreeIcon: FunctionalComponent = ({ icon }: { icon: VNode | string }) => {
+  if (!icon) return null;
+  if (isString(icon)) {
+    return h(Icon, { icon, class: 'mr-1' });
+  }
+  return Icon;
+};

src/components/Tree/src/components/TreeHeader.vue

@@ -0,0 +1,170 @@
+<template>
+  <div :class="bem()" class="flex px-2 py-1.5 items-center">
+    <slot name="headerTitle" v-if="slots.headerTitle"></slot>
+    <BasicTitle :helpMessage="helpMessage" v-if="!slots.headerTitle && title">
+      {{ title }}
+    </BasicTitle>
+    <div
+      class="flex items-center flex-1 cursor-pointer justify-self-stretch"
+      v-if="search || toolbar"
+    >
+      <div :class="getInputSearchCls" v-if="search">
+        <InputSearch
+          :placeholder="t('common.searchText')"
+          size="small"
+          allowClear
+          v-model:value="searchValue"
+        />
+      </div>
+      <Dropdown @click.prevent v-if="toolbar">
+        <Icon icon="ion:ellipsis-vertical" />
+        <template #overlay>
+          <Menu @click="handleMenuClick">
+            <template v-for="item in toolbarList" :key="item.value">
+              <MenuItem v-bind="{ key: item.value }">
+                {{ item.label }}
+              </MenuItem>
+              <MenuDivider v-if="item.divider" />
+            </template>
+          </Menu>
+        </template>
+      </Dropdown>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, ref, watch, useSlots } from 'vue';
+  import { Dropdown, Menu, MenuItem, MenuDivider, InputSearch } from 'ant-design-vue';
+  import { Icon } from '/@/components/Icon';
+  import { BasicTitle } from '/@/components/Basic';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { useDebounceFn } from '@vueuse/core';
+  import { createBEM } from '/@/utils/bem';
+  import { ToolbarEnum } from '../types/tree';
+
+  const searchValue = ref('');
+
+  const [bem] = createBEM('tree-header');
+
+  const props = defineProps({
+    helpMessage: {
+      type: [String, Array] as PropType<string | string[]>,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    toolbar: {
+      type: Boolean,
+      default: false,
+    },
+    checkable: {
+      type: Boolean,
+      default: false,
+    },
+    search: {
+      type: Boolean,
+      default: false,
+    },
+    searchText: {
+      type: String,
+      default: '',
+    },
+    checkAll: {
+      type: Function,
+      default: undefined,
+    },
+    expandAll: {
+      type: Function,
+      default: undefined,
+    },
+  } as const);
+  const emit = defineEmits(['strictly-change', 'search']);
+
+  const slots = useSlots();
+  const { t } = useI18n();
+
+  const getInputSearchCls = computed(() => {
+    const titleExists = slots.headerTitle || props.title;
+    return [
+      'mr-1',
+      'w-full',
+      {
+        ['ml-5']: titleExists,
+      },
+    ];
+  });
+
+  const toolbarList = computed(() => {
+    const { checkable } = props;
+    const defaultToolbarList = [
+      { label: t('component.tree.expandAll'), value: ToolbarEnum.EXPAND_ALL },
+      {
+        label: t('component.tree.unExpandAll'),
+        value: ToolbarEnum.UN_EXPAND_ALL,
+        divider: checkable,
+      },
+    ];
+
+    return checkable
+      ? [
+          { label: t('component.tree.selectAll'), value: ToolbarEnum.SELECT_ALL },
+          {
+            label: t('component.tree.unSelectAll'),
+            value: ToolbarEnum.UN_SELECT_ALL,
+            divider: checkable,
+          },
+          ...defaultToolbarList,
+          { label: t('component.tree.checkStrictly'), value: ToolbarEnum.CHECK_STRICTLY },
+          { label: t('component.tree.checkUnStrictly'), value: ToolbarEnum.CHECK_UN_STRICTLY },
+        ]
+      : defaultToolbarList;
+  });
+
+  function handleMenuClick(e: { key: ToolbarEnum }) {
+    const { key } = e;
+    switch (key) {
+      case ToolbarEnum.SELECT_ALL:
+        props.checkAll?.(true);
+        break;
+      case ToolbarEnum.UN_SELECT_ALL:
+        props.checkAll?.(false);
+        break;
+      case ToolbarEnum.EXPAND_ALL:
+        props.expandAll?.(true);
+        break;
+      case ToolbarEnum.UN_EXPAND_ALL:
+        props.expandAll?.(false);
+        break;
+      case ToolbarEnum.CHECK_STRICTLY:
+        emit('strictly-change', false);
+        break;
+      case ToolbarEnum.CHECK_UN_STRICTLY:
+        emit('strictly-change', true);
+        break;
+    }
+  }
+
+  function emitChange(value?: string): void {
+    emit('search', value);
+  }
+
+  const debounceEmitChange = useDebounceFn(emitChange, 200);
+
+  watch(
+    () => searchValue.value,
+    (v) => {
+      debounceEmitChange(v);
+    },
+  );
+
+  watch(
+    () => props.searchText,
+    (v) => {
+      if (v !== searchValue.value) {
+        searchValue.value = v;
+      }
+    },
+  );
+</script>

src/components/Tree/src/hooks/useTree.ts

@@ -0,0 +1,207 @@
+import type { InsertNodeParams, KeyType, FieldNames, TreeItem } from '../types/tree';
+import type { Ref, ComputedRef } from 'vue';
+import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
+
+import { cloneDeep } from 'lodash-es';
+import { unref } from 'vue';
+import { forEach } from '/@/utils/helper/treeHelper';
+
+export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: ComputedRef<FieldNames>) {
+  function getAllKeys(list?: TreeDataItem[]) {
+    const keys: string[] = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField) return keys;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const node = treeData[index];
+      keys.push(node[keyField]!);
+      const children = node[childrenField];
+      if (children && children.length) {
+        keys.push(...(getAllKeys(children) as string[]));
+      }
+    }
+    return keys as KeyType[];
+  }
+
+  // get keys that can be checked and selected
+  function getEnabledKeys(list?: TreeDataItem[]) {
+    const keys: string[] = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField) return keys;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const node = treeData[index];
+      node.disabled !== true && node.selectable !== false && keys.push(node[keyField]!);
+      const children = node[childrenField];
+      if (children && children.length) {
+        keys.push(...(getEnabledKeys(children) as string[]));
+      }
+    }
+    return keys as KeyType[];
+  }
+
+  function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]) {
+    const keys: KeyType[] = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField) return keys;
+    for (let index = 0; index < treeData.length; index++) {
+      const node = treeData[index];
+      const children = node[childrenField];
+      if (nodeKey === node[keyField]) {
+        keys.push(node[keyField]!);
+        if (children && children.length) {
+          keys.push(...(getAllKeys(children) as string[]));
+        }
+      } else {
+        if (children && children.length) {
+          keys.push(...getChildrenKeys(nodeKey, children));
+        }
+      }
+    }
+    return keys as KeyType[];
+  }
+
+  // Update node
+  function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
+    if (!key) return;
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+
+    if (!childrenField || !keyField) return;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const element: any = treeData[index];
+      const children = element[childrenField];
+
+      if (element[keyField] === key) {
+        treeData[index] = { ...treeData[index], ...node };
+        break;
+      } else if (children && children.length) {
+        updateNodeByKey(key, node, element[childrenField]);
+      }
+    }
+  }
+
+  // Expand the specified level
+  function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
+    if (!level) {
+      return [];
+    }
+    const res: (string | number)[] = [];
+    const data = list || unref(treeDataRef) || [];
+    for (let index = 0; index < data.length; index++) {
+      const item = data[index];
+
+      const { key: keyField, children: childrenField } = unref(getFieldNames);
+      const key = keyField ? item[keyField] : '';
+      const children = childrenField ? item[childrenField] : [];
+      res.push(key);
+      if (children && children.length && currentLevel < level) {
+        currentLevel += 1;
+        res.push(...filterByLevel(level, children, currentLevel));
+      }
+    }
+    return res as string[] | number[];
+  }
+
+  /**
+   * 添加节点
+   */
+  function insertNodeByKey({ parentKey = null, node, push = 'push' }: InsertNodeParams) {
+    const treeData: any = cloneDeep(unref(treeDataRef));
+    if (!parentKey) {
+      treeData[push](node);
+      treeDataRef.value = treeData;
+      return;
+    }
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField) return;
+
+    forEach(treeData, (treeItem) => {
+      if (treeItem[keyField] === parentKey) {
+        treeItem[childrenField] = treeItem[childrenField] || [];
+        treeItem[childrenField][push](node);
+        return true;
+      }
+    });
+    treeDataRef.value = treeData;
+  }
+  /**
+   * 批量添加节点
+   */
+  function insertNodesByKey({ parentKey = null, list, push = 'push' }: InsertNodeParams) {
+    const treeData: any = cloneDeep(unref(treeDataRef));
+    if (!list || list.length < 1) {
+      return;
+    }
+    if (!parentKey) {
+      for (let i = 0; i < list.length; i++) {
+        treeData[push](list[i]);
+      }
+    } else {
+      const { key: keyField, children: childrenField } = unref(getFieldNames);
+      if (!childrenField || !keyField) return;
+
+      forEach(treeData, (treeItem) => {
+        if (treeItem[keyField] === parentKey) {
+          treeItem[childrenField] = treeItem[childrenField] || [];
+          for (let i = 0; i < list.length; i++) {
+            treeItem[childrenField][push](list[i]);
+          }
+          treeDataRef.value = treeData;
+          return true;
+        }
+      });
+    }
+  }
+  // Delete node
+  function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
+    if (!key) return;
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getFieldNames);
+    if (!childrenField || !keyField) return;
+
+    for (let index = 0; index < treeData.length; index++) {
+      const element: any = treeData[index];
+      const children = element[childrenField];
+
+      if (element[keyField] === key) {
+        treeData.splice(index, 1);
+        break;
+      } else if (children && children.length) {
+        deleteNodeByKey(key, element[childrenField]);
+      }
+    }
+  }
+
+  // Get selected node
+  function getSelectedNode(key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) {
+    if (!key && key !== 0) return null;
+    const treeData = list || unref(treeDataRef);
+    treeData.forEach((item) => {
+      if (selectedNode?.key || selectedNode?.key === 0) return selectedNode;
+      if (item.key === key) {
+        selectedNode = item;
+        return;
+      }
+      if (item.children && item.children.length) {
+        selectedNode = getSelectedNode(key, item.children, selectedNode);
+      }
+    });
+    return selectedNode || null;
+  }
+  return {
+    deleteNodeByKey,
+    insertNodeByKey,
+    insertNodesByKey,
+    filterByLevel,
+    updateNodeByKey,
+    getAllKeys,
+    getChildrenKeys,
+    getEnabledKeys,
+    getSelectedNode,
+  };
+}

src/components/Tree/src/types/tree.ts

@@ -0,0 +1,195 @@
+import type { ExtractPropTypes } from 'vue';
+import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
+
+import { buildProps } from '/@/utils/props';
+
+export enum ToolbarEnum {
+  SELECT_ALL,
+  UN_SELECT_ALL,
+  EXPAND_ALL,
+  UN_EXPAND_ALL,
+  CHECK_STRICTLY,
+  CHECK_UN_STRICTLY,
+}
+
+export const treeEmits = [
+  'update:expandedKeys',
+  'update:selectedKeys',
+  'update:value',
+  'change',
+  'check',
+  'update:searchValue',
+];
+
+export interface TreeState {
+  expandedKeys: KeyType[];
+  selectedKeys: KeyType[];
+  checkedKeys: CheckKeys;
+  checkStrictly: boolean;
+}
+
+export interface FieldNames {
+  children?: string;
+  title?: string;
+  key?: string;
+}
+
+export type KeyType = string | number;
+
+export type CheckKeys =
+  | KeyType[]
+  | { checked: string[] | number[]; halfChecked: string[] | number[] };
+
+export const treeProps = buildProps({
+  value: {
+    type: [Object, Array] as PropType<KeyType[] | CheckKeys>,
+  },
+
+  renderIcon: {
+    type: Function as PropType<(params: Recordable) => string>,
+  },
+
+  helpMessage: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: '',
+  },
+
+  title: {
+    type: String,
+    default: '',
+  },
+  toolbar: Boolean,
+  search: Boolean,
+  searchValue: {
+    type: String,
+    default: '',
+  },
+  checkStrictly: Boolean,
+  clickRowToExpand: {
+    type: Boolean,
+    default: false,
+  },
+  checkable: Boolean,
+  defaultExpandLevel: {
+    type: [String, Number] as PropType<string | number>,
+    default: '',
+  },
+  defaultExpandAll: Boolean,
+
+  fieldNames: {
+    type: Object as PropType<FieldNames>,
+  },
+
+  treeData: {
+    type: Array as PropType<TreeDataItem[]>,
+  },
+
+  actionList: {
+    type: Array as PropType<TreeActionItem[]>,
+    default: () => [],
+  },
+
+  expandedKeys: {
+    type: Array as PropType<KeyType[]>,
+    default: () => [],
+  },
+
+  selectedKeys: {
+    type: Array as PropType<KeyType[]>,
+    default: () => [],
+  },
+
+  checkedKeys: {
+    type: Array as PropType<CheckKeys>,
+    default: () => [],
+  },
+
+  beforeRightClick: {
+    type: Function as PropType<(...arg: any) => ContextMenuItem[] | ContextMenuOptions>,
+    default: undefined,
+  },
+
+  rightMenuList: {
+    type: Array as PropType<ContextMenuItem[]>,
+  },
+  // 自定义数据过滤判断方法(注: 不是整个过滤方法，而是内置过滤的判断方法，用于增强原本仅能通过title进行过滤的方式)
+  filterFn: {
+    type: Function as PropType<
+      (searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean
+    >,
+    default: undefined,
+  },
+  // 高亮搜索值，仅高亮具体匹配值（通过title）值为true时使用默认色值，值为#xxx时使用此值替代且高亮开启
+  highlight: {
+    type: [Boolean, String] as PropType<Boolean | String>,
+    default: false,
+  },
+  // 搜索完成时自动展开结果
+  expandOnSearch: Boolean,
+  // 搜索完成自动选中所有结果,当且仅当 checkable===true 时生效
+  checkOnSearch: Boolean,
+  // 搜索完成自动select所有结果
+  selectedOnSearch: Boolean,
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  treeWrapperClassName: String
+});
+
+export type TreeProps = ExtractPropTypes<typeof treeProps>;
+
+export interface ContextMenuItem {
+  label: string;
+  icon?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+  handler?: Fn;
+  divider?: boolean;
+  children?: ContextMenuItem[];
+}
+
+export interface ContextMenuOptions {
+  icon?: string;
+  styles?: any;
+  items?: ContextMenuItem[];
+}
+
+export interface TreeItem extends TreeDataItem {
+  icon?: any;
+}
+
+export interface TreeActionItem {
+  render: (record: Recordable) => any;
+  show?: boolean | ((record: Recordable) => boolean);
+}
+
+export interface InsertNodeParams {
+  parentKey: string | null;
+  node: TreeDataItem;
+  list?: TreeDataItem[];
+  push?: 'push' | 'unshift';
+}
+
+export interface TreeActionType {
+  checkAll: (checkAll: boolean) => void;
+  expandAll: (expandAll: boolean) => void;
+  setExpandedKeys: (keys: KeyType[]) => void;
+  getExpandedKeys: () => KeyType[];
+  setSelectedKeys: (keys: KeyType[]) => void;
+  getSelectedKeys: () => KeyType[];
+  setCheckedKeys: (keys: CheckKeys) => void;
+  getCheckedKeys: () => CheckKeys;
+  filterByLevel: (level: number) => void;
+  insertNodeByKey: (opt: InsertNodeParams) => void;
+  insertNodesByKey: (opt: InsertNodeParams) => void;
+  deleteNodeByKey: (key: string) => void;
+  updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
+  setSearchValue: (value: string) => void;
+  getSearchValue: () => string;
+  getSelectedNode: (
+    key: KeyType,
+    treeList?: TreeItem[],
+    selectNode?: TreeItem | null,
+  ) => TreeItem | null;
+}

src/components/Tree/style/index.less

@@ -0,0 +1,52 @@
+@tree-prefix-cls: ~'@{namespace}-tree';
+
+.@{tree-prefix-cls} {
+  background-color: @component-background;
+
+  .ant-tree-node-content-wrapper {
+    position: relative;
+
+    .ant-tree-title {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-right: 10px;
+
+    &:hover {
+      .@{tree-prefix-cls}__action {
+        visibility: visible;
+      }
+    }
+  }
+
+  &__content {
+    overflow: hidden;
+  }
+
+  &__actions {
+    position: absolute;
+    //top: 2px;
+    right: 3px;
+    display: flex;
+  }
+
+  &__action {
+    margin-left: 4px;
+    visibility: hidden;
+  }
+
+  &-header {
+    border-bottom: 1px solid @border-color-base;
+  }
+}

src/components/Tree/style/index.ts

@@ -0,0 +1 @@
+import './index.less';

src/router/routes/modules/system.ts

@@ -1,5 +1,5 @@
-import type { AppRouteModule } from '/@/router/types';
+import type { AppRouteModule } from '/@/router/types'
-import { LAYOUT } from '/@/router/constant';
+import { LAYOUT } from '/@/router/constant'
 const main: AppRouteModule = {
   path: '/system',
   name: 'System',
@@ -19,7 +19,23 @@ const main: AppRouteModule = {
         title: '设备管理',
       },
     },
+    {
+      path: 'role',
+      name: 'SystemRole',
+      component: () => import('/@/views/system/role/index.vue'),
+      meta: {
+        title: '角色管理',
+      },
+    },
+    {
+      path: 'account',
+      name: 'SystemAccount',
+      component: () => import('/@/views/system/account/index.vue'),
+      meta: {
+        title: '账号管理',
+      },
+    },
   ],
-};
+}
 
-export default main;
+export default main

src/views/system/account/account.data.ts

@@ -0,0 +1,76 @@
+import { BasicColumn } from '/@/components/Table'
+import { FormSchema } from '/@/components/Table'
+export const columns: BasicColumn[] = [
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '角色编码',
+    dataIndex: 'slug',
+    width: 180,
+  },
+  {
+    width: 80,
+    title: '操作',
+    dataIndex: 'action',
+    align: 'center',
+    fixed: undefined,
+  },
+]
+
+export const searchFormSchema: FormSchema[] = [
+  // {
+  //   field: 'roleNme',
+  //   label: '角色名称',
+  //   component: 'Input',
+  //   colProps: { span: 8 },
+  // },
+  // {
+  //   field: 'status',
+  //   label: '状态',
+  //   component: 'Select',
+  //   componentProps: {
+  //     options: [
+  //       { label: '启用', value: '0' },
+  //       { label: '停用', value: '1' },
+  //     ],
+  //   },
+  //   colProps: { span: 8 },
+  // },
+]
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: '角色ID',
+    required: false,
+    dynamicDisabled: true,
+    component: 'Input',
+    ifShow: ({ values }) => {
+      return !!values.id
+    },
+  },
+  {
+    field: 'name',
+    label: '角色名',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'slug',
+    label: '角色编码',
+    required: true,
+    component: 'Input',
+  },
+  {
+    label: ' ',
+    field: 'permission_ids',
+    slot: 'menu',
+    component: 'Input',
+    ifShow: ({ values }) => {
+      return !!values.id
+    },
+  },
+]

src/views/system/account/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <div class="flex items-center justify-center">
+            <TableAction
+              :actions="[
+                { label: '编辑', onClick: handleEdit.bind(null, record) },
+                {
+                  label: '删除',
+                  popConfirm: {
+                    title: '是否确认删除',
+                    placement: 'topRight',
+                    confirm: handleDelete.bind(null, record),
+                  },
+                },
+              ]"
+            />
+          </div>
+        </template>
+      </template>
+    </BasicTable>
+    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicTable, useTable, TableAction } from '/@/components/Table'
+  import { getRoles, deleteRoles } from '/@/api/sys/user'
+  import { useDrawer } from '/@/components/Drawer'
+  import RoleDrawer from './RoleDrawer.vue'
+  import { message } from 'ant-design-vue'
+  import { columns, searchFormSchema } from './role.data'
+  const [registerDrawer, { openDrawer }] = useDrawer()
+  const [registerTable, { reload }] = useTable({
+    title: '账号管理',
+    api: getRoles,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: true,
+  })
+  const handleSuccess = () => {
+    message.success('操作成功')
+    reload()
+  }
+  const handleCreate = () => {
+    openDrawer(true, {
+      isUpdate: false,
+    })
+  }
+  const handleEdit = (record: Recordable) => {
+    openDrawer(true, {
+      id: record.id,
+      isUpdate: true,
+    })
+  }
+  const handleDelete = async (record: Recordable) => {
+    await deleteRoles(record.id)
+    message.success('删除成功')
+    reload()
+  }
+</script>
+<style></style>

src/views/system/role/RoleDrawer.vue

@@ -0,0 +1,76 @@
+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #menu="{ model, field }">
+        <BasicTree
+          v-model:value="model[field]"
+          :treeData="treeData"
+          :defaultExpandLevel="1"
+          :fieldNames="{ title: 'label', key: 'id' }"
+          checkable
+          toolbar
+          title="菜单分配"
+        />
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref } from 'vue'
+  import { BasicForm, useForm } from '/@/components/Form/index'
+  import { formSchema } from './role.data'
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'
+  import { BasicTree, TreeItem } from '/@/components/Tree'
+  import { getPermissions, addRoles, getRolesInfo, editRoles } from '/@/api/sys/user'
+  const emits = defineEmits(['success', 'register'])
+  const isUpdate = ref(false)
+  const treeData = ref<TreeItem[]>([])
+  const getTitle = computed(() => (!isUpdate.value ? '新增角色' : '编辑角色'))
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    labelWidth: 90,
+    baseColProps: { span: 24 },
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  })
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    resetFields()
+    setDrawerProps({ confirmLoading: false })
+    // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+    if (unref(treeData).length === 0) {
+      treeData.value = (await getPermissions()) as any as TreeItem[]
+    }
+    isUpdate.value = data?.isUpdate
+    if (unref(isUpdate)) {
+      const res = await getRolesInfo(data.id)
+      await setFieldsValue({
+        ...res,
+        permission_ids: res.permissions,
+      })
+    }
+  })
+
+  const handleSubmit = async () => {
+    try {
+      const values = await validate()
+      setDrawerProps({ confirmLoading: true })
+      if (values.id) {
+        // 修改
+        await editRoles(values.id, values)
+      } else {
+        // 新增
+        await addRoles(values)
+      }
+      closeDrawer()
+      emits('success')
+    } finally {
+      setDrawerProps({ confirmLoading: false })
+    }
+  }
+</script>

src/views/system/role/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <div class="flex items-center justify-center">
+            <TableAction
+              :actions="[
+                { label: '编辑', onClick: handleEdit.bind(null, record) },
+                {
+                  label: '删除',
+                  popConfirm: {
+                    title: '是否确认删除',
+                    placement: 'topRight',
+                    confirm: handleDelete.bind(null, record),
+                  },
+                },
+              ]"
+            />
+          </div>
+        </template>
+      </template>
+    </BasicTable>
+    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicTable, useTable, TableAction } from '/@/components/Table'
+  import { getRoles, deleteRoles } from '/@/api/sys/user'
+  import { useDrawer } from '/@/components/Drawer'
+  import RoleDrawer from './RoleDrawer.vue'
+  import { message } from 'ant-design-vue'
+  import { columns, searchFormSchema } from './role.data'
+  const [registerDrawer, { openDrawer }] = useDrawer()
+  const [registerTable, { reload }] = useTable({
+    title: '角色列表',
+    api: getRoles,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: true,
+  })
+  const handleSuccess = () => {
+    message.success('操作成功')
+    reload()
+  }
+  const handleCreate = () => {
+    openDrawer(true, {
+      isUpdate: false,
+    })
+  }
+  const handleEdit = (record: Recordable) => {
+    openDrawer(true, {
+      id: record.id,
+      isUpdate: true,
+    })
+  }
+  const handleDelete = async (record: Recordable) => {
+    await deleteRoles(record.id)
+    message.success('删除成功')
+    reload()
+  }
+</script>
+<style></style>

src/views/system/role/role.data.ts

@@ -0,0 +1,76 @@
+import { BasicColumn } from '/@/components/Table'
+import { FormSchema } from '/@/components/Table'
+export const columns: BasicColumn[] = [
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '角色编码',
+    dataIndex: 'slug',
+    width: 180,
+  },
+  {
+    width: 80,
+    title: '操作',
+    dataIndex: 'action',
+    align: 'center',
+    fixed: undefined,
+  },
+]
+
+export const searchFormSchema: FormSchema[] = [
+  // {
+  //   field: 'roleNme',
+  //   label: '角色名称',
+  //   component: 'Input',
+  //   colProps: { span: 8 },
+  // },
+  // {
+  //   field: 'status',
+  //   label: '状态',
+  //   component: 'Select',
+  //   componentProps: {
+  //     options: [
+  //       { label: '启用', value: '0' },
+  //       { label: '停用', value: '1' },
+  //     ],
+  //   },
+  //   colProps: { span: 8 },
+  // },
+]
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: '角色ID',
+    required: false,
+    dynamicDisabled: true,
+    component: 'Input',
+    ifShow: ({ values }) => {
+      return !!values.id
+    },
+  },
+  {
+    field: 'name',
+    label: '角色名',
+    required: true,
+    component: 'Input',
+  },
+  {
+    field: 'slug',
+    label: '角色编码',
+    required: true,
+    component: 'Input',
+  },
+  {
+    label: ' ',
+    field: 'permission_ids',
+    slot: 'menu',
+    component: 'Input',
+    ifShow: ({ values }) => {
+      return !!values.id
+    },
+  },
+]