nsgk_mobile/src/views/sunVillage_info/list_cbht.vue

<template>
  <div class="home_wrapper">
    <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>

    <div class="list_main">
      <van-search
        v-model="searchKeyword"
        shape="round"
        background="transparent"
        placeholder="请输入承包方姓名搜索"
        @search="onSearch"
        @clear="onSearch"
      >
      </van-search>

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList"
      >
        <van-swipe-cell v-for="item in applicationList" :key="item.id">
          <div class="item" @click="goDetail(item.id)">
            <div class="info">
              <div class="title">
                <i class="icon_box" v-if="item.signingStatus =='合同筹备' || item.signingStatus =='合同待签' ||item.signingStatus =='单方已签'"></i>
                <i class="icon_box1" v-if="item.signingStatus =='签字完成' || item.signingStatus =='合同归档'"></i>
                <p class="news_title" >{{item.cbhtbm}}</p>
                <p class="tips_mark2" v-if="item.signingMode === '线上'" :style="{'background': formatDict(item)}">{{item.signingStatus}}</p>
                <p class="tips_mark"
                   :style="{'background': item.signingMode === '线上'?'#F9BE0C':'#08BE4E'}">
                  {{item.signingMode}}</p>
              </div>
              <div class="time">
                <p >{{item.cbfmc}}</p>
<!--                <p>{{item.cbhtmc}}</p>-->
                <p>{{item.htzmjm.toFixed(2)}} 亩</p>
              </div>
            </div>
          </div>
          <template #right>
            <div class="operation">
              <!-- <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" 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.fbfqszt !='2' && item.signingStatus !=='合同筹备'"  @click="contractSign(item)">
                <img src="../../assets/images/sunVillage_info/signature_icon_02.png" alt="" width="35">
                <p>合同网签</p>
              </div>
              <div class="opera_btn" v-if="item.signingMode == '线上' && item.fbfqszt ==='2'" @click="contractView(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.signingStatus === '签字完成'"
                   @click="handleArchive(item.id)">
                <img src="../../assets/images/sunVillage_info/archive.png" alt="" width="35">
                <p>归档</p>
              </div>
              <div class="opera_btn" v-if="item.signingMode === '线上' && item.signingStatus === '合同归档'"
                   @click="handleDownload(item.id)">
                <img src="../../assets/images/sunVillage_info/download.png" alt="" width="35">
                <p>下载合同</p>
              </div>
              <div class="opera_btn" @click="openPopupFile(item.id)">
                <img src="../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">
                <p>附件</p>
              </div>
            </div>
          </template>
        </van-swipe-cell>
      </van-list>
    </div>
    <van-dialog v-model="htqsShow" title="合同签署" confirmButtonText="关闭" @confirm="confirmn">
      <iframe width="100%" height="600px;" :src="noticeUrl"></iframe>
            </van-dialog>
            <!-- 签字弹出层 -->
    <van-popup v-model="show" closeable position="right" :style="{ height: '100%' }">
      <van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;">
        <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">
          <vue-esign
            ref="esign"
            class="mySign"
            :width="500"
            :height="height"
            :isCrop="signature.isCrop"
            :lineWidth="signature.lineWidth"
            :lineColor="signature.lineColor"
            :bgColor.sync="signature.bgColor"
          />
        </div>
        <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT"
             style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
        <div class="signature-footer">
          <van-button @click="handleGenerate" type="info" size="small">保存签字</van-button>
          <van-button @click="handleReset" class="clearBtn" type="info" plain size="small">清空画板</van-button>
        </div>
      </van-cell-group>
    </van-popup>

    <!-- 附件弹出层 -->
    <van-popup v-model="showFile" round closeable position="bottom" :style="{ height: '30%' }" >
      <div style="padding: 0 3%;">
        <van-divider>附件</van-divider>
        <van-uploader v-model="fileList" accept="" :after-read="afterRead" @delete="deleteFile" />  <!-- accept=".jpg, .gif, .png, .jpeg, .txt, .pdf, .doc, .docx, .xls, .xlsx" -->
      </div>
    </van-popup>
  </div>
</template>

<script>
  import { listCbht,eqbFbfhtwq, signProcessArchive, signedContractDownload,viewSignedContract, cbhtFirstSign, attachmentList, commonAttach, systemAttachment } from "@/api/sunVillage_info/fixedAssets";
  import vueEsign from "vue-esign";
  import $ from "jquery";

  export default {
    name: "sunVillageInfoListCbht",
    components: { vueEsign },
    data() {
      return {
        applicationList: [],
        loading: false,
        finished: false,
        show: false,
        showFile: false,
        htqsShow:false,
        noticeUrl:"",
        fileList: [],
        signingStatusData:[],
        listLength: '0',
        queryParams: {
          pageNum: 1,
          pageSize: 15,
          cbfmc: null,
          translate_dict: 1,
          // 查询排序
          orderByColumn: "id",
          isAsc: "desc",
        },
        showBtn: true,

        signatureImg: '',
        //电子签名
        signature: {
          lineWidth: 6, // 画笔的线条粗细
          lineColor: "#000000", // 画笔的颜色
          bgColor: "", // 画布的背景颜色
          resultImg: "", // 最终画布生成的base64图片
          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
        },
        signaId: '',
        height: null,
        // 查询关键字
        searchKeyword: null,
      };
    },
    created() {
      if (this.$route.query.type == 'code') {
        this.showBtn = false;
      }
      this.houseGetDicts("signing_status").then((res) => {
        this.signingStatusData = res.data;
      });
      this.height = window.screen.height * 1.28 - 20;
    },
    methods: {
      canvasTTdown() {
        $('#canvasTT').css('display', 'none');
      },
      getList() {
        this.loading = true;
        let wcStatus  = this.$route.query.wcStatus;
        if(wcStatus === 'true'){
          this.$set(this.queryParams, 'signingStatus',"3");
        }else{
          this.$set(this.queryParams, 'signingStatus',null);
        }
        listCbht(this.queryParams).then(response => {
          response.rows.forEach(item => {
            this.applicationList.push(item);
          });
          if (this.applicationList.length >= response.total) {
            this.finished = true;
            return;
          } else {
            this.loading = false;
            this.queryParams.pageNum += 1;
          }

        });
      },
      formatDict(item){
        let colorval = "";
       this.signingStatusData.map(function (e){
          if(item.signingStatus === e.dictLabel){
            colorval =  e.remark;
          }
        })
        return colorval;
      },
      goDetail(id) {
        this.$router.push({
          path: '/sunVillage_info/list_cbht_detail',
          query: { id: id }
        })
      },
      openPopup(id, url) {
        this.show = true;
        this.signaId = id;
      },
      openPopupFile(id){
        this.fileList = [];
        this.signaId = id;
        this.showFile = true;
        let queryParams = {
          tableId: id,
          tableName: 't_sys_cbht',
        };
        attachmentList(queryParams).then(response => {
          response.rows.map(res => {
            // let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL
            this.fileList.push({
              url: '/api'+res.fileUrl,
              file: new File([], res.fileName,{}),
              id: res.id
            });
          })
        });
      },
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        let params = new FormData();
        params.append("tableId", this.signaId);
        params.append("tableName", "t_sys_cbht");
        params.append("bizPath", "service");
        params.append("fileType", '0');
        params.append("file", file.file);
        commonAttach(params).then(response => {
          this.$notify({ type: 'success', message: '上传成功' });
          let newFile = this.fileList[this.fileList.length - 1];
          this.$set(newFile, 'id', response.id);
        });
      },
      deleteFile(file){
        systemAttachment(file.id).then(res => {
          this.$notify({ type: 'success', message: '删除成功' });
        });
      },
      signaImgFun(url) {
        this.signatureImg = url;
      },
      confirmn(){
        this.applicationList = [];
        this.getList();
      },
      // 清空画板
      handleReset() {
        this.$refs.esign.reset();
        $('#canvasTT').css('display', 'block')
      },
      contractSign(val){
        eqbFbfhtwq(val).then(response => {
          this.noticeUrl =  response.data;
          this.htqsShow = true;
        });
      },

      // 生成签字图
      handleGenerate() {
        this.$refs.esign
          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
          .then((res) => {
            this.signature.resultImg = res;
            let wj = this.dataURLtoBlob(res);
            let param = new FormData();  // 创建form对象
            param.append('file', wj);  // 通过append向form对象添加数据
            param.append('date', this.format(new Date(), 'yyyy-MM-dd'));  // 通过append向form对象添加数据

            cbhtFirstSign(param, this.signaId).then(response => {
              this.$notify({type: 'success', message: '签字成功'});
              this.show = false;
              location.reload();
            });

          })
          .catch((err) => {
            // 画布没有签字时会执行这里提示一下
            this.$toast.fail('请签名后再保存签字');
          });
      },
      dataURLtoBlob(dataurl, filename = 'file') {
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let suffix = mime.split('/')[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
          type: mime
        })
      },
      contractView(id) {
        viewSignedContract(id).then(response => {
          if (response.code === 200) {
            this.noticeUrl = response.data;
            this.htqsShow = true;
          }
        });
      },
      // 签字流程归档
      handleArchive(id) {
        this.$dialog.confirm({
          message: '是否确认归档？',
        }).then(() => {
          // on confirm
          signProcessArchive(id).then(res => {
            if (res.code === 200) {
              this.$toast({
                icon: 'success',
                message: '归档完成',
                duration: "1000",
                onClose: () => {
                  this.queryParams.pageNum = 1;
                  this.finished = false;
                  this.applicationList = [];
                  this.getList();
                }
              });
            }
          });
        }).catch(() => {
          // on cancel
        });
      },
      // 签署合同下载
      handleDownload(id) {
        this.$dialog.confirm({
          message: '是否下载承包合同？',
        }).then(() => {
          // on confirm
          signedContractDownload(id).then(res => {
            if (res.code === 200) {
              window.location.href = res.data;
            }
          });
        }).catch(() => {
          // on cancel
        });
      },
      onSearch(){
        this.queryParams.cbfmc = this.searchKeyword;
        this.queryParams.pageNum = 1;
        this.finished = false;
        this.applicationList = [];
        this.getList();
      }
    },
  }
</script>

<style scoped lang="scss">
  .home_wrapper {
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;

    .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;
      }
    }
  .search_btn{
    background: rgba(255,255,255,.5);
    width: 25%;
    border-radius: 50PX;
    margin-left: 10PX;
    margin-bottom: 5px;
    padding: 2PX;
  .active{
    background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
    color: #ffffff;
    border-radius: 50PX;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  }
    .record_main {
      padding: 30px 22px;

      .record_det {
        height: 38px;
        line-height: 38px;
        display: flex;
        justify-content: space-between;

        .year_l {
          font-size: 30px;
          display: flex;
          align-items: center;
          color: #858585;

          .unit {
            padding-left: 5px;
          }

          .icon {
            width: 23px;
            height: 12px;
            display: block;
            background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat;
            background-size: 100% 100%;
            margin-bottom: 4px;
            margin-right: 8px;

            &.zk {
              transform: rotate(0deg)
            }

            &.ss {
              transform: rotate(180deg)
            }

          }
        }

        .total_r {
          font-size: 26px;
          letter-spacing: 2px;
        }
      }

      .record_list {
        display: flex;
        flex-flow: wrap;
        margin-top: 12PX;

        .flex_block {
          font-size: 30px;
          color: #878787;
          padding-right: 30px;

          &.current {
            color: #4199fe;
            font-weight: bold;
          }
        }
      }
    }

    .list_main {
      padding: 0 22px;
      margin-top: 15PX;

      .item {
        border-radius: 30px;
        background: #fff;
        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
        padding: 25px 32px;
        margin-bottom: 20px;

        .info {
          .title {
            display: flex;
            font-size: 32px;
            align-items: center;
            height: 58px;

            .icon_box {
              width: 34px;
              display: block;
              height: 30px;
              background: url('../../assets/images/sunVillage_info/signature_icon_01.png') no-repeat;
              background-size: 100% 100%;
              margin-right: 10px;
              flex-shrink: 0;
            }

            .icon_box1 {
              width: 34px;
              display: block;
              height: 30px;
              background: url('../../assets/images/sunVillage_info/signature_icon_01g.png') no-repeat;
              background-size: 100% 100%;
              margin-right: 10px;
              flex-shrink: 0;
            }

            .news_title {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              word-break: break-all;
              overflow: hidden;
            }

            .tips_mark {
              background: #ffedcd;
              border-radius: 8px;
              font-size: 24px;
              color: #ffffff;
              text-align: center;
              line-height: 34px;
              flex-shrink: 0;
              padding: 0 5Px;
              margin-left: auto;
            }

            .tips_mark2 {
              background: #eb1616;
              border-radius: 8px;
              font-size: 24px;
              color: #ffffff;
              text-align: center;
              line-height: 34px;
              flex-shrink: 0;
              padding: 0 5Px;
              margin-left: 10PX;
            }
          }

          .time {
            font-size: 16PX;
            color: #333333;
            display: flex;
            align-items: center;
            margin-top: 5PX;
            justify-content: space-between;

            .icon_time {
              width: 25px;
              height: 25px;
              background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;
              background-size: 100% 100%;
              margin-right: 10px;
            }
          }
        }
      }

      .operation {
        display: flex;
        align-items: center;
        justify-content: right;
        text-align: center;
        border-radius: 30px;
        background: #fff;
        box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
        height: 100%;
        padding: 0 15Px;
        margin-left: 10PX;

        .opera_btn {
          border-radius: 50%;
          padding: 0 10px;
          &.delete {
            background: #df0707;
            margin-left: 10PX;

            .icon {
              width: 22PX;
              height: 29PX;
              background: url('../../assets/images/sunVillage_info/signature_icon_03.png') no-repeat;
              background-size: 100% 100%;
              display: block;
            }
          }

          &.edit {
            background: #79cf13;
            margin-left: 10PX;

            .icon {
              width: 26PX;
              height: 25PX;
              background: url('../../assets/images/sunVillage_info/signature_icon_02.png') no-repeat;
              background-size: 100% 100%;
              display: block;
            }
          }

          &.view {
            background: #3494ff;
            margin-left: 10PX;

            .icon {
              width: 29PX;
              height: 21PX;
              background: url('../../assets/images/sunVillage_info/signature_icon_04.png') no-repeat;
              background-size: 100% 100%;
              display: block;
            }
          }

          &.list {
            background: #79cf13;
            margin-left: 10PX;

            .icon {
              width: 29px;
              height: 21px;
              background: url('../../assets/images/sunVillage_info/list_icon_10.png') no-repeat;
              background-size: 100% 100%;
              display: block;
            }
          }
        }
      }
    }

    .bottom_tips {
      font-size: 24px;
      color: #a7a6a6;
      text-align: center;
      margin-top: 32px;
      background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;
      background-size: 260px 2px;

      .xs {
        padding: 0 8px;
        background: #e9e9e9;
      }
    }

    .signature-box {
      border: 1px dashed #666;
      margin: 2px 20px;
      height: 100%;
      /*canvas{*/
      /*  height: 100%!important;*/
      /*}*/
    }

    .signature-footer {
      transform: rotate(90deg);
      width: auto;
      position: absolute;
      top: 50%;
      left: 0PX;

      .clearBtn {
        margin-left: 15px;
      }
    }

    .esigh-result {
      margin: 15px 20px;
      // height: 110px;
      border: 1px solid #666;
      font-size: 0;

      .imgs {
        width: 100%;
      }
    }
  }
</style>