库位二维码打印

src/views/storage/storage/index.vue

@@ -14,27 +14,53 @@
         @search-reset="resetChange"
         @size-change="dataList"
         @current-change="dataList"
-        @selection-change="selectionChange"
+        @selection-change="selectionChange1"
     >
-<!--      <template #menu-left="{ size }">
+      <template #menu-left="{ size }">
         <el-button
           :disabled="toDeleteIds.length < 1"
-          type="danger"
-          icon="el-icon-delete"
+          type="primary"
+          icon="el-icon-view"
           :size="size"
-          @click="multipleDelete"
-          >删除</el-button
+          @click="printCode"
+          >打 印</el-button
         >
-      </template>-->
+      </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 toDeleteIds" style="width: 200px;height:280px;font-size:10px;text-align: center;">
+          <vue-qrcode  :value="item.locationNo"  size="45" error-level="H"></vue-qrcode>
+          <div>
+            <el-text>编码:</el-text><el-text>{{item.houseNo}}</el-text>
+          </div>
+          <div>
+            <el-text>货区:</el-text><el-text>{{item.area}}</el-text>
+          </div>
+          <div>
+            <el-text>货位:</el-text><el-text>{{item.coordinate}}</el-text>
+          </div>
+          <div>
+            <el-text>层数:</el-text><el-text>{{item.layer}}</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 +68,7 @@ const test = () => {
   isShowTable.value = true;
   tableType.value = tableType.value == 1 ? 2 : 1;
 };
-
+const toPrintRef = ref(null);
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
@@ -53,11 +79,23 @@ const { selectionChange, multipleDelete } = Methords; //选中和批量删除事
 const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
 
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
-
+const dialog = reactive({
+  title: "二维码打印",
+  visible: false,
+});
+const printPage = ()=>{
+  html2CanvasPrint(toPrintRef.value);
+}
+const printCode = () =>{
+  dialog.visible = true
+}
+const selectionChange1 =(row)=>{
+  toDeleteIds.value = row
+}
 // 设置表格列或者其他自定义的option
 option.value = Object.assign(option.value, {
   delBtn: false,
-  selection: false,
+  selection: true,
   addBtn: false,
   column: [
     {
@@ -164,18 +202,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>

src/views/system/message/index.vue

@@ -322,6 +322,7 @@ option.value = Object.assign(option.value, {
 onMounted(() => {
   // console.log("crudRef", crudRef)
   search.value.type = "0"
+  search.value.msgId = "0"
   dataList();
   queryUserList()
 });