From 3b7fcf5ea471f6cb388f86d0732b8ece47a3cefc Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期一, 29 十二月 2025 21:05:58 +0800
Subject: [PATCH] 页面更新
---
src/views/business/course/components/DonationConfirmStage.vue | 822 ++++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 645 insertions(+), 177 deletions(-)
diff --git a/src/views/business/course/components/DonationConfirmStage.vue b/src/views/business/course/components/DonationConfirmStage.vue
index d608417..d28a24c 100644
--- a/src/views/business/course/components/DonationConfirmStage.vue
+++ b/src/views/business/course/components/DonationConfirmStage.vue
@@ -1,217 +1,685 @@
<template>
- <base-stage :stage-data="stageData" :case-info="caseInfo">
- <template #header>
- <el-alert
- :title="`鎹愮尞纭 - ${getStatusText()}`"
- :type="getAlertType()"
- :description="getAlertDescription()"
- show-icon
- :closable="false"
- />
- </template>
-
- <el-row :gutter="20" style="margin-top: 20px;">
- <el-col :span="8">
- <el-card>
- <div slot="header" class="card-header">
- <span>纭淇℃伅姒傝</span>
- </div>
- <div class="confirm-overview">
- <div class="overview-item">
- <span class="label">纭鐘舵��:</span>
- <el-tag :type="getStatusTag(confirmationDetails.status)">
- {{ getStatusText(confirmationDetails.status) }}
- </el-tag>
- </div>
- <div class="overview-item">
- <span class="label">纭鏃堕棿:</span>
- <span>{{ formatTime(confirmationDetails.confirmTime) }}</span>
- </div>
- <div class="overview-item">
- <span class="label">纭鏂瑰紡:</span>
- <span>{{ confirmationDetails.method }}</span>
- </div>
- <div class="overview-item">
- <span class="label">鍗忚皟鍛�:</span>
- <span>{{ confirmationDetails.coordinator }}</span>
- </div>
- </div>
- </el-card>
- </el-col>
-
- <el-col :span="8">
- <el-card>
- <div slot="header" class="card-header">
- <span>瀹跺睘鍚屾剰鎯呭喌</span>
- </div>
- <el-descriptions :column="1" size="small">
- <el-descriptions-item label="涓昏瀹跺睘">
- {{ familyConsent.mainRelative }}
- </el-descriptions-item>
- <el-descriptions-item label="鍚屾剰鐘舵��">
- <el-tag :type="familyConsent.consented ? 'success' : 'warning'">
- {{ familyConsent.consented ? '宸插悓鎰�' : '寰呯‘璁�' }}
- </el-tag>
- </el-descriptions-item>
- <el-descriptions-item label="绛惧瓧鏃堕棿">
- {{ formatTime(familyConsent.signTime) }}
- </el-descriptions-item>
- <el-descriptions-item label="鍏崇郴璇佹槑">
- {{ familyConsent.relationshipProof }}
- </el-descriptions-item>
- </el-descriptions>
- </el-card>
- </el-col>
-
- <el-col :span="8">
- <el-card>
- <div slot="header" class="card-header">
- <span>娉曞緥鏂囦欢</span>
- </div>
- <div class="document-list">
- <div v-for="doc in legalDocuments" :key="doc.name" class="document-item">
- <div class="doc-info">
- <i :class="doc.icon" style="color: #409EFF; margin-right: 8px;"></i>
- <span>{{ doc.name }}</span>
- </div>
- <el-tag :type="doc.status === 'completed' ? 'success' : 'warning'" size="small">
- {{ doc.status === 'completed' ? '宸茬缃�' : '寰呯缃�' }}
- </el-tag>
- </div>
- </div>
- </el-card>
- </el-col>
- </el-row>
-
- <el-card style="margin-top: 20px;">
- <div slot="header" class="card-header">
- <span>鎹愮尞鎰忔効纭涔�</span>
+ <div class="confirmation-detail">
+ <el-card class="detail-card">
+ <!-- 鍩虹淇℃伅 -->
+ <div slot="header" class="clearfix">
+ <span class="detail-title">鎹愮尞纭鍩烘湰淇℃伅</span>
+ <el-button
+ v-if="$route.query.confirm"
+ type="primary"
+ style="float: right; padding: 3px 0"
+ @click="handleSave"
+ >
+ 淇濆瓨纭淇℃伅
+ </el-button>
</div>
- <div class="consent-content">
- <p>鏈汉/瀹跺睘纭锛屽湪鍏呭垎浜嗚В鍣ㄥ畼鎹愮尞鐨勭浉鍏充俊鎭悗锛岃嚜鎰垮悓鎰忚繘琛屽櫒瀹樻崘鐚��</p>
- <el-divider />
- <el-descriptions :column="2" border>
- <el-descriptions-item label="鎹愮尞鑰呭鍚�">{{ caseInfo.donorName }}</el-descriptions-item>
- <el-descriptions-item label="鎹愮尞鑰呰韩浠借瘉鍙�">{{ confirmationDetails.idNumber }}</el-descriptions-item>
- <el-descriptions-item label="鎹愮尞鍣ㄥ畼绫诲瀷">{{ confirmationDetails.organs }}</el-descriptions-item>
- <el-descriptions-item label="鎹愮尞鐢ㄩ��">{{ confirmationDetails.purpose }}</el-descriptions-item>
- <el-descriptions-item label="绛惧瓧浜�">{{ familyConsent.mainRelative }}</el-descriptions-item>
- <el-descriptions-item label="绛惧瓧鏃ユ湡">{{ formatTime(familyConsent.signTime) }}</el-descriptions-item>
- </el-descriptions>
- </div>
+
+ <el-form :model="form" ref="form" label-width="120px">
+
+ <el-row :gutter="20">
+ <el-col :span="8">
+ <el-form-item label="鍗忚皟鍛�1" prop="coordinator1">
+ <el-input v-model="form.coordinator1" :readonly="!isEdit" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="鍗忚皟鍛�2" prop="coordinator2">
+ <el-input v-model="form.coordinator2" :readonly="!isEdit" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="涓氬姟浜哄憳" prop="assignee">
+ <el-input v-model="form.assignee" :readonly="!isEdit" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-row :gutter="20">
+ <el-col :span="8">
+ <el-form-item label="纭鐘舵��" prop="confirmationStatus">
+ <el-select
+ v-model="form.confirmationStatus"
+ :disabled="!isEdit"
+ style="width: 100%"
+ >
+ <el-option label="鏈‘璁�" value="0" />
+ <el-option label="瀹跺睘纭" value="1" />
+ <el-option label="涓嶅悓鎰忔崘鐚�" value="2" />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="纭鏃堕棿" prop="confirmationTime">
+ <el-date-picker
+ v-model="form.confirmationTime"
+ type="datetime"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ style="width: 100%"
+ :disabled="!isEdit"
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+
+ <el-form-item label="瀹跺睘鎰忚澶囨敞" prop="familyRemark">
+ <el-input
+ type="textarea"
+ :rows="3"
+ v-model="form.familyRemark"
+ :readonly="!isEdit"
+ placeholder="璁板綍瀹跺睘鐨勬剰瑙佸拰娌熼�氭儏鍐�"
+ />
+ </el-form-item>
+ </el-form>
</el-card>
- </base-stage>
+
+ <!-- 闄勪欢鍒楄〃 -->
+ <el-card class="attachment-card">
+ <div slot="header" class="clearfix">
+ <span class="detail-title">鐩稿叧闄勪欢涓婁紶</span>
+ <el-button
+ v-if="isEdit"
+ type="primary"
+ size="mini"
+ @click="handleSaveAll"
+ :loading="saveLoading"
+ >
+ 淇濆瓨鎵�鏈夐檮浠�
+ </el-button>
+ </div>
+
+ <!-- 闄勪欢绫诲瀷閫夐」鍗� -->
+ <el-tabs v-model="activeAttachmentType" type="card">
+ <el-tab-pane
+ v-for="type in attachmentTypes"
+ :key="type.value"
+ :label="type.label"
+ :name="type.value"
+ >
+ <div class="attachment-upload-section">
+ <div class="upload-header">
+ <span class="upload-title">{{ type.label }}</span>
+ <el-tooltip content="鐐瑰嚮涓婁紶璇ョ被鍨嬮檮浠�" placement="top">
+ <el-button
+ size="mini"
+ type="primary"
+ icon="el-icon-plus"
+ @click="openUploadDialog(type.value)"
+ :disabled="!isEdit"
+ >
+ 娣诲姞闄勪欢
+ </el-button>
+ </el-tooltip>
+ </div>
+
+ <!-- 闄勪欢鍒楄〃 -->
+ <el-table
+ :data="getAttachmentsByType(type.value)"
+ v-loading="attachmentLoading"
+ style="width: 100%; margin-top: 15px;"
+ >
+ <el-table-column label="鏂囦欢鍚嶇О" min-width="200">
+ <template slot-scope="scope">
+ <div class="file-info">
+ <i
+ class="el-icon-document"
+ style="margin-right: 8px; color: #409EFF;"
+ ></i>
+ <span>{{ scope.row.fileName }}</span>
+ </div>
+ </template>
+ </el-table-column>
+
+ <el-table-column label="鏂囦欢澶у皬" width="100" align="center">
+ <template slot-scope="scope">
+ <span>{{ formatFileSize(scope.row.fileSize) }}</span>
+ </template>
+ </el-table-column>
+
+ <el-table-column label="涓婁紶鏃堕棿" width="160" align="center">
+ <template slot-scope="scope">
+ <span>{{ parseTime(scope.row.uploadTime) }}</span>
+ </template>
+ </el-table-column>
+
+ <el-table-column label="涓婁紶浜�" width="100" align="center">
+ <template slot-scope="scope">
+ <span>{{ scope.row.uploader }}</span>
+ </template>
+ </el-table-column>
+
+ <el-table-column
+ label="鎿嶄綔"
+ width="120"
+ align="center"
+ v-if="isEdit"
+ >
+ <template slot-scope="scope">
+ <el-button
+ size="mini"
+ type="text"
+ icon="el-icon-view"
+ @click="handlePreview(scope.row)"
+ >棰勮</el-button
+ >
+ <el-button
+ size="mini"
+ type="text"
+ icon="el-icon-delete"
+ style="color: #F56C6C;"
+ @click="handleRemoveAttachment(scope.row, type.value)"
+ >鍒犻櫎</el-button
+ >
+ </template>
+ </el-table-column>
+
+ <el-table-column label="鎿嶄綔" width="80" align="center" v-else>
+ <template slot-scope="scope">
+ <el-button
+ size="mini"
+ type="text"
+ icon="el-icon-view"
+ @click="handlePreview(scope.row)"
+ >棰勮</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <div
+ v-if="getAttachmentsByType(type.value).length === 0"
+ class="empty-attachment"
+ >
+ <el-empty description="鏆傛棤闄勪欢" :image-size="80"></el-empty>
+ </div>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </el-card>
+ <el-dialog
+ :title="`涓婁紶${getCurrentTypeLabel}闄勪欢`"
+ :visible.sync="uploadDialogVisible"
+ width="500px"
+ :close-on-click-modal="false"
+ >
+ <el-upload
+ ref="uploadRef"
+ class="upload-demo"
+ drag
+ action="#"
+ multiple
+ :file-list="tempFileList"
+ :before-upload="beforeUpload"
+ :on-change="handleFileChange"
+ :on-remove="handleTempRemove"
+ :auto-upload="false"
+ :http-request="handleHttpRequest"
+ >
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div>
+ <div class="el-upload__tip" slot="tip">
+ 鏀寔涓婁紶pdf銆乯pg銆乸ng銆乨oc銆乨ocx鏍煎紡鏂囦欢锛屽崟涓枃浠朵笉瓒呰繃10MB
+ </div>
+ </el-upload>
+
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="uploadDialogVisible = false">鍙栨秷</el-button>
+ <el-button
+ type="primary"
+ @click="submitUpload"
+ :loading="uploadLoading"
+ :disabled="tempFileList.length === 0"
+ >
+ 纭涓婁紶
+ </el-button>
+ </span>
+ </el-dialog>
+ </div>
</template>
<script>
-import BaseStage from './BaseStage.vue';
+import {
+ getConfirmationDetail,
+ updateConfirmation
+} from "./api/mockConfirmationApi";
export default {
- name: 'DonationConfirmStage',
- components: { BaseStage },
- props: {
- stageData: {
- type: Object,
- default: () => ({})
- },
- caseInfo: {
- type: Object,
- default: () => ({})
- }
- },
+ name: "ConfirmationDetail",
data() {
return {
- confirmationDetails: {
- status: 'completed',
- confirmTime: '2023-12-03 11:00:00',
- method: '瀹跺睘涔﹂潰鍚屾剰',
- coordinator: '璧靛崗璋冨憳',
- idNumber: '110101199001011234',
- organs: '蹇冭剰銆佽倽鑴忋�佽偩鑴忋�佽鑶�',
- purpose: '涓村簥绉绘'
+ // 鏄惁缂栬緫妯″紡
+ isEdit: false,
+ // 琛ㄥ崟鏁版嵁
+ form: {
+ id: undefined,
+ caseNo: "",
+ donorName: "",
+ gender: "",
+ age: "",
+ diagnosis: "",
+ hospitalName: "",
+ coordinator1: "",
+ coordinator2: "",
+ assignee: "",
+ confirmationStatus: "0",
+ confirmationTime: "",
+ familyRemark: ""
},
- familyConsent: {
- mainRelative: '寮犱笁鐖朵翰',
- consented: true,
- signTime: '2023-12-03 10:45:00',
- relationshipProof: '鎴峰彛鏈叧绯昏瘉鏄�'
- },
- legalDocuments: [
- { name: '鍣ㄥ畼鎹愮尞鍚屾剰涔�', icon: 'el-icon-document', status: 'completed' },
- { name: '瀹跺睘鍏崇郴璇佹槑', icon: 'el-icon-document', status: 'completed' },
- { name: '鍖荤枟鍏嶈矗澹版槑', icon: 'el-icon-document', status: 'completed' },
- { name: '闅愮淇濇姢鍗忚', icon: 'el-icon-document', status: 'completed' }
+ // 闄勪欢鍒楄〃
+ // 闄勪欢鐩稿叧鏁版嵁
+ activeAttachmentType: "1",
+ attachmentLoading: false,
+ uploadDialogVisible: false,
+ uploadLoading: false,
+ saveLoading: false,
+ tempFileList: [],
+ currentUploadType: "",
+
+ // 闄勪欢绫诲瀷瀹氫箟
+ attachmentTypes: [
+ { value: "1", label: "浜轰綋鍣ㄥ畼娼滃湪鎹愮尞鑰呯櫥璁拌〃" },
+ { value: "2", label: "浜轰綋鍣ㄥ畼鎹愮尞浜插睘纭鐧昏琛�" },
+ { value: "3", label: "鎹愮尞鑰呭強鐩寸郴浜插睘韬唤璇併�佹埛鍙ｇ翱鐩稿叧璇佹槑" },
+ { value: "4", label: "鍏皯韬晠鍚庝汉浣撳櫒瀹橈紙瑙掕啘锛夐仐浣撴崘鐚憡鐭ヤ功" },
+ { value: "5", label: "鑴戞浜″垽瀹氱煡鎯呭悓鎰忎功" },
+ { value: "6", label: "蹇冩浜″垽瀹氱煡鎯呭悓鎰忎功" }
+ ],
+
+ // 闄勪欢鍒楄〃鏁版嵁
+ attachmentList: [
+ // 妯℃嫙鏁版嵁 - 瀹為檯椤圭洰涓粠鎺ュ彛鑾峰彇
+ {
+ id: 1,
+ type: "1",
+ typeName: "浜轰綋鍣ㄥ畼娼滃湪鎹愮尞鑰呯櫥璁拌〃",
+ fileName: "娼滃湪鎹愮尞鑰呯櫥璁拌〃_202512001.pdf",
+ fileSize: 2548321,
+ uploadTime: "2025-12-01 10:30:00",
+ uploader: "寮犱笁",
+ fileUrl: "/attachments/1.pdf"
+ },
+ {
+ id: 2,
+ type: "1",
+ typeName: "浜轰綋鍣ㄥ畼娼滃湪鎹愮尞鑰呯櫥璁拌〃",
+ fileName: "琛ュ厖璇存槑.docx",
+ fileSize: 512345,
+ uploadTime: "2025-12-01 14:20:00",
+ uploader: "鏉庡洓",
+ fileUrl: "/attachments/2.docx"
+ }
]
};
},
+ computed: {
+ isEdit() {
+ return this.$route.query.confirm === "true";
+ },
+ getCurrentTypeLabel() {
+ const type = this.attachmentTypes.find(
+ t => t.value === this.currentUploadType
+ );
+ return type ? type.label : "";
+ }
+ },
+ created() {
+ const id = this.$route.query.id;
+ this.isEdit = this.$route.query.confirm === "true";
+ if (id) {
+ this.getDetail(id);
+ }
+ this.getAttachmentList();
+ },
methods: {
- getStatusText() {
- const status = this.stageData.status;
- return status === 'completed' ? '宸插畬鎴�' :
- status === 'in_progress' ? '杩涜涓�' : '鏈紑濮�';
+ // 鑾峰彇璇︽儏
+ getDetail(id) {
+ getConfirmationDetail(id).then(response => {
+ if (response.code === 200) {
+ this.form = response.data;
+ }
+ });
},
- getAlertType() {
- const status = this.stageData.status;
- return status === 'completed' ? 'success' :
- status === 'in_progress' ? 'warning' : 'info';
+ // 鑾峰彇闄勪欢鍒楄〃
+ getAttachmentList() {
+ this.attachmentLoading = true;
+ // 妯℃嫙闄勪欢鏁版嵁
+ this.attachmentList = [
+ {
+ id: 1,
+ type: "1",
+ typeName: "浜轰綋鍣ㄥ畼娼滃湪鎹愮尞鑰呯櫥璁拌〃",
+ fileName: "娼滃湪鎹愮尞鑰呯櫥璁拌〃_202512001.pdf",
+ uploadTime: "2025-12-01 10:30:00",
+ uploader: "寮犱笁",
+ fileSize: "2.5MB",
+ fileUrl: "/attachments/1.pdf"
+ },
+ {
+ id: 2,
+ type: "2",
+ typeName: "浜轰綋鍣ㄥ畼鎹愮尞浜插睘纭鐧昏琛�",
+ fileName: "浜插睘纭鐧昏琛╛202512001.pdf",
+ uploadTime: "2025-12-01 14:20:00",
+ uploader: "鏉庡洓",
+ fileSize: "1.8MB",
+ fileUrl: "/attachments/2.pdf"
+ },
+ {
+ id: 3,
+ type: "3",
+ typeName: "鎹愮尞鑰呭強鐩寸郴浜插睘韬唤璇併�佹埛鍙ｇ翱鐩稿叧璇佹槑",
+ fileName: "韬唤璇佹槑_202512001.zip",
+ uploadTime: "2025-12-01 16:45:00",
+ uploader: "鐜嬩簲",
+ fileSize: "5.2MB",
+ fileUrl: "/attachments/3.zip"
+ },
+ {
+ id: 4,
+ type: "4",
+ typeName: "鍏皯韬晠鍚庝汉浣撳櫒瀹橈紙瑙掕啘锛夐仐浣撴崘鐚憡鐭ヤ功",
+ fileName: "鎹愮尞鍛婄煡涔202512001.pdf",
+ uploadTime: "2025-12-02 09:15:00",
+ uploader: "寮犱笁",
+ fileSize: "1.2MB",
+ fileUrl: "/attachments/4.pdf"
+ },
+ {
+ id: 5,
+ type: "5",
+ typeName: "鑴戞浜″垽瀹氱煡鎯呭悓鎰忎功",
+ fileName: "鑴戞浜″垽瀹氬悓鎰忎功_202512001.pdf",
+ uploadTime: "2025-12-02 11:30:00",
+ uploader: "鏉庡洓",
+ fileSize: "0.8MB",
+ fileUrl: "/attachments/5.pdf"
+ },
+ {
+ id: 6,
+ type: "6",
+ typeName: "蹇冩浜″垽瀹氱煡鎯呭悓鎰忎功",
+ fileName: "蹇冩浜″垽瀹氬悓鎰忎功_202512001.pdf",
+ uploadTime: "2025-12-02 13:20:00",
+ uploader: "鐜嬩簲",
+ fileSize: "0.9MB",
+ fileUrl: "/attachments/6.pdf"
+ }
+ ];
+ this.attachmentLoading = false;
},
- getAlertDescription() {
- const status = this.stageData.status;
- return status === 'completed' ? '鎹愮尞纭娴佺▼宸插畬鎴愶紝鎵�鏈夋硶寰嬫枃浠跺凡绛剧讲' :
- status === 'in_progress' ? '鎹愮尞纭娴佺▼姝ｅ湪杩涜涓�' : '绛夊緟寮�濮嬫崘鐚‘璁ゆ祦绋�';
+ // 涓嬭浇闄勪欢
+ handleDownload(row) {
+ // 瀹為檯椤圭洰涓繖閲岃皟鐢ㄦ枃浠朵笅杞芥帴鍙�
+ this.$message.success(`涓嬭浇鏂囦欢: ${row.fileName}`);
+ console.log("涓嬭浇鏂囦欢:", row.fileUrl);
},
- getStatusTag(status) {
- const map = {
- 'completed': 'success',
- 'in_progress': 'warning',
- 'pending': 'info'
- };
- return map[status] || 'info';
+ // 淇濆瓨纭淇℃伅
+ handleSave() {
+ this.$refs.form.validate(valid => {
+ if (valid) {
+ updateConfirmation(this.form).then(response => {
+ if (response.code === 200) {
+ this.$message.success("淇濆瓨鎴愬姛");
+ this.isEdit = false;
+ this.$router.push("/case/confirmation");
+ }
+ });
+ }
+ });
+ },
+ // 鏍规嵁绫诲瀷鑾峰彇闄勪欢
+ getAttachmentsByType(type) {
+ return this.attachmentList.filter(item => item.type === type);
+ },
+
+ // 鎵撳紑涓婁紶瀵硅瘽妗�
+ openUploadDialog(type) {
+ this.currentUploadType = type;
+ this.tempFileList = [];
+ this.uploadDialogVisible = true;
+ this.$nextTick(() => {
+ if (this.$refs.uploadRef) {
+ this.$refs.uploadRef.clearFiles();
+ }
+ });
+ },
+
+ // 涓婁紶鍓嶆牎楠�
+ beforeUpload(file) {
+ const allowedTypes = [
+ 'application/pdf',
+ 'image/jpeg',
+ 'image/png',
+ 'application/msword',
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+ ];
+
+ const maxSize = 10 * 1024 * 1024; // 10MB
+
+ // 鏍￠獙鏂囦欢绫诲瀷
+ const isTypeOk = allowedTypes.includes(file.type) ||
+ file.name.endsWith('.pdf') ||
+ file.name.endsWith('.jpg') ||
+ file.name.endsWith('.jpeg') ||
+ file.name.endsWith('.png') ||
+ file.name.endsWith('.doc') ||
+ file.name.endsWith('.docx');
+
+ if (!isTypeOk) {
+ this.$message.error('鏂囦欢鏍煎紡涓嶆敮鎸侊紝璇蜂笂浼爌df銆乯pg銆乸ng銆乨oc鎴杁ocx鏍煎紡鏂囦欢');
+ return false;
+ }
+
+ // 鏍￠獙鏂囦欢澶у皬
+ if (file.size > maxSize) {
+ this.$message.error('鏂囦欢澶у皬涓嶈兘瓒呰繃10MB');
+ return false;
+ }
+
+ return true;
+ },
+
+ // 鏂囦欢閫夋嫨鍙樺寲
+ handleFileChange(file, fileList) {
+ this.tempFileList = fileList;
+ },
+
+ // 绉婚櫎涓存椂鏂囦欢
+ handleTempRemove(file, fileList) {
+ this.tempFileList = fileList;
+ },
+
+ // 鑷畾涔変笂浼犺姹�
+ handleHttpRequest(options) {
+ // 妯℃嫙涓婁紶杩囩▼
+ return new Promise((resolve, reject) => {
+ this.uploadLoading = true;
+
+ // 妯℃嫙涓婁紶寤惰繜
+ setTimeout(() => {
+ const newAttachment = {
+ id: Date.now(),
+ type: this.currentUploadType,
+ typeName: this.getCurrentTypeLabel,
+ fileName: options.file.name,
+ fileSize: options.file.size,
+ uploadTime: new Date().toISOString(),
+ uploader: '褰撳墠鐢ㄦ埛', // 瀹為檯椤圭洰涓粠鐢ㄦ埛淇℃伅鑾峰彇
+ fileUrl: URL.createObjectURL(options.file) // 涓存椂URL锛屽疄闄呴」鐩腑涓烘湇鍔″櫒杩斿洖鐨刄RL
+ };
+
+ this.attachmentList.push(newAttachment);
+ this.uploadLoading = false;
+ resolve({ code: 200, data: newAttachment });
+ }, 1500);
+ });
+ },
+
+ // 鎻愪氦涓婁紶
+ async submitUpload() {
+ if (this.tempFileList.length === 0) {
+ this.$message.warning('璇峰厛閫夋嫨瑕佷笂浼犵殑鏂囦欢');
+ return;
+ }
+
+ try {
+ // 渚濇涓婁紶鎵�鏈夋枃浠�
+ for (const file of this.tempFileList) {
+ await this.$refs.uploadRef.submit();
+ }
+
+ this.$message.success('鏂囦欢涓婁紶鎴愬姛');
+ this.uploadDialogVisible = false;
+ this.tempFileList = [];
+ } catch (error) {
+ this.$message.error('鏂囦欢涓婁紶澶辫触');
+ console.error('涓婁紶澶辫触:', error);
+ }
+ },
+
+ // 鍒犻櫎闄勪欢
+ handleRemoveAttachment(attachment, type) {
+ this.$confirm('纭畾瑕佸垹闄よ繖涓檮浠跺悧锛�', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ const index = this.attachmentList.findIndex(item => item.id === attachment.id);
+ if (index !== -1) {
+ this.attachmentList.splice(index, 1);
+ this.$message.success('闄勪欢鍒犻櫎鎴愬姛');
+
+ // 瀹為檯椤圭洰涓皟鐢ㄥ垹闄ゆ帴鍙�
+ // this.deleteAttachment(attachment.id);
+ }
+ }).catch(() => {});
+ },
+
+ // 棰勮闄勪欢
+ handlePreview(attachment) {
+ // 瀹為檯椤圭洰涓牴鎹枃浠剁被鍨嬭皟鐢ㄤ笉鍚岀殑棰勮鏂瑰紡
+ if (attachment.fileName.endsWith('.pdf')) {
+ // PDF棰勮
+ window.open(attachment.fileUrl, '_blank');
+ } else if (attachment.fileName.match(/\.(jpg|jpeg|png)$/i)) {
+ // 鍥剧墖棰勮
+ this.$alert(`<img src="${attachment.fileUrl}" style="max-width: 100%;" alt="${attachment.fileName}">`,
+ '鍥剧墖棰勮', {
+ dangerouslyUseHTMLString: true,
+ customClass: 'image-preview-dialog'
+ });
+ } else {
+ // 鍏朵粬鏂囦欢绫诲瀷鎻愮ず涓嬭浇
+ this.$message.info('璇ユ枃浠剁被鍨嬫殏涓嶆敮鎸佸湪绾块瑙堬紝璇蜂笅杞藉悗鏌ョ湅');
+ }
+ },
+
+ // 淇濆瓨鎵�鏈夐檮浠朵俊鎭�
+ handleSaveAll() {
+ this.saveLoading = true;
+
+ // 妯℃嫙淇濆瓨杩囩▼
+ setTimeout(() => {
+ this.$message.success('闄勪欢淇℃伅淇濆瓨鎴愬姛');
+ this.saveLoading = false;
+
+ // 瀹為檯椤圭洰涓皟鐢ㄤ繚瀛樻帴鍙�
+ // this.saveAttachments();
+ }, 1000);
+ },
+
+ // 鏂囦欢澶у皬鏍煎紡鍖�
+ formatFileSize(size) {
+ if (size === 0) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(size) / Math.log(k));
+ return parseFloat((size / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+ },
+
+ // 鏃堕棿鏍煎紡鍖�
+ parseTime(time) {
+ if (!time) return '';
+ const date = new Date(time);
+ return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
}
}
};
</script>
<style scoped>
-.confirm-overview {
- padding: 10px 0;
+.confirmation-detail {
+ padding: 20px;
}
-.overview-item {
+.detail-card {
+ margin-bottom: 20px;
+}
+
+.attachment-card {
+ margin-bottom: 20px;
+}
+
+.detail-title {
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.fixed-width .el-button {
+ margin: 0 5px;
+}
+.confirmation-detail {
+ padding: 20px;
+}
+
+.detail-card {
+ margin-bottom: 20px;
+}
+
+.attachment-card {
+ margin-bottom: 20px;
+}
+
+.detail-title {
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.attachment-upload-section {
+ padding: 10px;
+}
+
+.upload-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
- padding: 8px 0;
- border-bottom: 1px solid #f0f0f0;
}
-.overview-item .label {
- color: #606266;
- font-weight: 500;
+.upload-title {
+ font-size: 14px;
+ font-weight: 600;
+ color: #303133;
}
-.document-list {
- padding: 10px 0;
-}
-
-.document-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 12px;
- padding: 8px 12px;
- border: 1px solid #e4e7ed;
- border-radius: 4px;
-}
-
-.doc-info {
+.file-info {
display: flex;
align-items: center;
}
-.consent-content {
- padding: 20px;
- line-height: 1.6;
+.empty-attachment {
+ text-align: center;
+ padding: 40px 0;
+ color: #909399;
+}
+
+/* 鍥剧墖棰勮瀵硅瘽妗嗘牱寮� */
+:deep(.image-preview-dialog) {
+ width: auto;
+ max-width: 90vw;
+}
+
+:deep(.image-preview-dialog .el-message-box__content) {
+ text-align: center;
}
</style>
--
Gitblit v1.9.3