@ebiz/designer-components 0.1.122 → 0.1.124

package/src/components/EbizApprovalV2.vue

@@ -0,0 +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;
+  }
+</style>