@ebiz/designer-components 0.0.40 → 0.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.40",
+  "version": "0.0.43",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/EbizEmployeeSelector.vue

@@ -1,23 +1,23 @@
 <template>
   <div class="ebiz-employee-selector">
     <!-- 选择框展示区 -->
-    <div>
+    <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px;">
       <div class="selected-items" v-if="selectedItems && selectedItems.length">
         <div v-for="(item, index) in selectedItems" :key="index" class="selected-item">
           <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
           <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
           <span class="item-info">
-            <span class="item-code">{{ item.code }}</span>
+            <span class="item-code">{{ item.no }} - </span>
             <span class="item-name">{{ item.name }}</span>
           </span>
           <t-icon name="close" class="item-remove" @click="removeItem(index, item.id)"></t-icon>
         </div>
       </div>
-      <t-button @click="showDialog" variant="text" theme="primary" size="small"> 选择人员 </t-button>
+      <t-button @click="showDialog" variant="text" theme="primary">选择人员</t-button>
     </div>
 
     <!-- 选择弹窗 -->
-    <t-dialog v-model:visible="dialogVisible" header="选择人员" :width="800" :footer="false" :close-btn="true"
+    <t-dialog v-model:visible="dialogVisible" header="选择人员" :width="800" footer :close-btn="true"
       :close-on-esc-keydown="true" :close-on-overlay-click="true">
 
       <!-- 选项卡 -->
@@ -35,15 +35,6 @@
         <div class="selector-dialog-content">
           <!-- 左侧选择区域 -->
           <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>
-
             <!-- 内容区域 -->
             <div class="content-area">
               <div v-if="loading" class="loading-container">
@@ -98,6 +89,9 @@
             <div class="employee-header">
               <div class="employee-title">
                 {{ currentNodeName || '人员列表' }}
+                <div v-if="activeTab === 'organization'" class="sub-dept-option">
+                  <t-checkbox v-model="childDeptEnable">包含子部门</t-checkbox>
+                </div>
               </div>
               <div class="employee-count">
                 <t-checkbox v-model="selectAll" @change="handleSelectAll">全选</t-checkbox>
@@ -105,6 +99,17 @@
               </div>
             </div>
 
+            <!-- 搜索框 -->
+            <div class="search-box">
+              <t-input v-model="searchText" placeholder="请输入姓名/拼音/工号搜索" clearable
+                @keyup.enter="handleSearchEnter">
+                <template #suffix-icon>
+                  <t-icon name="search" @click="handleSearchClick"></t-icon>
+                </template>
+              </t-input>
+              <t-button v-if="searchText" size="small" theme="default" class="clear-search-btn" @click="clearSearch">清除搜索</t-button>
+            </div>
+
             <div class="employee-list">
               <div v-for="(item, index) in filteredEmployeeList" :key="index" class="employee-item">
                 <t-checkbox v-model="item.checked" @change="handleCheckChange(item)"></t-checkbox>
@@ -113,7 +118,7 @@
                   <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
                 </div>
                 <div class="employee-info">
-                  <div class="employee-code">{{ item.code }}</div>
+                  <div class="employee-code">{{ item.no }} - </div>
                   <div class="employee-name">{{ item.name }}</div>
                 </div>
               </div>
@@ -130,7 +135,18 @@
       <template #footer>
         <div class="dialog-footer">
           <div class="selected-preview">
-            已选: {{ selectedEmployees.length }} 人
+            已选: {{ tempSelectedEmployees.length }} 人
+            <div class="selected-people-list" v-if="tempSelectedEmployees.length > 0">
+              <div v-for="(item, index) in tempSelectedEmployees" :key="index" class="selected-people-item">
+                <t-avatar v-if="item.avatar" :image="item.avatar" size="small" />
+                <t-avatar v-else size="small">{{ getAvatarText(item.name) }}</t-avatar>
+                <span class="item-info">
+                  <span class="item-code">{{ item.no }}</span>
+                  <span class="item-name">{{ item.name }}</span>
+                </span>
+                <t-icon name="close" class="item-remove" @click="removeSelectedEmployee(item)"></t-icon>
+              </div>
+            </div>
           </div>
           <div class="dialog-actions">
             <t-button theme="default" @click="handleCancel">取消</t-button>
@@ -205,6 +221,10 @@ const searchText = ref('');
 const activeTab = ref(props.defaultTab);
 const loading = ref(false);
 const selectedItems = ref([]);
+// 对话框中临时保存的选中员工列表
+const tempSelectedEmployees = ref([]);
+// 是否查询子部门
+const childDeptEnable = ref(false);
 
 // 数据源
 const organizationData = ref([]);
@@ -222,14 +242,8 @@ const getAvatarText = (name) => {
   return name ? name.substring(0, 1) : '';
 };
 
-// 判断员工是否已选中
-const isEmployeeSelected = (employee) => {
-  return props.modelValue && props.modelValue.includes(employee.id);
-};
-
 // 处理组织数据，转换为树形结构
-const processOrgData = (data) => {
-  console.log(data);
+const _processOrgData = (data) => {
   // 转换数据结构为树形结构
   const map = {};
   const result = [];
@@ -256,8 +270,6 @@ const processOrgData = (data) => {
     }
   });
 
-  console.log(result);
-
   return result;
 };
 
@@ -296,9 +308,10 @@ const fetchOrganizationData = async () => {
       {
         apiId: 1933,
         key: 'organizationalStructure'
-      }
+      },"/process/deptList"
     );
-    organizationData.value = processOrgData(response.data || []);
+    organizationData.value = response
+    // organizationData.value = processOrgData(response.data || []);
   } catch (error) {
     MessagePlugin.error({
       content: '获取组织架构数据失败',
@@ -396,44 +409,56 @@ const fetchSubordinateData = async () => {
 };
 
 // 根据节点ID获取员工列表
-const fetchEmployeesByNode = async (nodeId, type) => {
+const fetchEmployeesByNode = async (nodeId, type, keyword = searchText.value) => {
   loading.value = true;
-  employeeList.value = [];
   
   try {
     const params = {};
     
-    // 根据不同类型设置不同的查询参数
-    switch (type) {
-      case 'organization':
-        params.deptId = nodeId[0];
-        break;
-      case 'role':
-        params.roleId = nodeId;
-        break;
-      case 'position':
-        params.positionId = nodeId;
-        break;
-      case 'department':
-        params.departmentId = nodeId;
-        break;
-      case 'subordinate':
-        params.managerId = nodeId;
-        break;
+    // 只有当nodeId不为空且type有效时，添加对应参数
+    if (nodeId && type) {
+      // 根据不同类型设置不同的查询参数
+      switch (type) {
+        case 'organization':
+          params.deptId = Array.isArray(nodeId) ? nodeId[0] : nodeId;
+          // 添加子部门查询参数
+          params.childDeptEnable = childDeptEnable.value;
+          break;
+        case 'role':
+          params.roleId = nodeId;
+          break;
+        case 'position':
+          params.positionId = nodeId;
+          break;
+        case 'department':
+          params.departmentId = nodeId;
+          break;
+        case 'subordinate':
+          params.managerId = nodeId;
+          break;
+      }
+    }
+    
+    // 如果有搜索关键词，添加到查询参数中
+    if (keyword) {
+      params.keyWord = keyword;
     }
     
     const response = await dataService.fetch(
       params,
       {},
-      '/process/userList' // 直接使用新的API路径
+      '/process/userList'
     );
     
-    // 处理返回数据，添加checked属性
-    const employees = (response?.data || []).map(emp => ({
+    // 获取当前已选择的员工ID列表
+    const selectedIds = new Set(tempSelectedEmployees.value.map(emp => emp.id));
+    
+    // 处理返回数据，添加checked属性，保留已选状态
+    const employees = (response || []).map(emp => ({
       ...emp,
-      checked: isEmployeeSelected(emp)
+      checked: selectedIds.has(emp.id)
     }));
-    
+
     employeeList.value = employees;
     updateSelectAllStatus();
   } catch (error) {
@@ -457,14 +482,14 @@ const fetchEmployeesByIds = async (ids) => {
   try {
     const response = await dataService.fetch(
       {
-        ids: ids // 使用新的接口参数格式
+        userIds: ids // 使用新的接口参数格式
       },
       {},
-      '/v1/employee/getByIds' // 直接使用新的API路径
+      '/process/userList' // 直接使用新的API路径
     );
     
-    if (response?.data && Array.isArray(response.data)) {
-      selectedItems.value = response.data;
+    if (response && Array.isArray(response)) {
+      selectedItems.value = response;
     } else {
       selectedItems.value = [];
       MessagePlugin.warning({
@@ -502,6 +527,11 @@ const selectDepartment = (department) => {
 const handleSelectAll = (checked) => {
   employeeList.value.forEach(item => {
     item.checked = checked;
+    
+    // 如果选中，确保添加到临时选中列表
+    if (checked && !tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
+      tempSelectedEmployees.value.push(item);
+    }
   });
 };
 
@@ -514,14 +544,36 @@ const handleCheckChange = (item) => {
         emp.checked = false;
       }
     });
+    
+    // 单选模式下，直接替换tempSelectedEmployees
+    tempSelectedEmployees.value = item.checked ? [item] : [];
+  } else {
+    // 多选模式
+    // 如果选中，添加到临时选中列表
+    if (item.checked && !tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
+      tempSelectedEmployees.value.push(item);
+    } else if (!item.checked) {
+      // 如果取消选中，从临时选中列表中移除
+      const index = tempSelectedEmployees.value.findIndex(emp => emp.id === item.id);
+      if (index !== -1) {
+        tempSelectedEmployees.value.splice(index, 1);
+      }
+    }
   }
   
   // 检查最大选择数量限制
   if (props.maxCount > 0) {
-    const checkedCount = employeeList.value.filter(emp => emp.checked).length;
+    const checkedCount = tempSelectedEmployees.value.length;
     if (checkedCount > props.maxCount) {
       item.checked = false;
-      // 可以添加提示信息
+      const index = tempSelectedEmployees.value.findIndex(emp => emp.id === item.id);
+      if (index !== -1) {
+        tempSelectedEmployees.value.splice(index, 1);
+      }
+      MessagePlugin.warning({
+        content: `最多只能选择${props.maxCount}个人员`,
+        duration: 3000
+      });
     }
   }
   
@@ -543,6 +595,24 @@ const removeItem = (index, id) => {
   selectedItems.value.splice(index, 1);
 };
 
+// 从已选列表中移除员工
+const removeSelectedEmployee = (employee) => {
+  // 将员工的checked状态设为false
+  const foundEmployee = employeeList.value.find(item => item.id === employee.id);
+  if (foundEmployee) {
+    foundEmployee.checked = false;
+  }
+  
+  // 从临时选中列表中移除
+  const index = tempSelectedEmployees.value.findIndex(emp => emp.id === employee.id);
+  if (index !== -1) {
+    tempSelectedEmployees.value.splice(index, 1);
+  }
+  
+  // 更新全选状态
+  updateSelectAllStatus();
+};
+
 // 初始化选择器
 const initSelector = async () => {
   // 获取数据
@@ -561,6 +631,13 @@ const initSelector = async () => {
 
 // 显示对话框
 const showDialog = () => {
+  // 初始化临时选中列表
+  if (selectedItems.value.length > 0) {
+    tempSelectedEmployees.value = [...selectedItems.value];
+  } else {
+    tempSelectedEmployees.value = [];
+  }
+  
   // 初始化数据
   initSelector();
   dialogVisible.value = true;
@@ -568,9 +645,7 @@ const showDialog = () => {
 
 // 确认选择
 const handleConfirm = () => {
-  const selectedEmployeeIds = employeeList.value
-    .filter(item => item.checked)
-    .map(item => item.id);
+  const selectedEmployeeIds = tempSelectedEmployees.value.map(item => item.id);
   
   emit('update:modelValue', selectedEmployeeIds);
   emit('change', selectedEmployeeIds);
@@ -579,6 +654,8 @@ const handleConfirm = () => {
 
 // 取消选择
 const handleCancel = () => {
+  // 放弃临时选择
+  tempSelectedEmployees.value = [];
   dialogVisible.value = false;
 };
 
@@ -600,16 +677,100 @@ watch(() => props.modelValue, (newIds, oldIds) => {
   }
 }, { immediate: true, deep: true });
 
+// 监听选中员工变化，更新临时已选列表
+watch(selectedEmployees, (newVal) => {
+  // 更新临时选中列表，保留之前不在当前列表中的已选员工
+  const currentIds = new Set(newVal.map(emp => emp.id));
+  
+  // 移除tempSelectedEmployees中已经不再选中的员工
+  tempSelectedEmployees.value = tempSelectedEmployees.value.filter(emp => 
+    !currentIds.has(emp.id) || newVal.some(item => item.id === emp.id)
+  );
+  
+  // 添加新选中的员工
+  newVal.forEach(emp => {
+    if (!tempSelectedEmployees.value.some(item => item.id === emp.id)) {
+      tempSelectedEmployees.value.push(emp);
+    }
+  });
+}, { deep: true });
+
+// 监听子部门查询开关变化
+watch(childDeptEnable, () => {
+  // 如果当前在组织架构页面且有选中节点，重新加载员工列表
+  if (activeTab.value === 'organization' && currentActive.value && currentActive.value.length > 0) {
+    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
+  }
+});
+
+// 防抖函数
+const debounce = (fn, delay) => {
+  let timer = null;
+  return function(...args) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+    }, delay);
+  };
+};
+
+// 防抖处理过的搜索函数
+const debouncedSearch = debounce((keyword) => {
+  if (keyword) {
+    const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
+    const type = nodeId ? activeTab.value : null;
+    fetchEmployeesByNode(nodeId, type, keyword);
+  } else if (currentActive.value && currentActive.value.length > 0) {
+    // 如果搜索框清空，恢复显示当前选中节点的员工列表
+    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
+  } else {
+    // 如果没有选中节点，清空员工列表
+    employeeList.value = [];
+  }
+}, 300); // 300ms防抖
+
+// 监听搜索文本变化，触发搜索
+watch(searchText, (newValue) => {
+  debouncedSearch(newValue);
+}, { immediate: false });
+
 // 组件挂载时执行
 onMounted(() => {
-  // 初始化数据
-  if (props.defaultTab === 'organization') {
-    fetchOrganizationData();
-  }
-  
   // 获取已选员工详情
   fetchEmployeesByIds(props.modelValue);
 });
+
+// 处理搜索图标点击
+const handleSearchClick = () => {
+  if (searchText.value) {
+    const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
+    const type = nodeId ? activeTab.value : null;
+    fetchEmployeesByNode(nodeId, type, searchText.value);
+  }
+};
+
+// 处理回车键搜索
+const handleSearchEnter = () => {
+  if (searchText.value) {
+    const nodeId = currentActive.value && currentActive.value.length > 0 ? currentActive.value[0] : null;
+    const type = nodeId ? activeTab.value : null;
+    fetchEmployeesByNode(nodeId, type, searchText.value);
+  }
+};
+
+// 清除搜索
+const clearSearch = () => {
+  searchText.value = '';
+  if (currentActive.value && currentActive.value.length > 0) {
+    fetchEmployeesByNode(currentActive.value[0], activeTab.value);
+  } else {
+    // 如果没有选中节点，重置员工列表但保留选中状态
+    employeeList.value = employeeList.value.map(emp => ({
+      ...emp,
+      checked: tempSelectedEmployees.value.some(item => item.id === emp.id)
+    }));
+  }
+};
 </script>
 
 <style scoped>
@@ -700,6 +861,27 @@ onMounted(() => {
   margin-bottom: 16px;
 }
 
+.right-panel .search-box {
+  margin-top: 8px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.right-panel .search-box .t-input {
+  width: 100%;
+  border-radius: 4px;
+}
+
+.right-panel .search-box .t-input__suffix-icon {
+  cursor: pointer;
+}
+
+.right-panel .search-box .t-input__suffix-icon:hover {
+  color: var(--td-brand-color);
+}
+
 .selector-tabs {
   margin-bottom: 16px;
 }
@@ -747,6 +929,15 @@ onMounted(() => {
 .employee-title {
   font-weight: bold;
   font-size: 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.sub-dept-option {
+  margin-left: 10px;
+  font-weight: normal;
+  font-size: 14px;
 }
 
 .employee-count {
@@ -822,4 +1013,34 @@ onMounted(() => {
   display: flex;
   gap: 8px;
 }
+
+.selected-people-list {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.selected-people-item {
+  display: flex;
+  align-items: center;
+  background-color: #f0f0f0;
+  border-radius: 3px;
+  padding: 2px 8px 2px 2px;
+  gap: 8px;
+}
+
+.selected-people-item:hover {
+  background-color: #e0e0e0;
+}
+
+.selected-people-item .item-remove {
+  cursor: pointer;
+  color: #999;
+  font-size: 12px;
+}
+
+.selected-people-item .item-remove:hover {
+  color: #E34D59;
+}
 </style> 

package/src/components/senior/EbizSData/index.vue

@@ -70,7 +70,7 @@ export default {
 <script setup>
 import { defineProps, defineEmits, ref, onMounted, computed } from 'vue';
 import { dataService, EbizTableSort, EbizTdesignButton, EbizTdesignCard, EbizPageHeader } from "../../../index"
-import {  Space as TSpace } from 'tdesign-vue-next';
+import {  Space as TSpace, Pagination as TPagination, Input as TInput } from 'tdesign-vue-next';
 
 const currentPage = ref(1)
 const pageSize = ref(10)

package/src/components/senior/EbizSDialog/index.vue

@@ -48,7 +48,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { Dialog as TDialog, MessagePlugin, Icon as TIcon } from 'tdesign-vue-next'
+import { Dialog as TDialog, MessagePlugin, Icon as TIcon,Form as TForm } from 'tdesign-vue-next'
 import dataService from '../../../apiService/simpleDataService'
 
 const props = defineProps({

package/src/components/senior/EbizSForm/item.vue

@@ -1,7 +1,7 @@
 <template>
     <t-form-item :class="['ebiz-s-form-item', className]" :for="forAttr" :help="help" :label="label" :name="name"
         :style="customStyle" :rules="rules" :label-width="labelWidth" :label-align="labelAlign" :status="status"
-        @validate="handleValidate">
+        @validate="handleValidate" style="margin-bottom: 10px;">
         <!-- 输入框 -->
         <template v-if="type === 'input'">
             <t-input v-model="computedModelValue" :placeholder="placeholder || '请输入'" :disabled="disabled"
@@ -24,9 +24,32 @@
 
         <!-- 选择器 -->
         <template v-else-if="type === 'select'">
-            <t-select v-model="computedModelValue" :options="options" :placeholder="placeholder || '请选择'"
-                :disabled="disabled" :clearable="clearable" :filterable="filterable" :multiple="multiple"
-                :loading="loading" @change="handleChange" />
+            <template v-if="isRemote">
+                <ebiz-remote-select
+                    v-model="computedModelValue"
+                    :placeholder="placeholder || '请选择'"
+                    :disabled="disabled"
+                    :clearable="clearable"
+                    :filterable="filterable"
+                    :multiple="multiple"
+                    :loading="loading"
+                    :remote-api-config="remoteApiConfig"
+                    @change="handleChange"
+                />
+            </template>
+            <template v-else>
+                <t-select
+                    v-model="computedModelValue"
+                    :options="options"
+                    :placeholder="placeholder || '请选择'"
+                    :disabled="disabled"
+                    :clearable="clearable"
+                    :filterable="filterable"
+                    :multiple="multiple"
+                    :loading="loading"
+                    @change="handleChange"
+                />
+            </template>
         </template>
 
         <!-- 日期选择器 -->
@@ -134,6 +157,7 @@ import {
     TreeSelect as TTreeSelect,
     ColorPicker as TColorPicker
 } from 'tdesign-vue-next';
+import EbizRemoteSelect from '../../EbizRemoteSelect.vue';
 
 const props = defineProps({
     /**
@@ -436,6 +460,27 @@ const props = defineProps({
         type: String,
         default: 'file',
         validator: (val) => ['file', 'image', 'image-flow'].includes(val)
+    },
+    /**
+     * 是否开启远程搜索
+     */
+    isRemote: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * 远程搜索配置
+     */
+    remoteApiConfig: {
+        type: Object,
+        default: () => ({
+            url: '',
+            method: 'GET',
+            params: {},
+            data: {},
+            headers: {},
+            transformResponse: null
+        })
     }
 });