添加活动页面，表单选择picker

api/roadshow/index.js

@@ -112,7 +112,7 @@ export const matterList = params => {
 }
 
 /**
- * 日历详情
+ * 活动详情
  * @param   
  * RsCalendarId  RsCalendarResearcherId  
  */

pages-approve/search/index.vue

@@ -39,6 +39,7 @@
 		},
 		onLoad(options) {
 			this.type = options.type
+			console.log(options.type)
 			this.initPage(options.type)
 		},
 		methods: {

pages-roadshow/addActivity/index.vue

@@ -11,163 +11,165 @@
 				placeholder="选择活动类型" 
 				@click.native="isActivityPicker = true" 
 			/>
-			
-			<van-field
-				:value="formData.roadshowType"
-				v-if="['路演','公开会议'].includes(formData.activityType)"
-				is-link 
-				readonly
+
+			<van-field 
+				:value="formData.roadshowType" 
+				v-if="['路演','公开会议'].includes(formData.activityType)" 
+				is-link
+				readonly 
 				clickable 
 				name="picker" 
-				:label="`${dynamic_prefix}形式`"
+				:label="`${dynamic_prefix}形式`" 
 				:placeholder="`选择${dynamic_prefix}形式`"
 				@click.native="isRoadshowTypePicker = true" 
 			/>
-			
-			<van-field
+
+			<van-field 
 				:value="formData.roadshowPlatform"
-				v-if="['路演','公开会议'].includes(formData.activityType) && formData.roadshowType === '线上'"
+				v-if="['路演','公开会议'].includes(formData.activityType) && formData.roadshowType === '线上'" 
 				clickable
-				:label="`${dynamic_prefix}平台`"
-				:placeholder="`输入${dynamic_prefix}平台`"
+				:label="`${dynamic_prefix}平台`" 
+				:placeholder="`输入${dynamic_prefix}平台`" 
+				@change="bindInputHandle('roadshowPlatform',$event)"
 			/>
-			
-			<van-field
+
+			<van-field 
 				:value="formData.roadshowCity"
-				v-if="['路演','公开会议'].includes(formData.activityType) && formData.roadshowType === '线下'"
-				is-link
+				v-if="['路演','公开会议'].includes(formData.activityType) && formData.roadshowType === '线下'" 
+				is-link 
 				clickable
-				:label="`${dynamic_prefix}城市`"
+				:label="`${dynamic_prefix}城市`" 
 				:placeholder="`选择${dynamic_prefix}城市`"
-				@click.native="isResearcherPicker = true" 
+				@click.native="isAreaPicker = true" 
 			/>
-			
-			<van-field
-				:value="formData.companyName"
-				v-if="['路演'].includes(formData.activityType)"
-				is-link
+
+			<van-field 
+				:value="formData.companyName" 
+				v-if="['路演'].includes(formData.activityType)" 
+				is-link 
 				readonly
-				clickable
-				label="客户名称"
-				placeholder="客户名称"
+				clickable 
+				label="客户名称" 
+				placeholder="客户名称" 
 				@click.native="goSearchCompany" 
 			/>
-			
-			<van-field
-				:value="formData.meetingTheme"
-				v-if="['公开会议'].includes(formData.activityType)"
+
+			<van-field 
+				:value="formData.meetingTheme" 
+				v-if="['公开会议'].includes(formData.activityType)" 
 				clickable
-				label="会议主题"
-				type="textarea"
-				rows="1"
-				autosize
-				placeholder="请输入会议主题"
-				clearable
+				label="会议主题" 
+				type="textarea" 
+				rows="1" 
+				autosize 
+				placeholder="请输入会议主题" 
+				@change="bindInputHandle('meetingTheme',$event)"
 			/>
-			
-			<van-field
-				:value="formData.partnersName"
-				v-if="['公开会议'].includes(formData.activityType)"
+
+			<van-field 
+				:value="formData.partnersName" 
+				v-if="['公开会议'].includes(formData.activityType)" 
 				clickable
-				label="合作方名称"
-				type="textarea"
-				rows="1"
-				autosize
-				placeholder="请输入合作方名称"
-				clearable
+				label="合作方名称" 
+				type="textarea" 
+				rows="1" 
+				autosize 
+				placeholder="请输入合作方名称" 
+				@change="bindInputHandle('partnersName',$event)"
 			/>
-			
-			<van-field
-				:value="formData.activityClass"
-				v-if="['报告电话会'].includes(formData.activityType)"
+
+			<van-field 
+				:value="formData.activityClass" 
+				v-if="['报告电话会'].includes(formData.activityType)" 
 				is-link
-				clickable
-				label="活动类别"
-				placeholder="请选择活动类别"
+				clickable 
+				label="活动类别" 
+				placeholder="请选择活动类别" 
 				@click.native="isResearcherPicker = true" 
 			/>
-			
+
 			<van-field 
-				:value="formData.selectResearchers[0].researcherId"
+				:value="formatRsLable(formData.selectResearchers[0].researcherId)" 
 				is-link 
 				readonly
-				clickable 
-				name="picker" 
+				clickable
+				name="picker"
 				label="研究员"
 				type="textarea"
 				rows="1"
 				autosize
 				placeholder="选择研究员"
-				@click.native="clickRsChoose(formData.selectResearchers[0].researcherId,0)" 
+				@click.native="clickRsChoose(0)"
 			/>
 			<van-field 
 				:value="formatterLabelTime(formData.selectResearchers[0].startTime)"
 				is-link 
 				readonly 
-				clickable 
+				clickable
 				name="datetimePicker" 
 				label="开始时间" 
 				placeholder="选择开始时间"
-				@click.native="clickTimeChoose(formData.selectResearchers[0].startTime,0,'start')" 
+				@click.native="clickTimeChoose(0,'start')"
 			/>
 
 			<van-field 
 				:value="formatterLabelTime(formData.selectResearchers[0].endTime)"
-				is-link 
-				readonly 
-				clickable 
-				name="datetimePicker" 
-				label="结束时间" 
+				is-link
+				readonly
+				clickable
+				name="datetimePicker"
+				label="结束时间"
 				placeholder="选择结束时间"
-				@click.native="clickTimeChoose(formData.selectResearchers[0].endTime,0,'end')" 
+				@click.native="clickTimeChoose(0,'end')"
 			/>
-			
+
 			<!-- 追加后的研究员 -->
-			<view class="add-user-list" v-for="addindex in addResearchersIdx" :key="addindex">
+			<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="minus"/>		
+					<van-icon name="minus" />
 				</view>
-				<van-field
-					:value="formData.selectResearchers[addindex].researcherId"
-					is-link 
+				<van-field 
+					:value="formatRsLable(formData.selectResearchers[addindex].researcherId)"
+					is-link
 					readonly
-					clickable 
-					name="picker" 
+					clickable
+					name="picker"
 					label="研究员"
 					placeholder="选择研究员"
-					@click.native="isResearcherPicker = true" 
+					@click.native="clickRsChoose(addindex)"
 				/>
-				<van-field 
-					:value="formData.selectResearchers[addindex].startTime"
-					is-link 
-					readonly 
-					clickable 
-					name="datetimePicker" 
-					label="开始时间" 
+				<van-field
+					:value="formatterLabelTime(formData.selectResearchers[addindex].startTime)"
+					is-link
+					readonly
+					clickable
+					name="datetimePicker"
+					label="开始时间"
 					placeholder="选择开始时间"
 					:formatter="formatterLabelTime"
-					@click.native="clickTimeChoose(formData.selectResearchers[addindex].startTime,addindex,'start')" 
+					@click.native="clickTimeChoose(addindex,'start')"
 				/>
-				
-				<van-field 
-					:value="formData.selectResearchers[addindex].endTime"
-					is-link 
-					readonly 
-					clickable 
-					name="datetimePicker" 
-					label="结束时间" 
-					placeholder="选择结束时间" 
+
+				<van-field
+					:value="formatterLabelTime(formData.selectResearchers[addindex].endTime)"
+					is-link
+					readonly
+					clickable
+					name="datetimePicker"
+					label="结束时间"
+					placeholder="选择结束时间"
 					:formatter="formatterLabelTime"
-					@click.native="clickTimeChoose(formData.selectResearchers[addindex].endTime,addindex,'end')" 
+					@click.native="clickTimeChoose(addindex,'end')"
 				/>
 			</view>
 
-			<view class="add-user-btn" @click="addResearcherHandle" v-if="['路演', '公开会议'].includes(formData.activityType)">
+			<view class="add-user-btn" @click="addResearcherHandle"
+				v-if="['路演', '公开会议'].includes(formData.activityType)">
 				<van-icon name="plus" />添加研究员
-				
+
 			</view>
 		</van-form>
-		
+
 		<div class="submit-bot">
 			<van-button type="primary" color="#3385FF" class="btn" round block @click="submitHandle">提交</van-button>
 		</div>
@@ -175,14 +177,24 @@
 
 		<!-- 选择活动类型 -->
 		<van-popup :show="isActivityPicker" position="bottom">
-			<van-picker show-toolbar :columns="activiytyTypes" @confirm="confirmActivityType"
-				@cancel="isActivityPicker=false"/>
-		</van-popup>	
-		
+			<van-picker 
+				show-toolbar 
+				:columns="activiytyTypes" 
+				:default-index="activiytyTypes.indexOf(formData.activityType)" 
+				@confirm="confirmActivityType"
+				@cancel="isActivityPicker=false" 
+			/>
+		</van-popup>
+
 		<!-- 选择路演形式 -->
 		<van-popup :show="isRoadshowTypePicker" position="bottom">
-			<van-picker show-toolbar :columns="['线上','线下']" @confirm="confirmRoadshowType"
-				@cancel="isRoadshowTypePicker=false"/>
+			<van-picker 
+				show-toolbar 
+				:columns="['线上','线下']" 
+				:default-index="['线上','线下'].indexOf(formData.roadshowType)"
+				@confirm="confirmRoadshowType"
+				@cancel="isRoadshowTypePicker=false" 
+			/>
 		</van-popup>
 
 		<!-- 选择研究员 -->
@@ -191,28 +203,34 @@
 				<text class="cancel" @click="cancelResearcher">取消</text>
 				<text class="ensure" @click="confirmResearcher">确认</text>
 			</view>
-			<van-tree-select
-			  :items="researcherList"
-				:main-active-index="rs_picker.firstindex"
+			<van-tree-select 
+				:items="researcherList" 
+				:main-active-index="rs_picker.firstindex" 
 				:active-id="rs_picker.id"
-				@click-nav="clickFirstHandle"
-				@click-item="clickItemHandle"
-			/>	
+				@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-datetime-picker 
+				:value="pickerForm.time" 
+				type="datetime" 
+				:formatter="formatterPickerTime"
+				@confirm="confirmTime" 
+				@cancel="() => {isTimePicker = false;pickerForm.time=''}" 
+			/>
 		</van-popup>
-		
+
 		<!-- 选择地区 -->
-		<van-popup v-model:show="showArea" position="bottom">
-		  <van-area
-		    :area-list="areaList"
-		    @confirm="onConfirm"
-		    @cancel="showArea = false"
-		  />
+		<van-popup :show="isAreaPicker" position="bottom">
+			<van-area 
+				:area-list="areaList" 
+				:columns-num="2"
+				@confirm="confirmArea" 
+				@cancel="isAreaPicker = false"
+			/>
 		</van-popup>
 	</view>
 </template>
@@ -225,8 +243,7 @@
 	export default {
 		mixins: [mixin],
 		data() {
-			return {
-			};
+			return {};
 		},
 		methods: {
 
@@ -249,14 +266,14 @@
 					startTime: startTime,
 					endTime: endTime,
 				}];
-			
+
 			}
 		},
 
 		onLoad() {
 			this.initSetState();
 		},
-		
+
 		onShow() {
 			this.getResearcherList();
 		}
@@ -266,18 +283,21 @@
 <style lang="scss" scoped>
 	.addactiyity-container {
 		padding-bottom: 200rpx;
-		.add-user-btn{
+
+		.add-user-btn {
 			color: #3385ff;
 			font-size: 32rpx;
 			padding: 20rpx;
 		}
-		.del-cont  {
+
+		.del-cont {
 			font-size: 50rpx;
 			color: #f00;
 			display: flex;
 			justify-content: flex-end;
 			padding: 10rpx 30rpx;
 		}
+
 		.submit-bot {
 			position: fixed;
 			left: 0;
@@ -292,23 +312,27 @@
 			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%;
 			}
 		}
+
 		.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">
@@ -316,10 +340,10 @@
 		.van-tree-select__item--active {
 			color: #1989fa !important;
 		}
+
 		.van-sidebar-item--selected {
 			border-color: #1989fa !important;
 		}
-		
-	}
 
-</style>
+	}
+</style>

pages-roadshow/addActivity/mixin.js

@@ -3,13 +3,11 @@ import {
 	addActivity,
 	editActivity
 } from '@/api/roadshow/index.js';
-import { deepClone } from '../utils/util.js'
+import { getDefaultOption } from './common.js';
+import { areaList } from '../utils/area.js';
+
 const moment = require('../utils/moment.js');
 
-const citys = {
-  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-  福建: ['福州', '厦门', '莆田', '三明', '泉州'],
-};
 
 export default {
 	data() {
@@ -37,6 +35,8 @@ export default {
 					}
 				], // 选择的研究员
 			},
+			
+			
 			isActivityPicker: false, //活动类型弹窗
 			isResearcherPicker: false, //研究员弹窗
 			isTimePicker: false, //时间弹窗
@@ -52,7 +52,7 @@ export default {
 				time: '',
 			}, //picker的默认选中
 			selectObj: {}, //选中的日期信息 下标
-			selectRsObj: {}, //选中的研究员下标
+			selectRsIndex: '', //选中的研究员下标
 
 			weekMap: new Map([
 				['1','周一'],
@@ -63,18 +63,9 @@ export default {
 				['6','周六'],
 				['7','周日']
 			]),
-			activiytyTypes: [],
-			researcherList: [
-				 {
-					values: Object.keys(citys),
-					className: 'column1',
-				},
-				{
-					values: citys['浙江'],
-					className: 'column2',
-					defaultIndex: 2,
-				},
-			],
+			activiytyTypes: [],//活动类型
+			researcherList: [],//研究员列表
+			areaList,//地区数据
 		}
 	},
 	computed: {
@@ -90,7 +81,34 @@ export default {
 	watch: {
 		'formData.activityType': {
 			handler() {
-				this.initSetState();
+				
+				const {
+					RoleTypeCode
+				} = JSON.parse(uni.getStorageSync('userInfo')) || null;
+				const {
+					defaultActivityType,
+					activityTypeList,
+					startTime,
+					endTime
+				} = getDefaultOption(RoleTypeCode, 2);
+				
+				this.formData.roadshowType = '';
+				this.formData.roadshowPlatform = '';
+				this.formData.roadshowCity = '';
+				this.formData.companyId = 0;
+				this.formData.companyName = '';
+				this.formData.meetingTheme = '';
+				this.formData.partnersName = '';
+				this.formData.activityClass = '';
+				this.companyInfo = '';
+				this.formData.selectResearchers = [
+					{
+						researcherId: '',
+						startTime: startTime,
+						endTime: endTime,
+					},
+				];
+				// this.$refs.form.clearValidate();
 			}
 		}
 	},
@@ -100,7 +118,6 @@ export default {
 		async getResearcherList() {
 			const res = await researcherList();
 			if (res.code !== 200) return
-			// this.researcherList = this.formatResearcherList(res.data);
 			this.researcherList = res.data.map(group => ({
 				...group,
 				text: group.GroupName,
@@ -110,26 +127,6 @@ export default {
 					id: child.AdminId
 				})) : []
 			}));
-			console.log(this.researcherList)
-		},
-
-		formatResearcherList(list) {
-			list.forEach((group) => {
-				// 对组做处理
-				group.text = group.GroupName;
-				// 如果有列表
-				if (group.ResearcherList) {
-					group.ResearcherList.forEach((item) => {
-						// 对研究员做处理
-						item.text = item.RealName;
-						item.values = item.AdminId;
-					});
-				} else {
-					// 没有列表
-					group.values = group.GroupId;
-				}
-			});
-			return list;
 		},
 
 		/* 添加研究员 */
@@ -226,9 +223,18 @@ export default {
 
 			if (res.code !== 200) return;
 			
-			uni.showToast({
-				title: '提交成功',
-				icon: 'success'
+			const { text,content,link,query } = this.setDynamicLink(this.formData.activityType);
+			
+			uni.showModal({
+				title:text,
+				content,
+				confirmText:'去查看',
+				confirmColor: '#576b95',
+				success: function(res) {
+					if(res.confirm) uni.navigateTo({
+						url:`${link}?type=${query.type}`,
+					})
+				}
 			})
 
 		},
@@ -245,28 +251,27 @@ export default {
 		
 		/* 选择活动 */
 		confirmActivityType({detail}) {
+			console.log(detail.value)
 			this.formData.activityType = detail.value;
 			this.isActivityPicker = false;
 		},
 
 		/* 前往客户搜索 */
 		goSearchCompany() {
-			// uni.navigateTo({
-			// 	url: ''
-			// })
+			uni.navigateTo({
+				url: `/pages-approve/search/index?type=roadshow`
+			})
 		},
 		
 		/* 选择研究员弹窗展开 */
-		clickRsChoose(val,index) {
+		clickRsChoose(index) {
 			this.isResearcherPicker = true;
 			this.rs_picker= {
 				firstindex:0,
-				id: this.formData.selectResearchers[index].researcherId || []//选择研究员块级标识
+				id: this.formData.selectResearchers[index].researcherId ? this.formData.selectResearchers[index].researcherId.map(item => item) : []//选择研究员块级标识
 			}
-			// this.selectObj = {
-			// 	index,
-			// 	type
-			// }
+			
+			this.selectRsIndex = index;
 		},
 			
 		/* 选择研究员分组 */
@@ -302,7 +307,7 @@ export default {
 		/* 选择研究员确认 */
 		confirmResearcher() {
 			console.log('确认选择')
-			this.formData.selectResearchers[0].researcherId = this.rs_picker.id;
+			this.formData.selectResearchers[this.selectRsIndex].researcherId =  this.rs_picker.id;
 			
 			this.isResearcherPicker = false;
 		},
@@ -312,7 +317,6 @@ export default {
 			if(!arr) return '';
 			if( arr instanceof Array ) {
 				return arr.map(item => {
-					console.log(this.findName(item))
 					return this.findName(item)
 				})
 			}else {
@@ -327,22 +331,31 @@ export default {
 			this.formData.roadshowType = detail.value;
 			this.isRoadshowTypePicker = false;
 		},
+		
+		/* 选择地区 */
+		confirmArea({detail}) {
+			const { values } = detail;
+			this.formData.roadshowCity = values.map(item => item.name);
+			console.log(this.formData.roadshowCity)
+			
+			this.isAreaPicker = false;
+		},
 
 		/* 点击选择时间 */
-		clickTimeChoose(val, index, type) {
-			this.isTimePicker = true;
-			this.pickerForm.time = type === 'start' ? this.formData.selectResearchers[index].startTime : this.formData
-				.selectResearchers[index].endTime;
+		clickTimeChoose(index, type) {
+			console.log(this.formData.selectResearchers[index])
+			this.pickerForm.time = type === 'start' ? this.formData.selectResearchers[index].startTime : this.formData.selectResearchers[index].endTime;
 			this.selectObj = {
 				index,
 				type
 			}
+			setTimeout(() => {
+				this.isTimePicker = true;
+			})
 		},
 
-		/* 选择开始时间 */
-		confirmTime({
-			detail
-		}) {
+		/* 选择时间 */
+		confirmTime({detail}) {
 			// console.log(val)
 			const {
 				index,
@@ -356,6 +369,7 @@ export default {
 			}
 
 			this.isTimePicker = false;
+			this.pickerForm.time = '';
 		},
 		
 		/* 添加完成后 拼接动态内容 */
@@ -364,34 +378,45 @@ export default {
 				case '内部会议' : return {
 					text: '添加成功，已加入研究员日历',
 					content: `可前往【我的日历】-【${type}】查看`,
+					link: '/pages-approve/activity/list',
 					query: {
-						act_tab: 3
+						type: 3
 					},
 				}
 				case '报告电话会' : return {
 					text: '添加成功，已加入研究员日历',
 					content: `可前往【我的日历】-【${type}】查看`,
+					link: '/pages-approve/activity/list',
 					query: {
-						act_tab: 4
+						type: 4
 					},
 				}
 				case '路演' : return {
 					text: '活动申请已提交，请等待研究员处理',
-					content: `可前往【我的日历】-【待处理申请】查看`,
+					content: `可前往【我的日历】-【活动申请】查看`,
+					link: '/pages-approve/activity/list',
 					query: {
-						act_tab: 1
+						type: 1
 					},
 				}
 				case '公开会议' : return {
 					text: '活动申请已提交，请等待研究员处理',
-					content: `可前往【我的日历】-【待处理申请】查看`,
+					content: `可前往【我的日历】-【活动申请】查看`,
+					link: '/pages-approve/activity/list',
 					query: {
-						act_tab: 1
+						type: 1
 					},
 				}
 			}
 		},
 
+		/* 绑定input输入value */
+		bindInputHandle(key,{detail}) {
+			console.log(key,detail)
+			this.formData[key] = detail;
+			console.log(this.formData.meetingTheme)
+		},
+
 		/* 格式化时间显示 */
 		formatterLabelTime(val) {
 			if(!val) return '';

pages-roadshow/utils/util.js

@@ -8,7 +8,7 @@ export const deepClone = (obj) => {
 	    key = keys[i];
 	    data = obj[key];
 	    if(data && typeof data === 'object'){
-	      newObj[key] = cloneDeepDi(data)
+	      newObj[key] = deepClone(data)
 	    }else{
 	      newObj[key] = data;
 	    }

pages.json

@@ -195,7 +195,8 @@
       "van-checkbox-group": "/wxcomponents/vant/checkbox-group/index",
       "van-datetime-picker": "/wxcomponents/vant/datetime-picker/index",
       "van-tree-select": "/wxcomponents/vant/tree-select/index",
-      "van-icon": "/wxcomponents/vant/icon/index"
+      "van-icon": "/wxcomponents/vant/icon/index",
+      "van-area": "/wxcomponents/vant/area/index"
     }
   },
   "tabBar": {