Merge branch 'qingban' of http://192.168.101.4:3000/jiaxiaoqiang/JG-ADMIN-TEMP into qingban

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,115 +64,142 @@
             </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="`${boxWidth + 200}px)`"
+      @close="dialog.visible = false"
     >
-      <div style="display: flex;flex-wrap: wrap;" ref="toPrintRef">
-        <div v-for="item of clickObjs" style="width: 238px;height:325px;font-size:10px;">
-          <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>
-          <div>
-            <el-text>物料型号:</el-text><el-text>{{info.materialModel}}</el-text>
-          </div>
-        </div>
+      <div class="slider-demo-block">
+        <span class="demonstration">宽度: </span>
+        <el-slider v-model="boxWidth" :min="200" :max="2000" show-input />
       </div>
-      <div class="dialog-footer" align="center">
-        <el-button @click="dialog.visible = false">取消</el-button>
-        <el-button type="primary" @click="printPage">打印</el-button>
+      <div class="slider-demo-block">
+        <span class="demonstration">高度: </span>
+        <el-slider v-model="boxHeight" :min="360" :max="2000" show-input />
       </div>
+      <el-button type="primary" v-print="'#print'">打印</el-button>
+
+      <table border-collapse="collapse" id="print">
+        <tbody>
+          <tr v-for="(item, index) in clickObjs" :key="index">
+            <td>
+              <div
+                :style="{
+                  width: `${boxWidth}px`,
+                  height: `${boxHeight}px`,
+                }"
+              >
+                <vue-qrcode
+                  :value="item.seqNo"
+                  :size="50"
+                  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>
+                <div>
+                  <el-text>物料型号:</el-text
+                  ><el-text>{{ info.materialModel }}</el-text>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </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";
 import { html2CanvasPrint } from "@/utils/common";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
 const toPrintRef = ref(null);
+
+// 手动设置打印的宽度和高度
+const boxWidth = ref(200);
+const boxHeight = ref(200);
+
 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();
+  }
 );
 // 传入一个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, {
@@ -209,20 +247,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();
 });
 /**
@@ -236,7 +273,57 @@ 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 scoped lang="scss">
+@media print {
+  #print {
+    position: absolute; /* 或 absolute, fixed, 根据需要调整 */
+    top: 20px; /* 调整顶部位置 */
+    margin: 0; /* 重置边距 */
+    //width: 1000px;
+  }
+}
+
+table {
+  //width: 800px;
+  margin: 0 auto;
+  //border: 1px solid #000000;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  //border: 1px solid #000000;
+  text-align: center;
+  padding: 3px;
+}
+
+.slider-demo-block {
+  max-width: 600px;
+  display: flex;
+  align-items: center;
+}
+.slider-demo-block .el-slider {
+  margin-top: 0;
+  margin-left: 12px;
+}
+.slider-demo-block .demonstration {
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+  line-height: 44px;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 0;
+}
+.slider-demo-block .demonstration + .el-slider {
+  flex: 0 0 70%;
+}
+</style>