material_applet/pagesMy/spec/add.vue

<template>
	<view class="content">
		<view class="one">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="form" labelWidth="80px">
				<uni-forms-item label="名称" required name="name">
					<uni-easyinput v-model="form.name" placeholder="请输入名称" />
				</uni-forms-item>
				<uni-forms-item label="销售价格" required name="money">
					<uni-easyinput v-model="form.money" placeholder="请输入销售价格" />
				</uni-forms-item>
				<uni-forms-item label="库存" required name="num">
					<uni-easyinput v-model="form.num" placeholder="请输入库存" />
				</uni-forms-item>
				<uni-forms-item label="图片" required name="file">
					<upload class='upload' :list="form.file" name="file" :count="6" @uplSuc="uplSuc" @uplDel="uplDel">
					</upload>
				</uni-forms-item>
				<uni-forms-item label="是否使用" required name="is_use">
					<uni-data-select v-model="form.is_use" :localdata="is_useList" @change="is_usechange">
					</uni-data-select>
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="submit('valiForm')">确定</button>
		</view>
	</view>
</template>

<script>
	import upload from '../../components/upload/index.vue';
	export default {
		components: {
			upload
		},
		data() {
			return {
				goods: '',
				id: '',
				user: {},
				form: {
					file: []
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '名称不能为空'
						}]
					},
					money: {
						rules: [{
							required: true,
							errorMessage: '销售价格不能为空'
						}]
					},
					num: {
						rules: [{
							required: true,
							errorMessage: '库存不能为空'
						}]
					},
					file: {
						rules: [{
							required: true,
							errorMessage: '图片不能为空'
						}]
					},
					is_use: {
						rules: [{
							required: true,
							errorMessage: '是否使用不能为空'
						}]
					},
				},
				// 字典表
				is_useList: [],
			}
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e && e.id || '');
			that.$set(that, `goods`, e && e.goods || '');
			that.searchToken();
			await that.searchOther();
			await that.search();
		},

		methods: {
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) {
						that.$set(that, `user`, res);
						that.$set(that.form, `goods`, that.goods);
					}
				} catch (e) {
					uni.showToast({
						title: err.errmsg,
						icon: 'error',
						duration: 2000
					});
				}
			},
			async search() {
				const that = this;
				if (that.id) {
					const res = await that.$api(`/Specs/${that.id}`, 'GET', {})
					if (res.errcode == '0') {
						that.$set(that, `form`, res.data)
					} else {
						uni.showToast({
							title: res.errmsg,
						});
					}
				}
			},
			// 是否使用选择
			is_usechange(is_use) {
				const that = this;
				that.$set(that.form, `is_use`, is_use);
			},
			// 图片上传
			uplSuc(e) {
				const that = this;
				that.$set(that.form, `${e.name}`, [...that.form[e.name], e.data]);
			},
			// 图片删除
			uplDel(e) {
				const that = this;
				let data = that.form[e.name];
				let arr = data.filter((i, index) => index != e.data.index);
				that.$set(that.form, `${e.name}`, arr)
			},
			// 提交
			submit(ref) {
				const that = this;
				that.$refs[ref].validate().then(async params => {
					let res;
					if (that.id) res = await that.$api(`/Specs/${that.id}`, 'POST', that.form);
					else res = await that.$api(`/Specs`, 'POST', that.form);
					if (res.errcode == '0') {
						uni.showToast({
							title: '维护信息成功',
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			async searchOther() {
				const that = this;
				let res;
				//类型
				res = await that.$api('/DictData', 'GET', {
					type: 'is_use',
					is_use: '0'
				})
				if (res.errcode == '0') {
					let is_useList = []
					for (let val of res.data) {
						is_useList.push({
							text: val.label,
							value: val.value
						})
					}
					that.$set(that, `is_useList`, is_useList);
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;

		.one {
			padding: 3vw;

			.button {
				margin: 2vw 0 0 0;
				background-color: var(--f3CColor);
				color: var(--mainColor);
			}
		}
	}
</style>