<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>