hht-hdyy-uni/pages/hdyy/zpgl/mater-zutong.vue

<template>
	<view class="zd_container">
		<!-- 物料组桶 -->
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd_wrapper">
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">桶号</span>
					</view>
					<view class="zd-col-18">
						<search-box v-model="val1" @handleChange="handleChange"/>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">桶自重</span>
					</view>
					<view class="zd-col-16">
						<NumberInput v-model="weight" />
					</view>
					<view class="zd-col-2"><span class="filter_unit">KG</span></view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">物料编码</span>
					</view>
					<view class="zd-col-13">
						<search-box v-model="materialData.material_code"/>
					</view>
					<button class="mini-btn" type="primary" @tap="toJump('material?title=物料维护')">查询</button>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label filter_input_disabled">物料名称</span>
					</view>
					<view class="zd-col-18">
						<input type="text" class="filter_input filter_input_disabled" v-model="materialData.material_name" disabled>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label filter_input_disabled">物料类别</span>
					</view>
					<view class="zd-col-18">
						<input type="text" v-model="materialData.class_name" class="filter_input filter_input_disabled" disabled>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">批号</span>
					</view>
					<view class="zd-col-18">
						<input type="text" v-model="pcsn" class="filter_input">
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label filter_input_disabled">净重</span>
					</view>
					<view class="zd-col-18">
						<input type="number" v-model="num" class="filter_input filter_input_disabled" disabled>
					</view>
				</view>
				<view class="zd-row border-bottom">
					<view class="zd-col-6">
						<span class="filter_label">计量单位</span>
					</view>
					<view class="zd-col-18">
						<input type="text" class="filter_input" v-model="unit">
					</view>
				</view>
			</view>
		</view>
		<view class="zd-row submit-bar">
			<!-- <button class="zd-col-5 button-default" @tap="toEmpty">清空</button> -->
			<!-- <button class="zd-col-7 button-primary" :class="{'button-info': flag || !val1 || !weight || !pcsn || JSON.stringify(materialData) === '{}'}" :disabled="disabled" @tap="toZtPrint">组桶并打印</button> -->
			<button class="zd-col-10 button-primary" :class="{'button-info': flag || !val1 || !weight || !pcsn || JSON.stringify(materialData) === '{}'}" :disabled="disabled" @tap="handleSubmit">确认组桶</button>
			<button class="zd-col-10 button-primary" :class="{'button-info': !val1 || !weight || !pcsn || JSON.stringify(materialData) === '{}'}" :disabled="disabled1" @tap="tolPrint">标签打印</button>
		</view>
		<!-- 自定义弹窗 -->
		<view v-if="dialogVisible" class="dialog-mask" @click="closeDialog" @touchmove.stop.prevent>
			<view class="dialog-container" @click.stop>
				<view class="dialog-title">是否确认补打印标签</view>
				
				<view class="dialog-content">
				<!-- 物料卡标签填满更换 -->
				<view class="checkbox-item">
					<checkbox :checked="reasons.full" @click="toggleFull" />
					<text class="checkbox-label">物料卡标签填满更换</text>
				</view>
				
				<!-- 标签破损更换 -->
				<view class="checkbox-item">
					<checkbox :checked="reasons.broken" @click="toggleBroken" />
					<text class="checkbox-label">标签破损更换</text>
				</view>
				
				<!-- 其他选项 + 说明输入框 -->
				<view class="other-section">
					<view class="checkbox-item">
					<checkbox :checked="reasons.other" @click="toggleOther" />
					<text class="checkbox-label">其他，说明</text>
					</view>
					<!-- 当选中“其他”时，显示说明输入框 -->
					<input 
					v-if="reasons.other"
					class="filter_input"
					style="border:1px solid #ccc; text-indent: 6px; border-radius: 5px;"
					type="text"
					v-model="otherRemark"
					maxlength="100"
					/>
				</view>
				</view>

				<view class="dialog-buttons">
					<button class="cancel-btn" @click="closeDialog">取消</button>
					<button class="confirm-btn" type="primary" @click="submitReasons">确认打印</button>		
				</view>
			</view>
		</view>
		<!-- 放置弹窗组件(用户名密码) -->
    	<CredentialPopup ref="credentialPopup" />
	</view>
</template>

<script>
	import {getCLodop} from '@/utils/CLodopfuncs.js'
	import NavBar from '@/components/NavBar.vue'
	import SearchBox from '@/components/SearchBox.vue'
	import NumberInput from '@/components/NumberInput.vue'
	import {getDate} from '@/utils/utils.js'
	import {queryBuckInfo, queryRecordNoBucked, confirmBucketAssembly, printBucked} from '@/utils/getData3.js'
	export default {
		components: {
			NavBar,
			SearchBox,
			NumberInput
		},
		data() {
			return {
				title: '',
				val1: '',
				recordNo: '',
				materialData: {},
				weight: '',
				num: null,
				unit: 'KG',
				disabled: false,
				disabled1: false,
				pcsn: '',
				flag: false,
				dialogVisible: false,   // 控制弹窗显示/隐藏
				reasons: {
					full: false,          // 物料卡标签填满更换
					broken: false,        // 标签破损更换
					other: false          // 其他
				},
				otherRemark: ''         // 其他说明文字
			};
		},
		onLoad (options) {
			this.title = options.title
			this._queryRecordNoBucked()
		},
		onShow () {
			if (this.$store.getters.publicObj !== '') {
				this.materialData = this.$store.getters.publicObj
				this.$store.dispatch('setPublicObj', '')
			}
		},
		methods: {
			async handleSubmit() {
				if (this.flag || !this.val1 || !this.weight || !this.pcsn || JSON.stringify(this.materialData) === '{}') {
					this.disabled = false
					return
				}
				try {
					// 显示弹窗，等待用户输入
					const { username, password } = await this.$refs.credentialPopup.show();
					// 调用原接口，传入账号密码
					this._confirmBucketAssembly(username, password);
				} catch (error) {
					// 用户取消，不做处理
					console.log('用户取消输入');
				}
			},
			// 显示弹窗（重置表单）
			showDialog() {
				this.resetForm();
				this.dialogVisible = true;
			},
			// 关闭弹窗并重置表单
			closeDialog() {
				this.dialogVisible = false;
				this.resetForm();
			},
			// 重置所有选项和输入内容
			resetForm() {
			this.reasons = {
				full: false,
				broken: false,
				other: false
			};
			this.otherRemark = '';
			},
			// 切换复选框状态（手动控制，避免使用 v-model 复杂对象）
			toggleFull() {
				this.reasons.full = !this.reasons.full;
			},
			toggleBroken() {
				this.reasons.broken = !this.reasons.broken;
			},
			toggleOther() {
				this.reasons.other = !this.reasons.other;
				// 如果取消“其他”，清空说明内容（可选，提升体验）
				if (!this.reasons.other) {
					this.otherRemark = '';
				}
			},
			submitReasons () {
				this.labelPrint()
				console.log(1)
				this.closeDialog();
			},
			handleChange (e) {
				if (e) {
					this._queryBuckInfo(e)
				}
			},
			async _queryBuckInfo (e) {
				// this.dialogVisible = true
				try {
					let res = await queryBuckInfo(e)
					if (res) {
						this.materialData = res.data
						this.pcsn = this.materialData.pcsn
						this.weight = this.materialData.bucket_weight
						this.num = this.materialData.qty
						// 调用此接口后并成功返回结构后，页面所有操作禁用，【标签打印】按钮可以正常使用。
						this.flag = true
					} else {
						this.materialData = {}
						this.flag = false
					}
				} catch (e) {
					this.materialData = {}
					this.flag = false
				}
			},
			async _queryRecordNoBucked () {
				try {
					let res = await queryRecordNoBucked()
					if (res) {
						this.recordNo = res.data.recordNo
					}
				} catch (e) {
				}
			},
			toJump (name) {
				uni.navigateTo({
					url: `/pages/hdyy/wbc/${name}`
				})
			},
			toEmpty () {
				this.val1 = ''
				this.recordNo = ''
				this.materialData = {}
				this.weight = ''
				this.num = null
				this.unit = 'KG'
				this.pcsn = ''
				this.flag = false
				this.disabled = false
				this.disabled1 = false
				this.dialogVisible = false
				this.reasons = {
					full: false,          // 物料卡标签填满更换
					broken: false,        // 标签破损更换
					other: false          // 其他
				}
				this.otherRemark = ''
			},
			toZtPrint () {
				if (this.flag) {
					return
				}
				this._confirmBucketAssembly()
				this.labelPrint()
			},
			async _confirmBucketAssembly (username, password) {
				this.disabled = true
				try {
					let res = await confirmBucketAssembly(username, password, this.val1, this.weight, this.num, this.pcsn, this.materialData.material_id)
					if (res) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					this.val1 = ''
					this.disabled = false
				} catch (e) {
					this.disabled = false
				}
			},
			tolPrint() {
				if (this.flag) {
					this.dialogVisible = true
					return
				} else {
					this.labelPrint()
				}
			},
			async labelPrint () {
				this.disabled1 = true
				this.dialogVisible = false
				this.flag = false
				if (!this.val1 || JSON.stringify(this.materialData) === '{}' || JSON.stringify(this.suppData) === '{}') {
					this.disabled1 = false
					return
				}
				let row = Object.assign({}, this.materialData, this.suppData, {pcsn: this.pcsn, create_time: this.date, qty: this.num, bucket_code: this.val1, bucket_weight: this.weight})
				try {
					let res = await printBucked(row, this.$store.getters.printUrl)
					if (res) {
						// uni.showToast({
						// 	title: res.message,
						// 	icon: 'none'
						// })
						this.toPrint(row)
					}
					this.disabled1 = false
				} catch (e) {
					this.disabled1 = false
				}
			},
			toPrint (row) {
				let iparr = this.$store.getters.printUrl.split(":")
				let printUrl = iparr[1].slice(2)
				let LODOP = getCLodop();
				if (!(LODOP.webskt && LODOP.webskt.readyState === 1)) {
				    // uni.showToast({
					// 	title: '当前配置ip：' + printUrl + '网络不通，请检查',
					// 	icon: 'none',
					// 	duration: 5000
					// })
					this.disabled1 = false
				    return
				}
				LODOP.SET_SHOW_MODE('HIDE_DISBUTTIN_SETUP', 1)// 隐藏那些无效按钮
				// 打印纸张大小设置https://www.it610.com/article/2094844.html
				LODOP.PRINT_INIT('')
				LODOP.SET_PRINT_PAGESIZE(1, '94mm', '119mm', '')
				LODOP.ADD_PRINT_RECT('1mm', '3mm', '92mm', '117mm', 0, 1)
				LODOP.ADD_PRINT_TEXT('2.88mm', '35.4mm', '32.65mm', '5.95mm', '中 美 华 东 制 药')
				LODOP.ADD_PRINT_TEXT('6.56mm', '22.33mm', '62.02mm', '5.69mm', 'Zhongmei Huadong Pharmaceutical')
				LODOP.ADD_PRINT_TEXT('10.45mm', '13.86mm', '98mm', '7.01mm', '周 转 物 料 卡 Turnover Material Card')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 11)
				LODOP.ADD_PRINT_TEXT('15.48mm', '5.13mm', '93.24mm', '5.69mm', '依据《状态标识牌的有关规定》（QA-SMP-B005）制定此记录')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
				LODOP.ADD_PRINT_TEXT('19.45mm', '5.13mm', '128.69mm', '7.01mm', 'Establish this record according to “SMP for status signboard”')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
				LODOP.ADD_PRINT_TEXT('22.89mm', '5.13mm', '27.62mm', '4.37mm', '(QA-SMP-B005)')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
				LODOP.ADD_PRINT_TEXT('26.86mm', '5.13mm', '66.78mm', '4.37mm', '记录编号 Record No.: ' + this.recordNo + '')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
				LODOP.ADD_PRINT_TEXT('31.64mm', '4.87mm', '87.95mm', '5.69mm', '物 料 名 称 Material Name: ' + row.material_name + '')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('37.17mm', '4.74mm', '42.44mm', '5.69mm', '物 料 批 号 及 代 码')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('40.9mm', '4.74mm', '86.1mm', '5.69mm', 'Material Batch No. and Code: ' + row.pcsn + '_' + row.material_code)
				LODOP.ADD_PRINT_TEXT('46.78mm', '4.47mm', '41.65mm', '5.69mm', '桶 号 Barrel No.: ' + row.bucket_code + '')
				LODOP.ADD_PRINT_TEXT('46.78mm', '48.13mm', '43.5mm', '5.69mm', '皮 重 Tare Weight: ' + row.bucket_weight + '')
				LODOP.ADD_PRINT_TEXT('51.81mm', '48.13mm', '44.03mm', '5.69mm', '总 重 Total Weight: ')
				LODOP.ADD_PRINT_TEXT('51.81mm', '4.47mm', '41.65mm', '5.69mm', '净 重 Net Weight: ')
				LODOP.ADD_PRINT_TEXT('56.83mm', '4.47mm', '86.62mm', '7.01mm', '操 作 日 期 Operation Date: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('62.92mm', '4.47mm', '85.3mm', '7.01mm', '有 效 期 至 Expiry Date: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('69.22mm', '5mm', '22.07mm', '5.69mm', '用 于 产 品')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('73.71mm', '5mm', '11.22mm', '5.69mm', 'Used')
				LODOP.ADD_PRINT_TEXT('73.71mm', '17.44mm', '8.57mm', '5.69mm', 'in')
				LODOP.ADD_PRINT_TEXT('77.68mm', '5mm', '16.77mm', '5.69mm', 'Product')
				LODOP.ADD_PRINT_TEXT('69.45mm', '28.28mm', '23.65mm', '5.69mm', '名 称 Name: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('76.23mm', '28.28mm', '31.86mm', '5.69mm', '规 格 Strength: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('83.98mm', '5.27mm', '51.17mm', '5.69mm', '操 作 人 Operator: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('92.21mm', '5.27mm', '48mm', '5.69mm', '复 核 人 Reviewer: ')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_TEXT('99.7mm', '5.27mm', '39.26mm', '5.69mm', '备 注 Remarks:')
				LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
				LODOP.ADD_PRINT_LINE(114, 11, 114, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(136, 11, 136, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(171, 11, 171, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(209, 11, 209, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(231, 11, 231, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(254, 11, 254, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(282, 97, 282, 360, 0, 0)

				LODOP.ADD_PRINT_LINE(309, 11, 309, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(339, 11, 339, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(370, 11, 370, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(397, 11, 397, 360, 0, 0)
				LODOP.ADD_PRINT_LINE(309, 96, 254, 96, 0, 1)
				LODOP.ADD_PRINT_BARCODE('107.13mm', '22.99mm', '57.1mm', '10.74mm', '128A', row.bucket_code)

				LODOP.PRINT()// 打印
				// LODOP.PREVIEW()// 预览
				// LODOP.PRINT_DESIGN()
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				this.disabled1 = false
			}
		}
	}
</script>
<style lang="stylus">
/* 遮罩层 */
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 弹窗容器 */
.dialog-container {
  width: 80%;
  max-width: 300px;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  animation: fadeInScale 0.2s ease-out;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.dialog-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 20px 16px 12px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
}

.dialog-content {
  padding: 20px 16px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  cursor: pointer;
}

.checkbox-label {
  font-size: 15px;
  margin-left: 8px;
  color: #333;
  flex: 1;
}

/* 其他选项区域 */
.other-section {
  margin-top: 4px;
}

.other-input {
  margin-top: 12px;
  margin-left: 28px;  /* 与复选框文本对齐缩进 */
  padding: 8px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  width: calc(100% - 40px);
  background-color: #fafafa;
  transition: all 0.2s;
}

.other-input:focus {
  border-color: #007aff;
  background-color: #fff;
}

/* 按钮区域 */
.dialog-buttons {
  display: flex;
  border-top: 1px solid #f0f0f0;
}

.dialog-buttons button {
  flex: 1;
  border-radius: 0;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  background: transparent;
  border: none;
  margin: 0;
}

.cancel-btn {
  color: #666;
  border-right: 1px solid #f0f0f0;
}

.cancel-btn::after {
  border: none;
}

.confirm-btn {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  color: #007aff !important;
}

.confirm-btn::after {
  border: none;
}

/* 分隔线样式 */
.button-divider {
  width: 1px;
  height: 24px;
  background-color: #e5e5e5;
  flex-shrink: 0;
}

/* 针对 checkbox 组件样式微调（可选，保证在不同平台显示一致） */
checkbox {
  transform: scale(0.9);
}
</style>