sfms3.0-uniapp/pages/demo/demo.vue

<template>
	<view class="" style="width: 100%;">
		<view class="">
			公共组件
		</view>
		<u-gap height="10" bg-color="#bbb"></u-gap>
		<button @click="takePhoto"> 拍照</button>
		<view class="">
			<view class="title-1">
				按钮组件
			</view>

			<view class="">
				<view class="" style="font-size: 35rpx; padding: 10rpx;">
					页面按钮
				</view>
				<div class="">
					<view class="" style="display: flex;flex-direction: row;">
						<view class="">
							<button class="btn_clear" style="button" hover-class="btn_clear_after" @click="">清空</button>
						</view>
						<view class="">
							<button class="btn_commit" hover-class="btn_commit_after" @click="">提交</button>
						</view>

					</view>
				</div>
				<view class="" style="font-size: 35rpx; padding: 10rpx;">
					弹出页按钮
				</view>
				<view class="uni-flex uni-row test">
					<button class="btn_edit_big_cancle" hover-class="btn_edit_big_after" @click="">取消</button>
					<button class="btn_edit_big_confirm" hover-class="btn_edit_big_after" @click="">确认</button>
				</view>
				<!-- 	<view class="" style="font-size: 35rpx; padding: 10rpx;">
					去添加
				</view>
				<view>

					<button style="margin-top: 30rpx;" class="btn_add_small" hover-class="btn_add_small_after"> +
						去添加</button>
				</view>
 -->
				<view class="" style="font-size: 35rpx; padding: 10rpx;">
					去扫描
				</view>
				<view>
					<com-blank-view @goScan='goScan'></com-blank-view>
				</view>

				<view class="" style="font-size: 35rpx; padding: 10rpx;">
					扫描按钮
				</view>
				<view>
					<win-scan-button @goScan='goScan'></win-scan-button>
				</view>

			</view>
		</view>
		<u-gap height="5" bg-color="#bbb"></u-gap>
		<view class="">
			<view class="" style=" font-size: 40rpx; padding: 20rpx;font-weight: 600;">
				扫描组件
			</view>
			<view class="">
				<button @click="openScanPopup">扫描箱码</button>
				<winScanPack ref="scanPopup" :title="'箱码'"></winScanPack>
			</view>
			<view class="">
				<button @click="openScanLocation">扫描库位</button>
				<winScanLocation ref="scanLocationCodePopup" :title="'收货库位'"></winScanLocation>
			</view>
			<view class="">
				<button @click="openScanNumber">扫描任务编号</button>
				<winScanJobNumber ref="scanNumber" :title="'任务编号'"></winScanJobNumber>
			</view>
		</view>
		<u-gap height="5" bg-color="#bbb"></u-gap>

		<!-- 任务组件 -->
		<view>
			<view class="title-1">
				任务组件
			</view>
			<view style="uni-flex uni-col ">
				<view>
					<view class="title-2">任务编号 - jobNumer</view>
					<view class="view-com">
						<job-number :number="jobDataContent.Number"></job-number>
					</view>
				</view>

				<view>
					<view class="title-2">任务状态 - jobStatus</view>
					<view class="view-com">
						<job-status :jobStatus="jobDataContent.status"></job-status>
					</view>
				</view>

				<view>
					<view class="title-2">任务顶部 - jobTop</view>
					<view class="view-com">
						<job-top :dataContent="jobDataContent"></job-top>
					</view>
				</view>

				<view>
					<view class="title-2">任务底部 - jobBottom</view>
					<view class="view-com">
						<job-bottom :dataContent="jobDataContent"></job-bottom>
					</view>
				</view>

				<view>
					<view class="title-2">任务其它属性 - jobProperty</view>
					<view class="view-com">
						<job-property></job-property>
					</view>
				</view>

				<view>
					<view class="title-2">任务卡片 - jobCard</view>
					<view class="view-com">
						<job-card :dataContent="jobDataContent"></job-card>
					</view>
				</view>
			</view>
		</view>

		<!-- 数量组件 -->
		<u-gap height="5" bg-color="#bbb"></u-gap>
		<view>
			<view class="title-1">
				数量组件
			</view>
			<view style="uni-flex uni-col ">
				<view class="">
					<button @click="openRecommendQtyEdit">任务数量编辑 recommendQtyEdit</button>
					<recommend-qty-edit ref="recommendQtyEdit" :dataContent="detailDataContent"
						:handleQty="recordDataContent.qty">
					</recommend-qty-edit>
				</view>

				<view class="">
					<button @click="openBalanceQtyEdit">库存数量编辑 balanceQtyEdit</button>
					<balance-qty-edit ref="balanceQtyEdit" :dataContent="balancDataContent"></balance-qty-edit>
				</view>
			</view>
			<view class="">
				<view class="uni-flex uni-column  content">
					<text>数量组件通用属性</text>
					<text> isShowStatus:显示状态</text>
					<text> isShowStdPack:显示标包</text>
				</view>
				<view class="title-2">默认数量 qty</view>
				<view class="view-com">
					<view class="uni-flex uni-row ">
						<qty :dataContent='detailDataContent' :isShowStdPack="false"></qty>
					</view>
				</view>

				<view class="title-2">推荐数量 recommendQty</view>
				<view class="view-com">
					<view class="uni-flex uni-row ">
						<recommend-qty :dataContent="detailDataContent" :isShowStatus="true"></recommend-qty>
					</view>
				</view>

				<view class="title-2">对比数量 compareQty</view>
				<view class="view-com">
					<view class="uni-flex uni-row ">
						<compare-qty :dataContent="detailDataContent" :recommendQty="detailDataContent.qty"
							:handleQty="100" :isShowStatus="true">
						</compare-qty>
					</view>
				</view>
			</view>
		</view>

		<u-gap height="5" bg-color="#bbb"></u-gap>
		<!-- 物料组件 -->
		<view>
			<view class="title-1">
				物料组件
			</view>
			<view class="">
				<view class="title-2">物料 item</view>
				<view class="view-com">
					<view class="uni-flex uni-row ">
						<item :dataContent="detailDataContent"></item>
					</view>
				</view>

				<view class="title-2">物料数量 itemQty</view>
				<view class="view-com">
					<item-qty :dataContent="detailDataContent" :handleQty="recordDataContent.qty"></item-qty>
				</view>

				<view class="title-2">物料数量 itemQty</view>
				<view class="view-com">
					<partCodeSelect :list="list"></partCodeSelect>
				</view>
			</view>
		</view>

		<u-gap height="5" bg-color="#bbb"></u-gap>

		<view>
			<view class="title-1">
				卡片组件
			</view>
			<view class="">
				<view class="title-2">箱码 pack</view>
				<view class="view-com">
					<pack :packingCode="detailDataContent.packingNumber"></pack>
				</view>

				<view class="title-2">托码 暂无</view>
				<view class="view-com">
				</view>

				<view class="title-2">批次 batch</view>
				<view class="view-com">
					<batch :batch="detailDataContent.batch"></batch>
				</view>

				<view class="title-2">库位 location</view>
				<view class="view-com">
					<location :locationCode="detailDataContent.fromLocationCode"></location>
				</view>


				<view class="title-2">推荐卡片 recommend</view>
				<view class="view-com">
					<recommend :detail="detailDataContent" :isScaned="false"></recommend>
				</view>

				<view class="title-2">推荐卡片/实际/已扫描 recommend</view>
				<view class="view-com">
					<recommend :detail="detailDataContent"></recommend>
				</view>

				<view class="title-2">库存卡片 balance</view>
				<view>
					<radio-group>
						<radio class="title-2" checked="true" @click="compareQtyClick">对比数量</radio>
						<radio class="title-2" @click="defaultQtyClick">默认数量</radio>
					</radio-group>

				</view>
				<view class="view-com">
					<balance :dataContent="detailDataContent"></balance>
				</view>

				<view class="title-2">单箱管理 </view>
				<view class="view-com">
					<balance :dataContent="detailDataContent"></balance>
				</view>

				<view class="title-2">批次管理 </view>
				<view class="view-com">
					<balance :dataContent="detailDataContent" :isShowPack="false"></balance>
				</view>

				<view class="title-2">批量管理 </view>
				<view class="view-com">
					<balance :dataContent="detailDataContent" :isShowPack="false" :isShowBatch="false"
						:isShowStdPack="false"></balance>
				</view>
			</view>
		</view>

		<u-gap height="10" bg-color="#bbb"></u-gap>

		<view class="">
			<view class="title-1">
				消息框-comMessage
			</view>

			<view>
				<u-button @click="openMessage">
					信息提示弹窗-showMessage
				</u-button>
				<u-button @click="openSuccess">
					成功提示弹窗-showSuccessMessage
				</u-button>
				<u-button @click="openError">
					错误提示弹窗-showErrorMessage
				</u-button>
				<u-button @click="openWarn">
					警告提示弹窗-showWarningMessage
				</u-button>
				<u-button @click="openGray">
					问题选择弹窗-showQuestionMessage
				</u-button>
				<com-message ref="message"></com-message>
			</view>
		</view>

		<view class="">
			<view class="title-1">
				库存状态组件-balanceStatus
			</view>
			<view class="view-com">
				<status status="kcztINSP"></status>

				<balance-status ref="balanceStatus" status="kcztINSP"></balance-status>
			</view>
		</view>
		<view class="">
			<view class="title-1">
				物料状态组件-itemStatus
			</view>

			<view class="uni-flex uni-row space-between" style="margin:20rpx">
				<item-status status="wpztENABLE"></item-status>
				<item-status status="wpztHOLD"></item-status>
				<item-status status="wpztNEW"></item-status>
				<item-status status="wpztPLAN"></item-status>
			</view>
		</view>

		<u-gap height="10" bg-color="#bbb"></u-gap>
		<view class="">
			<view class="" style=" font-size: 40rpx; padding: 20rpx;font-weight: 600;">
				无数据
			</view>
			<comEmptyView></comEmptyView>
		</view>
	 
	 <u-gap height="10" bg-color="#bbb"></u-gap>
		<view class="">
			<view class="" style=" font-size: 40rpx; padding: 20rpx;font-weight: 600;">
				库位相关组件
			</view>
			<u-gap height="5" bg-color="#bbb"></u-gap>
			<u-gap height="5" bg-color="#bbb"></u-gap>
			<view class="">
				<view class="" style="font-size: 35rpx; padding: 10rpx;">
					选择库位
				</view>

				<locationDrop :listLode="listLode"></locationDrop>
				<view class="" style="font-size: 35rpx; padding: 100rpx;">
					下拉列表
					<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates1"
						@confirm="pullDownConfirm" :height="100" />

				</view>

				<pullDown label="所在城市市111" @change="change" v-model="value1" :options="candidates2" :isSearch="true"
					@confirm="pullDownConfirm" />

			</view>
			<u-gap height="5" bg-color="#bbb"></u-gap>
		</view>
		<u-gap height="10" bg-color="#bbb"></u-gap>
	</view>
</template>

<script>
	import winScanPack from '@/mycomponents/scan/winScanPack.vue'
	import comEmptyView from '@/mycomponents/common/comEmptyView.vue'
	import jobFilter from '@/mycomponents/job/jobFilter.vue'
	import locationDrop from '@/mycomponents/location/locationDrop.vue'
	import partCodeSelect from '@/mycomponents/partCode/partCodeSelect.vue'
	import partCode from "@/mycomponents/partCode/partCode.vue"
	import winScanJobNumber from "@/mycomponents/scan/winScanJobNumber.vue"

	import jobNumber from '@/mycomponents/job/jobNumber.vue'
	import jobStatus from '@/mycomponents/job/jobStatus.vue'
	import jobTop from '@/mycomponents/job/jobTop.vue'
	import jobBottom from '@/mycomponents/job/jobBottom.vue'
	import jobProperty from '@/mycomponents/job/jobProperty.vue'
	import jobCard from '@/mycomponents/job/jobCard.vue'

	import qty from '@/mycomponents/qty/qty.vue'
	import recommendQty from '@/mycomponents/qty/recommendQty.vue'
	import compareQty from '@/mycomponents/qty/compareQty.vue'
	import item from '@/mycomponents/item/item.vue'
	import itemQty from '@/mycomponents/item/itemQty.vue'
	import itemStatus from '@/mycomponents/item/itemStatus.vue'

	import recommendQtyEdit from '@/mycomponents/qty/recommendQtyEdit.vue'
	import balanceQtyEdit from '@/mycomponents/qty/balanceQtyEdit.vue'

	import pack from '@/mycomponents/balance/pack.vue'
	import location from '@/mycomponents/balance/location.vue'
	import batch from '@/mycomponents/balance/batch.vue'
	import balance from '@/mycomponents/balance/balance.vue'

	import recommend from '@/mycomponents/recommend/recommend.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import status from '@/mycomponents/status/status.vue'
	import balanceStatus from '@/mycomponents/status/balanceStatus.vue'
	import statusEdit from '@/mycomponents/status/statusEdit.vue'

	import comBlankView from '@/mycomponents/common/comBlankView.vue'
	import winScanButton from '@/mycomponents/scan/winScanButton.vue'
	import winScanLocation from '@/mycomponents/scan/winScanLocation.vue'


	export default {
		components: {
			winScanPack,
			winScanJobNumber,
			comEmptyView,
			jobFilter,
			locationDrop,
			partCodeSelect,
			partCode,
			jobNumber,
			jobStatus,
			jobTop,
			jobBottom,
			jobProperty,
			jobCard,
			qty,
			recommendQty,
			compareQty,
			recommendQtyEdit,
			balanceQtyEdit,
			item,
			itemQty,
			itemStatus,
			pack,
			batch,
			location,
			balance,
			recommend,
			comMessage,
			status,
			balanceStatus,
			statusEdit,
			comBlankView,
			winScanButton,
			winScanLocation
		},
		data() {
			return {
				value1: '',
				candidates1: ['北京1', '南京1', '东京1', '西京1'],
				candidates2: ['北京', '南京', '东京', '西京'],
				jobDataContent: {
					Number: '0000001',
					status: "JOB_PENDING",
					creatorName: 'admin',
					creationTime: '2023-07-27 10:30:00'
				},
				detailDataContent: {
					itemCode: "LJH16540NAA",
					itemName: "门板金属螺丝钉",
					itemDesc1: "门板金属螺丝",
					stdPackQty: 1000,
					stdPackUnit: '箱',
					uom: 'EA',
					qty: 3000,
					inventoryStatus: 2,

					packingNumber: "516456579",
					batch: "20230510",
					fromLocationCode: "B0101",
					locationCode: "B0101",
					record: {
						qty: 1000
					}
				},

				recordDataContent: {
					itemCode: "LJH16540NAA",
					itemName: "门板金属螺丝钉",
					itemDesc1: "门板金属螺丝",
					stdPackQty: 1000,
					stdPackUnit: 'EA',
					uom: 'EA',
					qty: 500,
					inventoryStatus: 2,

					packingNumber: "516456579",
					batch: "20230510",
					toLocationCode: "B0101",
				},
				balancDataContent: {
					itemCode: "LJH16540NAA",
					itemName: "门板金属螺丝钉",
					itemDesc1: "门板金属螺丝",
					stdPackQty: 1000,
					stdPackUnit: 'EA',
					uom: 'EA',
					qty: 1000,
					UsableQty: 500,
					inventoryStatus: 2,
					packingNumber: "516456579",
					batch: "20230510",
					locationCode: "B0101",
				},

				dataList: [{
						title: "供应商",
						content: "一汽富维东阳"
					},
					{
						title: "订单号",
						content: "1652899744"
					},
					{
						title: "到货单",
						content: "05689113577"
					},
					{
						title: "发货单",
						content: "96851521215"
					},
					{
						title: "要货计划单",
						content: "558484812"
					},
					{
						title: "预计到货时间",
						content: "2022/02/22 9:58:00"
					},
					{
						title: "时间窗口",
						content: "2022/02/25 11:3:00"
					}
				],
				listLode: [{
						value: 1,
						label: '库区',
						children: [{
								value: 2,
								label: '库位组',
								children: [{
										value: 3,
										label: 'D0101'
									},
									{
										value: 4,
										label: 'D0202'
									}
								]
							},
							{
								value: 5,
								label: 'KQ1',
								children: [{
										value: 6,
										label: 'KW2'
									},
									{
										value: 7,
										label: 'D2525'
									}
								]
							}
						]
					},
					{
						value: 8,
						label: 'KQ2',
						children: [{
							value: 9,
							label: 'KWZ2',
							children: [{
								value: 10,
								label: 'D3000'
							}]
						}]
					}
				],
				list: [{
						value: 1,
						label: 'LJH1654005NAA'
					},
					{
						value: 2,
						label: 'VC800D0A411AB'
					}
				],


			};


		},
		onLoad() {},

		methods: {
			change(index, item) {
				this.$u.toast(`点击了第${index}项---${item}`);
			},
			goScan() {
				this.$u.toast(`弹出扫描窗体`);
			},

			pullDownConfirm(item) {
				this.$u.toast(`回车校验---${item}`);
			},
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},
			openScanLocation() {
				this.$refs.scanLocationCodePopup.openScanPopup();
			},
			openRecommendQtyEdit() {
				this.$refs.recommendQtyEdit.openEditPopup()
			},
			openBalanceQtyEdit() {
				this.$refs.balanceQtyEdit.openEditPopup()
			},
			stockCountEditBtn() {
				this.$refs.stockCountEdit.openScanPopup()
			},
			updateState(state) {
				this.state = state;
			},
			filter() {
				this.$refs.filter.openFilter();
			},

			defaultQtyClick() {
				this.detailDataContent.record.qty = 0;
			},

			compareQtyClick() {
				this.detailDataContent.record.qty = 1000;
			},

			scanedClick() {
				this.detailDataContent.scaned = true;
			},

			unScanedClick() {
				this.detailDataContent.scaned = false;
			},

			openMessage() {
				this.$refs.message.showMessage("消息", res => {

				});
			},

			openSuccess() {
				this.$refs.message.showSuccessMessage("提交成功", res => {

				});
			},
			openWarn() {
				this.$refs.message.showWarningMessage("警告对话框", res => {

				});
			},
			openError() {
				this.$refs.message.showErrorMessage("库存余额不足", res => {

				});
			},
			openGray() {
				this.$refs.message.showQuestionMessage("是否确定", res => {
					this.$u.toast(`点击了` + res);
				});
			},
			 
			openScanNumber() {
				this.$refs.scanNumber.openScanPopup()
			},

			takePhoto() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths)); //拍照图片的路径
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.content {
		font-size: 30rpx;

		padding: 20rpx;
	}

	.title-1 {
		font-size: 40rpx;
		font-weight: 600;
		padding: 20rpx;
	}

	.title-2 {
		font-size: 30rpx;
		font-weight: 600;
		padding: 20rpx;
	}

	.view-com {
		padding: 0rpx 20rpx;
	}
</style>