vue2server7 7.0.42 → 7.0.44

package/frontEnd/src/components/OrgTreeSelect.vue

@@ -0,0 +1,431 @@
+<template>
+  <div class="org-tree-select">
+    <el-input
+      v-model="displayValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      readonly
+      class="org-tree-select__input"
+      @click="!disabled && openDialog()"
+    >
+      <template #suffix>
+        <el-icon class="org-tree-select__icon" @click="!disabled && openDialog()">
+          <Search />
+        </el-icon>
+      </template>
+    </el-input>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="500px"
+      destroy-on-close
+      @opened="onDialogOpened"
+    >
+      <div class="org-tree-select__content">
+        <el-input
+          v-model="filterText"
+          placeholder="请输入关键字搜索"
+          clearable
+          class="org-tree-select__filter"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+
+        <el-scrollbar class="org-tree-select__tree-wrapper">
+          <el-tree
+            ref="treeRef"
+            :data="treeData"
+            :props="treeProps"
+            :node-key="nodeKey"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            :default-expanded-keys="defaultExpandedKeys"
+            :filter-node-method="filterNode"
+            :check-strictly="checkStrictly"
+            :show-checkbox="multiple"
+            @node-click="onNodeClick"
+            @check-change="onCheckChange"
+          >
+            <template #default="{ node, data }">
+              <span class="org-tree-select__node">
+                <el-icon v-if="data.icon" class="org-tree-select__node-icon">
+                  <component :is="data.icon" />
+                </el-icon>
+                <span class="org-tree-select__node-label">{{ node.label }}</span>
+              </span>
+            </template>
+          </el-tree>
+        </el-scrollbar>
+      </div>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">关闭</el-button>
+        <el-button type="primary" @click="onConfirm">确认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, nextTick } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import type { ElTree, TreeNodeData } from 'element-plus'
+
+/** 机构树节点数据类型 */
+export interface OrgTreeNode {
+  /** 节点唯一标识 */
+  id: string | number
+  /** 节点显示名称 */
+  name: string
+  /** 节点编码（用于显示 code-name 格式） */
+  code?: string
+  /** 子节点数组 */
+  children?: OrgTreeNode[]
+  /** 节点图标（Element Plus 图标名称） */
+  icon?: string
+  /** 是否禁用该节点 */
+  disabled?: boolean
+  /** 扩展字段 */
+  [key: string]: unknown
+}
+
+/** 单选时的值类型 */
+export type OrgTreeSingleValue = string | number | null
+
+/** 多选时的值类型 */
+export type OrgTreeMultipleValue = (string | number)[]
+
+/** 组件绑定的值类型 */
+export type OrgTreeSelectValue = OrgTreeSingleValue | OrgTreeMultipleValue
+
+/** 组件 Props 类型定义 */
+interface OrgTreeSelectProps {
+  /** 绑定值 - 单选时为 string/number，多选时为数组 */
+  modelValue?: OrgTreeSelectValue
+  /** 树形数据 */
+  data?: OrgTreeNode[]
+  /** 输入框占位符 */
+  placeholder?: string
+  /** 弹窗标题 */
+  dialogTitle?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否多选 */
+  multiple?: boolean
+  /** 节点唯一标识字段 */
+  nodeKey?: string
+  /** 显示字段 */
+  labelKey?: string
+  /** 子节点字段 */
+  childrenKey?: string
+  /** 父子节点是否严格独立（多选时有效） */
+  checkStrictly?: boolean
+  /** 默认展开的节点 */
+  defaultExpandedKeys?: (string | number)[]
+}
+
+/** 组件事件类型定义 */
+interface OrgTreeSelectEmits {
+  (e: 'update:modelValue', value: OrgTreeSelectValue): void
+  (e: 'change', value: OrgTreeSelectValue, node?: OrgTreeNode | OrgTreeNode[]): void
+}
+
+/** 组件暴露的方法类型 */
+interface OrgTreeSelectExpose {
+  /** 打开弹窗 */
+  openDialog: () => void
+  /** 清空选择 */
+  clear: () => void
+}
+
+const props = withDefaults(defineProps<OrgTreeSelectProps>(), {
+  modelValue: null,
+  data: () => [],
+  placeholder: '请选择',
+  dialogTitle: '查询机构树',
+  disabled: false,
+  multiple: false,
+  nodeKey: 'id',
+  labelKey: 'name',
+  childrenKey: 'children',
+  checkStrictly: false,
+  defaultExpandedKeys: () => []
+})
+
+const emit = defineEmits<OrgTreeSelectEmits>()
+
+/** 树组件引用 */
+const treeRef = ref<InstanceType<typeof ElTree> | null>(null)
+
+/** 弹窗显示状态 */
+const dialogVisible = ref<boolean>(false)
+
+/** 搜索过滤文本 */
+const filterText = ref<string>('')
+
+/** 当前选中的值 */
+const selectedValue = ref<OrgTreeSelectValue>(null)
+
+/** 当前选中的节点数据 */
+const selectedNodes = ref<OrgTreeNode[]>([])
+
+/** 树形配置 */
+const treeProps = computed(() => ({
+  label: props.labelKey,
+  children: props.childrenKey,
+  disabled: 'disabled'
+}))
+
+/** 树形数据（添加 code 前缀） */
+const treeData = computed<OrgTreeNode[]>(() => {
+  return formatTreeData(props.data)
+})
+
+/** 输入框显示值 */
+const displayValue = computed<string>(() => {
+  if (!selectedNodes.value.length) return ''
+  if (props.multiple) {
+    return selectedNodes.value.map(node => node.name).join(', ')
+  }
+  return selectedNodes.value[0]?.name || ''
+})
+
+/**
+ * 格式化树数据：将 code 和 name 组合显示
+ * @param data - 原始树数据
+ * @returns 格式化后的树数据
+ */
+function formatTreeData(data: OrgTreeNode[]): OrgTreeNode[] {
+  return data.map((item): OrgTreeNode => {
+    const formatted: OrgTreeNode = {
+      ...item,
+      [props.labelKey]: item.code ? `${item.code}-${item.name}` : item.name
+    }
+    if (item.children && item.children.length > 0) {
+      formatted.children = formatTreeData(item.children)
+    }
+    return formatted
+  })
+}
+
+/**
+ * 查找节点
+ * @param data - 树数据
+ * @param targetIds - 目标节点 ID 数组
+ * @returns 找到的节点数组
+ */
+function findNodes(data: OrgTreeNode[], targetIds: (string | number)[]): OrgTreeNode[] {
+  const result: OrgTreeNode[] = []
+  for (const item of data) {
+    if (targetIds.includes(item.id)) {
+      result.push(item)
+    }
+    if (item.children) {
+      result.push(...findNodes(item.children, targetIds))
+    }
+  }
+  return result
+}
+
+/**
+ * 获取目标节点 ID 数组
+ * @returns 节点 ID 数组
+ */
+function getTargetIds(): (string | number)[] {
+  if (props.multiple) {
+    const value = props.modelValue as OrgTreeMultipleValue | null
+    return value ?? []
+  }
+  const value = props.modelValue as OrgTreeSingleValue
+  return value !== null ? [value] : []
+}
+
+/**
+ * 更新选中的节点
+ */
+function updateSelectedNodes(): void {
+  if (!props.modelValue) {
+    selectedNodes.value = []
+    return
+  }
+
+  const targetIds = getTargetIds()
+  selectedNodes.value = findNodes(props.data, targetIds)
+}
+
+/**
+ * 打开弹窗
+ */
+function openDialog(): void {
+  dialogVisible.value = true
+  selectedValue.value = props.modelValue
+}
+
+/**
+ * 弹窗打开后的回调
+ */
+function onDialogOpened(): void {
+  nextTick(() => {
+    updateSelectedNodes()
+    if (!treeRef.value) return
+
+    if (props.multiple) {
+      const keys = Array.isArray(selectedValue.value) ? selectedValue.value : []
+      treeRef.value.setCheckedKeys(keys as (string | number)[])
+    } else if (selectedValue.value !== null) {
+      treeRef.value.setCurrentKey(selectedValue.value as string | number)
+    }
+  })
+}
+
+/**
+ * 节点点击事件（单选模式）
+ * @param data - 点击的节点数据
+ */
+function onNodeClick(data: OrgTreeNode): void {
+  if (props.multiple) return
+  selectedValue.value = data.id
+  selectedNodes.value = [data]
+}
+
+/**
+ * 勾选变化事件（多选模式）
+ * @param _data - 变化的节点数据
+ * @param _checked - 是否选中
+ */
+function onCheckChange(_data: OrgTreeNode, _checked: boolean): void {
+  if (!props.multiple || !treeRef.value) return
+  const checkedNodes = treeRef.value.getCheckedNodes(false, false) as OrgTreeNode[]
+  selectedNodes.value = checkedNodes
+  selectedValue.value = checkedNodes.map(node => node.id)
+}
+
+/**
+ * 确认选择
+ */
+function onConfirm(): void {
+  if (props.multiple) {
+    const checkedNodes = treeRef.value?.getCheckedNodes(false, false) as OrgTreeNode[] ?? []
+    const keys = checkedNodes.map(node => node.id)
+    selectedValue.value = keys
+    selectedNodes.value = checkedNodes
+    emit('update:modelValue', keys)
+    emit('change', keys, checkedNodes)
+  } else {
+    const currentNode = treeRef.value?.getCurrentNode() as OrgTreeNode | null
+    if (currentNode) {
+      selectedValue.value = currentNode.id
+      selectedNodes.value = [currentNode]
+      emit('update:modelValue', currentNode.id)
+      emit('change', currentNode.id, currentNode)
+    }
+  }
+  dialogVisible.value = false
+}
+
+/**
+ * 过滤节点
+ * @param value - 搜索值
+ * @param data - 节点数据
+ * @returns 是否匹配
+ */
+function filterNode(value: string, data: TreeNodeData): boolean {
+  if (!value) return true
+  const label = (data[props.labelKey] as string) ?? ''
+  return label.toLowerCase().includes(value.toLowerCase())
+}
+
+/**
+ * 清空选择
+ */
+function clear(): void {
+  selectedValue.value = null
+  selectedNodes.value = []
+  emit('update:modelValue', null)
+  emit('change', null)
+}
+
+// 监听过滤文本变化
+watch(filterText, (val: string) => {
+  treeRef.value?.filter(val)
+})
+
+// 监听外部值变化
+watch(() => props.modelValue, (val: OrgTreeSelectValue) => {
+  selectedValue.value = val
+  updateSelectedNodes()
+}, { immediate: true })
+
+// 暴露方法
+defineExpose<OrgTreeSelectExpose>({
+  openDialog,
+  clear
+})
+</script>
+
+<style scoped>
+.org-tree-select {
+  display: inline-block;
+  width: 100%;
+}
+
+.org-tree-select__input {
+  cursor: pointer;
+}
+
+.org-tree-select__input :deep(.el-input__wrapper) {
+  cursor: pointer;
+}
+
+.org-tree-select__icon {
+  cursor: pointer;
+  color: var(--el-text-color-placeholder);
+}
+
+.org-tree-select__icon:hover {
+  color: var(--el-color-primary);
+}
+
+.org-tree-select__content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.org-tree-select__filter {
+  width: 100%;
+}
+
+.org-tree-select__tree-wrapper {
+  max-height: 400px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.org-tree-select__node {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.org-tree-select__node-icon {
+  color: var(--el-color-primary);
+  font-size: 16px;
+}
+
+.org-tree-select__node-label {
+  font-size: 14px;
+}
+
+:deep(.el-tree-node__content) {
+  height: 32px;
+}
+
+:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+  background-color: var(--el-color-primary-light-9);
+}
+</style>

package/frontEnd/src/components/OrgTreeSelectCascade.vue

@@ -0,0 +1,482 @@
+<template>
+  <div class="org-tree-select">
+    <el-input
+      v-model="displayValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      readonly
+      class="org-tree-select__input"
+      @click="!disabled && openDialog()"
+    >
+      <template #suffix>
+        <el-icon class="org-tree-select__icon" @click="!disabled && openDialog()">
+          <Search />
+        </el-icon>
+      </template>
+    </el-input>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="500px"
+      destroy-on-close
+      @opened="onDialogOpened"
+    >
+      <div class="org-tree-select__content">
+        <el-input
+          v-model="filterText"
+          placeholder="请输入关键字搜索"
+          clearable
+          class="org-tree-select__filter"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+        </el-input>
+
+        <el-scrollbar class="org-tree-select__tree-wrapper">
+          <el-tree
+            ref="treeRef"
+            :data="treeData"
+            :props="treeProps"
+            :node-key="nodeKey"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            :default-expanded-keys="defaultExpandedKeys"
+            :filter-node-method="filterNode"
+            :check-strictly="true"
+            :show-checkbox="multiple"
+            @check="onCheck"
+            @node-click="onNodeClick"
+          >
+            <template #default="{ node, data }">
+              <span class="org-tree-select__node">
+                <el-icon v-if="data.icon" class="org-tree-select__node-icon">
+                  <component :is="data.icon" />
+                </el-icon>
+                <span class="org-tree-select__node-label">{{ node.label }}</span>
+              </span>
+            </template>
+          </el-tree>
+        </el-scrollbar>
+      </div>
+
+      <template #footer>
+        <el-button @click="dialogVisible = false">关闭</el-button>
+        <el-button type="primary" @click="onConfirm">确认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, nextTick } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import type { ElTree, TreeNodeData } from 'element-plus'
+
+/** 机构树节点数据类型 */
+export interface OrgTreeNode {
+  /** 节点唯一标识 */
+  id: string | number
+  /** 节点显示名称 */
+  name: string
+  /** 节点编码（用于显示 code-name 格式） */
+  code?: string
+  /** 子节点数组 */
+  children?: OrgTreeNode[]
+  /** 节点图标（Element Plus 图标名称） */
+  icon?: string
+  /** 是否禁用该节点 */
+  disabled?: boolean
+  /** 扩展字段 */
+  [key: string]: unknown
+}
+
+/** 单选时的值类型 */
+export type OrgTreeSingleValue = string | number | null
+
+/** 多选时的值类型 */
+export type OrgTreeMultipleValue = (string | number)[]
+
+/** 组件绑定的值类型 */
+export type OrgTreeSelectValue = OrgTreeSingleValue | OrgTreeMultipleValue
+
+/** 组件 Props 类型定义 */
+interface OrgTreeSelectProps {
+  /** 绑定值 - 单选时为 string/number，多选时为数组 */
+  modelValue?: OrgTreeSelectValue
+  /** 树形数据 */
+  data?: OrgTreeNode[]
+  /** 输入框占位符 */
+  placeholder?: string
+  /** 弹窗标题 */
+  dialogTitle?: string
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否多选 */
+  multiple?: boolean
+  /** 节点唯一标识字段 */
+  nodeKey?: string
+  /** 显示字段 */
+  labelKey?: string
+  /** 子节点字段 */
+  childrenKey?: string
+  /** 默认展开的节点 */
+  defaultExpandedKeys?: (string | number)[]
+}
+
+/** 组件事件类型定义 */
+interface OrgTreeSelectEmits {
+  (e: 'update:modelValue', value: OrgTreeSelectValue): void
+  (e: 'change', value: OrgTreeSelectValue, node?: OrgTreeNode | OrgTreeNode[]): void
+}
+
+/** 组件暴露的方法类型 */
+interface OrgTreeSelectExpose {
+  /** 打开弹窗 */
+  openDialog: () => void
+  /** 清空选择 */
+  clear: () => void
+}
+
+const props = withDefaults(defineProps<OrgTreeSelectProps>(), {
+  modelValue: null,
+  data: () => [],
+  placeholder: '请选择',
+  dialogTitle: '查询机构树',
+  disabled: false,
+  multiple: false,
+  nodeKey: 'id',
+  labelKey: 'name',
+  childrenKey: 'children',
+  defaultExpandedKeys: () => []
+})
+
+const emit = defineEmits<OrgTreeSelectEmits>()
+
+/** 树组件引用 */
+const treeRef = ref<InstanceType<typeof ElTree> | null>(null)
+
+/** 弹窗显示状态 */
+const dialogVisible = ref<boolean>(false)
+
+/** 搜索过滤文本 */
+const filterText = ref<string>('')
+
+/** 当前选中的值 */
+const selectedValue = ref<OrgTreeSelectValue>(null)
+
+/** 当前选中的节点数据 */
+const selectedNodes = ref<OrgTreeNode[]>([])
+
+/** 树形配置 */
+const treeProps = computed(() => ({
+  label: props.labelKey,
+  children: props.childrenKey,
+  disabled: 'disabled'
+}))
+
+/** 树形数据（添加 code 前缀） */
+const treeData = computed<OrgTreeNode[]>(() => {
+  return formatTreeData(props.data)
+})
+
+/** 输入框显示值 */
+const displayValue = computed<string>(() => {
+  if (!selectedNodes.value.length) return ''
+  if (props.multiple) {
+    return selectedNodes.value.map(node => node.name).join(', ')
+  }
+  return selectedNodes.value[0]?.name || ''
+})
+
+/**
+ * 格式化树数据：将 code 和 name 组合显示
+ * @param data - 原始树数据
+ * @returns 格式化后的树数据
+ */
+function formatTreeData(data: OrgTreeNode[]): OrgTreeNode[] {
+  return data.map((item): OrgTreeNode => {
+    const formatted: OrgTreeNode = {
+      ...item,
+      [props.labelKey]: item.code ? `${item.code}-${item.name}` : item.name
+    }
+    if (item.children && item.children.length > 0) {
+      formatted.children = formatTreeData(item.children)
+    }
+    return formatted
+  })
+}
+
+/**
+ * 查找节点
+ * @param data - 树数据
+ * @param targetIds - 目标节点 ID 数组
+ * @returns 找到的节点数组
+ */
+function findNodes(data: OrgTreeNode[], targetIds: (string | number)[]): OrgTreeNode[] {
+  const result: OrgTreeNode[] = []
+  for (const item of data) {
+    if (targetIds.includes(item.id)) {
+      result.push(item)
+    }
+    if (item.children) {
+      result.push(...findNodes(item.children, targetIds))
+    }
+  }
+  return result
+}
+
+/**
+ * 获取目标节点 ID 数组
+ * @returns 节点 ID 数组
+ */
+function getTargetIds(): (string | number)[] {
+  if (props.multiple) {
+    const value = props.modelValue as OrgTreeMultipleValue | null
+    return value ?? []
+  }
+  const value = props.modelValue as OrgTreeSingleValue
+  return value !== null ? [value] : []
+}
+
+/**
+ * 更新选中的节点
+ */
+function updateSelectedNodes(): void {
+  if (!props.modelValue) {
+    selectedNodes.value = []
+    return
+  }
+
+  const targetIds = getTargetIds()
+  selectedNodes.value = findNodes(props.data, targetIds)
+}
+
+/**
+ * 打开弹窗
+ */
+function openDialog(): void {
+  dialogVisible.value = true
+  selectedValue.value = props.modelValue
+}
+
+/**
+ * 弹窗打开后的回调
+ */
+function onDialogOpened(): void {
+  nextTick(() => {
+    updateSelectedNodes()
+    if (!treeRef.value) return
+
+    if (props.multiple) {
+      const keys = Array.isArray(selectedValue.value) ? selectedValue.value : []
+      treeRef.value.setCheckedKeys(keys as (string | number)[])
+    } else if (selectedValue.value !== null) {
+      treeRef.value.setCurrentKey(selectedValue.value as string | number)
+    }
+  })
+}
+
+/**
+ * 节点点击事件（单选模式）
+ * @param data - 点击的节点数据
+ */
+function onNodeClick(data: OrgTreeNode): void {
+  if (props.multiple) return
+  selectedValue.value = data.id
+  selectedNodes.value = [data]
+}
+
+/**
+ * 获取所有子节点 ID（递归）
+ * @param node - 节点数据
+ * @returns 子节点 ID 数组
+ */
+function getAllChildIds(node: OrgTreeNode): (string | number)[] {
+  const ids: (string | number)[] = []
+  if (node.children && node.children.length > 0) {
+    for (const child of node.children) {
+      ids.push(child.id)
+      ids.push(...getAllChildIds(child))
+    }
+  }
+  return ids
+}
+
+/**
+ * 判断节点是否有子节点
+ * @param data - 节点数据
+ * @returns 是否有子节点
+ */
+function hasChildren(data: OrgTreeNode): boolean {
+  return !!(data.children && data.children.length > 0)
+}
+
+/**
+ * 勾选事件处理（多选模式）
+ * 规则：
+ * 1. 勾选父节点时，自动勾选所有子节点
+ * 2. 取消勾选父节点时，自动取消所有子节点
+ * 3. 勾选子节点时，不自动勾选父节点
+ * @param data - 当前勾选/取消勾选的节点数据
+ * @param checkedInfo - 勾选状态信息
+ */
+function onCheck(
+  data: OrgTreeNode,
+  checkedInfo: { checkedNodes: OrgTreeNode[]; checkedKeys: (string | number)[]; halfCheckedNodes: OrgTreeNode[]; halfCheckedKeys: (string | number)[] }
+): void {
+  if (!props.multiple || !treeRef.value) return
+
+  const isChecked = checkedInfo.checkedKeys.includes(data.id)
+
+  // 如果是有子节点的节点（父节点）
+  if (hasChildren(data)) {
+    const childIds = getAllChildIds(data)
+
+    if (isChecked) {
+      // 勾选父节点：勾选所有子节点
+      const currentCheckedKeys = treeRef.value.getCheckedKeys() as (string | number)[]
+      const newCheckedKeys = [...new Set([...currentCheckedKeys, ...childIds])]
+      treeRef.value.setCheckedKeys(newCheckedKeys)
+    } else {
+      // 取消勾选父节点：取消所有子节点
+      const currentCheckedKeys = treeRef.value.getCheckedKeys() as (string | number)[]
+      const newCheckedKeys = currentCheckedKeys.filter(key => !childIds.includes(key))
+      treeRef.value.setCheckedKeys(newCheckedKeys)
+    }
+  }
+  // 如果是子节点，不做额外处理（不自动勾选父节点）
+
+  // 更新选中的节点数据
+  const checkedNodes = treeRef.value.getCheckedNodes(false, false) as OrgTreeNode[]
+  selectedNodes.value = checkedNodes
+  selectedValue.value = checkedNodes.map(node => node.id)
+}
+
+/**
+ * 确认选择
+ */
+function onConfirm(): void {
+  if (props.multiple) {
+    const checkedNodes = treeRef.value?.getCheckedNodes(false, false) as OrgTreeNode[] ?? []
+    const keys = checkedNodes.map(node => node.id)
+    selectedValue.value = keys
+    selectedNodes.value = checkedNodes
+    emit('update:modelValue', keys)
+    emit('change', keys, checkedNodes)
+  } else {
+    const currentNode = treeRef.value?.getCurrentNode() as OrgTreeNode | null
+    if (currentNode) {
+      selectedValue.value = currentNode.id
+      selectedNodes.value = [currentNode]
+      emit('update:modelValue', currentNode.id)
+      emit('change', currentNode.id, currentNode)
+    }
+  }
+  dialogVisible.value = false
+}
+
+/**
+ * 过滤节点
+ * @param value - 搜索值
+ * @param data - 节点数据
+ * @returns 是否匹配
+ */
+function filterNode(value: string, data: TreeNodeData): boolean {
+  if (!value) return true
+  const label = (data[props.labelKey] as string) ?? ''
+  return label.toLowerCase().includes(value.toLowerCase())
+}
+
+/**
+ * 清空选择
+ */
+function clear(): void {
+  selectedValue.value = null
+  selectedNodes.value = []
+  emit('update:modelValue', null)
+  emit('change', null)
+}
+
+// 监听过滤文本变化
+watch(filterText, (val: string) => {
+  treeRef.value?.filter(val)
+})
+
+// 监听外部值变化
+watch(() => props.modelValue, (val: OrgTreeSelectValue) => {
+  selectedValue.value = val
+  updateSelectedNodes()
+}, { immediate: true })
+
+// 暴露方法
+defineExpose<OrgTreeSelectExpose>({
+  openDialog,
+  clear
+})
+</script>
+
+<style scoped>
+.org-tree-select {
+  display: inline-block;
+  width: 100%;
+}
+
+.org-tree-select__input {
+  cursor: pointer;
+}
+
+.org-tree-select__input :deep(.el-input__wrapper) {
+  cursor: pointer;
+}
+
+.org-tree-select__icon {
+  cursor: pointer;
+  color: var(--el-text-color-placeholder);
+}
+
+.org-tree-select__icon:hover {
+  color: var(--el-color-primary);
+}
+
+.org-tree-select__content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.org-tree-select__filter {
+  width: 100%;
+}
+
+.org-tree-select__tree-wrapper {
+  max-height: 400px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.org-tree-select__node {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.org-tree-select__node-icon {
+  color: var(--el-color-primary);
+  font-size: 16px;
+}
+
+.org-tree-select__node-label {
+  font-size: 14px;
+}
+
+:deep(.el-tree-node__content) {
+  height: 32px;
+}
+
+:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+  background-color: var(--el-color-primary-light-9);
+}
+</style>

package/frontEnd/src/pages/OrgTreeSelectPage.vue

@@ -0,0 +1,308 @@
+<template>
+  <section class="page org-tree-select-page">
+    <h1 class="title">机构树选择组件</h1>
+    <p class="desc">演示 <code>OrgTreeSelect</code> 的单选、多选、搜索等功能。</p>
+
+    <el-card class="demo-card" shadow="never">
+      <template #header>
+        <span>单选模式</span>
+      </template>
+      <OrgTreeSelect
+        v-model="singleValue"
+        :data="orgData"
+        placeholder="请选择机构"
+        class="demo-control"
+        @change="onSingleChange"
+      />
+      <div class="demo-output">
+        当前值：<code>{{ singleValue ?? 'null' }}</code>
+      </div>
+    </el-card>
+
+    <el-card class="demo-card" shadow="never">
+      <template #header>
+        <span>多选模式 <code>multiple</code></span>
+      </template>
+      <OrgTreeSelect
+        v-model="multipleValue"
+        :data="orgData"
+        multiple
+        placeholder="请选择机构（可多选）"
+        class="demo-control"
+        @change="onMultipleChange"
+      />
+      <div class="demo-output">
+        当前值：<code>{{ JSON.stringify(multipleValue) }}</code>
+      </div>
+    </el-card>
+
+    <el-card class="demo-card" shadow="never">
+      <template #header>
+        <span>禁用状态 <code>disabled</code></span>
+      </template>
+      <OrgTreeSelect
+        v-model="disabledValue"
+        :data="orgData"
+        disabled
+        placeholder="已禁用"
+        class="demo-control"
+      />
+    </el-card>
+
+    <el-card class="demo-card" shadow="never">
+      <template #header>
+        <span>默认展开 <code>default-expanded-keys</code></span>
+      </template>
+      <OrgTreeSelect
+        v-model="expandedValue"
+        :data="orgData"
+        :default-expanded-keys="['25001', '25111']"
+        placeholder="默认展开指定节点"
+        class="demo-control"
+      />
+    </el-card>
+
+    <el-card class="demo-card" shadow="never">
+      <template #header>
+        <span>级联多选模式 <code>OrgTreeSelectCascade</code> - 勾选父节点自动勾选子节点</span>
+      </template>
+      <OrgTreeSelectCascade
+        v-model="cascadeValue"
+        :data="orgData"
+        multiple
+        placeholder="请选择机构（级联多选）"
+        class="demo-control"
+        @change="onCascadeChange"
+      />
+      <div class="demo-output">
+        当前值：<code>{{ JSON.stringify(cascadeValue) }}</code>
+      </div>
+    </el-card>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import OrgTreeSelect, { type OrgTreeNode } from '../components/OrgTreeSelect.vue'
+import OrgTreeSelectCascade from '../components/OrgTreeSelectCascade.vue'
+
+// 机构树数据（模拟）
+const orgData = ref<OrgTreeNode[]>([
+  {
+    id: '25001',
+    code: '25001',
+    name: '北京银行总行核算中心',
+    icon: 'OfficeBuilding',
+    children: [
+      {
+        id: '00019',
+        code: '00019',
+        name: '北京分行',
+        icon: 'OfficeBuilding',
+        children: []
+      },
+      {
+        id: '00023',
+        code: '00023',
+        name: '中关村分行',
+        icon: 'OfficeBuilding',
+        children: []
+      },
+      {
+        id: '00025',
+        code: '00025',
+        name: '城市副中心分行',
+        icon: 'OfficeBuilding',
+        children: []
+      },
+      {
+        id: '25101',
+        code: '25101',
+        name: '北京核算中心',
+        icon: 'OfficeBuilding',
+        children: []
+      }
+    ]
+  },
+  {
+    id: '25111',
+    code: '25111',
+    name: '天津核算中心',
+    icon: 'OfficeBuilding',
+    children: [
+      {
+        id: '25311',
+        code: '25311',
+        name: '天津分行会计部',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30001',
+        code: '30001',
+        name: '天津营业部',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30011',
+        code: '30011',
+        name: '天津河西支行营业部',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30021',
+        code: '30021',
+        name: '天津开发区支行营业部',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30031',
+        code: '30031',
+        name: '天津南开支行营业部',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30041',
+        code: '30041',
+        name: '北京银行股份有限公司天津八纬路支行',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30051',
+        code: '30051',
+        name: '天津梅江支行营业部',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30061',
+        code: '30061',
+        name: '天津津南支行营业部',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30071',
+        code: '30071',
+        name: '天津河北支行营业部',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30081',
+        code: '30081',
+        name: '北京银行股份有限公司天津河东支行',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30091',
+        code: '30091',
+        name: '北京银行股份有限公司天津和平支行',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30101',
+        code: '30101',
+        name: '天津滨海支行营业部',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30111',
+        code: '30111',
+        name: '天津西青支行营业部',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30121',
+        code: '30121',
+        name: '北京银行股份有限公司天津科创支行',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30131',
+        code: '30131',
+        name: '北京银行股份有限公司天津北辰支行',
+        icon: 'Document',
+        children: []
+      },
+      {
+        id: '30141',
+        code: '30141',
+        name: '北京银行天津中新生态城绿色支行',
+        icon: 'Document',
+        children: []
+      }
+    ]
+  }
+])
+
+const singleValue = ref<string | null>(null)
+const multipleValue = ref<string[]>([])
+const disabledValue = ref<string>('25001')
+const expandedValue = ref<string | null>(null)
+const cascadeValue = ref<string[]>([])
+
+function onSingleChange(value: string | number | (string | number)[] | null, node?: OrgTreeNode | OrgTreeNode[]) {
+  console.log('单选变化:', value, node)
+}
+
+function onMultipleChange(value: string | number | (string | number)[] | null, nodes?: OrgTreeNode | OrgTreeNode[]) {
+  console.log('多选变化:', value, nodes)
+}
+
+function onCascadeChange(value: string | number | (string | number)[] | null, nodes?: OrgTreeNode | OrgTreeNode[]) {
+  console.log('级联多选变化:', value, nodes)
+}
+</script>
+
+<style scoped>
+.page.org-tree-select-page {
+  padding: 20px 24px;
+  max-width: 720px;
+}
+
+.title {
+  margin: 0 0 8px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.desc {
+  margin: 0 0 20px;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.demo-card {
+  margin-bottom: 16px;
+}
+
+.demo-card:last-child {
+  margin-bottom: 0;
+}
+
+.demo-control {
+  max-width: 400px;
+}
+
+.demo-output {
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--el-text-color-regular);
+}
+
+.demo-output code {
+  font-size: 12px;
+}
+</style>

package/frontEnd/src/router/routes.js

@@ -4,6 +4,7 @@ import ExportExcelPage from '../pages/ExportExcelPage.vue'
 import ImportTablePage from '../pages/ImportTablePage.vue'
 import PositionReportPage from '../pages/PositionReportPage.vue'
 import DateRangePage from '../pages/DateRangePage.vue'
+import OrgTreeSelectPage from '../pages/OrgTreeSelectPage.vue'
 
 export const routes = [
   {
@@ -63,5 +64,14 @@ export const routes = [
       title: '日期区间',
       showInMenu: true
     }
+  },
+  {
+    path: '/org-tree-select',
+    name: 'OrgTreeSelect',
+    component: OrgTreeSelectPage,
+    meta: {
+      title: '机构树选择',
+      showInMenu: true
+    }
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "7.0.42",
+  "version": "7.0.44",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",