nsgk_mobile/src/views/sunVillage_info/industryAdd.vue

 <template>
     <div class="home_wrapper">
         <div class="header_main">
             产业信息新增
             <div class="return_btn" @click="onClickLeft"></div>
         </div>
       <van-form @submit="onSubmit">
         <div class="list_main">
           <div class="titBox">
             <img src="../../assets/images/sunVillage_info/add_icon_1.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
             <p class="tit">基本信息</p>
           </div>
           <van-field required :rules="[{ required: true }]" v-model="form.industryCode" label="产业编码" placeholder="产业编码" input-align="right" :border="false" :maxlength="20"/>
           <van-field required :rules="[{ required: true }]" v-model="form.industryName" label="产业名称" placeholder="产业名称" input-align="right" :border="false" :maxlength="100"/>

           <van-field
             readonly
             clickable
             label="产业权属"
             placeholder="请选择"
             v-model="industryRights"
             @click="showIndustryRights = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true  }]"
           />
           <van-popup v-model="showIndustryRights" position="bottom">
             <van-picker
               show-toolbar
               :columns="industryRightsOptions"
               @confirm="onConfirmIndustryRights"
               @cancel="showIndustryRights = false"
             />
           </van-popup>
           <van-field v-model="form.industryRightsOther" label="其他权属" placeholder="其他权属" input-align="right" :border="false" :maxlength="100"/>
           <van-field
             readonly
             clickable
             label="产业类型"
             placeholder="请选择"
             v-model="industryType"
             @click="showIndustryType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true  }]"
           />
           <van-popup v-model="showIndustryType" position="bottom">
             <van-picker
               show-toolbar
               :columns="industryTypeOptions"
               @confirm="onConfirmIndustryType"
               @cancel="showIndustryType = false"
             />
           </van-popup>
           <van-field v-model="form.industryTypeOther" label="其他产业" placeholder="其他产业" input-align="right" :border="false" :maxlength="100"/>
           <van-field v-model="form.productName" label="主要产品" placeholder="主要产品" required :rules="[{ required: true }]" input-align="right" :border="false" :maxlength="100"/>
           <van-field
             readonly
             clickable
             label="占用土地"
             placeholder="请选择"
             v-model="occupyLand"
             @click="showOccupyLand = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             :border="false"
             required
             :rules="[{ required: true  }]"
           />
           <van-popup v-model="showOccupyLand" position="bottom">
             <van-picker
               show-toolbar
               :columns="sysYesNoOptions"
               @confirm="onConfirmOccupyLand"
               @cancel="showOccupyLand = false"
             />
           </van-popup>
           <van-field v-model="form.occupyLandArea" label="占地面积（亩）" placeholder="占地面积（亩）" type="number" input-align="right" :border="false" :maxlength="15"/>
           <van-field
             readonly
             clickable
             label="占用类型"
             placeholder="请选择"
             v-model="occupyLandType"
             @click="showOccupyLandType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             :border="false"
           />
           <van-popup v-model="showOccupyLandType" position="bottom">
             <van-picker
               show-toolbar
               :columns="occupyLandTypeOptions"
               @confirm="onConfirmOccupyLandType"
               @cancel="showOccupyLandType = false"
             />
           </van-popup>
           <van-field v-model="form.occupyLandTypeOther" label="其他占用" placeholder="其他占用" input-align="right" :border="false"  :maxlength="100"/>
           <van-field
             readonly
             clickable
             label="土地来源"
             placeholder="请选择"
             v-model="landSource"
             @click="showLandSource = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             :border="false"
           />
           <van-popup v-model="showLandSource" position="bottom">
             <van-picker
               show-toolbar
               :columns="landSourceOptions"
               @confirm="onConfirmLandSource"
               @cancel="showLandSource = false"
             />
           </van-popup>
           <van-field v-model="form.landSourceOther" label="其他来源" placeholder="其他来源" input-align="right" :border="false" :maxlength="100"/>
           <van-field v-model="form.investmentAmount" label="产业投资金额(万)" placeholder="产业投资金额(万)" required :rules="[{ required: true }]" type="number" input-align="right" :border="false" :maxlength="15" label-width="120px"/>
           <van-field v-model="form.industryValuation" label="产业估值(万)" placeholder="产业估值(万)" required :rules="[{ required: true }]" type="number" input-align="right" :border="false" :maxlength="15"/>
           <van-field v-model="form.yearSaleAmount" label="年销售额(万)" placeholder="年销售额(万)" type="number" input-align="right" :border="false" :maxlength="15"/>
           <van-field v-model="form.yearProfitAmount" label="年利润(万)" placeholder="年利润(万)" type="number" input-align="right" :border="false" :maxlength="15"/>
            <van-field
             readonly
             clickable
             label="有贷款需求"
             placeholder="请选择"
             v-model="isLoan"
             @click="showIsLoan = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             :border="false"
           />
           <van-popup v-model="showIsLoan" position="bottom">
             <van-picker
               show-toolbar
               :columns="sysYesNoOptions"
               @confirm="onConfirmIsLoan"
               @cancel="showIsLoan = false"
             />
           </van-popup>
           <van-field v-model="form.loanAmount" label="计划贷款金额(万)" placeholder="计划贷款金额(万)" type="number" input-align="right" :border="false" :maxlength="15" label-width="120px"/>
           <van-field v-model="form.industryBz" label="备注" placeholder="备注" input-align="right" :border="false" :maxlength="500"/>

         </div>
         <div style="margin: 16px auto;width: 50%;">
           <van-button round block type="primary" native-type="submit">
             保存
           </van-button>
         </div>
       </van-form>
     </div>
 </template>
 <script>
   import {addIndustry} from "@/api/sunVillage_info/industry";
   export default {
     name: "certificateList",
     data() {
       return {
         // 资产分类字典
         industryRightsOptions: [],
         industryTypeOptions: [],
         showIndustryRights:false,
         industryRights:'村集体产业',
         showIndustryType:false,
         industryType:'种植业',
         form:{
            id: null,
            bookId: null,
            deptId: null,
            industryCode: null,
            industryName: null,
            industryRights: "1",
            industryRightsOther: null,
            industryType:  "1",
            industryTypeOther: null,
            productName: null,
            occupyLand: "Y",
            occupyLandArea: null,
            occupyLandType: "1",
            occupyLandTypeOther: null,
            landSource: "1",
            landSourceOther: null,
            investmentAmount: null,
            industryValuation: null,
            yearSaleAmount: null,
            yearProfitAmount: null,
            isLoan: "Y",
            loanAmount: null,
            industryBz: null,
            theGeom: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null
         },
         showOccupyLand:false,
         occupyLand:'是',
         sysYesNoOptions:[],
         showOccupyLandType:false,
         occupyLandTypeOptions:[],
         occupyLandType:'耕地',
         showLandSource:false,
         landSourceOptions:[],
         landSource:'集体',
         landSourceTypeOptions:[],
         showIsLoan:false,
         isLoan:'是',
         loading: false,
         finished: false,
         listLength:'0',
         searchInput:'',
         queryParams:{
           pageNum:1,
           pageSize:10,
           orderByColumn:'createTime',
           isAsc:'desc',
           industryName:'',
         },
         buildTime:new Date()
       };
     },
     created() {
       this.houseGetDicts("sys_yes_no").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.sysYesNoOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("industry_rights_type").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.industryRightsOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("occupy_land_type").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.occupyLandTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("land_source").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.landSourceOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
        this.houseGetDicts("purpose_type").then((response) => {
          for(var i = 0 ; i < response.data.length ; i++){
            this.industryTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
          }
        });
     },
     methods: {
       onConfirmIndustryRights(data){
         this.industryRights = data.text;
         this.form.industryRights = data.value;
         this.showIndustryRights = false;
       },
       onConfirmIndustryType(data){
         this.industryType = data.text;
         this.form.industryType = data.value;
         this.showIndustryType = false;
       },
       onConfirmOccupyLandType(data){
         this.occupyLandType = data.text;
         this.form.occupyLandType = data.value;
         this.showOccupyLandType = false;
       },
       onConfirmOccupyLand(data){
         this.occupyLand = data.text;
         this.form.occupyLand = data.value;
         this.showOccupyLand = false;
       },
       onConfirmLandSource(data){
         this.landSource = data.text;
         this.form.landSource = data.value;
         this.showLandSource = false;
       },
       onConfirmIsLoan(data){
         this.isLoan = data.text;
         this.form.isLoan = data.value;
         this.showIsLoan = false;
       },

       onSubmit(){
         addIndustry(this.form).then(response => {
           if (response.code == 200){
             this.$notify({ type: 'success', message: '新增成功' });
             setTimeout(function(){
               history.back(-1);
             },2000)
           }
         });
       }
     },
   }
 </script>
 <style scoped lang="scss">
   /deep/ .van-button--primary{
     background: url("../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
     background-size: 100% 100%;
     border: none;
   }
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main {
        height: 116px;
        background: url('../../assets/images/sunVillage_info/list_head.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;
        }
    }
    .list_main{
      padding:25px;
      background: #ffffff;
      width: 94%;
      margin: 25px auto 0;
      border-radius: 15PX;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    }
    .titBox{
      display: flex;
      align-items: center;
    }
    .tit{
      font-size: 36px;
      font-weight: bold;
    }
    /deep/ .van-cell{
      padding-left: 0!important;
      padding-right: 0!important;
      padding-bottom: 0!important;
    }
    /deep/ .van-field__label{
      padding-left: 10PX;
      width: 8.2em;
    }
    /deep/ .van-cell--required::before{
      left: 0;
    }

}
 </style>