合同网签

src/api/sunVillage_info/fixedAssets.js

@@ -682,3 +682,19 @@ export function contractGet(query,id) {
     params:query
   })
 }
+
+//线下合同附件列表
+export function contractFileList(id) {
+  return request({
+    url: '/transaction/website/contractFileList/id/'+id,
+    method: 'get',
+  })
+}
+
+//线上合同预览
+export function previewContractFile(id) {
+  return request({
+    url: '/transaction/website/previewContractFile/id/'+id,
+    method: 'get',
+  })
+}

src/router/index.js

@@ -254,6 +254,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/user/signature/signatureDetail'], resolve)
   },
+  {
+    path: '/user/signature/signaturePdf',
+    name: 'userSignaturePdf',
+    meta: {
+      title: '合同预览',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/user/signature/signaturePdf'], resolve)
+  },
   {
     path: '/accountSetting',
     name: 'accountSetting',
@@ -3812,6 +3821,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/sunVillage_info/list_signature_add'], resolve)
   },
+  { ////阳光村务（新）-- 合同网签
+    path: '/sunVillage_info/list_signature_pdf',
+    name: 'sunVillageInfoListSignaturePdf',
+    meta: {
+      title: '合同预览',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/list_signature_pdf'], resolve)
+  },
   { ////阳光村务（新）-- 村级公章
     path: '/sunVillage_info/list_official',
     name: 'sunVillageInfoListOfficial',

src/views/sunVillage_info/list_signature.vue

@@ -36,22 +36,21 @@
           <template #right>
             <div class="operation">
               <!-- delete 删除 edit编辑 view查看 list榜单 -->
-
               <div class="opera_btn" v-if="item.signingMode == '线上' && item.firstIsSign =='否' " @click="openPopup(item.id)">
                 <img src="../../assets/images/sunVillage_info/signature_icon_02.png" alt="" width="35">
                 <p>签名</p>
               </div>
-              <div class="opera_btn" style="margin: 0 10px;" v-if="item.signingMode == '线上' && item.attachement !=  null ">
+              <div class="opera_btn" v-if="item.signingMode == '线上' && item.attachement !=  null " @click="$router.push({path:'/sunVillage_info/list_signature_pdf',query: {id:item.id,type:$route.query.type}})">
                 <img src="../../assets/images/sunVillage_info/signature_icon_03.png" alt="" width="35">
                 <p>预览</p>
               </div>
               <div class="opera_btn" v-if="item.signingMode == '线上' && item.isArchive == '是' ">
-                <a :href="'/api'+item.contractPdf" style="color: #333333">
+                <a :href="'/api/profile/download'+item.contractPdf" style="color: #333333">
                 <img src="../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">
                 <p>电子合同</p>
                 </a>
               </div>
-              <div class="opera_btn" v-if="item.signingMode == '线下' " @click="openPopupFile(item.attachement)">
+              <div class="opera_btn" v-if="item.signingMode == '线下' " @click="openPopupFile(item.id)">
                 <img src="../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">
                 <p>线下合同</p>
               </div>
@@ -85,14 +84,15 @@
     </van-popup>
 
     <!-- 附件弹出层 -->
-    <van-popup v-model="showFile" round closeable position="bottom" :style="{ height: '30%' }" >
-      <van-uploader v-model="fileList" multiple disabled :deletable="false" :show-upload="false" />
+    <van-popup v-model="showFile" round closeable position="bottom" :style="{ height: '40%' , padding: '5vh 2vh' }" >
+      <van-uploader v-if="fileList.length>0" v-model="fileList" multiple :deletable="false" :show-upload="false" />
+      <van-empty v-else description="暂无附件" />
     </van-popup>
   </div>
 </template>
 
 <script>
-  import { contractFirstList , signFirst } from "@/api/sunVillage_info/fixedAssets";
+  import { contractFirstList , signFirst , contractFileList , previewContractFile } from "@/api/sunVillage_info/fixedAssets";
   import vueEsign from "vue-esign";
   import signatureUploadSignature from "@/views/yinnong/signatureUploadSignature";
   import $ from "jquery";
@@ -125,7 +125,7 @@
           isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
         },
         signaId:'',
-        height:null
+        height:null,
       };
     },
     created() {
@@ -159,17 +159,17 @@
         this.show = true;
         this.signaId = id;
       },
-      openPopupFile(file){
+      openPopupFile(id){
+        this.fileList = [];
         this.showFile = true;
-        console.log(file)
-        if (!file) return;
-        let fileArray = file.split(',');
-        fileArray.map(res=>{
-          this.fileList.push({
-            url: '/api'+res,
-            isImage: true
+        contractFileList(id).then(response => {
+          response.data.map(res=>{
+            this.fileList.push({
+              url: '/api'+res.fileUrl,
+              isImage: true
+            })
           })
-        })
+        });
       },
       signaImgFun(url){
         this.signatureImg = url;
@@ -407,6 +407,8 @@
         margin-left: 10PX;
         .opera_btn{
           border-radius: 50%;
+          margin-left: 10PX;
+          &:first-child{margin: 0;}
           &.delete{
             background:#df0707;
             margin-left: 10PX;

src/views/sunVillage_info/list_signature_pdf.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="app-container">
+    <div
+      class="header_main"
+      :style="`background-image:url(${require(showBtn?'@/assets/images/sunVillage_info/list_head.png':'@/assets/images/sunVillage_info/list_head_red.png')})`"
+    >
+      合同预览
+      <div class="return_btn" @click="onClickLeft"></div>
+      <!--      <div class="add_btn" @click="goAdd" v-show="showBtn"></div>-->
+    </div>
+    <pdf v-for="item in numPages" :key="item" :src="url" :page="item" ref="pdf"></pdf>
+  </div>
+</template>
+
+<script>
+  import {  } from "@/api/lawEnforcement/index";
+  import pdf from 'vue-pdf'
+  import {previewContractFile} from "@/api/sunVillage_info/fixedAssets";
+  export default {
+    components:{
+      pdf
+    },
+    name: "programmeDetail",
+    data() {
+      return {
+        url:'',
+        numPages: null, // pdf 总页数
+        showBtn:true,
+      };
+    },
+    created() {
+      if (this.$route.query.type == 'code'){
+        this.showBtn = false;
+      }
+      const id = this.$route.query.id;
+      const baseURL = process.env.VUE_APP_BASE_API;
+      previewContractFile(id).then(response => {
+        this.url = baseURL + response.msg;
+        let loadingTask = pdf.createLoadingTask(this.url)
+        loadingTask.promise.then(pdf => {
+          this.numPages = pdf.numPages
+        })
+      });
+    },
+    methods: {
+      goBack(){
+        window.history.go(-1)
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+  }
+  /deep/ .van-collapse-item__content{
+    padding: 0;
+  }
+  .cf{
+    padding: 0 3%;
+    margin-top: 20PX;
+    margin-bottom: 20PX;
+    .van-row{
+      background: #F0F3F5;
+      display: flex;
+      align-items: center;
+      .van-col{
+        padding: 5PX 0;
+        font-size: 12PX!important;
+        text-align: center;
+        p{
+          color: #1D6FE9;
+          text-align: left;
+          font-size: .4rem;
+        }
+      }
+      &:first-child{
+        background: transparent;
+      }
+    }
+  }
+  .header_main{
+    height: 116px;
+    background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
+    background-size: 100% 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    font-size: 36px;
+    line-height: 116px;
+    text-align: center;
+    color: #fff;
+    position: relative;
+    .return_btn{
+      width: 24px;
+      height: 43.2px;
+      background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+      background-size: 20px 36px;
+      position: absolute;
+      left: 38px;
+      top: 36px;
+    }
+    .add_btn{
+      width: 56.4px;
+      height: 40.8px;
+      background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
+      background-size: 47px 34px;
+      position: absolute;
+      right: 38px;
+      top: 36px;
+    }
+  }
+  /deep/ .van-radio--horizontal{
+    margin-left: 0.32rem;
+    margin-right: 0;
+  }
+  .peopleList{
+    padding: 0 3%;
+    text-align: left;
+    .van-row{
+      border-bottom: 1px solid #dddddd;
+      display: flex;
+      align-items: center;
+      &:last-child{
+        border: none;
+      }
+      .van-col--17{
+        display: flex;
+        align-items: center;
+        p{
+          margin-left: 10PX;
+        }
+      }
+      .van-col--7{
+        display: flex;
+        justify-content: space-between;
+        p{
+          color: #1D6FE9;
+          border: 1px solid #1D6FE9;
+          text-align: center;
+          border-radius: 15PX;
+          display: inline-block;
+          padding: 5px 15px;
+        }
+      }
+      .van-col{
+        text-align: left;
+        font-size: 14PX;
+        color: #333333;
+        padding: 15PX 0;
+        img{
+          display: block;
+        }
+      }
+    }
+  }
+  .main_title{
+    font-size: 0.4rem;
+    color: #1D6FE9;
+    margin: 0.2rem 6%;
+    margin-top: 0;
+    position: relative;
+  }
+  .main_box{
+    width: 96%;
+    margin: 0 auto;
+    border-radius: 10PX;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+    overflow: hidden;
+    background-color: #FFF;
+    .van-icon{
+      vertical-align: middle;
+    }
+    .custom-title{
+      font-size: 17PX;
+      color: #333333;
+      vertical-align: middle;
+      line-height: 1;
+      position: relative;
+    }
+    .tap{
+      color: #1D6FE9;
+    }
+    .bgBlue{
+      display: block;
+      position: absolute;
+      width: 17PX;
+      height: 17PX;
+      border-radius: 50%;
+      background-color: rgba(29,111,233,0.26);
+      top: -2PX;
+      right: -8PX;
+    }
+  }
+  .submitButton{
+    width: 40%;
+    margin: 0 auto;
+    background-image: linear-gradient(to right, #77A6EF , #2E79E9);
+    text-align: center;
+    color: #ffffff;
+    height: 70px;
+    line-height: 70px;
+    border-radius: 8PX;
+    margin-top: 25PX;
+    &:first-child{
+      background-image: linear-gradient(to right, #21CAC3 , #17A8A2);
+    }
+  }
+  .submit_box{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .addFamily{
+    position: absolute;
+    top: -2px;
+    right: 0;
+    border-radius: 50%;
+  }
+
+</style>

src/views/user/signature/signatureList.vue

@@ -39,15 +39,17 @@
                 <img src="../../../assets/images/sunVillage_info/signature_icon_02.png" alt="" width="35">
                 <p>签名</p>
               </div>
-              <div class="opera_btn" style="margin: 0 10px;" v-if="item.signingMode == '线上' && item.attachement !=  null ">
+              <div class="opera_btn" style="margin: 0 10px;" v-if="item.signingMode == '线上' && item.attachement !=  null " @click="$router.push({path:'/user/signature/signaturePdf',query: {id:item.id}})">
                 <img src="../../../assets/images/sunVillage_info/signature_icon_03.png" alt="" width="35">
                 <p>预览</p>
               </div>
               <div class="opera_btn" v-if="item.signingMode == '线上' && item.isArchive == '是' ">
-                <img src="../../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">
-                <p>电子合同</p>
+                <a :href="'/api/profile/download'+item.contractPdf" style="color: #333333">
+                  <img src="../../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">
+                  <p>电子合同</p>
+                </a>
               </div>
-              <div class="opera_btn" v-if="item.signingMode == '线下' ">
+              <div class="opera_btn" v-if="item.signingMode == '线下' " @click="openPopupFile(item.id)">
                 <img src="../../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">
                 <p>线下合同</p>
               </div>
@@ -77,11 +79,17 @@
         </div>
       </van-cell-group>
     </van-popup>
+
+    <!-- 附件弹出层 -->
+    <van-popup v-model="showFile" round closeable position="bottom" :style="{ height: '40%' , padding: '5vh 2vh' }" >
+      <van-uploader v-if="fileList.length>0" v-model="fileList" multiple :deletable="false" :show-upload="false" />
+      <van-empty v-else description="暂无附件" />
+    </van-popup>
   </div>
 </template>
 
 <script>
-  import { contractSecondList , signSecond } from "@/api/sunVillage_info/fixedAssets";
+  import {contractFileList, contractSecondList, signSecond} from "@/api/sunVillage_info/fixedAssets";
   import vueEsign from "vue-esign";
   import signatureUploadSignature from "@/views/yinnong/signatureUploadSignature";
   import $ from 'jquery'
@@ -94,6 +102,7 @@
         loading: false,
         finished: false,
         show: false,
+        showFile: false,
         fileList:[],
         listLength:'0',
         queryParams:{
@@ -147,6 +156,18 @@
         this.show = true;
         this.signaId = id;
       },
+      openPopupFile(id){
+        this.fileList = [];
+        this.showFile = true;
+        contractFileList(id).then(response => {
+          response.data.map(res=>{
+            this.fileList.push({
+              url: '/api'+res.fileUrl,
+              isImage: true
+            })
+          })
+        });
+      },
       signaImgFun(url){
         this.signatureImg = url;
         // console.log(url)

src/views/user/signature/signaturePdf.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      title="合同预览"
+      left-arrow
+      fixed
+      placeholder
+      @click-left="onClickLeft"
+    />
+    <pdf v-for="item in numPages" :key="item" :src="url" :page="item" ref="pdf"></pdf>
+  </div>
+</template>
+
+<script>
+  import { createAssistPDF,createSurveyPDF,createPutrecordPDF,createOnrecordPDF,createSamplingPDF,createTreatPDF,createDecisionPDF,createEvidencePDF,createExecutePDF,createEndingPDF,createBreakPDF,createResumePDF } from "@/api/lawEnforcement/index";
+  import pdf from 'vue-pdf'
+  import {previewContractFile} from "@/api/sunVillage_info/fixedAssets";
+  export default {
+    components:{
+      pdf
+    },
+    name: "programmeDetail",
+    data() {
+      return {
+        url:'',
+        numPages: null, // pdf 总页数
+      };
+    },
+    created() {
+      const id = this.$route.query.id;
+      const baseURL = process.env.VUE_APP_BASE_API;
+      previewContractFile(id).then(response => {
+        this.url = baseURL + response.msg;
+        let loadingTask = pdf.createLoadingTask(this.url)
+        loadingTask.promise.then(pdf => {
+          this.numPages = pdf.numPages
+        })
+      });
+    },
+    methods: {
+      goBack(){
+        window.history.go(-1)
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+  }
+  /deep/ .van-collapse-item__content{
+    padding: 0;
+  }
+  .cf{
+    padding: 0 3%;
+    margin-top: 20PX;
+    margin-bottom: 20PX;
+    .van-row{
+      background: #F0F3F5;
+      display: flex;
+      align-items: center;
+      .van-col{
+        padding: 5PX 0;
+        font-size: 12PX!important;
+        text-align: center;
+        p{
+          color: #1D6FE9;
+          text-align: left;
+          font-size: .4rem;
+        }
+      }
+      &:first-child{
+        background: transparent;
+      }
+    }
+  }
+  .header_main{
+    height: 116px;
+    background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat;
+    background-size: 100% 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    font-size: 36px;
+    line-height: 116px;
+    text-align: center;
+    color: #fff;
+    position: relative;
+    .return_btn{
+      width: 24px;
+      height: 43.2px;
+      background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+      background-size: 20px 36px;
+      position: absolute;
+      left: 38px;
+      top: 36px;
+    }
+    .add_btn{
+      width: 56.4px;
+      height: 40.8px;
+      background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
+      background-size: 47px 34px;
+      position: absolute;
+      right: 38px;
+      top: 36px;
+    }
+  }
+  /deep/ .van-radio--horizontal{
+    margin-left: 0.32rem;
+    margin-right: 0;
+  }
+  .peopleList{
+    padding: 0 3%;
+    text-align: left;
+    .van-row{
+      border-bottom: 1px solid #dddddd;
+      display: flex;
+      align-items: center;
+      &:last-child{
+        border: none;
+      }
+      .van-col--17{
+        display: flex;
+        align-items: center;
+        p{
+          margin-left: 10PX;
+        }
+      }
+      .van-col--7{
+        display: flex;
+        justify-content: space-between;
+        p{
+          color: #1D6FE9;
+          border: 1px solid #1D6FE9;
+          text-align: center;
+          border-radius: 15PX;
+          display: inline-block;
+          padding: 5px 15px;
+        }
+      }
+      .van-col{
+        text-align: left;
+        font-size: 14PX;
+        color: #333333;
+        padding: 15PX 0;
+        img{
+          display: block;
+        }
+      }
+    }
+  }
+  .main_title{
+    font-size: 0.4rem;
+    color: #1D6FE9;
+    margin: 0.2rem 6%;
+    margin-top: 0;
+    position: relative;
+  }
+  .main_box{
+    width: 96%;
+    margin: 0 auto;
+    border-radius: 10PX;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+    overflow: hidden;
+    background-color: #FFF;
+    .van-icon{
+      vertical-align: middle;
+    }
+    .custom-title{
+      font-size: 17PX;
+      color: #333333;
+      vertical-align: middle;
+      line-height: 1;
+      position: relative;
+    }
+    .tap{
+      color: #1D6FE9;
+    }
+    .bgBlue{
+      display: block;
+      position: absolute;
+      width: 17PX;
+      height: 17PX;
+      border-radius: 50%;
+      background-color: rgba(29,111,233,0.26);
+      top: -2PX;
+      right: -8PX;
+    }
+  }
+  .submitButton{
+    width: 40%;
+    margin: 0 auto;
+    background-image: linear-gradient(to right, #77A6EF , #2E79E9);
+    text-align: center;
+    color: #ffffff;
+    height: 70px;
+    line-height: 70px;
+    border-radius: 8PX;
+    margin-top: 25PX;
+    &:first-child{
+      background-image: linear-gradient(to right, #21CAC3 , #17A8A2);
+    }
+  }
+  .submit_box{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  .addFamily{
+    position: absolute;
+    top: -2px;
+    right: 0;
+    border-radius: 50%;
+  }
+
+</style>