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-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">{{ dataForm.kdhyc || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">会员手机号：</label>
							<span class="info-value">{{ dataForm.kdhysjh || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">单据门店：</label>
							<span class="info-value">{{ getStoreName(dataForm.djmd) || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">开单日期：</label>
							<span class="info-value">{{ formatDate(dataForm.kdrq) || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">顾客类型：</label>
							<span class="info-value">{{ dataForm.gjlx || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">金三角：</label>
							<span class="info-value">{{ dataForm.jsj || '无' }}</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-money"></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 amount">{{ formatAmount(dataForm.zdyj) }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">实付业绩：</label>
							<span class="info-value amount">{{ formatAmount(dataForm.sfyj) }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">欠款：</label>
							<span class="info-value amount">{{ formatAmount(dataForm.qk) }}</span>
						</div>
					</el-col>
				</el-row>
			</el-card>

			<!-- 储扣信息卡片 -->
			<el-card class="info-card" shadow="hover" v-if="dataForm.sfck === '是'">
				<div slot="header" class="card-header">
					<i class="el-icon-discount"></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.sfck || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">储扣方式：</label>
							<span class="info-value">{{ dataForm.ckfs || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">储扣明细：</label>
							<span class="info-value">{{ dataForm.ckmx || '无' }}</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-credit-card"></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.fkfs || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8" v-if="dataForm.fkfs != '合作'">
						<div class="info-item">
							<label class="info-label">结算机构：</label>
							<span class="info-value">{{ getHospitalName(dataForm.fkyy) || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8" v-if="dataForm.fkfs === '合作'">
						<div class="info-item">
							<label class="info-label">合作机构：</label>
							<span class="info-value">{{ getCoopOrgName(dataForm.hgjg) || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">是否首开订单：</label>
							<span class="info-value">{{ dataForm.sfskdd || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">是否作废：</label>
							<span class="info-value">{{ dataForm.isEffective == '1'?'正常':'作废'}}</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-goods"></i>
					<span class="card-title">品项明细</span>
				</div>
				<div class="px-list-container">
					<div v-for="(px, pxIndex) in dataForm.lqKdPxmxList" :key="pxIndex" class="px-item">
						<!-- 品项基本信息 -->
						<div class="px-basic-info">
							<div class="px-item-header">
								<span class="px-item-title">品项 {{ pxIndex + 1 }}</span>
							</div>
							<div class="px-basic-fields">
								<div class="px-field">
									<label>品项名称</label>
									<span class="px-value">{{ px.pxmc || '无' }}</span>
								</div>
								<div class="px-field">
									<label>总价</label>
									<span class="px-value amount">{{ formatAmount(px.actualPrice) }}</span>
								</div>
								<div class="px-field">
									<label>数量</label>
									<span class="px-value">{{ px.projectNumber || '无' }}</span>
								</div>
								<div class="px-field">
									<label>单价</label>
									<span class="px-value amount">{{ formatAmount(px.pxjg) }}</span>
								</div>
								<div class="px-field">
									<label>类型</label>
									<span class="px-value">{{ px.sourceType || '无' }}</span>
								</div>
								<div class="px-field">
									<label>备注</label>
									<span class="px-value">{{ px.remark || '无' }}</span>
								</div>
							</div>
						</div>

						<!-- 健康师业绩 -->
						<div class="px-staff-section">
							<div class="px-staff-header">
								<span class="px-staff-title">健康师业绩</span>
							</div>
							<div class="px-staff-list" v-if="px.lqKdJksyjList.length>0">
								<div v-for="(jks, jksIndex) in px.lqKdJksyjList" :key="jksIndex" class="px-staff-row">
									<div class="px-staff-item">
										<span class="staff-name">{{ jks.jksxm || '无' }}</span>
										<span class="staff-amount">{{ formatAmount(jks.jksyj) }}</span>
									</div>
								</div>
							</div>
							<div class="px-staff-tip" v-if="px.lqKdJksyjList.length===0">
								<span>暂无</span>
							</div>
						</div>

						<!-- 科技部老师业绩 -->
						<div class="px-staff-section" >
							<div class="px-staff-header">
								<span class="px-staff-title">科技部老师业绩</span>
							</div>
							<div class="px-staff-list" v-if="px.lqKdKjbsyjList.length>0">
								<div v-for="(kjb, kjbIndex) in px.lqKdKjbsyjList" :key="kjbIndex" class="px-staff-row">
									<div class="px-staff-item">
										<span class="staff-name">{{ kjb.kjblsxm || '无' }}</span>
										<span class="staff-amount">{{ formatAmount(kjb.kjblsyj) }}</span>
									</div>
								</div>
							</div>
							<div class="px-staff-tip" v-if="px.lqKdKjbsyjList.length===0">
								<span>暂无</span>
							</div>
						</div>
					</div>
				</div>
			</el-card>
			<!-- 储扣明细信息卡片 -->
			<el-card class="info-card" shadow="hover" v-if="dataForm.lqKdDeductList && dataForm.lqKdDeductList.length > 0">
				<div slot="header" class="card-header">
					<i class="el-icon-discount"></i>
					<span class="card-title">储扣明细</span>
				</div>
				<div class="deduct-list-container">
					<div v-for="(deduct, index) in dataForm.lqKdDeductList" :key="index" class="deduct-item">
						<div class="deduct-header">
							<span class="deduct-name">{{ deduct.itemName || '未知品项' }}</span>
							<span class="deduct-type">{{ deduct.deductType || '品项' }}</span>
						</div>
						<div class="deduct-details">
							<div class="deduct-detail-item">
								<label class="deduct-label">数量:</label>
								<span class="deduct-value">{{ deduct.projectNumber || 1 }}</span>
							</div>
							<div class="deduct-detail-item">
								<label class="deduct-label">单价:</label>
								<span class="deduct-value amount">¥{{ deduct.unitPrice || 0 }}</span>
							</div>
							<div class="deduct-detail-item">
								<label class="deduct-label">总价:</label>
								<span class="deduct-value amount">¥{{ deduct.amount || 0 }}</span>
							</div>
						</div>
						<div class="deduct-info" v-if="deduct.RemainingCount">
							<div class="deduct-info-item">
								<label class="deduct-info-label">剩余数量:</label>
								<span class="deduct-info-value">{{ deduct.RemainingCount }}</span>
							</div>
						</div>
					</div>
				</div>
			</el-card>
			<!-- 其他信息卡片 -->
			<el-card class="info-card" shadow="hover">
				<div slot="header" class="card-header">
					<i class="el-icon-document"></i>
					<span class="card-title">其他信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="24">
						<div class="info-item">
							<label class="info-label">简介：</label>
							<div class="info-value text-content">{{ dataForm.jj || '无' }}</div>
						</div>
					</el-col>
					<el-col :span="24">
						<div class="info-item">
							<label class="info-label">备注：</label>
							<div class="info-value text-content">{{ dataForm.bz || '无' }}</div>
						</div>
					</el-col>
					<el-col :span="24" v-if="dataForm.isEffective != '1' && dataForm.cancelRefRemarks">
						<div class="info-item">
							<label class="info-label">作废备注：</label>
							<div class="info-value text-content">{{ dataForm.cancelRefRemarks || '无' }}</div>
						</div>
					</el-col>
					<el-col :span="24" v-if="dataForm.hyqz && dataForm.hyqz.length > 0">
						<div class="info-item">
							<label class="info-label">会员签字：</label>
							<div class="file-list">
								<div v-for="(file, index) in dataForm.hyqz" :key="index" class="file-item">
									<el-image 
										style="width: 100px; height: 100px"
										:src="baseUrl + file.url" 
										:preview-src-list="[baseUrl + file.url]">
									</el-image>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="24" v-if="dataForm.scwj && dataForm.scwj.length > 0">
						<div class="info-item">
							<label class="info-label">收据文件：</label>
							<div class="file-list">
								<div v-for="(file, index) in dataForm.scwj" :key="index" class="file-item">
									<el-image 
										style="width: 100px; height: 100px"
										:src="baseUrl + file.url" 
										:preview-src-list="[baseUrl + file.url]">
									</el-image>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="24" v-if="dataForm.f_FileUrl && dataForm.f_FileUrl.length > 0">
						<div class="info-item">
							<label class="info-label">方案其他文件：</label>
							<div class="file-list">
								<div v-for="(file, index) in dataForm.f_FileUrl" :key="index" class="file-item">
									<el-image 
										style="width: 100px; height: 100px"
										:src="baseUrl + file.url" 
										:preview-src-list="[baseUrl + file.url]">
									</el-image>
								</div>
							</div>
						</div>
					</el-col>
					
				</el-row>
			</el-card>
		</div>
		
		<!-- <span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">关 闭</el-button>
			<el-button type="primary" icon="el-icon-edit" @click="editRecord">编 辑</el-button>
		</span> -->
	</el-dialog>
</template>

<script>
import request from '@/utils/request'
import { previewDataInterface } from '@/api/systemData/dataInterface'

export default {
	name: 'LqKdKdjlbDetail',
	props: [],
	data() {
		return {
			baseUrl: process.env.VUE_APP_IMG_API,
			loading: false,
			visible: false,
			dataForm: {
				id: '',
				kdhy: undefined,
				kdhyc: undefined,
				kdhysjh: undefined,
				djmd: undefined,
				jsj: undefined,
				kdrq: undefined,
				gjlx: undefined,
				hgjg: undefined,
				zdyj: undefined,
				sfyj: undefined,
				qk: undefined,
				ckfs: undefined,
				ckmx: undefined,
				fkfs: undefined,
				fkyy: undefined,
				fkpd: undefined,
				khly: undefined,
				tjr: undefined,
				sfskdd: undefined,
				sfck: '否',
				jj: undefined,
				scwj: [],
				hyqz: [],
				bz: undefined,
				lqKdPxmxList: [],
				jksyj: undefined,
				kjblsyj: undefined,
				pxxx: undefined,
				lqKdKdjlbDeductList: [],
				f_FileUrl: []
			},
			// 选项数据
			djmdOptions: [],
			fkyyOptions: [],
			hgjgOptions: []
		}
	},
	created() {
		this.loadOptions()
	},
	mounted() {
	},
	methods: {
		// 初始化弹窗
		init(id) {
			this.dataForm.id = id || 0
			this.visible = true
			this.$nextTick(() => {
				if (this.dataForm.id) {
					this.getDetail(this.dataForm.id)
				}
			})
		},
		// 获取详情数据
		getDetail(id) {
			this.loading = true
			request({
				url: '/api/Extend/LqKdKdjlb/' + id,
				method: 'get'
			}).then(res => {
				if (res.code === 200) {
					this.dataForm = res.data
					// 处理文件数据
					if (!this.dataForm.scwj) this.dataForm.scwj = []
					if (!this.dataForm.hyqz) this.dataForm.hyqz = []
					if (this.dataForm.F_FIleUrl) {
						this.dataForm.f_FileUrl = JSON.parse(this.dataForm.F_FIleUrl)
					}
					if (!this.dataForm.f_FileUrl) this.dataForm.f_FileUrl = []
				} else {
					this.$message.error(res.msg || '获取详情失败')
				}
			}).catch(err => {
				console.error('获取详情失败:', err)
				this.$message.error('获取详情失败')
			}).finally(() => {
				this.loading = false
			})
		},
		// 加载选项数据
		loadOptions() {
			// 加载门店选项
			previewDataInterface('730960205902251269').then(res => {
				this.djmdOptions = res.data || []
			})
			// 加载医院选项
			previewDataInterface('733898797075137797').then(res => {
				this.fkyyOptions = res.data || []
			})
			// 加载合作机构选项
			previewDataInterface('733896629660157189').then(res => {
				this.hgjgOptions = res.data || []
			})
		},
		// 获取门店名称
		getStoreName(storeId) {
			const store = this.djmdOptions.find(item => item.id === storeId)
			return store ? store.fullName : '无'
		},
		// 获取医院名称
		getHospitalName(hospitalId) {
			const hospital = this.fkyyOptions.find(item => item.id === hospitalId)
			return hospital ? hospital.fullName : '无'
		},
		// 获取合作机构名称
		getCoopOrgName(orgId) {
			const org = this.hgjgOptions.find(item => item.id === orgId)
			return org ? org.fullName : '无'
		},
		// 格式化日期
		formatDate(date) {
			if (!date) return '无'
			const d = new Date(date)
			const year = d.getFullYear()
			const month = String(d.getMonth() + 1).padStart(2, '0')
			const day = String(d.getDate()).padStart(2, '0')
			return `${year}-${month}-${day}`
		},
		// 格式化金额
		formatAmount(amount) {
			if (!amount || amount === '' || amount === 'undefined') return '0.00元'
			const num = parseFloat(amount)
			return isNaN(num) ? '0.00元' : `${num.toFixed(2)}元`
		},
		// 预览文件
		previewFile(file) {
			if (file.url) {
				window.open(this.baseUrl + file.url, '_blank')
			} else {
				this.$message.warning('文件链接不存在')
			}
		},
		// 编辑记录
		editRecord() {
			this.visible = false
			this.$emit('edit', this.dataForm.id)
		},
		// 关闭弹窗
		handleClose() {
			this.visible = false
			this.$emit('refresh')
		}
	}
}
</script>

<style scoped>
/* 详情内容 */
.detail-content {
	max-height: 70vh;
	overflow-y: auto;
	padding: 0 10px;
}

/* 信息卡片 */
.info-card {
	margin-bottom: 20px;
	border-radius: 8px;
	overflow: hidden;
}

.card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #303133;
}

.card-header i {
	font-size: 18px;
	color: #409EFF;
}

.card-title {
	font-size: 16px;
	font-weight: 600;
}

/* 信息项 */
.info-item {
	margin-bottom: 16px;
}

.info-label {
	display: inline-block;
	/* min-width: 100px; */
	font-weight: 500;
	color: #606266;
	margin-right: 8px;
}

.info-value {
	color: #303133;
	font-size: 14px;
}

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

.info-value.text-content {
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
	margin-top: 4px;
}

/* 品项列表容器 */
.px-list-container {
	width: 100%;
}

/* 品项项 */
.px-item {
	margin-bottom: 24px;
	border: 1px solid #e4e7ed;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* 品项基本信息 */
.px-basic-info {
	background: #f8f9fa;
	padding: 20px;
	border-bottom: 1px solid #e4e7ed;
}

.px-item-header {
	margin-bottom: 18px;
}

.px-item-title {
	font-size: 16px;
	font-weight: 600;
	color: #303133;
}

.px-basic-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-end;
}

.px-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 140px;
}

.px-field label {
	font-size: 13px;
	color: #606266;
	font-weight: 500;
	white-space: nowrap;
	margin-bottom: 2px;
}

.px-value {
	font-size: 14px;
	color: #303133;
}

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

/* 人员业绩区域 */
.px-staff-section {
	padding: 18px 20px;
	border-bottom: 1px solid #e4e7ed;
}

.px-staff-section:last-child {
	border-bottom: none;
}

.px-staff-header {
	margin-bottom: 12px;
}

.px-staff-title {
	font-size: 14px;
	font-weight: 600;
	color: #409EFF;
}

.px-staff-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.px-staff-row {
	width: 100%;
}

.px-staff-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border: 1px solid #e4e7ed;
	border-radius: 6px;
	background: #fafafa;
}

.staff-name {
	font-size: 14px;
	color: #303133;
	font-weight: 500;
}

.staff-amount {
	font-size: 14px;
	color: #E6A23C;
	font-weight: 600;
}

/* 储扣明细列表 */
.deduct-list-container {
	width: 100%;
}

.deduct-item {
	margin-bottom: 20px;
	border: 1px solid #e4e7ed;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.deduct-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	background: #f8f9fa;
	border-bottom: 1px solid #e4e7ed;
}

.deduct-name {
	font-size: 16px;
	font-weight: 600;
	color: #303133;
}

.deduct-type {
	font-size: 14px;
	color: #409EFF;
	background: #ecf5ff;
	padding: 4px 12px;
	border-radius: 12px;
	border: 1px solid #b3d8ff;
}

.deduct-details {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 20px;
	align-items: center;
}

.deduct-detail-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 120px;
}

.deduct-label {
	font-size: 13px;
	color: #606266;
	font-weight: 500;
}

.deduct-value {
	font-size: 14px;
	color: #303133;
}

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

.deduct-info {
	padding: 12px 20px;
	background: #f0f9ff;
	border-top: 1px solid #e4e7ed;
}

.deduct-info-item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.deduct-info-label {
	font-size: 13px;
	color: #606266;
	font-weight: 500;
}

.deduct-info-value {
	font-size: 14px;
	color: #67C23A;
	font-weight: 600;
}

/* 文件列表 */
.file-list {
	display: flex;
}

.file-item {
	margin-top: 20px;
	width: 100px;
	height: 100px;
	margin-left: 20px;
}

/* 弹窗底部按钮 */
.dialog-footer {
	text-align: right;
	padding: 20px 0;
}

.dialog-footer .el-button {
	margin-left: 10px;
}

/* 响应式布局 */
@media (max-width: 768px) {
	.detail-content {
		max-height: 60vh;
		padding: 0 5px;
	}

	.px-basic-fields {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.px-field {
		width: 100%;
		min-width: auto;
	}

	.px-staff-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.info-item {
		margin-bottom: 12px;
	}

	.info-label {
		/* min-width: 80px; */
		font-size: 13px;
	}

	.deduct-details {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.deduct-detail-item {
		width: 100%;
		min-width: auto;
	}

	.deduct-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}
</style>