在表格中获取数据

farmer.add.vue

<template>
  <!-- <el-dialog
    :title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  > -->
  <div class="fullS">
    <!-- @keyup.enter.native="dataFormSubmit()" -->
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="150px"
      style="margin-top: 20px"
    >
      <div>
        <el-button
          type="white"
          @click="
            $router.push({
              name: 'pesticide-farmers',
            })
          "
          >返回</el-button
        >

        <!-- <el-button
          type="white"
          @click="$router.push('/modules/pesticide/farmers')"
          >返回</el-button
        > -->
        <!-- <el-button
          v-if="!disabled"
          type="primary"
          @click="
            dataFormSubmit()
            $router.back(-1)
          "
          >保存并返回</el-button
        > -->
        <el-button v-if="!disabled" type="primary" @click="dataFormSubmit()"
          >保存</el-button
        >
      </div>
      <div>
        <h2 style="margin-left: 45%">农户家庭基本情况</h2>
        <el-row>
          <el-col :span="7">
            <el-form-item label="户主编号" prop="farmerNo">
              <el-input
                v-model="dataForm.farmerNo"
                onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                :disabled="disabled"
                :maxlength="15"
                placeholder="户主编号"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="5"
            ><el-form-item
              label="农户类型"
              prop="farmerType"
              :rules="[
                { required: true, message: '请选择农户类型', trigger: 'blur' },
              ]"
            >
              <el-dict
                code="FARMER_TYPE"
                v-model="dataForm.farmerType"
                :disabled="disabled"
              ></el-dict>
              <!-- <el-input v-model="dataForm.farmerType" :disabled="disabled" placeholder="农户类型"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="户主名称"
              prop="farmerName"
              :rules="[
                { required: true, message: '请输入户主名称', trigger: 'blur' },
              ]"
            >
              <el-input
                v-model="dataForm.farmerName"
                :disabled="disabled"
                :maxlength="10"
                @keyup.native="
                  dataForm.farmerName = dataForm.farmerName.replace(
                    /[^\u4E00-\u9FA5]/g,
                    ''
                  )
                "
                placeholder="户主名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label="性别"
              prop="farmerSex"
              :rules="[
                { required: true, message: '请选择性别', trigger: 'blur' },
              ]"
            >
              <!-- <el-input
              v-model="dataForm.farmerSex"
              :disabled="disabled"
              placeholder="户主性别"
            ></el-input> -->
              <el-dict
                code="SEX"
                v-model="dataForm.farmerSex"
                :disabled="disabled"
              ></el-dict>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item
              label="年份"
              prop="year"
              :rules="[
                { required: true, message: '请选择年份', trigger: 'blur' },
              ]"
            >
              <el-date-picker
                type="year"
                placeholder="选择年份"
                v-model="dataForm.year"
                style="width: 100%"
                format="yyyy"
                value-format="yyyy"
                :disabled="disabled"
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item
              label="家庭人口"
              prop="farmerMember"
              :rules="[
                { required: true, message: '请输入联系地址', trigger: 'blur' },
              ]"
            >
              <!-- <el-input
              v-model="dataForm.farmerMember"
              :disabled="disabled"
              :maxlength="5"
              placeholder="家庭人口"
            ></el-input> -->
              <el-input-number
                :disabled="disabled"
                v-model="dataForm.farmerMember"
                :min="0"
                :max="50"
                label="家庭人口"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="劳动力"
              prop="farmerLabour"
              :rules="[
                { required: true, message: '请输入联系地址', trigger: 'blur' },
              ]"
            >
              <!-- <el-input
              v-model="dataForm.farmerLabour"
              :disabled="disabled"
              :maxlength="5"
              placeholder="劳动力"
            ></el-input> -->
              <el-input-number
                :disabled="disabled"
                v-model="dataForm.farmerLabour"
                :min="0"
                :max="1000"
                label="劳动力"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="1"
            ><el-form-item
              label="年龄"
              prop="farmerAge"
              :rules="[
                { required: true, message: '请输入联系地址', trigger: 'blur' },
              ]"
            >
              <!-- <el-input
              v-model="dataForm.farmerAge"
              :disabled="disabled"
              maxlength="3"
            ></el-input> -->
              <el-input-number
                :disabled="disabled"
                v-model="dataForm.farmerAge"
                :min="1"
                :max="120"
                label="年龄"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item
              label="总耕地面积(亩)"
              prop="cultivatedArea"
              :rules="[
                { required: true, message: '请输入用户名', trigger: 'blur' },
              ]"
            >
              <!-- <el-input
              v-model="dataForm.cultivatedArea"
              :disabled="disabled"
              :maxlength="10"
              placeholder="总耕地面积(亩)"
            ></el-input> -->

              <el-input-number
                :disabled="disabled"
                v-model="dataForm.cultivatedArea"
                :min="0"
                :max="10000000"
                label="总耕地面积"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <!-- :rules="[ -->
          <!-- { required: true, message: '请输入用户名', trigger: 'blur' }, -->
          <!-- ]" -->
          <el-col :span="5">
            <el-form-item
              label="总种植面积(亩次)"
              prop="plantingArea"
              :rules="[
                { required: true, message: '请输入用户名', trigger: 'blur' },
              ]"
            >
              <!-- <el-input
              v-model="dataForm.plantingArea"
              :disabled="disabled"
              :maxlength="10"
              placeholder="总种植面积(亩次)"
            ></el-input> -->
              <el-input-number
                :disabled="disabled"
                v-model="dataForm.plantingArea"
                :min="0"
                :max="10000000"
                label="总种植面积"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="文化程度"
              prop="farmerEducation"
              :rules="[
                { required: true, message: '请选择文化程度', trigger: 'blur' },
              ]"
            >
              <el-dict
                code="EDUCATION_TYPE"
                v-model="dataForm.farmerEducation"
                :disabled="disabled"
              ></el-dict>

              <!-- <el-select
              v-model="dataForm.farmerEducation"
              placeholder="请选择文化程度"
            >
              <el-option label="小学" value="a"></el-option>
              <el-option label="初中" vaule="b"></el-option>
              <el-option label="高中" value="c"></el-option>
              <el-option label="大专" value="d"></el-option>
              <el-option label="本科" value="e"></el-option>
              <el-option label="硕士" value="f"></el-option>
              <el-option label="博士" value="g"></el-option>
            </el-select> -->
              <!-- <el-input v-model="dataForm.farmerEducation" :disabled="disabled" placeholder="文化程度"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label="家庭经济状态"
              prop="economicsState"
              :rules="[
                {
                  required: true,
                  message: '请选择家庭经济状态',
                  trigger: 'blur',
                },
              ]"
            >
              <el-dict
                code="ECONOMY_TYPE"
                v-model="dataForm.economicsState"
                :disabled="disabled"
              ></el-dict>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item
              label="联系地址"
              prop="farmerArr"
              :rules="[
                { required: true, message: '请输入联系地址', trigger: 'blur' },
              ]"
            >
              <!-- <el-input
          v-model="dataForm.farmerArr"
          :disabled="disabled"
          placeholder="联系地址"
          :maxlength="50"
        ></el-input> -->
              <el-input
                type="textarea"
                :rows="5"
                placeholder="请输入地址"
                v-model="dataForm.farmerArr"
                maxlength="150"
                style="width: 110%"
                :disabled="disabled"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4.5">
            <el-form-item label="电话" prop="farmerPhone">
              <el-input
                v-model.trim="dataForm.farmerPhone"
                maxlength="11"
                :disabled="disabled"
                placeholder="电话"
              ></el-input>
              <!-- <el-input
              v-model="dataForm.farmerPhone"
              :disabled="disabled"
              placeholder="电话"
            ></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- <table
      border="1"
      style="
        position: absolute;
        right: 50px;
        top: 20px;

        font-size: 25px;
      "
    >
      <tr>
        <th>作物种类</th>
        <th>种植面积(亩)</th>
        <th>栽培类型(直播/移栽)</th>
        <th>播种日期(年月日)</th>
        <th>施药机械</th>
        <th>防治次数(次)</th>
      </tr>
      <tr v-for="item in cropList" :key="item.value">
        <td style="text-align: center;font-size=5px;">{{ item.name }}</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </table> -->
      <div>
        <h2 style="margin-left: 45%">作物种植情况表</h2>
        <el-table
          :data="dataForm.plants"
          style="width: 95%; margin: 0 auto"
          border
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <!-- id: "",
        cropSpecies: "",
        plantingArea: "",
        cultivationType: "",
        sowingDate: "",
        applicatorMachinery: "",
        controlTimes: "",
        farmerId: " -->
          <el-table-column align="center" type="index" width="50">
          </el-table-column>
          <el-table-column
            align="center"
            prop="cropName"
            label="作物种类"
            width="200"
          >
            <template slot-scope="scope">
              <!-- CROP_TYPE -->

              <el-tag type="success">{{
                transCrop(scope.row.cropSpecies)
              }}</el-tag>
            </template>
            <!-- <el-input
              v-model="dataForm.cropName"
              :disabled="idsabled"
              placeholder="作物名"
            ></el-input> -->
          </el-table-column>

          <el-table-column
            align="center"
            prop="plantingArea"
            label="种植面积(亩)"
            width="330"
          >
            <template slot-scope="scope">
              <!-- <el-input
                v-model="scope.row.plantingArea"
                :disabled="disabled"
                placeholder=""
              ></el-input> -->
              <el-input-number
                :disabled="disabled"
                v-model.trim="scope.row.plantingArea"
                :min="0"
                :max="10000000"
                label="种植面积(亩)"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop="sowingDate"
            align="center"
            label="播种日期"
            width="250"
          >
            <template slot-scope="scope">
              <!-- <el-input
                v-model="scope.row.sowingDate"
                :disabled="disabled"
                placeholder=""
              ></el-input> -->
              <el-date-picker
                type="datetime"
                placeholder="播种日期"
                v-model.trim="scope.row.sowingDate"
                style="width: 100%"
                :disabled="disabled"
                format="MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="cultivationType"
            label="种植类型(直播/移栽)"
            width="280"
          >
            <template slot-scope="scope">
              <!-- <el-select
                v-model.trim="scope.row.cultivationType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in cultivationTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
              <el-select
                v-model="scope.row.cultivationType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column
            prop="applicatorMachinery"
            label="施药药械"
            align="center"
            width="220"
          >
            <template slot-scope="scope">
              <el-input
                v-model.trim="scope.row.applicatorMachinery"
                :disabled="disabled"
                :maxlength="20"
                placeholder=""
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="controlTimes"
            align="center"
            label="施药次数"
            width="250"
          >
            <!-- <template slot-scope="scope">
              <el-input
                v-model="scope.row.controlTimes"
                :disabled="disabled"
                placeholder=""
                :maxlength="2"
              ></el-input>
            </template> -->
            <template slot-scope="scope">
              <!-- <el-input
                v-model="scope.row.plantingArea"
                :disabled="disabled"
                placeholder=""
              ></el-input> -->
              <el-input-number
                :disabled="disabled"
                v-model.trim="scope.row.controlTimes"
                :min="0"
                :max="99"
                label="施药次数"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
  <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取消</el-button>
    <el-button v-if="!disabled" type="primary" @click="dataFormSubmit()"
      >确定</el-button
    >
  </span> -->
  <!-- </el-dialog> -->
</template>

<script>
var checkPhone = (rule, value, callback) => {
  if (value == '') {
    callback()


  }
  if (!(/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/).test(value)) {
    callback(new Error("格式不正确"))

  } else {
    callback()
  }
}
// var checkAge = (rule, value, callback) => {
//   if (value == '') {
//     callback()
//   }
//   if (!(/^[1-9]\d?$|^1[01]\d$|^120$/).test(value)) {
//     callback(new Error("年龄范围在1~120"))

//   } else {
//     callback()
//   }
// }
export default {
  data () {
    return {
      cropList: [],
      disabled: false,
      visible: true,

      dataForm: {
        id: 0,
        farmerNo: '',
        farmerType: '',
        year: '',
        farmerName: '',
        farmerSex: '',
        farmerAge: '30',
        farmerEducation: '',
        farmerMember: '',
        farmerLabour: '',
        cultivatedArea: '',
        plantingArea: '',
        economicsState: '',
        farmerArr: '',
        farmerPhone: '',
        // plants: [],
        //  dataRule: {
        // personName: [
        //     {required: true, message: '名称不能为空', trigger: ['blur', 'change']}
        //   ],
        //   buildingId: [
        //     {required: true, message: '危房名不能为空', trigger: ['blur', 'change']}
        //   ],
        //   age: [
        //     {required: true, message: '年龄名不能为空', trigger: ['blur', 'change']}
        //   ],

        //   typeId: [
        //     {required: true, message: '类型名不能为空', trigger: ['blur', 'change']}
        //   ],

        //   farmerPhone:[
        //     {required: false,validator:checkPhone, trigger: ['blur', 'change']}
        //   ]

        // }

      },
      plant:
      {
        id: "",
        cropSpecies: "",
        plantingArea: "",
        cultivationType: "",
        sowingDate: "",
        applicatorMachinery: "",
        controlTimes: "",
        farmerId: ""
      },


      dataRule: {
        farmerName: [
          { maxLength: "5", message: '名称不能为空', trigger: 'blur' },

        ],

        // farmerAge: [

        //   { required: true, message: '年龄不能为空' },
        //   // { type: 'number', message: '年龄必须为数字值' }, // 且不包括小数
        //   // { pattern: /^[1-9]\d?$|^1[01]\d$|^120$/, message: '范围在0-120', trigger: 'blur' }
        //   // { pattern: /^[1-9]*$/, message: '请输入正整数', trigger: 'blur' }, // 可以输入多位正整数
        //   { required: true, validator: checkAge, trigger: ['blur', 'change'] }
        // ],

        farmerPhone: [
          { validator: checkPhone, trigger: ['blur', 'change'] },
          { required: true, message: '电话不能为空' }
        ]

      },
      id: '',
      disable: "",
      options: [{
        value: 1,
        label: '直播'
      }, {
        value: 2,
        label: '移栽'
      }],
    }
  },
  mounted () {
    this.id = this.$route.params.id
    this.disable = this.$route.params.disable
    // this.getAllCrop()
    // this.getPlant()
    this.getDataList()

  },
  methods: {
    transCrop (data) {
      for (let i = 0; i < this.cropList.length; i++) {
        if (data == this.cropList[i].id) {
          return this.cropList[i].cropName
        }
      }


    },

    getDataList () {
      let _this = this
      this.$http({
        url: '/pesticide/crop/queryAll',
        method: 'get',

      }).then(({ data }) => {
        if (data && data.code === 0) {
          _this.getAllCrop(data.list)

        }
      })
    },



    getAllCrop (dictList) {
      // this.dataForm = {}
      this.cropList = []
      // console.log(dictList);
      this.dataForm.plants = []
      let plants = []
      for (let i = 0; i < dictList.length; i++) {
        //每一次循环都有一行数据
        // const element = array[i];
        // if (dictList[i].code == "CROP_TYPE") {
        this.cropList.push(dictList[i])

        this.plant.cropSpecies = dictList[i].id
        plants.push(JSON.parse(JSON.stringify(this.plant)))

        // }
        // console.log(this.dataForm);
        // this.dataForm.plants.push(this.plant)
      }
      let dataFormMy = JSON.parse(JSON.stringify(this.dataForm))
      dataFormMy.plants = plants
      this.dataForm = dataFormMy
      // console.log(this.cropList);
      // console.log(this.dataForm);
      this.init(this.id, this.disable)
    },

    init (id, disabled) {
      this.disabled = disabled
      this.dataForm.id = id || ''
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: `/pesticide/farmers/info/${this.dataForm.id}`,
            method: 'get'
          }).then(({ data }) => {
            if (data && data.code === 0) {
              data.farmers.year = data.farmers.year.toString()
              this.dataForm = data.farmers
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm']
        .validate((valid) => {
          if (valid) {
            // console.log(valid);
            let plants = this.dataForm.plants
            // console.log(plants, 111);
            // debugger
            for (let i = 0; i < plants.length; i++) {
              //对表格内要填的值做一个是否为空的判断
              //如果表格中的每一行的参数有任意一个不为null或者“”
              if (plants[i].applicatorMachinery != "" || !(plants[i].cultivationType == null || plants[i].cultivationType == "") || !(plants[i].sowingDate == null || plants[i].sowingDate == "") || plants[i].controlTimes != 0 || plants[i].plantingArea != 0) {
                //就判断这一行是否都有数据 如果都有数据 则放行
                if (plants[i].applicatorMachinery != "" && !(plants[i].cultivationType == null || plants[i].cultivationType == "") && !(plants[i].sowingDate == null || plants[i].sowingDate == "") && plants[i].controlTimes != 0 && plants[i].plantingArea != 0) {

                } else {
                  //如果不是 {都有} 数据,就提示用户哪一行没有数据,并终止方法的执行,目的是校验不通过 就不提交表单

                  if (plants[i].applicatorMachinery == "" || plants[i].applicatorMachinery == null) {

                    this.$notify({
                      // title: `第${i + 1}行作物种类`,
                      title: `第${i + 1}行的施药药械未填`,
                      message: `<strong style='color:red'>${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的施药药械未填</strong>`,
                      type: 'warning',
                      duration: 4500,
                      offset: 200,
                      dangerouslyUseHTMLString: true,
                    })
                    return
                  }
                  if (plants[i].plantingArea == 0 || plants[i].plantingArea == "" || plants[i].plantingArea == null) {

                    this.$notify({
                      // title: `第${i + 1}行作物种类`,
                      title: `第${i + 1}行的种植面积未填`,
                      message: `<strong style='color:red'>${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的种植面积未填</strong>`,
                      type: 'warning',
                      duration: 4500,
                      offset: 200,
                      dangerouslyUseHTMLString: true,
                    })
                    return
                  }
                  if (plants[i].cultivationType == "" || plants[i].cultivationType == null) {

                    this.$notify({

                      title: `第${i + 1}行的播种类型未填`,
                      message: `<strong style='color:red'>${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的播种类型未填</strong>`,
                      type: 'warning',
                      duration: 4500,
                      offset: 200,
                      dangerouslyUseHTMLString: true,

                    })
                    return
                  }
                  if (plants[i].sowingDate == "" || plants[i].sowingDate == null) {

                    this.$notify({

                      title: `第${i + 1}行的播种日期未填`,
                      message: `<strong style='color:red'>${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的播种日期未填</strong>`,
                      type: 'warning',
                      duration: 4500,
                      offset: 200,
                      dangerouslyUseHTMLString: true,

                    })
                    return
                  }
                  if (plants[i].controlTimes == 0 || plants[i].controlTimes == "" || plants[i].controlTimes == null) {

                    this.$notify({
                      // title: `第${i + 1}行作物种类`,
                      title: `${i + 1}的施药次数未填`,
                      message: `<strong style='color:red'>${this.transDict('CROP_TYPE', plants[i].cropSpecies)}的施药次数未填</strong>`,
                      type: 'warning',
                      duration: 4500,
                      offset: 200,
                      dangerouslyUseHTMLString: true,
                    })
                    return

                  }

                }

              }

              // if (plants[i].controlTimes != 0 || plants[i].plantingArea != 0) {

              //   if ((plants[i].controlTimes != 0 && plants[i].plantingArea == 0) || (plants[i].controlTimes == 0 && plants[i].plantingArea != 0)) {
              //     this.$notify({
              //       title: `第${i + 1}行`,
              //       message: '施药次数和种植面积不能为0 !',
              //       type: 'warning'
              //     })
              //     return
              //   }

              //   if (plants[i].applicatorMachinery == "" || plants[i].cultivationType == null || plants[i].sowingDate == null) {
              //     this.$notify({
              //       title: `第${i + 1}行`,
              //       message: '请填写数据',
              //       type: 'warning'
              //     })
              //     return
              //   }
              // }

            }
            //对耕地面积里的值做判断
            if (this.dataForm.cultivatedArea <= 0) {
              //不行
              this.$notify.info({
                title: '提示',
                message: '总耕地面积(亩)不能为0',
                type: 'success'
              });
              return
            }
            //对种植面积里的值做判断
            if (this.dataForm.plantingArea <= 0) {
              this.$notify.info({
                title: '提示',
                message: '总种植面积(亩次)不能为0',
                type: 'success'
              });
              return
            }
            this.$http({
              url: `/pesticide/farmers/${!this.dataForm.id ? 'save' : 'update'}`,
              method: 'post',
              data: this.dataForm
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500
                })
                // this.visible = false
                // this.$emit('refreshDataList')
                // this.$router.back(-1)
                this.$router.push({
                  name: 'pesticide-farmers'
                })
              }
            })
          }
        })
    }
  }
}
</script>
<style scoped>
.fullS {
  /* background-color: azure; */
  /* background: black; */
  /* width: 100%; */
  /* height: auto; */
}
</style>

上一篇:在archlinux上使用蓝牙耳机


下一篇:设计模式——享元