ngds/backendEle/src/views/config/bonus-opt.vue

<template>
  <div v-loading="loading">
    <div class="panel" v-if="permission.hasPermission(`config/bonus`)">
      <div class="panel-heading">
        基本配置
      </div>
      <div class="panel-wrapper">
        <div class="panel-body">
          <el-form ref="form" :model="form" label-width="250px" class="form-page">
            <template v-for="item in configData">
              <div class="hr-tip" v-if="item.SORT==='101'"><span>复消相关</span></div>
              <el-form-item :label="item.TITLE" :key="item.CONFIG_NAME">
                <template v-if="item.INPUT_TYPE==='2'">
                  <el-select v-model="item.VALUE" placeholder="请选择">
                    <el-option v-for="optionItem in item.OPTIONS" :label="optionItem.label" :value="optionItem.value"
                               :key="optionItem.label"></el-option>
                  </el-select>
                </template>
                <template v-else-if="item.INPUT_TYPE==='3'">
                    <el-select v-model="item.VALUE" placeholder="请选择" multiple>
                      <el-option v-for="optionItem in item.OPTIONS" :label="optionItem.label" :value="optionItem.value"
                                 :key="optionItem.label"></el-option>
                    </el-select>
<!--                  <el-checkbox-group v-model="item.VALUE">-->
<!--                    <el-checkbox v-for="optionItem in item.OPTIONS" :label="optionItem.label" :value="optionItem.value"-->
<!--                                 :key="optionItem.label"></el-checkbox>-->
<!--                  </el-checkbox-group>-->
                </template>
                <template v-else-if="item.INPUT_TYPE==='4'">
                  <el-date-picker v-model="item.VALUE" type="year" placeholder="选择年">
                  </el-date-picker>
                </template>
                <template v-else-if="item.INPUT_TYPE==='5'">
                  <el-date-picker
                    v-model="item.VALUE"
                    type="datetime"
                    placeholder="Select date">
                  </el-date-picker>
                </template>
                <template v-else-if="item.INPUT_TYPE==='6'">
                  <el-date-picker
                    v-model="item.VALUE"
                    type="date"
                    placeholder="Select date">
                  </el-date-picker>
                </template>
                <template v-else-if="item.INPUT_TYPE==='7'">
                  <el-time-select v-model="item.VALUE"
                                  :picker-options="{start: item.OPTIONS.start, end: item.OPTIONS.end, step: item.OPTIONS.step}"
                                  placeholder="选择时间">
                  </el-time-select>
                </template>
                <template v-else-if="item.INPUT_TYPE==='8'">
                  <el-switch v-model="item.VALUE">
                  </el-switch>
                </template>
                <template v-else-if="item.INPUT_TYPE==='10'">
                  <el-table
                    :data="item.VALUE" stripe style="width: 100%;">
                    <el-table-column prop="outTitle" label="序号">
                      <template slot-scope="scope">
                        {{scope.row.sort}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="outTitle" label="销售额条件(元)">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.salesCondition" placeholder="请输入内容"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="outTitle" label="奖金金额(元)">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.awardAmount" placeholder="请输入内容"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
                <template v-else>
                  <el-input v-model="item.VALUE" placeholder="请输入内容">
                    <template v-if="!!item.UNIT" slot="append">{{item.UNIT}}</template>
                  </el-input>
                </template>
              </el-form-item>
            </template>
          </el-form>
        </div>
        <div class="panel-footer">
          <el-button type="primary" @click="onSubmit" :loading="submitButtonStat" style="float: right;">保存</el-button>
        </div>
      </div>

    </div>
    <div class="panel" v-if="permission.hasPermission(`config/bonus-dec-level`)">
      <div class="panel-heading">
        绩效奖
      </div>
      <div class="panel-wrapper">
        <div class="panel-body">
          <el-table :data="decLevelTableData" stripe style="width: 100%;">
            <el-table-column prop="LEVEL_NAME" label="级别名称"></el-table-column>
            <el-table-column label="拿奖比例">
              <template slot-scope="scope">
                <el-input v-model="scope.row.QY_PERCENT" min="0" max="100">
                  <template slot="append">%</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="个人封顶值">
              <template slot-scope="scope">
                <el-input v-model="scope.row.INCOME_CAP" min="0">
                  <template slot="append">$</template>
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="panel-footer">
          <el-button type="primary" @click="onQYSubmit" :loading="qySubmitButtonStat" style="float: right;">保存
          </el-button>
        </div>
      </div>
    </div>
    <div class="panel" v-if="permission.hasPermission(`config/bonus-dec-level`)">
      <div class="panel-heading">
        管理奖
      </div>
      <div class="panel-wrapper">
        <div class="panel-body">
          <el-table :data="decLevelTableData" stripe style="width: 100%;">
            <el-table-column prop="LEVEL_NAME" label="级别名称"></el-table-column>
            <el-table-column label="奇数代数(推广1人)">
              <template slot-scope="scope">
                <el-input v-model="scope.row.GL_ODD_DEEP_ONE" min="0" max="100">
                  <template slot="append">代</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="奇数代数(推广2人)">
              <template slot-scope="scope">
                <el-input v-model="scope.row.GL_ODD_DEEP_TWO" min="0" max="100">
                  <template slot="append">代</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="奇数代数(推广3人)">
              <template slot-scope="scope">
                <el-input v-model="scope.row.GL_ODD_DEEP_THREE" min="0" max="100">
                  <template slot="append">代</template>
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="panel-footer">
          <el-button type="primary" @click="onGLSubmit" :loading="glSubmitButtonStat" style="float: right;">保存
          </el-button>
        </div>
      </div>
    </div>
    <div class="panel" v-if="permission.hasPermission(`config/bonus-emp-level`)">
      <div class="panel-heading">
        荣衔配置
      </div>
      <div class="panel-wrapper">
        <div class="panel-body">
          <el-table :data="empLevelTableData" stripe style="width: 100%;">
            <el-table-column prop="LEVEL_NAME" label="级别名称"></el-table-column>
<!--            <el-table-column label="荣衔奖比例">-->
<!--              <template slot-scope="scope">-->
<!--                <el-input v-model="scope.row.RX_PERCENT" min="0" max="100">-->
<!--                  <template slot="append">%</template>-->
<!--                </el-input>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column label="级别分数">
              <template slot-scope="scope">
                <el-input v-model="scope.row.LEVEL_SCORE" min="0">
                  <template slot="append">分</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="升级分数">
              <template slot-scope="scope">
                <el-input v-model="scope.row.UPGRADE_SCORE" min="0">
                  <template slot="append">分</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="蓝星奖比例">
              <template slot-scope="scope">
                  <el-input v-model="scope.row.BS_PERCENT" min="0" max="100">
                      <template slot="append">%</template>
                  </el-input>
              </template>
            </el-table-column>
            <el-table-column label="旅游奖比例">
              <template slot-scope="scope">
                <el-input v-model="scope.row.TOURISM_PERCENT" min="0" max="100">
                  <template slot="append">%</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="车奖比例">
              <template slot-scope="scope">
                <el-input v-model="scope.row.GARAGE_PERCENT" min="0" max="100">
                  <template slot="append">%</template>
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="panel-footer">
          <el-button type="primary" @click="onYCSubmit" :loading="ycSubmitButtonStat" style="float: right;">保存
          </el-button>
        </div>
      </div>
    </div>

      <div class="panel" v-if="permission.hasPermission(`config/bonus-star-level`)">
          <div class="panel-heading">
              星级配置
          </div>
          <div class="panel-wrapper">
              <div class="panel-body">
                  <el-table :data="crownLevelTableData" stripe style="width: 100%;">
                      <el-table-column prop="LEVEL_NAME" label="级别名称"></el-table-column>
                      <el-table-column label="级别分数(BV)">
                          <template slot-scope="scope">
                              <el-input v-model="scope.row.LEVEL_SCORE" min="0">
                                  <template slot="append">分</template>
                              </el-input>
                          </template>
                      </el-table-column>
                      <el-table-column label="升级分数(BV)">
                          <template slot-scope="scope">
                              <el-input v-model="scope.row.UPGRADE_SCORE" min="0">
                                  <template slot="append">分</template>
                              </el-input>
                          </template>
                      </el-table-column>
                      <el-table-column label="旅游奖比例">
                          <template slot-scope="scope">
                              <el-input v-model="scope.row.TOURISM_PERCENT" min="0" max="100">
                                  <template slot="append">%</template>
                              </el-input>
                          </template>
                      </el-table-column>
                      <el-table-column label="车奖比例">
                          <template slot-scope="scope">
                              <el-input v-model="scope.row.GARAGE_PERCENT" min="0" max="100">
                                  <template slot="append">%</template>
                              </el-input>
                          </template>
                      </el-table-column>
                      <el-table-column label="房奖比例">
                          <template slot-scope="scope">
                              <el-input v-model="scope.row.VILLA_PERCENT" min="0" max="100">
                                  <template slot="append">%</template>
                              </el-input>
                          </template>
                      </el-table-column>
                  </el-table>
              </div>
              <div class="panel-footer">
                  <el-button type="primary" @click="onStarSubmit" :loading="starSubmitButtonStat" style="float: right;">保存
                  </el-button>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import network from '@/utils/network'
import permission from '@/utils/permission'

export default {
  name: 'config_bonus-opt',
  mounted () {
    network.getData('config/bonus-opt').then(response => {
      this.configData = response.config
      this.decLevelTableData = response.decLevel
      this.empLevelTableData = response.empLevel
      this.crownLevelTableData = response.crownLevel
      this.loading = false
    })
  },
  data () {
    return {
      decLevelTableData: null,
      empLevelTableData: null,
      crownLevelTableData: null,
      loading: true,
      submitButtonStat: false,
      qySubmitButtonStat: false,
      glSubmitButtonStat: false,
      ycSubmitButtonStat: false,
      starSubmitButtonStat: false,
      configData: null,
      permission: permission,
    }
  },
  computed: {
    form: function () {
      let result = {}
      for (let i in this.configData) {
        result[i] = this.configData[i].VALUE
      }
      return result
    }
  },
  methods: {
    onSubmit () {
      this.submitButtonStat = true
      network.postData('config/bonus', this.form).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        this.submitButtonStat = false
      }).catch(response => {
        this.submitButtonStat = false
      })
    },
    onQYSubmit () {
      this.qySubmitButtonStat = true
      network.postData('config/bonus-dec-level', {
        data: this.decLevelTableData
      }).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        this.qySubmitButtonStat = false
      }).catch(response => {
        this.qySubmitButtonStat = false
      })
    },
    onGLSubmit () {
        this.glSubmitButtonStat = true
        network.postData('config/bonus-dec-level', {
            data: this.decLevelTableData
        }).then(response => {
            this.$message({
                message: response,
                type: 'success'
            })
            this.glSubmitButtonStat = false
        }).catch(response => {
            this.glSubmitButtonStat = false
        })
    },
    onYCSubmit () {
      this.ycSubmitButtonStat = true
      network.postData('config/bonus-emp-level', {
        data: this.empLevelTableData
      }).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        this.ycSubmitButtonStat = false
      }).catch(response => {
        this.ycSubmitButtonStat = false
      })
    },
    onStarSubmit() {
      this.starSubmitButtonStat = true
      network.postData('config/bonus-star-level', {
          data: this.crownLevelTableData
      }).then(response => {
          this.$message({
              message: response,
              type: 'success'
          })
          this.starSubmitButtonStat = false
      }).catch(_ => {
          this.starSubmitButtonStat = false
      })
    },
  }
}
</script>

<style scoped>
  .hr-tip {
    font-size: 12px;
    position: relative;
    text-align: center;
    height: 30px;
    line-height: 30px;
    color: #999;
    margin-bottom: 20px;
  }

  .hr-tip:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    border-bottom: 1px dashed #ddd;
    height: 1px;
  }

  .hr-tip span {
    display: inline-block;
    background: #fff;
    position: relative;
    padding: 0 10px;
  }
</style>