dy-admin-manager/src/views/categroyManager/insideSetting/gradientSet.vue

<template>
  <div class='m-container'>
    <!-- <h2>参数设置</h2> -->
    <div class="m-core">
      <!-- 列表 -->
      <el-tabs tab-position="left">
        <el-tab-pane label="声部课">
          <el-form :model="singleForm"
                   label-width="100px"
                   class="demo-dynamic">
            <el-form-item style="margin-bottom: 0;">
              <span class="min">最小值</span>
              <span class="max">最大值</span>
            </el-form-item>
            <div class="moreRule">
              <div class="moreRuleIn"
                   v-for="(domain, index) in singleForm.domains"
                   :key="domain.key">
                <el-form-item :label="'梯度' + (index + 1)">
                  <el-input type="number"
                            @mousewheel.native.prevent
                            :disabled="domain.disabled"
                            v-model.trim="domain.min"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input type="number"
                            @mousewheel.native.prevent
                            :disabled="domain.disabled"
                            v-model.trim="domain.max"></el-input>
                  <el-button v-if="index != 0 && !domain.disabled"
                             @click.prevent="removeDomain(singleForm, domain)">删除</el-button>
                </el-form-item>
              </div>
              <div class="el-form-item__error"
                   v-if="singleForm.errorText">{{ singleForm.errorText }}</div>
            </div>
            <el-form-item>
              <el-button @click="addDomain(singleForm)">新增梯度</el-button>
              <el-button @click="resetForm(singleForm)">重置</el-button>
              <el-button type="primary"
                         @click="submitForm(singleForm)">设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="合奏课">
          <el-form :model="mixForm"
                   label-width="100px"
                   class="demo-dynamic">
            <el-form-item style="margin-bottom: 0;">
              <span class="min">最小值</span>
              <span class="max">最大值</span>
            </el-form-item>
            <div class="moreRule">
              <div class="moreRuleIn"
                   v-for="(domain, index) in mixForm.domains"
                   :key="domain.key">
                <el-form-item :label="'梯度' + (index + 1)">
                  <el-input type="number"
                            @mousewheel.native.prevent
                            :disabled="domain.disabled"
                            v-model.trim="domain.min"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input type="number"
                            @mousewheel.native.prevent
                            :disabled="domain.disabled"
                            v-model.trim="domain.max"></el-input>
                  <el-button v-if="index != 0 && !domain.disabled"
                             @click.prevent="removeDomain(mixForm, domain)">删除</el-button>
                </el-form-item>
              </div>
              <div class="el-form-item__error"
                   v-if="mixForm.errorText">{{ mixForm.errorText }}</div>
            </div>
            <el-form-item>
              <el-button @click="addDomain(mixForm)">新增梯度</el-button>
              <el-button @click="resetForm(mixForm)">重置</el-button>
              <el-button type="primary"
                         @click="submitForm(mixForm)">设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="基础技能班">
          <el-form :model="highForm"
                   label-width="100px"
                   class="demo-dynamic">
            <el-form-item style="margin-bottom: 0;">
              <span class="min">最小值</span>
              <span class="max">最大值</span>
            </el-form-item>
            <div class="moreRule">
              <div class="moreRuleIn"
                   v-for="(domain, index) in highForm.domains"
                   :key="domain.key">
                <el-form-item :label="'梯度' + (index + 1)">
                  <el-input type="number"
                            @mousewheel.native.prevent
                            :disabled="domain.disabled"
                            v-model.trim="domain.min"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input type="number"
                            @mousewheel.native.prevent
                            :disabled="domain.disabled"
                            v-model.trim="domain.max"></el-input>
                  <el-button v-if="index != 0 && !domain.disabled"
                             @click.prevent="removeDomain(highForm, domain)">删除</el-button>
                </el-form-item>
              </div>
              <div class="el-form-item__error"
                   v-if="highForm.errorText">{{ highForm.errorText }}</div>
            </div>
            <el-form-item>
              <el-button @click="addDomain(highForm)">新增梯度</el-button>
              <el-button @click="resetForm(highForm)">重置</el-button>
              <el-button type="primary"
                         @click="submitForm(highForm)">设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import store from '@/store'
import { sysConfigList, sysConfigUpdate } from '@/api/generalSettings'
export default {
  components: { pagination },
  name: 'gradientSet',
  data () {
    return {
      organId: null,
      singleForm: {
        domains: [{
          min: null,
          max: null,
          disabled: false,
          key: Date.now()
        }],
        errorText: null,
      },
      mixForm: {
        domains: [{
          min: null,
          max: null,
          disabled: false,
          key: Date.now()
        }],
        errorText: null,
      },
      highForm: {
        domains: [{
          min: null,
          max: null,
          disabled: false,
          key: Date.now()
        }],
        errorText: null,
      },
    }
  },
  mounted () {
    this.__init()
  },
  methods: {
    __init () {
      sysConfigList({ group: 'settlement_rule' }).then(res => {
        if (res.code == 200 && res.data.length > 0) {
          res.data.forEach(item => {
            let domain = []
            if (item.paranValue) {
              domain = JSON.parse(item.paranValue)
            } else {
              domain = [{
                min: null,
                max: null,
                disabled: false,
                key: Date.now()
              }]
            }
            let tempArray = {
              domains: domain,
              errorText: null,
              paramName: item.paramName,
              id: item.id
            }
            if (item.paramName == 'sigle_gradient_settlement_rule') {
              this.singleForm = tempArray
            }
            if (item.paramName == "max_gradient_settlement_rule") {
              this.mixForm = tempArray
            }
            if (item.paramName == "high_gradient_settlement_rule") {
              this.highForm = tempArray
            }
          })
        }
      })
    },
    submitForm (form) {
      this.addDomain(form, true)
      if (!form.errorText) {
        let params = {
          id: form.id,
          paranValue: JSON.stringify(form.domains),
          paramName: form.paramName
        }
        sysConfigUpdate(params).then(res => {
          if (res.code == 200) {
            this.$message.success('设置成功')
          }
        })
      }
    },
    resetForm (form) {
      form.domains = [{
        min: null,
        max: null,
        disabled: false
      }]
      form.errorText = null
    },
    removeDomain (form, item) {
      var index = form.domains.indexOf(item)
      if (index !== -1) {
        form.domains.splice(index, 1)
        // 取消最后一个数据的禁用状态
        form.domains[form.domains.length - 1].disabled = false
        form.errorText = null
      }
    },
    addDomain (form, checked) {
      // debugger
      let domains = form.domains,
        singleLength = domains.length,
        lastDate = domains[singleLength - 1] // 获取倒数一个对象
      if (!lastDate.min) {
        form.errorText = '最小值不能为空'
        return
      }
      if (singleLength <= 1 && parseInt(lastDate.min) < 0) {
        form.errorText = '最小值不能小于0'
        return
      } else if (singleLength > 1 && parseInt(lastDate.min) <= parseInt(domains[singleLength - 2].max)) {
        form.errorText = '最小值不能小于或等于上一个梯度的最大值'
        return
      }

      if (!parseInt(lastDate.max)) {
        form.errorText = '最大值不能为空'
        return
      } else if (parseInt(lastDate.max) <= parseInt(lastDate.min)) {
        form.errorText = '最大值应大于该梯度的最小值'
        return
      }

      form.errorText = null
      if (!checked) {
        lastDate.disabled = true
        domains.push({
          min: null,
          max: null,
          disabled: false,
          key: Date.now()
        })
      }

    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-input-group__append {
  background: #dcdfe6;
  border-color: #dcdfe6;
  &:hover,
  &:active,
  &:focus {
    background: #dcdfe6;
    border-color: #dcdfe6;
    color: #fff;
  }
}
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover,
  &:active,
  &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #fff;
  }
}
.el-row {
  margin-top: 40px;
}
.el-col {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: flex-end;
  margin-right: 50%;
}
.min,
.max {
  display: inline-block;
  width: 180px;
  text-align: center;
  margin-right: 10px;
}
.el-input-group,
.el-input {
  width: 180px;
  margin-right: 10px;
}
.moreRule {
  position: relative;
  .el-form-item__error {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    position: absolute;
    left: 100px;
    top: 100%;
    margin-top: -21px;
  }
}
.moreRuleIn {
  .el-form-item {
    display: inline-block;
    &:last-child {
      /deep/.el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
}
</style>