rtk-wms-uniapp/pages/workbranch/production/shipment/shipmentPage.vue

<template>
	<gui-page :custom-header="true" :header-class="['gui-theme-background-color']">
		<template #gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<text style="font-size:44rpx;" class="gui-header-leader-btns gui-color-white font-icons"
					@tap="goHome">&#xe6c5;</text>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text
					class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text">出货打标签</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:40px;" />
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<template #gBody>
			<view class="list-content">
				<view class="scan">
					<view class="scan-card">
						<uni-easyinput ref="easyinput" v-model="scanNumber" :input-border="false" :clearable="false"
							type="text" focus @focus="handleInputFocus" placeholder="扫描内部标签" @confirm="handleKeydown" />
						<text class="font-icons" @click="handleMapass">&#xe6b7;</text>
					</view>
				</view>
				<view class="table-title">
					<span>待回签列表</span>
				</view>
				<view class="custom-table">
					<uni-table border stripe empty-text="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr class="custom-table-head">
							<uni-th align="center">内部标签码</uni-th>
						</uni-tr>

						<!-- 表格数据行 -->
						<uni-tr v-for="(item, key) in qrCodeList" :key="key">
							<uni-td align="center">{{ item }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<view class="card-list-item"
					style="margin: 12px 0;display: grid;grid-template-columns: 1fr;grid-template-rows: 1fr;">
					<button type="primary" :disabled="btnReadonly" style="width: calc(100% - 8px);margin: 0 4px;"
						@click="handleGenerateOuterBoxLabelCode">生成外箱标签码</button>
				</view>
			</view>
			<uni-popup ref="errorTip" type="dialog">
				<uni-popup-dialog type="error" cancel-text="关闭" confirm-text="确认" title="提示" :content="errorTipMessage"
					@confirm="handleCloseErrorTipsModal" @close="handleCloseErrorTipsModal" />
			</uni-popup>
		</template>
	</gui-page>
</template>

<script>
	import {
		defineComponent,
		onBeforeMount,
		onMounted,
		ref
	} from 'vue'
	import {
		getFileStorage,
		setFileStorage
	} from '@/unit/fileStorage.js'
	import tsc from '@/unit/CHITEN_SDK_APP/tsc.js'
	export default defineComponent({
		setup() {
			const bluetooth = ref()
			const modalForm = ref('')
			const errorState = ref(0)
			const easyinput = ref()
			const errorTip = ref('')
			const errorTipMessage = ref('')
			const qrCodeList = ref([])
			const scanNumber = ref('')
			const btnReadonly = ref(true)
			const printerData = ref()
			const blueConfig = ref({
				loopBuffer: 0,
				currentTime: 1,
				lastData: 0,
				onBufferSize: 20,
				printerNum: 1,
				currentPrint: 1,
				isLabelSend: false
			})

			onBeforeMount(() => {
				// #ifdef APP-PLUS
				const bluetoothConfig = uni.getStorageSync('bluetoothConfig')
				if ([null, '', undefined].includes(bluetoothConfig)) {
					bluetooth.value = {
						'isOpenBle': false,
						'deviceId': '',
						'serviceId': '',
						'writeId': '',
						'notifyId': ''
					}
					setTimeout(() => {
						// #ifdef APP-PLUS
						plus.device.beep(2)
						// #endif
						errorTipMessage.value = '蓝牙打印机未连接'
						errorState.value = -1
						errorTip.value.open()
					}, 800)
				} else {
					bluetooth.value = JSON.parse(bluetoothConfig)
				}
				// #endif
			})

			onMounted(() => {
				// #ifdef APP-PLUS
				getFileStorage('shipmentQrCodeList.txt')
					.then(data => {
						if (data) {
							const jsonData = JSON.parse(data)
							if (Object.prototype.toString.call(jsonData) === '[object String]') {
								const parseData = JSON.parse(jsonData)
								Array.prototype.push.apply(qrCodeList.value, parseData['dataList'])
							}
						}
					})
				// #endif
			})

			// 保存出货标签待回签列表
			const saveFileData = function(dataList) {
				setFileStorage('shipmentQrCodeList.txt', 0,
					JSON.stringify({
						dataList
					}))
			}

			// 校验是否可以打印外箱码
			const handleValidateOtherBoxPrint = function() {
				uni.$reqPost("transferOuterBoxCheckPrint", qrCodeList.value)
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							btnReadonly.value = !data;
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 0
						}
					})
			}

			// 打印内箱码/袋标码
			const handlePrinter = async function() {
				uni.showToast({
					title: '标签打印中,请勿操作',
					icon: 'loading',
					duration: 10000
				})
				qrCodeList.value.push(printerData.value.shippingLabelId)
				// 校验是否可以打外箱标签码
				await handleValidateOtherBoxPrint();
				await setInputFocus()

				// 打印
				await labelInnerTest(printerData.value)
				blueConfig.value.currentPrint = 1
				blueConfig.value.printNum = 2
				const timer = setInterval(() => {
					if (blueConfig.value.isLabelSend === false &&
						blueConfig.value.currentPrint === 2) {
						blueConfig.value.currentPrint += 1
						labelExternalTest(printerData.value)
					}
					if (blueConfig.value.currentPrint === blueConfig
						.value.printNum) {
						clearInterval(timer);
					}
				}, 1500)

				saveFileData(qrCodeList.value)
			}

			const handleMapass = function() {
				// #ifdef APP-PLUS
				const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
				mpaasScanModule.mpaasScan({
						// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
						'scanType': ['qrCode', 'barCode'],
						// 是否隐藏相册，默认false不隐藏
						'hideAlbum': false
					},
					(ret) => {
						if (ret.resp_code === 1000) {
							uni.$reqPost('transferTrayCode', {
									qrCode: ret.resp_result
								})
								.then(async ({
									code,
									data,
									msg
								}) => {
									if (code === 0) {
										if (qrCodeList.value.includes(data.shippingLabelId)) {
											// #ifdef APP-PLUS
											plus.device.beep(2)
											// #endif
											errorTipMessage.value = "标签码已存在，不允许录入重复标签码"
											errorTip.value.open()
											errorState.value = 0
										} else {
											printerData.value = data;
											if (data.unboxed * 1 === 1) {
												// #ifdef APP-PLUS
												plus.device.beep(2)
												// #endif
												errorTipMessage.value = "已经生成内箱码，是否重新打印内箱码"
												errorTip.value.open()
												errorState.value = 9
											} else {
												// 打印内箱码/袋标码
												handlePrinter();
											}
										}
									} else {
										// #ifdef APP-PLUS
										plus.device.beep(2)
										// #endif
										errorTipMessage.value = msg
										errorTip.value.open()
										errorState.value = 0
									}
								})
						}
					})
				// #endif
			}

			// 扫描完成品标签输入框回车事件
			const handleKeydown = function(e) {
				uni.$reqPost('transferTrayCode', {
						qrCode: e
					})
					.then(async ({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							if (qrCodeList.value.includes(data.shippingLabelId)) {
								// #ifdef APP-PLUS
								plus.device.beep(2)
								// #endif
								errorTipMessage.value = "标签码已存在，不允许录入重复标签码"
								errorTip.value.open()
								errorState.value = 0
							} else {
								printerData.value = data;
								if (data.unboxed * 1 === 1) {
									// #ifdef APP-PLUS
									plus.device.beep(2)
									// #endif
									errorTipMessage.value = "已经生成内箱码，是否重新打印内箱码"
									errorTip.value.open()
									errorState.value = 9
								} else {
									// 打印内箱码/袋标码
									handlePrinter();
								}
							}
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 0
						}
					})
			}

			const Send = function(buff) {
				var currentTime = blueConfig.value.currentTime
				var loopBuffer = blueConfig.value.loopBuffer
				var lastData = blueConfig.value.lastData
				var onBufferSize = blueConfig.value.onBufferSize
				var printNum = blueConfig.value.printerNum
				var currentPrint = blueConfig.value.currentPrint
				var buf
				var dataView
				if (currentTime < loopBuffer) {
					buf = new ArrayBuffer(onBufferSize)
					dataView = new DataView(buf)
					for (let i = 0; i < onBufferSize; ++i) {
						dataView.setUint8(i, buff[(currentTime - 1) * onBufferSize + i])
					}
				} else {
					buf = new ArrayBuffer(lastData)
					dataView = new DataView(buf)
					for (let i = 0; i < lastData; ++i) {
						dataView.setUint8(i, buff[(currentTime - 1) * onBufferSize + i])
					}
				}
				plus.bluetooth.writeBLECharacteristicValue({
					deviceId: bluetooth.value.deviceId,
					serviceId: bluetooth.value.serviceId,
					characteristicId: bluetooth.value.writeId,
					value: buf,
					success: function(res) {
						if (currentPrint <= printNum) {
							wx.showToast({
								title: '数据打印中',
								icon: 'loading'
							})
						}
						// 将complete中处理数据的代码挪过来，增加30ms延迟, 解决蓝牙打印数据传输10007问题
						setTimeout(() => {
							currentTime += 1
							if (currentTime <= loopBuffer) {
								blueConfig.value.isLabelSend = true
								blueConfig.value.currentTime = currentTime
								Send(buff)
							}
							// end
							if (currentTime === loopBuffer) {
								blueConfig.value.currentPrint += 1
								blueConfig.value.isLabelSend = false
							}
						}, 10)
					},
					fail: function(e) {
						wx.showToast({
							title: '打印第' + currentPrint + '张失败' + 'error: code ' + e
								?.code + ', message ' + e?.message,
							icon: 'none',
							duration: 4000
						})
					},
					complete: function() {}
				})
			}

			const prepareSend = function(buff) {
				var time = blueConfig.value.onBufferSize
				var loopBuffer = parseInt(buff.length / time)
				var lastData = parseInt(buff.length % time)
				blueConfig.value.loopBuffer = loopBuffer + 1
				blueConfig.value.lastData = lastData
				blueConfig.value.currentTime = 1
				Send(buff)
			}

			const labelInnerTest = function(ret) {
				var command = tsc.dlabelPrinter.createNew()
				command.setBackFeed(4)
				command.setOffset(-2)
				// (480 * 200)dots
				command.setSize(60, 25)
				command.setCls()
				command.setGap(6, 2)
				command.setSpeed(1.5)

				// row1
				command.setText(4, 0, '1', 0, 1, 1, '(C)Customer P/N:')
				command.setText(172, 0, '1', 0, 1, 1, ret.c)
				command.setText(278, 0, '1', 0, 1, 1, '(D)QTY(EA):')
				command.setText(378, 0, '1', 0, 1, 1, ret.qty)
				// row2
				command.setText(4, 20, '1', 0, 1, 1, '(G)LOT NO:')
				const strList = ret.lotNo?.split('');
				let lotNo = ''
				let lotNo2 = ''
				if (strList.length > 16) {
					lotNo = ret.lotNo?.substring(0, 16)
					lotNo2 = ret.lotNo?.substring(16)
					command.setText(102, 20, '1', 0, 1, 1, lotNo)
					command.setText(102, 40, '1', 0, 1, 1, lotNo2)
				} else {
					command.setText(102, 20, '1', 0, 1, 1, ret.lotNo)
				}
				command.setText(270, 20, '1', 0, 1, 1, '(J)ExpDate:')
				const timeList = ret.expDate?.split('');
				let timeText = ''
				let timeText2 = ''
				if (timeList.length > 9) {
					timeText = ret.expDate?.substring(0, 9)
					timeText2 = ret.expDate?.substring(9)
					command.setText(380, 20, '1', 0, 1, 1, timeText)
					command.setText(380, 40, '1', 0, 1, 1, timeText2)
				} else {
					command.setText(380, 20, '1', 0, 1, 1, ret.expDate)
				}
				// row3
				command.setText(128, 60, '1', 0, 1, 1, '(E)Manuf:')
				command.setText(218, 60, '1', 0, 1, 1, ret.manuf)
				command.setText(128, 78, 'TSS24.BF2', 0, 1, 1, '存储条件:')
				// let strList2 = []
				// let strText = ''
				// if (ret.storageEnvironmentName) {
				// 	strList2 = ret.storageEnvironmentName?.split(' ')
				// 	strText = strList2[0] + ' ' + strList2[1]
				// } else {
				// 	strText = '';
				// }
				command.setText(208, 94, 'TSS24.BF2', 0, 1, 1, '温度 ' + ret.temperature)
				command.setText(208, 112, 'TSS24.BF2', 0, 1, 1, '湿度 ' + ret.humidity)
				// command.setText(208, 94, 'TSS24.BF2', 0, 1, 1, strText)
				// row4
				command.setQrcode(4, 64, 'H', 4, 'A', ret.lotNo2)
				command.setQrcode(318, 54, 'M', 3, 'A', ret.qrCode1)
				command.setText(128, 160, '1', 0, 1, 1, 'C.O.O.CN')
				command.setText(128, 178, '2', 0, 1, 1, 'ROHS 2.0 HF')

				command.setPagePrint()
				blueConfig.value.isLabelSend = true
				prepareSend(command.getData())
			}

			const labelExternalTest = function(ret) {
				var command = tsc.dlabelPrinter.createNew()
				command.setBackFeed(6)
				// (640 * 320)dots
				command.setSize(80, 40)
				command.setCls()
				command.setGap(6)
				command.setSpeed(1.5)

				// row1
				command.setText(4, 0, '1', 0, 1, 1, '(A)Cust PO:')
				command.setText(120, 0, '1', 0, 1, 1, ret.a)
				// row2
				command.setText(4, 15, '1', 0, 1, 1, '(C)Customer P/N:')
				command.setText(165, 15, '1', 0, 1, 1, ret.c)
				command.setText(280, 12, '1', 0, 1, 1, 'C.O.O.CN')
				// row3
				command.setText(4, 30, '1', 0, 1, 1, '(E)Manuf:')
				command.setText(100, 30, '1', 0, 1, 1, ret.manuf)
				// command.setText(300, 45, 'TSS24.BF2', 0, 1, 1, '量产模具生产')
				// row4
				command.setText(4, 45, '1', 0, 1, 1, '(H)Date Code:')
				command.setText(140, 45, '1', 0, 1, 1, ret.h)
				command.setText(280, 30, '2', 0, 1, 1, 'ROHS 2.0 HF')
				// row5
				command.setText(4, 60, '1', 0, 1, 1, '(J)ExpDate:')
				command.setText(120, 60, '1', 0, 1, 1, ret.expDate)
				command.setText(270, 60, '1', 0, 1, 1, '(B)Line NO:')
				command.setText(385, 60, '1', 0, 1, 1, ret.b)
				// row6
				command.setText(4, 75, '1', 0, 1, 1, '(G)LOT NO:')
				const strList = ret.lotNo?.split('');
				let lotNo = ''
				let lotNo2 = ''
				if (strList.length > 16) {
					lotNo = ret.lotNo?.substring(0, 16)
					lotNo2 = ret.lotNo?.substring(16)
					command.setText(102, 75, '1', 0, 1, 1, lotNo)
					command.setText(102, 90, '1', 0, 1, 1, lotNo2)
				} else {
					command.setText(102, 75, '1', 0, 1, 1, ret.lotNo)
				}
				command.setText(270, 75, '1', 0, 1, 1, '(D)QTY(EA):')
				command.setText(385, 75, '1', 0, 1, 1, ret.qty)
				// row3
				// row3
				command.setText(90, 110, 'TSS24.BF2', 0, 1, 1, '存储条件:')
				// let strList2 = []
				// let strText = ''
				// if (ret.storageEnvironmentName) {
				// 	strList2 = ret.storageEnvironmentName?.split(' ')
				// 	strText = strList2[0] + ' ' + strList2[1]
				// } else {
				// 	strText = '';
				// }
				command.setText(90, 135, 'TSS24.BF2', 0, 1, 1, '温度 ' + ret.temperature)
				command.setText(90, 150, 'TSS24.BF2', 0, 1, 1, '湿度 ' + ret.humidity)
				// command.setText(90, 135, 'TSS24.BF2', 0, 1, 1, strText)
				
				command.setText(230, 110, '1', 0, 1, 1, '(F)MPN:')
				command.setText(315, 110, '1', 0, 1, 1, ret.f)
				command.setText(4, 195, '1', 0, 1, 1, '(K)ERP LOT:')
				// QR
				command.setQrcode(4, 100, 'Q', 3, 'A', ret.lotNo2)
				command.setQrcode(470, 0, 'Q', 3, 'A', ret.qrCode1)
				command.setBarCode(4, 210, '39', 50, 1, 0, 1, 2, ret.k)
				// row5
				command.setText(230, 125, '1', 0, 1, 1, '(I)ManufID:')
				command.setText(340, 125, '1', 0, 1, 1, ret.i)
				command.setText(230, 140, '1', 0, 1, 1, '(L)ADH:')
				command.setText(315, 140, '1', 0, 1, 1, ret.l)
				// row5
				command.setText(275, 190, 'TSS24.BF2', 0, 1, 1, '原胶LOT NO:')
				command.setText(410, 195, '2', 0, 1, 1, ret.rawIncomingReceiptMaterialLots)
				// row6
				command.setText(275, 230, '1', 0, 1, 1, 'ADHManufDate:')
				command.setText(410, 230, '1', 0, 1, 1, ret.rawProduceDate)
				command.setText(275, 250, '1', 0, 1, 1, 'ADHExpDate:')
				command.setText(400, 250, '1', 0, 1, 1, ret.rawExpirationDate)

				command.setPagePrint()
				blueConfig.value.isLabelSend = true
				prepareSend(command.getData())
			}

			const labelOuterBoxTest = function(ret) {
				var command = tsc.dlabelPrinter.createNew()
				command.setBackFeed(6)
				command.setSize(100, 100)
				command.setCls()
				command.setGap(6)
				command.setSpeed(1.5)

				// row1
				command.setText(180, 0, 'TSS24.BF2', 0, 1, 2, '苏州市东苏发五金粘胶制品有限公司')
				// command.setText(180, 0, 'TSS24.BF2', 0, 1, 2, ret.customerName)
				// row2
				command.setText(24, 60, 'TSS24.BF2', 0, 1, 1, '(A)Cust PO:')
				command.setText(182, 60, 'TSS24.BF2', 0, 1, 1, ret.a)
				command.setText(398, 60, 'TSS24.BF2', 0, 1, 1, '(B)Line NO:')
				command.setText(568, 60, 'TSS24.BF2', 0, 1, 1, ret.b)

				command.setText(24, 100, 'TSS24.BF2', 0, 1, 1, '(C)Customer P/N:')
				command.setText(224, 100, 'TSS24.BF2', 0, 1, 1, ret.c)
				command.setText(398, 100, 'TSS24.BF2', 0, 1, 1, '(D)QTY(EA):')
				command.setText(568, 100, 'TSS24.BF2', 0, 1, 1, ret.qty)

				command.setText(24, 140, 'TSS24.BF2', 0, 1, 1, '(E)Manuf:')
				command.setText(132, 140, 'TSS24.BF2', 0, 1, 1, ret.manuf)
				command.setText(398, 140, 'TSS24.BF2', 0, 1, 1, '(F)MPN:')
				command.setText(478, 140, 'TSS24.BF2', 0, 1, 1, ret.f)

				command.setText(24, 180, 'TSS24.BF2', 0, 1, 1, '(I)ManufID:')
				command.setText(182, 180, 'TSS24.BF2', 0, 1, 1, ret.i)

				command.setText(24, 220, 'TSS24.BF2', 0, 1, 1, '(J)ExpDate:')
				command.setText(162, 220, 'TSS24.BF2', 0, 1, 1, ret.expDate)
				command.setText(398, 220, 'TSS24.BF2', 0, 1, 1, '(H)Date Code:')
				command.setText(578, 220, 'TSS24.BF2', 0, 1, 1, ret.h)

				command.setText(24, 260, 'TSS24.BF2', 0, 1, 1, '(L)ADH:')
				command.setText(142, 260, 'TSS24.BF2', 0, 1, 1, ret.l)

				command.setText(24, 310, 'TSS24.BF2', 0, 1, 1, 'ADH LOT:')
				command.setText(142, 310, 'TSS24.BF2', 0, 1, 1, ret.rawBatch)
				command.setText(24, 350, 'TSS24.BF2', 0, 1, 1, 'ADHManufDate:')
				command.setText(184, 350, 'TSS24.BF2', 0, 1, 1, ret.rawProduceDate)
				command.setText(24, 390, 'TSS24.BF2', 0, 1, 1, 'ADHExpDate:')
				command.setText(184, 390, 'TSS24.BF2', 0, 1, 1, ret.rawExpirationDate)
				command.setText(24, 425, 'TSS24.BF2', 0, 1, 1, '(G)LOT ID:')

				command.setText(180, 425, 'TSS24.BF2', 0, 1, 1, '存储条件:')
				// let strList = []
				// let strText = ''
				// if (ret.storageEnvironmentName) {
				// 	strList = ret.storageEnvironmentName?.split(' ')
				// 	strText = strList[0] + ' ' + strList[1]
				// } else {
				// 	strText = '';
				// }
				command.setText(180, 455, 'TSS24.BF2', 0, 1, 1, '温度 ' + ret.temperature)
				command.setText(180, 485, 'TSS24.BF2', 0, 1, 1, '湿度 ' + ret.humidity)

				command.setQrcode(24, 455, 'H', 5, 'A', ret.lotNo2)
				command.setQrcode(498, 530, 'H', 4, 'A', ret.qrCode2)

				command.setText(24, 590, 'TSS24.BF2', 0, 1, 1, '(K):ERP LOT:')
				command.setBarCode(24, 630, '93', 90, 1, 0, 2, 4, ret.k)

				command.setText(498, 460, '3', 0, 1, 1, 'C.O.O.CN')
				command.setText(498, 490, '3', 0, 1, 1, 'ROHS 2.0 HF')

				command.setPagePrint()
				prepareSend(command.getData())
			}

			const handleGenerateOuterBoxLabelCode = function() {
				uni.$reqPost('transferOuterBoxCode', qrCodeList.value)
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							uni.showToast({
								title: '标签打印中,请勿操作',
								icon: 'loading',
								duration: 10000
							})
							qrCodeList.value.length = 0
							btnReadonly.value = true
							setInputFocus()
							labelOuterBoxTest(data)
							saveFileData([])
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 0
						}
					})
			}

			const goHome = function() {
				uni.$goHome()
			}

			const setInputFocus = function() {
				scanNumber.value = ''
				easyinput.value.onBlur()
				easyinput.value.onFocus()
			}

			// 关闭错误信息弹窗
			const handleCloseErrorTipsModal = async function() {
				errorTip.value.close()
				if (errorState.value === 0) {
					await setInputFocus()
				} else if (errorState.value === 9) {
					// 确认补打
					handlePrinter();
				}
			}
			
			// 禁用软键盘
			const handleInputFocus = function() {
				// #ifdef APP-PLUS
				setTimeout(() => {
					uni.hideKeyboard()
				}, 100)
				// #endif
			}

			return {
				goHome,
				btnReadonly,
				easyinput,
				errorTip,
				errorState,
				errorTipMessage,
				modalForm,
				scanNumber,
				handleMapass,
				handleKeydown,
				handleInputFocus,
				qrCodeList,
				handleCloseErrorTipsModal,
				handleGenerateOuterBoxLabelCode
			}
		}
	})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
	}

	.list-content {
		margin-top: 80px;
		background-color: #edeeee;
	}

	.input-200 {
		width: 200px;
		padding-left: 10px;
	}

	.font-icons {
		width: 40px;
		font-size: 20px;
		text-align: right;
	}

	.scan {
		height: 45px;
		width: calc(100% - 48px);
		margin: 12px;
		padding: 0 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 6px;
		background-color: white;

		.scan-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 7fr 2fr;
			align-items: center;

			input {
				height: 35px;
				line-height: 35px;
			}

			text {
				width: 100%;
				text-align: right;
			}
		}
	}

	.card-list-flexbox {
		width: calc(100vw - 24px);
		height: 195px;
		margin: 0 12px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		overflow-y: scroll;

		.card-list-title {
			width: 100%;
			height: 35px;
			line-height: 35px;
			margin: 0 4px 0 4px;
			border-radius: 4px 4px 0 0;
			text-align: center;
			color: white;
			background-color: rgba(0, 160, 233, 1.0);
		}

		.card-list-item,
		.card-list-item-operation {
			width: 100%;
			height: 35px;
			margin: 0 4px 3rpx 4px;
			border-radius: 4px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			uni-text {
				font-size: 14px;
				height: 50rpx;
				text-align: left;
				padding: 0 8px;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.text-1 {
				flex: 1;
				height: 35px;
				justify-content: flex-start;
			}

			.text-2 {
				flex: 3;
				height: 35px;
				justify-content: flex-end;
				margin-right: 4px;
				padding: 2px 6px;
			}

		}

	}

	.table-title {
		height: 40px;
		line-height: 40px;
		margin: 4px 0 -3px 0;
		padding: 0 12px;
		font-size: 16px;
		font-weight: bold;
		background-color: white;
	}

	.custom-table {
		height: calc(100vh - 265px);
		min-height: 230px;
		margin: 5px 0;
		overflow-y: scroll;
	}
</style>