jy_total_process_master_cloud_h5/pages/calendar/MyCalendarForm.vue

<template>
	<view>
		<cu-custom :backUrl="'/pages/calendar/MyCalendar'" :isBack="true" bgColor="bg-gradual-blue" >
			<block slot="content">日程内容</block>
		</cu-custom>
		<u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm">
			<u-form-item label="日程内容" borderBottom prop="title" :required="true">
				<u--textarea v-model="inputForm.title" placeholder="请输入日程内容" border="none" style="border: 1px solid #ccc;"></u--textarea>
			</u-form-item>
			<u-form-item style="margin-top: 20px; text-align: center;" v-if="this.method === 'edit'">
				<el-button type="danger" @click="del" style="width: 100%;">
					<span style="margin: 0 auto;">删除</span>
				</el-button>
			</u-form-item>
			<u-form-item style="margin-top: 20px; text-align: center;">
				<el-button type="primary" @click="saveForm" style="width: 100%;">
					<span style="margin: 0 auto;">提交</span>
				</el-button>
			</u-form-item>
		</u--form>
	</view>
</template>

<script>
	import myCalendarService from "@/api/calendar/myCalendarService";
	import {mapState, mapMutations, mapActions} from 'vuex'
	export default {
		data() {
			return {
				title: "",
				method: "",
				visible: false,
				loading: false,
				inputForm: {
					id: "",
					title: "",
					startDate: "",
					endDate: "",
					userId: '',
				},
				rules: {
					'title': [
						{
							required: true,
							message: '日程内容不能为空',
							trigger: ['blur', 'change']
						}],
				}
			};
		},
		computed: mapState({
			userInfo: (state) => state.user.userInfo,
			avatar: (state) => state.user.avatar
		}),
		onLoad(options) {
			// 从 URL 参数中获取传递过来的index
			this.method = options.method;
			this.inputForm.id = options.id;
			this.inputForm.startDate = options.startDate;
			this.inputForm.endDate = options.endDate;
			this.init(this.method,this.inputForm.id,this.inputForm.startDate,this.inputForm.endDate)
		},
		methods: {
			init(method, id, startDate, endDate) {
				this.method = method;
				this.inputForm.id = id;
				if (method === "add") {
					this.title = `新建日程`;
				} else if (method === "edit") {
					this.title = "修改日程";
				} else if (method === "view") {
					this.title = "查看日程";
				}
				this.visible = true;
				this.loading = false;
				this.$nextTick(() => {
					this.$refs.inputForm.resetFields();
					if (method === "edit" || method === "view") {
						// 修改或者查看
						this.loading = true;
						myCalendarService
								.queryById(this.inputForm.id)
								.then((data) => {
									this.inputForm = this.recover(this.inputForm, data);
									this.loading = false;
								});
					} else {
						this.inputForm.startDate = this.formatStartDate(startDate)
						this.inputForm.endDate = this.formatStartDate(endDate)
					}
				});
			},
			del() {
				uni.showLoading()
				myCalendarService
						.delete(this.inputForm.id)
						.then((data) => {
							// 接口调用成功，隐藏加载动画
							uni.hideLoading();
							uni.showToast({
								title: data,
								icon: "none",
								duration:2000
							})
							uni.navigateTo({
								url: '/pages/calendar/MyCalendar' // DialogPage 对应的页面路径
							});
						})
						.catch(() => {
							this.loading = false;
						});
			},
			// 表单提交
			saveForm() {
				this.inputForm.userId = this.userInfo.id
				this.$refs.inputForm.validate().then(res => {
					uni.showLoading()
					myCalendarService
							.save(this.inputForm)
							.then((data) => {
								// 接口调用成功，隐藏加载动画
								uni.hideLoading();
								uni.showToast({
									title: data,
									icon: "none",
									duration:2000
								})
								uni.navigateTo({
									url: '/pages/calendar/MyCalendar' // DialogPage 对应的页面路径
								});
							})
							.catch(() => {
								this.loading = false;
							});
				}).catch((e)=>{
				})
			},
			formatStartDate(date) {
				const formattedDate = new Date(date);
				const year = formattedDate.getFullYear();
				const month = String(formattedDate.getMonth() + 1).padStart(2, '0');
				const day = String(formattedDate.getDate()).padStart(2, '0');
				const hours = String(formattedDate.getHours()).padStart(2, '0');
				const minutes = String(formattedDate.getMinutes()).padStart(2, '0');
				const seconds = String(formattedDate.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
		},
	};
</script>