antissoft / lvqianmeiye_ERP

<template>
	<el-dialog 
		title="购买记录详情" 
		:visible.sync="visible" 
		:close-on-click-modal="false"
		class="NCC-dialog NCC-dialog_center" 
		width="1200px"
		@close="handleClose">
		<div class="detail-content" v-loading="loading">
			<!-- 基本信息卡片 -->
			<el-card class="info-card" shadow="hover">
				<div slot="header" class="card-header">
					<i class="el-icon-shopping-cart-full"></i>
					<span class="card-title">基本信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">记录编号：</label>
							<span class="info-value">{{ dataForm.id || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">购买物品编号：</label>
							<span class="info-value">{{ dataForm.reimbursementCategoryId || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">购买物品名称：</label>
							<span class="info-value">{{ dataForm.reimbursementCategoryName || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">单价：</label>
							<span class="info-value">{{ dataForm.unitPrice || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">数量：</label>
							<span class="info-value">{{ dataForm.quantity || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">总金额：</label>
							<span class="info-value amount">{{ dataForm.amount || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="24">
						<div class="info-item">
							<label class="info-label">备注说明：</label>
							<span class="info-value">{{ dataForm.memo || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">购买时间：</label>
							<span class="info-value">{{ formatDate(dataForm.purchaseTime) || '无' }}</span>
						</div>
					</el-col>
				</el-row>
			</el-card>

			<!-- 附件信息卡片 -->
			<el-card class="info-card" shadow="hover" v-if="dataForm.attachment && dataForm.attachment.length > 0">
				<div slot="header" class="card-header">
					<i class="el-icon-paperclip"></i>
					<span class="card-title">附件</span>
				</div>
				<div class="attachment-list">
					<div v-for="(file, index) in dataForm.attachment" :key="index" class="attachment-item">
						<i class="el-icon-document"></i>
						<a :href="file.url || file" target="_blank" class="attachment-link">{{ file.name || file }}</a>
					</div>
				</div>
			</el-card>

			<!-- 创建信息卡片 -->
			<el-card class="info-card" shadow="hover">
				<div slot="header" class="card-header">
					<i class="el-icon-user"></i>
					<span class="card-title">创建信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">创建时间：</label>
							<span class="info-value">{{ formatDate(dataForm.createTime) || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">创建人：</label>
							<span class="info-value">{{ getUserName(dataForm.createUser) || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">创建人门店：</label>
							<span class="info-value">{{ getStoreName(dataForm.createUserStoreId) || '无' }}</span>
						</div>
					</el-col>
				</el-row>
			</el-card>

			<!-- 审批信息卡片 -->
			<el-card class="info-card" shadow="hover">
				<div slot="header" class="card-header">
					<i class="el-icon-check"></i>
					<span class="card-title">审批信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">审批状态：</label>
							<span class="info-value" :class="{'status-approved': dataForm.approveStatus === '已审批', 'status-pending': dataForm.approveStatus === '未审批'}">
								{{ dataForm.approveStatus || '无' }}
							</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">审批人：</label>
							<span class="info-value">{{ getUserName(dataForm.approveUser) || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">审批时间：</label>
							<span class="info-value">{{ formatDate(dataForm.approveTime) || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">审批单编号：</label>
							<span class="info-value">{{ dataForm.applicationId || '无' }}</span>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">关 闭</el-button>
		</span>
	</el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
	name: 'PurchaseRecordDetail',
		data() {
		return {
			visible: false,
			loading: false,
			dataForm: {},
			storeOptions: [],
			userMap: {} // 用户ID到用户名的映射
		}
	},
	methods: {
		init(id) {
			this.visible = true;
			this.loading = true;
			this.dataForm = {};
			
			// 加载门店列表
			this.loadStoreOptions();
			
			// 加载详情数据
			request({
				url: '/api/Extend/LqPurchaseRecords/' + id,
				method: 'GET'
			}).then(res => {
				this.dataForm = res.data || {};
				if (!this.dataForm.attachment) {
					this.dataForm.attachment = [];
				}
				// 加载用户信息
				this.loadUserInfo();
				this.loading = false;
			}).catch(() => {
				this.loading = false;
				this.$message.error('加载详情失败');
			});
		},
		// 加载门店列表
		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}`;
		},
		// 获取门店名称
		getStoreName(storeId) {
			if (!storeId) return '';
			const store = this.storeOptions.find(item => item.id === storeId);
			return store ? store.dm : '';
		},
		// 加载用户信息
		loadUserInfo() {
			const userIds = [];
			if (this.dataForm.createUser) {
				userIds.push(this.dataForm.createUser);
			}
			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;
				});
			}));
		},
		// 获取用户名称
		getUserName(userId) {
			if (!userId) return '';
			return this.userMap[userId] || userId;
		},
		handleClose() {
			this.visible = false;
			this.dataForm = {};
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-content {
	padding: 10px 0;
}

.info-card {
	margin-bottom: 20px;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.card-header {
	display: flex;
	align-items: center;
	
	i {
		margin-right: 8px;
		font-size: 16px;
		color: #409EFF;
	}
	
	.card-title {
		font-size: 16px;
		font-weight: 600;
		color: #303133;
	}
}

.info-item {
	margin-bottom: 16px;
	display: flex;
	align-items: flex-start;
	
	.info-label {
		min-width: 120px;
		color: #909399;
		font-size: 14px;
		flex-shrink: 0;
	}
	
	.info-value {
		color: #303133;
		font-size: 14px;
		word-break: break-all;
		
		&.amount {
			color: #F56C6C;
			font-weight: 600;
		}
		
		&.status-approved {
			color: #67C23A;
			font-weight: 600;
		}
		
		&.status-pending {
			color: #E6A23C;
			font-weight: 600;
		}
	}
}

.attachment-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.attachment-item {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	background: #f5f7fa;
	border-radius: 4px;
	
	i {
		margin-right: 8px;
		color: #409EFF;
	}
}

.attachment-link {
	color: #409EFF;
	text-decoration: none;
	
	&:hover {
		text-decoration: underline;
	}
}
</style>