wui-components-v2 1.1.70 → 1.1.72

package/components/wui-tree-page/wui-tree-page.vue

@@ -1,297 +1,297 @@
-<script lang="ts" setup>
-import { computed, defineOptions, onMounted, onUnmounted, ref } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
-import { useDialog } from '@wot-ui/ui'
-import { useGlobalLoading } from '../../composables/useGlobalLoading'
-import { useGlobalToast } from '../../composables/useGlobalToast'
-import ListTopButtons from '../list-top-buttons/list-top-buttons.vue'
-import { useTreeControlInit } from '../../utils/control-tree'
-import type { TreeNode, nodeType } from '../../utils/control-tree'
-import { generateHighResolutionID } from '../../utils/index'
-import { treeNodeDeleteApi } from '../../api/tree'
-import treeItem from './components/tree-item.vue'
-
-defineOptions({
-  name: 'WuiTreePage',
-})
-// --- 数据定义 ---
-const searchText = ref('')
-const sourceId = ref('')
-const pageTitle = ref('')
-const mainCode = ref('')
-const addEvent = generateHighResolutionID()// 全局事件名称
-const Zpaging = ref<any>(null)
-const dialog = useDialog()
-const parentId = ref('')
-const parentNodeType = ref<nodeType>('root')
-const targetNodeType = ref<nodeType>('root')
-const { loading } = useGlobalLoading()
-const { success, error } = useGlobalToast()
-
-onLoad((option: any) => {
-  console.log(option)
-  sourceId.value = option.sourceId
-  pageTitle.value = option.title
-  mainCode.value = option.mainCode || ''
-  uni.setNavigationBarTitle({
-    title: option.title,
-  })
-})
-
-const { treeConfig, treeData, findTreeNodeandExpand, getTreeRootData } = useTreeControlInit(sourceId.value, Zpaging)
-
-onMounted(async () => {
-  // 监听添加成功的事件
-  uni.$on(addEvent, async (e) => {
-    console.log(e)
-    //  findTreeNodeandAppend(parentId.value, treeData.value, [{
-    //    id: e.entityCode,
-    //    parentId: parentId.value,
-    //    label: e.data[targetNodeType.value === 'branch' && treeConfig.value.branchLTmplConfig ? treeConfig.value.branchLTmplConfig.primaryColumn.sourceId : targetNodeType.value === 'leaf' && treeConfig.value.leafLTmplConfig? treeConfig.value.leafLTmplConfig.primaryColumn.sourceId : treeConfig.value.rootLTmplConfig.primaryColumn.sourceId],
-    //    expanded: false,
-    //    type: targetNodeType.value,
-    //    loading: false,
-    //    children: null,
-    //  }], parentNodeType.value)
-    findTreeNodeandExpand({
-      id: parentId.value,
-      type: parentNodeType.value,
-      parentId: '',
-      label: '',
-      expanded: false,
-      loading: false,
-    }, treeData.value, 'add')
-  //  Zpaging.value.reload()
-  })
-})
-// 在组件卸载时解绑全局事件
-onUnmounted(() => {
-  console.log(`${pageTitle.value}页面卸载`)
-  uni.$off(addEvent)
-})
-
-function toggleExpand(node: TreeNode) {
-  // 展开节点
-  findTreeNodeandExpand(node, treeData.value)
-}
-
-// 添加分支节点
-function handleAddBranch(parentNode: TreeNode) {
-  console.log('添加子节点:', parentNode)
-  parentId.value = parentNode.id
-  parentNodeType.value = parentNode.type
-  targetNodeType.value = 'branch'
-  uni.navigateTo({
-    url: `/pages/edit-page/index?sourceId=${treeConfig.value.branchRatmplId}&title=${pageTitle.value}&mainCode=${parentNode.id}&addEvent=${addEvent}`,
-  })
-}
-// 添加叶子节点
-function handleAddLeaf(parentNode: TreeNode) {
-  console.log('添加叶子节点:', parentNode)
-  parentId.value = parentNode.id
-  parentNodeType.value = parentNode.type
-  targetNodeType.value = 'leaf'
-  uni.navigateTo({
-    url: `/pages/edit-page/index?sourceId=${treeConfig.value.leafRatmplId}&title=${pageTitle.value}&mainCode=${parentNode.id}&addEvent=${addEvent}`,
-  })
-}
-
-// 处理更新节点
-function handleUpdate(targetNode: TreeNode) {
-  let sourceId = null
-  if (targetNode.type === 'leaf') {
-    sourceId = treeConfig.value.leafRatmplId
-  }
-  else if (targetNode.type === 'branch') {
-    sourceId = treeConfig.value.branchRatmplId
-  }
-  else {
-    sourceId = treeConfig.value.rootGtmplId
-  }
-
-  uni.navigateTo({
-    url: `/pages/edit-page/index?sourceId=${sourceId}&title=${pageTitle.value}&id=${targetNode.id}&mainCode=${targetNode.parentId}&addEvent=${addEvent}`,
-  })
-}
-
-// 过滤后的树形数据
-const filteredTreeData = computed<TreeNode[]>(() => {
-  if (!searchText.value) {
-    return treeData.value
-  }
-
-  const keyword = searchText.value.toLowerCase()
-
-  // 过滤节点的递归函数
-  const filterNodes = (nodes: TreeNode[]): TreeNode[] => {
-    return nodes
-      .map((node) => {
-        // 复制节点，避免修改原数据
-        const newNode = { ...node }
-
-        // 如果有子节点，递归过滤
-        // if (newNode.children && newNode.children.length > 0) {
-        //  newNode.children = filterNodes(newNode.children)
-        // }
-
-        // 节点名称包含关键词，或者有符合条件的子节点，则保留该节点
-        const nodeNameMatch = newNode.label.toLowerCase().includes(keyword)
-        // const hasMatchingChildren = newNode.children && newNode.children.length > 0
-
-        // return nodeNameMatch || hasMatchingChildren ? newNode : null
-        return nodeNameMatch ? newNode : null
-      })
-      .filter(Boolean) as TreeNode[]
-  }
-  console.log('filterNodes:', filterNodes(treeData.value))
-
-  return filterNodes(treeData.value)
-})
-// 删除节点
-function handleRemove(targetNode: TreeNode) {
-  let sourceId = treeConfig.value.rootGtmplId
-  if (targetNode.type === 'leaf') {
-    sourceId = treeConfig.value.leafRatmplId || ''
-  }
-
-  if (targetNode.type === 'branch') {
-    sourceId = treeConfig.value.branchRatmplId || ''
-  }
-
-  dialog
-    .confirm({
-      msg: `确定要删除 "${targetNode.label}" 及其子节点吗？`,
-      title: '提示',
-      beforeConfirm: async () => {
-        loading('删除中...')
-        try {
-          // const res = await editPageConfig(sourceId || '', targetNode.id)
-          // const res1 = await editPageDataSave(sourceId || '', targetNode.id, {}, '', res.dtmplConfig.actions[0].id)
-          const res1 = await treeNodeDeleteApi(sourceId, targetNode.id)
-          if (res1.status === 'success') {
-            success('删除成功')
-            removeNodeRecursively(filteredTreeData.value, targetNode.id)
-            return true
-          }
-          else {
-            error('删除失败')
-            return false
-          }
-        }
-        catch (error1) {
-          error('删除失败')
-          console.log(error1)
-          return false
-        }
-      },
-    })
-    .then(() => { })
-    .catch((error) => {
-      console.log(error)
-    })
-}
-
-// 递归删除逻辑
-function removeNodeRecursively(list: TreeNode[], idToRemove: string): boolean {
-  for (let i = 0; i < list.length; i++) {
-    if (list[i].id === idToRemove) {
-      list.splice(i, 1)
-      return true
-    }
-
-    const children = list[i].children
-    if (Array.isArray(children) && children.length > 0) {
-      const deleted = removeNodeRecursively(children, idToRemove)
-      if (deleted)
-        return true
-    }
-  }
-  return false
-}
-
-// --- 搜索逻辑 ---
-/*
-  搜索策略：
-  1. 遍历树。
-  2. 如果节点名称包含关键字，标记高亮（通过prop传给子组件）。
-  3. 如果节点包含关键字，或者其子孙节点包含关键字，则该节点必须展开 (expanded = true)。
-*/
-function handleSearch() {
-  const keyword = searchText.value.trim().toLowerCase()
-
-  if (!keyword)
-    return
-
-  // 定义递归搜索函数
-  const traverseAndExpand = (nodes: TreeNode[]) => {
-    let hasMatchInLevel = false
-
-    nodes.forEach((node) => {
-      // 检查当前节点是否匹配
-      const isSelfMatch = node.label.toLowerCase().includes(keyword)
-
-      // 递归检查子节点
-      let hasChildMatch = false
-      if (node.children && node.children.length > 0) {
-        hasChildMatch = traverseAndExpand(node.children)
-      }
-
-      // 核心逻辑：如果自己匹配，或子节点有匹配，则当前路径应激活/展开
-      if (isSelfMatch || hasChildMatch) {
-        // node.expanded = true;
-        hasMatchInLevel = true
-      }
-      else {
-        // 如果不是搜索状态，可以选择收起，这里为了体验保留原状或强制收起均可
-        // node.expanded = false; // 取消注释则未匹配路径会自动收起
-      }
-    })
-
-    return hasMatchInLevel
-  }
-
-  traverseAndExpand(treeData.value)
-}
-</script>
-
-<template>
-  <z-paging
-    v-if="treeConfig.id" ref="Zpaging" v-model="filteredTreeData" :auto-show-system-loading="true"
-    :loading-more-enabled="false" :show-loading-more-when-reload="false"
-    :to-bottom-loading-more-enabled="false" @query="() => { getTreeRootData(treeConfig.id) }"
-  >
-    <template #top>
-      <wd-search v-model="searchText" hide-cancel @change="handleSearch" />
-      <view>
-        <ListTopButtons
-          :add-event="addEvent" :main-code="mainCode" :buttons="treeConfig.rootLTmplConfig.buttons"
-          :source-id="treeConfig.rootGtmplId" :page-title="pageTitle" page-type="列表"
-        />
-      </view>
-    </template>
-    <view class="container">
-      <!-- 树形内容 -->
-      <view class="tree-container">
-        <tree-item
-          v-for="item in filteredTreeData" :key="item.id" :node="item" :search-keyword="searchText"
-          :leaf-ratmpl-id="treeConfig.leafRatmplId" @add-leaf="handleAddLeaf" @add-branch="handleAddBranch"
-          @remove="handleRemove" @update="handleUpdate" @toggle-expand="toggleExpand"
-        />
-      </view>
-    </view>
-    <wd-dialog />
-  </z-paging>
-</template>
-
-<style>
-.container {
-  display: flex;
-  flex-direction: column;
-  /* height: 100vh; */
-}
-
-.tree-container {
-  flex: 1;
-  overflow: hidden;
-}
-</style>
+<script lang="ts" setup>
+import { computed, defineOptions, onMounted, onUnmounted, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useDialog } from '@wot-ui/ui'
+import { useGlobalLoading } from '../../composables/useGlobalLoading'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+import ListTopButtons from '../list-top-buttons/list-top-buttons.vue'
+import { useTreeControlInit } from '../../utils/control-tree'
+import type { TreeNode, nodeType } from '../../utils/control-tree'
+import { generateHighResolutionID } from '../../utils/index'
+import { treeNodeDeleteApi } from '../../api/tree'
+import treeItem from './components/tree-item.vue'
+
+defineOptions({
+  name: 'WuiTreePage',
+})
+// --- 数据定义 ---
+const searchText = ref('')
+const sourceId = ref('')
+const pageTitle = ref('')
+const mainCode = ref('')
+const addEvent = generateHighResolutionID()// 全局事件名称
+const Zpaging = ref<any>(null)
+const dialog = useDialog()
+const parentId = ref('')
+const parentNodeType = ref<nodeType>('root')
+const targetNodeType = ref<nodeType>('root')
+const { loading } = useGlobalLoading()
+const { success, error } = useGlobalToast()
+
+onLoad((option: any) => {
+  console.log(option)
+  sourceId.value = option.sourceId
+  pageTitle.value = option.title
+  mainCode.value = option.mainCode || ''
+  uni.setNavigationBarTitle({
+    title: option.title,
+  })
+})
+
+const { treeConfig, treeData, findTreeNodeandExpand, getTreeRootData } = useTreeControlInit(sourceId.value, Zpaging)
+
+onMounted(async () => {
+  // 监听添加成功的事件
+  uni.$on(addEvent, async (e) => {
+    console.log(e)
+    //  findTreeNodeandAppend(parentId.value, treeData.value, [{
+    //    id: e.entityCode,
+    //    parentId: parentId.value,
+    //    label: e.data[targetNodeType.value === 'branch' && treeConfig.value.branchLTmplConfig ? treeConfig.value.branchLTmplConfig.primaryColumn.sourceId : targetNodeType.value === 'leaf' && treeConfig.value.leafLTmplConfig? treeConfig.value.leafLTmplConfig.primaryColumn.sourceId : treeConfig.value.rootLTmplConfig.primaryColumn.sourceId],
+    //    expanded: false,
+    //    type: targetNodeType.value,
+    //    loading: false,
+    //    children: null,
+    //  }], parentNodeType.value)
+    findTreeNodeandExpand({
+      id: parentId.value,
+      type: parentNodeType.value,
+      parentId: '',
+      label: '',
+      expanded: false,
+      loading: false,
+    }, treeData.value, 'add')
+  //  Zpaging.value.reload()
+  })
+})
+// 在组件卸载时解绑全局事件
+onUnmounted(() => {
+  console.log(`${pageTitle.value}页面卸载`)
+  uni.$off(addEvent)
+})
+
+function toggleExpand(node: TreeNode) {
+  // 展开节点
+  findTreeNodeandExpand(node, treeData.value)
+}
+
+// 添加分支节点
+function handleAddBranch(parentNode: TreeNode) {
+  console.log('添加子节点:', parentNode)
+  parentId.value = parentNode.id
+  parentNodeType.value = parentNode.type
+  targetNodeType.value = 'branch'
+  uni.navigateTo({
+    url: `/pages/edit-page/index?sourceId=${treeConfig.value.branchRatmplId}&title=${pageTitle.value}&mainCode=${parentNode.id}&addEvent=${addEvent}`,
+  })
+}
+// 添加叶子节点
+function handleAddLeaf(parentNode: TreeNode) {
+  console.log('添加叶子节点:', parentNode)
+  parentId.value = parentNode.id
+  parentNodeType.value = parentNode.type
+  targetNodeType.value = 'leaf'
+  uni.navigateTo({
+    url: `/pages/edit-page/index?sourceId=${treeConfig.value.leafRatmplId}&title=${pageTitle.value}&mainCode=${parentNode.id}&addEvent=${addEvent}`,
+  })
+}
+
+// 处理更新节点
+function handleUpdate(targetNode: TreeNode) {
+  let sourceId = null
+  if (targetNode.type === 'leaf') {
+    sourceId = treeConfig.value.leafRatmplId
+  }
+  else if (targetNode.type === 'branch') {
+    sourceId = treeConfig.value.branchRatmplId
+  }
+  else {
+    sourceId = treeConfig.value.rootGtmplId
+  }
+
+  uni.navigateTo({
+    url: `/pages/edit-page/index?sourceId=${sourceId}&title=${pageTitle.value}&id=${targetNode.id}&mainCode=${targetNode.parentId}&addEvent=${addEvent}`,
+  })
+}
+
+// 过滤后的树形数据
+const filteredTreeData = computed<TreeNode[]>(() => {
+  if (!searchText.value) {
+    return treeData.value
+  }
+
+  const keyword = searchText.value.toLowerCase()
+
+  // 过滤节点的递归函数
+  const filterNodes = (nodes: TreeNode[]): TreeNode[] => {
+    return nodes
+      .map((node) => {
+        // 复制节点，避免修改原数据
+        const newNode = { ...node }
+
+        // 如果有子节点，递归过滤
+        // if (newNode.children && newNode.children.length > 0) {
+        //  newNode.children = filterNodes(newNode.children)
+        // }
+
+        // 节点名称包含关键词，或者有符合条件的子节点，则保留该节点
+        const nodeNameMatch = newNode.label.toLowerCase().includes(keyword)
+        // const hasMatchingChildren = newNode.children && newNode.children.length > 0
+
+        // return nodeNameMatch || hasMatchingChildren ? newNode : null
+        return nodeNameMatch ? newNode : null
+      })
+      .filter(Boolean) as TreeNode[]
+  }
+  console.log('filterNodes:', filterNodes(treeData.value))
+
+  return filterNodes(treeData.value)
+})
+// 删除节点
+function handleRemove(targetNode: TreeNode) {
+  let sourceId = treeConfig.value.rootGtmplId
+  if (targetNode.type === 'leaf') {
+    sourceId = treeConfig.value.leafRatmplId || ''
+  }
+
+  if (targetNode.type === 'branch') {
+    sourceId = treeConfig.value.branchRatmplId || ''
+  }
+
+  dialog
+    .confirm({
+      msg: `确定要删除 "${targetNode.label}" 及其子节点吗？`,
+      title: '提示',
+      beforeConfirm: async () => {
+        loading('删除中...')
+        try {
+          // const res = await editPageConfig(sourceId || '', targetNode.id)
+          // const res1 = await editPageDataSave(sourceId || '', targetNode.id, {}, '', res.dtmplConfig.actions[0].id)
+          const res1 = await treeNodeDeleteApi(sourceId, targetNode.id)
+          if (res1.status === 'success') {
+            success('删除成功')
+            removeNodeRecursively(filteredTreeData.value, targetNode.id)
+            return true
+          }
+          else {
+            error('删除失败')
+            return false
+          }
+        }
+        catch (error1) {
+          error('删除失败')
+          console.log(error1)
+          return false
+        }
+      },
+    })
+    .then(() => { })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+// 递归删除逻辑
+function removeNodeRecursively(list: TreeNode[], idToRemove: string): boolean {
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].id === idToRemove) {
+      list.splice(i, 1)
+      return true
+    }
+
+    const children = list[i].children
+    if (Array.isArray(children) && children.length > 0) {
+      const deleted = removeNodeRecursively(children, idToRemove)
+      if (deleted)
+        return true
+    }
+  }
+  return false
+}
+
+// --- 搜索逻辑 ---
+/*
+  搜索策略：
+  1. 遍历树。
+  2. 如果节点名称包含关键字，标记高亮（通过prop传给子组件）。
+  3. 如果节点包含关键字，或者其子孙节点包含关键字，则该节点必须展开 (expanded = true)。
+*/
+function handleSearch() {
+  const keyword = searchText.value.trim().toLowerCase()
+
+  if (!keyword)
+    return
+
+  // 定义递归搜索函数
+  const traverseAndExpand = (nodes: TreeNode[]) => {
+    let hasMatchInLevel = false
+
+    nodes.forEach((node) => {
+      // 检查当前节点是否匹配
+      const isSelfMatch = node.label.toLowerCase().includes(keyword)
+
+      // 递归检查子节点
+      let hasChildMatch = false
+      if (node.children && node.children.length > 0) {
+        hasChildMatch = traverseAndExpand(node.children)
+      }
+
+      // 核心逻辑：如果自己匹配，或子节点有匹配，则当前路径应激活/展开
+      if (isSelfMatch || hasChildMatch) {
+        // node.expanded = true;
+        hasMatchInLevel = true
+      }
+      else {
+        // 如果不是搜索状态，可以选择收起，这里为了体验保留原状或强制收起均可
+        // node.expanded = false; // 取消注释则未匹配路径会自动收起
+      }
+    })
+
+    return hasMatchInLevel
+  }
+
+  traverseAndExpand(treeData.value)
+}
+</script>
+
+<template>
+  <z-paging
+    v-if="treeConfig.id" ref="Zpaging" v-model="filteredTreeData" :auto-show-system-loading="true"
+    :loading-more-enabled="false" :show-loading-more-when-reload="false"
+    :to-bottom-loading-more-enabled="false" @query="() => { getTreeRootData(treeConfig.id) }"
+  >
+    <template #top>
+      <wd-search v-model="searchText" hide-cancel @change="handleSearch" />
+      <view>
+        <ListTopButtons
+          :add-event="addEvent" :main-code="mainCode" :buttons="treeConfig.rootLTmplConfig.buttons"
+          :source-id="treeConfig.rootGtmplId" :page-title="pageTitle" page-type="列表"
+        />
+      </view>
+    </template>
+    <view class="container">
+      <!-- 树形内容 -->
+      <view class="tree-container">
+        <tree-item
+          v-for="item in filteredTreeData" :key="item.id" :node="item" :search-keyword="searchText"
+          :leaf-ratmpl-id="treeConfig.leafRatmplId" @add-leaf="handleAddLeaf" @add-branch="handleAddBranch"
+          @remove="handleRemove" @update="handleUpdate" @toggle-expand="toggleExpand"
+        />
+      </view>
+    </view>
+    <wd-dialog />
+  </z-paging>
+</template>
+
+<style>
+.container {
+  display: flex;
+  flex-direction: column;
+  /* height: 100vh; */
+}
+
+.tree-container {
+  flex: 1;
+  overflow: hidden;
+}
+</style>