宅基地手机端功能增加及优化

src/api/onlineHome/homestead/circulation.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 //查询列表
 export function getList(data){
   return request({
-    url:'/house/mobile/lz/list',
+    url:'/home/lz/list',
     method:'get',
     params:data
   })
@@ -12,7 +12,7 @@ export function getList(data){
 //删除列表项
 export function removeList(id){
   return request({
-    url:'/house/lz/remove/'+id,
+    url:'/home/lz/remove/'+id,
     method:'get'
   })
 }
@@ -20,7 +20,7 @@ export function removeList(id){
 //宅基地流转详情
 export function getLz(id){
   return request({
-    url:'/house/lz/get/'+id,
+    url:'/home/lz/get/'+id,
     method:'get'
   })
 }
@@ -102,9 +102,9 @@ export function goApply(id){
 }
 
 //修改保存宅基地流转
-export function houseAdd(data){
+export function homeLzAdd(data){
   return request({
-    url:'/house/lz/add',
+    url:'/home/lz/add',
     method:'post',
     data:data
   })

src/api/sunVillage_info/homestead/application.js

@@ -8,7 +8,14 @@ export function getList(data){
     params:data
   })
 }
-
+// 查询用地建房申请公示列表
+export function getGsList(query) {
+  return request({
+    url: '/home/homeapplyydjfsq/gsList',
+    method: 'get',
+    params: query
+  })
+}
 //获取申请单明细
 export function allInformation(id){
   return request({
@@ -17,6 +24,14 @@ export function allInformation(id){
   })
 }
 
+// 获取用地建房申请证书
+export function getCertificate(id) {
+  return request({
+    url: '/home/homeapplyydjfsq/certificate/' + id,
+    method: 'get'
+  })
+}
+
 //获取申请单明细
 export function allInformationAnnounce(id){
   return request({

src/api/sunVillage_info/homestead/homeapplynczjdpzs.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+// 查询宅基地批准书列表
+export function listHomeapplynczjdpzs(query) {
+  return request({
+    url: '/home/homeapplynczjdpzs/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 导出宅基地批准书
+export function exportHomeapplynczjdpzs(query) {
+  return request({
+    url: '/home/homeapplynczjdpzs/export',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询宅基地批准书详细
+export function getHomeapplynczjdpzs(id) {
+  return request({
+    url: '/home/homeapplynczjdpzs/get/' + id,
+    method: 'get'
+  })
+}
+
+// 新增宅基地批准书
+export function addHomeapplynczjdpzs(data) {
+  return request({
+    url: '/home/homeapplynczjdpzs/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改宅基地批准书
+export function updateHomeapplynczjdpzs(data) {
+  return request({
+    url: '/home/homeapplynczjdpzs/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除宅基地批准书
+export function delHomeapplynczjdpzs(id) {
+  return request({
+    url: '/home/homeapplynczjdpzs/remove/' + id,
+    method: 'get'
+  })
+}
+

src/api/sunVillage_info/homestead/homeapplyxcjsghxkz.js

@@ -0,0 +1,54 @@
+import request from '@/utils/request'
+
+// 查询建设规划许可证列表
+export function listHomeapplyxcjsghxkz(query) {
+  return request({
+    url: '/home/homeapplyxcjsghxkz/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 导出建设规划许可证
+export function exportHomeapplyxcjsghxkz(query) {
+  return request({
+    url: '/home/homeapplyxcjsghxkz/export',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询建设规划许可证详细
+export function getHomeapplyxcjsghxkz(id) {
+  return request({
+    url: '/home/homeapplyxcjsghxkz/get/' + id,
+    method: 'get'
+  })
+}
+
+// 新增建设规划许可证
+export function addHomeapplyxcjsghxkz(data) {
+  return request({
+    url: '/home/homeapplyxcjsghxkz/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改建设规划许可证
+export function updateHomeapplyxcjsghxkz(data) {
+  return request({
+    url: '/home/homeapplyxcjsghxkz/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除建设规划许可证
+export function delHomeapplyxcjsghxkz(id) {
+  return request({
+    url: '/home/homeapplyxcjsghxkz/remove/' + id,
+    method: 'get'
+  })
+}
+

src/api/sunVillage_info/homestead/paidExit.js

@@ -12,7 +12,7 @@ export function getList(data){
 //删除列表项
 export function removeList(id){
   return request({
-    url:'/house/zyyctc/remove/'+id,
+    url:'/home/mobile/yctcRemove/'+id,
     method:'get'
   })
 }

src/components/home/HomeApplyUploadCompTc.vue

@@ -0,0 +1,299 @@
+<template>
+  <div v-if="this.attachmentList.length !== 0">
+    <p class="main_title">当前节点所需上传文件</p>
+    <van-steps direction="vertical" :active="active">
+      <van-step
+        v-for="(item, index) in attachmentList"
+        :key="index">
+        <van-collapse :accordion="true" v-model="item.collapse">
+          <van-collapse-item :title="item.fileTypeName + '(' + item.fileList.length + ')'" :name="0">
+            <van-uploader
+              v-model="item.fileList"
+              :after-read="(file, detail) => { handleUploadSuccess(file, detail, item); }"
+              :readonly="disabled"
+              :show-upload="!disabled "
+              :before-delete="handleRemove"
+              :deletable="!disabled"
+              accept=".jpg,.png,.gif,.pdf,.doc,.docx,.xlsx,.xls"
+              :before-read="checkFile"
+            >
+              <!-- accept=".jpg,.png,.gif,.pdf,.doc,.docx,.xlsx,.xls" 设置了无法拉起相机/下载
+              :disabled="disabled || !item.current"
+              -->
+            </van-uploader>
+          </van-collapse-item>
+        </van-collapse>
+      </van-step>
+    </van-steps>
+
+  </div>
+</template>
+
+<script>
+import { treeSingleProcessView  , attach , removeFile , getAttachmentConfigTree, attachmentFind } from "@/api/sunVillage_info/homestead/application";
+import {getToken} from "@/utils/auth";
+import request from '@/utils/request'
+import {Notify} from "vant";
+/** 导入JS方法 */
+
+export default {
+  name: "houseApplyUploadComp",
+  components: {},
+  props: ["businessType", "proposerId", "houseApplyStatus", "processKey", "tableName", "readonly", 'full',"userName"],
+  data() {
+    return {
+      disabled: this.readonly,
+      loading: false,
+      attachmentList: [],
+      uploadImg: {
+        //上传图片配置
+        uploadImgUrl: "/home/mobile/common/attach",
+      },
+      newAttachments: [],
+      active: -1,
+      has: false,
+    }
+  },
+  watch: {
+    proposerId: function (newVal, oldVal) {
+      this.showAttachmentComp(this.businessType, newVal, this.houseApplyStatus, this.processKey, this.tableName, this.full);
+    },
+    readonly: function (newVal, oldVal) {
+      this.disabled = newVal;
+    },
+  },
+  created() {
+    if (this.businessType !== null) {
+      this.showAttachmentComp(this.businessType, this.proposerId, this.houseApplyStatus, this.processKey, this.tableName, this.full)
+    }
+  },
+  methods: {
+    handleUploadSuccess(file, detail, item) {
+      this.setFileStatus(file, 'uploading', '文件上传中...');
+      let formData = new FormData;
+      formData.set('file', file.file);
+      this.$set(item.postData, 'userName', this.userName);
+      request({
+        url: this.uploadImg.uploadImgUrl,
+        method: "post",
+        params: item.postData,
+        data: formData,
+      }).then((resp) => {
+        if(resp.code == 200)
+        {
+          file.response = resp;
+          console.log(resp);
+          file.fileList = item.fileList;
+          this.onFileListChanged("ADD", resp.id);
+          this.setFileStatus(file, 'done', '文件上传成功');
+          this.$emit('onUploadSuccess', file);
+        }
+        else
+          this.setFileStatus(file, 'fail', '文件上传失败!');
+      }).catch((e) => {
+        this.setFileStatus(file, 'fail', '文件上传失败!');
+      });
+      return true;
+    },
+    handleRemove(file, detail) {
+      console.log(file, detail);
+      this.setFileStatus(file, 'uploading', '文件删除中...');
+      let id = file.id || file.response.id;
+      removeFile(id).then(resp => {
+        if(this.proposerId != -1 && false) // 不刷新
+          this.showAttachmentComp(this.businessType, this.proposerId, this.houseApplyStatus, this.processKey, this.tableName, this.full)
+/*        else // 新增时
+        {
+          let fileList = file.fileList;
+          //console.log(fileList);
+          fileList.splice(fileList.indexOf(file), 1);
+        }*/
+        this.setFileStatus(file, 'done', '文件删除成功');
+        this.onFileListChanged("REMOVE", id);
+      }).catch((e) => {
+        this.setFileStatus(file, 'fail', '文件删除失败!');
+      }).finally(() => {
+        //loading.close();
+      });
+      return true;
+    },
+    showAttachmentComp(businessType, proposerId, houseApplyStatus, processKey, tableName, full) {
+      this.attachmentList = [];
+      this.active = -1;
+      this.has = false;
+      if(!full && 0)
+      {
+        this.getCurrentFiles(businessType, proposerId, houseApplyStatus, processKey, tableName);
+      }
+      else
+      {
+        this.getHistoryFiles(businessType, proposerId, houseApplyStatus, processKey, tableName);
+      }
+    },
+    formatFile(list) {
+      if (list !== null && list !== undefined) {
+        const baseImgUrl = this.$store.getters.baseRoutingUrl;
+        let UfileList = []; //上传图片列表
+        list.forEach((value, index) => {
+          UfileList.push({
+            name: value.fileName,
+            fileUrl: value.fileUrl,
+            url: baseImgUrl + value.fileUrl,
+            id: value.id,
+            fileList: UfileList,
+          });
+        });
+        return UfileList;
+      }
+    },
+    onFileListChanged(type, id) {
+      if(this.proposerId != -1) return;
+      if(type === "ADD")
+      {
+        this.newAttachments.push(id);
+      }
+      else if(type === "REMOVE")
+      {
+        let index = this.newAttachments.indexOf(id);
+        if(index !== -1)
+          this.newAttachments.splice(index, 1);
+      }
+      console.log(this.newAttachments);
+      this.$emit('uploadFinished', this.newAttachments);
+    },
+    getCurrentFiles(businessType, proposerId, houseApplyStatus, processKey, tableName) {
+      this.loading = true;
+      treeSingleProcessView({
+        businessType: businessType,
+        houseApplyStatus: houseApplyStatus,
+        processKey: processKey,
+        tableName: tableName,
+      }).then(res => {
+        this.handleResponse(res.rows, proposerId, houseApplyStatus, tableName);
+        if(this.attachmentList.length === 0)
+        {
+          this.disabled = true;
+          this.getHistoryFiles(businessType, proposerId, houseApplyStatus, processKey, tableName);
+        }
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    getHistoryFiles(businessType, proposerId, houseApplyStatus, processKey, tableName) {
+      this.loading = true;
+      getAttachmentConfigTree({
+        businessType: businessType,
+        nodeStatus: houseApplyStatus,
+        processKey: processKey,
+        dictTypeSort: 'home_stage_status',
+        nodeStatusSort: '',
+      }).then(resp => {
+        //console.log(resp);
+        try {
+          if(!resp.data || resp.data.length === 0)
+            return;
+          let rows = resp.data[0].children;
+          rows.forEach((value, index) => {
+            if (!value.children)
+              return;
+            this.handleResponse(value.children, proposerId, houseApplyStatus, tableName);
+          });
+        }
+        catch (e)
+        {
+          console.error(e);
+        }
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    handleResponse(rows, proposerId, houseApplyStatus, tableName) {
+      rows.forEach((value, index) => {
+          let obj = {
+            fileTypeName: value.fileTypeName,
+            tableId: proposerId,
+            tableName: tableName,
+            fileList: [],
+            fileType: value.fileType,
+            postData: {
+              tableId: proposerId,
+              tableName: tableName,
+              bizPath: tableName,
+              fileType: value.fileType,
+            },
+            current: value.nodeStatus == houseApplyStatus,
+            collapse: this.disabled || value.nodeStatus == houseApplyStatus ? 0 : '',
+          };
+          if(value.nodeStatus != houseApplyStatus && !this.has)
+            this.active++;
+          if(value.nodeStatus == houseApplyStatus)
+          {
+            if(!this.has)
+              this.active++;
+            this.has = true;
+          }
+          this.attachmentList.push(obj);
+
+      });
+      if (proposerId !== -1) {
+        this.attachmentList.forEach((value, index) => {
+          attachmentFind(value).then(resp => {
+            let list = this.formatFile(resp.data);
+            this.$set(this.attachmentList[index], "fileList", list);
+          });
+        });
+      }
+      console.info(this.attachmentList);
+    },
+    setFileStatus(file, status, message) {
+      file.status = status;
+      file.message = message;
+    },
+    checkFile(file) {
+      let mime = file.type;
+      if([
+        "image/png",
+        "image/jpeg",
+        "image/gif",
+        "image/bmp",
+      ].indexOf(mime) === -1)
+      {
+        this.notify('请上传jpg/png/gif/bmp等格式图片!', 'danger');
+        return false;
+      }
+      return true;
+    },
+    notify(message, type) {
+      Notify.clear();
+      Notify({ type: type || 'primary', message: message });
+    },
+  }
+};
+</script>
+<style scoped>
+.my_class >>> .el-upload--picture-card {
+  width: 72px;
+  height: 72px;
+  line-height: 78px;
+}
+
+.my_class >>> .el-upload-list__item {
+  width: 72px;
+  height: 72px;
+}
+
+.my_class >>> .el-upload-list__item-preview {
+  width: 20px;
+}
+
+.my_class >>> .el-upload-list__item-delete {
+  width: 20px;
+}
+
+.main_title{
+  font-size: 0.4rem;
+  color: #1D6FE9;
+  margin: 0.2rem 6%;
+  position: relative;
+}
+</style>

src/router/index.js

@@ -642,7 +642,7 @@ export const constantRoutes = [
       title: '农村宅基地申请表',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/homeApplication/applicationForm'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/homeApplication/applicationForm'], resolve)
   },
   {
     path: '/applicationList',
@@ -651,7 +651,16 @@ export const constantRoutes = [
       title: '宅基地申请',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/homeApplication/applicationList'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/homeApplication/applicationList'], resolve)
+  },
+  {
+    path: '/applicationGsList',
+    name: 'applicationGsList',
+    meta: {
+      title: '宅基地申请',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/yinnong/homestead/homeApplication/applicationGsList'], resolve)
   },
   {
     path: '/certificateList',
@@ -696,7 +705,7 @@ export const constantRoutes = [
       title: '使用权流转',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/circulation/circulationList'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/circulation/circulationList'], resolve)
   },
   {
     path: '/circulationAdd',
@@ -705,7 +714,7 @@ export const constantRoutes = [
       title: '添加宅基地使用权流转',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/circulation/circulationAdd'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/circulation/circulationAdd'], resolve)
   }
   ,
   {
@@ -771,6 +780,24 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/onlineHome/homestead/homeApplication/applicationAdd'], resolve)
   },
+  {
+    path: '/homeXkzPanel',
+    name: 'homeXkzPanel',
+    meta: {
+      title: '宅基地许可证书',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/yinnong/homestead/homeApplication/homeXKZPanel'], resolve)
+  },
+  {
+    path: '/homePzsPanel',
+    name: 'homePzsPanel',
+    meta: {
+      title: '宅基地批准证书',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/yinnong/homestead/homeApplication/homePZSPanel'], resolve)
+  },
   {
     path: '/paidExit',
     name: 'paidExit',
@@ -778,7 +805,7 @@ export const constantRoutes = [
       title: '有偿退出',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/paidExit/paidExitList'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/paidExit/paidExitList'], resolve)
   },
   {
     path: '/freeExit',
@@ -787,7 +814,7 @@ export const constantRoutes = [
       title: '无偿退出',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/freeExit/freeExitList'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/freeExit/freeExitList'], resolve)
   },
   {
     path: '/paidExitAdd',
@@ -805,7 +832,7 @@ export const constantRoutes = [
       title: '无偿退出',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/freeExit/freeExitAdd'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/freeExit/freeExitAdd'], resolve)
   },
   {
     path: '/mortgage',
@@ -904,7 +931,7 @@ export const constantRoutes = [
       title: '查看宅基地使用权流转',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/circulation/circulationDetail'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/circulation/circulationDetail'], resolve)
   },
   {
     path: '/circulationModify',
@@ -913,7 +940,7 @@ export const constantRoutes = [
       title: '修改宅基地使用权流转',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/circulation/circulationModify'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/circulation/circulationModify'], resolve)
   },
   {
     path: '/mortgageDetail',
@@ -940,7 +967,7 @@ export const constantRoutes = [
       title: '有偿退出详情',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/paidExit/paidExitDetail'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/paidExit/paidExitDetail'], resolve)
   },
   {
     path: '/freeExitDetail',
@@ -949,7 +976,7 @@ export const constantRoutes = [
       title: '无偿退出详情',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/freeExit/freeExitDetail'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/freeExit/freeExitDetail'], resolve)
   },
   {
     path: '/paidExitModify',
@@ -967,7 +994,7 @@ export const constantRoutes = [
       title: '无偿退出修改',
       hidden: true,
     },
-    component: (resolve) => require(['@/views/onlineHome/homestead/freeExit/freeExitModify'], resolve)
+    component: (resolve) => require(['@/views/yinnong/homestead/freeExit/freeExitModify'], resolve)
   },
   {
     path: '/paidUtilizeList',

src/views/yinnong/homestead/circulation/circulationAdd.vue

@@ -12,25 +12,66 @@
     </van-nav-bar>
     <p class="main_title">转出方信息</p>
     <div class="main_box">
+      <!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
+      <field-select
+        v-if="houseOwnershipOpen"
+        v-model="circulation.houseOwnership"
+        label="转出方归属"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="请选择"
+        :rules="[{ required: true }]"
+        required
+        @confirm="onConfirmGsf"
+        remote-url="/system/dict/data/type/house_ownership  "
+        :on-remote-response="'data'"
+      />
+      <van-field v-if = "shyqxmShow" v-model="circulation.shyqrxm" label="村集体代表姓名"  input-align="right" label-width="auto" :rules="[{ required: true }]" required />
+      <van-field v-if = "!shyqxmShow" v-model="circulation.shyqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required @input="remoteTransfereeMethod" />
+      <div id="dropList" v-show="showDropList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
+        <van-cell id="vanCell"  v-for="(item, index) in getObligeeOptions" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
+          {{item.sqrxm}}
+        </van-cell>
+      </div>
+      <!--        <van-field-->
+      <!--          readonly-->
+      <!--          clickable-->
+      <!--          v-model="circulation.zjddm"-->
+      <!--          label="宅基地代码"-->
+      <!--          placeholder="请选择"-->
+      <!--          @click="remoteProposerMethod"-->
+      <!--          input-align="right"-->
+      <!--          right-icon="arrow-down" :rules="[{ required: true }]" required-->
+      <!--        />-->
+      <!--        <van-popup v-model="showzjddm" position="bottom">-->
+      <!--          <van-picker-->
+      <!--            show-toolbar-->
+      <!--            :columns="zjdDictionaries"-->
+      <!--            value-key="zjddm"-->
+      <!--            @confirm="onConfirmZjddm"-->
+      <!--            @cancel="showzjddm = false"-->
+      <!--          />-->
+      <!--        </van-popup>-->
       <van-field
-        readonly
-        clickable
         v-model="circulation.zjddm"
         label="宅基地代码"
-        placeholder="请选择"
-        @click="showZjd = true"
         input-align="right"
-        right-icon="arrow-down"
+      >
+        <template #button>
+          <van-icon name="../../../../../static/images/22.png"  color="#539FFD" size="20" @click="mapLook"/>
+        </template>
+      </van-field>
+      <field-select
+        v-model="circulation.phlyms"
+        label="盘活利用模式"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="请选择"
+        :rules="[{ required: true }]"
+        required
+        remote-url="/system/dict/data/type/phlyms  "
+        :on-remote-response="'data'"
       />
-      <van-popup v-model="showZjd" position="bottom">
-        <van-picker
-          show-toolbar
-          :columns="zjdDictionaries"
-          @confirm="onConfirmZjd"
-          @cancel="showZjd = false"
-        />
-      </van-popup>
-
       <van-field
         readonly
         clickable
@@ -39,7 +80,7 @@
         placeholder="请选择"
         @click="showLzfs = true"
         input-align="right"
-        right-icon="arrow-down"
+        right-icon="arrow-down" :rules="[{ required: true }]" required
       />
       <van-popup v-model="showLzfs" position="bottom">
         <van-picker
@@ -49,43 +90,97 @@
           @cancel="showLzfs = false"
         />
       </van-popup>
-
+      <van-field v-if="!xjdShow" v-model="circulation.zcfxjd" label="现居地" placeholder="现居地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-field v-if="!zcfhkszdShow" v-model="circulation.zcfhkszd" label="户口所在地" placeholder="户口所在地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-cell  v-if="!sfjtjjzzShow" title="是否本集体经济组织成员">
+        <template #right-icon>
+          <van-radio-group v-model="circulation.zcfsfbjtjjzzcy" direction="horizontal">
+            <van-radio name="1">是</van-radio>
+            <van-radio name="0">否</van-radio>
+          </van-radio-group>
+        </template>
+      </van-cell>
+    </div>
+    <p class="main_title">转入方信息</p>
+    <div class="main_box">
       <van-field
-        v-model="circulation.shyqrdm"
-        label="转出方使用权人代码"
-        placeholder="请选择"
+        v-model="circulation.zrfdbxm"
+        label="转入方代表名称"
+        placeholder="请输入转入方代表名称"
         label-width="auto"
         input-align="right"
+        @input="remoteTransfereeMethodTwo"
       />
-      <!--          @click="showShyqrdm = true"-->
-      <!--          right-icon="arrow-down"-->
-      <!--          <van-popup v-model="showShyqrdm" position="bottom">-->
+      <div id="zrfList" v-show="showZrfList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
+        <van-cell id="vanCellZrf"  v-for="(item, index) in getZrfObligeeOptions" :key="index" @click="zrfdmxmChange(item)" style="position: relative; z-index: 999;">
+          {{item.sqrxm}}
+        </van-cell>
+      </div>
+      <!--          <van-popup v-model="showZrfdbmc" position="bottom">-->
       <!--            <van-picker-->
       <!--              show-toolbar-->
-      <!--              :columns="shyqrdmDictionaries"-->
-      <!--              @confirm="onConfirmShyqrdm"-->
-      <!--              @cancel="showShyqrdm = false"-->
+      <!--              :columns="zrfdbmcDictionaries"-->
+      <!--              @confirm="onConfirmZrfdbmc"-->
+      <!--              @cancel="showZrfdbmc = false"-->
       <!--            />-->
       <!--          </van-popup>-->
 
+      <field-select
+        readonly
+        v-model="circulation.zrfdbzjlx"
+        label="转入方代表证件类型"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="请选择"
+        :rules="[{ required: true }]"
+        required
+        remote-url="/system/dict/data/type/zjlx"
+        :on-remote-response="'data'"
+      />
+      <van-field label="转入方代表证件号码" v-model="circulation.zrfdbzjhm" placeholder="请输入证件号码" input-align="right" label-width="auto"/>
+      <van-field v-model="circulation.zrfhkszd" label="户口所在地" placeholder="户口所在地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
       <van-cell title="是否本集体经济组织成员">
         <template #right-icon>
-          <van-radio-group v-model="circulation.zcfsfbjtjjzzcy" direction="horizontal">
-            <van-radio name="Y">是</van-radio>
-            <van-radio name="N">否</van-radio>
+          <van-radio-group  v-model="circulation.zrfsfbjtjjzzcy" direction="horizontal">
+            <van-radio name="1">是</van-radio>
+            <van-radio name="0">否</van-radio>
           </van-radio-group>
         </template>
       </van-cell>
     </div>
-
     <p class="main_title">流转信息</p>
     <div class="main_box">
-      <van-field label="流转面积(㎡)" v-model="circulation.lzmj" placeholder="请输入流转面积(㎡)" input-align="right" label-width="auto"/>
+      <van-field label="流转面积(㎡)" v-model="circulation.lzmj" placeholder="请输入流转面积(㎡)" input-align="right" :rules="[{ required: true }]" required  label-width="auto"/>
+      <van-field label="建筑面积(㎡)" v-model="circulation.jzmj" placeholder="请输入建筑面积(㎡)" input-align="right" :rules="[{ required: true }]" required label-width="auto"/>
       <van-field label="流转单价(元)" v-model="circulation.lzdj" placeholder="请输入流转单价(元)" input-align="right" label-width="auto"/>
       <van-field label="流转费用(元)" v-model="circulation.lzfy" placeholder="请输入流转费用(元)" input-align="right" label-width="auto"/>
+      <van-field label="集合收益金额(元)" v-model="circulation.jtsyje" placeholder="请输入集体收益金额(元)" input-align="right" label-width="auto"/>
+      <van-field
+        readonly
+        clickable
+        v-model="circulation.htqdrq"
+        label="合同签订日期"
+        placeholder="请选择合同签订日期"
+        @click="showhtqdrq = true"
+        input-align="right"
+        :rules="[{ required: true }]"
+        required
+        right-icon="arrow-down"
+      />
+      <van-popup v-model="showhtqdrq" position="bottom">
+        <van-datetime-picker
+          v-model="currentDate"
+          type="date"
+          title="选择年月日"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @confirm="onConfirmHtqdrq"
+        />
+      </van-popup>
       <van-field
         readonly
         clickable
+        v-if="qsrqOpen"
         v-model="circulation.lzqsrq"
         label="流转起始时间"
         placeholder="请选择起始时间"
@@ -108,6 +203,7 @@
         readonly
         clickable
         v-model="circulation.lzjsrq"
+        v-if="jsrqOpen"
         label="流转结束时间"
         placeholder="请选择结束时间"
         @click="showlzjsrq = true"
@@ -164,71 +260,21 @@
           @cancel="showLzhfwyt = false"
         />
       </van-popup>
+      <van-field v-if="zrnxOpen" label="转入年限" v-model="circulation.zrnx" placeholder="请输入转入年限" input-align="right" label-width="auto"/>
     </div>
-
-    <p class="main_title">转入方信息</p>
-    <div class="main_box">
-      <van-field
-        v-model="circulation.zrfdbmc"
-        label="转入方代表名称"
-        placeholder="请输入转入方代表名称"
-        label-width="auto"
-        input-align="right"
-      />
-      <!--          <van-popup v-model="showZrfdbmc" position="bottom">-->
-      <!--            <van-picker-->
-      <!--              show-toolbar-->
-      <!--              :columns="zrfdbmcDictionaries"-->
-      <!--              @confirm="onConfirmZrfdbmc"-->
-      <!--              @cancel="showZrfdbmc = false"-->
-      <!--            />-->
-      <!--          </van-popup>-->
-
-      <van-field
-        readonly
-        clickable
-        v-model="zrfdbzjlx"
-        label="转入方代表证件类型"
-        placeholder="请选择"
-        @click="showZrfdbzjlx = true"
-        label-width="auto"
-        input-align="right"
-        right-icon="arrow-down"
-      />
-      <van-popup v-model="showZrfdbzjlx" position="bottom">
-        <van-picker
-          show-toolbar
-          :columns="zrfdbzjlxDictionaries"
-          @confirm="onConfirmZrfdbzjlx"
-          @cancel="showZrfdbzjlx = false"
-        />
-      </van-popup>
-
-      <van-field label="转入方代表证件号码" v-model="circulation.zrfdbzjhm" placeholder="请输入证件号码" input-align="right" label-width="auto"/>
-      <van-cell title="是否本集体经济组织成员">
-        <template #right-icon>
-          <van-radio-group  v-model="circulation.zrfsfbjtjjzzcy" direction="horizontal">
-            <van-radio name="Y">是</van-radio>
-            <van-radio name="N">否</van-radio>
-          </van-radio-group>
-        </template>
-      </van-cell>
-    </div>
-
     <p class="main_title">其他</p>
     <div class="main_box">
       <van-field label="所有权人代表姓名" v-model="circulation.suyqrdbxm" placeholder="请输入姓名" input-align="right" label-width="auto"/>
-      <van-field label="所有权人意见" v-model="circulation.suyqryj" placeholder="请输入内容" input-align="right" label-width="auto"/>
+      <van-field label="村集体意见" v-model="circulation.suyqryj" placeholder="请输入内容" input-align="right" label-width="auto"/>
       <van-field label="备注" v-model="circulation.bz" placeholder="请输入备注" input-align="right" label-width="auto"/>
     </div>
-
+    <van-dialog v-model="mapShow" show-cancel-button>
+      <MapGisObtainTc ref="zjdProductResh" :shqrxm="circulation.shyqrxm" :landStatus="landStatus" :deptId="sysFarmer.deptId" @closeMoule="closeMoule"></MapGisObtainTc>
+    </van-dialog>
     <div style="padding: 16px 0;">
       <van-row>
-        <van-col span="12" align="center">
-          <van-button type="info" native-type="submit" class="submitButton" @click="goEdit">保<i style="margin-right: 1em;"></i>存</van-button>
-        </van-col>
-        <van-col span="12" align="center">
-          <van-button type="info" native-type="submit" class="submitButton" @click="goSubmit">提<i style="margin-right: 1em;"></i>交</van-button>
+        <van-col span="24" align="center">
+          <van-button type="info" native-type="submit" class="submitButton" @click="goAdd">保<i style="margin-right: 1em;"></i>存</van-button>
         </van-col>
       </van-row>
       <div class="clear"></div>
@@ -237,10 +283,13 @@
 </template>
 
 <script>
-  import { getLz , zjdzd , getByZjddm , edit , goApply,houseAdd } from "@/api/onlineHome/homestead/circulation";
-
+  import { getLz , zjdzd , getByZjddm , edit , goApply,homeLzAdd } from "@/api/onlineHome/homestead/circulation";
+  import {  getShyqrs,getByLyZjddm,listHomesteadnmfw} from "@/api/sunVillage_info/homestead/paidExit";
+  import FieldSelect from "@/components/form/FieldSelect";
+  import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
   export default {
     name: "circulationAdd",
+    components: { MapGisObtainTc,FieldSelect },
     data() {
       return {
         lzfsDictionaries: [],//流转方式
@@ -250,13 +299,31 @@
         zrfdbmcDictionaries: [],//转入方代表名称
         zrfdbzjlxDictionaries: [],//转入方证件类型
         zjdDictionaries: [],//宅基地列表
-        lzfs: '',//流转方式
+        getObligeeOptions:[],
+        getZrfObligeeOptions:[],
+        xbDictionaries:[],//申请人证件类型
+        xb:'男',
+        lzfs: '转让',//流转方式
         shyqrdm: '',//转出方使用权人代码
         lzqfwyt: '',//流转前房屋类型
         lzhfwyt: '',//流转后房屋类型
         zrfdbmc: '',//转入方代表名称
         zrfdbzjlx: '',//转入方证件类型
+        sysFarmer:{deptId:this.$store.state.user.loginDeptId,memberName:""},
+        landStatus:"1",
         zjd: [],//宅基地列表
+        sfjtjjzzShow:false,
+        zcfhkszdShow:false,
+        xjdShow:false,
+        qsrqOpen:false,
+        shyqxmShow:false,
+        houseOwnershipOpen:false,
+        jsrqOpen:false,
+        zrnxOpen:false,
+        showhtqdrq:false,
+        showDropList:false,
+        showZrfList:false,
+        showxb: false,
         showLzfs: false,
         showShyqrdm: false,
         showLzqfwyt: false,
@@ -269,13 +336,29 @@
         minDate: new Date(),
         maxDate: new Date(2025, 10, 1),
         currentDate: new Date(),
-        circulation: {}
+        circulation: {jzmj:0.00,zcfsfbjtjjzzcy:"Y",zrfsfbjtjjzzcy:"Y",lzfs:"01",houseOwnership:"2",phlyms:"10"},
+        mapShow: false,
       };
     },
     created() {
       this.getDetail();
     },
     methods: {
+      onConfirmGsf(val){
+        if(val === "1"){
+          this.$set(this.circulation, "shyqrxm", this.$store.state.user.deptName+"村集体");
+          this.landStatus  = "2";
+          this.shyqxmShow = true;
+          this.sfjtjjzzShow=true;
+          this.zcfhkszdShow=true;
+          this.xjdShow=true;
+        }else{
+          this.shyqxmShow = false;
+          this.sfjtjjzzShow=false;
+          this.zcfhkszdShow=false;
+          this.xjdShow=false;
+        }
+      },
       getDetail(){
           //流转方式
           this.houseGetDicts("lzfs").then((res) => {
@@ -289,12 +372,6 @@
               this.zrfdbzjlxDictionaries.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);
-            }
-          });
           //流转前房屋用途
           this.houseGetDicts("fwyt").then((res) => {//流转前房屋用途
             console.log(res)
@@ -310,6 +387,20 @@
           });
       },
       onConfirmLzfs(value) {
+        if(value.value === "04" || value.value === "05"){
+          this.houseOwnershipOpen = true;
+          this.landStatus  = "1,5";
+          this.qsrqOpen = true;
+          this.jsrqOpen = true;
+          this.zrnxOpen = true;
+        }else{
+          this.landStatus  = "1";
+          this.houseOwnershipOpen = false;
+          this.qsrqOpen = false;
+          this.jsrqOpen = false;
+          this.zrnxOpen = false;
+          this.$set(this.circulation, "houseOwnership", "2");
+        }
         this.lzfs = value.text;
         this.circulation.lzfs = value.value;
         this.showLzfs = false;
@@ -325,7 +416,157 @@
         });
         this.showZjd = false;
 
-      }, //宅基地列表
+      },
+      mapLook(){
+        this.mapShow = true;
+        setTimeout(() => {
+          this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
+        },1000);
+      },
+      onConfirmXb(data){
+        this.xb = data.text;
+        this.circulation.xb = data.value;
+        this.showxb = false;
+      },
+      /** 模糊查询人员信息 */
+      remoteTransfereeMethod(query) {
+        if (query !== "") {
+          getShyqrs({shyqrdbxm:query,status:1,deptId:this.sysFarmer.deptId}).then((response) => {
+            if (response.code == 200) {
+              this.getObligeeOptions = response.rows.map(function (item) {
+                return {
+                  sqrxm:item.shyqrdbxm,
+                  sqrxb:item.xb,
+                  sqrzjhm:item.shyqrdbzjhm,
+                  sqrnhdm:item.nhdm,
+                  sqrzjlx:item.shyqrdbzjlx,
+                  sqrdh:item.dh,
+                  gyfs:item.gyfs,
+                  dz:item.dz,
+                  deptId:item.deptId,
+                  deptName:item.deptName,
+                  zjddm:item.zjddm,
+                  sfbncjtjjzzcy:item.sfbncjtjjzzcy,
+                  shyqrdm:item.shyqrdm,
+                }
+              })
+              //设置模糊查询的下拉框和滚动条
+              if (this.getObligeeOptions.length > 0) {
+                this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+                //设置模糊查询的和滚动条
+                this.$nextTick(() => {
+                  if (this.getObligeeOptions.length > 4) {
+                    let height = document.getElementById("vanCell").offsetHeight * 4;
+                    document.getElementById("dropList").style.height = height + "px";
+                    document.getElementById("dropList").style.overflow = "scroll";
+                  } else {
+                    document.getElementById("dropList").style.height = "";
+                    document.getElementById("dropList").style.overflow = "visible";
+                  }
+                });
+              } else {
+                this.showDropList = false;
+              }
+            }
+          });
+        } else {
+          this.getObligeeOptions = [];
+          this.showDropList = false;
+        }
+      },
+
+      /** 模糊查询人员信息 */
+      remoteTransfereeMethodTwo(query) {
+        if (query !== "") {
+          getShyqrs({shyqrdbxm:query,status:1,deptId:this.sysFarmer.deptId}).then((response) => {
+            if (response.code == 200) {
+              this.getZrfObligeeOptions = response.rows.map(function (item) {
+                return {
+                  sqrxm:item.shyqrdbxm,
+                  sqrxb:item.xb,
+                  sqrzjhm:item.shyqrdbzjhm,
+                  sqrnhdm:item.nhdm,
+                  sqrzjlx:item.shyqrdbzjlx,
+                  sqrdh:item.dh,
+                  gyfs:item.gyfs,
+                  dz:item.dz,
+                  deptId:item.deptId,
+                  deptName:item.deptName,
+                  zjddm:item.zjddm,
+                  sfbncjtjjzzcy:item.sfbncjtjjzzcy,
+                }
+              })
+              //设置模糊查询的下拉框和滚动条
+              if (this.getZrfObligeeOptions.length > 0) {
+                this.showZrfList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+                //设置模糊查询的和滚动条
+                this.$nextTick(() => {
+                  if (this.getZrfObligeeOptions.length > 4) {
+                    let height = document.getElementById("vanCellZrf").offsetHeight * 4;
+                    document.getElementById("zrfList").style.height = height + "px";
+                    document.getElementById("zrfList").style.overflow = "scroll";
+                  } else {
+                    document.getElementById("zrfList").style.height = "";
+                    document.getElementById("zrfList").style.overflow = "visible";
+                  }
+                });
+              } else {
+                this.showZrfList = false;
+              }
+            }
+          });
+        } else {
+          this.getZrfObligeeOptions = [];
+          this.showZrfList = false;
+        }
+      },
+      shyqrdmxmChange(val){
+        this.$set(this.circulation, "shyqrxm", val.sqrxm);
+        this.$set(this.circulation, "deptId", val.deptId);
+        this.$set(this.circulation, "deptName", val.deptName);
+        this.$set(this.circulation, "sqrzjhm", val.sqrzjhm);
+        this.$set(this.circulation, "sqrzjlx", val.sqrzjlx);
+        this.$set(this.circulation, "sqrnhdm", val.sqrnhdm);
+        this.$set(this.circulation, "gyqk", val.gyfs);
+        this.$set(this.circulation, "xb", val.sqrxb);
+        this.$set(this.circulation, "lxdh", val.sqrdh);
+        this.$set(this.circulation, "hkszd", val.dz);
+        this.$set(this.circulation, "zjddm", val.zjddm);
+        this.$set(this.circulation, "zcfsfbjtjjzzcy", val.sfbncjtjjzzcy);
+        this.$set(this.circulation, "shyqrdm", val.shyqrdm);
+        this.getObligeeOptions=[];
+        this.showDropList = false;
+      },
+
+      zrfdmxmChange(val){
+        this.$set(this.circulation, "zrfdbxm", val.sqrxm);
+        this.$set(this.circulation, "zrfdbzjhm", val.sqrzjhm);
+        this.$set(this.circulation, "zrfdbzjlx", val.sqrzjlx);
+        this.$set(this.circulation, "zrfnhdm", val.sqrnhdm);
+        this.$set(this.circulation, "zrfsfbjtjjzzcy", val.sfbncjtjjzzcy);
+        this.$set(this.circulation, "hkszd", val.dz);
+        this.getObligeeOptions=[];
+        this.showZrfList = false;
+      },
+
+      /** 查找地图中宅基地 */
+      closeMoule: function (data) {
+        this.circulation.zjddm = data;
+        let _this = this;
+        getByLyZjddm(data).then((response) => {
+          this.$set(this.circulation, "lzmj", response.data.zdmj);
+          listHomesteadnmfw({zjddm: data}).then((res) => {
+            res.rows.map(function(item){
+              _this.$set(_this.circulation, "jzmj", Number(_this.circulation.jzmj) + Number(item.jzmj));
+            });
+          });
+          // const baseImgUrl = this.$store.getters.baseRoutingUrl;
+          if(response.data.zdt != null && response.data.zdt !== ""){
+            this.$set(this.form, "xzzp", response.rows[0].zdt);
+          }
+        });
+      },
+      //宅基地列表
       onConfirmShyqrdm(value) {
         this.showShyqrdm = false;
       }, //转出方使用权人代码
@@ -351,28 +592,26 @@
       onConfirmLzqsrq(value) {
         this.circulation.lzqsrq = this.getNowFormatDate(value).substr(0,10);
         this.showlzqsrq = false;
-      }, //流转起始时间
+      }, //流转起始时间onConfirmHtqdrq
+      onConfirmHtqdrq(value) {
+        this.circulation.htqdrq = this.getNowFormatDate(value).substr(0,10);
+        this.showhtqdrq = false;
+      },
       onConfirmLzjsrq(value) {
         this.circulation.lzjsrq = this.getNowFormatDate(value).substr(0,10);
         this.showlzjsrq = false;
       }, //流转结束时间
-      goEdit(){
-        console.log(this.circulation)
-        houseAdd(this.circulation).then(response => {
+      goAdd(){
+        homeLzAdd(this.circulation).then(response => {
           if(response.code = 200){
             this.$toast.success('保存成功');
+            this.back();
+
           }
         });
       },
-      goSubmit(){
-        goApply(this.$route.query.id).then(response => {
-          if(response.code = 200){
-            this.$toast.success('提交成功');
-            setTimeout(function(){
-              window.location.replace("circulationList")
-            },1000)
-          }
-        });
+      back() {
+        setTimeout(() => this.$router.back(-1), 1000)
       },
     },
   }

src/views/yinnong/homestead/circulation/circulationDetail.vue

@@ -1,154 +1,638 @@
 <template>
-    <div class="app-container">
-      <van-nav-bar
-        left-arrow
-        fixed
-        placeholder
-        @click-left="$router.back(-1)"
+  <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>
+    <p class="main_title">转出方信息</p>
+    <div class="main_box">
+      <!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
+      <field-select
+        readonly
+        v-if="houseOwnershipOpen"
+        v-model="circulation.houseOwnership"
+        label="转出方归属"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="请选择"
+        :rules="[{ required: true }]"
+        required
+        @confirm="onConfirmGsf"
+        remote-url="/system/dict/data/type/house_ownership  "
+        :on-remote-response="'data'"
+      />
+      <van-field readonly v-if = "shyqxmShow" v-model="circulation.shyqrxm" label="村集体代表姓名"  input-align="right" label-width="auto" :rules="[{ required: true }]" required />
+      <van-field readonly v-if = "!shyqxmShow" v-model="circulation.shyqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required @input="remoteTransfereeMethod" />
+      <div id="dropList" v-show="showDropList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
+        <van-cell id="vanCell"  v-for="(item, index) in getObligeeOptions" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
+          {{item.sqrxm}}
+        </van-cell>
+      </div>
+      <!--        <van-field-->
+      <!--          readonly-->
+      <!--          clickable-->
+      <!--          v-model="circulation.zjddm"-->
+      <!--          label="宅基地代码"-->
+      <!--          placeholder="请选择"-->
+      <!--          @click="remoteProposerMethod"-->
+      <!--          input-align="right"-->
+      <!--          right-icon="arrow-down" :rules="[{ required: true }]" required-->
+      <!--        />-->
+      <!--        <van-popup v-model="showzjddm" position="bottom">-->
+      <!--          <van-picker-->
+      <!--            show-toolbar-->
+      <!--            :columns="zjdDictionaries"-->
+      <!--            value-key="zjddm"-->
+      <!--            @confirm="onConfirmZjddm"-->
+      <!--            @cancel="showzjddm = false"-->
+      <!--          />-->
+      <!--        </van-popup>-->
+      <van-field
+        v-model="circulation.zjddm"
+        readonly
+        label="宅基地代码"
+        input-align="right"
       >
-        <template #title>
-          <p style="font-weight: bold;">查看宅基地使用权流转</p>
+        <template #button>
+          <van-icon name="../../../../../static/images/22.png"  color="#539FFD" size="20" @click="mapLook"/>
         </template>
-      </van-nav-bar>
-        <p class="main_title">转出方信息</p>
-        <div class="main_box">
-          <van-field
-            readonly
-            v-model="circulation.zjddm"
-            label="宅基地代码"
-            input-align="right"
-          />
-
-          <van-field
-            readonly
-            v-model="circulation.lzfs"
-            label="流转方式"
-            input-align="right"
-          />
-
-          <van-field
-            readonly
-            v-model="circulation.shyqrdm"
-            label="转出方使用权人代码"
-            label-width="auto"
-            input-align="right"
-          />
-          <van-field
-            readonly
-            v-model="circulation.zcfsfbjtjjzzcy == 'Y' ? '是' : '否'"
-            label="是否本集体经济组织成员"
-            label-width="auto"
-            input-align="right"
-
-          />
-        </div>
-
-        <p class="main_title">流转信息</p>
-        <div class="main_box">
-          <van-field label="流转面积(㎡)" readonly v-model="circulation.lzmj" input-align="right" label-width="auto"/>
-          <van-field label="流转单价(元)" readonly v-model="circulation.lzdj" input-align="right" label-width="auto"/>
-          <van-field label="流转费用(元)" readonly v-model="circulation.lzfy" input-align="right" label-width="auto"/>
-          <van-field
-            readonly
-            label="流转起始时间"
-            input-align="right"
-            v-model="circulation.lzqsrq"
-          />
-
-          <van-field
-            readonly
-            label="流转结束时间"
-            input-align="right"
-            v-model="circulation.lzjsrq"
-          />
-
-          <van-field
-            readonly
-            label="流转前房屋用途"
-            input-align="right"
-            label-width="auto"
-            v-model="circulation.lzqfwyt"
-          />
+      </van-field>
+      <field-select
+        v-model="circulation.phlyms"
+        readonly
+        label="盘活利用模式"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="请选择"
+        :rules="[{ required: true }]"
+        required
+        remote-url="/system/dict/data/type/phlyms  "
+        :on-remote-response="'data'"
+      />
+      <van-field
+        readonly
+        clickable
+        v-model="lzfs"
+        label="流转方式"
+        placeholder="请选择"
+        @click="showLzfs = true"
+        input-align="right"
+        right-icon="arrow-down" :rules="[{ required: true }]" required
+      />
+      <van-popup v-model="showLzfs" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="lzfsDictionaries"
+          @confirm="onConfirmLzfs"
+          @cancel="showLzfs = false"
+        />
+      </van-popup>
+      <van-field v-if="!xjdShow" v-model="circulation.zcfxjd" label="现居地" placeholder="现居地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-field v-if="!zcfhkszdShow" v-model="circulation.zcfhkszd" label="户口所在地" placeholder="户口所在地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-cell  v-if="!sfjtjjzzShow" title="是否本集体经济组织成员">
+        <template #right-icon>
+          <van-radio-group v-model="circulation.zcfsfbjtjjzzcy" direction="horizontal">
+            <van-radio name="1">是</van-radio>
+            <van-radio name="0">否</van-radio>
+          </van-radio-group>
+        </template>
+      </van-cell>
+    </div>
+    <p class="main_title">转入方信息</p>
+    <div class="main_box">
+      <van-field
+        v-model="circulation.zrfdbxm"
+        label="转入方代表名称"
+        placeholder="请输入转入方代表名称"
+        label-width="auto"
+        input-align="right"
+        @input="remoteTransfereeMethodTwo"
+      />
+      <div id="zrfList" v-show="showZrfList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
+        <van-cell id="vanCellZrf"  v-for="(item, index) in getZrfObligeeOptions" :key="index" @click="zrfdmxmChange(item)" style="position: relative; z-index: 999;">
+          {{item.sqrxm}}
+        </van-cell>
+      </div>
+      <!--          <van-popup v-model="showZrfdbmc" position="bottom">-->
+      <!--            <van-picker-->
+      <!--              show-toolbar-->
+      <!--              :columns="zrfdbmcDictionaries"-->
+      <!--              @confirm="onConfirmZrfdbmc"-->
+      <!--              @cancel="showZrfdbmc = false"-->
+      <!--            />-->
+      <!--          </van-popup>-->
 
-          <van-field
-            readonly
-            label="流转后房屋用途"
-            input-align="right"
-            label-width="auto"
-            v-model="circulation.lzhfwyt"
-          />
-        </div>
+      <field-select
+        readonly
+        v-model="circulation.zrfdbzjlx"
+        label="转入方代表证件类型"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="请选择"
+        :rules="[{ required: true }]"
+        required
+        remote-url="/system/dict/data/type/zjlx"
+        :on-remote-response="'data'"
+      />
+      <van-field label="转入方代表证件号码" v-model="circulation.zrfdbzjhm" placeholder="请输入证件号码" input-align="right" label-width="auto"/>
+      <van-field v-model="circulation.zrfhkszd" label="户口所在地" placeholder="户口所在地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-cell title="是否本集体经济组织成员">
+        <template #right-icon>
+          <van-radio-group  v-model="circulation.zrfsfbjtjjzzcy" direction="horizontal">
+            <van-radio name="1">是</van-radio>
+            <van-radio name="0">否</van-radio>
+          </van-radio-group>
+        </template>
+      </van-cell>
+    </div>
+    <p class="main_title">流转信息</p>
+    <div class="main_box">
+      <van-field label="流转面积(㎡)" v-model="circulation.lzmj" placeholder="请输入流转面积(㎡)" input-align="right" :rules="[{ required: true }]" required  label-width="auto"/>
+      <van-field label="建筑面积(㎡)" v-model="circulation.jzmj" placeholder="请输入建筑面积(㎡)" input-align="right" :rules="[{ required: true }]" required label-width="auto"/>
+      <van-field label="流转单价(元)" v-model="circulation.lzdj" placeholder="请输入流转单价(元)" input-align="right" label-width="auto"/>
+      <van-field label="流转费用(元)" v-model="circulation.lzfy" placeholder="请输入流转费用(元)" input-align="right" label-width="auto"/>
+      <van-field label="集合收益金额(元)" v-model="circulation.jtsyje" placeholder="请输入集体收益金额(元)" input-align="right" label-width="auto"/>
+      <van-field
+        readonly
+        clickable
+        v-model="circulation.htqdrq"
+        label="合同签订日期"
+        placeholder="请选择合同签订日期"
+        @click="showhtqdrq = true"
+        input-align="right"
+        :rules="[{ required: true }]"
+        required
+        right-icon="arrow-down"
+      />
+      <van-popup v-model="showhtqdrq" position="bottom">
+        <van-datetime-picker
+          v-model="currentDate"
+          type="date"
+          title="选择年月日"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @confirm="onConfirmHtqdrq"
+        />
+      </van-popup>
+      <van-field
+        readonly
+        clickable
+        v-if="qsrqOpen"
+        v-model="circulation.lzqsrq"
+        label="流转起始时间"
+        placeholder="请选择起始时间"
+        @click="showlzqsrq = true"
+        input-align="right"
+        right-icon="arrow-down"
+      />
+      <van-popup v-model="showlzqsrq" position="bottom">
+        <van-datetime-picker
+          v-model="currentDate"
+          type="date"
+          title="选择年月日"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @confirm="onConfirmLzqsrq"
+        />
+      </van-popup>
 
-        <p class="main_title">转入方信息</p>
-        <div class="main_box">
-          <van-field
-            readonly
-            label="转入方代表名称"
-            label-width="auto"
-            input-align="right"
-            v-model="circulation.zrfdbmc"
-          />
+      <van-field
+        readonly
+        clickable
+        v-model="circulation.lzjsrq"
+        v-if="jsrqOpen"
+        label="流转结束时间"
+        placeholder="请选择结束时间"
+        @click="showlzjsrq = true"
+        input-align="right"
+        right-icon="arrow-down"
+      />
+      <van-popup v-model="showlzjsrq" position="bottom">
+        <van-datetime-picker
+          v-model="currentDate"
+          type="date"
+          title="选择年月日"
+          :min-date="minDate"
+          :max-date="maxDate"
+          @confirm="onConfirmLzjsrq"
+        />
+      </van-popup>
 
-          <van-field
-            readonly
-            label="转入方代表证件类型"
-            label-width="auto"
-            input-align="right"
-            v-model="circulation.zrfdbzjlx"
-          />
-          <van-field readonly label="转入方代表证件号码" v-model="circulation.zrfdbzjhm" input-align="right" label-width="auto"/>
-          <van-field readonly label="是否本集体经济组织成员" v-model="circulation.zrfsfbjtjjzzcy == 'Y' ? '是' : '否'" input-align="right" label-width="auto"/>
-        </div>
+      <van-field
+        readonly
+        clickable
+        v-model="lzqfwyt"
+        label="流转前房屋用途"
+        placeholder="请选择流转前房屋用途"
+        @click="showLzqfwyt = true"
+        input-align="right"
+        right-icon="arrow-down"
+        label-width="auto"
+      />
+      <van-popup v-model="showLzqfwyt" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="lzqfwytDictionaries"
+          @confirm="onConfirmLzqfwyt"
+          @cancel="showLzqfwyt = false"
+        />
+      </van-popup>
 
-        <p class="main_title">其他</p>
-        <div class="main_box">
-          <van-field readonly label="所有权人代表姓名" v-model="circulation.suyqrdbxm" input-align="right" label-width="auto"/>
-          <van-field readonly label="所有权人意见" v-model="circulation.suyqryj" input-align="right" label-width="auto"/>
-          <van-field readonly label="备注" v-model="circulation.bz" input-align="right" label-width="auto"/>
-        </div>
+      <van-field
+        readonly
+        clickable
+        v-model="lzhfwyt"
+        label="流转后房屋用途"
+        placeholder="请选择流转后房屋用途"
+        @click="showLzhfwyt = true"
+        input-align="right"
+        right-icon="arrow-down"
+        label-width="auto"
+      />
+      <van-popup v-model="showLzhfwyt" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="lzhfwytDictionaries"
+          @confirm="onConfirmLzhfwyt"
+          @cancel="showLzhfwyt = false"
+        />
+      </van-popup>
+      <van-field v-if="zrnxOpen" label="转入年限" v-model="circulation.zrnx" placeholder="请输入转入年限" input-align="right" label-width="auto"/>
+    </div>
+    <p class="main_title">其他</p>
+    <div class="main_box">
+      <van-field label="所有权人代表姓名" v-model="circulation.suyqrdbxm" placeholder="请输入姓名" input-align="right" label-width="auto"/>
+      <van-field label="村集体意见" v-model="circulation.suyqryj" placeholder="请输入内容" input-align="right" label-width="auto"/>
+      <van-field label="备注" v-model="circulation.bz" placeholder="请输入备注" input-align="right" label-width="auto"/>
+    </div>
+    <van-dialog v-model="mapShow" show-cancel-button>
+      <MapGisObtainTc ref="zjdProductResh" :shqrxm="circulation.shyqrxm" :landStatus="landStatus" :deptId="sysFarmer.deptId" @closeMoule="closeMoule"></MapGisObtainTc>
+    </van-dialog>
+    <div style="padding: 16px 0;">
+      <van-row>
+        <van-col span="24" align="center">
+          <van-button type="info" native-type="submit" class="submitButton" @click="back">返<i style="margin-right: 1em;"></i>回</van-button>
+        </van-col>
+      </van-row>
+      <div class="clear"></div>
     </div>
+  </div>
 </template>
 
 <script>
-import { getLz } from "@/api/onlineHome/homestead/circulation";
-export default {
-    name: "circulationDetail",
-  data() {
-    return {
-      value: '',
-      houseApplyStatus:[],
-      circulation:[],
-    };
-  },
-  created() {
-    this.getDetail();
-  },
-  methods: {
-    getDetail(){
-      getLz(this.$route.query.id).then(response => {
-        this.circulation = response.data;
-        //流转方式
-        this.houseGetDicts("lzfs").then((res) => {
-          this.circulation.lzfs = this.selectDictLabel(res.data, response.data.lzfs);
+  import { getLz , zjdzd , getByZjddm , edit , goApply,homeLzAdd } from "@/api/onlineHome/homestead/circulation";
+  import {  getShyqrs,getByLyZjddm,listHomesteadnmfw} from "@/api/sunVillage_info/homestead/paidExit";
+  import FieldSelect from "@/components/form/FieldSelect";
+  import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
+  export default {
+    name: "circulationAdd",
+    components: { MapGisObtainTc,FieldSelect },
+    data() {
+      return {
+        lzfsDictionaries: [],//流转方式
+        shyqrdmDictionaries: [],//转出方使用权人代码
+        lzqfwytDictionaries: [],//流转前房屋类型
+        lzhfwytDictionaries: [],//流转后房屋类型
+        zrfdbmcDictionaries: [],//转入方代表名称
+        zrfdbzjlxDictionaries: [],//转入方证件类型
+        zjdDictionaries: [],//宅基地列表
+        getObligeeOptions:[],
+        getZrfObligeeOptions:[],
+        xbDictionaries:[],//申请人证件类型
+        xb:'男',
+        lzfs: '转让',//流转方式
+        shyqrdm: '',//转出方使用权人代码
+        lzqfwyt: '',//流转前房屋类型
+        lzhfwyt: '',//流转后房屋类型
+        zrfdbmc: '',//转入方代表名称
+        zrfdbzjlx: '',//转入方证件类型
+        sysFarmer:{deptId:this.$store.state.user.loginDeptId,memberName:""},
+        landStatus:"1",
+        zjd: [],//宅基地列表
+        sfjtjjzzShow:false,
+        zcfhkszdShow:false,
+        xjdShow:false,
+        qsrqOpen:false,
+        shyqxmShow:false,
+        houseOwnershipOpen:false,
+        jsrqOpen:false,
+        zrnxOpen:false,
+        showhtqdrq:false,
+        showDropList:false,
+        showZrfList:false,
+        showxb: false,
+        showLzfs: false,
+        showShyqrdm: false,
+        showLzqfwyt: false,
+        showLzhfwyt: false,
+        showZrfdbmc: false,
+        showZrfdbzjlx: false,
+        showZjd:false,
+        showlzqsrq:false,
+        showlzjsrq:false,
+        minDate: new Date(),
+        maxDate: new Date(2025, 10, 1),
+        currentDate: new Date(),
+        circulation: {jzmj:0.00,zcfsfbjtjjzzcy:"Y",zrfsfbjtjjzzcy:"Y",lzfs:"01",houseOwnership:"2",phlyms:"10"},
+        mapShow: false,
+      };
+    },
+    created() {
+      this.getDetail();
+    },
+    methods: {
+      onConfirmGsf(val){
+        if(val === "1"){
+          this.$set(this.circulation, "shyqrxm", this.$store.state.user.deptName+"村集体");
+          this.landStatus  = "2";
+          this.shyqxmShow = true;
+          this.sfjtjjzzShow=true;
+          this.zcfhkszdShow=true;
+          this.xjdShow=true;
+          this.zjddm = null;
+        }else{
+          this.shyqxmShow = false;
+          this.sfjtjjzzShow=false;
+          this.zcfhkszdShow=false;
+          this.xjdShow=false;
+        }
+      },
+      getDetail(){
+        getLz(this.$route.query.id).then(response => {
+          this.landStatus  = "4";
+          if(response.data.houseOwnership === "1"){
+            this.shyqxmShow = true;
+            this.sfjtjjzzShow=true;
+            this.zcfhkszdShow=true;
+            this.xjdShow=true;
+            this.houseOwnershipOpen = true;
+            this.qsrqOpen = true;
+            this.jsrqOpen = true;
+            this.zrnxOpen = true;
+          }
+          //流转方式
+          this.houseGetDicts("lzfs").then((res) => {
+            for( let i = 0 ; i < res.data.length ; i++){
+              if(res.data[i].dictSort < 6){
+                this.lzfsDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
+              }
+            }
+            this.lzfs = this.selectDictLabel(res.data, response.data.lzfs);
+          });
+          //转入方证件类型
+          this.houseGetDicts("zjlx").then((res) => {
+            for( let i = 0 ; i < res.data.length ; i++){
+              this.zrfdbzjlxDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
+            }
+            this.zrfdbzjlx = this.selectDictLabel(res.data, response.data.zrfdbzjlx);
+          });
+          //流转前房屋用途
+          this.houseGetDicts("fwyt").then((res) => {//流转前房屋用途
+            console.log(res)
+            for( let i = 0 ; i < res.data.length ; i++){
+              this.lzqfwytDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
+            }
+            this.lzqfwyt = this.selectDictLabel(res.data, response.data.lzqfwyt);
+          });
+          //流转后房屋用途
+          this.houseGetDicts("fwyt").then((res) => {//流转后房屋用途
+            for( let i = 0 ; i < res.data.length ; i++){
+              this.lzhfwytDictionaries.push({text:res.data[i].dictLabel,value:res.data[i].dictValue})
+            }
+            this.lzhfwyt = this.selectDictLabel(res.data, response.data.lzhfwyt);
+          });
+
+          this.circulation = response.data;
         });
-        //转入方证件类型
-        this.houseGetDicts("zjlx").then((res) => {
-          this.circulation.zrfdbzjlx = this.selectDictLabel(res.data, response.data.zrfdbzjlx);
+      },
+      onConfirmLzfs(value) {
+        if(value.value === "04" || value.value === "05"){
+          this.houseOwnershipOpen = true;
+          this.qsrqOpen = true;
+          this.jsrqOpen = true;
+          this.zrnxOpen = true;
+        }else{
+          this.houseOwnershipOpen = false;
+          this.qsrqOpen = false;
+          this.jsrqOpen = false;
+          this.zrnxOpen = false;
+          this.$set(this.circulation, "houseOwnership", "2");
+        }
+        this.lzfs = value.text;
+        this.circulation.lzfs = value.value;
+        this.showLzfs = false;
+      }, //流转方式
+      onConfirmZjd(value) {
+        this.circulation.zjddm = value;
+        var form = {};
+        form.zjddm = value;
+        getByZjddm(form).then(qlrRes => {
+          console.log(qlrRes.data.shyqrdm)
+          this.circulation.shyqrdm = qlrRes.data.shyqrdm;
+          this.$forceUpdate();
         });
-        //流转前房屋用途
-        this.houseGetDicts("fwyt").then((res) => {//流转前房屋用途
-          this.circulation.lzqfwyt = this.selectDictLabel(res.data, response.data.lzqfwyt);
-          this.circulation.lzhfwyt = this.selectDictLabel(res.data, response.data.lzhfwyt);
+        this.showZjd = false;
+
+      },
+      mapLook(){
+        this.mapShow = true;
+        setTimeout(() => {
+          this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
+        },1000);
+      },
+      onConfirmXb(data){
+        this.xb = data.text;
+        this.circulation.xb = data.value;
+        this.showxb = false;
+      },
+      /** 模糊查询人员信息 */
+      remoteTransfereeMethod(query) {
+        if (query !== "") {
+          getShyqrs({shyqrdbxm:query,status:1,deptId:this.sysFarmer.deptId}).then((response) => {
+            if (response.code == 200) {
+              this.getObligeeOptions = response.rows.map(function (item) {
+                return {
+                  sqrxm:item.shyqrdbxm,
+                  sqrxb:item.xb,
+                  sqrzjhm:item.shyqrdbzjhm,
+                  sqrnhdm:item.nhdm,
+                  sqrzjlx:item.shyqrdbzjlx,
+                  sqrdh:item.dh,
+                  gyfs:item.gyfs,
+                  dz:item.dz,
+                  deptId:item.deptId,
+                  deptName:item.deptName,
+                  zjddm:item.zjddm,
+                  sfbncjtjjzzcy:item.sfbncjtjjzzcy,
+                  shyqrdm:item.shyqrdm,
+                }
+              })
+              //设置模糊查询的下拉框和滚动条
+              if (this.getObligeeOptions.length > 0) {
+                this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+                //设置模糊查询的和滚动条
+                this.$nextTick(() => {
+                  if (this.getObligeeOptions.length > 4) {
+                    let height = document.getElementById("vanCell").offsetHeight * 4;
+                    document.getElementById("dropList").style.height = height + "px";
+                    document.getElementById("dropList").style.overflow = "scroll";
+                  } else {
+                    document.getElementById("dropList").style.height = "";
+                    document.getElementById("dropList").style.overflow = "visible";
+                  }
+                });
+              } else {
+                this.showDropList = false;
+              }
+            }
+          });
+        } else {
+          this.getObligeeOptions = [];
+          this.showDropList = false;
+        }
+      },
+
+      /** 模糊查询人员信息 */
+      remoteTransfereeMethodTwo(query) {
+        if (query !== "") {
+          getShyqrs({shyqrdbxm:query,status:1,deptId:this.sysFarmer.deptId}).then((response) => {
+            if (response.code == 200) {
+              this.getZrfObligeeOptions = response.rows.map(function (item) {
+                return {
+                  sqrxm:item.shyqrdbxm,
+                  sqrxb:item.xb,
+                  sqrzjhm:item.shyqrdbzjhm,
+                  sqrnhdm:item.nhdm,
+                  sqrzjlx:item.shyqrdbzjlx,
+                  sqrdh:item.dh,
+                  gyfs:item.gyfs,
+                  dz:item.dz,
+                  deptId:item.deptId,
+                  deptName:item.deptName,
+                  zjddm:item.zjddm,
+                  sfbncjtjjzzcy:item.sfbncjtjjzzcy,
+                }
+              })
+              //设置模糊查询的下拉框和滚动条
+              if (this.getZrfObligeeOptions.length > 0) {
+                this.showZrfList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+                //设置模糊查询的和滚动条
+                this.$nextTick(() => {
+                  if (this.getZrfObligeeOptions.length > 4) {
+                    let height = document.getElementById("vanCellZrf").offsetHeight * 4;
+                    document.getElementById("zrfList").style.height = height + "px";
+                    document.getElementById("zrfList").style.overflow = "scroll";
+                  } else {
+                    document.getElementById("zrfList").style.height = "";
+                    document.getElementById("zrfList").style.overflow = "visible";
+                  }
+                });
+              } else {
+                this.showZrfList = false;
+              }
+            }
+          });
+        } else {
+          this.getZrfObligeeOptions = [];
+          this.showZrfList = false;
+        }
+      },
+      shyqrdmxmChange(val){
+        this.$set(this.circulation, "shyqrxm", val.sqrxm);
+        this.$set(this.circulation, "deptId", val.deptId);
+        this.$set(this.circulation, "deptName", val.deptName);
+        this.$set(this.circulation, "sqrzjhm", val.sqrzjhm);
+        this.$set(this.circulation, "sqrzjlx", val.sqrzjlx);
+        this.$set(this.circulation, "sqrnhdm", val.sqrnhdm);
+        this.$set(this.circulation, "gyqk", val.gyfs);
+        this.$set(this.circulation, "xb", val.sqrxb);
+        this.$set(this.circulation, "lxdh", val.sqrdh);
+        this.$set(this.circulation, "hkszd", val.dz);
+        this.$set(this.circulation, "zjddm", val.zjddm);
+        this.$set(this.circulation, "zcfsfbjtjjzzcy", val.sfbncjtjjzzcy);
+        this.$set(this.circulation, "shyqrdm", val.shyqrdm);
+        this.getObligeeOptions=[];
+        this.showDropList = false;
+      },
+
+      zrfdmxmChange(val){
+        this.$set(this.circulation, "zrfdbxm", val.sqrxm);
+        this.$set(this.circulation, "zrfdbzjhm", val.sqrzjhm);
+        this.$set(this.circulation, "zrfdbzjlx", val.sqrzjlx);
+        this.$set(this.circulation, "zrfnhdm", val.sqrnhdm);
+        this.$set(this.circulation, "zrfsfbjtjjzzcy", val.sfbncjtjjzzcy);
+        this.$set(this.circulation, "hkszd", val.dz);
+        this.getObligeeOptions=[];
+        this.showZrfList = false;
+      },
+
+      /** 查找地图中宅基地 */
+      closeMoule: function (data) {
+        this.circulation.zjddm = data;
+        let _this = this;
+        getByLyZjddm(data).then((response) => {
+          this.$set(this.circulation, "lzmj", response.data.zdmj);
+          listHomesteadnmfw({zjddm: data}).then((res) => {
+            res.rows.map(function(item){
+              _this.$set(_this.circulation, "jzmj", Number(_this.circulation.jzmj) + Number(item.jzmj));
+            });
+          });
+          // const baseImgUrl = this.$store.getters.baseRoutingUrl;
+          if(response.data.zdt != null && response.data.zdt !== ""){
+            this.$set(this.form, "xzzp", response.rows[0].zdt);
+          }
         });
-      });
-    }
-  },
-}
+      },
+      //宅基地列表
+      onConfirmShyqrdm(value) {
+        this.showShyqrdm = false;
+      }, //转出方使用权人代码
+      onConfirmLzqfwyt(value) {
+        this.lzqfwyt = value.text;
+        this.circulation.lzqfwyt = value.value;
+        this.showLzqfwyt = false;
+      }, //流转前房屋用途
+      onConfirmLzhfwyt(value) {
+        this.lzhfwyt = value.text;
+        this.circulation.lzhfwyt = value.value;
+        this.showLzhfwyt = false;
+      }, //流转后房屋用途
+      onConfirmZrfdbmc(value) {
+        this.value = value;
+        this.showZrfdbmc = false;
+      }, //转入方代表名称
+      onConfirmZrfdbzjlx(value) {
+        this.zrfdbzjlx = value.text;
+        this.circulation.zrfdbzjlx = value.value;
+        this.showZrfdbzjlx = false;
+      }, //转入方代表证件类型
+      onConfirmLzqsrq(value) {
+        this.circulation.lzqsrq = this.getNowFormatDate(value).substr(0,10);
+        this.showlzqsrq = false;
+      }, //流转起始时间onConfirmHtqdrq
+      onConfirmHtqdrq(value) {
+        this.circulation.htqdrq = this.getNowFormatDate(value).substr(0,10);
+        this.showhtqdrq = false;
+      },
+      onConfirmLzjsrq(value) {
+        this.circulation.lzjsrq = this.getNowFormatDate(value).substr(0,10);
+        this.showlzjsrq = false;
+      }, //流转结束时间
+      back() {
+        setTimeout(() => this.$router.back(-1), 1000)
+      },
+    },
+  }
 </script>
 
 <style scoped lang="scss">
   .app-container {
-    padding-bottom: 5%;
   }
   .main_title{
     font-size: 0.4rem;

src/views/yinnong/homestead/circulation/circulationList.vue

@@ -21,21 +21,21 @@
         @load="getList"
       >
         <van-swipe-cell v-for="(item,index) in applicationList" :key="index">
-          <van-cell :title="item.shyqrdm" :value="item.auditStatus" center :to="{name:'circulationDetail', query: {id:item.id}}">
+          <van-cell :title="item.shyqrxm" :value="item.auditStatus" center :to="{name:'circulationDetail', query: {id:item.id}}">
             <template #icon>
               <van-icon name="../../../static/images/onlineHome/icon_zjd2.png" size="30" color="#539FFD" style="margin-right: 10px;" />
             </template>
             <template #label>
-              <p><b style="color: #FFA63E;">{{item.lzfs}}</b><i style="margin-right: 0.5rem;"></i><b style="color: #333333;">{{item.zrfdbmc}}</b><i style="margin-right: 0.5rem;"></i>{{item.lzmj}}㎡</p>
+              <p><b style="color: #FFA63E;">{{item.lzfs}}</b><i style="margin-right: 0.5rem;"></i><b style="color: #333333;" v-if="item.lzfs === '出租' || item.lzfs === '入股' ">乙方：{{item.zrfdbxm}}</b><b style="color: #333333;" v-else>转入方：{{item.zrfdbxm}}</b><i style="margin-right: 0.5rem;"></i>{{item.lzmj}}㎡</p>
             </template>
           </van-cell>
           <template #right>
             <van-row>
               <van-col>
-                <van-button square text="修改" type="info" v-if="item.auditStatus=='草稿'" class="delete-button" :to="{name:'circulationModify', query: {id:item.id}}" />
+                <van-button square text="修改" type="info" class="delete-button" :to="{name:'circulationModify', query: {id:item.id}}" />
               </van-col>
               <van-col>
-                <van-button square text="删除" type="danger" v-if="item.auditStatus=='草稿'" @click="deleteList(item.id,index)" class="delete-button" />
+                <van-button square text="删除" type="danger" @click="deleteList(item.id,index)" class="delete-button" />
               </van-col>
             </van-row>
           </template>

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

@@ -0,0 +1,678 @@
+<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="header_main">
+        添加无偿退出
+        <div class="return_btn" @click="onClickLeft"></div>
+        <!--      <div class="add_btn" @click="goAdd"></div>-->
+      </div>
+
+      <p class="main_title">申请人基本信息</p>
+      <van-form ref="_Form">
+      <div class="main_box">
+<!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
+        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required @input="remoteTransfereeMethod" />
+        <div id="dropList" v-show="showDropList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
+          <van-cell id="vanCell"  v-for="(item, index) in getObligeeOptions" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
+            {{item.sqrxm}}
+          </van-cell>
+        </div>
+<!--        <van-field-->
+<!--          readonly-->
+<!--          clickable-->
+<!--          v-model="circulation.zjddm"-->
+<!--          label="宅基地代码"-->
+<!--          placeholder="请选择"-->
+<!--          @click="remoteProposerMethod"-->
+<!--          input-align="right"-->
+<!--          right-icon="arrow-down" :rules="[{ required: true }]" required-->
+<!--        />-->
+<!--        <van-popup v-model="showzjddm" position="bottom">-->
+<!--          <van-picker-->
+<!--            show-toolbar-->
+<!--            :columns="zjdDictionaries"-->
+<!--            value-key="zjddm"-->
+<!--            @confirm="onConfirmZjddm"-->
+<!--            @cancel="showzjddm = false"-->
+<!--          />-->
+<!--        </van-popup>-->
+        <van-field
+          v-model="circulation.zjddm"
+          label="宅基地代码"
+          input-align="right"
+        >
+          <template #button>
+            <van-icon name="../../../../../static/images/22.png"  color="#539FFD" size="20" @click="mapLook"/>
+          </template>
+        </van-field>
+        <van-field
+          readonly
+          clickable
+          v-model="xb"
+          label="性别"
+          placeholder="请选择"
+          @click="showxb = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showxb" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="xbDictionaries"
+            @confirm="onConfirmXb"
+            @cancel="showxb = false"
+          />
+        </van-popup>
+        <van-field v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <van-field v-model="circulation.lxdh" label="联系电话" placeholder="联系电话" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <field-select
+          v-model="circulation.gyqk"
+          label="共有情况"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择共有情况"
+          :rules="[{ required: true }]"
+          required
+          remote-url="/system/dict/data/type/house_yes_no"
+          :on-remote-response="'data'"
+        />
+        <van-field v-model="circulation.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      </div>
+
+        <p class="main_title">拟申请退出宅基地-面积</p>
+        <van-field v-model="circulation.tcmj" label="面积(㎡)" placeholder="请输入面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+        <field-select
+          v-model="circulation.xz"
+          label="现状"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择现状"
+          :rules="[{ required: true }]"
+          required
+          remote-url="/system/dict/data/type/dsxz"
+          :on-remote-response="'data'"
+        />
+        <p class="main_title">拟申请退出宅基地-四至</p>
+        <van-field v-model="circulation.zjdszd" label="东至" placeholder="东至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <van-field v-model="circulation.zjdszn" label="南至" placeholder="南至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <van-field v-model="circulation.zjdszx" label="西至" placeholder="西至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <van-field v-model="circulation.zjdszb" label="北至" placeholder="北至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <p class="main_title">拟申请退出宅基地情况-地类</p>
+        <field-select
+          v-model="circulation.dldm"
+          label="地类"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择现状"
+          :rules="[{ required: true }]"
+          required
+          remote-url="/system/dict/data/type/geographic_type"
+          :on-remote-response="'data'"
+        />
+        <p class="main_title">退出宅基地情况</p>
+        <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.jzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+      <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
+          clickable
+          v-model="tclx"
+          label="退出类型"
+          placeholder="请选择退出类型"
+          @click="showtclx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showtclx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="tclxDictionaries"
+            @confirm="onConfirmTclx"
+            @cancel="showtclx = false"
+          />
+        </van-popup>-->
+
+        <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.tcqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
+      </div>
+        <p class="main_title">现居住情况</p>
+        <van-field v-model="circulation.xjzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+        <van-field v-model="circulation.xqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
+        <van-field v-model="circulation.xjzdd" label="居住地点" placeholder="请输入居住地点" input-align="right" label-width="auto" />
+        <p class="main_title">其他</p>
+
+        <van-field v-model="circulation.sqly" label="申请理由" placeholder="请输入申请理由" input-align="right" label-width="auto"/>
+        <field-date-picker
+          v-model="circulation.sqrq"
+          label="申请日期"
+          placeholder="选择日期"
+          :rules="[{ required: true }]"
+          formatter="yyyy-MM-dd"
+          required
+        />
+        <van-field v-model="circulation.jbrxm" label="经办人姓名" placeholder="请输入经办人姓名" input-align="right" label-width="auto"/>
+        <field-date-picker
+          v-model="circulation.pzrq"
+          label="批准日期"
+          placeholder="选择日期"
+          :rules="[{ required: true }]"
+          formatter="yyyy-MM-dd"
+          required
+        />
+        <field-date-picker
+          v-model="circulation.barq"
+          label="备案日期"
+          placeholder="选择日期"
+          :rules="[{ required: true }]"
+          formatter="yyyy-MM-dd"
+          required
+        />
+
+        <van-dialog v-model="mapShow" show-cancel-button>
+          <MapGisObtainTc ref="zjdProductResh" :shqrxm="circulation.sqrxm" :landStatus="landStatus" :deptId="sysFarmer.deptId" @closeMoule="closeMoule"></MapGisObtainTc>
+        </van-dialog>
+        <!-- 3组附件 -->
+        <van-popup
+          v-model="attachmentVisible"
+          closeable
+          position="top"
+          :style="{ height: '61.8%' }"
+          :close-on-click-overlay="proposerStatus == 1"
+          :lazy-render="false"
+        >
+          <van-tabs type="card" style="padding-top: 1.35rem;" color="#1D6FE9" :lazy-render="false" v-model="attachmentActive" ref="attachmentDialog">
+            <van-tab title="退出附件" key="0">
+              <home-apply-upload-comp
+                :business-type="houseApplyUploadComp.businessType"
+                :house-apply-status="houseApplyUploadComp.homeApplyStatus"
+                :process-key="houseApplyUploadComp.processKey"
+                :proposer-id="houseApplyUploadComp.proposerId"
+                :table-name="houseApplyUploadComp.tableName"
+                :readonly="houseApplyUploadComp.readonly"
+                :userName="sysFarmer.memberName"
+                :full="houseApplyUploadComp.full"
+                @uploadFinished="onUploadFinished"
+              >
+              </home-apply-upload-comp>
+            </van-tab>
+          </van-tabs>
+        </van-popup>
+      </van-form>
+      <van-goods-action style="z-index: 999;">
+        <van-goods-action-icon icon="label-o" text="附件" @click="openAttachment" color="#1D6FE9" />
+          <van-goods-action-button type="info" text="保存"  @click="goSubmit(false)" />
+      </van-goods-action>
+    </div>
+</template>
+
+<script>
+import {  getShyqrs,dyAdd,zyyctcApply,getByLyZjddm,listHomesteadnmfw} from "@/api/sunVillage_info/homestead/paidExit";
+import HomeApplyUploadComp from "@/components/home/HomeApplyUploadCompTc";
+import FieldSelect from "@/components/form/FieldSelect";
+import FieldDatePicker from "@/components/form/FieldDatePicker";
+import {formatDate} from "element-ui/src/utils/date-util.js";
+import { } from "@/api/onlineHome/homestead/paidExit";
+import {Notify} from "vant";
+import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
+import Cookies from "js-cookie";
+const PROPOSER_VIEW = 1;
+// 工作流名称
+const PROPOSER_STAGE_BASE_APPLY_ACTIVITY = 'home_usetc';
+// 附件表名
+const PROPOSER_STAGE_BASE_APPLY_TABLE = 't_homeuse_zyyctc';
+// 其他
+const PROPOSER_MODULE = 'home';
+export default {
+  name: "paidExitAdd",
+  components: { MapGisObtainTc,FieldSelect,FieldDatePicker,HomeApplyUploadComp },
+  data() {
+    return {
+      tcqllxDictionaries:[],//退出权利类型
+      tclxDictionaries:[],//退出类型
+      tcfsDictionaries:[],//退出方式
+      xbDictionaries:[],//申请人证件类型
+      bcfsDictionaries:[],//补偿方式
+      zjdDictionaries:[],//宅基地代码
+      getObligeeOptions:[],//下拉框列表
+      sysFarmer:{deptId:this.$store.state.user.loginDeptId,memberName:""},
+      tcqllx:'整体退出',
+      tclx:'有偿退出',
+      tcfs:'使用权',
+      xb:'男',
+      bcfs:'',
+      zjddm:'',
+      landStatus:"1",
+      showtcqllx: false,
+      showtclx: false,
+      showtcfs: false,
+      showxb: false,
+      showbcfs: false,
+      showzjddm: false,
+      showDropList: false,//是否显示下拉框
+      attachmentVisible:false,
+      active: 0,
+      // 表单意图
+      proposerStatus: PROPOSER_VIEW,
+      // 家庭成员tab
+      familyMembersActive: 0,
+      circulation:{
+        // 申请类型  1-宅基地退出
+        sqlx: '1',
+        xb:"1",
+        gyqk:"1",
+        xz:"1",
+        tcfs:"01",
+        jzmj:0.00,
+        tcqllx:"01",
+        xjzmj:0.00,
+        dldm:"10",
+        // 退出类型  01-有偿退出   02-无偿退出
+        tclx: '02',
+      },
+      // 当前附件tab
+      attachmentActive: 0,
+      // 申请附件树
+      houseApplyUploadComp: {
+        businessType: PROPOSER_MODULE,
+        proposerId: -1,
+        homeApplyStatus: "11",
+        processKey: PROPOSER_STAGE_BASE_APPLY_ACTIVITY,
+        tableName: PROPOSER_STAGE_BASE_APPLY_TABLE,
+        attachmentList: [],
+        readonly: false,
+        full: false,
+      },
+      mapShow: false,
+    };
+  },
+  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("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("sys_user_sex").then((res) => {
+        for(var i = 0 ; i < res.data.length ; i++){
+          this.xbDictionaries.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]);
+      });*/
+      // getExitProposerDetail().then(res => {
+      //   if (res.data) {
+      //     let data = res.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;
+      //     }
+      //   }
+      // });
+    },
+    /*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();
+      });
+    },*/
+    // 初次申请草稿的附件上传
+    onUploadFinished(fileIdList) {
+      this.$set(this.circulation, "fileList", fileIdList);
+    },
+    onConfirmZjddm(data){
+      console.log(data);
+      this.showzjddm = false;
+      if (data) {
+        this.$set(this.circulation, 'zjddm', data.zjddm);
+        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();
+    },
+    onConfirmXb(data){
+      this.xb = data.text;
+      this.circulation.xb = 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;
+    },
+    goSubmit(submit){
+      console.log(this.circulation);
+      this.$refs._Form.validate().then(() => {
+      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)
+    },
+    remoteProposerMethod() {
+      this.showzjddm = true;
+      this.zjdDictionaries = [];
+      if (this.circulation.sqrxm) {
+        getShyqrs({shyqrdbxm:this.circulation.sqrxm}).then(response => {
+          this.zjdDictionaries = response.data.map(item => {
+            return {
+              zjddm: item.zjddm,
+              shyqrdbxm: item.shyqrdbxm,
+              shyqrdbzjlx: item.shyqrdbzjlx,
+              shyqrdbzjhm: item.shyqrdbzjhm
+            }
+          });
+        });
+      } else {
+        this.zjdDictionaries = [];
+      }
+    },
+    /** 模糊查询人员信息 */
+    remoteTransfereeMethod(query) {
+      if (query !== "") {
+        getShyqrs({shyqrdbxm:query,status:1,deptId:this.sysFarmer.deptId}).then((response) => {
+          if (response.code == 200) {
+            this.getObligeeOptions = response.rows.map(function (item) {
+            return {
+                      sqrxm:item.shyqrdbxm,
+                      sqrxb:item.xb,
+                      sqrzjhm:item.shyqrdbzjhm,
+                      sqrnhdm:item.nhdm,
+                      sqrzjlx:item.shyqrdbzjlx,
+                      sqrdh:item.dh,
+                      gyfs:item.gyfs,
+                      dz:item.dz,
+                      deptId:item.deptId,
+                      deptName:item.deptName,
+                      zjddm:item.zjddm,
+                    }
+            })
+            //设置模糊查询的下拉框和滚动条
+            if (this.getObligeeOptions.length > 0) {
+              this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+              //设置模糊查询的和滚动条
+              this.$nextTick(() => {
+                if (this.getObligeeOptions.length > 4) {
+                  let height = document.getElementById("vanCell").offsetHeight * 4;
+                  document.getElementById("dropList").style.height = height + "px";
+                  document.getElementById("dropList").style.overflow = "scroll";
+                } else {
+                  document.getElementById("dropList").style.height = "";
+                  document.getElementById("dropList").style.overflow = "visible";
+                }
+              });
+            } else {
+              this.showDropList = false;
+            }
+          }
+        });
+      } else {
+        this.getObligeeOptions = [];
+        this.showDropList = false;
+      }
+    },
+    // 打开附件树
+    openAttachment() {
+      this.attachmentVisible = true;
+      if(this.attachmentActive == this.active)
+        this.$nextTick(() => {
+          this.$refs.attachmentDialog.scrollTo(this.active);
+        });
+    },
+    shyqrdmxmChange(val){
+      this.$set(this.circulation, "sqrxm", val.sqrxm);
+      this.$set(this.circulation, "deptId", val.deptId);
+      this.$set(this.circulation, "deptName", val.deptName);
+      this.$set(this.circulation, "sqrzjhm", val.sqrzjhm);
+      this.$set(this.circulation, "sqrzjlx", val.sqrzjlx);
+      this.$set(this.circulation, "sqrnhdm", val.sqrnhdm);
+      this.$set(this.circulation, "gyqk", val.gyfs);
+      this.$set(this.circulation, "xb", val.sqrxb);
+      this.$set(this.circulation, "lxdh", val.sqrdh);
+      this.$set(this.circulation, "hkszd", val.dz);
+      this.$set(this.circulation, "zjddm", val.zjddm);
+      this.getObligeeOptions=[];
+      this.showDropList = false;
+    },
+    mapLook(){
+      this.mapShow = true;
+      setTimeout(() => {
+        this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
+      },1000);
+    },
+    // 获取日期, yyyy-MM-dd
+    getDate(d) {
+      return formatDate(d ? d : new Date(), 'yyyy-MM-dd');
+    },
+    /** 查找地图中宅基地 */
+    closeMoule: function (data) {
+      this.circulation.zjddm = data;
+      let _this = this;
+      let handlerTime = this.getDate();
+      this.$set(this.circulation, "sqrq", handlerTime);
+      this.$set(this.circulation, "pzrq", handlerTime);
+      this.$set(this.circulation, "barq", handlerTime);
+      getByLyZjddm(data).then((response) => {
+        this.$set(this.circulation, "ntcmj", response.data.zdmj);
+        this.$set(this.circulation, "tcmj", response.data.zdmj);
+        this.$set(this.circulation, "zjdszd", response.data.zdszd);
+        this.$set(this.circulation, "zjdszn", response.data.zdszn);
+        this.$set(this.circulation, "zjdszx", response.data.zdszx);
+        this.$set(this.circulation, "zjdszb", response.data.zdszb);
+        this.$set(this.circulation, "theGeomJson", response.data.theGeomJson);
+        this.$set(this.circulation, "tcqszsh", response.data.zsh);
+        listHomesteadnmfw({zjddm: data}).then((res) => {
+          res.rows.map(function(item){
+            _this.$set(_this.circulation, "jzmj", Number(_this.circulation.jzmj) + Number(item.jzmj));
+            _this.$set(_this.circulation, "xjzmj", Number(_this.circulation.xjzmj) + Number(item.jzmj));
+          });
+        });
+        // const baseImgUrl = this.$store.getters.baseRoutingUrl;
+        if(response.data.zdt != null && response.data.zdt !== ""){
+          this.$set(this.form, "xzzp", response.rows[0].zdt);
+        }
+      });
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding-bottom: 2%;
+    .header_main{
+      height: 116px;
+      background: url('../../../../assets/images/sunVillage_info/list_head_green.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;
+      margin-bottom: 2%;
+      .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;
+      }
+    }
+  }
+  .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;
+
+  }
+  /*#dropList::-webkit-scrollbar {*/
+  /*  !*滚动条整体样式*!*/
+  /*  width: 5px;     !*高宽分别对应横竖滚动条的尺寸*!*/
+  /*  height: 1px;*/
+  /*}*/
+  /*#dropList::-webkit-scrollbar-thumb {*/
+  /*  !*滚动条里面小方块*!*/
+  /*  border-radius: 10px;*/
+  /*  background: #fff;*/
+  /*  box-shadow: inset 0 0 5px rgb(0, 122, 204);*/
+  /*}*/
+  /*#dropList::-webkit-scrollbar-track {*/
+  /*  border-radius: 10px;*/
+  /*  background: #fff;*/
+  /*  !*滚动条里面轨道*!*/
+  /*  box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);*/
+  /*}*/
+</style>

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

@@ -0,0 +1,850 @@
+<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="header_main">
+        无偿退出
+        <div class="return_btn" @click="onClickLeft"></div>
+        <!--      <div class="add_btn" @click="goAdd"></div>-->
+      </div>
+
+      <div class="main_box">
+        <!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
+        <van-field  readonly v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required @input="remoteTransfereeMethod" />
+        <div id="dropList" v-show="showDropList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
+          <van-cell id="vanCell"  v-for="(item, index) in getObligeeOptions" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
+            {{item.sqrxm}}
+          </van-cell>
+        </div>
+        <!--        <van-field-->
+        <!--          readonly-->
+        <!--          clickable-->
+        <!--          v-model="circulation.zjddm"-->
+        <!--          label="宅基地代码"-->
+        <!--          placeholder="请选择"-->
+        <!--          @click="remoteProposerMethod"-->
+        <!--          input-align="right"-->
+        <!--          right-icon="arrow-down" :rules="[{ required: true }]" required-->
+        <!--        />-->
+        <!--        <van-popup v-model="showzjddm" position="bottom">-->
+        <!--          <van-picker-->
+        <!--            show-toolbar-->
+        <!--            :columns="zjdDictionaries"-->
+        <!--            value-key="zjddm"-->
+        <!--            @confirm="onConfirmZjddm"-->
+        <!--            @cancel="showzjddm = false"-->
+        <!--          />-->
+        <!--        </van-popup>-->
+        <van-field
+          readonly
+          v-model="circulation.zjddm"
+          label="宅基地代码"
+          input-align="right"
+        >
+          <template #button>
+            <van-icon name="../../../../../static/images/22.png"  color="#539FFD" size="20" @click="mapLook"/>
+          </template>
+        </van-field>
+        <field-select
+          readonly
+          v-model="circulation.xb"
+          label="性別"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择现状"
+          :rules="[{ required: true }]"
+          required
+          remote-url="/system/dict/data/type/sys_user_sex"
+          :on-remote-response="'data'"
+        />
+
+        <van-field readonly v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <van-field readonly v-model="circulation.lxdh" label="联系电话" placeholder="联系电话" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <field-select
+          readonly
+          v-model="circulation.gyqk"
+          label="共有情况"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择共有情况"
+          :rules="[{ required: true }]"
+          required
+          remote-url="/system/dict/data/type/house_yes_no"
+          :on-remote-response="'data'"
+        />
+        <van-field readonly v-model="circulation.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      </div>
+              <div v-if="circulation.jtcyqkList">
+                <p class="main_title">家庭成员情况</p>
+
+                <div >
+                  <van-tabs v-if="circulation.jtcyqkList && circulation.jtcyqkList.length > 0" v-model="familyMembersActive" ref="memberTabs">
+                    <van-tab :title="(index + 1) + '. ' + item.xm" v-for="(item , index) in circulation.jtcyqkList" :key="index" swipeable>
+                      <div class="familyList">
+                        <div class="main_box" style="margin-bottom: 20px">
+<!--                          <van-button icon="minus" size="mini" type="danger" class="deleteFamily" native-type="button" v-if="index!=0" @click="deleteFamily(index)" />-->
+                          <van-field readonly required v-model="item.xm" label="姓名" placeholder="姓名" input-align="right" :rules="[{ required: true }]"/>
+                          <van-field readonly required v-model="item.nl" label="年龄" placeholder="年龄" input-align="right" :rules="[{ required: true }]"/>
+                          <field-select
+                            v-model="item.yhzgx"
+                            readonly
+                            label="与户主关系"
+                            value-key="dictLabel"
+                            data-key="dictValue"
+                            placeholder="选择与户主关系"
+                            :rules="[{ required: true }]"
+                            required
+                            remote-url="/system/dict/data/type/family_status"
+                            :on-remote-response="'data'"
+                          />
+                          <van-field readonly required v-model="item.sfzh" label="身份证号" placeholder="身份证号" input-align="right" :rules="[{pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/}]" @input="updateMemberInfo(index)"/>
+                          <van-field readonly required v-model="item.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" :rules="[{ required: true }]"/>
+                        </div>
+                      </div>
+                    </van-tab>
+                  </van-tabs>
+                </div>
+              </div>
+      <div v-if="circulation.gyrqkList">
+        <p class="main_title">共有人情况</p>
+
+        <div >
+          <van-tabs v-if="circulation.gyrqkList && circulation.gyrqkList.length > 0" v-model="familyMembersActive" ref="memberTabs">
+            <van-tab :title="(index + 1) + '. ' + item.xm" v-for="(item , index) in circulation.gyrqkList" :key="index" swipeable>
+              <div class="familyList">
+                <div class="main_box" style="margin-bottom: 20px">
+<!--                  <van-button icon="minus" size="mini" type="danger" class="deleteFamily" native-type="button" v-if="index!=0" @click="deleteFamily(index)" />-->
+                  <van-field readonly required v-model="item.xm" label="姓名" placeholder="姓名" input-align="right" :rules="[{ required: true }]"/>
+                  <van-field readonly required v-model="item.nl" label="年龄" placeholder="年龄" input-align="right" :rules="[{ required: true }]"/>
+                  <field-select
+                    v-model="item.yhzgx"
+                    label="与户主关系"
+                    value-key="dictLabel"
+                    data-key="dictValue"
+                    placeholder="选择与户主关系"
+                    :rules="[{ required: true }]"
+                    required
+                    readonly
+                    remote-url="/system/dict/data/type/family_status"
+                    :on-remote-response="'data'"
+                  />
+                  <van-field readonly required v-model="item.sfzh" label="身份证号" placeholder="身份证号" input-align="right" :rules="[{pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/}]" @input="updateMemberInfo(index)"/>
+                  <van-field readonly required v-model="item.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" :rules="[{ required: true }]"/>
+                </div>
+              </div>
+            </van-tab>
+          </van-tabs>
+        </div>
+      </div>
+      <p class="main_title">拟申请退出宅基地-面积</p>
+      <van-field readonly v-model="circulation.tcmj" label="面积(㎡)" placeholder="请输入面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+      <field-select
+        readonly
+        v-model="circulation.xz"
+        label="现状"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="选择现状"
+        :rules="[{ required: true }]"
+        required
+        remote-url="/system/dict/data/type/dsxz"
+        :on-remote-response="'data'"
+      />
+      <p class="main_title">拟申请退出宅基地-四至</p>
+      <van-field readonly v-model="circulation.zjdszd" label="东至" placeholder="东至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-field readonly v-model="circulation.zjdszn" label="南至" placeholder="南至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-field  readonly v-model="circulation.zjdszx" label="西至" placeholder="西至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-field readonly v-model="circulation.zjdszb" label="北至" placeholder="北至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <p class="main_title">拟申请退出宅基地情况-地类</p>
+      <field-select
+        readonly
+        v-model="circulation.dldm"
+        label="地类"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="选择现状"
+        :rules="[{ required: true }]"
+        required
+        remote-url="/system/dict/data/type/geographic_type"
+        :on-remote-response="'data'"
+      />
+      <p class="main_title">退出宅基地情况</p>
+      <van-field readonly v-model="circulation.tcmj" label="退出面积(㎡)" placeholder="请输入退出面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+      <van-field readonly v-model="circulation.jzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+      <div class="main_box">
+        <van-field
+          readonly
+          clickable
+          v-model="tcqllx"
+          label="退出权利类型"
+          placeholder="请选择退出权利类型"
+          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"
+            @cancel="showtcqllx = false"
+          />
+        </van-popup>
+
+        <!--<van-field
+          readonly
+          clickable
+          v-model="tclx"
+          label="退出类型"
+          placeholder="请选择退出类型"
+          @click="showtclx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showtclx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="tclxDictionaries"
+            @confirm="onConfirmTclx"
+            @cancel="showtclx = false"
+          />
+        </van-popup>-->
+
+        <van-field
+          readonly
+          clickable
+          v-model="tcfs"
+          label="退出方式"
+          placeholder="请选择退出方式"
+          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"
+            @cancel="showtcfs = false"
+          />
+        </van-popup>
+
+        <van-field v-model="circulation.tcqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
+      </div>
+      <p class="main_title">现居住情况</p>
+      <van-field readonly v-model="circulation.xjzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+      <van-field readonly v-model="circulation.xqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
+      <van-field readonly v-model="circulation.xjzdd" label="居住地点" placeholder="请输入居住地点" input-align="right" label-width="auto" />
+      <p class="main_title">其他</p>
+
+      <van-field readonly v-model="circulation.sqly" label="申请理由" placeholder="请输入申请理由" input-align="right" label-width="auto"/>
+      <field-date-picker
+        readonly
+        v-model="circulation.sqrq"
+        label="申请日期"
+        placeholder="选择日期"
+        :rules="[{ required: true }]"
+        formatter="yyyy-MM-dd"
+        required
+      />
+      <van-field readonly v-model="circulation.jbrxm" label="经办人姓名" placeholder="请输入经办人姓名" input-align="right" label-width="auto"/>
+      <field-date-picker
+        readonly
+        v-model="circulation.pzrq"
+        label="批准日期"
+        placeholder="选择日期"
+        :rules="[{ required: true }]"
+        formatter="yyyy-MM-dd"
+        required
+      />
+      <field-date-picker
+        v-model="circulation.barq"
+        label="备案日期"
+        placeholder="选择日期"
+        :rules="[{ required: true }]"
+        formatter="yyyy-MM-dd"
+        required
+      />
+
+      <van-dialog v-model="mapShow" show-cancel-button>
+        <MapGisObtainTc ref="zjdProductResh" :shqrxm="circulation.sqrxm" :landStatus="landStatus" :deptId="circulation.deptId" @closeMoule="closeMoule"></MapGisObtainTc>
+      </van-dialog>
+      <!-- 3组附件 -->
+      <van-popup
+        v-model="attachmentVisible"
+        closeable
+        position="top"
+        :style="{ height: '61.8%' }"
+        :close-on-click-overlay="proposerStatus == 1"
+        :lazy-render="false"
+      >
+        <van-tabs type="card" style="padding-top: 1.35rem;" color="#1D6FE9" :lazy-render="false" v-model="attachmentActive" ref="attachmentDialog">
+          <van-tab title="退出附件" key="0">
+            <home-apply-upload-comp
+              :business-type="houseApplyUploadComp.businessType"
+              :house-apply-status="houseApplyUploadComp.homeApplyStatus"
+              :process-key="houseApplyUploadComp.processKey"
+              :proposer-id="houseApplyUploadComp.proposerId"
+              :table-name="houseApplyUploadComp.tableName"
+              :readonly="houseApplyUploadComp.readonly"
+              :userName="houseApplyUploadComp.createBy"
+              :full="houseApplyUploadComp.full"
+            >
+            </home-apply-upload-comp>
+          </van-tab>
+        </van-tabs>
+      </van-popup>
+      <!-- 审批 -->
+
+        <div class="main_box examine_box" v-if="showCjt">
+          <van-row type="flex" justify="space-between" align="center">
+            <van-col span="5">村集体<br/>经济组<br/>织或村<br/>民委员<br/>会意见</van-col>
+            <van-col span="19">
+              <van-field required :readonly="approval.type !== 'todo' || !cjtspOperation" v-model="circulation.cjzzscyj" rows="2" autosize type="textarea" placeholder="审核意见"/>
+              <van-cell title="负责人:"  :rules="[{ required: true }]">
+                <van-image
+                  v-if="circulation.cjzzscr !='' && circulation.cjzzscr !=null && circulation.cjzzscr.endsWith('png')"
+                  width="100"
+                  height="50"
+                  :src="$store.getters.baseRoutingUrl+circulation.cjzzscr"
+                ></van-image>
+                <div  v-if="circulation.cjzzscr !='' && circulation.cjzzscr !=null && !circulation.cjzzscr.endsWith('png')">{{circulation.cjzzscr}}</div>
+              </van-cell>
+              <field-date-picker
+                v-model="circulation.cjzzscsj"
+                label="审批日期"
+                placeholder="选择日期"
+                :readonly="approval.type !== 'todo' || !cjtspOperation"
+                :rules="[{ required: true }]"
+                formatter="yyyy-MM-dd"
+                required
+              />
+            </van-col>
+
+          </van-row>
+        </div>
+
+        <div class="main_box examine_box" v-if="showZjsp">
+          <van-row type="flex" justify="space-between" align="center">
+            <van-col span="5">镇级人<br/>民镇府<br/>意见</van-col>
+            <van-col span="19">
+              <van-field required :readonly="approval.type !== 'todo'" v-model="circulation.xzzfshpzyj" rows="2" autosize type="textarea" placeholder="审核意见"/>
+              <van-cell title="负责人:"  :rules="[{ required: true }]">
+                <van-image
+                  v-if="circulation.xzzfshpzrxm !='' && circulation.xzzfshpzrxm !=null && circulation.xzzfshpzrxm.endsWith('png')"
+                  width="100"
+                  height="50"
+                  :src="$store.getters.baseRoutingUrl+circulation.xzzfshpzrxm"
+                ></van-image>
+                <div v-if="circulation.xzzfshpzrxm !='' && circulation.xzzfshpzrxm !=null && !circulation.xzzfshpzrxm.endsWith('png')">{{circulation.xzzfshpzrxm}}</div>
+              </van-cell>
+              <field-date-picker
+                v-model="circulation.xzzfshpzsj"
+                label="审批日期"
+                placeholder="选择日期"
+                :rules="[{ required: true }]"
+                :readonly="approval.type !== 'todo'"
+                formatter="yyyy-MM-dd"
+                required
+              />
+            </van-col>
+
+          </van-row>
+        </div>
+      <div class="clear"></div>
+      <van-goods-action style="z-index: 999;">
+        <van-goods-action-icon icon="label-o" text="附件" @click="openAttachment" color="#1D6FE9" />
+        <van-goods-action-button type="info" text="同意" v-if="approval.type == 'todo'"  @click="complete(true)" />
+        <van-goods-action-button type="danger" text="驳回" v-if="approval.type == 'todo'"  @click="complete(false)"/>
+      </van-goods-action>
+    </div>
+</template>
+
+<script>
+  import {  getZyyctc,getShyqrs,zyyctcEdit,zyyctcApply,getByLyZjddm,listHomesteadnmfw} from "@/api/sunVillage_info/homestead/paidExit";
+  import HomeApplyUploadComp from "@/components/home/HomeApplyUploadCompTc";
+  import FieldSelect from "@/components/form/FieldSelect";
+  import FieldDatePicker from "@/components/form/FieldDatePicker";
+  import {formatDate} from "element-ui/src/utils/date-util.js";
+  import { } from "@/api/onlineHome/homestead/paidExit";
+  import {Notify} from "vant";
+  import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
+import request from '@/utils/request';
+  const PROPOSER_VIEW = 1;
+  // 工作流名称
+  const PROPOSER_STAGE_BASE_APPLY_ACTIVITY = 'home_usetc';
+  // 附件表名
+  const PROPOSER_STAGE_BASE_APPLY_TABLE = 't_homeuse_zyyctc';
+  // 其他
+  const PROPOSER_MODULE = 'home';
+export default {
+  name: "paidExitDetail",
+  components: { MapGisObtainTc,FieldSelect,FieldDatePicker,HomeApplyUploadComp },
+  data() {
+    return {
+      tcqllxDictionaries:[],//退出权利类型
+      tclxDictionaries:[],//退出类型
+      tcfsDictionaries:[],//退出方式
+      xbDictionaries:[],//申请人证件类型
+      zjlxDictionaries:[],
+      bcfsDictionaries:[],//补偿方式
+      zjdDictionaries:[],//宅基地代码
+      getObligeeOptions:[],//下拉框列表
+      tcqllx:'',
+      tclx:'',
+      tcfs:'',
+      xb:'',
+      bcfs:'',
+      zjddm:'',
+      landStatus:"1",
+      nickName:this.$route.query.nickName,
+      electronicSignature:this.$route.query.electronicSignature,
+      showtcqllx: false,
+      showtclx: false,
+      showtcfs: false,
+      showxb: false,
+      showbcfs: false,
+      showzjddm: false,
+      showZjsp: false,
+      showCjt:false,
+      cjtspOperation:false,
+      showDropList: false,//是否显示下拉框
+      mapShow: false,
+      attachmentVisible:false,
+      // 家庭成员tab
+      familyMembersActive: 0,
+      active: 0,
+      // 表单意图
+      proposerStatus: PROPOSER_VIEW,
+      circulation:{},
+      // 当前附件tab
+      attachmentActive: 0,
+      // 申请附件树
+      houseApplyUploadComp: {
+        businessType: PROPOSER_MODULE,
+        proposerId: this.$route.query.id,
+        homeApplyStatus: "11",
+        processKey: PROPOSER_STAGE_BASE_APPLY_ACTIVITY,
+        tableName: PROPOSER_STAGE_BASE_APPLY_TABLE,
+        attachmentList: [],
+        readonly: true,
+        full: false,
+      },
+      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: {
+    // 获取日期, yyyy-MM-dd
+    getDate(d) {
+      return formatDate(d ? d : new Date(), 'yyyy-MM-dd');
+    },
+    getDetail(){
+      getZyyctc(this.$route.query.id).then(response => {
+        this.circulation = response.data;
+        if(this.circulation.jtcyqkList != null){
+          for(let i = 0; i < this.circulation.jtcyqkList.length; i++)
+          {
+            this.updateMemberInfo(i);
+          }
+        }
+        if(this.circulation.gyrqkList != null){
+          for(let i = 0; i < this.circulation.gyrqkList.length; i++)
+          {
+            this.updateMemberInfoGy(i);
+          }
+        }
+        if(this.approval.type === "todo"){
+          if(response.data.auditStatus === "1" || response.data.auditStatus === "2"){
+            if(this.electronicSignature != null){
+              this.$set(this.circulation, "cjzzscr", this.electronicSignature);
+            }else{
+              this.$set(this.circulation, "cjzzscr", this.nickName);
+            }
+            let handlerTime = this.getDate();
+            this.$set(this.circulation, "cjzzscsj", handlerTime);
+            this.cjtspOperation = true;
+            this.showCjt = true;
+
+          }else if(response.data.auditStatus === "3"){
+            this.showZjsp = true;
+            this.showCjt = true;
+            if(this.electronicSignature != null){
+              this.zzfdzqmShow = true;
+              this.$set(this.circulation, "xzzfshpzrxm", this.electronicSignature);
+            }else{
+              this.$set(this.circulation, "xzzfshpzrxm", this.nickName);
+            }
+            let handlerTime = this.getDate();
+            this.$set(this.circulation, "xzzfshpzsj", handlerTime);
+          }
+        }else{
+          if(response.data.auditStatus === "4" ){
+            this.showCjt = true;
+            this.showZjsp = true;
+          }else if(response.data.auditStatus === "0" || response.data.auditStatus === "1"){
+            this.showCjt = false;
+          }else{
+            this.showCjt = true;
+          }
+        }
+
+        //退出权利类型
+        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("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("audit_status").then((res) => {
+          this.circulation.auditStatus = this.selectDictLabel(res.data, response.data.auditStatus);
+        });
+      });
+    },
+    parseIDCard(idcard) {
+      if(!idcard)
+        return false;
+      if(idcard.length !== 18)
+        return false;
+      if(!/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idcard))
+        return false;
+      let sex = (parseInt(idcard.substr(16, 1)) % 2) ^ 1;
+      let now = new Date().getFullYear();
+      let y = parseInt(idcard.substr(6, 4));
+      let age = Math.max(now - y, 0);
+      return [sex, age];
+    },
+    updateMemberInfo(index) {
+      let res = this.parseIDCard(this.circulation.jtcyqkList[index].sfzh);
+      if(res)
+      {
+        this.$set(this.circulation.jtcyqkList[index], 'nl', res[1]);
+      }
+    },
+    updateMemberInfoGy(index) {
+      let res = this.parseIDCard(this.circulation.gyrqkList[index].sfzh);
+      if(res)
+      {
+        this.$set(this.circulation.gyrqkList[index], 'nl', res[1]);
+      }
+    },
+    remoteProposerMethod() {
+      this.showzjddm = true;
+      this.zjdDictionaries = [];
+      if (this.circulation.sqrxm) {
+        getShyqrs({shyqrdbxm:this.circulation.sqrxm}).then(response => {
+          this.zjdDictionaries = response.data.map(item => {
+            return {
+              zjddm: item.zjddm,
+              shyqrdbxm: item.shyqrdbxm,
+              shyqrdbzjlx: item.shyqrdbzjlx,
+              shyqrdbzjhm: item.shyqrdbzjhm
+            }
+          });
+        });
+      } else {
+        this.zjdDictionaries = [];
+      }
+    },
+    /** 模糊查询人员信息 */
+    remoteTransfereeMethod(query) {
+      if (query !== "") {
+        getShyqrs({shyqrdbxm:query,status:1}).then((response) => {
+          if (response.code == 200) {
+            this.getObligeeOptions = response.rows.map(function (item) {
+              return {
+                sqrxm:item.shyqrdbxm,
+                sqrxb:item.xb,
+                sqrzjhm:item.shyqrdbzjhm,
+                sqrzjlx:item.shyqrdbzjlx,
+                sqrdh:item.dh,
+                gyfs:item.gyfs,
+                dz:item.dz,
+                deptId:item.deptId,
+                deptName:item.deptName,
+              }
+            })
+            //设置模糊查询的下拉框和滚动条
+            if (this.getObligeeOptions.length > 0) {
+              this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+              //设置模糊查询的和滚动条
+              this.$nextTick(() => {
+                if (this.getObligeeOptions.length > 4) {
+                  let height = document.getElementById("vanCell").offsetHeight * 4;
+                  document.getElementById("dropList").style.height = height + "px";
+                  document.getElementById("dropList").style.overflow = "scroll";
+                } else {
+                  document.getElementById("dropList").style.height = "";
+                  document.getElementById("dropList").style.overflow = "visible";
+                }
+              });
+            } else {
+              this.showDropList = false;
+            }
+          }
+        });
+      } else {
+        this.getObligeeOptions = [];
+        this.showDropList = false;
+      }
+    },
+    shyqrdmxmChange(val){
+      console.info(val);
+      this.$set(this.circulation, "sqrxm", val.sqrxm);
+      this.$set(this.circulation, "deptId", val.deptId);
+      this.$set(this.circulation, "deptName", val.deptId);
+      this.$set(this.circulation, "sqrzjhm", val.sqrzjhm);
+      this.$set(this.circulation, "sqrzjlx", val.sqrzjlx);
+      this.$set(this.circulation, "gyqk", val.gyfs);
+      this.$set(this.circulation, "xb", val.sqrxb);
+      this.$set(this.circulation, "lxdh", val.sqrdh);
+      this.$set(this.circulation, "hkszd", val.dz);
+      this.getObligeeOptions=[];
+      this.showDropList = false;
+    },
+    /** 查找地图中宅基地 */
+    closeMoule: function (data) {
+      this.circulation.zjddm = data;
+      let _this = this;
+      let handlerTime = this.getDate();
+      this.$set(this.circulation, "sqrq", handlerTime);
+      this.$set(this.circulation, "pzrq", handlerTime);
+      this.$set(this.circulation, "barq", handlerTime);
+      getByLyZjddm(data).then((response) => {
+        this.$set(this.circulation, "ntcmj", response.data.zdmj);
+        this.$set(this.circulation, "tcmj", response.data.zdmj);
+        this.$set(this.circulation, "zjdszd", response.data.zdszd);
+        this.$set(this.circulation, "zjdszn", response.data.zdszn);
+        this.$set(this.circulation, "zjdszx", response.data.zdszx);
+        this.$set(this.circulation, "zjdszb", response.data.zdszb);
+        this.$set(this.circulation, "theGeomJson", response.data.theGeomJson);
+        this.$set(this.circulation, "tcqszsh", response.data.zsh);
+        listHomesteadnmfw({zjddm: data}).then((response) => {
+          response.rows.map(function(item){
+            _this.$set(_this.circulation, "jzmj", Number(_this.circulation.jzmj) + Number(item.jzmj));
+            _this.$set(_this.circulation, "xjzmj", Number(_this.circulation.xjzmj) + Number(item.jzmj));
+          });
+        });
+        // const baseImgUrl = this.$store.getters.baseRoutingUrl;
+        if(response.rows[0].zdt != null && response.rows[0].zdt !== ""){
+          this.$set(this.form, "xzzp", response.rows[0].zdt);
+        }
+      });
+    },
+    mapLook(){
+      this.mapShow = true;
+      setTimeout(() => {
+        this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
+      },1000);
+    },
+    // 打开附件树
+    openAttachment() {
+      this.attachmentVisible = true;
+      if(this.attachmentActive == this.active)
+        this.$nextTick(() => {
+          this.$refs.attachmentDialog.scrollTo(this.active);
+        });
+    },
+    complete(pass) {
+      if(this.circulation.auditStatus === "1" || this.circulation.auditStatus === "2"){
+        this.approval.comment = this.circulation.cjzzscyj;
+      }else{
+        this.approval.comment = this.circulation.xzzfshpzyj;
+      }
+      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');
+      });*/
+      if (pass) {
+        let data = {
+          taskId: this.approval.taskId,
+          instanceId: this.approval.instanceId,
+          variables: JSON.stringify({
+            pass: "true",
+            comment: this.approval.comment ? this.approval.comment : "同意",
+          }),
+        };
+        zyyctcEdit(this.circulation).then(response => {
+          request({
+            url: "/activiti/process/complete",
+            method: "post",
+            params: data,
+          }).then((response) => {
+            this.notify("操作成功", 'success');
+            this.$router.back();
+          }).catch(e => {
+            this.notify("操作失败!", 'danger');
+          });
+        });
+
+      } else {
+        let _this = this;
+        _this.$dialog.confirm({
+          message: '是否确认驳回此条申请',
+        }).then(() => {
+          let data = {
+            taskId: _this.approval.taskId,
+            instanceId: _this.approval.instanceId,
+            variables: JSON.stringify({
+              pass: "false",
+              comment: _this.approval.comment ? _this.approval.comment : "驳回",
+            }),
+          };
+          zyyctcEdit(this.circulation).then(response => {
+            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-bottom: 2%;
+    .header_main{
+      height: 116px;
+      background: url('../../../../assets/images/sunVillage_info/list_head_green.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;
+      margin-bottom: 2%;
+      .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;
+      }
+    }
+  }
+  .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;
+
+  }
+  .clear{
+    height: 80px;
+  }
+  .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/yinnong/homestead/freeExit/freeExitList.vue

@@ -0,0 +1,225 @@
+<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>-->
+
+      <div class="header_main">
+        无偿退出
+        <div class="return_btn" @click="onClickLeft"></div>
+        <div class="add_btn" @click="goAdd"></div>
+      </div>
+
+      <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, zyyctcApply } from "@/api/sunVillage_info/homestead/paidExit";
+export default {
+  name: "paidExit",
+  data() {
+    return {
+      applicationList:[],
+      houseApplyStatus:[],
+      tcqllxStatus:[],
+      tclxStatus:[],
+      tcfsStatus:[],
+      auditStatus:[],
+      loading: false,
+      finished: false,
+      idcard:null,
+      queryParams:{
+        pageNum:1,
+        pageSize:10,
+        deptId: null,
+        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;
+    });
+    this.$set(this.queryParams, "sqrzjhm", this.idcard);
+    this.houseGetDicts("yctcsp_status").then((res) => {
+      // this.auditStatus = res.data;
+      let _this = this;
+      res.data.forEach((item) => {
+        if (item.dictValue < 5) {
+          _this.auditStatus.push(item);
+        } else if (item.dictValue == 5) {
+          item.dictLabel = "审核通过";
+          _this.auditStatus.push(item);
+        }
+      });
+    });
+  },
+  methods: {
+    goAdd(){
+      window.location = '/freeExitAdd';
+    },
+    getList(){
+      setTimeout(() => {
+        this.deptId = this.$store.state.user.loginDeptId;
+        this.$set(this.queryParams, "deptId", this.deptId);
+        getList(this.queryParams).then(response => {
+          for (var i = 0; i < response.rows.length; i++) {
+            response.rows[i].tclx = this.selectDictLabel(this.tcqllxStatus, response.rows[i].tclx)
+            response.rows[i].tclx = this.selectDictLabel(this.tclxStatus, response.rows[i].tclx)
+            response.rows[i].tcfs = this.selectDictLabel(this.tcfsStatus, response.rows[i].tcfs)
+            response.rows[i].auditStatus = this.selectDictLabel(this.auditStatus, response.rows[i].auditStatus)
+            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 {
+    .header_main{
+      height: 116px;
+      background: url('../../../../assets/images/sunVillage_info/list_head_green.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;
+      }
+    }
+  }
+  /deep/.van-list{
+    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;
+    text-align: center;
+    position: relative;
+    left: 20px;
+  }
+  /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/yinnong/homestead/freeExit/freeExitModify.vue

@@ -0,0 +1,587 @@
+<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="header_main">
+      修改无偿退出
+      <div class="return_btn" @click="onClickLeft"></div>
+      <!--      <div class="add_btn" @click="goAdd"></div>-->
+    </div>
+
+    <van-form ref="_Form">
+      <div class="main_box">
+        <!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
+        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required @input="remoteTransfereeMethod" />
+        <div id="dropList" v-show="showDropList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
+          <van-cell id="vanCell"  v-for="(item, index) in getObligeeOptions" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
+            {{item.sqrxm}}
+          </van-cell>
+        </div>
+        <!--        <van-field-->
+        <!--          readonly-->
+        <!--          clickable-->
+        <!--          v-model="circulation.zjddm"-->
+        <!--          label="宅基地代码"-->
+        <!--          placeholder="请选择"-->
+        <!--          @click="remoteProposerMethod"-->
+        <!--          input-align="right"-->
+        <!--          right-icon="arrow-down" :rules="[{ required: true }]" required-->
+        <!--        />-->
+        <!--        <van-popup v-model="showzjddm" position="bottom">-->
+        <!--          <van-picker-->
+        <!--            show-toolbar-->
+        <!--            :columns="zjdDictionaries"-->
+        <!--            value-key="zjddm"-->
+        <!--            @confirm="onConfirmZjddm"-->
+        <!--            @cancel="showzjddm = false"-->
+        <!--          />-->
+        <!--        </van-popup>-->
+        <van-field
+          v-model="circulation.zjddm"
+          label="宅基地代码"
+          input-align="right"
+        >
+          <template #button>
+            <van-icon name="../../../../../static/images/22.png"  color="#539FFD" size="20" @click="mapLook"/>
+          </template>
+        </van-field>
+        <field-select
+          v-model="circulation.xb"
+          label="性別"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择现状"
+          :rules="[{ required: true }]"
+          required
+          remote-url="/system/dict/data/type/sys_user_sex"
+          :on-remote-response="'data'"
+        />
+
+        <van-field v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <van-field v-model="circulation.lxdh" label="联系电话" placeholder="联系电话" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+        <field-select
+          v-model="circulation.gyqk"
+          label="共有情况"
+          value-key="dictLabel"
+          data-key="dictValue"
+          placeholder="选择共有情况"
+          :rules="[{ required: true }]"
+          required
+          remote-url="/system/dict/data/type/house_yes_no"
+          :on-remote-response="'data'"
+        />
+        <van-field v-model="circulation.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      </div>
+      <p class="main_title">拟申请退出宅基地-面积</p>
+      <van-field v-model="circulation.tcmj" label="面积(㎡)" placeholder="请输入面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+      <field-select
+        v-model="circulation.xz"
+        label="现状"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="选择现状"
+        :rules="[{ required: true }]"
+        required
+        remote-url="/system/dict/data/type/dsxz"
+        :on-remote-response="'data'"
+      />
+      <p class="main_title">拟申请退出宅基地-四至</p>
+      <van-field v-model="circulation.zjdszd" label="东至" placeholder="东至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-field v-model="circulation.zjdszn" label="南至" placeholder="南至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-field v-model="circulation.zjdszx" label="西至" placeholder="西至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-field v-model="circulation.zjdszb" label="北至" placeholder="北至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <p class="main_title">拟申请退出宅基地情况-地类</p>
+      <field-select
+        v-model="circulation.dldm"
+        label="地类"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="选择现状"
+        :rules="[{ required: true }]"
+        required
+        remote-url="/system/dict/data/type/geographic_type"
+        :on-remote-response="'data'"
+      />
+      <p class="main_title">退出宅基地情况</p>
+      <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.jzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+      <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
+          clickable
+          v-model="tclx"
+          label="退出类型"
+          placeholder="请选择退出类型"
+          @click="showtclx = true"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto" :rules="[{ required: true }]" required
+        />
+        <van-popup v-model="showtclx" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="tclxDictionaries"
+            @confirm="onConfirmTclx"
+            @cancel="showtclx = false"
+          />
+        </van-popup>-->
+
+        <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.tcqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
+      </div>
+      <p class="main_title">现居住情况</p>
+      <van-field v-model="circulation.xjzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+      <van-field v-model="circulation.xqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
+      <van-field v-model="circulation.xjzdd" label="居住地点" placeholder="请输入居住地点" input-align="right" label-width="auto" />
+      <p class="main_title">其他</p>
+
+      <van-field v-model="circulation.sqly" label="申请理由" placeholder="请输入申请理由" input-align="right" label-width="auto"/>
+      <field-date-picker
+        v-model="circulation.sqrq"
+        label="申请日期"
+        placeholder="选择日期"
+        :rules="[{ required: true }]"
+        formatter="yyyy-MM-dd"
+        required
+      />
+      <van-field v-model="circulation.jbrxm" label="经办人姓名" placeholder="请输入经办人姓名" input-align="right" label-width="auto"/>
+      <field-date-picker
+        v-model="circulation.pzrq"
+        label="批准日期"
+        placeholder="选择日期"
+        :rules="[{ required: true }]"
+        formatter="yyyy-MM-dd"
+        required
+      />
+      <field-date-picker
+        v-model="circulation.barq"
+        label="备案日期"
+        placeholder="选择日期"
+        :rules="[{ required: true }]"
+        formatter="yyyy-MM-dd"
+        required
+      />
+
+      <van-dialog v-model="mapShow" show-cancel-button>
+        <MapGisObtainTc ref="zjdProductResh" :shqrxm="circulation.sqrxm" :landStatus="landStatus" :deptId="sysFarmer.deptId" @closeMoule="closeMoule"></MapGisObtainTc>
+      </van-dialog>
+      <!-- 3组附件 -->
+      <van-popup
+        v-model="attachmentVisible"
+        closeable
+        position="top"
+        :style="{ height: '61.8%' }"
+        :close-on-click-overlay="proposerStatus == 1"
+        :lazy-render="false"
+      >
+        <van-tabs type="card" style="padding-top: 1.35rem;" color="#1D6FE9" :lazy-render="false" v-model="attachmentActive" ref="attachmentDialog">
+          <van-tab title="退出附件" key="0">
+            <home-apply-upload-comp
+              :business-type="houseApplyUploadComp.businessType"
+              :house-apply-status="houseApplyUploadComp.homeApplyStatus"
+              :process-key="houseApplyUploadComp.processKey"
+              :proposer-id="houseApplyUploadComp.proposerId"
+              :table-name="houseApplyUploadComp.tableName"
+              :readonly="houseApplyUploadComp.readonly"
+              :userName="sysFarmer.memberName"
+              :full="houseApplyUploadComp.full"
+              @uploadFinished="onUploadFinished"
+            >
+            </home-apply-upload-comp>
+          </van-tab>
+        </van-tabs>
+      </van-popup>
+    </van-form>
+    <van-goods-action style="z-index: 999;">
+      <van-goods-action-icon icon="label-o" text="附件" @click="openAttachment" color="#1D6FE9" />
+      <van-goods-action-button type="info" text="保存"  @click="goEdit" />
+    </van-goods-action>
+  </div>
+</template>
+
+<script>
+  import {  getZyyctc,getShyqrs,zyyctcEdit,zyyctcApply,getByLyZjddm,listHomesteadnmfw} from "@/api/sunVillage_info/homestead/paidExit";
+  import HomeApplyUploadComp from "@/components/home/HomeApplyUploadCompTc";
+  import FieldSelect from "@/components/form/FieldSelect";
+  import FieldDatePicker from "@/components/form/FieldDatePicker";
+  import {formatDate} from "element-ui/src/utils/date-util.js";
+  import { } from "@/api/onlineHome/homestead/paidExit";
+  import {Notify} from "vant";
+  import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
+  const PROPOSER_VIEW = 1;
+  // 工作流名称
+  const PROPOSER_STAGE_BASE_APPLY_ACTIVITY = 'home_usetc';
+  // 附件表名
+  const PROPOSER_STAGE_BASE_APPLY_TABLE = 't_homeuse_zyyctc';
+  // 其他
+  const PROPOSER_MODULE = 'home';
+  export default {
+    name: "paidExitModify",
+    components: { MapGisObtainTc,FieldSelect,FieldDatePicker,HomeApplyUploadComp },
+    data() {
+      return {
+        tcqllxDictionaries:[],//退出权利类型
+        tclxDictionaries:[],//退出类型
+        tcfsDictionaries:[],//退出方式
+        xbDictionaries:[],//申请人证件类型
+        zjlxDictionaries:[],
+        bcfsDictionaries:[],//补偿方式
+        zjdDictionaries:[],//宅基地代码
+        getObligeeOptions:[],//下拉框列表
+        sysFarmer:{deptId:this.$store.state.user.loginDeptId,memberName:""},
+        tcqllx:'',
+        tclx:'',
+        tcfs:'',
+        xb:'',
+        bcfs:'',
+        zjddm:'',
+        landStatus:"1",
+        showtcqllx: false,
+        showtclx: false,
+        showtcfs: false,
+        showxb: false,
+        showbcfs: false,
+        showzjddm: false,
+        showDropList: false,//是否显示下拉框
+        mapShow: false,
+        attachmentVisible:false,
+        active: 0,
+        // 表单意图
+        proposerStatus: PROPOSER_VIEW,
+        circulation:{},
+        // 当前附件tab
+        attachmentActive: 0,
+        // 申请附件树
+        houseApplyUploadComp: {
+          businessType: PROPOSER_MODULE,
+          proposerId: this.$route.query.id,
+          homeApplyStatus: "11",
+          processKey: PROPOSER_STAGE_BASE_APPLY_ACTIVITY,
+          tableName: PROPOSER_STAGE_BASE_APPLY_TABLE,
+          attachmentList: [],
+          readonly: false,
+          full: false,
+        },
+      };
+    },
+    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("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.circulation = response.data;
+          console.info(this.circulation);
+        });
+      },
+      onConfirmZjddm(data){
+        console.log(data);
+        this.showzjddm = false;
+        if (data) {
+          this.$set(this.circulation, 'zjddm', data.zjddm);
+          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();
+      },
+      onConfirmXb(data){
+        this.xb = data.text;
+        this.circulation.xb = data.value;
+        this.showxb = false;
+      },
+      // 初次申请草稿的附件上传
+      onUploadFinished(fileIdList) {
+        this.$set(this.circulation, "fileList", fileIdList);
+      },
+      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;
+      },
+      goEdit(){
+        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: '请填写完整的表单项' });
+        });
+      },
+      remoteProposerMethod() {
+        this.showzjddm = true;
+        this.zjdDictionaries = [];
+        if (this.circulation.sqrxm) {
+          getShyqrs({shyqrdbxm:this.circulation.sqrxm}).then(response => {
+            this.zjdDictionaries = response.data.map(item => {
+              return {
+                zjddm: item.zjddm,
+                shyqrdbxm: item.shyqrdbxm,
+                shyqrdbzjlx: item.shyqrdbzjlx,
+                shyqrdbzjhm: item.shyqrdbzjhm
+              }
+            });
+          });
+        } else {
+          this.zjdDictionaries = [];
+        }
+      },
+      // 打开附件树
+      openAttachment() {
+        this.attachmentVisible = true;
+        if(this.attachmentActive == this.active)
+          this.$nextTick(() => {
+            this.$refs.attachmentDialog.scrollTo(this.active);
+          });
+      },
+      /** 模糊查询人员信息 */
+      remoteTransfereeMethod(query) {
+        if (query !== "") {
+          getShyqrs({shyqrdbxm:query,status:1}).then((response) => {
+            if (response.code == 200) {
+              this.getObligeeOptions = response.rows.map(function (item) {
+                return {
+                  sqrxm:item.shyqrdbxm,
+                  sqrxb:item.xb,
+                  sqrzjhm:item.shyqrdbzjhm,
+                  sqrzjlx:item.shyqrdbzjlx,
+                  sqrdh:item.dh,
+                  gyfs:item.gyfs,
+                  dz:item.dz,
+                  deptId:item.deptId,
+                  deptName:item.deptName,
+                }
+              })
+              //设置模糊查询的下拉框和滚动条
+              if (this.getObligeeOptions.length > 0) {
+                this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+                //设置模糊查询的和滚动条
+                this.$nextTick(() => {
+                  if (this.getObligeeOptions.length > 4) {
+                    let height = document.getElementById("vanCell").offsetHeight * 4;
+                    document.getElementById("dropList").style.height = height + "px";
+                    document.getElementById("dropList").style.overflow = "scroll";
+                  } else {
+                    document.getElementById("dropList").style.height = "";
+                    document.getElementById("dropList").style.overflow = "visible";
+                  }
+                });
+              } else {
+                this.showDropList = false;
+              }
+            }
+          });
+        } else {
+          this.getObligeeOptions = [];
+          this.showDropList = false;
+        }
+      },
+      shyqrdmxmChange(val){
+        console.info(val);
+        this.$set(this.circulation, "sqrxm", val.sqrxm);
+        this.$set(this.circulation, "deptId", val.deptId);
+        this.$set(this.circulation, "deptName", val.deptId);
+        this.$set(this.circulation, "sqrzjhm", val.sqrzjhm);
+        this.$set(this.circulation, "sqrzjlx", val.sqrzjlx);
+        this.$set(this.circulation, "gyqk", val.gyfs);
+        this.$set(this.circulation, "xb", val.sqrxb);
+        this.$set(this.circulation, "lxdh", val.sqrdh);
+        this.$set(this.circulation, "hkszd", val.dz);
+        this.getObligeeOptions=[];
+        this.showDropList = false;
+      },
+      // 获取日期, yyyy-MM-dd
+      getDate(d) {
+        return formatDate(d ? d : new Date(), 'yyyy-MM-dd');
+      },
+      /** 查找地图中宅基地 */
+      closeMoule: function (data) {
+        this.circulation.zjddm = data;
+        let _this = this;
+        let handlerTime = this.getDate();
+        this.$set(this.circulation, "sqrq", handlerTime);
+        this.$set(this.circulation, "pzrq", handlerTime);
+        this.$set(this.circulation, "barq", handlerTime);
+        getByLyZjddm(data).then((response) => {
+          this.$set(this.circulation, "ntcmj", response.data.zdmj);
+          this.$set(this.circulation, "tcmj", response.data.zdmj);
+          this.$set(this.circulation, "zjdszd", response.data.zdszd);
+          this.$set(this.circulation, "zjdszn", response.data.zdszn);
+          this.$set(this.circulation, "zjdszx", response.data.zdszx);
+          this.$set(this.circulation, "zjdszb", response.data.zdszb);
+          this.$set(this.circulation, "theGeomJson", response.data.theGeomJson);
+          this.$set(this.circulation, "tcqszsh", response.data.zsh);
+          listHomesteadnmfw({zjddm: data}).then((response) => {
+            response.rows.map(function(item){
+              _this.$set(_this.circulation, "jzmj", Number(_this.circulation.jzmj) + Number(item.jzmj));
+              _this.$set(_this.circulation, "xjzmj", Number(_this.circulation.xjzmj) + Number(item.jzmj));
+            });
+          });
+          // const baseImgUrl = this.$store.getters.baseRoutingUrl;
+          if(response.rows[0].zdt != null && response.rows[0].zdt !== ""){
+            this.$set(this.form, "xzzp", response.rows[0].zdt);
+          }
+        });
+      },
+      mapLook(){
+        this.mapShow = true;
+        setTimeout(() => {
+          this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
+        },1000);
+      },
+    },
+
+  }
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding-bottom: 2%;
+    .header_main{
+      height: 116px;
+      background: url('../../../../assets/images/sunVillage_info/list_head_green.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;
+      margin-bottom: 2%;
+      .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;
+      }
+    }
+  }
+  .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/yinnong/homestead/homeApplication/applicationGsList.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="app-container">
+    <!--      <van-nav-bar-->
+    <!--        left-arrow-->
+    <!--        fixed-->
+    <!--        placeholder-->
+    <!--        @click-left="$router.back(-1)"-->
+    <!--        @click-right="goAddLite()"-->
+    <!--      >-->
+    <!--        <template #title>-->
+    <!--          <p style="font-weight: bold;">宅基地申请</p>-->
+    <!--        </template>-->
+    <!--        <template #right>-->
+    <!--          <van-icon name="add" size="18"/>-->
+    <!--        </template>-->
+    <!--      </van-nav-bar>-->
+
+    <div class="header_main">
+      宅基地申请公示
+      <div class="return_btn" @click="onClickLeft"></div>
+    </div>
+
+    <van-pull-refresh v-model="refreshing" @refresh="getList()">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="getList('+1')"
+      >
+        <van-swipe-cell v-for="(item,index) in applicationList" :key="index">
+          <van-cell :title="item.ywh" center @click="viewItem(item)">
+            <!--          <van-cell :title="item.ywh" :value="item.houseApplyStatusName" center @click="viewItem(item)">-->
+            <!--            <template #icon>-->
+            <!--              <van-icon name="../../../static/images/onlineHome/icon_zjd1.png" size="30" color="#539FFD" style="margin-right: 10px;" />-->
+            <!--            </template>-->
+            <!--            <template #label>-->
+            <!--              <p>{{item.projectName}}</p>-->
+            <!--            </template>-->
+            <template #icon>
+              <van-icon name="../../../static/images/onlineHome/icon_zjd1.png" size="30" color="#539FFD" style="margin-right: 10px;" />
+            </template>
+            <span v-if="item.auditStatus === '0'">{{ formatDict(houseApplyStatus, item.homeApplyStatus) }} </span>
+            <span v-else-if="item.auditStatus === '2' " style="color: #F56C6C">{{ formatDict(houseApplyStatus, item.homeApplyStatus) + ' ● 已驳回' }} </span>
+            <span  v-else style="color: #67c23a;">{{ formatDict(houseApplyStatus, item.homeApplyStatus) }} </span>
+            <template #label>
+              <p>{{item.projectName}}</p>
+            </template>
+          </van-cell>
+        </van-swipe-cell>
+      </van-list>
+    </van-pull-refresh>
+  </div>
+</template>
+
+<script>
+  import { getGsList , removeList } from "@/api/sunVillage_info/homestead/application";
+  import { customSubmitWLHT, submitStartWLHT, submitEndWLHT,} from "@/api/sunVillage_info/homestead/application";
+  import {updateOpretion} from "@/api/sunVillage_info/homestead/application";
+  import Cookies from "js-cookie";
+  export default {
+    name: "applicationList",
+    data() {
+      return {
+        applicationList:[],
+        houseApplyStatus:[],
+        loading: false,
+        finished: false,
+        refreshing: false,
+        deptId:null,
+        idcard:null,
+        total: 0,
+        queryParams:{
+          pageNum:1,
+          pageSize:10,
+          deptId:null,
+          orderByColumn:'createTime',
+          isAsc:'desc'
+        }
+      };
+    },
+    created() {
+      this.houseGetDicts("home_stage_status").then((response) => {
+        this.houseApplyStatus = response.data;
+      });
+      this.deptId = this.$store.state.user.loginDeptId;
+      this.$set(this.queryParams, "deptId", this.deptId);
+      this.getList();
+    },
+    methods: {
+      goAdd(){
+        window.location = 'applicationAdd';
+      },
+      goAddLite(){
+        //window.location = 'applicationAdd'
+        this.$router.push({name:'sunVillageInfoProposerLite',query:{type:"add"}})
+      },
+      viewItem(row){
+        let type = row.houseApplyStatus == '11' // 申请草稿
+        || row.houseApplyStatus == '1F' // 申请通过
+        || row.houseApplyStatus == '31' // 开工草稿
+        || row.houseApplyStatus == '3F' // 开工通过
+        || row.houseApplyStatus == '71' // 验收草稿
+          ? 'modify' : 'view';
+        this.$router.push({name:'applicationForm',query:{type:type,id:row.id}})
+      },
+      getList(target){
+        let type = typeof (target);
+        console.log(type, target);
+        if(target && this.finished)
+          return;
+        if (target === 0) {
+          this.refreshing = true;
+          this.finished = true;
+          this.total = 0;
+          this.queryParams.pageNum = 1;
+          this.applicationList = [];
+        }
+        else if (type === 'number')
+          this.queryParams.pageNum = target;
+        else if (type === 'string') {
+          this.queryParams.pageNum = eval(this.queryParams.pageNum + target)
+        }
+        else
+        {
+          this.refreshing = true;
+          this.finished = true;
+          this.total = 0;
+          this.queryParams.pageNum = 1;
+          this.applicationList = []
+        }
+        getGsList(this.queryParams).then(response => {
+          if (response.rows.length === 0) {
+            this.finished = true;
+            return;
+          }
+          for (var i = 0; i < response.rows.length; i++) {
+            /*var houseApplyStatusName = this.selectDictLabel(this.houseApplyStatus, response.rows[i].houseApplyStatus);
+            // if(response.rows[i].auditStatus !== '0' && response.rows[i].auditStatus === '2'){
+            //   houseApplyStatusName = houseApplyStatusName+ ' ● 已驳回';
+            // }
+            response.rows[i].houseApplyStatusName = houseApplyStatusName;*/
+            this.applicationList.push(response.rows[i]);
+          }
+          this.total += response.rows.length;
+          this.finished = this.total >= response.total;
+        }).finally(() => {
+          this.loading = false;
+          this.refreshing = false;
+        });
+      },
+      formatDict(dict, value) {
+        return this.selectDictLabel(dict, value);
+      },
+      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
+          });
+      },
+      refresh() {
+        this.getList(); return;
+        this.applicationList = [];
+        this.queryParams.pageNum = 1;
+        this.refreshing = true;
+        this.finished = false;
+      },
+      submitApplyProposer(item) {
+        this.$router.push({name:'sunVillageInfoProposerLite',query:{type:"edit",id:item.id}})
+        // if(item.homeApplyStatus === '11'){
+        //   customSubmitWLHT(item.id).then((resp) => {
+        //     this.$toast.success("提交成功");
+        //     this.refresh();
+        //   }).catch((e) => {
+        //     this.$toast.fail("提交失败!");
+        //   });
+        // }else if(item.homeApplyStatus === '31'){
+        //   submitStartWLHT(item.id).then((resp) => {
+        //     this.$toast.success("提交成功");
+        //     this.refresh();
+        //   }).catch((e) => {
+        //     this.$toast.fail("提交失败!");
+        //   });
+        // }else if(item.homeApplyStatus === '71'){
+        //   submitEndWLHT(item.id).then((resp) => {
+        //     this.$toast.success("提交成功");
+        //     this.refresh();
+        //   }).catch((e) => {
+        //     this.$toast.fail("提交失败!");
+        //   });
+        // }
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+  .header_main{
+    height: 116px;
+    background: url('../../../../assets/images/sunVillage_info/list_head_green.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;
+  }
+  }
+  }
+  /deep/.van-list{
+    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;
+  }
+  .van-row{
+    height: 100%;
+  }
+  .van-col{
+    height: 100%;
+  }
+  .delete-button {
+    height: 100%;
+  }
+</style>

src/views/yinnong/homestead/homeApplication/applicationList.vue

@@ -1,121 +1,257 @@
 <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>
+  <div class="app-container">
+    <!--      <van-nav-bar-->
+    <!--        left-arrow-->
+    <!--        fixed-->
+    <!--        placeholder-->
+    <!--        @click-left="$router.back(-1)"-->
+    <!--        @click-right="goAddLite()"-->
+    <!--      >-->
+    <!--        <template #title>-->
+    <!--          <p style="font-weight: bold;">宅基地申请</p>-->
+    <!--        </template>-->
+    <!--        <template #right>-->
+    <!--          <van-icon name="add" size="18"/>-->
+    <!--        </template>-->
+    <!--      </van-nav-bar>-->
+
+    <div class="header_main">
+      宅基地申请
+      <div class="return_btn" @click="onClickLeft"></div>
+    </div>
 
+    <van-pull-refresh v-model="refreshing" @refresh="getList()">
       <van-list
         v-model="loading"
         :finished="finished"
         finished-text="没有更多了"
-        @load="getList"
+        @load="getList('+1')"
       >
         <van-swipe-cell v-for="(item,index) in applicationList" :key="index">
-          <van-cell :title="item.ywh" :value="item.houseApplyStatus" center :to="{name:'applicationForm', query: {id:item.id,type:'modify'}}">
+          <van-cell :title="item.ywh" center @click="viewItem(item)">
+            <!--          <van-cell :title="item.ywh" :value="item.houseApplyStatusName" center @click="viewItem(item)">-->
+            <!--            <template #icon>-->
+            <!--              <van-icon name="../../../static/images/onlineHome/icon_zjd1.png" size="30" color="#539FFD" style="margin-right: 10px;" />-->
+            <!--            </template>-->
+            <!--            <template #label>-->
+            <!--              <p>{{item.projectName}}</p>-->
+            <!--            </template>-->
             <template #icon>
               <van-icon name="../../../static/images/onlineHome/icon_zjd1.png" size="30" color="#539FFD" style="margin-right: 10px;" />
             </template>
+            <span v-if="item.auditStatus === '0'">{{ formatDict(houseApplyStatus, item.homeApplyStatus) }} </span>
+            <span v-else-if="item.auditStatus === '2' " style="color: #F56C6C">{{ formatDict(houseApplyStatus, item.homeApplyStatus) + ' ● 已驳回' }} </span>
+            <span  v-else style="color: #67c23a;">{{ formatDict(houseApplyStatus, item.homeApplyStatus) }} </span>
             <template #label>
               <p>{{item.projectName}}</p>
             </template>
           </van-cell>
           <template #right>
             <van-row>
+
               <van-col>
-                <van-button square text="修改" type="info" v-if="item.houseApplyStatus=='申请草稿'" :to="{name:'applicationForm', query: {id:item.id}}" class="delete-button" />
+                <van-button square text="许可证预览" v-if="parseInt(item.homeApplyStatus, 16) >= 0x31" type="info"  :to="{name:'homeXkzPanel', query: {id:item.id, type: 'modify'}}" class="delete-button" />
               </van-col>
               <van-col>
-                <van-button square text="删除" type="danger" v-if="item.houseApplyStatus=='申请草稿'" @click="deleteList(item.id,index)" class="delete-button" />
+                <van-button square text="批准书预览" v-if="parseInt(item.homeApplyStatus, 16) >= 0x31" type="info"  :to="{name:'homePzsPanel', query: {id:item.id, type: 'modify'}}" class="delete-button" />
               </van-col>
             </van-row>
           </template>
         </van-swipe-cell>
       </van-list>
-    </div>
+    </van-pull-refresh>
+  </div>
 </template>
 
 <script>
-import { getList , removeList } from "@/api/onlineHome/homestead/application";
-export default {
-  name: "applicationList",
-  data() {
-    return {
-      applicationList:[],
-      houseApplyStatus:[],
-      loading: false,
-      finished: false,
-      queryParams:{
-        pageNum:1,
-        pageSize:10,
-        orderByColumn:'createTime',
-        isAsc:'desc'
-      }
-    };
-  },
-  created() {
-    this.houseGetDicts("house_apply_status").then((response) => {
-      console.log(response)
-      this.houseApplyStatus = response.data;
-    });
-  },
-  methods: {
-    goAdd(){
-      window.location = 'applicationAdd';
+  import { getList , removeList } from "@/api/sunVillage_info/homestead/application";
+  import { customSubmitWLHT, submitStartWLHT, submitEndWLHT,} from "@/api/sunVillage_info/homestead/application";
+  import {updateOpretion} from "@/api/sunVillage_info/homestead/application";
+  import Cookies from "js-cookie";
+  export default {
+    name: "applicationList",
+    data() {
+      return {
+        applicationList:[],
+        houseApplyStatus:[],
+        loading: false,
+        finished: false,
+        refreshing: false,
+        deptId:null,
+        idcard:null,
+        total: 0,
+        queryParams:{
+          pageNum:1,
+          pageSize:10,
+          deptId:null,
+          orderByColumn:'createTime',
+          isAsc:'desc'
+        }
+      };
     },
-    getList(){
-      setTimeout(() => {
+    created() {
+      this.houseGetDicts("home_stage_status").then((response) => {
+        this.houseApplyStatus = response.data;
+      });
+      this.deptId = this.$store.state.user.loginDeptId;
+      this.$set(this.queryParams, "deptId", this.deptId);
+      this.getList();
+    },
+    methods: {
+      goAdd(){
+        window.location = 'applicationAdd';
+      },
+      goAddLite(){
+        //window.location = 'applicationAdd'
+        this.$router.push({name:'sunVillageInfoProposerLite',query:{type:"add"}})
+      },
+      viewItem(row){
+        let type = row.houseApplyStatus == '11' // 申请草稿
+        || row.houseApplyStatus == '1F' // 申请通过
+        || row.houseApplyStatus == '31' // 开工草稿
+        || row.houseApplyStatus == '3F' // 开工通过
+        || row.houseApplyStatus == '71' // 验收草稿
+          ? 'modify' : 'view';
+        this.$router.push({name:'applicationForm',query:{type:type,id:row.id}})
+      },
+      getList(target){
+        let type = typeof (target);
+        console.log(type, target);
+        if(target && this.finished)
+          return;
+        if (target === 0) {
+          this.refreshing = true;
+          this.finished = true;
+          this.total = 0;
+          this.queryParams.pageNum = 1;
+          this.applicationList = [];
+        }
+        else if (type === 'number')
+          this.queryParams.pageNum = target;
+        else if (type === 'string') {
+          this.queryParams.pageNum = eval(this.queryParams.pageNum + target)
+        }
+        else
+        {
+          this.refreshing = true;
+          this.finished = true;
+          this.total = 0;
+          this.queryParams.pageNum = 1;
+          this.applicationList = []
+        }
         getList(this.queryParams).then(response => {
           console.log(response)
-          for (var i = 0; i < response.rows.length; i++) {
-            var houseApplyStatus = this.selectDictLabel(this.houseApplyStatus, response.rows[i].houseApplyStatus);
-            response.rows[i].houseApplyStatus = houseApplyStatus;
-            this.applicationList.push(response.rows[i]);
-          }
-          console.log(this.applicationList.length >= response.total)
-          if(this.applicationList.length >= response.total){
+          if (response.rows.length === 0) {
             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('删除成功');
+          for (var i = 0; i < response.rows.length; i++) {
+            /*var houseApplyStatusName = this.selectDictLabel(this.houseApplyStatus, response.rows[i].houseApplyStatus);
+            // if(response.rows[i].auditStatus !== '0' && response.rows[i].auditStatus === '2'){
+            //   houseApplyStatusName = houseApplyStatusName+ ' ● 已驳回';
+            // }
+            response.rows[i].houseApplyStatusName = houseApplyStatusName;*/
+            this.applicationList.push(response.rows[i]);
           }
+          this.total += response.rows.length;
+          this.finished = this.total >= response.total;
+        }).finally(() => {
+          this.loading = false;
+          this.refreshing = false;
         });
-      })
-      .catch(() => {
-        // on cancel
-      });
-    }
-  },
-}
+      },
+      formatDict(dict, value) {
+        return this.selectDictLabel(dict, value);
+      },
+      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
+          });
+      },
+      refresh() {
+        this.getList(); return;
+        this.applicationList = [];
+        this.queryParams.pageNum = 1;
+        this.refreshing = true;
+        this.finished = false;
+      },
+      submitApplyProposer(item) {
+        this.$router.push({name:'sunVillageInfoProposerLite',query:{type:"edit",id:item.id}})
+        // if(item.homeApplyStatus === '11'){
+        //   customSubmitWLHT(item.id).then((resp) => {
+        //     this.$toast.success("提交成功");
+        //     this.refresh();
+        //   }).catch((e) => {
+        //     this.$toast.fail("提交失败!");
+        //   });
+        // }else if(item.homeApplyStatus === '31'){
+        //   submitStartWLHT(item.id).then((resp) => {
+        //     this.$toast.success("提交成功");
+        //     this.refresh();
+        //   }).catch((e) => {
+        //     this.$toast.fail("提交失败!");
+        //   });
+        // }else if(item.homeApplyStatus === '71'){
+        //   submitEndWLHT(item.id).then((resp) => {
+        //     this.$toast.success("提交成功");
+        //     this.refresh();
+        //   }).catch((e) => {
+        //     this.$toast.fail("提交失败!");
+        //   });
+        // }
+      },
+    },
+  }
 </script>
 
 <style scoped lang="scss">
   .app-container {
+  .header_main{
+    height: 116px;
+    background: url('../../../../assets/images/sunVillage_info/list_head_green.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;
+  }
+  }
+  }
+  /deep/.van-list{
     padding: 0.2rem 3%;
   }
   /deep/.van-cell__title{

src/views/yinnong/homestead/homeApplication/homePZSPanel.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="root" id = "HOME_PZS_All" >
+    <div class="licenceAround-wrap" style=" display: block; overflow: hidden;" id="licenceAroundWrap">
+      <div class="licence_first_page" style=" width: 98%; margin-right: 2%;">
+        <div class="details_first_title" style=" font-size: 20px; font-weight: bold; text-align: center; line-height: 30px;">农村宅基地批准书</div>
+        <div class="number-title" style="  height: 45px; line-height: 45px;">
+          农宅字 <i style="text-decoration: underline">{{form.pzsbh}}</i> 号
+        </div>
+        <div class="licence_first_main" style="border:1px solid #000000;  padding:70px 20px;">
+          <div class="content" style="  line-height: 36px; padding-top: 10px; text-align: center;">
+            根据《中华人民共和国土地管理法》规定，本项农村村民宅基地用地  业经有权机关批准，特发此书。
+            请严格按照本批准书要求使用宅基地。</div>
+          <div class="ft_jg" style=" margin-top: 90px; text-align: center; line-height: 32px;">填发机关:   {{form.tfjg}}</div>
+          <div class="ft_time" style="  text-align: center; line-height: 32px;">填发时间:   {{form.tfrq}}</div>
+        </div>
+      </div>
+      <div class="details_first_title" style=" font-size: 20px; font-weight: bold; text-align: center; line-height: 30px;">农村宅基地批准书（存根2）</div>
+      <div class="licence_two_page" style=" width: 98%; margin-right: 2%; ">
+        <div class="number-title"  style="  height: 45px; line-height: 45px;">
+          农宅字 <i style="text-decoration: underline">{{form.pzsbh}}</i> 号
+        </div>
+        <div class="licence_two_main">
+          <table>
+            <tr>
+              <td>申请人姓名</td> <td colspan="2">{{form.hzxm}}</td>
+            </tr>
+            <tr>
+              <td>批准用地面积</td> <td colspan="2">{{form.pzmj}} 平方米</td>
+            </tr>
+            <tr>
+              <td>其中：房基占地</td> <td colspan="2">{{form.fjzdmj}} 平方米</td>
+            </tr>
+            <tr>
+              <td>土地所有权人</td> <td colspan="2">{{form.tdsuyqr}}</td>
+            </tr>
+            <tr>
+              <td>土地用途</td> <td colspan="2">{{selectDictLabel(options.land_use, form.tdyt)}}</td>
+            </tr>
+            <tr>
+              <td>土地坐落<br/>(详见附图)</td> <td  colspan="2">{{ form.tdzl }}</td>
+            </tr>
+            <tr>
+              <td rowspan="2">四  至</td> <td>东:{{ form.pzzjdszd }}</td><td>南:{{ form.pzzjdszs }}</td>
+            </tr>
+            <tr>
+              <td>西:{{ form.pzzjdszx }}</td><td>北:{{ form.pzzjdszn }}</td>
+            </tr>
+            <tr>
+              <td>批准书有效期</td><td colspan="2">{{form.pzsyxqkssj +'至'+form.pzsyxqjssj }}</td>
+            </tr>
+            <tr style="height: 100px" >
+              <td colspan="3" style="text-align: left;">备注:</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div class="licence_three_page" style="width: 100%;">
+        <div  class="number-title"  style="  height: 45px; line-height: 45px;">
+          农宅字 <i style="text-decoration: underline">{{form.pzsbh}}</i> 号
+        </div>
+        <table>
+          <tr>
+            <td>申请人姓名</td> <td colspan="2">{{form.hzxm}}</td>
+          </tr>
+          <tr>
+            <td>批准用地面积</td> <td colspan="2">{{form.pzmj}} 平方米</td>
+          </tr>
+          <tr>
+            <td>房基占地面积</td> <td colspan="2">{{form.fjzdmj}} 平方米</td>
+          </tr>
+          <tr>
+            <td>土地所有权人</td> <td colspan="2">{{form.tdsuyqr}}</td>
+          </tr>
+          <tr>
+            <td>土地用途</td> <td colspan="2">{{selectDictLabel(options.land_use, form.tdyt)}}</td>
+          </tr>
+          <tr>
+            <td>土地坐落<br/>(详见附图)</td> <td  colspan="2">{{ form.tdzl }}</td>
+          </tr>
+          <tr>
+            <td rowspan="2">四  至</td> <td>东:{{ form.pzzjdszd }}</td><td>南:{{ form.pzzjdszs }}</td>
+          </tr>
+          <tr>
+            <td>西:{{ form.pzzjdszx }}</td><td>北:{{ form.pzzjdszn }}</td>
+          </tr>
+          <tr>
+            <td>批准书有效期</td><td colspan="2">{{form.pzsyxqkssj +'至'+form.pzsyxqjssj }}</td>
+          </tr>
+          <tr style="height: 100px">
+            <td colspan="3" style="text-align: left;">备注2:</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {date, date_format} from "@/utils";
+import {getCertificate} from "@/api/sunVillage_info/homestead/application";
+export default {
+  name: "homePZSPanel",
+  data() {
+    return {
+      loading: false,
+      src:null,
+      form: {},
+      options: {
+        land_use: [],
+      },
+    }
+  },
+  created() {
+    this.id = this.$route.query.id;
+    getCertificate(this.id).then((resp) => {
+      this.src = resp.data.nczjdpzs;
+    });
+    this.InitOptions();
+    this.GetData();
+  },
+  watch: {
+    src: function(newVal) {
+      this.GetData();
+    },
+  },
+  methods: {
+    InitOptions() {
+      for(let k in this.options)
+      {
+        this.getDicts(k).then((resp) => this.options[k] = resp.data);
+      }
+    },
+    Reset() {
+      this.form = {
+        id: null,
+        ydjfsqId: null,
+        ysdm: null,
+        ywh: null,
+        pzswzbh: null,
+        pzsbh: null,
+        tfjg: null,
+        tfrq: null,
+        hzxm: null,
+        pzmj: null,
+        fjzdmj: null,
+        tdsuyqr: null,
+        tdyt: null,
+        tdzl: null,
+        tdzlft: null,
+        pzzjdszd: null,
+        pzzjdszx: null,
+        pzzjdszs: null,
+        pzzjdszn: null,
+        pzsyxqkssj: null,
+        pzsyxqjssj: null,
+        pzssmj: null,
+        bz: null,
+        deptId: null,
+        deptName: null,
+        bookId: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+      };
+    },
+    GetData() {
+      this.Reset();
+      if(!this.src)
+        return;
+      if(typeof(this.src) === 'object')
+      {
+        this.$nextTick(() => this.InitData(this.src));
+      }
+    },
+    // 土地用途 字典 land_use字典翻译
+    tdytFormat(row) {
+      return this.selectDictLabel(this.options.land_use, row.tdyt);
+    },
+    InitData(data) {
+      this.form = data;
+      let tdytName = this.tdytFormat(this.form);
+      this.$set(this.form, "tdytName", tdytName);
+      if(this.villageEditable)
+      {
+        this.form.cjxzscsj = date_format(null, '%Y-%m-%d');
+        this.form.cjxzscr = this.$store.getters.nickName;
+      }
+      if(this.groupEditable)
+      {
+        this.form.cmxzscsj = date_format(null, '%Y-%m-%d');
+        this.form.cmxzscr = this.$store.getters.nickName;
+      }
+    },
+    FormatDate(d) {
+      return date(d, '%Y-%m-%d', '%Y年%m月%d日')
+    },
+  },
+  computed: {
+  },
+}
+</script>
+
+<style scoped>
+.cover-root {
+  width: 32%;
+  float: left;
+}
+.content-root {
+  width: 68%;
+  float: right;
+}
+.first {
+  width: 50%;
+  float: left;
+}
+.second {
+  width: 50%;
+  float: right;
+}
+.page {
+  height: 100%;
+  padding: 0 20px;
+}
+.half {
+  float: left;
+  width: 50%;
+}
+.clear-both {
+  clear: both;
+}
+td {
+  color: #000000;
+/*  height: 48px;*/
+  line-height: 36px;
+  vertical-align: middle;
+  white-space: break-spaces;
+  word-break: break-all;
+  font-size: 14px;
+}
+.ffield {
+/*  background-color: #e6f0fa;*/
+  font-size: 16px;
+  text-align: center;
+  white-space: break-spaces;
+  word-break: break-all;
+}
+.no {
+  font-style: italic;
+  text-decoration: underline;
+}
+
+.right-align {
+  text-align: right;
+}
+.center-align {
+  text-align: center;
+}
+
+.title {
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  height: 48px;
+  line-height: 48px;
+}
+
+.root {
+  color: #000000;
+  font-family: "方正黑体";
+}
+
+.sub-title {
+  text-align: left;
+  font-size: 16px;
+  height: 36px;
+  line-height: 36px;
+}
+
+.content {
+  padding: 32px 18px 12px;
+  height: 193px;
+}
+
+.cover {
+  border: 1px solid #000000;
+  position: relative;
+}
+
+.cover .content-text {
+  line-height: 36px;
+  font-size: 18px;
+  margin-top: 20px;
+  text-indent: 2em;
+}
+.cover .signature {
+  position: absolute;
+  right: 0;
+  bottom: 64px;
+}
+.cover .signature .content-text {
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 32px;
+  text-align: right;
+  padding-right: 24px;
+  margin-top: 18px;
+  margin-bottom: 18px;
+}
+.content-table {
+  height: 100%;
+}
+table {
+  line-height: 25px;
+  text-align: center;
+  border-collapse: collapse;
+  width:90%;
+  border-collapse:collapse;
+  text-align:center;
+  margin:0 auto;
+}
+td {
+  line-height: 36px;
+  border: 1px solid #000000;
+  border-collapse: collapse;
+}
+
+.location-plan-preview-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #000000;
+  color: #FFFFFF;
+  font-size: 18px;
+  text-align: center;
+  -webkit-transition: opacity .3s;
+  transition: opacity .3s;
+  opacity: 0;
+}
+.location-plan-preview-title:hover {
+  opacity: 0.8;
+}
+
+.location-plan-preview-content {
+  width: 100%;
+  height: 100%;
+}
+.location-plan-preview {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.list__item-content {
+  font-size: 14px;
+  line-height: 18px;
+  word-break: break-all;
+  padding: 2px;
+  text-align: left;
+  margin-left: 2px;
+}
+</style>

src/views/yinnong/homestead/homeApplication/homeXKZPanel.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="root" id = "HOME_XKZ_ALL" >
+    <div class="planningPermit-wrap">
+      <div class="planningPermit-first" style="display: block; overflow: hidden;" id="planningPermitFirst">
+        <div class="permit-main" style="width: 100%;">
+          <div class="details_first_main" style="  width: 80%; padding:40px 20px; margin:0 auto; border:1px solid #000000;  height:500px">
+            <div class="details_first_title" style=" font-size: 20px; font-weight: bold; text-align: center; line-height: 30px;">中华人民共和国</div>
+            <div class="details_first_title" style=" font-size: 20px; font-weight: bold; text-align: center; line-height: 30px;">乡村建设规划许可证</div>
+            <div class="details_first_page" style="text-align: right; font-size: 16px; padding: 10px 0 50px;">乡字第 <i style="text-decoration: underline">{{form.xkzbh}}</i> 号</div>
+            <div class="details_first_cont" style=" font-size: 16px; line-height: 32px;">根据《中华人民共和国土地管理法》《中华人民共和国城乡规划法》和国家有关规定，经审核，本建设工程符合国土空间规划和用途管制要求，颁发此证。</div>
+            <div class="licence_first_jg" style="padding-top: 100px; font-size: 16px; text-align: right;">填发机关:   {{form.fzjg}}</div>
+            <div class="licence_first_time" style="font-size: 16px; text-align: right;">日 期:   {{form.fzrq}}</div>
+          </div>
+
+        </div>
+        <br/>
+        <div class="details_page" style=" width: 100%; ">
+          <div class="details_page_main" style="width: 80%; padding:40px 20px; margin:0 auto; border:1px solid #000000; font-size: 14px;  height:680px">
+            <table >
+              <tr>
+                <td>建设单位(个人)</td> <td >{{form.jsdw}}</td>
+              </tr>
+              <tr>
+                <td>建设项目名称</td> <td>{{form.jsxmmc}}</td>
+              </tr>
+              <tr>
+                <td>建设位置</td> <td>{{form.jswz}}</td>
+              </tr>
+              <tr>
+                <td>建设规模</td> <td>{{ form.jsgm }}</td>
+              </tr>
+              <!--                <tr>
+                                <td>{{ this.licenseForm.licenseRatification.west }}</td><td>{{ this.licenseForm.licenseRatification.north }}</td>
+                              </tr>-->
+              <tr>
+                <td>附图及附件名称</td>
+                <td>
+                  <div v-html="'附图及附件名称&emsp;' + form.fjjftmc"></div>
+                  <div style="height: 128px;">
+                    <img v-if="!!form.xkzsmj" :src="$store.getters.baseRoutingUrl + form.xkzsmj" width="100%" height="100%" style="object-fit: scale-down;" :alt="form.fjjftm"/>
+                  </div>
+                </td>
+              </tr>
+            </table>
+            <div class="details_first_title" style=" font-size: 20px; font-weight: bold; text-align: left; line-height: 30px;">遵守事项</div>
+            <ul style="padding:5px 5px 5px;list-style:none; font-size: 12px; line-height:24px;text-align: start">
+              <li style="text-align: start">一、 本证是经自然资源主管部门依法审核，在乡、村庄规划区内有关建设工程符合国土空间规划和用途管制要求的法律凭证。</li>
+              <li>二、 依法应当取得本证，但未取得本证或违反本证规定的，均属违法行为。</li>
+              <li>三、 未经发证机关审核同意，本证的各项规定不得随意变更。</li>
+              <li>四、 自然资源主管部门依法有权查验本证，建设单位（个人）有责任提交查验。</li>
+              <li>五、 本证所需附图及附件由发证机关依法确定，与本证具有同等法律效力。</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {date_format} from "@/utils";
+import {getCertificate} from "@/api/sunVillage_info/homestead/application";
+export default {
+  name: "homeXKZPanel",
+  data() {
+    return {
+      id:null,
+      src:null,
+      loading: false,
+      form: {},
+      options: {
+        land_use: [],
+      },
+    }
+  },
+  created() {
+    this.id = this.$route.query.id;
+    getCertificate(this.id).then((resp) => {
+    this.src = resp.data.xcjsghxkz;
+    });
+    this.InitOptions();
+    this.GetData();
+  },
+  watch: {
+    src: function(newVal) {
+      this.GetData();
+    },
+  },
+  methods: {
+    InitOptions() {
+      for(let k in this.options)
+      {
+        this.getDicts(k).then((resp) => this.options[k] = resp.data);
+      }
+    },
+    Reset() {
+      this.form = {
+        id: null,
+        ydjfsqId: null,
+        ysdm: null,
+        ywh: null,
+        xkzwzbh: null,
+        xkzbh: null,
+        fzjg: null,
+        fzrq: null,
+        jsdw: null,
+        jsxmmc: null,
+        jswz: null,
+        jsgm: null,
+        fjjftmc: null,
+        xkzsmj: null,
+        bz: null,
+        deptId: null,
+        deptName: null,
+        bookId: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+      };
+    },
+    GetData() {
+      this.Reset();
+      if(!this.src)
+        return;
+      if(typeof(this.src) === 'object')
+      {
+        this.$nextTick(() => this.InitData(this.src));
+      }
+    },
+    InitData(data) {
+      this.form = data;
+      if(this.villageEditable)
+      {
+        this.form.cjxzscsj = date_format(null, '%Y-%m-%d');
+        this.form.cjxzscr = this.$store.getters.nickName;
+      }
+      if(this.groupEditable)
+      {
+        this.form.cmxzscsj = date_format(null, '%Y-%m-%d');
+        this.form.cmxzscr = this.$store.getters.nickName;
+      }
+    },
+  },
+  computed: {
+  },
+}
+</script>
+
+<style scoped>
+.cover-root {
+  width: 50%;
+  float: left;
+}
+.content-root {
+  width: 50%;
+  float: right;
+}
+.page {
+  height: 100%;
+  padding: 0 32px;
+}
+.half {
+  float: left;
+  width: 50%;
+}
+.clear-both {
+  clear: both;
+}
+.root >>> td {
+  color: #000000;
+/*  height: 48px;*/
+  line-height: 32px;
+  vertical-align: middle;
+  white-space: break-spaces;
+  word-break: break-all;
+  font-size: 14px;
+}
+.ffield {
+/*  background-color: #e6f0fa;*/
+  font-size: 14px;
+  text-align: center;
+  white-space: break-spaces;
+  word-break: break-all;
+}
+.no {
+  font-style: italic;
+  text-decoration: underline;
+}
+
+.right-align {
+  text-align: right;
+}
+.center-align {
+  text-align: center;
+}
+
+.title {
+  text-align: center;
+  font-size: 26px;
+  font-weight: bold;
+  height: 36px;
+  line-height: 36px;
+}
+
+.main-title {
+  text-align: center;
+  font-size: 24px;
+  height: 36px;
+  line-height: 36px;
+}
+
+.root {
+  color: #000000;
+  font-family: "方正黑体";
+}
+
+.sub-title {
+  text-align: right;
+  font-size: 14px;
+  height: 32px;
+  line-height: 32px;
+}
+
+.content {
+  padding: 48px 36px 12px;
+  height: 600px;
+  border: 1px solid #000000;
+}
+
+.cover {
+  position: relative;
+}
+
+.cover .content-text {
+  font-weight: bold;
+  line-height: 36px;
+  font-size: 18px;
+  margin-top: 32px;
+  text-indent: 2em;
+}
+.cover .signature {
+  position: absolute;
+  right: 0;
+  bottom: 64px;
+}
+.cover .signature .content-text {
+  font-size: 16px;
+  line-height: 32px;
+  text-align: left;
+  padding-right: 36px;
+  margin-top: 18px;
+  margin-bottom: 18px;
+}
+.content-table {
+}
+.other-content {
+  position: absolute;
+  bottom: 18px;
+  right: 36px;
+  left: 36px;
+}
+.other-content .title {
+  font-weight: bold;
+  font-size: 18px;
+  text-align: left;
+  line-height: 48px;
+  height: 48px;
+}
+.other-content .item {
+  font-size: 12px;
+  line-height: 24px;
+}
+table {
+  line-height: 25px;
+  text-align: center;
+  border-collapse: collapse;
+  width:90%;
+  border-collapse:collapse;
+  text-align:center;
+  margin:0 auto;
+}
+td {
+  line-height: 36px;
+  border: 1px solid #000000;
+  border-collapse: collapse;
+}
+
+.location-plan-preview-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #000000;
+  color: #FFFFFF;
+  font-size: 18px;
+  text-align: center;
+  -webkit-transition: opacity .3s;
+  transition: opacity .3s;
+  opacity: 0;
+}
+.location-plan-preview-title:hover {
+  opacity: 0.8;
+}
+
+.location-plan-preview-content {
+  width: 100%;
+  height: 100%;
+}
+.location-plan-preview {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.list__item-content {
+  font-size: 14px;
+  line-height: 18px;
+  word-break: break-all;
+  padding: 2px;
+  text-align: left;
+  margin-left: 2px;
+}table {
+   line-height: 25px;
+   text-align: center;
+   border-collapse: collapse;
+   width:90%;
+   border-collapse:collapse;
+   text-align:center;
+   margin:0 auto;
+ }
+td {
+  line-height: 36px;
+  border: 1px solid #000000;
+  border-collapse: collapse;
+}
+
+.location-plan-preview-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #000000;
+  color: #FFFFFF;
+  font-size: 18px;
+  text-align: center;
+  -webkit-transition: opacity .3s;
+  transition: opacity .3s;
+  opacity: 0;
+}
+.location-plan-preview-title:hover {
+  opacity: 0.8;
+}
+
+.location-plan-preview-content {
+  width: 100%;
+  height: 100%;
+}
+.location-plan-preview {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.list__item-content {
+  font-size: 14px;
+  line-height: 18px;
+  word-break: break-all;
+  padding: 2px;
+  text-align: left;
+  margin-left: 2px;
+}
+</style>

src/views/yinnong/homestead/paidExit/paidExitAdd.vue

@@ -1,301 +0,0 @@
-<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
-          v-model="circulation.zjddm"
-          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 v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto"/>
-        <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"/>
-      </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"
-        />
-        <van-popup v-model="showtcqllx" position="bottom">
-          <van-picker
-            show-toolbar
-            :columns="tcqllxDictionaries"
-            @confirm="onConfirmTcqllx"
-            @cancel="showtcqllx = false"
-          />
-        </van-popup>
-
-        <van-field
-          readonly
-          clickable
-          v-model="tclx"
-          label="退出类型"
-          placeholder="请选择退出类型"
-          @click="showtclx = true"
-          input-align="right"
-          right-icon="arrow-down"
-          label-width="auto"
-        />
-        <van-popup v-model="showtclx" position="bottom">
-          <van-picker
-            show-toolbar
-            :columns="tclxDictionaries"
-            @confirm="onConfirmTclx"
-            @cancel="showtclx = false"
-          />
-        </van-popup>
-
-        <van-field
-          readonly
-          clickable
-          v-model="tcfs"
-          label="退出方式"
-          placeholder="请选择退出方式"
-          @click="showtcfs = true"
-          input-align="right"
-          right-icon="arrow-down"
-          label-width="auto"
-        />
-        <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"/>
-        <van-field v-model="circulation.tcnx" label="退出年限" placeholder="请输入退出年限" input-align="right" label-width="auto"/>
-      </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"/>
-        <van-field v-model="circulation.zhfwmj" label="置换房屋面积" placeholder="请输入房屋面积㎡" input-align="right" label-width="auto"/>
-        <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>
-
-      <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 { dyAdd } from "@/api/onlineHome/homestead/paidExit";
-export default {
-  name: "paidExitAdd",
-  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(){
-      //退出权利类型
-      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("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);
-        }
-      });
-    },
-    onConfirmZjddm(data){
-      console.log(data)
-      this.circulation.zjddm = data;
-      this.showzjddm = false;
-    },
-    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;
-    },
-    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;
-    },
-    goSubmit(){
-      console.log(this.circulation);
-      dyAdd(this.circulation).then(response => {
-        if(response.code = 200){
-          this.$toast.success('保存成功');
-        }
-      });
-    }
-  },
-}
-</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/yinnong/homestead/paidExit/paidExitDetail.vue

@@ -1,126 +1,807 @@
 <template>
-    <div class="app-container">
-      <van-nav-bar
-        left-arrow
-        fixed
-        placeholder
-        @click-left="$router.back(-1)"
+  <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="header_main">
+      有偿退出
+      <div class="return_btn" @click="onClickLeft"></div>
+      <!--      <div class="add_btn" @click="goAdd"></div>-->
+    </div>
+
+    <div class="main_box">
+      <!--        <van-field v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>-->
+      <van-field  readonly v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto" :rules="[{ required: true }]" required @input="remoteTransfereeMethod" />
+      <div id="dropList" v-show="showDropList"  style="width: 92vw; position: absolute; z-index: 99; left: 50%; margin-left: -46vw; border: 1px solid #E2E0E0;" >
+        <van-cell id="vanCell"  v-for="(item, index) in getObligeeOptions" :key="index" @click="shyqrdmxmChange(item)" style="position: relative; z-index: 999;">
+          {{item.sqrxm}}
+        </van-cell>
+      </div>
+      <!--        <van-field-->
+      <!--          readonly-->
+      <!--          clickable-->
+      <!--          v-model="circulation.zjddm"-->
+      <!--          label="宅基地代码"-->
+      <!--          placeholder="请选择"-->
+      <!--          @click="remoteProposerMethod"-->
+      <!--          input-align="right"-->
+      <!--          right-icon="arrow-down" :rules="[{ required: true }]" required-->
+      <!--        />-->
+      <!--        <van-popup v-model="showzjddm" position="bottom">-->
+      <!--          <van-picker-->
+      <!--            show-toolbar-->
+      <!--            :columns="zjdDictionaries"-->
+      <!--            value-key="zjddm"-->
+      <!--            @confirm="onConfirmZjddm"-->
+      <!--            @cancel="showzjddm = false"-->
+      <!--          />-->
+      <!--        </van-popup>-->
+      <van-field
+        readonly
+        v-model="circulation.zjddm"
+        label="宅基地代码"
+        input-align="right"
       >
-        <template #title>
-          <p style="font-weight: bold;">有偿退出</p>
+        <template #button>
+          <van-icon name="../../../../static/images/22.png"  color="#539FFD" size="20" @click="mapLook"/>
         </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"/>
+      </van-field>
+      <field-select
+        readonly
+        v-model="circulation.xb"
+        label="性別"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="选择现状"
+        :rules="[{ required: true }]"
+        required
+        remote-url="/system/dict/data/type/sys_user_sex"
+        :on-remote-response="'data'"
+      />
+
+      <van-field readonly v-model="circulation.sqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <van-field readonly v-model="circulation.lxdh" label="联系电话" placeholder="联系电话" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+      <field-select
+        readonly
+        v-model="circulation.gyqk"
+        label="共有情况"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="选择共有情况"
+        :rules="[{ required: true }]"
+        required
+        remote-url="/system/dict/data/type/house_yes_no"
+        :on-remote-response="'data'"
+      />
+      <van-field readonly v-model="circulation.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+    </div>
+    <div v-if="circulation.jtcyqkList">
+      <p class="main_title">家庭成员情况</p>
+
+      <div >
+        <van-tabs v-if="circulation.jtcyqkList && circulation.jtcyqkList.length > 0" v-model="familyMembersActive" ref="memberTabs">
+          <van-tab :title="(index + 1) + '. ' + item.xm" v-for="(item , index) in circulation.jtcyqkList" :key="index" swipeable>
+            <div class="familyList">
+              <div class="main_box" style="margin-bottom: 20px">
+                <!--                          <van-button icon="minus" size="mini" type="danger" class="deleteFamily" native-type="button" v-if="index!=0" @click="deleteFamily(index)" />-->
+                <van-field readonly required v-model="item.xm" label="姓名" placeholder="姓名" input-align="right" :rules="[{ required: true }]"/>
+                <van-field readonly required v-model="item.nl" label="年龄" placeholder="年龄" input-align="right" :rules="[{ required: true }]"/>
+                <field-select
+                  v-model="item.yhzgx"
+                  readonly
+                  label="与户主关系"
+                  value-key="dictLabel"
+                  data-key="dictValue"
+                  placeholder="选择与户主关系"
+                  :rules="[{ required: true }]"
+                  required
+                  remote-url="/system/dict/data/type/family_status"
+                  :on-remote-response="'data'"
+                />
+                <van-field readonly required v-model="item.sfzh" label="身份证号" placeholder="身份证号" input-align="right" :rules="[{pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/}]" @input="updateMemberInfo(index)"/>
+                <van-field readonly required v-model="item.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" :rules="[{ required: true }]"/>
+              </div>
+            </div>
+          </van-tab>
+        </van-tabs>
       </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"
+    </div>
+    <div v-if="circulation.gyrqkList">
+      <p class="main_title">共有人情况</p>
+
+      <div >
+        <van-tabs v-if="circulation.gyrqkList && circulation.gyrqkList.length > 0" v-model="familyMembersActive" ref="memberTabs">
+          <van-tab :title="(index + 1) + '. ' + item.xm" v-for="(item , index) in circulation.gyrqkList" :key="index" swipeable>
+            <div class="familyList">
+              <div class="main_box" style="margin-bottom: 20px">
+                <!--                  <van-button icon="minus" size="mini" type="danger" class="deleteFamily" native-type="button" v-if="index!=0" @click="deleteFamily(index)" />-->
+                <van-field readonly required v-model="item.xm" label="姓名" placeholder="姓名" input-align="right" :rules="[{ required: true }]"/>
+                <van-field readonly required v-model="item.nl" label="年龄" placeholder="年龄" input-align="right" :rules="[{ required: true }]"/>
+                <field-select
+                  v-model="item.yhzgx"
+                  label="与户主关系"
+                  value-key="dictLabel"
+                  data-key="dictValue"
+                  placeholder="选择与户主关系"
+                  :rules="[{ required: true }]"
+                  required
+                  readonly
+                  remote-url="/system/dict/data/type/family_status"
+                  :on-remote-response="'data'"
+                />
+                <van-field readonly required v-model="item.sfzh" label="身份证号" placeholder="身份证号" input-align="right" :rules="[{pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/}]" @input="updateMemberInfo(index)"/>
+                <van-field readonly required v-model="item.hkszd" label="户口所在地" placeholder="户口所在地" input-align="right" :rules="[{ required: true }]"/>
+              </div>
+            </div>
+          </van-tab>
+        </van-tabs>
+      </div>
+    </div>
+    <p class="main_title">拟申请退出宅基地-面积</p>
+    <van-field readonly v-model="circulation.tcmj" label="面积(㎡)" placeholder="请输入面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+    <field-select
+      readonly
+      v-model="circulation.xz"
+      label="现状"
+      value-key="dictLabel"
+      data-key="dictValue"
+      placeholder="选择现状"
+      :rules="[{ required: true }]"
+      required
+      remote-url="/system/dict/data/type/dsxz"
+      :on-remote-response="'data'"
+    />
+    <p class="main_title">拟申请退出宅基地-四至</p>
+    <van-field readonly v-model="circulation.zjdszd" label="东至" placeholder="东至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+    <van-field readonly v-model="circulation.zjdszn" label="南至" placeholder="南至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+    <van-field  readonly v-model="circulation.zjdszx" label="西至" placeholder="西至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+    <van-field readonly v-model="circulation.zjdszb" label="北至" placeholder="北至" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
+    <p class="main_title">拟申请退出宅基地情况-地类</p>
+    <field-select
+      readonly
+      v-model="circulation.dldm"
+      label="地类"
+      value-key="dictLabel"
+      data-key="dictValue"
+      placeholder="选择现状"
+      :rules="[{ required: true }]"
+      required
+      remote-url="/system/dict/data/type/geographic_type"
+      :on-remote-response="'data'"
+    />
+    <p class="main_title">退出宅基地情况</p>
+    <van-field readonly v-model="circulation.tcmj" label="退出面积(㎡)" placeholder="请输入退出面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+    <van-field readonly v-model="circulation.jzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+    <div class="main_box">
+      <van-field
+        readonly
+        clickable
+        v-model="tcqllx"
+        label="退出权利类型"
+        placeholder="请选择退出权利类型"
+        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"
+          @cancel="showtcqllx = false"
         />
-        <van-field
-          readonly
-          v-model="circulation.tcfs"
-          label="退出方式"
-          input-align="right"
-          label-width="auto"
+      </van-popup>
+
+      <!--<van-field
+        readonly
+        clickable
+        v-model="tclx"
+        label="退出类型"
+        placeholder="请选择退出类型"
+        @click="showtclx = true"
+        input-align="right"
+        right-icon="arrow-down"
+        label-width="auto" :rules="[{ required: true }]" required
+      />
+      <van-popup v-model="showtclx" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="tclxDictionaries"
+          @confirm="onConfirmTclx"
+          @cancel="showtclx = false"
         />
-        <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>
+      </van-popup>-->
 
-      <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
+        clickable
+        v-model="tcfs"
+        label="退出方式"
+        placeholder="请选择退出方式"
+        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"
+          @cancel="showtcfs = false"
         />
-        <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>
+      </van-popup>
+
+      <van-field v-model="circulation.tcqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
     </div>
+    <p class="main_title">现居住情况</p>
+    <van-field readonly v-model="circulation.xjzmj" label="建筑面积(㎡)" placeholder="请输入建筑面积㎡" input-align="right" label-width="auto" :rules="[{ required: true }]" required type="number"/>
+    <van-field readonly v-model="circulation.xqszsh" label="权属证书号" placeholder="请输入权属证书号" input-align="right" label-width="auto" />
+    <van-field readonly v-model="circulation.xjzdd" label="居住地点" placeholder="请输入居住地点" input-align="right" label-width="auto" />
+    <p class="main_title">其他</p>
+
+    <van-field readonly v-model="circulation.sqly" label="申请理由" placeholder="请输入申请理由" input-align="right" label-width="auto"/>
+    <field-date-picker
+      readonly
+      v-model="circulation.sqrq"
+      label="申请日期"
+      placeholder="选择日期"
+      :rules="[{ required: true }]"
+      formatter="yyyy-MM-dd"
+      required
+    />
+    <van-field readonly v-model="circulation.jbrxm" label="经办人姓名" placeholder="请输入经办人姓名" input-align="right" label-width="auto"/>
+    <field-date-picker
+      readonly
+      v-model="circulation.pzrq"
+      label="批准日期"
+      placeholder="选择日期"
+      :rules="[{ required: true }]"
+      formatter="yyyy-MM-dd"
+      required
+    />
+    <field-date-picker
+      v-model="circulation.barq"
+      label="备案日期"
+      placeholder="选择日期"
+      :rules="[{ required: true }]"
+      formatter="yyyy-MM-dd"
+      required
+    />
+
+    <van-dialog v-model="mapShow" show-cancel-button>
+      <MapGisObtainTc ref="zjdProductResh" :shqrxm="circulation.sqrxm" :landStatus="landStatus" :deptId="circulation.deptId" @closeMoule="closeMoule"></MapGisObtainTc>
+    </van-dialog>
+    <!-- 3组附件 -->
+    <van-popup
+      v-model="attachmentVisible"
+      closeable
+      position="top"
+      :style="{ height: '61.8%' }"
+      :close-on-click-overlay="proposerStatus == 1"
+      :lazy-render="false"
+    >
+      <van-tabs type="card" style="padding-top: 1.35rem;" color="#1D6FE9" :lazy-render="false" v-model="attachmentActive" ref="attachmentDialog">
+        <van-tab title="退出附件" key="0">
+          <home-apply-upload-comp
+            :business-type="houseApplyUploadComp.businessType"
+            :house-apply-status="houseApplyUploadComp.homeApplyStatus"
+            :process-key="houseApplyUploadComp.processKey"
+            :proposer-id="houseApplyUploadComp.proposerId"
+            :table-name="houseApplyUploadComp.tableName"
+            :readonly="houseApplyUploadComp.readonly"
+            :userName="houseApplyUploadComp.createBy"
+            :full="houseApplyUploadComp.full"
+          >
+          </home-apply-upload-comp>
+        </van-tab>
+      </van-tabs>
+    </van-popup>
+    <!-- 审批 -->
+
+    <div class="main_box examine_box" v-if="showCjt">
+      <van-row type="flex" justify="space-between" align="center">
+        <van-col span="5">村集体<br/>经济组<br/>织或村<br/>民委员<br/>会意见</van-col>
+        <van-col span="19">
+          <van-field required :readonly="approval.type !== 'todo' || !cjtspOperation" v-model="circulation.cjzzscyj" rows="2" autosize type="textarea" placeholder="审核意见"/>
+          <van-cell title="负责人:"  :rules="[{ required: true }]">
+            <van-image
+              v-if="circulation.cjzzscr !='' && circulation.cjzzscr !=null && circulation.cjzzscr.endsWith('png')"
+              width="100"
+              height="50"
+              :src="$store.getters.baseRoutingUrl+circulation.cjzzscr"
+            ></van-image>
+            <div  v-if="circulation.cjzzscr !='' && circulation.cjzzscr !=null && !circulation.cjzzscr.endsWith('png')">{{circulation.cjzzscr}}</div>
+          </van-cell>
+          <field-date-picker
+            v-model="circulation.cjzzscsj"
+            label="审批日期"
+            placeholder="选择日期"
+            :readonly="approval.type !== 'todo' || !cjtspOperation"
+            :rules="[{ required: true }]"
+            formatter="yyyy-MM-dd"
+            required
+          />
+        </van-col>
+
+      </van-row>
+    </div>
+
+    <div class="main_box examine_box" v-if="showZjsp">
+      <van-row type="flex" justify="space-between" align="center">
+        <van-col span="5">镇级人<br/>民镇府<br/>意见</van-col>
+        <van-col span="19">
+          <van-field required :readonly="approval.type !== 'todo'" v-model="circulation.xzzfshpzyj" rows="2" autosize type="textarea" placeholder="审核意见"/>
+          <van-cell title="负责人:"  :rules="[{ required: true }]">
+            <van-image
+              v-if="circulation.xzzfshpzrxm !='' && circulation.xzzfshpzrxm !=null && circulation.xzzfshpzrxm.endsWith('png')"
+              width="100"
+              height="50"
+              :src="$store.getters.baseRoutingUrl+circulation.xzzfshpzrxm"
+            ></van-image>
+            <div v-if="circulation.xzzfshpzrxm !='' && circulation.xzzfshpzrxm !=null && !circulation.xzzfshpzrxm.endsWith('png')">{{circulation.xzzfshpzrxm}}</div>
+          </van-cell>
+          <field-date-picker
+            v-model="circulation.xzzfshpzsj"
+            label="审批日期"
+            placeholder="选择日期"
+            :rules="[{ required: true }]"
+            :readonly="approval.type !== 'todo'"
+            formatter="yyyy-MM-dd"
+            required
+          />
+        </van-col>
+
+      </van-row>
+    </div>
+    <div class="clear"></div>
+    <van-goods-action style="z-index: 999;">
+      <van-goods-action-icon icon="label-o" text="附件" @click="openAttachment" color="#1D6FE9" />
+      <van-goods-action-button type="info" text="同意" v-if="approval.type == 'todo'"  @click="complete(true)" />
+      <van-goods-action-button type="danger" text="驳回" v-if="approval.type == 'todo'"  @click="complete(false)"/>
+    </van-goods-action>
+  </div>
 </template>
 
 <script>
-import { getZyyctc } from "@/api/onlineHome/homestead/paidExit";
-export default {
-  name: "paidExitDetail",
-  data() {
-    return {
-      circulation:[]
-    };
-  },
-  created() {
-    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);
+  import {  getZyyctc,getShyqrs,zyyctcEdit,zyyctcApply,getByLyZjddm,listHomesteadnmfw} from "@/api/sunVillage_info/homestead/paidExit";
+  import HomeApplyUploadComp from "@/components/home/HomeApplyUploadCompTc";
+  import FieldSelect from "@/components/form/FieldSelect";
+  import FieldDatePicker from "@/components/form/FieldDatePicker";
+  import {formatDate} from "element-ui/src/utils/date-util.js";
+  import { } from "@/api/onlineHome/homestead/paidExit";
+  import {Notify} from "vant";
+  import MapGisObtainTc from "@/components/Map/MapGisObtainTc";
+  import request from '@/utils/request';
+  const PROPOSER_VIEW = 1;
+  // 工作流名称
+  const PROPOSER_STAGE_BASE_APPLY_ACTIVITY = 'home_usetc';
+  // 附件表名
+  const PROPOSER_STAGE_BASE_APPLY_TABLE = 't_homeuse_zyyctc';
+  // 其他
+  const PROPOSER_MODULE = 'home';
+  export default {
+    name: "paidExitDetail",
+    components: { MapGisObtainTc,FieldSelect,FieldDatePicker,HomeApplyUploadComp },
+    data() {
+      return {
+        tcqllxDictionaries:[],//退出权利类型
+        tclxDictionaries:[],//退出类型
+        tcfsDictionaries:[],//退出方式
+        xbDictionaries:[],//申请人证件类型
+        zjlxDictionaries:[],
+        bcfsDictionaries:[],//补偿方式
+        zjdDictionaries:[],//宅基地代码
+        getObligeeOptions:[],//下拉框列表
+        tcqllx:'',
+        tclx:'',
+        tcfs:'',
+        xb:'',
+        bcfs:'',
+        zjddm:'',
+        landStatus:"1",
+        nickName:this.$route.query.nickName,
+        electronicSignature:this.$route.query.electronicSignature,
+        showtcqllx: false,
+        showtclx: false,
+        showtcfs: false,
+        showxb: false,
+        showbcfs: false,
+        showzjddm: false,
+        showZjsp: false,
+        showCjt:false,
+        cjtspOperation:false,
+        showDropList: false,//是否显示下拉框
+        mapShow: false,
+        attachmentVisible:false,
+        // 家庭成员tab
+        familyMembersActive: 0,
+        active: 0,
+        // 表单意图
+        proposerStatus: PROPOSER_VIEW,
+        circulation:{},
+        // 当前附件tab
+        attachmentActive: 0,
+        // 申请附件树
+        houseApplyUploadComp: {
+          businessType: PROPOSER_MODULE,
+          proposerId: this.$route.query.id,
+          homeApplyStatus: "11",
+          processKey: PROPOSER_STAGE_BASE_APPLY_ACTIVITY,
+          tableName: PROPOSER_STAGE_BASE_APPLY_TABLE,
+          attachmentList: [],
+          readonly: true,
+          full: false,
+        },
+        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: {
+      // 获取日期, yyyy-MM-dd
+      getDate(d) {
+        return formatDate(d ? d : new Date(), 'yyyy-MM-dd');
+      },
+      getDetail(){
+        getZyyctc(this.$route.query.id).then(response => {
+          this.circulation = response.data;
+          if(this.circulation.jtcyqkList != null){
+            for(let i = 0; i < this.circulation.jtcyqkList.length; i++)
+            {
+              this.updateMemberInfo(i);
+            }
+          }
+          if(this.circulation.gyrqkList != null){
+            for(let i = 0; i < this.circulation.gyrqkList.length; i++)
+            {
+              this.updateMemberInfoGy(i);
+            }
+          }
+          if(this.approval.type === "todo"){
+            if(response.data.auditStatus === "1" || response.data.auditStatus === "2"){
+              if(this.electronicSignature != null){
+                this.$set(this.circulation, "cjzzscr", this.electronicSignature);
+              }else{
+                this.$set(this.circulation, "cjzzscr", this.nickName);
+              }
+              let handlerTime = this.getDate();
+              this.$set(this.circulation, "cjzzscsj", handlerTime);
+              this.cjtspOperation = true;
+              this.showCjt = true;
+
+            }else if(response.data.auditStatus === "3"){
+              this.showZjsp = true;
+              this.showCjt = true;
+              if(this.electronicSignature != null){
+                this.zzfdzqmShow = true;
+                this.$set(this.circulation, "xzzfshpzrxm", this.electronicSignature);
+              }else{
+                this.$set(this.circulation, "xzzfshpzrxm", this.nickName);
+              }
+              let handlerTime = this.getDate();
+              this.$set(this.circulation, "xzzfshpzsj", handlerTime);
+            }
+          }else{
+            if(response.data.auditStatus === "4" ){
+              this.showCjt = true;
+              this.showZjsp = true;
+            }else if(response.data.auditStatus === "0" || response.data.auditStatus === "1"){
+              this.showCjt = false;
+            }else{
+              this.showCjt = true;
+            }
+          }
+
+          //退出权利类型
+          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("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("audit_status").then((res) => {
+            this.circulation.auditStatus = this.selectDictLabel(res.data, response.data.auditStatus);
+          });
         });
-        //审核状态
-        this.houseGetDicts("audit_status").then((res) => {
-          this.circulation.auditStatus = this.selectDictLabel(res.data, response.data.auditStatus);
+      },
+      parseIDCard(idcard) {
+        if(!idcard)
+          return false;
+        if(idcard.length !== 18)
+          return false;
+        if(!/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idcard))
+          return false;
+        let sex = (parseInt(idcard.substr(16, 1)) % 2) ^ 1;
+        let now = new Date().getFullYear();
+        let y = parseInt(idcard.substr(6, 4));
+        let age = Math.max(now - y, 0);
+        return [sex, age];
+      },
+      updateMemberInfo(index) {
+        let res = this.parseIDCard(this.circulation.jtcyqkList[index].sfzh);
+        if(res)
+        {
+          this.$set(this.circulation.jtcyqkList[index], 'nl', res[1]);
+        }
+      },
+      updateMemberInfoGy(index) {
+        let res = this.parseIDCard(this.circulation.gyrqkList[index].sfzh);
+        if(res)
+        {
+          this.$set(this.circulation.gyrqkList[index], 'nl', res[1]);
+        }
+      },
+      remoteProposerMethod() {
+        this.showzjddm = true;
+        this.zjdDictionaries = [];
+        if (this.circulation.sqrxm) {
+          getShyqrs({shyqrdbxm:this.circulation.sqrxm}).then(response => {
+            this.zjdDictionaries = response.data.map(item => {
+              return {
+                zjddm: item.zjddm,
+                shyqrdbxm: item.shyqrdbxm,
+                shyqrdbzjlx: item.shyqrdbzjlx,
+                shyqrdbzjhm: item.shyqrdbzjhm
+              }
+            });
+          });
+        } else {
+          this.zjdDictionaries = [];
+        }
+      },
+      /** 模糊查询人员信息 */
+      remoteTransfereeMethod(query) {
+        if (query !== "") {
+          getShyqrs({shyqrdbxm:query,status:1}).then((response) => {
+            if (response.code == 200) {
+              this.getObligeeOptions = response.rows.map(function (item) {
+                return {
+                  sqrxm:item.shyqrdbxm,
+                  sqrxb:item.xb,
+                  sqrzjhm:item.shyqrdbzjhm,
+                  sqrzjlx:item.shyqrdbzjlx,
+                  sqrdh:item.dh,
+                  gyfs:item.gyfs,
+                  dz:item.dz,
+                  deptId:item.deptId,
+                  deptName:item.deptName,
+                }
+              })
+              //设置模糊查询的下拉框和滚动条
+              if (this.getObligeeOptions.length > 0) {
+                this.showDropList = true;   // div显示会阻挡下边的选择框和输入框，showDropList控制下拉框是否显示
+                //设置模糊查询的和滚动条
+                this.$nextTick(() => {
+                  if (this.getObligeeOptions.length > 4) {
+                    let height = document.getElementById("vanCell").offsetHeight * 4;
+                    document.getElementById("dropList").style.height = height + "px";
+                    document.getElementById("dropList").style.overflow = "scroll";
+                  } else {
+                    document.getElementById("dropList").style.height = "";
+                    document.getElementById("dropList").style.overflow = "visible";
+                  }
+                });
+              } else {
+                this.showDropList = false;
+              }
+            }
+          });
+        } else {
+          this.getObligeeOptions = [];
+          this.showDropList = false;
+        }
+      },
+      shyqrdmxmChange(val){
+        console.info(val);
+        this.$set(this.circulation, "sqrxm", val.sqrxm);
+        this.$set(this.circulation, "deptId", val.deptId);
+        this.$set(this.circulation, "deptName", val.deptId);
+        this.$set(this.circulation, "sqrzjhm", val.sqrzjhm);
+        this.$set(this.circulation, "sqrzjlx", val.sqrzjlx);
+        this.$set(this.circulation, "gyqk", val.gyfs);
+        this.$set(this.circulation, "xb", val.sqrxb);
+        this.$set(this.circulation, "lxdh", val.sqrdh);
+        this.$set(this.circulation, "hkszd", val.dz);
+        this.getObligeeOptions=[];
+        this.showDropList = false;
+      },
+      /** 查找地图中宅基地 */
+      closeMoule: function (data) {
+        this.circulation.zjddm = data;
+        let _this = this;
+        let handlerTime = this.getDate();
+        this.$set(this.circulation, "sqrq", handlerTime);
+        this.$set(this.circulation, "pzrq", handlerTime);
+        this.$set(this.circulation, "barq", handlerTime);
+        getByLyZjddm(data).then((response) => {
+          this.$set(this.circulation, "ntcmj", response.data.zdmj);
+          this.$set(this.circulation, "tcmj", response.data.zdmj);
+          this.$set(this.circulation, "zjdszd", response.data.zdszd);
+          this.$set(this.circulation, "zjdszn", response.data.zdszn);
+          this.$set(this.circulation, "zjdszx", response.data.zdszx);
+          this.$set(this.circulation, "zjdszb", response.data.zdszb);
+          this.$set(this.circulation, "theGeomJson", response.data.theGeomJson);
+          this.$set(this.circulation, "tcqszsh", response.data.zsh);
+          listHomesteadnmfw({zjddm: data}).then((response) => {
+            response.rows.map(function(item){
+              _this.$set(_this.circulation, "jzmj", Number(_this.circulation.jzmj) + Number(item.jzmj));
+              _this.$set(_this.circulation, "xjzmj", Number(_this.circulation.xjzmj) + Number(item.jzmj));
+            });
+          });
+          // const baseImgUrl = this.$store.getters.baseRoutingUrl;
+          if(response.rows[0].zdt != null && response.rows[0].zdt !== ""){
+            this.$set(this.form, "xzzp", response.rows[0].zdt);
+          }
         });
-      });
-    }
-  },
-}
+      },
+      mapLook(){
+        this.mapShow = true;
+        setTimeout(() => {
+          this.$refs.zjdProductResh.drawingLyPaceCountryDarw();
+        },1000);
+      },
+      // 打开附件树
+      openAttachment() {
+        this.attachmentVisible = true;
+        if(this.attachmentActive == this.active)
+          this.$nextTick(() => {
+            this.$refs.attachmentDialog.scrollTo(this.active);
+          });
+      },
+      complete(pass) {
+        if(this.circulation.auditStatus === "1" || this.circulation.auditStatus === "2"){
+          this.approval.comment = this.circulation.cjzzscyj;
+        }else{
+          this.approval.comment = this.circulation.xzzfshpzyj;
+        }
+        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');
+        });*/
+        if (pass) {
+          let data = {
+            taskId: this.approval.taskId,
+            instanceId: this.approval.instanceId,
+            variables: JSON.stringify({
+              pass: "true",
+              comment: this.approval.comment ? this.approval.comment : "同意",
+            }),
+          };
+          zyyctcEdit(this.circulation).then(response => {
+            request({
+              url: "/activiti/process/complete",
+              method: "post",
+              params: data,
+            }).then((response) => {
+              this.notify("操作成功", 'success');
+              this.$router.back();
+            }).catch(e => {
+              this.notify("操作失败!", 'danger');
+            });
+          });
+
+        } else {
+          let _this = this;
+          _this.$dialog.confirm({
+            message: '是否确认驳回此条申请',
+          }).then(() => {
+            let data = {
+              taskId: _this.approval.taskId,
+              instanceId: _this.approval.instanceId,
+              variables: JSON.stringify({
+                pass: "false",
+                comment: _this.approval.comment ? _this.approval.comment : "驳回",
+              }),
+            };
+            zyyctcEdit(this.circulation).then(response => {
+              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;
+    padding-bottom: 2%;
+  .header_main{
+    height: 116px;
+    background: url('../../../../assets/images/sunVillage_info/list_head_green.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;
+    margin-bottom: 2%;
+  .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;
+  }
+  }
   }
   .main_title{
     font-size: 0.4rem;
@@ -142,4 +823,28 @@ export default {
     background-color: #1D6FE9;
 
   }
+  .clear{
+    height: 80px;
+  }
+  .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/yinnong/homestead/paidExit/paidExitList.vue

@@ -1,133 +1,188 @@
 <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" :value="item.auditStatus" center :to="{name:'paidExitDetail', 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="修改" v-if="item.auditStatus=='草稿'" :to="{name:'paidExitModify', query: {id:item.id}}" type="info" class="delete-button" />
-              </van-col>
-              <van-col>
-                <van-button square text="删除" v-if="item.auditStatus=='草稿'" @click="deleteList(item.id,index)" type="danger" class="delete-button" />
-              </van-col>
-            </van-row>
-          </template>
-        </van-swipe-cell>
-      </van-list>
+  <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>-->
+
+    <div class="header_main">
+      有偿退出
+      <div class="return_btn" @click="onClickLeft"></div>
     </div>
+
+    <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" :value="item.auditStatus" center :to="{name:'paidExitDetail', 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>
+      </van-swipe-cell>
+    </van-list>
+  </div>
 </template>
 
 <script>
-import { getList , removeList } from "@/api/onlineHome/homestead/paidExit";
-export default {
-  name: "paidExit",
-  data() {
-    return {
-      applicationList:[],
-      houseApplyStatus:[],
-      tcqllxStatus:[],
-      tclxStatus:[],
-      tcfsStatus:[],
-      auditStatus:[],
-      loading: false,
-      finished: false,
-      queryParams:{
-        pageNum:1,
-        pageSize:10,
-        orderByColumn:'createTime',
-        isAsc:'desc'
-      }
-    };
-  },
-  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;
-    });
-    this.houseGetDicts("audit_status").then((res) => {
-      this.auditStatus = res.data;
-    });
-  },
-  methods: {
-    goAdd(){
-      window.location = 'paidExitAdd';
+  import { getList, removeList, zyyctcApply } from "@/api/sunVillage_info/homestead/paidExit";
+  export default {
+    name: "paidExit",
+    data() {
+      return {
+        applicationList:[],
+        houseApplyStatus:[],
+        tcqllxStatus:[],
+        tclxStatus:[],
+        tcfsStatus:[],
+        auditStatus:[],
+        loading: false,
+        finished: false,
+        queryParams:{
+          pageNum:1,
+          pageSize:10,
+          deptId: null,
+          orderByColumn:'createTime',
+          isAsc:'desc',
+          // 申请类型  1-宅基地退出
+          sqlx: '1',
+          // 退出类型  01-有偿退出   02-无偿退出
+          tclx: '01',
+        }
+      };
     },
-    getList(){
-      setTimeout(() => {
-        getList(this.queryParams).then(response => {
-          console.log(response)
-          for (var i = 0; i < response.rows.length; i++) {
-            response.rows[i].tclx = this.selectDictLabel(this.tcqllxStatus, response.rows[i].tclx)
-            response.rows[i].tclx = this.selectDictLabel(this.tclxStatus, response.rows[i].tclx)
-            response.rows[i].tcfs = this.selectDictLabel(this.tcfsStatus, response.rows[i].tcfs)
-            response.rows[i].auditStatus = this.selectDictLabel(this.auditStatus, response.rows[i].auditStatus)
-            this.applicationList.push(response.rows[i]);
-          }
-          if(this.applicationList.length >= response.total){
-            this.finished = true;
-            return;
-          }else{
-            this.loading = false;
-            this.queryParams.pageNum += 1 ;
+    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;
+      });
+      this.houseGetDicts("yctcsp_status").then((res) => {
+        // this.auditStatus = res.data;
+        let _this = this;
+        res.data.forEach((item) => {
+          if (item.dictValue < 5) {
+            _this.auditStatus.push(item);
+          } else if (item.dictValue == 5) {
+            item.dictLabel = "审核通过";
+            _this.auditStatus.push(item);
           }
         });
-      }, 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('删除成功');
+    methods: {
+      getList(){
+        setTimeout(() => {
+          this.deptId = this.$store.state.user.loginDeptId;
+          this.$set(this.queryParams, "deptId", this.deptId);
+          getList(this.queryParams).then(response => {
+            for (var i = 0; i < response.rows.length; i++) {
+              response.rows[i].tclx = this.selectDictLabel(this.tcqllxStatus, response.rows[i].tclx)
+              response.rows[i].tclx = this.selectDictLabel(this.tclxStatus, response.rows[i].tclx)
+              response.rows[i].tcfs = this.selectDictLabel(this.tcfsStatus, response.rows[i].tcfs)
+              response.rows[i].auditStatus = this.selectDictLabel(this.auditStatus, response.rows[i].auditStatus)
+              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);
+      },
+      formatDict(dict, value) {
+        return this.selectDictLabel(dict, value);
+      },
+      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
+          });
+      },
+      goSubmit(item) {
+        zyyctcApply(item.id).then(response => {
+          if (response.code = 200) {
+            this.$toast.success('提交成功');
+            setTimeout(function () {
+              window.location.replace("/sunVillage_info/paidExit/paidExitList")
+            }, 1000)
           }
-        });
-      })
-      .catch(() => {
-        // on cancel
-      });
-    }
-  },
-}
+        })
+      },
+    },
+  }
 </script>
 
 <style scoped lang="scss">
   .app-container {
+  .header_main{
+    height: 116px;
+    background: url('../../../../assets/images/sunVillage_info/list_head_green.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;
+  }
+  }
+  }
+  /deep/.van-list{
     padding: 0.2rem 3%;
   }
   /deep/.van-cell__title{
@@ -142,6 +197,9 @@ export default {
     flex: 0.3;
     color: #1D6FE9;
     font-weight: bold;
+    text-align: center;
+    position: relative;
+    left: 20px;
   }
   /deep/.van-swipe-cell{
     margin-bottom: 0.2rem;

src/views/yinnong/homestead/paidExit/paidExitModify.vue

@@ -1,319 +0,0 @@
-<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
-        v-model="circulation.zjddm"
-        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 v-model="circulation.sqrxm" label="申请人姓名" placeholder="申请人姓名" input-align="right" label-width="auto"/>
-      <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"/>
-    </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"
-      />
-      <van-popup v-model="showtcqllx" position="bottom">
-        <van-picker
-          show-toolbar
-          :columns="tcqllxDictionaries"
-          @confirm="onConfirmTcqllx"
-          @cancel="showtcqllx = false"
-        />
-      </van-popup>
-
-      <van-field
-        readonly
-        clickable
-        v-model="tclx"
-        label="退出类型"
-        placeholder="请选择退出类型"
-        @click="showtclx = true"
-        input-align="right"
-        right-icon="arrow-down"
-        label-width="auto"
-      />
-      <van-popup v-model="showtclx" position="bottom">
-        <van-picker
-          show-toolbar
-          :columns="tclxDictionaries"
-          @confirm="onConfirmTclx"
-          @cancel="showtclx = false"
-        />
-      </van-popup>
-
-      <van-field
-        readonly
-        clickable
-        v-model="tcfs"
-        label="退出方式"
-        placeholder="请选择退出方式"
-        @click="showtcfs = true"
-        input-align="right"
-        right-icon="arrow-down"
-        label-width="auto"
-      />
-      <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"/>
-      <van-field v-model="circulation.tcnx" label="退出年限" placeholder="请输入退出年限" input-align="right" label-width="auto"/>
-    </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"/>
-      <van-field v-model="circulation.zhfwmj" label="置换房屋面积" placeholder="请输入房屋面积㎡" input-align="right" label-width="auto"/>
-      <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>
-
-    <div style="padding: 16px 0;">
-      <van-row>
-        <van-col span="12" align="center">
-          <van-button type="info" native-type="submit" class="submitButton" @click="goEdit">保存</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 { zyyctcEdit , getZyyctc , zyyctcApply } from "@/api/onlineHome/homestead/paidExit";
-  export default {
-    name: "paidExitModify",
-    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) => {
-            for (var i = 0; i < res.data.length; i++) {
-              this.tclxDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
-            }
-            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;
-      },
-      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;
-      },
-      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;
-      },
-      goEdit(){
-        console.log(this.circulation);
-        zyyctcEdit(this.circulation).then(response => {
-          if(response.code = 200){
-            this.$toast.success('保存成功');
-          }
-        });
-      },
-      goSubmit(){
-        zyyctcApply(this.$route.query.id).then(response => {
-          if(response.code = 200){
-            this.$toast.success('提交成功');
-            setTimeout(function(){
-              window.location.replace("paidExit")
-            },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/yinnong/homestead/supervision/supervisionAdd.vue

@@ -39,47 +39,9 @@
       />
       <van-field v-model="jgList.shyqrzjhm" label="申请人证件号码" placeholder="申请人证件号码" input-align="right" label-width="auto" :rules="[{ required: true }]" required/>
     </div>
-    <p class="main_title">执法情况</p>
-    <field-select
-      v-model="jgList.jglx"
-      label="监管类型"
-      value-key="dictLabel"
-      data-key="dictValue"
-      placeholder="选择监管类型"
-      :rules="[{ required: true }]"
-      required
-      remote-url="/system/dict/data/type/jglx"
-      :on-remote-response="'data'"
-    />
-    <field-date-picker
-      v-model="jgList.lasj"
-      label="立案时间"
-      placeholder="选择立案时间"
-      :rules="[{ required: true }]"
-      formatter="yyyy-MM-dd"
-      required
-    />
-    <field-select
-      v-model="jgList.wfydlx"
-      label="违法用地类型"
-      value-key="dictLabel"
-      data-key="dictValue"
-      placeholder="选择违法用地类型"
-      :rules="[{ required: true }]"
-      required
-      remote-url="/system/dict/data/type/villations_type"
-      :on-remote-response="'data'"
-    />
-    <van-field required v-model="jgList.sjdz" label="事件地址" placeholder="事件地址" input-align="right" :rules="[{ required: true }]"/>
-    <van-dialog v-model="mapShow" show-cancel-button>
-      <MapGisObtainTc ref="zjdProductResh" :shqrxm="jgList.shyqrdbxm" :landStatus="landStatus" :deptId="deptId" @closeMoule="closeMoule"></MapGisObtainTc>
-    </van-dialog>
-    <van-field rows="3" :autosize="true" type="textarea" label="备注" label-width="auto"  placeholder="备注" v-model="jgList.bz" input-align="left"></van-field>
-    <div v-if="wfxxShow">
       <p class="main_title">违法信息</p>
       <div class="main_box">
         <van-field
-          readonly
           clickable
           label="违法用地类型"
           placeholder="请选择"
@@ -100,28 +62,26 @@
         <van-field v-model="jgList.fmkje" label="罚没款金额" placeholder="请输入金额" input-align="right" label-width="auto"/>
         <van-field v-model="jgList.msmj" label="没收面积" placeholder="请输入面积" input-align="right" label-width="auto"/>
         <van-field v-model="jgList.ccmj" label="拆除面积" placeholder="请输入面积" input-align="right" label-width="auto"/>
-        <van-field
-          readonly
-          clickable
-          label="整改截止时间"
-          placeholder="选择整改截止时间"
-          v-model="jgList.reformDeadline"
-          @click="showReformDeadline = true"
-          input-align="right"
-          right-icon="arrow-down"
-        />
-        <van-popup v-model="showReformDeadline" position="bottom">
-          <van-datetime-picker
-            v-model="currentDate"
-            type="date"
-            title="选择年月日"
-            :min-date="minDate"
-            :max-date="maxDate"
-            @confirm="onConfirmReformDeadline"
-          />
-        </van-popup>
-    </div>
-
+<!--        <van-field-->
+<!--          readonly-->
+<!--          clickable-->
+<!--          label="整改截止时间"-->
+<!--          placeholder="选择整改截止时间"-->
+<!--          v-model="jgList.reformDeadline"-->
+<!--          @click="showReformDeadline = true"-->
+<!--          input-align="right"-->
+<!--          right-icon="arrow-down"-->
+<!--        />-->
+<!--        <van-popup v-model="showReformDeadline" position="bottom">-->
+<!--          <van-datetime-picker-->
+<!--            v-model="currentDate"-->
+<!--            type="date"-->
+<!--            title="选择年月日"-->
+<!--            :min-date="minDate"-->
+<!--            :max-date="maxDate"-->
+<!--            @confirm="onConfirmReformDeadline"-->
+<!--          />-->
+<!--        </van-popup>-->
     </div>
     <div style="padding: 16px 0;">
       <van-row>

src/views/yinnong/homestead/supervision/supervisionDetail.vue

@@ -25,6 +25,9 @@
         />
         <van-field readonly label="使用权人证件号码" v-model="jgList.shyqrzjhm" input-align="right"/>
         <van-field readonly label="宅基地代码" v-model="jgList.zjddm" input-align="right" label-width="auto"/>
+      </div>
+      <p class="main_title">违法信息</p>
+      <div class="main_box">
         <field-select
           v-model="jgList.jglx"
           label="监管类型"
@@ -35,32 +38,30 @@
           remote-url="/system/dict/data/type/jglx"
           :on-remote-response="'data'"
         />
-        <field-date-picker
-          readonly
-          v-model="jgList.lasj"
-          label="立案时间"
-          formatter="yyyy-MM-dd"
-        />
-        <field-select
-          v-model="jgList.wfydlx"
-          label="违法用地类型"
-          value-key="dictLabel"
-          data-key="dictValue"
-          placeholder="选择违法用地类型"
-          readonly
-          remote-url="/system/dict/data/type/villations_type"
-          :on-remote-response="'data'"
-        />
-        <van-field readonly label="事件地址" v-model="jgList.fmkje" input-align="right" label-width="auto"/>
-        <van-field readonly label="备注" v-model="jgList.bz" input-align="right" label-width="auto"/>
-      </div>
-      <p class="main_title">违法信息</p>
-      <div class="main_box">
         <van-field v-model="jgList.wfydmj" label="违法用地面积(平方米)" type="number" placeholder="请输入违法用地面积" input-align="right" label-width="auto"/>
         <van-field v-model="jgList.fmkje" label="罚没款金额(元)" type="number" placeholder="请输入罚没款金额" input-align="right" label-width="auto"/>
         <van-field v-model="jgList.msmj" label="没收面积(平方米)" type="number" placeholder="请输入没收面积" input-align="right" label-width="auto"/>
         <van-field v-model="jgList.ccmj" label="拆除面积(平方米)" type="number" placeholder="请输入拆除面积" input-align="right" label-width="auto"/>
       </div>
+      <p class="main_title">执法情况</p>
+      <field-date-picker
+        readonly
+        v-model="jgList.lasj"
+        label="立案时间"
+        formatter="yyyy-MM-dd"
+      />
+      <field-select
+        v-model="jgList.wfydlx"
+        label="违法用地类型"
+        value-key="dictLabel"
+        data-key="dictValue"
+        placeholder="选择违法用地类型"
+        readonly
+        remote-url="/system/dict/data/type/villations_type"
+        :on-remote-response="'data'"
+      />
+      <van-field readonly label="事件地址" v-model="jgList.fmkje" input-align="right" label-width="auto"/>
+      <van-field readonly label="备注" v-model="jgList.bz" input-align="right" label-width="auto"/>
       <p class="main_title">结案信息</p>
       <div class="main_box">
         <field-date-picker

src/views/yinnong/homestead/supervision/supervisionList.vue

@@ -32,10 +32,7 @@
           <template #right>
             <van-row>
               <van-col>
-                <van-button v-if="item.status == '0'" color="#FFA63E" text="立案" square @click="onRegister(item)" type="info" class="delete-button" />
-              </van-col>
-              <van-col>
-                <van-button v-if=" item.status == '1'" color="#FF0000" square text="违法信息" :to="{name:'yinnongSupervisionWfxx', query: {id:item.id}}" type="danger" class="delete-button" />
+                <van-button v-if="item.status == '0'" color="#FFA63E" text="立案" :to="{name:'yinnongSupervisionWfxx', query: {id:item.id}}" type="info" class="delete-button" />
               </van-col>
               <van-col>
                 <van-button v-if=" item.status == '1'" color="#7DDA4F" square text="结案" :to="{name:'yinnongSupervisionCloseCase', query: {id:item.id}}" type="danger" class="delete-button" />

src/views/yinnong/homestead/supervision/supervisionWfxx.vue

@@ -7,7 +7,7 @@
         @click-left="$router.back(-1)"
       >
         <template #title>
-          <p style="font-weight: bold;">违法信息</p>
+          <p style="font-weight: bold;">执法情况</p>
         </template>
       </van-nav-bar>
       <p class="main_title">基本信息</p>
@@ -25,6 +25,31 @@
         />
         <van-field readonly label="使用权人证件号码" v-model="jgList.shyqrzjhm" input-align="right"/>
         <van-field readonly label="宅基地代码" v-model="jgList.zjddm" input-align="right" label-width="auto"/>
+        <p class="main_title">违法信息</p>
+        <div class="main_box">
+          <van-field
+            clickable
+            label="违法用地类型"
+            placeholder="请选择"
+            v-model="wfydlx"
+            @click="showwfydlx = true"
+            input-align="right"
+            right-icon="arrow-down"
+          />
+          <van-popup v-model="showwfydlx" position="bottom">
+            <van-picker
+              show-toolbar
+              :columns="wfydlxDictionaries"
+              @confirm="onConfirmWfydlx"
+              @cancel="showwfydlx = false"
+            />
+          </van-popup>
+          <van-field v-model="jgList.wfydmj" label="违法用地面积(平方米)" type="number" readonly placeholder="请输入违法用地面积" input-align="right" label-width="auto"/>
+          <van-field v-model="jgList.fmkje" label="罚没款金额(元)" type="number" readonly placeholder="请输入罚没款金额" input-align="right" label-width="auto"/>
+          <van-field v-model="jgList.msmj" label="没收面积(平方米)" type="number" readonly placeholder="请输入没收面积" input-align="right" label-width="auto"/>
+          <van-field v-model="jgList.ccmj" label="拆除面积(平方米)" type="number"  readonly placeholder="请输入拆除面积" input-align="right" label-width="auto"/>
+        </div>
+        <p class="main_title">执法情况</p>
         <field-select
           v-model="jgList.jglx"
           label="监管类型"
@@ -41,26 +66,10 @@
           label="立案时间"
           formatter="yyyy-MM-dd"
         />
-        <field-select
-          v-model="jgList.wfydlx"
-          label="违法用地类型"
-          value-key="dictLabel"
-          data-key="dictValue"
-          placeholder="选择违法用地类型"
-          readonly
-          remote-url="/system/dict/data/type/villations_type"
-          :on-remote-response="'data'"
-        />
-        <van-field readonly label="事件地址" v-model="jgList.fmkje" input-align="right" label-width="auto"/>
-        <van-field readonly label="备注" v-model="jgList.bz" input-align="right" label-width="auto"/>
-      </div>
-      <p class="main_title">违法信息</p>
-      <div class="main_box">
-        <van-field v-model="jgList.wfydmj" label="违法用地面积(平方米)" type="number" placeholder="请输入违法用地面积" input-align="right" label-width="auto"/>
-        <van-field v-model="jgList.fmkje" label="罚没款金额(元)" type="number" placeholder="请输入罚没款金额" input-align="right" label-width="auto"/>
-        <van-field v-model="jgList.msmj" label="没收面积(平方米)" type="number" placeholder="请输入没收面积" input-align="right" label-width="auto"/>
-        <van-field v-model="jgList.ccmj" label="拆除面积(平方米)" type="number" placeholder="请输入拆除面积" input-align="right" label-width="auto"/>
+        <van-field  label="事件地址" v-model="jgList.fmkje" input-align="right" label-width="auto"/>
+        <van-field  label="备注" v-model="jgList.bz" input-align="right" label-width="auto"/>
       </div>
+
       <div style="padding: 16px 0;">
         <van-row>
           <van-col span="12" align="center">
@@ -149,6 +158,7 @@ export default {
       this.showjasj = false;
     },
     goAdd(){
+      this.$set(this.jgList, "status", "1");
       jgEdit(this.jgList).then(response => {
         this.$toast.success('保存成功');
         setTimeout(function(){