宅基地无偿退出申请

src/router/index.js

@@ -753,6 +753,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/onlineHome/homestead/paidExit/paidExitList'], resolve)
   },
+  {
+    path: '/freeExit',
+    name: 'freeExit',
+    meta: {
+      title: '无偿退出',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/homestead/freeExit/freeExitList'], resolve)
+  },
   {
     path: '/paidExitAdd',
     name: 'paidExitAdd',
@@ -762,6 +771,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/onlineHome/homestead/paidExit/paidExitAdd'], resolve)
   },
+  {
+    path: '/freeExitAdd',
+    name: 'freeExitAdd',
+    meta: {
+      title: '无偿退出',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/homestead/freeExit/freeExitAdd'], resolve)
+  },
   {
     path: '/mortgage',
     name: 'mortgage',
@@ -897,6 +915,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/onlineHome/homestead/paidExit/paidExitDetail'], resolve)
   },
+  {
+    path: '/freeExitDetail',
+    name: 'freeExitDetail',
+    meta: {
+      title: '无偿退出详情',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/homestead/freeExit/freeExitDetail'], resolve)
+  },
   {
     path: '/paidExitModify',
     name: 'paidExitModify',
@@ -906,6 +933,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/onlineHome/homestead/paidExit/paidExitModify'], resolve)
   },
+  {
+    path: '/freeExitModify',
+    name: 'freeExitModify',
+    meta: {
+      title: '无偿退出修改',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/onlineHome/homestead/freeExit/freeExitModify'], resolve)
+  },
   {
     path: '/paidUtilizeList',
     name: 'paidUtilizeList',

src/views/onlineHome/homestead/freeExit/freeExitAdd.vue

@@ -0,0 +1,310 @@
+<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
+          clickable
+          v-model="circulation.zjddm"
+          label="宅基地代码"
+          placeholder="请选择"
+          @click="showzjddm = true"
+          input-align="right"
+          right-icon="arrow-down" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showzjddm" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="zjdDictionaries"
+            @confirm="onConfirmZjddm"
+            @cancel="showzjddm = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <van-field
+          readonly
+          clickable
+          v-model="zjlx"
+          label="申请人证件类型"
+          placeholder="请选择"
+          @click="showzjlx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showzjlx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="zjlxDictionaries"
+            @confirm="onConfirmZjlx"
+            @cancel="showzjlx = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      </div>
+
+      <p class="main_title">退出信息</p>
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          v-model="tcqllx"
+          label="退出权利类型"
+          placeholder="请选择退出权利类型"
+          @click="showtcqllx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showtcqllx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="tcqllxDictionaries"
+            @confirm="onConfirmTcqllx"
+            @cancel="showtcqllx = false"
+          />
+        </van-popup>
+
+        <van-field
+          readonly
+          v-model="tclx"
+          label="退出类型"
+          input-align="right"
+          label-width="auto"
+          required
+        />
+
+        <van-field
+          readonly
+          clickable
+          v-model="tcfs"
+          label="退出方式"
+          placeholder="请选择退出方式"
+          @click="showtcfs = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showtcfs" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="tcfsDictionaries"
+            @confirm="onConfirmTcfs"
+            @cancel="showtcfs = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.tcmj" label="退出面积(㎡)" placeholder="请输入退出面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+        <van-field v-model="circulation.tcnx" label="退出年限" placeholder="请输入退出年限" input-align="right" label-width="auto" type="number"/>
+      </div>
+
+      <p class="main_title">补偿信息</p>
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          v-model="bcfs"
+          label="补偿方式"
+          placeholder="请选择补偿方式"
+          @click="showbcfs = true"
+          label-width="auto"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+        <van-popup v-model="showbcfs" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="bcfsDictionaries"
+            @confirm="onConfirmBcfs"
+            @cancel="showbcfs = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.bcje" label="补偿金额(元)" placeholder="请输入补偿金额 元" input-align="right" label-width="auto" type="number"/>
+        <van-field v-model="circulation.zhfwmj" label="置换房屋面积(㎡)" placeholder="请输入房屋面积㎡" input-align="right" label-width="auto" type="number"/>
+        <van-field v-model="circulation.zhfwzl" label="置换房屋坐落" placeholder="请输入房屋坐落" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.bz" label="备注" placeholder="请输入内容" input-align="right" label-width="auto"/>
+
+      </div>
+    </van-form>
+
+    <div style="padding: 16px 0;">
+      <van-row>
+        <van-col span="24" 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, getByZjddm } from "@/api/onlineHome/homestead/circulation";
+  import { dyAdd,  } from "@/api/onlineHome/homestead/paidExit";
+  import {Notify} from "vant";
+  export default {
+    name: "freeExitAdd",
+    data() {
+      return {
+        tcqllxDictionaries:[],//退出权利类型
+        tclxDictionaries:[],//退出类型
+        tcfsDictionaries:[],//退出方式
+        zjlxDictionaries:[],//申请人证件类型
+        bcfsDictionaries:[],//补偿方式
+        zjdDictionaries:[],//宅基地代码
+
+        tcqllx:'',
+        tclx:'无偿退出',
+        tcfs:'',
+        zjlx:'',
+        bcfs:'',
+        zjddm:'',
+
+        showtcqllx: false,
+        showtclx: false,
+        showtcfs: false,
+        showzjlx: false,
+        showbcfs: false,
+        showzjddm: false,
+
+        circulation:{
+          // 申请类型  1-宅基地退出
+          sqlx: '1',
+          // 退出类型  01-有偿退出   02-无偿退出
+          tclx: '02',
+        }
+      };
+    },
+    created() {
+      this.getDictionaries();
+    },
+    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("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("zjlx").then((res) => {
+          for(var i = 0 ; i < res.data.length ; i++){
+            this.zjlxDictionaries.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);
+          }
+          if(this.zjdDictionaries.length > 0)
+            this.onConfirmZjddm(this.zjdDictionaries[0]);
+        });
+      },
+      onConfirmZjddm(data){
+        console.log(data)
+        this.circulation.zjddm = data;
+        this.showzjddm = false;
+        getByZjddm({zjddm: data,}).then(qlrRes => {
+          let data = qlrRes.data;
+          console.log(data)
+          this.$set(this.circulation, 'sqrxm', data.shyqrdbxm);
+          this.$set(this.circulation, 'sqrzjhm', data.shyqrdbzjhm);
+          this.$set(this.circulation, 'sqrzjlx', data.shyqrdbzjlx);
+          if(data.shyqrdbzjlx)
+          {
+            let val = this.zjlxDictionaries.find((x) => x.value == data.shyqrdbzjlx);
+            if(val)
+              this.zjlx = val.text;
+          }
+          this.$forceUpdate();
+        });
+      },
+      onConfirmZjlx(data){
+        this.zjlx = data.text;
+        this.circulation.sqrzjlx = data.value;
+        this.showzjlx = false;
+      },
+      onConfirmTcqllx(data){
+        this.tcqllx = data.text;
+        this.circulation.tcqllx = data.value;
+        this.showtcqllx = 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;
+      },
+      goSubmit(){
+        console.log(this.circulation);
+        this.$refs._Form.validate().then(() => {
+          // 无偿退出申请不需要审批，保存成功之后默认就是审批通过状态，5 代表审批通过
+          this.$set(this.circulation, "auditStatus", '5');
+          dyAdd(this.circulation).then(response => {
+            if(response.code = 200){
+              this.$toast.success('保存成功');
+              this.back();
+            }
+          })
+        }).catch((e) => {
+          Notify({ type: 'danger', message: '请填写完整的表单项' });
+        });
+      },
+      back() {
+        setTimeout(() => this.$router.back(-1), 1000)
+      },
+    },
+  }
+</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>

src/views/onlineHome/homestead/freeExit/freeExitDetail.vue

@@ -0,0 +1,232 @@
+<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
+        v-model="circulation.zjddm"
+        label="宅基地代码"
+        input-align="right"
+      />
+      <van-field readonly v-model="circulation.sqrxm" label="申请人姓名" input-align="right" label-width="auto"/>
+      <van-field
+        readonly
+        v-model="circulation.sqrzjlx"
+        label="申请人证件类型"
+        input-align="right"
+        label-width="auto"
+      />
+      <van-field readonly v-model="circulation.sqrzjhm" label="申请人证件号码" input-align="right" label-width="auto"/>
+    </div>
+    <p class="main_title">退出信息</p>
+    <div class="main_box">
+      <van-field
+        readonly
+        v-model="circulation.tcqllx"
+        label="退出权利类型"
+        input-align="right"
+        label-width="auto"
+      />
+      <van-field
+        readonly
+        v-model="circulation.tclx"
+        label="退出类型"
+        input-align="right"
+        label-width="auto"
+      />
+      <van-field
+        readonly
+        v-model="circulation.tcfs"
+        label="退出方式"
+        input-align="right"
+        label-width="auto"
+      />
+      <van-field readonly v-model="circulation.tcmj" label="退出面积(㎡)" input-align="right" label-width="auto"/>
+      <van-field readonly v-model="circulation.tcnx" label="退出年限" input-align="right" label-width="auto"/>
+    </div>
+
+    <p class="main_title">补偿信息</p>
+    <div class="main_box">
+      <van-field
+        readonly
+        v-model="circulation.bcfs"
+        label="补偿方式"
+        label-width="auto"
+        input-align="right"
+      />
+      <van-field readonly v-model="circulation.bcje" label="补偿金额(元)" input-align="right" label-width="auto"/>
+      <van-field readonly v-model="circulation.zhfwmj" label="置换房屋面积(㎡)" input-align="right" label-width="auto"/>
+      <van-field readonly v-model="circulation.zhfwzl" label="置换房屋坐落" input-align="right" label-width="auto"/>
+      <van-field readonly v-model="circulation.bz" label="备注" input-align="right" label-width="auto"/>
+    </div>
+
+    <!-- 审批 -->
+    <!-- <template v-if="approval.type === 'todo'">
+      <div class="main_box examine_box">
+        <van-row type="flex" justify="space-between" align="center">
+          <van-col span="5">审核<br/>意见</van-col>
+          <van-col span="19">
+            <van-field required :readonly="approval.type !== 'todo'" v-model="approval.comment" rows="2" autosize type="textarea" placeholder="审核意见"/>
+          </van-col>
+        </van-row>
+      </div>
+
+      <van-row style="margin-top: 0.2rem;">
+        <van-col span="12" align="center">
+          <van-button type="info" native-type="submit" class="submitButton" @click="complete(true)">同意</van-button>
+        </van-col>
+        <van-col span="12" align="center">
+          <van-button type="danger" native-type="submit" class="submitButton" @click="complete(false)">驳回</van-button>
+        </van-col>
+      </van-row>
+      <div class="clear"></div>
+    </template> -->
+  </div>
+</template>
+
+<script>
+  import { getZyyctc } from "@/api/onlineHome/homestead/paidExit";
+  import request from '@/utils/request';
+  import {Notify} from "vant";
+  export default {
+    name: "freeExitDetail",
+    data() {
+      return {
+        circulation:[],
+        approval: {
+          taskId: null,
+          instanceId: null,
+          type: null,
+          id: null,
+          comment: '',
+        },
+      };
+    },
+    created() {
+      this.approval.id = this.$route.query.id;
+      this.approval.instanceId = this.$route.query.instanceId;
+      this.approval.type = this.$route.query.type;
+      this.approval.taskId = this.$route.query.taskId;
+      this.getDetail();
+    },
+    methods: {
+      getDetail(){
+        getZyyctc(this.$route.query.id).then(response => {
+          console.log(response)
+          this.circulation = response.data;
+          //退出权利类型
+          this.houseGetDicts("tcqllx").then((res) => {
+            this.circulation.tcqllx = this.selectDictLabel(res.data, response.data.tcqllx);
+          });
+          //退出类型
+          this.houseGetDicts("tclx").then((res) => {
+            this.circulation.tclx = this.selectDictLabel(res.data, response.data.tclx);
+          });
+          //退出方式
+          this.houseGetDicts("tcfs").then((res) => {
+            this.circulation.tcfs = this.selectDictLabel(res.data, response.data.tcfs);
+          });
+          //申请人证件类型
+          this.houseGetDicts("zjlx").then((res) => {
+            this.circulation.sqrzjlx = this.selectDictLabel(res.data, response.data.sqrzjlx);
+          });
+          //补偿方式
+          this.houseGetDicts("bcfs").then((res) => {
+            this.circulation.bcfs = this.selectDictLabel(res.data, response.data.bcfs);
+          });
+        });
+      },
+      /* complete(pass) {
+        if(!this.approval.taskId || !this.approval.instanceId || this.approval.type !== 'todo')
+        {
+          console.error("无效操作");
+          return false;
+        }
+        if(!this.approval.comment)
+        {
+          this.notify("请填写审批意见", 'danger');
+          return false;
+        }
+        let data = {
+          taskId: this.approval.taskId,
+          instanceId: this.approval.instanceId,
+          variables: JSON.stringify({
+            pass: pass ? "true" : "false",
+            comment: this.approval.comment ? this.approval.comment : (pass ? '同意' : '驳回'),
+          }),
+        };
+        request({
+          url: "/activiti/process/complete",
+          method: "post",
+          params: data,
+        }).then((response) => {
+          this.notify("操作成功", 'success');
+          this.$router.back();
+        }).catch(e => {
+          this.notify("操作失败!", 'danger');
+        });
+        return true;
+      }, */
+      notify(message, type) {
+        Notify.clear();
+        Notify({ type: type || 'primary', message: 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;
+
+  }
+  .examine_box{
+    background-color: #1D6FE9!important;
+    padding: 0.18rem!important;
+    padding-left: 0!important;
+    border-radius: 0.15rem!important;
+    margin-top: 0.3rem!important;
+    .van-col:first-child{
+      color: #FFF!important;
+      font-size: 0.45rem!important;
+      text-align: center!important;
+    }
+    .van-col:last-child{
+      background-color: #FFF!important;
+      border-radius: 0.15rem!important;
+      overflow: hidden!important;
+      .van-radio-group--horizontal{
+        padding: 0.2rem 0;
+        border-bottom: 1px solid #eee;
+      }
+    }
+  }
+</style>

src/views/onlineHome/homestead/freeExit/freeExitList.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      left-arrow
+      fixed
+      placeholder
+      @click-left="$router.back(-1)"
+      @click-right="goAdd"
+    >
+      <template #title>
+        <p style="font-weight: bold;">无偿退出</p>
+      </template>
+      <template #right>
+        <van-icon name="add" size="18" />
+      </template>
+    </van-nav-bar>
+    <van-list
+      v-model="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="getList"
+    >
+      <van-swipe-cell v-for="(item,index) in applicationList" :key="index">
+        <van-cell :title="item.zjddm" center :to="{name:'freeExitDetail', query: {id:item.id}}" >
+          <template #icon>
+            <van-icon name="../../../static/images/onlineHome/icon_zjd3.png" size="30" color="#539FFD" style="margin-right: 10px;" />
+          </template>
+          <template #label>
+            <p><b style="color: #539FFD;">{{item.tcfs}}</b><i style="margin-right: 0.5rem;"></i><b style="color: #333333;">{{item.sqrxm}}</b><i style="margin-right: 0.5rem;"></i>{{item.tcmj}}㎡</p>
+          </template>
+        </van-cell>
+        <template #right>
+          <van-row>
+            <van-col>
+              <van-button square text="修改" :to="{name:'freeExitModify', query: {id:item.id}}" type="info" class="delete-button" />
+            </van-col>
+            <van-col>
+              <van-button square text="删除" @click="deleteList(item.id,index)" type="danger" class="delete-button" />
+            </van-col>
+          </van-row>
+        </template>
+      </van-swipe-cell>
+    </van-list>
+  </div>
+</template>
+
+<script>
+  import { getList , removeList, } from "@/api/onlineHome/homestead/paidExit";
+  export default {
+    name: "freeExitList",
+    data() {
+      return {
+        applicationList:[],
+        houseApplyStatus:[],
+        tcqllxStatus:[],
+        tclxStatus:[],
+        tcfsStatus:[],
+        loading: false,
+        finished: false,
+        queryParams:{
+          pageNum:1,
+          pageSize:10,
+          orderByColumn:'createTime',
+          isAsc:'desc',
+          // 申请类型  1-宅基地退出
+          sqlx: '1',
+          // 退出类型  01-有偿退出   02-无偿退出
+          tclx: '02',
+        }
+      };
+    },
+    created() {
+      this.houseGetDicts("tcqllx").then((res) => {
+        this.tcqllxStatus = res.data;
+      });
+      this.houseGetDicts("tclx").then((res) => {
+        this.tclxStatus = res.data;
+      });
+      this.houseGetDicts("tcfs").then((res) => {
+        this.tcfsStatus = res.data;
+      });
+    },
+    methods: {
+      goAdd(){
+        window.location = 'freeExitAdd';
+      },
+      getList(){
+        setTimeout(() => {
+          getList(this.queryParams).then(response => {
+            for (var i = 0; i < response.rows.length; i++) {
+              response.rows[i].tcqllx = this.selectDictLabel(this.tcqllxStatus, response.rows[i].tcqllx)
+              response.rows[i].tclx = this.selectDictLabel(this.tclxStatus, response.rows[i].tclx)
+              response.rows[i].tcfs = this.selectDictLabel(this.tcfsStatus, response.rows[i].tcfs)
+              this.applicationList.push(response.rows[i]);
+            }
+            if(this.applicationList.length >= response.total){
+              this.finished = true;
+              return;
+            }else{
+              this.loading = false;
+              this.queryParams.pageNum += 1 ;
+            }
+          });
+        }, 1000);
+      },
+      deleteList(id,index){
+        this.$dialog.confirm({
+          message: '您确认删除此退出申请？',
+        })
+          .then(() => {
+            // on confirm
+            this.applicationList.splice(index,1)
+            removeList(id).then(res => {
+              if(res.code = 200){
+                this.$toast.success('删除成功');
+              }
+            });
+          })
+          .catch(() => {
+            // on cancel
+          });
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding: 0.2rem 3%;
+  }
+  /deep/.van-cell__title{
+    flex: 0.7;
+  }
+  /deep/.van-cell__title span{
+    font-family: Arial;
+    font-size: 0.4rem;
+    font-weight: normal;
+  }
+  /deep/.van-cell__value{
+    flex: 0.3;
+    color: #1D6FE9;
+    font-weight: bold;
+  }
+  /deep/.van-swipe-cell{
+    margin-bottom: 0.2rem;
+    border-radius: 0.2rem;
+    overflow: hidden;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+  }
+  /deep/van-ellipsis{
+    font-weight: bold;
+  }
+  .delete-button {
+    height: 100%;
+  }
+  .van-row{
+    height: 100%;
+  }
+  .van-col{
+    height: 100%;
+  }
+</style>

src/views/onlineHome/homestead/freeExit/freeExitModify.vue

@@ -0,0 +1,309 @@
+<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
+          clickable
+          v-model="circulation.zjddm"
+          label="宅基地代码"
+          placeholder="请选择"
+          @click="showzjddm = true"
+          input-align="right"
+          right-icon="arrow-down" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showzjddm" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="zjdDictionaries"
+            @confirm="onConfirmZjddm"
+            @cancel="showzjddm = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <van-field
+          readonly
+          clickable
+          v-model="zjlx"
+          label="申请人证件类型"
+          placeholder="请选择"
+          @click="showzjlx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto"
+        />
+        <van-popup v-model="showzjlx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="zjlxDictionaries"
+            @confirm="onConfirmZjlx"
+            @cancel="showzjlx = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      </div>
+
+      <p class="main_title">退出信息</p>
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          v-model="tcqllx"
+          label="退出权利类型"
+          placeholder="请选择退出权利类型"
+          @click="showtcqllx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showtcqllx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="tcqllxDictionaries"
+            @confirm="onConfirmTcqllx"
+            @cancel="showtcqllx = false"
+          />
+        </van-popup>
+
+        <van-field
+          readonly
+          v-model="tclx"
+          label="退出类型"
+          input-align="right"
+          label-width="auto"
+          required
+        />
+
+        <van-field
+          readonly
+          clickable
+          v-model="tcfs"
+          label="退出方式"
+          placeholder="请选择退出方式"
+          @click="showtcfs = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showtcfs" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="tcfsDictionaries"
+            @confirm="onConfirmTcfs"
+            @cancel="showtcfs = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.tcmj" label="退出面积(㎡)" placeholder="请输入退出面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+        <van-field v-model="circulation.tcnx" label="退出年限" placeholder="请输入退出年限" input-align="right" label-width="auto" type="number"/>
+      </div>
+
+      <p class="main_title">补偿信息</p>
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          v-model="bcfs"
+          label="补偿方式"
+          placeholder="请选择补偿方式"
+          @click="showbcfs = true"
+          label-width="auto"
+          input-align="right"
+          right-icon="arrow-down"
+        />
+        <van-popup v-model="showbcfs" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="bcfsDictionaries"
+            @confirm="onConfirmBcfs"
+            @cancel="showbcfs = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.bcje" label="补偿金额(元)" placeholder="请输入补偿金额 元" input-align="right" label-width="auto" type="number"/>
+        <van-field v-model="circulation.zhfwmj" label="置换房屋面积(㎡)" placeholder="请输入房屋面积㎡" input-align="right" label-width="auto" type="number"/>
+        <van-field v-model="circulation.zhfwzl" label="置换房屋坐落" placeholder="请输入房屋坐落" input-align="right" label-width="auto"/>
+        <van-field v-model="circulation.bz" label="备注" placeholder="请输入内容" input-align="right" label-width="auto"/>
+
+      </div>
+    </van-form>
+
+    <div style="padding: 16px 0;">
+      <van-row>
+        <van-col span="24" align="center">
+          <van-button type="info" native-type="submit" class="submitButton" @click="goEdit">保存</van-button>
+        </van-col>
+      </van-row>
+      <div class="clear"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { zjdzd, getByZjddm } from "@/api/onlineHome/homestead/circulation";
+  import { zyyctcEdit , getZyyctc , zyyctcApply } from "@/api/onlineHome/homestead/paidExit";
+  import {Notify} from "vant";
+  export default {
+    name: "freeExitModify",
+    data() {
+      return {
+        tcqllxDictionaries:[],//退出权利类型
+        tclxDictionaries:[],//退出类型
+        tcfsDictionaries:[],//退出方式
+        zjlxDictionaries:[],//申请人证件类型
+        bcfsDictionaries:[],//补偿方式
+        zjdDictionaries:[],//宅基地代码
+
+        tcqllx:'',
+        tclx:'',
+        tcfs:'',
+        zjlx:'',
+        bcfs:'',
+        zjddm:'',
+
+        showtcqllx: false,
+        showtclx: false,
+        showtcfs: false,
+        showzjlx: false,
+        showbcfs: false,
+        showzjddm: false,
+
+        circulation:{}
+      };
+    },
+    created() {
+      this.getDictionaries();
+    },
+    methods: {
+      getDictionaries(){
+        getZyyctc(this.$route.query.id).then(response => {
+          //退出权利类型
+          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.tcqllx = this.selectDictLabel(res.data, response.data.tcqllx);
+          });
+          //退出类型
+          this.houseGetDicts("tclx").then((res) => {
+            this.tclx = this.selectDictLabel(res.data, response.data.tclx);
+          });
+          //退出方式
+          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.tcfs = this.selectDictLabel(res.data, response.data.tcfs);
+          });
+          //申请人证件类型
+          this.houseGetDicts("zjlx").then((res) => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.zjlxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+            this.zjlx = this.selectDictLabel(res.data, response.data.sqrzjlx);
+          });
+          //补偿方式
+          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});
+            }
+            this.bcfs = this.selectDictLabel(res.data, response.data.bcfs);
+          });
+          //宅基地代码
+          zjdzd().then(zjdRes => {
+            for (let i = 0; i < zjdRes.rows.length; i++) {
+              this.zjdDictionaries.push(zjdRes.rows[i].zjddm);
+            }
+          });
+          this.circulation = response.data;
+        });
+      },
+      onConfirmZjddm(data){
+        console.log(data)
+        this.circulation.zjddm = data;
+        this.showzjddm = false;
+        getByZjddm({zjddm: data,}).then(qlrRes => {
+          let data = qlrRes.data;
+          console.log(data)
+          this.$set(this.circulation, 'sqrxm', data.shyqrdbxm);
+          this.$set(this.circulation, 'sqrzjhm', data.shyqrdbzjhm);
+          this.$set(this.circulation, 'sqrzjlx', data.shyqrdbzjlx);
+          if(data.shyqrdbzjlx)
+          {
+            let val = this.zjlxDictionaries.find((x) => x.value == data.shyqrdbzjlx);
+            if(val)
+              this.zjlx = val.text;
+          }
+          this.$forceUpdate();
+        });
+      },
+      onConfirmZjlx(data){
+        this.zjlx = data.text;
+        this.circulation.sqrzjlx = data.value;
+        this.showzjlx = false;
+      },
+      onConfirmTcqllx(data){
+        this.tcqllx = data.text;
+        this.circulation.tcqllx = data.value;
+        this.showtcqllx = 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;
+      },
+      goEdit(){
+        console.log(this.circulation);
+        this.$refs._Form.validate().then(() => {
+          zyyctcEdit(this.circulation).then(response => {
+            if(response.code = 200){
+              this.$toast.success('保存成功');
+              this.$router.back(-1);
+            }
+          })
+        }).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>

src/views/onlineHome/workbench.vue

@@ -471,6 +471,14 @@
             </div>
             <p style="margin-top: 5px;color: #666666;">有偿退出</p>
           </van-grid-item>
+          <van-grid-item text="无偿退出" @click="applicationList('freeExit')">
+            <div slot="default">
+              <div class="icon" style="background:#7dda4f;">
+                <img src="../../../static/images/onlineHome/icon_Z3.png" alt />
+              </div>
+            </div>
+            <p style="margin-top: 5px;color: #666666;">无偿退出</p>
+          </van-grid-item>
           <van-grid-item text="纠纷调请"  @click="applicationList('arbitrationList')">
             <div slot="default">
               <div class="icon" style="background:#1D6FE9;">
@@ -693,6 +701,8 @@
               this.$router.push({ path: "/mortgage" });
             } else if (data == 'paidExit') {
               this.$router.push({ path: "/paidExit" });
+            } else if (data == 'freeExit') {
+              this.$router.push({ path: "/freeExit" });
             } else if (data == 'arbitrationList') {
               console.log("arbitrationList");
               this.$router.push({ path: "/onlineHome/arbitrationList" });