From 7774bae8dc35cb626d6296a4ca6a47694cc72cc4 Mon Sep 17 00:00:00 2001
From: "271556543@qq.com" <271556543@qq.com>
Date: Mon, 25 Jul 2022 14:42:55 +0800
Subject: [PATCH] 2022.7.25

---
 package.json                                  |   3 +-
 src/api/contractSign/contractSign.js          |   7 +
 src/components/XyDialog/index.vue             |  11 +-
 src/main.js                                   |   3 -
 .../contract/components/detailContract.vue    |   8 +
 .../contract/components/printRegistration.vue | 269 ++++++++++++++----
 src/views/contract/paymentPlan.vue            |  71 +++++
 7 files changed, 315 insertions(+), 57 deletions(-)
 create mode 100644 src/views/contract/paymentPlan.vue

diff --git a/package.json b/package.json
index fd16603..c6ec39a 100644
--- a/package.json
+++ b/package.json
@@ -17,14 +17,15 @@
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "element-ui": "2.13.2",
+    "html2canvas": "^1.4.1",
     "js-cookie": "2.2.0",
     "less": "^3.13.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "print-js": "^1.6.0",
     "view-design": "^4.7.0",
     "vue": "2.6.10",
-    "vue-print-nb": "^1.7.5",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
     "wangeditor": "^4.7.12"
diff --git a/src/api/contractSign/contractSign.js b/src/api/contractSign/contractSign.js
index 31f07d1..139861e 100644
--- a/src/api/contractSign/contractSign.js
+++ b/src/api/contractSign/contractSign.js
@@ -8,3 +8,10 @@ export function addContractSign(data){
   })
 }
 
+export function getContractSign(params){
+  return request({
+    method:'get',
+    url:'/api/admin/sign_plan/index',
+    params
+  })
+}
diff --git a/src/components/XyDialog/index.vue b/src/components/XyDialog/index.vue
index 7c31061..75a0525 100644
--- a/src/components/XyDialog/index.vue
+++ b/src/components/XyDialog/index.vue
@@ -29,6 +29,9 @@ export default {
       default:()=>{
         return {}
       }
+    },
+    okText:{
+      type:String
     }
   },
   data() {
@@ -66,6 +69,9 @@ export default {
           type:'error'
         })
       })
+    },
+    okClick(){
+      this.$emit('on-ok')
     }
   },
   render(h) {
@@ -79,14 +85,15 @@ export default {
     footer slot:
       footerContent
      */
-    const {footerRender,width,type,$scopedSlots,rules,form,showChange,isShow,title} = this
+    const {okText,okClick,footerRender,width,type,$scopedSlots,rules,form,showChange,isShow,title} = this
     return (
       <Modal
+        ok-text={okText}
         class-name={'vertical-center-modal'}
         width={width}
         title={title}
         value={isShow}
-        on={{['on-visible-change']:showChange}}
+        on={{['on-visible-change']:showChange,['on-ok']:okClick}}
         scopedSlots={{
           default(){
             if(type === "form"){
diff --git a/src/main.js b/src/main.js
index 12ce8e2..c571d9f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -43,9 +43,6 @@ Vue.component('xy-dialog',xyDialog)
 
 Vue.config.productionTip = false
 
-import Print from "vue-print-nb"
-Vue.use(Print)
-
 new Vue({
   el: '#app',
   router,
diff --git a/src/views/contract/components/detailContract.vue b/src/views/contract/components/detailContract.vue
index 956f884..d99d9a1 100644
--- a/src/views/contract/components/detailContract.vue
+++ b/src/views/contract/components/detailContract.vue
@@ -59,6 +59,14 @@
             </div>
           </div>
         </div>
+        <div class="pay-plan">
+          <div class="pay-plan-title"></div>
+          <xy-table :height="240">
+            <template v-slot:btns>
+              <div></div>
+            </template>
+          </xy-table>
+        </div>
         <div class="related-processes">
           <div class="related-processes-title">相关流程</div>
           <div class="related-processes-item">
diff --git a/src/views/contract/components/printRegistration.vue b/src/views/contract/components/printRegistration.vue
index 5f87498..7ac36f7 100644
--- a/src/views/contract/components/printRegistration.vue
+++ b/src/views/contract/components/printRegistration.vue
@@ -1,48 +1,89 @@
 <template>
   <div v-if="registration">
-    <xy-dialog :is-show.sync="isShow" :width="69">
+    <xy-dialog :is-show.sync="isShow" :width="69" @on-ok="print" ok-text="打印">
       <template v-slot:normalContent>
-        <div class="print-table1" id="printtable1">
-          <div style="grid-area: title;justify-content: center;">苏州市河道管理处资金划拨（审批）单</div>
-
-          <div style="grid-area: department">科室：</div>
-          <div style="grid-area: date">{{registration.created_at}}</div>
-
-          <div style="grid-area: tb1-1">收款单位</div>
-          <div style="grid-area: tb1-2">{{registration.contract.supply}}</div>
-          <div style="grid-area: tb1-3">经办人</div>
-          <div style="grid-area: tb1-4"></div>
-          <div style="grid-area: tb2-1">合同名称（或摘要）</div>
-          <div style="grid-area: tb2-2">{{registration.contract.name}}</div>
-          <div style="grid-area: tb2-3">科室负责人</div>
-          <div style="grid-area: tb2-4"></div>
-          <div style="grid-area: tb3-1">合同价</div>
-          <div style="grid-area: tb3-2">{{registration.contract.plan_price}}万元</div>
-          <div style="grid-area: tb3-3">财审科审核</div>
-          <div style="grid-area: tb3-4"></div>
-          <div style="grid-area: tb4-1">申请付款金额</div>
-          <div style="grid-area: tb4-2">{{registration.apply_money}}万元</div>
-          <div style="grid-area: tb4-3">分管领导审核</div>
-          <div style="grid-area: tb4-4"></div>
-          <div style="grid-area: tb5-1">资金列支渠道</div>
-          <div style="grid-area: tb5-2"></div>
-          <div style="grid-area: tb5-3">财务分管领导审核</div>
-          <div style="grid-area: tb5-4"></div>
-          <div style="grid-area: tb6-1">同意支付金额</div>
-          <div style="grid-area: tb6-2"></div>
-          <div style="grid-area: tb6-3">单位负责人审批</div>
-          <div style="grid-area: tb6-4"></div>
-        </div>
+        <div class="print-table1"  id="printtable1" ref="printtable">
+          <div class="print-table1-title">苏州市河道管理处资金划拨审批单</div>
+
+          <div class="print-table1-grid">
+            <div style="grid-area: tb1-1" class="print-table1-grid-top">项目名称：{{registration.contract.name}}</div>
+            <div style="grid-area: tb1-2;justify-content: center;align-items: center;" ><span>本次为第</span><span style="padding-left: 2vw">次付款</span></div>
+            <div style="grid-area: tb2-1" class="print-table1-grid-top">承包商/供货商：{{registration.contract.supply}}</div>
+            <div style="grid-area: tb2-2" class="print-table1-grid-top">合同服务时间：</div>
+
+            <div style="grid-area: tb3-1" class="print-table1-grid-title1">付款情形</div>
+            <div style="grid-area: tb3-2" class="print-table1-grid-title1">金额（单位：元）</div>
+            <div style="grid-area: tb3-3" class="print-table1-grid-title1">备注</div>
 
-        <Button v-print="'#printtable1'">print</Button>
+            <div style="grid-area: tb4-1" class="print-table1-grid-center">A</div>
+            <div style="grid-area: tb4-2" class="print-table1-grid-center">合同金额</div>
+            <div style="grid-area: tb4-3"></div>
+            <div style="grid-area: tb4-4"></div>
+            <div style="grid-area: tb5-1" class="print-table1-grid-center">B</div>
+            <div style="grid-area: tb5-2" class="print-table1-grid-center">审计金额</div>
+            <div style="grid-area: tb5-3"></div>
+            <div style="grid-area: tb5-4"></div>
+            <div style="grid-area: tb6-1" class="print-table1-grid-center">C</div>
+            <div style="grid-area: tb6-2" class="print-table1-grid-center">前期累计已支付</div>
+            <div style="grid-area: tb6-3"></div>
+            <div style="grid-area: tb6-4"></div>
+            <div style="grid-area: tb7-1" class="print-table1-grid-center">D</div>
+            <div style="grid-area: tb7-2" class="print-table1-grid-center">本期扣款</div>
+            <div style="grid-area: tb7-3"></div>
+            <div style="grid-area: tb7-4"></div>
+            <div style="grid-area: tb8-1" class="print-table1-grid-center">E</div>
+            <div style="grid-area: tb8-2" class="print-table1-grid-center">本期应付款</div>
+            <div style="grid-area: tb8-3"></div>
+            <div style="grid-area: tb8-4;padding-left: 0.6vw;display: block;">
+              <div style="display: flex;align-items: center;">
+                <div>进度款</div>
+                <div style="padding-left: 2vw">结算款</div>
+              </div>
+              <div style="display: flex;align-items: center;">
+                <div>质保金</div>
+                <div style="height: 1.5vw;width: 6vw;border-bottom: 2px #000 solid;margin-left: 2vw"></div>
+                <div>（其他）</div>
+              </div>
+            </div>
+            <div style="grid-area: tb9-1" class="print-table1-grid-center">F</div>
+            <div style="grid-area: tb9-2" class="print-table1-grid-center">累计支付</div>
+            <div style="grid-area: tb9-3"></div>
+            <div style="grid-area: tb9-4"></div>
+            <div style="grid-area: tb10-1" class="print-table1-grid-center">G</div>
+            <div style="grid-area: tb10-2" class="print-table1-grid-center">累计扣款</div>
+            <div style="grid-area: tb10-3"></div>
+            <div style="grid-area: tb10-4"></div>
+            <div style="grid-area: tb11-1" class="print-table1-grid-center">H</div>
+            <div style="grid-area: tb11-2" class="print-table1-grid-center">质保金</div>
+            <div style="grid-area: tb11-3;align-items: center;"><span style="padding-left: 2vw;"></span>%，质保期<span style="padding-left: 2vw;"></span>年，需审计的以审计价为计费依据。</div>
+
+            <div style="grid-area: tb12" class="print-table1-grid-bottom1">资金列支渠道：</div>
+
+            <div style="grid-area: tb13-1;" class="print-table1-grid-bottom2">
+              <div>
+                <div>业务科室：</div>
+                <div style="padding-top: 1vw;"> 经办人：</div>
+              </div>
+            </div>
+            <div style="grid-area: tb13-2" class="print-table1-grid-bottom2">科室负责人：</div>
+            <div style="grid-area: tb13-3" class="print-table1-grid-bottom2">业务科室分管领导：</div>
+            <div style="grid-area: tb14-1;" class="print-table1-grid-bottom3">财审科：</div>
+            <div style="grid-area: tb14-2;" class="print-table1-grid-bottom3">财审科分管领导：</div>
+            <div style="grid-area: tb14-3;" class="print-table1-grid-bottom3">单位负责人：</div>
+          </div>
+        </div>
       </template>
     </xy-dialog>
+
   </div>
 </template>
 
 <script>
 import {detailFundLog} from "@/api/paymentRegistration/fundLog"
 
+import html2canvas from 'html2canvas'
+import * as printJS from "print-js";
+
 export default {
   data() {
     return {
@@ -55,6 +96,19 @@ export default {
       let res = await detailFundLog({id})
       this.registration = res
       console.log(this.registration)
+    },
+
+    async print(){
+      let canvas = await html2canvas(this.$refs['printtable'],{
+        backgroundColor:null,
+        useCORS: true,
+      })
+      printJS({
+        printable: canvas.toDataURL(),
+        type: 'image',
+        documentTitle: '苏州市河道管理处资金划拨审批单',
+        style:'@page{margin:0;}'
+      })
     }
   },
 
@@ -63,26 +117,139 @@ export default {
 
 <style scoped lang="scss">
 .print-table1{
-  border: 1px #000 solid;
-  display: grid;
-  grid-template-rows: repeat(8,auto);
-  grid-template-columns: repeat(2,1fr 2.5fr);
-  grid-template-areas:
-    "title title title title"
-    "department department date date"
-    "tb1-1 tb1-2 tb1-3 tb1-4"
-    "tb2-1 tb2-2 tb2-3 tb2-4"
-    "tb3-1 tb3-2 tb3-3 tb3-4"
-    "tb4-1 tb4-2 tb4-3 tb4-4"
-    "tb5-1 tb5-2 tb5-3 tb5-4"
-    "tb6-1 tb6-2 tb6-3 tb6-4";
-
-  &>div{
+  box-sizing: border-box;
+  &-title{
+    font-size: 20px;
+    letter-spacing: 2px;
+    text-align: center;
+    font-weight: 600;
+    border: none;
+
+    padding: 1.5vw 0;
+  }
+
+  &-grid{
     border: 1px #000 solid;
-    display: flex;
-    align-items: center;
+    display: grid;
+    grid-template-rows: repeat(14,auto);
+    grid-template-columns: repeat(6,1fr);
+    grid-template-areas:
+    "tb1-1 tb1-1 tb1-1 tb1-2 tb1-2 tb1-2"
+    "tb2-1 tb2-1 tb2-1 tb2-2 tb2-2 tb2-2"
+    "tb3-1 tb3-1 tb3-2 tb3-2 tb3-3 tb3-3"
+    "tb4-1 tb4-2 tb4-3 tb4-3 tb4-4 tb4-4"
+    "tb5-1 tb5-2 tb5-3 tb5-3 tb5-4 tb5-4"
+    "tb6-1 tb6-2 tb6-3 tb6-3 tb6-4 tb6-4"
+    "tb7-1 tb7-2 tb7-3 tb7-3 tb7-4 tb7-4"
+    "tb8-1 tb8-2 tb8-3 tb8-3 tb8-4 tb8-4"
+    "tb9-1 tb9-2 tb9-3 tb9-3 tb9-4 tb9-4"
+    "tb10-1 tb10-2 tb10-3 tb10-3 tb10-4 tb10-4"
+    "tb11-1 tb11-2 tb11-3 tb11-3 tb11-3 tb11-3"
+    "tb12 tb12 tb12 tb12 tb12 tb12"
+    "tb13-1 tb13-1 tb13-2 tb13-2 tb13-3 tb13-3"
+    "tb14-1 tb14-1 tb14-2 tb14-2 tb14-3 tb14-3";
+
+    &>div{
+      border: 1px #000 solid;
+      display: flex;
+
+    }
+    &-top{
+
+      padding: 0.4vw 0 4vw 0.4vw;
+    }
+    &-title1{
+      text-align: center;
+      justify-content: center;
+
+      padding: 0.2vw 0;
+    }
+    &-center{
+      justify-content: center;
+      align-items: center;
+
+      padding: 1vw 0;
+    }
+    &-bottom1{
 
-    padding: 10px 6px;
+      padding: 0.4vw 0 4vw 0.4vw;
+    }
+    &-bottom2{
+
+      padding: 0.4vw 0 4vw 0.4vw;
+    }
+    &-bottom3{
+
+      padding: 0.4vw 0 6vw 0.4vw;
+    }
+  }
+}
+
+</style>
+
+<style media="print" lang="scss">
+@media print {
+  .print-table1{
+    box-sizing: border-box;
+    &-title{
+      text-align: center;
+      font-weight: 600;
+      border: none;
+
+      padding: 0.6vw 0;
+    }
+
+    &-grid{
+      border: 1px #000 solid;
+      display: grid;
+      grid-template-rows: repeat(14,auto);
+      grid-template-columns: repeat(6,1fr);
+      grid-template-areas:
+    "tb1-1 tb1-1 tb1-1 tb1-2 tb1-2 tb1-2"
+    "tb2-1 tb2-1 tb2-1 tb2-2 tb2-2 tb2-2"
+    "tb3-1 tb3-1 tb3-2 tb3-2 tb3-3 tb3-3"
+    "tb4-1 tb4-2 tb4-3 tb4-3 tb4-4 tb4-4"
+    "tb5-1 tb5-2 tb5-3 tb5-3 tb5-4 tb5-4"
+    "tb6-1 tb6-2 tb6-3 tb6-3 tb6-4 tb6-4"
+    "tb7-1 tb7-2 tb7-3 tb7-3 tb7-4 tb7-4"
+    "tb8-1 tb8-2 tb8-3 tb8-3 tb8-4 tb8-4"
+    "tb9-1 tb9-2 tb9-3 tb9-3 tb9-4 tb9-4"
+    "tb10-1 tb10-2 tb10-3 tb10-3 tb10-4 tb10-4"
+    "tb11-1 tb11-2 tb11-3 tb11-3 tb11-3 tb11-3"
+    "tb12 tb12 tb12 tb12 tb12 tb12"
+    "tb13-1 tb13-1 tb13-2 tb13-2 tb13-3 tb13-3"
+    "tb14-1 tb14-1 tb14-2 tb14-2 tb14-3 tb14-3";
+
+      &>div{
+        border: 1px #000 solid;
+        display: flex;
+
+      }
+      &-top{
+
+        padding: 0.2vw 0 4vw 0.4vw;
+      }
+      &-title1{
+        text-align: center;
+        justify-content: center;
+
+        padding: 0.3vw 0;
+      }
+      &-center{
+        justify-content: center;
+        align-items: center;
+
+        padding: 0.8vw;
+      }
+      &-bottom1{
+
+        padding: 0.2vw 0 2vw 0.4vw;
+      }
+      &-bottom2{
+
+        padding: 0.2vw 0 4vw 0.4vw;
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/contract/paymentPlan.vue b/src/views/contract/paymentPlan.vue
new file mode 100644
index 0000000..1642590
--- /dev/null
+++ b/src/views/contract/paymentPlan.vue
@@ -0,0 +1,71 @@
+<template>
+  <div style="padding: 0 20px;">
+    <lx-header icon="md-apps" text="付款计划" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+      <div slot="content"></div>
+      <slot>
+        <div class="selects">
+          <div>
+            <span style="padding: 0 6px;word-break: keep-all;">
+            合同类型
+            </span>
+            <Select placeholder="请选择类型" style="width:120px;" clearable>
+              <Option v-for="item in [{label:'服务',value:1},{label:'货品',value:2},{label:'工程',value:3}]" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+          </div>
+
+          <div>
+            <span style="padding: 0 6px;word-break: keep-all;">
+            关键字
+            </span>
+            <Input placeholder="请输入关键字" style="width: 180px"></Input>
+          </div>
+
+          <Button type="primary"  style="margin-left: 10px" >新增</Button>
+          <Button type="primary"  style="margin-left: 10px" >查询</Button>
+        </div>
+      </slot>
+    </lx-header>
+
+
+    <xy-table :list="[]" :table-item="[]"></xy-table>
+
+    <div style="display: flex;justify-content: flex-end;">
+      <Page :total="total" show-elevator/>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getContractSign} from "@/api/contractSign/contractSign"
+export default {
+  data() {
+    return {
+      select:{
+        pageIndex:1,
+        keyword:''
+      },
+      total:0,
+    }
+  },
+  methods: {
+    async getSignPlan(){
+      const res = await getContractSign({page_size:10,page:this.select.pageIndex,keyword:this.select.keyword})
+      console.log(res)
+    }
+  },
+  mounted() {
+    this.getSignPlan()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.selects{
+  display: flex;
+  flex-wrap: wrap;
+
+  &>div{
+    margin-bottom: 6px;
+  }
+}
+</style>