PunchSettle-MiniProgram/pages/punchin-edit/punchin-edit.vue

<template>
	<main-layout :showHome="true" :showBack="true">
		<template>
			<uni-forms ref="punchInForm" :modelValue="punchInFormData" :label-width="80" :rules="punchInFormRules">
				<uni-section title="基本信息" padding="16px" type="line">
					<uni-forms-item label="任务名称" required name="taskName">
						<uni-easyinput v-model="punchInFormData.taskName" placeholder="请输入任务名称" />
					</uni-forms-item>
					<uni-forms-item label="奖励数" required name="rewardNum">
						<uni-easyinput v-model="punchInFormData.rewardNum" placeholder="请输入奖励数" type="number" />
					</uni-forms-item>
					<uni-forms-item label="周末双倍" required name="weekendDoubleFlag">
						<uni-data-checkbox v-model="punchInFormData.weekendDoubleFlag" :localdata="statusRange"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="全勤双倍" required name="fullAttendanceFlag">
						<uni-data-checkbox v-model="punchInFormData.fullAttendanceFlag" :localdata="statusRange"></uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item label="打卡类型" required name="category">
						<uni-data-select :localdata="categoryRange" v-model="punchInFormData.category"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="规则描述" name="description">
						<uni-easyinput type="textarea" v-model="punchInFormData.description" placeholder="请输入任务描述" />
					</uni-forms-item>
				</uni-section>
				<uni-section title="计数配置" padding="16px" type="line" v-if="punchInFormData.category == 1">
					<uni-forms-item label="判断规则" required name="rule">
						<uni-data-select :localdata="ruleRange" v-model="punchInFormData.rule"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="数值" required name="countTrack">
						<uni-easyinput v-model="punchInFormData.countTrack" placeholder="请输入目标数值" type="digit" />
					</uni-forms-item>
				</uni-section>
				<uni-section title="计时配置" padding="16px" type="line" v-if="punchInFormData.category == 2">
					<uni-forms-item label="判断规则" required name="rule">
						<uni-data-select :localdata="ruleRange" v-model="punchInFormData.rule"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="时间" required name="timeTrack">
						<picker mode="time" :value="punchInFormData.timeTrack" @change="timeChange">
							<view class="pick-box">{{punchInFormData.timeTrack}}</view>
						</picker>
					</uni-forms-item>
				</uni-section>
				<view class="button-container">
					<button type="default" style="width:300rpx;" @click="cancel">取消</button>
					<button type="primary" style="color:#ffffff;backgroundColor:#2A82E4;width:300rpx;" @click="savePunchIn">保存</button>
				</view>
			</uni-forms>
		</template>
	</main-layout>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { punchInApi } from '@/service/apis';
	import { ruleRange, categoryRange, statusRange } from '@/common/constants/punchin.js';
	
	// 组件
	/**
	 * 打卡任务表单
	 */
	const punchInForm = ref(null);
	
	// 属性
	/**
	 * 打卡任务表单数据
	 */
	const punchInFormData = ref({
		"rewardNum": 1,
		"weekendDoubleFlag": 1,
		"fullAttendanceFlag": 1,
		"category": 0,
		"rule": 0,
		"countTrack": 10,
		"timeTrack": "00:00"
	});
	
	/**
	 * 打卡任务表单规则
	 */
	const punchInFormRules = ref({
		taskName: {
			rules: [{
				required: true,
				errorMessage: '任务名称不能为空'
			}]
		},
		rewardNum: {
			rules: [{
				required: true,
				errorMessage: '奖励数值不能为空'
			}, {
				format: 'number',
				errorMessage: "请输入有效数字"
			}, {
				minimum:1,
				errorMessage: "最小值{minimum}"
			}]
		},
		weekendDoubleFlag: {
			rules: [{
				required: true,
				errorMessage: '周末双倍奖励不能为空'
			}]
		},
		fullAttendanceFlag: {
			rules: [{
				required: true,
				errorMessage: '全勤奖励不能为空'
			}]
		},
		category: {
			rules: [{
				required: true,
				errorMessage: '任务类型不能为空'
			}]
		},
		description: {
			rules: [{
				maxLength: 100,
				errorMessage: '描述不能超过{maxLength}个字符'
			}]
		},
		rule: {
			rules: [{
				required: true,
				errorMessage: '判断规则不能为空'
			}]
		},
		countTrack: {
			rules: [{
				required: true,
				errorMessage: '数值不能为空'
			}, {
				format: 'number',
				errorMessage: "请输入有效数字"
			}, {
				minimum:1,
				errorMessage: "最小值{minimum}"
			}]
		},
		timeTrack: {
			rules: [{
				required: true,
				errorMessage: '数值不能为空'
			}]
		}
	});

	/**
	 * 周末双倍奖励开关改变监听
	 */
	const weekendDoubleSwitchChange = (e) => {
		punchInFormData.value.weekendDoubleFlag = e.detail.value;
	}
	
	/**
	 * 全勤奖励开关改变监听
	 */
	const fullAttendanceSwitchChange = (e) => {
		punchInFormData.value.fullAttendanceFlag = e.detail.value;
	}
	
	/**
	 * 时间选择监听
	 */
	const timeChange = (e) => {
		punchInFormData.value.timeTrack = e.detail.value;
	}
	
	/**
	 * 保存打卡任务
	 */
	const savePunchIn = () => {
		punchInForm.value.validate(['id']).then(() => {
			return punchInApi.addPunchIn(punchInFormData.value)
		}).then(datt => {
			uni.showToast({
				title: '保存成功',
				icon: 'success',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 2000);
		});
	}
	
	/**
	 * 后退
	 */
	const cancel = () => {
		uni.navigateBack();
	}
	
	onLoad(async (e) => {
		if (e.id) {
			const res = await punchInApi.queryPunchInById({"id": e.id});
			res.fullAttendanceFlag = res.fullAttendanceFlag ? 1 : 0;
			res.weekendDoubleFlag = res.weekendDoubleFlag ? 1 : 0;
			punchInFormData.value = res;
		}
	});
</script>

<style lang="scss" scoped>
	.pick-box {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		
		width: auto;
		position: relative;
		overflow: hidden;
		flex: 1;
		line-height: 1;
		font-size: 14px;
		height: 35px;
		padding-left: 10px;
	}
	
	.button-container {
		background-color: #FFFFFF;
		display: flex; /* 使用Flexbox布局 */
		justify-content: space-between; /* 按钮之间的空间分布 */
		padding: 20rpx; /* 容器两侧的空白填充 */
	}
</style>