feat(tree): add renderIcon props close #309

CHANGELOG.zh_CN.md

@@ -11,6 +11,7 @@
 - 新增修改密码界面
 - 新增部门管理示例界面
 - 新增 WebSocket 示例和服务脚本
+- BasicTree 组件新增 `renderIcon` 属性用于控制层级图标显示
 
 ### ⚡ Performance Improvements
 

src/components/Tree/index.ts

-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-
-export const BasicTree = createAsyncComponent(() => import('./src/BasicTree'));
+import BasicTree from './src/index.vue';
 
+export { BasicTree };
 export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
 export * from './src/types';

src/components/Tree/src/TreeIcon.ts

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

src/components/Tree/src/index.less

-.basic-tree {
-  position: relative;
-
-  &-title {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    padding-right: 10px;
-
-    &:hover {
-      .basic-tree__action {
-        visibility: visible;
-      }
-    }
-  }
-
-  &__content {
-    display: inline-block;
-    overflow: hidden;
-  }
-
-  &__actions {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-  }
-
-  &__action {
-    margin-left: 4px;
-    // float: right;
-    // display: none;
-    visibility: hidden;
-  }
-}

src/components/Tree/src/props.ts

-import { PropType } from 'vue';
-import type { ReplaceFields, TreeItem, ActionItem, Keys, CheckKeys } from './types';
+import type { PropType } from 'vue';
+import type { ReplaceFields, ActionItem, Keys, CheckKeys } from './types';
 import type { ContextMenuItem } from '/@/hooks/web/useContextMenu';
+import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
 
 export const basicProps = {
+  renderIcon: {
+    type: Function as PropType<(params: Recordable) => string>,
+  },
   replaceFields: {
     type: Object as PropType<ReplaceFields>,
   },
 
   treeData: {
-    type: Array as PropType<TreeItem[]>,
+    type: Array as PropType<TreeDataItem[]>,
   },
 
   actionList: {
@@ -50,7 +54,7 @@ export const treeNodeProps = {
     type: Object as PropType<ReplaceFields>,
   },
   treeData: {
-    type: Array as PropType<TreeItem[]>,
+    type: Array as PropType<TreeDataItem[]>,
     default: () => [],
   },
 };

src/components/Tree/src/types.ts

+import type { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
 export interface ActionItem {
   render: (record: any) => any;
 }
 
-export interface TreeItem {
-  /**
-   * Class
-   * @description className
-   * @type string
-   */
-  class?: string;
-
-  /**
-   * Style
-   * @description style of tree node
-   * @type string | object
-   */
-  style?: string | object;
-
-  /**
-   * Disable Checkbox
-   * @description Disables the checkbox of the treeNode
-   * @default false
-   * @type boolean
-   */
-  disableCheckbox?: boolean;
-
-  /**
-   * Disabled
-   * @description Disabled or not
-   * @default false
-   * @type boolean
-   */
-  disabled?: boolean;
-
-  /**
-   * Icon
-   * @description customize icon. When you pass component, whose render will receive full TreeNode props as component props
-   * @type any (slot | slot-scope)
-   */
+export interface TreeItem extends TreeDataItem {
   icon?: any;
-
-  /**
-   * Is Leaf?
-   * @description Leaf node or not
-   * @default false
-   * @type boolean
-   */
-  isLeaf?: boolean;
-
-  /**
-   * Key
-   * @description Required property, should be unique in the tree
-   * (In tree: Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys)
-   * @default internal calculated position of treeNode or undefined
-   * @type string | number
-   */
-  key: string | number;
-
-  /**
-   * Selectable
-   * @description Set whether the treeNode can be selected
-   * @default true
-   * @type boolean
-   */
-  selectable?: boolean;
-
-  /**
-   * Title
-   * @description Content showed on the treeNodes
-   * @default '---'
-   * @type any (string | slot)
-   */
-  title: any;
-
-  /**
-   * Value
-   * @description Will be treated as treeNodeFilterProp by default, should be unique in the tree
-   * @default undefined
-   * @type string
-   */
-  value?: string;
-  children?: TreeItem[];
-  slots?: any;
-  scopedSlots?: any;
 }
 
 export interface ReplaceFields {
@@ -107,12 +29,12 @@ export interface TreeActionType {
   filterByLevel: (level: number) => void;
   insertNodeByKey: (opt: InsertNodeParams) => void;
   deleteNodeByKey: (key: string) => void;
-  updateNodeByKey: (key: string, node: Omit<TreeItem, 'key'>) => void;
+  updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void;
 }
 
 export interface InsertNodeParams {
   parentKey: string | null;
-  node: TreeItem;
-  list?: TreeItem[];
+  node: TreeDataItem;
+  list?: TreeDataItem[];
   push?: 'push' | 'unshift';
 }

src/components/Tree/src/useTree.ts

-import type { InsertNodeParams, ReplaceFields, TreeItem } from './types';
+import type { InsertNodeParams, ReplaceFields } from './types';
 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<TreeItem[]>,
+  treeDataRef: Ref<TreeDataItem[]>,
   getReplaceFields: ComputedRef<ReplaceFields>
 ) {
-  // 更新节点
-  function updateNodeByKey(key: string, node: TreeItem, list?: TreeItem[]) {
+  // Update node
+  function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
     if (!key) return;
     const treeData = list || unref(treeDataRef);
     const { key: keyField, children: childrenField } = unref(getReplaceFields);
@@ -30,8 +31,8 @@ export function useTree(
     }
   }
 
-  // 展开指定级别
-  function filterByLevel(level = 1, list?: TreeItem[], currentLevel = 1) {
+  // Expand the specified level
+  function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
     if (!level) {
       return [];
     }
@@ -74,8 +75,8 @@ export function useTree(
     treeDataRef.value = treeData;
   }
 
-  // 删除节点
-  function deleteNodeByKey(key: string, list?: TreeItem[]) {
+  // Delete node
+  function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
     if (!key) return;
     const treeData = list || unref(treeDataRef);
     const { key: keyField, children: childrenField } = unref(getReplaceFields);

src/views/demo/tree/ActionTree.vue

@@ -35,6 +35,7 @@
     setup() {
       const treeRef = ref<Nullable<TreeActionType>>(null);
       const { createMessage } = useMessage();
+
       function getTree() {
         const tree = unref(treeRef);
         if (!tree) {

src/views/demo/tree/EditTree.vue

 <template>
   <PageWrapper title="Tree函数操作示例">
     <div class="flex">
-      <CollapseContainer title="右侧操作按钮" class="mr-4" :style="{ width: '33%' }">
-        <BasicTree :treeData="treeData" :actionList="actionList" />
+      <CollapseContainer title="右侧操作按钮/自定义图标" class="mr-4" :style="{ width: '33%' }">
+        <BasicTree :treeData="treeData" :actionList="actionList" :renderIcon="createIcon" />
       </CollapseContainer>
 
       <CollapseContainer title="右键菜单" class="mr-4" :style="{ width: '33%' }">
@@ -61,7 +61,19 @@
           },
         },
       ];
-      return { treeData, actionList, getRightMenuList };
+
+      function createIcon({ level }) {
+        if (level === 1) {
+          return 'ion:git-compare-outline';
+        }
+        if (level === 2) {
+          return 'ion:home';
+        }
+        if (level === 3) {
+          return 'ion:airplane';
+        }
+      }
+      return { treeData, actionList, getRightMenuList, createIcon };
     },
   });
 </script>

src/views/demo/tree/data.ts

@@ -2,9 +2,8 @@ import { TreeItem } from '/@/components/Tree/index';
 
 export const treeData: TreeItem[] = [
   {
-    title: 'parent 1parent ',
+    title: 'parent ',
     key: '0-0',
-    icon: 'home|svg',
     children: [
       { title: 'leaf', key: '0-0-0' },
       {
@@ -20,7 +19,6 @@ export const treeData: TreeItem[] = [
   {
     title: 'parent 2',
     key: '1-1',
-    icon: 'home|svg',
     children: [
       { title: 'leaf', key: '1-1-0' },
       { title: 'leaf', key: '1-1-1' },
@@ -29,7 +27,6 @@ export const treeData: TreeItem[] = [
   {
     title: 'parent 3',
     key: '2-2',
-    icon: 'home|svg',
     children: [
       { title: 'leaf', key: '2-2-0' },
       { title: 'leaf', key: '2-2-1' },