aiot-app/pages/saleManage/businessOpportunity/components/drawer.vue

<template>
	<view class="mainBox">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back" title="商机详情"
			@clickLeft="back">
		</uni-nav-bar>
		<myCard :item="form" :columns="columns"></myCard>
		<view class="item">
			<view class="card">

				<view>
					<view class="lable">预算</view>
					<view>{{form.budget}} 万元</view>
				</view>
				<view>
					<view class="lable">赢单率</view>
					<view>{{form.winRate}} %</view>
				</view>
				<view>
					<view class="lable">预计结单日期</view>
					<view>{{form.expectedClosingDate}}</view>
				</view>

			</view>
		</view>

		<!-- <u-sticky bgColor="#fff" :customNavHeight="88"> -->
			<u-tabs :list="list1" @change="change" :current="current"></u-tabs>
		<!-- </u-sticky> -->
		<info ref="infoRef" :isDrawer="true" v-show="current==0"></info>

		<produceList :pricingWay="form.pricingWay" ref="produceListRef" :isDrawer="true" v-show="current==1">
		</produceList>
		<businessList ref="businessListRef" :isDrawer="true" v-show="current==2">
		</businessList>
		<personnelList ref="personnelListRef" :linkList="linkList" :isDrawer="true" v-show="current==3">
		</personnelList>
		<followList ref="followListRef" :linkList="linkList" pageName="businessOpportunity" v-show="current==4">
		</followList>


	</view>
</template>

<script>
	import businessList from "./businessList.vue"
	import personnelList from "./personnelList.vue"
	import produceList from "../../components/produceList.vue"
	import followList from "@/pages/saleManage/contact/components/followList.vue"
	import info from "./info.vue"
	import {
		contactDetail,
	} from '@/api/saleManage/contact/index.js'
	import {
		businessopportunitySave,
		getDetail,
		getfollowList,
		deletefollowList,
		savefollowList
	} from '@/api/saleManage/businessOpportunity/index.js'

	import myCard from '../../components/myCard.vue'
	export default {
		components: {
			businessList,
			personnelList,
			produceList,
			followList,
			info,
			myCard
		},
		data() {
			return {
				columns: [
					[{
						label: '名称：',
						prop: 'name',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '客户名称：',
						prop: 'contactName'
					}, {
						label: '负责人：',
						prop: 'responsibleName'
					}],
					[{
						label: '商机来源：',
						prop: 'sourceName',
						className: 'perce100',
					}],
				],
				current: 0,
				list1: [{
					name: '详细信息',
				}, {
					name: '产品清单',
				}, {
					name: '竞品'
				}, {
					name: '关键人信息'
				}, {
					name: '跟进记录'
				}],
				linkList: [],
				form: {
					id: '',
					contactName: '',
					contactId: '',
					budget: null,
					expectedClosingDate: '',
					sourceCode: '',
					sourceName: '',
					stageCode: '',
					stageName: '',
					winRate: null,
					name: '',
					remark: '',
					responsibleName: '',
					responsibleId: '',
					source: '',
					status: 1,
					pricingWay: '1',
					files: []
				},
			}
		},

		onLoad(data) {

			uni.$off('setBusinessOpportunity')
			uni.$on('setBusinessOpportunity', () => {
				this.save()
			})
			uni.$off('delFollowList')
			uni.$on('delFollowList', (item) => {
				deletefollowList([item.id])
			})
			uni.$off('savefollowList')
			uni.$on('savefollowList', (item) => {
				item.contactId=this.form.contactId
				item.opportunityId=this.form.id

				savefollowList(item)
			})
			getDetail(data.id).then(async res => {
				this.form = res
				const {
					linkList
				} = await contactDetail(res.contactId)
				const followList = await getfollowList({
					pageNum: 1,
					size: 1000,
					opportunityId: res.id,
				})
				this.linkList = linkList
				setTimeout(() => {
					this.current = 0
					this.$nextTick(() => {
						this.$refs.infoRef.init(res)
						this.$refs.produceListRef.init(res.productList)
						this.$refs.businessListRef.init(res.competAnalysisList)
						this.$refs.personnelListRef.init(res.partyList)
						this.$refs.followListRef.init(followList.list)
						if (data.current) {
							this.current = +data.current
						}
					})
				}, 300)
			



			})
		},
		onUnload() {
			uni.$off('setBusinessOpportunity')
			uni.$off('delFollowList')
			uni.$off('savefollowList')
		},
		methods: {
			change(data) {
				this.current = data.index
				// console.log(data,'current')

			},
			save() {
				try {
					const data = {
						opportunity: this.form,
						competAnalysisList: this.$refs.businessListRef.getValue(),
						partyList: this.$refs.personnelListRef.getValue(),
						productList: this.$refs.produceListRef.getValue()
					};
					uni.showLoading({
						title: '加载中'
					})
					businessopportunitySave(data).then((id) => {
							uni.hideLoading()
						})
						.catch((e) => {
							uni.hideLoading()
						});
				} catch (error) {
					uni.hideLoading()
					console.log(error, 'error')
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.item {
		padding: 16rpx 32rpx;

		.card {
			padding: 16rpx 32rpx;
			margin-top: 32rpx;
			display: flex;
			flex-wrap: wrap;
			height: 80rpx;
			border-radius: 12rpx;
			border: 1px solid #cbcbcb;

			>view {
				font-size: 26rpx;
				width: 33%;

				.lable {
					color: #999;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>