market-app-ui/pages/market/one/merchant/goods/add.vue

<template>
	<view>
		<view class="cmain">
			<view class="form_group">
				<view class="lable re">贸易区域</view>
				<picker :range="tradeAreaList" @change="pickerTradeArea($event)" range-key="name">
					<input placeholder="请选择" v-model="item.tradeAreaName" :disabled="true" />
					<view class="icon more">&#xe8f2;</view>
				</picker>
			</view>
			<view class="form_group">
				<view class="lable re">商品名称</view>
				<picker v-if="flag === '新增商品'" :range="goodsList" @change="pickerGoods($event)" range-key="name">
					<input placeholder="请选择" v-model="item.goodsName" :disabled="true" />
					<view class="icon more">&#xe8f2;</view>
				</picker>
				<input v-else placeholder="请选择" v-model="item.goodsName" :disabled="true" disabled="true"/>
			</view>
			<!-- <view class="form_group">
				<view class="lable re">商品产地</view>
				<input placeholder="请输入" v-model="item.placeOrigin" />
			</view>
			<view class="form_group">
				<view class="lable re">商品类型</view>
				<picker :range="dict.goodsType" @change="picker($event, 'goodsType')">
					<input placeholder="请选择" v-model="item.goodsType" :disabled="true" />
					<view class="icon more">&#xe8f2;</view>
				</picker>
			</view>
			<view class="form_group">
				<view class="lable re">商品单位</view>
				<picker :range="dict.goodsUnits" @change="picker($event, 'goodsUnits')">
					<input placeholder="请选择" v-model="item.goodsUnits" :disabled="true" />
					<view class="icon more">&#xe8f2;</view>
				</picker>
			</view> -->
			<view class="form_group">
				<view class="lable re">商品价格</view>
				<input type="number" placeholder="请输入" v-model="item.price" />
				<view class="ops">元</view>
			</view>
			<view class="form_group">
				<view class="lable re">商品数量</view>
				<input type="number" placeholder="请输入" v-model="item.stock" />
				<view class="ops">{{ item.goodsUnits }}</view>
			</view>
			<view class="form_group">
				<view class="lable re">净重</view>
				<input placeholder="请输入" v-model="item.netWeight" />
				<view class="ops">吨</view>
			</view>
			<view class="form_group">
				<view class="lable re">毛重</view>
				<input placeholder="请输入" v-model="item.grossWeight" />
				<view class="ops">吨</view>
			</view>
			<view class="form_group">
				<view class="lable re">商品状态</view>
				<picker :range="dict.goodsStatus" @change="picker($event, 'goodsStatus')">
					<input placeholder="请选择" :value="item.goodsStatus == 1 ? '在售' : '下架'" :disabled="true" />
					<view class="icon more">&#xe8f2;</view>
				</picker>
			</view>
			<!-- <view class="form_group">
				<view class="lable re">商品描述</view>
				<textarea v-model="item.description" placeholder="请输入"></textarea>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			flag: '新增商品',
			item: {},
			dict: {
				goodsType: ['水果', '药品', '茶叶'],
				goodsUnits: ['吨', '个', '柜'],
				goodsStatus: ['在售', '下架']
			},
			goodsList: [],
			tradeAreaList: []
		};
	},
	onLoad(e) {
		if (e.id) {
			this.flag = '编辑商品'
			this.http.request({
				url: '/level-one-server/app/TbGoodsTransit/getById?id=' + e.id,
				success: res => {
					this.item = res.data.data;
					uni.setNavigationBarTitle({ title: '编辑商品' });
				}
			});
		};
		this.getGoodsList();
		this.getTradeAreaList();
	},
	methods: {
		picker(e, tag) {
			this.item[tag] = this.dict[tag][e.detail.value];
			this.$forceUpdate();
		},
		pickerGoods(e) {
			this.item['goodsName'] = this.goodsList[e.detail.value].name;
			this.$forceUpdate();
			if(this.flag == '新增商品') {
				this.item.id = this.goodsList[e.detail.value].id;
			}
		},
		pickerTradeArea(e) {
			this.item['tradeAreaName'] = this.tradeAreaList[e.detail.value].name;
			this.$forceUpdate();
			this.item.tradeAreaId = this.tradeAreaList[e.detail.value].id;
		},
		// 获取监管商品列表
		getGoodsList() {
			this.http.request({
				url: '/level-one-server/app/TbGoods/getList',
				method: 'POST',
				success: res => {
					this.goodsList = res.data.data;
					console.log("监管商品列表",this.goodsList);
				}
			});
		},
		// 获取贸易区域列表
		getTradeAreaList() {
			this.http.request({
				url: '/level-one-server/app/TbTradeArea/getList',
				method: 'POST',
				success: res => {
					this.tradeAreaList = res.data.data;
					console.log("贸易区域列表",this.tradeAreaList);
				}
			});
		}
	},
	onNavigationBarButtonTap() {
		let rule = [
			{ name: 'goodsName', checkType: 'notnull', errorMsg: '请输入商品名称' },
			{ name: 'goodsStatus', checkType: 'notnull', errorMsg: '请选择状态' }
		];
		if (!this.verify.check(this.item, rule)) {
			uni.showModal({ content: this.verify.error, showCancel: false });
			return false;
		}
		let url = '';
		if(this.flag == '新增商品') {
			url = '/level-one-server/app/TbGoodsTransit/transactionGoods';
		} else {
			url = '/level-one-server/app/TbGoodsTransit/update';
		}
		this.http.request({
			url: url,
			method: 'POST',
			data: this.item,
			success: res => {
				uni.showToast({ title: '操作成功' });
				setTimeout(() => {
					uni.$emit('goodsHandle');
					uni.navigateBack();
				}, 1000);
			}
		});
	}
};
</script>

<style lang="scss"></style>