WZC2/fe/PDA/components/virtual-list-test-cell/virtual-list-test-cell.vue

<!-- 这个文件是虚拟列表中的实际cell -->
<template>
	<view class="item">
		<uni-swipe-action>
			<uni-swipe-action-item :right-options="options" :auto-close="false" @click="swipeClick($event,item)">
				<view class="detail-content common_card">
					<view class="choose_main">
						<view class="ljh_box">
							<view class="ljh_info">
								<view class="tit_ljh">{{index+1+'.'+item.itemCode }}</view>
								<view class="label_xm font_sm fr">{{ item.packingCode }}</view>
							</view>
							<view class="desc_card uni-flex space-between">
								<view class="desc_ljh">
									<view class="font_xs text_lightblue"> {{ item.itemName }}</view>
									<view class="font_xs text_lightblue">{{ item.itemDesc1 }}
									</view>
								</view>
							</view>
						</view>
						<view class="list_form">
							<view>
								<uni-table style="overflow-x: hidden; ">
									<uni-tr>
										<uni-th width="100"></uni-th>
										<uni-th width="100" align="center">库存</uni-th>
										<uni-th width="100" align="center">盘点</uni-th>
									</uni-tr>
									<uni-tr>
										<uni-th width="100">数量({{item.uom}})</uni-th>
										<uni-th width="100" align="center">
											<text class="text_black">{{item.inventoryQty}}</text>
										</uni-th>
										<uni-th width="100" align="center">
											<view class="flex" style="align-items: center;justify-content: center;"
												v-if="item.scaned && item.packingCode">
												<text class="text_black">{{item.countQty}} </text>
												<view class="photo_btn fr" @click="openEditCount(item)">
													<text class="fl font_xs">修改</text>
												</view>
											</view>
											<view class="flex" style=" align-items: center;justify-content: center;"
												v-if="item.packingCode==''">
												<text class="text_black">{{item.countQty}} </text>
												<view class="photo_btn fr" @click="openEditCount(item)">
													<text class="fl font_xs">修改</text>
												</view>
											</view>
											<view class="" v-else-if="!item.scaned">
												<text class="text_black">{{item.countQty}}</text>
											</view>
										</uni-th>
									</uni-tr>
								</uni-table>
							</view>
						</view>
						<view style="margin:0 20rpx 20rpx;">
							<view class="uni-flex uni-row bot_card">
								<view class="bot_card_item">
									<label class="icon_bg icon_bg_kw" style="text-align: center;">
										<text
											style=" display: block;   color: white;text-align: center;font-size: 28rpx;">库</text>
									</label>
									<text>{{ item.locationCode }}</text>
								</view>
								<view class="bot_card_item">
									<label class="icon_bg icon_bg_pc">
										<text
											style=" display: block;   color: white;text-align: center;font-size: 28rpx;">批</text>
									</label>
									<text>{{item.lot}}</text>
								</view>
								<view class="bot_card_item" style="width: 25%;">
									<view class="uni-flex" v-if="item.isNew ">
										<!-- picker的index默认是0 -->
										<picker picker @change="bindPickerChange($event,item)" :value="item.status-1"
											:range="statusArray">
											<view class="uni-flex " style="padding:5px 0px;">
												<text class="state_point" 
												:class="statusStyle(item.status)">{{statusArray[item.status-1]}}</text>
													<image class="icon_normal" src="@/static/icons_ui/icon_down.svg">
													</image>
											</view>
										</picker>
									</view>
									<text v-else class="state_point" :class=" statusStyle(item.status)">
										{{ statusColor(item.status )}}
									</text>
								</view>
							</view>
						</view>
					</view>

					<view class="uni-flex space-between" style="margin:0 20rpx 20rpx;"
						v-if="item.scaned || item.packingCode==''">
						<text class="font_xs"
							style="padding: 5px 2px; text-overflow: ellipsis; overflow: hidden;">{{item.countDescription}}</text>
						<view class="photo_btn fr" @click="openEditCountDesc(item)">
							<text class="fl font_xs" style="width:65px;">盘点描述</text>
						</view>
					</view>

					<view v-if="item.scaned" class="choose_marked_count"
						style="background-color: #5FCB94; opacity: 0.65">
						<view class="" style="background-color: #5FCB94; width: 200rpx;height: 300rpx;">

						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	import {
		getInventoryStatusDesc,
		getInventoryTypeStyle
	} from '@/common/basic.js';
	
	import {
		getInventoryStatusArray
	} from '@/common/array.js'
	
	export default {
		name: "virtual-list-test-cell",
		props: {
			item: null,
			index: 0,
			extraData: null
		},
		data() {
			return {
				type: '',
				id: '',
				datacontent: {},
				details: [],
				allDetails: [], //所以的明细
				currentItem: {},
				editDescItem: {},
				editCountItem: {},
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scanResult: {},
				allCount: 0,
				newCount: 0,
				scanCount: 0,
				options: [{
					text: '移除',
					style: {
						backgroundColor: '#F56C6C'
					}
				}],
				location: null,
				topItem: '',
				isShowScanPopup: false,
				statusArray: [],
				allStatusArray: [],
				ipage: 1,
				iSize: 20,
				testList: [],
			};
		},
		methods: {
			titleClick(title) {
				//如果要把点击事件传给页面，可以通过给extraData中添加对应的函数，然后在当前组件中触发这个函数，在页面中监听即可
				//注意，微信小程序中无法通过props传递事件，在微信小程序中可以使用uni.$emit、uni.$on代替
				// if (this.extraData.titleClickedCallback) {
				// 	this.extraData.titleClickedCallback(title);
				// }
			},
			openEditCount(item) {
				this.$emit("openEditCount")
			},
			openEditCountDesc(item) {
				this.$emit("openEditCountDesc")
			},
			openEditCountDesc(item) {
				this.$emit("bindPickerChange")
			},
			
			
			
			statusColor(val) {
				return getInventoryStatusDesc(val);
			},
			statusStyle(val) {
				return getInventoryTypeStyle(val);
			},
		}
	}
</script>

<style scoped>
	.item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
	}

	.item-content {
		flex: 1;
		margin-left: 20rpx;
	}

	.header {
		background-color: red;
		font-size: 24rpx;
		text-align: center;
		padding: 20rpx 0rpx;
		color: white;
	}

	.item-image {
		height: 150rpx;
		width: 150rpx;
		background-color: #eeeeee;
		border-radius: 10rpx;
	}

	.item-title {
		background-color: red;
		color: white;
		font-size: 26rpx;
		border-radius: 5rpx;
		padding: 5rpx 10rpx;
	}

	.item-detail {
		margin-top: 10rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #aaaaaa;
		word-break: break-all;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
</style>