152 lines
3.6 KiB
Vue
152 lines
3.6 KiB
Vue
<template>
|
||
<view v-for="(item, index) in modelInfo.cargoList" class="yditem">
|
||
<view class="ydi-lab">
|
||
<text @click="handleEditGood(item, index)" class="font-weight">{{item.goodsName}}</text>
|
||
<view>
|
||
<u-icon @click="handleDelGood(index)" name="trash" size="32"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="ydi-lab mt-10">
|
||
<view @click="handleEditGood(item, index)" style="width: 100%;">
|
||
<u-row justify="between" custom-style="flex-wrap: wrap;">
|
||
<u-col v-if="item.nationArea" span="6">
|
||
<view class="pt-5">
|
||
<text class="clr-sub pr-10">产地</text>{{item.nationArea}}
|
||
</view>
|
||
</u-col>
|
||
<u-col span="6">
|
||
<view class="pt-5">
|
||
<text class="clr-sub pr-10">预报</text> {{item.cargoQty}}
|
||
</view>
|
||
</u-col>
|
||
<u-col v-if="item.price" span="6">
|
||
<view class="pt-5">
|
||
<text class="clr-sub pr-10">单价</text>{{item.price}} CNY
|
||
</view>
|
||
</u-col>
|
||
<u-col span="12">
|
||
<view class="pt-5">
|
||
<text class="clr-sub pr-10">尺寸</text>
|
||
{{item.length || '0'}}cm<text class="clr-sub pl-10 pr-10">*</text>
|
||
{{item.width || '0'}}cm<text class="clr-sub pl-10 pr-10 ">*</text>
|
||
{{item.length || '0'}}cm
|
||
</view>
|
||
</u-col>
|
||
<u-col span="12">
|
||
<view class="pt-5">
|
||
<text class="clr-sub pr-10">体积</text>
|
||
{{item.volume || '0'}}m³
|
||
</view>
|
||
</u-col>
|
||
</u-row>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="ydi-lab mt-10">
|
||
<u-row>
|
||
<text class="pr-20 clr-prm">异常</text>
|
||
<uni-number-box :min="0" v-model="item.abnormalQty" :max="10000" background="#fff"></uni-number-box>
|
||
</u-row>
|
||
<u-row>
|
||
<text class="pr-20">实入仓</text>
|
||
<uni-number-box :min="0" v-model="item.cargoQty" :max="10000" background="#fff"></uni-number-box>
|
||
</u-row>
|
||
</view>
|
||
</view>
|
||
|
||
<u-button @click="handleEditGood" 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>
|
||
|
||
<buns-goodinfo-sheet v-model:show="goodinfoModal.show" v-model:value="goodinfoModal.value" :showMode="showMode" @onSure="handleGoodChange"></buns-goodinfo-sheet>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
computed: {
|
||
modelInfo: {
|
||
get(){
|
||
return this.value
|
||
}
|
||
},
|
||
dicData() {
|
||
return this.$store.getters.dicData
|
||
}
|
||
},
|
||
props: {
|
||
value: {
|
||
default () {
|
||
return { }
|
||
}
|
||
},
|
||
showMode: {
|
||
default () {
|
||
return '1' // 1 只显示商品名称、体积； 2：显示全部商品信息
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
goodinfoModal:{
|
||
show: false,
|
||
value: {},
|
||
index: undefined
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
},
|
||
onHide() {
|
||
|
||
},
|
||
unmounted() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
|
||
handleDelGood(index) {
|
||
this.modelInfo.cargoList.splice(index, 1)
|
||
},
|
||
|
||
handleEditGood(item = { nationArea: '中国' }, index) {
|
||
this.goodinfoModal.show = true
|
||
this.goodinfoModal.value = item
|
||
this.goodinfoModal.index = index
|
||
},
|
||
handleGoodChange(val) {
|
||
if(typeof this.goodinfoModal.index == 'undefined') {
|
||
// 新增回调处理
|
||
this.modelInfo.cargoList.push({
|
||
abnormalQty: 0,
|
||
...val
|
||
})
|
||
} else {
|
||
Object.assign(this.modelInfo.cargoList[this.goodinfoModal.index], val)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.yditem{
|
||
padding: 20rpx 20rpx;
|
||
background-color: #F6F6F6;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.ydi-lab{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
</style> |