emis-sapp/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 ">
		<u-row align="top" justify="between">
			<text class="font-weight pr-30 lbRequiredDot">货物名称</text>
			<view>
				<u-textarea v-model="modelInfo.goodsInfo" border="surround" height="100" placeholder=""
					:customStyle="`${comInSty}`" count></u-textarea>
			</view>
		</u-row>
	</view>
	<view class="edm-input-item mb-10">
		<u-row justify="between">
			<text class="font-28 font-weight lbRequiredDot">总件数</text>
			<view>
				<tpx-input v-model:value="modelInfo.parcelQty" placeholder="" :customStyle="`${comInSty}`" type="number" inputAlign="right"></tpx-input>
			</view>
		</u-row>
	</view>
	
	<view class="edm-input-item mt-20">
		<tpx-text-item :required="true" label="包裹重量" >
			<template #right>
				<tpx-input v-model:value="modelInfo.billWeight" placeholder="" :customStyle="`${comInSty}`" inputAlign="right" suffix="kg" _digit="4"></tpx-input>
			</template>
		</tpx-text-item>
	</view>
	
	<view class="edm-input-item">
		<u-row justify="between" align="top">
			<text class="font-28 pt-20 font-weight">总体积</text>
			<view>
				<tpx-input v-model:value="modelInfo.totalVolume" placeholder="" :customStyle="`${comInSty}`" inputAlign="right" suffix="m³" _digit="4"></tpx-input>
			</view>				
		</u-row>
	</view>
	
	<view class="edm-input-item">
		<u-row justify="between" align="top">
			<text class="font-28 pt-20 font-weight">货值</text>
			<view>
				<tpx-input v-model:value="modelInfo.realValue" placeholder="" :customStyle="`${comInSty}`" inputAlign="right" suffix="美元" _digit="4"></tpx-input>
			</view>				
		</u-row>
	</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" :comInSty="comInSty"></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
			},
			totalVolume() {
				let totalVolume = this.modelInfo.totalVolume
				
				
				return totalVolume
			},
			isCargoListOnchange() {
				return this.modelInfo.cargoList
			},
			comInSty(){
				return `;width: 450rpx;`
			},
		},
		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)
					}
				}
			},
			isCargoListOnchange: {
				handler(newVal){
					console.log("===bpe-goodsize-tmp isCargoListOnchange===")
					this.handleCargoChange(newVal)
				},
				deep: true,
			}
		},
		props: {
			value: {
				default () {
					return { }
				}
			},
			showMode: {
				default () {
					return '2' // 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
			},
			handleCargoChange(list){
				let parcelQty = 0, totalVolume = 0
				list.map(t=> {
					totalVolume += (+t.volume) || 0
				})
				// 去除体积自动计算
				// this.modelInfo.totalVolume = totalVolume.toFixed(5)
			},
			async calceOther() {
				
			},
			async validData() {
				await this.calceOther()
			}
		}
	}
</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>