antis-ncc-admin/src/views/lqReimbursementApplication/Form.vue

<template>
	<el-dialog :title="!dataForm.id ? '新建' :  isDetail ? '详情':'编辑'" :close-on-click-modal="false" :visible.sync="visible" class="NCC-dialog NCC-dialog_center" lock-scroll width="1200px">
		<el-row :gutter="15" class="" >
			<el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<!-- 上方表单字段：一行三列 -->
				<el-col :span="8">
					<el-form-item label="申请人" prop="applicationUserId">
						<user-select v-model="dataForm.applicationUserId" placeholder="请选择" clearable @change="handleApplicationUserChange">
						</user-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="申请人姓名" prop="applicationUserName">
						<el-input v-model="dataForm.applicationUserName" placeholder="自动填充" disabled :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="申请门店" prop="applicationStoreId">
						<el-select v-model="dataForm.applicationStoreId" placeholder="自动填充" disabled :style='{"width":"100%"}' clearable>
							<el-option
								v-for="store in storeOptions"
								:key="store.id"
								:label="store.dm"
								:value="store.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="8">
					<el-form-item label="申请时间" prop="applicationTime">
						<el-date-picker v-model="dataForm.applicationTime" placeholder="请选择" clearable :style='{"width":"100%"}' type='date' format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col> -->
				<el-col :span="8">
					<el-form-item label="总金额" prop="amount">
						<el-input v-model="dataForm.amount" placeholder="自动计算" readonly :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="审批状态" prop="approveStatus">
						<span class="info-value" :class="{'status-approved': dataForm.approveStatus === '已审批', 'status-pending': dataForm.approveStatus === '未审批'}">
							{{ dataForm.approveStatus || '无' }}
						</span>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="8">
					<el-form-item label="审批人" prop="approveUser">
						<user-select v-model="dataForm.approveUser" placeholder="请选择" clearable >
						</user-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="审批结果" prop="approveStatus">
						<el-input v-model="dataForm.approveStatus" placeholder="请输入" clearable :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="审批时间" prop="approveTime">
						<el-date-picker v-model="dataForm.approveTime" placeholder="请选择" clearable :style='{"width":"100%"}' type='date' format="yyyy-MM-dd" value-format="timestamp" >
						</el-date-picker>
					</el-form-item>
				</el-col> -->
				
				<!-- 购买物品清单选择 -->
				<el-col :span="24">
					<el-form-item label="购买物品清单">
						<el-button type="primary" @click="openPurchaseDialog" :disabled="!!isDetail">选择购买物品</el-button>
						<span v-if="selectedPurchaseRecords.length > 0" style="margin-left: 10px;">
							已选择 {{ selectedPurchaseRecords.length }} 条记录
						</span>
					</el-form-item>
				</el-col>
				
				<!-- 已选择的购买物品清单 -->
				<el-col :span="24" v-if="selectedPurchaseRecords.length > 0">
					<el-form-item label="已选清单">
						<el-table 
							:data="selectedPurchaseRecords" 
							:max-height="200"
							border
							size="small">
							<el-table-column type="index" label="序号" width="60" align="center" />
							<!-- <el-table-column prop="reimbursementCategoryId" label="分类编号"   /> -->
							<el-table-column prop="reimbursementCategoryName" label="分类名称"   />
							<el-table-column prop="createUserStoreId" label="门店" align="left">
								<template slot-scope="scope">
									{{ getStoreName(scope.row.createUserStoreId) }}
								</template>
							</el-table-column>
							<el-table-column prop="unitPrice" label="单价"   />
							<el-table-column prop="quantity" label="数量"  />
							<el-table-column prop="amount" label="总金额"   />
							<el-table-column prop="purchaseTime" label="购买时间" width="120" >
								<template slot-scope="scope">
									{{ scope.row.purchaseTime ? formatDate(scope.row.purchaseTime) : '' }}
								</template>
							</el-table-column>
							<el-table-column prop="memo" label="备注说明" min-  show-overflow-tooltip />
							<el-table-column prop="attachment" label="附件" width="180" align="left">
								<template slot-scope="scope">
									<div v-if="scope.row.attachment && scope.row.attachment.length > 0" class="attachment-list">
										<div 
											v-for="(file, index) in scope.row.attachment" 
											:key="index"
											class="attachment-item"
											@click="handleAttachmentClick(file, scope.row.attachment)">
											<i class="el-icon-paperclip"></i>
											<span class="attachment-name" :title="file.name || '文件'">{{ file.name || '文件' }}</span>
										</div>
									</div>
									<span v-else>无</span>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center" v-if="!isDetail">
								<template slot-scope="scope">
									<el-button type="text" size="small" @click="removePurchaseRecord(scope.$index)" style="color: #F56C6C;">移除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>
				</el-col>
				
				<!-- 购买物品选择弹窗 -->
				<el-dialog 
					title="选择购买物品" 
					:visible.sync="purchaseDialogVisible" 
					width="1000px" 
					:close-on-click-modal="false"
					append-to-body
					:modal-append-to-body="false"
					class="NCC-dialog NCC-dialog_center">
					<el-table 
						ref="purchaseDialogTable"
						v-loading="purchaseListLoading"
						:data="purchaseList" 
						@selection-change="handlePurchaseSelectionChange"
						:max-height="400"
						border>
						<el-table-column type="selection" width="55" />
						<!-- <el-table-column prop="reimbursementCategoryId" label="分类编号"   /> -->
						<el-table-column prop="reimbursementCategoryName" label="分类名称"   />
						<el-table-column prop="unitPrice" label="单价"   />
						<el-table-column prop="quantity" label="数量"  />
						<el-table-column prop="amount" label="总金额"   />
						<el-table-column prop="purchaseTime" label="购买时间" width="120" >
							<template slot-scope="scope">
								{{ scope.row.purchaseTime ? formatDate(scope.row.purchaseTime) : '' }}
							</template>
						</el-table-column>
						<el-table-column prop="memo" label="备注说明" min-  show-overflow-tooltip />
					</el-table>
					<span slot="footer" class="dialog-footer">
						<el-button @click="purchaseDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="confirmPurchaseSelection">确 定</el-button>
					</span>
				</el-dialog>
				
				<!-- 图片预览对话框 -->
				<el-dialog 
					title="图片预览" 
					:visible.sync="imagePreviewVisible" 
					width="600px"
					append-to-body>
					<div style="text-align: center;">
						<el-image 
							:src="previewImageUrl" 
							style="width: 100%;object-fit: contain;">
						</el-image>
					</div>
				</el-dialog>
			</el-form>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button type="warning" @click="handlePrint" v-if="dataForm.id && dataForm.approveStatus === '已审批'">打 印</el-button>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="success" @click="handleApprove" v-if="dataForm.id && !isDetail && dataForm.approveStatus === '未审批' ">通过审批</el-button>
			<el-button type="danger" @click="handleReject" v-if="dataForm.id && !isDetail && dataForm.approveStatus === '未审批'">拒绝审批</el-button>
			<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail && dataForm.approveStatus === '未审批'">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import request from '@/utils/request'
	import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
	import { previewDataInterface } from '@/api/systemData/dataInterface'
	import { UserSettingInfo } from '@/api/permission/userSetting'
	export default {
		components: {},
		props: [],
		data() {
			return {
				loading: false,
				visible: false,
				isDetail: false,
				purchaseDialogVisible: false,
				purchaseListLoading: false,
				purchaseList: [],
				selectedPurchaseRecords: [],
				tempSelectedPurchaseRecords: [], // 弹窗中临时选中的记录
				storeOptions: [], // 门店选项列表
				userMap: {}, // 用户信息映射
				imagePreviewVisible: false, // 图片预览对话框显示状态
				previewImageUrl: '', // 预览的图片URL
				dataForm: {
					id:undefined,
					applicationUserId:undefined,
					applicationUserName:undefined,
					applicationStoreId:undefined,
					applicationTime:undefined,
					amount:undefined,
					approveUser:undefined,
					approveStatus:'未审批',
					approveTime:undefined,
					purchaseRecordsId:undefined,
					selectedPurchaseRecordIds: [], // 选中的购买记录ID列表
				},
				rules: {
				},
			}
		},
		computed: {},
        watch: {},
        created() {
			this.loadStoreOptions();
		},
		mounted() {
        },
		methods: {
			goBack() {
                this.$emit('refresh')
            },
			// 申请人改变时，自动填充申请人姓名和申请门店
			handleApplicationUserChange(userId) {
				if (userId) {
					// 获取用户信息
					request({
						url: '/api/permission/Users/' + userId,
						method: 'GET',
					}).then(res => {
						this.dataForm.applicationUserName = res.data.realName || res.data.userName || '';
						this.dataForm.applicationStoreId = res.data.mdid || '';
					});
				} else {
					// 清空申请人时，也清空姓名和门店
					this.dataForm.applicationUserName = '';
					this.dataForm.applicationStoreId = '';
				}
			},
			// 加载门店列表
			loadStoreOptions() {
				request({
					url: '/api/Extend/LqMdxx',
					method: 'GET',
					data: {
						currentPage: 1,
						pageSize: 1000
					}
				}).then(res => {
					if (res.data && res.data.list) {
						this.storeOptions = res.data.list;
					}
				}).catch(() => {
					this.storeOptions = [];
				});
			},
			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 打开购买物品选择弹窗
			openPurchaseDialog() {
				this.purchaseDialogVisible = true;
				// 初始化临时选中列表为当前已选中的记录（用于追加选择）
				this.tempSelectedPurchaseRecords = [...this.selectedPurchaseRecords];
				// 加载当前用户的未报销购买记录
				this.loadCurrentUserPurchaseRecords();
			},
			// 加载当前用户的未报销购买记录
			loadCurrentUserPurchaseRecords() {
				this.purchaseListLoading = true;
					request({
						url: '/api/Extend/LqPurchaseRecords/Actions/GetNoPagingList',
						method: 'GET',
						data: {
							createUserStoreId: this.dataForm.applicationStoreId,
							approveStatus: '未审批'
						}
					}).then(res => {
						// 过滤出未报销的记录（ApplicationId为空）
						this.purchaseList = res.data || [];
						this.purchaseListLoading = false;
					}).catch(() => {
						this.purchaseListLoading = false;
					});
			},
			// 购买记录选择变化（弹窗中）
			handlePurchaseSelectionChange(selection) {
				this.tempSelectedPurchaseRecords = selection;
			},
			// 确认选择购买物品
			confirmPurchaseSelection() {
				// 追加选择：将弹窗中选中的记录追加到已选记录中（去重）
				const existingIds = new Set(this.selectedPurchaseRecords.map(item => item.id));
				const newRecords = this.tempSelectedPurchaseRecords.filter(item => !existingIds.has(item.id));
				
				// 追加新选中的记录
				this.selectedPurchaseRecords = [...this.selectedPurchaseRecords, ...newRecords];
				
				// 更新ID列表
				this.dataForm.selectedPurchaseRecordIds = this.selectedPurchaseRecords.map(item => item.id);
				
				// 自动计算总金额
				const totalAmount = this.selectedPurchaseRecords.reduce((sum, item) => {
					return sum + (parseFloat(item.amount) || 0);
				}, 0);
				this.dataForm.amount = totalAmount.toFixed(2);
				this.purchaseDialogVisible = false;
			},
			// 移除已选中的购买记录
			removePurchaseRecord(index) {
				this.selectedPurchaseRecords.splice(index, 1);
				this.dataForm.selectedPurchaseRecordIds = this.selectedPurchaseRecords.map(item => item.id);
				// 重新计算总金额
				const totalAmount = this.selectedPurchaseRecords.reduce((sum, item) => {
					return sum + (parseFloat(item.amount) || 0);
				}, 0);
				this.dataForm.amount = totalAmount.toFixed(2);
			},
			// 处理附件点击
			handleAttachmentClick(file, attachmentList) {
				if (!file || !file.url) {
					this.$message.warning('附件URL不存在');
					return;
				}
				
				// 判断文件类型
				const fileExtension = this.getFileExtension(file.name || file.url);
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
				
				// 构建完整的URL（如果url是相对路径，需要加上基础URL）
				let fullUrl = file.url;
				if (file.url && !file.url.startsWith('http')) {
					// 如果url是相对路径，需要加上基础URL
					const baseUrl = (this.define && this.define.comUrl) || window.location.origin;
					fullUrl = baseUrl + file.url;
				}
				
				if (imageExtensions.includes(fileExtension.toLowerCase())) {
					// 图片类型：预览
					this.previewImageUrl = fullUrl;
					this.imagePreviewVisible = true;
				} else {
					// 其他类型：下载
					this.downloadFile(fullUrl, file.name || file.fileId);
				}
			},
			// 获取文件扩展名
			getFileExtension(fileName) {
				if (!fileName) return '';
				const lastDot = fileName.lastIndexOf('.');
				return lastDot > -1 ? fileName.substring(lastDot + 1) : '';
			},
			// 下载文件
			downloadFile(url, fileName) {
				const link = document.createElement('a');
				link.href = url;
				link.download = fileName || 'download';
				link.target = '_blank';
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
			},
			init(id, isDetail) {
				this.dataForm.id = id || 0;
                this.visible = true;
                this.isDetail = isDetail || false;
				this.selectedPurchaseRecords = [];
				this.purchaseList = [];
				this.$nextTick(() => {
					this.$refs['elForm'].resetFields();
					if (this.dataForm.id) {
						// 编辑模式：加载已有数据
						request({
							url: '/api/Extend/LqReimbursementApplication/' + this.dataForm.id,
							method: 'get'
						}).then(res =>{
							this.dataForm = res.data;
							// 转换时间格式：如果 approveTime 是 ISO 8601 字符串，转换为时间戳
							if (this.dataForm.approveTime && typeof this.dataForm.approveTime === 'string') {
								this.dataForm.approveTime = new Date(this.dataForm.approveTime).getTime();
							}
							// 如果有关联的购买记录，加载并选中
							if (this.dataForm.purchaseRecordsId) {
								this.loadSelectedPurchaseRecords(this.dataForm.purchaseRecordsId);
							}
							// 加载用户信息（用于打印）
							this.loadUserInfo();
						})
					} else {
						// 新增模式：设置默认值
						UserSettingInfo().then(response => {
							if (response.data && response.data.id) {
								this.dataForm.applicationUserId = response.data.id;
								// 自动填充申请人姓名和申请门店
								this.handleApplicationUserChange(response.data.id);
							}
						}).catch(() => {
							// 如果API调用失败，尝试从store获取
							const userInfo = this.$store.getters.userInfo;
							if (userInfo) {
								const userId = userInfo.userId || userInfo.id;
								this.dataForm.applicationUserId = userId;
								// 自动填充申请人姓名和申请门店
								this.handleApplicationUserChange(userId);
							}
						});
						this.dataForm.applicationTime = new Date().getTime();
					}
				})
			},
			// 加载已选中的购买记录（编辑时使用）
			loadSelectedPurchaseRecords(purchaseRecordsId) {
				if (!purchaseRecordsId) {
					this.selectedPurchaseRecords = [];
					this.dataForm.selectedPurchaseRecordIds = [];
					return;
				}
				// 处理逗号分隔的ID字符串
				const normalizedStr = purchaseRecordsId.replace(/[\r\n]+/g, ',').replace(/\s+/g, '');
				const ids = normalizedStr.split(',').map(id => id.trim()).filter(id => id && id !== '');
				
				if (ids.length === 0) {
					this.selectedPurchaseRecords = [];
					this.dataForm.selectedPurchaseRecordIds = [];
					return;
				}
				
				// 批量加载购买记录
				Promise.all(ids.map(id => {
					return request({
						url: `/api/Extend/LqPurchaseRecords/${id}`,
						method: 'GET'
					}).then(res => res.data).catch(() => null);
				})).then(results => {
					this.selectedPurchaseRecords = results.filter(item => item !== null);
					this.dataForm.selectedPurchaseRecordIds = this.selectedPurchaseRecords.map(item => item.id);
					
					// 计算总金额
					const totalAmount = this.selectedPurchaseRecords.reduce((sum, item) => {
						return sum + (parseFloat(item.amount) || 0);
					}, 0);
					this.dataForm.amount = totalAmount.toFixed(2);
					
					// 如果有未找到的记录，提示用户
					const foundCount = this.selectedPurchaseRecords.length;
					if (foundCount < ids.length) {
						this.$message.warning(`有 ${ids.length - foundCount} 条购买记录未找到，可能已被删除`);
					}
				}).catch((error) => {
					console.error('加载购买记录失败:', error);
					this.$message.error('加载购买记录失败');
				});
			},
			dataFormSubmit() {
				this.$refs['elForm'].validate((valid) => {
                    if (valid) {
						// 验证是否选择了购买记录
						if (!this.dataForm.id && (!this.dataForm.selectedPurchaseRecordIds || this.dataForm.selectedPurchaseRecordIds.length === 0)) {
							this.$message({
								message: '请至少选择一条购买记录',
								type: 'warning',
								duration: 2000
							});
							return;
						}
						
						// 设置关联购买编号（多个ID用逗号分隔）
						this.dataForm.purchaseRecordsId = this.dataForm.selectedPurchaseRecordIds.join(',');
						
                        if (!this.dataForm.id) {
                            request({
                                url: `/api/Extend/LqReimbursementApplication`,
                                method: 'post',
                                data: this.dataForm,
                            }).then((res) => {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () => {
                                        this.visible = false,
                                            this.$emit('refresh', true)
                                    }
                                })
                            })
                        } else {
                            request({
                                url: '/api/Extend/LqReimbursementApplication/' + this.dataForm.id,
                                method: 'PUT',
                                data: this.dataForm
                            }).then((res) => {
                                this.$message({
                                    message: res.msg,
                                    type: 'success',
                                    duration: 1000,
                                    onClose: () => {
                                        this.visible = false
                                        this.$emit('refresh', true)
                                    }
                                })
                            })
                        }
                    }
                })
			},
			handleApprove() {
				this.$confirm('确定要通过审批吗?', '提示', {
					type: 'warning'
				}).then(() => {
					request({
						url: `/api/Extend/LqReimbursementApplication/${this.dataForm.id}/Actions/Approve`,
						method: 'POST'
					}).then(res => {
						this.$message({
							type: 'success',
							message: res.msg || '审批通过成功',
							onClose: () => {
								this.visible = false;
								this.$emit('refresh', false);
							}
						});
					})
				}).catch(() => {
				});
			},
			handleReject() {
				this.$confirm('确定要拒绝审批吗?', '提示', {
					type: 'warning'
				}).then(() => {
					request({
						url: `/api/Extend/LqReimbursementApplication/${this.dataForm.id}/Actions/Reject`,
						method: 'POST'
					}).then(res => {
						this.$message({
							type: 'success',
							message: res.msg || '拒绝审批成功',
							onClose: () => {
								this.visible = false;
								this.$emit('refresh', false);
							}
						});
					})
				}).catch(() => {
				});
			},
			// 加载用户信息
			loadUserInfo() {
				const userIds = []
				if (this.dataForm.approveUser) {
					userIds.push(this.dataForm.approveUser)
				}
				
				// 去重
				const uniqueUserIds = [...new Set(userIds)]
				
				// 批量加载用户信息
				Promise.all(uniqueUserIds.map(userId => {
					return request({
						url: `/api/permission/Users/${userId}`,
						method: 'GET'
					}).then(res => {
						if (res.data) {
							this.userMap[userId] = res.data.realName || res.data.account || userId
						}
					}).catch(() => {
						this.userMap[userId] = userId
					})
				}))
			},
			// 获取门店名称
			getStoreName(storeId) {
				if (!storeId) return ''
				const store = this.storeOptions.find(item => item.id === storeId)
				return store ? store.dm : ''
			},
			// 获取用户名称
			getUserName(userId) {
				if (!userId) return ''
				return this.userMap[userId] || userId
			},
			// 打印功能
			handlePrint() {
				if (!this.dataForm.id) {
					this.$message.warning('无法打印，数据未加载完成')
					return
				}
				
				// 检查是否已审批
				if (this.dataForm.approveStatus !== '已审批') {
					this.$message.warning('只有审核通过的申请才能打印')
					return
				}
				
				// 构建打印内容
				let printContent = this.buildPrintContent()
				
				// 打开新窗口并打印
				let newWindow = window.open('_blank')
				if (!newWindow) {
					this.$message.error('无法打开打印窗口，请检查浏览器弹窗设置')
					return
				}
				
				newWindow.document.write(printContent)
				newWindow.document.close()
				
				// 等待内容加载完成后打印
				setTimeout(() => {
					newWindow.print()
				}, 300)
			},
			// 构建打印内容
			buildPrintContent() {
				const storeName = this.getStoreName(this.dataForm.applicationStoreId) || '无'
				const approveStatus = this.dataForm.approveStatus || '未审批'
				const approveTime = this.dataForm.approveTime ? this.formatDate(this.dataForm.approveTime) : '无'
				
				// 构建购买物品清单表格
				let purchaseTableRows = ''
				if (this.selectedPurchaseRecords && this.selectedPurchaseRecords.length > 0) {
					this.selectedPurchaseRecords.forEach((item, index) => {
						const storeName = this.getStoreName(item.createUserStoreId) || '无'
						purchaseTableRows += `
							<tr>
								<td style="text-align: center; width: 55px;">${index + 1}</td>
								<td>${item.reimbursementCategoryName || '无'}</td>
								<td>${storeName}</td>
								<td style="text-align: right;">${item.unitPrice || '0.00'}</td>
								<td style="text-align: center;">${item.quantity || '0'}</td>
								<td style="text-align: right;">${item.amount || '0.00'}</td>
								<td>${item.purchaseTime ? this.formatDate(item.purchaseTime) : '无'}</td>
								<td>${item.memo || '无'}</td>
							</tr>
						`
					})
				} else {
					purchaseTableRows = '<tr><td colspan="8" style="text-align: center;">暂无数据</td></tr>'
				}
				
				return `
					<!DOCTYPE html>
					<html>
					<head>
						<meta charset="UTF-8">
						<title>报销申请单</title>
						<style>
							* {
								margin: 0;
								padding: 0;
								box-sizing: border-box;
							}
							body {
								font-family: "Microsoft YaHei", Arial, sans-serif;
								font-size: 13px;
								padding: 15px;
								color: #333;
							}
							.print-header {
								text-align: center;
								margin-bottom: 15px;
								border-bottom: 2px solid #333;
								padding-bottom: 10px;
							}
							.print-header h1 {
								font-size: 22px;
								font-weight: bold;
								margin-bottom: 5px;
							}
							.print-info {
								margin-bottom: 12px;
							}
							.print-info table {
								width: 100%;
								border-collapse: collapse;
								margin-bottom: 12px;
							}
							.print-info table td {
								padding: 6px 10px;
								border: 1px solid #ddd;
							}
							.print-info table td:first-child {
								background-color: #f5f5f5;
								font-weight: bold;
								width: 120px;
								text-align: right;
							}
							.print-table {
								width: 100%;
								border-collapse: collapse;
								margin-bottom: 12px;
							}
							.print-table thead {
								display: table-header-group;
							}
							.print-table tbody {
								display: table-row-group;
							}
							.print-table th,
							.print-table td {
								border: 1px solid #ddd;
								padding: 5px 6px;
								text-align: left;
								font-size: 12px;
							}
							.print-table th {
								background-color: #f5f5f5;
								font-weight: bold;
								text-align: center;
							}
							.print-table tbody tr {
								page-break-inside: avoid;
							}
							.print-footer {
								margin-top: 15px;
								padding-top: 10px;
								border-top: 1px solid #ddd;
								text-align: right;
								font-size: 11px;
								color: #666;
							}
							@media print {
								body {
									padding: 8px;
								}
								.print-header {
									page-break-after: avoid;
									margin-bottom: 12px;
									padding-bottom: 8px;
								}
								.print-info {
									page-break-after: avoid;
									margin-bottom: 10px;
								}
								.print-table {
									page-break-inside: auto;
								}
								.print-table thead {
									display: table-header-group;
								}
								.print-table tbody tr {
									page-break-inside: avoid;
									page-break-after: auto;
								}
								.print-table tbody tr:last-child {
									page-break-after: auto;
								}
								.print-footer {
									page-break-before: avoid;
									margin-top: 10px;
									padding-top: 8px;
								}
								@page {
									margin: 1cm;
								}
							}
						</style>
					</head>
					<body>
						<div class="print-header">
							<h1>报销申请单</h1>
						</div>
						
						<div class="print-info">
							<table>
								<tr>
									<td>申请编号：</td>
									<td>${this.dataForm.id || '无'}</td>
									<td>申请人：</td>
									<td>${this.dataForm.applicationUserName || '无'}</td>
								</tr>
								<tr>
									<td>申请门店：</td>
									<td>${storeName}</td>
									<td>申请时间：</td>
									<td>${this.dataForm.applicationTime ? this.formatDate(this.dataForm.applicationTime) : '无'}</td>
								</tr>
								<tr>
									<td>总金额：</td>
									<td>¥${this.dataForm.amount || '0.00'}</td>
									<td>审批状态：</td>
									<td>${approveStatus}</td>
								</tr>
								<tr>
									<td>审批人：</td>
									<td>${this.getUserName(this.dataForm.approveUser) || '无'}</td>
									<td>审批时间：</td>
									<td>${approveTime}</td>
								</tr>
							</table>
						</div>
						
						<div class="print-info">
							<h3 style="margin-bottom: 10px;">购买物品清单</h3>
							<table class="print-table">
								<thead>
									<tr>
										<th style="width: 55px;">序号</th>
										<th>分类名称</th>
										<th>门店</th>
										<th style="width: 100px;">单价</th>
										<th style="width: 80px;">数量</th>
										<th style="width: 100px;">总金额</th>
										<th style="width: 120px;">购买时间</th>
										<th>备注说明</th>
									</tr>
								</thead>
								<tbody>
									${purchaseTableRows}
								</tbody>
							</table>
						</div>
						
						<div class="print-footer">
							<p>打印时间：${new Date().toLocaleString('zh-CN')}</p>
						</div>
					</body>
					</html>
				`
			},
		}
	}
</script>
<style lang="scss" scoped>
.attachment-list {
	.attachment-item {
		display: flex;
		align-items: center;
		padding: 4px 0;
		cursor: pointer;
		color: #409EFF;
		transition: color 0.3s;
		
		&:hover {
			color: #66b1ff;
		}
		
		i {
			margin-right: 4px;
			font-size: 14px;
		}
		
		.attachment-name {
			font-size: 12px;
			max-width: 120px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>