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

<template>
    <div class="pageConfig-box" v-loading="isload" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="pageConfig-head">
            <div style="display: flex;">
                <!-- <div>
                    <el-select @change="Inquirechange()" v-model="ModulValue" clearable placeholder="全部模块">
                        <el-option v-for="item in ModulList" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                &nbsp;&nbsp;
                <div style="display: flex;">
                    <el-input placeholder="请输入页面名称" v-model="SearchInput" clearable></el-input>
                    &nbsp;&nbsp;
                    <el-button type="primary" @click="btnSearch" >搜 索</el-button>
                </div> -->
            </div>
            <div>
                <el-button type="primary" @click="isload = true; pageload()">刷 新</el-button>
                <el-button type="primary" @click="addPage">添 加</el-button>
            </div>
        </div>
        <div class="pageConfig-table">
            <el-table :data="pageList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
                style="width: 100%">
                <el-table-column prop="functionName" label="功能名称">
                </el-table-column>
                <el-table-column prop="functionCode" label="功能权限Code">
                </el-table-column>
                <el-table-column prop="isEnable" label="是否启用">
                    <template slot-scope="scope">
                        <el-checkbox :true-label="1" disabled :false-label="0" v-model="scope.row.isEnable"></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" icon="el-icon-s-tools" @click="Edit(scope.row)">编
                            辑</el-button>
                        <el-button type="danger" size="small" icon="el-icon-delete-solid" @click="Del(scope.row)">删
                            除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[5, 10, 14, 20]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next" :total="pageList.length">
                </el-pagination>
            </div>
        </div>

        <Modal  style="z-index:2012" :title="dialogTitle" :height="300" :width="400" :show.sync="showModal" restrict-to=".is-vertical"
            @close="showModal = false">
            <template v-slot:content>
                <div style="    padding: 10px;">
                    <el-form label-position="left" label-width="100px" :model="pageBind" :rules="rules" ref="pageBind">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="功能名称" prop="functionName">
                                    <el-input v-model="pageBind.functionName"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="功能Code" prop="functionCode">
                                    <el-input v-model="pageBind.functionCode"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <br />
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-checkbox label="是否启用" :true-label="1" :false-label="0"
                                    v-model="pageBind.isEnable"></el-checkbox>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </template>
            <template v-slot:footer>
                <div>
                    <el-button @click="showModal = false" type="danger">取 消</el-button>
                    <el-button type="primary" @click="PageSave">保 存</el-button>
                </div>
            </template>
        </Modal>

    </div>
</template>


<script>
import Modal from '../template/dialog.vue';

export default {
    data() {
        return {
            bufferData: {},//暂存数据
            pageList: [], //页面数据
            SearchInput: '', //查询的值
            currentPage: 1, //页码
            pageSize: 5,// 每页的数据条数
            PathUrl: '',
            showModal: false, //测试弹层
            dialogTitle: '测试标题',
            pageBind: {
                id: -1,
                functionCode: '',
                functionName: '',
                isEnable: 0,
            },//数据绑定对象
            rules: {
                functionName: [
                    { required: true, message: '请输入操作名称', trigger: 'blur' },
                ],
                functionCode: [
                    { required: true, message: '请输入操作code', trigger: 'blur' },
                ],
            },
            isload: true,
            userId: 0,
            token: '',
        };
    },
    methods: {
        pageload() {
            var that = this;
            this.$axios.post(this.PathUrl + '/api/System/PageFunInit', {

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

                if (that.pageList.slice((that.currentPage - 1) * that.pageSize, that.currentPage * that.pageSize).length == 0) {
                    if (that.currentPage > 1) {
                        that.currentPage = that.currentPage - 1;
                    }
                }

                that.isload = false;
            })

        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        addPage() {
            this.showModal = true;
            this.dialogTitle = '添加页面';
            this.pageBind = {
                id: -1,
                functionCode: '',
                functionName: '',
                isEnable: 0,
            };
        },
        Edit(page) {
            //this.dialogVisible = true;
            this.showModal = true;
            this.dialogTitle = '编辑页面';
            console.log(page);
            this.pageBind = {
                id: page.id,
                functionCode: page.functionCode,
                functionName: page.functionName,
                isEnable: page.isEnable,
            };
        },
        PageSave() {
            var that = this;
            //添加
            if (this.pageBind.id == -1) {

                var p = new Promise((resolve, reject) => {
                    this.$refs.pageBind.validate((valid) => {
                        if (valid) {
                            resolve(true);
                        } else {
                            reject(false);
                        }
                    });
                })

                p.then(resolve => {

                    this.pageBind.Status = 1;
                    this.pageBind.CreateUserId = this.userId;
                    this.pageBind.Remark = '';
                    //新增
                    this.$axios.post(this.PathUrl + '/api/System/OperationFun', this.pageBind, {
                        headers: {
                            'Authorization': that.token,
                        }
                    }).then(resp => {
                        that.showModal = false;

                        if (resp.data.code == 200) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        } else {
                            this.$message.error(resp.data.msg);
                        }
                        that.pageload();

                    })
                }).catch(err => {
                    console.log("表单验证未通过");
                })

            } else {
                //修改
                var p = new Promise((resolve, reject) => {
                    this.$refs.pageBind.validate((valid) => {
                        if (valid) {
                            resolve(true);
                        } else {
                            reject(false);
                        }
                    });
                })

                p.then(resolve => {

                    this.pageBind.Status = 2;
                    this.pageBind.CreateUserId = this.userId;
                    this.pageBind.Remark = '';

                    //编辑
                    this.$axios.post(this.PathUrl + '/api/System/OperationFun', this.pageBind, {
                        headers: {
                            'Authorization': that.token,
                        }
                    }).then(resp => {
                        that.showModal = false;

                        if (resp.data.code == 200) {
                            this.$message({
                                message: '保存成功!',
                                type: 'success'
                            });
                        } else {
                            this.$message.error(resp.data.msg);
                        }
                        that.pageload();

                    })
                }).catch(err => {
                    console.log("表单验证未通过");
                })
            }

        },
        Del(page) {
            let that = this;

            this.$axios.post(this.PathUrl + '/api/System/DelFun', {
                'Id': page.id,
                'DeleteUserId': that.userId,
            }, {
                headers: {
                    'Authorization': that.token,
                }
            }).then(resp => {
                if (resp.data.code == 200) {
                    this.$message({
                        message: '删除成功!',
                        type: 'success'
                    });
                } else {
                    this.$message.error('删除失败!' + resp.data.msg);
                }

                that.pageload();

            }).catch(err => {
                this.$message.error('网络错误!');
            })
        },
    },
    mounted() {
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.pageload();
    },
    components: {
        Modal
    },
    computed: {
        Modulfiltr() {
            return this.bufferData.modList.data.filter((item, i, arr) => {
                return item.id != -1;
            });
        }
    }
}
</script>
<style>
body {
    margin: 0;
    padding: 0;
}

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

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

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

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

.pageConfig-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;
}

.el-checkbox__input.is-disabled+.el-checkbox__label {
    color: #808080 !important;
}

.el-checkbox__input.is-disabled.is-checked+.el-checkbox__label {
    color: #1890ff !important;
}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #1890ff !important;
    border-color: #1890ff !important;
}
</style>