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="20" class="form-layout">
			<el-form ref="elForm" :model="dataForm" size="mini" label-width="100px" label-position="right" :disabled="!!isDetail" :rules="rules">
				<!-- 基本信息 -->
				<el-col :span="8" v-if="false">
					<el-form-item label="退卡编号" prop="id">
						<el-input v-model="dataForm.id" placeholder="系统自动生成" clearable readonly :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="门店" prop="md" required>
						<el-select v-model="dataForm.md" placeholder="请选择" clearable :style='{"width":"100%"}' filterable @change="handleMdChange">
							<el-option v-for="(item, index) in mdOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8" v-if="false">
					<el-form-item label="门店编号" prop="mcbh">
						<el-input v-model="dataForm.mcbh" placeholder="自动填充" clearable readonly :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8" v-if="false">
					<el-form-item label="门店名称" prop="mdmc">
						<el-input v-model="dataForm.mdmc" placeholder="自动填充" clearable readonly :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				
				<!-- 会员信息 -->
				<el-col :span="8">
					<el-form-item label="会员" prop="hy" required>
						<el-select v-model="dataForm.hy" placeholder="请选择" clearable :style='{"width":"100%"}' filterable @change="handleHyChange">
							<el-option v-for="(item, index) in hyOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8" v-if="false">
					<el-form-item label="会员姓名" prop="hyxm">
						<el-input v-model="dataForm.hyxm" placeholder="自动填充" clearable readonly :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8" v-if="false">
					<el-form-item label="会员账号" prop="hyzh">
						<el-input v-model="dataForm.hyzh" placeholder="自动填充" clearable readonly :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				
				<!-- 健康师信息 -->
				<el-col :span="8">
					<el-form-item label="健康师" prop="jks">
						<user-select v-model="dataForm.jks" placeholder="请选择" clearable @change="handleJksChange">
						</user-select>
					</el-form-item>
				</el-col>
				<el-col :span="8" v-if="false">
					<el-form-item label="健康师账号" prop="jkszh">
						<el-input v-model="dataForm.jkszh" placeholder="自动填充" clearable readonly :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8" v-if="false">
					<el-form-item label="健康师姓名" prop="jksxm">
						<el-input v-model="dataForm.jksxm" placeholder="自动填充" clearable readonly :style='{"width":"100%"}' >
						</el-input>
					</el-form-item>
				</el-col>
				
				<!-- 费用信息 -->
				<el-col :span="8">
					<el-form-item label="退款金额" prop="tkje" required>
						<el-input v-model="dataForm.tkje" placeholder="自动计算" clearable readonly :style='{"width":"100%"}'>
							<template slot="append">元</template>
						</el-input>
					</el-form-item>
				</el-col>
				
				<!-- 备注 -->
				<el-col :span="24">
					<el-form-item label="备注" prop="bz">
						<el-input v-model="dataForm.bz" placeholder="请输入备注信息" show-word-limit :style='{"width":"100%"}' type='textarea' :autosize='{"minRows":3,"maxRows":3}' >
						</el-input>
					</el-form-item>
				</el-col>
					<el-col :span="24" v-if="false" >
						<el-form-item label="退卡品项" prop="tkpx">
							<el-input v-model="dataForm.tkpx" placeholder="请输入" clearable :style='{"width":"100%"}' >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="false" >
						<el-form-item label="退卡时间" prop="tksj">
							<el-input v-model="dataForm.tksj" placeholder="系统自动生成" readonly >
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="24" v-if="false" >
						<el-form-item label="退卡人" prop="tkr">
							<el-input v-model="dataForm.tkr" placeholder="系统自动生成" readonly >
							</el-input>
						</el-form-item>
					</el-col>
				<!-- 退卡品项明细 -->
				<el-col :span="24">
					<el-form-item label-width="0">
						<div class="table-header">
							<span class="table-title">退卡品项明细</span>
							<el-button v-if="!dataForm.id" type="warning" size="mini" icon="el-icon-plus" @click="addHandleLqHytkMxEntityList()">新增品项</el-button>
						</div>
						
						<!-- 品项列表 -->
						<div class="px-list-container">
							<div v-for="(px, pxIndex) in dataForm.lqHytkMxList" :key="pxIndex" class="px-item">
								<!-- 品项基本信息 -->
								<div class="px-basic-info">
									<div class="px-item-header">
										<span class="px-item-title">品项明细</span>
										<el-button v-if="!dataForm.id" size="mini" type="danger" icon="el-icon-delete" @click="handleDelLqHytkMxEntityList(pxIndex)">删除</el-button>
									</div>
									
									<!-- 品项选择 -->
									<div class="px-select-row">
										<el-select v-model="px.px" placeholder="请选择品项" clearable filterable @change="handlePxChange(pxIndex, px)" style="width: 200px;">
											<el-option v-for="(item, index) in pxOptions" :key="index" :label="item.fullName" :value="item.id" :disabled="item.disabled"></el-option>
										</el-select>
									</div>
									
									<!-- 品项详细信息 -->
									<div class="px-detail-info" v-if="px.px">
										<div class="px-detail-row">
											<div class="px-detail-item">
												<span class="px-detail-label">品项名称：</span>
												<span class="px-detail-value">{{ px.mc || '未选择' }}</span>
											</div>
											<div class="px-detail-item">
												<span class="px-detail-label">单价：</span>
												<span class="px-detail-value">¥{{ px.pxjg || 0 }}</span>
											</div>
											<div class="px-detail-item">
												<span class="px-detail-label">剩余次数：</span>
												<span class="px-detail-value">{{ px.sycs || 0 }}</span>
											</div>
										</div>
										
										<!-- 退卡信息输入 -->
										<div class="px-consumption-row">
											<div class="px-field">
												<label>退款金额：</label>
												<el-input v-model="px.tkje" placeholder="请输入退款金额" size="mini" style="width: 150px;" @input="formatPxNumber(pxIndex, 'tkje')">
													<template slot="append">元</template>
												</el-input>
											</div>
											<div class="px-field">
												<label>退卡次数：</label>
												<el-input-number v-model="px.cs" :min="1" :max="px.sycs || 999" placeholder="次数" size="mini" style="width: 120px;" @change="onCsChange"></el-input-number>
											</div>
											<div class="px-field">
												<label>单次耗卡：</label>
												<el-input v-model="px.dchk" placeholder="单次耗卡" size="mini" style="width: 120px;" @input="formatPxNumber(pxIndex, 'dchk')">
													<template slot="append">次</template>
												</el-input>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</el-form-item>
				</el-col>
				</el-form>
		</el-row>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</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 { getInfo } from '@/api/user'
	export default {
		components: {},
		props: [],
		data() {
			return {
				loading: false,
				visible: false,
				isDetail: false,
				dataForm: {
					id:'',
					id:undefined,
					md:undefined,
					mdbh:undefined,
					mdmc:undefined,
					hy:undefined,
					hyzh:undefined,
					hymc:undefined,
					gklx:undefined,
					jks:undefined,
					jkszh:undefined,
					jksxm:undefined,
					jsjId:undefined,
					jsjName:undefined,
					bz:undefined,
					tkje:undefined,
					tkpx:undefined,
					tksj:undefined,
					tkr:undefined,
					lqHytkMxList:[],
				},
				rules: {
					md: [
						{ required: true, message: '请选择门店', trigger: 'change' }
					],
					hy: [
						{ required: true, message: '请选择会员', trigger: 'change' }
					],
					tkje: [
						{ required: true, message: '请输入退款金额', trigger: 'blur' },
						{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
					]
				},
				mdOptions : [],
				hyOptions : [],
				pxOptions : [],
				djmdOptions: [], // 门店选项（用于默认加载）
				jksOptions: [], // 健康师选项
				kjbOptions: [], // 科技部老师选项
			}
		},
		computed: {},
        watch: {},
        created() {
			this.gethyOptions();
			// 品项选项现在需要先选择会员后才能获取
		},
		mounted() {
        },
		methods: {
			// 门店选择变化处理
			handleMdChange(val) {
				const selectedMd = this.mdOptions.find(item => item.id === val);
				if (selectedMd) {
					this.dataForm.mdbh = selectedMd.mdbh || selectedMd.id;
					this.dataForm.mdmc = selectedMd.fullName;
					console.log('选择门店:', selectedMd);
					
					// 选择门店后，加载健康师和科技部老师选项
					this.getjksOptions();
					this.getkjbOptions();
				} else {
					this.dataForm.mdbh = '';
					this.dataForm.mdmc = '';
					this.jksOptions = [];
					this.kjbOptions = [];
				}
			},
			// 会员选择变化处理
			handleHyChange(val) {
				const selectedHy = this.hyOptions.find(item => item.id === val);
				if (selectedHy) {
					this.dataForm.hyzh = selectedHy.hyzh || selectedHy.id;
					this.dataForm.hymc = selectedHy.fullName;
					this.dataForm.gklx = selectedHy.gklx || '会员';
					console.log('选择会员:', selectedHy);
					
					// 选择会员后，获取该会员的剩余品项
					this.getpxOptions();
				} else {
					this.dataForm.hyzh = '';
					this.dataForm.hymc = '';
					this.dataForm.gklx = '';
					this.pxOptions = []; // 清空品项选项
				}
			},
			// 健康师选择变化处理
			handleJksChange(val) {
				console.log('选择健康师:', val);
				if (val) {
					// 根据选择的健康师ID获取用户信息
					const selectedJks = this.jksOptions.find(item => item.id === val);
					if (selectedJks) {
						// 填充姓名和账号
						this.dataForm.jksxm = selectedJks.fullName;
						this.dataForm.jkszh = selectedJks.userName || selectedJks.account || selectedJks.id;
						
						// 获取金三角信息
						this.getJsjInfoByUserId(val, (jsjId, jsjName) => {
							this.dataForm.jsjName = jsjName;
							this.dataForm.jsjId = jsjId;
						});
					}
				} else {
					// 清空相关字段
					this.dataForm.jksxm = '';
					this.dataForm.jkszh = '';
					this.dataForm.jsjId = '';
				}
			},
			// 品项选择变化处理
			handlePxChange(index, row) {
				if (row.px) {
					const selectedPx = this.pxOptions.find(item => item.id === row.px);
					if (selectedPx) {
						request({
							url: `/api/Extend/LqXmzl/${selectedPx.id}`,
							method: 'GET',
						}).then((res) => {
							let qt2 = res.data.qt2 || "";
							let sgf = res.data.sgf || 0;
							row.mc = selectedPx.fullName;
							row.pxmc = selectedPx.fullName;
							row.pxjg = selectedPx.ItemPrice || 0;
							row.qt2 = qt2 || "";
							row.yxf = selectedPx.ConsumedCount || 0; // 已消费
							row.zgm = selectedPx.TotalPurchased || 1; // 总购买
							row.ly = selectedPx.sourceType || "购买"; // 来源
							row.sycs = selectedPx.RemainingCount || 0; // 剩余次数
							row.tkje = row.pxjg || 0; // 默认退款金额等于单价
							row.cs = 1; // 默认退卡次数为1
							row.dchk = 1; // 默认单次耗卡为1
							row.sgf = sgf;
							
							console.log('选择品项:', selectedPx.fullName, 'qt2:', selectedPx.qt2, '剩余数量:', selectedPx.RemainingCount);
							
							// 重新计算总退款金额
							this.calculateTotalAmount();
						})
					}
				} else {
					// 清空品项时，重置所有相关字段
					row.mc = '';
					row.pxmc = '';
					row.pxjg = 0;
					row.qt2 = '';
					row.yxf = 0;
					row.zgm = 1;
					row.ly = '购买';
					row.sycs = 0;
					row.tkje = 0;
					row.cs = 1;
					row.dchk = 1;
					row.sgf = 0;
					
					// 重新计算总退款金额
					this.calculateTotalAmount();
				}
			},
			// 次数变化处理
			onCsChange() {
				// 重新计算总退款金额
				this.calculateTotalAmount();
			},
			// 计算总退款金额
			calculateTotalAmount() {
				let totalAmount = 0;
				this.dataForm.lqHytkMxList.forEach(px => {
					if (px.tkje) {
						totalAmount += parseFloat(px.tkje) || 0;
					}
				});
				this.dataForm.tkje = totalAmount.toFixed(2);
			},
			// 品项数字格式化
			formatPxNumber(index, field) {
				const px = this.dataForm.lqHytkMxList[index];
				if (px && px[field] !== undefined) {
					let value = px[field].toString().replace(/,/g, '');
					if (!/^\d*\.?\d*$/.test(value)) {
						value = value.replace(/[^\d.]/g, '');
					}
					px[field] = value;
					
					// 重新计算总退款金额
					this.calculateTotalAmount();
				}
			},
			getjksOptions() {
				if (!this.dataForm.md) {
					console.warn("请先选择门店");
					this.jksOptions = [];
					return;
				}
				
				request({
					url: `/api/Extend/user?page=1&pageSize=1000&mdid=${this.dataForm.md}&gw=健康师`,
					method: 'GET',
				}).then((res) => {
					if (res.code == 200 && res.data.list.length > 0) {
						this.jksOptions = res.data.list.map(item => ({
							fullName: item.realName || item.name || item.userName,
							id: item.id,
							value: item.id,
							label: item.realName || item.name || item.userName,
							jks: item.id,
							jksxm: item.realName || item.name || item.userName,
							jkszh: item.mobilePhone || item.account || item.userName
						}));
						console.log('获取健康师选项成功:', this.jksOptions);
					} else {
						this.jksOptions = [];
						console.warn('未找到健康师数据');
					}
				}).catch(err => {
					console.error('获取健康师选项失败:', err);
					this.jksOptions = [];
				});
			},
			// 根据用户ID获取金三角信息
			getJsjInfoByUserId(userId, callback) {
				request({
					url: `/api/Extend/lqycsdjsj/Actions/GetThisMonthJsjInfo?userId=${userId}`,
					method: 'GET',
				}).then((res) => {
					if (res.code === 200 && res.data) {
						// 假设返回的数据结构中有jsj_id字段
						const jsjId = res.data.jsjId;
						const jsjName = res.data.jsjName;

						if (callback) {
							callback(jsjId, jsjName);
						}
						console.log('获取金三角信息成功:', res.data);
					} else {
						console.warn('获取金三角信息失败:', res.msg);
						if (callback) {
							callback('');
						}
					}
				}).catch((err) => {
					console.error('获取金三角信息出错:', err);
					if (callback) {
						callback('');
					}
				});
			},
			gethyOptions(){
				previewDataInterface('730998109110273285').then(res => {
					this.hyOptions = res.data
				});
			},
			// 获取品项选项（从会员剩余品项API获取）
			async getpxOptions() {
				if (!this.dataForm.hy) {
					console.warn("请先选择会员");
					this.pxOptions = [];
					return;
				}

				try {
					const response = await request({
						url: `/api/Extend/lqkhxx/GetMemberRemainingItems?memberId=${this.dataForm.hy}`,
						method: 'GET',
					});

					if (response.code == 200 && response.data && response.data.RemainingItems) {
						this.pxOptions = response.data.RemainingItems.map(item => ({
							fullName: item.ItemName,
							id: item.ItemId,
							value: item.ItemId,
							label: item.ItemName,
							px: item.ItemId,
							pxmc: item.ItemName,
							pxjg: item.ItemPrice || 0,
							qt2: item.qt2 || "",
							RemainingCount: item.RemainingCount || 0,
							ItemPrice: item.ItemPrice || 0,
							sgf: 0,
							sourceType: item.SourceType || "购买",
							TotalPurchased: item.TotalPurchased || 0,
							ConsumedCount: item.ConsumedCount || 0
						}));
						console.log('获取会员剩余品项成功:', this.pxOptions);
					} else {
						console.warn("获取会员剩余品项失败，使用默认数据");
						this.pxOptions = [];
					}
				} catch (error) {
					console.error("获取会员剩余品项出错:", error);
					this.pxOptions = [];
				}
			},
			goBack() {
                this.$emit('refresh')
            },
			init(id, isDetail) {
				this.dataForm.id = id || 0;
                this.visible = true;
                this.isDetail = isDetail || false;
				this.dataForm.lqHytkMxList = [];
				this.$nextTick(() => {
					this.$refs['elForm'].resetFields();
					if (this.dataForm.id) {
						request({
							url: '/api/Extend/LqHytkHytk/' + this.dataForm.id,
							method: 'get'
						}).then(res =>{
							this.dataForm = res.data;
							console.log('编辑时获取的数据:', this.dataForm);
							console.log('品项列表:', this.dataForm.lqHytkMxList);
							
							// 重新计算总退款金额
							this.calculateTotalAmount();
						})
					} else{
						this.loadStoreDataAndSetDefault();
						// 初始化时计算总退款金额
						this.calculateTotalAmount();
					}
				})
			},
			dataFormSubmit() {
				this.$refs['elForm'].validate((valid) => {
                    if (valid) {
                        if (!this.dataForm.id) {
                            request({
                                url: `/api/Extend/LqHytkHytk`,
                                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/LqHytkHytk/' + 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)
                                    }
                                })
                            })
                        }
                    }
                })
			},
			// 获取科技部老师选项
			async getkjbOptions() {
				// 获取科技部老师选项数据 - 参考耗卡页面的实现
				await this.getKjbOptionsByOrganizeId();
			},
			// 根据门店ID获取科技部组织ID，再获取科技部老师列表
			async getKjbOptionsByOrganizeId() {
				if (!this.dataForm.md) {
					console.warn("请先选择门店");
					this.kjbOptions = [];
					return;
				}
				
				try {
					// 1. 先获取门店信息，获取科技部组织ID
					const storeResponse = await request({
						url: `/api/Extend/LqMdxx/${this.dataForm.md}`,
						method: 'GET',
					});
					
					let organizeId = "";
					if (storeResponse.code == 200 && storeResponse.data) {
						organizeId = storeResponse.data.kjb || "";
						console.log('获取到科技部组织ID:', organizeId);
					}
					
					if (!organizeId) {
						console.warn('未获取到科技部组织ID');
						this.kjbOptions = [];
						return;
					}
					
					// 2. 根据科技部组织ID获取科技部老师列表
					const userResponse = await request({
						url: `/api/Extend/user?page=1&pageSize=1000&organizeId=${organizeId}&gw=科技老师`,
						method: 'GET',
					});
					
					if (userResponse.code == 200 && userResponse.data && userResponse.data.list.length > 0) {
						this.kjbOptions = userResponse.data.list.map(item => ({
							fullName: item.realName || item.name || item.userName,
							id: item.id,
							value: item.id,
							label: item.realName || item.name || item.userName,
							kjbls: item.id,
							kjblsxm: item.realName || item.name || item.userName,
							kjblszh: item.mobilePhone || item.account || item.userName
						}));
						console.log('科技部老师列表:', this.kjbOptions);
					} else {
						console.warn('获取科技部老师列表失败');
						this.kjbOptions = [];
					}
				} catch (error) {
					console.error('获取科技部老师列表出错:', error);
					this.kjbOptions = [];
				}
			},
			loadStoreDataAndSetDefault() {
				console.log('开始加载门店数据和用户信息...');
				// 先加载门店数据
				this.loadStoreDataPromise().then(() => {
					// 门店数据加载完成后，获取用户信息
					return this.getCurrentUserStorePromise();
				}).then((userData) => {
					if (userData && userData.mdid) {
						const userStoreId = userData.mdid;
						console.log('用户门店ID:', userStoreId);
						console.log('门店选项列表:', this.djmdOptions);

						// 检查用户门店ID是否在门店列表中
						const matchingStore = this.djmdOptions.find(store => store.id === userStoreId);
						if (matchingStore) {
							this.dataForm.md = userStoreId;
							this.dataForm.mdmc = matchingStore.fullName;
							this.dataForm.mdbh = matchingStore.id;
							console.log('找到匹配的门店，设置默认门店ID:', userStoreId);
							console.log('匹配的门店信息:', matchingStore);
						} else {
							console.warn('用户门店ID在门店列表中未找到匹配项');
							console.log('用户门店ID:', userStoreId);
							console.log('可用门店ID列表:', this.djmdOptions.map(s => s.id));
						}
					} else {
						console.warn('用户数据中没有门店ID，无法设置默认值');
					}
					
					// 无论是否找到匹配门店，都尝试加载健康师和科技部老师选项
					if (this.dataForm.md) {
						this.getjksOptions();
						this.getkjbOptions();
					}
				}).catch(err => {
					console.error('加载数据失败:', err);
				});
			},
			loadStoreDataPromise() {
				// 使用原来的数据接口方式
				return previewDataInterface('730960205902251269').then(res => {
					console.log('门店API原始响应:', res);
					if (res.data && res.data.length > 0) {
						this.djmdOptions = res.data;
						this.mdOptions = res.data; // 同时设置门店选项
						console.log('门店数据加载成功:', this.djmdOptions);
						return res.data;
					} else {
						console.warn('门店数据为空');
						return [];
					}
				}).catch(err => {
					console.error('门店数据加载失败:', err);
					return [];
				});
			},
			getCurrentUserStorePromise() {
				return new Promise((resolve, reject) => {
					getInfo().then(res => {
						resolve(res.data.userInfo);
					}).catch(err => {
						console.error('获取当前用户信息失败:', err);
						reject(err);
					});
				});
			},
			addHandleLqHytkMxEntityList() {
				let item = {
					id: undefined,
					gltkbh: undefined,
					px: undefined,
					mc: undefined,
					pxmc: undefined,
					pxjg: 0,
					qt2: undefined,
					yxf: 0,
					zgm: 1,
					ly: '购买',
					sycs: 0,
					tkje: 0,
					cs: 1,
					dchk: 1,
					sgf: 0,
					fssj: undefined,
				}
				this.dataForm.lqHytkMxList.push(item);
				// 重新计算总退款金额
				this.calculateTotalAmount();
			},
			handleDelLqHytkMxEntityList(index) {
				this.dataForm.lqHytkMxList.splice(index, 1);
				// 重新计算总退款金额
				this.calculateTotalAmount();
			},
		}
	}
</script>

<style scoped>
/* 表单布局优化 */
.form-layout {
	margin: 0;
}

.form-layout .el-col {
	margin-bottom: 18px;
}

/* 表单行间距优化 */
.form-layout .el-form-item {
	margin-bottom: 0;
}

/* 表单项高度统一 */
.form-layout .el-form-item__content {
	line-height: 32px;
}

/* 表单项标签样式 */
.form-layout .el-form-item__label {
	line-height: 32px;
	padding-right: 12px;
	font-weight: 500;
}

/* 输入框高度统一 */
.form-layout .el-input__inner,
.form-layout .el-select .el-input__inner {
	height: 32px;
	line-height: 32px;
}

/* 表格标题样式 */
.table-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding: 12px 16px;
	background: #f5f7fa;
	border-radius: 6px;
	border-left: 4px solid #409EFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table-title {
	font-size: 15px;
	font-weight: 600;
	color: #303133;
}

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

/* 品项项 */
.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;
	transition: all 0.3s ease;
}

.px-item:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

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

.px-item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
}

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

/* 品项选择行 */
.px-select-row {
	margin-bottom: 15px;
}

/* 品项详细信息 */
.px-detail-info {
	background: #fff;
	padding: 15px;
	border-radius: 6px;
	border: 1px solid #e4e7ed;
	margin-bottom: 15px;
}

.px-detail-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 15px;
}

.px-detail-item {
	display: flex;
	align-items: center;
}

.px-detail-label {
	font-size: 14px;
	color: #606266;
	font-weight: 500;
	margin-right: 8px;
}

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

/* 退卡信息输入行 */
.px-consumption-row {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: flex-end;
}

.px-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.px-field label {
	font-size: 12px;
	color: #606266;
	font-weight: 500;
	white-space: nowrap;
}

/* 输入框组样式 */
.el-input-group__append {
	background: #f5f7fa;
	border-color: #dcdfe6;
	color: #606266;
}

/* 响应式布局 */
@media (max-width: 1200px) {
	.form-layout .el-col[class*="el-col-8"] {
		width: 50%;
		margin-bottom: 16px;
	}
}

@media (max-width: 768px) {
	.form-layout .el-col {
		margin-bottom: 12px;
	}

	.form-layout .el-col[class*="el-col-8"] {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 16px;
	}

	.px-consumption-row {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.px-field {
		width: 100%;
		min-width: auto;
	}
}
</style>