点击实现新增一行

Posted 2021-06-22 huyadi

<template>
  <div style="height: 100%;width: 100%;text-align: left;">
    <el-form label-width="126px" :model="formData" ref="ruleForm" label-position="left">
      <el-form-item label="抖音任务及奖励">
        <div>
          <span @click="handleAddInterval" class="el-icon-circle-plus" style="color:#409EFF;margin-left:56px;cursor: pointer;" v-fastClick> 新增</span>
          <div style="width: 600px;height:160px;border: 1px solid #EEEEEE;position: relative;">
            <el-scrollbar style="height: 100%;width: 100%;">
              <div style="box-sizing: border-box;padding: 4px 8px;">
                <div v-for="(item, index) in formData.douyin.intervalValue" :key="index + 1">
                  <el-form-item :prop="\'douyin.intervalValue.\' + index + \'.minVal\'" class="grade-list-item">
                    <el-input-number
                      placeholder="输入数字"
                      v-model.trim="item.minVal"
                      size="small"
                      style="width:110px;"
                      :controls="false"
                      :min="0"
                      :max="999999999"
                      :precision="0"
                      clearable
                    ></el-input-number>
                  </el-form-item>
                  <span>至</span>
                  <el-form-item :prop="\'douyin.intervalValue.\' + index + \'.maxVal\'" :rules="douyinMaxValue" class="grade-list-item">
                    <el-input-number
                      placeholder="输入数字"
                      v-model.trim="item.maxVal"
                      size="small"
                      style="width:110px;"
                      :controls="false"
                      :min="0"
                      :max="999999999"
                      :precision="0"
                      clearable
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item :prop="\'douyin.intervalValue.\' + index + \'.bonus\'" :rules="douyinBonusValue" class="grade-list-item" style="margin-left: 20px;">
                    <el-input-number placeholder="奖励金额" v-model.trim="item.bonus" size="small" style="width:100px;" :controls="false" :min="0" :max="999999999" :precision="2"></el-input-number>
                  </el-form-item>
                  <el-form-item :prop="\'douyin.intervalValue.\' + index + \'.growth\'" :rules="douyinGrowthValue" class="grade-list-item" style="margin-left: 20px;">
                    <el-input-number placeholder="奖励成长值" v-model.trim="item.growth" size="small" style="width:100px;" :controls="false" :min="0" :max="999999999" :precision="0"></el-input-number>
                  </el-form-item>
                  <span @click="handleAddInterval" v-if="index == 0" class="el-icon-circle-plus" style="color:#409EFF;margin-left:30px;cursor: pointer;" v-fastClick></span>
                  <span @click="handleDeleteInterval(index)" v-else class="el-icon-remove" style="color:#F56C6C;margin-left:30px;cursor: pointer;"></span>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      formData: {
        douyin: {
          intervalValue: [{ minVal: undefined, maxVal: undefined, bonus: undefined, growth: undefined }] //区间值
        }
      }
    }
  },

  methods: {
    // 点击新增
    handleAddInterval() {
      //人设
      let index = this.formData.douyin.intervalValue.length - 1
      if (
        !this.formData.douyin.intervalValue[index].minVal ||
        (!this.formData.douyin.intervalValue[index].bonus && this.formData.douyin.intervalValue[index].bonus !== 0) ||
        (!this.formData.douyin.intervalValue[index].growth && this.formData.douyin.intervalValue[index].growth !== 0)
      ) {
        this.$message({
          showClose: true,
          duration: 1000,
          message: \'请先完善当前区间值\',
          type: \'warning\'
        })
      } else {
        if (this.formData.douyin.intervalValue.length < 5) {
          this.formData.douyin.intervalValue.push({ minVal: undefined, maxVal: undefined, bonus: undefined, growth: undefined })
        } else {
          this.$message({
            showClose: true,
            duration: 1000,
            message: \'当前最多新增5个区间值\',
            type: \'warning\'
          })
        }
      }
    },
    // 点击删除
    handleDeleteInterval(index) {
      if (this.taskStatus != 2) {
        this.formData.douyin.intervalValue.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scrollbar {
  overflow-x: hidden;
}
.el-dialog__body {
  padding: 32px 24px;
}
.el-dialog__header {
  display: none;
}
.el-input__icon {
  height: 32px;
}
.el-input-number .el-input__inner {
  text-align: left;
}
.el-form-item .el-form-item {
  margin-bottom: 16px;
}
.long-item .el-form-item__label {
  line-height: 20px;
  padding-right: 24px;
  box-sizing: border-box;
}
.second-form .el-form-item__label {
  line-height: 20px;
  box-sizing: border-box;
  width: 70px !important;
  margin-top: 11px;
}

.second-form .el-form-item__content {
  margin-left: 100px !important;
}

.grow-from .el-form-item__content {
  margin-left: 0px !important;
}
.grow-from .el-form-item__error {
  left: 144px;
}
.third-form .el-form-item__label {
  line-height: 40px !important;
  margin-top: 0px;
}
.directional-item .el-form-item__label {
  margin-top: 0;
}
.el-form-item__error {
  padding-top: 1px;
}
.target-form .el-form-item__label {
  line-height: 40px;
  width: 100px !important;
  margin-top: 0;
}
.grade-list-item .el-form-item__content {
  margin-left: 0px !important;
}
.el-form-item.grade-list-item {
  display: inline-block;
}

.role-form .el-form-item__label {
  box-sizing: border-box;
  width: 70px !important;
}
.role-form .el-form-item__content {
  margin-left: 100px !important;
}
.item-tips {
  display: inline-block;
  font-size: 12px;
  color: #c0c4cc;
  margin-left: 12px;
  vertical-align: middle;
}
</style>