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

<template>
    <div  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading">
        <div class="job-box">
            <div class="job-head">
                <div>
                    <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>
                </div>
                <div>
                    <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-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" >
                                </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>
import { promised, reject, resolve } from 'q';

export default {
    data() {
        return {
            authority: [],
            value: '',
            corporation: [],
            valuecorporation: '',

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

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

            authorityLists: [],
            authorityList: [],
            currentPage: 1, // 当前页码
            pageSize: 14,// 每页的数据条数
            stateArr: [],
            selectedAccount: [],
            PathUrl:'http://localhost:5256',
            opList :[],//操作方式
            loading:true,
        }
    },
    methods: {
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        //模块下拉框
        Inquirechange() {
            this.currentPage = 1;
            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': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
                }
            }).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.valueposition != ''){
                    this.JobChange();
                }
            })
        },
        //公司下拉框
        companyChange(){
            this.valuedepartmental = ''; //清空数据
            this.valueposition = '';
            this.position = [];
            this.departmental = [];
 
            if(this.valuecorporation == ''){
                return;
            }

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

        },
        //部门下拉框
        depaChange(){
            var that = this;
            this.position = []; //职位数据
            this.valueposition = '';//职位val

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

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

            if(this.valueposition == ''){
                this.$message.error('请选择职位！');
                return;  
            }

            var savejob = [];
            this.authorityLists.forEach(item=>{
                savejob.push({
                    SmId:item.id,
                    FIds:item.selList,
                });
            })
            console.log(savejob);
            //初始化界面数据
            this.$axios.post(this.PathUrl + '/api/System/SaveJobAuth', {
                "Jpid": this.valueposition,
                "Savejobs": savejob,
            }, {
                headers: {
                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
                }
            }).then(resp => {
                console.log(resp);
                if (resp.data.code == 200) {
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                }else{
                    this.$message.error('保存失败！'+ resp.data.msg);
                }
            })
        },
        //职位下拉获取权限
        JobChange(){
            let val = this.value == '' ? 13 :this.value;
            var that = this;

            if(this.valueposition == ''){

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

                return
            }

            //初始化界面数据
            this.$axios.post(this.PathUrl + '/api/System/QueryJobAuth', {
                "jobid": this.valueposition,
                "moduleId":val,
            }, {
                headers: {
                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IkZ1dHVyZSIsImV4cCI6MTY3OTU0MjgwNSwiaXNzIjoiT0FTeXN0ZW0uY29tIiwiYXVkIjoiT0FTeXN0ZW0uY29tIn0.iy5SUInq1p3yjZultRPyzCa2ekLeepSdMLxvPwXY6MI',
                }
            }).then(resp => {
                console.log(resp);
                if (resp.data.code == 200) {
                    that.authorityList = resp.data.data; //页面数据(默认权限页面)
                    that.authorityLists = that.authorityList;
                }
            })
        },
        //全选
        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);
        }
    },
    mounted() {
        this.pageload(13);
    }
}
</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;
}
</style>