oa-system/src/components/child/AuthorityUser.vue

<template>
    <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
        <div class="job-box">
            <div class="job-head">
                <div class="job-user">
                    <el-select @change="Inquirechange()" v-model="value" clearable placeholder="权限模块">
                        <el-option v-for="item in authority" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="pageValue" filterable placeholder="页面名称搜索" @change="pageChange">
                        <el-option v-for="item in pageOptions" :key="item.pageid" :label="item.pageName"
                            :value="item.pageid">
                        </el-option>
                    </el-select>
                </div>
                <div class="job-input">
                    <el-select @change="companyChange()" v-model="valuecorporation" clearable placeholder="公司">
                        <el-option v-for="item in corporation" :key="item.value" :label="item.companyName" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select @change="depaChange()" v-model="valuedepartmental" clearable placeholder="部门">
                        <el-option v-for="item in departmental" :key="item.id" :label="item.depName" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select @change="JobChange()" v-model="valueposition" clearable placeholder="职位">
                        <el-option v-for="item in position" :key="item.id" :label="item.jobName" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select @change="UserChange()" v-model="Valueuesr" clearable placeholder="员工">
                        <el-option v-for="item in Users" :key="item.id" :label="item.cnName" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button type="primary" @click="saveAuth()">保 存</el-button>
                </div>
            </div>
            <div class="job-table">
                <el-table :data="authorityLists.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
                    @select="handleSelect" @select-all="allchange" style="width: 100%">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="name" label="权限页面" width="180">
                    </el-table-column>

                    <el-table-column width="55" :label="op.functionName" :key="op.id" v-for="op in opList">
                        <template slot-scope="scope">
                            <div>
                                <el-checkbox @change='checkchange(scope.row.id, op.id)'
                                    v-if="scope.row.opList.indexOf(op.id) != -1"
                                    :value="scope.row.selList.indexOf(op.id) != -1">
                                </el-checkbox>
                                <el-checkbox v-else :disabled="true" :value="false">
                                </el-checkbox>
                            </div>
                        </template>
                    </el-table-column>


                    <el-table-column prop="address" label="备注">
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[14, 20]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next" :total="authorityList.length">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            authority: [],
            value: '',        //模块下拉框数据
            corporation: [],
            valuecorporation: '',//公司val

            departmental: [], //部门数据
            valuedepartmental: '', //部门val

            position: [], //职位数据
            valueposition: '',//职位val

            authorityLists: [],
            authorityList: [],
            currentPage: 1, // 当前页码
            pageSize: 14,// 每页的数据条数
            stateArr: [],
            selectedAccount: [],
            PathUrl: '',
            opList: [],//操作方式
            loading: true,
            Users: [],
            Valueuesr: '',//员工val
            userId: 0,
            token: '',
            pageOptions: [],
            pageValue: ''
        }
    },
    methods: {
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        //模块下拉框
        Inquirechange() {
            this.currentPage = 1;
            this.pageValue = '';
            this.pageload(this.value);
        },
        //多选框选中方法
        handleSelect(selection, row) {
            console.log(selection, row)
            if (selection.length > 0) {
                row.selList = this.opList.map(x => x.id);
            } else {
                row.selList = [];
            }
        },
        selectRadiocheck(index, row) {
            console.log(index)
            console.log(row)
        },
        selectRadioerase(index, row) {
            console.log(index, row)
        },
        selectRadioedit(index, row) {
            console.log(index, row)
        },
        selectRadiodown(index, row) {
            console.log(index, row)
        },
        selectRadioup(index, row) {
            console.log(index, row)
        },
        pageload(moduleId) {
            var that = this;
            //初始化界面数据
            this.$axios.post(this.PathUrl + '/api/System/GetAuth', {
                "pageSize": this.pageSize,
                "currentPage": this.currentPage,
                "moduleId": moduleId,
            }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                if (resp.data.code == 200) {
                    that.authority = resp.data.data.setDataResult; //模块数据
                    that.corporation = resp.data.data.companyDataResult; //公司数据
                    that.authorityList = resp.data.data.systemMenuPermissionData; //页面数据(默认权限页面)
                    that.authorityLists = that.authorityList;
                    that.opList = resp.data.data.pageOperation; //操作方式
                    that.loading = false;
                }
            }).then(suc => {
                if (this.Valueuesr != '') {
                    //链式调用加载
                    this.UserChange();
                }
            })
        },
        //公司下拉框
        companyChange() {

            this.valuedepartmental = ''; //清空数据
            this.valueposition = '';
            this.position = [];
            this.departmental = [];
            this.Valueuesr = ''; //清空数据
            this.Users = [];

            if (this.valuecorporation == '') {
                return;
            }

            var that = this;
            //初始化界面数据
            this.$axios.post(this.PathUrl + '/api/System/QueryDepartmentList', {
                "CompanyId": this.valuecorporation,
                "PortType": 1,
            }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                console.log(resp);
                if (resp.data.code == 200) {
                    that.departmental = resp.data.data;
                }
            })

        },
        //部门下拉框
        depaChange() {

            this.position = []; //职位数据
            this.valueposition = '';//职位val
            this.Valueuesr = ''; //清空数据
            this.Users = [];

            if (this.valuecorporation == '' || this.valuedepartmental == '') {
                return;
            }

            var that = this;
            //初始化界面数据
            this.$axios.post(this.PathUrl + '/api/System/QueryJobPost', {
                "CompanyId": this.valuecorporation,
                "DepId": this.valuedepartmental,
                "PortType": 1,
            }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                console.log(resp);
                if (resp.data.code == 200) {
                    that.position = resp.data.data;
                }
            })
        },
        //保存权限
        saveAuth() {
            var that = this;

            if (this.Valueuesr == '') {
                this.$message.error('请选择员工！');
                return;
            }

            var savejob = [];
            this.authorityLists.forEach(item => {
                savejob.push({
                    SmId: item.id,
                    FIds: this.unique(item.selList),
                });
            })
            console.log(savejob);
            //保存数据
            this.$axios.post(this.PathUrl + '/api/System/SaveUserAuth', {
                "uid": this.Valueuesr,
                "Savejobs": savejob,
                "Modulid": this.value == '' ? '13' : this.value,
            }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                console.log(resp);
                if (resp.data.code == 200) {
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                } else {
                    this.$message.error('保存失败！' + resp.data.msg);
                }
            })
        },
        //职位下拉获取权限
        JobChange() {

            this.Valueuesr = ''; //清空数据
            this.Users = [];

            if (this.valuecorporation == '' || this.valuedepartmental == '' || this.valueposition == '') {
                return;
            }

            var that = this;
            //获取员工信息
            this.$axios.post(this.PathUrl + '/api/System/QueryUserList', {
                "CompanyId": this.valuecorporation,
                "DepId": this.valuedepartmental,
                "JobPostId": this.valueposition,
                "PortType": 1

            }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                console.log(resp);
                if (resp.data.code == 200) {
                    that.Users = resp.data.data;
                }
            })
        },
        //全选
        allchange(selection) {
            let that = this;

            if (selection.length > 0) {
                selection.forEach(item => {
                    item.selList = that.opList.map(x => x.id);
                });

            } else {
                this.authorityLists.forEach(item => {
                    item.selList = [];
                });
            }
        },
        checkchange(rowid, linid) {
            this.authorityLists.forEach(item => {
                if (item.id == rowid) {
                    if (item.selList.indexOf(linid) == -1) {
                        item.selList.push(linid);
                    } else {
                        item.selList.splice(item.selList.indexOf(linid), 1)
                    }
                }
            });
            console.warn(this.authorityLists);
        },
        //员工下拉框
        UserChange() {
            console.log(this.Valueuesr);

            var moduleId = this.value == "" ? 13 : this.value;
            if (this.Valueuesr == '') {

                var arr = this.authorityList;
                arr.forEach(item => {
                    item.selList = [];
                })
                this.authorityList = arr;
                this.authorityLists = this.authorityList;
                return;
            }

            var that = this;
            //获取员工信息
            this.$axios.post(this.PathUrl + '/api/System/QueryUserAuth', {
                "Userid": this.Valueuesr,
                "moduleId": moduleId

            }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                console.log(resp);
                if (resp.data.code == 200) {
                    that.authorityList = resp.data.data; //页面数据(默认权限页面)
                    that.authorityLists = that.authorityList;
                }
            })

        },
        unique(arr) {
            return Array.from(new Set(arr));
        },
        pageChange() {
            console.log(this.pageValue);
            var that = this;
            let ischange = false;
            this.pageOptions.forEach(function (item, index) {
                if (item.pageid == that.pageValue) {
                    ischange = true;
                    that.value = item.modulid;
                }
            })

            if (ischange) {
                this.Inquirechange();
            } else {
                console.log("搜索异常!!");
            }

        },
        loadPages() {
            var that = this;
            this.$axios.post('/api/System/PageConfigInit', {

            }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                console.log(resp.data.data);
                if (resp.data.code == 200) {
                    that.pageOptions = resp.data.data.viewList.data;
                }
            })

        }
    },
    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.pageload(13);
        this.loadPages();
    }
}
</script>
<style>
body {
    margin: 0;
    padding: 0;
}

.job-head {
    display: flex;
    justify-content: space-between;
}

.job-box {
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
}

.job-table {
    margin-top: 10px;
}

.job-table .block {
    margin-top: 10px;
}

.job-table .el-table--enable-row-transition .el-table__body td.el-table__cell {
    text-align: center;
}

.job-table .el-table--border .el-table__cell:first-child .cell {
    text-align: center;
}

.job-input {
    display: flex;
}

.job-input .el-select {
    margin-right: 5px;
}

.job-user .el-select {
    width: 250px;
}
</style>