aiot-app/pages/saleManage/businessOpportunity/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">
				<view slot="title" style="display: flex; align-items: center;">
					<text class="required-mark">*</text>
					客户
				</view>
				<u--input slot="value" placeholder="请选择" border="surround" v-model="form.contactName"
					@click.native="selectContactShow"></u--input>
			</u-cell>
			<u-cell :title="'商机名称'" arrow-direction="down">
				<view slot="title" style="display: flex; align-items: center;">
					<text class="required-mark">*</text>
					商机名称
				</view>
				<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" :disabled="true" placeholder="请输入" border="surround"
					v-model="form.responsibleName"></u--input>
			</u-cell>
			<u-cell :title="'商机来源'" arrow-direction="down">
				<view slot="title" style="display: flex; align-items: center;">
					<text class="required-mark">*</text>
					商机来源
				</view>
				<uni-data-picker v-model="form.sourceCode" slot="value" placeholder="请选择"
					:localdata="business_opport_code" @change="sourceCodeOnchange">
				</uni-data-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" type="number" max="100" min="0" placeholder="请输入" border="surround"
						v-model="form.winRate">

					</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" type="number" placeholder="请输入" border="surround" v-model="form.budget">

					</u--input>
					万元
				</view>

			</u-cell>

			<u-cell title="预计结单日期" arrow-direction="down">
				<uni-datetime-picker type="date" slot="value" v-model="form.expectedClosingDate">
				</uni-datetime-picker>
			</u-cell>
<!-- 			<u-cell title="计价方式" arrow-direction="down">

				<radio-group @change="radioChange" v-model="form.pricingWay" slot="value">
					<radio value="1" :checked="form.pricingWay==1">按数量计价</radio>
					<radio value="2" :checked="form.pricingWay==2">按重量计价</radio>

				</radio-group>
			</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>


		<view class="footerButton">
			<u-button type="default" text="返回" @click="back"></u-button>
			<u-button type="primary" @click="save" text="保存"></u-button>
		</view>
		<produceList ref="produceListRef" v-show="current==1"  :isTemporary="true"></produceList>
		<businessList ref="businessListRef" v-show="current==2"></businessList>
		<personnelList ref="personnelListRef" :linkList="linkList" v-show="current==3"></personnelList>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	// file:///D:/中赢/aiot-app/pages/warehouse/enterHouse/selectEnterType.vue

	import {
		getByCode
	} from '@/api/pda/common.js'
	import {
		contactDetail,
	} from '@/api/saleManage/contact/index.js'
	import {
		businessopportunitySave,
		getDetail
	} from '@/api/saleManage/businessOpportunity/index.js'

	import produceList from '../components/produceList.vue'
	import businessList from './components/businessList.vue'
	import personnelList from './components/personnelList.vue'

	export default {
		components: {
			produceList,
			businessList,
			personnelList
		},
		data() {
			return {
				list: ['基本信息', '产品清单', '竞品', '关键人信息'],
				current: 0,
				form: {
					id: '',
					contactName: '',
					contactId: '',
					budget: null,
					expectedClosingDate: '',
					sourceCode: '',
					sourceName: '',
					stageCode: '',
					stageName: '',
					winRate: null,
					name: '',
					remark: '',
					responsibleName: '',
					responsibleId: '',
					source: '',
					status: 1,
					pricingWay: '1',
					files: []
				},
				business_opport_code: [],
				linkList: [],


			}
		},

		created() {

			this.getByCode()

		},
		onLoad(data) {
			uni.$off('setSelectList')
			uni.$on('setSelectList', async (data) => {
				if (data && data.length > 0) {
					const {
						linkList
					} = await contactDetail(data[0].id)
					this.linkList = linkList
					this.$set(this.form, 'contactId', data[0].id);
					this.$set(this.form, 'contactName', data[0].name);
				}

			})
			if (data && data.id) {
				getDetail(data.id).then(async res => {
					this.form = res
					const {
						linkList
					} = await contactDetail(res.contactId)
					this.linkList = linkList
					this.$nextTick(() => {

						this.$refs.produceListRef.init(res.productList)
						this.$refs.businessListRef.init(res.competAnalysisList)
						this.$refs.personnelListRef.init(res.partyList)
					})

				})
			} else {
				const userInfo = uni.getStorageSync('userInfo')
				this.$set(this.form, 'responsibleId', userInfo.userId);
				this.$set(this.form, 'responsibleName', userInfo.name);
			}

		},
		onUnload() {
			uni.$off('setSelectList')
			// uni.$off('updatelinkList')
		},
		methods: {

			getByCode() {
				const codeS = ['business_opport_code']
				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]
						}
					})
				})

			},
			selectContactShow() {
				uni.navigateTo({
					url: '/pages/saleManage/components/selectContact?isAll=' + 2
				})
			},
			sourceCodeOnchange(e) {
				const value = e.detail.value
				this.form.sourceCode = value.map(item => item.value).toString()
				this.form.sourceName = value.map(item => item.text).toString()
			},

			radioChange(e) {
				this.form.pricingWay = e.detail.value
				this.$nextTick(() => {
					this.$refs.produceListRef.getTotalPrice()
				})


			},
			sectionChange(index) {
				this.current = index;
			},

			async save() {
			
				try {

					if (!this.form.contactName) {
						this.$refs.uToast.show({
							type: "error",
							message: "请选择客户",
						})
						return
					}
					if (!this.form.name) {
						this.$refs.uToast.show({
							type: "error",
							message: "请输入商机名称",
						})
						return
					}
					if (!this.form.sourceCode) {
						this.$refs.uToast.show({
							type: "error",
							message: "请选择商机来源",
						})
						return
					}

					if (this.$refs.produceListRef.getValue().length == 0) {
						this.$refs.uToast.show({
							type: "error",
							message: "产品清单不能为空",
						})
						return;
					}

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

					const data = {
						opportunity: this.form,
						competAnalysisList: this.$refs.businessListRef.getValue(),
						partyList: this.$refs.personnelListRef.getValue(),
						productList: this.$refs.produceListRef.getValue()
					};

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

		}
	}
</script>

<style lang="scss" scoped>
	.required-mark {
		color: #FF3333;
		margin-right: 4rpx;
	}
	
	/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;
		background-color: #fff;

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

		>view {
			flex: 1;

		}
	}

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

	/deep/.u-subsection__item__text {
		font-size: 28rpx !important;
	}
	/deep/.uni-input-placeholder {
		font-size: 28rpx !important;
	}
	/deep/.selected-item {
		font-size: 28rpx !important;
	}
	/deep/.uni-input-input {
		font-size: 28rpx !important;
	}

	
</style>