@ebiz/designer-components 0.0.61 → 0.0.62

package/src/views/TreeSelectorDemo.vue

@@ -1,246 +1,246 @@
-<template>
-  <div class="tree-selector-demo">
-    <h2>树选择器组件演示</h2>
-    
-    <div class="demo-section">
-      <h3>基础用法</h3>
-      <t-button @click="showBasicSelector">打开基础树选择器</t-button>
-      <div class="selected-data">
-        已选择: {{ selectedBasicData.length }} 项
-        <t-tag v-for="item in selectedBasicData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'basic')">
-          {{ item.label }}
-        </t-tag>
-      </div>
-    </div>
-    
-    <div class="demo-section">
-      <h3>预选中用法</h3>
-      <t-button @click="showPreselectedSelector">打开预选中树选择器</t-button>
-      <div class="selected-data">
-        已选择: {{ selectedPreData.length }} 项
-        <t-tag v-for="item in selectedPreData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'pre')">
-          {{ item.label }}
-        </t-tag>
-      </div>
-    </div>
-    
-    <div class="demo-section">
-      <h3>自定义禁用规则</h3>
-      <t-button @click="showCustomDisabledSelector">打开禁用员工选择树选择器</t-button>
-      <div class="selected-data">
-        已选择: {{ selectedDisabledData.length }} 项
-        <t-tag v-for="item in selectedDisabledData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'disabled')">
-          {{ item.label }}
-        </t-tag>
-      </div>
-    </div>
-
-    <!-- 基础树选择器 -->
-    <EbizTreeSelector 
-      v-model="selectedBasicData"
-      :data="treeData"
-      title="选择人员/部门"
-      @change="handleChange"
-    />
-    
-    <!-- 预选中树选择器 -->
-    <EbizTreeSelector 
-      v-model="selectedPreData"
-      :data="treeData"
-      title="预选中的树选择器"
-    />
-    
-    <!-- 自定义禁用规则树选择器 -->
-    <EbizTreeSelector 
-      v-model="selectedDisabledData"
-      :data="treeData"
-      title="仅选择部门和岗位"
-      :disable-check="disableEmployeeCheck"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { MessagePlugin } from 'tdesign-vue-next';
-import EbizTreeSelector from '../components/EbizTreeSelector.vue';
-
-// 树形数据
-const treeData = {
-  organization: [
-    {
-      label: "强瑞科技",
-      value: "1",
-      children: [
-        {
-          label: "总经办",
-          value: "1.1",
-          type: "department"
-        },
-        {
-          label: "研发部",
-          value: "1.2",
-          type: "department",
-          children: [
-            {
-              label: "前端组",
-              value: "1.2.1",
-              type: "department"
-            },
-            {
-              label: "后端组",
-              value: "1.2.2",
-              type: "department"
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  department: [
-    {
-      label: "总经办",
-      value: "1.1",
-      type: "department"
-    },
-    {
-      label: "研发部",
-      value: "1.2",
-      type: "department",
-      children: [
-        {
-          label: "前端组",
-          value: "1.2.1",
-          type: "department"
-        },
-        {
-          label: "后端组",
-          value: "1.2.2",
-          type: "department"
-        }
-      ]
-    },
-    {
-      label: "人事部",
-      value: "1.3",
-      type: "department"
-    }
-  ],
-  position: [
-    {
-      label: "工程师",
-      value: "pos1",
-      type: "position",
-      children: [
-        {
-          label: "前端工程师",
-          value: "pos1.1",
-          type: "position"
-        },
-        {
-          label: "后端工程师",
-          value: "pos1.2",
-          type: "position"
-        }
-      ]
-    },
-    {
-      label: "设计师",
-      value: "pos2",
-      type: "position"
-    }
-  ],
-  employee: [
-    {
-      label: "张三",
-      value: "emp1",
-      type: "employee"
-    },
-    {
-      label: "李四",
-      value: "emp2",
-      type: "employee"
-    },
-    {
-      label: "王五",
-      value: "emp3",
-      type: "employee"
-    }
-  ]
-};
-
-// 已选择数据
-const selectedBasicData = ref([]);
-const selectedPreData = ref([
-  {
-    label: "研发部",
-    value: "1.2",
-    type: "department"
-  },
-  {
-    label: "张三",
-    value: "emp1",
-    type: "employee"
-  }
-]);
-const selectedDisabledData = ref([]);
-
-// 打开选择器
-const showBasicSelector = () => {
-  document.querySelectorAll('.t-dialog')[0]?.classList.add('show-dialog');
-};
-
-const showPreselectedSelector = () => {
-  document.querySelectorAll('.t-dialog')[1]?.classList.add('show-dialog');
-};
-
-const showCustomDisabledSelector = () => {
-  document.querySelectorAll('.t-dialog')[2]?.classList.add('show-dialog');
-};
-
-// 自定义禁用检查（禁用员工选择）
-const disableEmployeeCheck = (node) => {
-  return node.type === 'employee';
-};
-
-// 移除已选项
-const removeItem = (item, type) => {
-  if (type === 'basic') {
-    selectedBasicData.value = selectedBasicData.value.filter(i => i.value !== item.value);
-  } else if (type === 'pre') {
-    selectedPreData.value = selectedPreData.value.filter(i => i.value !== item.value);
-  } else if (type === 'disabled') {
-    selectedDisabledData.value = selectedDisabledData.value.filter(i => i.value !== item.value);
-  }
-};
-
-// 监听变更
-const handleChange = (value) => {
-  MessagePlugin.success(`选择变更，已选择 ${value.length} 项`);
-};
-</script>
-
-<style scoped>
-.tree-selector-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 30px;
-  padding: 20px;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-}
-
-.selected-data {
-  margin-top: 16px;
-  padding: 10px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  min-height: 40px;
-}
-
-.selected-tag {
-  margin: 4px;
-}
+<template>
+  <div class="tree-selector-demo">
+    <h2>树选择器组件演示</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <t-button @click="showBasicSelector">打开基础树选择器</t-button>
+      <div class="selected-data">
+        已选择: {{ selectedBasicData.length }} 项
+        <t-tag v-for="item in selectedBasicData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'basic')">
+          {{ item.label }}
+        </t-tag>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h3>预选中用法</h3>
+      <t-button @click="showPreselectedSelector">打开预选中树选择器</t-button>
+      <div class="selected-data">
+        已选择: {{ selectedPreData.length }} 项
+        <t-tag v-for="item in selectedPreData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'pre')">
+          {{ item.label }}
+        </t-tag>
+      </div>
+    </div>
+    
+    <div class="demo-section">
+      <h3>自定义禁用规则</h3>
+      <t-button @click="showCustomDisabledSelector">打开禁用员工选择树选择器</t-button>
+      <div class="selected-data">
+        已选择: {{ selectedDisabledData.length }} 项
+        <t-tag v-for="item in selectedDisabledData" :key="item.value" class="selected-tag" closable @close="removeItem(item, 'disabled')">
+          {{ item.label }}
+        </t-tag>
+      </div>
+    </div>
+
+    <!-- 基础树选择器 -->
+    <EbizTreeSelector 
+      v-model="selectedBasicData"
+      :data="treeData"
+      title="选择人员/部门"
+      @change="handleChange"
+    />
+    
+    <!-- 预选中树选择器 -->
+    <EbizTreeSelector 
+      v-model="selectedPreData"
+      :data="treeData"
+      title="预选中的树选择器"
+    />
+    
+    <!-- 自定义禁用规则树选择器 -->
+    <EbizTreeSelector 
+      v-model="selectedDisabledData"
+      :data="treeData"
+      title="仅选择部门和岗位"
+      :disable-check="disableEmployeeCheck"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import EbizTreeSelector from '../components/EbizTreeSelector.vue';
+
+// 树形数据
+const treeData = {
+  organization: [
+    {
+      label: "强瑞科技",
+      value: "1",
+      children: [
+        {
+          label: "总经办",
+          value: "1.1",
+          type: "department"
+        },
+        {
+          label: "研发部",
+          value: "1.2",
+          type: "department",
+          children: [
+            {
+              label: "前端组",
+              value: "1.2.1",
+              type: "department"
+            },
+            {
+              label: "后端组",
+              value: "1.2.2",
+              type: "department"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  department: [
+    {
+      label: "总经办",
+      value: "1.1",
+      type: "department"
+    },
+    {
+      label: "研发部",
+      value: "1.2",
+      type: "department",
+      children: [
+        {
+          label: "前端组",
+          value: "1.2.1",
+          type: "department"
+        },
+        {
+          label: "后端组",
+          value: "1.2.2",
+          type: "department"
+        }
+      ]
+    },
+    {
+      label: "人事部",
+      value: "1.3",
+      type: "department"
+    }
+  ],
+  position: [
+    {
+      label: "工程师",
+      value: "pos1",
+      type: "position",
+      children: [
+        {
+          label: "前端工程师",
+          value: "pos1.1",
+          type: "position"
+        },
+        {
+          label: "后端工程师",
+          value: "pos1.2",
+          type: "position"
+        }
+      ]
+    },
+    {
+      label: "设计师",
+      value: "pos2",
+      type: "position"
+    }
+  ],
+  employee: [
+    {
+      label: "张三",
+      value: "emp1",
+      type: "employee"
+    },
+    {
+      label: "李四",
+      value: "emp2",
+      type: "employee"
+    },
+    {
+      label: "王五",
+      value: "emp3",
+      type: "employee"
+    }
+  ]
+};
+
+// 已选择数据
+const selectedBasicData = ref([]);
+const selectedPreData = ref([
+  {
+    label: "研发部",
+    value: "1.2",
+    type: "department"
+  },
+  {
+    label: "张三",
+    value: "emp1",
+    type: "employee"
+  }
+]);
+const selectedDisabledData = ref([]);
+
+// 打开选择器
+const showBasicSelector = () => {
+  document.querySelectorAll('.t-dialog')[0]?.classList.add('show-dialog');
+};
+
+const showPreselectedSelector = () => {
+  document.querySelectorAll('.t-dialog')[1]?.classList.add('show-dialog');
+};
+
+const showCustomDisabledSelector = () => {
+  document.querySelectorAll('.t-dialog')[2]?.classList.add('show-dialog');
+};
+
+// 自定义禁用检查（禁用员工选择）
+const disableEmployeeCheck = (node) => {
+  return node.type === 'employee';
+};
+
+// 移除已选项
+const removeItem = (item, type) => {
+  if (type === 'basic') {
+    selectedBasicData.value = selectedBasicData.value.filter(i => i.value !== item.value);
+  } else if (type === 'pre') {
+    selectedPreData.value = selectedPreData.value.filter(i => i.value !== item.value);
+  } else if (type === 'disabled') {
+    selectedDisabledData.value = selectedDisabledData.value.filter(i => i.value !== item.value);
+  }
+};
+
+// 监听变更
+const handleChange = (value) => {
+  MessagePlugin.success(`选择变更，已选择 ${value.length} 项`);
+};
+</script>
+
+<style scoped>
+.tree-selector-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 30px;
+  padding: 20px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.selected-data {
+  margin-top: 16px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  min-height: 40px;
+}
+
+.selected-tag {
+  margin: 4px;
+}
 </style>