nsgk_mobile/src/views/contracted/village/contractor/contractorDetailAdd.vue

<template>
  <div class="app-container">

    <van-nav-bar left-arrow fixed placeholder @click-left="onClickLeft" >
      <template #title>
        <div class="tb_main">
          新增承包方信息
        </div>
      </template>
    </van-nav-bar>

    <div class="list_main">
      <van-form ref="formData">
        <van-field v-model="form.cbfbm" label="代码：" placeholder="<自动生成>" :border="false" input-align="left" :disabled="true" maxlength="18">
          <!-- <template #button>
            <van-button size="mini" type="primary" native-type="button" @click="generateCode">生成代码</van-button>
          </template> -->
        </van-field>
        <van-field
          v-model="cbflxText"
          label="类型："
          placeholder="请选择类型"
          required
          :rules="[{ required: true }]"
          :border="false"
          input-align="left"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showType = true"
        />
        <van-popup v-model="showType" position="bottom">
          <van-picker
            show-toolbar
            :columns="contractorTypeOptions"
            value-key="dictLabel"
            @confirm="onConfirmTypeOptions"
            @cancel="showType = false"
          />
        </van-popup>
        <van-field v-model="form.cbfmc" label="名称：" placeholder="请输入名称" required :rules="[{ required: true }]" :border="false" input-align="left" maxlength="50" />
        <van-field
          v-model="cbfzjlxText"
          label="证件类型："
          placeholder="请选择证件类型"
          required
          :rules="[{ required: true }]"
          :border="false"
          input-align="left"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showZjType = true"
        />
        <van-popup v-model="showZjType" position="bottom">
          <van-picker
            show-toolbar
            :columns="credentialTypeOptions"
            value-key="dictLabel"
            @confirm="onConfirmZjTypeOptions"
            @cancel="showZjType = false"
          />
        </van-popup>

        <van-field v-model="form.cbfzjhm" label="证件号码：" placeholder="请输入证件号码" required :rules="[{ required: true }]" :border="false" input-align="left" maxlength="20" />
        <van-field v-model="form.cbfdz" label="地址：" placeholder="请输入地址" required :rules="[{ required: true }]" :border="false" input-align="left" maxlength="100" />
        <van-field v-model="form.yzbm" label="邮编：" placeholder="请输入邮编" required :rules="[{ required: true }]" :border="false" input-align="left" maxlength="6" />
        <van-field v-model="form.lxdh" label="电话：" placeholder="请输入电话" required :rules="[{ required: true }]" :border="false" input-align="left" maxlength="15" />
        <van-field v-model="form.cbfcysl" label="成员数量：" placeholder="请输入成员数量" required :rules="[{ required: true }]" :border="false" input-align="left" type="number" />
        <van-field name="radio" label="是否有住房" :border="false" input-align="left">
          <template #input>
            <van-radio-group v-model="form.sfyzf" direction="horizontal">
              <van-radio name="Y">是</van-radio>
              <van-radio name="N">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="radio" label="是否在村居住" :border="false" input-align="left">
          <template #input>
            <van-radio-group v-model="form.sfzcjz" direction="horizontal">
              <van-radio name="Y">是</van-radio>
              <van-radio name="N">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="householdStatusText"
          label="整户状态："
          placeholder="请选择整户状态"
          :border="false"
          input-align="left"
          right-icon="arrow-down"
          readonly
          clickable
          @click="showZhzt = true"
        />
        <van-popup v-model="showZhzt" position="bottom">
          <van-picker
            show-toolbar
            :columns="householdStatusOptions"
            value-key="dictLabel"
            @confirm="onConfirmHouseholdStatusOptions"
            @cancel="showZhzt = false"
          />
        </van-popup>
        <van-field v-model="form.totalArea" label="总面积(亩)：" placeholder="请输入总面积(亩)" :border="false" input-align="left"  type="number"/>
        <van-field v-model="form.qqArea" label="确权面积(亩)：" placeholder="请输入确权面积(亩)" :border="false" input-align="left"  type="number"/>
        <van-field v-model="form.qtArea" label="其他面积(亩)：" placeholder="请输入其他面积(亩)" :border="false" input-align="left" type="number"/>
        <van-field v-model="form.dks" label="地块数(块)：" placeholder="请输入地块数(块)" :border="false" input-align="left"   type="number"/>
        <van-field v-model="form.zzjyArea" label="自主经营面积(亩)：" placeholder="请输入自主经营面积(亩)" :border="false" input-align="left"   type="number"/>
        <van-field v-model="form.lzcArea" label="流转出面积(亩)：" placeholder="请输入流转出面积(亩)" :border="false" input-align="left"   type="number"/>
        <van-field v-model="form.shArea" label="损毁面积(亩)：" placeholder="请输入损毁面积(亩)" :border="false" input-align="left"   type="number"/>
        <van-field v-model="form.zzArea" label="征占面积(亩)：" placeholder="请输入征占面积(亩)" :border="false" input-align="left"   type="number"/>
        <van-field v-model="form.cbfdcy" label="调查员：" placeholder="请输入调查员" required :rules="[{ required: true }]" :border="false" input-align="left" maxlength="50" />
        <van-field v-model="form.cbfdcrq" label="调查日期：" placeholder="请选择调查日期" required :rules="[{ required: true }]"
                   :border="false" input-align="left" right-icon="arrow-down" readonly clickable @click="showDcrq = true" />
        <van-popup v-model="showDcrq" position="bottom">
          <van-datetime-picker
            :value="new Date()"
            type="date"
            title="请选择调查日期"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmDcrq"
            @cancel="showDcrq = false"
          />
        </van-popup>
        <van-field v-model="form.cbfdcjs" label="调查记事：" type="textarea" rows="3" placeholder="请输入调查记事" required :rules="[{ required: true }]" :border="false" input-align="left" maxlength="250" />
        <van-field v-model="form.gsjsr" label="公示记事人：" placeholder="请输入公示记事人" :border="false" input-align="left" maxlength="50" />
        <van-field v-model="form.gsjs" label="公示记事：" type="textarea" rows="3" placeholder="请输入公示记事" :border="false" input-align="left" maxlength="250" />
        <van-field v-model="form.gsshr" label="公示审核人：" placeholder="请输入公示审核人" :border="false" input-align="left" maxlength="20" />
        <van-field v-model="form.gsshrq" label="公示审核日期：" placeholder="请选择公示审核日期" :border="false" input-align="left" right-icon="arrow-down"
                   readonly clickable @click="showGsshrq = true" />
        <van-popup v-model="showGsshrq" position="bottom">
          <van-datetime-picker
            :value="new Date()"
            type="date"
            title="请选择公示审核日期"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmGsshrq"
            @cancel="showGsshrq = false"
          />
        </van-popup>
      </van-form>
      <p class="btn" @click="submitForm">保存</p>
    </div>


  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import { addCbf, generateContractorCode } from "@/api/contracted/cbf";
  import FieldRadio from "@/components/form/FieldRadio";
  import FieldSelect from "@/components/form/FieldSelect";

  export default {
    name: "contractedVillageContractorAdd",
    components: {
      FieldRadio,FieldSelect
    },
    data() {
      return {
        showType:false,
        showZjType:false,
        showZhzt:false,
        showDcrq: false,
        showGsshrq: false,
        // 承包方信息表单
        form: {
          deptId: null,
          cbfbm: null,
          cbflx: '1',
          cbfmc: null,
          cbfzjlx: '1',
          cbfzjhm: null,
          cbfdz: null,
          yzbm: null,
          lxdh: null,
          cbfcysl: null,
          cbfdcy: null,
          cbfdcrq: null,
          cbfdcjs: null,
          gsjsr: null,
          gsjs: null,
          gsshr: null,
          gsshrq: null,
          sfyzf: 'Y',
          sfzcjz: 'Y',
          householdStatus: '1',
          totalArea: null,
          qqArea: null,
          qtArea: null,
          dks: null,
          zzjyArea: null,
          lzcArea: null,
          shArea: null,
          zzArea: null,
        },
        // 承包方类型(标签名)
        cbflxText: '农户',
        // 承包方证件类型(标签名)
        cbfzjlxText: '居民身份证',
        householdStatusText: "正常",
        // 承包方类型字典
        contractorTypeOptions: [],
        // 承包方证件类型字典
        credentialTypeOptions: [],
        // 整户状态类型字典
        householdStatusOptions: [],
        minDate: new Date(1978, 0, 1),
        maxDate: new Date(2100, 11, 31),
      };
    },
    created() {
      this.getDicts("cbf_type").then(response => {
        this.contractorTypeOptions = response.data;
      });
      this.getDicts("cert_type").then(response => {
        this.credentialTypeOptions = response.data;
      });
      this.getDicts("household_status").then(response => {
        this.householdStatusOptions = response.data;
      });
    },
    methods: {
      onConfirmTypeOptions(value){
        this.form.cbflx = value.dictValue;
        this.cbflxText = value.dictLabel;
        this.showType = false;
      },
      onConfirmZjTypeOptions(value){
        this.form.cbfzjlx = value.dictValue;
        this.cbfzjlxText = value.dictLabel;
        this.showZjType = false;
      },
      onConfirmHouseholdStatusOptions(value){
        this.form.householdStatus = value.dictValue;
        this.householdStatusText = value.dictLabel;
        this.showZhzt = false;
      },
      onConfirmDcrq(data) {
        this.form.cbfdcrq = this.format(data, 'yyyy-MM-dd');
        this.showDcrq = false;
      },
      onConfirmGsshrq(data) {
        this.form.gsshrq = this.format(data, 'yyyy-MM-dd');
        this.showGsshrq = false;
      },
      submitForm() {
        this.$refs.formData.validate().then(() => {
          this.form.deptId = this.$route.params.deptId;
          // this.form.cbfcysl = 1;
          addCbf(this.form).then(response => {
            if (response.code == 200) {
              this.$toast({
                icon: 'success',
                message: '保存成功',
                duration:"1000",
                onClose: function() {
                  history.back(-1);
                }
              })
            }
          });
        }).catch(() => {
          this.$notify({ type: 'danger', message: '请填写完整的表单项' });
        });
      },
      /* generateCode() {
        generateContractorCode({deptId: this.$route.params.deptId}).then(response => {
          this.$set(this.form, 'cbfbm', response.data);
        });
      }, */
    },
  };
</script>
<style scoped lang="scss">

  .app-container{
    background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100vh;
    padding: 0 4vw;
    overflow: hidden;
  }
  /deep/ .van-field__label {
    -webkit-box-flex: 0;
    flex: none;
    box-sizing: border-box;
    width: 9em;
    margin-right: 0.32rem;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
  }
  /deep/ .van-nav-bar{
    background: transparent;
  }

  /deep/ .van-nav-bar .van-icon{
    color: #000000;
  }

  /deep/ .van-hairline--bottom::after{
    border: none;
  }

  /deep/ .van-search__content{
    background: rgba(255,255,255,.5);
  }
  /deep/ .van-search{
    padding: 0;
    flex: 1;
  }

  /deep/ .van-ellipsis{
    overflow: initial;
  }

  .tb_main{
    position: relative;
    p{
      position: absolute;
      display: inline-block;
      margin-left: 10PX;
    }
  }

  /* .tb{
    font-size: 12px;
    color: #ff8900;
    background: #daf6e7;
    border: 1px solid #d7be6e;
    padding: 2PX 8PX;
    border-radius: 50PX;
    margin-right: 5PX;
  } */

  .tap_block{
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #ebfaf2;
    padding: 2PX 4PX;
    border-radius: 10PX;
    margin-top: 1vh;
    .active{
      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
      box-shadow: 0 0 10PX #cccccc;
      color: #333333;
    }
    p{
      width: 25%;
      text-align: center;
      padding: 5PX 0;
      border-radius: 10PX;
      color: #666666;
    }
  }

  .search_main{
    display: flex;
    margin-top: 2vh;
    .search_btn{
      background: rgba(255,255,255,.5);
      width: 25%;
      border-radius: 50PX;
      margin-left: 10PX;
      padding: 2PX;
      .active{
        background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
        color: #333333;
        border-radius: 50PX;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }
  }

  .second_tap{
    display: flex;
    align-items: center;
    margin-top: 1vh;
    p{
      background: #dbf1ea;
      border: 1px solid #cdcdcd;
      color: #5f5f5f;
      padding: 5PX 15PX;
      margin-right: 3vw;
      border-radius: 50PX;
    }
    .active{
      background: #99eecb;
      border-color: #48e5a2;
      color: #333333;
    }
  }

  .list_main{
    margin-top: 2vh;
    overflow-y: scroll;
    text-align: center;
    background: #ffffff;
    border-top-left-radius: 10PX;
    border-top-right-radius: 10PX;
    height: 88vh;
    .btn{
      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
      box-shadow: 0 0 10PX #cccccc;
      padding: 10PX 0PX;
      border-radius: 50PX;
      display: inline-block;
      width: 40%;
      margin-top: 2vh;
    }
  }

</style>