@ebiz/designer-components 0.0.18-beta.27 → 0.0.18-beta.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-beta.27",
+  "version": "0.0.18-beta.29",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/apiService/simpleDataService.js

@@ -6,7 +6,6 @@
 
 import axios from 'axios'
 import { TinyNotify } from '@opentiny/vue'
-
 // 从环境变量获取API基础URL
 const API_BASE_URL = 'http://' + window.location.host + '/api'
 

package/src/components/EbizTree.vue

@@ -5,6 +5,9 @@
     :value="modelValue"
     :expanded="expandedModel"
     :actived="activedModel"
+    :transition="transition"
+    :disable-check="disableCheck"
+    :keys="keys"
     @change="handleChange"
     @expand="handleExpand"
     @active="handleActive"
@@ -63,6 +66,25 @@ const props = defineProps({
   items: {
     type: Array,
     default: () => []
+  },
+  // 是否启用过渡动画
+  transition: {
+    type: Boolean,
+    default: false
+  },
+  // 自定义节点禁用状态，返回true表示禁用
+  disableCheck: {
+    type: Function,
+    default: null
+  },
+  // 自定义节点数据中的字段名称
+  keys: {
+    type: Object,
+    default: () => ({
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    })
   }
 });
 

package/src/components/EbizTreeSelector.vue

@@ -0,0 +1,513 @@
+<template>
+  <div class="ebiz-tree-selector">
+    <div class="selected-items" v-if="modelValue && modelValue.length">
+      <div v-for="(item, index) in modelValue" :key="index" class="selected-item">
+        <span class="item-text">{{ item.label }}</span>
+        <span class="item-remove" @click.stop="removeItem(index)">×</span>
+      </div>
+    </div>
+    <t-button @click="showDialog" icon="add">
+      <t-icon name="add"></t-icon>添加
+    </t-button>
+    
+    <EbizDialog
+      v-model:visible="dialogVisible"
+      :header="{
+        text: '选择人员/部门',
+        icon: 'folder-open'
+      }"
+      width="800px"
+      placement="center"
+      confirmBtn="确定"
+      cancelBtn="取消"
+      @confirm="handleConfirm"
+      @cancel="handleCancel"
+    >
+      <div class="selector-container">
+        <!-- 左侧选择区域 -->
+        <div class="left-panel">
+          <!-- 顶部搜索区域 -->
+          <div class="search-box">
+            <t-input v-model="searchText" placeholder="搜索成员、部门或标签" clearable>
+              <template #suffix-icon>
+                <t-icon name="search"></t-icon>
+              </template>
+            </t-input>
+          </div>
+          
+          <!-- 选项卡 -->
+          <t-tabs v-model="activeTab" class="selector-tabs">
+            <t-tab-panel value="organization" label="组织架构"></t-tab-panel>
+            <t-tab-panel value="department" label="部门"></t-tab-panel>
+            <t-tab-panel value="position" label="岗位"></t-tab-panel>
+            <t-tab-panel value="employee" label="员工"></t-tab-panel>
+          </t-tabs>
+          
+          <!-- 树形结构区域 -->
+          <div class="tree-content">
+            <div v-if="loading" class="loading-container">
+              <t-loading />
+            </div>
+            <EbizTree
+              v-else-if="activeTab === 'organization'"
+              checkable
+              :items="filteredData.organization"
+              v-model="checkedNodes"
+              :disable-check="disableCheck"
+            />
+            <EbizTree
+              v-else-if="activeTab === 'department'"
+              checkable
+              :items="filteredData.department"
+              v-model="checkedNodes"
+              :disable-check="disableCheck"
+            />
+            <EbizTree
+              v-else-if="activeTab === 'position'"
+              checkable
+              :items="filteredData.position"
+              v-model="checkedNodes"
+              :disable-check="disableCheck"
+            />
+            <EbizTree
+              v-else-if="activeTab === 'employee'"
+              checkable
+              :items="filteredData.employee"
+              v-model="checkedNodes"
+              :disable-check="disableCheck"
+            />
+          </div>
+        </div>
+        
+        <!-- 右侧已选区域 -->
+        <div class="right-panel">
+          <div class="selected-title">已选择的部门、成员</div>
+          <div class="selected-count">共 {{ selectPreview.length }} 项</div>
+          <div class="selected-list">
+            <div v-for="(item, index) in selectPreview" :key="index" class="selected-list-item">
+              <t-icon :name="getIconForType(item.type)" class="item-icon" />
+              <span class="selected-label">{{ item.label }}</span>
+              <t-icon name="close-circle" class="remove-icon" @click="removePreviewItem(index)" />
+            </div>
+            <div v-if="selectPreview.length === 0" class="no-selection">
+              <t-icon name="info-circle" />
+              <span>请在左侧选择部门或成员</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </EbizDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { Button as TButton, Icon as TIcon, Input as TInput, Tabs as TTabs, TabPanel as TTabPanel, Loading as TLoading, MessagePlugin } from 'tdesign-vue-next';
+import request from '../apiService/simpleDataService';
+import EbizDialog from './TdesignDialog.vue';
+import EbizTree from './EbizTree.vue';
+
+const props = defineProps({
+  // 选中的数据，支持v-model
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 树形数据，可以是单个数组或分类对象
+  data: {
+    type: [Array, Object],
+    default: () => ([])
+  },
+  // 禁用选择的节点
+  disableCheck: {
+    type: Function,
+    default: null
+  },
+  // 标题
+  title: {
+    type: String,
+    default: '选择人员/部门'
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 弹窗显示状态
+const dialogVisible = ref(false);
+// 搜索文本
+const searchText = ref('');
+// 选中的节点
+const checkedNodes = ref([]);
+// 当前活动的选项卡
+const activeTab = ref('organization');
+// 弹窗内预览的选中项
+const selectPreview = ref([]);
+// 加载状态
+const loading = ref(false);
+// API返回的数据
+const apiData = ref(null);
+
+// 固定的API请求URL和参数
+const API_URL = '/permissions/tree';
+
+// 根据数据结构处理树形数据
+const treeData = computed(() => {
+  // 如果已有API数据，则优先使用API数据
+  if (apiData.value) {
+    return apiData.value;
+  }
+  
+  // 否则使用props传入的数据
+  if (Array.isArray(props.data)) {
+    return {
+      organization: props.data,
+      department: [],
+      position: [],
+      employee: []
+    };
+  } else {
+    return {
+      organization: props.data.organization || [],
+      department: props.data.department || [],
+      position: props.data.position || [],
+      employee: props.data.employee || []
+    };
+  }
+});
+
+// 过滤后的树形数据
+const filteredData = computed(() => {
+  if (!searchText.value) {
+    return treeData.value;
+  }
+  
+  return {
+    organization: filterTreeData(treeData.value.organization, searchText.value),
+    department: filterTreeData(treeData.value.department, searchText.value),
+    position: filterTreeData(treeData.value.position, searchText.value),
+    employee: filterTreeData(treeData.value.employee, searchText.value)
+  };
+});
+
+// 获取API数据
+const fetchApiData = async () => {
+  loading.value = true;
+  try {
+    const response = await request.fetch({}, {}, API_URL);
+    console.log(response, 201);
+    // 处理返回数据转换
+    if (response && response.code === 0) {
+      const responseData = response.data || {};
+      
+      // 转换API返回数据为组件需要的格式
+      apiData.value = {
+        organization: responseData.items || [],
+        department: responseData.items || [], // 可根据实际需求自定义
+        position: responseData.positions || [],
+        employee: responseData.users || []
+      };
+    } else {
+      throw new Error('API返回数据格式不正确');
+    }
+  } catch (error) {
+    console.error('获取树数据失败:', error);
+    MessagePlugin.error('获取数据失败，请稍后重试');
+    
+    // 如果API请求失败，使用props.data作为备选数据
+    apiData.value = null;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 过滤树形数据
+function filterTreeData(data, keyword) {
+  if (!data || !data.length) {
+    return [];
+  }
+  
+  return data.filter(node => {
+    // 如果节点名称包含关键字，则保留该节点
+    if (node.label.toLowerCase().includes(keyword.toLowerCase())) {
+      return true;
+    }
+    
+    // 递归过滤子节点
+    if (node.children && node.children.length) {
+      const filteredChildren = filterTreeData(node.children, keyword);
+      if (filteredChildren.length) {
+        // 复制节点并替换children
+        const clonedNode = { ...node, children: filteredChildren };
+        return true;
+      }
+    }
+    
+    return false;
+  });
+}
+
+// 根据类型获取对应图标
+const getIconForType = (type) => {
+  const iconMap = {
+    organization: 'internet',
+    department: 'folder',
+    position: 'user-talk',
+    employee: 'user'
+  };
+  return iconMap[type] || 'user';
+};
+
+// 显示对话框
+function showDialog() {
+  // 获取API数据
+  fetchApiData();
+  
+  // 重置弹窗内的预览数据
+  selectPreview.value = props.modelValue.map(item => ({
+    ...item,
+    type: item.type || 'employee' // 默认为员工类型
+  }));
+  
+  // 重置选中的节点
+  checkedNodes.value = props.modelValue.map(item => item.value);
+  dialogVisible.value = true;
+}
+
+// 确认选择
+function handleConfirm() {
+  emit('update:modelValue', selectPreview.value.map(item => ({
+    label: item.label,
+    value: item.value,
+    type: item.type
+  })));
+  emit('change', selectPreview.value);
+  dialogVisible.value = false;
+}
+
+// 取消选择
+function handleCancel() {
+  dialogVisible.value = false;
+}
+
+// 移除已选择预览中的项目
+function removePreviewItem(index) {
+  const removedItem = selectPreview.value[index];
+  selectPreview.value.splice(index, 1);
+  checkedNodes.value = checkedNodes.value.filter(value => value !== removedItem.value);
+}
+
+// 移除选中项
+function removeItem(index) {
+  const newValue = [...props.modelValue];
+  newValue.splice(index, 1);
+  emit('update:modelValue', newValue);
+  emit('change', newValue);
+}
+
+// 获取所有树数据的扁平结构
+const flattenAllTrees = computed(() => {
+  let result = [];
+  const flattenTree = (nodes, type) => {
+    if (!nodes) return;
+    nodes.forEach(node => {
+      result.push({
+        ...node,
+        type: node.type || type
+      });
+      if (node.children && node.children.length) {
+        flattenTree(node.children, type);
+      }
+    });
+  };
+  
+  flattenTree(treeData.value.organization, 'organization');
+  flattenTree(treeData.value.department, 'department');
+  flattenTree(treeData.value.position, 'position');
+  flattenTree(treeData.value.employee, 'employee');
+  
+  return result;
+});
+
+// 监听选中节点变化，同步到预览
+watch(checkedNodes, (newValues) => {
+  // 提取所有树中的节点
+  const flatNodes = flattenAllTrees.value;
+  
+  // 找到所有选中的节点
+  const selectedItems = newValues
+    .map(value => flatNodes.find(node => node.value === value))
+    .filter(Boolean);
+  
+  // 更新预览
+  selectPreview.value = selectedItems;
+}, { deep: true });
+
+// 监听modelValue变化，同步到选中节点
+watch(() => props.modelValue, (newValue) => {
+  if (!dialogVisible.value) return;
+  
+  checkedNodes.value = newValue.map(item => item.value);
+  selectPreview.value = newValue.map(item => ({
+    ...item,
+    type: item.type || 'employee'
+  }));
+}, { deep: true });
+
+// 组件挂载时，预加载数据
+onMounted(() => {
+  // 预加载不再需要，点击添加按钮时才加载
+  showDialog()
+  console.log(dialogVisible.value);
+});
+</script>
+
+<style scoped>
+.ebiz-tree-selector {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+}
+
+.selected-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.selected-item {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.item-text {
+  margin-right: 4px;
+}
+
+.item-remove {
+  cursor: pointer;
+  color: #999;
+  font-size: 16px;
+}
+
+.item-remove:hover {
+  color: #ff4d4f;
+}
+
+.add-button {
+  display: flex;
+  align-items: center;
+}
+
+.selector-container {
+  display: flex;
+  height: 500px;
+}
+
+.left-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e0e0e0;
+  padding-right: 16px;
+}
+
+.right-panel {
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  padding-left: 16px;
+}
+
+.search-box {
+  margin-bottom: 12px;
+}
+
+.selector-tabs {
+  margin-bottom: 12px;
+}
+
+.tree-content {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 12px;
+  position: relative;
+}
+
+.loading-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.selected-title {
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.selected-count {
+  color: #999;
+  font-size: 12px;
+  margin-bottom: 12px;
+}
+
+.selected-list {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.selected-list-item {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.selected-list-item:last-child {
+  border-bottom: none;
+}
+
+.item-icon {
+  color: #0052d9;
+  margin-right: 8px;
+}
+
+.selected-label {
+  flex: 1;
+}
+
+.remove-icon {
+  color: #999;
+  cursor: pointer;
+}
+
+.remove-icon:hover {
+  color: #ff4d4f;
+}
+
+.no-selection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #999;
+  gap: 8px;
+}
+</style> 

package/src/index.js

@@ -52,6 +52,7 @@ import EbizTableColumn from './components/EbizTableColumn.vue';
 import EbizTableSort from './components/EbizTableSort.vue';
 import EbizDetailBlock from './components/EbizDetailBlock.vue';
 import EbizTree from './components/EbizTree.vue';
+import EbizTreeSelector from './components/EbizTreeSelector.vue';
 import { MessagePlugin as EbizMessage } from 'tdesign-vue-next';
 
 // 导入简洁数据服务
@@ -157,5 +158,6 @@ export {
   // 详情块组件
   EbizDetailBlock,
   // 树组件
-  EbizTree
+  EbizTree,
+  EbizTreeSelector
 };

package/src/router/index.js

@@ -267,6 +267,20 @@ const routes = [
     name: 'Tree',
     component: () => import('../views/TreeDemo.vue'),
     meta: { title: 'Ebiz树组件示例' }
+  },
+  {
+    path: '/tree-demo',
+    name: 'TreeDemo',
+    component: () => import('../views/TreeDemo.vue'),
+    meta: { title: 'Ebiz树组件示例' }
+  },
+  {
+    path: '/tree-selector-demo',
+    name: 'TreeSelectorDemo',
+    component: () => import('../views/TreeSelectorDemo.vue'),
+    meta: {
+      title: '树形选择器'
+    }
   }
 ]
 

package/src/views/Home.vue

@@ -1,12 +1,22 @@
 <template>
   <div class="home">
-    <h1>组件库示例</h1>
+    <h1>Ebiz 组件库</h1>
     <div class="component-list">
       <div v-for="(item, index) in components" :key="index" class="component-item">
         <router-link :to="item.path" class="component-link">
           {{ item.title }}
         </router-link>
       </div>
+      
+      <router-link to="/tree-demo" class="component-item">
+        <div class="component-title">树组件</div>
+        <div class="component-desc">用于展示层级结构和操作的组件</div>
+      </router-link>
+      
+      <router-link to="/tree-selector-demo" class="component-item">
+        <div class="component-title">树形选择器</div>
+        <div class="component-desc">基于树组件的选择器，支持搜索和多选</div>
+      </router-link>
     </div>
   </div>
 </template>
@@ -96,4 +106,18 @@ export default {
 .component-link:hover {
   color: #1890ff;
 }
+
+.component-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.component-desc {
+  font-size: 14px;
+}
+
+.component-item:hover {
+  background-color: #e6e6e6;
+}
 </style>