agricultural-products-traceability-app/sunPages/jobCustom/jobCustom.vue

<template>
  <view class="v-pages">
    <view class="v-form v-container">
      <uni-forms ref="formRef" :label-width="80" :modelValue="formData" :rules="formRules">
        <view class="v-form-item">
          <uni-forms-item customClass="custom-content" label="所属行业" name="sector" required>
            <uni-data-picker v-model="formData.sector" :localdata="sectorList" class="m-data-pick"
                             popupTitle=" "></uni-data-picker>
          </uni-forms-item>
          <uni-forms-item customClass="custom-content" label="农事名称" name="husbandryName" required>
            <uni-easyinput v-model="formData.husbandryName" class="uni-mt-5 m-padding-rigt"
                           placeholder="请输入农事名称"></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="是否使用农资" label-width="120px" name="agriculturalUsed" required>
            <uni-easyinput v-model="formData.agriculturalUsed" class="uni-mt-5 not-show"></uni-easyinput>
            <switch :checked="formData.agriculturalUsed=='1'?true:false" @change="switch1Change"/>
          </uni-forms-item>
          <uni-forms-item label="农事状态" name="husbandryStatus" required>
            <uni-easyinput v-model="formData.husbandryStatus" class="uni-mt-5 not-show"></uni-easyinput>
            <switch :checked="formData.husbandryStatus=='1'?true:false" @change="switch2Change"/>
          </uni-forms-item>
        </view>
      </uni-forms>
      <view class="fixed fixedBottom v-container">
        <button class="m-t-large v-primary-btn large" @click="submitForm()">保存</button>
      </view>
    </view>
  </view>
</template>

<script>
import {getDictDatas, DICT_TYPE} from '@/utils/dict';
import {createHusbandry} from "@/api/system/addNoteJob/addNoteJob";

export default {
  data() {
    return {
      sectorList: [],
      isChecked: '1',
      formData: {
        id: undefined,
        sector: undefined,
        husbandryName: undefined,
        husbandryStatus: '1',
        agriculturalUsed: '1'
      },
      formRules: {
        sector: {
          rules: [
            {
              required: true,
              errorMessage: '请选择所属行业'
            }
          ]
        }, husbandryName: {
          rules: [
            {
              required: true,
              errorMessage: '请输入农事名称'
            }
          ]
        }, husbandryStatus: {
          rules: [
            {
              required: true,
              errorMessage: '请选择状态'
            }
          ]
        }, agriculturalUsed: {
          rules: [
            {
              required: true,
              errorMessage: '请选择是否使用农资'
            }
          ]
        },
      },
    };
  },
  onShow() {
    //认证类型 数据字典查询
    let arr = this.getDictDatas(DICT_TYPE.PRODUCTS_INDUSTRY);
    arr.forEach((item) => {
      item.text = item.label;
    });
    this.sectorList = arr;
  },
  onReady() {
    this.$refs.formRef.setRules(this.formRules);
  },
  onUnload() {
    uni.redirectTo({
      url: '/sunPages/addNoteJob/addNoteJob'
    })
  },
  methods: {
    reset() {
      this.formData = {
        id: undefined,
        sector: undefined,
        husbandryName: undefined,
        husbandryStatus: '1',
        agriculturalUsed: '1'
      }
    },
    switch1Change: function (e) {
      console.log('switch1 发生 change 事件，携带值为', e.detail.value)
      if (e.detail.value == true) {
        this.formData.agriculturalUsed = '1';
      } else {
        this.formData.agriculturalUsed = '2';
      }
      console.log(this.formData);
    },
    switch2Change: function (e) {
      console.log('switch2 发生 change 事件，携带值为', e.detail.value)
      if (e.detail.value == true) {
        this.formData.husbandryStatus = '1';
      } else {
        this.formData.husbandryStatus = '2';
      }
      console.log(this.formData);

    },
    submitForm() {
      let that = this;
      this.$refs['formRef']
          .validate()
          .then((res) => {
            console.log('success', res);
            createHusbandry(res)
                .then((res) => {
                  uni.showToast({
                    title: `新增成功`,
                    duration: 1500,
                    success() {
                      uni.setStorageSync( 'canRefresh', 'true');
                      that.reset();
                      setTimeout(function() {
                        uni.navigateBack({
                          delta: 1
                        })
                      }, 2000);
                    }
                  });
                })
                .catch((err) => {
                  console.log(err);
                });
          })
          .catch((err) => {
            console.log('err', err);
          });
    }
  }
}
</script>

<style lang="scss" scoped>
.not-show {
  display: none;
}
.v-form {
	/deep/ .uni-forms-item__content {
		padding-right: 0;
		[class*='icon-'] {
			right: 0 !important;
		}
	}
}
/deep/ .m-data-pick .selected-area {
	padding-right: 35rpx;
}
/deep/ .m-data-pick .placeholder {
	padding-right: 0 !important;
}
/deep/ .custom-content .uni-forms-item__content {
	padding-right: 0;
}
/deep/ .custom-content .uni-easyinput__content-input {
	color: #666 !important;
}
/deep/ .custom-content .uni-date__x-input {
	font-size: 28rpx;
	color: #666;
}
</style>