crm-xcx/pages-roadshow/addActivity/index.vue

<template>
	<view class="addactiyity-container">
		<van-form>
			<van-field 
				:value="formData.activityType" 
				is-link 
				readonly 
				clickable 
				name="picker" 
				label="活动类型"
				placeholder="选择活动类型" 
				@click.native="() => { if(edit_id) return; isActivityPicker = true }" 
				:disabled="edit_id"
			/>

			<van-field 
				:value="formData.roadshowType" 
				v-if="['路演','公开会议'].includes(formData.activityType)" 
				is-link
				readonly 
				clickable 
				name="picker" 
				:label="`${dynamic_prefix}形式`" 
				:placeholder="`选择${dynamic_prefix}形式`"
				@click.native="isRoadshowTypePicker = true" 
			/>

			<van-field 
				:value="formData.roadshowPlatform"
				v-if="['路演','公开会议'].includes(formData.activityType) && formData.roadshowType === '线上'" 
				clickable
				:label="`${dynamic_prefix}平台`" 
				:placeholder="`输入${dynamic_prefix}平台(eg：进门财经、腾讯会议)`" 
				@change="bindInputHandle('roadshowPlatform',$event)"
			/>

			<van-field 
				:value="formData.roadshowCity"
				v-if="['路演','公开会议'].includes(formData.activityType) && formData.roadshowType === '线下'" 
				is-link
				readonly
				clickable
				:label="`${dynamic_prefix}城市`" 
				:placeholder="`选择${dynamic_prefix}城市`"
				@click.native="clickAreaChoose" 
			/>

			<van-field 
				:value="formData.companyName" 
				v-if="['路演'].includes(formData.activityType)" 
				is-link 
				readonly
				clickable 
				label="客户名称" 
				placeholder="客户名称" 
				@click.native="goSearchCompany" 
			/>
			
			<view class="company-info" v-if="formData.activityType === '路演' && formData.companyId && companyInfo">
				<view>客户状态：{{companyInfo.Status}}</view>
				<view>所属行业：{{companyInfo.IndustryName}}</view>
				<view>开通品种：{{companyInfo.PermissionName}}</view>
				<view>累计报告阅读次数：{{companyInfo.ReportReadTotal}}</view>
			</view>

			<van-field 
				:value="formData.meetingTheme" 
				v-if="['公开会议'].includes(formData.activityType)" 
				clickable
				label="会议主题" 
				type="textarea" 
				rows="1" 
				autosize 
				placeholder="请输入会议主题" 
				@change="bindInputHandle('meetingTheme',$event)"
			/>

			<van-field 
				:value="formData.partnersName" 
				v-if="['公开会议'].includes(formData.activityType)" 
				clickable
				label="合作方名称" 
				type="textarea" 
				rows="1" 
				autosize 
				placeholder="请输入合作方名称（多个合作方用','隔开）" 
				@change="bindInputHandle('partnersName',$event)"
			/>

			<van-field 
				:value="formData.activityClass" 
				v-if="['报告电话会'].includes(formData.activityType)" 
				is-link
				clickable 
				label="活动类别" 
				placeholder="请选择活动类别" 
				@click.native="isActivityClassPicker = true" 
			/>

			<van-field 
				:value="formatRsLable(formData.selectResearchers[0].researcherId)" 
				is-link 
				readonly
				clickable
				name="picker"
				label="研究员"
				type="textarea"
				rows="1"
				autosize
				placeholder="选择研究员"
				@click.native="clickRsChoose(0)"
				:disabled="edit_id"
			/>
			<van-field 
				:value="formatterLabelTime(formData.selectResearchers[0].startTime)"
				is-link 
				readonly 
				clickable
				name="datetimePicker" 
				label="开始时间" 
				placeholder="选择开始时间"
				@click.native="clickTimeChoose(0,'start')"
			/>

			<van-field 
				:value="formatterLabelTime(formData.selectResearchers[0].endTime)"
				is-link
				readonly
				clickable
				name="datetimePicker"
				label="结束时间"
				placeholder="选择结束时间"
				@click.native="clickTimeChoose(0,'end')"
			/>

			<!-- 追加后的研究员 -->
			<view class="add-user-list" v-for="addindex in addResearchersIdx" :key="addindex" v-if="addResearchersIdx.length">
				<view class="del-cont" @click="delResearcherHandle(addindex)">
					<van-icon name="close" />
				</view>
				<van-field 
					:value="formatRsLable(formData.selectResearchers[addindex].researcherId)"
					is-link
					readonly
					clickable
					name="picker"
					label="研究员"
					placeholder="选择研究员"
					@click.native="clickRsChoose(addindex)"
					:disabled="edit_id"
				/>
				<van-field
					:value="formatterLabelTime(formData.selectResearchers[addindex].startTime)"
					is-link
					readonly
					clickable
					name="datetimePicker"
					label="开始时间"
					placeholder="选择开始时间"
					:formatter="formatterLabelTime"
					@click.native="clickTimeChoose(addindex,'start')"
				/>

				<van-field
					:value="formatterLabelTime(formData.selectResearchers[addindex].endTime)"
					is-link
					readonly
					clickable
					name="datetimePicker"
					label="结束时间"
					placeholder="选择结束时间"
					:formatter="formatterLabelTime"
					@click.native="clickTimeChoose(addindex,'end')"
				/>
			</view>

			<view class="add-user-btn" @click="addResearcherHandle"
				v-if="['路演', '公开会议'].includes(formData.activityType) && !edit_id">
				<van-icon name="add-o" />添加研究员
			</view>
		</van-form>

		<div class="submit-bot">
			<van-button type="primary" plain color="#3385FF" class="btn" size="small" block round @click="cancelHandle">取消</van-button>
			<van-button type="primary" color="#3385FF" class="btn" size="small" block round @click="submitHandle">确定</van-button>
		</div>


		<!-- 选择活动类型 -->
		<van-popup :show="isActivityPicker" position="bottom">
			<van-picker 
				show-toolbar 
				:columns="activiytyTypes" 
				:default-index="activiytyTypes.indexOf(formData.activityType)" 
				@confirm="confirmActivityType"
				@cancel="isActivityPicker=false" 
			/>
		</van-popup>
		
		<!-- 选择活动类别 -->
		<van-popup :show="isActivityClassPicker" position="bottom">
			<van-picker 
				show-toolbar 
				:columns="telTypeList"
				:default-index="telTypeList.indexOf(formData.activityClass)" 
				@confirm="confirmActivityClass"
				@cancel="isActivityClassPicker=false" 
			/>
		</van-popup>

		<!-- 选择路演形式 -->
		<van-popup :show="isRoadshowTypePicker" position="bottom">
			<van-picker 
				show-toolbar 
				:columns="['线上','线下']" 
				:default-index="['线上','线下'].indexOf(formData.roadshowType)"
				@confirm="confirmRoadshowType"
				@cancel="isRoadshowTypePicker=false" 
			/>
		</van-popup>

		<!-- 选择研究员 -->
		<van-popup :show="isResearcherPicker" position="bottom">
			<view class="select-rs-header">
				<text class="cancel" @click="cancelResearcher">取消</text>
				<text class="ensure" @click="confirmResearcher">确认</text>
			</view>
			<van-tree-select 
				:items="researcherList" 
				:main-active-index="rs_picker.firstindex" 
				:active-id="rs_picker.id"
				@click-nav="clickFirstHandle" 
				@click-item="clickItemHandle" 
			/>
		</van-popup>

		<!-- 选择时间 -->
		<van-popup :show="isTimePicker" position="bottom">
			<van-datetime-picker 
				:value="pickerForm.time" 
				type="datetime" 
				:formatter="formatterPickerTime"
				@confirm="confirmTime" 
				@cancel="() => {isTimePicker = false;pickerForm.time=''}" 
			/>
		</van-popup>

		<!-- 选择地区 -->
		<van-popup :show="isAreaPicker" position="bottom">
			<van-area
				:value="pickerForm.area"
				:area-list="areaList" 
				:columns-num="2"
				@confirm="confirmArea" 
				@cancel="isAreaPicker = false"
			/>
		</van-popup>
	</view>
</template>

<script>
	import {
		addActivity,
		editActivity
	} from '@/api/roadshow/index.js';
	import {
		getDefaultOption
	} from './common.js';
	import mixin from './mixin.js';
	import { validateForm } from '../utils/validate.js';
	
	const moment = require('../utils/_moment.js');
	moment.locale('zh-cn'); 
	export default {
		mixins: [mixin],
		data() {
			return {};
		},
		methods: {

			/* 设置默认状态 */
			initSetState(options) {
				const {
					RoleTypeCode
				} = JSON.parse(uni.getStorageSync('userInfo')) || null;
				const {
					defaultActivityType,
					activityTypeList,
					startTime,
					endTime
				} = getDefaultOption(RoleTypeCode, 2);

				this.activiytyTypes = activityTypeList;
				this.formData.activityType = defaultActivityType;
				this.formData.selectResearchers = [{
					researcherId: '',
					startTime: startTime,
					endTime: endTime,
				}];
				
				/* 编辑时回显表单 */
				if(options.edit_id) {
					const { form,edit_id,edit_rs_id } = options;
					this.formData = {...this.formData,...JSON.parse(form)};
					this.edit_id = Number(edit_id);
					this.edit_rs_id = Number(edit_rs_id);
				}
				console.log(this.formData)
				
				uni.setNavigationBarTitle({
					title: this.edit_id ? '修改活动' : '添加活动'
				})

			},
			
			/* 提交表单 */
			async submitHandle() {
				
				let isCheck = validateForm(this.formData.activityType,this.formData);
				console.log(isCheck)
				if(!isCheck) return
				
				// console.log(this.formData)
			
				let parmas;
				const param_research = ['公开会议', '路演'].includes(
						this.formData.activityType
					) ?
					this.formData.selectResearchers.map((item) => ({
						ResearcherId: Number(item.researcherId),
						ResearcherName: this.findName(item.researcherId),
						StartDate: moment(item.startTime).format('YYYY-MM-DD'),
						EndDate: moment(item.endTime).format('YYYY-MM-DD'),
						StartTime: moment(item.startTime).format('HH:mm:ss'),
						EndTime: moment(item.endTime).format('HH:mm:ss'),
						StartWeek: moment(item.startTime).format('ddd'),
						EndWeek: moment(item.endTime).format('ddd'),
					})) :
					this.formData.selectResearchers[0].researcherId.map((item) => ({
						ResearcherId: Number(item),
						ResearcherName: item === 99 ? 'ficc全体' : this.findName(item),
						StartDate: moment(
							this.formData.selectResearchers[0].startTime
						).format('YYYY-MM-DD'),
						EndDate: moment(
							this.formData.selectResearchers[0].endTime
						).format('YYYY-MM-DD'),
						StartTime: moment(
							this.formData.selectResearchers[0].startTime
						).format('HH:mm:ss'),
						EndTime: moment(
							this.formData.selectResearchers[0].endTime
						).format('HH:mm:ss'),
						StartWeek: moment(this.formData.selectResearchers[0].startTime).format('ddd'),
						EndWeek: moment(this.formData.selectResearchers[0].endTime).format('ddd'),
					}));
						
				parmas = {
					ActivityType: this.formData.activityType,
					ActivityCategory: this.formData.activityClass,
					City: this.formData.roadshowCity[1],
					Province: this.formData.roadshowCity[0],
					CooperationName: this.formData.partnersName,
					Theme: this.formData.meetingTheme,
					RoadshowType: this.formData.roadshowType,
					RoadshowPlatform: this.formData.roadshowPlatform,
					CompanyId: this.formData.companyId || 0,
					CompanyName: this.formData.companyName || '',
					ResearcherList: param_research,
				};
			
				// console.log(parmas);
			
				const res = this.edit_id ?
					await editActivity({
						...parmas,
						RsCalendarId: Number(this.edit_id),
						RsCalendarResearcherId: Number(this.edit_rs_id),
						EditType: ['公开会议', '路演'].includes(this.formData.activityType) ? 2 : 1
					}) : await addActivity(parmas);
			
				if (res.code !== 200) return;
				
				const { text,content,link,query } = this.setDynamicLink(this.formData.activityType);
				
				
				this.edit_id ? uni.showToast({
					title: '提交成功',
					icon: 'success'
				}) : this.addActivityLink({text,content,link,query});
				
				this.edit_id && setTimeout(() => { 
					this.cancelHandle();
				},1500);
			},
		},

		onLoad(options) {
			this.initSetState(options);
		},

		onShow() {
			this.getResearcherList();
			this.getTelType();
			
			if(uni.getStorageSync('roadshow_compantyId')) {
				this.formData.companyId = Number(uni.getStorageSync('roadshow_compantyId'));
				this.getCompanyInfo();
				uni.removeStorageSync('roadshow_compantyId');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addactiyity-container {
		padding-bottom: 200rpx;

		.add-user-btn {
			background-color: #fff;
			margin-top: 20rpx;
			padding: 20rpx 0;
			color: #3385ff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.del-cont {
			font-size: 50rpx;
			color: #f00;
			display: flex;
			justify-content: flex-end;
			padding: 10rpx 30rpx;
		}

		.submit-bot {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			height: 140rpx;
			padding: 0 150rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			box-shadow: 0px -2px 6px rgba(110, 119, 141, 0.07);

			.btn {
				// width: 100%;
				width: 260rpx;
				height: 60rpx;
				margin-right: 30rpx;
			}
		}

		.select-rs-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 20rpx;

			.cancel {
				color: #969799;
			}

			.ensure {
				color: #576b95;
			}
		}

	}
</style>
<style lang="scss">
	.addactiyity-container {
		.van-tree-select {
			.van-tree-select__item--active {
				color: #1989fa !important;
			}

			.van-sidebar-item--selected {
				border-color: #1989fa !important;
			}
		}
		
		.company-info {
			background: #D5E6FF;
			padding: 10rpx 30rpx;
			margin-bottom: 20rpx;
			view {
				margin: 12rpx 0;
				color: #666;
				text-indent: -140rpx;
				margin-left: 140rpx;
			}
		}
	}
</style>