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="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" :disabled="!isDisable" 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 :disabled="!isDisable" 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 :disabled="!isDisable" 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 :disabled="!isDisable" style="flex:1" placeholder="请输入" border="surround"
						v-model="form.contactAddress">
					</u--input>
				</view>
			</u-cell>
			<u-cell title="故障等级" arrow-direction="down">
				<uni-data-picker :readonly="!isDisable" 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 :disabled="!isDisable" 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="请输入" disabled border="surround" v-model="createUserName">
					</u--input>
				</view>
			</u-cell>
		</u-cell-group>
		<AfterSales ref="salesRef" :type="type" v-show="current == 1" :itemList="form.productDetail" />
		<!-- 联系人 -->
		<ContactList ref="contactRef" :type="type" v-show="current == 2" :itemList="form.contactInfoVOS" />
		<view class="footerButton" v-if="isDisable">
			<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,
		updateSalesDemand,
		getSalesDemandById
	} from '@/api/salesServiceManagement/demandList/index.js'
	import AfterSales from './components/AfterSales.vue'
	import ContactList from './components/contactList.vue'
	export default {
		components: {
			AfterSales,
			ContactList
		},
		computed: {
			isDisable() {
				let flag = this.type != 'view'
				return flag;
			}
		},
		data() {
			return {
				form: {
					code: '',
					name: '',
					contactName: '',
					expectedTime: '',
					faultLevel: '',
					contactAddress: '',
					orderCode: '',
					productDetail: [],
					contactInfoVOS: [],
					contactCode: '',
				},
				createUserName: '',
				list: ['基本信息', '售后对象', '联系人'],
				current: 0,
				fault_level: [],
				title: '新增需求',
				type: 'add'
			}
		},
		created() {

		},
		onLoad(params) {
			this.type = params.type;
			if (params.id) {
				this.title = params.type == 'view' ? '需求详情' : '修改需求'
				this.getDetails(params.id);
			} else {
				const userInfo = uni.getStorageSync('userInfo');
				this.createUserName = userInfo.name;
				this.getByCode();
			}
			// 客户数据
			uni.$off('setSelectList')
			uni.$on('setSelectList', (data) => {
				if (data && data.length > 0) {
					let res = data[0]
					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, 'productDetail', list);
			})
		},
		onUnload() {
			uni.$off('setSelectList');
			uni.$off('goosData');
		},
		mounted() {

		},
		methods: {
			// 查询详情
			async getDetails(id) {
				this.getByCode();
				const res = await getSalesDemandById(id);
				// this.form.tableList = res.productDetail;
				// this.form.contactInfoVOS = res.contactInfoVOS;
				// this.form.code = res.code;
				// this.form.contactName = res.contactName;
				// this.form.contactCode = res.contactCode;
				// this.form.contactId = res.contactId;
				// this.form.contactAddress = res.contactAddress;
				// this.form.expectedTime = res.expectedTime;
				// this.createUserName = res.createUserName;
				// this.form.orderCode = res.orderCode;
				// this.form.orderId = res.orderId;
				// this.form.name = res.name;
				// this.form.createUserId = res.createUserId;
				// this.form.id = res.id;
				// this.form.processInstanceId = res.processInstanceId;
				let data = JSON.parse(JSON.stringify(res));
				this.form = data;
				this.createUserName = data.createUserName;
				let obj = this.fault_level.find(el => el.value == res.faultLevel)
				this.sourceCodeOnchange({
					"detail": {
						"value": [obj]
					}
				});
			},

			sectionChange(index) {
				this.current = index;
			},
			selectContactShow() {
				uni.navigateTo({
					url: `/pages/saleManage/components/selectContact?isAll=2&type=需求`
				})
			},
			//客户回调
			async contactDetail(id) {
				// 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 (this.type != 'view') {
					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, 'productDetail', []);
				}
			},
			sourceCodeOnchange(e) {
				const value = e.detail.value;
				this.form.faultLevel = value[0].value;
				console.log(e, '赋值')
				// 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.productDetail;
				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.map((item) => {
							item['produceTime'] = item['produceTime'] || null;
							return item;
						}),

						uni.showLoading({
							title: '加载中'
						})

					let requestname =
						this.type === 'add' ? saveSalesDemand : updateSalesDemand;
					requestname(data).then((res) => {
						uni.hideLoading()
						this.back()
						this.$refs.uToast.show({
							type: "success",
							message: "操作成功",
						})
					}).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>