nsgk_mobile/src/views/sunVillage_info/informationAdd.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 v-model="form.code" label="合同编码" placeholder="合同编码" input-align="right" :border="false" />
           <van-field required v-model="form.name" label="合同名称" placeholder="合同名称" input-align="right" :border="false" />

           <van-field
             readonly
             clickable
             label="合同类型"
             placeholder="请选择"
             v-model="assetType"
             @click="showAssetType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择合同类型' }]"
           />
           <van-popup v-model="showAssetType" position="bottom">
             <van-picker
               show-toolbar
               :columns="assetTypeOptions"
               @confirm="onConfirmAssetType"
               @cancel="showAssetType = false"
             />
           </van-popup>

           <van-field
             readonly
             clickable
             label="合同来源"
             placeholder="请选择"
             v-model="contractionSource"
             @click="showContractionSource = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择合同来源' }]"
           />
           <van-popup v-model="showContractionSource" position="bottom">
             <van-picker
               show-toolbar
               :columns="contractionSourceOptions"
               @confirm="onConfirmContractionSource"
               @cancel="showContractionSource = false"
             />
           </van-popup>
           <van-field required v-model="form.firstParty" label="合同甲方" placeholder="合同甲方" input-align="right" :border="false" />
           <van-field v-model="form.firstPartyDirector" label="甲方代表" placeholder="甲方代表" input-align="right" :border="false" />
           <van-field v-model="form.firstPartyPhone" label="甲方电话" placeholder="甲方电话" input-align="right" :border="false" />
           <van-field required v-model="form.secondParty" label="合同乙方" placeholder="乙方名称" input-align="right" :border="false" />
           <van-field v-model="form.secondPartyDirector" label="乙方代表" placeholder="乙方代表" input-align="right" :border="false" />
           <van-field v-model="form.secondPartyPhone" label="乙方电话" placeholder="乙方电话" input-align="right" :border="false" />

           <van-field v-model="form.secondPartyIdCard" label="乙方身份证号" placeholder="乙方身份证号" input-align="right" :border="false" />


           <van-field
             readonly
             clickable
             label="签订日期"
             placeholder="请选择"
             v-model="form.buildingTime"
             @click="showBuildingTime = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
           />
           <van-popup v-model="showBuildingTime" position="bottom">
             <van-datetime-picker
               v-model="buildingTime"
               type="date"
               title="选择年月日"
               @confirm="onConfirmBuildingTime"
               @cancel="showBuildingTime = false"
             />
           </van-popup>

           <van-field
             readonly
             clickable
             label="合同状态"
             placeholder="请选择"
             v-model="contractionStatus"
             @click="showContractionStatus = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择合同状态' }]"
           />
           <van-popup v-model="showContractionStatus" position="bottom">
             <van-picker
               show-toolbar
               :columns="contractionStatusOptions"
               @confirm="onConfirmContractionStatus"
               @cancel="showContractionStatus = false"
             />
           </van-popup>
           <van-field v-model="form.remark" label="备注" placeholder="备注" input-align="right" :border="false" />
         </div>

         <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
             readonly
             clickable
             label="收付款类型"
             placeholder="请选择"
             v-model="collectionPay"
             @click="showCollectionPay = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择收付款类型' }]"
           />
           <van-popup v-model="showCollectionPay" position="bottom">
             <van-picker
               show-toolbar
               :columns="collectionPayOptions"
               @confirm="onConfirmCollectionPay"
               @cancel="showCollectionPay = false"
             />
           </van-popup>

           <van-field
             readonly
             clickable
             label="结款方式"
             placeholder="请选择"
             v-model="settleType"
             @click="showSettleType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择结款方式' }]"
           />
           <van-popup v-model="showSettleType" position="bottom">
             <van-picker
               show-toolbar
               :columns="settleTypeOptions"
               @confirm="onConfirmSettleType"
               @cancel="showSettleType = false"
             />
           </van-popup>

           <van-field
             readonly
             clickable
             label="支付方式"
             placeholder="请选择"
             v-model="contractPaymentType"
             @click="showContractPaymentType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择支付方式' }]"
           />
           <van-popup v-model="showContractPaymentType" position="bottom">
             <van-picker
               show-toolbar
               :columns="contractPaymentTypeOptions"
               @confirm="onConfirmContractPaymentType"
               @cancel="showContractPaymentType = false"
             />
           </van-popup>

           <van-field v-model="form.contractObject" label="合同标的" placeholder="合同标的" input-align="right" :border="false" />
           <van-field v-model="form.num" label="标的数量" placeholder="标的数量" input-align="right" :border="false" />

           <van-field v-model="form.unit" label="计量单位" placeholder="计量单位" input-align="right" :border="false" />

           <van-field
             readonly
             clickable
             label="开始日期"
             placeholder="请选择"
             v-model="form.startTime"
             @click="showStartTime = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择开始日期' }]"
           />
           <van-popup v-model="showStartTime" position="bottom">
             <van-datetime-picker
               v-model="startTime"
               type="date"
               title="选择年月日"
               @confirm="onConfirmStartTime"
               @cancel="showStartTime = false"
             />
           </van-popup>

           <van-field
             readonly
             clickable
             label="结束日期"
             placeholder="请选择"
             v-model="form.endTime"
             @click="showEndTime = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             required
             :border="false"
             :rules="[{ required: true , message:'请选择开始日期' }]"
           />
           <van-popup v-model="showEndTime" position="bottom">
             <van-datetime-picker
               v-model="endTime"
               type="date"
               title="选择年月日"
               @confirm="onConfirmEndTime"
               @cancel="showEndTime = false"
             />
           </van-popup>


           <van-field v-model="form.contractYears" label="承包年限(年)" placeholder="承包年限(年)" input-align="right" :border="false" />
           <van-field required v-model="form.totalAmount" label="承包价款(元)" placeholder="承包价款(元)" input-align="right" :border="false" />
           <van-field required v-model="form.price" label="折合年均(元)" placeholder="折合年均(元)" input-align="right" :border="false" />

           <van-field required v-model="form.receivedAmount" label="已结款(元)" placeholder="已结款(元)" input-align="right" :border="false" />
           <van-field v-model="form.settledAmount" label="下次结款(元)" placeholder="下次结款(元)" input-align="right" :border="false" />

         </div>

         <div class="list_main">
           <div class="titBox">
             <img src="../../assets/images/sunVillage_info/add_icon_2.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
             <p class="tit">村委情况</p>
           </div>
           <van-field v-model="form.villageHead" label="村负责人" placeholder="村负责人" input-align="right" :border="false" />
           <van-field v-model="form.contractCustodian" label="合同保管人" placeholder="合同保管人" input-align="right" />
           <van-field v-model="form.villageRepsOpinion" label="村民代表意见" placeholder="村民代表意见" input-align="right" :border="false" />

           <van-field
             readonly
             clickable
             label="会议时间"
             placeholder="请选择"
             v-model="form.meetingTime"
             @click="showMeetingTime = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             :border="false"
           />
           <van-popup v-model="showMeetingTime" position="bottom">
             <van-datetime-picker
               v-model="meetingTime"
               type="date"
               title="选择年月日"
               @confirm="onConfirmMeetingTime"
               @cancel="showMeetingTime = false"
             />
           </van-popup>
         </div>

         <div class="list_main">
           <div class="titBox">
             <img src="../../assets/images/sunVillage_info/add_icon_2.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
             <p class="tit">招标信息</p>
           </div>
<!--           <van-field required v-model="form.biddingWay" label="招标方式" placeholder="招标方式" input-align="right" :border="false" />-->
           <van-field v-model="form.itemId" label="项目编号" placeholder="项目编号" input-align="right" />
           <van-field v-model="form.itemName" label="项目名称" placeholder="项目名称" input-align="right" :border="false" />
           <van-field v-model="form.handleName" label="经办人" placeholder="经办人" input-align="right" :border="false" />
           <van-field v-model="form.budget" label="预算金额(元)" placeholder="预算金额(元)" input-align="right" :border="false" />

           <van-field
             readonly
             clickable
             label="招标日期"
             placeholder="请选择"
             v-model="form.biddingDate"
             @click="showBiddingDate = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             :border="false"
           />
           <van-popup v-model="showBiddingDate" position="bottom">
             <van-datetime-picker
               v-model="biddingDate"
               type="date"
               title="选择年月日"
               @confirm="onConfirmBiddingDate"
               @cancel="showBiddingDate = false"
             />
           </van-popup>

           <van-field
             readonly
             clickable
             label="招标类型"
             placeholder="请选择"
             v-model="biddingType"
             @click="showBiddingType = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             :border="false"
           />
           <van-popup v-model="showBiddingType" position="bottom">
             <van-picker
               show-toolbar
               :columns="biddingTypeOptions"
               @confirm="onConfirmBiddingType"
               @cancel="showBiddingType = false"
             />
           </van-popup>
           <van-field v-model="form.winBiddingCompany" label="中标单位" placeholder="中标单位" input-align="right" :border="false" />
           <van-field v-model="form.winBiddingPrice" label="中标金额(元)" placeholder="中标金额(元)" input-align="right" :border="false" />
           <van-field v-model="form.reviewer" label="审核人" placeholder="审核人" input-align="right" :border="false" />

           <van-field
             readonly
             clickable
             label="审核时间"
             placeholder="请选择"
             v-model="form.reviewTime"
             @click="showReviewTime = true"
             input-align="right"
             right-icon="arrow-down"
             label-width="auto"
             :border="false"
           />
           <van-popup v-model="showReviewTime" position="bottom">
             <van-datetime-picker
               v-model="reviewTime"
               type="date"
               title="选择年月日"
               @confirm="onConfirmReviewTime"
               @cancel="showReviewTime = false"
             />
           </van-popup>
         </div>

         <div style="margin: 16px;">
           <van-button round block type="primary" native-type="submit">
             保存
           </van-button>
         </div>
       </van-form>
     </div>
 </template>
 <script>
   import { addInfo } from "@/api/sunVillage_info/fixedAssets";
   export default {
     name: "certificateList",
     data() {
       return {
         applicationList:[],
         applicationListSecond:[],
         assetStatusOptions:[],
         auditStatus:[],
         loading: false,
         finished: false,
         listLength:'0',
         searchInput:'',
         form:{
           assetType:'1',
           contractionSource:'1',
           contractionStatus:'1',
           collectionPay:'1',
           settleType:'1',
           contractPaymentType:'1',
           biddingType:'',
           startTime:this.format(new Date(),'yyyy-MM-dd'),
           endTime:this.format(new Date(),'yyyy-MM-dd'),
           meetingTime:this.format(new Date(),'yyyy-MM-dd'),
           biddingDate:this.format(new Date(),'yyyy-MM-dd'),
           reviewTime:this.format(new Date(),'yyyy-MM-dd'),
           buildingTime:this.format(new Date(),'yyyy-MM-dd'),
         },
         queryParams:{
           pageNum:1,
           pageSize:10,
           orderByColumn:'createTime',
           isAsc:'desc',
           name:'',
         },
         startTime:new Date(),
         endTime:new Date(),
         meetingTime:new Date(),
         biddingDate:new Date(),
         reviewTime:new Date(),
         buildingTime:new Date(),
         //合同类型
         assetType:'农村土地承包合同类',
         showAssetType:false,
         assetTypeOptions:[],
         //合同来源
         contractionSource:'线下合同',
         showContractionSource:false,
         contractionSourceOptions:[],
         //合同状态
         contractionStatus:'正常',
         showContractionStatus:false,
         contractionStatusOptions:[],
         //收付款类型
         collectionPay:'收款',
         showCollectionPay:false,
         collectionPayOptions:[],
         //结款方式
         settleType:'一次性支付',
         showSettleType:false,
         settleTypeOptions:[],
         //支付方式
         contractPaymentType:'现金',
         showContractPaymentType:false,
         contractPaymentTypeOptions:[],
         //支付方式
         biddingType:'',
         showBiddingType:false,
         biddingTypeOptions:[],

         showStartTime:false,
         showEndTime:false,
         showMeetingTime:false,
         showBiddingDate:false,
         showReviewTime:false,
         showBuildingTime:false,
       };
     },
     created() {
       this.houseGetDicts("type_of_contract").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.assetTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("contraction_source").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.contractionSourceOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("contraction_status").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.contractionStatusOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("collection_pay").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.collectionPayOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("settle_type").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.settleTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("contract_payment_type").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.contractPaymentTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
       this.houseGetDicts("bidding_types").then((response) => {
         for(var i = 0 ; i < response.data.length ; i++){
           this.biddingTypeOptions.push({text:response.data[i].dictLabel,value:response.data[i].dictValue});
         }
       });
     },
     methods: {
       onConfirmAssetType(data){
         this.assetType = data.text;
         this.form.assetType = data.value;
         this.showAssetType = false;
       },
       onConfirmContractionSource(data){
         this.contractionSource = data.text;
         this.form.contractionSource = data.value;
         this.showContractionSource = false;
       },
       onConfirmContractionStatus(data){
         this.contractionStatus = data.text;
         this.form.contractionStatus = data.value;
         this.showContractionStatus = false;
       },
       onConfirmCollectionPay(data){
         this.collectionPay = data.text;
         this.form.collectionPay = data.value;
         this.showCollectionPay = false;
       },
       onConfirmSettleType(data){
         this.settleType = data.text;
         this.form.settleType = data.value;
         this.showSettleType = false;
       },
       onConfirmContractPaymentType(data){
         this.contractPaymentType = data.text;
         this.form.contractPaymentType = data.value;
         this.showContractPaymentType = false;
       },
       onConfirmBiddingType(data){
         this.biddingType = data.text;
         this.form.biddingType = data.value;
         this.showBiddingType = false;
       },
       onConfirmStartTime(data){
         this.form.startTime = this.format(data,'yyyy-MM-dd');
         this.startTime = data;
         this.showStartTime = false;
       },
       onConfirmEndTime(data){
         this.form.endTime = this.format(data,'yyyy-MM-dd');
         this.endTime = data;
         this.showEndTime = false;
       },
       onConfirmMeetingTime(data){
         this.form.meetingTime = this.format(data,'yyyy-MM-dd');
         this.meetingTime = data;
         this.showMeetingTime = false;
       },
       onConfirmBiddingDate(data){
         this.form.biddingDate = this.format(data,'yyyy-MM-dd');
         this.biddingDate = data;
         this.showBiddingDate = false;
       },
       onConfirmReviewTime(data){
         this.form.reviewTime = this.format(data,'yyyy-MM-dd');
         this.reviewTime = data;
         this.showReviewTime = false;
       },
       onConfirmBuildingTime(data){
         this.form.buildingTime = this.format(data,'yyyy-MM-dd');
         this.buildingTime = data;
         this.showBuildingTime = false;
       },
       onSubmit(){
         addInfo(this.form).then((response) => {
           if (response.code == 200){
             this.$notify({ type: 'success', message: '新增成功' });
             setTimeout(function(){
               history.back(-1);
             },2000)
           }
         });
       }
     },
   }
 </script>
 <style scoped lang="scss">
  .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>