Browse Source

打印优化

ljb 11 months ago
parent
commit
cf98dbb6cb

+ 21 - 2
src/components/print-wide-table/index.vue

@@ -346,6 +346,10 @@ export default {
       return Math.min(widthScale, heightScale, 1)
     },
     printTable(isLandscape) {
+      if (!this.data.length) {
+        this.$message.warning("当前数据为空,不能打印!");
+        return;
+      }
       const printWindow = window.open('', '_blank')
 
       // let landscape = this.landscape;
@@ -453,7 +457,21 @@ export default {
       if (this.currentPage < this.totalPages) {
         this.currentPage++
       }
-    }
+    },
+    /**
+     * 过滤掉隐藏的列
+     * @param columns 
+     */
+    filterHidden(columns) {
+      if (!columns) return null;
+      return columns
+        .filter(item => !item.hide)
+        .map(item => ({
+          ...item,
+          children: item.children ? this.filterHidden(item.children) : undefined
+        }))
+        .filter(item => Object.keys(item).length > 0); // 移除空对象
+    },
   },
   watch: {
     isPreviewing(val) {
@@ -471,7 +489,8 @@ export default {
     columns: {
       handler(newVal) {
         this.tableFields = [];
-        this.processHeaderConfig(newVal);
+        const newColumns = this.filterHidden(newVal);
+        this.processHeaderConfig(newColumns);
       },
       deep: true,
       immediate: true

+ 135 - 0
src/views/basic-resource/comp-basic-info/print-test.vue

@@ -0,0 +1,135 @@
+<template>
+    <wide-table-printer
+      :columns="columns"
+      :data="tableData"
+      print-label="销售数据报表"
+      :rows-per-page="30"
+      :default-landscape="true"
+    />
+</template>
+
+<script>
+import WideTablePrinter from '@/components/print-wide-table'
+
+export default {
+  name: 'App',
+  components: {
+    WideTablePrinter
+  },
+  data() {
+    return {
+      columns: [
+        {
+          label: '序号',
+          prop: 'id',
+          width: 60,
+          align: 'center',
+          // fixed: true
+        },
+        {
+          label: '订单编号',
+          prop: 'orderId',
+          width: 120,
+          // fixed: true
+        },
+        {
+          label: '客户名称',
+          prop: 'customer',
+          width: 120,
+          // fixed: true
+        },
+        {
+          label: '产品名称',
+          prop: 'product',
+          width: 150
+        },
+        {
+          label: '产品类别',
+          prop: 'category',
+          width: 100
+        },
+        {
+          label: '单价',
+          prop: 'price',
+          width: 80,
+          align: 'right',
+          formatter: value => `¥${value.toFixed(2)}`
+        },
+        {
+          label: '数量',
+          prop: 'quantity',
+          width: 60,
+          align: 'center'
+        },
+        {
+          label: '金额',
+          prop: 'amount',
+          width: 90,
+          align: 'right',
+          formatter: value => `¥${value.toFixed(2)}`
+        },
+        {
+          label: '销售日期',
+          prop: 'saleDate',
+          width: 100,
+          formatter: value => new Date(value).toLocaleDateString()
+        },
+        {
+          label: '销售人员',
+          prop: 'salesPerson',
+          width: 100
+        },
+        {
+          label: '地区',
+          prop: 'region',
+          width: 80
+        },
+        {
+          label: '付款方式',
+          prop: 'paymentMethod',
+          width: 100
+        },
+        {
+          label: '订单状态',
+          prop: 'status',
+          width: 100
+        },
+        {
+          label: '备注',
+          prop: 'notes',
+          width: 200
+        }
+      ],
+      tableData: Array.from({ length: 100 }, (_, i) => ({
+        id: i + 1,
+        orderId: `ORD${10000 + i}`,
+        customer: `客户${i % 10 + 1}`,
+        product: `产品${i % 20 + 1}`,
+        category: ['电子产品', '家居用品', '办公用品', '服装'][i % 4],
+        price: Math.round(Math.random() * 900 + 100),
+        quantity: Math.round(Math.random() * 10 + 1),
+        amount: 0, // 将在created中计算
+        saleDate: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString(),
+        salesPerson: ['张三', '李四', '王五', '赵六'][i % 4],
+        region: ['华东', '华北', '华南', '西部'][i % 4],
+        paymentMethod: ['信用卡', '支付宝', '微信', '银行转账'][i % 4],
+        status: ['已完成', '处理中', '已取消', '已发货'][i % 4],
+        notes: i % 5 === 0 ? '特殊订单,需要优先处理' : ''
+      }))
+    }
+  },
+  created() {
+    this.tableData.forEach(item => {
+      item.amount = item.price * item.quantity
+    })
+  }
+}
+</script>
+
+<!-- <style sc>
+#app {
+  max-width: 1200px;
+  margin: 20px auto;
+  padding: 20px;
+}
+</style> -->

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

@@ -209,11 +209,11 @@ export default window.$crudCommon({
       });
     },
     printTable(isLandscape) {
-      this.wideTableColumns = this.$refs.crud.columnOption.filter(item => !item.hide);
+      this.wideTableColumns = this.$refs.crud.columnOption;
       this.printTitle = `技术人员${this.params.yearAndMonth}年度平均工资`;
       this.$nextTick(() => {
         this.$refs.printWideTable.printTable(isLandscape);
-      })
+      });
     },
   },
 }, {

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

@@ -188,7 +188,7 @@ export default window.$crudCommon({
      * @param isLandscape 是否横向打印
      */
     printTable(isLandscape) {
-      this.wideTableColumns = this.$refs.crud.columnOption.filter(item => !item.hide);
+      this.wideTableColumns = this.$refs.crud.columnOption;
       this.printTitle = `技术人员花名册${this.params.yearAndMonth}`;
       this.$nextTick(() => {
         this.$refs.printWideTable.printTable(isLandscape);

+ 3 - 13
src/views/tech-person/cy-person-roster.vue

@@ -82,28 +82,18 @@ export default window.$crudCommon({
       }).then(() => {
         NProgress.start();
         exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
-          downloadXls(res.data, `技术人员上一年度平均工资${this.params.yearAndMonth}.xlsx`);
+          downloadXls(res.data, `${this.params.yearAndMonth}参研人员花名册.xlsx`);
           NProgress.done();
         })
       });
     },
-    filterHidden(items) {
-      if (!items) return null;
-      return items
-        .filter(item => !item.hide)
-        .map(item => ({
-          ...item,
-          children: item.children ? this.filterHidden(item.children) : undefined
-        }))
-        .filter(item => Object.keys(item).length > 0); // 移除空对象
-    },
     /**
      * 打印表格
      * @param isLandscape 是否横向打印
      */
     printTable(isLandscape) {
-      this.wideTableColumns = this.filterHidden(this.$refs.crud.columnOption);
-      this.printTitle = `参研人员花名册${this.params.yearAndMonth}`;
+      this.wideTableColumns = this.$refs.crud.columnOption;
+      this.printTitle = `${this.params.yearAndMonth}参研人员花名册`;
       this.$nextTick(() => {
         this.$refs.printWideTable.printTable(isLandscape);
       })

+ 24 - 14
src/views/tech-person/cy-person-sum-list.vue

@@ -1,6 +1,7 @@
 <template>
   <basic-container>
     <avue-crud
+      ref="crud"
       v-bind="bindVal"
       v-on="onEvent"
       v-model="form"
@@ -17,20 +18,22 @@
         >
           导出
         </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"></year-month-select>
         </div>
       </template>
       
     </avue-crud>
+
+    <WideTablePrinter
+      ref="printWideTable"
+      :columns="wideTableColumns"
+      :data="data"
+      :print-title="printTitle"
+      :rows-per-page="30"
+      :default-landscape="true"
+    />
   </basic-container>
 </template>
 
@@ -52,10 +55,13 @@ export default window.$crudCommon({
     return {
       params: {
         yearAndMonth: moment(new Date()).format('YYYYMM'),
-        spanArr: [
-          { prop: 'projectName', span: [] },
-        ]
+        
       },
+      spanArr: [
+        { prop: 'projectName', span: [] },
+      ],
+      wideTableColumns: [],
+      printTitle: "",
     };
   },
   watch: {
@@ -106,14 +112,18 @@ export default window.$crudCommon({
       }).then(() => {
         NProgress.start();
         exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
-          downloadXls(res.data, `项目参研人员汇总表${this.params.yearAndMonth}.xlsx`);
+          downloadXls(res.data, `${this.params.yearAndMonth}项目参研人员汇总表.xlsx`);
           NProgress.done();
         })
       });
     },
 
-    handlePrint() {
-      console.log("打印")
+    printTable(isLandscape) {
+      this.wideTableColumns = this.$refs.crud.columnOption;
+      this.printTitle = `${this.params.yearAndMonth}项目参研人员汇总表`;
+      this.$nextTick(() => {
+        this.$refs.printWideTable.printTable(isLandscape);
+      })
     }
   },
 }, {

+ 21 - 1
src/views/tech-person/high-tech-person-sum-list.vue

@@ -1,6 +1,7 @@
 <template>
   <basic-container>
     <avue-crud
+      ref="crud"
       v-bind="bindVal"
       v-on="onEvent"
       v-model="form"
@@ -36,6 +37,7 @@
         >
           导出
         </el-button>
+        <print-table-btn @click="printTable" />
         <div>
           <year-month-select v-model="params.yearAndMonth" :showMonth="false"></year-month-select>
         </div>
@@ -45,6 +47,15 @@
     </avue-crud>
 
     <upload-excel-dialog ref="uploadExcelDialog" :uploadAfter="uploadAfter"/>
+
+    <WideTablePrinter
+      ref="printWideTable"
+      :columns="wideTableColumns"
+      :data="data"
+      :print-title="printTitle"
+      :rows-per-page="30"
+      :default-landscape="true"
+    />
   </basic-container>
 </template>
 
@@ -68,6 +79,8 @@ export default window.$crudCommon({
         yearAndMonth: moment(new Date()).format('YYYY'),
       },
       
+      printTitle: "",
+      wideTableColumns: [],
     };
   },
   watch: {
@@ -87,7 +100,14 @@ export default window.$crudCommon({
     },
     handleExport() {
       exportBloByPost(`/api/kd-scientific/technician/export?${this.website.tokenHeader}=${getToken()}`, this.params).then(res => {
-        downloadXls(res.data, `技术人员花名册${this.params.yearAndMonth}.xlsx`);
+        downloadXls(res.data, `${this.params.yearAndMonth}年度高新科技人员汇总表.xlsx`);
+      });
+    },
+    printTable(isLandscape) {
+      this.wideTableColumns = this.$refs.crud.columnOption;
+      this.printTitle = `${this.params.yearAndMonth}年度高新科技人员汇总表`;
+      this.$nextTick(() => {
+        this.$refs.printWideTable.printTable(isLandscape);
       });
     },
   },