nsgk_mobile/src/views/homesteadSurvey/add4.vue

<template>
  <div class="app-container">
    <van-sticky style="position:relative;">
      <div class="bannerBg">
        <van-nav-bar
          style="background:transparent;border-bottom-width:0;margin-bottom:.5rem;"
          @click-left="goBack()"
          right-text ="首页"
          @click-right="goRightBack()"
        >
          <template #left>
            <van-icon name="arrow-left" size="18" color="#fff" />
          </template>
          <!-- <template #right>
          <van-icon name="map-marked" size="18" color="#fff" />
        </template>-->
          <template #title>
            <p style="color:#fff">入户调查</p>
          </template>
        </van-nav-bar>
      </div>
      <div style="width:95%;left:2.5%;position:absolute;background:#fff;border-radius:15px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);padding: .3rem;top:1.2rem">
        <van-row>
          <van-col span="4" :offset="1" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add'})">
            <van-icon :name="require('../../assets/images/housesteadSurvey/zjd'+(active==1?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p :style="{color:(active==1?'rgb(34, 183, 242)':'#000')}">宅基地</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4"  style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add2'})" >
            <van-icon :name="require('../../assets/images/housesteadSurvey/nhxx'+(active==2?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p :style="{color:(active==2?'rgb(34, 183, 242)':'#000')}">使用权人</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add3'})" >
            <van-icon :name="require('../../assets/images/housesteadSurvey/fwxx'+(active==3?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p  :style="{color:(active==3?'rgb(34, 183, 242)':'#000')}">房屋</p>
          </van-col>
          <van-col span="2">
            <div style="border-top: 2px dashed #b5b4b4;margin-top: 20px;"></div>
          </van-col>
          <van-col span="4" style="text-align:center;" @click="$router.push({path:'/homesteadSurvey/add4'})">
            <van-icon :name="require('../../assets/images/housesteadSurvey/fsss'+(active==4?'A':'D')+'.png')" size="1rem" style="margin-top:0px;"/>
            <p :style="{color:(active==4?'rgb(34, 183, 242)':'#000')}">附属物</p>
          </van-col>
        </van-row>
      </div>
    </van-sticky>
    <div style="margin:1.6rem auto 0;width: 95%;">
      <p class="title" style="position:relative;padding-left:10px;line-height:20px;font-size: 16px;margin-bottom: 5px;">附属设施</p>
    </div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="onRefreshFsss"
    >
    <van-swipe-cell v-for="(item,index) in fssslist" :key="'fsss'+index" style="border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16); width:95%;margin:15px auto 0;background:#fff;">
      <div style="padding:15px;">
        <p style="display: flex;align-items: center;">
          <img src="../../assets/images/housesteadSurvey/add03.png" alt="" style="margin-right: 5px;">
          <span style="line-height: 1;font-size: 16px;">{{ formatDict(fssslxList, item.fssslx) }}</span>
        </p>
        <div style="display:flex;line-height:20px;margin-top: 15px;font-size: 14px;color: #999999;">
          <p style="flex:1;text-align:left;">建筑面积(㎡):</p>
          <p  style="flex:1;text-align:right;">{{item.jzmj}}</p>
        </div>
        <div style="display:flex;line-height:20px;margin-top: 5px;font-size: 14px;color: #999999;">
          <p style="flex:1;text-align:left;">建筑物情况:</p>
          <p style="flex:1;text-align:right;">{{ formatDict(jzwqkList, item.jzwqk) }} </p>
        </div>
        <div style="text-align:center;overflow:auto;display: flex;justify-content: center;margin-top: 10px;">
          <p style="width:49%;display: flex;align-items: center;justify-content:center;border: 1px solid transparent;background: #22B7F2;padding: 3px 0;border-radius: 50px;"  @click="showUploadList(item.id)">
            <van-icon  name="photo-o" size=".4rem" color="#FFFFFF"/>
            <span style="font-size: 14px;color: #fff;margin-left: 5px;">附件</span>
          </p>
          <p style="width:49%;display: flex;align-items: center;justify-content:center;border: 1px solid transparent;background: #22B7F2;padding: 3px 0;border-radius: 50px;" @click="showPopupzrz(item)">
            <img src="../../assets/images/housesteadSurvey/add01.png" alt="">
            <span style="font-size: 14px;color: #fff;margin-left: 5px;" >查看附属设施信息</span>
          </p>
        </div>
      </div>
      <template #right>
        <van-button v-show="permission == 'true'" square text="删除" type="danger" class="delete-button" @click="deletefsss(item)"/>
      </template>
    </van-swipe-cell>
    </van-list>
    <div v-if="permission == 'true' " style=" width:95%;margin:20px auto;display: flex;justify-content: center;">
      <div style="width:100%;text-align:center;overflow:auto;border-radius: 16px;box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.16);padding: 15px 0px;background: #ffffff;color: #22B7F2;">
        <p style="font-size: 16px;"  @click="showPopupAddzrz()">+ 添加附属设施信息</p>
      </div>
    </div>
    <div  style="width:95%;margin:20px auto;text-align:center;overflow:auto;display: flex;justify-content: space-around;">
      <p v-if="permission == 'true'" style="width:32%;border: 1px solid transparent;background: #FA5353;padding: 5px 0;border-radius: 50px;">
        <span style="font-size: 14px;color: #fff;margin-left: 5px;"  @click="ycbj()">异常标记</span>
      </p>
      <p v-if="permission == 'true'" style="width:32%;border: 1px solid transparent;background: #22B7F2;padding: 5px 0;border-radius: 50px;">
        <span style="font-size: 14px;color: #fff;margin-left: 5px;"  @click="qmqr()">签名确认</span>
      </p>
      <p v-if = "showDcsh" style="width:32%;border: 1px solid #22B7F2;background: #ffffff;padding: 5px 0;border-radius: 50px;">
        <span style="font-size: 14px;color: #22B7F2;margin-left: 5px;"  @click="dcsh()">调查审核</span>
      </p>
    </div>
    <van-popup v-model="dcshShow" position="bottom">
      <van-picker
        show-toolbar
        :columns="examineData"
        value-key="dictLabel"
        @confirm="onSurveyStatusChanged"
        @cancel="dcshShow = false"
      />
    </van-popup>
    <van-popup v-model="showesign" closeable position="right" :style="{ height: '100%' }"
               close-icon="close">
      <van-row style="margin:0 10%">
        <p class="title" style="margin:20px 0;position:relative;padding-left:20px;font-size:0.5rem">电子签名</p>
      </van-row>
      <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"
          v-if="!signature.resultImg"
        />
      </div>
        <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT"  v-if="!signature.resultImg"
             style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
        <img :src="signature.resultImg" alt="" width="100%" v-if="signature.resultImg"/>
      <div class="signature-footer"  v-if="!signature.resultImg">
          <van-button type="primary" round size="small" @click="handleReset">清空画板</van-button>
          <van-button type="primary" round size="small" @click="handleGenerate">保存提交</van-button>
        </van-row>
      </div>
    </van-popup>
    <van-dialog v-model="ycbzShow" title="异常标记" show-cancel-button   confirmButtonText="保存" cancelButtonText="关闭" @confirm="confirmn" >
      <van-row>
        <van-col span="24">
          <van-field v-model="zjdzdxx.surveyBz" label="异常备注" placeholder="异常备注" input-align="right" />
        </van-col>
        <van-col span="12">
        <p style="margin-left: 10%;color: #646566;    font-size: 0.373333rem;">备注图片</p>
        </van-col>
        <van-col span="12">
          <MultiImageUploadComp :value="zjdzdxx.surveyBztp" :uploadDisabled="false"  @fileUpdate="fileUpdate"/>
        </van-col>
      </van-row>


    </van-dialog>
    <van-popup v-model:show="showImageList" position="bottom" style="height:40vh;padding:50px 10px 0" closeable
               close-icon="close">
      <p style="color:#000;position:absolute;top:0.426667rem;left:0.426667rem">图片上传</p>
      <div style="width:100%;height:calc( 40vh - 100px);overflow-y: scroll;">

        <van-uploader accept="image/*" v-model="uploadImgList" :after-read="beforeReadImageList" @delete="deleteFileImageList" multiple :max-count="50"  />
      </div>
      <van-row justify="space-around" style=" position:fixed;bottom:0;left:0;width:100%;height:50px;text-align: center;">
        <van-col span="12"><van-button type="primary" style="width:100px;" round  @click="qkClick">清空</van-button></van-col>
        <van-col span="12"><van-button type="primary" style="width:100px;" round  @click="submitUploadList(zjdId)">上传</van-button></van-col>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
import {attach} from "@/api/onlineHome/homestead/application";
import {getZjdzd,updateZjdzd,zjddcSign} from "@/api/homesteadSurvey/zjdzd";
import MapGisDrawing from "@/components/Map/MapGisDrawing";
import {listFsss,addFsss,updateFsss,delFsss,getFsssZjdDmList,updateFsssStatus} from "@/api/homesteadSurvey/fsss";
import MultiImageUploadComp from "@/components/house/MultiImageUploadComp"
import {uploadFile} from "@/api/homesteadSurvey/zjdzd";
import {attachmentFind} from "@/api/sunVillage_info/homestead/application";
import {systemAttachment} from "@/api/onlineHome/bankAgriculture/paymentApproval";
import {base64Attach} from "@/api/user";
import {Dialog} from "vant";
import $ from "jquery";
export default {
  name: "homesteadAdd",
  components: { MapGisDrawing,MultiImageUploadComp},
  data() {
    return {
      active:4,
      dcshShow:false,
      showesign:false,
      showDcsh:false,
      loading:false,
      finished:false,
      countyhc:1,
      ycbzShow:false,
      permission:false,
      showImageList:false,
      zjdId:null,
      uploadImgList:[],
      uploadImgList1:[],
      bztp:"",
      ycbz:"",
      jzwqkList:[],
      fssslxList:[],
      examineData:[{dictLabel:"审批通过",dictValue:"5"},{dictLabel:"审批驳回",dictValue:"4"}],
      zjdzdxx:{surveyStatus:"5"},
      fssslist:[],
      //电子签名
      signature: {
        lineWidth: 6, // 画笔的线条粗细
        lineColor: "#000000", // 画笔的颜色
        bgColor: "", // 画布的背景颜色
        resultImg: "", // 最终画布生成的base64图片
        isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
      },
    };
  },
  created(){
    this.houseGetDicts("jzwqk").then((response) => {
      this.jzwqkList = response.data;
    });
    this.houseGetDicts("fsss_type").then((response) => {
      this.fssslxList = response.data;
    });
    this.zjdzdxx = JSON.parse(localStorage.getItem("zjdzdxxItem"));
    this.permission = localStorage.getItem("executePermission");
    let businessLevel = this.$store.state.user.businessLevel;
    console.info(this.zjdzdxx);
    if(this.zjdzdxx.surveySign != null){
      this.signature.resultImg = this.$store.getters.baseRoutingUrl+this.zjdzdxx.surveySign;
    }
    if(this.zjdzdxx.id !== undefined){
      getZjdzd(this.zjdzdxx.id).then((response) => {
        if(response.data.surveyStatus === "3"  && businessLevel === "2"){
          this.showDcsh =  true;
        }
      });
      this.getList();
    }
    this.height = window.screen.height * 1.28 - 20;
  },
  mounted(){

  },
  methods: {
    getList(){
      let params = {
        zjddm:this.zjdzdxx.zjddm,
        pageNum: this.countyhc+1,
        pageSize:10,
      }
      listFsss(params).then(response => {
        this.fssslist = response.rows;
        if(response.rows.length>0&&response.rows.length<response.total){
          this.countyhc++
          this.loading = false
        }else{
          this.loading = false
          this.finished = true
        }
      });
    },
    fileUpdate(val){
      this.$set(this.zjdzdxx, 'surveyBztp',val.path);
    },
    canvasTTdown() {
      $('#canvasTT').css('display', 'none');
    },
    onSurveyStatusChanged(val){
      this.$set(this.zjdzdxx, 'surveyStatus', val.dictValue);
      if(val.dictValue === "5"){
        let surveyItem = JSON.parse(localStorage.getItem("surveyItem"));
        this.$set(this.zjdzdxx, 'surveyId', surveyItem.id);
      }
      updateZjdzd(this.zjdzdxx).then(response => {
        let _this =this
        _this.$toast({
          icon: 'success', // 找到自己需要的图标
          message: '保存成功',
          duration:"1000",
          onClose:function(){
            _this.dcshShow = false;
            _this.goRightBack();
          }
        })
      });
    },
    onRefreshFsss(){
      if(this.loading){
        let params = {
          zjddm:this.zjdzdxx.zjddm,
          pageNum: this.countyhc+1,
          pageSize:10,
        }
        listFsss(params).then(response => {
          if(response.rows.length>0&&response.rows.length<response.total){
            response.rows.map(res => {
              this.fssslist.push(res)
            })
            this.countyhc++
            this.loading = false
          }else{
            this.loading = false
            this.finished = true
          }
        });
      }
    },
    goRightBack(){
      this.$router.push({path:'/homesteadSurvey/list'});
    },
    // 清空画板
    handleReset() {
      this.resultImg = null
      if(this.$refs.esign){
        this.$refs.esign.reset();
      }
      $('#canvasTT').css('display', 'block')
    },
    // 生成签字图
    handleGenerate() {
      console.info( this.$refs.esign
        .generate() );
      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对象添加数据
          zjddcSign(param, this.zjdzdxx.zjddm).then(response => {
            this.$notify({type: 'success', message: '签字成功'});
            this.showesign = false;
            getZjdzd(this.zjdzdxx.id).then((response) => {
              localStorage.setItem("zjdzdxxItem",JSON.stringify(response.data))
              location.reload();
            });


          });

        })
        .catch((err) => {
          // 画布没有签字时会执行这里提示一下
          this.$toast.fail('请签名后再保存签字');
        });
    },
    formatDict(dict, value) {
      return this.selectDictLabel(dict, value);
    },
    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
      })
    },
    goBack(){
      if(this.ztMap && this.enterMap ==1){
        if(this.form.id == null){
          this.backMap.backMapZjdAData.theGeom= "";
        }else{
          this.backMap.backMapZjdAData = this.form;
        }
        this.$cookies.set("search",this.backMap);
      } else {
        this.$cookies.set("search","");
      }
      this.$router.push({name: this.$router.back(-1)});
      // }
    },
    showPopupzrz(item){     this.$router.push({name:'fsssAdd',query:item});},
    showPopupAddzrz(){
      this.$router.push({name:'fsssAdd',query:{zjddm:this.zjdzdxx.zjddm}});
    },
    deletefsss(val){
      const ids = val.id || this.ids;
      Dialog.confirm({
        title: '系统提示',
        message: '是否确认删除附属物标识为"' + val.id + '"的数据项?',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(function() {
          return delFsss(ids);
        }).then(() => {
        this.$notify({ type: 'success' , message: "删除成功" });
        location.reload(true);
      }).catch(() => {});
    },
    qmqr(){
      this.showesign = true;
    },
    ycbj(){
      this.ycbzShow = true;
    },
    confirmn(){
      this.$set(this.zjdzdxx, 'surveyStatus', "2");
      updateZjdzd(this.zjdzdxx).then(response => {
        localStorage.setItem("zjdzdxxItem",JSON.stringify(this.zjdzdxx));
        let _this =this
        this.$toast({
          icon: 'success', // 找到自己需要的图标
          message: '保存成功',
          duration:"1000",
          onClose:function(){
            _this.getList();
            _this.$router.push({path:'/homesteadSurvey/add4',query: {zjddm: _this.zjdzdxx.zjddm}});
          }
        })
      });
    },
    dcsh(){
      this.dcshShow = true;
    },
    showUploadList(id){
      this.getAttachments(id);
      this.showImageList = true;
      this.zjdId = id;
    },
    getAttachments(id) {
      this.uploadImgList = [];
      let cond = {
        tableId: id,
        tableName: 't_homestead_fsss',
        fileType: 0,
      };
      attachmentFind(cond).then(resp => {
        this.uploadImgList = resp.data.map(function(item){
          return {id:item.id,url:'/api'+item.fileUrl,isImage: true}
        });
      });
    },
    deleteFileImageList(file){
      if(file.id !== undefined ){
        systemAttachment(file.id);
      }
    },
    // 图片上传前
    beforeReadImageList(file){
      let _this = this;
      if(file.length!=undefined){
        file.map(res => {
          let zjddm = res.file.name
          //zjddm=zjddm.substring(0,zjddm.lastIndexOf("\("));
          // 创建Canvas对象(画布)
          let canvas =  document.createElement('canvas')
          // 获取对应的CanvasRenderingContext2D对象(画笔)
          let context = canvas.getContext('2d')
          // 创建新的图片对象
          let img = new Image()
          // 指定图片的DataURL(图片的base64编码数据)
          img.src = res.content
          // 监听浏览器加载图片完成，然后进行进行绘制
          img.onload = () => {
            /*const h = img.height
            const w = img.width*/
            let ch = img.height/5
            let cw = img.width/5
            let canvas = document.createElement('canvas')
            let ctx = canvas.getContext('2d')
            canvas.height = ch
            canvas.width = cw
            ctx.clearRect(0,0,cw,ch)
            ctx.drawImage(img,0,0,cw,ch)
            let base_img = canvas.toDataURL('image/jpeg')
            let blobBin = atob(base_img.split(',')[1])
            let d = []
            for (let i=0;i<blobBin.length;i++){
              d.push(blobBin.charCodeAt(i))
            }
            let data2 = new FormData();
            data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));
            uploadFile(data2);
          }
        })
      }else{
        let zjddm = file.file.name
        //zjddm=zjddm.substring(0,zjddm.lastIndexOf("\("));
        // 创建Canvas对象(画布)
        let canvas =  document.createElement('canvas')
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext('2d')
        // 创建新的图片对象
        let img = new Image()
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = file.content
        // 监听浏览器加载图片完成，然后进行进行绘制
        img.onload = () => {
          /*const h = img.height
          const w = img.width*/
          let ch = img.height/5
          let cw = img.width/5
          let canvas = document.createElement('canvas')
          let ctx = canvas.getContext('2d')
          canvas.height = ch
          canvas.width = cw
          ctx.clearRect(0,0,cw,ch)
          ctx.drawImage(img,0,0,cw,ch)
          let base_img = canvas.toDataURL('image/jpeg')
          let blobBin = atob(base_img.split(',')[1])
          let d = []
          for (let i=0;i<blobBin.length;i++){
            d.push(blobBin.charCodeAt(i))
          }
          let data2 = new FormData();
          data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));
          uploadFile(data2);
        }
      }

    },
    qkClick(){
      this.uploadImgList1 = this.uploadImgList;
      for(let i = 0; i < this.uploadImgList1.length; i++){
        if(this.uploadImgList[i].id !== undefined ){
          systemAttachment(this.uploadImgList[i].id);
        }
      }
      this.uploadImgList = [];
    },
    submitUploadList(val){
      let f = []
      for (let i of this.uploadImgList){
        if(i.content !== undefined){
          f.push(i.content)
        }
      }
      let _this = this;
      let file = {
        tableId:val,
        tableName:"t_homestead_fsss",
        bizPath:"upload",
        fileType:"0",
        files: f
      };
      base64Attach(file).then((resp) => {
        this.$toast({
          icon: 'success', // 找到自己需要的图标
          message: '上传成功',
          duration:"1000",
          onClose:function(){
            _this.showImageList = false
          }
        })
      });
    },
  }
}
</script>

<style scoped>
>>> .bannerBg{
  width: 100%;
  color:#fff;
  padding:10px;
  background: linear-gradient(134deg,#7ac943 1%, #22b7f2);
}
>>> .van-hairline--bottom::after {
  border-bottom-width: 0;
}
>>> .title:before
{
  content:"";
  width: 6px;
  height: 20PX;
  background: #7ac943;
  border-radius: 3px;
  position:absolute;
  left:0;
  bottom:0;
}
>>> .delete-button {
  height: 100%;
}
>>> .van-swipe-cell__wrapper{
  margin-right:-3px;
}
>>> .label-class .van-collapse-item__title--expanded{
  font-weight: bold;
}
/deep/ .van-nav-bar__text {
  color: #fff;
}
.signature-footer {
  transform: rotate(90deg);
  width: auto;
  position: absolute;
  top: 50%;
  left: 0px;

}
.clearBtn {
  margin-left: 15px;
}
</style>