crm-app-vue3/pages/addClue/index.vue

<template>
	<view class="follow_wrap">
		<u-navbar placeholder :autoBack="true" :title="title" @rightClick="handleNavSaveClick">
	<!-- 		<view class="u-nav-slot left_btn" slot="left">
				<text class="close_btn"  @click="handleClose">重置</text>
			</view> -->
			<view class="u-nav-slot" slot="right">
				保存
			</view>
		</u-navbar>
		<view class="follow_form_wrap">
			<u--form labelPosition="left" labelWidth="100" :model="form" :rules="rules" ref="form" class="form_wrap"
				:errorType="'toast'">
				<u-form-item label="粘贴识别" borderBottom>
					<u--textarea v-model="recognitionContent" placeholder='电话：15099998888
姓名：卡地亚萧邦
来源：广点通
运营：小小
归属：南京麒麟分公司
快速录入页面增加运营字段识别' confirmType="done" height="120" :maxlength="-1" @blur='handleRecognition'>
					</u--textarea>
				</u-form-item>
				
				<u-form-item label="姓名" prop="name" borderBottom class="form_required">
					<u--input v-model="form.name" disabledColor="#ffffff" border="none" placeholder="请输入姓名"></u--input>
				</u-form-item>
				
				<u-form-item label="电话" prop="telephone" borderBottom class="form_required">
					<u--input v-model="form.telephone" disabledColor="#ffffff" border="none" placeholder="请输入电话"></u--input>
				</u-form-item>
				
				<u-form-item label="运营人" prop="clueOperationName" borderBottom @click="handleShowclueOperation" class="form_required">
					<u--input v-model="form.clueOperationName" disabled style='pointer-events: none !important'
						disabledColor="#ffffff" placeholder="点击选择" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label='来源' prop='appNameLabel' class="form_required" @click="handleShowclueAppName" borderBottom>
					<u--input v-model="form.appNameLabel" disabled style='pointer-events: none !important'
						disabledColor="#ffffff" placeholder="点击选择" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label='归属机构' prop='deptName' class="form_required" @click="handleShowclueDept" borderBottom>
					<u--input v-model="form.deptName" disabled style='pointer-events: none !important'
						disabledColor="#ffffff" placeholder="点击选择" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label="归属人" prop="clueOwnerName" borderBottom @click="handleShowclueOwner" borderBottom>
					<u--input v-model="form.clueOwnerName" disabled style='pointer-events: none !important'
						disabledColor="#ffffff" placeholder="点击选择" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				
				<u-form-item label="性别" prop="genderTypeCode" borderBottom>
					<ld-select :list="genderTypeCodeDict" label-key="dictLabel" value-key="dictValue" placeholder="请选择性别"
						v-model="form.genderTypeCode" :border="false"></ld-select>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label="年龄" prop="age" borderBottom>
					<u--input v-model.number="form.age" disabledColor="#ffffff" border="none" placeholder="请输入年龄"></u--input>
				</u-form-item>
				
				<u-form-item label="微信" prop="weixin" borderBottom>
					<u--input v-model="form.weixin" disabledColor="#ffffff" border="none" placeholder="请输入微信"></u--input>
				</u-form-item>
				
				<u-form-item label="详情地址" prop="address" borderBottom>
					<u--textarea v-model="form.address" placeholder="请输入详情地址" count confirmType="done">
					</u--textarea>
				</u-form-item>
				
				<u-form-item label="备注" prop="remark" borderBottom>
					<u--textarea v-model="form.remark" placeholder="请输入备注" count confirmType="done">
					</u--textarea>
				</u-form-item>
				
				<u-form-item label="QQ号" prop="qq" borderBottom>
					<u--input v-model="form.qq" disabledColor="#ffffff" border="none" placeholder="请输入QQ号"></u--input>
				</u-form-item>
				
				<u-form-item label="邮箱" prop="email" borderBottom>
					<u--input v-model="form.email" disabledColor="#ffffff" border="none" placeholder="请输入邮箱"></u--input>
				</u-form-item>
				
				<u-form-item label="手动填写地域" prop="email" borderBottom>
					<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
						<view class="province">
							<template v-if="form.manualProvince">
								<u--input :value="form.manualProvince + '/' + form.manualCity + '/' + form.manualArea" placeholder="点击选择" readonly suffixIcon="arrow-right" suffixIconStyle="color : #c0c4cc"></u--input>
							</template>
							<template v-else>
								<u--input placeholder="点击选择" readonly suffixIcon="arrow-right" suffixIconStyle="color : #c0c4cc"></u--input>
							</template>
						</view>
					</pick-regions>
				</u-form-item>
				
				<u-form-item label="广告计划ID" prop="adId" borderBottom>
					<u--input v-model="form.adId" disabledColor="#ffffff" border="none" placeholder="请输入广告计划ID"></u--input>
				</u-form-item>
					  
			</u--form>
		</view>
		
		<ba-tree-picker :selectParent="false" v-if="clueOwnerListData.length > 0" ref="clueOwner" :multiple='false'
			@select-change="clueOwnerSeletchang" border title="归属人" :localdata="clueOwnerListData" valueKey="id" textKey="label"
			childrenKey="children" :selectedValues="form.clueOwnerId" :personNames="form.clueOwnerName" />
			
		<ba-tree-picker :selectParent="false" v-if="clueOperationListData.length > 0" ref="clueOperation" :multiple='false'
			@select-change="clueOperationSeletchang" border title="运营人" :localdata="clueOperationListData" valueKey="id" textKey="label"
			childrenKey="children" :selectedValues="form.clueOperationId" :personNames="form.clueOperationName" />
			
		<ba-tree-picker :selectParent="true" v-if="dictCascadeData.length > 0" ref="appName" :multiple='false'
				@select-change="appNameSeletchang" border title="来源" :localdata="dictCascadeData" valueKey="id" textKey="name"
				childrenKey="children" :selectedValues="form.appName" :personNames="form.appNameLabel" />
		
		<ba-tree-picker :selectParent="true" v-if="deptList.length > 0" ref="dept" :multiple='false'
				@select-change="deptSeletchang" border title="归属机构" :localdata="deptList" valueKey="deptId" textKey="deptName"
				childrenKey="children" :selectedValues="form.deptId" :personNames="form.deptName" />
			
	</view>
</template>

<script>
	const columnProps = [
	  {
	    prop : "name",
	    label : "姓名",
	  },
	  {
	    prop : "telephone",
	    label : "电话",
	  },
	  {
	    prop : "clueOperationName",
	    label : "运营",
	  },
	  {
	    prop : "appName",
	    label : "来源",
	  },
	  {
	    prop : "deptName",
	    label : "归属",
	  }
	];
	import ldSelect from '@/components/ld-select/ld-select.vue'
	import {
		filterCustomerManager,
		handleTree,
		isChinese
	} from '@/utils/util';
	export default {
		data() {
			return {
	
				recognitionContent: "",
	
				defaultRegion: ['广东省', '广州市', '番禺区'],
	
				clueOwnerListData: [],
				clueOperationListData : [],
				deptList: [],
				dictCascadeData: [],
				genderTypeCodeDict: [],
				originalDictCascadeData : [],
				originaDeptList : [],
	
				title: "新建线索",
	
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					telephone: {
						type: 'string',
						required: true,
						message: '请输入电话',
						trigger: ['blur', 'change']
					},
					clueOperationName: {
						type: 'string',
						required: true,
						message: '请选择运营人',
						trigger: ['blur', 'change']
					},
					appName: {
						type: 'string',
						required: true,
						message: '请选择来源',
						trigger: ['blur', 'change']
					},
					deptName: {
						type: 'string',
						required: true,
						message: '请选择归属机构',
						trigger: ['blur', 'change']
					},
				},
				form: {
					manualAddressCode: '',
					manualProvince: '',
					manualCity: '',
					manualArea: '',
					name: '',
					telephone: '',
					genderTypeCode: '',
					age: '',
					weixin: '',
					address: '',
					remark: '',
					qq: '',
					email: '',
					adId: '',
					appName: undefined,
					appNameLabel: undefined,
					province: undefined,
					city: undefined,
					area: undefined,
					clueOperationId: undefined,
					clueOperationName: undefined,
					clueOwnerId: undefined,
					clueOwnerName: undefined,
					deptName: undefined,
					deptId: undefined,
				}
			}
		},
		methods: {
			async handleRecognition() {
				if(!this.recognitionContent){
					return;
				}
				try{
					// 电话：15099998888
					// 姓名：卡地亚萧邦
					// 来源：广点通
					// 运营：yxx
					// 归属：集团总部
					const splitStr = "：";
					// 避免用错符号，直接转换一下
					const lines = this.recognitionContent.replace(/:/g, splitStr).split('\n');
					lines.forEach(line => {
						const [key, value] = line.split(splitStr);
						const column = columnProps.find(v => key.trim() === v.label);
						if (column) {
							const {
								prop
							} = column;
							this.form[prop] = value?.trim();
						}
					});
						
					// 来源 归属机构 运营人 需要找id
					const {
						appName,
						deptName,
						clueOperationName
					} = this.form;
						
					if (appName) {
						let dictList = this.originalDictCascadeData;
						let appNameDict = dictList.find(v => v.name === appName);
						if (appNameDict) {
							this.form.appName = appNameDict.id;
							this.form.appNameLabel = appNameDict.name;
						} else {
							uni.$u.toast(appName + "当前来源未配置，请重新选择");
						}
					}
					
					if (deptName) {
						let deptList = this.originaDeptList;
						let dept = deptList.find(v => v.deptName === deptName);
						if (dept) {
							this.form.deptId = dept.deptId;
						} else {
							uni.$u.toast(deptName + "找不到对应的机构");
						}
					}
					
					if(clueOperationName){
					  // 没有现成的数据 请求接口
					  const { data } =  await uni.$u.api.getIdByName({ clueOperationName : clueOperationName});
					  const { clueOperationId } = data;
					  this.form.clueOperationId = clueOperationId;
					}
				}catch(e){
					uni.$u.toast("文本识别异常");
				}
			},
			// 获取选择的地区
			handleGetRegion(region) {
				const {
					0: provinceData,
					1: cityData,
					2: areaData
				} = region;
				this.form.manualProvince = provinceData.name;
				this.form.manualCity = cityData.name;
				this.form.manualArea = areaData.name;
				this.form.manualAddressCode = provinceData.name + cityData.name + areaData.name;
			},
			handleShowclueDept() {
				this.$refs.dept._show();
			},
			handleShowclueAppName() {
				this.$refs.appName._show();
			},
			handleShowclueOperation() {
				this.$refs.clueOperation._show();
			},
			handleShowclueOwner() {
				this.$refs.clueOwner._show();
			},
			appNameSeletchang(ids, names) {
				this.form.appName = ids[0];
				this.form.appNameLabel = names[0];
			},
			clueOperationSeletchang(ids, names) {
				this.form.clueOperationId = ids[0];
				this.form.clueOperationName = names[0];
			},
			clueOwnerSeletchang(ids, names) {
				this.form.clueOwnerId = ids[0];
				this.form.clueOwnerName = names[0];
			},
			deptSeletchang(ids, names) {
				this.form.deptId = ids[0];
				this.form.deptName = names[0];
			},
			// 返回
			handleClose() {
				this.$refs.form.resetFields();
				this.form.manualProvince = undefined;
				this.form.manualCity = undefined;
				this.form.manualArea = undefined;
				this.form.manualAddressCode = undefined;
				this.recognitionContent = undefined;
			},
			// 保存
			handleNavSaveClick() {
				this.$refs.form.validate().then(async () => {
					await uni.$u.api.addClueMainInfo(this.form);
					uni.$u.toast("保存成功");
					this.handleClose();
				})
			},
			async handleOption() {
				// 获取人员
				uni.$u.api.getDeptOwner({ excludeDeptIds : [100,369,378,356] }).then(res => {
					this.clueOwnerListData = filterCustomerManager(res.data);
				});
				
				// 获取人员
				uni.$u.api.getDeptCustomerByOrg({ deptId : 369 }).then(res => {
					this.clueOperationListData = filterCustomerManager(res.data);
				});
	
				uni.$u.api.getDictCascadeData().then(({
					data
				}) => {
					this.originalDictCascadeData = data;
					this.dictCascadeData = handleTree(data, 'id');
				});
	
				uni.$u.api.selectAllDeptList({
					isDept: 2
				}).then(({
					data
				}) => {
					this.originaDeptList = data;
					this.deptList = handleTree(data, 'deptId');
				});
	
				this.$getDicts('sys_user_sex').then(res => {
					this.genderTypeCodeDict = res;
				});
			},
	
		},
		onLoad(option) {
			this.handleOption();
		}
	}
</script>

<style lang="scss">
	@import "@/static/follow/index.scss";
</style>