打印更改

src/views/storage/storage/index.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="mainContentBox">
     <avue-crud
-        ref="crudRef"
-        v-model:search="search"
-        v-model="form"
-        :data="data"
-        :option="option"
-        v-model:page="page"
-        @row-save="createRow"
-        @row-update="updateRow"
-        @row-del="deleteRow"
-        @search-change="searchChange"
-        @search-reset="resetChange"
-        @size-change="dataList"
-        @current-change="dataList"
-        @selection-change="selectionChange1"
+      ref="crudRef"
+      v-model:search="search"
+      v-model="form"
+      :data="data"
+      :option="option"
+      v-model:page="page"
+      @row-save="createRow"
+      @row-update="updateRow"
+      @row-del="deleteRow"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @size-change="dataList"
+      @current-change="dataList"
+      @selection-change="selectionChange1"
     >
       <template #menu-left="{ size }">
         <el-button
@@ -33,26 +33,73 @@
       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 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>
+            <el-text>编码:</el-text><el-text>{{ item.houseNo }}</el-text>
           </div>
           <div>
-            <el-text>货区:</el-text><el-text>{{item.area}}</el-text>
+            <el-text>货区:</el-text><el-text>{{ item.area }}</el-text>
           </div>
           <div>
-            <el-text>货位:</el-text><el-text>{{item.coordinate}}</el-text>
+            <el-text>货位:</el-text><el-text>{{ item.coordinate }}</el-text>
           </div>
           <div>
-            <el-text>层数:</el-text><el-text>{{item.layer}}</el-text>
+            <el-text>层数:</el-text><el-text>{{ item.layer }}</el-text>
           </div>
         </div>
       </div>
+      <div class="printViewBox">
+        <div ref="toPrintRef" id="printScreen">
+          <template v-for="(item, index) of toDeleteIds" :key="index + item">
+            <div class="printItem">
+              <div class="leftItem">
+                <div>
+                  <div class="lable">编码:</div>
+                  <div class="value">{{ item.houseNo }}</div>
+                </div>
+                <div>
+                  <div class="lable">货区:</div>
+                  <div class="value">{{ item.area }}</div>
+                </div>
+                <div>
+                  <div class="lable">货位:</div>
+                  <div class="value">{{ item.coordinate }}</div>
+                </div>
+                <div>
+                  <div class="lable">层数:</div>
+                  <div class="value">{{ item.layer }}</div>
+                </div>
+              </div>
+
+              <div class="rightItem">
+                <vue-qrcode
+                  :value="item.locationNo"
+                  size="40"
+                  error-level="H"
+                  :margin="0"
+                ></vue-qrcode>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
       <div class="dialog-footer" align="center">
         <el-button @click="dialog.visible = false">取消</el-button>
-        <el-button type="primary" @click="printPage">打印</el-button>
+        <el-button type="primary" v-print="'#printScreen'">打印</el-button>
       </div>
     </el-dialog>
   </div>
@@ -74,7 +121,8 @@ const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
     src: "/api/v1/wms/position",
   });
-const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
 const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
 const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
 
@@ -83,15 +131,15 @@ const dialog = reactive({
   title: "二维码打印",
   visible: false,
 });
-const printPage = ()=>{
+const printPage = () => {
   html2CanvasPrint(toPrintRef.value);
-}
-const printCode = () =>{
-  dialog.visible = true
-}
-const selectionChange1 =(row)=>{
-  toDeleteIds.value = row
-}
+};
+const printCode = () => {
+  dialog.visible = true;
+};
+const selectionChange1 = (row) => {
+  toDeleteIds.value = row;
+};
 // 设置表格列或者其他自定义的option
 option.value = Object.assign(option.value, {
   delBtn: false,
@@ -104,9 +152,7 @@ option.value = Object.assign(option.value, {
       type: "select",
       search: true,
       editDisabled: true,
-      dicUrl:
-          dictDataUtil.request_url +
-          dictDataUtil.TYPE_CODE.warehouse_type,
+      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.warehouse_type,
       props: {
         label: "dictLabel",
         value: "dictValue",
@@ -163,8 +209,7 @@ option.value = Object.assign(option.value, {
       type: "select",
       search: true,
       dicUrl:
-          dictDataUtil.request_url +
-          dictDataUtil.TYPE_CODE.storage_location_type,
+        dictDataUtil.request_url + dictDataUtil.TYPE_CODE.storage_location_type,
       props: {
         label: "dictLabel",
         value: "dictValue",
@@ -181,12 +226,15 @@ option.value = Object.assign(option.value, {
       label: "状态",
       prop: "enable",
       type: "select",
-      dicData: [{label: '启用' , value: "0"},{label: '禁用' , value: "1"}],
+      dicData: [
+        { label: "启用", value: "0" },
+        { label: "禁用", value: "1" },
+      ],
       html: true,
       formatter: (val) => {
         if (val.enable === "0") {
           return '<b class="el-tag el-tag--success el-tag--light">启用</b>';
-        }else{
+        } else {
           return '<b class="el-tag el-tag--danger el-tag--light">禁用</b>';
         }
       },
@@ -206,3 +254,43 @@ onMounted(() => {
   dataList();
 });
 </script>
+<style>
+.printViewBox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+}
+#printScreen {
+  width: 80mm;
+  .printItem {
+    padding: 0 1mm;
+    width: 80mm !important;
+    height: 60mm !important;
+    display: flex;
+    justify-content: space-between;
+    font-size: 2.2mm;
+    .leftItem {
+      width: 31mm;
+      height: 60mm !important;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      .lable {
+        font-weight: 500;
+        color: black;
+      }
+      .value {
+        font-weight: 500;
+        color: black;
+      }
+    }
+    .rightItem {
+      width: 45mm;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>

src/views/storage/vehicle/index.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="mainContentBox">
     <avue-crud
-        ref="crudRef"
-        v-model:search="search"
-        v-model="form"
-        :data="data"
-        :option="option"
-        v-model:page="page"
-        @row-save="createRow"
-        @row-update="updateRow"
-        @row-del="deleteRow"
-        @search-change="searchChange"
-        @search-reset="resetChange"
-        @size-change="dataList"
-        @current-change="dataList"
-        @selection-change="selectionChange1"
+      ref="crudRef"
+      v-model:search="search"
+      v-model="form"
+      :data="data"
+      :option="option"
+      v-model:page="page"
+      @row-save="createRow"
+      @row-update="updateRow"
+      @row-del="deleteRow"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @size-change="dataList"
+      @current-change="dataList"
+      @selection-change="selectionChange1"
     >
       <template #menu-left="{ size }">
         <el-button
@@ -31,7 +31,7 @@
           icon="el-icon-view"
           :size="size"
           @click="printCode"
-        >打 印</el-button
+          >打 印</el-button
         >
       </template>
     </avue-crud>
@@ -41,26 +41,69 @@
       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 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>
+            <el-text>编码:</el-text><el-text>{{ item.code }}</el-text>
           </div>
           <div>
-            <el-text>名称:</el-text><el-text>{{item.name}}</el-text>
+            <el-text>名称:</el-text><el-text>{{ item.name }}</el-text>
           </div>
           <div>
-            <el-text>类型:</el-text><el-text>{{item.$category}}</el-text>
+            <el-text>类型:</el-text><el-text>{{ item.$category }}</el-text>
           </div>
           <div>
-            <el-text>容量:</el-text><el-text>{{item.capacity}}</el-text>
+            <el-text>容量:</el-text><el-text>{{ item.capacity }}</el-text>
           </div>
         </div>
       </div>
+      <div class="printViewBox">
+        <div ref="toPrintRef" id="printScreen">
+          <template v-for="(item, index) of clickRows" :key="index + item">
+            <div class="printItem">
+              <div class="leftItem">
+                <div>
+                  <div class="lable">编码:</div>
+                  <div class="value">{{ item.code }}</div>
+                </div>
+                <div>
+                  <div class="lable">名称:</div>
+                  <div class="value">{{ item.name }}</div>
+                </div>
+                <div>
+                  <div class="lable">类型:</div>
+                  <div class="value">{{ item.$category }}</div>
+                </div>
+                <div>
+                  <div class="lable">容量:</div>
+                  <div class="value">{{ item.capacity }}</div>
+                </div>
+              </div>
+
+              <div class="rightItem">
+                <vue-qrcode
+                  :value="item.locationNo"
+                  size="40"
+                  error-level="H"
+                  :margin="0"
+                ></vue-qrcode>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
       <div class="dialog-footer" align="center">
         <el-button @click="dialog.visible = false">取消</el-button>
-        <el-button type="primary" @click="printPage">打印</el-button>
+        <el-button type="primary" v-print="'#printScreen'">打印</el-button>
       </div>
     </el-dialog>
   </div>
@@ -81,26 +124,27 @@ const dialog = reactive({
   title: "二维码打印",
   visible: false,
 });
-const printPage = ()=>{
+const printPage = () => {
   html2CanvasPrint(toPrintRef.value);
-}
-const printCode = () =>{
-  dialog.visible = true
-}
-const clickRows =ref([])
-const selectionChange1 =(row)=>{
+};
+const printCode = () => {
+  dialog.visible = true;
+};
+const clickRows = ref([]);
+const selectionChange1 = (row) => {
   toDeleteIds.value = [];
   row?.forEach((element) => {
     toDeleteIds.value.push(element.id);
   });
-  clickRows.value = row
-}
+  clickRows.value = row;
+};
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
     src: "/api/v1/wms/vehicle",
   });
-const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } = Methords; //增删改查
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
 const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
 const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
 
@@ -140,9 +184,7 @@ option.value = Object.assign(option.value, {
       prop: "category",
       type: "select",
       search: true,
-      dicUrl:
-          dictDataUtil.request_url +
-          dictDataUtil.TYPE_CODE.vehicle_type,
+      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.vehicle_type,
       props: {
         label: "dictLabel",
         value: "dictValue",
@@ -159,7 +201,7 @@ option.value = Object.assign(option.value, {
       label: "容量",
       prop: "capacity",
       type: "number",
-      min:  1,
+      min: 1,
       max: 99999,
       rules: [
         {
@@ -173,7 +215,7 @@ option.value = Object.assign(option.value, {
       label: "使用次数",
       prop: "maxUseNum",
       type: "number",
-      min:  1,
+      min: 1,
       max: 99999,
       rules: [
         {
@@ -188,9 +230,7 @@ option.value = Object.assign(option.value, {
       prop: "state",
       type: "select",
       search: true,
-      dicUrl:
-          dictDataUtil.request_url +
-          dictDataUtil.TYPE_CODE.vehicle_state,
+      dicUrl: dictDataUtil.request_url + dictDataUtil.TYPE_CODE.vehicle_state,
       props: {
         label: "dictLabel",
         value: "dictValue",
@@ -206,12 +246,12 @@ option.value = Object.assign(option.value, {
     {
       label: "创建时间",
       prop: "created",
-      display: false
+      display: false,
     },
     {
       label: "创建人",
       prop: "creator",
-      display: false
+      display: false,
     },
   ],
 });
@@ -221,3 +261,43 @@ onMounted(() => {
   dataList();
 });
 </script>
+<style>
+.printViewBox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: none;
+}
+#printScreen {
+  width: 80mm;
+  .printItem {
+    padding: 0 1mm;
+    width: 80mm !important;
+    height: 60mm !important;
+    display: flex;
+    justify-content: space-between;
+    font-size: 2.2mm;
+    .leftItem {
+      width: 31mm;
+      height: 60mm !important;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      .lable {
+        font-weight: 500;
+        color: black;
+      }
+      .value {
+        font-weight: 500;
+        color: black;
+      }
+    }
+    .rightItem {
+      width: 45mm;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>