aiot-app/pages/salesServiceManagement/demandList/add.vue

<template>
	<view class="">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back" title="新增需求"
			@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">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input disabled style="flex:1" border="surround" v-model="form.code">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="需求名称" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input style="flex:1" placeholder="请输入" border="surround" v-model="form.name">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="客户名称" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input style="flex:1" placeholder="请选择" border="surround" @click.native="selectContactShow"
						v-model="form.contactName">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="发货单" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input style="flex:1" placeholder="请选择" border="surround" @click.native="invoiceDialogOpen"
						v-model="form.orderCode">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="报修地址" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input style="flex:1" placeholder="请输入" border="surround" v-model="form.contactAddress">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="故障等级" arrow-direction="down">
				<uni-data-picker v-model="form.faultLevel" slot="value" placeholder="请选择" :localdata="fault_level"
					@change="sourceCodeOnchange">
				</uni-data-picker>
			</u-cell>
			<u-cell title="期望解决时间" arrow-direction="down">
				<uni-datetime-picker type="date" slot="value" v-model="form.expectedTime">
				</uni-datetime-picker>
			</u-cell>
			<u-cell title="报修人" arrow-direction="down">
				<view slot="value" style="display: flex;align-items: center;width: 100%;">
					<u--input style="flex:1" placeholder="请输入" border="surround" v-model="form.repairName">
					</u--input>
				</view>
			</u-cell>
		</u-cell-group>
		<AfterSales ref="salesRef" v-show="current == 1" :itemList="form.tableList" />
		<!-- 联系人 -->
		<ContactList ref="contactRef" v-show="current == 2" :itemList="form.contactInfoVOS" />
		<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 {
		getByCode
	} from '@/api/pda/common.js'
	import {
		contactDetail
	} from '@/api/saleManage/contact/index.js'
	import {
		saveSalesDemand
	} from '@/api/salesServiceManagement/demandList/index.js'
	import AfterSales from './components/AfterSales.vue'
	import ContactList from './components/contactList.vue'
	export default {
		components: {
			AfterSales,
			ContactList
		},
		data() {
			return {
				form: {
					code: '',
					name: '',
					contactName: '',
					repairName: '',
					expectedTime: '',
					faultLevel: '',
					contactAddress: '',
					orderCode: '',
				},
				list: ['基本信息', '售后对象', '联系人'],
				current: 0,
				fault_level: []
			}
		},
		created() {
			this.getByCode();
			const userInfo = uni.getStorageSync('userInfo');
			this.$set(this.form, 'repairName', userInfo.name);
		},
		onLoad(data) {
			// 客户数据
			uni.$off('setSelectList')
			uni.$on('setSelectList', (data) => {
				if (data && data.length > 0) {
					let res = data[0]
					console.log(res, 'res')
					this.$set(this.form, 'contactId', res.id);
					this.$set(this.form, 'contactName', res.name);
					this.contactDetail(res.id);
					// this.$forceUpdate();
				}
			})
			// 售后对象数据
			uni.$on('goosData', (data) => {
				this.$set(this.form, 'orderCode', data.orderCode);
				this.$set(this.form, 'orderId', data.orderId);
				console.log(data, 'data');
				let list = JSON.parse(JSON.stringify(data.tableList));
				// 如果计量数量没有的话默认是 1
				list.map(
					(el) =>
					(el.measureQuantity = el.measureQuantity ? el.measureQuantity : 1)
				);
				this.$set(this.form, 'tableList', list);
			})
		},
		onUnload() {
			uni.$off('setSelectList');
			uni.$off('goosData');
		},
		mounted() {

		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			selectContactShow() {
				uni.navigateTo({
					url: `/pages/saleManage/components/selectContact?isAll=2&type=需求`
				})
			},
			//客户回调
			async contactDetail(id, type) {
				if (!id) {
					this.contractInfo = {};
					return;
				}
				let {
					base,
					other,
					linkList
				} = await contactDetail(id);
				base.contactName = base.name;
				let addressName = '';
				if (other.addressName) {
					addressName += other.addressName;
				}
				if (other.address) {
					addressName += other.address;
				}
				// this.$set(this.form, 'contractInfo', base);
				this.form.contactCode = base.code;
				if (type != 'init') {
					this.$set(this.form, 'contactAddress', addressName);
					this.$set(
						this.form,
						'contactInfoVOS',
						linkList.map((item) => {
							item['contactName'] = item.linkName;
							item['contactPhone'] = item.mobilePhone;
							item['telephone'] = item.phone;
							return item;
						})
					);
					// 清空发货单的数据 *** 初次进来不清空
					this.$set(this.form, 'orderCode', '');
					this.$set(this.form, 'orderId', '');
					this.$set(this.form, 'tableList', []);
				}
			},
			sourceCodeOnchange(e) {
				const value = e.detail.value;
				this.form.faultLevel = value[0].value;
				console.log(value, '赋值')
				// this.form.sourceCode = value.map(item => item.value).toString()
				// this.form.sourceName = value.map(item => item.text).toString()
			},
			invoiceDialogOpen() {
				if (!this.form.contactId) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请先选择客户",
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/salesServiceManagement/demandList/components/Invoice?contactId=' + this.form
						.contactId
				})
			},
			async getByCode() {
				const codeValue = await getByCode('fault_level');
				let list = codeValue.map(item => {
					const key = Object.keys(item)[0]
					return {
						value: key,
						text: item[key]
					}
				})
				this.fault_level = list;
			},
			save() {
				let data = JSON.parse(JSON.stringify(this.form));
				delete data.tableList;
				delete data.code;
				console.log(data, 'form ---')
				try {
					if (!data.name) {
						this.$refs.uToast.show({
							type: "warning",
							message: "请输入需求名称",
						})
						return
					}
					if (!data.contactName) {
						this.$refs.uToast.show({
							type: "warning",
							message: "请选择客户名称",
						})
						return
					}
					if (!data.orderCode) {
						this.$refs.uToast.show({
							type: "warning",
							message: "请选择发货单",
						})
						return
					}
					if (!data.contactAddress) {
						this.$refs.uToast.show({
							type: "warning",
							message: "请输入报修地址",
						})
						return
					}
					if (!data.faultLevel) {
						this.$refs.uToast.show({
							type: "warning",
							message: "请选择故障等级",
						})
						return
					}
					// 联系人数据
					let contactInfoVOS = this.$refs.contactRef.getTabData();
					if (contactInfoVOS.length == 0) {
						this.$refs.uToast.show({
							type: "warning",
							message: "至少需要存在一条联系人数据",
						})
						this.current = 2
						return
					}
					data.contactInfoVOS = contactInfoVOS;
					// 售后对象数据
					let productDetail = this.$refs.salesRef.getTabData();
					data.productDetail = productDetail;
					uni.showLoading({
						title: '加载中'
					})
					console.log(data, 'data');
					saveSalesDemand(data).then((res) => {
						uni.hideLoading()
						this.back()
					}).catch((e) => {
						console.log(e,'报错了')
						uni.hideLoading()
					})
				} catch (error) {
					uni.hideLoading();
					console.log(error, 'error');
				}
			}
		},

	}
</script>

<style lang="scss" scoped>
	/deep/.u-subsection__item__text {
		font-size: 28rpx !important;
	}

	/deep/.u-cell__body__content {
		flex: none;
		margin-right: 16rpx;
	}

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

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

		>view {
			flex: 1;

		}
	}
</style>