wl-design-mobile 0.8.19 → 0.8.21

package/flow/lambo-flow-detail.vue

@@ -1,912 +1,912 @@
-<template>
-  <div class="flow-detail-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">
-          <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>
-          <div class="copy-users-wrapper" v-if="copyUsers && copyUsers.length > 0">
-            <span class="copy-label">抄送人：</span>
-            <div class="avatar-list">
-              <template v-for="(user, index) in displayCopyUsers">
-                <van-popup
-                  :key="'popup-' + index"
-                  v-model="user.popupVisible"
-                  position="top"
-                  :style="{ padding: '12px 16px' }"
-                >
-                  <div class="copy-popup-name">{{ user.name }}</div>
-                  <div v-if="user.dept" class="copy-popup-dept">{{ user.dept }}</div>
-                </van-popup>
-                <div
-                  :key="'avatar-' + index"
-                  class="copy-avatar"
-                  :style="getAvatarStyle(index)"
-                  @click="user.popupVisible = true"
-                >
-                  <img v-if="user.avatar" :src="user.avatar" alt="" />
-                  <span v-else>{{ user.name ? user.name.charAt(0) : '' }}</span>
-                </div>
-              </template>
-              <van-popup v-if="copyUsers.length > 3" v-model="moreCopyPopupVisible" position="top" :style="{ padding: '12px 16px' }">
-                <div v-for="(user, index) in remainingCopyUsers" :key="index" class="copy-popup-name">
-                  {{ user.name }}
-                </div>
-              </van-popup>
-              <div v-if="copyUsers.length > 3" class="avatar-excess" @click="moreCopyPopupVisible = true">
-                +{{ copyUsers.length - 3 }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="flow-timeline">
-      <template v-for="(item, index) in sortedFlowNodes">
-        <div v-if="!isNodesExpanded && shouldShowCollapseBtn() && index === 2" :key="'collapse-' + index"
-          class="collapse-placeholder">
-          <div class="timeline-col">
-            <div class="timeline-dot dot-more">
-              <van-icon name="more-o" size="14"></van-icon>
-            </div>
-            <div class="timeline-line"></div>
-          </div>
-          <div class="content-col">
-            <div class="expand-btn" @click="isNodesExpanded = true">
-              <van-icon name="down"></van-icon>
-              展开更多节点（{{ sortedFlowNodes.length - 4 }}个）
-            </div>
-          </div>
-        </div>
-
-        <div v-if="isNodesExpanded || shouldShowNode(index)" :key="index" class="timeline-item">
-          <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">
-            <div class="node-header">
-              <div class="avatar-wrapper">
-                <div class="node-avatar" :class="{ 'avatar-no-image': !item.auditUserAvatar }">
-                  <img v-if="item.auditUserAvatar" :src="item.auditUserAvatar" alt="" />
-                  <span v-else>{{ item.auditUserName ? item.auditUserName.charAt(0) : (index + 1) }}</span>
-                </div>
-                <div class="status-badge" :class="'badge-' + getStatusClass(item.status)">
-                  <van-icon :name="getStatusIcon(item.status)" size="10"></van-icon>
-                </div>
-              </div>
-              <div class="node-info">
-                <div class="node-title-row">
-                  <span class="task-name">{{ item.taskName }}</span>
-                </div>
-              </div>
-            </div>
-
-            <div class="node-detail-card" v-if="item.auditResult || item.auditComment || item.auditTime">
-              <div class="audit-result-badge" :class="'badge-' + getAuditResultClass(item.auditResult)">
-                <van-icon :name="getAuditIcon(item.auditResult)" size="12"></van-icon>
-                <span>{{ getAuditResultText(item.auditResult) }}</span>
-              </div>
-              <div class="detail-grid">
-                <div class="detail-item">
-                  <span class="detail-label">审批时间：</span>
-                  <span class="detail-value">{{ item.auditTime || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">审批人：</span>
-                  <span class="detail-value">{{ item.auditUserName || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">开始时间：</span>
-                  <span class="detail-value">{{ item.startTime || '-' }}</span>
-                </div>
-                <div class="detail-item">
-                  <span class="detail-label">结束时间：</span>
-                  <span class="detail-value">{{ item.endTime || '-' }}</span>
-                </div>
-              </div>
-              <div class="detail-item comment-item" v-if="item.auditComment">
-                <span class="detail-label">审批意见：</span>
-                <span class="detail-value">{{ item.auditComment }}</span>
-              </div>
-
-              <div class="attachment-section" v-if="item.attachments && item.attachments.length > 0">
-                <div class="attachment-title">
-                  <van-icon name="paperclip" size="14" style="margin-right: 4px"></van-icon>
-                  附件（{{ item.attachments.length }}）
-                </div>
-                <div class="attachment-list">
-                  <div v-for="(file, fileIndex) in item.attachments" :key="fileIndex" class="attachment-item"
-                    @click="handleAttachmentClick(file)">
-                    <van-icon :name="getFileIcon(file.fileName)" size="14"></van-icon>
-                    <span class="file-name">{{ file.fileName }}</span>
-                    <span class="file-size">{{ formatFileSize(file.fileSize) }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="pending-tip" v-else-if="item.status === 'pending'">
-              <van-icon name="clock-o" size="14" color="#faad14"></van-icon>
-              <span>等待审批中...</span>
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <div v-if="isNodesExpanded && shouldShowCollapseBtn()" class="collapse-btn-wrapper">
-        <div class="collapse-btn" @click="isNodesExpanded = false">
-          <van-icon name="up"></van-icon>
-          收起节点
-        </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>
-
-    <van-popup v-model="previewModalVisible" position="center" round closeable>
-      <div class="preview-header">
-        <span class="preview-title">{{ previewFileName }}</span>
-      </div>
-      <div class="preview-content">
-        <div class="preview-placeholder">
-          <van-icon name="description" size="64" color="#ccc"></van-icon>
-          <p>文件预览</p>
-        </div>
-      </div>
-      <div class="preview-footer">
-        <van-button type="default" @click="handleDownloadFile" style="margin-right: 12px">下载</van-button>
-        <van-button type="primary" @click="closePreviewModal">关闭</van-button>
-      </div>
-    </van-popup>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LamboFlowDetail',
-  props: {
-    flowInfo: {
-      type: Object,
-      default: () => ({})
-    },
-    flowNodes: {
-      type: Array,
-      default: () => []
-    },
-    showHeader: {
-      type: Boolean,
-      default: true
-    },
-    enableCollapse: {
-      type: Boolean,
-      default: true
-    },
-    copyUsers: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      isNodesExpanded: false,
-      moreCopyPopupVisible: false,
-      previewModalVisible: false,
-      previewFileUrl: '',
-      previewFileType: '',
-      previewFileName: ''
-    }
-  },
-  computed: {
-    sortedFlowNodes() {
-      return [...this.flowNodes].sort((a, b) => (a.seq || 0) - (b.seq || 0))
-    },
-    displayCopyUsers() {
-      return this.copyUsers.slice(0, 3).map(user => ({
-        ...user,
-        popupVisible: false
-      }))
-    },
-    remainingCopyUsers() {
-      return this.copyUsers.slice(3)
-    }
-  },
-  methods: {
-    getAvatarStyle(index) {
-      if (index === 0) return {}
-      return {
-        marginLeft: '-10px'
-      }
-    },
-    getStatusIcon(status) {
-      const iconMap = {
-        completed: 'passed',
-        processing: 'clock-o',
-        rejected: 'cross',
-        transferred: 'replay',
-        pending: 'circle'
-      }
-      return iconMap[status] || iconMap.pending
-    },
-    getStatusClass(status) {
-      const classMap = {
-        completed: 'success',
-        processing: 'process',
-        rejected: 'error',
-        transferred: 'warning',
-        pending: 'wait'
-      }
-      return classMap[status] || classMap.pending
-    },
-    getAuditResultClass(auditResult) {
-      const classMap = {
-        '30': 'pass',
-        '40': 'reject',
-        '50': 'transfer',
-        '60': 'return'
-      }
-      return classMap[auditResult] || 'default'
-    },
-    getAuditResultText(auditResult) {
-      const textMap = {
-        '30': '同意',
-        '40': '驳回',
-        '50': '转办',
-        '60': '退回'
-      }
-      return textMap[auditResult] || '审批'
-    },
-    getAuditIcon(auditResult) {
-      const iconMap = {
-        '30': 'passed',
-        '40': 'cross',
-        '50': 'replay',
-        '60': 'undo'
-      }
-      return iconMap[auditResult] || 'circle'
-    },
-    getFileIcon(fileName) {
-      if (!fileName) return 'description'
-      const ext = fileName.substring(fileName.lastIndexOf('.')).toLowerCase()
-      const iconMap = {
-        '.pdf': 'description',
-        '.doc': 'description',
-        '.docx': 'description',
-        '.xls': 'description',
-        '.xlsx': 'description',
-        '.ppt': 'description',
-        '.pptx': 'description',
-        '.jpg': 'photo',
-        '.jpeg': 'photo',
-        '.png': 'photo',
-        '.gif': 'photo',
-        '.bmp': 'photo',
-        '.webp': 'photo',
-        '.zip': 'folder',
-        '.rar': 'folder',
-        '.7z': 'folder',
-        '.tar': 'folder',
-        '.gz': 'folder',
-        '.txt': 'description',
-        '.mp4': 'video',
-        '.avi': 'video',
-        '.mov': 'video',
-        '.mp3': 'music',
-        '.wav': 'music'
-      }
-      return iconMap[ext] || 'description'
-    },
-    formatFileSize(size) {
-      if (!size) return '-'
-      if (size < 1024) return size + ' B'
-      if (size < 1024 * 1024) return (size / 1024).toFixed(2) + ' KB'
-      return (size / (1024 * 1024)).toFixed(2) + ' MB'
-    },
-    handleAttachmentClick(file) {
-      this.$emit('attachment-click', file)
-      if (file && file.fileUrl && file.fileName) {
-        this.previewFileUrl = file.fileUrl
-        this.previewFileName = file.fileName
-        this.previewFileType = file.fileName.split('.').pop().toLowerCase()
-        this.previewModalVisible = true
-      } else {
-        this.$toast({
-          message: '文件信息无效，无法预览',
-          position: 'middle'
-        })
-      }
-    },
-    closePreviewModal() {
-      this.previewModalVisible = false
-    },
-    handleDownloadFile() {
-      if (!this.previewFileUrl) {
-        this.$toast({
-          message: '文件地址不存在',
-          position: 'middle'
-        })
-        return
-      }
-      let downloadFileName = this.previewFileName
-      if (!downloadFileName) {
-        downloadFileName = this.previewFileUrl.split('/').pop() || 'download'
-      }
-      const link = document.createElement('a')
-      link.href = this.previewFileUrl
-      link.download = downloadFileName
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-    },
-    shouldShowCollapseBtn() {
-      return this.enableCollapse && this.sortedFlowNodes.length > 4
-    },
-    shouldShowNode(index) {
-      const total = this.sortedFlowNodes.length
-      if (total <= 4) return true
-      return index < 2 || index >= total - 2
-    }
-  }
-}
-</script>
-
-<style scoped>
-@import "../styles/index.less";
-
-.flow-detail-container {
-  background: #fff;
-  padding: 16px;
-}
-
-.flow-header {
-  position: relative;
-  border-bottom: 1px solid #f0f0f0;
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-}
-
-.flow-header-left {
-  flex: 1;
-}
-
-.flow-title {
-  margin-bottom: 8px;
-}
-
-.flow-name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #262626;
-}
-
-.flow-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  font-size: 13px;
-  color: #8c8c8c;
-}
-
-.meta-item {
-  display: flex;
-}
-
-.meta-label {
-  color: #8c8c8c;
-  flex-shrink: 0;
-}
-
-.meta-value {
-  color: #262626;
-}
-
-.copy-users-wrapper {
-  display: flex;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.copy-label {
-  font-size: 13px;
-  color: #8c8c8c;
-  margin-right: 8px;
-}
-
-.avatar-list {
-  display: flex;
-  align-items: center;
-}
-
-.copy-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #1989fa;
-  color: #fff;
-  font-size: 12px;
-  border: 2px solid #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-  overflow: hidden;
-}
-
-.copy-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.copy-avatar:hover {
-  transform: scale(1.1);
-  box-shadow: 0 2px 8px rgba(25, 137, 250, 0.3);
-  z-index: 10;
-  position: relative;
-}
-
-.avatar-excess {
-  width: 24px;
-  height: 24px;
-  line-height: 20px;
-  text-align: center;
-  border-radius: 50%;
-  background: #1989fa;
-  color: #fff;
-  font-size: 11px;
-  margin-left: -10px;
-  border: 2px solid #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.avatar-excess:hover {
-  transform: scale(1.1);
-  box-shadow: 0 2px 8px rgba(25, 137, 250, 0.3);
-  z-index: 10;
-  position: relative;
-}
-
-.copy-popup-name {
-  font-size: 14px;
-  color: #323233;
-  line-height: 1.5;
-}
-
-.copy-popup-dept {
-  font-size: 12px;
-  color: #969799;
-  line-height: 1.5;
-}
-
-.flow-timeline {
-  position: relative;
-}
-
-.timeline-item,
-.collapse-placeholder {
-  display: flex;
-  margin-bottom: 16px;
-}
-
-.timeline-item:last-child {
-  margin-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-more {
-  background: #e8eaed;
-  color: #86909c;
-}
-
-.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;
-}
-
-.expand-btn {
-  color: #1989fa;
-  padding: 0;
-  height: auto;
-  line-height: 1.5;
-  margin-top: 6px;
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.collapse-btn-wrapper {
-  padding-left: 42px;
-  margin-top: -8px;
-}
-
-.collapse-btn {
-  color: #86909c;
-  padding: 0;
-  height: auto;
-  line-height: 1.5;
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.node-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.avatar-wrapper {
-  position: relative;
-  margin-right: 12px;
-  flex-shrink: 0;
-}
-
-.node-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #1989fa;
-  color: #fff;
-  font-size: 16px;
-  overflow: hidden;
-}
-
-.node-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.node-avatar.avatar-no-image {
-  background: #1989fa;
-  color: #fff;
-}
-
-.status-badge {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid #fff;
-  background: #f0f0f0;
-  color: #999;
-}
-
-.status-badge.badge-success {
-  background: #07c160;
-  color: #fff;
-}
-
-.status-badge.badge-process {
-  background: #1989fa;
-  color: #fff;
-}
-
-.status-badge.badge-error {
-  background: #ee0a24;
-  color: #fff;
-}
-
-.status-badge.badge-warning {
-  background: #ff976a;
-  color: #fff;
-}
-
-.status-badge.badge-wait {
-  background: #f0f0f0;
-  color: #999;
-}
-
-.node-info {
-  flex: 1;
-  padding-top: 2px;
-}
-
-.node-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.task-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #262626;
-}
-
-.node-detail-card {
-  border-radius: 4px;
-  padding: 12px;
-  border: 1px solid #e8e8e8;
-  position: relative;
-  overflow: hidden;
-}
-
-.audit-result-badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  border-radius: 0 0 0 4px;
-  font-size: 12px;
-  font-weight: 500;
-  z-index: 1;
-}
-
-.audit-result-badge.badge-pass {
-  background: #07c160;
-  color: #fff;
-}
-
-.audit-result-badge.badge-reject {
-  background: #ee0a24;
-  color: #fff;
-}
-
-.audit-result-badge.badge-transfer {
-  background: #ff976a;
-  color: #fff;
-}
-
-.audit-result-badge.badge-return {
-  background: #8c8c8c;
-  color: #fff;
-}
-
-.audit-result-badge.badge-default {
-  background: #d9d9d9;
-  color: #fff;
-}
-
-.detail-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.detail-item {
-  display: flex;
-  align-items: flex-start;
-  font-size: 13px;
-  width: calc(50% - 4px);
-}
-
-.comment-item {
-  width: 100%;
-  margin-top: 8px;
-}
-
-.detail-label {
-  color: #8c8c8c;
-  flex-shrink: 0;
-}
-
-.detail-value {
-  color: #262626;
-  flex: 1;
-  word-break: break-all;
-}
-
-.attachment-section {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid #f0f0f0;
-}
-
-.attachment-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: #595959;
-  margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-}
-
-.attachment-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.attachment-item {
-  display: inline-flex;
-  align-items: center;
-  padding: 6px 10px;
-  background: #fff;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-size: 12px;
-  gap: 6px;
-  color: #595959;
-  height: 32px;
-}
-
-.attachment-item:hover {
-  background: #f0f0f0;
-  color: #262626;
-}
-
-.attachment-item .van-icon {
-  color: #8c8c8c;
-  vertical-align: middle;
-  flex-shrink: 0;
-}
-
-.file-name {
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-size {
-  color: #bfbfbf;
-  flex-shrink: 0;
-  font-size: 11px;
-}
-
-.pending-tip {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 12px;
-  background: #fffbe6;
-  border: 1px solid #ffe58f;
-  border-radius: 4px;
-  font-size: 13px;
-  color: #d48806;
-}
-
-.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;
-}
-
-.preview-header {
-  padding: 16px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.preview-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #323233;
-}
-
-.preview-content {
-  padding: 40px 20px;
-  min-height: 200px;
-}
-
-.preview-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: #969799;
-}
-
-.preview-placeholder p {
-  margin-top: 12px;
-}
-
-.preview-footer {
-  padding: 16px;
-  border-top: 1px solid #f0f0f0;
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
+<template>
+  <div class="flow-detail-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">
+          <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>
+          <div class="copy-users-wrapper" v-if="copyUsers && copyUsers.length > 0">
+            <span class="copy-label">抄送人：</span>
+            <div class="avatar-list">
+              <template v-for="(user, index) in displayCopyUsers">
+                <van-popup
+                  :key="'popup-' + index"
+                  v-model="user.popupVisible"
+                  position="top"
+                  :style="{ padding: '12px 16px' }"
+                >
+                  <div class="copy-popup-name">{{ user.name }}</div>
+                  <div v-if="user.dept" class="copy-popup-dept">{{ user.dept }}</div>
+                </van-popup>
+                <div
+                  :key="'avatar-' + index"
+                  class="copy-avatar"
+                  :style="getAvatarStyle(index)"
+                  @click="user.popupVisible = true"
+                >
+                  <img v-if="user.avatar" :src="user.avatar" alt="" />
+                  <span v-else>{{ user.name ? user.name.charAt(0) : '' }}</span>
+                </div>
+              </template>
+              <van-popup v-if="copyUsers.length > 3" v-model="moreCopyPopupVisible" position="top" :style="{ padding: '12px 16px' }">
+                <div v-for="(user, index) in remainingCopyUsers" :key="index" class="copy-popup-name">
+                  {{ user.name }}
+                </div>
+              </van-popup>
+              <div v-if="copyUsers.length > 3" class="avatar-excess" @click="moreCopyPopupVisible = true">
+                +{{ copyUsers.length - 3 }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flow-timeline">
+      <template v-for="(item, index) in sortedFlowNodes">
+        <div v-if="!isNodesExpanded && shouldShowCollapseBtn() && index === 2" :key="'collapse-' + index"
+          class="collapse-placeholder">
+          <div class="timeline-col">
+            <div class="timeline-dot dot-more">
+              <van-icon name="more-o" size="14"></van-icon>
+            </div>
+            <div class="timeline-line"></div>
+          </div>
+          <div class="content-col">
+            <div class="expand-btn" @click="isNodesExpanded = true">
+              <van-icon name="down"></van-icon>
+              展开更多节点（{{ sortedFlowNodes.length - 4 }}个）
+            </div>
+          </div>
+        </div>
+
+        <div v-if="isNodesExpanded || shouldShowNode(index)" :key="index" class="timeline-item">
+          <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">
+            <div class="node-header">
+              <div class="avatar-wrapper">
+                <div class="node-avatar" :class="{ 'avatar-no-image': !item.auditUserAvatar }">
+                  <img v-if="item.auditUserAvatar" :src="item.auditUserAvatar" alt="" />
+                  <span v-else>{{ item.auditUserName ? item.auditUserName.charAt(0) : (index + 1) }}</span>
+                </div>
+                <div class="status-badge" :class="'badge-' + getStatusClass(item.status)">
+                  <van-icon :name="getStatusIcon(item.status)" size="10"></van-icon>
+                </div>
+              </div>
+              <div class="node-info">
+                <div class="node-title-row">
+                  <span class="task-name">{{ item.taskName }}</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="node-detail-card" v-if="item.auditResult || item.auditComment || item.auditTime">
+              <div class="audit-result-badge" :class="'badge-' + getAuditResultClass(item.auditResult)">
+                <van-icon :name="getAuditIcon(item.auditResult)" size="12"></van-icon>
+                <span>{{ getAuditResultText(item.auditResult) }}</span>
+              </div>
+              <div class="detail-grid">
+                <div class="detail-item">
+                  <span class="detail-label">审批时间：</span>
+                  <span class="detail-value">{{ item.auditTime || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">审批人：</span>
+                  <span class="detail-value">{{ item.auditUserName || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">开始时间：</span>
+                  <span class="detail-value">{{ item.startTime || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">结束时间：</span>
+                  <span class="detail-value">{{ item.endTime || '-' }}</span>
+                </div>
+              </div>
+              <div class="detail-item comment-item" v-if="item.auditComment">
+                <span class="detail-label">审批意见：</span>
+                <span class="detail-value">{{ item.auditComment }}</span>
+              </div>
+
+              <div class="attachment-section" v-if="item.attachments && item.attachments.length > 0">
+                <div class="attachment-title">
+                  <van-icon name="paperclip" size="14" style="margin-right: 4px"></van-icon>
+                  附件（{{ item.attachments.length }}）
+                </div>
+                <div class="attachment-list">
+                  <div v-for="(file, fileIndex) in item.attachments" :key="fileIndex" class="attachment-item"
+                    @click="handleAttachmentClick(file)">
+                    <van-icon :name="getFileIcon(file.fileName)" size="14"></van-icon>
+                    <span class="file-name">{{ file.fileName }}</span>
+                    <span class="file-size">{{ formatFileSize(file.fileSize) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="pending-tip" v-else-if="item.status === 'pending'">
+              <van-icon name="clock-o" size="14" color="#faad14"></van-icon>
+              <span>等待审批中...</span>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div v-if="isNodesExpanded && shouldShowCollapseBtn()" class="collapse-btn-wrapper">
+        <div class="collapse-btn" @click="isNodesExpanded = false">
+          <van-icon name="up"></van-icon>
+          收起节点
+        </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>
+
+    <van-popup v-model="previewModalVisible" position="center" round closeable>
+      <div class="preview-header">
+        <span class="preview-title">{{ previewFileName }}</span>
+      </div>
+      <div class="preview-content">
+        <div class="preview-placeholder">
+          <van-icon name="description" size="64" color="#ccc"></van-icon>
+          <p>文件预览</p>
+        </div>
+      </div>
+      <div class="preview-footer">
+        <van-button type="default" @click="handleDownloadFile" style="margin-right: 12px">下载</van-button>
+        <van-button type="primary" @click="closePreviewModal">关闭</van-button>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LamboFlowDetail',
+  props: {
+    flowInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    flowNodes: {
+      type: Array,
+      default: () => []
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    enableCollapse: {
+      type: Boolean,
+      default: true
+    },
+    copyUsers: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      isNodesExpanded: false,
+      moreCopyPopupVisible: false,
+      previewModalVisible: false,
+      previewFileUrl: '',
+      previewFileType: '',
+      previewFileName: ''
+    }
+  },
+  computed: {
+    sortedFlowNodes() {
+      return [...this.flowNodes].sort((a, b) => (a.seq || 0) - (b.seq || 0))
+    },
+    displayCopyUsers() {
+      return this.copyUsers.slice(0, 3).map(user => ({
+        ...user,
+        popupVisible: false
+      }))
+    },
+    remainingCopyUsers() {
+      return this.copyUsers.slice(3)
+    }
+  },
+  methods: {
+    getAvatarStyle(index) {
+      if (index === 0) return {}
+      return {
+        marginLeft: '-10px'
+      }
+    },
+    getStatusIcon(status) {
+      const iconMap = {
+        completed: 'passed',
+        processing: 'clock-o',
+        rejected: 'cross',
+        transferred: 'replay',
+        pending: 'circle'
+      }
+      return iconMap[status] || iconMap.pending
+    },
+    getStatusClass(status) {
+      const classMap = {
+        completed: 'success',
+        processing: 'process',
+        rejected: 'error',
+        transferred: 'warning',
+        pending: 'wait'
+      }
+      return classMap[status] || classMap.pending
+    },
+    getAuditResultClass(auditResult) {
+      const classMap = {
+        '30': 'pass',
+        '40': 'reject',
+        '50': 'transfer',
+        '60': 'return'
+      }
+      return classMap[auditResult] || 'default'
+    },
+    getAuditResultText(auditResult) {
+      const textMap = {
+        '30': '同意',
+        '40': '驳回',
+        '50': '转办',
+        '60': '退回'
+      }
+      return textMap[auditResult] || '审批'
+    },
+    getAuditIcon(auditResult) {
+      const iconMap = {
+        '30': 'passed',
+        '40': 'cross',
+        '50': 'replay',
+        '60': 'undo'
+      }
+      return iconMap[auditResult] || 'circle'
+    },
+    getFileIcon(fileName) {
+      if (!fileName) return 'description'
+      const ext = fileName.substring(fileName.lastIndexOf('.')).toLowerCase()
+      const iconMap = {
+        '.pdf': 'description',
+        '.doc': 'description',
+        '.docx': 'description',
+        '.xls': 'description',
+        '.xlsx': 'description',
+        '.ppt': 'description',
+        '.pptx': 'description',
+        '.jpg': 'photo',
+        '.jpeg': 'photo',
+        '.png': 'photo',
+        '.gif': 'photo',
+        '.bmp': 'photo',
+        '.webp': 'photo',
+        '.zip': 'folder',
+        '.rar': 'folder',
+        '.7z': 'folder',
+        '.tar': 'folder',
+        '.gz': 'folder',
+        '.txt': 'description',
+        '.mp4': 'video',
+        '.avi': 'video',
+        '.mov': 'video',
+        '.mp3': 'music',
+        '.wav': 'music'
+      }
+      return iconMap[ext] || 'description'
+    },
+    formatFileSize(size) {
+      if (!size) return '-'
+      if (size < 1024) return size + ' B'
+      if (size < 1024 * 1024) return (size / 1024).toFixed(2) + ' KB'
+      return (size / (1024 * 1024)).toFixed(2) + ' MB'
+    },
+    handleAttachmentClick(file) {
+      this.$emit('attachment-click', file)
+      if (file && file.fileUrl && file.fileName) {
+        this.previewFileUrl = file.fileUrl
+        this.previewFileName = file.fileName
+        this.previewFileType = file.fileName.split('.').pop().toLowerCase()
+        this.previewModalVisible = true
+      } else {
+        this.$toast({
+          message: '文件信息无效，无法预览',
+          position: 'middle'
+        })
+      }
+    },
+    closePreviewModal() {
+      this.previewModalVisible = false
+    },
+    handleDownloadFile() {
+      if (!this.previewFileUrl) {
+        this.$toast({
+          message: '文件地址不存在',
+          position: 'middle'
+        })
+        return
+      }
+      let downloadFileName = this.previewFileName
+      if (!downloadFileName) {
+        downloadFileName = this.previewFileUrl.split('/').pop() || 'download'
+      }
+      const link = document.createElement('a')
+      link.href = this.previewFileUrl
+      link.download = downloadFileName
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    },
+    shouldShowCollapseBtn() {
+      return this.enableCollapse && this.sortedFlowNodes.length > 4
+    },
+    shouldShowNode(index) {
+      const total = this.sortedFlowNodes.length
+      if (total <= 4) return true
+      return index < 2 || index >= total - 2
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import "../styles/index.less";
+
+.flow-detail-container {
+  background: #fff;
+  padding: 16px;
+}
+
+.flow-header {
+  position: relative;
+  border-bottom: 1px solid #f0f0f0;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+}
+
+.flow-header-left {
+  flex: 1;
+}
+
+.flow-title {
+  margin-bottom: 8px;
+}
+
+.flow-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.flow-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  color: #8c8c8c;
+}
+
+.meta-item {
+  display: flex;
+}
+
+.meta-label {
+  color: #8c8c8c;
+  flex-shrink: 0;
+}
+
+.meta-value {
+  color: #262626;
+}
+
+.copy-users-wrapper {
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.copy-label {
+  font-size: 13px;
+  color: #8c8c8c;
+  margin-right: 8px;
+}
+
+.avatar-list {
+  display: flex;
+  align-items: center;
+}
+
+.copy-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #1989fa;
+  color: #fff;
+  font-size: 12px;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  overflow: hidden;
+}
+
+.copy-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.copy-avatar:hover {
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(25, 137, 250, 0.3);
+  z-index: 10;
+  position: relative;
+}
+
+.avatar-excess {
+  width: 24px;
+  height: 24px;
+  line-height: 20px;
+  text-align: center;
+  border-radius: 50%;
+  background: #1989fa;
+  color: #fff;
+  font-size: 11px;
+  margin-left: -10px;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.avatar-excess:hover {
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(25, 137, 250, 0.3);
+  z-index: 10;
+  position: relative;
+}
+
+.copy-popup-name {
+  font-size: 14px;
+  color: #323233;
+  line-height: 1.5;
+}
+
+.copy-popup-dept {
+  font-size: 12px;
+  color: #969799;
+  line-height: 1.5;
+}
+
+.flow-timeline {
+  position: relative;
+}
+
+.timeline-item,
+.collapse-placeholder {
+  display: flex;
+  margin-bottom: 16px;
+}
+
+.timeline-item:last-child {
+  margin-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-more {
+  background: #e8eaed;
+  color: #86909c;
+}
+
+.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;
+}
+
+.expand-btn {
+  color: #1989fa;
+  padding: 0;
+  height: auto;
+  line-height: 1.5;
+  margin-top: 6px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.collapse-btn-wrapper {
+  padding-left: 42px;
+  margin-top: -8px;
+}
+
+.collapse-btn {
+  color: #86909c;
+  padding: 0;
+  height: auto;
+  line-height: 1.5;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.node-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.avatar-wrapper {
+  position: relative;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.node-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #1989fa;
+  color: #fff;
+  font-size: 16px;
+  overflow: hidden;
+}
+
+.node-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.node-avatar.avatar-no-image {
+  background: #1989fa;
+  color: #fff;
+}
+
+.status-badge {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #fff;
+  background: #f0f0f0;
+  color: #999;
+}
+
+.status-badge.badge-success {
+  background: #07c160;
+  color: #fff;
+}
+
+.status-badge.badge-process {
+  background: #1989fa;
+  color: #fff;
+}
+
+.status-badge.badge-error {
+  background: #ee0a24;
+  color: #fff;
+}
+
+.status-badge.badge-warning {
+  background: #ff976a;
+  color: #fff;
+}
+
+.status-badge.badge-wait {
+  background: #f0f0f0;
+  color: #999;
+}
+
+.node-info {
+  flex: 1;
+  padding-top: 2px;
+}
+
+.node-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.task-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.node-detail-card {
+  border-radius: 4px;
+  padding: 12px;
+  border: 1px solid #e8e8e8;
+  position: relative;
+  overflow: hidden;
+}
+
+.audit-result-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 0 0 0 4px;
+  font-size: 12px;
+  font-weight: 500;
+  z-index: 1;
+}
+
+.audit-result-badge.badge-pass {
+  background: #07c160;
+  color: #fff;
+}
+
+.audit-result-badge.badge-reject {
+  background: #ee0a24;
+  color: #fff;
+}
+
+.audit-result-badge.badge-transfer {
+  background: #ff976a;
+  color: #fff;
+}
+
+.audit-result-badge.badge-return {
+  background: #8c8c8c;
+  color: #fff;
+}
+
+.audit-result-badge.badge-default {
+  background: #d9d9d9;
+  color: #fff;
+}
+
+.detail-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  font-size: 13px;
+  width: calc(50% - 4px);
+}
+
+.comment-item {
+  width: 100%;
+  margin-top: 8px;
+}
+
+.detail-label {
+  color: #8c8c8c;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  color: #262626;
+  flex: 1;
+  word-break: break-all;
+}
+
+.attachment-section {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.attachment-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: #595959;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.attachment-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.attachment-item {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 10px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 12px;
+  gap: 6px;
+  color: #595959;
+  height: 32px;
+}
+
+.attachment-item:hover {
+  background: #f0f0f0;
+  color: #262626;
+}
+
+.attachment-item .van-icon {
+  color: #8c8c8c;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+
+.file-name {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-size {
+  color: #bfbfbf;
+  flex-shrink: 0;
+  font-size: 11px;
+}
+
+.pending-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: #fffbe6;
+  border: 1px solid #ffe58f;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #d48806;
+}
+
+.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;
+}
+
+.preview-header {
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.preview-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #323233;
+}
+
+.preview-content {
+  padding: 40px 20px;
+  min-height: 200px;
+}
+
+.preview-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #969799;
+}
+
+.preview-placeholder p {
+  margin-top: 12px;
+}
+
+.preview-footer {
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>