yxk_h5_master/pages/wms/stock/inventory/queryDetail.vue

<template>
	<view>
		<view class='head'>物料库存明细</view>
		<view class="flex-row">
			<view class="flex-cell ">
				<span>物料代码：</span>
				{{ detailHead.serialNo }}
			</view>
			<view class="flex-cell ">
				<span>物料名称：</span>
				{{ detailHead.materielName }}
			</view>
			<view class="flex-cell">
				<span>规格型号：</span>
				{{ detailHead.specification }}
			</view>
			<view class="flex-cell">
				<span>单位：</span>
				{{ detailHead.unitUomName }}
			</view>
			<!-- <view class="flex-cell">
				<span>计量数量：</span>
				{{ detailHead.availableCount }}
			</view> -->
		</view>
		<view class='table_container'>
			<t-table border="0">
				<t-tr font-size="14" class="tr-head">
					<t-th >仓库</t-th>
					<t-th>仓位</t-th>
					<t-th>批号</t-th>
					<t-th>库存数量</t-th>
				</t-tr>
				<view class="tr-body">
					<t-tr font-size="14" v-for="(item, index) in tableList" :key="index"  >
						<view class="tr_view" >
							<t-td>{{ item.facilityName }}</t-td>
							<t-td>{{ item.facilityLocationName }}</t-td>
							<t-td>{{ item.batch }}</t-td>
							<t-td>{{ item.availableCount }}</t-td>
						</view>
					</t-tr>
				</view>
			</t-table>
		</view>
		
		<view class="goHome" @click='goMain()'>
			<img src="@/static/img/gohome.png">
		</view>
	</view>
</template>

<script>
import tTable from '@/components/wms/t-table/t-table.vue';
import tTh from '@/components/wms/t-table/t-th.vue';
import tTr from '@/components/wms/t-table/t-tr.vue';
import tTd from '@/components/wms/t-table/t-td.vue';
	export default {
		data() {
			return {
				detailHead:{
					materielName:'记得'
				},
				tableList:[]
			}
			},
			components: {
				tTable,
				tTh,
				tTr,
				tTd
			},
		mounted() {
			let query=this.$route.query;
			if(query.materielId){//获取列表页带过来的参数
				this.$http.request({
					// url: '/apis/stock/stockGatherList',
					url: '/apis/stock/list',
					params: {
						materielId:query.materielId,
						facilityId:query.facilityId,
						isPC:-1
					},
				}).then(res => {
					console.log(res)
					if(res.data.code==0){
						if(res.data.data){
							this.detailHead={
								serialNo:res.data.data.datas[0].serialNo,
								materielName:res.data.data.datas[0].materielName,
								specification:res.data.data.datas[0].specification,
								unitUomName:res.data.data.datas[0].unitUomName,
								// availableCount:res.data.data.datas[0].availableCount
							}
							this.tableList=res.data.data.datas
						}
					}else{
						uni.showToast({
						    title:res.msg?res.msg:"获取信息失败",
							icon:"none",
						    duration: 2000
						});
					}
					
				}).catch(err => {
						uni.showToast({
						    title:err,
							icon:"none",
						    duration: 2000
						});
				});
			}
			},
			methods:{
				}
	}
</script>

<style scoped>
	.head{
		height: 40px;
		width: 100%;
		line-height: 40px;
		font-size: 15px;
		background-color: #fff;
		padding-left: 10px;
		margin-top: 10px;
	}
	
.flex-row {
	position: relative;
	width: 100%;
	padding-right: 45px !important;
	background-color: #fff;
	margin-top: 10px;
}

.flex-cell {
	width: 100%;
	text-align: left;
	/* overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis; */
	min-height: 30px;
	line-height: 30px;
	font-size: 14px;
	padding-left: 10px;
	box-sizing: border-box;
}

.table_container {
	position: relative;
	width:100%;
	margin: auto;
	margin-top: 10px;
	height: calc(100% - 91px);
	font-size: 13px;
	color: #333;
}
.t-table {
	position: relative;
	height: 100%;
	padding-bottom: 10px;
}
.tr-body {
	position: relative;
	width: 100%;
	left: 0;
	bottom: 0;
	overflow: auto;
	background-color: #fff;
}
.t-table .t-tr {
	position: relative;
	border-bottom: 1px solid #efefef;
}
.tr_view {
	/* position: relative;
		display: block;
		width: 100%; */

	position: relative;
	overflow: auto;
	width: 100%;
}
.tr-head {
	position: relative;
	top: 0;
	width: 100%;
}
.tr-head .t-th{
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: calc((100% / 4));
}
.t-td {
	position: relative;
	box-sizing: border-box;
	float: left;
	width: calc((100% / 4));
	height: 33px;
}

</style>