【修改】 bug

src/views/deposit_commerce/components/deposit_list-detail.vue

@@ -403,7 +403,7 @@
         <el-row :gutter="0">
           <el-col :xs="12" :sm="12" :lg="12" class="item">
             <div class="label">申请人</div>
-            <div class="value">{{ details.createBy }}</div>
+            <div class="value">{{ details.customerName }}</div>
           </el-col>
           <el-col :xs="12" :sm="12" :lg="12" class="item">
             <div class="label">申请日期</div>

src/views/deposit_home/components/deposit_list-detail.vue

@@ -412,7 +412,7 @@
         <el-row :gutter="0">
           <el-col :xs="12" :sm="12" :lg="12" class="item">
             <div class="label">申请人</div>
-            <div class="value">{{ details.createBy }}</div>
+            <div class="value">{{ details.customerName }}</div>
           </el-col>
           <el-col :xs="12" :sm="12" :lg="12" class="item">
             <div class="label">申请日期</div>

src/views/finance/receipt_list.vue

@@ -51,13 +51,15 @@
             </el-col> -->
             <el-col :xs="24" :sm="12" :lg="6">
               <el-form-item label="开始时间" prop="startTime">
-                <el-date-picker class="selectStyle" v-model="searchForm.startTime" type="datetime" placeholder="选择日期时间" default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss">
+                <el-date-picker class="selectStyle" v-model="searchForm.startTime" type="datetime" placeholder="选择日期时间"
+                  default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss">
                 </el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :xs="24" :sm="12" :lg="6">
               <el-form-item label="结束时间" prop="endTime">
-                <el-date-picker class="selectStyle" v-model="searchForm.endTime" type="datetime" placeholder="选择日期时间" default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss">
+                <el-date-picker class="selectStyle" v-model="searchForm.endTime" type="datetime" placeholder="选择日期时间"
+                  default-time="00:00:00" value-format="yyyy-MM-dd HH:mm:ss">
                 </el-date-picker>
               </el-form-item>
             </el-col>
@@ -74,18 +76,20 @@
       <!-- 按钮 -->
       <div class="btn-group clearfix">
         <div class="fl">
-          <!-- <el-button type="primary" size="mini" @click="toPrint" :disabled="tableSelection.length < 1">打印发货单 -->
-          <!-- </el-button> -->
+          <el-button type="primary" size="mini" @click="toPrint" :disabled="tableSelection.length < 1">打印发货单
+          </el-button>
         </div>
         <div class="fr">
 
-          <ExportButton :exUrl="'/k3/receipt/export'" :exParams="exParams" class="exportClass" />
+          <!-- <ExportButton :exUrl="'/k3/receipt/export'" :exParams="exParams" class="exportClass" /> -->
         </div>
       </div>
       <!-- 列表 -->
       <div class="mymain-container">
         <div class="table">
-          <el-table ref="table" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe show-summary :summary-method="getSummaries" @select="handleSelect" @select-all="handleSelectAll">
+          <el-table ref="table" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit
+            highlight-current-row stripe show-summary :summary-method="getSummaries" @select="handleSelect"
+            @select-all="handleSelectAll">
             <el-table-column align="center" type="selection" width="55"></el-table-column>
 
             <el-table-column align="left" label="单据类型" prop="billType" min-width="160" show-overflow-tooltip>
@@ -178,25 +182,34 @@
                   scope.row.status == 'C'
                 " @click="NoExamineFn(scope.row.id)">弃审</el-button>
                 <el-button type="text" class="textColor" @click="seeFn(scope.row.id)">查看</el-button>
-                <!-- <el-button type="text" class="textColor" @click="toPrint(scope.row)">打印</el-button> -->
-
+                <!-- <el-button type="text" class="textColor" @click="toPrint(scope.row, 2)">打印</el-button> -->
               </template>
             </el-table-column>
           </el-table>
         </div>
         <!-- 分页 -->
         <div class="fr">
-          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
           </el-pagination>
         </div>
       </div>
     </div>
+    
     <ReceiptPrint :listItem="queryItem" v-else-if="showDetail == 2" @backListFormDetail="backList" />
     <ReceiptListDetail :detailId="detailId" v-else />
+    <print-preview ref="preView" />
+
   </div>
 </template>
 
 <script>
+import { disAutoConnect, hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
+disAutoConnect();
+import panel from './components/design/panel'
+import { getDetail, detailArr } from './components/design/print-data'
+import printPreview from './components/design/preview.vue'
 import { getCustomerList } from "@/api/finance/wallet";
 import {
   getK3ReceiptList,
@@ -210,6 +223,7 @@ export default {
   components: {
     ReceiptPrint,
     ReceiptListDetail,
+    printPreview
   },
   data() {
     return {
@@ -232,6 +246,41 @@ export default {
       detailId: null,
       queryItem: {},
       tableSelection: [],
+      curPaper: {
+        type: 'A5',
+        width: 500,
+        height: 147.6
+      },
+      paperTypes: {
+        'A3': {
+          width: 420,
+          height: 296.6
+        },
+        'A4': {
+          width: 210,
+          height: 296.6
+        },
+        'A5': {
+          width: 210,
+          height: 147.6
+        },
+        'B3': {
+          width: 500,
+          height: 352.6
+        },
+        'B4': {
+          width: 250,
+          height: 352.6
+        },
+        'B5': {
+          width: 250,
+          height: 175.6
+        }
+      },
+      scaleValue: 1,
+      scaleMax: 5,
+      scaleMin: 0.5,
+      hiprintTemplate: '',
     };
   },
   computed: {
@@ -240,11 +289,26 @@ export default {
         ...this.searchForm,
       };
     },
+    curPaperType() {
+      let type = 'other'
+      let types = this.paperTypes
+      for (const key in types) {
+        let item = types[key]
+        let { width, height } = this.curPaper
+        if (item.width === width && item.height === height) {
+          type = key
+        }
+      }
+      return type
+    }
   },
   created() {
     this.getDataList({ pageSize: this.pageSize, pageNum: this.currentPage });
     this.getCustomerDataList();
   },
+  mounted() {
+    this.initPrint()
+  },
   methods: {
     //获取经销商列表
     async getCustomerDataList() {
@@ -254,6 +318,40 @@ export default {
       });
       this.customerList = res.data.records;
     },
+    initPrint() {
+      hiprint.init({
+        providers: [new defaultElementTypeProvider()]
+      });
+      // 还原配置
+      hiprint.setConfig()
+      // 替换配置
+      hiprint.setConfig({
+        movingDistance: 2.5,
+        text: {
+          supportOptions: [
+            {
+              name: 'styler',
+              hidden: true
+            },
+            {
+              name: 'formatter',
+              hidden: true
+            },
+          ]
+        }
+      })
+      // eslint-disable-next-line no-undef
+      hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
+      this.hiprintTemplate = new hiprint.PrintTemplate({
+        template: panel,
+        settingContainer: '#PrintElementOptionSetting',
+        paginationContainer: '.hiprint-printPagination'
+      });
+      this.hiprintTemplate.design('#hiprint-printTemplate');
+      // 获取当前放大比例, 当zoom时传true 才会有
+      // this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
+    }
+    ,
     //合计
     getSummaries(param) {
       const { columns, data } = param;
@@ -348,11 +446,36 @@ export default {
       this.queryItem = {};
       this.isShowPrint = false;
     },
+    /**
+      * 设置纸张大小
+      * @param type [A3, A4, A5, B3, B4, B5, other]
+      * @param value {width,height} mm
+      */
+    setPaper(type, value) {
+      try {
+        if (Object.keys(this.paperTypes).includes(type)) {
+          this.curPaper = { type: type, width: value.width, height: value.height }
+          this.hiprintTemplate.setPaper(value.width, value.height)
+        } else {
+          this.curPaper = { type: 'other', width: value.width, height: value.height }
+          this.hiprintTemplate.setPaper(value.width, value.height)
 
+        }
+      } catch (error) {
+        this.$message.error(`操作失败: ${error}`)
+      }
+    },
     // 点击打印
-    toPrint(row) {
-      this.queryItem = row;
-      this.showDetail = 2;
+    toPrint(row, type) {
+      // this.tableSelection = this.$refs.table.selection;
+      if (!type) {
+        getDetail(this.tableSelection)
+      } else {
+        this.queryItem = row;
+        getDetail(row.id)
+      }
+      this.$refs.preView.show(this.hiprintTemplate, detailArr)
+
     },
   },
 };