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

<template>
	<view class="detail-content">
		<view class="list-wrap-1">
			<view class="item">
				<view class="s1">类型标识</view>
				<view class="s2">
					{{ baseInfo.assetCode }}
				</view>
			</view>
			<view class="item">
				<view class="s1">物品类型</view>
				<view class="s2">
					{{ getDictValue('物品类型', baseInfo.assetType) }}
				</view>
			</view>
			<view class="item">
				<view class="s1">物品编码</view>
				<view class="s2">
					{{ baseInfo.assetCode }}
				</view>
			</view>
			<view class="item">
				<view class="s1">物品名称</view>
				<view class="s2">
					{{ baseInfo.assetName }}
				</view>
			</view>
			<view class="item" v-for="(item, index) in uniqueData" :key="index">
				<view class="s1">{{ item.label }}</view>
				<view class="s2">
					{{ baseInfo[item.prop] }}
				</view>
			</view>

			<view class="item">
				<view class="s1">分类</view>
				<view class="s2">
					{{ baseInfo.classificationUrl }}
				</view>
			</view>
			<view class="item">
				<view class="s1">计量单位</view>
				<view class="s2">
					{{ baseInfo.unit }}
				</view>
			</view>
			<view class="item">
				<view class="s1">安全库存</view>
				<view class="s2">
					{{ baseInfo.safeStock }}
				</view>
			</view>
			<view class="item">
				<view class="s1">实时库存</view>
				<view class="s2">
					{{ baseInfo.realInventoryNum }}
				</view>
			</view>
			<view class="item">
				<view class="s1">锁单数量</view>
				<view class="s2"></view>
			</view>
			<view class="item">
				<view class="s1">空闲数量</view>
				<view class="s2"></view>
			</view>
			<view class="item">
				<view class="s1">允许拆包</view>
				<view class="s2">
					{{ baseInfo.isUnpack ? '是' : '否' }}
				</view>
			</view>
			<view class="item">
				<view class="s1">描述</view>
				<view class="s2">
					{{ baseInfo.description }}
				</view>
			</view>
		</view>

		<uni-collapse accordion>
			<!-- 模具、物料 -->
			<uni-collapse-item :show-animation="true" :open="false" :typeOpen="1" title="匹配产品" v-if="[6, 3].includes(baseInfo.assetType)">
				<view class="match-view">
					<view class="match-item" v-for="(item, index) in productData" :key="index">
						<view>{{ item.informationCode }}</view>
						<view>{{ item.informationName }}</view>
					</view>
				</view>
				<u-empty v-if="!productData.length" class="emptyPadding"></u-empty>
			</uni-collapse-item>
			<!-- 生产设备、产品 -->
			<uni-collapse-item :show-animation="true" :open="false" :typeOpen="1" title="匹配模具" v-if="[1, 4].includes(baseInfo.assetType)">
				<view class="match-view">
					<view class="match-item" v-for="(item, index) in mouldData" :key="index">
						<view class="label">{{ item.informationCode }}</view>
						<view>{{ item.informationName }}</view>
					</view>
				</view>
				<u-empty v-if="!mouldData.length" class="emptyPadding"></u-empty>
			</uni-collapse-item>
			<!-- 生产设备 -->
			<uni-collapse-item :show-animation="true" :open="false" :typeOpen="1" title="匹配备品备件" v-if="[1].includes(baseInfo.assetType)">
				<view class="match-view">
					<view class="match-item" v-for="(item, index) in partData" :key="index">
						<view class="label">{{ item.informationCode }}</view>
						<view>{{ item.informationName }}</view>
					</view>
				</view>
				<u-empty v-if="!partData.length" class="emptyPadding"></u-empty>
			</uni-collapse-item>
			<!-- 模具、备品备件 -->
			<uni-collapse-item :show-animation="true" :open="false" :typeOpen="1" title="匹配设备" v-if="[1].includes(baseInfo.assetType)">
				<view class="match-view">
					<view class="match-item" v-for="(item, index) in facilityData" :key="index">
						<view class="label">{{ item.informationCode }}</view>
						<view>{{ item.informationName }}</view>
					</view>
				</view>
				<u-empty v-if="!facilityData.length" class="emptyPadding"></u-empty>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import { get } from '@/utils/api.js'
	// import { getDetails as getMatchData } from '@/api/stockManagement/itemInformation'
	export default {
		data() {
			return {
				productData: [],
				mouldData: [],
				partData: [],
				bomData: [],
				facilityData: []
			}
		},
		props: {
			baseInfo: {
				type: Object,
				default: () => ({})
			}
		},
		computed: {
			...mapGetters(['getDictValue']),
			uniqueData() {
				switch (+this.baseInfo.assetType) {
					case 3: //物料
						return [{ label: '牌号', prop: 'brandNum' }]
					case 8: //耗材
						return [
							{ label: '型号', prop: 'modelType' },
							{ label: '规格', prop: 'specification' }
						]
					case 4: //产品
						return [
							{ label: '牌号', prop: 'brandNum' },
							{ label: '型号', prop: 'modelType' },
							{
								label: '标准单重',
								prop: 'modelType',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return `${extendField.unqualifiedRate || '-'}KG`
								}
							},
							{
								label: '不良品率',
								prop: 'modelType',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return `${extendField.unqualifiedRate || '-'}%`
								}
							}
						]
					case 5: //'周转车'
						return [
							{ label: '规格', prop: 'specification' },
							{
								label: '材质',
								prop: 'texture',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return extendField.texture
								}
							},
							{
								label: '长宽高',
								prop: '',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return `${extendField.length || '-'}/${extendField.width || '-'}/${extendField.high || '-'}`
								}
							}
						]
					case 2: //'舟皿'
						return [
							{ label: '规格', prop: 'specification' },
							{ label: '型号', prop: 'modelType' },
							{
								label: '角度',
								prop: '',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return extendField.angle
								}
							},
							{
								label: '长宽高',
								prop: '',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return `${extendField.length || '-'}*${extendField.width || '-'}*${extendField.high || '-'}`
								}
							}
						]
					case 1: //'设备'
						return [
							{ label: '型号', prop: 'modelType' },
							{ label: '规格', prop: 'specification' }
						]
					case 6: //'模具'
						return [
							{ label: '牌号', prop: 'brandNum' },
							{ label: '型号', prop: 'modelType' },
							{
								label: '收缩系数',
								prop: '',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return extendField.shrinkageCoefficient
								}
							},
							{
								label: '芯杆数量',
								prop: '',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return extendField.mandrelNum
								}
							},
							{
								label: '模孔数量',
								prop: '',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return extendField.dieHoleNum
								}
							},
							{
								label: '上冲头数量',
								prop: '',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return extendField.upperPunchNum
								}
							},
							{
								label: '下冲头数量',
								prop: '',
								formatter(row) {
									if (!row?.extendField) return ''
									const extendField = JSON.parse(row.extendField)
									return extendField.lowerPunchNum
								}
							}
						]
					case 7: //'备品备件'
						return [
							{ label: '规格', prop: 'specification' },
							{ label: '型号', prop: 'modelType' }
						]
				}

				return []
			}
		},
		created() {
			this.requestDict('物品类型')
			this._getMatchData()
		},
		methods: {
			...mapActions('dict', ['requestDict']),
			async _getMatchData() {
				// const res = await get(
				//   this.apiUrl + `/information/info/${this.baseInfo.materialId}`
				// )
				// if (res?.success) {
				//   for (const key in res.data.informationRelationMap) {
				//     this.matchList(key, res.data.informationRelationMap)
				//   }
				// }
			},
			matchList(key, data) {
				switch (key) {
					case 'w01': {
						this.facilityData = data[key]
						break
					}
					case 'w04': {
						this.mouldData = data[key]
						break
					}
					case 'w05': {
						this.partData = data[key]
						break
					}
					case 'w07': {
						this.productData = data[key]
						break
					}
					default:
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-wrap-1 {
		padding: 30rpx;

		.item {
			color: #000000;
			font-size: 28rpx;
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
		}

		.item + .item {
			border-top: 1px dashed #555;
		}
	}

	.emptyPadding {
		padding: 20rpx 0;
	}

	.match-view {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;
		.match-item {
			width: 49%;
			display: flex;
			justify-content: space-between;
			border: 1px solid #ccc;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			& + .match-item {
				margin-left: 2%;
			}
			> view {
				padding: 15rpx 0;
			}
			.label {
				border-right: 1rpx solid #ccc;
				padding-right: 5rpx;
			}
		}
	}
</style>