aiot-app/pages/warehouse/inventory/batch/batch.vue

<template>
	<!-- 批次明细 -->
	<view class="main">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="title" @clickLeft="back"></uni-nav-bar>
		<view class="scroll-view_H">
			<view class="item" :class="{ active: active == item.components }" v-for="(item, index) in scrollTitle" :key="index" @click="changeActive(item)">
				{{ item.name }}
			</view>
		</view>
		<view class="wl-bar" @click="handlPopMessage" v-if="info">
			<text>物品基本信息</text>
			<text>查看</text>
		</view>
		<view class="scroll_box">
			<component v-bind:is="active" :categoryCode="categoryCode" :categoryId="categoryId" :dimension="dimension" :isInfo="Boolean(info)"></component>
			<PopMessage ref="PopMessage" :info="info"></PopMessage>
		</view>
		<!-- <component
			v-bind:is="active"
			:batchNum="batchNum"
			:baseInfo="info"
			:isUnpack="info.isUnpack"
			:dimension="dimension"
			:inventoryCode="inventoryCode"
			:code="code"
			:isInfo="Boolean(info)"></component> -->
	</view>
</template>

<script>
	import inventoryDetail from './components/inventoryDetail.vue'
	import putStorage from './components/putStorage.vue'
	import allot from './components/allot.vue'
	import outboundDelivery from './components/outboundDelivery.vue'
	import ReportLoss from './components/ReportLoss.vue'
	import InspectionSheet from './components/InspectionSheet.vue'
	import BaseInfo from './components/BaseInfo.vue'
	import PopMessage from './components/PopMessage.vue'
	import BatchDetail from './components/BatchDetail.vue'
	import { post, get } from '@/utils/api.js'
	export default {
		components: {
			inventoryDetail,
			putStorage,
			allot,
			outboundDelivery,
			ReportLoss,
			BaseInfo,
			InspectionSheet,
			BatchDetail,
			PopMessage
		},
		data() {
			return {
				batchNum: '',
				dimension: '',
				inventoryCode: '',
				code: '',
				active: 'inventoryDetail',

				// 物料信息
				info: {}
			}
		},
		onLoad(option) {
			// this.batchNum = option.batchNum === 'null' ? '' : option.batchNum
			// this.dimension = option.dimension
			// this.inventoryCode = option.inventoryCode
			// this.code = option.code
			// this.getInfo()

			this.dimension = option.dimension
			this.categoryCode = option.categoryCode
			this.categoryId = option.categoryId
			if (option.info) {
				this.info = JSON.parse(decodeURIComponent(option.info))
				console.log('this.info', this.info)
			}
		},
		computed: {
			title() {
				// if (this.dimension == 1) {
				// 	return `${this.info.assetCode || ''} ${this.info.assetName || ''}`
				// }

				// return '批次号 ' + this.batchNum
				return this.info.categoryName
			},
			scrollTitle() {
				let list = [
					// {
					//   name: '基本信息',
					//   components: 'BaseInfo'
					// },
					{
						name: '库存明细',
						components: 'inventoryDetail'
					},
					{
						name: '入库',
						components: 'putStorage'
					},
					{
						name: '调拨',
						components: 'allot'
					},
					{
						name: '出库',
						components: 'outboundDelivery'
					},
					{
						name: '报损溢',
						components: 'ReportLoss'
					}
				]

				// if (this.dimension == 1) {
				// 	list.splice(2, 0, {
				// 		name: '批次明细',
				// 		components: 'BatchDetail'
				// 	})
				// }
				// if (this.info.assetType == 3 && this.dimension == 2) {
				// 	list.push({
				// 		name: '质检单',
				// 		components: 'InspectionSheet'
				// 	})
				// }
				return list
			}
		},
		methods: {
			changeActive(item) {
				this.active = item.components
			},
			handlPopMessage() {
				this.$refs.PopMessage.open()
			}
			// getInfo () {
			//   let par = {
			//     inventoryCode: this.inventoryCode,
			//     batchNum: this.batchNum,
			//     code: this.code
			//   }
			//   post(this.apiUrl + '/InventoryBook/select/getDetail', par).then(res => {
			//     if (res.success) {
			//       this.info = res.data.records[0]
			//     }
			//   })
			// }
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.main {
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.scroll-view_H {
		padding: 20rpx;
		border-bottom: 5rpx solid #70b603;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.item {
			font-size: 32rpx;

			&.active {
				color: #70b603;
			}
		}
	}

	.wl-bar {
		height: 60rpx;
		background-color: #70b603;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
	}
	.scroll_box {
		flex: 1;
	}
</style>