aiot-app/pages/warehouse/inventoryAllocation/components/AssetsCard copy.vue

<template>
	<view class="kd-row">
		<checkbox-group @change="handleChange">
			<label>
				<view class="kd-col">
					<text class="title">{{ item.assetName }}（{{ item.assetCode }}）</text>

					<uni-icons class="shanchu" v-if="type == 'output'" custom-prefix="iconfont" type="icon-shanchu" size="24" @click="deleteItem" color="#fa3534"></uni-icons>
					<text v-if="type == 'input' || isApproval">数量：{{ item.amount }}{{ curUnit }}</text>
				</view>

				<view class="kd-col" v-if="type === 'output'">
					<text>货位 ：{{ `${item.outWarehouseAreaName}-${item.outWarehouseAreaGoodsCode}-${item.outGoodsAllocationCode}` }}</text>
				</view>
				<view class="kd-col">
					<text class="col-items">类型：{{}}</text>
					<text class="col-items" v-for="(itm, index) in tableHeader" :key="index">
						{{ itm.label }}：
						<template v-if="itm.formatter">{{ itm.formatter(item) }}</template>
						<template v-else>{{ item[itm.prop] }}</template>
					</text>
					<!-- <text class="col-items"
            >最小单元：{{ item.measurementUnit }}{{ item.unit }}/{{
              item.minPackUnit
            }}</text
          > -->
					<!-- <text class="col-items">编号：{{ item.num }}</text> -->
				</view>
				<template v-if="type === 'input' || type == 'detail'">
					<view class="kd-col">当前货位 ：{{ `${item.outWarehouseAreaName}-${item.outWarehouseAreaGoodsCode}-${item.outGoodsAllocationCode}` }}</view>
					<view class="kd-col">调入货位 ：{{ `${item.inWarehouseAreaName}-${item.inWarehouseAreaGoodsCode}-${item.inGoodsAllocationCode}` }}</view>
					<view style="text-align: right" v-if="type != 'detail'">
						<checkbox :checked="item.inputChecked" />
					</view>
				</template>
				<view class="num-box" v-if="type == 'output'">
					<view>待调出数量：{{ item.amount }}{{ curUnit }}</view>
					<view class="num-common">
						<view>选中数量</view>
						<u-number-box v-if="item.takeStockPattern" v-model="item.curAmount" :disabled="type == 'detail'" :min="0" :max="+item.amount"></u-number-box>
						<text class="text-primary num" @click="handleDetail(item)" v-else>{{ (item.curDetailReqList && item.curDetailReqList.filter(i => i.checked).length) || '选择' }}</text>
					</view>
				</view>
				<!-- <checkbox v-if="type == 'output'" :checked="item.checked" /> -->
				<view class="num-common" v-if="!type || type == 'detail'" style="color: #aaaaaa">
					<template v-if="type == 'detail'">
						<template v-if="isApproval">
							<text class="text-primary num" @click="handleDetail(item)">明细</text>
						</template>

						<template v-else>
							已选数量
							<text class="text-primary num" v-if="item.takeStockPattern" @click="handleDetail(item)">{{ item.amount }}{{ curUnit }}</text>
							<text class="text-primary num" @click="handleDetail(item)" v-else>
								{{ (item.detailReqList && item.detailReqList.filter(i => i.checked || type == 'detail').length) || 0 }}{{ curUnit }}
							</text>
						</template>
					</template>
					<template v-else>
						'选中数量'
						<u-number-box v-if="item.takeStockPattern" v-model="item.amount" :min="0" :max="+item.max"></u-number-box>
						<text class="text-primary num" @click="handleDetail(item)" v-else>{{ (item.detailReqList && item.detailReqList.filter(i => i.checked || type == 'detail').length) || '选择' }}</text>
					</template>
				</view>
			</label>
		</checkbox-group>
		<DetailDialog ref="detailRef" :type="type" />
	</view>
</template>

<script>
	import { tableHeader } from '../../common'
	import DetailDialog from './DetailDialog'
	import { mapActions, mapGetters } from 'vuex'
	export default {
		components: { DetailDialog },
		props: {
			item: {
				type: Object,
				default: () => ({})
			},
			isApproval: {
				type: Boolean,
				default: false
			},
			type: String
		},
		data() {
			return {}
		},
		computed: {
			// ...mapGetters(['getDictValue']),
			tableHeader() {
				return tableHeader(this.item.assetType)
			},
			curUnit() {
				return this.item.isUnpack
					? this.item.unit || (this.item.detailReqList && this.item.detailReqList[0] && this.item.detailReqList[0].unit)
					: this.item.minPackUnit || (this.item.detailReqList && this.item.detailReqList[0] && this.item.detailReqList[0].minPackUnit)
			}
		},
		created() {
			// this.requestDict('物品类型')
		},
		methods: {
			// ...mapActions('dict', ['requestDict']),
			deleteItem() {
				this.$emit('deleteItem')
			},
			handleChange(e) {
				if (this.type === 'input') {
					this.item.inputChecked = !!e.detail.value.length
				} else {
					this.$set(this.item, 'checked', !!e.detail.value.length)
				}
			},
			goDetail({ id }) {
				// uni.navigateTo({
				//   url: `/pages/warehouse/enterHouse/details?&id=${id}`
				// })
			},
			handleDetail(item) {
				if (this.type === 'detail' && !item.detailReqList?.length) {
					return
				}

				this.$refs.detailRef.open(item, this.cargoSpaceId, res => {
					if (this.type === 'output') {
						this.$set(item, 'curDetailReqList', res)
					} else {
						this.$set(
							item,
							'detailReqList',
							res.filter(i => i.checked)
						)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.kd-row {
		font-size: 28rpx;
		padding: 14rpx 12rpx 6rpx;
		border-bottom: 1rpx solid $page-bg;
		.kd-col {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			padding: 2rpx;
			color: #aaaaaa;
			margin-bottom: 8rpx;
			.col-items {
				width: 50%;
			}

			.status {
				background-color: $page-bg;
				display: inline-block;
				padding: 4rpx 10rpx;
				border-radius: 18rpx;
			}
		}
		.title {
			font-weight: bold;
			color: #333333;
		}
		/deep/.u-number-box {
			align-items: stretch;
			height: 60rpx;

			.u-number-box__input {
				width: 80rpx !important;
				height: auto !important;
			}
			.u-number-box__minus,
			.u-number-box__plus {
				height: auto !important;
			}
		}
	}

	.center {
		text-align: center;
		margin-bottom: 10rpx;
		color: #999;
	}
	.no_data {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #999;
		font-size: 28rpx;
	}

	.warehouse {
		display: flex;
		align-items: center;
	}

	.arrow {
		display: inline-block;
		position: relative;
		width: 50rpx;
		height: 10rpx;
		margin: 0 20rpx;
		&::after,
		&::before {
			content: '';
			position: absolute;
		}
		&::after {
			border-top: 4rpx solid #aaaaaa;
			border-right: 4rpx solid #aaaaaa;
			width: 12rpx;
			height: 12rpx;
			right: 0rpx;
			top: -6rpx;
			transform: rotate(45deg);
		}
		&::before {
			height: 4rpx;
			background-color: #aaaaaa;
			width: 50rpx;
		}
	}

	.num-box {
		display: flex;
		color: #aaaaaa;
		justify-content: space-between;
	}
	.num {
		margin-bottom: 5rpx;
		display: inline-block;
		border: 1rpx solid $j-primary-green;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
	}

	.num-common {
		display: flex;
		// justify-content: flex-end;
		flex-direction: column;
		align-items: flex-end;
	}
</style>