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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.18-beta.27",
+  "version": "0.0.18-beta.28",
   "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/EbizRemoteSelect.vue

@@ -41,9 +41,7 @@ const props = defineProps({
      */
     queryParams: {
         type: Object,
-        default: () => ({
-            name: ''
-        })
+        default: () => ({})
     },
     /**
      * 是否多选
@@ -64,7 +62,7 @@ const props = defineProps({
      */
     clearable: {
         type: Boolean,
-        default: true
+        default: false
     },
     /**
      * 是否禁用
@@ -142,29 +140,24 @@ const focus = () => {
 
 defineExpose({
     focus,
-    selectRef,
-    options
+    selectRef
 });
 
 // 远程搜索处理函数
 const handleRemoteSearch = async (keyword) => {
     loading.value = true;
+    console.log('handleRemoteSearch', keyword);
     try {
         const params = {
             queryParams: {
                 ...queryParams.value,
-                name: keyword
+                keyword
             }
         };
-        const res = await dataService.fetch(params, {
-            key: props.apiConfig.key,
-            apiId: props.apiConfig.apiId,
-            apiType: 'MULTIPLE_DATA_SEARCH'
-        });
+        const res = await dataService.fetch(params, props.apiConfig);
         const { labelField, valueField } = props.optionsConfig;
 
         options.value = res.data.map(item => ({
-            ...item,
             label: labelField ? item[labelField] : (item.label || item.name),
             value: valueField ? item[valueField] : (item.value || item.id)
         }));
@@ -213,7 +206,6 @@ onMounted(async () => {
             const { labelField, valueField } = props.optionsConfig;
 
             options.value = res.data.map(item => ({
-                ...item,
                 label: labelField ? item[labelField] : (item.label || item.name),
                 value: valueField ? item[valueField] : (item.value || item.id)
             }));

package/src/components/EbizTree.vue

@@ -5,6 +5,8 @@
     :value="modelValue"
     :expanded="expandedModel"
     :actived="activedModel"
+    :transition="transition"
+    :disable-check="disableCheck"
     @change="handleChange"
     @expand="handleExpand"
     @active="handleActive"
@@ -63,6 +65,16 @@ const props = defineProps({
   items: {
     type: Array,
     default: () => []
+  },
+  // 是否启用过渡动画
+  transition: {
+    type: Boolean,
+    default: false
+  },
+  // 自定义节点禁用状态，返回true表示禁用
+  disableCheck: {
+    type: Function,
+    default: null
   }
 });
 

package/src/components/EbizTreeSelector.vue

@@ -0,0 +1,517 @@
+<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 API_PARAMS = {
+  type: 'all',
+  includeDisabled: false
+};
+
+// 根据数据结构处理树形数据
+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>