emis-app/components/buns-post-edit-templates/bpe-gooditem-edit-tmp.vue

<template>
	<view class="edm-input-item">
		<tpx-select v-model:value="modelInfo.goodsType" v-model:resObject="goodsRes" :getListFun="getGoodsList" :transKeyVal="{valKey: 'goodsName',titleKey: 'goodsName'}"
			mode="drop" @onChange="handleChooseGood"  type="multiple"
		>
			<tpx-text-item label="货物大类" :value="modelInfo.goodsType"></tpx-text-item>
		</tpx-select>
	</view>
	<view class="edm-input-item mb-10">
		<tpx-text-item label="货物名称">
			<template v-slot:right>
				<tpx-input v-model:value="modelInfo.goodsInfo" inputAlign="right"></tpx-input>
			</template>
		</tpx-text-item>
	</view>
	
	<view v-for="(item, index) in modelInfo.cargoList" class="yditem">
		<view class="ydi-lab mb-10">
			<text class="font-weight">
				<!-- {{item.goodsName}} -->
			</text>
			<view>
				<u-icon @click="handleDelGood(index)" name="trash" size="32"></u-icon>
			</view>
		</view>
		<bpe-gooditem-filed-edit-tmp :value="item" :showMode="showMode" :submitVal="modelInfo"></bpe-gooditem-filed-edit-tmp>
	</view>
	
	<u-button @click="handleAddGood" custom-style="border-radius: 16rpx;height: 66rpx;" type="primary" plain="true">
		<u-row justify="center">
			<view>
				<u-icon name="plus" size="30" color="#B12D29"></u-icon>
			</view>
			<text class="pl-10">增加货物</text>
		</u-row>
	</u-button>
	
</template>

<script>
	import BpeGooditemFiledEditTmp from "@/components/buns-post-edit-templates/bpe-gooditem-filed-edit-tmp"
	import * as apiService from "@/common/api"
	
	export default {
		components: { BpeGooditemFiledEditTmp },
		computed: {
			modelInfo: {
				get(){
					return this.value
				}
			},
			dicData() {
			  return this.$store.getters.dicData
			}
		},
		watch: {
			'modelInfo.parcelQty': {
				handler: function(newVal) {
					let listQt = 0
					let maxCaIndex
					this.modelInfo.cargoList.map((t, i)=> {
						listQt += (+t.cargoQty)
						if(typeof maxCaIndex == 'undefined' && newVal < listQt) {
							maxCaIndex = i
							t.cargoQty = newVal - (listQt - t.cargoQty)
						}
					})
					// 超出总数的 item，截取掉
					if(typeof maxCaIndex != 'undefined') {
						this.modelInfo.cargoList.splice(maxCaIndex + 1, this.modelInfo.cargoList.length -1 - maxCaIndex)
					}
				}
			}
		},
		props: {
			value: {
				default () {
					return { }
				}
			},
			showMode: {
				default () {
					return '1' // 1 只显示商品名称、体积； 2：显示全部商品信息
				}
			}
		},
		data() {
			return {
				goodsRes: { list: [] },
			}
		},
		created() {
		},
		onHide() {

		},
		unmounted() {
			
		},

		methods: {
			getGoodsList: apiService.getGoodsList,
			handleDelGood(index) {
				this.modelInfo.cargoList.splice(index, 1)
			},
			handleAddGood(item = { }) {
				this.modelInfo.cargoList.push({
					...item
				})	
			},
			handleChooseGood(val, name){
				this.modelInfo.goodsInfo = name
			}
		}
	}
</script>

<style scoped lang="scss">
	.yditem{
		padding: 20rpx 20rpx;
		// background-color: #F6F6F6;
		background-color: #F6F6F6;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	.ydi-lab{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.edm-input-item{
		padding: 8rpx 0;
		border-bottom: 2rpx solid #F6F6F6;
	}
</style>