WZC2/fe/PDA/views/demo/demo.vue

<template>
	<view class="uni-padding-wrap uni-common-mt">
		<view>
			<view class="page-title">
				<view class="">
					<text class="">元组件</text>
				</view>
			</view>

			<view class="">
				<view class="">
					<view class="uni-title">按钮/图标</view>
					<view class="uni-flex uni-row">
						<view style="margin: 5px;">展开 </view>
						<view style="margin: 5px;">折叠 </view>
						<view style="margin: 5px;">查看详情 </view>
						<view style="margin: 5px;">等等 </view>
					</view>
					<view class="uni-flex uni-row">
						<button>提交</button>
						<button>清空</button>
					</view>
				</view>
				<view class="">
					<view class="uni-title">物品信息1 winItemBasicInfo
					</view>
					<view class="uni-flex uni-column content">
						<win-item-basic-info :dataContent="item"></win-item-basic-info>
					</view>
				</view>

				<view class="">
					<view class="uni-title">物品信息2 winItemInfo
					</view>
					<view class="uni-flex uni-column content">
						<win-item-info :dataContent="item"></win-item-info>
					</view>
				</view>

				<view class="">
					<view class="uni-title uni-common-mt">物品详细详情 winItemDetailInfo
					</view>
					<view class="uni-flex uni-column content">
						<win-item-detail-info ref="itemDetailInfo"></win-item-detail-info>
						<text @click="openItemDetailInfo()">展开</text>
					</view>

					<win-item-detail-info ref="itemDetailInfo"></win-item-detail-info>
				</view>


				<view class="">
					<view class="uni-title">箱码 winPackingCode
					</view>
					<view class="uni-flex uni-column content">
						<win-packing-code packingCode="箱码"></win-packing-code>
					</view>
				</view>

				<view class="">
					<view class="uni-title">托码 winContainerCode
					</view>
					<view class="content">
						<win-container-code containerCode="托码1"></win-container-code>
					</view>
				</view>

				<view class="">
					<view class="uni-title">批次 winLot
					</view>
					<view class="content">
						<win-lot lot="批次1" :dataContent='balance'></win-lot>
					</view>
				</view>
				<view class="">
					<view class="uni-title">库位1 winLocationCode
					</view>
					<view class="content">
						<win-location-code :dataContent='location'></win-location-code>
					</view>
					<view class="uni-title">库位2 winLocationInfo
					</view>
					<view class="content">
						<win-location-info :dataContent='location'></win-location-info>
					</view>
				</view>

				<view class="">
					<view class="uni-title">库存状态 winInventoryStatus
					</view>
					<view class="content">
						<win-inventory-status :status='1' :allowEdit="true"></win-inventory-status>
					</view>
				</view>

				<view class="">
					<view class="uni-title">供应商名称 winSupplierInfo
					</view>
					<view class="content">
						<win-supplier-info supplierCode="供应商代码" supplierName="供应商名称"></win-supplier-info>
					</view>
				</view>

				<view>
					<view class="uni-title">数量单位 winQty
					</view>
					<view class="content">
						<win-qty :qty='qty.qty' :uom='qty.uom' :stdPackQty='stdPackQty.qty'
							:stdPackUom='stdPackQty.uom'></win-qty>
					</view>
				</view>

				<view>
					<view class="uni-title">编辑数量 winQtyUom
					</view>
					<view class="content">
						<text @click="openQtyEdit()">点击弹窗数量编辑页</text>
						<win-qty-edit ref="qtyEdit" :allQty='10' @getQty='getQty'>
						</win-qty-edit>
					</view>
				</view>

				<view class="">
					<view class="uni-title">任务编号 winJobNumber
					</view>
					<view class="content">
						<win-job-number :dataContent="jobInfo" @openJobDetail='openJobDetail'></win-job-number>
					</view>
				</view>

				<view>
					<view class="uni-title">任务创建信息 winJobCreation
					</view>
					<view class="content">
						<win-job-creation creater="创建人" creationTime="2023年3月1日"></win-job-creation>
					</view>
				</view>


				<!-- 	<view>
					<view class="uni-title">推荐信息 winRecommendSimple
					</view>
					<view class="content">
						<win-recommend-simple :dataContent="recommendInfo"></win-recommend-simple>
					</view>
				</view>

				<view>
					<view class="uni-title">推荐实际对比组件 winJobDetailCompare
					</view>
					<view>
						<win-job-detail-compare :dataContent="recommendInfo"></win-job-detail-compare>
					</view>
				</view> -->
			</view>
		</view>
		<view>
			<view class="page-title">
				<view class="">
					<text class="">基础组件</text>
				</view>
			</view>

			<view>
				<view class="uni-title">任务扫描数量 winJobScanCount
				</view>
				<view class="content">
					<win-job-scan-count :dataContent="jobInfo"></win-job-scan-count>
				</view>
			</view>

			<!-- 	<view>
				<view class="uni-title">任务推荐组件 winJobRecommend
				</view>
				<view class="content">
					<win-job-recommend :dataContent="recommendInfo" :itemInfo="item"></win-job-recommend>
				</view>
			</view>
 -->
			<view>
				<view class="uni-title">标签组件 winLabel
				</view>
				<view class="content">
					<win-label :item="item" :dataContent="label"></win-label>
				</view>
			</view>

			<view>
				<view class="uni-title">库存组件1 winBalance1
				</view>
				<view class="content">
					<win-balance1 :dataContent="balance" :label="label"></win-balance1>
				</view>
			</view>

			<view>
				<view class="uni-title">库存组件2 winBalance2
				</view>
				<view class="content">
					<!-- <win-balance :dataContent="balance" :label="label"></win-balance> -->
				</view>
			</view>

			<view>
				<view class="uni-title">分组汇总组件 winCollapseItem
				</view>
				<view class="content">
					<uni-collapse>
						<win-collapse-item :open="true" title="零件号A" :scanCount="3" style="font-size: 20px; ">
							<view>
								<uni-swipe-action>
									<uni-swipe-action-item :auto-close="false" style='background-color: #ffffff;'>
										<text>组件Slot</text>
									</uni-swipe-action-item>
								</uni-swipe-action>
							</view>
						</win-collapse-item>
					</uni-collapse>
				</view>
			</view>


			<view class="">
				<view class="">
					扫描组件
				</view>
				<view style="display: flex;flex-direction: row;">
					<button @click="scanClick">扫描组件</button>
					<button @click="scanLocationClick">扫描库位</button>
				</view>
				<win-scan-pack ref='scanPack'></win-scan-pack>
				<win-scan-location ref="scanLocation" @getLocation='getLocationInfo'></win-scan-location>
				<view style="height: 60px;">

				</view>
			</view>

			<view class="">
				滑动删除
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item v-for="(item, index) in swipeList" :right-options="item.options"
						:key="item.id" @change="swipeChange($event, index)" @click="swipeClick($event, index)">
						<view class="content-box">
							<text class="content-text">{{ item.content }}</text>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>

			<view style="height: 80px;">

			</view>
		</view>
	</view>
</template>

<script>
	import winItemBasicInfo from '@/mycomponents/wincom/unitCom/winItemBasicInfo.vue'
	import winItemInfo from '@/mycomponents/wincom/unitCom/winItemInfo.vue'
	import winItemDetailInfo from '@/mycomponents/wincom/unitCom/winItemDetailInfo.vue'
	import winJobNumber from '@/mycomponents/wincom/unitCom/winJobNumber.vue'
	import winJobCreation from '@/mycomponents/wincom/unitCom/winJobCreation.vue'
	import winPackingCode from '@/mycomponents/wincom/unitCom/winPackingCode.vue'
	import winContainerCode from '@/mycomponents/wincom/unitCom/winContainerCode.vue'
	import winLot from '@/mycomponents/wincom/unitCom/winLot.vue'
	import winLocationCode from '@/mycomponents/wincom/unitCom/winLocationCode.vue'
	import winLocationInfo from '@/mycomponents/wincom/unitCom/winLocationInfo.vue'
	import winLocationDetail from '@/mycomponents/wincom/unitCom/winLocationDetail.vue'
	import winInventoryStatus from '@/mycomponents/wincom/unitCom/winInventoryStatus.vue'
	import winSupplierInfo from '@/mycomponents/wincom/unitCom/winSupplierInfo.vue'
	import winQty from '@/mycomponents/wincom/unitCom/winQty.vue'
	import winQtyEdit from '@/mycomponents/wincom/unitCom/winQtyEdit.vue'
	import winRecommendSimple from '@/mycomponents/wincom/unitCom/winRecommendSimple.vue'
	import winJobScanCount from '@/mycomponents/wincom/basicCom/winJobScanCount.vue'
	import winJobDetailCompare from '@/mycomponents/wincom/basicCom/winJobDetailCompare.vue'
	import winJobRecommend from '@/mycomponents/wincom/unitCom/winJobRecommend.vue'
	import winLabel from '@/mycomponents/wincom/basicCom/winLabel.vue'
	import winCollapseItem from '@/mycomponents/wincom/basicCom/winCollapseItem.vue'
	import winScanButton from '@/mycomponents/wincom/scanCom/winScanButton.vue'
	import winComScan from '@/mycomponents/wincom/scanCom/winComScan.vue'
	import winScanPack from '@/mycomponents/wincom/scanCom/winScanPack.vue'
	import winScanLocation from '@/mycomponents/wincom/scanCom/winScanLocation.vue'
	import winBalance1 from '@/mycomponents/wincom/basicCom/winBalance1.vue'
	import winBalance2 from '@/mycomponents/wincom/basicCom/winBalance2.vue'
	import winBalance3 from '@/mycomponents/wincom/basicCom/winBalance3.vue'
	import winBalance4 from '@/mycomponents/wincom/basicCom/winBalance4.vue'
	import winBalance5 from '@/mycomponents/wincom/basicCom/winBalance5.vue'


	import {
		ref,
		reactive
	} from 'vue'
	export default {
		name: 'demo',
		components: {
			winItemBasicInfo,
			winItemInfo,
			winPackingCode,
			winItemDetailInfo,
			winJobNumber,
			winJobCreation,
			winContainerCode,
			winLot,
			winLocationCode,
			winLocationInfo,
			winLocationDetail,
			winInventoryStatus,
			winSupplierInfo,
			winQty,
			winQtyEdit,
			winRecommendSimple,
			winJobScanCount,
			winJobDetailCompare,
			winJobRecommend,
			winLabel,
			// winBalance,
			winBalance1,
			winBalance2,
			winBalance3,
			winBalance4,
			winBalance5,
			winCollapseItem,
			winScanButton,
			winComScan,
			winScanPack,
			winScanLocation
		},
		setup() {
			let item = reactive({
				itemCode: '零件号A',
				itemName: '零件名称A',
				itemDesc1: '描述1',
				itemDesc2: '描述2',
			})
			let location = reactive({
				locationCode: '库位A',
				group: '库位组',
				area: '库区',
				erpCode: 'ErpCode'
			})
			let qty = reactive({
				qty: 10,
				uom: 'EA'
			})
			let stdPackQty = reactive({
				qty: 20,
				uom: 'EA'
			})

			let dataPackInfo = {
				packCode: "BOX",
				packName: "BOX",
				packQty: {
					uom: "EA",
					qty: 80
				},
				allQty: 80
			}

			let recommendInfo = reactive({
				Status: 1,
				recommendPackingCode: '推荐箱码A',
				recommendLot: '推荐批次A',
				recommendQty: 10,
				recommendUom: "单位",
				stdPackQty: 10,
				recommendContainerCode: '推荐托码A',
				recommendLocationCode: '推荐库存A',
				recommendLocation: {
					locationCode: '库位A',
					group: '库位组',
					area: '库区',
					erpCode: 'ErpCode'
				},
				HandledPackingCode: '实际箱码A',
				HandledLot: '实际批次A',
				HandledQty: 10,
				HandledUom: "EA",
				HandledContainerCode: '实际托码A',
				HandledLocationCode: '实际库存A',
				HandledLocation: {
					locationCode: '库位A',
					group: '库位组',
					area: '库区',
					erpCode: 'ErpCode'
				}

			})
			let jobInfo = reactive({
				number: '任务编号A',
				jobStatus: 1,
				id: 123456
			})
			let balance = reactive({
				itemCode: '零件号A',
				itemName: '零件名称A',
				packingCode: '箱码A',
				lot: '批次A',
				supplierBatch: '供应商批次1',
				produceDate: '2023年3月14日',
				expireDate: '2024年3月14日',
				qty: 10,
				uom: 'EA',
				stdPackQty: 20,
				stdPackUom: 'EA',

				// qty: {
				// 	qty: 10,
				// 	uom: 'EA'
				// },
				// stdPackQty: {
				// 	qty: 20,
				// 	uom: 'EA'
				// },
				status: 1,
				location: {
					locationCode: '库位A',
					group: '库位组',
					area: '库区',
					erpCode: 'ErpCode'
				},

			})

			let label = reactive({
				code: '零件号A',
				itemCode: '零件号A',
				itemName: '零件名称A',
				packingCode: '箱码A',
				lot: '批次A',
				qty: 10,
				stdPackQty: 20,
				supplierCode: '供应商代码A',
				supplierName: '供应商名称A',
				poNumber: '采购订单A',
				team: '班组',
				shift: '班次',
				prodLine: '生产线A',
				LabelType: '1', //2采购标签
			})

			let range = reactive([{
					"value": 0,
					"text": "篮球",
					"disable": true
				},
				{
					"value": 1,
					"text": "足球"
				},
				{
					"value": 2,
					"text": "游泳"
				}
			])

			//定义父组件向子组件传递的属性和属性值
			const itemDetailInfo = ref();
			const scanPack = ref();
			const packInfo = ref(dataPackInfo);
			const scanLocation = ref();

			const qtyEdit = ref();
			const openQtyEdit = () => {
				qtyEdit.value.openEdit();
			};
			const getQty = (qty) => {
				uni.showToast({
					title: '总数量:' + qty
				})
			};

			let swipeList = reactive([
				{
					id: 1,
					options: [{
							text: '置顶'
						},
						{
							text: '标记为已读',
							style: {
								backgroundColor: 'rgb(254,156,1)'
							}
						},
						{
							text: '删除',
							style: {
								backgroundColor: 'rgb(255,58,49)'
							}
						}
					],
					content: '滑动删除按钮'
				}
			])

			return {
				item,
				jobInfo,
				location,
				qty,
				stdPackQty,
				packInfo,
				itemDetailInfo,
				balance,
				label,
				recommendInfo,
				range,
				qtyEdit,
				scanPack,
				scanLocation,
				getQty,
				openQtyEdit,
				swipeList
			};
		},
		methods: {
			openItemDetailInfo() {
				this.itemDetailInfo.openDetail();
			},
			swipeChange(e, index) {
				console.log('返回：', e);
				console.log('当前索引：', index);
			},
			swipeClick(e, index) {
				if (e.content.text === '删除') {
					uni.showToast({
						title: `点击了删除按钮`,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: `点击了${e.content.text}按钮`,
						icon: 'none'
					});
				}
			},
			// openQtyEdit() {
			// 	this.qtyEdit.openEdit();
			// },
			scanClick() {
				this.scanPack.openScanPopup();
			},
			scanLocationClick() {
				this.scanLocation.openScanPopup();
			},
			getLocationInfo(res) {
				if (res == null) {
					uni.showToast({
						title: "库位没查到"
					})
				}
			},

			openJobDetail() {
				uni.showToast({
					title: "打开对应的任务详情页"
				})
			}
		}

	}
</script>

<style scoped>
	.page-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 35rpx;
	}


	.title {
		padding: 5px 13px;
		color: #BEBEBE;
		font-size: 16px;
	}

	.content {
		background-color: beige;
	}

	.content-box {
		flex: 1;
		/* #ifdef APP-NVUE */
		justify-content: center;
		/* #endif */
		height: 44px;
		line-height: 44px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		border-bottom-color: #f5f5f5;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.content-text {
		font-size: 15px;
	}
</style>