nsgk_mobile/src/views/onlineHome/phfs/czjy/czjyDetails.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>
    <van-form ref="_Form">
    <div class="main_box">

                  <van-field
                    readonly
                     v-model="circulation.zcfmc"
                     label="申请人姓名"
                    placeholder="请输入申请人姓名"
                     @input="remoteTransfereeMethod"
                  />


                     <van-cell  v-for="item in getObligeeOptions"
                       :key="item.shyqrdbxm"
                      @click="shyqrdmxmChange(item)"
                    >
                       {{item.shyqrdbxm}}
                     </van-cell>

      <van-popup v-model="showshyqrdm" position="bottom">
        <van-picker
          show-toolbar
          :columns="shyqrdmDictionaries"
          @confirm="onConfirmShyqrdm"
          @cancel="showshyqrdm = false"
        />
      </van-popup>
      <van-field
        readonly
        v-model="circulation.zjddm"
        label="宅基地代码"
        input-align="right"
      >
        <template #button>
          <van-button size="small" @click="mapLook"  type="primary">查看地图</van-button>
        </template>
      </van-field>
      <van-popup v-model="showzjddm" position="bottom" >
        <van-picker
          show-toolbar
          :columns="zjdDictionaries"
          @confirm="onConfirmZjddm"
          @cancel="showzjddm = false"
        />
      </van-popup>
      <van-field
        v-if="circulation.phrqType == 1"
        readonly
        v-model="circulation.zcfxb"
        label="性别"
        input-align="right"
        label-width="auto"
      />
      <van-field readonly v-model="circulation.zcfdh" label="联系电话" placeholder="请输入联系电话" input-align="right" label-width="auto" />
      <van-field  v-if="circulation.phrqType == 1" readonly v-model="circulation.zcfzjhm" label="证件号码" placeholder="证件号码" input-align="right" label-width="auto" />
      <van-cell  v-if="circulation.phrqType == 1" title="是否本集体经济组织成员" >
        <template #right-icon>
          <van-radio-group disabled v-model="circulation.zcfzz" direction="horizontal" >
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-cell>

      <van-field
        readonly
        v-model ="circulation.zjdmj"
        type = "number"
        @keyup = "circulation.zjdmj=circulation.zjdmj.replace(circulation.zjdmj,RestrictedMoney(circulation.zjdmj))"
        label="经营面积（㎡）"
        input-align="right"
        label-width="auto"
      />
      <van-field
        readonly
        v-model="circulation.phtime"
        label="合同签订日期"
        placeholder="选择合同签订日期"
        input-align="right"
        label-width="auto"
      />
      <van-field
        readonly
        v-model="circulation.qsrq"
        label="出租开始时间"
        placeholder="选择出租开始时间"
        input-align="right"
        label-width="auto"
      />
      <van-field
        readonly
        v-model="circulation.jsrq"
        label="出租结束时间"
        placeholder="选择出租结束时间"
        input-align="right"
        label-width="auto"
      />
      <van-field readonly v-model="circulation.fwms" type="textarea" label="地上房屋描述" placeholder="请输入地上房屋描述" input-align="right" label-width="auto" />
      <van-field readonly v-model="circulation.bz" type="textarea" label="备注" placeholder="请输入备注" input-align="right" label-width="auto" />
      <van-field readonly v-model="circulation.zrfmc" label="经营方姓名" placeholder="请输入经营方姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required />
      <van-field readonly v-model="circulation.zrfzjhm" label="证件号码" placeholder="请输入证件号码" input-align="right" label-width="auto"  :rules="[{ required: true }]" required/>
      <van-field readonly v-model="circulation.zrfdh" label="经营方电话" placeholder="请输入经营方电话" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>

    <van-dialog v-model:show="mapShow" show-cancel-button>
        <MapGisLyDrawing ref="zjdProductResh" :message="circulation.zjddm" @closeMoule="closeMoule"></MapGisLyDrawing>
    </van-dialog>

    </div>
    </van-form>
  </div>
</template>

<script>
  import { zjdzd, obligeeList } from "@/api/onlineHome/homestead/circulation";
  import { addPhxxb,updatePhxxb,getPhxxb } from "@/api/onlineHome/phfs/phfs";
  import { ycsyAdd , listByDeptId } from "@/api/onlineHome/homestead/paidUtilize";
  import MapGisLyDrawing from "@/components/Map/MapGisLyDrawing";
  import {Notify} from "vant";
  export default {
    name: "paidUtilizeAdd",
    components: { MapGisLyDrawing,},
    props: {
      columns: {
        type: Array,
        default: function () {
          return []
        }
      },
      selectValue: {
        type: [String, Number],
        default: ''
      },
      option: {
        type: Object,
        default: function () {
          return { label: 'label', value: 'value' }
        }
      },
      isSearch: {
        type: Boolean,
        default: false
      },
      offOption: { // 关闭option配置key-value;当数据是非集合的数组的时候，开启
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        tcqllxDictionaries:[],//退出权利类型
        tclxDictionaries:[],//退出类型
        tcfsDictionaries:[],//退出方式
        sexDictionaries:[],//申请人证件类型
        bcfsDictionaries:[],//补偿方式
        zjdDictionaries:[],//宅基地代码
        shyqrdmDictionaries:[],//使用权人
        getObligeeOptions:[],

        tcqllx:'',
        tclx:'',
        tcfs:'',
        xb:'',
        bcfs:'',
        zjddm:'',
        showzcfmc:false,
        showtcqllx: false,
        showtclx: false,
        showtcfs: false,
        showXb: false,
        showbcfs: false,
        showzjddm: false,
        showshyqrdm: false,
        showbasj: false,
        showycsydqsj: false,
        columnsData: [],
        circulation:{id: null},
        mapShow: false,
      };
    },
    created() {
      this.circulation.id = this.$route.query.id;
      this.getDetail();
    },
    methods: {
      getDictionaries(){
          //退出权利类型
          this.houseGetDicts("tcqllx").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.tcqllxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
          });
          //退出类型
          this.houseGetDicts("tclx").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.tclxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
          });
          //退出方式
          this.houseGetDicts("tcfs").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.tcfsDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
          });
          //性别
          this.houseGetDicts("sex").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.sexDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
          });
          //补偿方式
          this.houseGetDicts("bcfs").then((res) => {
            for (var i = 0; i < res.data.length; i++) {
              this.bcfsDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
            }
          });
          //宅基地代码
          zjdzd().then(zjdRes => {
            for (let i = 0; i < zjdRes.rows.length; i++) {
              this.zjdDictionaries.push(zjdRes.rows[i].zjddm);
            }
          });
          //使用权人代码
          listByDeptId().then(zjdRes => {
            for (let i = 0; i < zjdRes.rows.length; i++) {
              this.shyqrdmDictionaries.push(zjdRes.rows[i].shyqrdm);
            }
          });
      },
      getDetail()
      {
        getPhxxb(this.$route.query.id).then(response => {
          this.circulation = response.data;
          //性别
          this.houseGetDicts("sex").then((res) => {
              this.circulation.zcfxb = this.selectDictLabel(res.data, response.data.zcfxb);
          });
        });
      },
      plusOrMinus(values) {
        let newValue
        if (!(/[^0-9.-]/g.test(values))) {
          newValue = values.replace(/[^\-\d.]/g, '').replace(/\b(0+){2,}/g, '0').replace(/\-{2,}/g, '-').replace(/^\./g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
          if (newValue.toString().indexOf('.') > 0 && Number(newValue.toString().split('.')[1].length) > 2) {
            newValue = parseInt(parseFloat(newValue) * 100) / 100
          }
          if ((newValue.toString().split('-').length - 1) > 1) {
            newValue = parseFloat(newValue) || ''
          }
          if ((newValue.toString().split('-').length) > 1 && newValue.toString().split('-')[0].length > 0) {
            newValue = parseFloat(newValue) || ''
          }
          if (newValue.toString().length > 1 && (newValue.toString().charAt(0) === '0' || (newValue.toString().length > 2 && newValue.toString().charAt(0) === '-' && newValue.toString().charAt(1) === '0' && newValue.toString().charAt(2) !== '.')) && newValue.toString().indexOf('.') < 1) {
            newValue = parseFloat(newValue) || ''
          }
          // 判断整数位最多为9位
          if (newValue.toString().indexOf('.') > 0 && Number(newValue.toString().split('.')[0].length) > 9) {
            newValue = newValue.toString().substring(0, 9) + '.' + newValue.toString().split('.')[1]
          } else if (newValue.toString().indexOf('.') < 0 && Number(newValue.toString().split('.')[0].length) > 9) {
            newValue = newValue.toString().substring(0, 9)
          }
        } else {
          newValue = values.replace(/[^0-9.-]/g, '')
        }
        return newValue
      }, materielExtraCostChange(item) {
        // 防止删除为空
        if (!item) {
          item = '0.00'
        }
        // 一些错误金额输入的判断
        if (item.toString().indexOf('.') > 0 && Number(item.toString().split('.')[1].length) < 1) {
          item = item.toString().split('.')[0]
        }
        // 一些错误金额输入的判断
        if (!item || item === '-' || item === '-0') {
          item = '0.00'
          return
        }
        item = parseFloat(item).toFixed(2)
      },RestrictedMoney(values) {
        return this.plusOrMinus(values.toString())
      },
      onConfirmZjddm(data){
        console.log(data)
        this.circulation.zjddm = data;
        this.showzjddm = false;
      },
      onConfirmXb(data){
        this.xb = data.text;
        this.circulation.zcfxb = data.value;
        this.showXb = false;
      },
      onConfirmTcqllx(data){
        this.tcqllx = data.text;
        this.circulation.tcqllx = data.value;
        this.showtcqllx = false;
      },
      onConfirmTclx(data){
        this.tclx = data.text;
        this.circulation.tclx = data.value;
        this.showtclx = false;
      },
      onConfirmTcfs(data){
        this.tcfs = data.text;
        this.circulation.tcfs = data.value;
        this.showtcfs = false;
      },
      onConfirmBcfs(data){
        this.bcfs = data.text;
        this.circulation.bcfs = data.value;
        this.showbcfs = false;
      },
      onConfirmShyqrdm(data){
        this.circulation.shyqrdm = data;
        this.showshyqrdm = false;
      },
      onConfirmBasj(data){
        this.circulation.phtime = this.getNowFormatDate(data).substr(0,10);
        this.showbasj = false;
      },
      onConfirmYcsydqsj(data){
        this.circulation.ycsydqsj = this.getNowFormatDate(data).substr(0,10);
        this.showycsydqsj = false;
      },
      goEdit(){
        window.location.replace("paidUtilizeList")
      },
      mapLook(){
        this.mapShow =true;
        setTimeout(() => {
          this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
        },1000)
      },
      /** 查找地图中宅基地 */
      closeMoule: function (data) {
        this.circulation.zjddm = data;
      },
      /** 模糊查询人员信息 */
      remoteTransfereeMethod(query) {
        let _this = this;
        if (query !== "") {
          let queryMember = {
            hzxm : query,
          };
          this.searchLoading = true;
          obligeeList({shyqrdbxm:query,status:2}).then((response) => {
            this.searchLoading = false;
            if (response.code == 200) {
              this.getObligeeOptions = response.rows.map((item) => {
                // _this.$set(_this.form, "zcfxb", item.xb);
                // _this.$set(_this.form, "zcfdh", item.dh);
                // _this.$set(_this.form, "zcfzjhm", item.shyqrdbzjhm);
                // _this.$set(_this.form, "zcfdm", item.nhdm);
                return {
                  zcfxb:item.xb,
                  zcfdh:item.dh,
                  zcfzjhm:item.shyqrdbzjhm,
                  zcfdm:item.nhdm,
                  shyqrdbxm: item.shyqrdbxm,
                  shyqrdm: item.shyqrdm,
                  zcfzz: item.sfbncjtjjzzcy
                };
              });
            }
          });
        } else {
          this.getObligeeOptions = [];
        }
      },
      clearFrom() {
        // this.initData();
        this.getObligeeOptions = [];
      },
      shyqrdmxmChange(val){
        let _this = this;
        this.sexDictionaries.map(function (item) {
          if(item.value === val.zcfxb){
            _this.xb = item.text;
          }
        })
        this.$set(this.circulation, "zcfdh", val.zcfdh);
        this.$set(this.circulation, "zcfzjhm", val.zcfzjhm);
        this.$set(this.circulation, "zcfdm", val.zcfdm);
        this.$set(this.circulation, "zcfmc", val.shyqrdbxm);
        this.$set(this.circulation, "zcfzz", val.zcfzz);
        this.getObligeeOptions=[];
      },
      goSubmit(){
        console.info( this.$refs._Form.validate());
        this.$refs._Form.validate().then(() => {
          if (this.circulation.id != null) {
            updatePhxxb(this.circulation).then(response => {
              this.$toast.success("修改成功");
              setTimeout(function(){
                window.location.replace("zzjyList")
              },1000)
            });
          } else {
            addPhxxb(this.circulation).then(response => {
              this.$toast.success("新增成功");
              setTimeout(function(){
                window.location.replace("zzjyList")
              },1000)
            });
          }
        }).catch((e) => {
          Notify({ type: 'danger', message: '请填写完整的表单项' });
        });
      }
    },
  }
</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>