nsgk_mobile/src/views/onlineHome/homestead/utilization/utilizationModify.vue

<template>
    <div class="app-container">
      <van-nav-bar
        left-arrow
        fixed
        placeholder
        @click-left="$router.back(-1)"
      >
        <template #title>
          <p style="font-weight: bold;">宅基地利用情况</p>
        </template>
      </van-nav-bar>
      <div class="main_box">
        <van-field
          readonly
          clickable
          name="picker"
          v-model="circulation.nmfwdm"
          label="农民房屋代码"
          placeholder="请选择"
          @click="showzjddm = true"
          input-align="right"
          right-icon="arrow-down"
        />
        <van-popup v-model="showzjddm" position="bottom">
          <van-picker
            show-toolbar
            :columns="zjdDictionaries"
            @confirm="onConfirmZjddm"
            @cancel="showzjddm = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="picker"
          v-model="fwzt"
          label="房屋状态"
          placeholder="请选择"
          @click="showfwzt = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />
        <van-popup v-model="showfwzt" position="bottom">
          <van-picker
            show-toolbar
            :columns="fwztDictionaries"
            @confirm="onConfirmFwzt"
            @cancel="showfwzt = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="picker"
          v-model="fwaqxjddj"
          label="房屋安全性鉴定等级"
          placeholder="请选择"
          @click="showfwaqxjddj = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />
        <van-popup v-model="showfwaqxjddj" position="bottom">
          <van-picker
            show-toolbar
            :columns="fwaqxjddjDictionaries"
            @confirm="onConfirmFwaqxjddj"
            @cancel="showfwaqxjddj = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="picker"
          v-model="lyzk"
          label="利用状况"
          placeholder="请选择"
          @click="showlyzk = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />
        <van-popup v-model="showlyzk" position="bottom">
          <van-picker
            show-toolbar
            :columns="lyzkDictionaries"
            @confirm="onConfirmLyzk"
            @cancel="showlyzk = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="picker"
          v-model="fwsfxz"
          label="房屋是否闲置"
          placeholder="请选择"
          @click="showfwsfxz = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />
        <van-popup v-model="showfwsfxz" position="bottom">
          <van-picker
            show-toolbar
            :columns="fwsfxzDictionaries"
            @confirm="onConfirmFwsfxz"
            @cancel="showfwsfxz = false"
          />
        </van-popup>
        <van-field v-model="circulation.fwxzyy" label="闲置原因" placeholder="闲置原因" input-align="right" label-width="auto"/>
        <van-field
          readonly
          clickable
          name="picker"
          v-model="circulation.fwxzqssj"
          label="房屋闲置起始时间"
          placeholder="房屋闲置起始时间"
          @click="showfwxzqssj = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />
        <van-popup v-model="showfwxzqssj" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmFwxzqssj"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="picker"
          v-model="phlyms"
          label="盘活利用模式"
          placeholder="请选择"
          @click="showphlyms = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />
        <van-popup v-model="showphlyms" position="bottom">
          <van-picker
            show-toolbar
            :columns="phlymsDictionaries"
            @confirm="onConfirmPhlyms"
            @cancel="showphlyms = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="picker"
          v-model="circulation.dcsj"
          label="调查时间"
          placeholder="选择调查时间"
          @click="showdcsj = true"
          input-align="right"
          right-icon="arrow-down"
        />
        <van-popup v-model="showdcsj" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmDcsj"
          />
        </van-popup>
        <van-field v-model="circulation.nsy" label="年收益" placeholder="年收益" input-align="right" label-width="auto"/>
      </div>

      <p class="main_title">照片信息</p>
      <div class="main_box" style="padding: 5%;">
        <van-row>
          <van-col span="12">
            <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片东</p>
            <van-uploader v-model="findListD" max-count="1" :before-delete="deleteFileD"/>
          </van-col>
          <van-col span="12">
            <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片南</p>
            <van-uploader v-model="findListN" max-count="1" :before-delete="deleteFileX" />
          </van-col>
        </van-row>
        <van-row>
          <van-col span="12">
            <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片西</p>
            <van-uploader v-model="findListX" max-count="1" :before-delete="deleteFileN" />
          </van-col>
          <van-col span="12">
            <p style="margin-bottom: 5%;color: #333333;font-size: 14px;">现场照片北</p>
            <van-uploader v-model="findListB" max-count="1" :before-delete="deleteFileB" />
          </van-col>
        </van-row>
      </div>

      <p class="main_title">补偿信息</p>
      <div class="main_box">
        <van-field v-model="circulation.bz" label="备注" type="textarea" placeholder="请输入内容" input-align="right" label-width="auto"/>
      </div>

      <div style="padding: 16px 0;">
        <van-row>
          <van-col span="12" align="center">
            <van-button type="info" color="#B4B0B0" native-type="submit" class="submitButton">关闭</van-button>
          </van-col>
          <van-col span="12" align="center">
            <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit">保存</van-button>
          </van-col>
        </van-row>
        <div class="clear"></div>
      </div>
    </div>
</template>

<script>
import { zjdzd } from "@/api/onlineHome/homestead/circulation";
import { getZjdly , nmfwlyEdit , upload} from "@/api/onlineHome/homestead/utilization";
export default {
    name: "utilizationModify",
  data() {
    return {
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      findListD:[],
      findListN:[],
      findListX:[],
      findListB:[],

      phlyms : '',
      fwsfxz : '',
      lyzk : '',
      fwaqxjddj : '',
      fwzt: '',

      showzjddm:false,
      showphlyms:false,
      showfwsfxz:false,
      showlyzk:false,
      showfwaqxjddj:false,
      showfwzt:false,
      showdcsj: false,
      showfwxzqssj: false,

      phlymsDictionaries: [],
      fwsfxzDictionaries: [],
      lyzkDictionaries: [],
      fwaqxjddjDictionaries: [],
      fwztDictionaries: [],
      zjdDictionaries: [],

      circulation: {}
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail(){
      getZjdly(this.$route.query.id).then(response => {
        console.log(response)
        //退出权利类型
        this.houseGetDicts("fwzt").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.fwztDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
          this.fwzt = this.selectDictLabel(res.data, response.data.fwzt);
        });
        this.houseGetDicts("fwaqxjddj").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.fwaqxjddjDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
          this.fwaqxjddj = this.selectDictLabel(res.data, response.data.fwaqxjddj);
        });
        this.houseGetDicts("nmfwlyzk").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.lyzkDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
          this.lyzk = this.selectDictLabel(res.data, response.data.lyzk);
        });
        this.houseGetDicts("sys_yes_no").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.fwsfxzDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
          this.fwsfxz = this.selectDictLabel(res.data, response.data.fwsfxz);
        });
        this.houseGetDicts("phlyms").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.phlymsDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
          this.phlyms = this.selectDictLabel(res.data, response.data.phlyms);
        });
        //宅基地代码
        zjdzd().then(zjdRes => {
          for( let i = 0 ; i < zjdRes.rows.length ; i++){
            this.zjdDictionaries.push(zjdRes.rows[i].zjddm);
          }
        });
        this.circulation = response.data;
        if(response.data.xczpd != null){this.findListD.push({url:'http://192.168.31.26:8080'+ response.data.xczpd, isImage: true});}
        if(response.data.xczpx != null){this.findListX.push({url:'http://192.168.31.26:8080'+ response.data.xczpx, isImage: true});}
        if(response.data.xczpn != null){this.findListN.push({url:'http://192.168.31.26:8080'+ response.data.xczpn, isImage: true});}
        if(response.data.xczpb != null){this.findListB.push({url:'http://192.168.31.26:8080'+ response.data.xczpb, isImage: true});}

      });
    },
    onConfirmZjddm(data){
      console.log(data)
      this.circulation.nmfwdm = data;
      this.showzjddm = false;
    },
    onConfirmPhlyms(data){
      this.phlyms = data.text;
      this.circulation.phlyms = data.value;
      this.showphlyms = false;
    },
    onConfirmFwsfxz(data){
      this.fwsfxz = data.text;
      this.circulation.fwsfxz = data.value;
      this.showfwsfxz = false;
    },
    onConfirmLyzk(data){
      this.lyzk = data.text;
      this.circulation.lyzk = data.value;
      this.showlyzk = false;
    },
    onConfirmFwaqxjddj(data){
      this.fwaqxjddj = data.text;
      this.circulation.fwaqxjddj = data.value;
      this.showfwaqxjddj = false;
    },
    onConfirmFwzt(data){
      this.fwzt = data.text;
      this.circulation.fwzt = data.value;
      this.showfwzt = false;
    },
    onConfirmFwxzqssj(data){
      this.circulation.fwxzqssj = this.getNowFormatDate(data).substr(0,10);;
      this.showfwxzqssj = false;
    },
    onConfirmDcsj(data){
      this.circulation.dcsj = this.getNowFormatDate(data).substr(0,10);;
      this.showdcsj = false;
    },
    base64toFile(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,
      });
    },
    goSubmit(){
      if(this.findListD != '' && this.findListD[0].content != undefined){
        console.log('1111')
        const params = new FormData()
        params.append('file', this.base64toFile(this.findListD[0].content))
        upload(params).then(res => {
          this.circulation.xczpd = res.fileName;
        });
      }
      if(this.findListX != '' && this.findListX[0].content != undefined){
        console.log('2222')
        const params = new FormData()
        params.append('file', this.base64toFile(this.findListX[0].content))
        upload(params).then(res => {
          this.circulation.xczpx = res.fileName;
        });
      }
      if( this.findListN != '' && this.findListN[0].content != undefined){
        console.log('3333')
        const params = new FormData()
        params.append('file', this.base64toFile(this.findListN[0].content))
        upload(params).then(res => {
          this.circulation.xczpn = res.fileName;
        });
      }
      if( this.findListB != '' && this.findListB[0].content != undefined){
        console.log('4444')
        const params = new FormData()
        params.append('file', this.base64toFile(this.findListB[0].content))
        upload(params).then(res => {
          this.circulation.xczpb = res.fileName;
        });
      }
      var that = this ;
      setTimeout(function(){
        console.log(that.circulation);
        nmfwlyEdit(that.circulation).then(response => {
          if(response.code = 200){
            that.$toast.success('保存成功');
          }
        });
      },2000);
    },
    deleteFileD(elIndex){
      this.circulation.xczpd = null ;
      this.findListD = [];
      console.log()
      return (file, name) => {
        let fileIndex = name.index
        this.findListD[elIndex].splice(fileIndex, 1)
      }
    },
    deleteFileX(elIndex){
      this.circulation.xczpx = null ;
      this.findListX = [];
      return (file, name) => {
        let fileIndex = name.index
        this.findListX[elIndex].splice(fileIndex, 1)
      }
    },
    deleteFileN(elIndex){
      this.circulation.xczpn = null ;
      this.findListN = [];
      return (file, name) => {
        let fileIndex = name.index
        this.findListN[elIndex].splice(fileIndex, 1)
      }
    },
    deleteFileB(elIndex){
      this.circulation.xczpb = null ;
      this.findListB = [];
      return (file, name) => {
        let fileIndex = name.index
        this.findListB[elIndex].splice(fileIndex, 1)
      }
    },
  },
}
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;

  }
</style>