aiot-app/pages/warehouse/inventoryAllocation/components/DetailDialog.vue

<template>
	<uni-popup ref="popup" background-color="#fff" :is-mask-click="false">
		<view class="container">
			<view class="tools-box">
				<uni-easyinput prefixIcon="search" v-model="searchVal" placeholder="编码、名称"></uni-easyinput>
				<view class="all" v-if="!type || type == 'input'">
					<view>已选 {{ selectionList.length }}/{{ tableData.length }} 项</view>
					<text @click="checkAll = !checkAll" class="text-primary">全选</text>
				</view>
			</view>
			<view class="list-container">
				<checkbox-group @change="checkboxChange">
					<view class="assets-cell" v-for="(item, index) in showList" :key="index">
						<label>
							<view class="title">
								{{ item.assetName }}
								<text>{{ item.onlyCode }}</text>
							</view>
							<view class="col">
								<text>
									<text class="label">批次号</text>
									{{ item.batchNo }}
								</text>
								<text>
									<text class="label">包装编码</text>
									{{ item.num }}
								</text>
							</view>
							<view class="col" v-if="!row.isUnpack">
								<text>
									<text class="label">最小包装单元</text>
									{{ `${item.measurementUnit || ''}${item.unit}/${item.minPackUnit}` }}
								</text>
								<text>
									<text class="label">入库天数</text>
									{{ item.day }}
								</text>
							</view>
							<view class="col">
								<text>
									<text class="label">{{ item.manufactureTime ? '生产日期' : '采购日期' }}</text>
									{{ item.manufactureTime || item.procurementTime }}
								</text>
							</view>
							<view class="col">
								<text>
									<text class="label">过期日期</text>
									{{ item.expirationTime }}
								</text>
							</view>
							<checkbox :key="forceUpdate" :value="item.id + ''" :checked="item.checked || !!item.disabled" :disabled="!!item.disabled" v-if="type != 'detail'"></checkbox>
						</label>
					</view>
				</checkbox-group>
			</view>
		</view>
		<view class="footer">
			<u-button size="large" type="success" @click="confirm" v-if="type != 'detail'">确认添加</u-button>
			<u-button size="large" @click="cancel">返回</u-button>
		</view>
	</uni-popup>
</template>

<script>
	import { tableHeader } from '../../common'
	import { get } from '@/utils/api.js'
	export default {
		props: {
			// 新增 or 反显
			type: {
				type: String,
				default: '' //新增
			},
			assetsList: {
				type: Array,
				default: () => []
			},
			preAssetsList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				tableHeader,
				searchVal: '',
				tableData: [],
				selectionList: [],
				cargoSpace: '',
				row: {},
				callback: null,
				forceUpdate: true
			}
		},
		computed: {
			checkAll: {
				get() {
					return this.selectionList.length && this.selectionList.length == this.showList.length
				},
				set(val) {
					if (val) {
						this.selectionList = this.showList.map(item => item.id + '')
						this.showList.map(item => (item.checked = true))
					} else {
						this.selectionList = []
						this.showList.map(item => (item.checked = false))
					}

					this.forceUpdate = !this.forceUpdate
				}
			},
			showList() {
				if (this.searchVal) {
					return this.tableData.filter(({ assetName, onlyCode, assetCode, batchNo }) => {
						return String(assetName).indexOf(this.searchVal) != -1 || String(onlyCode).indexOf(this.searchVal) != -1
					})
				}
				return this.tableData
			}
		},
		methods: {
			async open(row, cargoSpaceId, callback) {
				this.row = row
				this.callback = callback
				this.$refs.popup.open('right')
				const disabledDetailReqList = [...(this.preAssetsList.find(i => i.curId == row.curId)?.detailReqList || []), ...(this.assetsList.find(i => i.curId == row.curId)?.detailReqList || [])]
				if (!this.type) {
					// const res = await get(
					//   this.apiUrl + '/conventionalStockTransfer/warehouse/getGoodsSingle',
					//   {
					//     assetCode: row.assetCode,
					//     assetType: row.assetType,
					//     cargoSpaceId: cargoSpaceId
					//   }
					// )
					if (res?.success) {
						this.tableData = res.data
							.map(i => {
								i.checked = false
								i.batchNo = i.batchNum

								const obj = (this.row.detailReqList || []).find(itm => itm.id == i.id)
								if (obj) {
									i.checked = true
									this.selectionList.push(i.id + '')
								}

								if (disabledDetailReqList.find(p => p.onlyCode == i.onlyCode)) {
									i.checked = false
									i.disabled = true
								}
								return i
							})
							.filter(item => !item.disabled)
					}
				} else {
					// 反显
					const reList = this.type == 'output' ? 'curDetailReqList' : 'detailReqList' //反显列表

					console.log(this.row[reList], 'this.row')
					this.tableData = uni.$u.deepClone(this.row[reList])

					this.tableData.forEach(itm => {
						if (itm.checked) {
							this.selectionList.push(itm.id + '')
						}
					})
				}
			},
			checkboxChange(val) {
				this.selectionList = val.detail.value
			},
			confirm() {
				let selection = this.tableData.map(item => {
					item.checked = this.selectionList.includes(item.id + '')
					return item
				})
				if (this.type !== 'output') {
					selection = this.tableData.filter(item => item.checked)
				}
				this.callback && this.callback(selection)
				this.cancel()
			},
			cancel() {
				this.tableData = []
				this.selectionList = []
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		padding: 88rpx + $tab-height 10rpx 0; //安全高度
		box-sizing: border-box;
		background-color: $page-bg;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.tools-box {
		margin-bottom: 20rpx;
	}

	.all {
		display: flex;
		justify-content: flex-end;
		padding: 10rpx;
		padding-right: 30rpx;
		text {
			margin-left: 40rpx;
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.list-container {
		flex: 1;
		box-sizing: border-box;
		padding-bottom: 220rpx;
		overflow: auto;
	}
	.assets-cell {
		padding: 10rpx;
		font-size: 28rpx;
		position: relative;
		background-color: #fff;
		margin-bottom: 30rpx;
		color: #7f7f7f;
		.title {
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			font-size: 32rpx;
			color: #555;
			margin-bottom: 10rpx;
		}

		.col {
			display: flex;
			justify-content: space-between;
			margin-bottom: 8rpx;
			text {
				flex: 1;
			}

			.label {
				margin-right: 40rpx;
			}
		}
		uni-checkbox {
			position: absolute;
			right: 0;
			bottom: 10rpx;
		}
	}
</style>