rongxin.dashboard/src/views/app/project/operate_edit.vue

<template>
    <div class="home_wrapper">
    <van-nav-bar
      title="经营信息维护"
      left-arrow
      placeholder
      safe-area-inset-top
      @click-left="onClickLeft"
    />

      <van-form @submit="onSubmit">
      <div class="main">
        <p class="title"><i></i>经营信息</p>
        <van-field readonly v-model="form.deptName" label="区域位置名称" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field readonly required :rules="[{ required: true }]" v-model="form.dkbm" label="地块编码" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field readonly :rules="[{ required: true }]" v-model="form.dkmc" label="地块名称" placeholder="请输入" input-align="right" label-width="auto" required />
        <van-field readonly v-model="form.dkdz" label="地块东至" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field readonly v-model="form.dkxz" label="地块西至" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field readonly v-model="form.dknz" label="地块南至" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field readonly v-model="form.dkbz" label="地块北至" placeholder="请输入" input-align="right" label-width="auto" />

        <van-field required :rules="[{ required: true }]" v-model="form.jymj" label="经营面积" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field required :rules="[{ required: true }]" readonly @click="showJyfsPicker = true" v-model="form.jyfsText" label="经营方式" placeholder="请输入" input-align="right" label-width="auto" />
        <van-popup v-model="showJyfsPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="dict.type.jyfs"
            value-key="label"
            @cancel="showJyfsPicker = false"
            @confirm="onConfirmJyfs"
          />
        </van-popup>

        <van-field readonly @click="showJydxlxPicker = true" v-model="form.jydxlxText" label="经营对象类型" placeholder="请输入" input-align="right" label-width="auto" />
        <van-popup v-model="showJydxlxPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="dict.type.jydxlx"
            value-key="label"
            @cancel="showJydxlxPicker = false"
            @confirm="onConfirmJydxlx"
          />
        </van-popup>

        <van-field required :rules="[{ required: true }]" v-model="form.jydxmc" label="经营对象名称" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field readonly @click="showJydxzjlxPicker = true" v-model="form.jydxzjlxText" label="经营对象证件类型" placeholder="请输入" input-align="right" label-width="auto" />
        <van-popup v-model="showJydxzjlxPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="dict.type.zjlx"
            value-key="label"
            @cancel="showJydxzjlxPicker = false"
            @confirm="onConfirmJydxzjlx"
          />
        </van-popup>

        <van-field v-model="form.jydxzjhm" label="经营对象证件号码" placeholder="请输入" input-align="right" label-width="auto" />

        <van-field readonly @click="showSfqdhtPicker = true" v-model="form.sfqdhtText" label="是否签订合同" placeholder="请输入" input-align="right" label-width="auto" />
        <van-popup v-model="showSfqdhtPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="dict.type.is_common"
            value-key="label"
            @cancel="showSfqdhtPicker = false"
            @confirm="onConfirmSfqdht"
          />
        </van-popup>

        <van-field required :rules="[{ required: true }]" readonly @click="showJykssjPicker = true" v-model="form.jykssj" label="经营开始时间" placeholder="请输入" input-align="right" label-width="auto" />
        <van-popup v-model="showJykssjPicker" round position="bottom">
          <van-datetime-picker
            v-model="jykssj"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="showJykssjPicker = false"
            @confirm="onConfirmJykssj"
          />
        </van-popup>

        <van-field required :rules="[{ required: true }]" readonly @click="showJyjssjPicker = true" v-model="form.jyjssj" label="经营结束时间" placeholder="请输入" input-align="right" label-width="auto" />
        <van-popup v-model="showJyjssjPicker" round position="bottom">
          <van-datetime-picker
            v-model="jyjssj"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="showJyjssjPicker = false"
            @confirm="onConfirmJyjssj"
          />
        </van-popup>

        <van-field required :rules="[{ required: true }]" v-model="form.cbje" label="承包金额(元)" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field v-model="form.dxje" label="兑现金额(元)" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field v-model="form.sqje" label="尚欠金额(元)" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field v-model="form.nsy" label="年收益(元)" placeholder="请输入" input-align="right" label-width="auto" />
        <van-field v-model="form.bzxx" label="备注信息" placeholder="请输入" input-align="right" label-width="auto" />

        <van-field readonly label="实物图" placeholder="" input-align="right" label-width="auto" />

        <image-upload v-model="form.dkImg"/>

        <van-field readonly required :rules="[{ required: true }]" @click="showSurveyStatusPicker = true" v-model="form.surveyStatusText" label="调查状态" placeholder="请输入" input-align="right" label-width="auto" />
        <van-popup v-model="showSurveyStatusPicker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="dict.type.survey_status"
            value-key="label"
            @cancel="showSurveyStatusPicker = false"
            @confirm="onConfirmSurveyStatus"
          />
        </van-popup>
      </div>

      <van-button round block type="primary" native-type="submit" class="subClass">提交</van-button>
      </van-form>

    </div>
</template>

<script>
  import { getLandDetail } from "@/api/resource/land"
  import { getOperationDetail, updateOperation, addOperation } from "@/api/resource/operation"
  export default {
    dicts: ['zjlx', 'survey_status', 'is_common', 'jydxlx', 'jyfs'],
    name: "appEdit",
    data() {
      return {
        showJyfsPicker: false,
        showSfqdhtPicker: false,
        showJydxlxPicker: false,
        showJydxzjlxPicker: false,
        showJykssjPicker: false,
        showJyjssjPicker: false,
        showSurveyStatusPicker: false,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        form: {

        },
        jykssj:new Date(),
        jyjssj:new Date(),
        openPic: [],
        openPic2: [],
      };
    },
    created() {
      this.getDetail()
    },
    methods: {
      onClickLeft(){
        history.back(-1);
      },
      getDetail(){
        getOperationDetail(this.$route.query.dkbm).then(response => {
          if (response.data){
            response.data.jyfsText = this.selectDictLabel(this.dict.type.jyfs,response.data.jyfs);
            response.data.jydxlxText = this.selectDictLabel(this.dict.type.jydxlx,response.data.jydxlx);
            response.data.jydxzjlxText = this.selectDictLabel(this.dict.type.zjlx,response.data.jydxzjlx);
            response.data.sfqdhtText = this.selectDictLabel(this.dict.type.is_common,response.data.sfqdht);
            response.data.surveyStatusText = this.selectDictLabel(this.dict.type.survey_status,response.data.surveyStatus);
            this.jykssj = new Date(response.data.jykssj);
            this.jyjssj = new Date(response.data.jyjssj);
            this.form = response.data
          }else{
            getLandDetail(this.$route.query.dkbm).then(response => {
              response.data.jyfsText = '家庭承包';
              response.data.jyfs = '110';
              response.data.jydxlxText = '农户';
              response.data.jydxlx = '1';
              response.data.jydxzjlxText = '居民身份证';
              response.data.jydxzjlx = '1';
              response.data.sfqdhtText = '是';
              response.data.sfqdht = '1';
              response.data.surveyStatusText = '已调查';
              response.data.surveyStatus = '2';

              this.form = response.data
            })
          }
          // getInfoByImportCode(response.data.importCode).then((res) => {
          //   this.form.deptId = res.data.deptId
          // });
        });
      },
      onConfirmJydxlx(value) {
        this.form.jydxlxText = value.label;
        this.form.jydxlx = value.value;
        this.showJydxlxPicker = false;
      },
      onConfirmJyfs(value) {
        this.form.jyfsText = value.label;
        this.form.jyfs = value.value;
        this.showJyfsPicker = false;
      },
      onConfirmJydxzjlx(value) {
        this.form.jydxzjlxText = value.label;
        this.form.jydxzjlx = value.value;
        this.showJydxzjlxPicker = false;
      },
      onConfirmSfqdht(value) {
        this.form.sfqdhtText = value.label;
        this.form.sfqdht = value.value;
        this.showSfqdhtPicker = false;
      },
      onConfirmJykssj(data) {
        this.form.jykssj = this.format(data, 'yyyy-MM-dd');
        this.showJykssjPicker = false;
      },
      onConfirmJyjssj(data) {
        this.form.jyjssj = this.format(data, 'yyyy-MM-dd');
        this.showJyjssjPicker = false;
      },
      onConfirmSurveyStatus(value) {
        this.form.surveyStatusText = value.label;
        this.form.surveyStatus = value.value;
        this.showSurveyStatusPicker = false;
      },
      /** 提交按钮 */
      onSubmit() {
        if (!this.form.id){
          addOperation(this.form).then(response => {
            this.$modal.msgSuccess("新增成功")
            setTimeout(function(){
              history.back(-1);
            },2000)
          })
        }else{
          updateOperation(this.form).then(response => {
            if (response.code == 200){
              this.$modal.msgSuccess("修改成功")
              setTimeout(function(){
                history.back(-1);
              },2000)
            }
          })
        }

      },

    },
  };
</script>

<style scoped lang="scss">
  p{margin: 0;}
  .home_wrapper{
    width: 100vw;
    min-height: 100vh;
    background: #F6F9FB;
    padding-bottom: 5vh;
  }
  .van-nav-bar{
    background: linear-gradient( 173deg, #91E2D3 0%, #CDFCF0 100%);
    ::v-deep.van-icon{
      color: #000000;
    }
  }
  .main{
    width: 94%;
    margin: 3vw auto;
    padding: 3vw;
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;

  }
  .title{
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    i{
      width: 5px;
      height: 20px;
      display: block;
      background-color: #29D2AF;
      margin-right: 10px;
    }
  }
  .subClass{
    background: linear-gradient( 270deg, #53E4A5 0%, #24DBDB 100%);
    border-radius: 50px 50px 50px 50px;
    border: none;
    width: 90%;
    margin: 3vw auto;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
  }

</style>