初次对接

2025-04-11 18:00:39 +08:00
parent 5465099c77
commit 0d3bf51c2b
11 changed files with 792 additions and 413 deletions
--- a/src/views/materialReceiptNotice/ceshi.vue
+++ b/src/views/materialReceiptNotice/ceshi.vue
@@ -2,35 +2,69 @@
 	<div class="orderPrinting" ref="orderPrintingRef">
 		<div class="title">采购送货单</div>
 		<div class="orderPrintingTop">
-			<div class="item item1"></div>
+			<div class="item item1">
+				<VueQr style="width: 150px; height: 150px" :text="state.pageData.fBillNo" :size="150"></VueQr>
+			</div>
 			<div class="item item2">
 				<div class="dataText">
 					<span class="span1">收料通知单编号（送货单号）：</span>
-					<span class="span2">123465</span>
+					<span class="span2">{{ state.pageData.fBillNo }}</span>
 				</div>
 				<div class="dataText">
 					<span class="span1">供应商名称：</span>
-					<span class="span2">123465</span>
+					<span class="span2">{{ state.pageData.supplierName }}</span>
 				</div>
 				<div class="dataText">
 					<span class="span1">送货日期：</span>
-					<span class="span2">123465</span>
+					<span class="span2">{{ state.pageData.deliveryDate }}</span>
 				</div>
 				<div class="dataText">
 					<span class="span1">发票号：</span>
-					<span class="span2">123465</span>
+					<span class="span2">{{ state.pageData.f_VHUB_Text }}</span>
 				</div>
 			</div>
-			<div class="item item3"></div>
+			<div class="item item3">
+				<VueQr style="width: 150px; height: 150px" :text="state.pageData.f_VHUB_Text" :size="150"></VueQr>
+			</div>
 		</div>
-		<avue-crud ref="crudRef" :data="state.data" :option="state.option"> </avue-crud>
+		<avue-crud ref="crudRef" :data="props.data" :option="state.option"></avue-crud>
 	</div>
 </template>

 <script setup lang="ts">
-import { reactive,ref } from 'vue';
-const orderPrintingRef = ref()
+import { reactive, ref, defineProps, watch } from 'vue';
+import VueQr from 'vue-qr/src/packages/vue-qr.vue';
+
+const orderPrintingRef = ref();
+const props = defineProps({
+	data: {
+		type: Array,
+		default: () => [],
+	},
+});
+watch(
+	() => props.data,
+	(newData) => {
+    // console.log(JSON.parse(JSON.stringify(newData)))
+    let arr = []
+    arr = JSON.parse(JSON.stringify(newData))
+    // console.log(arr.length)
+    // debugger
+    if(arr.length !== 0){
+      state.pageData.fBillNo = arr[0].fBillNo
+      state.pageData.supplierName = arr[0].supplierName
+      state.pageData.deliveryDate = arr[0].deliveryDate
+      state.pageData.f_VHUB_Text = arr[0].f_VHUB_Text
+    }
+  }
+);
 const state = reactive({
+	pageData: {
+		fBillNo: '',
+		supplierName: '',
+		deliveryDate: '',
+		f_VHUB_Text: '',
+	},
 	option: {
 		tip: false,
 		index: false,
@@ -46,34 +80,43 @@ const state = reactive({
 		menu: false,
 		column: [
 			{ label: 'PO号', prop: 'purchaseOrderFBillNo' },
-			{ label: '物料代码', prop: 'sheet' },
-			{ label: '物料名称', prop: 'fBillNo' },
-			{ label: '单位', prop: 'mssSupplierLot' },
-			{ label: 'PO数量', prop: 'fSupplierLot' },
-			{ label: '实收数量', prop: 'materialCode' },
-			{ label: '美金单价', prop: 'materialName' },
-			{ label: '供应商批号', prop: 'sendedQty' },
+			{ label: '物料代码', prop: 'materialCode' },
+			{ label: '物料名称', prop: 'materialName' },
+			{ label: '单位', prop: 'unitName' },
+			{ label: 'PO数量', prop: 'purchaseQty' },
+			{ label: '送货数量', prop: 'qty' },
+			{ label: '美塞斯批号', prop: 'mssSupplierLot' },
+			{ label: '供应商批号', prop: 'fSupplierLot' },
 		],
 	},
-	data: [
-      {
-        purchaseOrderFBillNo: 1,
-        sheet: 1,
-        fBillNo: 1,
-        mssSupplierLot: 1,
-        fSupplierLot: 1,
-        materialCode: 1,
-        materialName: 1,
-        sendedQty: 1,
-      }
-  ],
 });
 defineExpose({
-  orderPrintingRef
+	orderPrintingRef,
 });
 </script>

 <style scoped lang="scss">
+:deep(.el-table__inner-wrapper) {
+	box-sizing: border-box;
+	//border: 1px solid black;
+}
+
+:deep(.is-leaf) {
+	border-color: black;
+}
+
+:deep(.el-table__cell) {
+	border-color: black;
+}
+
+:deep(.el-table__cell) {
+	border-color: black !important;
+}
+
+:deep(.el-card) {
+	border: 1px solid black !important;
+}
+
 :deep(.avue-crud__header) {
 	display: none;
 }
@@ -97,35 +140,47 @@ defineExpose({
 	}

 	.orderPrintingTop {
-		height: 200px;
-		border: 1px solid #c2c4ca;
+		height: 161px;
+		border: 1px solid #000000;
 		box-sizing: border-box;
 		display: flex;

 		.item1 {
 			width: 33.33%;
-			height: 199px;
-			border-right: 1px solid #c2c4ca;
+			height: 160px;
+			border-right: 1px solid #000000;
+			display: flex;
+			justify-content: center;
+			align-items: center;
 		}

 		.item2 {
 			width: 33.33%;
-			height: 199px;
-			border-right: 1px solid #c2c4ca;
+			height: 160px;
+			border-right: 1px solid #000000;
 			box-sizing: border-box;
 			padding: 16px;

 			.dataText {
 				font-size: 16px;
 				margin-bottom: 16px;
+				color: #000000;
 			}
 		}

 		.item2 {
 			width: 33.33%;
-			height: 199px;
+			height: 160px;
 			//border-right: 1px solid black;
 		}
+
+		.item3 {
+			width: 33.33%;
+			height: 160px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
 	}
 }
 </style>
--- a/src/views/materialReceiptNotice/index.vue
+++ b/src/views/materialReceiptNotice/index.vue
@@ -27,7 +27,7 @@
        <template #menu-left>
          <div class="selectBoxes">
            <div class="selectItem">
-              <el-input v-model="state.formData.fBillNo" style="width: 240px" placeholder="单据编号" size="default" />
+              <el-input v-model="state.formData.purchaseOrderFBillNo" style="width: 240px" placeholder="采购单号" size="default" />
            </div>
            <div class="selectItem">
              <el-date-picker
@@ -52,24 +52,25 @@
        </template>
        <template #menu>
          <div class="btnList">
-            <el-button type="text" @click="state.selectedDataShow = true">打印单据</el-button>
+            <el-button type="text" @click="state.selectedDataShow = true">打印条码</el-button>
          </div>
        </template>
      </avue-crud>
    </el-card>
-    <selectedData :showes="state.selectedDataShow"/>
+    <selectedData :listData="state.selectedData" :showes="state.selectedDataShow" @close="() => {state.selectedDataShow = false}"/>
  </div>
 </template>

 <script lang="ts" setup>
-import { reactive, onMounted, computed, nextTick, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { reactive, onMounted, computed, nextTick } from 'vue';
+// import { useRouter } from 'vue-router';
 import { listApi } from '../../api/list/index';
 import { useI18n } from 'vue-i18n';
 import SelectedData from '/@/views/materialReceiptNotice/selectedData.vue';
-import { ElMessage } from 'element-plus';
+// import { ElMessage } from 'element-plus';
+
 const { t } = useI18n();
-const router = useRouter();
+// const router = useRouter();
 // 定义变量内容
 const state = reactive({
  page: {
@@ -78,7 +79,7 @@ const state = reactive({
    pageSize: 30,
  },
  option: {
-    height: '720',
+    height: computed(() => window.innerHeight - (window.innerHeight * 0.25) + '') ,
    tip: false,
    index: false,
    menuWidth: 120,
@@ -86,7 +87,6 @@ const state = reactive({
    delBtn: false,
    editBtn: false,
    align: 'center',
-    // searchLabelWidth:100,
    selection: true,
    searchMenuSpan: 3,
    addBtn: false,
@@ -99,14 +99,14 @@ const state = reactive({
        searchRange: true,
        width:'160'
      },
-      { label: '采购订单号', prop: 'purchaseOrderFBillNo',width:'120' },
+      { label: '采购单号', prop: 'purchaseOrderFBillNo',width:'120' },
      { label: '发货单号', prop: 'sheet',width:'135' },
-      { label: '收料单号', prop: 'fBillNo',width:'120' },
+      { label: '收料单号', prop: 'fBillNo',width:'110' },
      { label: '美塞斯批号', prop: 'mssSupplierLot',width:'90' },
      { label: '供应商批号', prop: 'fSupplierLot',width:'90' },
      { label: '物料编码', prop: 'materialCode',width:'120' },
      { label: '物料名称', prop: 'materialName' },
-      { label: computed(() => t('message.list.PONumber2')), prop: 'purchaseOrderFBillNo',width:'110' },
+
      { label: computed(() => t('message.list.SupplierCode2')), prop: 'supplierId',width:'90' },
      { label: computed(() => t('message.list.SupplierName2')), prop: 'supplierName',width:'120' },
      { label: '累计收料数量', prop: 'sendedQty',width:'110' },
@@ -118,7 +118,7 @@ const state = reactive({
  data: [],
  elDatePicker: '',
  formData: {
-    fBillNo: '',
+    purchaseOrderFBillNo: '',
    fDateBegin: '',
    fDateEmd: '',
    fmrpCloseStatus: '',
@@ -126,7 +126,7 @@ const state = reactive({
  selectedData: [],
  chengNuoJiaoQiP: '',
  newChengNuoJiaoQiP: '',
-  selectedDataShow: true,
+  selectedDataShow: false,
  loading: false,
 });
 const selectionChange = (list: any) => {
@@ -134,66 +134,7 @@ const selectionChange = (list: any) => {
    state.selectedData = JSON.parse(JSON.stringify(list));
  });
 };
-const chengNuoJiaoQiPFun = (e: string) => {
-  if (state.selectedData.length != 0) {
-    let arr: any = [];
-    if (e === '0') {
-      state.selectedData.forEach((item: any) => {
-        arr.push({ id: item.id, newTime: state.chengNuoJiaoQiP });
-      });
-      batchSetChengNuoJiaoQiFun(arr);
-    }
-    if (e === '1') {
-      state.selectedData.forEach((item: any) => {
-        arr.push({ id: item.id, newTime: state.newChengNuoJiaoQiP });
-      });
-      batchSetNewChengNuoJiaoQiFun(arr);
-    }
-  } else {
-    ElMessage.warning('请先选中数据');
-  }
-};
-const batchSetChengNuoJiaoQiFun = (arr: any) => {
-  listApi()
-      .batchSetChengNuoJiaoQi(arr)
-      .then((res: any) => {
-        if (res.resultCode === 0) {
-          ElMessage.success('操作成功');
-          getList();
-          state.chengNuoJiaoQiP = '';
-        }
-        if (res.resultCode === -1) {
-          ElMessage.success(res.errorMessage);
-          state.newChengNuoJiaoQiP = '';
-        }
-      });
-};
-const batchSetNewChengNuoJiaoQiFun = (arr: any) => {
-  listApi()
-      .batchSetNewChengNuoJiaoQi(arr)
-      .then((res: any) => {
-        if (res.resultCode === 0) {
-          ElMessage.success('操作成功');
-          getList();
-        }
-        if (res.resultCode === -1) {
-          ElMessage.success(res.errorMessage);
-        }
-      });
-};
-const generateDocumentsFun = () => {
-  state.selectedDataShow = false;
-  getList();
-};
-//跳转详情
-const toPurchaseDetails = (item: any) => {
-  router.push({
-    path: '/purchaseDetails',
-    query: {
-      topId: item.fiD,
-    },
-  });
-};
+
 const elDatePickerFun = (val: any) => {
  state.formData.fDateBegin = val[0];
  state.formData.fDateEmd = val[1];
@@ -206,10 +147,10 @@ const selectFun = () => {
 };
 const resetFun = () => {
  state.page.currentPage = 1;
-  state.page.pageSize = 20;
+  state.page.pageSize = 30;
  state.elDatePicker = '';
  state.formData = {
-    fBillNo: '',
+    purchaseOrderFBillNo: '',
    fDateBegin: '',
    fDateEmd: '',
    fmrpCloseStatus: '',
@@ -238,7 +179,9 @@ const getList = () => {
      });
 };
 // 页面加载时
-onMounted(() => {});
+onMounted(() => {
+  // console.log(window.innerHeight - 400)
+});
 </script>

 <style lang="scss" scoped>
@@ -249,7 +192,10 @@ onMounted(() => {});
 :deep(.avue-crud__left) {
  flex: 1;
 }
-
+:deep(.el-button--text){
+  padding: 0 !important;
+  height: auto !important;
+}
 :deep(.avue-crud__refreshBtn) {
  display: none;
 }
--- a/src/views/materialReceiptNotice/selectedData.vue
+++ b/src/views/materialReceiptNotice/selectedData.vue
@@ -1,17 +1,21 @@
 <template>
-	<el-dialog :model-value="props.showes" width="70%">
-		<ceshi ref="ceshiRef"></ceshi>
+	<el-dialog :model-value="props.showes" @close="closeFun" width="70%">
+		<div ref="ceshiRef">
+			<ceshi id="ceshi" :data="props.listData"></ceshi>
+		</div>
 		<div class="btnList">
 			<el-button type="primary" @click="printElement">打印</el-button>
 		</div>
 	</el-dialog>
 </template>
 <script setup lang="ts">
-import { defineProps, reactive, ref, nextTick } from 'vue';
+import { defineProps, reactive, ref, nextTick, defineEmits } from 'vue';
 import ceshi from './ceshi.vue';
 import printJS from 'print-js';
+import html2canvas from 'html2canvas';

-const ceshiRef = ref(null);
+const ceshiRef = ref();
+const emits = defineEmits(['close']);
 const props = defineProps({
 	listData: {
 		type: Array,
@@ -23,29 +27,43 @@ const props = defineProps({
 	},
 });
 const state = reactive({
-	dialogVisible: true,
+	snapshotUrl: '',
 });
+const closeFun = () => {
+	emits('close');
+};
 const printElement = () => {
+	captureSnapshot();
 	// 获取 DOM 元素的 HTML
 	nextTick(() => {
-		console.log(ceshiRef.value.orderPrintingRef);
-
-		// // 使用 print-js 打印
 		printJS({
-			printable: ceshiRef.value.orderPrintingRef,
-			type: 'html', // 指定打印 HTML 内容
+			printable: state.snapshotUrl,
+			type: 'image',
 			style: `
-         @page { 
-      margin: 0; 
-      size: auto; 
-    }
-    @page :header, @page :footer { 
-      display: none; 
-    }
+        @page {
+          size: auto;
+          margin: 0mm;
+        }
+        body {
+          margin: 0;
+          padding: 36px;
+        }
      `,
 		});
 	});
 };
+// 截图函数
+const captureSnapshot = async () => {
+	// 使用 html2canvas 将 div 渲染为 Canvas
+	const canvas = await html2canvas(ceshiRef.value, {
+		allowTaint: true, // 允许跨域图片
+		useCORS: true, // 使用 CORS 加载图片
+		scale: 2, // 提高截图分辨率
+		width: ceshiRef.value.clientWidth,
+		height: ceshiRef.value.clientHeight,
+	});
+	state.snapshotUrl = canvas.toDataURL('image/png');
+};
 </script>
 <style scoped lang="scss">
 .btnList {