antissoft / lvqianmeiye_ERP

<template>
	<el-dialog title="流水详情" :visible.sync="visible" width="800px" :close-on-click-modal="false">
		<div v-loading="loading" class="detail-container">
			<!-- 基本信息 -->
			<div class="detail-section">
				<div class="section-title">
					<i class="el-icon-info section-icon"></i>
					<span>基本信息</span>
				</div>
				<div class="detail-content">
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-upload2 detail-icon" :class="form.flowType === 0 ? 'send-icon' : 'return-icon'"></i>
							<span>流水类型</span>
						</div>
						<div class="detail-value">
							<el-tag :type="form.flowType === 0 ? 'primary' : 'success'" size="small">
								<i :class="form.flowType === 0 ? 'el-icon-upload2' : 'el-icon-download'" style="margin-right: 4px;"></i>
								{{ form.flowTypeName || '无' }}
							</el-tag>
						</div>
					</div>
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-tickets detail-icon batch-icon"></i>
							<span>批次号</span>
						</div>
						<div class="detail-value">
							<span>{{ form.batchNumber || '无' }}</span>
						</div>
					</div>
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-office-building detail-icon store-icon"></i>
							<span>门店名称</span>
						</div>
						<div class="detail-value">
							<span>{{ form.storeName || '无' }}</span>
						</div>
					</div>
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-goods detail-icon product-icon"></i>
							<span>产品类型</span>
						</div>
						<div class="detail-value">
							<span>{{ form.productType || '无' }}</span>
						</div>
					</div>
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-s-shop detail-icon supplier-icon"></i>
							<span>清洗商名称</span>
						</div>
						<div class="detail-value">
							<span>{{ form.laundrySupplierName || '无' }}</span>
						</div>
					</div>
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-s-data detail-icon quantity-icon"></i>
							<span>数量</span>
						</div>
						<div class="detail-value">
							<span class="value-number">{{ form.quantity || 0 }}</span>
						</div>
					</div>
					<div class="detail-row" v-if="form.flowType === 0">
						<div class="detail-label">
							<i class="el-icon-time detail-icon time-icon"></i>
							<span>送出时间</span>
						</div>
						<div class="detail-value">
							<span>{{ form.sendTime ? formatDateTime(form.sendTime) : '无' }}</span>
						</div>
					</div>
					<div class="detail-row" v-if="form.flowType === 1">
						<div class="detail-label">
							<i class="el-icon-time detail-icon time-icon"></i>
							<span>送回时间</span>
						</div>
						<div class="detail-value">
							<span>{{ form.returnTime ? formatDateTime(form.returnTime) : '无' }}</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 费用信息 -->
			<div class="detail-section">
				<div class="section-title">
					<i class="el-icon-coin section-icon"></i>
					<span>费用信息</span>
				</div>
				<div class="detail-content">
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-coin detail-icon price-icon"></i>
							<span>清洗单价</span>
						</div>
						<div class="detail-value">
							<span class="value-number">¥{{ form.laundryPrice || 0 }}</span>
						</div>
					</div>
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-money detail-icon total-price-icon"></i>
							<span>总费用</span>
						</div>
						<div class="detail-value">
							<span class="value-number value-total">¥{{ form.totalPrice || 0 }}</span>
						</div>
					</div>
				</div>
			</div>

			<!-- 其他信息 -->
			<div class="detail-section">
				<div class="section-title">
					<i class="el-icon-document section-icon"></i>
					<span>其他信息</span>
				</div>
				<div class="detail-content">
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-document detail-icon remark-icon"></i>
							<span>备注</span>
						</div>
						<div class="detail-value">
							<span>{{ form.remark || '无' }}</span>
						</div>
					</div>
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-success detail-icon status-icon"></i>
							<span>是否有效</span>
						</div>
						<div class="detail-value">
							<el-tag :type="form.isEffective === 1 ? 'success' : 'info'" size="small">
								{{ form.isEffective === 1 ? '有效' : '无效' }}
							</el-tag>
						</div>
					</div>
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-user detail-icon user-icon"></i>
							<span>创建人</span>
						</div>
						<div class="detail-value">
							<span>{{ form.createUserName || '无' }}</span>
						</div>
					</div>
					<div class="detail-row">
						<div class="detail-label">
							<i class="el-icon-time detail-icon time-icon"></i>
							<span>创建时间</span>
						</div>
						<div class="detail-value">
							<span>{{ formatDateTime(form.createTime) || '无' }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false">关闭</el-button>
		</div>
	</el-dialog>
</template>

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

export default {
	name: 'DetailDialog',
	data() {
		return {
			visible: false,
			loading: false,
			form: {
				id: '',
				flowType: 0,
				flowTypeName: '',
				batchNumber: '',
				storeId: '',
				storeName: '',
				productType: '',
				laundrySupplierId: '',
				laundrySupplierName: '',
				quantity: 0,
				laundryPrice: 0,
				totalPrice: 0,
				remark: '',
				isEffective: 1,
				createUser: '',
				createUserName: '',
				createTime: '',
				sendTime: '',
				returnTime: ''
			}
		}
	},
	methods: {
		// 初始化
		init(id) {
			this.visible = true
			this.loading = true
			request({
				url: `/api/Extend/LqLaundryFlow/${id}`,
				method: 'GET'
			}).then(res => {
				this.loading = false
				if (res.code == 200 && res.data) {
					this.form = res.data
				} else {
					this.$message.error(res.msg || '获取详情失败')
					this.visible = false
				}
			}).catch(() => {
				this.loading = false
				this.visible = false
			})
		},
		// 格式化日期时间
		formatDateTime(dateTime) {
			if (!dateTime) return ''
			const date = new Date(dateTime)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hours = String(date.getHours()).padStart(2, '0')
			const minutes = String(date.getMinutes()).padStart(2, '0')
			const seconds = String(date.getSeconds()).padStart(2, '0')
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
		}
	}
}
</script>

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

.detail-section {
	margin-bottom: 24px;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;

	&:last-child {
		margin-bottom: 0;
	}
}

.section-title {
	display: flex;
	align-items: center;
	padding: 16px 20px;
	background: #f5f7fa;
	border-bottom: 1px solid #e4e7ed;
	font-size: 16px;
	font-weight: 600;
	color: #303133;
}

.section-icon {
	margin-right: 8px;
	color: #409EFF;
	font-size: 18px;
}

.detail-content {
	padding: 20px;
}

.detail-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #f0f2f5;

	&:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
	}
}

.detail-label {
	display: flex;
	align-items: center;
	width: 140px;
	flex-shrink: 0;
	font-weight: 500;
	color: #606266;
}

.detail-icon {
	margin-right: 8px;
	font-size: 16px;
}

.detail-value {
	flex: 1;
	color: #303133;
	word-break: break-all;
}

.value-number {
	font-weight: 600;
	color: #E6A23C;
}

.value-total {
	font-size: 18px;
	color: #F56C6C;
}

// 图标颜色
.batch-icon {
	color: #409EFF;
}

.store-icon {
	color: #409EFF;
}

.product-icon {
	color: #67C23A;
}

.supplier-icon {
	color: #409EFF;
}

.quantity-icon {
	color: #E6A23C;
}

.price-icon {
	color: #E6A23C;
}

.total-price-icon {
	color: #F56C6C;
}

.remark-icon {
	color: #909399;
}

.status-icon {
	color: #67C23A;
}

.user-icon {
	color: #909399;
}

.time-icon {
	color: #909399;
}

.send-icon {
	color: #409EFF;
}

.return-icon {
	color: #67C23A;
}

.dialog-footer {
	text-align: right;
	padding-top: 20px;
}
</style>