2025-03-JS-SDK-PDA/pages/StockOut/features/ShipRequestReservation/index.vue

<template>
	<view>
		<!-- <u-navbar back-text="返回" title="出库备货" :background="background"></u-navbar> -->
		<navVar :mysNavConfig="navConfig" @onLeftClick="onLeftClick"></navVar>
		<view class="tabbar_top">
			<u-form ref="testForm">
				<u-form-item :border-bottom="false">
					<p>单号:</p>
					<u-select v-model="dlistShow" mode="single-column" value-name="id" :list="dlist"
						@confirm="selShipRequestName" confirm-text="确认选择" class="single-out" />
					<u-input :focus="focusShipRequest" :border="true" v-model="ShipRequestName" placeholder="请输入单号"
						@confirm="selShipRequestName()" />
					<u-button @click="selectShipRequestName" type="primary" style="height: 70rpx;margin-left: 10rpx;">选择单号</u-button>
				</u-form-item>
				<u-form-item :border-bottom="false">
					<p>条码:</p>
					<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode"
						@confirm="confirmBarcode" />
				</u-form-item>
			</u-form>
		</view>
		<view>
			<uni-table ref="InvoiceList" :border="true" style="height: 300upx;">
				<uni-tr>
					<uni-th width="60" align="center" style="font-size: 12px;">料号</uni-th>
					<uni-th width="100" align="center" style="font-size: 12px;">品名</uni-th>
					<uni-th width="100" align="center" style="font-size: 12px;">需求部门</uni-th>
					<uni-th width="100" align="center" style="font-size: 12px;">需求数量</uni-th>
					<uni-th width="110" align="center" style="font-size: 12px;">已备货数量</uni-th>
					<uni-th width="110" align="center" style="font-size: 12px;">已出库数量</uni-th>
					<uni-th width="110" align="center" style="font-size: 12px;">剩余扫码数量</uni-th>
					<uni-th width="100" align="center" style="font-size: 12px;">物料规格</uni-th>
					<uni-th width="100" align="center" style="font-size: 12px;">SDK规格</uni-th>
					<uni-th width="60" align="center" style="font-size: 12px;">阶段</uni-th>
					<uni-th width="60" align="center" style="font-size: 12px;">单号</uni-th>
					<uni-th width="120" align="center" style="font-size: 12px;">生产订单类型</uni-th>
					<uni-th width="80" align="center" style="font-size: 12px;">客户编码</uni-th>
					<uni-th width="80" align="center" style="font-size: 12px;">是否通用料</uni-th>
					<uni-th width="120" align="center" style="font-size: 12px;">最小收卷米数</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in InvoiceList" :key="index">
					<uni-td width="60" align="center" style="font-size: 12px; ">{{ item.MATERIALSPECNAME}}</uni-td>
					<uni-td width="100" align="center" style="font-size: 12px; ">{{ item.DESC_CN }}</uni-td>
					<uni-td width="100" align="center" style="font-size: 12px; ">{{ item.DEPARTMENT }}</uni-td>
					<uni-td width="100" align="center" style="font-size: 12px; ">{{ item.REQUESTQUANTITY }}</uni-td>
					<uni-td width="60" align="center" style="font-size: 12px; ">{{ item.ASSIGNEDQUANTITY }}</uni-td>
					<uni-td width="60" align="center" style="font-size: 12px; ">{{ item.SALEOUTQUANTITY }}</uni-td>
					<uni-td width="120" align="center" style="font-size: 12px; ">{{ item.SMQTY }}</uni-td>
					<uni-td width="100" align="center" style="font-size: 12px; ">{{ item.DESCRIPTION}}</uni-td>
					<uni-td width="100" align="center" style="font-size: 12px; ">{{ item.SPECNAME}}</uni-td>
					<uni-td width="60" align="center" style="font-size: 12px; ">{{ item.PHASE}}</uni-td>
					<uni-td width="60" align="center" style="font-size: 12px; ">{{ item.SHIPREQUESTNAME}}</uni-td>
					<uni-td width="120" align="center" style="font-size: 12px;">{{ item.PRODUCTORDERTYPE}}</uni-td>
					<uni-td width="80" align="center" style="font-size: 12px;">{{ item.CUSTOMERNO}}</uni-td>
					<uni-td width="80" align="center" style="font-size: 12px;">{{ item.COMMONMATERIALFLAG}}</uni-td>
					<uni-td width="120" align="center" style="font-size: 12px;">{{ item.SJMS}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<br />
		<u-card style="border: 1rpx solid #0081ff" :show-head="false" :full="true" :body-style="{ height: '100rpx' }">
			<view slot="body">
				<u-row>
					<u-col span="6">
						<view>累计扫描支数：{{ SUMJS || '0' }}</view>
					</u-col>
					<u-col span="6">
						<view>累计扫描数量：{{ MATERIALQUANTITY || '0' }}</view>
					</u-col>
				</u-row>
			</view>
		</u-card>
		<!-- 分栏器 -->
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="clickitem" />
		</view>
		<view>
			<view v-show="current === 0">


				<!-- fit 列的宽度是否自撑开 -->
				<view style="margin-bottom: 180rpx;">
					<!-- 			<zb-table style="height: 800upx;" ref="zbTable" :show-header="true" :columns="column" :stripe="true"
				:fit="true" show-summary :highlight="true" :border="true" :data="BoxInfoList" :cell-style="cellStyleFn"
				@lkbh="lkbh" @dele="dele" @edit="buttonEdit"></zb-table> -->
					<!-- 分页组件 -->
					<view class="pagination">
						<u-button size="mini" @click="prevPage" :disabled="currentPage === 1">上一页</u-button>
						<span v-for="page in displayedPages" :key="page">
							<u-button size="mini" @click="goToPage(page)" :class="{ active: currentPage === page }">
								{{ page }}
							</u-button>
						</span>
						<u-button size="mini" @click="nextPage" :disabled="currentPage === totalPages">下一页</u-button>
					</view>

					<view class="search-box">
						<u-input type="text" placeholder="请输入搜索料号" v-model="searchSpec" class="search-input" clearable />
					</view>

					<view class="list-item" v-for="(item, index) in paginatedBoxInfoList" :key="item.id">
						<view :class="setBbColorByCharge(item.IS_CHECK,item.BHFLG, item.MATERIALSPECNAME)"
							@click="toggleFold(index)">
							<div>
								<text class="card-description"> 批次: {{ item.CHARGE }}</text>
							</div>
							<div>
								<text class="card-description"> 料号: {{ item.MATERIALSPECNAME }}</text>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<text class="card-description"> 阶段: {{ item.PHASE }}</text>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<text class="card-description"> SDK规格: {{ item.SPECNAME }}</text>
							</div>
							<div>
								<text class="card-description"> 系统数量: {{ item.MATERIALQUANTITY }} {{ item.UNIT }}</text>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<text class="card-description"> 发货数量: {{ item.MATERIALQUANTITY2 }}
									{{ item.UNIT }}</text>
							</div>
							<div>
								<text class="card-description" v-if="isFolded[index]" @click.stop>点击折叠</text>
								<text class="card-description" v-else @click.stop>点击展开</text>
							</div>
							<div v-show="isFolded[index]" class="folded-content">
								<div>
									<text class="card-description"> 品名: {{ item.DESC_CN }}</text>
								</div>
								<div>
									<text class="card-description"> 实际规格: {{ item.TRUEGG }}</text>
								</div>
								<div>
									<text class="card-description"> 仓库: {{ item.ERPLOCATION }}</text>
								</div>
								<div>
									<text class="card-description"> 货位: {{ item.LOCATIONNAME }}</text>
								</div>

								<div>
									<text class="card-description"> 库区: {{ item.AREANAME }} </text>
									&nbsp;&nbsp;&nbsp;&nbsp;
									<text class="card-description"> 立体库货架: {{ item.SHELFNAME }} </text>
								</div>
								<div>
									<text class="card-description"> 确认标识: {{ item.IS_CHECK }} </text>
									&nbsp;&nbsp;&nbsp;&nbsp;
									<text class="card-description"> 备货标识: {{ item.BHFLG }} </text>
								</div>
								<div>
									<text class="card-description"> 入库时间: {{ item.RECEIVETIME }} </text>
								</div>
							</div>
							<div class="button-group">
								<u-button type="primary" size="mini" @click="lkbh(index, item)">立库备货</u-button>
								<u-button type="primary" size="mini" @click="buttonEdit(index, item)">编辑</u-button>
								<u-button type="primary" size="mini" @click="dele(index, item)">删除</u-button>
							</div>
						</view>

					</view>
				</view>

			</view>
			<view v-show="current === 1">
				<view class="list-item" v-for="(item, index) in BoxInfoList" :key="item.id">
					<view v-if="item.IS_CHECK === 'Y'" @click="toggleFold(index)">
						<div>
							<text class="card-description"> 批次: {{ item.CHARGE }}</text>
						</div>
						<div>
							<text class="card-description"> 料号: {{ item.MATERIALSPECNAME }}</text>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<text class="card-description"> 阶段: {{ item.PHASE }}</text>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<text class="card-description"> SDK规格: {{ item.SPECNAME }}</text>
						</div>
						<div>
							<text class="card-description"> 系统数量: {{ item.MATERIALQUANTITY }} {{ item.UNIT }}</text>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<text class="card-description"> 发货数量: {{ item.MATERIALQUANTITY2 }}
								{{ item.UNIT }}</text>
						</div>
						<div>
							<text class="card-description" v-if="isFolded[index]" @click.stop>点击折叠</text>
							<text class="card-description" v-else @click.stop>点击展开</text>
						</div>
						<div v-show="isFolded[index]" class="folded-content">
							<div>
								<text class="card-description"> 品名: {{ item.DESC_CN }}</text>
							</div>
							<div>
								<text class="card-description"> 实际规格: {{ item.TRUEGG }}</text>
							</div>
							<div>
								<text class="card-description"> 仓库: {{ item.ERPLOCATION }}</text>
							</div>
							<div>
								<text class="card-description"> 货位: {{ item.LOCATIONNAME }}</text>
							</div>

							<div>
								<text class="card-description"> 库区: {{ item.AREANAME }} </text>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<text class="card-description"> 立体库货架: {{ item.SHELFNAME }} </text>
							</div>
							<div>
								<text class="card-description"> 确认标识: {{ item.IS_CHECK }} </text>
								&nbsp;&nbsp;&nbsp;&nbsp;
								<text class="card-description"> 备货标识: {{ item.BHFLG }} </text>
							</div>
							<div>
								<text class="card-description"> 入库时间: {{ item.RECEIVETIME }} </text>
							</div>
						</div>
						<div class="button-group">
							<u-button type="primary" size="mini" @click="buttonEdit(index, item)">编辑</u-button>
							<u-button type="primary" size="mini" @click="dele(index, item)">删除</u-button>
						</div>
					</view>

				</view>
			</view>
		</view>
		<view class="tabbar_bottom">
			<u-input v-if="false" v-model="opCode" />
			<uni-datetime-picker style="align-items: center;" type="date" :clear-icon="false" v-model="commitDate"
				@maskClick="maskClick" />
			<u-button style="height: 100rpx;" class="btn-bottom" @click="ConfirmButton" type="primary" :disabled="disableButton">发货确认</u-button>
		</view>
		<u-modal :show="showModal" :title="titleModal" :content='contentModal'></u-modal>
	</view>
</template>

<script>
	import navVar from "@/components/navBar/navBar.vue"
	import {
		getOpCode
	} from '@/common/api.js';
	import { cals } from '@/utils/cal'
	export default {
		components: {
			navVar
		},
		data() {
			return {
				SUMJS: 0,
				MATERIALQUANTITY: 0,
				commitDate: '',
				opCode: '',
				showModal: false,
				titleModal: "提示",
				contentModal: '是否确定返回时解绑?',
				navConfig: {
					navPadding: false,
					isHome: false,
					navPadding: true,
					navFixed: true,
					bgImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))',
					isCustomFn: true,
					navTitle: {
						text: "备货出库",
						color: "rgb(96, 98, 102)",
						fontSize: "14px", // px upx rpx
						fontWeight: "normal", // blod
					},
					leftText: {
						text: "返回",
						color: "rgb(96, 98, 102)",
						fontSize: "14px", // px upx rpx
						fontWeight: "", // blod
					},
					leftIconPath: '../../../../static/img/back.png'
				},
				disableButton: false,
				pageNum: 1, // 页数
				pageSize: 50, // 条数
				total: 0, //每页总数
				totalAll: 0,
				bqts: 0,
				bqkcs: 0,
				// moreStatus: 'more', // 上拉加载更多  more加载前 loading加载中	no-more没有更多数据
				flag: true, // 上拉加载开关 防止一次触底查询多次问题,防止数据查完后触底还调接口问题
				dlist: [{
					id: '',
					label: ''
				}], //选择内容
				dlistShow: false, //是否显示选择框				
				BoxInfoList: [], //列表展示明细
				boxList: [], //后台过账明细
				bindBoxList: [], //已备货明细
				preBindBoxList: [], //待备货明细
				ShipRequestName: "",
				shipRequestType: "",
				barCode: "",
				userId: "",
				siteName: "",
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				focusBarCode: false, //焦点是否被选中
				focusShipRequest: true, //默认焦点在单号
				InvoiceList: [],
				indexList: [],
				currentPage: 1, // 当前页码  
				perPage: 10, // 每页显示的项目数  
				pageRange: 1, //前后显示的页码数量 
				isFolded: [], // 用于存储每个项目的折叠状态，初始为 false（不折叠）
				searchSpec: [], //搜索料号

				// 分栏器
				current: 0,
				items: ['库存列表', '备货列表'],
				styleType: 'text',
				activeColor: '#007aff',
			}
		},
		mounted() {
			this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
			let that = this
			uni.getStorage({
				key: "siteName",
				success(res) {
					that.siteName = res.data
				}
			})
			uni.getStorage({
				key: "userid",
				success(res) {
					that.userId = res.data
				}
			})
			this.getTimeData();
			// 初始化折叠状态数组  
			this.paginatedBoxInfoList.forEach((_, index) => {
				this.$set(this.isFolded, index, true);
			});

		},
		computed: {
			displayedPages() {
				let start = Math.max(this.currentPage - this.pageRange, 1);
				let end = Math.min(this.currentPage + this.pageRange, this.totalPages);
				let pages = [];
				for (let i = start; i <= end; i++) {
					pages.push(i);
				}
				// 如果第一页不在范围内，添加省略号  
				if (start > 1) {
					pages.unshift('...');
				}
				// 如果最后一页不在范围内，添加省略号  
				if (end < this.totalPages) {
					pages.push('...');
				}
				return pages;
			},
			paginatedBoxInfoList() {
				const start = (this.currentPage - 1) * this.perPage;
				const end = start + this.perPage;
				return this.BoxInfoList.slice(start, end);
			},
			totalPages() {
				return Math.ceil(this.BoxInfoList.length / this.perPage);
			},


		},
		methods: {
			//分栏器的点击事件
			clickitem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex //获取当前选中的index
				}
			},
			toggleFold(index) {
				this.$set(this.isFolded, index, !this.isFolded[index]);
			},
			setBbColorByCharge(isCHECK, isBH, SpecName) {
				let spec = this.searchSpec
				let showhidd = 'show'
				if (SpecName.includes(spec) || spec == '') {
					showhidd = 'show'
				} else {
					showhidd = 'hidden'
				}
				console.log("setBbColorByCharge" + isCHECK + ":" + isBH)
				if (isCHECK == 'Y' && isBH == 'Y') {
					return 'yellowgreen' + '-' + showhidd
				} else if (isCHECK == 'N' && isBH == 'N') {
					return 'white' + '-' + showhidd
				} else {
					return 'yellow' + '-' + showhidd
				}
			},

			/* 分页方法 */
			prevPage() {
				if (this.currentPage > 1) {
					this.currentPage--;
				}
			},
			nextPage() {
				if (this.currentPage < this.totalPages) {
					this.currentPage++;
				}
			},
			goToPage(page) {
				if (page != "...") {
					this.currentPage = page;
				}
			},
			/* 分页方法 */

			getTimeData() {
				var year = new Date().getFullYear(); //年
				if (year < 1900) year = year + 1900;
				var month = new Date().getMonth() + 1; //月
				if (month < 10) month = '0' + month;
				var day = new Date().getDate(); //日
				if (day < 10) day = '0' + day;
				const calendar1 = year + '-' + month + '-' + day
				this.commitDate = calendar1
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			onLeftClick(e) {
				if (this.BoxInfoList.every(item => item.BHFLG != 'Y')) {
					uni.navigateBack({
						delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
					});
				} else {
					this.showModal = true;
					console.log(111, e, this.BoxInfoList)
					let self = this
					uni.showModal({
						title: this.titleModal, // 模态框标题
						content: this.contentModal, // 模态框内容
						showCancel: true, // 是否显示取消按钮，默认为true
						cancelText: '取消', // 取消按钮的文字
						confirmText: '确定', // 确定按钮的文字
						success(res) {
							if (res.confirm) {
								// console.log(self.BoxInfoList)
								let listl = self.BoxInfoList.length;
								for (let i = 0; i < listl; i++) {
									if (self.BoxInfoList[i].IS_CHECK == 'Y' || self.BoxInfoList[i].BHFLG == 'Y') {
										console.log(i, i, 'all')
										self.delAll(i, i, 'all')
									}
								}
								uni.navigateBack({
									delta: 1 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
								});
								console.log('用户点击了确定');
								// 执行确认后的逻辑
							} else if (res.cancel) {
								console.log('用户点击了取消');
								// 执行取消后的逻辑
							}
						}
					})
				}
			},
			// 立库出货
			lkbh(index, row) {
				// 打开编辑对话框，或者直接修改 this.tableData[index]
				console.log("SSS" + this.paginatedBoxInfoList[index].CHARGE)
				if (this.paginatedBoxInfoList[index].SHELFNAME == '' || this.paginatedBoxInfoList[index].SHELFNAME ==
					null) {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$showMessage("非立库不能使用此功能")
					return
				}
				//this.showInputDialog(row)
				this.barCode = this.paginatedBoxInfoList[index].MATERIALPACKINGNAME
				this.confirmBarcode()
			},
			// 编辑发货数量
			buttonEdit(index, row) {
				// 打开编辑对话框，或者直接修改 this.tableData[index]
				console.log(this.paginatedBoxInfoList[index].IS_CHECK)
				if (this.paginatedBoxInfoList[index].IS_CHECK != 'Y') {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$showMessage("未备货标签不能修改发货数量")
					return
				}
				this.showInputDialog(index)
			},
			
			/**取消all备货
			 * @param {Object} index
			 * @param {Object} row
			 */
			delAll(index, row, all) {
				// this.BoxInfoList[row].IS_CHECK = 'N'
				// this.BoxInfoList[row].MATERIALQUANTITY2 = this.BoxInfoList[row].MATERIALQUANTITY
				this.$MyRequest('/invoice/DessignOrAssign', {
					ShipRequestName: this.ShipRequestName,
					ShipRequestDetailName: this.BoxInfoList[index].SHIPREQUESTDETAILNAME,
					MATERIALSPECNAME: this.BoxInfoList[index].MATERIALSPECNAME,
					MATERIALPACKINGNAME: this.BoxInfoList[index].MATERIALPACKINGNAME,
					MATERIALQUANTITY: this.BoxInfoList[index].MATERIALQUANTITY,
					MATERIALQUANTITY2: this.BoxInfoList[index].MATERIALQUANTITY2,
					SDK_ID: this.BoxInfoList[index].SDK_ID,
					PHASE: this.BoxInfoList[index].PHASE,
					type: "Dessign",
					user: this.userId,
					siteName: this.siteName,
				}).then(res => {
					this.barCode = '';
					this.focusBarCode = true
					this.focusShipRequest = false
			
					
					// this.BoxInfoList[index]['IS_CHECK'] = "N"
					// console.log(this.BoxInfoList[index]['IS_CHECK'] + "********")
					// this.BoxInfoList[index]['BHFLG'] = "N"
					// this.indexList = this.indexList.filter(i => i.MATERIALPACKINGNAME != this.paginatedBoxInfoList[
					// 		index]
					// 	.MATERIALPACKINGNAME)
					// this.indexList.splice(row,1)
					// console.log(22, this.indexList)
					// this.serachMaterialList(this.indexList)
					this.getStockOutInvoiceInfo()
				}).catch(err => {
					this.barCode = '';
					this.focusBarCode = true
					this.focusShipRequest = false
					this.$showMessage(res)
				})
			},

			/**取消备货
			 * @param {Object} index
			 * @param {Object} row
			 */
			dele(index, row, all) {
				// this.BoxInfoList[row].IS_CHECK = 'N'
				// this.BoxInfoList[row].MATERIALQUANTITY2 = this.BoxInfoList[row].MATERIALQUANTITY
				if (this.paginatedBoxInfoList[index].BHFLG != 'Y') {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$showMessage("未备货标签不能取消")
					return
				}
				let boxList = []
				boxList.push(this.paginatedBoxInfoList[index])
				this.$MyRequest('/invoice/DessignOrAssign', {
					ShipRequestName: this.ShipRequestName,
					ShipRequestDetailName: this.paginatedBoxInfoList[index].SHIPREQUESTDETAILNAME,
					MATERIALSPECNAME: this.paginatedBoxInfoList[index].MATERIALSPECNAME,
					MATERIALPACKINGNAME: this.paginatedBoxInfoList[index].MATERIALPACKINGNAME,
					MATERIALQUANTITY: this.paginatedBoxInfoList[index].MATERIALQUANTITY,
					MATERIALQUANTITY2: this.paginatedBoxInfoList[index].MATERIALQUANTITY2,
					SDK_ID: this.paginatedBoxInfoList[index].SDK_ID,
					PHASE: this.paginatedBoxInfoList[index].PHASE,
					type: "Dessign",
					user: this.userId,
					siteName: this.siteName,
				}).then(res => {
					this.barCode = '';
					this.focusBarCode = true
					this.focusShipRequest = false

					// 当删除所有时去除弹框
					if (all && all != 'all') {
						this.$showMessage(res)
					}
					this.paginatedBoxInfoList[index]['IS_CHECK'] = "N"
					console.log(this.paginatedBoxInfoList[index]['IS_CHECK'] + "********")
					this.paginatedBoxInfoList[index]['BHFLG'] = "N"
					this.indexList = this.indexList.filter(i => i.MATERIALPACKINGNAME != this.paginatedBoxInfoList[
							index]
						.MATERIALPACKINGNAME)
					// this.indexList.splice(row,1)
					console.log(22, this.indexList)
					// this.serachMaterialList(this.indexList)
					this.getStockOutInvoiceInfo()
				}).catch(err => {
					this.barCode = '';
					this.focusBarCode = true
					this.focusShipRequest = false
					this.$showMessage(res)
				})
			},

			// 显示弹窗输入框
			showInputDialog(row) {
				uni.showModal({
					title: '请完成发货数量填写',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入数量', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log('输入的内容：', res, res.content);
							if (Number(this.paginatedBoxInfoList[row].MATERIALQUANTITY) >= Number(res
									.content)) {
								this.paginatedBoxInfoList[row].MATERIALQUANTITY2 = res.content;
								this.$MyRequest('/SaleOut/updateSalePreOrder', {
									...this.paginatedBoxInfoList[row],
									user: this.userId,
									ShipRequestName: this.ShipRequestName,
									siteName: this.siteName == "" ? "SDK" : this.siteName,
								}).then(res => {
									this.$showMessage(res.data.message)
									this.getStockOutInvoiceInfo()
								}).catch(err => {
									try {
										Vue.prototype.$playFail()
									} catch (e) {}
									this.$showMessage(err)
								})
								this.getStockOutInvoiceInfo()
							} else {
								try {
									Vue.prototype.$playFail()
								} catch (e) {}
								this.$showMessage("发货数量不能大于标签数量")
							}
						}
					}
				});
			},
			selShipRequestName(e = []) {
				this.BoxInfoList = []
				this.pageNum = 1
				console.log(e)
				if(e.length) {
					this.ShipRequestName = e[0].value;
				}
				this.indexList = []
				this.serachMaterialList();
			},
			serachMaterialList(indexList = []) {
				this.InvoiceList = []
				//先获取已经备货明细
				this.BoxInfoList = []
				this.$MyRequest('/invoice/ReservePackingInfo2', {
					ShipRequestName: this.ShipRequestName,
					ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY,
					user: this.userId
				}).then(res => {
					if (res.data.success) {
						if (indexList.length > 0) {
							res.data.resultObj.map((val) => {
								if (indexList.some(el => el.MATERIALPACKINGNAME == val
										.MATERIALPACKINGNAME)) {
									val.IS_CHECK = 'Y'
								}
							})
						}
						this.BoxInfoList = res.data.resultObj
						this.currentPage = 1
						this.getStockOutInvoiceInfo()
					} else {
						this.$showMessage(res.data.message)
					}

				}).catch(err => {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$showMessage(err)
				})
			},

			selectShipRequestName() {
				this.dlist = [];
				this.$MyRequest('/invoice/getStockOutInvoiceList', {
					ShipRequestName: this.ShipRequestName,
					ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY,
				}).then(res => {
					if (res.data.success) {
						for (var i = 0; i < res.data.resultObj.length; i++) {
							// console.log(res.data.resultObj[i].SHIPREQUESTNAME)
							this.dlist.push({
								id: res.data.resultObj[i].SHIPREQUESTNAME,
								label: res.data.resultObj[i].SHIPREQUESTNAME
							});

						}
						this.dlistShow = true;
					} else {
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						this.$showMessage(res.data.message)
					}

				}).catch(err => {
					this.$showMessage(err)
				})
			},

			getStockOutInvoiceInfo() {
				this.SUMJS = 0;
				this.MATERIALQUANTITY = 0;
				this.BoxInfoList.map(item => {
					if (item.IS_CHECK == "Y" && item.BHFLG == "Y") {
						// 累计数量
						this.SUMJS = parseFloat(this.SUMJS) + 1
						this.MATERIALQUANTITY = (cals.add(this.MATERIALQUANTITY,item.MATERIALQUANTITY2)).toNumber()
						// this.MATERIALQUANTITY = parseFloat(this.MATERIALQUANTITY) + parseFloat(item
						// 	.MATERIALQUANTITY2)
					}
				})

				this.$MyRequest('/invoice/getStockOutInvoiceSumInfo', {
					ShipRequestName: this.ShipRequestName,
					ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY,
					user: this.userId
				}).then(res => {
					if (res.data.success) {
						this.InvoiceList = res.data.resultObj
						try {
							Vue.prototype.$playSuccess()
						} catch (e) {}
					} else {
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						this.$showMessage(res.data.message)
					}

				}).catch(err => {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$showMessage(err)
				})
			},
			confirmBarcode() {
				let list = this.BoxInfoList;
				console.log(list)
				var errcount = 0;
				var LbarCode = this.barCode;
				this.focusBarCode = false;
				let boxList = []
				for (var i = 0; i < list.length; ++i) {
					// console.log(this.BoxInfoList[i]['MATERIALPACKINGNAME']  + "***" + LbarCode)
					if (this.BoxInfoList[i]['MATERIALPACKINGNAME'] === LbarCode) {
						console.log(this.BoxInfoList[i])
						if (this.BoxInfoList[i]['GROUPNO'] == 0) {
							this.$showMessage("标签已完成备货")
							this.$nextTick(() => {
								this.barCode = ""
								this.focusBarCode = true
								this.focusShipRequest = false
							})

							try {
								Vue.prototype.$playFail()
							} catch (e) {}
							return
						} else if (this.BoxInfoList[i]['GROUPNO'] > 1) {
							this.$showMessage("标签发货违背先进先出")
							try {
								Vue.prototype.$playFail()
							} catch (e) {}
							this.$nextTick(() => {
								this.barCode = ""
								this.focusBarCode = true
								this.focusShipRequest = false
							})

							return
						}
						if (this.BoxInfoList[i]['IS_CHECK'] == "Y") {
							try {
								Vue.prototype.$playFail()
							} catch (e) {}
							this.$showMessage("标签扫描重复")
							this.$nextTick(() => {
								this.barCode = ""
								this.focusBarCode = true
								this.focusShipRequest = false
							})
						}
						if (this.BoxInfoList[i]['BHFLG'] == "N") {
							this.$MyRequest('/invoice/DessignOrAssign', {
								ShipRequestName: this.ShipRequestName,
								MATERIALPACKINGNAME: LbarCode,
								MATERIALSPECNAME: this.BoxInfoList[i]['MATERIALSPECNAME'],
								MATERIALQUANTITY: this.BoxInfoList[i]['MATERIALQUANTITY'],
								SDK_ID: this.BoxInfoList[i]['SDK_ID'],
								PHASE: this.BoxInfoList[i]['PHASE'],
								type: "Assign",
								user: this.userId,
								siteName: this.siteName
							}).then(res => {
								if (res.data.success) {
									this.BoxInfoList[i]['IS_CHECK'] = "Y"
									this.BoxInfoList[i]['BHFLG'] = "Y"
									// this.indexList.push({index:i,MATERIALPACKINGNAME:LbarCode})
									// console.log(11,this.indexList)
									// this.serachMaterialList(this.indexList)

									this.getStockOutInvoiceInfo()

								} else {
									this.$showMessage(res.data.message)
									try {
										Vue.prototype.$playFail()
									} catch (e) {}
								}
								this.$nextTick(() => {
									this.barCode = ""
									this.focusBarCode = true
									this.focusShipRequest = false
								})
							}).catch(err => {
								this.$nextTick(() => {
									this.barCode = ""
									this.focusBarCode = true
									this.focusShipRequest = false
								})
								try {
									Vue.prototype.$playFail()
								} catch (e) {}
							})
						} else {
							this.BoxInfoList[i]['IS_CHECK'] = "Y"
							this.BoxInfoList[i]['BHFLG'] = "Y"
							this.indexList.push({
								index: i,
								MATERIALPACKINGNAME: LbarCode
							})

							this.getStockOutInvoiceInfo()
							this.$nextTick(() => {
								this.barCode = ""
								this.focusBarCode = true
								this.focusShipRequest = false
							})
							// try {Vue.prototype.$playFail() } catch (e) {}
						}
						return
					} else {
						// console.log(this.BoxInfoList[i]['MATERIALPACKINGNAME']  + "****"   + LbarCode)
						errcount++
					}
				}
				if (errcount == list.length) {
					this.$showMessage("标签不在发货范围内")
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
				}
				this.$nextTick(() => {
					this.barCode = ""
					this.focusBarCode = true
					this.focusShipRequest = false
				})

			},
			ConfirmButton() {
				this.disableButton = true;
				console.log(this.commitDate)
				let list = this.BoxInfoList;
				if (list <= 0) {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.disableButton = false;
					this.$showMessage("不存在需要提交的信息")
					return;
				}
				this.boxList = []
				for (var i = 0; i < list.length; ++i) {
					var judge = this.BoxInfoList[i]['IS_CHECK']
					if (judge != "Y") {} else {
						this.BoxInfoList[i].key = {
							SITENAME: "SDK",
							MATERIALPACKINGNAME: this.BoxInfoList[i].MATERIALPACKINGNAME
						};
						this.boxList.push(this.BoxInfoList[i])
					}
				}
				if (this.boxList.length < 1) {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.disableButton = false;
					this.$showMessage("不存在需要出库的信息")
					return;
				}
				getOpCode({
					opcode: this.opCode,
					user: this.userId
				}).then((res) => {
					console.log(res.resultObj)
					this.opCode = res.resultObj
					this.$MyRequest('/invoice/commitShipRequestNameNew', {
						ShipRequestName: this.ShipRequestName,
						user: this.userId,
						siteName: this.siteName,
						boxList: this.boxList,
						commitDate: this.commitDate,
						opcode: this.opCode,
					}).then(res => {
						this.opCode = "";
						this.disableButton = false;
						this.$showMessage(res.data.message) //执行出库后返回的消息
						this.focusShipRequest = true //获取焦点，好继续扫描
						this.focusBarCode = false
						this.BoxInfoList = []
						this.ShipRequestName = ""
						this.indexList = []
						this.InvoiceList = []
					}).catch(err => {
						this.disableButton = false;
						//this.BoxInfoList = []; //请空条码
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						this.focusShipRequest = true
						this.$showMessage(err)

					})
				})

			}


		}
	}
</script>
<style>
	.container {
		padding: 10px;
	}

	.list-item {
		margin-top: 16px;
		/* 卡片之间的间距 */
		/* padding: 12px; */
		/* 卡片内部的内边距 */
		/* background-color: #aaaa7f; */
		/* 卡片背景色 */
		border-radius: 8px;
		/* 卡片边框圆角 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 卡片阴影效果 */
	}

	.yellowgreen-show {
		border-radius: 8px;
		background-color: yellowgreen;
		flex: 1;
		padding-left: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.yellowgreen-hidden {
		border-radius: 8px;
		background-color: yellowgreen;
		flex: 1;
		display: none;
		padding-left: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.white-show {
		border-radius: 8px;
		background-color: white;
		flex: 1;
		padding-left: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.white-hidden {
		border-radius: 8px;
		background-color: white;
		flex: 1;
		display: none;
		padding-left: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.yellow-show {
		border-radius: 8px;
		background-color: yellow;
		flex: 1;
		padding-left: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.yellow-hidden {
		border-radius: 8px;
		background-color: yellow;
		flex: 1;
		display: none;
		padding-left: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.item-content {
		flex: 1;
		padding-left: 10px;
	}

	.single-out {
		pointerEvents: "none"
	}

	.pagination {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.pagination button {
		margin: 0 5px;
		padding: 5px 10px;
	}

	.pagination button.active {
		font-weight: bold;
		color: red;
		/* 或者其他突出显示的颜色 */
	}

	.button-group button {
		display: inline-block;
		/* 使按钮以内联块级元素显示 */
		margin: 0 5px;
		/* 为按钮添加一些左右外边距 */
		/* 根据需要添加其他样式 */
	}

	.card-description {
		margin: 15rpx;
	}

	/* 注意：当使用inline-block时，父级div通常不需要特殊样式，除非您要控制整体布局 */
</style>