@ebiz/designer-components 0.1.11 → 0.1.13

package/src/components/EbizSApprovalProcess.vue

@@ -1,1133 +1,1135 @@
-<template>
-    <div class="ebiz-approval-process">
-        <div class="block-base-style">
-            <ebiz-tdesign-loading v-if="state.loading" :loading="true" theme="circular" size="small" text=""
-                :reverse="false" layout="vertical" :delay="0" class="component-base-style">
-                <span style="display: inline-block" class="component-base-style">加载中</span>
-            </ebiz-tdesign-loading>
-
-            <div v-if="!state.loading" class="card">
-                <div style="margin: 10px 0" class="component-base-style">
-                    <span style="display: inline-block" class="title">审批流程</span>
-                </div>
-
-                <!-- 流程基本信息 -->
-                <div v-if="state.processInfo" class="process-info">
-                    <div class="info-item" v-if="getStartUserInfo().userId">
-                        <span class="label">发起人：</span>
-                        <user-info :userId="getStartUserInfo().userId" :userInfo="getStartUserInfo().userInfo"
-                            avatar-size="small" name-size="small" :show-job-number="true" :show-department="false" />
-                    </div>
-                    <div class="info-item">
-                        <span class="label">发起时间：</span>
-                        <span>{{ state.processInfo.startTimeStr || '--' }}</span>
-                    </div>
-                    <div class="info-item">
-                        <span class="label">流程状态：</span>
-                        <t-tag :theme="getProcessStatusTheme(state.processInfo.processStatus)" size="small">
-                            {{ getProcessStatusText(state.processInfo.processStatus) }}
-                        </t-tag>
-                    </div>
-                    <!-- 抄送人信息 -->
-                </div>
-
-                <!-- 审批步骤 -->
-                <div class="simple-approval-steps">
-                    <!-- 节点步骤 -->
-                    <div v-for="(node, index) in state.nodes" :key="'node-' + index" class="simple-step-item">
-                        <div class="step-header">
-                            <div class="step-icon" :class="getSimpleStepIconClass(node)">
-                                <t-icon name="user" size="12px" color="white" />
-                            </div>
-                            <div class="step-info">
-                                <div class="step-title-row">
-                                    <span class="step-title">{{ node.nodeName }}</span>
-                                    <t-tag :theme="getNodeStatusTheme(node)" size="small">
-                                        {{ getNodeStatusText(node) }}
-                                    </t-tag>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- 简化的审批人信息 -->
-                        <div class="step-content">
-                            <!-- 已完成节点 -->
-                            <div v-for="approver in getCompletedApprovers(node)"
-                                :key="approver.nodeUser?.userId || approver.userId" class="simple-approver-wrapper">
-                                <div class="simple-approver">
-                                    <!-- 操作用户信息 -->
-                                    <div class="approver-user-info">
-                                        <user-info :userId="approver.nodeUser?.userId || approver.userId"
-                                            :userInfo="getUserInfo(approver)" avatar-size="small" name-size="small"
-                                            :show-department="false" />
-                                    </div>
-
-                                    <!-- 操作类型和时间 -->
-                                    <div class="approver-action-info">
-                                        <div class="action-type">{{ getOperationTypeText(approver) }}</div>
-                                        <div class="approver-time">{{ formatTime(approver.operation?.operationTime ||
-                                            approver.completedTime || approver.endTime) }}</div>
-                                    </div>
-                                </div>
-
-                                <!-- 目标用户信息（转审、加签等操作） -->
-                                <div v-if="approver.targetUser && needShowTargetUser(approver)"
-                                    class="target-user-info">
-                                    <div class="target-label">{{ getTargetUserLabel(approver) }}</div>
-                                    <user-info :userId="approver.targetUser.userId"
-                                        :userInfo="getTargetUserInfo(approver)" avatar-size="small" name-size="small"
-                                        :show-department="false" />
-                                </div>
-
-                                <!-- 评论信息 -->
-                                <div v-if="approver.comment" class="approver-comment">{{ approver.comment }}</div>
-                            </div>
-
-                            <!-- 进行中节点 -->
-                            <!-- 当前处理人 -->
-                            <div v-if="getCurrentApprover(node)" class="simple-approver">
-                                <user-info
-                                    :userId="getCurrentApprover(node).nodeUser?.userId || getCurrentApprover(node).userId"
-                                    :userInfo="getUserInfo(getCurrentApprover(node))" avatar-size="small"
-                                    name-size="small" :show-department="false" />
-                                <div class="approver-time">处理中</div>
-                            </div>
-
-                            <!-- 待处理人 -->
-                            <div v-for="approver in getPendingApprovers(node)"
-                                :key="'pending-' + (approver.nodeUser?.userId || approver.userId)"
-                                class="simple-approver">
-                                <user-info :userId="approver.nodeUser?.userId || approver.userId"
-                                    :userInfo="getUserInfo(approver)" avatar-size="small" name-size="small"
-                                    :show-department="false" />
-                                <!-- <div class="approver-time">待处理</div> -->
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- 抄送人步骤 -->
-                    <div v-if="state.processInfo" class="simple-step-item">
-                        <div class="step-header">
-                            <div class="step-icon" :class="getCcSimpleIconClass()">
-                                <t-icon name="mail" size="12px" color="white" />
-                            </div>
-                            <div class="step-info">
-                                <div class="step-title-row">
-                                    <span class="step-title">抄送</span>
-                                    <!-- 增加抄送人按钮 -->
-                                    <ebiz-employee-selector content="增加抄送人" :single="false" defaultTab="organization"
-                                        class="component-base-style" v-model="state.selectedCCList"
-                                        @click="handleAddCcUser" @confirm="onAddCcListConfirm">
-                                    </ebiz-employee-selector>
-                                    <!--                                     <t-button theme="default" variant="outline" size="mini" @click="handleAddCcUser"
-                                        class="add-cc-button-inline">
-                                        <t-icon name="add" size="12px" />
-                                        增加抄送人
-                                    </t-button> -->
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="step-content">
-                            <div v-for="ccUser in state.processInfo.ccUserList"
-                                :key="ccUser.nodeUser?.userId || ccUser.userId" class="simple-approver">
-                                <user-info :userId="ccUser.nodeUser?.userId || ccUser.userId"
-                                    :userInfo="ccUser.nodeUser || ccUser" avatar-size="small" name-size="small"
-                                    :show-department="false" />
-                                <div class="approver-time">{{ getCcTimeText() }}</div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </div>
-</template>
-
-<script>
-/**
- * @displayName 审批流程
- * @description 审批流程组件，用于展示审批流程的详细信息
- * @category 业务组件
- * @name EbizApprovalProcess
- */
-export default {
-    name: "EbizApprovalProcess",
-    components: {
-        't-tag': Tag,
-        't-icon': Icon,
-        't-button': Button
-    }
-}
-</script>
-
-<script setup>
-import { reactive, onMounted } from 'vue'
-import { defineProps, defineEmits } from 'vue'
-import { Tag, Icon, Button, MessagePlugin as message } from 'tdesign-vue-next'
-import EbizEmployeeSelector from './EbizEmployeeSelector.vue'
-import EbizTdesignLoading from './EbizTdesignLoading.vue'
-import dataService from '../apiService/simpleDataService.js'
-import UserInfo from './mItems/UserInfo.vue'
-
-// 定义 props
-const props = defineProps({
-    /**
-     * 业务键
-     */
-    businessKey: {
-        type: String,
-        default: ''
-    },
-    /**
-     * 业务类型
-     */
-    type: {
-        type: String,
-        default: ''
-    }
-})
-
-// 定义 emits
-const emit = defineEmits(['load-success', 'add-cc-user'])
-
-// 响应式状态
-const state = reactive({
-    loading: false,
-    processInfo: null,
-    nodes: [], // 直接保存节点数据
-    historyRecords: [],
-    currentNodes: [],
-    futureNodes: [],
-    approvalDetail: {},
-    selectedCCList: [],
-    showCcListSelector: false
-})
-
-// 处理审批详情响应
-const handleApprovalDetailResponse = (data) => {
-    // 构建流程信息
-    state.processInfo = {
-        processInstanceId: data.processInstanceId,
-        businessKey: data.businessKey,
-        processDefinitionKey: data.processDefinitionKey,
-        processDefinitionName: data.processDefinitionName,
-        startTime: data.startTime,
-        startTimeStr: data.startTime, // 使用startTime作为显示时间
-        endTime: data.endTime,
-        startUserId: data.startUserId,
-        startUserName: data.startUserName,
-        startUserInfo: data.startUserInfo,
-        processStatus: data.processStatus,
-        processStatusDesc: data.processStatusDesc,
-        ccUserList: data.ccUserList || []
-    }
-
-    // 直接保存节点数据，不进行拆分
-    state.nodes = data.nodes || []
-
-    // 清空原有的分类数据
-    state.historyRecords = []
-    state.currentNodes = []
-    state.futureNodes = []
-
-    state.approvalDetail = data
-    state.loading = false
-
-    emit('load-success', data)
-}
-
-// 处理审批详情错误
-const handleApprovalDetailError = (err) => {
-    state.loading = false
-    message.error(err.message || '获取审批信息失败')
-}
-
-// 请求审批详情
-const requestApprovalDetail = (businessKey, type) => {
-    state.loading = true
-
-    const requestData = {
-        businessKey: businessKey,
-        businessType: type
-    }
-
-    // 使用新的接口获取审批详情
-    dataService.fetch(
-        requestData,
-        {},
-        '/tasks/approval-detail'
-    ).then((res) => {
-        console.log("approval-detail res", res)
-        handleApprovalDetailResponse(res)
-    }).catch((err) => {
-        handleApprovalDetailError(err)
-    })
-
-    // 临时测试数据（可以删除）
-    // const testData = {
-    //     "processInstanceId": "130953",
-    //     "businessKey": "357",
-    //     "processDefinitionKey": "Out_Visitor_Application",
-    //     "processDefinitionName": "访客自助登记",
-    //     "processStatus": "ACTIVE",
-    //     "processStatusDesc": "进行中",
-    //     "startTime": "2025-06-13 16:04:52",
-    //     "startUserId": null,
-    //     "endTime": null,
-    //     "ccUserList": [
-    //         {
-    //             "userId": "3180",
-    //             "name": "邓强杰",
-    //             "employeeNo": "4879",
-    //             "photo": "http://oas.guokeai.cn:9003/upload/20250529/20250529_26f77dfaf1324a96b341e4b9b142ae23.jpg",
-    //             "deptName": "技术部"
-    //         }
-    //     ],
-    //     "nodes": [
-    //         {
-    //             "nodeId": "receiver",
-    //             "nodeName": "接待人审批",
-    //             "nodeStatus": "COMPLETED",
-    //             "isMultiInstance": false,
-    //             "approvers": [
-    //                 {
-    //                     "userId": "3176",
-    //                     "userName": "吴跃忠",
-    //                     "employeeNo": "LaiRiFangZhang",
-    //                     "deptName": "技术部",
-    //                     "approvalStatus": "COMPLETED",
-    //                     "completedTime": "2025-06-13 16:06:11"
-    //                 }
-    //             ]
-    //         }
-    //     ]
-    // }
-    // handleApprovalDetailResponse(testData)
-}
-
-// 获取操作类型的样式类
-const getOperationClass = (operationType, operationResult) => {
-    const typeMap = {
-        'START': 'start',
-        'COMPLETE': operationResult === '通过' ? 'approved' : operationResult === '拒绝' ? 'rejected' : 'completed',
-        'CLAIM': 'claimed',
-        'ASSIGN': 'assigned',
-        'TRANSFER': 'transferred',
-        'REJECT': 'rejected',
-        'ADD_SIGN': 'add-sign'
-    }
-    return typeMap[operationType] || 'default'
-}
-
-// 获取操作类型的文本
-const getOperationTypeText = (approver) => {
-    if (!approver.operation) {
-        return getSimpleStatusText(null, approver)
-    }
-
-    const operationType = approver.operation.operationType
-    switch (operationType) {
-        case 'COMPLETE':
-            // 从operationData中获取审批结果
-            try {
-                const operationData = JSON.parse(approver.operation.operationData || '{}')
-                if (operationData.approved === true) {
-                    return '已同意'
-                } else if (operationData.approved === false) {
-                    return '已拒绝'
-                }
-            } catch (e) {
-                // 解析失败，使用默认逻辑
-            }
-            return '已完成'
-        case 'TRANSFER':
-            return '转审'
-        case 'ADD_SIGN':
-            return '加签'
-        case 'REJECT':
-            return '退回'
-        case 'CLAIM':
-            return '认领'
-        case 'ASSIGN':
-            return '分配'
-        default:
-            return '已处理'
-    }
-}
-
-// 获取流程状态主题
-const getProcessStatusTheme = (status) => {
-    const statusMap = {
-        'ACTIVE': 'primary',
-        'COMPLETED': 'success',
-        'SUSPENDED': 'warning'
-    }
-    return statusMap[status] || 'default'
-}
-
-// 获取流程状态文本
-const getProcessStatusText = (status) => {
-    const statusMap = {
-        'ACTIVE': '进行中',
-        'COMPLETED': '已完成',
-        'SUSPENDED': '已暂停'
-    }
-    return statusMap[status] || status
-}
-
-// 获取当前步骤索引
-const getCurrentStepIndex = () => {
-    // 已完成节点数量
-    const completedNodes = state.nodes.filter(node => node.nodeStatus === 'COMPLETED').length
-    return completedNodes
-}
-
-// 获取节点步骤状态
-const getNodeStepStatus = (node) => {
-    switch (node.nodeStatus) {
-        case 'COMPLETED':
-            return 'finish'
-        case 'ACTIVE':
-            return 'process'
-        default:
-            return 'wait'
-    }
-}
-
-// 获取节点步骤样式类
-const getNodeStepClass = (node) => {
-    switch (node.nodeStatus) {
-        case 'ACTIVE':
-            return 'current-step'
-        case 'PENDING':
-        case 'WAITING':
-            return 'future-step'
-        default:
-            return ''
-    }
-}
-
-// 获取节点状态主题
-const getNodeStatusTheme = (node) => {
-    switch (node.nodeStatus) {
-        case 'COMPLETED':
-            return 'success'
-        case 'ACTIVE':
-            return 'primary'
-        default:
-            return 'default'
-    }
-}
-
-// 获取节点状态文本
-const getNodeStatusText = (node) => {
-    switch (node.nodeStatus) {
-        case 'COMPLETED':
-            return '已完成'
-        case 'ACTIVE':
-            return '进行中'
-        default:
-            return '未开始'
-    }
-}
-
-// 获取已完成的审批人
-const getCompletedApprovers = (node) => {
-    if (!node.approvers) return []
-    return node.approvers.filter(approver => approver.approvalStatus === 'COMPLETED')
-}
-
-// 获取当前审批人
-const getCurrentApprover = (node) => {
-    if (!node.approvers) return null
-    return node.approvers.find(approver => approver.approvalStatus === 'ACTIVE' && approver.isCurrent)
-}
-
-// 获取待处理审批人
-const getPendingApprovers = (node) => {
-    if (!node.approvers) return []
-    return node.approvers.filter(approver => approver.approvalStatus === 'PENDING')
-}
-
-// 获取用户信息
-const getUserInfo = (approver) => {
-    // 新数据结构：用户信息在nodeUser对象中
-    const userInfo = approver.nodeUser || approver
-    return {
-        userId: userInfo.userId,
-        name: userInfo.userName,
-        employeeNo: userInfo.employeeNo,
-        photo: userInfo.photo,
-        departmentName: userInfo.deptName,
-        position: userInfo.position,
-        phone: userInfo.phone,
-        email: userInfo.email
-    }
-}
-
-// 判断流程是否已完成
-const isProcessCompleted = () => {
-    return state.processInfo && state.processInfo.processStatus === 'COMPLETED'
-}
-
-// 获取抄送步骤状态
-const getCcStepStatus = () => {
-    return isProcessCompleted() ? 'finish' : 'wait'
-}
-
-// 获取抄送步骤样式类
-const getCcStepClass = () => {
-    return isProcessCompleted() ? '' : 'future-step'
-}
-
-// 获取抄送状态样式类
-const getCcStatusClass = () => {
-    return isProcessCompleted() ? 'cc-status' : 'cc-pending'
-}
-
-// 获取抄送状态文本
-const getCcStatusText = () => {
-    return isProcessCompleted() ? '已抄送' : '待抄送'
-}
-
-// 获取简单步骤图标类
-const getSimpleStepIconClass = (node) => {
-    switch (node.nodeStatus) {
-        case 'COMPLETED':
-            return 'step-icon-completed'
-        case 'ACTIVE':
-            return 'step-icon-active'
-        default:
-            return 'step-icon-waiting'
-    }
-}
-
-// 获取抄送简单图标类
-const getCcSimpleIconClass = () => {
-    return isProcessCompleted() ? 'step-icon-completed' : 'step-icon-waiting'
-}
-
-// 获取简单状态文本
-const getSimpleStatusText = (node, approver) => {
-    // 优先使用approvalResult
-    if (approver.approvalResult) {
-        return approver.approvalResult === '通过' ? '已同意' : approver.approvalResult === '拒绝' ? '已拒绝' : '已完成'
-    }
-    // 如果没有approvalResult，使用approved字段
-    if (approver.approved !== null && approver.approved !== undefined) {
-        return approver.approved ? '已同意' : '已拒绝'
-    }
-    // 默认返回已完成
-    return '已完成'
-}
-
-// 格式化时间
-const formatTime = (timeStr) => {
-    if (!timeStr) return '--'
-
-    let date
-    // 如果是数字（时间戳），直接使用
-    if (typeof timeStr === 'number') {
-        date = new Date(timeStr)
-    } else {
-        // 如果是字符串，尝试解析
-        date = new Date(timeStr)
-    }
-
-    if (isNaN(date.getTime())) return timeStr
-
-    const month = date.getMonth() + 1
-    const day = date.getDate()
-    const hours = date.getHours().toString().padStart(2, '0')
-    const minutes = date.getMinutes().toString().padStart(2, '0')
-
-    return `${month}/${day} ${hours}:${minutes}`
-}
-
-// 获取抄送时间文本
-const getCcTimeText = () => {
-    if (isProcessCompleted()) {
-        return `已抄送 · ${formatTime(state.processInfo.endTime || state.processInfo.startTimeStr)}`
-    }
-    return ''
-}
-
-// 获取发起人信息
-const getStartUserInfo = () => {
-    // 优先从历史记录中查找发起人
-    const startRecord = state.historyRecords.find(record => record.operationType === 'START')
-    if (startRecord) {
-        return {
-            userId: startRecord.operatorId,
-            userInfo: startRecord.assigneeInfo
-        }
-    }
-
-    // 如果没有发起记录，从流程信息中获取
-    if (state.processInfo && state.processInfo.startUserId) {
-        return {
-            userId: state.processInfo.startUserId,
-            userInfo: state.processInfo.startUserInfo || {
-                name: state.processInfo.startUserName || '未知用户'
-            }
-        }
-    }
-
-    // 如果都没有，尝试从第一个已完成节点的审批人获取（可能是发起人）
-    if (state.historyRecords.length > 0) {
-        const firstRecord = state.historyRecords[0]
-        return {
-            userId: firstRecord.operatorId,
-            userInfo: firstRecord.assigneeInfo
-        }
-    }
-
-    return { userId: '', userInfo: {} }
-}
-
-// 处理增加抄送人
-const handleAddCcUser = () => {
-    state.showCcListSelector = true
-    emit('add-cc-user', {
-        processInstanceId: state.processInfo?.processInstanceId,
-        businessKey: state.processInfo?.businessKey,
-        processDefinitionKey: state.processInfo?.processDefinitionKey
-    })
-}
-
-function onAddCcListConfirm(event) {
-    if (state.selectedCCList?.length === 0) return
-    state.showCcListSelector = false
-    dataService.fetch(
-        {
-            businessKey: state.processInfo?.businessKey,
-            type: state.processInfo?.processDefinitionKey,
-            processInstanceId: state.processInfo?.processInstanceId,
-            ccUsers: state.selectedCCList.map((item) => Number(item))
-        },
-        {},
-        '/tasks/batchAddCcInfo'
-    )
-        .then((res) => { })
-        .catch((err) => {
-            message.error(err.message)
-        })
-}
-
-// 判断是否需要显示目标用户
-const needShowTargetUser = (approver) => {
-    if (!approver.operation || !approver.targetUser) return false
-
-    const operationType = approver.operation.operationType
-    return ['TRANSFER', 'ADD_SIGN'].includes(operationType)
-}
-
-// 获取目标用户标签
-const getTargetUserLabel = (approver) => {
-    if (!approver.operation) return ''
-
-    const operationType = approver.operation.operationType
-    switch (operationType) {
-        case 'TRANSFER':
-            return '转审给：'
-        case 'ADD_SIGN':
-            return '加签：'
-        default:
-            return '目标：'
-    }
-}
-
-// 获取目标用户信息
-const getTargetUserInfo = (approver) => {
-    const targetUser = approver.targetUser
-    return {
-        userId: targetUser.userId,
-        name: targetUser.userName,
-        employeeNo: targetUser.employeeNo,
-        photo: targetUser.photo,
-        departmentName: targetUser.deptName,
-        position: targetUser.position,
-        phone: targetUser.phone,
-        email: targetUser.email
-    }
-}
-
-// 组件挂载时请求数据
-onMounted(() => {
-    if (props.businessKey && props.type) {
-        requestApprovalDetail(String(props.businessKey), props.type)
-    }
-})
-
-// 暴露方法供外部调用
-defineExpose({
-    requestApprovalDetail,
-    state
-})
-</script>
-
-<style scoped>
-.ebiz-approval-process {
-    width: 100%;
-}
-
-.card {
-    background-color: #ffffff;
-    padding: 10px;
-}
-
-.title {
-    font-size: 16px;
-    font-weight: bold;
-    color: #333;
-}
-
-.process-info {
-    background-color: #fafafa;
-    padding: 10px 12px;
-    border-radius: 6px;
-    margin-bottom: 12px;
-    border: 1px solid #f0f0f0;
-}
-
-.info-item {
-    display: flex;
-    align-items: center;
-    margin-bottom: 6px;
-}
-
-.info-item:last-child {
-    margin-bottom: 0;
-}
-
-.label {
-    font-weight: 500;
-    color: #595959;
-    margin-right: 8px;
-    min-width: 70px;
-    font-size: 13px;
-}
-
-.step-content {
-    /* padding: 8px 0; */
-}
-
-.operation-info {
-    margin-bottom: 8px;
-}
-
-.operation-tag {
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 500;
-    display: inline-block;
-}
-
-.operation-tag.start {
-    background-color: #f3e5f5;
-    color: #7b1fa2;
-}
-
-.operation-tag.approved {
-    background-color: #e8f5e8;
-    color: #388e3c;
-}
-
-.operation-tag.rejected {
-    background-color: #ffebee;
-    color: #d32f2f;
-}
-
-.operation-tag.completed {
-    background-color: #e3f2fd;
-    color: #1976d2;
-}
-
-.operation-tag.claimed {
-    background-color: #f3e5f5;
-    color: #7b1fa2;
-}
-
-.operation-tag.assigned {
-    background-color: #e0f2f1;
-    color: #00695c;
-}
-
-.operation-tag.transferred {
-    background-color: #fff8e1;
-    color: #f57c00;
-}
-
-.operation-tag.add-sign {
-    background-color: #fce4ec;
-    color: #c2185b;
-}
-
-.operation-tag.pending {
-    background-color: #fff3e0;
-    color: #f57c00;
-}
-
-.operation-tag.future {
-    background-color: #f5f5f5;
-    color: #757575;
-}
-
-.operation-tag.cc-status {
-    background-color: #fffbe6;
-    color: #faad14;
-}
-
-.operation-tag.cc-pending {
-    background-color: #f5f5f5;
-    color: #999999;
-}
-
-.step-detail {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 4px;
-    font-size: 14px;
-}
-
-.step-detail:last-child {
-    margin-bottom: 0;
-}
-
-.current-step {
-    background-color: #f8f9fa;
-    padding: 12px;
-    border-radius: 8px;
-    border-left: 4px solid #1976d2;
-}
-
-.future-step {
-    opacity: 0.7;
-}
-
-.multi-instance-details {
-    margin-top: 8px;
-}
-
-.instance-list {
-    margin-top: 12px;
-}
-
-.instance-item {
-    background-color: #ffffff;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-    padding: 8px;
-    margin-bottom: 8px;
-}
-
-.instance-item:last-child {
-    margin-bottom: 0;
-}
-
-.instance-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 4px;
-}
-
-.instance-status {
-    padding: 2px 6px;
-    border-radius: 3px;
-    font-size: 11px;
-    font-weight: 500;
-}
-
-.instance-approved {
-    background-color: #e8f5e8;
-    color: #388e3c;
-}
-
-.instance-rejected {
-    background-color: #ffebee;
-    color: #d32f2f;
-}
-
-.instance-completed {
-    background-color: #e3f2fd;
-    color: #1976d2;
-}
-
-.instance-pending {
-    background-color: #fff3e0;
-    color: #f57c00;
-}
-
-.instance-comment {
-    font-size: 12px;
-    color: #666;
-    margin-bottom: 4px;
-    line-height: 1.4;
-}
-
-.instance-time {
-    font-size: 11px;
-    color: #999;
-}
-
-.multi-instance-badge {
-    background-color: #e3f2fd;
-    color: #1976d2;
-    padding: 2px 6px;
-    border-radius: 3px;
-    font-size: 11px;
-    font-weight: 500;
-}
-
-.instance-section {
-    margin-bottom: 12px;
-}
-
-.instance-section h5 {
-    font-size: 12px;
-    color: #666;
-    margin: 0 0 8px 0;
-    font-weight: 500;
-}
-
-.instance-section:last-child {
-    margin-bottom: 0;
-}
-
-/* 用户信息相关样式 */
-.assignee-info {
-    display: flex;
-    align-items: center;
-}
-
-.approver-info {
-    margin-bottom: 12px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #f0f0f0;
-}
-
-.approver-info:last-child {
-    margin-bottom: 0;
-    border-bottom: none;
-}
-
-.candidate-users {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: center;
-}
-
-.candidate-user {
-    background-color: #f8f9fa;
-    padding: 4px 8px;
-    border-radius: 12px;
-    border: 1px solid #e9ecef;
-}
-
-/* 抄送人相关样式 */
-.cc-users {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    align-items: center;
-}
-
-.cc-user {
-    background-color: #f6ffed;
-    padding: 3px 6px;
-    border-radius: 10px;
-    border: 1px solid #d9f7be;
-    font-size: 12px;
-}
-
-.cc-users-list {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.cc-user-item {
-    background-color: #fffbe6;
-    padding: 8px;
-    border-radius: 8px;
-    border: 1px solid #ffd666;
-}
-
-/* 简化审批步骤样式 */
-.simple-approval-steps {
-    background-color: #ffffff;
-    padding: 12px 16px;
-}
-
-.simple-step-item {
-    position: relative;
-    padding-bottom: 16px;
-    border-left: 2px solid #e8e8e8;
-    margin-left: 10px;
-}
-
-.simple-step-item:last-child {
-    border-left: none;
-    padding-bottom: 0;
-}
-
-.step-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8px;
-    margin-left: -11px;
-}
-
-.step-icon {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 10px;
-    flex-shrink: 0;
-    position: relative;
-    z-index: 1;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.step-icon-completed {
-    background: linear-gradient(135deg, #52c41a, #73d13d);
-}
-
-.step-icon-active {
-    background: linear-gradient(135deg, #1890ff, #40a9ff);
-}
-
-.step-icon-waiting {
-    background: linear-gradient(135deg, #d9d9d9, #f0f0f0);
-}
-
-.step-info {
-    flex: 1;
-}
-
-.step-title-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.step-title {
-    font-size: 15px;
-    font-weight: 600;
-    color: #262626;
-    line-height: 1.3;
-    flex: 1;
-    margin-right: 8px;
-}
-
-.step-status {
-    margin-left: 8px;
-    white-space: nowrap;
-}
-
-.step-content {
-    margin-left: 19px;
-    padding-bottom: 4px;
-}
-
-.simple-approver-wrapper {
-    padding: 6px 0;
-    margin: 6px 0;
-    border-bottom: 1px solid #f5f5f5;
-}
-
-.simple-approver-wrapper:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
-}
-
-.simple-approver {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    min-height: 40px;
-}
-
-.approver-user-info {
-    flex: 1;
-    margin-right: 8px;
-}
-
-.approver-action-info {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    white-space: nowrap;
-}
-
-.action-type {
-    font-size: 12px;
-    font-weight: 500;
-    color: #1890ff;
-    margin-bottom: 2px;
-}
-
-.target-user-info {
-    padding: 8px 12px;
-    background-color: #f8f9fa;
-    border-radius: 6px;
-    border-left: 3px solid #1890ff;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.target-label {
-    font-size: 12px;
-    color: #666;
-    font-weight: 500;
-    white-space: nowrap;
-}
-
-.approver-time {
-    font-size: 11px;
-    color: #8c8c8c;
-    margin-left: 8px;
-    white-space: nowrap;
-    font-weight: 500;
-}
-
-.approver-comment {
-    background-color: #fafafa;
-    padding: 8px 12px;
-    border-radius: 6px;
-    font-size: 12px;
-    color: #595959;
-    line-height: 1.4;
-    width: 100%;
-    border: 1px solid #f0f0f0;
-    box-sizing: border-box;
-}
-
-/* 增加抄送人按钮样式 */
-.add-cc-button-inline {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 11px;
-    border-color: #d9d9d9;
-    color: #666;
-    height: 24px;
-    padding: 0 8px;
-    white-space: nowrap;
-}
-
-.add-cc-button-inline:hover {
-    border-color: #1890ff;
-    color: #1890ff;
-}
+<template>
+    <div class="ebiz-approval-process">
+        <div class="block-base-style">
+            <ebiz-tdesign-loading v-if="state.loading" :loading="true" theme="circular" size="small" text=""
+                :reverse="false" layout="vertical" :delay="0" class="component-base-style">
+                <span style="display: inline-block" class="component-base-style">加载中</span>
+            </ebiz-tdesign-loading>
+
+            <div v-if="!state.loading" class="card">
+                <div style="margin: 10px 0" class="component-base-style">
+                    <span style="display: inline-block" class="title">审批流程</span>
+                </div>
+
+                <!-- 流程基本信息 -->
+                <div v-if="state.processInfo" class="process-info">
+                    <div class="info-item" v-if="getStartUserInfo().userId">
+                        <span class="label">发起人：</span>
+                        <user-info :userId="getStartUserInfo().userId" :userInfo="getStartUserInfo().userInfo"
+                            avatar-size="small" name-size="small" :show-job-number="true" :show-department="false" />
+                    </div>
+                    <div class="info-item">
+                        <span class="label">发起时间：</span>
+                        <span>{{ state.processInfo.startTimeStr || '--' }}</span>
+                    </div>
+                    <div class="info-item">
+                        <span class="label">流程状态：</span>
+                        <t-tag :theme="getProcessStatusTheme(state.processInfo.processStatus)" size="small">
+                            {{ getProcessStatusText(state.processInfo.processStatus) }}
+                        </t-tag>
+                    </div>
+                    <!-- 抄送人信息 -->
+                </div>
+
+                <!-- 审批步骤 -->
+                <div class="simple-approval-steps">
+                    <!-- 节点步骤 -->
+                    <div v-for="(node, index) in state.nodes" :key="'node-' + index" class="simple-step-item">
+                        <div class="step-header">
+                            <div class="step-icon" :class="getSimpleStepIconClass(node)">
+                                <t-icon name="user" size="12px" color="white" />
+                            </div>
+                            <div class="step-info">
+                                <div class="step-title-row">
+                                    <span class="step-title">{{ node.nodeName }}</span>
+                                    <t-tag :theme="getNodeStatusTheme(node)" size="small">
+                                        {{ getNodeStatusText(node) }}
+                                    </t-tag>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- 简化的审批人信息 -->
+                        <div class="step-content">
+                            <!-- 已完成节点 -->
+                            <div v-for="approver in getCompletedApprovers(node)"
+                                :key="approver.nodeUser?.userId || approver.userId" class="simple-approver-wrapper">
+                                <div class="simple-approver">
+                                    <!-- 操作用户信息 -->
+                                    <div class="approver-user-info">
+                                        <user-info :userId="approver.nodeUser?.userId || approver.userId"
+                                            :userInfo="getUserInfo(approver)" avatar-size="small" name-size="small"
+                                            :show-department="false" />
+                                    </div>
+
+                                    <!-- 操作类型和时间 -->
+                                    <div class="approver-action-info">
+                                        <div class="action-type">{{ getOperationTypeText(approver) }}</div>
+                                        <div class="approver-time">{{ formatTime(approver.operation?.operationTime ||
+                                            approver.completedTime || approver.endTime) }}</div>
+                                    </div>
+                                </div>
+
+                                <!-- 目标用户信息（转审、加签等操作） -->
+                                <div v-if="approver.targetUser && needShowTargetUser(approver)"
+                                    class="target-user-info">
+                                    <div class="target-label">{{ getTargetUserLabel(approver) }}</div>
+                                    <user-info :userId="approver.targetUser.userId"
+                                        :userInfo="getTargetUserInfo(approver)" avatar-size="small" name-size="small"
+                                        :show-department="false" />
+                                </div>
+
+                                <!-- 评论信息 -->
+                                <div v-if="approver.comment" class="approver-comment">{{ approver.comment }}</div>
+                            </div>
+
+                            <!-- 进行中节点 -->
+                            <!-- 当前处理人 -->
+                            <div v-if="getCurrentApprover(node)" class="simple-approver">
+                                <user-info
+                                    :userId="getCurrentApprover(node).nodeUser?.userId || getCurrentApprover(node).userId"
+                                    :userInfo="getUserInfo(getCurrentApprover(node))" avatar-size="small"
+                                    name-size="small" :show-department="false" />
+                                <div class="approver-time">处理中</div>
+                            </div>
+
+                            <!-- 待处理人 -->
+                            <div v-for="approver in getPendingApprovers(node)"
+                                :key="'pending-' + (approver.nodeUser?.userId || approver.userId)"
+                                class="simple-approver">
+                                <user-info :userId="approver.nodeUser?.userId || approver.userId"
+                                    :userInfo="getUserInfo(approver)" avatar-size="small" name-size="small"
+                                    :show-department="false" />
+                                <!-- <div class="approver-time">待处理</div> -->
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 抄送人步骤 -->
+                    <div v-if="state.processInfo" class="simple-step-item">
+                        <div class="step-header">
+                            <div class="step-icon" :class="getCcSimpleIconClass()">
+                                <t-icon name="mail" size="12px" color="white" />
+                            </div>
+                            <div class="step-info">
+                                <div class="step-title-row">
+                                    <span class="step-title">抄送</span>
+                                    <!-- 增加抄送人按钮 -->
+                                    <ebiz-employee-selector content="增加抄送人" :single="false" defaultTab="organization"
+                                        class="component-base-style" v-model="state.selectedCCList"
+                                        @click="handleAddCcUser" @confirm="onAddCcListConfirm">
+                                    </ebiz-employee-selector>
+                                    <!--                                     <t-button theme="default" variant="outline" size="mini" @click="handleAddCcUser"
+                                        class="add-cc-button-inline">
+                                        <t-icon name="add" size="12px" />
+                                        增加抄送人
+                                    </t-button> -->
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="step-content">
+                            <div v-for="ccUser in state.processInfo.ccUserList"
+                                :key="ccUser.nodeUser?.userId || ccUser.userId" class="simple-approver">
+                                <user-info :userId="ccUser.nodeUser?.userId || ccUser.userId"
+                                    :userInfo="ccUser.nodeUser || ccUser" avatar-size="small" name-size="small"
+                                    :show-department="false" />
+                                <div class="approver-time">{{ getCcTimeText() }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+/**
+ * @displayName 审批流程
+ * @description 审批流程组件，用于展示审批流程的详细信息
+ * @category 业务组件
+ * @name EbizApprovalProcess
+ */
+export default {
+    name: "EbizApprovalProcess",
+    components: {
+        't-tag': Tag,
+        't-icon': Icon,
+        't-button': Button
+    }
+}
+</script>
+
+<script setup>
+import { reactive, onMounted } from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import { Tag, Icon, Button, MessagePlugin as message } from 'tdesign-vue-next'
+import EbizEmployeeSelector from './EbizEmployeeSelector.vue'
+import EbizTdesignLoading from './EbizTdesignLoading.vue'
+import dataService from '../apiService/simpleDataService.js'
+import UserInfo from './mItems/UserInfo.vue'
+
+// 定义 props
+const props = defineProps({
+    /**
+     * 业务键
+     */
+    businessKey: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 业务类型
+     */
+    type: {
+        type: String,
+        default: ''
+    }
+})
+
+// 定义 emits
+const emit = defineEmits(['load-success', 'add-cc-user'])
+
+// 响应式状态
+const state = reactive({
+    loading: false,
+    processInfo: null,
+    nodes: [], // 直接保存节点数据
+    historyRecords: [],
+    currentNodes: [],
+    futureNodes: [],
+    approvalDetail: {},
+    selectedCCList: [],
+    showCcListSelector: false
+})
+
+// 处理审批详情响应
+const handleApprovalDetailResponse = (data) => {
+    // 构建流程信息
+    state.processInfo = {
+        processInstanceId: data.processInstanceId,
+        businessKey: data.businessKey,
+        processDefinitionKey: data.processDefinitionKey,
+        processDefinitionName: data.processDefinitionName,
+        startTime: data.startTime,
+        startTimeStr: data.startTime, // 使用startTime作为显示时间
+        endTime: data.endTime,
+        startUserId: data.startUserId,
+        startUserName: data.startUserName,
+        startUserInfo: data.startUserInfo,
+        processStatus: data.processStatus,
+        processStatusDesc: data.processStatusDesc,
+        ccUserList: data.ccUserList || []
+    }
+
+    // 直接保存节点数据，不进行拆分
+    state.nodes = data.nodes || []
+
+    // 清空原有的分类数据
+    state.historyRecords = []
+    state.currentNodes = []
+    state.futureNodes = []
+
+    state.approvalDetail = data
+    state.loading = false
+
+    emit('load-success', data)
+}
+
+// 处理审批详情错误
+const handleApprovalDetailError = (err) => {
+    state.loading = false
+    message.error(err.message || '获取审批信息失败')
+}
+
+// 请求审批详情
+const requestApprovalDetail = (businessKey, type) => {
+    state.loading = true
+
+    const requestData = {
+        businessKey: businessKey,
+        businessType: type
+    }
+
+    // 使用新的接口获取审批详情
+    dataService.fetch(
+        requestData,
+        {},
+        '/tasks/approval-detail'
+    ).then((res) => {
+        console.log("approval-detail res", res)
+        handleApprovalDetailResponse(res)
+    }).catch((err) => {
+        handleApprovalDetailError(err)
+    })
+
+    // 临时测试数据（可以删除）
+    // const testData = {
+    //     "processInstanceId": "130953",
+    //     "businessKey": "357",
+    //     "processDefinitionKey": "Out_Visitor_Application",
+    //     "processDefinitionName": "访客自助登记",
+    //     "processStatus": "ACTIVE",
+    //     "processStatusDesc": "进行中",
+    //     "startTime": "2025-06-13 16:04:52",
+    //     "startUserId": null,
+    //     "endTime": null,
+    //     "ccUserList": [
+    //         {
+    //             "userId": "3180",
+    //             "name": "邓强杰",
+    //             "employeeNo": "4879",
+    //             "photo": "http://oas.guokeai.cn:9003/upload/20250529/20250529_26f77dfaf1324a96b341e4b9b142ae23.jpg",
+    //             "deptName": "技术部"
+    //         }
+    //     ],
+    //     "nodes": [
+    //         {
+    //             "nodeId": "receiver",
+    //             "nodeName": "接待人审批",
+    //             "nodeStatus": "COMPLETED",
+    //             "isMultiInstance": false,
+    //             "approvers": [
+    //                 {
+    //                     "userId": "3176",
+    //                     "userName": "吴跃忠",
+    //                     "employeeNo": "LaiRiFangZhang",
+    //                     "deptName": "技术部",
+    //                     "approvalStatus": "COMPLETED",
+    //                     "completedTime": "2025-06-13 16:06:11"
+    //                 }
+    //             ]
+    //         }
+    //     ]
+    // }
+    // handleApprovalDetailResponse(testData)
+}
+
+// 获取操作类型的样式类
+const getOperationClass = (operationType, operationResult) => {
+    const typeMap = {
+        'START': 'start',
+        'COMPLETE': operationResult === '通过' ? 'approved' : operationResult === '拒绝' ? 'rejected' : 'completed',
+        'CLAIM': 'claimed',
+        'ASSIGN': 'assigned',
+        'TRANSFER': 'transferred',
+        'REJECT': 'rejected',
+        'ADD_SIGN': 'add-sign'
+    }
+    return typeMap[operationType] || 'default'
+}
+
+// 获取操作类型的文本
+const getOperationTypeText = (approver) => {
+    if (!approver.operation) {
+        return getSimpleStatusText(null, approver)
+    }
+
+    const operationType = approver.operation.operationType
+    switch (operationType) {
+        case 'COMPLETE':
+            // 从operationData中获取审批结果
+            try {
+                const operationData = JSON.parse(approver.operation.operationData || '{}')
+                if (operationData.approved === true) {
+                    return '已同意'
+                } else if (operationData.approved === false) {
+                    return '已拒绝'
+                }
+            } catch (e) {
+                // 解析失败，使用默认逻辑
+            }
+            return '已完成'
+        case 'TRANSFER':
+            return '转审'
+        case 'ADD_SIGN':
+            return '加签'
+        case 'REJECT':
+            return '退回'
+        case 'CLAIM':
+            return '认领'
+        case 'ASSIGN':
+            return '分配'
+        default:
+            return '已处理'
+    }
+}
+
+// 获取流程状态主题
+const getProcessStatusTheme = (status) => {
+    const statusMap = {
+        'ACTIVE': 'primary',
+        'COMPLETED': 'success',
+        'SUSPENDED': 'warning'
+    }
+    return statusMap[status] || 'default'
+}
+
+// 获取流程状态文本
+const getProcessStatusText = (status) => {
+    const statusMap = {
+        'REJECT': '已拒绝',
+        'APPROVED': "已通过",
+        'ACTIVE': '进行中',
+        'COMPLETED': '已完成',
+        'SUSPENDED': '已暂停'
+    }
+    return statusMap[status] || status
+}
+
+// 获取当前步骤索引
+const getCurrentStepIndex = () => {
+    // 已完成节点数量
+    const completedNodes = state.nodes.filter(node => node.nodeStatus === 'COMPLETED').length
+    return completedNodes
+}
+
+// 获取节点步骤状态
+const getNodeStepStatus = (node) => {
+    switch (node.nodeStatus) {
+        case 'COMPLETED':
+            return 'finish'
+        case 'ACTIVE':
+            return 'process'
+        default:
+            return 'wait'
+    }
+}
+
+// 获取节点步骤样式类
+const getNodeStepClass = (node) => {
+    switch (node.nodeStatus) {
+        case 'ACTIVE':
+            return 'current-step'
+        case 'PENDING':
+        case 'WAITING':
+            return 'future-step'
+        default:
+            return ''
+    }
+}
+
+// 获取节点状态主题
+const getNodeStatusTheme = (node) => {
+    switch (node.nodeStatus) {
+        case 'COMPLETED':
+            return 'success'
+        case 'ACTIVE':
+            return 'primary'
+        default:
+            return 'default'
+    }
+}
+
+// 获取节点状态文本
+const getNodeStatusText = (node) => {
+    switch (node.nodeStatus) {
+        case 'COMPLETED':
+            return '已完成'
+        case 'ACTIVE':
+            return '进行中'
+        default:
+            return '未开始'
+    }
+}
+
+// 获取已完成的审批人
+const getCompletedApprovers = (node) => {
+    if (!node.approvers) return []
+    return node.approvers.filter(approver => approver.approvalStatus === 'COMPLETED')
+}
+
+// 获取当前审批人
+const getCurrentApprover = (node) => {
+    if (!node.approvers) return null
+    return node.approvers.find(approver => approver.approvalStatus === 'ACTIVE' && approver.isCurrent)
+}
+
+// 获取待处理审批人
+const getPendingApprovers = (node) => {
+    if (!node.approvers) return []
+    return node.approvers.filter(approver => approver.approvalStatus === 'PENDING')
+}
+
+// 获取用户信息
+const getUserInfo = (approver) => {
+    // 新数据结构：用户信息在nodeUser对象中
+    const userInfo = approver.nodeUser || approver
+    return {
+        userId: userInfo.userId,
+        name: userInfo.userName,
+        employeeNo: userInfo.employeeNo,
+        photo: userInfo.photo,
+        departmentName: userInfo.deptName,
+        position: userInfo.position,
+        phone: userInfo.phone,
+        email: userInfo.email
+    }
+}
+
+// 判断流程是否已完成
+const isProcessCompleted = () => {
+    return state.processInfo && state.processInfo.processStatus === 'COMPLETED'
+}
+
+// 获取抄送步骤状态
+const getCcStepStatus = () => {
+    return isProcessCompleted() ? 'finish' : 'wait'
+}
+
+// 获取抄送步骤样式类
+const getCcStepClass = () => {
+    return isProcessCompleted() ? '' : 'future-step'
+}
+
+// 获取抄送状态样式类
+const getCcStatusClass = () => {
+    return isProcessCompleted() ? 'cc-status' : 'cc-pending'
+}
+
+// 获取抄送状态文本
+const getCcStatusText = () => {
+    return isProcessCompleted() ? '已抄送' : '待抄送'
+}
+
+// 获取简单步骤图标类
+const getSimpleStepIconClass = (node) => {
+    switch (node.nodeStatus) {
+        case 'COMPLETED':
+            return 'step-icon-completed'
+        case 'ACTIVE':
+            return 'step-icon-active'
+        default:
+            return 'step-icon-waiting'
+    }
+}
+
+// 获取抄送简单图标类
+const getCcSimpleIconClass = () => {
+    return isProcessCompleted() ? 'step-icon-completed' : 'step-icon-waiting'
+}
+
+// 获取简单状态文本
+const getSimpleStatusText = (node, approver) => {
+    // 优先使用approvalResult
+    if (approver.approvalResult) {
+        return approver.approvalResult === '通过' ? '已同意' : approver.approvalResult === '拒绝' ? '已拒绝' : '已完成'
+    }
+    // 如果没有approvalResult，使用approved字段
+    if (approver.approved !== null && approver.approved !== undefined) {
+        return approver.approved ? '已同意' : '已拒绝'
+    }
+    // 默认返回已完成
+    return '已完成'
+}
+
+// 格式化时间
+const formatTime = (timeStr) => {
+    if (!timeStr) return '--'
+
+    let date
+    // 如果是数字（时间戳），直接使用
+    if (typeof timeStr === 'number') {
+        date = new Date(timeStr)
+    } else {
+        // 如果是字符串，尝试解析
+        date = new Date(timeStr)
+    }
+
+    if (isNaN(date.getTime())) return timeStr
+
+    const month = date.getMonth() + 1
+    const day = date.getDate()
+    const hours = date.getHours().toString().padStart(2, '0')
+    const minutes = date.getMinutes().toString().padStart(2, '0')
+
+    return `${month}/${day} ${hours}:${minutes}`
+}
+
+// 获取抄送时间文本
+const getCcTimeText = () => {
+    if (isProcessCompleted()) {
+        return `已抄送 · ${formatTime(state.processInfo.endTime || state.processInfo.startTimeStr)}`
+    }
+    return ''
+}
+
+// 获取发起人信息
+const getStartUserInfo = () => {
+    // 优先从历史记录中查找发起人
+    const startRecord = state.historyRecords.find(record => record.operationType === 'START')
+    if (startRecord) {
+        return {
+            userId: startRecord.operatorId,
+            userInfo: startRecord.assigneeInfo
+        }
+    }
+
+    // 如果没有发起记录，从流程信息中获取
+    if (state.processInfo && state.processInfo.startUserId) {
+        return {
+            userId: state.processInfo.startUserId,
+            userInfo: state.processInfo.startUserInfo || {
+                name: state.processInfo.startUserName || '未知用户'
+            }
+        }
+    }
+
+    // 如果都没有，尝试从第一个已完成节点的审批人获取（可能是发起人）
+    if (state.historyRecords.length > 0) {
+        const firstRecord = state.historyRecords[0]
+        return {
+            userId: firstRecord.operatorId,
+            userInfo: firstRecord.assigneeInfo
+        }
+    }
+
+    return { userId: '', userInfo: {} }
+}
+
+// 处理增加抄送人
+const handleAddCcUser = () => {
+    state.showCcListSelector = true
+    emit('add-cc-user', {
+        processInstanceId: state.processInfo?.processInstanceId,
+        businessKey: state.processInfo?.businessKey,
+        processDefinitionKey: state.processInfo?.processDefinitionKey
+    })
+}
+
+function onAddCcListConfirm(event) {
+    if (state.selectedCCList?.length === 0) return
+    state.showCcListSelector = false
+    dataService.fetch(
+        {
+            businessKey: state.processInfo?.businessKey,
+            type: state.processInfo?.processDefinitionKey,
+            processInstanceId: state.processInfo?.processInstanceId,
+            ccUsers: state.selectedCCList.map((item) => Number(item))
+        },
+        {},
+        '/tasks/batchAddCcInfo'
+    )
+        .then((res) => { })
+        .catch((err) => {
+            message.error(err.message)
+        })
+}
+
+// 判断是否需要显示目标用户
+const needShowTargetUser = (approver) => {
+    if (!approver.operation || !approver.targetUser) return false
+
+    const operationType = approver.operation.operationType
+    return ['TRANSFER', 'ADD_SIGN'].includes(operationType)
+}
+
+// 获取目标用户标签
+const getTargetUserLabel = (approver) => {
+    if (!approver.operation) return ''
+
+    const operationType = approver.operation.operationType
+    switch (operationType) {
+        case 'TRANSFER':
+            return '转审给：'
+        case 'ADD_SIGN':
+            return '加签：'
+        default:
+            return '目标：'
+    }
+}
+
+// 获取目标用户信息
+const getTargetUserInfo = (approver) => {
+    const targetUser = approver.targetUser
+    return {
+        userId: targetUser.userId,
+        name: targetUser.userName,
+        employeeNo: targetUser.employeeNo,
+        photo: targetUser.photo,
+        departmentName: targetUser.deptName,
+        position: targetUser.position,
+        phone: targetUser.phone,
+        email: targetUser.email
+    }
+}
+
+// 组件挂载时请求数据
+onMounted(() => {
+    if (props.businessKey && props.type) {
+        requestApprovalDetail(String(props.businessKey), props.type)
+    }
+})
+
+// 暴露方法供外部调用
+defineExpose({
+    requestApprovalDetail,
+    state
+})
+</script>
+
+<style scoped>
+.ebiz-approval-process {
+    width: 100%;
+}
+
+.card {
+    background-color: #ffffff;
+    padding: 10px;
+}
+
+.title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+}
+
+.process-info {
+    background-color: #fafafa;
+    padding: 10px 12px;
+    border-radius: 6px;
+    margin-bottom: 12px;
+    border: 1px solid #f0f0f0;
+}
+
+.info-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+.info-item:last-child {
+    margin-bottom: 0;
+}
+
+.label {
+    font-weight: 500;
+    color: #595959;
+    margin-right: 8px;
+    min-width: 70px;
+    font-size: 13px;
+}
+
+.step-content {
+    /* padding: 8px 0; */
+}
+
+.operation-info {
+    margin-bottom: 8px;
+}
+
+.operation-tag {
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    display: inline-block;
+}
+
+.operation-tag.start {
+    background-color: #f3e5f5;
+    color: #7b1fa2;
+}
+
+.operation-tag.approved {
+    background-color: #e8f5e8;
+    color: #388e3c;
+}
+
+.operation-tag.rejected {
+    background-color: #ffebee;
+    color: #d32f2f;
+}
+
+.operation-tag.completed {
+    background-color: #e3f2fd;
+    color: #1976d2;
+}
+
+.operation-tag.claimed {
+    background-color: #f3e5f5;
+    color: #7b1fa2;
+}
+
+.operation-tag.assigned {
+    background-color: #e0f2f1;
+    color: #00695c;
+}
+
+.operation-tag.transferred {
+    background-color: #fff8e1;
+    color: #f57c00;
+}
+
+.operation-tag.add-sign {
+    background-color: #fce4ec;
+    color: #c2185b;
+}
+
+.operation-tag.pending {
+    background-color: #fff3e0;
+    color: #f57c00;
+}
+
+.operation-tag.future {
+    background-color: #f5f5f5;
+    color: #757575;
+}
+
+.operation-tag.cc-status {
+    background-color: #fffbe6;
+    color: #faad14;
+}
+
+.operation-tag.cc-pending {
+    background-color: #f5f5f5;
+    color: #999999;
+}
+
+.step-detail {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 4px;
+    font-size: 14px;
+}
+
+.step-detail:last-child {
+    margin-bottom: 0;
+}
+
+.current-step {
+    background-color: #f8f9fa;
+    padding: 12px;
+    border-radius: 8px;
+    border-left: 4px solid #1976d2;
+}
+
+.future-step {
+    opacity: 0.7;
+}
+
+.multi-instance-details {
+    margin-top: 8px;
+}
+
+.instance-list {
+    margin-top: 12px;
+}
+
+.instance-item {
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 8px;
+    margin-bottom: 8px;
+}
+
+.instance-item:last-child {
+    margin-bottom: 0;
+}
+
+.instance-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.instance-status {
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.instance-approved {
+    background-color: #e8f5e8;
+    color: #388e3c;
+}
+
+.instance-rejected {
+    background-color: #ffebee;
+    color: #d32f2f;
+}
+
+.instance-completed {
+    background-color: #e3f2fd;
+    color: #1976d2;
+}
+
+.instance-pending {
+    background-color: #fff3e0;
+    color: #f57c00;
+}
+
+.instance-comment {
+    font-size: 12px;
+    color: #666;
+    margin-bottom: 4px;
+    line-height: 1.4;
+}
+
+.instance-time {
+    font-size: 11px;
+    color: #999;
+}
+
+.multi-instance-badge {
+    background-color: #e3f2fd;
+    color: #1976d2;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.instance-section {
+    margin-bottom: 12px;
+}
+
+.instance-section h5 {
+    font-size: 12px;
+    color: #666;
+    margin: 0 0 8px 0;
+    font-weight: 500;
+}
+
+.instance-section:last-child {
+    margin-bottom: 0;
+}
+
+/* 用户信息相关样式 */
+.assignee-info {
+    display: flex;
+    align-items: center;
+}
+
+.approver-info {
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.approver-info:last-child {
+    margin-bottom: 0;
+    border-bottom: none;
+}
+
+.candidate-users {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+}
+
+.candidate-user {
+    background-color: #f8f9fa;
+    padding: 4px 8px;
+    border-radius: 12px;
+    border: 1px solid #e9ecef;
+}
+
+/* 抄送人相关样式 */
+.cc-users {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+}
+
+.cc-user {
+    background-color: #f6ffed;
+    padding: 3px 6px;
+    border-radius: 10px;
+    border: 1px solid #d9f7be;
+    font-size: 12px;
+}
+
+.cc-users-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.cc-user-item {
+    background-color: #fffbe6;
+    padding: 8px;
+    border-radius: 8px;
+    border: 1px solid #ffd666;
+}
+
+/* 简化审批步骤样式 */
+.simple-approval-steps {
+    background-color: #ffffff;
+    padding: 12px 16px;
+}
+
+.simple-step-item {
+    position: relative;
+    padding-bottom: 16px;
+    border-left: 2px solid #e8e8e8;
+    margin-left: 10px;
+}
+
+.simple-step-item:last-child {
+    border-left: none;
+    padding-bottom: 0;
+}
+
+.step-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    margin-left: -11px;
+}
+
+.step-icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.step-icon-completed {
+    background: linear-gradient(135deg, #52c41a, #73d13d);
+}
+
+.step-icon-active {
+    background: linear-gradient(135deg, #1890ff, #40a9ff);
+}
+
+.step-icon-waiting {
+    background: linear-gradient(135deg, #d9d9d9, #f0f0f0);
+}
+
+.step-info {
+    flex: 1;
+}
+
+.step-title-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.step-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #262626;
+    line-height: 1.3;
+    flex: 1;
+    margin-right: 8px;
+}
+
+.step-status {
+    margin-left: 8px;
+    white-space: nowrap;
+}
+
+.step-content {
+    margin-left: 19px;
+    padding-bottom: 4px;
+}
+
+.simple-approver-wrapper {
+    padding: 6px 0;
+    margin: 6px 0;
+    border-bottom: 1px solid #f5f5f5;
+}
+
+.simple-approver-wrapper:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+}
+
+.simple-approver {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    min-height: 40px;
+}
+
+.approver-user-info {
+    flex: 1;
+    margin-right: 8px;
+}
+
+.approver-action-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    white-space: nowrap;
+}
+
+.action-type {
+    font-size: 12px;
+    font-weight: 500;
+    color: #1890ff;
+    margin-bottom: 2px;
+}
+
+.target-user-info {
+    padding: 8px 12px;
+    background-color: #f8f9fa;
+    border-radius: 6px;
+    border-left: 3px solid #1890ff;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.target-label {
+    font-size: 12px;
+    color: #666;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.approver-time {
+    font-size: 11px;
+    color: #8c8c8c;
+    margin-left: 8px;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.approver-comment {
+    background-color: #fafafa;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 12px;
+    color: #595959;
+    line-height: 1.4;
+    width: 100%;
+    border: 1px solid #f0f0f0;
+    box-sizing: border-box;
+}
+
+/* 增加抄送人按钮样式 */
+.add-cc-button-inline {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    border-color: #d9d9d9;
+    color: #666;
+    height: 24px;
+    padding: 0 8px;
+    white-space: nowrap;
+}
+
+.add-cc-button-inline:hover {
+    border-color: #1890ff;
+    color: #1890ff;
+}
 </style>