iot-platform-app/pages/supplyChain/purchase/add.vue

<template>
	<view class="bg-f9 warehouse-add">
		<header-bar :title="submitType === 'add' ? '添加申购' : '修改申购'"></header-bar>
		<view class="example" v-for="(i,index) in formList" :key="i.id">
			<view class="example-title">
				申购明细{{index + 1}}
			</view>
			<uni-forms label-position="top" :modelValue="i" ref="form" :rules="rules">
				<uni-forms-item label="物品名称" required name="classifyId">
					<uni-data-picker v-model="form.classifyId" :map="{text:'label',value:'id'}" :localdata="treeData"
						popup-title="请选择物料" @change="treeChange">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="单位" required name="type">
					<uni-easyinput v-model="form.unit" :disabled="true" placeholder="选择物料后自动输入" />
				</uni-forms-item>
				<uni-forms-item label="申购数量">
					<uni-easyinput v-model="form.code" placeholder="请输入" />
				</uni-forms-item>
				<!-- <uni-forms-item label="到货时间" required name="unit">
					<uni-data-select v-model="form.type" :disabled="true" :localdata="types"></uni-data-select>
				</uni-forms-item> 
				<uni-forms-item label="申购原因" name="introduce">
					<uni-easyinput type="textarea" v-model="form.introduce" placeholder="请输入自我介绍" />
				</uni-forms-item> -->
			</uni-forms>
		</view>
		<button class="add-list" style="margin-bottom: 140rpx" @click="addList">+ 添加明细</button>
		<view style="height:200rpx">
			
		</view>
		<button class="submit" @click="submitForm">提交</button>
		
	</view>
</template>

<script>
	import headerBar from '../../../components/header-bar/index.vue'
	import Vue from 'vue'
	export default {
		components: {
			headerBar
		},
		data() {
			return {
				formList:[
					{
						name: '',
						type: null,
						classifyId: null,
						code: null,
						unit: null,
						introduce: null,
						id:Date.now()
					}
				],
				form: {
					name: '',
					type: null,
					classifyId: null,
					code: null,
					unit: null,
					introduce: null,
				},
				types: [{
					text: '半成品',
					value: '0'
				}, {
					text: '成品',
					value: '1'
				}],
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入产品名称',
						}, ]
					},
					// 对email字段进行必填验证
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择产品类型',
						}, ]
					},
					unit: {
						rules: [{
							required: true,
							errorMessage: '请输入产品单位',
						}, ]
					},
					classifyId: {
						rules: [{
							required: true,
							errorMessage: '请选择产品分类',
						}, ]
					},
					
					
				},
				submitType: 'add',
				treeData: [],
			}
		},
		onLoad(e) {
			if (e.id) {
				this.form.id = e.id
				this.form.remarks = e.remarks
				this.form.type = e.type
				this.form.name = e.name
				this.submitType = 'edit'
			}
			this.getTree()
		},
		methods: {
			addList(){
				const v = this
				this.formList.push({
						name: '',
						type: null,
						classifyId: null,
						code: null,
						unit: null,
						introduce: null,
						id:Date.now()
					})
			},
			treeChange() {},
			getTree() {
				const v = this
				v.$post('/api/basics//classify/tree', {
					type: 1
				}).then(res => {
					if (res.code === 200) {
						v.treeData = res.data
					}

				})
			},
			submitForm() {
				const v = this
				this.$refs.form.validate().then(res => {
					uni.showLoading({
						title: '加载中'
					});
					v.$post('/api/basics/product/' + this.submitType, v.form).then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: this.submitType == 'add' ? '添加成功' : '修改成功',
								duration: 1000,
								icon: 'success'
							})
						}
						uni.hideLoading()
						let pages = getCurrentPages(); // 获取页面栈
						let prePage = pages[pages.length - 2]; //获取上一页
						prePage.$vm.needRefresh = true; // 需要刷新
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
		},
	}
</script>

<style lang="less">
	.add-list{
		background-color: #fff;
		color: #999;
	}
	.example{
		margin-bottom: 20rpx;
	}
	.example-title{
		background-color: #fff;
		position: relative;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		padding: 0 40rpx;
	}
	.example-title::before{
		content: ' ';
		position: absolute;
		left: 10rpx;
		height: 30rpx;
		background-color: rgba(0, 132, 255, 1);
		top: 10rpx;
		width: 4rpx;
	}
	.bg-f9{
		background-color: #f9f9f9;
		min-height: 100vh;
	}
	
	.uni-forms-item{
		background-color: #fff;
		margin-bottom: 6rpx!important;
		padding: 6rpx 24rpx 26rpx!important;
	}
	
	.is-input-border{
		border:none!important;
	}
</style>