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

<template>
	<view class="addactiyity-container">
		<van-form>
			<van-field 
				:value="formatterLabelTime(formData.startTime)"
				is-link 
				readonly 
				clickable
				name="datetimePicker" 
				label="开始时间" 
				placeholder="选择开始时间"
				@click.native="clickTimeChoose('start')"
			/>

			<van-field 
				:value="formatterLabelTime(formData.endTime)"
				is-link
				readonly
				clickable
				name="datetimePicker"
				label="结束时间"
				placeholder="选择结束时间"
				@click.native="clickTimeChoose('end')"
			/>
			
			<van-field
				:value="formData.matterContent"
				clickable
				label="事项内容" 
				type="textarea" 
				rows="1" 
				autosize 
				placeholder="请输入事项内容" 
				@change="bindInputHandle('matterContent',$event)"
			/>
		</van-form>

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

		<!-- 选择时间 -->
		<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>
		
	</view>
</template>

<script>
	import {
		getDefaultOption
	} from '../addActivity/common.js';
	import { validateForm } from '../utils/validate.js';
	import { addMatter,editMatter } from '@/api/roadshow/index.js';
	
	const moment = require('../utils/_moment.js');
	export default {
		data() {
			return {
				edit_matter_id:'',
				isTimePicker: false,
				select_type: '',
				
				pickerForm: {
					time: ''
				},
				
				formData: {
					startTime: '',
					endTime: '',
					matterContent: "",
				},
				weekMap: new Map([
					['1','周一'],
					['2','周二'],
					['3','周三'],
					['4','周四'],
					['5','周五'],
					['6','周六'],
					['7','周日']
				]),
			};
		},
		methods: {
			
			/* 取消 */
			cancelHandle() {
				uni.navigateBack({
					delta:1
				})
			},
			
			/* 提交表单 */
			async submitHandle() {
				let isCheck = validateForm('事项',this.formData);
				console.log(isCheck)
				if(!isCheck) return
				
				let params = {
					MatterContent: this.formData.matterContent,
					StartDate: moment(this.formData.startTime).format('YYYY-MM-DD'),
					EndDate: moment(this.formData.endTime).format('YYYY-MM-DD'),
					StartTime: moment(this.formData.startTime).format('HH:mm:ss'),
					EndTime: moment(this.formData.endTime).format('HH:mm:ss'),
					StartWeek: moment(this.formData.startTime
					).format('ddd'),
					EndWeek: moment(this.formData.endTime
					).format('ddd')
				}
	
				// 发送请求
				const { code } = this.edit_matter_id ? await editMatter({
					RsMattersId: Number(this.edit_matter_id),
					...params
				}) : await addMatter(params);
	
				if(code !== 200) return;
				
				uni.showToast({
					title: this.edit_matter_id ? '提交成功' : '添加成功',
					icon: 'success',
				})
				setTimeout(() => {
					this.cancelHandle();
				},1800)
			},
			
			/* 点击选择时间 */
			clickTimeChoose(type) {
				this.pickerForm.time = type === 'start' ? this.formData.startTime : this.formData.endTime;
				this.select_type = type;
				setTimeout(() => {
					this.isTimePicker = true;
				})
			},
			
			/* 选择时间 */
			confirmTime({detail}) {
				// console.log(val)
			
				if (this.select_type === 'start') {
					this.formData.startTime = detail;
				} else {
					this.formData.endTime = detail;
				}
			
				this.isTimePicker = false;
				this.pickerForm.time = '';
			},
			
			/* 绑定input输入value */
			bindInputHandle(key,{detail}) {
				this.formData[key] = detail;
			},
			
			/* 格式化时间显示 */
			formatterLabelTime(val) {
				if(!val) return '';
				const date = moment(val).format('MM.DD(ddd)  HH:mm');
				return date;
			
			},
			
			/* 格式化弹窗时间显示 */
			formatterPickerTime(type, val) {
				switch (type) {
					case 'year':
						return val + '年';
					case 'month':
						return val + '月';
					case 'day':
						return val + '日';
					case 'hour':
						return val + '时';
					case 'minute':
						return val + '分';
				}
			},

			/* 设置默认状态 */
			initSetState(options) {
				const {
					RoleTypeCode
				} = JSON.parse(uni.getStorageSync('userInfo')) || null;
				const {
					startTime,
					endTime
				} = getDefaultOption(RoleTypeCode, 2);
				this.formData = {
					startTime: startTime,
					endTime: endTime,
					matterContent: ''
				};
				
				/* 编辑时回显表单 */
				if(options.edit_matter_id) {
					const { form,edit_matter_id } = options;
					this.formData = {...this.formData,...JSON.parse(form)};
					this.edit_matter_id = Number(edit_matter_id);
				}
				// console.log(this.formData)
				
				uni.setNavigationBarTitle({
					title: this.edit_matter_id ? '修改事项' : '添加事项'
				})
			}
		},

		onLoad(options) {
			this.initSetState(options);
			
			this.getOpenerEventChannel().on('emitBackData', (data)=> {
				this.initSetState(data);
			})
		},

		onShow() {
		}
	}
</script>

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


		.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;
			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: 220rpx;
				height: 60rpx;
				margin-right: 30rpx;
			}
		}

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

		.van-sidebar-item--selected {
			border-color: #1989fa !important;
		}

	}
</style>