wui-components-v2 1.1.69 → 1.1.71

package/utils/control-tree.ts

@@ -1,353 +1,353 @@
-// tree组件的请求控制逻辑
-import { onMounted, ref } from 'vue'
-import { treeConfigApi, treeDataApi, treeNodeDataApi } from '../api/tree'
-import { pageConfig } from '../api/page'
-import type { Config } from '../type'
-
-export interface TreeConfig {
-  leafRatmplId?: string // 叶子节点ID
-  leafTitle?: string // 叶子节点标题
-  branchRatmplId?: string // 分支节点ID
-  branchTitle?: string // 分支节点标题
-  rootGtmplId: string // 根节ID
-  id: string // 树ID
-  title: string // 树标题
-  rootLTmplConfig: Config
-  branchLTmplConfig?: Config
-  leafLTmplConfig?: Config
-}
-
-export interface TreeNode {
-  id: string
-  parentId: string
-  label: string
-  expanded: boolean
-  type: nodeType
-  loading: boolean
-  children?: TreeNode[]
-  [key: string]: any // 允许其他自定义属性
-}
-
-export type nodeType = 'branch' | 'leaf' | 'root'
-export function useTreeControlInit(sourceId: string, Zpaging?: any) {
-  const treeConfig = ref<TreeConfig>({
-    id: '',
-    title: '',
-    rootGtmplId: '',
-    rootLTmplConfig: {
-      id: '',
-      columns: [],
-      primaryColumn: {
-        controlType: '',
-        extControlType: '',
-        sourceId: '',
-        mstrucId: '',
-      },
-      primaryCriteria: {
-        hidden: false,
-        controlType: '',
-        extControlType: '',
-        sourceId: '',
-        mstrucId: '',
-        disabled: false,
-        defaultValue: '',
-        transDefaultValue: '',
-        required: false,
-      },
-      secondColumn: {
-        controlType: '',
-        extControlType: '',
-        sourceId: '',
-        mstrucId: '',
-      },
-      criterias: [],
-      buttons: [],
-      fields: [],
-      title: '',
-      type: '',
-      pointSourceId: '',
-      mstrucId: '',
-      relationNames: [],
-      readOnly: false,
-      displayConfig: [],
-    },
-  })
-
-  const treeData = ref<TreeNode[]>([])
-
-  // 获取树根节点配置
-  const getRootLTmplConfig = async (rootGtmplId: string) => {
-    try {
-      const res = await pageConfig(rootGtmplId)
-      treeConfig.value.rootLTmplConfig = res.ltmplConfig
-    }
-    catch (err) {
-      console.log(err)
-    }
-  }
-
-  // 获取树分支节点配置
-  const getBranchLTmplConfig = async (branchRatmplId: string) => {
-    try {
-      const res = await pageConfig(branchRatmplId)
-      treeConfig.value.branchLTmplConfig = res.ltmplConfig
-    }
-    catch (err) {
-      console.log(err)
-    }
-  }
-
-  // 获取树叶子节点配置
-  const getLeafLTmplConfig = async (leafRatmplId: string) => {
-    try {
-      const res = await pageConfig(leafRatmplId)
-      treeConfig.value.leafLTmplConfig = res.ltmplConfig
-    }
-    catch (err) {
-      console.log(err)
-    }
-  }
-  // 获取树结构数据
-  const getTreeConfig = async () => {
-    try {
-      const res = await treeConfigApi(sourceId)
-      treeConfig.value.leafRatmplId = res.ttmplConfig.leafRatmplId
-      treeConfig.value.leafTitle = res.ttmplConfig.leafTitle
-      treeConfig.value.branchRatmplId = res.ttmplConfig.branchRatmplId
-      treeConfig.value.branchTitle = res.ttmplConfig.branchTitle
-      treeConfig.value.rootGtmplId = res.ttmplConfig.rootGtmplId
-      treeConfig.value.id = res.ttmplConfig.id
-      treeConfig.value.title = res.ttmplConfig.title
-      if (res.ttmplConfig.rootGtmplId) {
-        getRootLTmplConfig(res.ttmplConfig.rootGtmplId)
-      }
-      if (res.ttmplConfig.leafRatmplId) {
-        getLeafLTmplConfig(res.ttmplConfig.leafRatmplId)
-      }
-      if (res.ttmplConfig.branchRatmplId) {
-        getBranchLTmplConfig(res.ttmplConfig.branchRatmplId)
-      }
-    }
-    catch (err) {
-      console.log(err)
-    }
-  }
-
-  onMounted(() => {
-    getTreeConfig()
-  })
-
-  // 根据id找到树节点插入数据，appendData为要追加的数据
-
-  async function findTreeNodeandAppend(id: string, arr: TreeNode[], appendData: any, type: nodeType) {
-    for (let index = 0; index < arr.length; index++) {
-      const element = arr[index]
-      if (element.id === id) {
-        if (type === 'branch' && treeConfig.value.branchLTmplConfig) {
-          // children有值追加分支节点，没值就赋值
-          if (element.children) {
-            const arr = appendData.map((item: any) => {
-              return {
-                id: item.code,
-                parentId: element.id,
-                label: item.fieldMap[type === 'branch' && treeConfig.value.branchLTmplConfig ? treeConfig.value.branchLTmplConfig.primaryColumn.sourceId : ''],
-                expanded: false,
-                type: 'branch',
-                loading: false,
-                children: [],
-              }
-            })
-
-            const arr2 = findDifferentElements(element.children, arr, 'id')
-
-            element.children = [...element.children, ...arr2]
-          }
-          else {
-            element.children = appendData.map((item: any) => {
-              return {
-                id: item.code,
-                parentId: element.id,
-                label: item.fieldMap[type === 'branch' && treeConfig.value.branchLTmplConfig ? treeConfig.value.branchLTmplConfig.primaryColumn.sourceId : ''],
-                expanded: false,
-                type: 'branch',
-                loading: false,
-                children: [],
-              }
-            })
-          }
-        }
-        if (type === 'leaf' && treeConfig.value.leafLTmplConfig) {
-          // children有值追加页子节点，没值就赋值
-          if (element.children) {
-            const arr = appendData.map((item: any) => {
-              return {
-                id: item.code,
-                parentId: element.id,
-                label: item.fieldMap[type === 'leaf' && treeConfig.value.leafLTmplConfig ? treeConfig.value.leafLTmplConfig.primaryColumn.sourceId : ''],
-                expanded: false,
-                type: 'leaf',
-                loading: false,
-                children: [],
-              }
-            })
-
-            const arr2 = findDifferentElements(element.children, arr, 'id')
-            element.children = [...element.children, ...arr2]
-          }
-          else {
-            element.children = appendData.map((item: any) => {
-              return {
-                id: item.code,
-                parentId: element.id,
-                label: item.fieldMap[type === 'leaf' && treeConfig.value.leafLTmplConfig ? treeConfig.value.leafLTmplConfig.primaryColumn.sourceId : ''],
-                expanded: false,
-                type: 'leaf',
-                loading: false,
-                children: [],
-              }
-            })
-          }
-        }
-      }
-      else {
-        if (element.children)
-          findTreeNodeandAppend(id, element.children, appendData, type)
-      }
-    }
-  }
-
-  // 获取树顶层数据
-  async function getTreeRootData(id: string) {
-    try {
-      const res = await treeDataApi(id)
-      treeData.value = res.entities.map((item: any) => {
-        return {
-          id: item.code,
-          parentId: '',
-          label: item.fieldMap[treeConfig.value.rootLTmplConfig.primaryColumn.sourceId],
-          expanded: false,
-          type: 'root',
-          loading: false,
-          children: [],
-        }
-      })
-      if (Zpaging) {
-        Zpaging.value.complete(treeData.value)
-      }
-    }
-    catch (error) {
-      console.log('error:', error)
-      // TODO handle the exception
-    }
-    finally {
-      close()
-    }
-  }
-
-  // 获取树分支节点数据
-  async function getTreeNodeData(node: TreeNode) {
-    // 如果是叶子节点则不请求
-    if (node.type === 'leaf')
-      return
-    try {
-      if (treeConfig.value.branchRatmplId) {
-        const res = await treeNodeDataApi(treeConfig.value.branchRatmplId, node.id)
-        if (res.entities.length > 0) {
-          // 追加分支节点
-          findTreeNodeandAppend(node.id, treeData.value, res.entities, 'branch')
-        }
-      }
-
-      if (treeConfig.value.leafRatmplId) {
-        const res = await treeNodeDataApi(treeConfig.value.leafRatmplId, node.id)
-        if (res.entities.length > 0) {
-          // 追加叶子节点
-          findTreeNodeandAppend(node.id, treeData.value, res.entities, 'leaf')
-        }
-      }
-    }
-    catch (error) {
-      console.log('error:', error)
-    }
-  }
-
-  // 根据id查找树节点，展开该节点和请求该节点的子节点
-  async function findTreeNodeandExpand(node: TreeNode, nodes: TreeNode[], triggerType = 'click') {
-    for (let index = 0; index < nodes.length; index++) {
-      const element = nodes[index]
-      if (element.id === node.id) {
-        if (triggerType === 'click') {
-          element.expanded = !element.expanded
-        }
-        if (element.expanded) {
-          element.loading = true
-          await getTreeNodeData(node)
-          element.loading = false
-        }
-        break
-      }
-      else {
-        if (element.children) {
-          findTreeNodeandExpand(node, element.children, triggerType)
-        }
-      }
-    }
-  }
-
-  return {
-    treeConfig,
-    treeData,
-    findTreeNodeandExpand,
-    getTreeNodeData,
-    getTreeRootData,
-  }
-}
-
-/**
- * 判断两个数组中是否存在具有相同 id 的元素
- * @param arr1 第一个数组
- * @param arr2 第二个数组
- * @param key 用于比较的属性名，默认为 'id'
- * @returns 存在相同 id 返回 true，否则返回 false
- */
-export function hasSameIdElement<T extends Record<string, any>>(
-  arr1: T[],
-  arr2: T[],
-  key: keyof T = 'id',
-): boolean {
-  const idSet = new Set(arr2.map(item => item[key]))
-
-  for (const item of arr1) {
-    if (idSet.has(item.id)) {
-      return true
-    }
-  }
-
-  return false
-}
-
-/**
- * 找出两个数组中第二个数组不同id的元素合集
- * @param arr1 第一个数组
- * @param arr2 第二个数组
- * @param idKey id属性的键名，默认为'id'
- * @returns 第二个数组中存在但第一个数组中不存在的元素
- */
-function findDifferentElements<T extends Record<string, any>>(
-  arr1: T[],
-  arr2: T[],
-  idKey: string = 'id',
-): T[] {
-  // 获取第一个数组中存在但第二个数组中不存在的元素
-  // const inArr1NotInArr2 = arr1.filter(item1 =>
-  //     !arr2.some(item2 => item2[idKey] === item1[idKey])
-  // );
-
-  // 获取第二个数组中存在但第一个数组中不存在的元素
-  const inArr2NotInArr1 = arr2.filter(item2 =>
-    !arr1.some(item1 => item1[idKey] === item2[idKey]),
-  )
-
-  // 合并两个结果数组
-  return [...inArr2NotInArr1]
-}
+// tree组件的请求控制逻辑
+import { onMounted, ref } from 'vue'
+import { treeConfigApi, treeDataApi, treeNodeDataApi } from '../api/tree'
+import { pageConfig } from '../api/page'
+import type { Config } from '../type'
+
+export interface TreeConfig {
+  leafRatmplId?: string // 叶子节点ID
+  leafTitle?: string // 叶子节点标题
+  branchRatmplId?: string // 分支节点ID
+  branchTitle?: string // 分支节点标题
+  rootGtmplId: string // 根节ID
+  id: string // 树ID
+  title: string // 树标题
+  rootLTmplConfig: Config
+  branchLTmplConfig?: Config
+  leafLTmplConfig?: Config
+}
+
+export interface TreeNode {
+  id: string
+  parentId: string
+  label: string
+  expanded: boolean
+  type: nodeType
+  loading: boolean
+  children?: TreeNode[]
+  [key: string]: any // 允许其他自定义属性
+}
+
+export type nodeType = 'branch' | 'leaf' | 'root'
+export function useTreeControlInit(sourceId: string, Zpaging?: any) {
+  const treeConfig = ref<TreeConfig>({
+    id: '',
+    title: '',
+    rootGtmplId: '',
+    rootLTmplConfig: {
+      id: '',
+      columns: [],
+      primaryColumn: {
+        controlType: '',
+        extControlType: '',
+        sourceId: '',
+        mstrucId: '',
+      },
+      primaryCriterion: {
+        hidden: false,
+        controlType: '',
+        extControlType: '',
+        sourceId: '',
+        mstrucId: '',
+        disabled: false,
+        defaultValue: '',
+        transDefaultValue: '',
+        required: false,
+      },
+      secondColumn: {
+        controlType: '',
+        extControlType: '',
+        sourceId: '',
+        mstrucId: '',
+      },
+      criteria: [],
+      buttons: [],
+      fields: [],
+      title: '',
+      type: '',
+      pointSourceId: '',
+      mstrucId: '',
+      relationNames: [],
+      readOnly: false,
+      displayConfig: [],
+    },
+  })
+
+  const treeData = ref<TreeNode[]>([])
+
+  // 获取树根节点配置
+  const getRootLTmplConfig = async (rootGtmplId: string) => {
+    try {
+      const res = await pageConfig(rootGtmplId)
+      treeConfig.value.rootLTmplConfig = res.ltmplConfig
+    }
+    catch (err) {
+      console.log(err)
+    }
+  }
+
+  // 获取树分支节点配置
+  const getBranchLTmplConfig = async (branchRatmplId: string) => {
+    try {
+      const res = await pageConfig(branchRatmplId)
+      treeConfig.value.branchLTmplConfig = res.ltmplConfig
+    }
+    catch (err) {
+      console.log(err)
+    }
+  }
+
+  // 获取树叶子节点配置
+  const getLeafLTmplConfig = async (leafRatmplId: string) => {
+    try {
+      const res = await pageConfig(leafRatmplId)
+      treeConfig.value.leafLTmplConfig = res.ltmplConfig
+    }
+    catch (err) {
+      console.log(err)
+    }
+  }
+  // 获取树结构数据
+  const getTreeConfig = async () => {
+    try {
+      const res = await treeConfigApi(sourceId)
+      treeConfig.value.leafRatmplId = res.ttmplConfig.leafRatmplId
+      treeConfig.value.leafTitle = res.ttmplConfig.leafTitle
+      treeConfig.value.branchRatmplId = res.ttmplConfig.branchRatmplId
+      treeConfig.value.branchTitle = res.ttmplConfig.branchTitle
+      treeConfig.value.rootGtmplId = res.ttmplConfig.rootGtmplId
+      treeConfig.value.id = res.ttmplConfig.id
+      treeConfig.value.title = res.ttmplConfig.title
+      if (res.ttmplConfig.rootGtmplId) {
+        getRootLTmplConfig(res.ttmplConfig.rootGtmplId)
+      }
+      if (res.ttmplConfig.leafRatmplId) {
+        getLeafLTmplConfig(res.ttmplConfig.leafRatmplId)
+      }
+      if (res.ttmplConfig.branchRatmplId) {
+        getBranchLTmplConfig(res.ttmplConfig.branchRatmplId)
+      }
+    }
+    catch (err) {
+      console.log(err)
+    }
+  }
+
+  onMounted(() => {
+    getTreeConfig()
+  })
+
+  // 根据id找到树节点插入数据，appendData为要追加的数据
+
+  async function findTreeNodeandAppend(id: string, arr: TreeNode[], appendData: any, type: nodeType) {
+    for (let index = 0; index < arr.length; index++) {
+      const element = arr[index]
+      if (element.id === id) {
+        if (type === 'branch' && treeConfig.value.branchLTmplConfig) {
+          // children有值追加分支节点，没值就赋值
+          if (element.children) {
+            const arr = appendData.map((item: any) => {
+              return {
+                id: item.code,
+                parentId: element.id,
+                label: item.fieldMap[type === 'branch' && treeConfig.value.branchLTmplConfig ? treeConfig.value.branchLTmplConfig.primaryColumn.sourceId : ''],
+                expanded: false,
+                type: 'branch',
+                loading: false,
+                children: [],
+              }
+            })
+
+            const arr2 = findDifferentElements(element.children, arr, 'id')
+
+            element.children = [...element.children, ...arr2]
+          }
+          else {
+            element.children = appendData.map((item: any) => {
+              return {
+                id: item.code,
+                parentId: element.id,
+                label: item.fieldMap[type === 'branch' && treeConfig.value.branchLTmplConfig ? treeConfig.value.branchLTmplConfig.primaryColumn.sourceId : ''],
+                expanded: false,
+                type: 'branch',
+                loading: false,
+                children: [],
+              }
+            })
+          }
+        }
+        if (type === 'leaf' && treeConfig.value.leafLTmplConfig) {
+          // children有值追加页子节点，没值就赋值
+          if (element.children) {
+            const arr = appendData.map((item: any) => {
+              return {
+                id: item.code,
+                parentId: element.id,
+                label: item.fieldMap[type === 'leaf' && treeConfig.value.leafLTmplConfig ? treeConfig.value.leafLTmplConfig.primaryColumn.sourceId : ''],
+                expanded: false,
+                type: 'leaf',
+                loading: false,
+                children: [],
+              }
+            })
+
+            const arr2 = findDifferentElements(element.children, arr, 'id')
+            element.children = [...element.children, ...arr2]
+          }
+          else {
+            element.children = appendData.map((item: any) => {
+              return {
+                id: item.code,
+                parentId: element.id,
+                label: item.fieldMap[type === 'leaf' && treeConfig.value.leafLTmplConfig ? treeConfig.value.leafLTmplConfig.primaryColumn.sourceId : ''],
+                expanded: false,
+                type: 'leaf',
+                loading: false,
+                children: [],
+              }
+            })
+          }
+        }
+      }
+      else {
+        if (element.children)
+          findTreeNodeandAppend(id, element.children, appendData, type)
+      }
+    }
+  }
+
+  // 获取树顶层数据
+  async function getTreeRootData(id: string) {
+    try {
+      const res = await treeDataApi(id)
+      treeData.value = res.entities.map((item: any) => {
+        return {
+          id: item.code,
+          parentId: '',
+          label: item.fieldMap[treeConfig.value.rootLTmplConfig.primaryColumn.sourceId],
+          expanded: false,
+          type: 'root',
+          loading: false,
+          children: [],
+        }
+      })
+      if (Zpaging) {
+        Zpaging.value.complete(treeData.value)
+      }
+    }
+    catch (error) {
+      console.log('error:', error)
+      // TODO handle the exception
+    }
+    finally {
+      close()
+    }
+  }
+
+  // 获取树分支节点数据
+  async function getTreeNodeData(node: TreeNode) {
+    // 如果是叶子节点则不请求
+    if (node.type === 'leaf')
+      return
+    try {
+      if (treeConfig.value.branchRatmplId) {
+        const res = await treeNodeDataApi(treeConfig.value.branchRatmplId, node.id)
+        if (res.entities.length > 0) {
+          // 追加分支节点
+          findTreeNodeandAppend(node.id, treeData.value, res.entities, 'branch')
+        }
+      }
+
+      if (treeConfig.value.leafRatmplId) {
+        const res = await treeNodeDataApi(treeConfig.value.leafRatmplId, node.id)
+        if (res.entities.length > 0) {
+          // 追加叶子节点
+          findTreeNodeandAppend(node.id, treeData.value, res.entities, 'leaf')
+        }
+      }
+    }
+    catch (error) {
+      console.log('error:', error)
+    }
+  }
+
+  // 根据id查找树节点，展开该节点和请求该节点的子节点
+  async function findTreeNodeandExpand(node: TreeNode, nodes: TreeNode[], triggerType = 'click') {
+    for (let index = 0; index < nodes.length; index++) {
+      const element = nodes[index]
+      if (element.id === node.id) {
+        if (triggerType === 'click') {
+          element.expanded = !element.expanded
+        }
+        if (element.expanded) {
+          element.loading = true
+          await getTreeNodeData(node)
+          element.loading = false
+        }
+        break
+      }
+      else {
+        if (element.children) {
+          findTreeNodeandExpand(node, element.children, triggerType)
+        }
+      }
+    }
+  }
+
+  return {
+    treeConfig,
+    treeData,
+    findTreeNodeandExpand,
+    getTreeNodeData,
+    getTreeRootData,
+  }
+}
+
+/**
+ * 判断两个数组中是否存在具有相同 id 的元素
+ * @param arr1 第一个数组
+ * @param arr2 第二个数组
+ * @param key 用于比较的属性名，默认为 'id'
+ * @returns 存在相同 id 返回 true，否则返回 false
+ */
+export function hasSameIdElement<T extends Record<string, any>>(
+  arr1: T[],
+  arr2: T[],
+  key: keyof T = 'id',
+): boolean {
+  const idSet = new Set(arr2.map(item => item[key]))
+
+  for (const item of arr1) {
+    if (idSet.has(item.id)) {
+      return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * 找出两个数组中第二个数组不同id的元素合集
+ * @param arr1 第一个数组
+ * @param arr2 第二个数组
+ * @param idKey id属性的键名，默认为'id'
+ * @returns 第二个数组中存在但第一个数组中不存在的元素
+ */
+function findDifferentElements<T extends Record<string, any>>(
+  arr1: T[],
+  arr2: T[],
+  idKey: string = 'id',
+): T[] {
+  // 获取第一个数组中存在但第二个数组中不存在的元素
+  // const inArr1NotInArr2 = arr1.filter(item1 =>
+  //     !arr2.some(item2 => item2[idKey] === item1[idKey])
+  // );
+
+  // 获取第二个数组中存在但第一个数组中不存在的元素
+  const inArr2NotInArr1 = arr2.filter(item2 =>
+    !arr1.some(item1 => item1[idKey] === item2[idKey]),
+  )
+
+  // 合并两个结果数组
+  return [...inArr2NotInArr1]
+}