Browse Source

打印功能增加横向打印勾选条件

ljb 11 months ago
parent
commit
6bdf5cb514

+ 29 - 0
src/components/print-table-btn/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <span>
+    <el-button
+      size="small"
+      type="primary"
+      icon="el-icon-printer"
+      @click="handleBtnClick"
+    >
+      打印
+    </el-button>
+    <el-checkbox v-model="landscape" style="display: inline-block; vertical-align: bottom;">横向打印</el-checkbox>
+  </span>
+</template>
+
+<script>
+export default {
+  name: "PrintTableBtn",
+  data() {
+    return {
+      landscape: true
+    }
+  },
+  methods: {
+    handleBtnClick() {
+      this.$emit('click', this.landscape);
+    }
+  }
+};
+</script>

+ 12 - 5
src/components/print-wide-table/index.vue

@@ -118,7 +118,7 @@ export default {
     },
     printTitle: {
       type: String,
-      default: '宽形表格打印'
+      default: ''
     },
     showControls: {
       type: Boolean,
@@ -243,8 +243,15 @@ export default {
       
       return Math.min(widthScale, heightScale, 1)
     },
-    printTable() {
+    printTable(isLandscape) {
       const printWindow = window.open('', '_blank')
+
+      // let landscape = this.landscape;
+      // if(!!isLandscape) {
+      //   landscape = isLandscape;
+      // }
+      let landscape = isLandscape;
+      console.log(landscape)
       
       printWindow.document.open()
       printWindow.document.write(`
@@ -257,8 +264,8 @@ export default {
               body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
               .print-page {
                 page-break-after: always;
-                width: ${this.landscape ? '297mm' : '210mm'};
-                height: ${this.landscape ? '210mm' : '297mm'};
+                width: ${landscape ? '297mm' : '210mm'};
+                height: ${landscape ? '210mm' : '297mm'};
                 padding: 10mm;
                 box-sizing: border-box;
                 margin: 0 auto;
@@ -311,7 +318,7 @@ export default {
                 color: #666;
               }
               @page {
-                size: ${this.landscape ? 'A4 landscape' : 'A4 portrait'};
+                size: ${landscape ? 'A4 landscape' : 'A4 portrait'};
                 margin: 10mm;
               }
             </style>

+ 4 - 0
src/main.js

@@ -27,6 +27,8 @@ import crudCommon from '@/mixins/crud';
 import codeSetting from './views/tool/codesetting.vue';
 import tenantPackage from './views/system/tenantpackage';
 import tenantDatasource from './views/system/tenantdatasource.vue';
+import PrintTableBtn from "@/components/print-table-btn";
+import WideTablePrinter from '@/components/print-wide-table';
 
 // 注册全局crud驱动
 window.$crudCommon = crudCommon;
@@ -51,6 +53,8 @@ Vue.component('flowDesign', flowDesign);
 Vue.component('codeSetting', codeSetting);
 Vue.component('tenantPackage', tenantPackage);
 Vue.component('tenantDatasource', tenantDatasource);
+Vue.component('WideTablePrinter', WideTablePrinter);
+Vue.component('PrintTableBtn', PrintTableBtn);
 // 加载相关url地址
 Object.keys(urls).forEach(key => {
   Vue.prototype[key] = urls[key];

+ 7 - 15
src/views/basic-resource/comp-basic-info/technician-month-avg-sales.vue

@@ -45,15 +45,7 @@
         >
           读取上年度工资明细
         </el-button>
-
-        <el-button
-          size="small"
-          type="primary"
-          icon="el-icon-printer"
-          @click="printTable"
-        >
-          打印
-        </el-button>
+        <print-table-btn @click="printTable" />
         <div>
           <year-month-select v-model="params.yearAndMonth" :showMonth="false"></year-month-select>
         </div>
@@ -90,16 +82,16 @@ import moment from "moment";
 import {getToken} from "@/util/auth";
 import {downloadXls} from "@/util/util";
 import Decimal from "decimal.js";
+import PrintTableBtn from "@/components/print-table-btn";
 import WideTablePrinter from '@/components/print-wide-table'
 
-
-
 export default window.$crudCommon({
   components: {
     YearMonthSelect,
     UpdatedText,
     UploadExcelDialog,
-    WideTablePrinter
+    WideTablePrinter,
+    PrintTableBtn
   },
   data() {
     return {
@@ -216,11 +208,11 @@ export default window.$crudCommon({
         });
       });
     },
-    printTable() {
+    printTable(isLandscape) {
       this.wideTableColumns = this.$refs.crud.columnOption.filter(item => !item.hide);
-      this.printTitle = `技术人员花名册${this.params.yearAndMonth}`;
+      this.printTitle = `技术人员${this.params.yearAndMonth}年度平均工资`;
       this.$nextTick(() => {
-        this.$refs.printWideTable.printTable();
+        this.$refs.printWideTable.printTable(isLandscape);
       })
     },
   },

+ 7 - 14
src/views/basic-resource/comp-basic-info/technician-roster.vue

@@ -47,16 +47,7 @@
         >
           读取上个月人员名单
         </el-button>
-
-        <el-button
-          size="small"
-          type="primary"
-          icon="el-icon-printer"
-          @click="printTable"
-        >
-          打印
-        </el-button>
-
+        <print-table-btn @click="printTable" />
         
         <div style="display: flex; align-items: center;">
           <year-month-select v-model="params.yearAndMonth"></year-month-select>
@@ -86,14 +77,12 @@ import UploadExcelDialog from "@/components/upload-excel-dialog";
 import moment from "moment";
 import {getToken} from "@/util/auth";
 import {downloadXls} from "@/util/util";
-import WideTablePrinter from '@/components/print-wide-table'
 
 
 export default window.$crudCommon({
   components: {
     YearMonthSelect,
     UploadExcelDialog,
-    WideTablePrinter
   },
   data() {
     return {
@@ -194,11 +183,15 @@ export default window.$crudCommon({
         });
       });
     },
-    printTable() {
+    /**
+     * 打印表格
+     * @param isLandscape 是否横向打印
+     */
+    printTable(isLandscape) {
       this.wideTableColumns = this.$refs.crud.columnOption.filter(item => !item.hide);
       this.printTitle = `技术人员花名册${this.params.yearAndMonth}`;
       this.$nextTick(() => {
-        this.$refs.printWideTable.printTable();
+        this.$refs.printWideTable.printTable(isLandscape);
       })
     },
   },