gdy_pc_8/src/newPerformance/components/LevelSetting.vue

<template>
    <div class="all">
        <div class="flex-box main">
            <div class="flex-5 right">
                <div v-show="isActive == 2" class="flex-center-center">
                    <el-form ref="detailForm" @submit.native.prevent label-width="150px">
                        <div class="title">绩效等级配置</div>
                        <div style="height: 30px;"></div>
                        <ClassSet ref="ClassSet" :inputs="inputs" :inputsStyle="{ paddingLeft: '150px', width: '700px' }" style="margin: 0 auto;">
                        </ClassSet>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="footer"><el-button type="primary" :loading="loading" @click="save()">保存设置</el-button></div>
    </div>
</template>


<script>
import ClassSet from '@/performance/components/public/ClassSet';
export default {
    components: { ClassSet },
    name: 'BasicsSet',
    data() {
        return {
            loading: false,
            isActive: 2,
            rules: {},
            inputs: [],//分值区间
            level_enable: true,//是否开启绩效等级
            isSave: true
        };
    },
    watch: {},
    created() {
        this.getAllSet();
    },
    mounted() { },
    methods: {
        // 获取全局设置
        getAllSet() {
            this.$axiosUser('get', 'api/pro/per/user/base_config').then(res => {
                let data = res.data.data;
                let levels = data.level_scope.levels;
                this.level_enable = data.level_enable;
                var inputs = [];
                var max = 0;//最大值
                if (levels) {
                    levels.forEach((item, index) => {
                        var obj;
                        if (index == 0) {
                            obj = { name: item.name, max: Number(item.value), min: 0 };
                        } else {
                            obj = { name: item.name, max: Number(item.value), min: max };//当不是第一个等级时，最小值为上一个的最大值
                        }
                        max = item.value;
                        inputs.push(obj);
                    })
                    this.inputs = inputs
                }
            })
        },
        //保存
        save() {
            let is = true, level_scope = [];
            let isSave = this.$refs.ClassSet.isSave
            let inputsList = this.$refs.ClassSet.inputsList
            if (!isSave) {
                return false
            }
            inputsList.some(item => {
                if (!item.name) {
                    this.$message.error('等级的名称不能为空');
                    is = false;
                    return true;
                }
                if (item.max == 0) {
                    this.$message.error('最大值不能为空或者0');
                    is = false;
                    return true;
                }
                level_scope.push({ name: item.name, value: Number(item.max) });
            })

            var level_scopes = {//参数的数据结构
                levels: level_scope
            };
            if (is) {
                this.loading = true;
                this.$axiosUser('post', 'api/pro/per/user/set_base_config', { level_scope: JSON.stringify(level_scopes) }).then(res => {
                    this.$message.success('设置成功');
                    this.getAllSet();
                }).finally(() => {
                    this.loading = false;
                })
            }
        },
        // 监听最大值输入
        InputBiur(e, index) {
            this.isSave = true
            var max = this.inputsList[index].max;
            var min = this.inputsList[index].min;
            if (max == 0) {
                return false;
            }
            if (min >= max) {
                this.$message.error('不能小于或等于' + min);
                this.$set(this.inputsList[index], 'max', 0);
                this.isSave = false
                return false;
            }
            if (this.inputsList[index + 1]) {
                this.$set(this.inputsList[index + 1], 'min', max);
            }
        },

        addInput() {
            if (this.inputsList.length == 10) {
                this.$message.error('最高10个级别');
                return false;
            }
            var max = this.inputsList[this.inputsList.length - 1].max;
            this.inputsList.push({ name: '', min: max, max: 0 });
        },

        deleteInput(index) {
            if (index == 0) {
                this.$message.error('至少保留一个等级');
                return false;
            }
            var min = this.inputsList[index].min; //获取当前元素最小值
            this.inputsList.splice(index, 1);
            if (index != this.inputsList.length) {
                //当删除不是最后一位时
                this.$set(this.inputsList[index], 'min', min);
            }
            // // this.inputsList.some((item, i) => {
            // //   if (i == index) {
            //     this.inputsList.splice(i, 1); //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
            // //     return true;
            // //   }
            // // });
        },
        active(index) {
            this.isActive = index;
        }
    }
};
</script>
<style scoped="scoped">
.all {
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
}

.title {
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
    background-color: #f5f7fa;
    padding: 15px;
    box-sizing: border-box;
}

.main {
    min-height: calc(100% - 40px);
}

.title-f {
    margin-bottom: 20px;
}

.footer {
    background-color: #fff;
    border-top: 1px solid #ebebeb;
    height: 40px;
    text-align: center;
    padding-top: 10px;
}

.checkChild {
    background-color: #fbfdff;
    margin-left: 20px;
}

.left,
.right {
    height: 100%;
    overflow: auto;
}

.ul {
    border: 1px solid #ebebeb;
    height: 100%;
    border-bottom: none;
}

.li {
    padding: 15px;
    position: relative;
}

.li:hover {
    background-color: #f5f7fa;
}

.active-li {
    color: #409EFF !important;
    background-color: #f5f7fa;
}

.active-li::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 100%;
    background-color: #409EFF;
    left: 0;
    top: 0;
}
</style>