批量打印功能实现

.env.development

@@ -11,6 +11,6 @@ VITE_APP_BASE_API = '/dev-api'
 VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
 # 开发接口地址
 #VITE_APP_API_URL = 'http://192.168.101.4:8078'
-VITE_APP_API_URL = 'http://127.0.0.1:8078'
+VITE_APP_API_URL = 'http://10.88.11.200:8078'
 # 是否启用 Mock 服务
 VITE_MOCK_DEV_SERVER = false

src/api/plan/index.ts

@@ -0,0 +1,16 @@
+import request from "@/utils/request";
+//获取物料信息
+export function getMaterialInfo(code: string) {
+  return request({
+    url: `/api/v1/plan/requisition/queryReceive/${code}`,
+    method: "get",
+  });
+}
+//获取配置后信息
+export function getPrintInfo(data: any) {
+  return request({
+    url: `/api/v1/plan/requisition/handleExcel`,
+    method: "post",
+    data
+  });
+}

src/views/plan/requisition/exportInfo.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="mainContentBox">
+    <div class="btns">
+      <el-button type="primary" @click="toPrintSet"> 打印</el-button>
+    </div>
+    <el-table ref="tableRef" :data="tableData" style="height: 90vh" border>
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="物料名称" prop="materialName" />
+      <el-table-column label="物料型号" prop="materialModel" />
+      <el-table-column label="物料编码" prop="materialCode" />
+      <el-table-column label="更改数量" prop="receiveNum">
+        <template #default="{ row }">
+          <el-input v-model="row.receiveNum" />
+        </template>
+      </el-table-column>
+      <el-table-column label="打印数量" prop="receiveNum">
+        <template #default="{ row }">
+          <el-input v-model="row.printNum" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="90%"
+      @close="dialog.visible = false"
+    >
+      <Print :printData @close="dialog.visible = false" />
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { useCommonStoreHook, useDictionaryStore } from "@/store";
+import { getMaterialInfo, getPrintInfo } from "@/api/plan";
+import Print from "./print.vue";
+import dictDataUtil from "@/common/configs/dictDataUtil";
+const props = defineProps({
+  excelRow: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+// 数据字典相关
+const { dicts } = useDictionaryStore();
+const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+const tableRef = ref(null);
+const dialog = reactive({
+  title: "打印预览",
+  visible: false,
+});
+const tableData = ref([]);
+const printData = ref([]);
+const toPrintSet = async () => {
+  const { data } = await getPrintInfo(tableRef.value.getSelectionRows());
+  printData.value = data;
+  if (printData.value.length > 0) {
+    dialog.visible = true;
+  } else {
+    ElMessage.error("暂无打印内容");
+  }
+};
+const getTableData = async () => {
+  const { data } = await getMaterialInfo(props.excelRow.applyCode);
+  tableData.value = data;
+};
+const router = useRouter();
+onMounted(() => {
+  getTableData();
+});
+watch(props.excelRow, () => {
+  console.log(excelRow.value, "watch");
+});
+</script>
+<style>
+.btns {
+  margin-bottom: 10px;
+}
+</style>

src/views/plan/requisition/index.vue

@@ -41,9 +41,25 @@
         <el-button type="primary" link size="small" @click="openDialog(2, row)"
           ><i-ep-edit />{{ row.state === "0" ? "编辑" : "流程" }}</el-button
         >
+        <el-button
+          type="primary"
+          v-if="row.state === '8'"
+          link
+          size="small"
+          @click="openDialog1(row)"
+          ><i-ep-position />导出物料信息</el-button
+        >
       </template>
     </avue-crud>
     <el-dialog
+      v-model="dialog1.visible"
+      :title="dialog1.title"
+      @close="dialog1.visible = false"
+      width="90%"
+    >
+      <ExportInfo :excelRow />
+    </el-dialog>
+    <el-dialog
       v-model="dialog.visible"
       :title="dialog.title"
       width="75%"
@@ -58,16 +74,19 @@
           >打印</el-button
         >
       </template>
-      <div style="width:100%; height: 30px;">
-<!--        <el-steps :active="1" finish-status="success">-->
-        <el-steps :active="form.state === '8' ? 3: (form.state === '9' ? 2 : 1)" finish-status="success">
+      <div style="width: 100%; height: 30px">
+        <!--        <el-steps :active="1" finish-status="success">-->
+        <el-steps
+          :active="form.state === '8' ? 3 : form.state === '9' ? 2 : 1"
+          finish-status="success"
+        >
           <el-step :title="form.sendOrg" />
           <el-step title="运输中" />
           <el-step :title="form.applyOrg" />
         </el-steps>
       </div>
       <div class="card-container">
-        <el-card style="width: 70%;margin-top:30px;" shadow="always">
+        <el-card style="width: 70%; margin-top: 30px" shadow="always">
           <div ref="toPrintRef">
             <el-row style="text-align: center">
               <el-col :span="24"
@@ -210,7 +229,7 @@
           </div>
         </el-card>
 
-        <el-card style="width: 28%;margin-top:30px;" shadow="always">
+        <el-card style="width: 28%; margin-top: 30px" shadow="always">
           <template #header>
             <div class="card-header">
               <span>领用流程</span>
@@ -437,10 +456,7 @@
                     <el-form-item label="审批结果">
                       <el-text
                         tag="p"
-                        v-if="
-                          dialogType === 1 ||
-                          form.state > 5
-                        "
+                        v-if="dialogType === 1 || form.state > 5"
                         >{{
                           form.state === "5"
                             ? "待审批"
@@ -497,6 +513,7 @@ import {
 } from "@/api/order";
 import { getUserList } from "@/api/system/user";
 import { useCommonStoreHook } from "@/store";
+import ExportInfo from "./exportInfo.vue";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
 const test = () => {
   isShowTable.value = true;
@@ -525,6 +542,11 @@ const changeOrder = (val) => {
     tableDataList.value = data.data;
   });
 };
+const excelRow = ref(null);
+const openDialog1 = (row) => {
+  dialog1.visible = true;
+  excelRow.value = row;
+};
 const saveForm = (type) => {
   let state = type;
   let step = null;
@@ -630,6 +652,10 @@ const dialog = reactive({
   title: "领用单",
   visible: false,
 });
+const dialog1 = reactive({
+  title: "物料信息配置（请使用谷歌浏览器实现）",
+  visible: false,
+});
 const tableDataList = ref([]);
 const openDialog = (type, row) => {
   dialogType.value = type;

src/views/plan/requisition/print.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="mainContentBox">
+    <div class="viewBox">
+      <el-scrollbar height="400px">
+        <div class="printView">
+          <template
+            v-for="(item, index) of props.printData"
+            :key="index + item"
+          >
+            <div
+              class="printItem"
+              v-for="obj of item.printNum"
+              :key="index + item + obj"
+            >
+              <div>
+                <div class="lable">物料名称:</div>
+                <div class="value">{{ item.materialName }}</div>
+                <div class="lable">物料型号:</div>
+                <div class="value">{{ item.materialModel }}</div>
+                <div class="lable">物料编码:</div>
+                <div class="value">{{ item.materialCode }}</div>
+              </div>
+
+              <div>
+                <vue-qrcode
+                  :value="item.code"
+                  size="30"
+                  error-level="H"
+                ></vue-qrcode>
+              </div>
+            </div>
+          </template>
+        </div>
+      </el-scrollbar>
+    </div>
+    <div class="printViewBox">
+      <div ref="toPrintRef" id="printScreen">
+        <template v-for="(item, index) of props.printData" :key="index + item">
+          <div
+            class="printItem"
+            v-for="obj of item.printNum"
+            :key="index + item + obj"
+          >
+            <div>
+              <div class="lable">物料名称:</div>
+              <div class="value">{{ item.materialName }}</div>
+              <div class="lable">物料型号:</div>
+              <div class="value">{{ item.materialModel }}</div>
+              <div class="lable">物料编码:</div>
+              <div class="value">{{ item.materialCode }}</div>
+            </div>
+
+            <div>
+              <vue-qrcode
+                :value="item.code"
+                size="30"
+                error-level="H"
+              ></vue-qrcode>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div class="dialog-footer" align="center">
+      <el-button @click="emits('close')">取消</el-button>
+      <el-button type="primary" v-print="'#printScreen'">打印</el-button>
+    </div>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  printData: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+const toPrintRef = ref(null);
+const emits = defineEmits(["close"]);
+const printPage = () => {
+  html2CanvasPrint(toPrintRef.value);
+};
+</script>
+<style>
+.viewBox {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+}
+.printView {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  width: 100%;
+  .printItem {
+    width: 80mm;
+    height: 60mm;
+    padding: 2mm;
+    border: 1px dashed black;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    border-radius: 16px;
+    .lable {
+      font-weight: 500;
+      color: black;
+    }
+    .value {
+      font-weight: 500;
+      color: black;
+    }
+  }
+}
+.printViewBox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+}
+#printScreen {
+  width: 80mm;
+  .printItem {
+    width: 80mm !important;
+    height: 60mm !important;
+    padding: 2mm;
+    display: flex;
+    justify-content: space-between;
+    .lable {
+      font-weight: 500;
+      color: black;
+    }
+    .value {
+      font-weight: 500;
+      color: black;
+    }
+  }
+}
+
+@media print {
+  body,
+  html,
+  div {
+    height: auto !important;
+    width: auto !important;
+    overflow: visible !important;
+  }
+  #printScreen {
+    width: 80mm;
+  }
+}
+</style>