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

        <van-field v-model="collectionPay" @click="showCollectionPay = false" label="收付款" placeholder="收付款" input-align="right" :border="false" disabled/>
        <van-popup v-model="showCollectionPay" position="bottom">
          <van-picker
            show-toolbar
            :columns="collectionPayOptions"
            @confirm="onConfirmCollectionPay"
            @cancel="showCollectionPay = false"/>
        </van-popup>

        <van-field v-model="form.orderNum" label="结款序号" placeholder="结款序号" input-align="right" type="digit" :border="false" />
        <van-field v-model="form.settlementDate" clickable label="结款日期" placeholder="请选择" @click="showSettlementDate = true" input-align="right" right-icon="arrow-down" label-width="auto" required :border="false"/>
        <van-popup v-model="showSettlementDate" position="bottom">
          <van-datetime-picker v-model="settlementDate" type="date" title="选择年月日" @confirm="onConfirmSettlementDate" @cancel="showSettlementDate = false"/>
        </van-popup>
        <van-field v-model="form.settlementAmount" label="结款金额" type="number" required placeholder="结款金额" input-align="right" :border="false"  />

        <van-field v-model="planStatus" @click="showPlanStatus = false" label="结款状态"  input-align="right" :border="false" disabled  />
        <van-popup v-model="showPlanStatus"  position="bottom">
          <van-picker
            show-toolbar
            :columns="planStatusOptions"
            @confirm="onConfirmPlanStatus"
            @cancel="showPlanStatus = false"
            disabled/>
        </van-popup>

        <van-field v-model="form.remark" label="备注" placeholder="备注" input-align="right" :border="false" />
      </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 {addPlan, getInfo} from "@/api/sunVillage_info/fixedAssets";
  export default {
    name: "informationFunPlanAdd",
    data() {
      return {
        assetStatusOptions:[],
        auditStatus:[],
        loading: false,
        finished: false,
        listLength:'0',
        searchInput:'',
        contractionId:'',
        form:{
          contractionId:'',
          code:'',
          name:'',
          secondParty:'',
          collectionPay:'',
          planStatus:'1',
          orderNum:'',
          settlementDate:'',
          settlementAmount:'',
          remark:'',
        },
        queryParams:{
/*          pageNum:1,
          pageSize:10,
          orderByColumn:'createTime',
          isAsc:'desc',
          name:'',*/
          contractionId:'',
        },
        //收款日期
        settlementDate:new Date(),
        showSettlementDate:false,

        //结款状态
        planStatus:'待付款',
        showPlanStatus:false,
        planStatusOptions:[],

        //收付款
        collectionPay:'收款',
        showCollectionPay:false,
        collectionPayOptions:[],

        // rules: {
        //   settlementAmount: [
        //     { required: true, message: '请输入结款金额' },
        //   ]
        // },
      };
    },
    created() {
      this.houseGetDicts("plan_status").then((response) => {
          for(var i = 0 ; i < response.data.length ; i++){
          this.planStatusOptions.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("plan_status").then((response) => {
        this.planStatusOptions = response.data;
      });
      this.houseGetDicts("collection_pay").then((response) => {
        this.collectionPayOptions = response.data;
      });*/
      this.getDetail(this.$route.query.contractionId)
      this.contractionId = this.$route.query.contractionId;
    },
    methods: {
      getDetail(id){
          getInfo(id).then(response => {
            this.form.contractionId = response.data.id;
            this.form.code = response.data.code;
            this.form.name = response.data.name;
            this.form.secondParty = response.data.secondParty;
            this.form.planStatus = '1';
            this.form.collectionPay = response.data.collectionPay;
          });
      },
      onConfirmPlanStatus(data){
        this.planStatus = data.text;
        this.form.planStatus = data.value;
        this.showPlanStatus = false;
      },
      onConfirmCollectionPay(data){
        this.collectionPay = data.text;
        this.form.collectionPay = data.value;
        this.showCollectionPay = false;
      },
      onConfirmSettlementDate(data){
        this.form.settlementDate = this.format(data,'yyyy-MM-dd');
        this.settlementDate = data;
        this.showSettlementDate = false;
      },


      onSubmit(){
        this.form.contractionId = this.contractionId;
        addPlan(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;
    }
    /deep/ .van-field--disabled .van-field__label {
      color: #646566;
    }

  }







</style>