From 2c55b1a8a0700df79268550335506637b41610ce Mon Sep 17 00:00:00 2001
From: seatonwan9
Date: 星期日, 24 八月 2025 20:36:36 +0800
Subject: [PATCH] 提交源码
---
src/views/approveManage/tradeApproval/checkFiles.vue | 1168 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 1,105 insertions(+), 63 deletions(-)
diff --git a/src/views/approveManage/tradeApproval/checkFiles.vue b/src/views/approveManage/tradeApproval/checkFiles.vue
index 6760c42..02db0b4 100644
--- a/src/views/approveManage/tradeApproval/checkFiles.vue
+++ b/src/views/approveManage/tradeApproval/checkFiles.vue
@@ -1,112 +1,1154 @@
<template>
<div class="default-main">
+ <!-- 璁㈠崟淇℃伅 + 鐢宠浜轰俊鎭� + 浜ゆ槗鍐呭锛堝悎骞朵负鍚屼竴鍗＄墖锛� -->
<el-card shadow="never">
- <div class="title">璁㈠崟淇℃伅</div>
- <el-descriptions :column="3" border class="mt10">
+ <el-descriptions
+ :column="2"
+ border
+ class="mt10 order-desc fixed-label"
+ label-width="180px"
+ :label-style="labelStyle"
+ :content-style="contentStyle"
+ >
+ <el-descriptions-item :span="2" class="section-header">
+ <template #label>
+ <el-icon class="section-icon"><Document /></el-icon>
+ <span>璁㈠崟淇℃伅</span>
+ </template>
+ <template #default></template>
+ </el-descriptions-item>
<el-descriptions-item label="璁㈠崟缂栧彿">{{ detail.orderNo }}</el-descriptions-item>
<el-descriptions-item label="浜ゆ槗璧勬簮绫诲瀷">{{ detail.resourceTypeName }}</el-descriptions-item>
- <el-descriptions-item label="浜ゆ槗鐘舵��">{{ detail.statusName }}</el-descriptions-item>
<el-descriptions-item label="鐢宠鏃堕棿">{{ detail.applyTime }}</el-descriptions-item>
- <el-descriptions-item label="鍗曚綅">{{ detail.unitName }}</el-descriptions-item>
- <el-descriptions-item label="鐢ㄦ埛鍚�">{{ detail.userName }}</el-descriptions-item>
+ <el-descriptions-item label="浜ゆ槗鐘舵��">
+ <el-tag :type="getStatusType(detail.status)" size="small">{{ detail.statusName }}</el-tag>
+ </el-descriptions-item>
</el-descriptions>
+
+ <!-- 鐢宠浜轰俊鎭紙涓庤鍗曚俊鎭悓鍗＄墖锛屽鐢ㄥ垎闅旀爣棰樻牱寮忥級 -->
+ <el-descriptions
+ :column="2"
+ border
+ class="mt15 order-desc fixed-label"
+ label-width="180px"
+ :label-style="labelStyle"
+ :content-style="contentStyle"
+ >
+ <el-descriptions-item :span="2" class="section-header">
+ <template #label>
+ <el-icon class="section-icon"><User /></el-icon>
+ <span>鐢宠浜轰俊鎭�</span>
+ </template>
+ <template #default></template>
+ </el-descriptions-item>
+ <el-descriptions-item label="濮撳悕">{{ detail.userName || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鍗曚綅">{{ detail.unitName || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="閮ㄩ棬">{{ detail.userDept || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="鐢ㄦ埛鍚�">{{ detail.userAccount || '-' }}</el-descriptions-item>
+ </el-descriptions>
+
+ <!-- 浜ゆ槗鍐呭锛堢揣闅忕敵璇蜂汉淇℃伅锛屽悓鍗＄墖锛屽鐢ㄥ垎闅旀爣棰樻牱寮忥級 -->
+ <el-descriptions
+ :column="2"
+ border
+ class="mt15 order-desc fixed-label"
+ label-width="180px"
+ :label-style="labelStyle"
+ :content-style="contentStyle"
+ >
+ <el-descriptions-item :span="2" class="section-header">
+ <template #label>
+ <el-icon class="section-icon"><Goods /></el-icon>
+ <span>浜ゆ槗鍐呭</span>
+ </template>
+ <template #default></template>
+ </el-descriptions-item>
+ <el-descriptions-item label="浜у搧鍚嶇О">
+ <el-link type="primary" :underline="false">{{ detail.productName }}</el-link>
+ </el-descriptions-item>
+ <el-descriptions-item label="鎻愪緵鑰�">{{ detail.supplier }}</el-descriptions-item>
+ <el-descriptions-item label="琛屼笟棰嗗煙">{{ detail.industry }}</el-descriptions-item>
+ <el-descriptions-item label="鍗曚綅宸ョ▼">{{ detail.projectUnit }}</el-descriptions-item>
+ <el-descriptions-item label="浜у搧绫诲瀷">{{ detail.productType || '-' }}</el-descriptions-item>
+ <el-descriptions-item label="浜у搧绠�浠�">
+ <div class="desc-wrap">{{ detail.productDesc }}</div>
+ </el-descriptions-item>
+ </el-descriptions>
+
+ <!-- 璁㈠崟璇︽儏锛堢Щ鍔ㄥ埌浜ゆ槗鍐呭涓嬮潰锛屽悓涓�鍗＄墖鍐咃級 -->
+ <div ref="orderTableWrapRef">
+ <el-table
+ :data="tableData"
+ border
+ class="mt10 order-table"
+ :header-cell-style="headerCenterStyle"
+ :cell-style="bodyCellStyle"
+ :row-class-name="getRowClassName"
+ :span-method="arraySpanMethod"
+ >
+ <el-table-column>
+ <template #header>
+ <el-icon class="header-icon"><List /></el-icon>
+ <span>璇︽儏</span>
+ </template>
+ <el-table-column label="" :width="colWidths.detail1">
+ <template #default="{ row }">
+ <div v-if="!row.isSummary">{{ row.name }}</div>
+ <div v-else class="summary-merged">
+ <div class="summary-left">
+ 鍏� <span class="count">{{ detail.items.length }}</span> 浠�
+ </div>
+ <div class="summary-right">
+ 鎬昏锛�<span class="price">{{ detail.pointTotal }}</span> 绉垎
+ <span class="ml20 price">{{ detail.cashTotal }}</span> 鍏�
+ </div>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column label="" :width="colWidths.detail2">
+ <template #default="{ row }">
+ <div v-if="!row.isSummary" class="gray">閿�鍞舰寮忥細{{ row.saleType || '-' }}</div>
+ <div v-if="!row.isSummary" class="gray">璐︽埛鏁伴噺锛歿{ row.accountCount ?? '-' }}</div>
+ </template>
+ </el-table-column>
+ <el-table-column label="" :width="colWidths.detail3">
+ <template #default="{ row }">
+ <div v-if="!row.isSummary" class="gray">瀹㈡埛瀵硅薄锛歿{ row.customerTarget || '-' }}</div>
+ <div v-if="!row.isSummary" class="gray">骞跺彂鑺傜偣鏁伴噺锛歿{ row.concurrentNodes ?? '-' }}</div>
+ </template>
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鍗曚环">
+ <el-table-column label="" :width="colWidths.price">
+ <template #default="{ row }">
+ <div v-if="!row.isSummary">{{ formatPrice(row) }}</div>
+ </template>
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鏁伴噺">
+ <el-table-column label="" :width="colWidths.quantity">
+ <template #default="{ row }">
+ <div v-if="!row.isSummary">{{ row.quantity }}</div>
+ </template>
+ </el-table-column>
+ </el-table-column>
+ <el-table-column label="鏈熼檺(骞�)">
+ <el-table-column label="" :width="colWidths.period">
+ <template #default="{ row }">
+ <div v-if="!row.isSummary">{{ formatPeriod(row) }}</div>
+ </template>
+ </el-table-column>
+ </el-table-column>
+ </el-table>
+ </div>
+
+ <!-- 绉婚櫎鍘熸潵鐨勮〃鏍煎簳閮ㄤ俊鎭紝鍥犱负宸茬粡绉诲埌琛ㄦ牸鏈�鍚庝竴琛� -->
</el-card>
+ <!-- 瀹℃壒杩借釜 -->
+ <el-card class="mt15" shadow="never" v-if="detail.records?.length">
+ <div class="title">瀹℃壒杩借釜</div>
+
+ <!-- 鏍囩椤� -->
+ <el-tabs v-model="activeTab" class="approval-tabs">
+ <el-tab-pane label="瀹℃壒璁板綍" name="records">
+ <el-table
+ :data="detail.records"
+ border
+ class="mt10 record-table"
+ :header-cell-style="recordTableHeaderStyle"
+ :cell-style="recordTableCellStyle"
+ >
+ <el-table-column label="鑺傜偣鍚嶇О" prop="nodeName" width="120" />
+ <el-table-column label="瀹℃壒浜�" prop="approver" width="120" />
+ <el-table-column label="瀹℃壒閮ㄩ棬" prop="department" width="200" />
+ <el-table-column label="寮�濮嬫椂闂�" prop="startTime" width="180" />
+ <el-table-column label="缁撴潫鏃堕棿" prop="endTime" width="180" />
+ <el-table-column label="鐘舵��" width="120">
+ <template #default="{ row }">
+ <el-tag :type="getRecordStatusType(row.statusName)" size="small">
+ {{ row.statusName }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="瀹℃壒鎰忚" width="200">
+ <template #default="{ row }">
+ {{ row.opinion || '-' }}
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ <el-tab-pane label="娴佺▼鑺傜偣" name="nodes">
+ <el-table
+ :data="detail.nodes"
+ border
+ class="mt10 node-table"
+ :header-cell-style="recordTableHeaderStyle"
+ :cell-style="recordTableCellStyle"
+ >
+ <el-table-column label="鑺傜偣鍚嶇О" prop="nodeName" width="120" />
+ <el-table-column label="鑺傜偣绫诲瀷" prop="nodeType" width="120" />
+ <el-table-column label="澶勭悊浜�" prop="handler" width="160" />
+ <el-table-column label="澶勭悊閮ㄩ棬" prop="department" width="200" />
+ <el-table-column label="鐘舵��" width="120">
+ <template #default="{ row }">
+ <el-tag :type="getNodeStatusType(row.status)" size="small">
+ {{ row.statusName }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
+
+ <!-- 杩斿洖鎸夐挳 -->
+ <div class="action-buttons">
+ <el-button @click="goBack">杩斿洖</el-button>
+ </div>
+ </el-card>
+
+ <!-- 浜ゆ槗淇℃伅澶囨敞 -->
<el-card class="mt15" shadow="never">
- <div class="title">浜ゆ槗鍐呭</div>
- <el-table :data="detail.items" border class="mt10">
- <el-table-column label="璇︽儏" min-width="280">
+ <div class="title">鏂囦欢鏍告煡</div>
+
+ <!-- 鏂囦欢鍒楄〃 -->
+ <el-table
+ :data="fileList"
+ border
+ class="mt10 file-table"
+ :header-cell-style="fileTableHeaderStyle"
+ :cell-style="fileTableCellStyle"
+ v-loading="fileLoading"
+ >
+ <el-table-column label="搴忓彿" type="index" width="60" align="center" />
+ <el-table-column label="鏂囦欢鍚�" prop="originalName" min-width="200">
<template #default="{ row }">
- <div>
- <div>{{ row.name }}</div>
- <div class="gray">瀹㈡埛瀵硅薄锛歿{ row.customerTarget }}</div>
- <div class="gray">骞跺彂鑺傜偣鏁帮細{{ row.concurrentNodes }}</div>
+ <div class="file-name">
+ <el-icon class="file-icon" :class="getFileIconClass(row.fileType)">
+ <Document v-if="getFileIconClass(row.fileType) === 'doc'" />
+ <Picture v-else-if="getFileIconClass(row.fileType) === 'image'" />
+ <VideoPlay v-else-if="getFileIconClass(row.fileType) === 'video'" />
+ <Document v-else />
+ </el-icon>
+ <span class="file-text">{{ row.originalName || row.fileName }}</span>
</div>
</template>
</el-table-column>
- <el-table-column label="鍗曚环" prop="priceName" width="140" />
- <el-table-column label="鏁伴噺" prop="quantity" width="80" />
- <el-table-column label="鏈熼檺(骞�)" prop="period" width="120" />
- </el-table>
-
- <div class="total">
- 鎬昏锛�<span class="price">{{ detail.pointTotal }}</span> 绉垎
- <span class="ml20 price">{{ detail.cashTotal }}</span> 鍏�
- </div>
- </el-card>
-
- <el-card class="mt15" shadow="never">
- <div class="title">浜ゆ槗鏂囦欢</div>
- <el-table :data="files" border class="mt10">
- <el-table-column label="鏂囦欢鍚嶇О" prop="name" />
- <el-table-column label="鏂囦欢澶у皬" prop="size" width="140" />
- <el-table-column label="鎿嶄綔" width="160">
+ <el-table-column label="鏂囦欢绫诲瀷" prop="fileType" width="100" align="center">
<template #default="{ row }">
- <el-button type="primary" link @click="preview(row)">棰勮</el-button>
- <el-button type="primary" link @click="download(row)">涓嬭浇</el-button>
+ <el-tag :type="getFileTypeTag(row.fileType)" size="small">
+ {{ getFileTypeName(row.fileType) }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鏂囦欢澶у皬" prop="fileSize" width="100" align="center">
+ <template #default="{ row }">
+ {{ formatFileSize(row.fileSize) }}
+ </template>
+ </el-table-column>
+ <el-table-column label="涓婁紶鏃堕棿" prop="createdAt" width="140" align="center">
+ <template #default="{ row }">
+ {{ formatDateTime(row.createdAt) }}
+ </template>
+ </el-table-column>
+ <el-table-column label="涓婁紶浜�" prop="uploadUserName" width="100" align="center" />
+ <el-table-column label="闄勪欢绫诲瀷" prop="attachmentType" width="100" align="center">
+ <template #default="{ row }">
+ <el-tag :type="getAttachmentTypeTag(row.attachmentType)" size="small">
+ {{ row.attachmentType || '鍏朵粬' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="180" align="center">
+ <template #default="{ row }">
+ <el-button
+ type="primary"
+ size="small"
+ @click="handlePreview(row)"
+ :disabled="!isPreviewable(row)"
+ >
+ 棰勮
+ </el-button>
+ <el-button
+ type="success"
+ size="small"
+ @click="handleDownload(row)"
+ >
+ 涓嬭浇
+ </el-button>
</template>
</el-table-column>
</el-table>
- <div class="title mt15">浜ゆ槗淇℃伅澶囨敞</div>
- <el-form :model="form" label-width="120px" class="mt10">
- <div v-for="(item, i) in detail.items" :key="i" class="item-block">
- <div class="sub-title">{{ item.name }}</div>
- <el-form-item label="澶囨敞">
- <el-input v-model="form.items[i].remark" placeholder="璇疯緭鍏ュ娉�" />
+ <!-- 瀹℃壒鎰忚 -->
+ <div class="approval-section mt15">
+ <div class="section-title">瀹℃壒鎰忚</div>
+ <el-form :model="approvalForm" label-width="100px" class="mt10">
+ <el-form-item label="瀹℃壒鎰忚" prop="opinion">
+ <el-input
+ v-model="approvalForm.opinion"
+ type="textarea"
+ :rows="4"
+ placeholder="璇疯緭鍏ュ鎵规剰瑙�"
+ maxlength="500"
+ show-word-limit
+ />
</el-form-item>
- </div>
- </el-form>
- <div class="ba-center mt15">
- <el-button @click="goBack">杩斿洖</el-button>
- <el-button type="success" @click="submit(true)">閫氳繃</el-button>
- <el-button type="danger" @click="submit(false)">椹冲洖</el-button>
+ </el-form>
+ </div>
+
+ <!-- 鎿嶄綔鎸夐挳 -->
+ <div class="approval-actions">
+ <el-button @click="goBack" class="back-btn">杩斿洖</el-button>
+ <el-button
+ type="success"
+ @click="handleApprove(true)"
+ class="approve-btn"
+ :loading="approvalLoading"
+ >
+ 閫氳繃
+ </el-button>
+ <el-button
+ type="danger"
+ @click="handleApprove(false)"
+ class="reject-btn"
+ :loading="approvalLoading"
+ >
+ 椹冲洖
+ </el-button>
</div>
</el-card>
+
+ <!-- 鏂囦欢棰勮寮圭獥 -->
+ <el-dialog
+ v-model="previewVisible"
+ title="鏂囦欢棰勮"
+ width="80%"
+ :close-on-click-modal="false"
+ :close-on-press-escape="false"
+ class="file-preview-dialog"
+ >
+ <div class="preview-content">
+ <filePreview ref="filePreviewRef" @closePreview="previewVisible = false" />
+ </div>
+ </el-dialog>
</div>
</template>
<script setup lang="ts">
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, ref, computed, nextTick, type CSSProperties } from 'vue'
+import { Document, User, Goods, List, Picture, VideoPlay } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
-import { fetchApprovalDetail, checkFiles } from '@/api/approvalManage'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import orderApi from '@/api/orderApi'
+import { checkFiles } from '@/api/approvalManage'
+import filePreview from '@/components/filePreview/index.vue'
+import createAxios from '@/utils/axios'
+import { useUserInfo } from '@/stores/modules/userInfo'
const route = useRoute()
const router = useRouter()
-const detail = reactive<any>({ items: [] })
-const files = reactive<any[]>([])
-const form = reactive<any>({ items: [] })
+const userStore = useUserInfo()
+const detail = reactive<any>({ items: [], records: [], nodes: [] })
+const orderTableWrapRef = ref<HTMLElement | null>(null)
+const activeTab = ref('records')
+const labelStyle = { width: '180px', maxWidth: '180px' }
+const contentStyle = { width: 'calc(50% - 180px)' }
-onMounted(async () => {
- const { data } = (await fetchApprovalDetail({ id: route.params.id })) as any
- Object.assign(detail, data || {})
- files.splice(0, files.length, ...(data?.files || []))
- form.items = (detail.items || []).map(() => ({ remark: '' }))
+// 鏂囦欢鐩稿叧鏁版嵁
+const fileList = ref<any[]>([])
+const fileLoading = ref(false)
+const previewVisible = ref(false)
+const filePreviewRef = ref()
+
+// 瀹℃壒鐩稿叧鏁版嵁
+const approvalForm = reactive({
+ opinion: ''
+})
+const approvalLoading = ref(false)
+
+// 鏂囦欢琛ㄦ牸鏍峰紡
+const fileTableHeaderStyle: CSSProperties = {
+ textAlign: 'center',
+ fontSize: '14px',
+ background: '#f3f6fb'
+}
+const fileTableCellStyle: CSSProperties = { fontSize: '12px' }
+
+// 璁＄畻琛ㄦ牸鏁版嵁锛屾坊鍔犳眹鎬昏
+const tableData = computed(() => {
+ const summaryRow = {
+ id: 'summary',
+ isSummary: true,
+ name: '',
+ saleType: '',
+ accountCount: 0,
+ customerTarget: '',
+ concurrentNodes: 0,
+ pricePoint: 0,
+ priceCash: 0,
+ quantity: 0,
+ period: 0,
+ }
+ return [...detail.items, summaryRow]
})
-const preview = (file: any) => window.open(file.previewUrl)
-const download = (file: any) => window.open(file.downloadUrl)
+// 鐘舵�佹槧灏勶紙鍚庣涓枃 -> 鍓嶇鏋氫妇锛�
+const statusServerToUi: Record<string, string> = {
+ '寰呬笂浼犳枃浠�': 'WAIT_UPLOAD',
+ '寰呮巿鏉�': 'WAIT_AUTHORIZE',
+ '寰呬氦鏄撶‘璁�': 'WAIT_CONFIRM',
+ '宸插畬鎴�': 'COMPLETED',
+ '宸茶瘎浠�': 'EVALUATED',
+}
+
+const formatDateTime = (val?: string) => (val ? val.replace('T', ' ').slice(0, 19) : '')
+
+const normalizePriceType = (val?: string): 'points' | 'currency' | 'agreement' | 'free' => {
+ if (!val) return 'currency'
+ const s = String(val)
+ if (/(绉垎|points)/i.test(s)) return 'points'
+ if (/(鍗忚|agreement)/i.test(s)) return 'agreement'
+ if (/(鍏嶈垂|free)/i.test(s)) return 'free'
+ return 'currency'
+}
+
+onMounted(async () => {
+ const orderId = String(route.params.id || '')
+ if (!orderId) return
+ const res = (await orderApi.getOrderDetail(orderId)) as any
+ const data = res?.data || {}
+
+ const statusName: string = data.orderStatus || ''
+ const uiStatus = statusServerToUi[statusName] || 'INFO'
+
+ // 鏄犲皠璁㈠崟璇︽儏澶撮儴淇℃伅
+ const head = {
+ orderNo: data.orderId,
+ resourceTypeName: '杞欢浜у搧',
+ status: uiStatus,
+ statusName,
+ applyTime: formatDateTime(data.applyTime),
+ unitName: '-',
+ userName: '-',
+ userAccount: '-',
+ userDept: '-',
+ userPhone: '-',
+ productName: data.productName || '-',
+ supplier: data.providerName || '-',
+ industry: '-',
+ projectUnit: '-',
+ productType: '-',
+ productDesc: '-',
+ }
+
+ // 鏄庣粏椤规槧灏�
+ const items: any[] = Array.isArray(data.orderDetails)
+ ? data.orderDetails.map((d: any, idx: number) => {
+ const pt = normalizePriceType(d.priceType)
+ return {
+ id: String(d.id ?? idx + 1),
+ name: d.suiteName,
+ saleType: d.salesForm,
+ accountCount: d.accountLimit,
+ customerTarget: d.customerType,
+ concurrentNodes: d.concurrentNodes,
+ pricePoint: pt === 'points' ? Number(d.unitPrice || 0) : 0,
+ priceCash: pt === 'currency' ? Number(d.unitPrice || 0) : 0,
+ priceProtocol: pt === 'agreement',
+ quantity: Number(d.quantity || 0),
+ period: Number(d.duration || 0),
+ }
+ })
+ : []
+
+ // 姹囨�伙紙绠�鍗曠浉鍔狅細鍗曚环*鏁伴噺锛�
+ const pointTotalNum = items.reduce((sum, it) => sum + Number(it.pricePoint || 0) * Number(it.quantity || 0), 0)
+ const cashTotalNum = items.reduce((sum, it) => sum + Number(it.priceCash || 0) * Number(it.quantity || 0), 0)
+
+ Object.assign(detail, head, {
+ items,
+ pointTotal: pointTotalNum.toLocaleString(),
+ cashTotal: cashTotalNum.toLocaleString(),
+ records: [],
+ nodes: [],
+ })
+
+ // 鍒濆鍖栨枃浠跺垪琛�
+ if (data.attachments && Array.isArray(data.attachments)) {
+ fileList.value = data.attachments
+ }
+})
+
+// 涓庡垪琛ㄩ〉淇濇寔涓�鑷寸殑鐘舵�佺被鍨嬫槧灏勶紙UI灞曠ず鐢級
+const getStatusType = (status: string) => {
+ const statusMap: Record<string, 'warning' | 'danger' | 'success' | 'info'> = {
+ WAIT_APPROVAL: 'warning',
+ WAIT_UPLOAD: 'warning',
+ WAIT_CHECK: 'warning',
+ WAIT_CONFIRM: 'warning',
+ REJECTED: 'danger',
+ FINISH: 'success',
+ }
+ return statusMap[status] || 'info'
+}
+
+// 璁㈠崟璇︽儏涓�"鍗曚环"鏄剧ず锛氫紭鍏堟樉绀虹Н鍒嗭紝鍏舵鏄剧ず璐у竵锛涙牸寮忕ず渚嬶細
+// "绉垎锛�50,000/濂�" 鎴� "璐у竵锛�7,500/濂�/骞�" 鎴� "鍏嶈垂锛�/骞�"
+const formatPrice = (row: any) => {
+ const point = Number(row.pricePoint || 0)
+ const cash = Number(row.priceCash || 0)
+ const protocol = Boolean(row.priceProtocol)
+
+ // 鍏嶈垂
+ if (!point && !cash) {
+ return protocol ? '鍗忚锛�/骞�' : '鍏嶈垂锛�/骞�'
+ }
+ if (point) {
+ return `绉垎锛�${point.toLocaleString()}/濂梎
+ }
+ // 浠呯幇閲�
+ return `璐у竵锛�${cash.toLocaleString()}/濂�/骞碻
+}
+
+// 鏈熼檺灞曠ず锛�0 琛ㄧず"姘镐箙"锛屽叾浠栨樉绀烘暟瀛�
+const formatPeriod = (row: any) => {
+ const p = Number(row.period || 0)
+ return p === 0 ? '姘镐箙' : `${p}`
+}
+
+// 琛ㄥご鏂囧瓧灞呬腑锛屼絾绗竴琛岀殑"璇︽儏"鏂囧瓧闈犲乏瀵归綈
+const headerCenterStyle: CSSProperties = {
+ textAlign: 'center',
+ fontSize: '14px',
+ background: '#f3f6fb'
+}
+
+// 琛ㄤ綋鏂囧瓧澶у皬
+const bodyCellStyle: CSSProperties = { fontSize: '12px' }
+
+// 瀹℃壒杩借釜琛ㄦ牸鏍峰紡
+const recordTableHeaderStyle: CSSProperties = {
+ textAlign: 'center',
+ fontSize: '14px',
+ background: '#f3f6fb'
+}
+const recordTableCellStyle: CSSProperties = { fontSize: '12px' }
+
+// 涓烘眹鎬昏娣诲姞鐗规畩鏍峰紡绫诲悕
+const getRowClassName = ({ row }: { row: any }) => {
+ return row.isSummary ? 'summary-row' : ''
+}
+
+// 瀹℃壒璁板綍鐘舵�佺被鍨嬫槧灏�
+const getRecordStatusType = (statusName: string) => {
+ const statusMap: Record<string, 'success' | 'warning' | 'danger' | 'info'> = {
+ '宸插畬鎴�': 'success',
+ '瀹￠槄涓�': 'warning',
+ '宸叉彁浜�': 'info',
+ '寰呭鏍�': 'warning',
+ '宸叉嫆缁�': 'danger',
+ }
+ return statusMap[statusName] || 'info'
+}
+
+// 娴佺▼鑺傜偣鐘舵�佺被鍨嬫槧灏�
+const getNodeStatusType = (status: string) => {
+ const statusMap: Record<string, 'success' | 'warning' | 'danger' | 'info'> = {
+ 'completed': 'success',
+ 'processing': 'warning',
+ 'pending': 'info',
+ 'rejected': 'danger',
+ }
+ return statusMap[status] || 'info'
+}
+
+// 杩斿洖鎸夐挳
const goBack = () => router.back()
-const submit = async (pass: boolean) => {
- const { code } = (await checkFiles({ id: route.params.id, pass, ...form })) as any
- if (code === 200) {
- ElMessage.success('鎿嶄綔鎴愬姛')
- router.back()
+
+// 鏂囦欢鐩稿叧鏂规硶
+const getFileIconClass = (fileType: string) => {
+ const type = fileType?.toLowerCase() || ''
+ if (['doc', 'docx', 'pdf', 'txt'].includes(type)) return 'doc'
+ if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(type)) return 'image'
+ if (['mp4', 'avi', 'mov', 'wmv'].includes(type)) return 'video'
+ return 'doc'
+}
+
+const getFileTypeTag = (fileType: string) => {
+ const type = fileType?.toLowerCase() || ''
+ if (['doc', 'docx'].includes(type)) return 'primary'
+ if (['pdf'].includes(type)) return 'danger'
+ if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(type)) return 'success'
+ if (['mp4', 'avi', 'mov', 'wmv'].includes(type)) return 'warning'
+ return 'info'
+}
+
+const getFileTypeName = (fileType: string) => {
+ const type = fileType?.toLowerCase() || ''
+ if (['doc', 'docx'].includes(type)) return 'Word'
+ if (['pdf'].includes(type)) return 'PDF'
+ if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(type)) return '鍥剧墖'
+ if (['mp4', 'avi', 'mov', 'wmv'].includes(type)) return '瑙嗛'
+ if (['xls', 'xlsx'].includes(type)) return 'Excel'
+ return '鍏朵粬'
+}
+
+const formatFileSize = (size: number) => {
+ if (!size) return '0 B'
+ const units = ['B', 'KB', 'MB', 'GB']
+ let index = 0
+ let fileSize = size
+ while (fileSize >= 1024 && index < units.length - 1) {
+ fileSize /= 1024
+ index++
+ }
+ return `${fileSize.toFixed(2)} ${units[index]}`
+}
+
+const getAttachmentTypeTag = (type: string) => {
+ switch (type) {
+ case '鍚堝悓': return 'primary'
+ case '鍙戠エ': return 'success'
+ default: return 'info'
}
}
+
+// 鍒ゆ柇鏂囦欢鏄惁鍙瑙�
+const isPreviewable = (file: any) => {
+ // 棣栧厛妫�鏌IME绫诲瀷
+ const previewableTypes = [
+ 'image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/bmp', 'image/webp',
+ 'text/plain', 'text/html', 'text/css', 'text/javascript',
+ 'application/pdf',
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
+ 'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
+ ]
+
+ // 濡傛灉MIME绫诲瀷鍖归厤锛岀洿鎺ヨ繑鍥瀟rue
+ if (previewableTypes.includes(file.fileType || '')) {
+ return true
+ }
+
+ // 濡傛灉MIME绫诲瀷涓虹┖鎴栦笉鍖归厤锛屾牴鎹枃浠舵墿灞曞悕鍒ゆ柇
+ const fileName = file.originalName || file.fileName || ''
+ const fileExtension = fileName.toLowerCase().split('.').pop()
+
+ const previewableExtensions = [
+ 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp',
+ 'txt', 'html', 'htm', 'css', 'js',
+ 'pdf',
+ 'docx', 'xlsx', 'pptx'
+ ]
+
+ return previewableExtensions.includes(fileExtension)
+}
+
+// 鏂囦欢棰勮
+const handlePreview = async (file: any) => {
+ // 浼樺厛浣跨敤fileUrl锛屽鏋滄病鏈夊垯浣跨敤fileName
+ const fileUrl = file.fileUrl || file.fileName
+ if (!fileUrl) {
+ ElMessage.warning('鏂囦欢閾炬帴涓嶅瓨鍦�')
+ return
+ }
+
+ // 鑾峰彇鏂囦欢鎵╁睍鍚�
+ const fileName = file.originalName || file.fileName || ''
+ const fileExtension = fileName.toLowerCase().split('.').pop()
+
+ let previewUrl = fileUrl
+
+ // 濡傛灉鏂囦欢瀛樺偍鍦∕inIO锛屼紭鍏堜娇鐢ㄩ瑙圲RL
+ if (fileUrl.includes('order-attachments')) {
+ try {
+ // 棣栧厛灏濊瘯鑾峰彇棰勮URL
+ const previewResponse = await createAxios({
+ url: `/admin/file/preview`,
+ method: 'GET',
+ params: {
+ fileName: fileUrl
+ }
+ })
+
+ console.log('棰勮URL鍝嶅簲:', previewResponse)
+
+ // 妫�鏌ュ搷搴旀牸寮�
+ const responseData = previewResponse as any
+ if (responseData && responseData.code === 200 && responseData.data) {
+ previewUrl = responseData.data
+ console.log('浣跨敤棰勮URL:', previewUrl)
+ } else {
+ console.log('棰勮URL鑾峰彇澶辫触锛屼娇鐢ㄤ笅杞芥柟寮�')
+ // 濡傛灉棰勮URL鑾峰彇澶辫触锛屽洖閫�鍒颁笅杞芥柟寮�
+ const response = await createAxios({
+ url: `/admin/file/download`,
+ method: 'GET',
+ responseType: 'blob',
+ params: {
+ fileName: fileUrl,
+ originalName: file.originalName || file.fileName
+ }
+ })
+
+ // 鍒涘缓棰勮URL
+ const blob = new Blob([response as any])
+ previewUrl = window.URL.createObjectURL(blob)
+ console.log('浣跨敤Blob URL:', previewUrl)
+ }
+ } catch (error) {
+ console.error('鑾峰彇鏂囦欢澶辫触:', error)
+ ElMessage.error('鑾峰彇鏂囦欢澶辫触锛屾棤娉曢瑙�')
+ return
+ }
+ }
+
+ // 鍥剧墖鏂囦欢鐩存帴鍦ㄦ柊绐楀彛鎵撳紑
+ if ((file.fileType && file.fileType.startsWith('image/')) ||
+ ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(fileExtension)) {
+ console.log('棰勮鍥剧墖鏂囦欢:', previewUrl)
+ window.open(previewUrl, '_blank')
+ return
+ }
+
+ // PDF鏂囦欢鍦ㄦ柊绐楀彛鎵撳紑
+ if (file.fileType === 'application/pdf' || fileExtension === 'pdf') {
+ console.log('棰勮PDF鏂囦欢:', previewUrl)
+ window.open(previewUrl, '_blank')
+ return
+ }
+
+ // 鏂囨湰鏂囦欢鍦ㄦ柊绐楀彛鎵撳紑
+ if ((file.fileType && file.fileType.startsWith('text/')) ||
+ ['txt', 'html', 'htm', 'css', 'js'].includes(fileExtension)) {
+ console.log('棰勮鏂囨湰鏂囦欢:', previewUrl)
+ window.open(previewUrl, '_blank')
+ return
+ }
+
+ // Office鏂囨。鍜屽叾浠栨枃浠剁被鍨嬶紝灏濊瘯鍦ㄦ柊绐楀彛鎵撳紑
+ try {
+ console.log('棰勮鍏朵粬鏂囦欢:', previewUrl)
+ window.open(previewUrl, '_blank')
+ } catch (error) {
+ console.error('棰勮澶辫触:', error)
+ ElMessage.error('棰勮澶辫触锛岃涓嬭浇鍚庢煡鐪�')
+ }
+}
+
+// 鏂囦欢涓嬭浇
+const handleDownload = async (file: any) => {
+ // 浼樺厛浣跨敤fileUrl锛屽鏋滄病鏈夊垯浣跨敤fileName
+ const fileUrl = file.fileUrl || file.fileName
+ if (!fileUrl) {
+ ElMessage.warning('鏂囦欢閾炬帴涓嶅瓨鍦�')
+ return
+ }
+
+ console.log('寮�濮嬩笅杞芥枃浠�:', file.originalName || file.fileName, 'URL:', fileUrl)
+
+ try {
+ // 濡傛灉鏂囦欢瀛樺偍鍦∕inIO锛屼娇鐢ㄥ悗绔洿鎺ヤ笅杞紸PI
+ if (fileUrl.includes('order-attachments')) {
+ console.log('浣跨敤MinIO涓嬭浇API')
+
+ // 浣跨敤axios閫氳繃浠ｇ悊璁块棶鍚庣API
+ const response = await createAxios({
+ url: `/admin/file/download`,
+ method: 'GET',
+ responseType: 'blob',
+ params: {
+ fileName: fileUrl,
+ originalName: file.originalName || file.fileName
+ }
+ })
+
+ console.log('涓嬭浇鍝嶅簲:', response)
+
+ // 鍒涘缓涓嬭浇閾炬帴
+ const blob = new Blob([response as any])
+ const downloadUrl = window.URL.createObjectURL(blob)
+
+ console.log('鍒涘缓涓嬭浇閾炬帴:', downloadUrl)
+
+ const link = document.createElement('a')
+ link.href = downloadUrl
+ link.download = file.originalName || file.fileName || 'download'
+ link.target = '_blank'
+ link.rel = 'noopener noreferrer'
+
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+
+ // 娓呯悊URL瀵硅薄
+ window.URL.revokeObjectURL(downloadUrl)
+
+ ElMessage.success('鏂囦欢涓嬭浇鎴愬姛')
+ } else {
+ console.log('浣跨敤鐩存帴URL涓嬭浇')
+ // 鍏朵粬鎯呭喌鐩存帴浣跨敤鍘烾RL
+ const link = document.createElement('a')
+ link.href = fileUrl
+ link.download = file.originalName || file.fileName || 'download'
+ link.target = '_blank'
+ link.rel = 'noopener noreferrer'
+
+ document.body.appendChild(link)
+ link.click()
+ document.body.removeChild(link)
+
+ ElMessage.success('寮�濮嬩笅杞芥枃浠�')
+ }
+ } catch (error) {
+ console.error('涓嬭浇澶辫触:', error)
+ ElMessage.error('涓嬭浇澶辫触锛岃閲嶈瘯')
+ }
+}
+
+// 澶勭悊瀹℃壒
+const handleApprove = async (isApprove: boolean) => {
+ if (!approvalForm.opinion.trim()) {
+ ElMessage.warning('璇疯緭鍏ュ鎵规剰瑙�')
+ return
+ }
+
+ const actionText = isApprove ? '閫氳繃' : '椹冲洖'
+
+ try {
+ await ElMessageBox.confirm(`纭畾瑕�${actionText}璇ヨ鍗曞悧锛焋, '纭鎿嶄綔', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ })
+
+ approvalLoading.value = true
+ const orderId = String(route.params.id || '')
+
+ // 璋冪敤鏂囦欢鏍告煡API
+ const result = await checkFiles({
+ orderId: orderId,
+ isApprove: isApprove,
+ approvalOpinion: approvalForm.opinion,
+ approverId: Number(userStore.getUserId) || 1,
+ approverName: userStore.getUserDetail || '绠＄悊鍛�'
+ })
+
+ if (result && result.code === 200) {
+ ElMessage.success(`${actionText}鎴愬姛`)
+ router.back()
+ } else {
+ ElMessage.error(result?.msg || `${actionText}澶辫触`)
+ }
+ } catch (error) {
+ if (error !== 'cancel') {
+ console.error('瀹℃壒澶辫触:', error)
+ ElMessage.error('瀹℃壒澶辫触锛岃閲嶈瘯')
+ }
+ } finally {
+ approvalLoading.value = false
+ }
+}
+
+// 鍗曞厓鏍煎悎骞舵柟娉�
+const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
+ if (row.isSummary) {
+ // 姹囨�昏锛氱涓�鍒楁樉绀哄悎骞跺唴瀹癸紝鍏朵粬鍒楅殣钘�
+ if (columnIndex === 0) {
+ return [1, 6] // 鍚堝苟1琛�6鍒�
+ } else {
+ return [0, 0] // 闅愯棌鍏朵粬鍒�
+ }
+ }
+ return [1, 1] // 鏅�氳姝ｅ父鏄剧ず
+}
+
+// 鐥囩粨涓庝慨澶嶈鏄庯細
+// 1) Element Plus 鐨� el-table 瀛愬垪 width 鐧惧垎姣旀槸鐩稿浜庤〃鏍煎鍣ㄧ殑鍍忕礌瀹藉害璁＄畻锛屼絾鍙湁鍦ㄨ〃鏍煎鍣ㄦ湁鏄庣‘瀹藉害鏃舵墠鐢熸晥銆�
+// 2) 鍦ㄧ埗鍒�/澶氱骇琛ㄥご涓嬶紝瀛愬垪 width 涓虹櫨鍒嗘瘮鏃讹紝鏇寸ǔ瀹氱殑鍋氭硶鏄皢鍏惰绠椾负鍍忕礌鍊肩粦瀹氱粰瀛愬垪銆�
+// 3) 鍥犳鎴戜滑璇诲彇琛ㄦ牸澶栧眰瀹瑰櫒瀹藉害锛屾寜姣斾緥璁＄畻鍍忕礌瀹藉害锛岄伩鍏嶅嚭鐜扮櫨鍒嗘瘮涓� table-layout 瀵艰嚧鐨勯敊浣嶄笌鎷変几銆�
+const colWidths = computed(() => {
+ const containerWidth = orderTableWrapRef.value?.clientWidth || 0
+ // 鐧惧垎姣斿垎鍒负锛氳鎯� 20% x 3锛屽崟浠� 15%锛屾暟閲� 10%锛屾湡闄� 15% => 鍚堣 100%
+ return {
+ detail1: Math.floor(containerWidth * 0.2),
+ detail2: Math.floor(containerWidth * 0.2),
+ detail3: Math.floor(containerWidth * 0.2),
+ price: Math.floor(containerWidth * 0.15),
+ quantity: Math.floor(containerWidth * 0.1),
+ period: Math.floor(containerWidth * 0.15),
+ }
+})
</script>
<style scoped lang="scss">
.title { font-weight: 600; }
-.sub-title { font-weight: 600; margin: 10px 0; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.gray { color: #909399; font-size: 12px; }
.total { text-align: right; margin-top: 10px; }
.price { color: #f56c6c; font-weight: 600; }
.ml20 { margin-left: 20px; }
-.item-block { padding: 10px; border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 10px; }
+/* 缁熶竴琛ㄦ牸鍐呭鏂囧瓧澶у皬 */
+.order-table :deep(.el-table__body),
+.order-table :deep(.el-table__header) {
+ font-size: 12px;
+}
+/* 瀹℃壒杩借釜琛ㄦ牸锛氳〃澶磋儗鏅� + 瀛楀彿 */
+.record-table :deep(.el-table__body),
+.record-table :deep(.el-table__header) {
+ font-size: 12px;
+}
+.record-table :deep(.el-table__header-wrapper thead tr:first-child > th) {
+ background: #f5f7fa;
+}
+/* 琛ㄥご绗竴琛岃儗鏅壊锛堜笌浜ゆ槗鍐呭鏍囬琛屼繚鎸佷竴鑷达級 */
+.order-table :deep(.el-table__header-wrapper thead tr:first-child > th) {
+ background: #f3f6fb !important;
+ font-size: 14px !important;
+}
+/* 琛ㄥご绗簩琛岄珮搴︿笌鍐呰竟璺� */
+.order-table :deep(.el-table__header-wrapper thead tr:nth-child(2) > th) {
+ height: 5px !important;
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+}
+/* 寮哄埗琛ㄦ牸鍒楀浐瀹氬竷灞�锛岄伩鍏嶅唴瀹瑰奖鍝嶅垪瀹� */
+.order-table :deep(table) {
+ table-layout: fixed;
+ width: 100% !important;
+}
+
+/* 姹囨�昏鏍峰紡 */
+.summary-row {
+ font-weight: 600;
+ color: #f56c6c;
+}
+.summary-total {
+ text-align: right;
+ font-weight: 600;
+}
+.summary-merged {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+}
+.summary-left {
+ text-align: left;
+}
+.summary-left .count {
+ color: #f56c6c;
+ font-weight: 600;
+}
+.summary-right {
+ text-align: right;
+}
+.order-table :deep(.summary-row) {
+ background-color: #fafafa;
+}
+.order-table :deep(.summary-row td) {
+ border-top: 2px solid #e4e7ed;
+}
+
+/* 琛ㄥご绗竴琛�"璇︽儏"鏂囧瓧闈犲乏瀵归綈 */
+.order-table :deep(.el-table__header-wrapper thead tr:first-child th:first-child) {
+ text-align: left !important;
+}
+
+/* 琛ㄥご鍥炬爣鏍峰紡 */
+.header-icon {
+ margin-right: 6px;
+ color: #409eff;
+ vertical-align: middle;
+}
+
+/* 鍒嗛殧鏍囬椋庢牸 */
+.section-header {
+ background: #f3f6fb;
+ font-weight: 600;
+ --el-border-color: #e4e7ed;
+}
+.section-header :deep(.el-descriptions__label) {
+ background: #f3f6fb;
+ border-right: none !important;
+ width: 100%;
+}
+.section-header :deep(.el-descriptions__cell) {
+ background: #f3f6fb;
+}
+.section-header :deep(.el-descriptions__content) {
+ display: none !important;
+ padding: 0 !important;
+ border: 0 !important;
+}
+.section-icon {
+ margin-right: 6px;
+ color: #409eff;
+}
+
+/* 璋冩暣鎻忚堪缁勪欢杈规浠ヤ究鏍囬琛岄鑹茶鐩栦腑闂村垎闅旂嚎 */
+:deep(.el-descriptions--border .el-descriptions__body .el-descriptions__table .el-descriptions__cell) {
+ border-right: 1px solid var(--el-border-color);
+}
+.section-header :deep(.el-descriptions__cell) {
+ border-right-color: transparent !important;
+}
+
+/* 寮哄埗 Element Plus 鎻忚堪椤圭殑 label 瀹藉害閬靛惊 label-width锛堥伩鍏嶅唴瀹规拺寮�锛� */
+/* 鍏滃簳锛氬嵆浣垮唴鑱旀牱寮忚瑕嗙洊锛屼篃鐢� important 寮哄埗鍥哄畾 */
+.fixed-label :deep(.el-descriptions__label) {
+ width: 180px !important;
+ max-width: 180px !important;
+}
+.fixed-label :deep(.el-descriptions__content) {
+ width: calc(50% - 180px) !important;
+}
+
+/* 寮哄寲绗竴琛屽垎闅旀爣棰樼殑鑳屾櫙涓庤竟妗嗚鐩� */
+.order-desc :deep(.el-descriptions__table tr:first-child .el-descriptions__cell),
+.order-desc :deep(.el-descriptions__table tr:first-child .el-descriptions__label),
+.order-desc :deep(.el-descriptions__table tr:first-child .el-descriptions__content) {
+ background: #eef3fb !important;
+ border-top-color: transparent !important;
+ border-bottom-color: #dcdfe6 !important;
+}
+.order-desc :deep(.el-descriptions__table tr:first-child .el-descriptions__label) {
+ border-right-color: transparent !important;
+}
+
+/* 缁熶竴涓や釜鎻忚堪琛ㄦ牸鐨勫垪瀵归綈锛堟爣绛惧垪鍥哄畾瀹藉害锛屽唴瀹瑰垪绛夊垎鍓╀綑瀹藉害锛� */
+.order-desc :deep(.el-descriptions__table) {
+ table-layout: fixed;
+ width: 100%;
+}
+/* 浣跨敤绫婚�夋嫨鍣ㄨ�岄潪 nth-child锛屾彁鍗囩ǔ瀹氭�э紝纭繚姣忚涓ゅ垪涓ユ牸瀵归綈 */
+.order-desc :deep(.el-descriptions__table tr:not(:first-child) .el-descriptions__label) {
+ width: 180px !important;
+ max-width: 180px !important;
+ box-sizing: border-box;
+}
+.order-desc :deep(.el-descriptions__table tr:not(:first-child) .el-descriptions__content) {
+ width: calc(50% - 180px) !important;
+}
+
+.desc-wrap {
+ white-space: pre-wrap;
+ line-height: 22px;
+}
+
+/* 瀹℃壒杩借釜鏍囩椤垫牱寮� */
+.approval-tabs {
+ margin-top: 15px;
+}
+
+/* 鎿嶄綔鎸夐挳鏍峰紡 */
+.action-buttons {
+ display: flex;
+ justify-content: center;
+ margin-top: 15px;
+ .el-button {
+ margin: 0 10px;
+ }
+}
+
+/* 鏂囦欢琛ㄦ牸鏍峰紡 */
+.file-table {
+ .file-name {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .file-icon {
+ font-size: 14px;
+
+ &.doc {
+ color: #409eff;
+ }
+
+ &.image {
+ color: #67c23a;
+ }
+
+ &.video {
+ color: #e6a23c;
+ }
+ }
+
+ .file-text {
+ color: #303133;
+ font-size: 14px;
+ }
+ }
+}
+
+/* 瀹℃壒鎰忚鍖哄煙 */
+.approval-section {
+ .section-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #303133;
+ margin-bottom: 15px;
+ padding-bottom: 8px;
+ border-bottom: 1px solid #e4e7ed;
+ }
+}
+
+/* 瀹℃壒鎿嶄綔鎸夐挳鏍峰紡 */
+.approval-actions {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+ gap: 20px;
+
+ .back-btn {
+ background: #ffffff;
+ border: 1px solid #dcdfe6;
+ color: #606266;
+
+ &:hover {
+ background: #f5f7fa;
+ border-color: #c0c4cc;
+ }
+ }
+
+ .approve-btn {
+ background: #67c23a;
+ border-color: #67c23a;
+ color: #ffffff;
+
+ &:hover {
+ background: #85ce61;
+ border-color: #85ce61;
+ }
+ }
+
+ .reject-btn {
+ background: #f56c6c;
+ border-color: #f56c6c;
+ color: #ffffff;
+
+ &:hover {
+ background: #f78989;
+ border-color: #f78989;
+ }
+ }
+}
+
+/* 鏂囦欢棰勮寮圭獥鏍峰紡 */
+.file-preview-dialog {
+ :deep(.el-dialog__body) {
+ padding: 0;
+ height: 70vh;
+ }
+
+ .preview-content {
+ height: 100%;
+ }
+}
</style>
--
Gitblit v1.8.0