antissoft / lvqianmeiye_ERP

  <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="100" align="left">

  								<template slot-scope="scope">
  									<div v-if="scope.row.attachment && scope.row.attachment.length > 0" class="attachment-list">

  										<!-- 	v-for="(file, index) in scope.row.attachment" 
  											:key="index" -->
  										<div> 

  											<i class="el-icon-paperclip"></i>

  											<span class="attachment-name">{{ scope.row.attachment.length + '个文件' }}</span>
  										</div>
  										<div class="attachment-item">
  											<el-image :src="baseUrl + scope.row.attachment[0].url" fit="contain" :style="{
  												width: '100%',
  												height: '100px',
  												display: 'block',
  												margin: '0 auto'
  											}" :preview-src-list="getPreviewSrcList(scope.row.attachment)">
  											</el-image>
  											

  										</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 class="image-preview-container">
  					<div class="image-wrapper">

  						<el-image 
  							:src="previewImageUrl" 

  							fit="contain"

  							:style="{
  								maxWidth: '100%',

  								maxHeight: '100%',

  								display: 'block',
  								margin: '0 auto'
  							}">

  						</el-image>
  					</div>

  				</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 {

  				baseUrl: process.env.VUE_APP_IMG_API,

  				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: {

  			getPreviewSrcList(attachment) {
  				return attachment.map(item => this.baseUrl + item.url);
  			},

  			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;
  		}
  	}
  }

  
  .image-preview-container {
  	.image-wrapper {

  		// min-height: 200px;
  		// max-height: 450px;

  		overflow: auto;
  		display: flex;
  		align-items: center;
  		justify-content: center;

  		// padding: 20px;

  		background-color: #f5f5f5;
  		border-radius: 4px;

  		// margin-bottom: 15px;
  		box-sizing: border-box;

  		::v-deep .el-image {
  			display: block;
  		}
  	}

  }

  </style>