pad-nl-three-uni/components/ReceiveDetail.vue

<template>
<view>
	<view class="detail_wraper" :class="show ? 'detailshow' : 'detailhide'" >
		<view class="allwidth">
			<view v-if="data.type === 5 || data.type === 6" class="allwidth font1">{{data.data.vbeln}}</view>
			<table v-if="data.type === 5" class="detail_table">
				<tr>
					<td>交货日期</td>
					<td>{{data.data.lfdat}}</td>
				</tr>
				<tr>
					<td>凭证日期</td>
					<td>{{data.data.bldat}}</td>
				</tr>
				<tr>
					<td>计划日期</td>
					<td>{{data.data.wadat}}</td>
				</tr>
				<tr>
					<td>所属厂区</td>
					<td></td>
				</tr>
				<tr>
					<td>供应商编码</td>
					<td>{{data.data.lifnr}}</td>
				</tr>
				<tr>
					<td>供应商名称</td>
					<td></td>
				</tr>
				<tr>
					<td>实际收货日期</td>
					<td>{{data.data.wadatIst ? data.data.wadatIst : '未收货'}}</td>
				</tr>
				<tr>
					<td>单据状态</td>
					<td>{{data.data.djzt}}</td>
				</tr>
				<tr>
					<td>最后更新人ID</td>
					<td>{{data.data.updateId}}</td>
				</tr>
				<tr>
					<td>最后更新人姓名</td>
					<td>{{data.data.updateName}}</td>
				</tr>
				<tr>
					<td>最后更新时间</td>
					<td>{{data.data.updateTime}}</td>
				</tr>
			</table>
			<table v-if="data.type === 6" class="detail_table">
				<tr>
					<td>采购订单号</td>
					<td>{{data.data.ebeln}}</td>
				</tr>
				<tr>
					<td>外部项目号</td>
					<td>{{data.data.posnr}}</td>
				</tr>
				<tr>
					<td>物料编码</td>
					<td>{{data.data.material}}</td>
				</tr>
				<tr>
					<td>物料名称</td>
					<td>{{data.data.matlDesc}}</td>
				</tr>
				<tr>
					<td>单位</td>
					<td>{{data.data.unit}}</td>
				</tr>
				<tr>
					<td>订单量</td>
					<td></td>
				</tr>
				<tr>
					<td>总数</td>
					<td></td>
				</tr>
				<tr>
					<td>本次送货数量</td>
					<td></td>
				</tr>
				<tr>
					<td>收货组织</td>
					<td></td>
				</tr>
				<tr>
					<td>是否质检</td>
					<td></td>
				</tr>
				<tr>
					<td>收货数量</td>
					<td>{{data.data.delivQty}}</td>
				</tr>
				<tr>
					<td>收货仓库编码</td>
					<td></td>
				</tr>
				<tr>
					<td>收货仓库名称</td>
					<td></td>
				</tr>
				<tr>
					<td>工厂编码</td>
					<td>{{data.data.werks}}</td>
				</tr>
				<tr>
					<td>库存地点</td>
					<td>{{data.data.lgort}}</td>
				</tr>
				<tr>
					<td>净重</td>
					<td>{{data.data.ntgew}}</td>
				</tr>
				<tr>
					<td>毛重</td>
					<td>{{data.data.brgew}}</td>
				</tr>
				<tr>
					<td>重量单位</td>
					<td>{{data.data.gewei}}</td>
				</tr>
				<tr>
					<td>体积</td>
					<td>{{data.data.volum}}</td>
				</tr>
				<tr>
					<td>体积单位</td>
					<td>{{data.data.voleh}}</td>
				</tr>
				<tr>
					<td>过量交货容差标识</td>
					<td>{{data.data.uebtk}}</td>
				</tr>
				<tr>
					<td>过量交货容差上限</td>
					<td>{{data.data.uebto}}</td>
				</tr>
				<tr>
					<td>交货不足容差下限</td>
					<td>{{data.data.untto}}</td>
				</tr>
				<tr>
					<td>外部标识/供应商批次</td>
					<td>{{data.data.lifexpos}}</td>
				</tr>
				<tr>
					<td>已分配/已消耗数量</td>
					<td>{{data.data.assignQty}}</td>
				</tr>
				<tr>
					<td>系统库存可用量</td>
					<td>{{data.data.sysl}}</td>
				</tr>
				<tr>
					<td>差异数量</td>
					<td>{{data.data.czsl}}</td>
				</tr>
				<tr>
					<td>最后更新人ID</td>
					<td>{{data.data.updateId}}</td>
				</tr>
				<tr>
					<td>最后更新人姓名</td>
					<td>{{data.data.updateName}}</td>
				</tr>
				<tr>
					<td>最后更新时间</td>
					<td>{{data.data.updateTime}}</td>
				</tr>
			</table>
			<view v-if="data.type === 6" class="allwidth font1">委外组件</view>
			<table v-if="data.type === 6" class="add_detail_table">
				<tr>
					<th width="20%">委外行号</th>
					<th width="40%">组件物料编码</th>
					<th width="40%">组件需求数量</th>
				</tr>
				<tr v-for="e in parseRsItems" :key="e.rspos">
					<td>{{e.rspos}}</td>
					<td>{{e.atnr1}}</td>
					<td>
						<input 
							class="td_input" 
							type="number" 
							confirm-type="go" 
							v-model.number="e.bdmng" 
							@focus="focusInput(e)" 
							@blur="updateNum(e)" 
							@confirm="updateNum(e)"
						/>
					</td>
				</tr>
			</table>
		</view>
	</view>
	<view v-show="show" class="modal" @tap="$emit('closeDetail')"></view>
</view>
</template>

<script>
	export default {
		name:"GridDetail",
		data() {
			return {
				raw: '' // 副表格修改前输入框数据
			};
		},
		props: {
			show: Boolean,
			data: Object,
			crType: String,
			mainRow: Object
		},
		computed: {
			parseRsItems() {
				const raw = this.data?.data?.rsItems
				if (!raw) return []
				if(typeof raw === 'string'){
					try {
						return JSON.parse(raw)
					} catch(err) {
						console.error('rsItems json解析失败', err, raw)
						return []
					}
				}
				return raw
			}
		},
		methods: {
			focusInput (e) {
				this.raw = this.data?.data?.rsItems
			},
			updateNum (e) {
				const jsonStr = JSON.stringify(this.parseRsItems)
				this.$emit('update‑rsitems', jsonStr, this.mainRow, this.data.data.id, this.raw)
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../common/style/mixin.styl';
.detailshow {
	transform: translateX(0);
}
.detailhide {
	transform: translateX(-100%);
}
.detail_wraper
	position fixed
	_wh(40%,100%)
	z-index 101
	top 0
	left 0
	background-color rgba(255,255,255,.95)
	// box-shadow 2px 0 4px 0px rgba(1, 27, 46, 90%)
	overflow-y auto
	padding 10px 10px
	transition: all .3s linear;
.modal
	background-color rgba(0,0,0,0.4)
.font1
	font-size: 16px;
	color: #000;
	line-height: 18px;
	margin-bottom: 10px;
	font-family: 'YouSheBiaoTiHei';
	&:not(:first-child)
		margin-top 20px
.detail_table
	border-collapse: collapse;
	border-spacing: 0;
	width 100%
	td
		font-size: 12px;
		line-height: 13px;
		color: #333;
		word-break: break-all;
		vertical-align middle
		text-align center
		padding 5px 2px
		border 1px solid #ebeef5
		&:nth-child(1)
			width 32%
			font-weight 700
		&:nth-child(2)
			width 68%
.add_detail_table
	border-collapse: collapse;
	border-spacing 0
	width 100%
	th, td
		text-align center
		font-size: 12px;
		line-height: 13px;
		color: #333;
		border 1px solid #ebeef5
		padding 5px 2px
	th
		font-weight: bold;
		padding 8px 2px
		background-color #f5f7fa
</style>