cxyy-applet/pagesMy/preliminary/edit.vue

<template>
	<view class="container main">
		<view class="one">
			<view class="list" v-for="(item, index) in investigate" :key="index">
				<div class="problem">
					<text v-if="item.is_must=='0'" class="t-icon t-icon-xinghao"></text>
					<span v-if="item.is_must=='0'">{{item.problem}}</span>
					<span style="margin: 0 0 0 2vw;" v-else>{{item.problem}}</span>
				</div>
				<div class="type" v-if="item.type =='0'">
					<div class="remark" v-if="item.remark">{{item.remark}}</div>
					<uni-data-checkbox v-model="item.reply" :localdata="item.answer"
						:map="{text:'text',value:'text'}" />
					<div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
				</div>
				<div class="type" v-if="item.type =='1'">
					<div class="remark" v-if="item.remark">{{item.remark}}</div>
					<uni-data-checkbox v-model="item.reply" multiple :localdata="item.answer"
						:map="{text:'text',value:'text'}" />
					<div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
				</div>
				<div class="type" v-if="item.type =='2'">
					<div class="remark" v-if="item.remark">{{item.remark}}</div>
					<uni-data-select v-model="item.reply" :localdata="item.answer"></uni-data-select>
					<div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
				</div>
				<div class="type" v-if="item.type =='3'">
					<div class="remark" v-if="item.remark">{{item.remark}}</div>
					<uni-easyinput v-model="item.reply" :placeholder="getField(item.problem)"></uni-easyinput>
					<div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
				</div>
				<div class="type" v-if="item.type =='4'">
					<div class="remark" v-if="item.remark">{{item.remark}}</div>
					<uni-easyinput type="textarea" v-model="item.reply"
						:placeholder="getField(item.problem)"></uni-easyinput>
					<div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
				</div>
				<div class="type" v-if="item.type =='5'">
					<div class="remark" v-if="item.remark">{{item.remark}}</div>
					<upload class='upload' :list="item.reply" name="reply" :count="1" @uplSuc="uplSuc($event,item)"
						@uplDel="uplDel($event,item)">
					</upload>
					<div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
				</div>
				<div class="type" v-if="item.type =='6'">
					<div class="list">
						<div v-for="(aa, ina) in item.answer" :key="ina" class="name">{{aa.text}}</div>
					</div>
					<div class="list" v-for="(gg, inx) in item.reply" :key="inx">
						<div v-for="(aa, ina) in item.answer" :key="ina" class="input">
							<uni-easyinput v-model="gg[aa.text]" :clearable="false"
								:placeholder="getField(aa.text)"></uni-easyinput>
						</div>
						<uni-icons @tap="toDel(item,gg.sid)" class="icon" type="closeempty" size="20"></uni-icons>
					</div>
					<div class="add" @tap="toAdd(item)">+新增一行</div>
					<div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
				</div>
				<div class="type" v-if="item.type =='7'">
					<image class="image" v-if="item.answer&&item.answer.length>0" v-for="(as, img) in item.answer"
						:key="img" :src="getUrl(as.url)"></image>
					<div class="remark" v-if="item.remark">{{item.remark}}</div>
				</div>
			</view>
			<view class="button">
				<button type="warn" @tap="toSave">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import upload from '../../components/upload/index.vue';
	import moment from 'moment';
	export default {
		components: {
			upload
		},
		data() {
			return {
				id: '',
				user: {},
				info: {},
				investigate: [],
				errors: {}
			}
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e && e.id || '');
			await that.searchToken();
			await that.search();
		},
		methods: {
			// 用户信息
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) {
						const user = that.$jwt(res);
						that.$set(that, `user`, user);
					}
				} catch (e) {}
			},
			// 查询
			async search() {
				const that = this;
				if (that.id) {
					let res;
					res = await that.$api(`/matchReg/${that.id}`, 'GET', {})
					if (res.errcode == '0') {
						that.$set(that, `info`, res.data)
						if (res.data.info && res.data.info.length > 0) {
							for (let val of res.data.info) {
								if (val.type == '2') {
									for (let s of val.answer) {
										s.value = s.text
									}
								}
							}
							that.$set(that, `investigate`, res.data.info)
						}
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						});
					}
				}
			},
			getField(data) {
				let res = "请输入内容"
				if (data) res = `请输入${data}`
				return res
			},
			// 图片处理
			getUrl(e) {
				const that = this;
				if (e) return that.$config.serverFile + e
			},
			// 图片上传
			uplSuc(e, item) {
				const that = this;
				for (let val of that.investigate) {
					if (val.sid == item.sid) val.reply = [e.data]
				}
			},
			// 图片删除
			uplDel(e, item) {
				const that = this;
				for (let val of that.investigate) {
					if (val.sid == item.sid) val.reply = []
				}
			},
			// 新增一行
			toAdd(item) {
				const that = this;
				for (let val of that.investigate) {
					if (val.sid == item.sid) {
						let answer = []
						let obj = {
							sid: moment().valueOf(),
						}
						for (let s of val.answer) {
							obj[s.text] = '';
						}
						answer.push(obj)
						if (val.reply) val.reply = [...val.reply, ...answer, ]
						else val.reply = answer
					}
				}
			},
			// 删除一行
			toDel(item, sid) {
				const that = this;
				if (item && item.reply && item.reply.length > 0) {
					let answer = item.reply.filter((i) => i.sid != sid)
					for (let val of that.investigate) {
						if (val.sid == item.sid) {
							val.reply = answer
						}
					}
				}
			},
			// 自定义的验证函数
			validateObject(arr) {
				const errors = {};
				for (const obj of arr) {
					if (obj.is_must == '0') {
						if (!obj.reply || obj.reply.length == 0) {
							if (obj.type == '0' || obj.type == '1' || obj.type == '1') errors[obj.problem] =
								`请选择${obj.problem}`
							else if (obj.type == '6') errors[obj.problem] = `请上传${obj.problem}`
							else errors[obj.problem] = `请填写${obj.problem}`
						}
					}
				}
				// 如果有错误，返回错误对象
				if (Object.keys(errors).length > 0) {
					return errors
				}
				// 如果没有错误，返回null或undefined
				return null
			},
			async toSave() {
				const that = this;
				const errorsInfo = await that.validateObject(that.investigate)
				// 检查是否有错误
				if (errorsInfo) {
					that.$set(that, `errors`, errorsInfo)
					// 遍历错误对象并显示错误信息
					for (const key in errorsInfo) {
						if (errorsInfo.hasOwnProperty(key)) {
							console.error(`${key} 错误: ${errorsInfo[key]}`);
						}
					}
				} else {
					that.$set(that, `errors`, {})
					let data = {
						id: that.id,
						status: '0',
						info: that.investigate
					}
					const res = await that.$api(`/matchReg/${that.id}`, 'POST', data)
					if (res.errcode == '0') {
						uni.showModal({
							content: "修改报名信息成功！",
							showCancel: false
						});
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						});
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.one {
			padding: 2vw;

			.list {
				.problem {
					display: flex;
					align-items: center;

					.t-icon {
						width: 30px !important;
						height: 30px !important;
					}
				}

				.type {
					padding: 2vw 0 2vw 2vw;

					.list {
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 2vw 0;

						.name {
							width: 50%;
							text-align: center;
						}

						.input {
							margin: 0 1vw 0 0;

							.name {
								width: 50%;
								text-align: center;
								margin: 0 0 2vw 0;
							}
						}

						.icon {
							display: none;
							margin: 1vw 0 0 0;
						}
					}

					.list:hover {
						.icon {
							display: block;
						}
					}

					.add {
						border: 1px solid #e5e5e5;
						border-radius: 5px;
						text-align: center;
						padding: 2vw;
					}

					.image {
						width: 96%;
					}

					.error-message {
						text-align: left;
						margin: 5px 0 0 8px;
						color: var(--fF0Color);
						font-size: var(--font12Size);
					}

					.remark {
						margin: 2vw;
						font-size: 12px;
						color: red;
					}
				}
			}

			.button {
				margin: 2vw 0 0 0;
				padding: 2vw;
				text-align: center;

				button {
					background-color: var(--f3CColor);
					font-size: var(--font14Size);
					border-radius: 2vw;
				}
			}
		}
	}
</style>