wui-components-v2 1.1.69 → 1.1.71

package/components/tab-search/tab-search.vue

@@ -1,73 +1,73 @@
-<script setup lang="ts">
-import { computed, defineEmits, defineOptions, defineProps, ref } from 'vue'
-import type { EnumItem, Enums, Split2TabCriterias } from '../../type'
-
-defineOptions({
-  name: 'TabSearch',
-})
-
-const props = defineProps<{
-  split2TabCriterias: Split2TabCriterias[]
-  enums: Enums
-}>()
-
-const emit = defineEmits(['click'])
-
-interface TabData {
-  name: string
-  value: string
-  sourceId: string
-}
-// 提取枚举值
-function enumColumn() {
-  if (!props.split2TabCriterias)
-    return []
-  return props.split2TabCriterias.reduce<TabData[]>((acc, cur) => {
-    const data = props.enums[cur.mstrucId]?.map((item: EnumItem) => {
-      return { name: item.title, value: item.title, sourceId: cur.sourceId }
-    }) || []
-    acc = [...acc, ...data] // 更新累加器
-    return acc // 显式返回累加器
-  }, [])
-}
-// 提取特殊值
-function specialColumn() {
-  if (!props.split2TabCriterias)
-    return []
-  const data = []
-  for (let i = 0; i < props.split2TabCriterias.length; i++) {
-    const element = props.split2TabCriterias[i]
-    if (element.extControlType === 'single-checkbox') {
-      data.push({ name: element.title, value: '1', sourceId: element.sourceId })
-    }
-  }
-  return data
-}
-const tabs = computed(() => {
-  const data1 = enumColumn()
-  const data2 = specialColumn()
-  return [{ name: '全部', value: '', sourceId: '' }, ...data1, ...data2]
-})
-
-const tab = ref<string>('')
-
-// click事件:点击标题
-function click(event: { index: number, name: string }) {
-  const data = tabs.value.find(item => item.value === event.name)
-  console.log(data, event)
-  if (event.name) {
-    emit('click', `c_${data?.sourceId}=${event.name}`)
-  }
-  else {
-    emit('click', '')
-  }
-}
-</script>
-
-<template>
-  <wd-tabs v-model="tab" animated slidable="always" @click="click">
-    <block v-for="item in tabs" :key="item.sourceId">
-      <wd-tab :title="item.name" :name="item.value" />
-    </block>
-  </wd-tabs>
-</template>
+<script setup lang="ts">
+import { computed, defineEmits, defineOptions, defineProps, ref } from 'vue'
+import type { EnumItem, Enums, Split2TabCriterias } from '../../type'
+
+defineOptions({
+  name: 'TabSearch',
+})
+
+const props = defineProps<{
+  split2TabCriterias: Split2TabCriterias[]
+  enums: Enums
+}>()
+
+const emit = defineEmits(['click'])
+
+interface TabData {
+  name: string
+  value: string
+  sourceId: string
+}
+// 提取枚举值
+function enumColumn() {
+  if (!props.split2TabCriterias)
+    return []
+  return props.split2TabCriterias.reduce<TabData[]>((acc, cur) => {
+    const data = props.enums[cur.mstrucId]?.map((item: EnumItem) => {
+      return { name: item.title, value: item.title, sourceId: cur.sourceId }
+    }) || []
+    acc = [...acc, ...data] // 更新累加器
+    return acc // 显式返回累加器
+  }, [])
+}
+// 提取特殊值
+function specialColumn() {
+  if (!props.split2TabCriterias)
+    return []
+  const data = []
+  for (let i = 0; i < props.split2TabCriterias.length; i++) {
+    const element = props.split2TabCriterias[i]
+    if (element.extControlType === 'single-checkbox') {
+      data.push({ name: element.title, value: '1', sourceId: element.sourceId })
+    }
+  }
+  return data
+}
+const tabs = computed(() => {
+  const data1 = enumColumn()
+  const data2 = specialColumn()
+  return [{ name: '全部', value: '', sourceId: '' }, ...data1, ...data2]
+})
+
+const tab = ref<string>('')
+
+// click事件:点击标题
+function click(event: { index: number, name: string }) {
+  const data = tabs.value.find(item => item.value === event.name)
+  console.log(data, event)
+  if (event.name) {
+    emit('click', `c_${data?.sourceId}=${event.name}`)
+  }
+  else {
+    emit('click', '')
+  }
+}
+</script>
+
+<template>
+  <wd-tabs v-model="tab" animated slidable="always" @click="click">
+    <block v-for="item in tabs" :key="item.sourceId">
+      <wd-tab :title="item.name" :name="item.value" />
+    </block>
+  </wd-tabs>
+</template>

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>