antis-ncc-admin/src/views/lqKhxx/Form.vue

<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="compact-form">
			<el-form ref="elForm" :model="dataForm" size="mini" label-width="100px" label-position="right"
				:disabled="!!isDetail" :rules="rules">
				<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="6">
					<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">
						</el-date-picker>
					</el-form-item>
				</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="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,
				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": "其他" }],
			gsmdOptions: [],
			fzgwOptions: [],
			mrsOptions: [],
			kdhyOptions: [],
		}
	},
	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: {
		// 更新推荐人验证规则
		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(','):[];
						// 编辑时，根据归属门店加载负责顾问和美容师选项
						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,
						ml: undefined,
						expandUser: undefined,
						expandUserName: undefined,
					}
				}
			})
		},
		resetForm() {
			this.$confirm('确定要重置表单吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$refs['elForm'].resetFields();
				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>
.form-section-title {
	display: flex;
	align-items: center;
	margin: 15px 0 10px 0;
	padding: 8px 12px;
	background: #409EFF;
	color: white;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}
.form-section-title i {
	margin-right: 8px;
	font-size: 18px;
}
.el-form-item {
	margin-bottom: 12px;
}
.compact-form .el-form-item {
	margin-bottom: 8px;
}
.el-input-group__append {
	background: #f5f7fa;
	border-color: #dcdfe6;
	color: #606266;
}
.dialog-footer {
	text-align: right;
	padding: 20px 0;
}
.dialog-footer .el-button {
	margin-left: 10px;
}
/* 必填字段标识 */
.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>