antissoft / lvqianmeiye_ERP

  <template>

  	<el-dialog :title="!dataForm.id ? '新建客户信息' : isDetail ? '客户信息详情' : '编辑客户信息'" :close-on-click-modal="false"

  		:visible.sync="visible" class="NCC-dialog NCC-dialog_center customer-form-dialog" lock-scroll width="1200px">

  		<el-row :gutter="20" class="compact-form">

  			<el-form ref="elForm" :model="dataForm" size="mini" label-width="100px" label-position="right"
  				:disabled="!!isDetail" :rules="rules">

  				<el-col :span="24">
  					<div class="form-section-title">基本信息</div>
  				</el-col>

  				<el-col :span="6">
  					<el-form-item label="客户名称" prop="khmc" required>

  						<el-input v-model="dataForm.khmc" placeholder="请输入客户姓名" clearable :style='{ "width": "100%" }'>

  						</el-input>
  					</el-form-item>
  				</el-col>
  				<el-col :span="6">
  					<el-form-item label="手机号" prop="sjh" required>

  						<el-input v-model="dataForm.sjh" placeholder="请输入手机号" clearable :style='{ "width": "100%" }'>

  						</el-input>
  					</el-form-item>
  				</el-col>
  				<el-col :span="6">
  					<el-form-item label="档案号" prop="dah">

  						<el-input v-model="dataForm.dah" placeholder="请输入档案号" clearable :style='{ "width": "100%" }'>

  						</el-input>
  					</el-form-item>
  				</el-col>
  				<el-col :span="6">
  					<el-form-item label="性别" prop="xb">

  						<el-select v-model="dataForm.xb" placeholder="请选择性别" clearable :style='{ "width": "100%" }'>
  							<el-option v-for="(item, index) in xbOptions" :key="index" :label="item.fullName"
  								:value="item.id"></el-option>

  						</el-select>
  					</el-form-item>
  				</el-col>

  				<el-col :span="24">
  					<div class="form-section-title">生日信息</div>
  				</el-col>
  				<el-col :span="6" class="birthday-field">
  					<el-form-item label="阳历生日" prop="yanglsr">
  						<el-date-picker v-model="dataForm.yanglsr" placeholder="请选择阳历生日" clearable
  							:style='{ "width": "100%" }' type='date' format="yyyy-MM-dd" value-format="timestamp"
  							@change="onYanglsrChange">

  						</el-date-picker>
  					</el-form-item>
  				</el-col>

  				<el-col :span="6" class="birthday-field">
  					<el-form-item label="阴历生日" prop="yinlsr" class="yinlsr-form-item">
  						<div class="yinlsr-selects">
  							<el-select v-model="yinlsrMonth" placeholder="月" clearable
  								@change="onYinlsrSelectChange">
  								<el-option v-for="item in lunarMonthOptions" :key="item.value" :label="item.label" :value="item.value" />
  							</el-select>
  							<el-select v-model="yinlsrDay" placeholder="日" clearable
  								@change="onYinlsrSelectChange">
  								<el-option v-for="item in lunarDayOptions" :key="item.value" :label="item.label" :value="item.value" />
  							</el-select>
  						</div>
  						<div v-if="dataForm.yanglsr" class="form-tip">选阳历可自动填入</div>
  					</el-form-item>
  				</el-col>
  				<el-col :span="6" class="birthday-field">
  					<el-form-item label="过生日类型" prop="birthdayType">
  						<el-select v-model="dataForm.birthdayType" placeholder="请选择" :style='{ "width": "100%" }'>
  							<el-option label="阳历生日" :value="0" />
  							<el-option label="农历生日" :value="1" />
  						</el-select>
  					</el-form-item>
  				</el-col>
  				<el-col :span="24">
  					<div class="form-section-title">门店与顾问</div>
  				</el-col>

  				<el-col :span="6">

  					<el-form-item label="归属门店" prop="gsmd">
  						<el-select v-model="dataForm.gsmd" placeholder="请选择" clearable :style='{"width":"100%"}' filterable >
  							<el-option v-for="(item, index) in gsmdOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>

  						</el-select>
  					</el-form-item>
  				</el-col>
  				<el-col :span="6">

  					<el-form-item label="客户类型" prop="khlx">
  						<el-select disabled v-model="dataForm.khlx" placeholder="请选择客户类型" clearable :style='{ "width": "100%" }'>
  							<el-option v-for="(item, index) in khlxOptions" :key="index" :label="item.fullName"

  								:value="item.id"></el-option>

  						</el-select>
  					</el-form-item>
  				</el-col>
  				<el-col :span="6">

  					<el-form-item label="健康师" prop="mainHealthUser">
  						<el-select v-model="dataForm.mainHealthUser" placeholder="请选择" clearable :style='{"width":"100%"}' filterable >
  							<el-option v-for="(item, index) in mrsOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>

  						</el-select>
  					</el-form-item>
  				</el-col>
  				<el-col :span="6">

  					<el-form-item label="负责顾问" prop="subHealthUser">
  						<el-select v-model="dataForm.subHealthUser" placeholder="请选择" clearable :style='{"width":"100%"}' filterable >
  							<el-option v-for="(item, index) in fzgwOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>

  						</el-select>
  					</el-form-item>
  				</el-col>
  				<el-col :span="6">

  					<el-form-item label="进店渠道" prop="jdqd">
  						<el-select v-model="dataForm.jdqd" placeholder="请选择" clearable :style='{"width":"100%"}' filterable >
  							<el-option v-for="(item, index) in jdqdOptions" :key="index" :label="item.fullName" :value="item.id" :disabled="item.disabled" ></el-option>

  						</el-select>
  					</el-form-item>
  				</el-col>
  				<el-col :span="6">

  					<el-form-item label="推荐人" prop="tjr">
  						<!-- <el-input v-model="dataForm.tjr" placeholder="请输入推荐人" clearable :style='{ "width": "100%" }'>
  						</el-input> -->
  						<el-select
  							:style='{"width":"100%"}'
  							v-model="dataForm.tjr"
  							filterable
  							remote
  							reserve-keyword
  							placeholder="请输入关键词"
  							:remote-method="remoteMethod"
  							:loading="kdhyLoading">
  							<el-option
  							v-for="item in kdhyOptions"
  							:key="item.value"
  							:label="item.label"
  							:value="item.value">
  							</el-option>
  						</el-select>

  					</el-form-item>
  				</el-col>

  				<el-col :span="24">
  					<div class="form-section-title">其他信息</div>
  				</el-col>

  				<el-col :span="6" v-if="dataForm.id">
  					<el-form-item label="拓客人员" prop="expandUserName">
  						<el-input  v-model="dataForm.expandUserName" placeholder="无拓客人员" clearable :style='{ "width": "100%" }' readonly>
  						</el-input>

  					</el-form-item>
  				</el-col>
  				<el-col :span="6">
  					<el-form-item label="注册时间" prop="zcsj">

  						<el-date-picker v-model="dataForm.zcsj" 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="12">
  					<el-form-item label="联系地址" prop="lxdz">
  						<el-input v-model="dataForm.lxdz" placeholder="请输入详细联系地址" clearable
  							:style='{ "width": "100%" }'>

  						</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": 6 }'>

  						</el-input>
  					</el-form-item>
  				</el-col>
  

  			</el-form>

  		</el-row>
  		<span slot="footer" class="dialog-footer">
  			<el-button @click="visible = false">取 消</el-button>

  			<el-button @click="resetForm" v-if="!isDetail">重 置</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'
  export default {
  	components: {},
  	props: [],
  	data() {
  		return {
  			loading: false,

  			kdhyLoading: false,

  			visible: false,
  			isDetail: false,
  			dataForm: {

  				id: undefined,
  				khmc: undefined,
  				sjh: undefined,
  				dah: undefined,
  				xb: undefined,
  				gzhzt: undefined,
  				wxnc: undefined,
  				wxxcxzt: undefined,
  				zjdlsj: undefined,
  				khmqgs: undefined,
  				gsmd: undefined,
  				zcsj: undefined,

  				khlx: '1',

  				khjd: undefined,
  				khxf: [],
  				xfpc: undefined,
  				tjr: undefined,

  				subHealthUser: undefined,
  				mainHealthUser: undefined,

  				jdqd: undefined,
  				lxdz: undefined,
  				bz: undefined,
  				yanglsr: undefined,
  				yinlsr: undefined,

  				birthdayType: 0,

  				ml: undefined,

  				expandUser: undefined,
  				expandUserName: undefined,

  			},
  			rules: {
  				khmc: [
  					{ required: true, message: '请输入客户名称', trigger: 'blur' }
  				],
  				sjh: [
  					{ required: true, message: '请输入手机号', trigger: 'blur' },
  					{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }

  				],
  				gsmd: [
  					{ required: true, message: '请选择归属门店', trigger: 'change' }
  				],
  				khlx: [
  					{ required: true, message: '请选择客户类型', trigger: 'change' }
  				],
  				jdqd: [
  					{ required: true, message: '请选择进店渠道', trigger: 'change' }
  				],
  				tjr: [
  					{ required: true, message: '请选择推荐人', trigger: 'change' }

  				]
  			},
  			xbOptions: [{ "fullName": "男", "id": "男" }, { "fullName": "女", "id": "女" }],
  			gzhztOptions: [{ "fullName": "已绑定", "id": "已绑定" }, { "fullName": "未绑定", "id": "未绑定" }],
  			wxxcxztOptions: [{ "fullName": "已绑定", "id": "已绑定" }, { "fullName": "未绑定", "id": "未绑定" }],
  			khmqgsOptions: [{ "fullName": "会员", "id": "会员" }, { "fullName": "线索池", "id": "线索池" }, { "fullName": "会员-归档", "id": "会员-归档" }],

  			khlxOptions: [],

  			khjdOptions: [{ "fullName": "体验", "id": "体验" }, { "fullName": "有效", "id": "有效" }, { "fullName": "沉睡", "id": "沉睡" }, { "fullName": "流失", "id": "流失" }],
  			khxfOptions: [{ "fullName": "D客", "id": "D客" }, { "fullName": "有效", "id": "有效" }],
  			xfpcOptions: [{ "fullName": "高频", "id": "高频" }, { "fullName": "低频", "id": "低频" }],

  			jdqdOptions:[{ "fullName": "19.9卡", "id": "19.9卡","disabled": true }, { "fullName": "自然到店", "id": "自然到店" },{ "fullName": "嘉宾", "id": "嘉宾" },{ "fullName": "售后", "id": "售后" },{ "fullName": "直播间", "id": "直播间" },{ "fullName": "转店顾客", "id": "转店顾客" },{ "fullName": "联联", "id": "联联" },{ "fullName": "美团", "id": "美团" },{ "fullName": "三方拓客", "id": "三方拓客" },{ "fullName": "其他", "id": "其他" },{ "fullName": "补录", "id": "补录" },{ "fullName": "抖音", "id": "抖音" }],

  			gsmdOptions: [],
  			fzgwOptions: [],
  			mrsOptions: [],
  			kdhyOptions: [],

  			yinlsrMonth: '',
  			yinlsrDay: '',
  			lunarMonthOptions: [
  				{ label: '正月', value: '正月' }, { label: '二月', value: '二月' }, { label: '三月', value: '三月' },
  				{ label: '四月', value: '四月' }, { label: '五月', value: '五月' }, { label: '六月', value: '六月' },
  				{ label: '七月', value: '七月' }, { label: '八月', value: '八月' }, { label: '九月', value: '九月' },
  				{ label: '十月', value: '十月' }, { label: '冬月', value: '冬月' }, { label: '腊月', value: '腊月' },
  				{ label: '闰正月', value: '闰正月' }, { label: '闰二月', value: '闰二月' }, { label: '闰三月', value: '闰三月' },
  				{ label: '闰四月', value: '闰四月' }, { label: '闰五月', value: '闰五月' }, { label: '闰六月', value: '闰六月' },
  				{ label: '闰七月', value: '闰七月' }, { label: '闰八月', value: '闰八月' }, { label: '闰九月', value: '闰九月' },
  				{ label: '闰十月', value: '闰十月' }, { label: '闰冬月', value: '闰冬月' }, { label: '闰腊月', value: '闰腊月' }
  			],
  			lunarDayOptions: [
  				{ label: '初一', value: '初一' }, { label: '初二', value: '初二' }, { label: '初三', value: '初三' },
  				{ label: '初四', value: '初四' }, { label: '初五', value: '初五' }, { label: '初六', value: '初六' },
  				{ label: '初七', value: '初七' }, { label: '初八', value: '初八' }, { label: '初九', value: '初九' },
  				{ label: '初十', value: '初十' }, { label: '十一', value: '十一' }, { label: '十二', value: '十二' },
  				{ label: '十三', value: '十三' }, { label: '十四', value: '十四' }, { label: '十五', value: '十五' },
  				{ label: '十六', value: '十六' }, { label: '十七', value: '十七' }, { label: '十八', value: '十八' },
  				{ label: '十九', value: '十九' }, { label: '二十', value: '二十' }, { label: '廿一', value: '廿一' },
  				{ label: '廿二', value: '廿二' }, { label: '廿三', value: '廿三' }, { label: '廿四', value: '廿四' },
  				{ label: '廿五', value: '廿五' }, { label: '廿六', value: '廿六' }, { label: '廿七', value: '廿七' },
  				{ label: '廿八', value: '廿八' }, { label: '廿九', value: '廿九' }, { label: '三十', value: '三十' }
  			]

  		}
  	},
  	computed: {},

  	watch: {
  		'dataForm.gsmd': {
  			handler(newVal) {
  				// 当归属门店改变时，重新获取负责顾问和美容师列表
  				if (newVal) {
  					this.getfzgwOptions();
  					this.getmrsOptions();
  				} else {
  					// 如果清空门店，也清空相关选项
  					this.fzgwOptions = [];
  					this.mrsOptions = [];
  					this.dataForm.subHealthUser = '';
  					this.dataForm.mainHealthUser = '';
  				}
  			}
  		},
  		'dataForm.jdqd': {
  			handler(newVal) {
  				// 当进店渠道改变时，检查是否需要设置推荐人为必填
  				this.updateTjrRules(newVal);
  			}
  		}
  	},

  	created() {

  		this.getgsmdOptions();
  		this.getkhlxOptions();
  		

  	},
  	mounted() {
  	},
  	methods: {

  		// 更新推荐人验证规则

  		onYanglsrChange(val) {
  			if (val) {
  				const d = new Date(val)
  				const dateStr = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
  				request({
  					url: `/api/Extend/LqKhxx/solar-to-lunar`,
  					method: 'GET',
  					params: { date: dateStr }
  				}).then(res => {
  					const inner = res.data && res.data.data
  					if (res.code === 200 && inner && inner.yinlsr) {
  						this.dataForm.yinlsr = inner.yinlsr
  						this.parseYinlsrToSelect(inner.yinlsr)
  					}
  				})
  			} else {
  				this.dataForm.yinlsr = undefined
  				this.yinlsrMonth = ''
  				this.yinlsrDay = ''
  			}
  		},
  		onYinlsrSelectChange() {
  			if (this.yinlsrMonth && this.yinlsrDay) {
  				this.dataForm.yinlsr = this.yinlsrMonth + this.yinlsrDay
  			} else {
  				this.dataForm.yinlsr = undefined
  			}
  		},
  		parseYinlsrToSelect(yinlsr) {
  			if (!yinlsr || typeof yinlsr !== 'string') {
  				this.yinlsrMonth = ''
  				this.yinlsrDay = ''
  				return
  			}
  			const months = ['正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月',
  				'闰正月', '闰二月', '闰三月', '闰四月', '闰五月', '闰六月', '闰七月', '闰八月', '闰九月', '闰十月', '闰冬月', '闰腊月']
  			const days = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
  				'十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
  				'廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十']
  			let month = ''
  			let day = ''
  			for (const m of months) {
  				if (yinlsr.startsWith(m)) {
  					month = m
  					const rest = yinlsr.slice(m.length)
  					for (const d of days) {
  						if (rest === d || rest.startsWith(d)) {
  							day = d
  							break
  						}
  					}
  					break
  				}
  			}
  			this.yinlsrMonth = month
  			this.yinlsrDay = day
  		},

  		updateTjrRules(jdqd) {
  			console.log(jdqd)
  			// 移除现有的推荐人验证规则
  			delete this.rules.tjr;
  			
  			// 如果进店渠道是"嘉宾"，则推荐人为必填
  			if (jdqd === '嘉宾') {
  				this.rules.tjr = [
  					{ required: true, message: '进店渠道为嘉宾时，推荐人必须选择', trigger: 'change' }
  				];
  			}
  			this.$forceUpdate();
  		},
  		getkdhyOptions(tjr) {
  			request({
  				url: '/api/Extend/LqKhxx?page=1&pageSize=20&id='+(tjr ? tjr : ''),
  				method: 'GET',
  			}).then((res) => {
  				if (res.code == 200 && res.data.list.length > 0) {
  					this.kdhyOptions = res.data.list.map(item => ({
  						value: item.id,
  						label: `${item.khmc}`+'('+item.sjh+')',
  					}));
  				} else {
  					this.kdhyOptions = [];
  				}
  				console.error(this.kdhyOptions)
  			})
  		},
  		async remoteMethod(query){
  			if (query !== '') {
  				this.kdhyLoading = true;
  				await request({
  					url: '/api/Extend/LqKhxx?page=1&pageSize=20&keyword='+query,
  					method: 'GET',
  				}).then((res) => {
  					this.kdhyLoading = false;
  					if (res.code == 200 && res.data.list.length > 0) {
  						this.kdhyOptions = res.data.list.map(item => ({
  							value: item.id,
  							label: `${item.khmc}`+'('+item.sjh+')',
  						}));
  					} else {
  						this.kdhyOptions = [];
  					}
  					console.error(this.kdhyOptions)
  				})
  			
  			} else {
  				// this.kdhyOptions = [];
  			}
  		},
  		getgsmdOptions() {
  			previewDataInterface('730960205902251269').then(res => {
  				this.gsmdOptions = res.data
  			});
  		},
  		getkhlxOptions() {
  			request({
  				url: '/api/Extend/lqkhxx/deduct-types',
  				method: 'GET',
  			}).then((res) => {
  				if (res.code == 200 && res.data) {
  					this.khlxOptions = res.data.map(item => ({
  						fullName: item.Name,
  						id: item.Value +'',
  						value: item.Value+'',
  						label: item.Name,
  					}));
  				} else {
  					this.khlxOptions = [];
  				}
  			}).catch((err) => {
  				console.error('获取客户类型失败:', err);
  				this.khlxOptions = [];
  			});
  		},
  		getfzgwOptions() {
  			// 如果没有选择归属门店，不获取数据
  			if (!this.dataForm.gsmd) {
  				this.fzgwOptions = [];
  				return;
  			}
  			
  			request({
  				url: `/api/Extend/user?page=1&pageSize=1000&mdid=${this.dataForm.gsmd}&gw=健康师`,
  				method: 'GET',
  			}).then((res) => {
  				if (res.code == 200 && res.data.list.length > 0) {
  					this.fzgwOptions = 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,
  					}));
  				} else {
  					this.fzgwOptions = [];
  				}
  			})
  		},
  		getmrsOptions() {
  			// 如果没有选择归属门店，不获取数据
  			if (!this.dataForm.gsmd) {
  				this.mrsOptions = [];
  				return;
  			}
  			
  			request({
  				url: `/api/Extend/user?page=1&pageSize=1000&mdid=${this.dataForm.gsmd}&gw=健康师`,
  				method: 'GET',
  			}).then((res) => {
  				if (res.code == 200 && res.data.list.length > 0) {
  					this.mrsOptions = 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,
  					}));
  				} else {
  					this.mrsOptions = [];
  				}
  			})
  		},

  		goBack() {
  			this.$emit('refresh')
  		},
  		init(id, isDetail) {
  			this.dataForm.id = id || 0;
  			this.visible = true;
  			this.isDetail = isDetail || false;
  			this.$nextTick(() => {
  				this.$refs['elForm'].resetFields();
  				if (this.dataForm.id) {
  					request({
  						url: '/api/Extend/LqKhxx/' + this.dataForm.id,
  						method: 'get'
  					}).then(res => {
  						this.dataForm = res.data;

  						this.dataForm.khxf = this.dataForm.khxf?this.dataForm.khxf.split(','):[];

  						this.parseYinlsrToSelect(this.dataForm.yinlsr);

  						// 编辑时，根据归属门店加载负责顾问和美容师选项
  						if (this.dataForm.gsmd) {
  							this.getfzgwOptions();
  							this.getmrsOptions();
  						}
  						
  						// 编辑时，检查进店渠道并设置推荐人验证规则
  						if (this.dataForm.jdqd) {
  							this.updateTjrRules(this.dataForm.jdqd);
  						}
  						this.getkdhyOptions(this.dataForm.tjr);

  					})

  				} else{
  					this.getkdhyOptions();
  					this.dataForm = {
  						id: undefined,
  						khmc: undefined,
  						sjh: undefined,
  						dah: undefined,
  						xb: undefined,
  						gzhzt: undefined,
  						wxnc: undefined,
  						wxxcxzt: undefined,
  						zjdlsj: undefined,
  						khmqgs: undefined,
  						gsmd: undefined,
  						zcsj: undefined,
  						khlx: '1',
  						khjd: undefined,
  						khxf: [],
  						xfpc: undefined,
  						tjr: undefined,
  						subHealthUser: undefined,
  						mainHealthUser: undefined,
  						jdqd: undefined,
  						lxdz: undefined,
  						bz: undefined,
  						yanglsr: undefined,
  						yinlsr: undefined,

  						birthdayType: 0,

  						ml: undefined,
  						expandUser: undefined,
  						expandUserName: undefined,
  					}

  					this.yinlsrMonth = '';
  					this.yinlsrDay = '';

  				}
  			})

  		},

  		resetForm() {
  			this.$confirm('确定要重置表单吗？', '提示', {
  				confirmButtonText: '确定',
  				cancelButtonText: '取消',
  				type: 'warning'
  			}).then(() => {
  				this.$refs['elForm'].resetFields();

  				this.yinlsrMonth = '';
  				this.yinlsrDay = '';

  				this.$message.success('表单已重置');
  			}).catch(() => {
  				// 用户取消
  			});

  		},

  		formatNumber(field) {
  			// 移除千分位分隔符，只保留数字和小数点
  			let value = this.dataForm[field].toString().replace(/,/g, '');
  			// 确保是有效的数字格式
  			if (!/^\d*\.?\d*$/.test(value)) {
  				value = value.replace(/[^\d.]/g, '');
  			}
  			// 更新原始值
  			this.dataForm[field] = value;
  		},
  		dataFormSubmit() {
  			this.$refs['elForm'].validate((valid) => {
  				if (valid) {

  					this.dataForm.khxf = this.dataForm.khxf?this.dataForm.khxf.join(','):'';

  					if (!this.dataForm.id) {
  						request({
  							url: `/api/Extend/LqKhxx`,
  							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/LqKhxx/' + 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)
  								}
  							})

  						})
  					}

  				}

  			})
  		},

  	}

  }

  </script>

  
  <style scoped>

  /* 现代化弹窗：圆角、柔和阴影、过渡 */
  .customer-form-dialog >>> .el-dialog {
  	border-radius: 12px;
  	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
  	overflow: hidden;
  	transition: box-shadow 0.2s ease;
  }
  
  .customer-form-dialog >>> .el-dialog__header {
  	padding: 18px 20px;
  	border-bottom: 1px solid #f0f2f5;
  	background: #fafbfc;
  }
  
  .customer-form-dialog >>> .el-dialog__body {
  	padding: 20px 24px;
  	background: #fff;
  }
  
  .customer-form-dialog >>> .el-dialog__footer {
  	padding: 16px 24px;
  	border-top: 1px solid #f0f2f5;
  	background: #fafbfc;
  }
  
  /* 分组标题：柔和现代风格，保持主色 */

  .form-section-title {
  	display: flex;
  	align-items: center;

  	margin: 20px 0 12px 0;
  	padding: 10px 14px;
  	background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);

  	color: white;

  	border-radius: 8px;

  	font-size: 14px;
  	font-weight: 600;

  	letter-spacing: 0.3px;
  	box-shadow: 0 2px 8px rgba(64, 158, 255, 0.25);
  	transition: box-shadow 0.2s ease;
  }
  
  .form-section-title:first-of-type {
  	margin-top: 0;

  }
  
  .form-section-title i {
  	margin-right: 8px;
  	font-size: 18px;
  }
  
  .el-form-item {
  	margin-bottom: 12px;

  	transition: opacity 0.15s ease;

  }
  
  .compact-form .el-form-item {

  	margin-bottom: 10px;
  }
  
  /* 输入框 focus 过渡 */
  .compact-form .el-input__inner,
  .compact-form .el-textarea__inner {
  	transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  .form-tip {
  	font-size: 12px;
  	color: #909399;
  	margin-top: 4px;
  	line-height: 1.2;
  }
  
  /* 生日信息行：阳历/阴历顶部对齐（内容可能多行），过生日类型居中对齐 */
  .birthday-field .el-form-item {
  	align-items: flex-start;
  }
  
  .birthday-field .el-form-item__label {
  	white-space: nowrap;
  }
  
  /* 阴历生日：月日并排不换行 */
  .yinlsr-selects {
  	display: flex;
  	flex-wrap: nowrap;
  	gap: 8px;
  	width: 100%;
  }
  
  .yinlsr-selects .el-select {
  	flex: 1;
  	min-width: 0;

  }
  
  .el-input-group__append {
  	background: #f5f7fa;
  	border-color: #dcdfe6;
  	color: #606266;
  }
  

  /* 底部按钮区：现代化间距与过渡 */

  .dialog-footer {
  	text-align: right;

  	padding: 16px 0 0;

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

  	transition: all 0.2s ease;
  }
  
  .dialog-footer .el-button--primary {
  	box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
  }
  
  .dialog-footer .el-button--primary:hover {
  	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);

  }
  
  /* 必填字段标识 */
  .el-form-item.is-required .el-form-item__label::before {
  	content: '*';
  	color: #f56c6c;
  	margin-right: 4px;
  }

  .el-col {
  	margin-bottom: 10px;
  }

  /* 响应式 */

  @media (max-width: 768px) {
  	.el-col {
  		margin-bottom: 10px;
  	}
  
  	.form-section-title {
  		font-size: 14px;
  		padding: 8px 12px;
  	}
  }
  </style>