zhangzl
/
nsgk_mobile
2
0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
移动端
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
1742 Commit
8 Rami (Branch)
82 MiB
 
 
Albero (Tree): 8d4cc525dc
Rami (Branch) Tag
${ item.name }
Crea branch ${ searchTerm }
da '8d4cc525dc'
${ noResults }
nsgk_mobile/src/views/onlineHome/homestead/homeApplication/applicationForm.vue

1132 righe
49 KiB
Originale Blame Cronologia 

  1. <template>

  2.     <div class="app-container">

  3.       <van-nav-bar

  4.         title="用地建房申请"

  5.         left-arrow

  6.         fixed

  7.         placeholder

  8.         @click-left="$router.back(-1)"

  9.       >

  10.         <template #right>

  11.           <van-icon name="../../../static/images/icon/icon_flow.png" size="20" @click="goFlow"/>

  12.         </template>

  13.       </van-nav-bar>

  14.       <van-steps :active="active" active-color="#38f">

  15.         <van-step>申请</van-step>

  16.         <van-step>开工</van-step>

  17.         <van-step>验收</van-step>

  18.       </van-steps>

  19.       <p class="topTit">农村宅基地和建房（规划许可）申请表</p>

  20.       <div class="main">

  21.         <van-form>

  22.           <div v-if="applicationDetail.tHouseApplyProposer">

  23.             <p class="main_title">申请用户信息</p>

  24.             <div class="main_box">

  25.             <van-field :readonly="auditStatus" :rules="[{ required: true }]" required v-model="applicationDetail.tHouseApplyProposer.memberName" label="姓名" placeholder="姓名" input-align="right"/>

  26.             <van-field

  27.               readonly

  28.               clickable

  29.               v-model="sexValue"

  30.               label="性别"

  31.               placeholder="选择性别"

  32.               @click=" auditStatus==true ? '' : showSex = true"

  33.               input-align="right"

  34.               right-icon="arrow-down"

  35.               :rules="[{ required: true }]" required

  36.             />

  37.             <van-popup v-model="showSex" position="bottom">

  38.               <van-picker

  39.                 show-toolbar

  40.                 :columns="userSex"

  41.                 @confirm="onConfirmSex"

  42.                 @cancel="showSex = false"

  43.                 :readonly="auditStatus"

  44.               />

  45.             </van-popup>

  46.             <van-field :readonly="auditStatus" :rules="[{ required: true }]" required v-model="applicationDetail.tHouseApplyProposer.age" label="年龄" placeholder="年龄" input-align="right"/>

  47.             <van-field :readonly="auditStatus" :rules="[{ required: true }]" required v-model="applicationDetail.tHouseApplyProposer.phone" label="联系电话" placeholder="联系电话" input-align="right"/>

  48.             <van-field :readonly="auditStatus" :rules="[{ required: true }]" required v-model="applicationDetail.tHouseApplyProposer.idcard" label="身份证号" placeholder="身份证号" input-align="right"/>

  49.             <van-field :readonly="auditStatus" :rules="[{ required: true }]" required v-model="applicationDetail.tHouseApplyProposer.householdRegister" label="户口所在地" placeholder="户口所在地" input-align="right"/>

  50.             <van-field :readonly="auditStatus" :rules="[{ required: true }]" required v-model="applicationDetail.tHouseApplyProposer.familyAddress" label="家庭住址" placeholder="家庭住址" input-align="right"/>

  51.             <van-field :readonly="auditStatus" :rules="[{ required: true }]" required v-model="applicationDetail.tHouseApplyProposer.members" label="家庭人口数" placeholder="家庭人口数" input-align="right"/>

  52.             <van-cell title="是否已有宅基地">

  53.               <template #right-icon>

  54.                 <van-radio-group :disabled="auditStatus" @change="existHomesteadChange" v-model="applicationDetail.tHouseApplyProposer.existHomestead" direction="horizontal">

  55.                   <van-radio name="Y">是</van-radio>

  56.                   <van-radio name="N">否</van-radio>

  57.                 </van-radio-group>

  58.               </template>

  59.             </van-cell>

  60.           </div>

  61.           </div>

  62. 

  63.           <div v-if="applicationDetail.tHouseApplyFamilyMembers && applicationDetail.tHouseApplyFamilyMembers!=''">

  64.             <p class="main_title">家庭成员信息<van-button icon="plus" size="mini" type="info" native-type="button" class="addFamily" @click="addFamily" v-if="!auditStatus" /></p>

  65.             <van-collapse  v-model="activeNames" v-if="auditStatus">

  66.               <van-collapse-item  class="collapse" v-for="(item , index) in applicationDetail.tHouseApplyFamilyMembers" :key="index" :name="index+1">

  67.                 <template #title>

  68.                   <van-row>

  69.                     <van-col span="8">{{item.memberName}}</van-col>

  70.                     <van-col span="8">{{item.age}}</van-col>

  71.                     <van-col span="8">{{item.familyStatusName}}</van-col>

  72.                   </van-row>

  73.                 </template>

  74.                 <van-field :readonly="auditStatus" v-model="item.memberName" label="姓名" placeholder="姓名" input-align="right"/>

  75.                 <van-field :readonly="auditStatus" v-model="item.age" label="年龄" placeholder="年龄" input-align="right"/>

  76.                 <van-field :readonly="auditStatus" v-model="item.familyStatusName" label="与户主关系" placeholder="与户主关系" input-align="right"/>

  77.                 <van-field :readonly="auditStatus" v-model="item.idcard" label="身份证号" placeholder="身份证号" input-align="right"/>

  78.                 <van-field :readonly="auditStatus" v-model="item.householdRegister" label="户口所在地" placeholder="户口所在地" input-align="right"/>

  79.               </van-collapse-item>

  80.             </van-collapse>

  81.             <div class="familyList" v-if="!auditStatus" v-for="(item , index) in applicationDetail.tHouseApplyFamilyMembers" :key="index">

  82.               <div class="main_box" style="margin-bottom: 20px">

  83.                 <van-button icon="minus" size="mini" type="danger" class="deleteFamily" native-type="button" v-if="index!=0" @click="deleteFamily(index)" />

  84.                 <van-field v-model="item.memberName" label="姓名" placeholder="姓名" input-align="right"/>

  85.                 <van-field v-model="item.age" label="年龄" placeholder="年龄" input-align="right"/>

  86.                 <van-field v-model="item.familyStatusName" label="与户主关系" placeholder="与户主关系" input-align="right"/>

  87.                 <van-field v-model="item.idcard" label="身份证号" placeholder="身份证号" input-align="right"/>

  88.                 <van-field v-model="item.householdRegister" label="户口所在地" placeholder="户口所在地" input-align="right"/>

  89.               </div>

  90.             </div>

  91. <!--            <div class=" familyList">-->

  92. <!--              <van-button icon="minus" size="mini" type="danger" class="deleteFamily" />-->

  93. <!--              <div class="main_box">-->

  94. <!--                <van-field label="姓名" placeholder="姓名" input-align="right"/>-->

  95. <!--                <van-field label="年龄" placeholder="年龄" input-align="right"/>-->

  96. <!--                <van-field label="与户主关系" placeholder="与户主关系" input-align="right"/>-->

  97. <!--                <van-field label="身份证号" placeholder="身份证号" input-align="right"/>-->

  98. <!--                <van-field label="户口所在地" placeholder="户口所在地" input-align="right"/>-->

  99. <!--              </div>-->

  100. <!--            </div>-->

  101.           </div>

  102. 

  103.           <div v-if="CurrentSituation">

  104.             <p class="main_title">现宅基地及农房状况</p>

  105.             <div class="main_box">

  106.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyCurrentSituation.landArea" label="宅基地面积" placeholder="宅基地面积" input-align="right"/>

  107.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyCurrentSituation.landPerArea" label="人均宅基地面积" placeholder="人均宅基地面积㎡" input-align="right" label-width="auto"/>

  108.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyCurrentSituation.landCertificateNo" label="不动产单元号" placeholder="不动产单元号" input-align="right"/>

  109.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyCurrentSituation.buildingArea" label="建筑面积" placeholder="建筑面积㎡" input-align="right"/>

  110.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyCurrentSituation.buildingPerArea" label="人均建筑面积" placeholder="人均建筑面积㎡" input-align="right"/>

  111.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyCurrentSituation.houseCertificateNo" label="农民房屋幢号" placeholder="户口所在地" input-align="right"/>

  112.               <van-field

  113.                 readonly

  114.                 clickable

  115.                 :value="landIsposalValue"

  116.                 label="处置情况"

  117.                 placeholder="选择宅基地处置情况"

  118.                 @click=" auditStatus==true ? '' : showLandIsposal = true"

  119.                 input-align="right"

  120.                 right-icon="arrow-down"

  121.                 :readonly="auditStatus"

  122.                 :rules="[{ required: true }]" required

  123.               />

  124.               <van-popup v-model="showLandIsposal" position="bottom">

  125.                 <van-picker

  126.                   show-toolbar

  127.                   :columns="landIsposal"

  128.                   @confirm="onConfirmLandIsposal"

  129.                   @cancel="showLandIsposal = false"

  130.                   :readonly="auditStatus"

  131.                 />

  132.               </van-popup>

  133. 

  134.   <!--            <van-field-->

  135.   <!--              readonly-->

  136.   <!--              clickable-->

  137.   <!--              name="picker"-->

  138.   <!--              :value="applicationDetail.tHouseApplyCurrentSituation.buildingType"-->

  139.   <!--              label="建房类型"-->

  140.   <!--              placeholder="选择建房类型"-->

  141.   <!--              @click="showBuildingType = true"-->

  142.   <!--              input-align="right"-->

  143.   <!--              right-icon="arrow-down"-->

  144.   <!--            />-->

  145.   <!--            <van-popup v-model="showBuildingType" position="bottom">-->

  146.   <!--              <van-picker-->

  147.   <!--                show-toolbar-->

  148.   <!--                :columns="buildingType"-->

  149.   <!--                @confirm="onConfirmBuildingType"-->

  150.   <!--                @cancel="showBuildingType = false"-->

  151.   <!--              />-->

  152.   <!--            </van-popup>-->

  153.             </div>

  154.           </div>

  155. 

  156.           <div v-if="applicationDetail.tHouseApplyProposedSituation">

  157.             <p class="main_title">拟申请宅基地及建房情况</p>

  158.             <div class="main_box">

  159.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.location" label="拟建位置" placeholder="拟建位置" input-align="right"/>

  160.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.landArea" label="宅基地面积" placeholder="宅基地面积" input-align="right"/>

  161.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.east" label="东至" placeholder="东至" input-align="right"/>

  162.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.west" label="西至" placeholder="西至" input-align="right"/>

  163.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.south" label="南至" placeholder="南至" input-align="right"/>

  164.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.north" label="北至" placeholder="北至" input-align="right"/>

  165.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.buildingArea" label="建筑面积" placeholder="建筑面积" input-align="right"/>

  166.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.buildingFloors" label="建筑层数" placeholder="建筑层数" input-align="right"/>

  167.               <van-field :rules="[{ required: true }]" required :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.buildingHight" label="建筑高度" placeholder="建筑高度" input-align="right"/>

  168.               <van-cell title="是否征求相邻权利人意见">

  169.                 <template #right-icon>

  170.                   <van-radio-group :disabled="auditStatus" v-model="applicationDetail.tHouseApplyProposedSituation.isAdvice" direction="horizontal">

  171.                     <van-radio name="1">是</van-radio>

  172.                     <van-radio name="2">否</van-radio>

  173.                   </van-radio-group>

  174.                 </template>

  175.               </van-cell>

  176.               <van-field

  177.                 readonly

  178.                 clickable

  179.                 v-model="housingStructureValue"

  180.                 label="房屋构造"

  181.                 placeholder="选择房屋构造"

  182.                 @click=" auditStatus==true ? '' : showHousingStructure = true"

  183.                 input-align="right"

  184.                 right-icon="arrow-down"

  185.                 :rules="[{ required: true }]" required

  186.               />

  187.               <van-popup v-model="showHousingStructure" position="bottom">

  188.                 <van-picker

  189.                   show-toolbar

  190.                   :columns="housingStructure"

  191.                   @confirm="onConfirmHousingStructure"

  192.                   @cancel="showHousingStructure = false"

  193.                   :readonly="auditStatus"

  194.                 />

  195.               </van-popup>

  196.               <van-field

  197.                 readonly

  198.                 clickable

  199.                 :value="buildingTypeValue"

  200.                 label="建房类型"

  201.                 placeholder="选择建房类型"

  202.                 @click=" auditStatus==true ? '' : showBuildingType = true"

  203.                 input-align="right"

  204.                 right-icon="arrow-down"

  205.                 :rules="[{ required: true }]" required

  206.               />

  207.               <van-popup v-model="showBuildingType" position="bottom">

  208.                 <van-picker

  209.                   show-toolbar

  210.                   :columns="buildingType"

  211.                   @confirm="onConfirmBuildingType"

  212.                   @cancel="showBuildingType = false"

  213.                 />

  214.               </van-popup>

  215.               <van-cell title="设计图纸">

  216.                 <template #right-icon>

  217.                   <van-radio-group :disabled="auditStatus" @change="designPaperChange" v-model="applicationDetail.tHouseApplyProposedSituation.designPaper" direction="horizontal">

  218.                     <van-radio name="1">委托设计</van-radio>

  219.                     <van-radio name="2">选通用图</van-radio>

  220.                   </van-radio-group>

  221.                 </template>

  222.               </van-cell>

  223.               <van-field

  224.                 readonly

  225.                 clickable

  226.                 :value="houseTypeValue"

  227.                 placeholder="选择户型图"

  228.                 @click=" auditStatus==true ? '' : showHouseType = true"

  229.                 input-align="right"

  230.                 right-icon="arrow-down"

  231.                 v-if="showHouse"

  232.                 :rules="[{ required: true }]" required

  233.               />

  234.               <van-popup v-model="showHouseType" position="bottom">

  235.                 <van-picker

  236.                   show-toolbar

  237.                   :columns="houseType"

  238.                   @confirm="onConfirmHouseType"

  239.                   @cancel="showHouseType = false"

  240.                 />

  241.               </van-popup>

  242.             </div>

  243.             <div class="mapBox">

  244.               <div id="mapWrap" style="height: 200px;"></div>

  245.               <div class="mapBox_button" v-if="auditStatus == false">

  246.                 <van-button id="drawPolygon" native-type="button" icon="../../../static/images/icon/icon_ht.png" type="default" block round size="small"></van-button>

  247.                 <van-button id="drawRemove" native-type="button" icon="cross" type="default" block round size="small" style="margin-top: 0.2rem"></van-button>

  248.               </div>

  249.             </div>

  250.           </div>

  251. 

  252.           <div v-if="applicationDetail.tHouseApplyProposer">

  253.             <p class="main_title">申请理由</p>

  254.             <div class="main_box">

  255.             <van-field

  256.               rows="3"

  257.               autosize

  258.               type="textarea"

  259.               placeholder="申请理由"

  260.               input-align="left"

  261.               v-model="applicationDetail.tHouseApplyProposer.applyReasion"

  262.               :readonly="auditStatus"

  263.               :rules="[{ required: true }]" required

  264.             />

  265.             <van-row>

  266.               <van-col span="12"><van-field :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposer.memberName" label="申请人" placeholder="申请人" input-align="left" label-width="auto"/></van-col>

  267.               <van-col span="12">

  268.                 <van-field :rules="[{ required: true }]" required :readonly="auditStatus" clickable v-model="applicationDetail.tHouseApplyProposer.applyTime" label-width="auto" placeholder="选择日期" @click="showApplyTime = true">

  269.                   <template #label>

  270.                     <van-icon name="notes-o" size="20"/>

  271.                   </template>

  272.                 </van-field>

  273.                 <van-calendar v-model="showApplyTime" :readonly="auditStatus" @confirm="onConfirmApplyTime" />

  274. <!--                <van-field :readonly="auditStatus" v-model="applicationDetail.tHouseApplyProposer.applyTime == '' ? nowTime : applicationDetail.tHouseApplyProposer.applyTime" label-width="auto">-->

  275. <!--                  <template #label>-->

  276. <!--                    <van-icon name="notes-o" size="20"/>-->

  277. <!--                  </template>-->

  278. <!--                </van-field>-->

  279.               </van-col>

  280.             </van-row>

  281.           </div>

  282.           </div>

  283. 

  284.           <div v-if="item.findList" v-for="(item , index) in fileArray" :key="index">

  285.             <p class="main_title">{{item.fileTypeName}}</p><!-- 未对接 -->

  286.             <div class="main_box file-box">

  287. <!--              <van-uploader v-if="item.findList" v-model="item.findList" multiple />-->

  288.               <van-uploader :after-read="afterRead" :before-delete="deleteFile" v-model="item.findList" multiple />

  289.             </div>

  290.           </div>

  291. <!--          <p class="main_title">宅基地使用承诺书</p>&lt;!&ndash; 未对接 &ndash;&gt;-->

  292. <!--          <div class="main_box file-box">-->

  293. <!--            <van-uploader v-model="fileList2" multiple class="aaa" />-->

  294. <!--          </div>-->

  295. 

  296.           <div v-if="applicationDetail.tHouseApplyProposer && auditStatus == false" style="margin: 16px;">

  297.             <van-row>

  298.               <van-col span="12" align="center">

  299.                 <van-button type="info" native-type="submit" class="submitButton" @click="onSubmit('keep')">保存</van-button>

  300.               </van-col>

  301.               <van-col span="12" align="center">

  302.                 <van-button type="info" native-type="submit" class="submitButton" @click="onSubmit('submit')">保存并提交</van-button>

  303.               </van-col>

  304.             </van-row>

  305.             <div class="clear"></div>

  306.           </div>

  307. 

  308.           <div v-if="false" :class="active==1?'':'noModify'" >

  309.             <p class="topTit">宅基地开工</p>

  310.             <div class="main_box action-box">

  311.             <van-cell title="计划开工时间">

  312.               <template #right-icon>

  313.                 <van-radio-group v-model="radio" direction="horizontal">

  314.                   <van-field readonly clickable style="padding: 0" v-model="applicationDetail.tHouseApplyStart.startDate" label-width="auto" placeholder="选择日期" @click="showStartDate = true">

  315.                     <template #label>

  316.                       <van-icon name="notes-o" size="20"/>

  317.                     </template>

  318.                   </van-field>

  319.                   <van-calendar v-model="showStartDate" @confirm="onConfirmStartDate" />

  320.                 </van-radio-group>

  321.               </template>

  322.             </van-cell>

  323.             <van-cell title="计划竣工时间">

  324.               <template #right-icon>

  325.                 <van-radio-group v-model="radio" direction="horizontal">

  326.                   <van-field readonly clickable style="padding: 0" v-model="applicationDetail.tHouseApplyStart.endDate" label-width="auto" placeholder="选择日期" @click="showEndDate = true">

  327.                     <template #label>

  328.                       <van-icon name="notes-o" size="20"/>

  329.                     </template>

  330.                   </van-field>

  331.                   <van-calendar v-model="showEndDate" @confirm="onConfirmEndDate" />

  332.                 </van-radio-group>

  333.               </template>

  334.             </van-cell>

  335.           </div>

  336.           </div>

  337.           <!--applicationDetail.tHouseApplyStart-->

  338.           <div v-if="false" style="margin: 16px;">

  339.             <van-row>

  340.               <van-col span="12" align="center">

  341.                 <van-button type="info" native-type="submit" class="submitButton">保存</van-button>

  342.               </van-col>

  343.               <van-col span="12" align="center">

  344.                 <van-button type="info" native-type="submit" class="submitButton">保存并提交</van-button>

  345.               </van-col>

  346.             </van-row>

  347.             <div class="clear"></div>

  348.           </div>

  349. 

  350.           <div v-if="false" :class="active==2?'':'noModify'">

  351.             <p class="topTit">宅基地验收申请</p>

  352.             <div class="main_box check-box">

  353.             <van-field v-model="applicationDetail.tHouseApplyEnd.memberName" label="申请户主姓名" placeholder="申请户主姓名" input-align="right" label-width="auto"/>

  354.             <van-field v-model="applicationDetail.tHouseApplyEnd.idcard" label="身份证号" placeholder="身份证号" input-align="right" label-width="auto"/>

  355.             <van-field v-model="applicationDetail.tHouseApplyEnd.location" label="用地建房位置" placeholder="用地建房位置" input-align="right" label-width="auto"/>

  356.             <van-field v-model="applicationDetail.tHouseApplyEnd.licenseKey" label="乡村建设规划许可证号" placeholder="乡村建设规划许可证号" input-align="right" label-width="auto"/>

  357.             <van-field v-model="applicationDetail.tHouseApplyEnd.approvalNumber" label="农村宅基地批准书号" placeholder="农村宅基地批准书号" input-align="right" label-width="auto"/>

  358.             <van-field v-model="applicationDetail.tHouseApplyEnd.startDate" label="开工日期" readonly clickable input-align="right" label-width="auto" placeholder="选择开工日期" @click="showCalendar = true"></van-field>

  359.             <van-calendar />

  360.             <van-field v-model="applicationDetail.tHouseApplyEnd.endDate" label="竣工日期" readonly clickable input-align="right" label-width="auto" placeholder="选择竣工日期" @click="showCalendar = true"></van-field>

  361.             <van-calendar />

  362.             <van-field v-model="applicationDetail.tHouseApplyEnd.houseCertificateNo" label="权属证书号（不动产）" placeholder="权属证书号（不动产）" input-align="right" label-width="auto"/>

  363.             <van-field v-model="applicationDetail.tHouseApplyEnd.landCertificateNo" label="权属证书号（宅基地）" placeholder="权属证书号（宅基地）" input-align="right" label-width="auto"/>

  364.             <van-field v-model="applicationDetail.tHouseApplyEnd.buildingHight" label="批建高度" placeholder="建筑高度" input-align="right" label-width="auto"/>

  365.             <van-field v-model="applicationDetail.tHouseApplyEnd.buildingFloors" label="批建层数" placeholder="批建层数" input-align="right" label-width="auto"/>

  366.             <van-field v-model="applicationDetail.tHouseApplyEnd.actualBuildingHight" label="竣工高度" placeholder="竣工高度" input-align="right" label-width="auto"/>

  367.             <van-field v-model="applicationDetail.tHouseApplyEnd.actualBuildingFloors" label="竣工层数" placeholder="竣工层数" input-align="right" label-width="auto"/>

  368.             <van-field v-model="applicationDetail.tHouseApplyEnd.buildingArea" label="建筑面积" placeholder="建筑面积" input-align="right" label-width="auto"/>

  369.             <van-field v-model="applicationDetail.tHouseApplyEnd.designPaper" label="建筑风貌" placeholder="建筑风貌" input-align="right" label-width="auto"/>

  370.             <van-cell title="旧宅基地退还情况">

  371.               <template #right-icon>

  372.                 <van-radio-group v-model="applicationDetail.tHouseApplyEnd.oldHouseStatus" direction="horizontal">

  373.                   <van-radio name="0">是</van-radio>

  374.                   <van-radio name="1">否</van-radio>

  375.                 </van-radio-group>

  376.               </template>

  377.             </van-cell>

  378.             <van-field label="备注" placeholder="" input-align="right"/>

  379.           </div>

  380.           </div>

  381.           <!--applicationDetail.tHouseApplyEnd-->

  382.           <div v-if="false" style="margin: 16px;">

  383.             <van-row>

  384.               <van-col span="12" align="center">

  385.                 <van-button type="info" native-type="submit" class="submitButton">保存</van-button>

  386.               </van-col>

  387.               <van-col span="12" align="center">

  388.                 <van-button type="info" native-type="submit" class="submitButton">保存并提交</van-button>

  389.               </van-col>

  390.             </van-row>

  391.             <div class="clear"></div>

  392.           </div>

  393. 

  394.         </van-form>

  395. 

  396.       </div>

  397. 

  398.     </div>

  399. </template>

  400. 

  401. <script>

  402.   import { allInformation , treeSingleProcessView , attachmentFind , saveHouseBaseInfo , houseList , attach , removeFile , saveHouseBaseInfoThenSubmit} from "@/api/onlineHome/homestead/application";

  403.   import $ from "jquery";

  404.   export default {

  405.   name: "applicationForm",

  406.   data() {

  407.     return {

  408.       active: 0,

  409.       nowTime: '',//当前日期

  410.       fileList: [],

  411.       fileList2: [],

  412.       radio:'1',

  413.       value: '',

  414.       columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],

  415.       showPicker: false,

  416.       showBuildingType: false,

  417.       showLandIsposal: false,

  418.       showHousingStructure: false,

  419.       showStartDate: false,

  420.       showEndDate: false,

  421.       showApplyTime:false,

  422.       showHouseType:false,

  423.       showHouse:false,

  424.       showSex:false,

  425.       id:'',

  426.       applicationDetail:[],

  427.       //建房类型字典

  428.       buildingType:[],

  429.       //性别字典

  430.       userSex:[],

  431.       //处置情况字典

  432.       landIsposal:[],

  433.       //房屋构造字典

  434.       housingStructure:[],

  435.       //户型

  436.       houseType:[],

  437.       //请求参数

  438.       parameter:{

  439.         businessType: "house",

  440.         houseApplyStatus: '',

  441.         processKey: "baseApply",

  442.         tableName: "t_house_apply_proposer"

  443.       },

  444.       //文件配置

  445.       fileArray:[],

  446.       //获取上传附件

  447.       params:{

  448.         tableId: '',

  449.         tableName: "t_house_apply_proposer",

  450.         fileType: ''

  451.       },

  452.       auditStatus:false,

  453.       activeNames:['1'],

  454.       housingStructureValue:'',//当前显示房屋构造

  455.       buildingTypeValue:'',//当前显示建房类型

  456.       landIsposalValue:'',//当前显示处置情况

  457.       houseTypeValue:'',//当前显示户型

  458.       sexValue:'',//当前显示性别

  459.       CurrentSituation:false,

  460.     };

  461.   },

  462.   created() {

  463.     this.id = this.$route.query.id;

  464.     this.type = this.$route.query.type;

  465.     this.getDetail();

  466.   },

  467.   methods: {

  468.     goFlow(){

  469.       window.location='flowChart?id='+this.id;

  470.     },

  471.     //更新文件回显

  472.     afterRead(file) {

  473.       this.$forceUpdate();

  474.     },

  475.     //删除图片

  476.     deleteFile(elIndex){

  477.       if(elIndex.id != ''){

  478.         removeFile(elIndex.id).then(response => {});

  479.       }

  480.       this.$forceUpdate();

  481.       return (file, name) => {

  482.         let fileIndex = name.index

  483.         this.fileList[elIndex].splice(fileIndex, 1)

  484.         this.upLoadList[elIndex].splice(fileIndex, 1)

  485.       }

  486.     },

  487.     //获取数据集合

  488.     getDetail(){

  489.       allInformation(this.id).then(response => {

  490.         //性别字典查询

  491.         this.houseGetDicts("sys_user_sex").then((res) => {

  492.           res.data.map(item => {

  493.             this.userSex.push({ value:item.dictValue, text: item.dictLabel});

  494.           });

  495.           this.sexValue = this.selectDictLabel(res.data, response.data.tHouseApplyProposer.sex);

  496.         });

  497.         //建房类型字典查询

  498.         this.houseGetDicts("building_type").then((res) => {

  499.           res.data.map(item => {

  500.             this.buildingType.push({ value:item.dictValue, text: item.dictLabel});

  501.           });

  502.           this.buildingTypeValue = this.selectDictLabel(res.data, response.data.tHouseApplyProposedSituation.buildingType);

  503.         });

  504.         //房屋构造字典查询

  505.         this.houseGetDicts("housing_structure").then((res) => {

  506.           res.data.map(item => {

  507.             this.housingStructure.push({ value:item.dictValue, text: item.dictLabel});

  508.           });

  509.           this.housingStructureValue = this.selectDictLabel(res.data, response.data.tHouseApplyProposedSituation.housingStructure);

  510.         });

  511.         //处置情况字典查询

  512.         if(response.data.tHouseApplyProposer.existHomestead == 'Y'){

  513.           this.CurrentSituation = true ;

  514.           this.houseGetDicts("land_isposal").then((res) => {

  515.             res.data.map(item => {

  516.               this.landIsposal.push({ value:item.dictValue, text: item.dictLabel});

  517.             });

  518.             this.landIsposalValue= this.selectDictLabel(res.data, response.data.tHouseApplyCurrentSituation.landIsposal);

  519.           });

  520.         }

  521.         //户型图查询

  522.         houseList().then(res => {

  523.           res.rows.map(item => {

  524.             this.houseType.push({ value:item.id, text: item.name});

  525.           });

  526.           if(response.data.tHouseApplyProposedSituation.houseTypeId != null){

  527.             for (let i = 0 ; i < res.rows.length ; i++){

  528.               if (res.rows[i].id = response.data.tHouseApplyProposedSituation.houseTypeId){

  529.                 this.houseTypeValue = res.rows[i].name

  530.               }

  531.             }

  532.             this.showHouse = true;

  533.           }

  534.         });

  535.         console.log(response.data.tHouseApplyProposer.auditStatus != 0)

  536.         this.applicationDetail = response.data;

  537.         this.parameter.houseApplyStatus = response.data.tHouseApplyProposer.houseApplyStatus;

  538.         let currentProcessKey = response.data.currentProcessKey;

  539.         this.auditStatus =  response.data.tHouseApplyProposer.auditStatus != 0;

  540.         //判断当前审核进行到哪一步

  541.         if (currentProcessKey == 'baseApply'){

  542.           this.active = 0;

  543.         }

  544.         if (currentProcessKey == 'landscope'){

  545.           this.active = 1;

  546.         }

  547.         if (currentProcessKey == 'accepting'){

  548.           this.active = 2;

  549.         }

  550.         //获取上传文件列表

  551.         treeSingleProcessView(this.parameter).then(res => {

  552.           this.fileArray = res.rows

  553.           this.params.tableId = this.id;

  554.           for (let i = 0 ; i < res.rows.length ; i++){

  555.             this.params.fileType = res.rows[i].fileType;

  556.             this.fileArray[i].findList = [];

  557.             //获取文件集合

  558.             attachmentFind(this.params).then(res2 => {

  559.               for (let j = 0 ; j < res2.data.length ; j++){

  560.                 this.fileArray[i].findList[j] = {url: process.env.VUE_APP_BASE_ROUTING_URL + res2.data[j].fileUrl, isImage: true , id:res2.data[j].id} ;

  561.                 this.$forceUpdate();

  562.                 console.log(this.fileArray[i].findList[j])

  563.               }

  564.             });

  565.           }

  566.         });

  567.         var that = this ;

  568.         setTimeout(function(){

  569.           that.pointDarw();

  570.         },2000)

  571.       });

  572.     },

  573.     onConfirmApplyTime(date) {

  574.       this.applicationDetail.tHouseApplyProposer.applyTime = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;

  575.       this.showApplyTime = false;

  576.     },

  577.     //基地开工时间

  578.     onConfirmStartDate(date) {

  579.       this.applicationDetail.tHouseApplyStart.startDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;

  580.       this.showStartDate = false;

  581.     },

  582.     //基地竣工时间

  583.     onConfirmEndDate(date) {

  584.       this.applicationDetail.tHouseApplyStart.endDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;

  585.       this.showEndDate = false;

  586.     },

  587.     //选择建房类型

  588.     onConfirmBuildingType(data){

  589.       this.buildingTypeValue = data.text;

  590.       this.applicationDetail.tHouseApplyProposedSituation.buildingType = data.value;

  591.       this.showBuildingType = false;

  592.     },

  593.     //选择宅基地处置情况

  594.     onConfirmLandIsposal(data){

  595.       this.landIsposalValue = data.text;

  596.       this.applicationDetail.tHouseApplyCurrentSituation.landIsposal = data.value;

  597.       this.showLandIsposal = false;

  598.     },

  599.     //选择房屋构造

  600.     onConfirmHousingStructure(data){

  601.       this.housingStructureValue = data.text;

  602.       this.applicationDetail.tHouseApplyProposedSituation.housingStructure = data.value;

  603.       this.showHousingStructure = false;

  604.     },

  605.     //选择户型

  606.     onConfirmHouseType(data){

  607.       this.houseTypeValue = data.text;

  608.       this.applicationDetail.tHouseApplyProposedSituation.houseTypeId = data.value;

  609.       this.showHouseType = false;

  610.     },

  611.     //选择性别

  612.     onConfirmSex(data){

  613.       this.sexValue = data.text;

  614.       this.applicationDetail.tHouseApplyProposer.sex = data.value;

  615.       this.showSex = false;

  616.     },

  617.     //添加家庭成员

  618.     addFamily(){

  619.       this.applicationDetail.tHouseApplyFamilyMembers.push({

  620.         applyProposerId:this.applicationDetail.tHouseApplyFamilyMembers[0].applyProposerId,

  621.         memberName:'',

  622.         age:'',

  623.         familyStatusName:'',

  624.         idcard :'',

  625.         householdRegister:'',

  626.       });

  627.     },

  628.     //删除家庭成员

  629.     deleteFamily(index){

  630.       this.applicationDetail.tHouseApplyFamilyMembers.splice(index,1)

  631.     },

  632.     //是否有宅基地选项改变

  633.     existHomesteadChange(name){

  634.       if (name == 'Y'){

  635.         if (this.applicationDetail.tHouseApplyCurrentSituation == null){

  636.           //现宅基地情况

  637.           this.applicationDetail.tHouseApplyCurrentSituation = {

  638.             //宅基地面积

  639.             landArea: '',

  640.             //人均宅基地面积

  641.             landPerArea: '',

  642.             //不动产单元号

  643.             landCertificateNo: '',

  644.             //农民房屋幢号

  645.             houseCertificateNo: '',

  646.             //建筑面积

  647.             buildingArea: '',

  648.             //人均建筑面积

  649.             buildingPerArea: '',

  650.             //现宅基地处置情况 字典 land_isposal

  651.             landIsposal: ""

  652.           };

  653.           this.CurrentSituation = true ;

  654.           //处置情况字典查询

  655.           this.houseGetDicts("land_isposal").then((res) => {

  656.             res.data.map(item => {

  657.               this.landIsposal.push({ value:item.dictValue, text: item.dictLabel});

  658.             });

  659.             this.landIsposalValue= this.selectDictLabel(res.data, this.applicationDetail.tHouseApplyCurrentSituation.landIsposal);

  660.           });

  661.         }

  662.         this.CurrentSituation = true;

  663.       }else{

  664.         this.CurrentSituation = false;

  665.       }

  666.     },

  667.     //图纸选择改变

  668.     designPaperChange(name){

  669.       if(name == 2){

  670.         this.showHouse = true;

  671.       }else{

  672.         this.showHouse = false;

  673.       }

  674.     },

  675.     base64toFile(dataurl, filename = "file") {

  676.       let arr = dataurl.split(",");

  677.       let mime = arr[0].match(/:(.*?);/)[1];

  678.       let suffix = mime.split("/")[1];

  679.       let bstr = atob(arr[1]);

  680.       let n = bstr.length;

  681.       let u8arr = new Uint8Array(n);

  682.       while (n--) {

  683.         u8arr[n] = bstr.charCodeAt(n);

  684.       }

  685.       return new File([u8arr], `${filename}.${suffix}`, {

  686.         type: mime,

  687.       });

  688.     },

  689.     //申请提交

  690.     onSubmit(type){

  691.       var that = this;

  692.       let form = {};

  693.       form.fileList=[];

  694.       this.fileList.tableId = this.id;

  695.       if (this.drawInsert != null) {

  696.         this.applicationDetail.tHouseApplyProposedSituation.theGeom = JSON.stringify(this.drawInsert);

  697.       }

  698.       for (let i = 0 ; i < this.fileArray.length ; i++){

  699.         if (this.fileArray[i].findList == null || this.fileArray[i].findList == undefined || this.fileArray[i].findList == ''){

  700.           continue

  701.         }

  702.         for (let j = 0 ; j < this.fileArray[i].findList.length ; j++){

  703.           const params = new FormData()

  704.           params.append('tableId', this.id)

  705.           params.append('tableName', 't_house_apply_proposer')

  706.           params.append('bizPath', 't_house_apply_proposer')

  707.           params.append('fileType', this.fileArray[i].fileType)

  708.           if (this.fileArray[i].findList[j].url){

  709.             continue;

  710.           }

  711.           params.append('file', this.base64toFile(this.fileArray[i].findList[j].content))

  712.           attach(params).then(res => {

  713.             form.fileList.push(res.id);

  714.           });

  715.         }

  716.       }

  717.       form.tHouseApplyProposer=this.applicationDetail.tHouseApplyProposer;

  718.       form.tHouseApplyFamilyMembers=this.applicationDetail.tHouseApplyFamilyMembers;

  719.       form.tHouseApproveVillageOptions=this.applicationDetail.tHouseApproveVillageOptions;

  720.       form.tHouseApplyCurrentSituation=this.applicationDetail.tHouseApplyCurrentSituation;

  721.       form.tHouseApplyProposedSituation=this.applicationDetail.tHouseApplyProposedSituation;

  722.       setTimeout(function(){

  723.         if (type == 'keep'){

  724.           saveHouseBaseInfo(form).then(res => {

  725.             if(res.code = 200){

  726.               that.$toast.success('保存成功');

  727.             }

  728.           });

  729.         }

  730.         if (type == 'submit'){

  731.           saveHouseBaseInfoThenSubmit(form).then(res => {

  732.             if(res.code = 200){

  733.               that.$toast.success('提交成功');

  734.               that.getDetail();

  735.             }

  736.           });

  737.         }

  738. 

  739.       },1000)

  740. 

  741.     },

  742.     pointDarw() {

  743.       //地图只加载一次

  744.       this.landOpen = false;

  745.       //加载地图编辑

  746.       var that = this;

  747.       var map;

  748.       //var hc_land;

  749.       var draw; // global so we can remove it later

  750.       var vector_drawing;

  751.       var minMapZoom;

  752.       var maxMapZoom;

  753.       var zoomLook;

  754.       if (this.formEditor) {

  755.         zoomLook = 18

  756.         minMapZoom = 18

  757.         maxMapZoom = 18

  758.       } else {

  759.         zoomLook = 16.9

  760.         minMapZoom = 16

  761.         maxMapZoom = 18.9

  762.       }

  763.       if (this.applicationDetail.tHouseApplyProposedSituation.theGeom != null && this.applicationDetail.tHouseApplyProposedSituation.theGeom != ""

  764.         && this.applicationDetail.tHouseApplyProposedSituation.theGeom != undefined) {

  765.         this.startDarw = true;

  766.         this.openDarw = false;

  767.       } else {

  768.         this.startDarw = false;

  769.         this.openDarw = true;

  770.       }

  771.       if (this.startDarw) {

  772.         document.getElementById("mapWrap").innerHTML = '';

  773.         var hc_land;

  774.         var draw; // global so we can remove it later

  775.         var vector_drawing;

  776.         var projection = new ol.proj.Projection({

  777.           //地图投影类型

  778.           code: "EPSG:3857",

  779.           units: "degrees",

  780.           //extent:extent

  781.         });

  782. 

  783.         var aerial = new ol.layer.Tile({

  784.           source: new ol.source.XYZ({

  785.             url: "http://t0.tianditu.gov.cn/img_w/wmts?" +

  786.               "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +

  787.               "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c78ca1c13e82e1cdd64ef9d8cdbbb237",

  788.           }),

  789.           isGroup: true,

  790.           name: "卫星影像图",

  791.         });

  792. 

  793.         var yingxzi = new ol.layer.Tile({

  794.           source: new ol.source.XYZ({

  795.             url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c78ca1c13e82e1cdd64ef9d8cdbbb237",

  796.           }),

  797.           isGroup: true,

  798.           name: "天地图文字标注--卫星影像图",

  799.         });

  800.         //加载地图

  801.         map = new ol.Map({

  802.           // interactions: ol.interaction.DragPan({

  803.           //   onFocusOnly: false

  804.           // }),

  805.           controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮

  806.           layers: [aerial, yingxzi],

  807.           projection: projection,

  808.           target: "mapWrap",

  809.           view: new ol.View({

  810.             //center: ol.proj.fromLonLat([115.452752, 31.789033]),

  811.             zoom: zoomLook,

  812.             minZoom: minMapZoom, //地图缩小限制

  813.             maxZoom: maxMapZoom, //地图放大限制

  814.           }),

  815.         });

  816.         if (this.formEditor) {

  817.           let pan = getPan();

  818.           //false：当前地图不可拖动。true：可拖动

  819.           pan.setActive(false);

  820. 

  821.           function getPan() {

  822.             let pan = '';

  823.             map.getInteractions().forEach(function (element, index, array) {

  824.               if (element instanceof ol.interaction.DragPan) {

  825.                 pan = element;

  826.               }

  827.             })

  828.             return pan;

  829.           }

  830.         }

  831.         //图层查询定位开始 ---------start

  832.         hc_land = new ol.layer.Vector({

  833.           title: "add Layer",

  834.           source: new ol.source.Vector({

  835.             projection: projection,

  836.             features: new ol.format.GeoJSON().readFeatures("{\n" +

  837.               "    \"type\": \"Feature\",\n" +

  838.               "    \"geometry\":" + this.applicationDetail.tHouseApplyProposedSituation.theGeom + "}"),

  839.           }),

  840.           style: new ol.style.Style({

  841.             fill: new ol.style.Fill({

  842.               //矢量图层填充颜色，以及透明度

  843.               color: "rgba(204, 255, 204,0.3)",

  844.             }),

  845.             stroke: new ol.style.Stroke({

  846.               //边界样式

  847.               color: "#47c68f",

  848.               width: 3,

  849.             }),

  850.           }),

  851.         });

  852.         map.addLayer(hc_land);

  853.         var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;

  854.         var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;

  855.         var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;

  856.         var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;

  857.         //定位查询位置

  858.         var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置

  859.         map.getView().animate({

  860.           // 只设置需要的属性即可

  861.           center: center, // 中心点

  862.           zoom: 17.9, // 缩放级别

  863.           rotation: undefined, // 缩放完成view视图旋转弧度

  864.           duration: 1000, // 缩放持续时间，默认不需要设置

  865.         });

  866.         //图层查询定位结束 ---------end

  867.         //开始绘制地图

  868.         $("#drawPolygon").click(function () {

  869.           map.removeLayer(hc_land);

  870.           map.removeLayer(vector_drawing);

  871.           that.drawInsert = null;

  872.           map.removeInteraction(draw);

  873.           var source = new ol.source.Vector({wrapX: false});

  874.           vector_drawing = new ol.layer.Vector({

  875.             source: source,

  876.           });

  877.           map.addLayer(vector_drawing);

  878.           var typeSelect = "Polygon";

  879. 

  880.           function addInteraction() {

  881.             var value = typeSelect;

  882.             draw = new ol.interaction.Draw({

  883.               source: source,

  884.               type: typeSelect

  885.             });

  886.             draw.on('drawend', function (evt) {

  887.               console.log(that.drawInsert);

  888.               if(that.drawInsert != null){

  889.                 $("#drawRemove").trigger('click');

  890.               }

  891.               var feature = evt.feature;

  892.               var geometry = feature.getGeometry();

  893.               var coordinate = geometry.getCoordinates();

  894.               that.drawInsert = coordinate;

  895.               map.removeInteraction(draw);

  896.             });

  897.             map.addInteraction(draw);

  898.           }

  899.           addInteraction();

  900.         });

  901.         //清除画图鼠标点击事件

  902.         $("#drawRemove").click(function () {

  903.           that.drawInsert = null;

  904.           map.addLayer(hc_land);

  905.           map.removeInteraction(draw);

  906.           map.removeLayer(vector_drawing);

  907.         });

  908.       }

  909.       if (this.openDarw) {

  910.         document.getElementById("mapWrap").innerHTML = '';

  911.         var projection = new ol.proj.Projection({

  912.           //地图投影类型

  913.           code: "EPSG:3857",

  914.           units: "degrees",

  915.           //extent:extent

  916.         });

  917. 

  918.         var aerial = new ol.layer.Tile({

  919.           source: new ol.source.XYZ({

  920.             url: "http://t0.tianditu.gov.cn/img_w/wmts?" +

  921.               "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +

  922.               "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c78ca1c13e82e1cdd64ef9d8cdbbb237",

  923.           }),

  924.           isGroup: true,

  925.           name: "卫星影像图",

  926.         });

  927. 

  928.         var yingxzi = new ol.layer.Tile({

  929.           source: new ol.source.XYZ({

  930.             url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=c78ca1c13e82e1cdd64ef9d8cdbbb237",

  931.           }),

  932.           isGroup: true,

  933.           name: "天地图文字标注--卫星影像图",

  934.         });

  935.         //获取坐标是否存在

  936.         var Zb;

  937.         if (this.tGeoOrganizationLng != null && this.tGeoOrganizationLat != null) {

  938.           Zb = [this.tGeoOrganizationLng, this.tGeoOrganizationLat]

  939.         } else {

  940.           Zb = [115.452752, 31.789033];

  941.         }

  942.         //加载地图

  943.         map = new ol.Map({

  944.           controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮

  945.           layers: [aerial, yingxzi],

  946.           projection: projection,

  947.           logo: 'false',

  948.           target: "mapWrap",

  949.           view: new ol.View({

  950.             center: ol.proj.fromLonLat(Zb),

  951.             //center: ol.proj.fromLonLat([115.452752, 31.789033]),

  952.             zoom: 16.9,

  953.             minZoom: minMapZoom, //地图缩小限制

  954.             maxZoom: maxMapZoom, //地图放大限制

  955.           }),

  956.         });

  957. 

  958.         //图层查询定位结束 ---------end

  959.         //开始绘制地图

  960.         $("#drawPolygon").click(function () {

  961.           //map.removeLayer(hc_land);

  962.           map.removeLayer(vector_drawing);

  963.           that.drawInsert = null;

  964.           map.removeInteraction(draw);

  965.           var source = new ol.source.Vector({wrapX: false});

  966.           vector_drawing = new ol.layer.Vector({

  967.             source: source,

  968.           });

  969.           map.addLayer(vector_drawing);

  970.           var typeSelect = "Polygon";

  971. 

  972.           function addInteraction() {

  973.             var value = typeSelect;

  974.             draw = new ol.interaction.Draw({

  975.               source: source,

  976.               type: typeSelect

  977.             });

  978.             draw.on('drawend', function (evt) {

  979.               console.log(that.drawInsert);

  980.               if(that.drawInsert != null){

  981.                 $("#drawRemove").trigger('click');

  982.               }

  983.               var feature = evt.feature;

  984.               var geometry = feature.getGeometry();

  985.               var coordinate = geometry.getCoordinates();

  986.               that.drawInsert = coordinate;

  987.               map.removeInteraction(draw);

  988.             });

  989.             map.addInteraction(draw);

  990.           }

  991.           addInteraction();

  992.         });

  993.         //清除画图鼠标点击事件

  994.         $("#drawRemove").click(function () {

  995.           that.drawInsert = null;

  996.           map.removeInteraction(draw);

  997.           map.removeLayer(vector_drawing);

  998.         });

  999.       }

  1000.     },

  1001.   },

  1002. }

  1003. </script>

  1004. 

  1005. <style scoped lang="scss">

  1006.   .app-container {

  1007.     padding-bottom: 5%;

  1008.   }

  1009.   .examine_box{

  1010.     background-color: #1D6FE9!important;

  1011.     padding: 0.18rem!important;

  1012.     padding-left: 0!important;

  1013.     border-radius: 0.15rem!important;

  1014.     margin-top: 0.3rem!important;

  1015.   }

  1016.   .examine_box .van-col:first-child{

  1017.     color: #FFF!important;

  1018.     font-size: 0.45rem!important;

  1019.     text-align: center!important;

  1020.   }

  1021.   .examine_box .van-col:last-child{

  1022.     background-color: #FFF!important;

  1023.     border-radius: 0.15rem!important;

  1024.     overflow: hidden!important;

  1025.     .van-radio-group--horizontal{

  1026.       padding: 0.2rem 0;

  1027.       border-bottom: 1px solid #eee;

  1028.     }

  1029.   }

  1030.   #mapWrap{

  1031.     width: 96%;

  1032.     margin: 0 auto;

  1033.     border-bottom-left-radius: 12px;

  1034.     border-bottom-right-radius: 12px;

  1035.     overflow: hidden;

  1036.   }

  1037.   .mapBox{

  1038.     position: relative;

  1039.     .mapBox_button{

  1040.       position: absolute;

  1041.       top: 0.2rem;

  1042.       right: 2%;

  1043.     }

  1044.   }

  1045.   .van-steps{

  1046.     padding: 2% 6% 0;

  1047.   }

  1048.   .topTit{

  1049.     margin-top: 0.4rem;

  1050.     font-size: 0.45rem;

  1051.     background-color: #1D6FE9;

  1052.     color: #FFFFFF;

  1053.     line-height: 58px;

  1054.     text-align: center;

  1055.     padding: 15px 0;

  1056.     box-shadow: 0px 3px 6px 0px rgba(15,67,145,0.40);

  1057.   }

  1058.   .main_title{

  1059.     font-size: 0.4rem;

  1060.     color: #1D6FE9;

  1061.     margin: 0.2rem 6%;

  1062.     position: relative;

  1063.   }

  1064.   .main_box{

  1065.     width: 96%;

  1066.     margin: 0 auto;

  1067.     border-radius: 6px;

  1068.     box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);

  1069.     overflow: hidden;

  1070.     background-color: #FFF;

  1071.   }

  1072.   .collapse{

  1073.     width: 96%;

  1074.     margin: 0 auto;

  1075.     border-radius: 6px;

  1076.     box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);

  1077.     overflow: hidden;

  1078.     margin-bottom: 15px;

  1079.   }

  1080.   /deep/.van-radio--horizontal{

  1081.     margin-left: 20px;

  1082.     margin-right: 0;

  1083.   }

  1084.   .file-box{

  1085.     padding: 2% 5% 0;

  1086.   }

  1087.   .submitButton{

  1088.     width: 80%;

  1089.     margin: 0 auto;

  1090.     background-color: #1D6FE9;

  1091.     border-radius: 14px;

  1092.   }

  1093.   .timeTit{

  1094.     text-align: center;

  1095.     font-size: 16px;

  1096.     line-height: 27px;

  1097.   }

  1098.   .action-box{

  1099.     padding: 15px 0!important;

  1100.     margin-top: 0.4rem;

  1101.   }

  1102.   .check-box{

  1103.     margin-top: 0.4rem;

  1104.   }

  1105.   .addFamily{

  1106.     position: absolute;

  1107.     top: -2px;

  1108.     right: 0;

  1109.     border-radius: 50%;

  1110.   }

  1111.   .deleteFamily{

  1112.     position: absolute;

  1113.     top: -0.3rem;

  1114.     right: 6%;

  1115.     z-index: 9;

  1116.     border-radius: 50%;

  1117.   }

  1118.   .familyList{

  1119.     margin-top: 0.4rem;

  1120.     position: relative;

  1121.   }

  1122.   .noModify{

  1123.     .topTit{

  1124.       background-color:#ABABAB ;

  1125.       box-shadow: 0px 3px 6px 0px rgba(171,171,171,0.40);

  1126.     }

  1127.     .van-cell__title{

  1128.       color: #B4B0B0;

  1129.     }

  1130.   }

  1131. </style>