打印修改

src/views/plan/workOrder/components/work-order-seq.vue

@@ -1,49 +1,60 @@
 <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="{}">
         <el-button
-          v-if ="info.workOrderState  === '1' || info.workOrderState  === '2' || info.workOrderState  === '0'"
+          v-if="
+            info.workOrderState === '1' ||
+            info.workOrderState === '2' ||
+            info.workOrderState === '0'
+          "
           type="primary"
           icon="el-icon-plus"
           @click="addObj"
-        >新增</el-button>
+          >新增</el-button
+        >
 
         <el-button
-          v-if ="info.workOrderState  === '1' || info.workOrderState  === '2' || info.workOrderState  === '0'"
+          v-if="
+            info.workOrderState === '1' ||
+            info.workOrderState === '2' ||
+            info.workOrderState === '0'
+          "
           :disabled="toDeleteIds.length < 1"
           type="danger"
           icon="el-icon-delete"
           @click="multipleDelete"
-        >删除</el-button>
+          >删除</el-button
+        >
         <el-button
-            :disabled="toDeleteIds.length < 1"
-            class="ml-3"
-            @click="printCode">打印
+          :disabled="toDeleteIds.length < 1"
+          class="ml-3"
+          @click="printCode"
+          >打印
         </el-button>
       </template>
       <template #menu-right="{}">
         <el-dropdown split-button
-        >导入
+          >导入
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item
-                  @click="downloadTemplate('/api/v1/plan/seq/template')"
+                @click="downloadTemplate('/api/v1/plan/seq/template')"
               >
                 <i-ep-download />下载模板
               </el-dropdown-item>
@@ -53,59 +64,132 @@
             </el-dropdown-menu>
           </template>
         </el-dropdown>
-        <el-button
-            class="ml-3"
-            @click="exportData('/api/v1/plan/seq/export')"
-        >
+        <el-button class="ml-3" @click="exportData('/api/v1/plan/seq/export')">
           <template #icon> <i-ep-download /> </template>导出
         </el-button>
       </template>
-
     </avue-crud>
     <el-dialog
-        v-model="dialog.visible"
-        :title="dialog.title"
-        width="1250px"
-        @close="dialog.visible = false"
+      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 clickObjs" style="width: 238px;overflow: hidden;font-size:10px;">
-          <div style="float: left;padding-bottom: 30px">
-          <vue-qrcode  :value="item.seqNo"  size="45" error-level="H"></vue-qrcode>
+      <div style="display: flex; flex-wrap: wrap" ref="toPrintRef">
+        <div
+          v-for="item of clickObjs"
+          style="width: 238px; overflow: hidden; font-size: 10px"
+        >
+          <div style="float: left; padding-bottom: 30px">
+            <vue-qrcode
+              :value="item.seqNo"
+              size="45"
+              error-level="H"
+            ></vue-qrcode>
 
-          <div>
-            <el-text>{{item.seqNo}}</el-text>
-          </div>
-          <div>
-            <el-text>工单号:</el-text><el-text>{{info.workOrderCode}}</el-text>
-          </div>
-          <div>
-            <el-text>订单编号:</el-text><el-text>{{info.orderCode}}</el-text>
-          </div>
-          <div>
-            <el-text>物料号:</el-text><el-text>{{info.materialCode}}</el-text>
-          </div>
-          <div>
-            <el-text>物料名称:</el-text><el-text>{{info.materialName}}</el-text>
+            <div>
+              <el-text>{{ item.seqNo }}</el-text>
+            </div>
+            <div>
+              <el-text>工单号:</el-text
+              ><el-text>{{ info.workOrderCode }}</el-text>
+            </div>
+            <div>
+              <el-text>订单编号:</el-text
+              ><el-text>{{ info.orderCode }}</el-text>
+            </div>
+            <div>
+              <el-text>物料号:</el-text
+              ><el-text>{{ info.materialCode }}</el-text>
+            </div>
+            <div>
+              <el-text>物料名称:</el-text
+              ><el-text>{{ info.materialName }}</el-text>
+            </div>
+            <div>
+              <el-text>物料型号:</el-text
+              ><el-text>{{ info.materialModel }}</el-text>
+            </div>
           </div>
-          <div>
-            <el-text>物料型号:</el-text><el-text>{{info.materialModel}}</el-text>
-          </div>
-          </div>
-
         </div>
       </div>
+      <div class="printViewBox">
+        <div ref="toPrintRef" id="printScreen">
+          <template v-for="(item, index) of clickObjs" :key="index + item">
+            <div class="printItem">
+              <div class="leftItem">
+                <div>
+                  <div class="lable">二维码:</div>
+                  <div class="value">{{ item.seqNo }}</div>
+                </div>
+                <div>
+                  <div class="lable">工单号:</div>
+                  <div class="value">{{ info.workOrderCode }}</div>
+                </div>
+                <div>
+                  <div class="lable">订单编号:</div>
+                  <div class="value">{{ info.orderCode }}</div>
+                </div>
+                <div>
+                  <div class="lable">物料号:</div>
+                  <div class="value">{{ info.materialCode }}</div>
+                </div>
+                <div>
+                  <div class="lable">物料名称:</div>
 
+                  <template v-if="info.materialName.length > 23">
+                    <div class="value">
+                      {{ info.materialName.slice(0, 23) }}
+                    </div>
+                    <div class="value">
+                      {{
+                        info.materialName.length > 47
+                          ? info.materialName.slice(24, 44) + "..."
+                          : info.materialName.slice(23)
+                      }}
+                    </div>
+                  </template>
+                </div>
+                <div>
+                  <div class="lable">物料型号:</div>
+
+                  <template v-if="info.materialModel.length > 23">
+                    <div class="value">
+                      {{ info.materialModel.slice(0, 23) }}
+                    </div>
+                    <div class="value">
+                      {{
+                        info.materialModel.length > 47
+                          ? info.materialModel.slice(24, 44) + "..."
+                          : info.materialModel.slice(23)
+                      }}
+                    </div>
+                  </template>
+                </div>
+              </div>
+
+              <div class="rightItem">
+                <vue-qrcode
+                  :value="item.seqNo"
+                  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>
     <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
   </div>
 </template>
 <script setup>
-import {defineProps, ref} from "vue";
+import { defineProps, ref } from "vue";
 import { useCrud } from "@/hooks/userCrud";
 import { useCommonStoreHook } from "@/store";
 import dictDataUtil from "@/common/configs/dictDataUtil";
@@ -116,61 +200,61 @@ const test = () => {
   isShowTable.value = true;
   tableType.value = tableType.value == 1 ? 2 : 1;
 };
-const info = ref({})
+const info = ref({});
 const props = defineProps({
   workOrderInfo: {
     type: Object,
     default: () => {
       return null;
-    }
-  }
-})
-const printPage = ()=>{
+    },
+  },
+});
+const printPage = () => {
   html2CanvasPrint(toPrintRef.value);
-}
+};
 const dialog = reactive({
   title: "二维码打印",
   visible: false,
 });
-const clickObjs = ref([])
-const selectionChange1 =(row)=>{
+const clickObjs = ref([]);
+const selectionChange1 = (row) => {
   toDeleteIds.value = [];
   row?.forEach((element) => {
     toDeleteIds.value.push(element.id);
   });
-  clickObjs.value = row
-}
+  clickObjs.value = row;
+};
 const crudRef = ref(null); //crudRef.value 获取avue-crud对象
-const addObj =()=>{
-  form.value.workOrderCode = props.workOrderInfo.workOrderCode
+const addObj = () => {
+  form.value.workOrderCode = props.workOrderInfo.workOrderCode;
   crudRef.value && crudRef.value.rowAdd();
-}
+};
 watch(
-    () => props.workOrderInfo,
-    () => {
-      form.value.workOrderCode = props.workOrderInfo.workOrderCode
-      info.value = props.workOrderInfo
-      search.value.workOrderCode = props.workOrderInfo.workOrderCode
-      dataList();
-    }
+  () => props.workOrderInfo,
+  () => {
+    form.value.workOrderCode = props.workOrderInfo.workOrderCode;
+    info.value = props.workOrderInfo;
+    search.value.workOrderCode = props.workOrderInfo.workOrderCode;
+    dataList();
+  }
 );
 
-const tdmSeqNo=(seqNo)=>{
-  return seqNo.replace("_","-");
-}
+const tdmSeqNo = (seqNo) => {
+  return seqNo.replace("_", "-");
+};
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
   useCrud({
     src: "/api/v1/plan/seq",
   });
-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; //按钮权限等工具
 
-const printCode = () =>{
-  dialog.visible = true
-}
-
+const printCode = () => {
+  dialog.visible = true;
+};
 
 // 设置表格列或者其他自定义的option
 option.value = Object.assign(option.value, {
@@ -218,20 +302,19 @@ option.value = Object.assign(option.value, {
       display: false,
       type: "select",
       dicUrl:
-          dictDataUtil.request_url +
-          dictDataUtil.TYPE_CODE.work_order_seq_state,
+        dictDataUtil.request_url + dictDataUtil.TYPE_CODE.work_order_seq_state,
       props: {
         label: "dictLabel",
         value: "dictValue",
-      }
+      },
     },
   ],
 });
 
 onMounted(() => {
-  info.value = props.workOrderInfo
-  form.value.workOrderCode = props.workOrderInfo.workOrderCode
-  search.value.workOrderCode = props.workOrderInfo.workOrderCode
+  info.value = props.workOrderInfo;
+  form.value.workOrderCode = props.workOrderInfo.workOrderCode;
+  search.value.workOrderCode = props.workOrderInfo.workOrderCode;
   dataList();
 });
 /**
@@ -245,7 +328,49 @@ const uploadFinished = () => {
 };
 const importExcelData = () => {
   if (uploadRef.value) {
-    uploadRef.value.show("/api/v1/plan/seq/import","流转号导入",{workOrderCode: search.value.workOrderCode});
+    uploadRef.value.show("/api/v1/plan/seq/import", "流转号导入", {
+      workOrderCode: search.value.workOrderCode,
+    });
   }
 };
 </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>