Element弹框+表单实现自定义把总任务拆分若干子任务

2019-11-26

在写项目时有一个需求是要对表格中的数据根据状态不同可进行不同的操作，有一种状态就是需要把该行的数据作为一个总任务，通过点击拆分按钮打开弹框的形式来进行自定义拆分成若干个子任务，并且在拆分后可以对每一个子任务进行重新自定义分配份数，同事底部需要显示任务的总份数，以及分配完后还剩余的份数。大概的效果就是这样，样式没去改，请忽略。。。
step
这里面遇到了一个问题，就是当子任务设置的份数大于剩余份数时，子任务还是设置成功了，剩余份数此时就变成负的了。这显然不是我想要的效果。我需要当给子任务设置份数的时候，一旦设置份数大于剩余份数时，就把剩余的份数全部加给当前设置的子任务，而剩余份数为0。因为我在watch里对整个表单的数据进行了监听，所以就要考虑一个先后的问题，当子任务设置的份数大于剩余份数时，我需要在剩余份数变成负数之前，把剩余份数全部给到当前设置的子任务。想起来Vue中的input事件，测试过input事件会在watch之前触发。测试结果如下：
test
于是乎，不妨在input事件中先拿到当前设置的子任务的索引，然后在watch中通过判断剩余份数是否小于0，一旦触发小于0这个条件，便把当前设置的子任务份数强行赋值成总分数减去已分配的份数，这样一来，当前设置的子任务份数没有越界，也拿到了有效最大份数，而剩余份数刚好为0，同样没有越界。ok，说到现在，把代码大概上一下。
HTML

<template>
  <el-dialog
    :visible.sync="showDialog"
    title="拆分任务"
    class="split"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="$emit('closeSplit', splitForm)"
  >
    <el-form :model="splitForm" ref="splitForm">
      <el-form-item prop="part" label="将文件拆分为：">
        <el-input v-model="splitForm.part"></el-input>
        <el-button type="primary" @click="handleSplit">均分</el-button>
      </el-form-item>
      <div class="children_task">
        <el-form-item
          v-for="(item, index) in splitForm.childrenTask"
          :label="taskIfo.taskName + '任务' +  (index + 1)"
          :key="index"
        >
        设置条数
        <el-input v-model="splitForm.childrenTask[index].value" @input="handleInput($event, index)"></el-input>
        </el-form-item>
      </div>
      <el-form-item>
        总计{{taskIfo.number}}条，剩余<span :style="{color:(splitForm.remainNumber !== 0 ? '#ff0000' : '#606266')}">{{splitForm.remainNumber}}条</span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog_footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      showDialog: this.splitDialog,
      splitForm: {
        part: '', // 份数
        childrenTask: [],
        remainNumber: '',
        curIndex: 0 // 当前设置条数行索引
      },
    }
  },
  props: ['splitDialog', 'taskIfo'],
  watch: {
    splitDialog (bool) {
      this.showDialog = bool
      if (bool) {
        this.splitForm.remainNumber = this.taskIfo.number
      }
    },
    splitForm: {
      handler (val) {
        let assignNumber = 0
        let remainNumber = 0
        if (val.childrenTask.length === 0) {
          val.remainNumber = this.taskIfo.number
        } else {
          val.childrenTask.forEach(item => {
            assignNumber += parseInt(item.value)
          })
          val.remainNumber = (isNaN(this.taskIfo.number - assignNumber)) ? 0 : this.taskIfo.number - assignNumber
        }
        if (val.remainNumber < 0) {
          for (let i = 0; i < this.splitForm.childrenTask.length; i++) {
            if (i !== this.curIndex) {
              remainNumber += this.splitForm.childrenTask[i].value
            }
          }
          this.splitForm.childrenTask[this.curIndex].value = this.taskIfo.number - remainNumber
        }
        val.part = val.part.length === 1 ? val.part.replace(/[^1-9]/g, '') : val.part.replace(/\D+/, '')
      },
      deep: true
    }
  },
  methods: {
    handleInput (value, index) {
      let val = this.splitForm.childrenTask[index].value
      this.splitForm.childrenTask[index].value = Number(val.length === 1 ? val.replace(/[^1-9]/g, '') : val.replace(/\D+/, ''))
      this.curIndex = index
    },
    // 均分
    handleSplit () {
      this.splitForm.childrenTask = []
      let part = this.splitForm.part
      let total = this.taskIfo.number
      let partNumber = Math.floor(total / part)
      for (let i = 0; i < part; i++) {
        this.splitForm.childrenTask.splice(0, 0, {value: partNumber})
      }
    },
    handleCancel () {
      this.$refs['splitForm'].resetFields()
      this.splitForm.childrenTask = []
      this.$emit('closeSplit', this.splitForm)
    },
    handleSubmit () {
      this.$refs['splitForm'].validate((valid) => {
        if (valid) {
          if (this.splitForm.remainNumber === 0) {
            this.$emit('confirmSplit', this.splitForm)
          } else {
            this.showDialog = false
            setTimeout(() => {
              this.$confirm('任务件数未完全设置，请重新设置件数再拆分。', '拆分', {
                showCancelButton: false,
                ConfirmButtonText: '知道了'
              })
            }, 500)
          }
          this.$refs['splitForm'].resetFields()
          this.splitForm.childrenTask = []
        }
      })
    }
  }
}
</script>

这里只是一个子组件，一些参数要从表格的那个父组件拿过来。这里需要利用正则做一个限定，输入第一位时只能输入1-9的数字，第一位以后可以输入0-9的数字，因为用replace时需要字符串的变量，但同时因为后面要进行求和与做差，在限定的外面再强制转换成number类型的，以防当某一个子任务的份数为0时，剩余份数显示NaN。

文笔不是很好，加上上班抽空写的，有点乱，见谅~

一个正在成长的前端小白~