1

src/unit/htmlToPdfJQ.js

@@ -6,104 +6,78 @@ import $ from 'jquery';
 
 // console.log($, '这是什么什么');
 
-
-
-function download(ele){
-    var element = $("#demo");    // 这个dom元素是要导出pdf的div容器
-    console.log(element,'1212122');
-
-
-    // var element = ele;    // 这个dom元素是要导出pdf的div容器
-
-    var w = element.width();    // 获得该容器的宽
-    var h = element.height();    // 获得该容器的高
-
-
-
-    var offsetTop = element.offset().top;    // 获得该容器到文档顶部的距离
-    var offsetLeft = element.offset().left;    // 获得该容器到文档最左的距离
-
-    console.log(offsetTop,'------',offsetLeft);
-
-
-
-
-    var canvas = document.createElement("canvas");
-    var abs = 0;
-    var win_i = $(window).width();    // 获得当前可视窗口的宽度（不包含滚动条）
-    var win_o = window.innerWidth;    // 获得当前窗口的宽度（包含滚动条）
-
-    console.log(canvas, abs, win_i, win_o);
-
-
-
-
-
-    if(win_o>win_i){
-        abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
-    }
-
-
-
-
-
-
-    canvas.width = w * 2;    // 将画布宽&&高放大两倍
-    canvas.height = h * 2;
-    var context = canvas.getContext("2d");
-    context.scale(2, 2);
-    context.translate(-offsetLeft-abs,-offsetTop);
-    // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
-    // translate的时候，要把这个差值去掉
-
-    // html2canvas(element).then( (canvas)=>{ //报错
-    html2canvas(element[0]).then( (canvas)=>{
-
-        var contentWidth = canvas.width;
-        var contentHeight = canvas.height;
-        //一页pdf显示html页面生成的canvas高度;
-        var pageHeight = contentWidth / 592.28 * 841.89;
-        //未生成pdf的html页面高度
-        var leftHeight = contentHeight;
-        //页面偏移
-        var position = 0;
-        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
-        var imgWidth = 595.28;
-        var imgHeight = 592.28/contentWidth * contentHeight;
-
-        var pageData = canvas.toDataURL('image/jpeg', 1.0);
-
-
-
-
-        var pdf = new JsPDF('', 'pt', 'a4');
-
-        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
-        //当内容未超过pdf一页显示的范围，无需分页
-        if (leftHeight < pageHeight) {
-            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
-        } else {    // 分页
-            while(leftHeight > 0) {
-                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
-                leftHeight -= pageHeight;
-                position -= 841.89;
-                //避免添加空白页
-                if(leftHeight > 0) {
-                    pdf.addPage();
-                }
-            }
+function download(ele) {
+  var element = $('#demo'); // 这个dom元素是要导出pdf的div容器
+  console.log(element, '1212122');
+
+  // var element = ele;    // 这个dom元素是要导出pdf的div容器
+
+  var w = element.width(); // 获得该容器的宽
+  var h = element.height(); // 获得该容器的高
+
+  var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
+  var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
+
+  console.log(offsetTop, '------', offsetLeft);
+
+  var canvas = document.createElement('canvas');
+  var abs = 0;
+  var win_i = $(window).width(); // 获得当前可视窗口的宽度（不包含滚动条）
+  var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
+
+  console.log(canvas, abs, win_i, win_o);
+
+  if (win_o > win_i) {
+    abs = (win_o - win_i) / 2; // 获得滚动条长度的一半
+  }
+
+  canvas.width = w * 2; // 将画布宽&&高放大两倍
+  canvas.height = h * 2;
+  var context = canvas.getContext('2d');
+  context.scale(2, 2);
+  context.translate(-offsetLeft - abs, -offsetTop);
+  // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
+  // translate的时候，要把这个差值去掉
+
+  // html2canvas(element).then( (canvas)=>{ //报错
+  html2canvas(element[0]).then((canvas) => {
+    var contentWidth = canvas.width;
+    var contentHeight = canvas.height;
+    //一页pdf显示html页面生成的canvas高度;
+    var pageHeight = (contentWidth / 592.28) * 841.89;
+    //未生成pdf的html页面高度
+    var leftHeight = contentHeight;
+    //页面偏移
+    var position = 0;
+    //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
+    var imgWidth = 595.28;
+    var imgHeight = (592.28 / contentWidth) * contentHeight;
+
+    var pageData = canvas.toDataURL('image/jpeg', 1.0);
+
+    var pdf = new JsPDF('', 'pt', 'a4');
+
+    //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+    //当内容未超过pdf一页显示的范围，无需分页
+    if (leftHeight < pageHeight) {
+      pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
+    } else {
+      // 分页
+      while (leftHeight > 0) {
+        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
+        leftHeight -= pageHeight;
+        position -= 841.89;
+        //避免添加空白页
+        if (leftHeight > 0) {
+          pdf.addPage();
         }
+      }
+    }
 
-
-
-        pdf.save('我的简历.pdf');
-    })
-
-
-
+    pdf.save('我的简历.pdf');
+  });
 }
 
-
 export default {
-    download
-}
+  download,
+};

src/views/adminCenter/company/cashing/coupons/couponsResult.vue

@@ -3,21 +3,33 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="one">
-          <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @view="toView"> </data-table>
+          <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @view="toView" @vouc="toVouc"> </data-table>
         </el-col>
       </el-col>
     </el-row>
+    <el-dialog title="凭证" :visible.sync="dialog" width="43%" :before-close="handleClose">
+      <div class="dialog">
+        <el-button type="primary" size="mini" @click="download">下载凭证</el-button>
+        <div id="demo">
+          <info :form="form"></info>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import info from './parts/info.vue';
+import htmlToPdf from '@/unit/htmlToPdf.js';
 const { cashingresult } = require('@common/dict/index');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: cashing } = createNamespacedHelpers('cashing');
 export default {
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    info,
+  },
   data: function () {
     return {
       list: [],
@@ -28,6 +40,11 @@ export default {
           method: 'view',
           display: (i) => i.status == '1' || i.status == '-1',
         },
+        {
+          label: '查看凭证',
+          method: 'vouc',
+          display: (i) => i.status == '1',
+        },
       ],
       fields: [
         { label: '订单号', prop: 'cashing_no', filter: 'input' },
@@ -48,6 +65,8 @@ export default {
           },
         },
       ],
+      dialog: false,
+      form: {},
     };
   },
   created() {
@@ -66,6 +85,17 @@ export default {
     toView({ data }) {
       this.$router.push({ path: '/adminCenter/company/cashing/couponsResult_info', query: { id: data._id } });
     },
+    // 查看凭证
+    toVouc({ data }) {
+      this.$set(this, `form`, data);
+      this.dialog = true;
+    },
+    handleClose() {
+      this.dialog = false;
+    },
+    download() {
+      htmlToPdf.downloadPDF(document.querySelector('#demo'), '凭证');
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -92,4 +122,17 @@ export default {
 .main:hover {
   box-shadow: 0 0 5px #409eff;
 }
+.dialog {
+  #demo {
+    width: 100%;
+    height: 600px;
+    // border: 1px solid #ccc;
+  }
+  .el-button {
+    margin: 0 0 10px 0;
+  }
+}
+/deep/.el-dialog__body {
+  padding: 20px;
+}
 </style>

src/views/adminCenter/company/cashing/coupons/couponsResult_info.vue

@@ -7,135 +7,121 @@
             <el-button type="primary" size="mini" @click="back">返回</el-button>
           </el-col>
           <el-col :span="24" class="down">
-            <el-col :span="12" class="common down_left">
-              <el-col :span="24" class="down_leftTix"> 兑付订单详情 </el-col>
-              <el-col :span="24" class="down_leftInfo">
-                <el-form :model="form" ref="form" label-width="100px">
-                  <el-col :span="24" class="text">
-                    <el-col :span="3" class="left"> 订单号</el-col>
-                    <el-col :span="21" class="right">
-                      {{ form.cashing_no || '暂无' }}
-                    </el-col>
-                  </el-col>
-                  <el-col :span="24" class="text">
-                    <el-col :span="3" class="left"> 券的类别</el-col>
-                    <el-col :span="21" class="right">
-                      {{ form.coupons_type || '暂无' }}
-                    </el-col>
-                  </el-col>
-                  <el-col :span="24" class="text">
-                    <el-col :span="3" class="left"> 使用单位</el-col>
-                    <el-col :span="21" class="right">
-                      {{ form.company_name || '暂无' }}
-                    </el-col>
-                  </el-col>
-                  <el-col :span="24" class="text">
-                    <el-col :span="3" class="left"> 最后提交时间</el-col>
-                    <el-col :span="21" class="right">
-                      {{ form.create_time || '暂无' }}
-                    </el-col>
+            <el-col :span="24" class="down_left">
+              <el-col :span="24" class="down_left_info">
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="2" class="down_left_info_textle"> 订单号</el-col>
+                  <el-col :span="22" class="down_left_info_textri">
+                    {{ form.cashing_no || '暂无' }}
                   </el-col>
-                  <el-col :span="24" class="text">
-                    <el-col :span="3" class="left"> 最后审核时间</el-col>
-                    <el-col :span="21" class="right">
-                      {{ form.end_time || '暂无' }}
-                    </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="2" class="down_left_info_textle"> 券的类别</el-col>
+                  <el-col :span="22" class="down_left_info_textri">
+                    {{ form.coupons_type || '暂无' }}
                   </el-col>
-                  <el-col :span="24" class="text">
-                    <el-col :span="3" class="left"> 服务提供商</el-col>
-                    <el-col :span="21" class="right">
-                      {{ form.mechanism_name || '暂无' }}
-                    </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="2" class="down_left_info_textle"> 使用单位</el-col>
+                  <el-col :span="22" class="down_left_info_textri">
+                    {{ form.company_name || '暂无' }}
                   </el-col>
-                  <el-col :span="24" class="text">
-                    <el-col :span="3" class="left"> 订单金额</el-col>
-                    <el-col :span="21" class="right"> {{ getMoney(form.money) }}元 </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="2" class="down_left_info_textle"> 最后提交时间</el-col>
+                  <el-col :span="22" class="down_left_info_textri">
+                    {{ form.create_time || '暂无' }}
                   </el-col>
-                  <el-col :span="24" class="text">
-                    <el-col :span="3" class="left"> 券抵扣金额</el-col>
-                    <el-col :span="21" class="right"> {{ getMoney(form.allowance) }}元 </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="2" class="down_left_info_textle"> 最后审核时间</el-col>
+                  <el-col :span="22" class="down_left_info_textri">
+                    {{ form.end_time || '暂无' }}
                   </el-col>
-                  <el-col :span="24" class="text">
-                    <el-col :span="3" class="left"> 应收金额</el-col>
-                    <el-col :span="21" class="right"> {{ getMoney(form.total) }}元 </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="2" class="down_left_info_textle"> 服务提供商</el-col>
+                  <el-col :span="22" class="down_left_info_textri">
+                    {{ form.mechanism_name || '暂无' }}
                   </el-col>
-                  <el-col :span="24" class="file">
-                    <el-col :span="24" class="file_title"> 相关附件 </el-col>
-                    <el-col :span="24" class="text">
-                      <el-col :span="24" class="left">1.创新券服务合同</el-col>
-                      <el-col :span="24" class="right">
-                        <el-col :span="4" v-for="(i, index) in form.contract" :key="`contract-${index}`">
-                          <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
-                          <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
-                        </el-col>
-                      </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="2" class="down_left_info_textle"> 订单金额</el-col>
+                  <el-col :span="22" class="down_left_info_textri"> {{ getMoney(form.money) }}元 </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="2" class="down_left_info_textle"> 券抵扣金额</el-col>
+                  <el-col :span="22" class="down_left_info_textri"> {{ getMoney(form.allowance) }}元 </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="2" class="down_left_info_textle"> 应收金额</el-col>
+                  <el-col :span="22" class="down_left_info_textri"> {{ getMoney(form.total) }}元 </el-col>
+                </el-col>
+                <el-col :span="24" class="file_title"> 相关附件 </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="24" class="down_left_info_textle">1.创新券服务合同</el-col>
+                  <el-col :span="24" class="down_left_info_textri">
+                    <el-col :span="4" v-for="(i, index) in form.contract" :key="`contract-${index}`">
+                      <el-image v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)"></el-image>
+                      <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
                     </el-col>
-                    <el-col :span="24" class="text">
-                      <el-col :span="24" class="left">2.官方缴费证明</el-col>
-                      <el-col :span="24" class="right">
-                        <el-col :span="4" v-for="(i, index) in form.accept" :key="`accept-${index}`">
-                          <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
-                          <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
-                        </el-col>
-                      </el-col>
-                    </el-col>
-                    <el-col :span="24" class="text">
-                      <el-col :span="24" class="left">3.创新券服务合同</el-col>
-                      <el-col :span="24" class="right">
-                        <el-col :span="4" v-for="(i, index) in form.cost" :key="`cost-${index}`">
-                          <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
-                          <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
-                        </el-col>
-                      </el-col>
-                    </el-col>
-                    <el-col :span="24" class="text">
-                      <el-col :span="24" class="left">4.服务结果证明</el-col>
-                      <el-col :span="24" class="right">
-                        <el-col :span="4" v-for="(i, index) in form.result" :key="`result-${index}`">
-                          <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
-                          <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
-                        </el-col>
-                      </el-col>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="24" class="down_left_info_textle">2.官方缴费证明</el-col>
+                  <el-col :span="24" class="down_left_info_textri">
+                    <el-col :span="4" v-for="(i, index) in form.accept" :key="`accept-${index}`">
+                      <el-image v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)"></el-image>
+                      <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
                     </el-col>
-                    <el-col :span="24" class="text">
-                      <el-col :span="24" class="left">5.其他能够证明服务真实发生的材料</el-col>
-                      <el-col :span="24" class="right">
-                        <el-col :span="4" v-for="(i, index) in form.result_else" :key="`result_else-${index}`">
-                          <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
-                          <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
-                        </el-col>
-                      </el-col>
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="24" class="down_left_info_textle">3.创新券服务合同</el-col>
+                  <el-col :span="24" class="down_left_info_textri">
+                    <el-col :span="4" v-for="(i, index) in form.cost" :key="`cost-${index}`">
+                      <el-image v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)"></el-image>
+                      <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
                     </el-col>
                   </el-col>
-                  <el-col :span="24" class="text">
-                    <el-col :span="3" class="left"> 审核状态：</el-col>
-                    <el-col :span="21" class="right">
-                      {{ getStatus(form.status) }}
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="24" class="down_left_info_textle">4.服务结果证明</el-col>
+                  <el-col :span="24" class="down_left_info_textri">
+                    <el-col :span="4" v-for="(i, index) in form.result" :key="`result-${index}`">
+                      <el-image v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)"></el-image>
+                      <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
                     </el-col>
                   </el-col>
-                  <el-col :span="24" class="text">
-                    <el-col :span="24" class="left"> 审核意见：</el-col>
-                    <el-col :span="24" class="right desc">
-                      <el-timeline>
-                        <el-timeline-item v-for="(item, index) in form.record" :key="index" :timestamp="item.desc_time" placement="top" type="success">
-                          <el-card>
-                            <p>审核状态：{{ getStatus(item.status) || '暂无' }}</p>
-                            <p>审核意见：{{ item.desc || '暂无' }}</p>
-                          </el-card>
-                        </el-timeline-item>
-                      </el-timeline>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="24" class="down_left_info_textle">5.其他能够证明服务真实发生的材料</el-col>
+                  <el-col :span="24" class="down_left_info_textri">
+                    <el-col :span="4" v-for="(i, index) in form.result_else" :key="`result_else-${index}`">
+                      <el-image v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)"></el-image>
+                      <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
                     </el-col>
                   </el-col>
-                </el-form>
-              </el-col>
-            </el-col>
-            <el-col :span="12" class="common down_right">
-              <el-col :span="24" class="down_rightTix">
-                <span>凭证详细</span>
-                <el-button type="primary" size="mini" @click="download">下载凭证</el-button>
-              </el-col>
-              <el-col :span="24" class="down_rightInfo">
-                <div id="demo">凭证详细信息</div>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="2" class="down_left_info_textle"> 审核状态：</el-col>
+                  <el-col :span="22" class="down_left_info_textri">
+                    {{ getStatus(form.status) }}
+                  </el-col>
+                </el-col>
+                <el-col :span="24" class="down_left_info_text">
+                  <el-col :span="24" class="down_left_info_textle"> 审核意见：</el-col>
+                  <el-col :span="24" class="down_left_info_textri desc">
+                    <el-timeline>
+                      <el-timeline-item v-for="(item, index) in form.record" :key="index" :timestamp="item.desc_time" placement="top" type="success">
+                        <el-card>
+                          <p>审核状态：{{ getStatus(item.status) || '暂无' }}</p>
+                          <p>审核意见：{{ item.desc || '暂无' }}</p>
+                        </el-card>
+                      </el-timeline-item>
+                    </el-timeline>
+                  </el-col>
+                </el-col>
               </el-col>
             </el-col>
           </el-col>
@@ -148,7 +134,6 @@
 <script>
 const _ = require('lodash');
 const moment = require('moment');
-import htmlToPdf from '@/unit/htmlToPdf.js';
 const { cashingresult } = require('@common/dict/index');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: cashing } = createNamespacedHelpers('cashing');
@@ -193,10 +178,6 @@ export default {
     toOpen(url) {
       window.open(url);
     },
-    //pdf下载
-    download() {
-      htmlToPdf.downloadPDF(document.querySelector('#demo'), '凭证');
-    },
   },
   computed: {
     ...mapState(['user']),
@@ -229,69 +210,43 @@ export default {
     }
     .down {
       .down_left {
-        .down_leftTix {
+        border: 1px solid #000;
+        padding: 10px;
+        border-radius: 5px;
+        margin: 0 15px 0 0;
+        .down_left_tit {
           text-align: center;
           font-size: 16px;
           font-weight: bold;
           border-bottom: 1px solid #409eff;
           padding: 10px 0;
         }
-        .text {
-          padding: 10px 0;
-          border-bottom: 1px dashed #333;
-          .left {
-            text-align: left;
-          }
-          .right {
-            img {
-              width: 200px;
-              height: 200px;
-              border: 1px solid #ccc;
+        .down_left_info {
+          .down_left_info_text {
+            padding: 10px 0;
+            border-bottom: 1px dashed #333;
+            .down_left_info_textle {
+              text-align: left;
+            }
+            .down_left_info_textri {
+              img {
+                width: 200px;
+                height: 200px;
+                border: 1px solid #ccc;
+              }
+            }
+            .desc {
+              margin: 10px 0 0 0;
             }
           }
-          .desc {
+
+          .file_title {
+            font-size: 16px;
+            font-weight: bold;
             margin: 10px 0 0 0;
           }
         }
       }
-      .down_right {
-        .down_rightTix {
-          text-align: center;
-          font-size: 16px;
-          font-weight: bold;
-          border-bottom: 1px solid #409eff;
-          padding: 10px 0;
-          margin: 0 0 10px 0;
-          .el-button {
-            margin: 0 0 0 5px;
-          }
-        }
-        .down_rightInfo {
-          #demo {
-            width: 100%;
-            height: 930px;
-            border: 1px solid #ff0000;
-          }
-        }
-      }
-      .common {
-        border: 1px solid #000;
-        padding: 10px;
-        border-radius: 5px;
-        width: 49.5%;
-        margin: 0 15px 0 0;
-      }
-      .common:nth-child(2) {
-        margin: 0;
-      }
-      .file {
-        .file_title {
-          font-size: 16px;
-          font-weight: bold;
-          margin: 10px 0 0 0;
-          // text-align: center;
-        }
-      }
     }
   }
 }

src/views/adminCenter/company/cashing/coupons/parts/info.vue

@@ -0,0 +1,118 @@
+<template>
+  <div id="info">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="top">
+            <el-col :span="13" class="title"> 科技创新券兑付凭证 </el-col>
+            <el-col :span="11" class="no"> NO.{{ form.cashing_no }} </el-col>
+          </el-col>
+          <el-col :span="24" class="down">
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 使用单位 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.company_name || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 服务提供商 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.mechanism_name || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 券的类别 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.coupons_type || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 券抵扣金额 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.allowance || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 订单金额 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.money || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 应收金额 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.total || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 最后提交时间 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.create_time || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 最后审核时间 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.end_time || '暂无' }} </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'info',
+  props: {
+    form: { type: Object },
+  },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .top {
+      text-align: center;
+      margin: 15px 0;
+      .title {
+        font-weight: bold;
+        text-align: right;
+        color: #000000;
+      }
+      .no {
+        font-size: 12px;
+        color: #ff0000;
+        font-weight: bold;
+        text-align: right;
+        padding: 0 5px;
+      }
+    }
+    .down {
+      .down_info {
+        .down_info_le {
+          font-size: 14px;
+          text-align: center;
+          padding: 10px 0;
+          border: 1px solid #000;
+          color: #000000;
+        }
+        .down_info_ri {
+          font-size: 14px;
+          text-align: center;
+          padding: 10px 0;
+          border: 1px solid #000;
+          color: #000000;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/adminCenter/company/cashing/reward/parts/info.vue

@@ -0,0 +1,110 @@
+<template>
+  <div id="info">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="24" class="top">
+            <el-col :span="13" class="title"> {{ form.type }}兑付凭证 </el-col>
+            <el-col :span="11" class="no"> NO.{{ form.no }} </el-col>
+          </el-col>
+          <el-col :span="24" class="down">
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 使用单位 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.company_name || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 兑付类别 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.type || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 订单金额 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.money || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 应收金额 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.total || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 最后提交时间 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.create_time || '暂无' }} </el-col>
+            </el-col>
+            <el-col :span="12" class="down_info">
+              <el-col :span="6" class="down_info_le"> 最后审核时间 </el-col>
+              <el-col :span="18" class="down_info_ri">{{ form.end_time || '暂无' }} </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'info',
+  props: {
+    form: { type: Object },
+  },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .one {
+    .top {
+      text-align: center;
+      margin: 15px 0;
+      .title {
+        font-weight: bold;
+        text-align: right;
+        color: #000000;
+      }
+      .no {
+        font-size: 12px;
+        color: #ff0000;
+        font-weight: bold;
+        text-align: right;
+        padding: 0 5px;
+      }
+    }
+    .down {
+      .down_info {
+        .down_info_le {
+          font-size: 14px;
+          text-align: center;
+          padding: 10px 0;
+          border: 1px solid #000;
+          color: #000000;
+        }
+        .down_info_ri {
+          font-size: 14px;
+          text-align: center;
+          padding: 10px 0;
+          border: 1px solid #000;
+          color: #000000;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/adminCenter/company/cashing/reward/rewardResult.vue

@@ -3,21 +3,31 @@
     <el-row>
       <el-col :span="24" class="main">
         <el-col :span="24" class="one">
-          <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @view="toView"> </data-table>
+          <data-table :fields="fields" :opera="opera" :data="list" :total="total" @query="search" @view="toView" @vouc="toVouc"> </data-table>
         </el-col>
       </el-col>
     </el-row>
+    <el-dialog title="凭证" :visible.sync="dialog" width="43%" :before-close="handleClose">
+      <div class="dialog">
+        <el-button type="primary" size="mini" @click="download">下载凭证</el-button>
+        <div id="demo">
+          <info :form="form"></info>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import info from './parts/info.vue';
+import htmlToPdf from '@/unit/htmlToPdf.js';
 const { cashingresult } = require('@common/dict/index');
 import { mapState, createNamespacedHelpers } from 'vuex';
 const { mapActions: rewardOrder } = createNamespacedHelpers('rewardOrder');
 export default {
   name: 'rewardResult',
   props: {},
-  components: {},
+  components: { info },
   data: function () {
     return {
       list: [],
@@ -28,6 +38,11 @@ export default {
           method: 'view',
           display: (i) => i.status == '1' || i.status == '-1',
         },
+        {
+          label: '查看凭证',
+          method: 'vouc',
+          display: (i) => i.status == '1',
+        },
       ],
       fields: [
         { label: '订单号', prop: 'no', filter: 'input' },
@@ -47,6 +62,8 @@ export default {
           },
         },
       ],
+      dialog: false,
+      form: {},
     };
   },
   created() {},
@@ -64,6 +81,17 @@ export default {
     toView({ data }) {
       this.$router.push({ path: '/adminCenter/company/cashing/reward/rewardResult_info', query: { id: data._id, type: data.type } });
     },
+    // 查看凭证
+    toVouc({ data }) {
+      this.$set(this, `form`, data);
+      this.dialog = true;
+    },
+    handleClose() {
+      this.dialog = false;
+    },
+    download() {
+      htmlToPdf.downloadPDF(document.querySelector('#demo'), '凭证');
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -95,4 +123,16 @@ export default {
 .main:hover {
   box-shadow: 0 0 5px #409eff;
 }
+.dialog {
+  #demo {
+    width: 100%;
+    height: 600px;
+  }
+  .el-button {
+    margin: 0 0 10px 0;
+  }
+}
+/deep/.el-dialog__body {
+  padding: 20px;
+}
 </style>