wl-design-mobile 0.8.19 → 0.8.21

package/flow/approval/flow-approval.vue

@@ -1,552 +1,552 @@
-<template>
-  <div class="flow-approval-container">
-    <!-- 流程头部信息 -->
-    <div class="flow-header" v-if="showHeader">
-      <div class="flow-header-left">
-        <div class="flow-title">
-          <span class="flow-name">{{ flowInfo.flowName || '审批流程' }}</span>
-        </div>
-        <div class="flow-meta" v-if="flowInfo.createTime || flowInfo.createUser || (copyUsers && copyUsers.length > 0)">
-          <div v-if="flowInfo.createUser" class="meta-item">
-            <span class="meta-label">发起人：</span>
-            <span class="meta-value">{{ flowInfo.createUser }}</span>
-          </div>
-          <div v-if="flowInfo.createTime" class="meta-item">
-            <span class="meta-label">发起时间：</span>
-            <span class="meta-value">{{ flowInfo.createTime }}</span>
-          </div>
-          <FlowCopyUsers v-if="copyUsers && copyUsers.length > 0" :copy-users="copyUsers" :editable="false" :show-label="true" />
-        </div>
-      </div>
-      <img :src="getFlowStatusImage()" class="flow-status-image" />
-    </div>
-
-    <!-- 流程节点时间线 -->
-    <div class="flow-timeline">
-      <div class="timeline-item" v-for="(item, index) in sortedFlowNodes" :key="index">
-        <!-- 左侧时间线 -->
-        <div class="timeline-col">
-          <div class="timeline-dot" :class="'dot-' + getStatusClass(item.status)">
-            <van-icon :name="getStatusIcon(item.status)" size="14"></van-icon>
-          </div>
-          <div class="timeline-line" v-if="index !== sortedFlowNodes.length - 1"></div>
-        </div>
-
-        <!-- 右侧内容 -->
-        <div class="content-col">
-          <!-- 节点头部信息 -->
-          <FlowNodeHeader :node-info="item" :node-index="index" />
-
-          <!-- 当前待审批节点：显示审批操作 -->
-          <div v-if="item.status === 'processing' && isCurrentAuditNode(index)" class="approval-card">
-            <!-- 申请描述（如果有） -->
-            <div v-if="item.applyDescription" class="submit-section">
-              <div class="section-label">申请描述</div>
-              <div class="section-content">{{ item.applyDescription }}</div>
-            </div>
-
-            <!-- 附件列表 -->
-            <FlowAttachmentList
-              :attachments="currentNodeAttachments"
-              :show-title="true"
-              :editable="true"
-              @click="handleAttachmentClick"
-              @upload-success="handleUploadSuccess"
-              @remove="handleRemoveAttachment"
-            />
-
-            <!-- 审批意见输入 -->
-            <div class="approval-section">
-              <div class="section-label">
-                <span>审批意见</span>
-                <span v-if="quickFillPhrases && quickFillPhrases.length > 0" class="quick-fill-hint">（点击常用语可快速填充）</span>
-              </div>
-              <div v-if="quickFillPhrases && quickFillPhrases.length > 0" class="quick-fill-tags">
-                <van-tag
-                  v-for="(phrase, idx) in quickFillPhrases"
-                  :key="idx"
-                  type="default"
-                  size="medium"
-                  class="quick-fill-tag"
-                  @click="fillPhrase(phrase)"
-                >
-                  {{ phrase }}
-                </van-tag>
-              </div>
-              <van-field
-                v-model="auditComment"
-                type="textarea"
-                :rows="3"
-                maxlength="200"
-                show-word-limit
-                placeholder="请输入审批意见..."
-              />
-            </div>
-
-            <!-- 审批操作按钮 -->
-            <div class="approval-actions">
-              <van-button type="warning" @click="handleReject" icon="close" :loading="rejecting" block>
-                不通过
-              </van-button>
-              <van-button type="primary" @click="handleApprove" icon="success" :loading="approving" block>
-                通过
-              </van-button>
-            </div>
-          </div>
-
-          <!-- 审批详情卡片（已完成/已驳回节点） -->
-          <FlowNodeCard
-            v-else-if="item.auditResult || item.auditComment || item.auditTime"
-            :node-info="item"
-            :is-apply-node="index === 0"
-          >
-            <template slot="attachments">
-              <FlowAttachmentList
-                v-if="item.attachments && item.attachments.length > 0"
-                :attachments="item.attachments"
-                @click="handleAttachmentClick"
-              />
-            </template>
-          </FlowNodeCard>
-
-          <!-- 待审批提示（后续节点） -->
-          <div v-else-if="item.status === 'pending'" class="pending-tip">
-            <van-icon name="clock-o" size="14" color="#ff976a"></van-icon>
-            <span>等待审批中...</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 空状态 -->
-      <div v-if="sortedFlowNodes.length === 0" class="flow-empty">
-        <van-icon name="info-o" size="48" color="#ccc"></van-icon>
-        <p>暂无流程节点信息</p>
-      </div>
-    </div>
-
-    <!-- 附件预览弹窗 -->
-    <FlowAttachmentModal
-      :visible.sync="previewModalVisible"
-      :file-url="previewFileUrl"
-      :file-name="previewFileName"
-      :modal-width="previewModalWidth"
-    />
-  </div>
-</template>
-
-<script>
-import FlowNodeHeader from '../comps/flow-node-header.vue'
-import FlowNodeCard from '../comps/flow-node-card.vue'
-import FlowAttachmentList from '../comps/flow-attachment-list.vue'
-import FlowAttachmentModal from '../comps/flow-attachment-modal.vue'
-import FlowCopyUsers from '../comps/flow-copy-users.vue'
-import { fileGetUrl } from '../../api/doc'
-import { getStatusIcon, getStatusClass } from '../comps/flow-util.js'
-
-export default {
-  name: 'FlowApproval',
-  components: {
-    FlowNodeHeader,
-    FlowNodeCard,
-    FlowAttachmentList,
-    FlowAttachmentModal,
-    FlowCopyUsers
-  },
-  props: {
-    /**
-     * 流程基本信息
-     * @property {string} flowName - 流程名称
-     * @property {string} createUser - 发起人
-     * @property {string} createTime - 发起时间
-     */
-    flowInfo: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * 流程节点数组
-     * @property {number} seq - 节点序号
-     * @property {string} taskName - 节点任务名称
-     * @property {string} auditUserName - 审批人姓名
-     * @property {string} auditUserAvatar - 审批人头像
-     * @property {string} status - 节点状态
-     * @property {string} auditResult - 审批结果
-     * @property {string} auditTime - 审批时间
-     * @property {string} startTime - 开始时间
-     * @property {string} endTime - 结束时间
-     * @property {string} auditComment - 审批意见
-     * @property {string} applyDescription - 申请描述
-     * @property {Array} attachments - 附件列表
-     */
-    flowNodes: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * 是否显示头部区域
-     * @default true
-     */
-    showHeader: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * 抄送人列表
-     * @property {string} name - 抄送人姓名
-     * @property {string} avatar - 抄送人头像地址
-     */
-    copyUsers: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * 当前审批节点索引（默认第一个 processing 状态的节点）
-     */
-    currentAuditNodeIndex: {
-      type: Number,
-      default: -1
-    },
-    /**
-     * 审批常用语快捷填充列表，为空则不显示
-     */
-    quickFillPhrases: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      auditComment: '',
-      approving: false,
-      rejecting: false,
-      previewModalVisible: false,
-      previewFileUrl: '',
-      previewFileName: '',
-      previewModalWidth: '320px',
-      currentNodeAttachments: []
-    }
-  },
-  computed: {
-    sortedFlowNodes() {
-      return [...this.flowNodes].sort((a, b) => (a.seq || 0) - (b.seq || 0))
-    },
-    overallFlowStatus() {
-      const nodes = this.sortedFlowNodes
-      if (nodes.length === 0) return 'processing'
-      if (nodes.some(n => n.status === 'rejected')) return 'rejected'
-      if (nodes.every(n => n.status === 'completed')) return 'completed'
-      if (nodes.some(n => n.status === 'processing')) return 'processing'
-      return 'processing'
-    },
-    currentAuditNode() {
-      if (this.currentAuditNodeIndex >= 0) {
-        return this.sortedFlowNodes[this.currentAuditNodeIndex]
-      }
-      return this.sortedFlowNodes.find(n => n.status === 'processing')
-    }
-  },
-  watch: {
-    currentAuditNode: {
-      immediate: true,
-      handler(node) {
-        if (node && node.attachments) {
-          this.currentNodeAttachments = [...node.attachments]
-        } else {
-          this.currentNodeAttachments = []
-        }
-      }
-    }
-  },
-  methods: {
-    getStatusIcon,
-    getStatusClass,
-    // 获取整体流程状态图片
-    getFlowStatusImage() {
-      const statusMap = {
-        completed: require('../comps/icons/approved.svg'),
-        processing: require('../comps/icons/underway.svg'),
-        rejected: require('../comps/icons/rejected.svg'),
-        withdrawn: require('../comps/icons/canceled.svg')
-      }
-      return statusMap[this.overallFlowStatus] || statusMap.processing
-    },
-    // 判断是否是当前审批节点
-    isCurrentAuditNode(index) {
-      if (this.currentAuditNodeIndex >= 0) {
-        return index === this.currentAuditNodeIndex
-      }
-      return this.sortedFlowNodes[index].status === 'processing'
-    },
-    handleAttachmentClick(file) {
-      if (!file || !file.fileName) return
-      const previewUrl = file.fileUrl || (file.fileId ? fileGetUrl + file.fileId : '')
-      if (!previewUrl) return
-      this.previewFileUrl = previewUrl
-      this.previewFileName = file.fileName
-      this.previewModalVisible = true
-    },
-    handleUploadSuccess(fileData) {
-      this.currentNodeAttachments.push(fileData)
-    },
-    handleRemoveAttachment(index) {
-      this.currentNodeAttachments.splice(index, 1)
-    },
-    handleApprove() {
-      this.approving = true
-      this.$emit('approve', {
-        auditComment: this.auditComment,
-        flowInfo: this.flowInfo,
-        currentNode: this.currentAuditNode,
-        attachments: this.currentNodeAttachments
-      })
-      this.approving = false
-    },
-    handleReject() {
-      this.rejecting = true
-      this.$emit('reject', {
-        auditComment: this.auditComment,
-        flowInfo: this.flowInfo,
-        currentNode: this.currentAuditNode,
-        attachments: this.currentNodeAttachments
-      })
-      this.rejecting = false
-    },
-    fillPhrase(phrase) {
-      if (this.auditComment && !this.auditComment.endsWith(' ')) {
-        this.auditComment += ' '
-      }
-      this.auditComment += phrase
-    }
-  }
-}
-</script>
-
-<style scoped>
-.flow-approval-container {
-  border-radius: 4px;
-  padding: 16px;
-  background: #fff;
-}
-
-.flow-header {
-  position: relative;
-  border-bottom: 1px solid #f0f0f0;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  padding-right: 80px;
-}
-
-.flow-header-left {
-  flex: 1;
-}
-
-.flow-title {
-  margin-bottom: 8px;
-}
-
-.flow-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #262626;
-}
-
-.flow-status-image {
-  position: absolute;
-  top: 2px;
-  right: 0;
-  height: 70px;
-  width: auto;
-  z-index: 10;
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: crisp-edges;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
-}
-
-.flow-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font-size: 13px;
-}
-
-.meta-item {
-  display: flex;
-}
-
-.meta-label {
-  color: #8c8c8c;
-  flex-shrink: 0;
-}
-
-.meta-value {
-  color: #262626;
-}
-
-.flow-timeline {
-  position: relative;
-}
-
-.timeline-item {
-  display: flex;
-  padding-bottom: 16px;
-}
-
-.timeline-item:last-child {
-  padding-bottom: 0;
-}
-
-.timeline-col {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-right: 12px;
-  width: 28px;
-  flex-shrink: 0;
-}
-
-.timeline-dot {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f0f0f0;
-  color: #999;
-  border: 2px solid #fff;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-  z-index: 2;
-}
-
-.timeline-dot.dot-success {
-  background: #07c160;
-  color: #fff;
-}
-
-.timeline-dot.dot-process {
-  background: #1989fa;
-  color: #fff;
-  animation: pulse 2s infinite;
-}
-
-.timeline-dot.dot-error {
-  background: #ee0a24;
-  color: #fff;
-}
-
-.timeline-dot.dot-warning {
-  background: #ff976a;
-  color: #fff;
-}
-
-.timeline-dot.dot-wait {
-  background: #f0f0f0;
-  color: #999;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 0 0 rgba(25, 137, 250, 0.4);
-  }
-  50% {
-    box-shadow: 0 0 0 8px rgba(25, 137, 250, 0);
-  }
-}
-
-.timeline-line {
-  width: 2px;
-  flex: 1;
-  min-height: 24px;
-  background: #e8e8e8;
-  margin-top: 4px;
-}
-
-.content-col {
-  flex: 1;
-  min-width: 0;
-}
-
-.approval-card {
-  border-radius: 4px;
-  padding: 12px;
-  border: 1px solid #e8e8e8;
-}
-
-.submit-section {
-  margin-top: 0;
-}
-
-.approval-section {
-  margin-top: 12px;
-}
-
-.approval-section:last-child {
-  margin-bottom: 0;
-}
-
-.section-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: #595959;
-  margin-bottom: 8px;
-}
-
-.quick-fill-hint {
-  font-size: 11px;
-  font-weight: normal;
-  color: #999;
-  margin-left: 6px;
-}
-
-.quick-fill-tags {
-  margin-bottom: 8px;
-  line-height: 2;
-}
-
-.quick-fill-tag {
-  margin-right: 8px;
-  margin-bottom: 8px;
-  cursor: pointer;
-}
-
-.section-content {
-  font-size: 13px;
-  color: #262626;
-  line-height: 1.5;
-}
-
-.approval-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 16px;
-}
-
-.pending-tip {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  background: #fff7e8;
-  border: 1px solid #ffd9b3;
-  border-radius: 4px;
-  font-size: 13px;
-  color: #ff976a;
-}
-
-.flow-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  color: #999;
-}
-
-.flow-empty p {
-  margin: 12px 0 0 0;
-  font-size: 14px;
-}
-</style>
+<template>
+  <div class="flow-approval-container">
+    <!-- 流程头部信息 -->
+    <div class="flow-header" v-if="showHeader">
+      <div class="flow-header-left">
+        <div class="flow-title">
+          <span class="flow-name">{{ flowInfo.flowName || '审批流程' }}</span>
+        </div>
+        <div class="flow-meta" v-if="flowInfo.createTime || flowInfo.createUser || (copyUsers && copyUsers.length > 0)">
+          <div v-if="flowInfo.createUser" class="meta-item">
+            <span class="meta-label">发起人：</span>
+            <span class="meta-value">{{ flowInfo.createUser }}</span>
+          </div>
+          <div v-if="flowInfo.createTime" class="meta-item">
+            <span class="meta-label">发起时间：</span>
+            <span class="meta-value">{{ flowInfo.createTime }}</span>
+          </div>
+          <FlowCopyUsers v-if="copyUsers && copyUsers.length > 0" :copy-users="copyUsers" :editable="false" :show-label="true" />
+        </div>
+      </div>
+      <img :src="getFlowStatusImage()" class="flow-status-image" />
+    </div>
+
+    <!-- 流程节点时间线 -->
+    <div class="flow-timeline">
+      <div class="timeline-item" v-for="(item, index) in sortedFlowNodes" :key="index">
+        <!-- 左侧时间线 -->
+        <div class="timeline-col">
+          <div class="timeline-dot" :class="'dot-' + getStatusClass(item.status)">
+            <van-icon :name="getStatusIcon(item.status)" size="14"></van-icon>
+          </div>
+          <div class="timeline-line" v-if="index !== sortedFlowNodes.length - 1"></div>
+        </div>
+
+        <!-- 右侧内容 -->
+        <div class="content-col">
+          <!-- 节点头部信息 -->
+          <FlowNodeHeader :node-info="item" :node-index="index" />
+
+          <!-- 当前待审批节点：显示审批操作 -->
+          <div v-if="item.status === 'processing' && isCurrentAuditNode(index)" class="approval-card">
+            <!-- 申请描述（如果有） -->
+            <div v-if="item.applyDescription" class="submit-section">
+              <div class="section-label">申请描述</div>
+              <div class="section-content">{{ item.applyDescription }}</div>
+            </div>
+
+            <!-- 附件列表 -->
+            <FlowAttachmentList
+              :attachments="currentNodeAttachments"
+              :show-title="true"
+              :editable="true"
+              @click="handleAttachmentClick"
+              @upload-success="handleUploadSuccess"
+              @remove="handleRemoveAttachment"
+            />
+
+            <!-- 审批意见输入 -->
+            <div class="approval-section">
+              <div class="section-label">
+                <span>审批意见</span>
+                <span v-if="quickFillPhrases && quickFillPhrases.length > 0" class="quick-fill-hint">（点击常用语可快速填充）</span>
+              </div>
+              <div v-if="quickFillPhrases && quickFillPhrases.length > 0" class="quick-fill-tags">
+                <van-tag
+                  v-for="(phrase, idx) in quickFillPhrases"
+                  :key="idx"
+                  type="default"
+                  size="medium"
+                  class="quick-fill-tag"
+                  @click="fillPhrase(phrase)"
+                >
+                  {{ phrase }}
+                </van-tag>
+              </div>
+              <van-field
+                v-model="auditComment"
+                type="textarea"
+                :rows="3"
+                maxlength="200"
+                show-word-limit
+                placeholder="请输入审批意见..."
+              />
+            </div>
+
+            <!-- 审批操作按钮 -->
+            <div class="approval-actions">
+              <van-button type="warning" @click="handleReject" icon="close" :loading="rejecting" block>
+                不通过
+              </van-button>
+              <van-button type="primary" @click="handleApprove" icon="success" :loading="approving" block>
+                通过
+              </van-button>
+            </div>
+          </div>
+
+          <!-- 审批详情卡片（已完成/已驳回节点） -->
+          <FlowNodeCard
+            v-else-if="item.auditResult || item.auditComment || item.auditTime"
+            :node-info="item"
+            :is-apply-node="index === 0"
+          >
+            <template slot="attachments">
+              <FlowAttachmentList
+                v-if="item.attachments && item.attachments.length > 0"
+                :attachments="item.attachments"
+                @click="handleAttachmentClick"
+              />
+            </template>
+          </FlowNodeCard>
+
+          <!-- 待审批提示（后续节点） -->
+          <div v-else-if="item.status === 'pending'" class="pending-tip">
+            <van-icon name="clock-o" size="14" color="#ff976a"></van-icon>
+            <span>等待审批中...</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="sortedFlowNodes.length === 0" class="flow-empty">
+        <van-icon name="info-o" size="48" color="#ccc"></van-icon>
+        <p>暂无流程节点信息</p>
+      </div>
+    </div>
+
+    <!-- 附件预览弹窗 -->
+    <FlowAttachmentModal
+      :visible.sync="previewModalVisible"
+      :file-url="previewFileUrl"
+      :file-name="previewFileName"
+      :modal-width="previewModalWidth"
+    />
+  </div>
+</template>
+
+<script>
+import FlowNodeHeader from '../comps/flow-node-header.vue'
+import FlowNodeCard from '../comps/flow-node-card.vue'
+import FlowAttachmentList from '../comps/flow-attachment-list.vue'
+import FlowAttachmentModal from '../comps/flow-attachment-modal.vue'
+import FlowCopyUsers from '../comps/flow-copy-users.vue'
+import { fileGetUrl } from '../../api/doc'
+import { getStatusIcon, getStatusClass } from '../comps/flow-util.js'
+
+export default {
+  name: 'FlowApproval',
+  components: {
+    FlowNodeHeader,
+    FlowNodeCard,
+    FlowAttachmentList,
+    FlowAttachmentModal,
+    FlowCopyUsers
+  },
+  props: {
+    /**
+     * 流程基本信息
+     * @property {string} flowName - 流程名称
+     * @property {string} createUser - 发起人
+     * @property {string} createTime - 发起时间
+     */
+    flowInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * 流程节点数组
+     * @property {number} seq - 节点序号
+     * @property {string} taskName - 节点任务名称
+     * @property {string} auditUserName - 审批人姓名
+     * @property {string} auditUserAvatar - 审批人头像
+     * @property {string} status - 节点状态
+     * @property {string} auditResult - 审批结果
+     * @property {string} auditTime - 审批时间
+     * @property {string} startTime - 开始时间
+     * @property {string} endTime - 结束时间
+     * @property {string} auditComment - 审批意见
+     * @property {string} applyDescription - 申请描述
+     * @property {Array} attachments - 附件列表
+     */
+    flowNodes: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 是否显示头部区域
+     * @default true
+     */
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 抄送人列表
+     * @property {string} name - 抄送人姓名
+     * @property {string} avatar - 抄送人头像地址
+     */
+    copyUsers: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 当前审批节点索引（默认第一个 processing 状态的节点）
+     */
+    currentAuditNodeIndex: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * 审批常用语快捷填充列表，为空则不显示
+     */
+    quickFillPhrases: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      auditComment: '',
+      approving: false,
+      rejecting: false,
+      previewModalVisible: false,
+      previewFileUrl: '',
+      previewFileName: '',
+      previewModalWidth: '320px',
+      currentNodeAttachments: []
+    }
+  },
+  computed: {
+    sortedFlowNodes() {
+      return [...this.flowNodes].sort((a, b) => (a.seq || 0) - (b.seq || 0))
+    },
+    overallFlowStatus() {
+      const nodes = this.sortedFlowNodes
+      if (nodes.length === 0) return 'processing'
+      if (nodes.some(n => n.status === 'rejected')) return 'rejected'
+      if (nodes.every(n => n.status === 'completed')) return 'completed'
+      if (nodes.some(n => n.status === 'processing')) return 'processing'
+      return 'processing'
+    },
+    currentAuditNode() {
+      if (this.currentAuditNodeIndex >= 0) {
+        return this.sortedFlowNodes[this.currentAuditNodeIndex]
+      }
+      return this.sortedFlowNodes.find(n => n.status === 'processing')
+    }
+  },
+  watch: {
+    currentAuditNode: {
+      immediate: true,
+      handler(node) {
+        if (node && node.attachments) {
+          this.currentNodeAttachments = [...node.attachments]
+        } else {
+          this.currentNodeAttachments = []
+        }
+      }
+    }
+  },
+  methods: {
+    getStatusIcon,
+    getStatusClass,
+    // 获取整体流程状态图片
+    getFlowStatusImage() {
+      const statusMap = {
+        completed: require('../comps/icons/approved.svg'),
+        processing: require('../comps/icons/underway.svg'),
+        rejected: require('../comps/icons/rejected.svg'),
+        withdrawn: require('../comps/icons/canceled.svg')
+      }
+      return statusMap[this.overallFlowStatus] || statusMap.processing
+    },
+    // 判断是否是当前审批节点
+    isCurrentAuditNode(index) {
+      if (this.currentAuditNodeIndex >= 0) {
+        return index === this.currentAuditNodeIndex
+      }
+      return this.sortedFlowNodes[index].status === 'processing'
+    },
+    handleAttachmentClick(file) {
+      if (!file || !file.fileName) return
+      const previewUrl = file.fileUrl || (file.fileId ? fileGetUrl + file.fileId : '')
+      if (!previewUrl) return
+      this.previewFileUrl = previewUrl
+      this.previewFileName = file.fileName
+      this.previewModalVisible = true
+    },
+    handleUploadSuccess(fileData) {
+      this.currentNodeAttachments.push(fileData)
+    },
+    handleRemoveAttachment(index) {
+      this.currentNodeAttachments.splice(index, 1)
+    },
+    handleApprove() {
+      this.approving = true
+      this.$emit('approve', {
+        auditComment: this.auditComment,
+        flowInfo: this.flowInfo,
+        currentNode: this.currentAuditNode,
+        attachments: this.currentNodeAttachments
+      })
+      this.approving = false
+    },
+    handleReject() {
+      this.rejecting = true
+      this.$emit('reject', {
+        auditComment: this.auditComment,
+        flowInfo: this.flowInfo,
+        currentNode: this.currentAuditNode,
+        attachments: this.currentNodeAttachments
+      })
+      this.rejecting = false
+    },
+    fillPhrase(phrase) {
+      if (this.auditComment && !this.auditComment.endsWith(' ')) {
+        this.auditComment += ' '
+      }
+      this.auditComment += phrase
+    }
+  }
+}
+</script>
+
+<style scoped>
+.flow-approval-container {
+  border-radius: 4px;
+  padding: 16px;
+  background: #fff;
+}
+
+.flow-header {
+  position: relative;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  padding-right: 80px;
+}
+
+.flow-header-left {
+  flex: 1;
+}
+
+.flow-title {
+  margin-bottom: 8px;
+}
+
+.flow-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.flow-status-image {
+  position: absolute;
+  top: 2px;
+  right: 0;
+  height: 70px;
+  width: auto;
+  z-index: 10;
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
+}
+
+.flow-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+}
+
+.meta-item {
+  display: flex;
+}
+
+.meta-label {
+  color: #8c8c8c;
+  flex-shrink: 0;
+}
+
+.meta-value {
+  color: #262626;
+}
+
+.flow-timeline {
+  position: relative;
+}
+
+.timeline-item {
+  display: flex;
+  padding-bottom: 16px;
+}
+
+.timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+.timeline-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 12px;
+  width: 28px;
+  flex-shrink: 0;
+}
+
+.timeline-dot {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f0f0f0;
+  color: #999;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  z-index: 2;
+}
+
+.timeline-dot.dot-success {
+  background: #07c160;
+  color: #fff;
+}
+
+.timeline-dot.dot-process {
+  background: #1989fa;
+  color: #fff;
+  animation: pulse 2s infinite;
+}
+
+.timeline-dot.dot-error {
+  background: #ee0a24;
+  color: #fff;
+}
+
+.timeline-dot.dot-warning {
+  background: #ff976a;
+  color: #fff;
+}
+
+.timeline-dot.dot-wait {
+  background: #f0f0f0;
+  color: #999;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(25, 137, 250, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(25, 137, 250, 0);
+  }
+}
+
+.timeline-line {
+  width: 2px;
+  flex: 1;
+  min-height: 24px;
+  background: #e8e8e8;
+  margin-top: 4px;
+}
+
+.content-col {
+  flex: 1;
+  min-width: 0;
+}
+
+.approval-card {
+  border-radius: 4px;
+  padding: 12px;
+  border: 1px solid #e8e8e8;
+}
+
+.submit-section {
+  margin-top: 0;
+}
+
+.approval-section {
+  margin-top: 12px;
+}
+
+.approval-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #595959;
+  margin-bottom: 8px;
+}
+
+.quick-fill-hint {
+  font-size: 11px;
+  font-weight: normal;
+  color: #999;
+  margin-left: 6px;
+}
+
+.quick-fill-tags {
+  margin-bottom: 8px;
+  line-height: 2;
+}
+
+.quick-fill-tag {
+  margin-right: 8px;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+
+.section-content {
+  font-size: 13px;
+  color: #262626;
+  line-height: 1.5;
+}
+
+.approval-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.pending-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: #fff7e8;
+  border: 1px solid #ffd9b3;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #ff976a;
+}
+
+.flow-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999;
+}
+
+.flow-empty p {
+  margin: 12px 0 0 0;
+  font-size: 14px;
+}
+</style>