@ebiz/designer-components 0.0.47 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.0.47",
+  "version": "0.0.49",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -17,9 +17,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@opentiny/vue": "~3.20.0",
-    "@opentiny/vue-design-smb": "~3.20.0",
-    "@opentiny/vue-icon": "~3.20.0",
     "axios": "^1.8.1",
     "echarts": "^5.6.0",
     "tdesign-vue-next": "^1.12.0",

package/src/apiService/simpleDataService.js

@@ -5,7 +5,7 @@
  */
 
 import axios from 'axios'
-import { TinyNotify } from '@opentiny/vue'
+// import { TinyNotify } from '@opentiny/vue'
 // 从环境变量获取API基础URL
 const API_BASE_URL = window.location.origin + '/api'
 
@@ -69,58 +69,58 @@ axiosInstance.interceptors.response.use(
 
       switch (status) {
         case 401:
-          TinyNotify({
-            type: 'warning',
-            title: '未授权',
-            message: '您无权限访问，请授权后重试',
-            position: 'top-right',
-            duration: 2000
-          })
+          // TinyNotify({
+          //   type: 'warning',
+          //   title: '未授权',
+          //   message: '您无权限访问，请授权后重试',
+          //   position: 'top-right',
+          //   duration: 2000
+          // })
           break
         case 403:
-          TinyNotify({
-            type: 'warning',
-            title: '权限不足',
-            message: '禁止访问，权限不足',
-            position: 'top-right',
-            duration: 2000
-          })
+          // TinyNotify({
+          //   type: 'warning',
+          //   title: '权限不足',
+          //   message: '禁止访问，权限不足',
+          //   position: 'top-right',
+          //   duration: 2000
+          // })
           break
         case 404:
-          TinyNotify({
-            type: 'warning',
-            title: '404',
-            message: '请求的资源不存在',
-            position: 'top-right',
-            duration: 2000
-          })
+          // TinyNotify({
+          //   type: 'warning',
+          //   title: '404',
+          //   message: '请求的资源不存在',
+          //   position: 'top-right',
+          //   duration: 2000
+          // })
           break
         case 500:
-          TinyNotify({
-            type: 'warning',
-            title: '错误',
-            message: '服务器内部错误',
-            position: 'top-right',
-            duration: 2000
-          })
+          // TinyNotify({
+          //   type: 'warning',
+          //   title: '错误',
+          //   message: '服务器内部错误',
+          //   position: 'top-right',
+          //   duration: 2000
+          // })
           break
         default:
-          TinyNotify({
-            type: 'warning',
-            title: '请求失败',
-            message: error.message,
-            position: 'top-right',
-            duration: 2000
-          })
+          // TinyNotify({
+          //   type: 'warning',
+          //   title: '请求失败',
+          //   message: error.message,
+          //   position: 'top-right',
+          //   duration: 2000
+          // })
       }
     } else {
-      TinyNotify({
-        type: 'error',
-        title: '网络错误',
-        message: error.message,
-        position: 'top-right',
-        duration: 2000
-      })
+      // TinyNotify({
+      //   type: 'error',
+      //   title: '网络错误',
+      //   message: error.message,
+      //   position: 'top-right',
+      //   duration: 2000
+      // })
       // message.error('网络错误，请检查您的网络连接');
     }
 

package/src/assets/styles/charts/main.less

@@ -1,30 +0,0 @@
-/**
- * Import all chart less files
- */
-
-// Import main charts less file
-@import '../../../components/charts/index.less';
-
-// Import chart features
-@import '../../../components/charts/feature/drag/index.less';
-@import '../../../components/charts/feature/card/index.less';
-@import '../../../components/charts/feature/expandLegend/index.less';
-
-// Import chart components
-@import '../../../components/charts/components/FlowChart/index.less';
-@import '../../../components/charts/components/GanttChart/index.less';
-@import '../../../components/charts/components/HoneycombChart/index.less';
-@import '../../../components/charts/components/OrganizationChart/index.less';
-@import '../../../components/charts/components/RiverChart/index.less';
-@import '../../../components/charts/components/SnowFlakeChart/index.less';
-@import '../../../components/charts/components/TerraceChart/index.less';
-@import '../../../components/charts/components/TimelineChart/index.less';
-@import '../../../components/charts/components/WaveChart/index.less';
-@import '../../../components/charts/components/MilestoneChart/index.less';
-
-// Import chart framework modules
-@import '../../../components/charts/framework/charts/MindmapChart/index.less';
-@import '../../../components/charts/framework/module/line/index.less';
-@import '../../../components/charts/framework/module/connector/index.less';
-@import '../../../components/charts/framework/module/canvas/index.less';
-@import '../../../components/charts/framework/module/contextmenu/index.less'; 

package/src/components/Button.vue

@@ -1,9 +1,7 @@
 <template>
-    <tiny-tooltip :content="!isNormal && !apiConfig.apiId ? tooltipText : ''" placement="top">
-        <t-button :disabled="disabled || loading" :theme="type" :size="size" @click="click">
-            <slot>{{ text }}</slot>
-        </t-button>
-    </tiny-tooltip>
+    <t-button :disabled="disabled || loading" :theme="type" :size="size" @click="click">
+        <slot>{{ text }}</slot>
+    </t-button>
 </template>
 
 
@@ -17,7 +15,6 @@ export default {
 
 import { ref, reactive, computed, toRef, toRefs } from 'vue';
 import { Button as TButton } from 'tdesign-vue-next';
-import { TinyTooltip } from '@opentiny/vue';
 import dataService from '../apiService/simpleDataService';
 
 const props = defineProps({

package/src/components/EbizApproval.vue

@@ -0,0 +1,327 @@
+<template>
+    <div class="ebiz-approval">
+        <t-card>
+            <!-- 审批人部分 -->
+            <div class="approval-section">
+                <div class="approval-title">审批流程</div>
+
+                <div class="section-header">
+                    <t-icon name="user" class="section-icon" />
+                    <span class="section-title">
+                        审批人
+                        <span class="required" v-if="required">*</span>
+                    </span>
+                </div>
+                <div class="approver-list">
+                    <div class="approver-row">
+                        <template v-for="(approver, index) in approvers" :key="index">
+                            <div class="approver-item">
+                                <t-avatar :image="approver.avatar" size="small">
+                                    {{ getAvatarText(approver.name) }}
+                                </t-avatar>
+                                <div class="user-info" :class="{ 'no-delete': required && approvers.length <= 1 }">
+                                    <span class="approver-name">{{ approver.name }}</span>
+                                    <t-icon v-if="!required || approvers.length > 1" name="close" size="16px"
+                                        @click="removeEmployee(approver, 'approver')" />
+                                </div>
+                            </div>
+                            <t-icon v-if="index < approvers.length - 1" name="chevron-right" class="arrow-icon" />
+                        </template>
+                        <t-button theme="default" variant="text" @click="handleAddApprover">
+                            <template #icon>
+                                <t-icon name="add" />
+                            </template>
+                            添加审批人
+                        </t-button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 抄送人部分 -->
+            <div v-if="showCC" class="cc-section">
+                <div class="section-header">
+                    <t-icon name="user-add" class="section-icon" />
+                    <span class="section-title">抄送人</span>
+                </div>
+                <div class="cc-list">
+                    <div class="cc-row">
+                        <template v-for="(cc, index) in ccEmployees" :key="index">
+                            <div class="cc-item">
+                                <t-avatar :image="cc.avatar" size="small">
+                                    {{ getAvatarText(cc.name) }}
+                                </t-avatar>
+                                <div class="user-info">
+                                    <span class="cc-name">{{ cc.name }}</span>
+                                    <t-icon name="close" size="16px" @click="removeEmployee(cc, 'cc')" />
+                                </div>
+                            </div>
+                        </template>
+                        <t-button theme="default" variant="text" @click="handleAddCC">
+                            <template #icon>
+                                <t-icon name="add" />
+                            </template>
+                            添加抄送人
+                        </t-button>
+                    </div>
+                </div>
+            </div>
+        </t-card>
+
+        <!-- 审批人选择弹窗 -->
+        <ebiz-employee-selector  :showDefault="false" v-model:visible="showApproverSelector" v-model:value="tempApprover"
+            @change="handleApproverSelect" :single="true" />
+        <ebiz-employee-selector  :showDefault="false" v-model:visible="showCCSelector" v-model:value="selectedCC" @change="handleCCSelect"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { Icon as TIcon, Avatar as TAvatar, Card as TCard, Button as TButton, Dialog as TDialog } from 'tdesign-vue-next'
+import EbizEmployeeSelector from './EbizEmployeeSelector.vue'
+import dataService from '../apiService/simpleDataService'
+
+interface Employee {
+  id: string | number
+  name: string
+  no: string
+  avatar?: string
+}
+
+interface Props {
+  approverList: (string | number)[] // 选中的审批人ID列表
+  ccList: (string | number)[] // 选中的抄送人ID列表
+  key: string // 审批流程的唯一标识
+  id: number // 审批流程的编号
+  required: boolean // 是否必填
+  type?: 'organization' | 'role' | 'all' // 查询类型
+  value?: string // 查询值
+  showRootOrg?: boolean // 是否显示顶层组织
+  childDeptEnable?: boolean // 是否包含子部门
+  showCC?: boolean // 是否显示抄送人模块
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  approverList: () => [],
+  ccList: () => [],
+  key: '',
+  id: 0,
+  required: true,
+  showRootOrg: true,
+  childDeptEnable: false,
+  showCC: true
+})
+
+const emit = defineEmits(['update:approverList', 'update:ccList', 'change'])
+
+const fetchHistory = () => {
+    console.log(props)
+    dataService.fetch({
+        bussinessKey: props.id?props.id.toString():null,
+        type: props.key
+    }, {}, '/tasks/process/detail').then(res=>{
+        selectedApprover.value = res?.variables?.form?.approverList ?? [];
+        selectedCC.value = res?.variables?.form?.ccList ?? [];
+    })
+}
+
+
+// 状态变量
+const showApproverSelector = ref(false)
+const showCCSelector = ref(false)
+const employeeList = ref<Employee[]>([])
+const loading = ref(false)
+const tempApprover = ref([])
+// 计算属性：已选审批人列表
+const approvers = ref<Employee[]>([])
+
+// 计算属性：已选抄送人列表
+const ccEmployees = ref<Employee[]>([])
+
+// 计算属性：审批人选择器的值
+const selectedApprover = computed({
+  get: () => props.approverList,
+  set: (val) => {
+    approvers.value = val.map(id => employeeList.value.find(emp => emp.id == id)).filter(Boolean)
+    console.log(approvers.value,val)
+    emit('change', {
+      type: 'approver',
+      ids: val,
+      employees: approvers.value
+    })
+    emit('update:approverList', val)
+  }
+})
+
+// 计算属性：抄送人选择器的值
+const selectedCC = computed({
+  get: () => props.ccList,
+  set: (val) => {
+
+    ccEmployees.value = val.map(id => employeeList.value.find(emp => emp.id == id)).filter(Boolean)
+    console.log(ccEmployees.value,161,val)
+    emit('change', {
+      type: 'cc',
+      ids: val,
+      employees: ccEmployees.value
+    })
+    emit('update:ccList', val)
+  }
+})
+
+// 获取头像文字
+const getAvatarText = (name: string) => {
+  return name ? name.charAt(0) : ''
+}
+
+// 获取员工列表
+const fetchEmployeeList = async () => {
+  loading.value = true
+  try {
+    const response = await dataService.fetch(
+      {},
+      {},
+      '/process/userList'
+    )
+    employeeList.value = response || [];
+      if(props.id) {
+        fetchHistory();
+      }
+  } catch (error) {
+    employeeList.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+// 处理审批人选择
+const handleApproverSelect = (data: []) => {
+  console.log(data,195)
+  if(!data[0]) return;
+  if(selectedApprover.value.includes(data[0])) {
+    let index = selectedApprover.value.indexOf(data[0]);
+    selectedApprover.value.splice(index, 1);
+  };
+  selectedApprover.value = [...selectedApprover.value, data[0]];
+  console.log(selectedApprover.value,200)
+   tempApprover.value = [];
+}
+
+// 处理抄送人选择
+const handleCCSelect = (data: []) => {
+  selectedCC.value = data;
+}
+
+// 移除人员
+const removeEmployee = (employee: Employee, type: 'approver' | 'cc') => {
+  if (type === 'approver') {
+    if (props.required && props.approverList.length <= 1) {
+      return
+    }
+    const newList = props.approverList.filter(id => id !== employee.id);
+    selectedApprover.value = newList;
+  } else {
+    const newList = props.ccList.filter(id => id !== employee.id);
+    selectedCC.value = newList;
+  }
+}
+
+// 处理添加审批人
+const handleAddApprover = () => {
+  showApproverSelector.value = true
+}
+
+// 处理添加抄送人
+const handleAddCC = () => {
+  showCCSelector.value = true
+}
+
+// 初始化时获取员工列表
+fetchEmployeeList()
+
+// 监听查询条件变化
+watch([() => props.type, () => props.value, () => props.showRootOrg, () => props.childDeptEnable], () => {
+  fetchEmployeeList()
+})
+</script>
+
+<style lang="less" scoped>
+.ebiz-approval {
+  .approval-section {
+    margin-bottom: 24px;
+  }
+
+  .approval-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 16px;
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .section-icon {
+      margin-right: 8px;
+    }
+
+    .section-title {
+      font-size: 14px;
+      color: var(--td-text-color-primary);
+
+      .required {
+        color: var(--td-error-color);
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .approver-list,
+  .cc-list {
+    .approver-row,
+    .cc-row {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .approver-item,
+    .cc-item {
+      display: flex;
+      align-items: center;
+      padding: 4px 8px;
+      background: var(--td-bg-color-container);
+      border: 1px solid var(--td-component-border);
+      border-radius: 3px;
+
+      .user-info {
+        margin-left: 8px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        user-select: none;
+        &.no-delete {
+          margin-right: 0;
+        }
+      }
+
+      .approver-name,
+      .cc-name {
+        font-size: 14px;
+        color: var(--td-text-color-primary);
+      }
+    }
+
+    .arrow-icon {
+      color: var(--td-text-color-secondary);
+    }
+  }
+
+  .cc-section {
+    margin-top: 24px;
+  }
+}
+</style> 

package/src/components/EbizEmployeeSelector.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ebiz-employee-selector">
     <!-- 选择框展示区 -->
-    <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 10px;">
+    <div v-if="showDefault" 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" />
@@ -40,7 +40,6 @@
               <div v-if="loading" class="loading-container">
                 <t-loading />
               </div>
-
               <!-- 组织架构 -->
               <div v-show="activeTab === 'organization'" class="tab-content">
                 <t-tree ref="organizationTree" :data="organizationData"
@@ -50,7 +49,7 @@
 
               <!-- 角色 -->
               <div v-show="activeTab === 'role'" class="tab-content">
-                <t-tree ref="roleTree" :data="roleData" :keys="{ label: 'name', value: 'id' }" hover activable
+                <t-tree ref="roleTree" :data="roleData" :keys="{ label: 'name', value: 'code' }" hover activable
                   :active="currentActive" @active="handleActive" />
               </div>
 
@@ -93,7 +92,7 @@
                   <t-checkbox v-model="childDeptEnable">包含子部门</t-checkbox>
                 </div>
               </div>
-              <div class="employee-count">
+              <div class="employee-count" v-if="!single">
                 <t-checkbox v-model="selectAll" @change="handleSelectAll">全选</t-checkbox>
                 <span class="count-info">共 {{ employeeList.length }} 人</span>
               </div>
@@ -181,6 +180,10 @@ import dataService from '../apiService/simpleDataService';
 // 定义组件属性
 const props = defineProps({
   // 选中的数据，支持v-model，只存储ID列表
+  showDefault: {
+    type: Boolean,
+    default: true
+  },
   modelValue: {
     type: Array,
     default: () => []
@@ -190,6 +193,15 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  // 是否展示默认标签页
+  showDefaultTab: {
+    type: Boolean,
+    default: true
+  },
+  visible:{
+    type: Boolean,
+    default: true
+  },
   // 是否包含部门
   includeDepartment: {
     type: Boolean,
@@ -216,7 +228,15 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue', 'change']);
 
 // 内部状态变量
-const dialogVisible = ref(false);
+const dialogVisible = computed({
+  set(val){
+    emit('update:visible', val)
+  },
+  get(){
+    return props.visible
+  }
+});
+
 const searchText = ref('');
 const activeTab = ref(props.defaultTab);
 const loading = ref(false);
@@ -299,6 +319,14 @@ const filteredEmployeeList = computed(() => {
   });
 });
 
+const allData = ref([])
+
+const fetchAllData = async () => {
+  const response = await dataService.fetch({}, {}, '/process/deptList');
+  employeeList.value = response;
+}
+fetchAllData()
+
 // 获取组织架构数据
 const fetchOrganizationData = async () => {
   loading.value = true;
@@ -310,7 +338,8 @@ const fetchOrganizationData = async () => {
         key: 'organizationalStructure'
       },"/process/deptList"
     );
-    organizationData.value = response
+    organizationData.value = response;
+    handleActive(response[0].id, 'organization')
     // organizationData.value = processOrgData(response.data || []);
   } catch (error) {
     MessagePlugin.error({
@@ -411,7 +440,6 @@ const fetchSubordinateData = async () => {
 // 根据节点ID获取员工列表
 const fetchEmployeesByNode = async (nodeId, type, keyword = searchText.value) => {
   loading.value = true;
-  
   try {
     const params = {};
     
@@ -425,7 +453,7 @@ const fetchEmployeesByNode = async (nodeId, type, keyword = searchText.value) =>
           params.childDeptEnable = childDeptEnable.value;
           break;
         case 'role':
-          params.roleId = nodeId;
+          params.roleKeyWork = nodeId[0];
           break;
         case 'position':
           params.positionId = nodeId;
@@ -449,19 +477,19 @@ const fetchEmployeesByNode = async (nodeId, type, keyword = searchText.value) =>
       {},
       '/process/userList'
     );
-    
     // 获取当前已选择的员工ID列表
-    const selectedIds = new Set(tempSelectedEmployees.value.map(emp => emp.id));
+    const selectedIds = [...new Set(tempSelectedEmployees.value.map(emp => emp.id))];
     
     // 处理返回数据，添加checked属性，保留已选状态
     const employees = (response || []).map(emp => ({
       ...emp,
-      checked: selectedIds.has(emp.id)
+      checked: selectedIds.includes(emp.id)
     }));
 
     employeeList.value = employees;
     updateSelectAllStatus();
   } catch (error) {
+    console.log(error,592)
     MessagePlugin.error({
       content: '获取员工列表失败',
       duration: 3000
@@ -538,13 +566,13 @@ const handleSelectAll = (checked) => {
 // 处理选中状态变更
 const handleCheckChange = (item) => {
   // 单选模式下，取消其他选中
-  if (props.single && item.checked) {
+  if (props.single) {
     employeeList.value.forEach(emp => {
       if (emp.id !== item.id) {
         emp.checked = false;
       }
     });
-    
+    console.log(item,573)
     // 单选模式下，直接替换tempSelectedEmployees
     tempSelectedEmployees.value = item.checked ? [item] : [];
   } else {
@@ -639,7 +667,7 @@ const showDialog = () => {
   }
   
   // 初始化数据
-  initSelector();
+  // initSelector();
   dialogVisible.value = true;
 };
 
@@ -676,7 +704,14 @@ watch(() => props.modelValue, (newIds, oldIds) => {
     fetchEmployeesByIds(newIds);
   }
 }, { immediate: true, deep: true });
-
+watch(() => props.visible, (val) => {
+  tempSelectedEmployees.value = [];
+  currentActive.value = [];
+  currentNodeName.value = '';
+  if (val) {
+    fetchOrganizationData()
+  }
+}, { immediate: true })
 // 监听选中员工变化，更新临时已选列表
 watch(selectedEmployees, (newVal) => {
   // 更新临时选中列表，保留之前不在当前列表中的已选员工