<template>
  <div class="app-container">
    <div class="filter-containers">
      <el-card style="margin-bottom: -15px">
        <el-form ref="form" :inline="true">
          <el-row :gutter="20">
            <el-col :span="18">
              <el-form-item label="选择生产计划年份：" >
                <el-date-picker
                  ref="produceDate"
                  v-model="year"
                  value-format="yyyy"
                  type="year"
                  placeholder="选择年份："
                  @change="chooseYear()"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <template style = "text-align:left;margin-top:-43px;">
                <el-button type="primary" icon="el-icon-back" size="medium" @click="returnPage()">返回</el-button>
              </template>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-form style="text-align:center;margin-top:20px;">
        <el-table
          :data="pplPlan"
          :header-cell-style="{'text-align':'center'}"
          height="100%"
          border
          style="width: 100%;text-align:center;">
          <el-table-column label="月份" width="180" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.mon }}</span>
            </template>
          </el-table-column>
          <el-table-column label="月度生产数量" width="180">
            <template slot-scope="scope">
              <el-input :ref="pplNum[scope.$index]" :min="1" v-model="pplPlan[scope.$index].planNum" clearable onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" type="number" @input="numChange(pplPlan[scope.$index].planNum, scope.$index)"/>
            </template>
          </el-table-column>
          <el-table-column label="生产日期" width="260" align="center">
            <template slot-scope="scope">
              <el-date-picker
                v-model="pplPlan[scope.$index].planDate"
                :picker-options="pickerOptions"
                :default-value="getDate(scope.row.mon)"
                :disabled="isYear || isDate[scope.$index]"
                :editable="false"
                value-format="yyyy-MM-dd"
                align="right"
                type="date"
                clearable
                placeholder="选择日期"
                @focus="needYear(scope.$index)"/>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item>
          <el-button type="primary" @click="saveData()">保存</el-button>
          <el-button type="primary" @click="returnPage()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addPPLProPlanMonth } from '@/api/pplProductionPlan'
import Vue from 'vue'
export default {
  data() {
    return {
      year: '', // 年份   return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )
      isYear: false,
      customerno: '',
      pplId: '',
      equipId: '',
      pplNum: ['p4', 'p5', 'p6', 'p7', 'p8', 'p9', 'p10', 'p11', 'p12', 'p1', 'p2', 'p3'],
      isDate: [false, false, false, false, false, false, false, false, false, false, false, false],
      month: '',
      pplPlanData: {
        pplid: '',
        fiscalyear: '',
        m04: '',
        produceDateM04: '',
        m05: '',
        produceDateM05: '',
        m06: '',
        produceDateM06: '',
        m07: '',
        produceDateM07: '',
        m08: '',
        produceDateM08: '',
        m09: '',
        produceDateM09: '',
        m10: '',
        produceDateM10: '',
        m11: '',
        produceDateM11: '',
        m12: '',
        produceDateM12: '',
        m01: '',
        produceDateM01: '',
        m02: '',
        produceDateM02: '',
        m03: '',
        produceDateM03: '',
        createUser: '',
        updateUser: ''
      },
      pickerOptions: {
        disabledDate(time) {
        }
      },
      pplPlan: [{
        mon: '4',
        planNum: '',
        planDate: ''
      },
      {
        mon: '5',
        planNum: '',
        planDate: ''
      },
      {
        mon: '6',
        planNum: '',
        planDate: ''
      },
      {
        mon: '7',
        planNum: '',
        planDate: ''
      },
      {
        mon: '8',
        planNum: '',
        planDate: ''
      },
      {
        mon: '9',
        planNum: '',
        planDate: ''
      },
      {
        mon: '10',
        planNum: '',
        planDate: ''
      },
      {
        mon: '11',
        planNum: '',
        planDate: ''
      },
      {
        mon: '12',
        planNum: '',
        planDate: ''
      },
      {
        mon: '1',
        planNum: '',
        planDate: ''
      },
      {
        mon: '2',
        planNum: '',
        planDate: ''
      },
      {
        mon: '3',
        planNum: '',
        planDate: ''
      }
      ]
    }
  },
  computed: {
    getStatus() {
      return function(num) {
        let temp = 0
        if (num !== '') {
          temp = parseInt(num)
        }
        return temp
      }
    },
    // 根据月份，设置默认的日期值
    getDate() {
      return function(mon) {
        let date = ''
        mon = parseInt(mon)
        if (mon < 10 && mon > 3) {
          mon = '0' + mon
          date = this.year + '-' + mon + '-01'
        } else if (mon <= 3) {
          mon = '0' + mon
          var y = parseInt(this.year) + 1
          date = date = y + '-' + mon + '-01'
        } else if (mon >= 10) {
          date = this.year + '-' + mon + '-01'
        }
        return date
      }
    },
    emptyDate() {
      return function(date, num, mon) {
        let flag = true
        if (num > 0) {
          if (date === '' || date === null) {
            flag = false
            this.$message({
              message: '请选择' + mon + '月的生产日期',
              type: 'warning'
            })
          }
        } else if (num === 0) {
          if (date !== '') {
            flag = false
            this.$message({
              message: mon + '月的生产数量不能为空',
              type: 'warning'
            })
          }
        }
        return flag
      }
    }
  },
  created() {
    this.equipId = this.$route.query.equipId
    this.customerno = this.$route.query.customerno
    this.pplId = this.$route.query.pplId
  },
  methods: {
    numChange(value, index) {
      var that = this
      if (value !== '') {
        setTimeout(() => {
          Vue.set(that.isDate, index, false)
        }, 10)
      }
    },
    // 选择年份
    chooseYear() {
      this.isYear = false
    },
    // 检测是否选择年份
    needYear(index) {
      if (this.year === '' || this.year === null) {
        this.isYear = true
        this.$message({
          message: '请先选择年份',
          type: 'warning'
        })
        setTimeout(() => {
          this.$refs['produceDate'].focus()
        }, 500)
      } else if (this.pplPlan[index].planNum === '') {
        Vue.set(this.isDate, index, true)
        this.$message({
          message: '请先输入月度生产数量',
          type: 'warning'
        })
        var temp = this.pplNum[index]
        setTimeout(() => {
          console.log(temp)
          this.$refs[`${temp}`].focus()
        }, 50)
      }
    },
  }
}
</script>
<style scoped>

</style>

完整代码就是这样的。

先选择年份，然后如果月度生产数量不选择，直接选择生产日期，就把焦点定位到月度生产数量，而如果，在焦点定位到生产数量上，我们鼠标不点击到月度生产数量哪里，直接输入，输入完成之后，再选择生产日期，是无法选择的。所以想问下这个问题。是vue2.x+element-ui。