fix: 修复Tree组件defaultExpandAll配置失效

src/api/platform/workflow/controller/process.ts

@@ -27,17 +27,31 @@ enum Api {
 }
 
 export const listProcessDef = (params?: Recordable) => defHttp.get<ProcessDefinitionInfoResult>({ url: Api.list, params }, { isReturnResultResponse: true });
+
 export const exist = (processDefKey: string) => defHttp.get<string>({ url: `${Api.exist}/${processDefKey}` });
+
 export const listProcessRun = (params?: Recordable) => defHttp.get<ProcessInstanceInfoResult>({ url: Api.runList, params }, { isReturnResultResponse: true });
+
 export const listProcessHistory = (params?: Recordable) => defHttp.get<ProcessInstanceInfoResult>({ url: Api.historyList, params }, { isReturnResultResponse: true });
+
 export const getFlowChart = (processDefId: string) => defHttp.get<string>({ url: `${Api.getFlowChart}/${processDefId}` });
+
 export const setProcessCategory = (params?: Recordable) => defHttp.put({ url: Api.setProcessCategory, params });
+
 export const setProcessInstanceStatus = (processDefKeys: string | string[], status: string) =>  defHttp.put({url: Api.setProcessInstanceStatus, params: { processDefKeys, status } });
+
 export const removeDeployment = (ids: string) => defHttp.delete({ url: `${Api.removeDeployment}/${ids}` });
+
 export const removeProcessInstance = (processDefKeys: string | string[], reason: string) => defHttp.delete({url: Api.removeProcessInstance, params: { processDefKeys, reason } });
+
 export const undoProcessInstance = (processInsId: string) => defHttp.put({ url: `${Api.undoProcessInstance}/${processInsId}` });
+
 export const stopProcessInstance = (processInsId: string, message: string) => defHttp.put({ url: Api.stopProcessInstance, params: { processInsId, message } });
+
 export const queryProcessStatus = (processInsId: string) => defHttp.get({ url: `${Api.queryProcessStatus}/${processInsId}`} );
+
 export const selfProcessInstanceList = (params: Recordable) => defHttp.get({ url: Api.selfProcessInstanceList, params });
+
 export const startProcessDefinition = (workflow: Workflow) => defHttp.post({ url: Api.startProcessDefinition, data: workflow });
+
 export const removeHistoryProcessIns = (ids: string) => defHttp.delete({ url: `${Api.removeHistoryProcessIns}${ids}` });

src/components/Tree/src/BasicTree.vue

@@ -129,7 +129,7 @@
         getSelectedNode,
       } = useTree(treeDataRef, getFieldNames);
 
-      function getIcon(params: Recordable, icon?: string) {
+      function getIcon(params: TreeItem, icon?: string) {
         if (!icon) {
           if (props.renderIcon && isFunction(props.renderIcon)) {
             return props.renderIcon(params);
@@ -278,11 +278,14 @@
 
       onMounted(() => {
         const level = parseInt(props.defaultExpandLevel);
+        // fix: 修复Tree组件defaultExpandAll配置失效,数据初始化太慢
+        setTimeout(() => {
           if (level > 0) {
             state.expandedKeys = filterByLevel(level);
           } else if (props.defaultExpandAll) {
             expandAll(true);
           }
+        }, 200);
       });
 
       watchEffect(() => {

src/components/Tree/src/TreeIcon.ts

@@ -1,5 +1,4 @@
 import type { VNode, FunctionalComponent } from 'vue';
-
 import { h } from 'vue';
 import { isString } from '@vue/shared';
 import { Icon } from '/@/components/Icon';

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

@@ -141,6 +141,8 @@ export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: Compute
       for (let i = 0; i < list.length; i++) {
         treeData[push](list[i]);
       }
+      treeDataRef.value = treeData;
+      return;
     } else {
       const { key: keyField, children: childrenField } = unref(getFieldNames);
       if (!childrenField || !keyField) return;
@@ -178,9 +180,9 @@ export function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: Compute
   }
 
   // Get selected node
-  function getSelectedNode(key: KeyType, treeList?: TreeItem[], selectedNode?: TreeItem | null) {
+  function getSelectedNode(key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) {
     if (!key && key !== 0) return null;
-    const treeData = treeList || unref(treeDataRef);
+    const treeData = list || unref(treeDataRef);
     const { key: keyField, children: childrenField } = unref(getFieldNames);
     if (!keyField) return;
     treeData.forEach((item) => {

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

@@ -191,5 +191,5 @@ export interface TreeActionType {
     key: KeyType,
     treeList?: TreeItem[],
     selectNode?: TreeItem | null,
-  ) => TreeItem | null | undefined;
+  ) => TreeItem | null;
 }

src/views/workflow/process/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <PageWrapper
+    contentClass="flex"
+    contentFullHeight
+    fixedHeight
+    dense
+  >
+    <BasicTree class="m-4 mr-0 overflow-hidden bg-white w-1/4 xl:w-1/5"
+               title="流程分类"
+               toolbar
+               search
+               defaultExpandAll
+               :clickRowToExpand="false"
+               :treeData="state.treeData"
+               :fieldNames="{ key: 'id', title: 'name' }"
+               @select="handleSelect"
+    />
+    <BasicTable class="w-3/4 xl:w-4/5" @register="registerTable">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '启动流程',
+                icon: 'fa-brands:discord',
+                onClick: handleProcessDefinitionStart.bind(null, record)
+              }]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+  </PageWrapper>
+</template>
+
+<script lang="ts">
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,不采用 setup 写法
+   * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
+   * author wangxiang4
+   */
+  import { defineComponent, onMounted, reactive } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { listProcessDef } from '/@/api/platform/workflow/controller/process';
+  import { columns, searchFormSchema } from './process.data';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicTree, TreeItem } from '/@/components/Tree';
+  import { listToTree } from '/@/utils/helper/treeHelper';
+  import { listProcessCategory } from '/@/api/platform/workflow/extension/controller/processCategory';
+
+  /** 类型规范统一声明定义区域 */
+  interface TableState {
+    treeData: TreeItem[];
+  }
+
+  export default defineComponent({
+    name: 'WorkflowProcess',
+    components: {
+      PageWrapper,
+      BasicTable,
+      TableAction,
+      BasicTree
+    },
+    setup() {
+      /** 通用变量统一声明区域 */
+      const state = reactive<TableState>({
+        treeData: []
+      });
+      const [registerTable, { reload, getForm }] = useTable({
+        title: '流程定义列表',
+        api: listProcessDef,
+        rowKey: 'id',
+        columns,
+        formConfig: {
+          compact: true,
+          labelWidth: 100,
+          schemas: searchFormSchema,
+          autoSubmitOnEnter: true,
+          showAdvancedButton: true,
+          autoAdvancedLine: 3
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        clickToRowSelect: false,
+        showIndexColumn: false,
+        actionColumn: {
+          width: 240,
+          title: '操作',
+          dataIndex: 'action',
+          fixed: false
+        }
+      });
+
+      onMounted(async () => {
+        state.treeData = listToTree(await listProcessCategory());
+      });
+
+      function handleProcessDefinitionStart(record?: Recordable) {
+      }
+
+      function handleSelect(selectedKeys: string[]) {
+        getForm().setFieldsValue({
+          categoryId: selectedKeys[0]
+        });
+        getForm().submit();
+      }
+
+      function handleRefreshTable() {
+        reload();
+      }
+
+      return {
+        state,
+        registerTable,
+        handleRefreshTable,
+        handleProcessDefinitionStart,
+        handleSelect,
+      };
+    }
+  });
+</script>

src/views/workflow/process/process.data.ts

@@ -0,0 +1,68 @@
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+import { listProcessCategory } from '/@/api/platform/workflow/extension/controller/processCategory';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '流程名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '流程KEY',
+    dataIndex: 'key',
+    width: 200,
+  },
+  {
+    title: '流程分类',
+    dataIndex: 'category',
+    width: 150,
+    customRender: ({ record }) => {
+      const category = record.category;
+      return h(Tag, { color: 'processing' }, () => String(record.category).split(',')[1] || '未分类');
+    }
+  },
+  {
+    title: '流程版本',
+    dataIndex: 'version',
+    width: 150,
+    customRender: ({ record }) => {
+      const version = record.version;
+      return h(Tag, { color: version ? 'success' : 'warning' }, () => version || '版本未发布');
+    }
+  },
+  {
+    title: '上次发布时间',
+    dataIndex: 'deploymentTime',
+    width: 200
+  }
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'categoryId',
+    label: '流程分类',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      placeholder: '请选择流程分类',
+      fieldNames:{
+        label: 'name',
+        key: 'id',
+        value: 'id'
+      },
+      api: listProcessCategory,
+      listToTree: true
+    },
+    colProps: { span: 8 }
+  },
+  {
+    field: 'name',
+    label: '流程名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入流程名称'
+    },
+    colProps: { span: 8 }
+  }
+];