料箱二维码打印

src/views/storage/vehicle/index.vue

@@ -14,7 +14,7 @@
         @search-reset="resetChange"
         @size-change="dataList"
         @current-change="dataList"
-        @selection-change="selectionChange"
+        @selection-change="selectionChange1"
     >
       <template #menu-left="{ size }">
         <el-button
@@ -25,16 +25,50 @@
           @click="multipleDelete"
           >删除</el-button
         >
+        <el-button
+          :disabled="toDeleteIds.length < 1"
+          type="primary"
+          icon="el-icon-view"
+          :size="size"
+          @click="printCode"
+        >打 印</el-button
+        >
       </template>
     </avue-crud>
-    <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
+    <el-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      width="1250px"
+      @close="dialog.visible = false"
+    >
+      <div style="display: flex;flex-wrap: wrap;" ref="toPrintRef">
+        <div v-for="item of clickRows" style="width: 200px;height:280px;font-size:10px;text-align: center;">
+          <vue-qrcode  :value="item.code"  size="45" error-level="H"></vue-qrcode>
+          <div>
+            <el-text>编码:</el-text><el-text>{{item.code}}</el-text>
+          </div>
+          <div>
+            <el-text>名称:</el-text><el-text>{{item.name}}</el-text>
+          </div>
+          <div>
+            <el-text>类型:</el-text><el-text>{{item.$category}}</el-text>
+          </div>
+          <div>
+            <el-text>容量:</el-text><el-text>{{item.capacity}}</el-text>
+          </div>
+        </div>
+      </div>
+      <div class="dialog-footer" align="center">
+        <el-button @click="dialog.visible = false">取消</el-button>
+        <el-button type="primary" @click="printPage">打印</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script setup>
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
-import ButtonPermKeys from "@/common/configs/buttonPermission";
-
+import { html2CanvasPrint } from "@/utils/common";
 import { useCommonStoreHook } from "@/store";
 import dictDataUtil from "@/common/configs/dictDataUtil";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
@@ -42,7 +76,25 @@ const test = () => {
   isShowTable.value = true;
   tableType.value = tableType.value == 1 ? 2 : 1;
 };
-
+const toPrintRef = ref(null);
+const dialog = reactive({
+  title: "二维码打印",
+  visible: false,
+});
+const printPage = ()=>{
+  html2CanvasPrint(toPrintRef.value);
+}
+const printCode = () =>{
+  dialog.visible = true
+}
+const clickRows =ref([])
+const selectionChange1 =(row)=>{
+  toDeleteIds.value = [];
+  row?.forEach((element) => {
+    toDeleteIds.value.push(element.id);
+  });
+  clickRows.value = row
+}
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
@@ -168,18 +220,4 @@ onMounted(() => {
   // console.log("crudRef", crudRef)
   dataList();
 });
-/**
- * 上传excel相关
- */
-const uploadRef = ref(null);
-const uploadFinished = () => {
-  // 上传完成后的刷新操作
-  page.currentPage = 1;
-  dataList();
-};
-const importExcelData = () => {
-  if (uploadRef.value) {
-    uploadRef.value.show("/api/v1/device/import");
-  }
-};
 </script>