rtk-wms-uniapp/pages/workbranch/warehouse/materialRegister/Input/materialInfoDetails.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="goBack">&#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="card-list-flexbox">
					<text class="card-list-title" :style="[isPad?'font-size: 18px':'font-size: 14px']">采购单详情</text>
					<view class="card-list-item">
						<text>采购单</text>
						<text>{{ formData?.erpOrderNo }}</text>
					</view>
					<view class="card-list-item">
						<text>供应商</text>
						<text>{{ formData?.supplierName }}</text>
					</view>
					<view class="card-list-item">
						<text>物料编码</text>
						<text>{{ formData?.detail?.materialNo }}</text>
					</view>
					<view class="card-list-item">
						<text>数量</text>
						<text>{{ formData?.detail?.materialQty }}</text>
					</view>
				</view>
				<div class="form">
					<div class="form-title">收货操作</div>
					<div class="form-item">
						<div class="title">本次收货量</div>
						<div class="content">
							<uni-easyinput ref="toolingInput" v-model="form.receiptQty" :input-border="true"
								:clearable="false" @focus="handleInputFocus" type="text" placeholder="请输入" focus />
							<div class="button-add" @click="handleDoubleClick">＋</div>
						</div>
					</div>
					<div class="form-item">
						<div class="title">供应商送货批号</div>
						<div class="content">
							<uni-easyinput ref="toolingInput" @focus="handleInputFocus" v-model="form.deliverBatch" :input-border="true"
								type="text" placeholder="请输入" />
						</div>
					</div>
					<div class="form-item">
						<div class="title">生产日期</div>
						<div class="content">
							<uni-datetime-picker type="date" v-model="form.produceDate" />
						</div>
					</div>
					<div class="form-item">
						<div class="title">规格</div>
						<div class="content">
							<uni-easyinput ref="toolingInput" v-model="form.size" :input-border="true" type="text"
								placeholder="请输入" />
						</div>
					</div>
				</div>
				<div class="panel">
					<div class="top">
						<text>收货量明细</text>
					</div>
					<div class="content" v-for="(item, key) in form.materials" :key="key">
						<uni-swipe-action>
							<!-- 基础用法 -->
							<uni-swipe-action-item :right-options="options" @click="handleRemoveDetail(item, key)">
								<template #left>
									<view />
								</template>
								<div class="row">
									<div class="left">
										<span>{{ item.count * 1 }}㎡</span>
									</div>
									<div class="right">
										<div class="right-item">
											<span>长</span>
											<span>{{ item.length }} m</span>
										</div>
										<div class="right-item">
											<span>宽</span>
											<span>{{ item.width }} mm</span>
										</div>
										<div class="right-item">
											<span>厚</span>
											<span>{{ item.thickness }} mm</span>
										</div>
									</div>
								</div>
							</uni-swipe-action-item>
						</uni-swipe-action>
					</div>
				</div>
			</view>
			<view class="operation-panel">
				<button type="primary" :disabled="!form?.materials.length > 0"
					style="width: calc(100% - 8px);margin: 0 4px;" @click="handleShipmentBoxPrinter">提交确认</button>
			</view>
			<!-- 提示窗示例 -->
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog type="success" cancel-text="取消" confirm-text="确认" title="包装明细"
					@confirm="handleCounterNum" @close="popup.close()">
					<!-- eslint-disable-next-line -->
					<template #default="custom">
						<view class="form" style="width: 100%;margin: 0;">
							<div class="form-item">
								<div class="title">到货包数</div>
								<div class="content">
									<uni-easyinput v-model="popupForm.qty" @focus="handleInputFocus" :input-border="true" type="digit"
										placeholder="请输入" />
								</div>
							</div>
							<div class="form-item">
								<div class="title">每包长度（m）</div>
								<div class="content">
									<uni-easyinput v-model="popupForm.length" @focus="handleInputFocus" :input-border="true" type="digit"
										placeholder="请输入" />
								</div>
							</div>
							<div class="form-item">
								<div class="title">每包宽度（mm）</div>
								<div class="content">
									<uni-easyinput v-model="popupForm.width" @focus="handleInputFocus" :input-border="true" type="digit"
										placeholder="请输入" />
								</div>
							</div>
							<div class="form-item">
								<div class="title">每包厚度（mm）</div>
								<div class="content">
									<uni-easyinput disabled v-model="popupForm.thickness" @focus="handleInputFocus" :input-border="true"
										type="digit" placeholder="请输入" />
								</div>
							</div>
							<div class="form-item">
								<div class="title">每包数量（㎡）</div>
								<div class="content">
									<uni-easyinput disabled v-model="computedCount" :input-border="true" type="digit" />
								</div>
							</div>
						</view>
					</template>
				</uni-popup-dialog>
			</uni-popup>
			<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 {
		computed,
		defineComponent,
		onBeforeMount,
		ref,
		watch
	} from 'vue'
	import tsc from '@/unit/CHITEN_SDK_APP/tsc.js'
	import {
		add,
		ride
	} from '@/unit/default.js'
	export default defineComponent({
		setup(options) {
			const touchNum = ref(0);
			const popup = ref()
			const errorState = ref(0)
			const easyinput = ref()
			const errorTip = ref('')
			const errorTipMessage = ref('')
			const parseData = JSON.parse(options?.params) ?? {}
			const formData = ref()
			const cardList = ref([])
			const bluetooth = ref()
			const blueConfig = ref({
				loopBuffer: 0,
				currentTime: 1,
				lastData: 0,
				onBufferSize: 20,
				printerNum: 1,
				currentPrint: 1,
				isLabelSend: false
			})
			const popupForm = ref({
				qty: 0,
				length: 0,
				width: 0,
				thickness: 0
			})
			const form = ref({
				receiptQty: 0, // 到货总数
				deliverBatch: '', // 送货批次
				purchaseOrderNo: '',
				supplierCode: '', // 供应商编码
				wmsPurchaseOrderDetailId: '', // 采购订单明细id
				materialNo: '', // 物料编码
				materialName: '', // 物料名称
				size: '', // 规格
				receiptType: 1,
				produceDate: '',
				materials: []
			})

			// 处理精度
			const praseFloatData = function(val) {
				return Math.round((parseFloat(val) * 10000000000)) / 10000000000;
			}

			// 计算每包数量
			const computedCount = computed(() => {
				// 计算厚度
				// if (popupForm.value.thickness * 1 === 0) {
				// 	return ride(ride(popupForm.value.width, 0.001), popupForm.value.length);
				// } else {
				// 	return ricd(ride(ride(popupForm.value.width, 0.001), popupForm.value.length, popupForm.value.thickness);
				// }

				// 不计算厚度
				return ride(ride(popupForm.value.width, 0.001), popupForm.value.length);
			})

			// 计算本次收货量
			watch([() => form.value.materials], ([oldVal], newVal) => {
				if (Object.prototype.toString.call(oldVal) === "[object Array]") {
					form.value.receiptQty = 0;
					for (var i = 0; i < oldVal.length; i++) {
						form.value.receiptQty += praseFloatData(oldVal[i].count);
					}
				}
			}, {
				deep: true
			})

			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

				formData.value = parseData

				form.value.purchaseOrderNo = formData.value.erpOrderNo;
				form.value.supplierCode = formData.value.supplierCode;
				form.value.materialNo = formData.value?.detail.materialNo;
				form.value.materialName = formData.value?.detail.materialName;
				form.value.wmsPurchaseOrderDetailId = formData.value.id;
			})

			const getPrintDataList = function(materialLots) {
				uni.$reqGet("getRegisterLabelPrintData", {
						materialLots
					}, true)
					.then((data) => {
						const list = data.data ?? []
						if (list.length > 0) {
							blueConfig.value.currentPrint = 1
							blueConfig.value.printNum = list.length

							const timer = setInterval(async () => {
								const currentPrint = blueConfig.value.currentPrint -
									1
								if (blueConfig.value.isLabelSend === false &&
									currentPrint <
									blueConfig.value.printNum) {
									const paramsObj = {
										materialName: list[currentPrint]
											.materialName ?? '',
										materialNo: list[currentPrint]
											.materialNo ??
											'',
										supplierName: list[currentPrint]
											.supplierName ??
											'',
										size: list[currentPrint]
											.size ??
											'',
										createTime: list[currentPrint]
											.createTime ??
											'',
										batchNumber: list[currentPrint]
											.batchNumber ??
											'',
										wmsStockLocationName: list[
												currentPrint]
											.wmsStockLocationName ??
											'',
										validityDate: list[currentPrint]
											.validityDate ??
											'',
										createTime: list[currentPrint]
											.createTime ??
											'',
										deliverBatch: list[currentPrint]
											.deliverBatch ??
											'',
										produceDate: list[currentPrint]
											.produceDate ??
											'',
										qrCode: list[currentPrint]
											.qrCode ??
											'',
										qty: list[currentPrint]
											.qty ??
											''
									}
									await labelOuterBoxTest(paramsObj)
								}
								if (currentPrint === blueConfig.value.printNum) {
									await clearInterval(timer)
								}
							}, 3000)
						}

					})
			}

			// 外箱标签补打
			const handleShipmentBoxPrinter = function() {
				const JsonData = JSON.parse(JSON.stringify(form.value))
				JsonData.materials.forEach(ret => {
					Reflect.deleteProperty(ret, 'count')
				})
				uni.$reqPost("createIncomingReceipt", JsonData)
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							// 打印
							getPrintDataList(data);
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
						}
					})
			}

			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 labelOuterBoxTest = function(ret) {
				var command = tsc.dlabelPrinter.createNew()
				command.setBackFeed(6)
				// (640 * 320)dots
				command.setSize(80, 40)
				command.setCls()
				command.setGap(8)
				command.setBox(0, 0, 635, 315, 1)
				command.setBar(0, 40, 640, 2)
				command.setBar(0, 80, 640, 2)
				command.setBar(0, 120, 640, 2)
				
				// command.setBar(0, 160, 640, 2)
				command.setBar(0, 160, 366, 2)
				
				command.setBar(0, 200, 366, 2)
				command.setBar(0, 240, 366, 2)
				
				command.setBar(0, 280, 366, 2)
				// command.setBar(0, 280, 640, 2)
				// 1
				command.setBar(115, 0, 2, 40)
				command.setBar(115, 40, 2, 40)
				command.setBar(115, 80, 2, 40)
				command.setBar(115, 120, 2, 40)
				command.setBar(115, 160, 2, 40)
				command.setBar(115, 200, 2, 40)
				command.setBar(115, 240, 2, 40)
				command.setBar(115, 280, 2, 40)
				// 2
				command.setBar(360, 40, 2, 40)
				command.setBar(360, 80, 2, 40)
				command.setBar(360, 120, 2, 40)
				command.setBar(360, 160, 2, 40)
				command.setBar(360, 200, 2, 40)
				command.setBar(360, 240, 2, 40)
				command.setBar(360, 280, 2, 40)
				// 3
				command.setBar(475, 40, 2, 40)
				command.setBar(475, 80, 2, 40)
				// command.setBar(475, 120, 2, 40)
				// command.setBar(475, 280, 2, 40)

				command.setText(10, 6, 'TSS24.BF2', 0, 1, 1, '物料名称')
				command.setText(126, 6, 'TSS24.BF2', 0, 1, 1, ret.materialName)
				// row2
				command.setText(10, 46, 'TSS24.BF2', 0, 1, 1, '物料编码')
				command.setText(126, 46, 'TSS24.BF2', 0, 1, 1, ret.materialNo)
				command.setText(366, 46, 'TSS24.BF2', 0, 1, 1, '供应商')
				command.setText(481, 46, 'TSS24.BF2', 0, 1, 1, ret.supplierName)
				// row3
				command.setText(10, 86, 'TSS24.BF2', 0, 1, 1, '物料规格')
				command.setText(126, 86, 'TSS24.BF2', 0, 1, 1, ret.size)
				command.setText(366, 86, 'TSS24.BF2', 0, 1, 1, '储位')
				command.setText(481, 86, 'TSS24.BF2', 0, 1, 1, ret.wmsStockLocationName)
				// row4
				command.setText(10, 126, 'TSS24.BF2', 0, 1, 1, '厂内批次')
				command.setText(126, 126, '1', 0, 1, 1, ret.batchNumber)
				// row5
				command.setText(10, 166, 'TSS24.BF2', 0, 1, 1, '有效期')
				command.setText(126, 166, 'TSS24.BF2', 0, 1, 1, ret.validityDate)
				// row6
				command.setText(10, 206, 'TSS24.BF2', 0, 1, 1, '收货日期')
				command.setText(126, 206, 'TSS24.BF2', 0, 1, 1, ret.createTime)
				// row7
				command.setText(10, 246, 'TSS24.BF2', 0, 1, 1, '来料批次')
				command.setText(126, 246, 'TSS24.BF2', 0, 1, 1, ret.deliverBatch)
				// row8
				command.setText(10, 286, 'TSS24.BF2', 0, 1, 1, '生产日期')
				command.setText(126, 286, 'TSS24.BF2', 0, 1, 1, ret.produceDate)

				command.setText(480, 216, '2', 0, 1, 1, ret.qty)
				command.setQrcode(366, 166, 'L', 4, 'A', ret.qrCode)
				command.setPagePrint()
				blueConfig.value.isLabelSend = true
				prepareSend(command.getData())
			}

			// 双击事件
			const handleDoubleClick = function() {
				// touchNum.value += 1;
				// setTimeout(() => {
				// 	if (touchNum.value >= 2) {
				// 		popupForm.value = {
				// 			qty: 0,
				// 			length: 0,
				// 			width: 0
				// 		}
				// 		popup.value.open()
				// 	}
				// 	touchNum.value = 0;
				// }, 400);

				popupForm.value = {
					qty: '',
					length: '',
					width: '',
					thickness: '',
					count: ''
				}
				popup.value.open()
			}

			// 计算本次收货量
			const handleCounterNum = function() {
				// 计算厚度
				// if (popupForm.value.thickness * 1 === 0) {
				// 	popupForm.value.count = ((popupForm.value.width * 1 * 0.001) * (popupForm.value.length * 1)) *
				// 		popupForm.value.qty * 1;
				// } else {
				// 	popupForm.value.count = ((popupForm.value.width * 1 * 0.001) * (popupForm.value.length * 1) * (
				// 		popupForm.value.thickness * 1 * 0.001)) * popupForm.value.qty * 1;
				// }

				// 不计算厚度
				popupForm.value.count = ride(ride(ride(popupForm.value.width, 0.001), popupForm.value.length),
					popupForm.value.qty);

				for (var i = 0; i < praseFloatData(popupForm.value.qty); i++) {
					form.value.materials.push({
						width: praseFloatData(popupForm.value.width),
						length: praseFloatData(popupForm.value.length),
						thickness: praseFloatData(popupForm.value.thickness * 1),
						qty: ride(ride(popupForm.value.width, 0.001), popupForm.value.length),
						count: ride(ride(popupForm.value.width, 0.001), popupForm.value.length)
					})
				}
				popup.value.close();
			}
			
			// 删除收货量明细
			const handleRemoveDetail = function(ret, index) {
				form.value.materials.splice(index, 1)
			}

			const goBack = function() {
				uni.$goBack('/pages/workbranch/warehouse/materialRegister/Input/materialInputRegister')
			}

			// 关闭错误信息弹窗
			const handleCloseErrorTipsModal = async function() {
				errorTip.value.close()
			}
			
			// 禁用软键盘
			const handleInputFocus = function() {
				// #ifdef APP-PLUS
				setTimeout(() => {
					uni.hideKeyboard()
				}, 100)
				// #endif
			}

			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				popup,
				popupForm,
				computedCount,
				formData,
				form,
				cardList,
				goBack,
				easyinput,
				errorTip,
				errorTipMessage,
				handleRemoveDetail,
				handleInputFocus,
				handleDoubleClick,
				handleCounterNum,
				handleShipmentBoxPrinter,
				handleCloseErrorTipsModal,
			}
		}
	})
</script>

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

	.list-content {
		margin-top: 80px;
		min-height: calc(100vh - 80px);
		background-color: #edeeee;
	}

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

	.icon-scan {
		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;
			}
		}
	}

	span,
	text {
		font-size: 12px;
	}

	.form {
		font-size: 14px;
		margin: 0 12px 12px 12px;
		padding: 4px 8px;
		border-radius: 4px;
		background-color: white;

		.form-title {
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			border-bottom: 2px dashed #edeeee;
		}

		.form-item {
			.title {
				height: 32px;
				line-height: 32px;
				text-align: left;
				font-weight: bold;
				color: #333;
			}

			.content {
				height: 42px;
				line-height: 42px;
				margin: 0 0 6px 0;
				position: relative;

				.button-add {
					position: absolute;
					width: 37px;
					height: 37px;
					right: 0;
					top: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 4px;
					color: white;
					cursor: pointer;
					background-color: #00a0e9;
				}
			}
		}
	}

	.card-list-flexbox {
		width: calc(100vw - 24px);
		height: 205px;
		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;
			}

		}

	}

	.printer {
		color: white;
		background-color: #00a0e9 !important;
	}

	.operation-panel {
		padding: 12px 0;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		background-color: white;

		.operation-title {
			height: 40px;
			line-height: 40px;
			padding: 0 14px;
			font-size: 16px;
			font-weight: bold;
		}
	}

	.panel {
		margin: 5px 0;
		padding: 0 8px;
		margin: 0 12px 80px 12px;
		overflow-y: scroll;
		border-radius: 4px;
		background-color: white;

		.top {
			height: 32px;
			line-height: 32px;

			text {
				font-size: 16px;
				font-weight: bold;
			}
		}

		.content {
			overflow-y: scroll;
			border-top: 2px dashed rgba(237, 238, 238, 1);

			.row {
				display: flex;
				background-color: #fbfbfb;
			}

			.left {
				width: 25%;
				min-width: 50px;

				span {
					line-height: 32px;
					font-size: 16px;
					font-weight: bold;
					color: orange;
				}
			}

			.right {
				width: 100%;
				min-width: 200px;
				display: grid;
				grid-template-columns: 1fr 1fr;
			}

			.right-item {
				// height: 32px;
				line-height: 32px;
				padding: 0 6px;
				display: flex;
				justify-content: space-between;

				span:nth-of-type(1) {
					min-width: 30%;
				}

				span:nth-of-type(2) {
					min-width: 30%;
					padding-right: 8px;
					text-align: right;
					word-wrap: break-word;
					overflow-y: scroll;
				}
			}
		}
	}

	.font-icons {
		font-size: 20px;
		font-weight: bold;
		color: red;
	}
</style>