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

<template>
	<view v-if="showMode!=1" class="dt-block" style="margin-bottom: 50rpx;">
		<view class="dt-tle">
			<view class="com-section">热门物品</view>
		</view>
		<view class="dt-cont">
			<view class="dt-block mt-10">
				<tpx-tags v-model:value="checkedGoodId" type="single" :list="hotGoods" @onChange="handleChooseGood"></tpx-tags>
			</view>
		</view>
	</view>
	
	<view class="dt-block" >
		<view v-if="showMode!=1" class="dt-tle">
			<view class="com-section">物品信息</view>
			<view>
				<!-- <u-button custom-style="font-size: 28rpx;height: 56rpx;border-radius: 16rpx;" plain="true" type="primary">选择历史</u-button> -->
			</view>
		</view>
		<view class="dt-cont">
			<view v-if="showMode!=1" class="edm-input-item">
				<tpx-select v-model:value="checkedGoodId" v-model:resObject="goodsRes" :getListFun="getGoodsList" :transKeyVal="{valKey: 'goodsName',titleKey: 'goodsName'}" 
					mode="drop" @onChange="handleChooseGood" 
				>
					<tpx-input v-model:value="modelInfo.goodsName" placeholder="物品名称"></tpx-input>
				</tpx-select>
			</view>
			
			<!-- <view class="edm-input-item">
				<tpx-text-item label="件数">
					<template v-slot:right>
						<tpx-input placeholder="请填写" v-model:value="modelInfo.cargoQty" inputAlign="right" type="number" suffix="件" :_maxNum="cargoQtyMaxNum"></tpx-input>
					</template>
				</tpx-text-item>
			</view> -->
			
			<bpe-gooditemsize-tmp v-model:value="modelInfo" :submitVal="submitVal"></bpe-gooditemsize-tmp>
			
			<view v-if="showMode!=1">
				<view class="edm-input-item">
					<tpx-text-item label="物品单价">
						<template v-slot:right>
							<tpx-input placeholder="请填写" v-model:value="modelInfo.price" inputAlign="right" _digit="5" suffix="CNY"></tpx-input>
						</template>
					</tpx-text-item>
				</view>
				
				<view class="edm-input-item">
					<tpx-text-item label="原产地">
						<template v-slot:right>
							<tpx-input placeholder="请填写" v-model:value="modelInfo.nationArea" inputAlign="right"></tpx-input>
						</template>
					</tpx-text-item>
				</view>
			</view>
			
		</view>
	</view>
	
	<view v-if="showMode!=1" class="dt-block" style="margin-top: 50rpx;">
		<view class="dt-tle">
			<view class="com-section grey">其他信息(按需填写)</view>
		</view>
		<view class="dt-cont">
			<view class="edm-input-item">
				<tpx-text-item label="品牌">
					<template v-slot:right>
						<tpx-input placeholder="请填写" v-model:value="modelInfo.brand" inputAlign="right"></tpx-input>
					</template>
				</tpx-text-item>
			</view>
			<view class="edm-input-item">
				<tpx-text-item label="材质">
					<template v-slot:right>
						<tpx-input placeholder="请填写" v-model:value="modelInfo.material" inputAlign="right"></tpx-input>
					</template>
				</tpx-text-item>
			</view>
			<view class="edm-input-item">
				<tpx-text-item label="用途">
					<template v-slot:right>
						<tpx-input placeholder="请填写" v-model:value="modelInfo.purpose" inputAlign="right"></tpx-input>
					</template>
				</tpx-text-item>
			</view>
			<view class="edm-input-item">
				<tpx-text-item label="成分">
					<template v-slot:right>
						<tpx-input placeholder="请填写" v-model:value="modelInfo.ingredients" inputAlign="right"></tpx-input>
					</template>
				</tpx-text-item>
			</view>
			<view class="edm-input-item">
				<tpx-text-item label="供应商">
					<template v-slot:right>
						<tpx-input placeholder="请填写" v-model:value="modelInfo.supplier" inputAlign="right"></tpx-input>
					</template>
				</tpx-text-item>
			</view>
			<view class="edm-input-item" style="padding-top: 24rpx;padding-bottom: 24rpx;">
				<tpx-text-item label="保存物品信息">
					<template v-slot:right>
						<u-switch v-model="modelInfo.isSave" activeValue="1" inactiveValue="0" active-color="#B12D29" size="34"></u-switch>
					</template>
				</tpx-text-item>
				
				<u-row justify="between">
					<text class="font-28 "></text>
					<view>
						
					</view>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	import * as apiService from "@/common/api"
	import { transListKeyTitle } from "@/common/util"
	import BpeGooditemsizeTmp from "@/components/buns-post-edit-templates/bpe-gooditemsize-tmp"
	export default {
		components: { BpeGooditemsizeTmp },
		computed: {
			dicData() {
			  return this.$store.getters.dicData
			},
			modelInfo: {
				get(){
					return this.value
				}
			},
			cargoQtyMaxNum(){
				// 限制数量的最大值
				let { cargoList, parcelQty } = this.submitVal
				let curQty = (+this.modelInfo.cargoQty) || 0
				let qtMaxNum = parcelQty + curQty
				cargoList.map(t=> {
					if(t.cargoQty) {
						qtMaxNum = qtMaxNum - t.cargoQty
					}
				})
				if(qtMaxNum < 0) {
					qtMaxNum = 0
				}
				return qtMaxNum
			}
		},
		watch: {
		},
		props: {
			value: {
				default () {
					return {}
				}
			},
			submitVal: {
				default () {
					return {}
				}
			},
			showMode: {
				default () {
					return '1' // 1 只显示商品名称、体积； 2：显示全部商品信息
				}
			}
		},
		data() {
			return {
				goodsRes: { list: [] },
				checkedGoodId: '',
				hotGoods: [
				]
			}
		},
		created() {
			this.initData()
		},
		onHide() {

		},
		unmounted() {},

		methods: {
			getGoodsList: apiService.getGoodsList,
			
			async initData() {
				this.checkedGoodId = ''
				let res = await apiService.getHotGoodsList({ customerCode: this.modelInfo.customerCode, pageSize: 5 })
				let list = res.rows || []
				// 截取前5个热门商品
				list.splice(5, list.length - 5)
				this.hotGoods = transListKeyTitle({ valKey: 'goodsCode',titleKey: 'goodsName', list  })
			},
			handleCloseModal() {
				this.$emit('update:show', false)
			},
			handleSubmitValue() {
				this.$emit('onSure', this.modelInfo)
				this.$emit('update:value', this.modelInfo)
				this.handleCloseModal()
			},
			handleChooseGood(val) {
				const item = this.goodsRes.list.concat(this.hotGoods).filter(t=> t.val == val)[0]
				Object.assign(this.modelInfo, item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.shet-cont{
		padding: 10rpx 0 30rpx 0;
	}
	.dt-block {
		// background-color: #FFF;
		position: relative;
	}
	.dt-tle {
		padding-bottom: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.t1 {
			font-size: 30rpx;
			font-weight: 600;
		}
		.t2{
			font-size: 30rpx;
		}
	}
	.dt-cont{
	}
	.dt-item {
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
		justify-content: space-between;
	}
	
	.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;
	}
	.edm-input-item{
		padding: 8rpx 0;
		// border-bottom: 2rpx solid #F6F6F6;
	}
</style>