QianNiaoShop/pagesT/customer/AddCustomer.vue

<template>
	<view class="detail-view">
		<u-form label-width="140" :model="add_form" ref="uForm">
			<view class="form-model-view">
				<u-form-item required label="客户名称" prop="name"><u-input v-model="add_form.name" placeholder="请输入客户真实姓名" /></u-form-item>
				<u-form-item required label="登录账号" prop="mobile"><u-input v-model="add_form.mobile" type="number" placeholder="请输入客户手机号" /></u-form-item>
				<u-form-item required label="客户类型" prop="type">
					<u-input @click="goPage('/pagesT/customer/selCustomerType')" class="dis-input" disabled v-model="type_name" placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item label="账号状态" v-if="$accessCheck($Access.CustomerListUpdateCustomerStatus)">
					<view class="form-value">
						<u-switch style="transform: translateY(14rpx);" v-model="add_form.enableStatus" :active-value="5" :inactive-value="4" size="40"></u-switch>
					</view>
				</u-form-item>
			</view>
			<view class="form-model-view">
				<u-form-item label="联系人"><u-input v-model="add_form.contact.name" placeholder="请输入联系人" /></u-form-item>
				<u-form-item label="联系电话"><u-input v-model="add_form.contact.mobile" type="number" placeholder="请输入联系电话" /></u-form-item>
				<u-form-item label="所属区域">
					<u-input class="dis-input" @click="openSel('region_show')" v-model="region_name" disabled placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item label-position="top" label="详细地址"><u-input v-model="add_form.address" type="textarea" placeholder="请输入" /></u-form-item>
				<u-form-item label="所属商铺">
					<u-input @click="goPage('/pagesT/shop/selShop')" class="dis-input" v-model="shop_name" disabled placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item label="分拣区">
					<u-input class="dis-input" disabled @click="goPage('/pagesT/werahouse/selReservoir')" v-model="reservoir_name" placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
			</view>
			<view class="form-model-view">
				<u-form-item label="销售部门">
					<u-input @click="openSel('show_department')" v-model="department_name" class="dis-input" disabled placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item label="业务员">
					<u-input
						@click="goPage('/pagesT/staff/selStaff?departmentId=' + add_form.departmentId)"
						class="dis-input"
						disabled
						placeholder="请选择"
						v-model="add_form.salesManName"
					/>
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
			</view>
			<view class="form-model-view">
				<u-form-item label-position="top" label="营业执照">
					<upload :images="add_form.extend.license ? [add_form.extend.license] : []" @handleRemove="imgRemove" @uploadSuccess="uploadSuccess" />
				</u-form-item>
			</view>
			<view class="form-model-view">
				<u-form-item label="客户生日">
					<u-input class="dis-input" disabled @click="openSel('time_show')" v-model="birthday" placeholder="请选择" />
					<u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
				</u-form-item>
				<u-form-item label="备注" label-position="top"><u-input type="textarea" v-model="add_form.remark" /></u-form-item>
			</view>
		</u-form>
		<view class="detail-bottom"><view class="handel-btn" @click="submit">提交</view></view>
		<SelDeparment v-model="show_department" @confirm="departmentConfirm" @cancel="departmentCancel" />
		<RegionSel v-model="region_show" @confirm="regionConfirm" @cancel="regionCancel" />
		<u-picker @confirm="birthdayConfirm" mode="time" v-model="time_show"></u-picker>
	</view>
</template>

<script>
import upload from '@/components/qiniu/QiniuUpload.vue';
import SelDeparment from '@/components/SelDepartment.vue';
import RegionSel from '@/components/region/RegionSel.vue';
export default {
	components: { upload, SelDeparment, RegionSel },
	data() {
		return {
			region_show: false,
			time_show: false,
			show_department: false,
			shopData: '',
			staffData: '',
			reservoirData: '',
			customerTypeData: '',
			reservoir_name: '',
			shop_name: '',
			type_name: '',
			department_name: '',
			region_name: '',
			birthday: '',
			rules: {
				name: [
					{
						required: true,
						message: '请输入客户名称',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}
				],
				mobile: [
					{
						required: true,
						message: '请输入登录账号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}
				]
			},
			isEvidence: '', // 是否必填营业执照
			add_form: {
				tempSave: '',
				latitude: '',
				longitude: '',
				password: '',
				area: '',
				mobile: '',
				enableStatus: true, // 启用状态
				name: '',
				code: '',
				type: '',
				provinceCode: '',
				cityCode: '',
				districtCode: '',
				address: '',
				managerMobile: '',
				shopId: '', // 商铺的id
				departmentId: '', // 部门的id
				salesManId: '',
				salesManCode: '',
				salesManName: '',
				birthday: '',
				remark: '',
				reservoirId: '',
				extend: {
					license: ''
				},

				contact: {
					area: '',
					name: '',
					mobile: '',
					provinceCode: '',
					cityCode: '',
					districtCode: '',
					address: ''
				}
			},
			customer_id: ''
		};
	},
	watch: {
		reservoirData(val) {
			if (val) {
				this.add_form.reservoirId = val.id;
				this.reservoir_name = val.reservoirName;
			}
		},
		shopData(val) {
			if (val) {
				this.add_form.shopId = val.id;
				this.shop_name = val.name;
			}
		},
		customerTypeData(val) {
			if (val) {
				this.add_form.type = val.id;
				this.type_name = val.name;
				this.isEvidence = val.isEvidence;
			}
		},
		staffData(val) {
			if (val) {
				this.add_form.salesManId = val.id;
				this.add_form.salesManCode = val.staffCode;
				this.add_form.salesManName = val.staffName;
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.customer_id = options.id;
			uni.setNavigationBarTitle({
				title: '修改客户信息'
			});
			this.getCustomerInfo();
		}
	},
	methods: {
		getCustomerInfo() {
			this.$u.api.getCustomerInfo(this.customer_id).then(({ data }) => {
				this.department_name = data.departmentName;
				this.shop_name = data.shopName;
				this.type_name = data.customerType;
				this.reservoir_name = data.reservoirName;
				this.region_name = data.area.provinceName + data.area.cityName + data.area.districtName;
				this.birthday = data.birthday ? this.$u.timeFormat(data.birthday, 'yyyy-mm-dd') : '';
				this.add_form = {
					...data,
					enableStatus: data.enableStatus === 5,
					contact: data.contact[0],
					extend: data.extend || {
						license: ''
					}
				};
			});
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (!this.add_form.type) {
						this.$u.toast('请选择客户类型');
						return;
					}
					if (!this.$u.test.mobile(this.add_form.mobile)) {
						this.$u.toast('登录账号格式有误');
						return;
					}
					if (this.isEvidence === 5 && !this.add_form.extend.license) {
						this.$u.toast(`客户类型为【${this.type_name}】的客户必须【上传营业执照】`);
						return;
					}
					if (!this.customer_id) {
						this.$u.api
							.addCustomer({
								...this.add_form,
								enableStatus: this.add_form.enableStatus ? 5 : 4
							})
							.then(res => {
								this.$u.toast('新增成功');
								setTimeout(res => {
									uni.navigateBack();
								}, 1500);
							});
					} else {
						this.$u.api
							.editCustomer(this.customer_id, {
								...this.add_form,
								enableStatus: this.add_form.enableStatus ? 5 : 4
							})
							.then(res => {
								this.$u.toast('修改成功');
								setTimeout(res => {
									uni.navigateBack();
								}, 1500);
							});
					}
				}
			});
		},
		regionConfirm(val) {
			this.add_form.provinceCode = val[0].value;
			this.add_form.cityCode = val[1].value;
			this.add_form.districtCode = val[2].value;
			// 联系方式
			this.add_form.contact.provinceCode = val[0].value;
			this.add_form.contact.cityCode = val[1].value;
			this.add_form.contact.districtCode = val[2].value;
			let name = '';
			val.forEach(item => {
				name += item.label;
			});
			this.region_name = name;
		},
		regionCancel(val) {
			this.region_show = false;
		},
		departmentConfirm(val) {
			this.add_form.departmentId = val[val.length - 1].value;
			this.department_name = val[val.length - 1].label;
			this.add_form.salesManId = '';
			this.add_form.salesManCode = '';
			this.add_form.salesManName = '';
		},
		departmentCancel(val) {
			this.show_department = false;
		},
		openSel(key) {
			this[key] = true;
		},
		// 图片上传成功
		uploadSuccess(imgUrl) {
			this.add_form.extend.license = imgUrl;
		},
		//移除图片
		imgRemove(arr) {
			this.add_form.extend.license = '';
		},
		birthdayConfirm(val) {
			this.add_form.birthday = val.timestamp;
			this.birthday = val.year + '-' + val.month + '-' + val.day;
		}
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style></style>