gdy_pc_8/src/newPerformance/components/RoleSetting.vue

<template>
    <div class="all">
        <div class="alert-box bounce animated">
            <div class="alert-content flex-box-ce">
                <i class="el-icon-warning"></i>
                如需设置绩效主管理员，绩效子管理员，部门管理员，普通员工及其权限，请前往旧系统设置！
            </div>
            <div class="alert-btn" @click="goSetting()">
                <el-link type="primary">立即设置</el-link>
            </div>
        </div>
            <div class="flex-box-ce">
                <div style="height: 40px; display: flex; align-items: center;">
                    <div class="title">绩效主管理员</div>
                    <div class="text fontColorC">拥有全部权限，支持更换主管理员</div>
                </div>
            </div>
            <div style="margin: 10px 0;">
                <div class="flex-box-ce" style="margin-bottom: 10px; width: 360px;" v-for="(item, index) in userMain"
                    :key="index">
                    <userImage :user_name="item.name" :img_url="item.img_url" :id="item.id" fontSize="14"></userImage>
                    <span class="name flex-1">{{ item.name }}</span>
                </div>
            </div>
            <div class="flex-box-ce">
                <div style="height: 40px; display: flex; align-items: center;">
                    <div class="title">绩效子管理员</div>
                    <div class="text fontColorB">负责绩效考核日常的管理工作，由主管理员分配权限</div>
                </div>
            </div>
            <div class="table-box">
                <el-table :data="AdministratorList" style="width: 100%;" v-loading="loading" size="mini"
                    :header-cell-style="{ background: '#f5f7fa' }">
                    <el-table-column prop="date" label="姓名">
                        <template slot-scope="scope">
                            <div class="flex-box-ce">
                                <userImage :user_name="scope.row.name" fontSize="14" :img_url="scope.row.img_url">
                                </userImage>
                                <span class="name">{{ scope.row.name }}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="range" label="管理范围">
                        <template slot-scope="scope">
                            <span>{{ scope.row.range == '全公司' ? '全公司' : '其管辖部门及子部门的人员' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="menu" label="权限菜单">
                        <template slot-scope="scope">
                            <span>{{ filtrationStr(scope.row.menu) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="group" label="管理考核表">
                        <template slot-scope="scope">
                            <span>{{ filtrationStr(scope.row.group) }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="compile(scope.row)" type="text">编辑</el-button>
                        <el-button @click="deleteUser(scope.row.id)" type="text" class="red">删除</el-button>
                    </template>
                </el-table-column> -->
                </el-table>
                <Pagination :page="page" :page_size="page_size" :page_sizes="[5]" :total="total"
                    @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
            </div>
            <div>
                <div class="title-f flex-box-ce" style="height: 40px; display: flex; align-items: center;">
                    <div class="title">部门管理员</div>
                    <div class="text fontColorB">部门管理员在【组织架构】设置，可以对管理范围下的员工进行沟通反馈，评分，查看考核结果</div>
                </div>
                <div class="title-f flex-box-ce" style="height: 40px; display: flex; align-items: center;">
                    <div class="title">普通员工</div>
                    <div class="text fontColorB">员工只能看到自己的绩效，编写执行计划并进行沟通反馈</div>
                </div>
            </div>


    </div>
</template>

<script>
import EmployeeSelector from '@/components/EmployeeSelector';
import BrawerBox from '@/performance/components/public/BrawerBox';
export default {
    components: { EmployeeSelector, BrawerBox },
    name: 'JurisdictionSet',
    data() {
        return {
            total: 0,
            page: 1,
            page_size: 5,
            loading: false,
            isAdministrator: false,
            isChecks: false,
            setAdministrator: false,

            // 编辑添加管理员
            checkboxs: [
                { label: '全部权限', id: 'all', check: true },
                {
                    label: '绩效管理',
                    id: 'kh',
                    check: true,
                    child: [
                        { label: '发起考核', id: '7', check: true },
                        { label: '开始评分', id: '8', check: true },
                        { label: '调整结果', id: '9', check: true },
                        { label: '等级配置', id: '10', check: true },
                        { label: '导出报表', id: '11', check: true }
                    ]
                },
                // { label: '考核指标库', id: '12', check: true },
                { label: '绩效等级配置', id: '15', check: true },
                { label: '绩效报表', id: '16', check: true },
                { label: '考核表', id: 'kp', check: true }
            ],
            selected: { employee: [], dept: [] },
            // 考核模板
            searchWords: '',
            groupList: [],
            userMain: [], //主管理员
            AdministratorList: [], //子管理员列表
            setCreator: false, //更换主管理员
            employee_not_select: [],//过滤的管理员

            // 添加编辑子管理员
            userData: {},
            scope: 3, //管理范围
            isKjJg: true, //是否可见考核结果
            review: 14, //考核模板
            isReviewShow: true, //控制考核模板是否能显示
            isReviewShow2: false, //控制考核模板是否能显示
            parameter: {
                id: '',
                permission: '',
                group: ''
            },
            selectGroup: [], //选择的考核模板
            isDisabled: false,
            id: ''
        };
    },
    watch: {
        review(val) {
            this.isReviewShow2 = val == 14 ? false : true;
        },
    },
    created() {
        this.getList();
        this.getList2();
        // this.getGroups();
    },
    mounted() {
        this.$nextTick(() => { });
    },
    methods: {
        
        // 过滤
        filtrationStr(str, is) {
            if (is) {
                var text = [...str].toString();
                return str.length > 0 ? text : '--';
            } else {
                return str ? str : '--';
            }
        },
        qkSelect() {
            // 初始化数据
            this.selectGroup = [];
            for (let i in this.groupList) {
                this.$set(this.groupList[i], 'check', false);
            }
            for (let i in this.checkboxs) {
                this.$set(this.checkboxs[i], 'check', true);
                if (this.checkboxs[i].child) {
                    for (let j in this.checkboxs[i].child) {
                        this.$set(this.checkboxs[i].child[j], 'check', true);
                    }
                }
            }
        },
        
        // 获取主管理员
        getList2() {
            this.$axiosUser('get', '/api/pro/per/user/manager_info', { range: 1 }).then(res => {
                this.userMain = res.data.data.list || [];
            });
        },
        // 获取子管理员
        getList() {
            this.loading = true;
            this.$axiosUser('get', '/api/pro/per/user/manager_info', { page: this.page, page_size: this.page_size, range: 0 })
                .then(res => {
                    let data = res.data.data.list || [];
                    this.total = res.data.data.total;
                    this.AdministratorList = data.filter(item => {
                        this.employee_not_select.push(item.id);
                        return item.main == 0;
                    });
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        
        
       goSetting() {
        this.$router.push("/jurisdictionSet")
       },
        // 页面变更
        handleCurrentChange(val) {
            this.page = val;
            this.getList();
        },
        // 页面跳转
        handleSizeChange(val) {
            this.page_size = val;
            this.getList();
        }
    }
};
</script>

<style scoped="scoped" lang="scss">
.all {
    min-height: calc(100vh - 210px);
    overflow: auto;
    padding: 20px;
    background-color: #fff;
}

.title {
    font-size: 18px;
    font-weight: 500;
    margin-right: 10px;
}

.name {
    padding-left: 10px;
}

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

.inputDc {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 9;
}

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

.li {
    border-bottom: 1px solid #f1f1f1;
}

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

.ul {
    margin: 20px 0;
    margin-top: 10px;
}

.alert-box {
    width: 100%;
    height: 40px;
    background-color: #fdf6ec;
    color: #E6A23C;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    box-sizing: border-box;
    .el-icon-warning {
        font-size: 16px;
        width: 16px;
        margin-right: 3px;
    }
}
</style>