中英文翻译

src/views/materialReceiptNotice/barCode.vue

@@ -0,0 +1,81 @@
+<template>
+	<el-dialog :model-value="props.showes" @close="closeFun" width="600">
+		<div id="printTemplate" class="print-hide">
+			<div class="typefaceBox" ref="typefaceBoxRef">
+				<VueQr :text="props.data.tiaoMa" :size="200"></VueQr>
+				<div class="titleList">
+					<div class="itemText">供应商：{{ props.data.supplierName }}</div>
+					<div class="itemText">物料编码：{{ props.data.materialCode }}</div>
+					<div class="itemText">包装数量：{{ props.data.qty }}</div>
+					<div class="itemText">美塞斯批号：{{ props.data.mssSupplierLot }}</div>
+					<div class="itemText">供应商批号：{{ props.data.fSupplierLot }}</div>
+					<div class="itemText">采购订单号：</div>
+					<div class="itemText">送货日期：{{ props.data.deliveryDate }}</div>
+					<div class="itemText">收料通知单单号：{{ props.data.fBillNo }}</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="btnList">
+			<el-button type="primary" @click="handlePrint">打印</el-button>
+		</div>
+	</el-dialog>
+</template>
+<script setup lang="ts">
+import { defineProps, reactive, ref, nextTick, defineEmits } from 'vue';
+import VueQr from 'vue-qr/src/packages/vue-qr.vue';
+import printJS from 'print-js';
+const typefaceBoxRef = ref();
+const emits = defineEmits(['close']);
+const props = defineProps({
+	showes: {
+		type: Boolean,
+		default: true,
+	},
+	data: {
+		type: Object,
+		default: () => {
+			return {};
+		},
+	},
+});
+const state = reactive({
+	snapshotUrl: '',
+});
+const handlePrint = () => {
+	// 获取打印模板的DOM元素
+	const printElement = document.getElementById('printTemplate');
+	if (printElement) {
+		printJS({
+			printable: printElement,
+			type: 'html',
+			targetStyles: ['*'],
+			style: `
+         @page { size: 100mm 52mm landscapes; margin: 0; }
+
+      `,
+		});
+	}
+};
+
+const closeFun = () => {
+	emits('close');
+};
+</script>
+<style scoped lang="scss">
+.typefaceBox {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin: 64px 0;
+	.titleList {
+		flex: 1;
+	}
+}
+
+.btnList {
+	margin-top: 26px;
+	display: flex;
+	justify-content: center;
+}
+</style>

src/views/materialReceiptNotice/index.vue

@@ -10,10 +10,11 @@
 				:table-loading="state.loading"
 			>
 				<template #checkboxBox="{ row }">
-          <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center">
-            <el-checkbox v-if="row.ifHidden === 0" v-model="row.checkboxBox" true-value="1" false-value="0" @change="selectionChange"/>
-          </div>
-        </template>
+					<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center">
+						<el-checkbox v-if="row.ifHidden === 0" v-model="row.checkboxBox" true-value="1" false-value="0" @change="selectionChange(row)" />
+					</div>
+				</template>
+        <template #deliveryDate="{ row }">{{ row.ifHidden === 0 ? row.deliveryDate : '' }}</template>
 				<template #sheet="{ row }">{{ row.ifHidden === 0 ? row.sheet : '' }}</template>
 				<template #materialName="{ row }">
 					<el-tooltip :content="row.materialName" placement="top">
@@ -30,6 +31,20 @@
 						<div class="selectItem">
 							<el-input v-model="state.formData.sheet" style="width: 240px" placeholder="发货单号" size="default" />
 						</div>
+            <div class="selectItem">
+              <el-date-picker
+                  v-model="state.elDatePicker"
+                  style="width: 25vw"
+                  type="daterange"
+                  range-separator="-"
+                  start-placeholder="开始送货日期"
+                  end-placeholder="送货结束日期"
+                  size="default"
+                  format="YYYY-MM-DD"
+                  value-format="YYYY-MM-DD"
+                  @change="elDatePickerFun"
+              />
+						</div>
 						<el-button type="primary" size="default" @click="selectFun">搜索</el-button>
 						<el-button size="default" @click="resetFun">重置</el-button>
 						<el-button type="primary" size="default" @click="state.selectedDataShow = true">
@@ -37,9 +52,9 @@
 						</el-button>
 					</div>
 				</template>
-				<template #menu>
+				<template #menu="{ row }">
 					<div class="btnList">
-						<el-button type="text" @click="state.selectedDataShow = true">打印条码</el-button>
+						<el-button type="text" @click="barCodeFunDataRow(row)">打印条码</el-button>
 					</div>
 				</template>
 			</avue-crud>
@@ -53,6 +68,7 @@
 				}
 			"
 		/>
+    <barCode :showes="state.barCodeShow" :data="state.barCodeItem" @close="() => { state.barCodeShow = false }"/>
 	</div>
 </template>
 
@@ -62,7 +78,7 @@ import { listApi } from '../../api/list/index';
 import { ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
 import SelectedData from '/@/views/materialReceiptNotice/selectedData.vue';
-
+import barCode from './barCode.vue'
 const { t } = useI18n();
 const crudRef = ref();
 // 定义变量内容
@@ -85,7 +101,8 @@ const state = reactive({
 		searchMenuSpan: 3,
 		addBtn: false,
 		column: [
-			{ label: '', prop: 'checkboxBox',width: 35 },
+			{ label: '', prop: 'checkboxBox', width: 35 },
+			{ label: '送货日期', prop: 'deliveryDate' },
 			{ label: '发货单号', prop: 'sheet', width: '135' },
 			{ label: '美塞斯批号', prop: 'mssSupplierLot' },
 			{ label: '供应商批号', prop: 'fSupplierLot' },
@@ -112,18 +129,45 @@ const state = reactive({
 	newChengNuoJiaoQiP: '',
 	selectedDataShow: false,
 	loading: false,
+  barCodeShow:false,
+  barCodeItem: {}
 });
-const selectionChange = () => {
-  let ids: any = [];
-  let arr: any = []
-  state.data.forEach((item:any) => {
-    if(item.checkboxBox === '1'){
-      arr.push(item)
-    }
-  })
-  state.selectedData = arr
+const elDatePickerFun = (val: any) => {
+  state.formData.fDateBegin = val[0];
+  state.formData.fDateEmd = val[1];
 };
-
+const selectionChange = (row: any) => {
+	if (row.checkboxBox == '1') {
+		state.data.forEach((item: any) => {
+			if (item.id !== row.id) {
+				item.checkboxBox = '0';
+			}
+		});
+		listApi()
+			.invoiceOrderGetPageList({
+				condition: {
+					sheet: row.sheet,
+					fDateBegin: '',
+					fDateEmd: '',
+					fmrpCloseStatus: '',
+				},
+				pageSize: 1000000,
+				page: 1,
+			})
+			.then((res: any) => {
+				state.loading = false;
+				if (res.resultCode === 0) {
+					state.selectedData = res.data.dataList;
+				}
+			});
+	} else {
+		state.selectedData = [];
+	}
+};
+const barCodeFunDataRow = (row) => {
+  state.barCodeItem = row
+  state.barCodeShow = true
+}
 //接口数据处理
 const selectFun = () => {
 	state.page.currentPage = 1;
@@ -159,9 +203,9 @@ const getList = () => {
 			state.loading = false;
 			if (res.resultCode === 0) {
 				state.data = res.data.dataList;
-        state.data.forEach((item:any) => {
-          item.checkboxBox = '0'
-        })
+				state.data.forEach((item: any) => {
+					item.checkboxBox = '0';
+				});
 				state.page.total = res.data.total;
 			}
 		});
@@ -177,9 +221,11 @@ onMounted(() => {});
 :deep(.el-checkbox--default):nth-child(0) {
 	display: none !important;
 }
-:deep(.el-checkbox){
-  height: 15px !important;
+
+:deep(.el-checkbox) {
+	height: 15px !important;
 }
+
 :deep(.cell) {
 	padding: 0 8px !important;
 }