@ebiz/designer-components 0.1.8 → 0.1.9

package/src/components/EbizSApprovalProcess.vue

@@ -0,0 +1,1132 @@
+<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>
+                                    <!-- 增加抄送人按钮 -->
+                                    <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>
+
+            <ebiz-employee-selector :single="false" defaultTab="organization" class="component-base-style"
+                v-model="state.selectedCCList" v-model:visible="state.showCcListSelector" @confirm="onAddCcListConfirm">
+            </ebiz-employee-selector>
+        </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;
+}
+</style>