@ebiz/designer-components 0.0.18-beta.32 → 0.0.18-beta.34

package/src/components/EbizTree.vue

@@ -0,0 +1,147 @@
+<template>
+  <t-tree
+    v-bind="$attrs"
+    :data="data"
+    :value="modelValue"
+    :expanded="expandedModel"
+    :actived="activedModel"
+    :transition="transition"
+    :disable-check="disableCheck"
+    :keys="keys"
+    @change="handleChange"
+    @expand="handleExpand"
+    @active="handleActive"
+    @select="$emit('select', $event)"
+    @drag-start="$emit('drag-start', $event)"
+    @drag-end="$emit('drag-end', $event)"
+    @drag-over="$emit('drag-over', $event)"
+    @drag-leave="$emit('drag-leave', $event)"
+    @drag-drop="$emit('drag-drop', $event)"
+    @click="$emit('click', $event)"
+    @load="$emit('load', $event)"
+  >
+    <template v-if="$slots.default" #default="slotProps">
+      <slot :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.empty" #empty>
+      <slot name="empty"></slot>
+    </template>
+    <template v-if="$slots.icon" #icon="slotProps">
+      <slot name="icon" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.label" #label="slotProps">
+      <slot name="label" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.line" #line="slotProps">
+      <slot name="line" :node="slotProps.node"></slot>
+    </template>
+    <template v-if="$slots.operations" #operations="slotProps">
+      <slot name="operations" :node="slotProps.node"></slot>
+    </template>
+  </t-tree>
+</template>
+
+<script setup>
+import { Tree as TTree } from 'tdesign-vue-next';
+import { computed } from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+  // 选中值
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 展开节点
+  expanded: {
+    type: Array,
+    default: () => []
+  },
+  // 激活节点
+  actived: {
+    type: Array,
+    default: () => []
+  },
+  // 数据
+  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'
+    })
+  }
+});
+
+// 定义组件事件
+const emit = defineEmits([
+  'update:modelValue', 
+  'update:expanded', 
+  'update:actived', 
+  'change', 
+  'expand', 
+  'active', 
+  'select', 
+  'click', 
+  'load',
+  'drag-start',
+  'drag-end',
+  'drag-over',
+  'drag-leave',
+  'drag-drop'
+]);
+
+// 处理items映射到data
+const data = computed(() => props.items);
+
+// 展开事件
+const expandedModel = computed({
+  get: () => props.expanded,
+  set: (val) => emit('update:expanded', val)
+});
+
+// 激活节点
+const activedModel = computed({
+  get: () => props.actived,
+  set: (val) => emit('update:actived', val)
+});
+
+// 值改变事件
+const handleChange = (val, context) => {
+  emit('update:modelValue', val);
+  emit('change', val, context);
+};
+
+// 节点展开事件
+const handleExpand = (val, context) => {
+  emit('update:expanded', val);
+  emit('expand', val, context);
+};
+
+// 节点激活事件
+const handleActive = (val, context) => {
+  emit('update:actived', val);
+  emit('active', val, context);
+};
+</script>
+
+<style>
+.t-tree {
+  width: 100%;
+}
+</style> 

package/src/components/EbizTreeSelector.vue

@@ -0,0 +1,510 @@
+<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 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);
+
+
+// 根据数据结构处理树形数据
+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 this.$utils.request({ key:'organizational_structure'}, {},'/appdata/execute/plugin');
+    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/components/Form.vue

@@ -1,27 +1,27 @@
-<template>
-    <div>
-        <slot name="content"></slot>
-    </div>
-</template>
-
-<script setup>
-
-import { ref, defineProps, onMounted } from "vue";
-
-const props = defineProps({
-    apiConfig: {
-        type: Object,
-        default: {
-            apiId: null,
-            apiType: ''
-        }
-    }
-})
-
-onMounted(() => {
-    console.log("FormContainer component has been mounted.");
-    // You can add any initialization logic here
-    // 加载数据
-
-});
-</script>
+<template>
+    <div>
+        <slot name="content"></slot>
+    </div>
+</template>
+
+<script setup>
+
+import { ref, defineProps, onMounted } from "vue";
+
+const props = defineProps({
+    apiConfig: {
+        type: Object,
+        default: {
+            apiId: null,
+            apiType: ''
+        }
+    }
+})
+
+onMounted(() => {
+    console.log("FormContainer component has been mounted.");
+    // You can add any initialization logic here
+    // 加载数据
+
+});
+</script>