wui-components-v2 1.1.70 → 1.1.71

package/components/tree-select/components/TreeNode.vue

@@ -1,200 +1,200 @@
-<script setup lang="ts">
-import { computed, defineEmits, defineProps, onMounted, ref } from 'vue'
-// 树形节点数据结构定义
-interface TreeNode {
-  id: string
-  name: string
-  children?: TreeNode[]
-  [key: string]: any // 允许其他自定义属性
-}
-// 选择模式类型
-type SelectMode = 'single' | 'multiple'
-const props = defineProps<{
-  node: TreeNode
-  selectMode: SelectMode
-  selectedKeys: string[]
-  setNodeRef: (id: string, el: HTMLElement | null) => void
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:selectedKeys', keys: string[], node: TreeNode): void
-  (e: 'toggleExpand', node: TreeNode): void
-}>()
-
-// 节点DOM引用
-const nodeRef = ref<HTMLElement | null>(null)
-
-// 是否展开
-const isExpanded = ref(false)
-
-// 是否有子节点
-const hasChildren = computed(() => {
-  return props.node.children && props.node.children.length > 0
-})
-
-// 是否选中
-const isSelected = computed(() => {
-  return props.selectedKeys.includes(props.node.id)
-})
-
-// 注册节点引用
-onMounted(() => {
-  props.setNodeRef(props.node.id, nodeRef.value)
-})
-
-// 切换展开/折叠
-function toggleExpand() {
-  if (!isExpanded.value) {
-    emit('toggleExpand', props.node)
-  }
-  isExpanded.value = !isExpanded.value
-}
-
-// 处理节点点击（仅用于展开/折叠）
-function handleNodeClick() {
-  // if (hasChildren.value) {
-  //   toggleExpand()
-  // }
-  toggleExpand()
-}
-
-// 处理选择
-function handleSelectClick() {
-  let newSelectedKeys: string[] = []
-
-  if (props.selectMode === 'single') {
-    // 单选模式
-    newSelectedKeys = [props.node.id]
-  }
-  else {
-    // 多选模式
-    if (isSelected.value) {
-      // 取消选择
-      newSelectedKeys = props.selectedKeys.filter(key => key !== props.node.id)
-    }
-    else {
-      // 选中
-      newSelectedKeys = [...props.selectedKeys, props.node.id]
-    }
-  }
-
-  emit('update:selectedKeys', newSelectedKeys, props.node)
-}
-
-// 处理子节点选择
-function handleChildSelect(keys: string[], node: TreeNode) {
-  emit('update:selectedKeys', keys, node)
-}
-</script>
-
-<template>
-  <view ref="nodeRef" class="tree-node" :class="{ 'has-children': hasChildren }">
-    <view class="node-content" @click="handleNodeClick">
-      <!-- 展开/折叠图标 -->
-      <!-- <view v-if="hasChildren" class="expand-icon" @click.stop="toggleExpand">
-        <wd-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" size="18" color="#999" />
-      </view>
-      <view v-else class="expand-icon" /> -->
-      <view class="expand-icon" @click.stop="handleNodeClick">
-        <wd-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" size="18" color="#999" />
-      </view>
-
-      <!-- 选择框 -->
-      <view class="selector-container" @click.stop="handleSelectClick">
-        <wd-checkbox custom-class="selector" :true-value="node.id" :model-value="selectedKeys.find((item) => item === node.id)">
-          <!-- {{ node.name }} -->
-        </wd-checkbox>
-      </view>
-
-      <!-- 节点名称 -->
-      <view class="node-name">
-        {{ node.name }}
-      </view>
-    </view>
-
-    <!-- 子节点 -->
-    <view
-      v-if="hasChildren" class="children-nodes" :style="{
-        paddingLeft: '24px',
-        display: isExpanded ? 'block' : 'none',
-      }"
-    >
-      <tree-node
-        v-for="child in node.children" :key="child.id" :node="child" :select-mode="selectMode"
-        :selected-keys="selectedKeys" :set-node-ref="setNodeRef" @update:selected-keys="handleChildSelect"
-      />
-    </view>
-  </view>
-</template>
-
-<style scoped>
-.tree-node {
-  transition: all 0.2s ease;
-}
-
-.selector{
-  /* background-color: #333; */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.node-content {
-  display: flex;
-  align-items: center;
-  height: 44px;
-  border-radius: 8px;
-  padding: 0 4px;
-  transition: background-color 0.2s;
-}
-
-.node-content:hover {
-  background-color: #f5f7fa;
-}
-
-.expand-icon {
-  width: 40px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.selector-container {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.node-name {
-  flex: 1;
-  text-align: left;
-  font-size: 16px;
-  color: #333;
-  padding-left: 4px;
-}
-
-.children-nodes {
-  transition: all 0.3s ease;
-}
-
-/* 动画效果 */
-.children-nodes {
-  animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed, defineEmits, defineProps, onMounted, ref } from 'vue'
+// 树形节点数据结构定义
+interface TreeNode {
+  id: string
+  name: string
+  children?: TreeNode[]
+  [key: string]: any // 允许其他自定义属性
+}
+// 选择模式类型
+type SelectMode = 'single' | 'multiple'
+const props = defineProps<{
+  node: TreeNode
+  selectMode: SelectMode
+  selectedKeys: string[]
+  setNodeRef: (id: string, el: HTMLElement | null) => void
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:selectedKeys', keys: string[], node: TreeNode): void
+  (e: 'toggleExpand', node: TreeNode): void
+}>()
+
+// 节点DOM引用
+const nodeRef = ref<HTMLElement | null>(null)
+
+// 是否展开
+const isExpanded = ref(false)
+
+// 是否有子节点
+const hasChildren = computed(() => {
+  return props.node.children && props.node.children.length > 0
+})
+
+// 是否选中
+const isSelected = computed(() => {
+  return props.selectedKeys.includes(props.node.id)
+})
+
+// 注册节点引用
+onMounted(() => {
+  props.setNodeRef(props.node.id, nodeRef.value)
+})
+
+// 切换展开/折叠
+function toggleExpand() {
+  if (!isExpanded.value) {
+    emit('toggleExpand', props.node)
+  }
+  isExpanded.value = !isExpanded.value
+}
+
+// 处理节点点击（仅用于展开/折叠）
+function handleNodeClick() {
+  // if (hasChildren.value) {
+  //   toggleExpand()
+  // }
+  toggleExpand()
+}
+
+// 处理选择
+function handleSelectClick() {
+  let newSelectedKeys: string[] = []
+
+  if (props.selectMode === 'single') {
+    // 单选模式
+    newSelectedKeys = [props.node.id]
+  }
+  else {
+    // 多选模式
+    if (isSelected.value) {
+      // 取消选择
+      newSelectedKeys = props.selectedKeys.filter(key => key !== props.node.id)
+    }
+    else {
+      // 选中
+      newSelectedKeys = [...props.selectedKeys, props.node.id]
+    }
+  }
+
+  emit('update:selectedKeys', newSelectedKeys, props.node)
+}
+
+// 处理子节点选择
+function handleChildSelect(keys: string[], node: TreeNode) {
+  emit('update:selectedKeys', keys, node)
+}
+</script>
+
+<template>
+  <view ref="nodeRef" class="tree-node" :class="{ 'has-children': hasChildren }">
+    <view class="node-content" @click="handleNodeClick">
+      <!-- 展开/折叠图标 -->
+      <!-- <view v-if="hasChildren" class="expand-icon" @click.stop="toggleExpand">
+        <wd-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" size="18" color="#999" />
+      </view>
+      <view v-else class="expand-icon" /> -->
+      <view class="expand-icon" @click.stop="handleNodeClick">
+        <wd-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" size="18" color="#999" />
+      </view>
+
+      <!-- 选择框 -->
+      <view class="selector-container" @click.stop="handleSelectClick">
+        <wd-checkbox custom-class="selector" :true-value="node.id" :model-value="selectedKeys.find((item) => item === node.id)">
+          <!-- {{ node.name }} -->
+        </wd-checkbox>
+      </view>
+
+      <!-- 节点名称 -->
+      <view class="node-name">
+        {{ node.name }}
+      </view>
+    </view>
+
+    <!-- 子节点 -->
+    <view
+      v-if="hasChildren" class="children-nodes" :style="{
+        paddingLeft: '24px',
+        display: isExpanded ? 'block' : 'none',
+      }"
+    >
+      <tree-node
+        v-for="child in node.children" :key="child.id" :node="child" :select-mode="selectMode"
+        :selected-keys="selectedKeys" :set-node-ref="setNodeRef" @update:selected-keys="handleChildSelect"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.tree-node {
+  transition: all 0.2s ease;
+}
+
+.selector{
+  /* background-color: #333; */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  border-radius: 8px;
+  padding: 0 4px;
+  transition: background-color 0.2s;
+}
+
+.node-content:hover {
+  background-color: #f5f7fa;
+}
+
+.expand-icon {
+  width: 40px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.selector-container {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.node-name {
+  flex: 1;
+  text-align: left;
+  font-size: 16px;
+  color: #333;
+  padding-left: 4px;
+}
+
+.children-nodes {
+  transition: all 0.3s ease;
+}
+
+/* 动画效果 */
+.children-nodes {
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>