@ebiz/designer-components 0.1.124 → 0.1.125

package/src/components/EbizApprovalV2.vue

@@ -1,714 +1,714 @@
-<template>
-  <div class="ebiz-approval">
-    <t-card>
-      <!-- 审批流程节点列表 -->
-      <div class="approval-section">
-        <slot name="title">
-          <div class="approval-title">审批流程</div>
-        </slot>
-
-        <!-- 节点列表 -->
-        <div v-if="nodeConfigs.length > 0" class="node-list">
-          <div v-for="(node, index) in nodeConfigs" :key="node.nodeId" class="node-item">
-            <!-- 节点信息 -->
-            <div class="node-header">
-              <t-icon name="user" class="node-icon" />
-              <span class="node-name">{{ node.nodeName }}</span>
-              <span class="node-type-badge" :class="{ 'parallel': isParallelNode(node) }">
-                {{ node.nodeTypeDesc || node.multiInstanceTypeDesc }}
-              </span>
-              <span class="required" v-if="required">*</span>
-              <div class="node-desc" v-if="node.description">{{ node.description }}</div>
-            </div>
-
-            <!-- 节点审批人 -->
-            <div class="node-approvers">
-              <!-- 会签节点：支持添加/删除 -->
-              <template v-if="needManualConfig(node)">
-                <div class="approver-row">
-                  <template v-for="(approver, approverIndex) in getNodeApprovers(node.nodeId)" :key="approver.id">
-                    <div class="approver-item">
-                      <t-avatar :image="approver.avatar" size="small">
-                        {{ getAvatarText(approver.name) }}
-                      </t-avatar>
-                      <div class="user-info" :class="{ 'no-delete': required && getNodeApprovers(node.nodeId).length <= 1 }">
-                        <span class="approver-name">{{ approver.no }} - {{ approver.name }}</span>
-                        <t-icon name="close" size="16px" @click="removeNodeApprover(node.nodeId, approver.id)" />
-                      </div>
-                    </div>
-                    <t-icon v-if="approverIndex < getNodeApprovers(node.nodeId).length - 1" name="chevron-right" class="arrow-icon" />
-                  </template>
-
-                  <!-- 添加审批人按钮 -->
-                  <t-button
-                    theme="default"
-                    variant="text"
-                    @click="handleAddNodeApprover(node.nodeId)"
-                  >
-                    <template #icon>
-                      <t-icon name="add" />
-                    </template>
-                    添加审批人
-                  </t-button>
-                </div>
-              </template>
-
-              <!-- 非会签节点：只读显示 -->
-              <template v-else>
-                <div class="readonly-approvers">
-                  <template v-if="getNodeApprovers(node.nodeId).length > 0">
-                    <div class="approver-row">
-                      <template v-for="(approver, approverIndex) in getNodeApprovers(node.nodeId)" :key="approver.id">
-                        <div class="approver-item readonly">
-                          <t-avatar :image="approver.avatar" size="small">
-                            {{ getAvatarText(approver.name) }}
-                          </t-avatar>
-                          <div class="user-info">
-                            <span class="approver-name">{{ approver.no }} - {{ approver.name }}</span>
-                          </div>
-                        </div>
-                        <t-icon v-if="approverIndex < getNodeApprovers(node.nodeId).length - 1" name="chevron-right" class="arrow-icon" />
-                      </template>
-                    </div>
-                  </template>
-                  <div v-else class="no-approvers">
-                    <t-icon name="user" size="16px" />
-                    <span>系统自动分配审批人</span>
-                  </div>
-                </div>
-              </template>
-            </div>
-
-            <!-- 节点分隔线 -->
-            <!-- <div v-if="index < nodeConfigs.length - 1" class="node-divider">
-            </div> -->
-          </div>
-        </div>
-
-        <!-- 无配置提示 -->
-        <div v-else class="no-config">
-          <t-icon name="info-circle" size="20px" />
-          <span>暂无流程配置信息</span>
-        </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.id)" v-if="canEdit" />
-                </div>
-              </div>
-            </template>
-            <t-button
-              theme="default"
-              variant="text"
-              @click="handleAddCC"
-              v-if="canEdit"
-            >
-              <template #icon>
-                <t-icon name="add" />
-              </template>
-              添加抄送人
-            </t-button>
-          </div>
-        </div>
-      </div>
-    </t-card>
-
-    <!-- 审批人选择弹窗 -->
-    <ebiz-employee-selector v-if="showApproverSelector" :showDefault="false" v-model:visible="showApproverSelector"
-      @change="handleApproverSelect" :single="true" />
-    <ebiz-employee-selector v-if="showCCSelector" :showDefault="false" v-model:visible="showCCSelector"
-      @change="handleCCSelect" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, computed, onMounted } from 'vue'
-import { Icon as TIcon, Avatar as TAvatar, Card as TCard, Button as TButton } 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 ProcessNodeConfig {
-  nodeId: string
-  nodeName: string
-  nodeType: string
-  nodeTypeDesc: string
-  multiInstanceType: string
-  multiInstanceTypeDesc: string
-  isMultiInstance: boolean
-  needManualConfig: boolean
-  ruleType: string
-  ruleTypeDesc: string
-  deptIds: number[]
-  roleIds: number[]
-  userIds: number[]
-  defaultApprovers: ApproverConfig[]
-  extensionProperties: Record<string, any>
-  description: string
-  priority: number
-  formKey: string
-  dueDate: string
-  collection: string
-}
-
-interface ApproverConfig {
-  userId: number | null
-  userName: string | null
-  userAccount: string | null
-  deptId: number | null
-  deptName: string | null
-  roleIds: number[] | null
-  roleNames: string[] | null
-  isDefault: boolean | null
-}
-
-interface NodeApproverData {
-  nodeId: string
-  approvers: Employee[]
-  selectedIds: (string | number)[]
-}
-
-interface Props {
-  approverList: (string | number)[]
-  ccList: (string | number)[]
-  workFlowKey: string
-  id: number
-  required: boolean
-  type?: 'organization' | 'role' | 'all'
-  value?: string
-  showRootOrg?: boolean
-  childDeptEnable?: boolean
-  showCC?: boolean
-  canEdit?: boolean,
-  data?: Record<string, any> // 数据对象，用于存储ccList、approverList和节点审批人数据
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  approverList: () => [],
-  ccList: () => [],
-  workFlowKey: '',
-  id: 0,
-  required: true,
-  showRootOrg: true,
-  childDeptEnable: false,
-  showCC: true,
-  canEdit: true,
-  data: () => ({})
-})
-
-const emit = defineEmits(['update:approverList', 'update:ccList', 'update:data', 'change'])
-
-// 状态变量
-const showApproverSelector = ref(false) // 是否显示审批人选择器
-const showCCSelector = ref(false) // 是否显示抄送人选择器
-const currentNodeId = ref('')
-const employeeList = ref<Employee[]>([])
-const nodeConfigs = ref<ProcessNodeConfig[]>([])
-const nodeApproverMap = ref<Map<string, NodeApproverData>>(new Map())
-
-// 已选抄送人列表
-const ccEmployees = ref<Employee[]>([])
-const ccSelectorValue = ref<(string | number)[]>([]) // 抄送人选择器的值
-
-// 获取头像文字
-const getAvatarText = (name: string) => {
-  return name ? name.charAt(0) : ''
-}
-
-// 获取流程配置
-const fetchProcessConfig = async () => {
-  if (!props.workFlowKey) return
-
-  try {
-    const response = await dataService.fetch(
-      { processKey: props.workFlowKey },
-      {},
-      '/process-definitions/config'
-    )
-    nodeConfigs.value = response?.nodeConfigs || []
-    initializeNodeApproverData()
-  } catch (error) {
-    console.error('获取流程配置失败:', error)
-    nodeConfigs.value = []
-  }
-}
-
-// 初始化节点审批人数据
-const initializeNodeApproverData = () => {
-  nodeApproverMap.value.clear()
-
-  nodeConfigs.value.forEach(node => {
-    const nodeData: NodeApproverData = {
-      nodeId: node.nodeId,
-      approvers: [],
-      selectedIds: []
-    }
-
-    // 设置默认审批人
-    if (node.defaultApprovers?.length) {
-      node.defaultApprovers.forEach(approver => {
-        if (approver.userId && approver.userName) {
-          const employee: Employee = {
-            id: approver.userId,
-            name: approver.userName,
-            no: approver.userAccount || '',
-          }
-          nodeData.approvers.push(employee)
-          nodeData.selectedIds.push(approver.userId)
-          if (!employeeList.value.find(emp => emp.id === employee.id)) {
-            employeeList.value.push(employee)
-          }
-        }
-      })
-    }
-
-    nodeApproverMap.value.set(node.nodeId, nodeData)
-  })
-
-  updateGlobalApproverList()
-}
-
-// 分配审批人到节点
-const distributeApproversToNodes = (approvers: any) => {
-  if (!approvers || !nodeConfigs.value.length) return
-
-  for (const k in approvers) {
-    const node = nodeConfigs.value.find(n => n.collection === k)
-    if (node && nodeApproverMap.value.has(node.nodeId)) {
-      const nodeData = nodeApproverMap.value.get(node.nodeId)!
-      if (approvers[k].length > 0 && (k === 'approverList' || node.needManualConfig)) {
-        nodeData.approvers = []
-        nodeData.selectedIds = []
-        approvers[k].forEach((info: Employee) => {
-          if (info.id && info.name) {
-            const employee: Employee = {
-              id: info.id,
-              name: info.name,
-              no: info.no || '',
-            }
-            nodeData.approvers.push(employee)
-            nodeData.selectedIds.push(info.id)
-            if (!employeeList.value.find(emp => emp.id === employee.id)) {
-              employeeList.value.push(employee)
-            }
-          }
-        })
-      }
-    }
-  }
-  updateGlobalApproverList()
-}
-
-// 更新节点collection字段数据到data属性
-const updateNodeCollectionData = (): void => {
-    // 将选择的人员ID列表写入data对应的collection字段
-    const newData = { ...props.data }
-    nodeApproverMap.value.forEach((nodeData, nodeId) => {
-        // 查找对应的节点配置
-        const nodeConfig = nodeConfigs.value.find(n => n.nodeId === nodeId)
-        if (!nodeConfig || !nodeConfig.collection) return
-        newData[nodeConfig.collection] = nodeData.selectedIds
-    })
-    emit('update:data', newData)
-}
-
-// 更新全局审批人列表
-const updateGlobalApproverList = () => {
-  const allApproverIds: (string | number)[] = []
-  nodeApproverMap.value.forEach((nodeData, nodeId) => {
-    const node = nodeConfigs.value.find(n => n.nodeId === nodeId)
-    if (node && node.collection === 'approverList') {
-      allApproverIds.push(...nodeData.selectedIds)
-    }
-  })
-  // 同时更新节点collection字段数据到data属性
-  updateNodeCollectionData()
-  emit('update:approverList', allApproverIds)
-  emit('change', {
-    type: 'approver',
-    ids: allApproverIds,
-    employees: getAllApprovers()
-  })
-}
-
-// 获取所有审批人
-const getAllApprovers = (): Employee[] => {
-  const allApprovers: Employee[] = []
-  nodeApproverMap.value.forEach(nodeData => {
-    allApprovers.push(...nodeData.approvers)
-  })
-  return allApprovers
-}
-
-// 检查节点是否为会签节点
-const isParallelNode = (node: ProcessNodeConfig): boolean => {
-  return node.nodeType === 'PARALLEL'
-}
-
-// 检查节点是否需要手动配置
-const needManualConfig = (node: ProcessNodeConfig): boolean => {
-  return node.needManualConfig === true || isParallelNode(node)
-}
-
-// 获取节点的审批人数据
-const getNodeApprovers = (nodeId: string): Employee[] => {
-  return nodeApproverMap.value.get(nodeId)?.approvers || []
-}
-
-// 获取员工列表
-const fetchEmployeeList = async () => {
-  try {
-    const response = await dataService.fetch({}, {}, '/process/userList')
-    employeeList.value = response || []
-    if (props.id) {
-      fetchHistory()
-    }
-  } catch (error) {
-    employeeList.value = []
-  }
-}
-
-// 获取历史审批信息
-const fetchHistory = () => {
-  dataService.fetch({
-    bussinessKey: props.id ? props.id.toString() : null,
-    type: props.workFlowKey
-  }, {}, '/tasks/process/detail').then(res => {
-    const ccList = res?.variables?.form?.ccList ?? []
-    ccEmployees.value = ccList.map(id => employeeList.value.find(emp => emp.id == id)).filter(Boolean)
-
-    const approverList = res?.variables?.form?.approverList ?? []
-    if (approverList.length) {
-      distributeApproversToNodes(approverList)
-    }
-  })
-}
-
-// 处理审批人选择
-const handleApproverSelect = (id: string | number, employees: Employee[]) => {
-  console.log('选择的审批人:', id, employees[0])
-  if (!currentNodeId.value || !id) return
-
-  const employee = employees[0]
-  // 添加到全局员工列表
-  if (!employeeList.value.find(emp => emp.id === id)) {
-    employeeList.value.push(employee)
-  }
-
-  const nodeData = nodeApproverMap.value.get(currentNodeId.value)
-  if (!nodeData) return
-
-  // 检查是否已存在
-  if (nodeData.selectedIds.includes(id)) {
-    const index = nodeData.selectedIds.indexOf(id)
-    nodeData.selectedIds.splice(index, 1)
-    nodeData.approvers.splice(index, 1)
-  } else {
-    nodeData.approvers.push(employee)
-    nodeData.selectedIds.push(id)
-  }
-
-  console.log('节点审批人数据:', nodeData)
-  updateGlobalApproverList()
-  showApproverSelector.value = false
-}
-
-// 移除节点审批人
-const removeNodeApprover = (nodeId: string, employeeId: string | number) => {
-  const nodeData = nodeApproverMap.value.get(nodeId)
-  if (!nodeData) return
-
-  const index = nodeData.selectedIds.findIndex(id => Number(id) === Number(employeeId))
-  if (index !== -1) {
-    nodeData.selectedIds.splice(index, 1)
-    nodeData.approvers.splice(index, 1)
-    updateGlobalApproverList()
-  }
-}
-
-// 处理添加节点审批人
-const handleAddNodeApprover = (nodeId: string) => {
-  currentNodeId.value = nodeId
-  showApproverSelector.value = true
-}
-
-// 更新抄送人列表
-const updateCCList = (ccIds: (string | number)[]): void => {
-    ccEmployees.value = ccIds.map((id) => employeeList.value.find((emp) => emp.id == id)).filter((emp): emp is Employee => emp !== undefined)
-    ccSelectorValue.value = ccIds
-
-    emit('update:ccList', ccIds)
-    emit('change', {
-        type: 'cc',
-        ids: ccIds,
-        employees: ccEmployees.value
-    })
-}
-
-// 处理抄送人选择
-const handleCCSelect = (ids: (string | number)[], employees: Employee[]):void => {
-    employeeList.value = [...employeeList.value, ...employees]
-    ccSelectorValue.value = ids
-    updateCCList(ids)
-}
-
-// 处理添加抄送人
-const handleAddCC = () => {
-    showCCSelector.value = true
-}
-
-// 移除抄送人
-const removeEmployee = (employeeId: string | number) => {
-  const newCCIds = ccEmployees.value.filter(emp => Number(emp.id) !== Number(employeeId)).map(emp => emp.id)
-  updateCCList(newCCIds)
-}
-
-// 自动填充功能
-const autoFill = () => {
-  if (!props.workFlowKey) return
-
-  dataService.fetch(
-    { businessType: props.workFlowKey },
-    {},
-    '/tasks/last-approver'
-  ).then(res => {
-    const { ccList = [], ...rest } = res || {}
-    // 更新抄送人
-    employeeList.value = [...employeeList.value, ...ccList]
-    updateCCList(ccList.map((item) => item.id))
-    distributeApproversToNodes(rest)
-  }).catch(err => {
-    console.error('自动填充失败:', err)
-  })
-}
-
-onMounted(() => {
-  fetchEmployeeList()
-  if (props.workFlowKey) {
-    fetchProcessConfig().then(autoFill)
-  }
-})
-
-watch([() => props.workFlowKey], ([newKey, oldKey]) => {
-  if (newKey && newKey !== oldKey) {
-    fetchProcessConfig().then(autoFill)
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.ebiz-approval {
-  .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;
-      }
-    }
-  }
-
-  .node-list {
-    .node-item {
-      margin-bottom: 8px;
-
-      .node-header {
-        display: flex;
-        align-items: center;
-        margin-bottom: 8px;
-
-        .node-icon {
-          margin-right: 8px;
-        }
-
-        .node-name {
-          font-size: 14px;
-          color: var(--td-text-color-primary);
-          margin-right: 8px;
-        }
-
-        .node-type-badge {
-          padding: 0px 6px;
-          font-size: 10px;
-          height: 22px;
-          line-height: 22px;
-          background: #e6f7ff;
-          border-radius: 4px;
-          margin-right: 8px;
-          color: #1890ff;
-
-          &.parallel {
-            background: #fff2e8;
-            color: #fa8c16;
-          }
-        }
-
-        .required {
-          color: var(--td-error-color);
-          margin-left: 4px;
-        }
-
-        .node-desc {
-          font-size: 12px;
-          color: var(--td-text-color-secondary);
-          margin-left: 8px;
-        }
-      }
-
-        .approver-row {
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-          gap: 8px;
-
-          .approver-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;
-              }
-            }
-
-            &.ready-only {
-              background: #f5f5f5;
-              border-color: #d9d9d9;
-            }
-
-            .approver-name {
-              font-size: 14px;
-              color: var(--td-text-color-primary);
-            }
-          }
-
-          .arrow-icon {
-            color: var(--td-text-color-secondary);
-          }
-
-          .no-approvers {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 12px;
-            color: var(--td-text-color-secondary);
-            font-size: 12px;
-            background: var(--td-bg-color-container-weak);
-            border-radius: 4px;
-          }
-        }
-
-      .node-divider {
-        height: 1px;
-        // background: var(--td-component-border);
-        margin: 16px 0;
-      }
-    }
-  }
-
-  .no-config {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    padding: 24px;
-    color: var(--td-text-color-secondary);
-    font-size: 14px;
-  }
-}
-  .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;
-  }
+<template>
+  <div class="ebiz-approval">
+    <t-card>
+      <!-- 审批流程节点列表 -->
+      <div class="approval-section">
+        <slot name="title">
+          <div class="approval-title">审批流程</div>
+        </slot>
+
+        <!-- 节点列表 -->
+        <div v-if="nodeConfigs.length > 0" class="node-list">
+          <div v-for="(node, index) in nodeConfigs" :key="node.nodeId" class="node-item">
+            <!-- 节点信息 -->
+            <div class="node-header">
+              <t-icon name="user" class="node-icon" />
+              <span class="node-name">{{ node.nodeName }}</span>
+              <span class="node-type-badge" :class="{ 'parallel': isParallelNode(node) }">
+                {{ node.nodeTypeDesc || node.multiInstanceTypeDesc }}
+              </span>
+              <span class="required" v-if="required">*</span>
+              <div class="node-desc" v-if="node.description">{{ node.description }}</div>
+            </div>
+
+            <!-- 节点审批人 -->
+            <div class="node-approvers">
+              <!-- 会签节点：支持添加/删除 -->
+              <template v-if="needManualConfig(node)">
+                <div class="approver-row">
+                  <template v-for="(approver, approverIndex) in getNodeApprovers(node.nodeId)" :key="approver.id">
+                    <div class="approver-item">
+                      <t-avatar :image="approver.avatar" size="small">
+                        {{ getAvatarText(approver.name) }}
+                      </t-avatar>
+                      <div class="user-info" :class="{ 'no-delete': required && getNodeApprovers(node.nodeId).length <= 1 }">
+                        <span class="approver-name">{{ approver.no }} - {{ approver.name }}</span>
+                        <t-icon name="close" size="16px" @click="removeNodeApprover(node.nodeId, approver.id)" />
+                      </div>
+                    </div>
+                    <t-icon v-if="approverIndex < getNodeApprovers(node.nodeId).length - 1" name="chevron-right" class="arrow-icon" />
+                  </template>
+
+                  <!-- 添加审批人按钮 -->
+                  <t-button
+                    theme="default"
+                    variant="text"
+                    @click="handleAddNodeApprover(node.nodeId)"
+                  >
+                    <template #icon>
+                      <t-icon name="add" />
+                    </template>
+                    添加审批人
+                  </t-button>
+                </div>
+              </template>
+
+              <!-- 非会签节点：只读显示 -->
+              <template v-else>
+                <div class="readonly-approvers">
+                  <template v-if="getNodeApprovers(node.nodeId).length > 0">
+                    <div class="approver-row">
+                      <template v-for="(approver, approverIndex) in getNodeApprovers(node.nodeId)" :key="approver.id">
+                        <div class="approver-item readonly">
+                          <t-avatar :image="approver.avatar" size="small">
+                            {{ getAvatarText(approver.name) }}
+                          </t-avatar>
+                          <div class="user-info">
+                            <span class="approver-name">{{ approver.no }} - {{ approver.name }}</span>
+                          </div>
+                        </div>
+                        <t-icon v-if="approverIndex < getNodeApprovers(node.nodeId).length - 1" name="chevron-right" class="arrow-icon" />
+                      </template>
+                    </div>
+                  </template>
+                  <div v-else class="no-approvers">
+                    <t-icon name="user" size="16px" />
+                    <span>系统自动分配审批人</span>
+                  </div>
+                </div>
+              </template>
+            </div>
+
+            <!-- 节点分隔线 -->
+            <!-- <div v-if="index < nodeConfigs.length - 1" class="node-divider">
+            </div> -->
+          </div>
+        </div>
+
+        <!-- 无配置提示 -->
+        <div v-else class="no-config">
+          <t-icon name="info-circle" size="20px" />
+          <span>暂无流程配置信息</span>
+        </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.id)" v-if="canEdit" />
+                </div>
+              </div>
+            </template>
+            <t-button
+              theme="default"
+              variant="text"
+              @click="handleAddCC"
+              v-if="canEdit"
+            >
+              <template #icon>
+                <t-icon name="add" />
+              </template>
+              添加抄送人
+            </t-button>
+          </div>
+        </div>
+      </div>
+    </t-card>
+
+    <!-- 审批人选择弹窗 -->
+    <ebiz-employee-selector v-if="showApproverSelector" :showDefault="false" v-model:visible="showApproverSelector"
+      @change="handleApproverSelect" :single="true" />
+    <ebiz-employee-selector v-if="showCCSelector" :showDefault="false" v-model:visible="showCCSelector"
+      @change="handleCCSelect" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue'
+import { Icon as TIcon, Avatar as TAvatar, Card as TCard, Button as TButton } 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 ProcessNodeConfig {
+  nodeId: string
+  nodeName: string
+  nodeType: string
+  nodeTypeDesc: string
+  multiInstanceType: string
+  multiInstanceTypeDesc: string
+  isMultiInstance: boolean
+  needManualConfig: boolean
+  ruleType: string
+  ruleTypeDesc: string
+  deptIds: number[]
+  roleIds: number[]
+  userIds: number[]
+  defaultApprovers: ApproverConfig[]
+  extensionProperties: Record<string, any>
+  description: string
+  priority: number
+  formKey: string
+  dueDate: string
+  collection: string
+}
+
+interface ApproverConfig {
+  userId: number | null
+  userName: string | null
+  userAccount: string | null
+  deptId: number | null
+  deptName: string | null
+  roleIds: number[] | null
+  roleNames: string[] | null
+  isDefault: boolean | null
+}
+
+interface NodeApproverData {
+  nodeId: string
+  approvers: Employee[]
+  selectedIds: (string | number)[]
+}
+
+interface Props {
+  approverList: (string | number)[]
+  ccList: (string | number)[]
+  workFlowKey: string
+  id: number
+  required: boolean
+  type?: 'organization' | 'role' | 'all'
+  value?: string
+  showRootOrg?: boolean
+  childDeptEnable?: boolean
+  showCC?: boolean
+  canEdit?: boolean,
+  data?: Record<string, any> // 数据对象，用于存储ccList、approverList和节点审批人数据
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  approverList: () => [],
+  ccList: () => [],
+  workFlowKey: '',
+  id: 0,
+  required: true,
+  showRootOrg: true,
+  childDeptEnable: false,
+  showCC: true,
+  canEdit: true,
+  data: () => ({})
+})
+
+const emit = defineEmits(['update:approverList', 'update:ccList', 'update:data', 'change'])
+
+// 状态变量
+const showApproverSelector = ref(false) // 是否显示审批人选择器
+const showCCSelector = ref(false) // 是否显示抄送人选择器
+const currentNodeId = ref('')
+const employeeList = ref<Employee[]>([])
+const nodeConfigs = ref<ProcessNodeConfig[]>([])
+const nodeApproverMap = ref<Map<string, NodeApproverData>>(new Map())
+
+// 已选抄送人列表
+const ccEmployees = ref<Employee[]>([])
+const ccSelectorValue = ref<(string | number)[]>([]) // 抄送人选择器的值
+
+// 获取头像文字
+const getAvatarText = (name: string) => {
+  return name ? name.charAt(0) : ''
+}
+
+// 获取流程配置
+const fetchProcessConfig = async () => {
+  if (!props.workFlowKey) return
+
+  try {
+    const response = await dataService.fetch(
+      { processKey: props.workFlowKey },
+      {},
+      '/process-definitions/config'
+    )
+    nodeConfigs.value = response?.nodeConfigs || []
+    initializeNodeApproverData()
+  } catch (error) {
+    console.error('获取流程配置失败:', error)
+    nodeConfigs.value = []
+  }
+}
+
+// 初始化节点审批人数据
+const initializeNodeApproverData = () => {
+  nodeApproverMap.value.clear()
+
+  nodeConfigs.value.forEach(node => {
+    const nodeData: NodeApproverData = {
+      nodeId: node.nodeId,
+      approvers: [],
+      selectedIds: []
+    }
+
+    // 设置默认审批人
+    if (node.defaultApprovers?.length) {
+      node.defaultApprovers.forEach(approver => {
+        if (approver.userId && approver.userName) {
+          const employee: Employee = {
+            id: approver.userId,
+            name: approver.userName,
+            no: approver.userAccount || '',
+          }
+          nodeData.approvers.push(employee)
+          nodeData.selectedIds.push(approver.userId)
+          if (!employeeList.value.find(emp => emp.id === employee.id)) {
+            employeeList.value.push(employee)
+          }
+        }
+      })
+    }
+
+    nodeApproverMap.value.set(node.nodeId, nodeData)
+  })
+
+  updateGlobalApproverList()
+}
+
+// 分配审批人到节点
+const distributeApproversToNodes = (approvers: any) => {
+  if (!approvers || !nodeConfigs.value.length) return
+
+  for (const k in approvers) {
+    const node = nodeConfigs.value.find(n => n.collection === k)
+    if (node && nodeApproverMap.value.has(node.nodeId)) {
+      const nodeData = nodeApproverMap.value.get(node.nodeId)!
+      if (approvers[k].length > 0 && (k === 'approverList' || node.needManualConfig)) {
+        nodeData.approvers = []
+        nodeData.selectedIds = []
+        approvers[k].forEach((info: Employee) => {
+          if (info.id && info.name) {
+            const employee: Employee = {
+              id: info.id,
+              name: info.name,
+              no: info.no || '',
+            }
+            nodeData.approvers.push(employee)
+            nodeData.selectedIds.push(info.id)
+            if (!employeeList.value.find(emp => emp.id === employee.id)) {
+              employeeList.value.push(employee)
+            }
+          }
+        })
+      }
+    }
+  }
+  updateGlobalApproverList()
+}
+
+// 更新节点collection字段数据到data属性
+const updateNodeCollectionData = (): void => {
+    // 将选择的人员ID列表写入data对应的collection字段
+    const newData = { ...props.data }
+    nodeApproverMap.value.forEach((nodeData, nodeId) => {
+        // 查找对应的节点配置
+        const nodeConfig = nodeConfigs.value.find(n => n.nodeId === nodeId)
+        if (!nodeConfig || !nodeConfig.collection) return
+        newData[nodeConfig.collection] = nodeData.selectedIds
+    })
+    emit('update:data', newData)
+}
+
+// 更新全局审批人列表
+const updateGlobalApproverList = () => {
+  const allApproverIds: (string | number)[] = []
+  nodeApproverMap.value.forEach((nodeData, nodeId) => {
+    const node = nodeConfigs.value.find(n => n.nodeId === nodeId)
+    if (node && node.collection === 'approverList') {
+      allApproverIds.push(...nodeData.selectedIds)
+    }
+  })
+  // 同时更新节点collection字段数据到data属性
+  updateNodeCollectionData()
+  emit('update:approverList', allApproverIds)
+  emit('change', {
+    type: 'approver',
+    ids: allApproverIds,
+    employees: getAllApprovers()
+  })
+}
+
+// 获取所有审批人
+const getAllApprovers = (): Employee[] => {
+  const allApprovers: Employee[] = []
+  nodeApproverMap.value.forEach(nodeData => {
+    allApprovers.push(...nodeData.approvers)
+  })
+  return allApprovers
+}
+
+// 检查节点是否为会签节点
+const isParallelNode = (node: ProcessNodeConfig): boolean => {
+  return node.nodeType === 'PARALLEL'
+}
+
+// 检查节点是否需要手动配置
+const needManualConfig = (node: ProcessNodeConfig): boolean => {
+  return node.needManualConfig === true || isParallelNode(node)
+}
+
+// 获取节点的审批人数据
+const getNodeApprovers = (nodeId: string): Employee[] => {
+  return nodeApproverMap.value.get(nodeId)?.approvers || []
+}
+
+// 获取员工列表
+const fetchEmployeeList = async () => {
+  try {
+    const response = await dataService.fetch({}, {}, '/process/userList')
+    employeeList.value = response || []
+    if (props.id) {
+      fetchHistory()
+    }
+  } catch (error) {
+    employeeList.value = []
+  }
+}
+
+// 获取历史审批信息
+const fetchHistory = () => {
+  dataService.fetch({
+    bussinessKey: props.id ? props.id.toString() : null,
+    type: props.workFlowKey
+  }, {}, '/tasks/process/detail').then(res => {
+    const ccList = res?.variables?.form?.ccList ?? []
+    ccEmployees.value = ccList.map(id => employeeList.value.find(emp => emp.id == id)).filter(Boolean)
+
+    const approverList = res?.variables?.form?.approverList ?? []
+    if (approverList.length) {
+      distributeApproversToNodes(approverList)
+    }
+  })
+}
+
+// 处理审批人选择
+const handleApproverSelect = (id: string | number, employees: Employee[]) => {
+  console.log('选择的审批人:', id, employees[0])
+  if (!currentNodeId.value || !id) return
+
+  const employee = employees[0]
+  // 添加到全局员工列表
+  if (!employeeList.value.find(emp => emp.id === id)) {
+    employeeList.value.push(employee)
+  }
+
+  const nodeData = nodeApproverMap.value.get(currentNodeId.value)
+  if (!nodeData) return
+
+  // 检查是否已存在
+  if (nodeData.selectedIds.includes(id)) {
+    const index = nodeData.selectedIds.indexOf(id)
+    nodeData.selectedIds.splice(index, 1)
+    nodeData.approvers.splice(index, 1)
+  } else {
+    nodeData.approvers.push(employee)
+    nodeData.selectedIds.push(id)
+  }
+
+  console.log('节点审批人数据:', nodeData)
+  updateGlobalApproverList()
+  showApproverSelector.value = false
+}
+
+// 移除节点审批人
+const removeNodeApprover = (nodeId: string, employeeId: string | number) => {
+  const nodeData = nodeApproverMap.value.get(nodeId)
+  if (!nodeData) return
+
+  const index = nodeData.selectedIds.findIndex(id => Number(id) === Number(employeeId))
+  if (index !== -1) {
+    nodeData.selectedIds.splice(index, 1)
+    nodeData.approvers.splice(index, 1)
+    updateGlobalApproverList()
+  }
+}
+
+// 处理添加节点审批人
+const handleAddNodeApprover = (nodeId: string) => {
+  currentNodeId.value = nodeId
+  showApproverSelector.value = true
+}
+
+// 更新抄送人列表
+const updateCCList = (ccIds: (string | number)[]): void => {
+    ccEmployees.value = ccIds.map((id) => employeeList.value.find((emp) => emp.id == id)).filter((emp): emp is Employee => emp !== undefined)
+    ccSelectorValue.value = ccIds
+
+    emit('update:ccList', ccIds)
+    emit('change', {
+        type: 'cc',
+        ids: ccIds,
+        employees: ccEmployees.value
+    })
+}
+
+// 处理抄送人选择
+const handleCCSelect = (ids: (string | number)[], employees: Employee[]):void => {
+    employeeList.value = [...employeeList.value, ...employees]
+    ccSelectorValue.value = ids
+    updateCCList(ids)
+}
+
+// 处理添加抄送人
+const handleAddCC = () => {
+    showCCSelector.value = true
+}
+
+// 移除抄送人
+const removeEmployee = (employeeId: string | number) => {
+  const newCCIds = ccEmployees.value.filter(emp => Number(emp.id) !== Number(employeeId)).map(emp => emp.id)
+  updateCCList(newCCIds)
+}
+
+// 自动填充功能
+const autoFill = () => {
+  if (!props.workFlowKey) return
+
+  dataService.fetch(
+    { businessType: props.workFlowKey },
+    {},
+    '/tasks/last-approver'
+  ).then(res => {
+    const { ccList = [], ...rest } = res || {}
+    // 更新抄送人
+    employeeList.value = [...employeeList.value, ...ccList]
+    updateCCList(ccList.map((item) => item.id))
+    distributeApproversToNodes(rest)
+  }).catch(err => {
+    console.error('自动填充失败:', err)
+  })
+}
+
+onMounted(() => {
+  fetchEmployeeList()
+  if (props.workFlowKey) {
+    fetchProcessConfig().then(autoFill)
+  }
+})
+
+watch([() => props.workFlowKey], ([newKey, oldKey]) => {
+  if (newKey && newKey !== oldKey) {
+    fetchProcessConfig().then(autoFill)
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.ebiz-approval {
+  .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;
+      }
+    }
+  }
+
+  .node-list {
+    .node-item {
+      margin-bottom: 8px;
+
+      .node-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+
+        .node-icon {
+          margin-right: 8px;
+        }
+
+        .node-name {
+          font-size: 14px;
+          color: var(--td-text-color-primary);
+          margin-right: 8px;
+        }
+
+        .node-type-badge {
+          padding: 0px 6px;
+          font-size: 10px;
+          height: 22px;
+          line-height: 22px;
+          background: #e6f7ff;
+          border-radius: 4px;
+          margin-right: 8px;
+          color: #1890ff;
+
+          &.parallel {
+            background: #fff2e8;
+            color: #fa8c16;
+          }
+        }
+
+        .required {
+          color: var(--td-error-color);
+          margin-left: 4px;
+        }
+
+        .node-desc {
+          font-size: 12px;
+          color: var(--td-text-color-secondary);
+          margin-left: 8px;
+        }
+      }
+
+        .approver-row {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 8px;
+
+          .approver-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;
+              }
+            }
+
+            &.ready-only {
+              background: #f5f5f5;
+              border-color: #d9d9d9;
+            }
+
+            .approver-name {
+              font-size: 14px;
+              color: var(--td-text-color-primary);
+            }
+          }
+
+          .arrow-icon {
+            color: var(--td-text-color-secondary);
+          }
+
+          .no-approvers {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 12px;
+            color: var(--td-text-color-secondary);
+            font-size: 12px;
+            background: var(--td-bg-color-container-weak);
+            border-radius: 4px;
+          }
+        }
+
+      .node-divider {
+        height: 1px;
+        // background: var(--td-component-border);
+        margin: 16px 0;
+      }
+    }
+  }
+
+  .no-config {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 24px;
+    color: var(--td-text-color-secondary);
+    font-size: 14px;
+  }
+}
+  .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>