aiot-app/pages/saleManage/contact/add.vue

<template>
	<view class="mainBox">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back"
			:title="this.form.id?'修改客户':'新建客户'" @clickLeft="back">
		</uni-nav-bar>
		<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
		<u-cell-group v-show='current==0'>
			<u-cell title="客户分类" arrow-direction="down">
				<u--input slot="value" placeholder="请选择" border="surround" v-model="form.categoryName"
					@click.native="showPicker"></u--input>
			</u-cell>
			<u-cell title="客户名称" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.name"></u--input>
			</u-cell>
			<u-cell title="客户代号" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.serialNo"></u--input>
			</u-cell>
			<u-cell title="客户简称" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.simpleName"></u--input>
			</u-cell>
			<u-cell title="法定代表人" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.legalPerson"></u--input>
			</u-cell>
			<u-cell title="注册资金" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.registeredCapital"></u--input>
			</u-cell>
			<u-cell title="授信额度" arrow-direction="down">
				<u--input type="number" slot="value" placeholder="请输入" border="surround"
					v-model="form.authorizationLimit"></u--input>
			</u-cell>
			<u-cell title="单位电话" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.phone"></u--input>
			</u-cell>
			<u-cell title="地址" arrow-direction="down">

				<uni-data-picker v-model="address" :map="{text:'label',value:'value'}" slot="value" placeholder="请选择地址"
					popup-title="请选择城市" :localdata="chinaData" @change="onchange">
				</uni-data-picker>
			</u-cell>
			<u-cell title="详细地址" arrow-direction="down">
				<u--textarea slot="value" placeholder="请输入" border="surround" v-model="form.address"></u--textarea>
			</u-cell>
			<u-cell title="统一社会信用代码" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround"
					v-model="form.unifiedSocialCreditCode"></u--input>
			</u-cell>
			<u-cell title="所属行业" arrow-direction="down">
				<uni-data-picker v-model="form.industry" :map="{text:'label',value:'value'}" slot="value"
					placeholder="请选择" :localdata="categoryData" @change="industryOnchange">
				</uni-data-picker>
			</u-cell>
			<u-cell title="营业类型" arrow-direction="down">

				<uni-data-picker v-model="form.companyCategoryId" slot="value" placeholder="请选择"
					:localdata="company_category">
				</uni-data-picker>
			</u-cell>
			<u-cell title="企业类型" arrow-direction="down">
				<uni-data-picker v-model="form.enterpriseTypeId" slot="value" placeholder="请选择"
					:localdata="enterprise_type">
				</uni-data-picker>
			</u-cell>

			<u-cell title="登记日期" arrow-direction="down">
				<uni-datetime-picker type="date" slot="value" v-model="form.registerDate">
				</uni-datetime-picker>
			</u-cell>
			<u-cell title="主营产品" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="form.mainProduct"></u--input>
			</u-cell>
			<u-cell title="级别" arrow-direction="down">
				<uni-data-picker v-model="form.level" slot="value" placeholder="请选择" :localdata="contact_level">
				</uni-data-picker>
			</u-cell>
			<u-cell title="结算方式" arrow-direction="down">
				<uni-data-picker v-model="otherForm.settlementMode" slot="value" placeholder="请选择"
					:localdata="settlement_mode">
				</uni-data-picker>
			</u-cell>
			<u-cell title="税率" arrow-direction="down">
				<u--input type="number" slot="value" placeholder="请输入" border="surround"
					v-model="otherForm.taxRate"></u--input>
			</u-cell>
			<u-cell title="折扣率" arrow-direction="down">
				<u--input type="number" slot="value" placeholder="请输入" border="surround"
					v-model="otherForm.discount"></u--input>
			</u-cell>
			<u-cell title="收件人" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="otherForm.sender"></u--input>
			</u-cell>
			<u-cell title="收件人电话" arrow-direction="down">
				<u--input slot="value" placeholder="请输入" border="surround" v-model="otherForm.senderPhone"></u--input>
			</u-cell>
			<u-cell title="收件人地址" arrow-direction="down">
				<uni-data-picker v-model="address1" :map="{text:'label',value:'value'}" slot="value" placeholder="请选择地址"
					popup-title="请选择城市" :localdata="chinaData" @change="onchange1">
				</uni-data-picker>
			</u-cell>


			<u-cell title="收件人详细地址" arrow-direction="down">
				<u--textarea slot="value" placeholder="请输入" border="surround" v-model="otherForm.address"></u--textarea>
			</u-cell>

			<u-cell title="经营范围" arrow-direction="down">
				<u--textarea slot="value" placeholder="请输入" border="surround"
					v-model="form.businessScope"></u--textarea>
			</u-cell>
			<u-cell title="营业执照附件" arrow-direction="down">
				<fileMain slot="value" v-model="form.businessLicenseFile"></fileMain>
			</u-cell>

			<u-cell title="备注" arrow-direction="down">
				<u--textarea slot="value" placeholder="请输入" border="surround" v-model="form.remark"></u--textarea>
			</u-cell>
		</u-cell-group>

		<bankList ref="bankListRef" v-show='current==1'></bankList>
		<linkList :contact_link_status="contact_link_status" ref="linkListRef" v-show='current==2'></linkList>

		<ba-tree-picker ref="treePicker" @select-change="selectChange" :multiple='true' :localdata="treeList" />
		<view class="footerButton">
			<u-button type="default" text="返回" @click="back"></u-button>
			<u-button type="primary" @click="save" text="保存"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import baTreePicker from "@/components/ba-tree-picker1/ba-tree-picker.vue"
	import fileMain from "@/pages/doc/index.vue"
	import bankList from "./components/bankList.vue"
	import linkList from "./components/linkList.vue"
	import {
		getTreeByPid
	} from "@/api/classifyManage/index.js"
	import {
		categoryData
	} from 'element-china-category-data';
	import {
		getByCode
	} from '@/api/pda/common.js'
	import {
		contactSave,
		contactDetail,
		getInfoByIds
	} from '@/api/saleManage/contact/index.js'
	const chinaData = require("@/static/json/regions-data.json")
	export default {
		components: {
			baTreePicker,
			bankList,
			linkList,
			fileMain
		},
		data() {
			return {
				list: ['基本信息', '银行信息', '联系人信息'],
				current: 0,
				chinaData,
				categoryData,
				categoryIdList: [],
				address: '',
				address1: '',
				categoryShow: false,
				form: {
					address: '',
					addressId: '',
					addressName: '',
					authorizationLimit: 0,
					businessLicenseFiles: [],
					businessLicenseFile: [],
					businessScope: '',
					categoryId: '',
					categoryName: '',
					companyCategoryId: '',
					companyCategoryName: '',
					enterpriseTypeId: '',
					enterpriseTypeName: '',
					legalPerson: '',
					registeredCapital: '',
					parentId: '',
					industry: [],
					industryCode: '',
					industryFullName: '',
					mainProduct: '',
					name: '',
					officialIndustry: '',
					phone: '',
					registerDate: '',
					remark: '',
					serialNo: '',
					simpleName: '',
					type: 1,
					unifiedSocialCreditCode: ''
				},
				otherForm: {
					settlementMode: '',
					settlementModeName: '',
					taxRate: 0,
					address: '',
					addressId: '',
					deptId: '',
					deptName: '',
					discount: 0,
					salesmanId: '',
					salesmanName: '',
					sender: '',
					senderPhone: ''
				},
				treeList: [],
				bankList: [],
				linkList: [],
				company_category: [],
				enterprise_type: [],
				contact_level: [],
				contact_link_status: [],
				settlement_mode: []

			}
		},

		created() {
			getTreeByPid(17).then(res => {
				this.treeList = res.data
			});
			// await getTreeByPid(17);
			this.getByCode()

		},
		onLoad(data) {

			if (data && data.id) {
				contactDetail(data.id).then(res => {
					this.form = res.base
					this.otherForm = res.other
					this.bankList = res.bankList
					this.linkList = res.linkList

					this.address = this.form.addressId && this.form.addressId.split(',')
					this.address1 = this.otherForm.addressId && this.otherForm.addressId.split(',')
					this.form.industry = this.form.industryCode && this.form.industryCode.split(',')
					this.form.level = this.form.level + ''
					this.otherForm.settlementMode = this.otherForm.settlementMode + ''
					this.categoryIdList = this.form.categoryId && this.form.categoryId.split(',')
					getInfoByIds(this.form.categoryId).then((res) => {
						let categoryName = res.map((item) => item.name)?.join(',');
						this.$set(this.form, 'categoryName', categoryName);
					});
					this.$nextTick(() => {
						this.$refs.bankListRef.init(this.bankList)
						this.$refs.linkListRef.init(this.linkList)


					})
				})
			}

		},
		onUnload() {
			uni.$off('updateBankList')
			uni.$off('updatelinkList')
		},
		methods: {
			// 显示选择器
			showPicker() {
				this.$refs.treePicker._show(this.categoryIdList);
			},
			getByCode() {
				const codeS = ['company_category', 'enterprise_type', 'contact_level', 'contact_link_status',
					'settlement_mode'
				]
				codeS.forEach(async (code) => {
					const codeValue = await getByCode(code);
					this[code] = codeValue.map(item => {
						const key = Object.keys(item)[0]
						return {
							value: key,
							text: item[key]
						}
					})
				})

			},
			//监听选择（ids为数组）
			selectChange(data = []) {
				this.categoryIdList = data.map(item => item.id)
				this.form.categoryId = data.map(item => item.id).toString()
				this.form.categoryName = data.map(item => item.name).toString()
				// console.log(data)
			},
			scrolltolower() {
				this.$refs.myListRef.getList()
			},
			onchange(e) {
				const value = e.detail.value
				this.form.addressId = value.map(item => item.value).toString()
				this.form.addressName = value.map(item => item.text).toString()
			},
			onchange1(e) {
				const value = e.detail.value
				this.otherForm.addressId = value.map(item => item.value).toString()
				this.otherForm.addressName = value.map(item => item.text).toString()
			},
			industryOnchange(e) {
				const value = e.detail.value
				this.form.industryCode = value.map(item => item.value).toString()
				this.form.industryFullName = value.map(item => item.text).toString()
			},
			sectionChange(index) {
				this.current = index;
			},
			async save() {
				try {

					if (!this.form.categoryId) {
						this.$refs.uToast.show({
							type: "error",
							message: "请选择客户分类",
						})
						return
					}
					if (!this.form.name) {
						this.$refs.uToast.show({
							type: "error",
							message: "请输入客户名称",
						})
						return
					}
					if (!this.form.authorizationLimit) {
						this.$refs.uToast.show({
							type: "error",
							message: "请输入授信额度",
						})
						return
					}
					if (!this.form.addressId) {
						this.$refs.uToast.show({
							type: "error",
							message: "请选择地址",
						})
						return
					}

					this.form.companyCategoryName = this.company_category.find(item => item.value == this.form
						.companyCategoryId)?.text
					this.form.enterpriseTypeName = this.enterprise_type.find(item => item.value == this.form
						.enterpriseTypeId)?.text
					this.form.settlementModeName = this.settlement_mode.find(item => item.value == this.form
						.settlementMode)?.text
					// return;
					uni.showLoading({
						title: '加载中'
					})

					const data = {
						base: this.form,
						other: this.otherForm,
						bankList: this.$refs.bankListRef.getValue(),
						linkList: this.$refs.linkListRef.getValue(),
					};

					contactSave(data)
						.then((id) => {
							uni.hideLoading()
							this.back()
						})
						.catch((e) => {
							uni.hideLoading()
						});
				} catch (error) {
					uni.hideLoading()
					console.log(error, 'error')
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-cell__body__content {
		flex: none;
		margin-right: 16rpx;
	}

	.mainBox {
		padding-bottom: 84rpx;
	}

	.footerButton {
		width: 100%;
		height: 84rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 10;

		/deep/.u-button {
			height: 100%;
		}

		>view {
			flex: 1;

		}
	}

	/deep/.u-button {
		// height: 100%;
	}

	/deep/.u-subsection__item__text {
		font-size: 28rpx !important;
	}

	/deep/.u-cell__body {
		// {
		// 	font-size: 26rpx !important;
		// }
		// padding: 12rpx 12rpx;

		.u-cell__title-text,
		.input-value,
		.uni-input-wrapper {
			font-size: 26rpx !important;
		}
	}
</style>