.

src/main/data-center-admin/src/router.js

@@ -236,6 +236,22 @@ const router = new Router({
                     meta: {
                         title: '预警阀值'
                     }
+                },
+                {
+                    path: '/authorityEdit',
+                    name: 'AuthorityEdit',
+                    component: () => import(/* webpackChunkName: "authorityEdit" */ './views/AuthorityEdit.vue'),
+                    meta: {
+                        title: '角色编辑'
+                    }
+                },
+                {
+                    path: '/authorityList',
+                    name: 'AuthorityList',
+                    component: () => import(/* webpackChunkName: "authorityList" */ './views/AuthorityList.vue'),
+                    meta: {
+                        title: '角色管理'
+                    }
                 }
                 /**INSERT_LOCATION**/
             ]

src/main/data-center-admin/src/views/Admin.vue

@@ -1,9 +1,7 @@
 <template>
     <el-container id="app">
         <el-aside :width="collapse ? '65px' : '200px'" class="aside">
-            <div v-if="collapse" class="logo-wrapper collapse" @click="$router.push('/chart1')">
-                监控中心
-            </div>
+            <div v-if="collapse" class="logo-wrapper collapse" @click="$router.push('/chart1')">监控中心</div>
             <div v-else class="logo-wrapper" @click="$router.push('/chart1')">监控中心</div>
             <el-menu
                 :collapse="collapse"
@@ -13,7 +11,7 @@
                 :unique-opened="true"
                 :router="true"
                 :default-active="activeMenu"
-                style="border-right: 1px solid #545c64;"
+                style="border-right: 1px solid #545c64"
                 class="el-menu-vertical-demo"
             >
                 <sys-menu v-for="item in menus" :menu="item" :key="item.id"> </sys-menu>
@@ -23,10 +21,10 @@
             <el-header class="app-header">
                 <div class="header-btn" @click="collapse = !collapse">
                     <div :style="{ transform: collapse ? 'rotate(90deg)' : '' }">
-                        <i class="fas fa-bars" style="font-size: 18px;"></i>
+                        <i class="fas fa-bars" style="font-size: 18px"></i>
                     </div>
                 </div>
-                <div style="flex-grow: 1; margin-left: 20px;"></div>
+                <div style="flex-grow: 1; margin-left: 20px"></div>
 
                 <el-tooltip
                     effect="dark"
@@ -35,14 +33,14 @@
                     :open-delay="1000"
                 >
                     <div class="header-btn" @click="toggleFullScreen" ref="fullscreen">
-                        <i class="fas fa-expand" style="font-size: 18px;"></i>
+                        <i class="fas fa-expand" style="font-size: 18px"></i>
                     </div>
                 </el-tooltip>
 
-                <el-dropdown @command="onCommand" style="margin-left: 20px;" trigger="click">
+                <el-dropdown @command="onCommand" style="margin-left: 20px" trigger="click">
                     <img :src="userInfo ? userInfo.avatar || '' : ''" class="avatar" />
                     <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item command="pwd" style="word-break:keep-all">修改密码 </el-dropdown-item>
+                        <el-dropdown-item command="pwd" style="word-break: keep-all">修改密码 </el-dropdown-item>
                         <el-dropdown-item command="logout">退出登录 </el-dropdown-item>
                     </el-dropdown-menu>
                 </el-dropdown>
@@ -67,7 +65,7 @@
                     <el-input v-model="pwdForm.repeat" type="password" placeholder="确认新密码"></el-input>
                 </el-form-item>
                 <el-form-item label="验证码" prop="code">
-                    <el-input v-model="pwdForm.code" placeholder="请输入验证码" style="width:150px"></el-input>
+                    <el-input v-model="pwdForm.code" placeholder="请输入验证码" style="width: 150px"></el-input>
                     <img :src="captcha" class="captcha-image" @click="refreshCaptcha" />
                 </el-form-item>
             </el-form>
@@ -222,7 +220,9 @@ export default {
                     children: [
                         { active: false, name: '日志管理', path: '/operationLogList', icon: 'fas fa-bars' },
                         { active: false, name: '配置管理', path: '/sysConfigList', icon: 'fas fa-bars' },
-                        { active: false, name: '存储管理', path: '/genCodeList', icon: 'fas fa-bars' }
+                        { active: false, name: '存储管理', path: '/genCodeList', icon: 'fas fa-bars' },
+                        { active: false, name: '用户管理', path: '/userList', icon: 'fas fa-bars' },
+                        { active: false, name: '角色管理', path: '/authorityList', icon: 'fas fa-bars' }
                     ]
                 },
                 {

src/main/data-center-admin/src/views/AuthorityEdit.vue

@@ -0,0 +1,113 @@
+<template>
+    <div class="edit-view">
+        <el-form
+            :model="formData"
+            :rules="rules"
+            ref="form"
+            label-width="80px"
+            label-position="right"
+            size="small"
+            style="max-width: 500px;"
+        >
+            <el-form-item prop="name" label="Code">
+                <el-input v-model="formData.name"></el-input>
+            </el-form-item>
+            <el-form-item prop="nameDesc" label="角色名称">
+                <el-input v-model="formData.nameDesc"></el-input>
+            </el-form-item>
+            <el-form-item prop="description" label="角色描述">
+                <el-input v-model="formData.description"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+                <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除 </el-button>
+                <el-button @click="$router.go(-1)">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    name: 'AuthorityEdit',
+    created() {
+        if (this.$route.query.id) {
+            this.$http
+                .get('authority/get/' + this.$route.query.id)
+                .then(res => {
+                    this.formData = res;
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+        }
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {},
+            rules: {
+                name: [
+                    {
+                        required: true,
+                        message: '请输入Code',
+                        trigger: 'blur'
+                    }
+                ],
+                nameDesc: [
+                    {
+                        required: true,
+                        message: '请输入角色名称',
+                        trigger: 'blur'
+                    }
+                ]
+            }
+        };
+    },
+    methods: {
+        onSave() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.submit();
+                } else {
+                    return false;
+                }
+            });
+        },
+        submit() {
+            let data = { ...this.formData };
+
+            this.saving = true;
+            this.$http
+                .post('/authority/save', data, { body: 'json' })
+                .then(res => {
+                    this.saving = false;
+                    this.$message.success('成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.saving = false;
+                    this.$message.error(e.error);
+                });
+        },
+        onDelete() {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/authority/del/${this.formData.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        console.log(e);
+                        this.$message.error(e.error);
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped></style>

src/main/data-center-admin/src/views/AuthorityList.vue

@@ -0,0 +1,182 @@
+<template>
+    <div class="list-view">
+        <div class="filters-container">
+            <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+            <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索 </el-button>
+            <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加 </el-button>
+            <el-button
+                @click="download"
+                type="primary"
+                icon="el-icon-download"
+                :loading="downloading"
+                class="filter-item"
+                >导出EXCEL
+            </el-button>
+        </div>
+        <el-table
+            :data="tableData"
+            row-key="id"
+            ref="table"
+            header-row-class-name="table-header-row"
+            header-cell-class-name="table-header-cell"
+            row-class-name="table-row"
+            cell-class-name="table-cell"
+            :height="tableHeight"
+        >
+            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"> </el-table-column>
+            <el-table-column prop="name" label="Code"> </el-table-column>
+            <el-table-column prop="nameDesc" label="角色名称"> </el-table-column>
+            <el-table-column prop="description" label="角色描述"> </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="150">
+                <template slot-scope="{ row }">
+                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+                    <el-button @click="addMenu(row)" type="primary" size="mini" plain>分配权限</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <!-- <div class="multiple-mode-wrapper">
+                <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button @click="operation1">批量操作1</el-button>
+                    <el-button @click="operation2">批量操作2</el-button>
+                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
+                </el-button-group>
+            </div> -->
+            <el-pagination
+                background
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
+        <user-menu :editMenu="editMenu" @closeEditMenu="closeEditMenu"></user-menu>
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import pageableTable from '@/mixins/pageableTable';
+import userMenu from './editUserMenu';
+export default {
+    name: 'AuthorityList',
+    mixins: [pageableTable],
+    components: {
+        userMenu
+    },
+    data() {
+        return {
+            multipleMode: false,
+            search: '',
+            url: '/authority/all',
+            downloading: false,
+            editMenu: {
+                title: '',
+                editDialogVisible: false,
+                roleId: ''
+            },
+            sortStr: ''
+        };
+    },
+    computed: {
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    methods: {
+        addMenu(row) {
+            this.editMenu.title = '分配权限';
+            this.editMenu.roleId = row.name;
+            this.editMenu.editDialogVisible = true;
+        },
+        closeEditMenu(show) {
+            this.editMenu.editDialogVisible = show;
+            this.getData();
+        },
+        beforeGetData() {
+            if (this.search) {
+                return { search: this.search };
+            }
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        addRow() {
+            this.$router.push({
+                path: '/authorityEdit',
+                query: {
+                    ...this.$route.query
+                }
+            });
+        },
+        editRow(row) {
+            this.$router.push({
+                path: '/authorityEdit',
+                query: {
+                    id: row.name
+                }
+            });
+        },
+        download() {
+            this.downloading = true;
+            this.$axios
+                .get('/authority/excel', {
+                    responseType: 'blob',
+                    params: { size: 10000 }
+                })
+                .then(res => {
+                    console.log(res);
+                    this.downloading = false;
+                    const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+                    const link = document.createElement('a');
+                    link.href = downloadUrl;
+                    link.setAttribute(
+                        'download',
+                        decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
+                    );
+                    document.body.appendChild(link);
+                    link.click();
+                    link.remove();
+                })
+                .catch(e => {
+                    console.log(e);
+                    this.downloading = false;
+                    this.$message.error(e.error);
+                });
+        },
+        operation1() {
+            this.$notify({
+                title: '提示',
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message('操作2');
+        },
+        deleteRow(row) {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
+                .then(() => {
+                    return this.$http.post(`/authority/del/${row.id}`);
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.getData();
+                })
+                .catch(e => {
+                    if (e !== 'cancel') {
+                        this.$message.error(e.error);
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped></style>

src/main/data-center-admin/src/views/editUserMenu.vue

@@ -0,0 +1,120 @@
+<template>
+    <el-dialog
+        id="userMenu"
+        width="30%"
+        :title="editMenu.title"
+        :visible.sync="editMenu.editDialogVisible"
+        append-to-body
+        :before-close="handleClose"
+        @open="open"
+        :close-on-click-modal="false"
+    >
+        <el-tree
+            :props="props1"
+            :show-checkbox="true"
+            default-expand-all
+            node-key="id"
+            ref="tree"
+            :data="menuList"
+            @check="handleCheckChange"
+            highlight-current
+            v-loading="loading"
+        >
+        </el-tree>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="handleClose" :disabled="saving">取 消</el-button>
+            <el-button type="primary" @click="handleSubmit" :loading="saving">确 定</el-button>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    name: 'userMenu',
+    props: ['editMenu'],
+    data: function() {
+        return {
+            loading: false,
+            menuList: [],
+            checkedId: [],
+            checkedTreeId: [],
+            props1: {
+                label: 'name',
+                children: 'children'
+            },
+            saving: false
+        };
+    },
+    components: {},
+    methods: {
+        open() {
+            this.queryMenu();
+        },
+        queryMenu() {
+            this.$http
+                .get('/menu/allUserMenu', { authorityName: this.editMenu.roleId })
+                .then(res => {
+                    this.checkedId = [];
+                    this.menuList = res.menuList;
+                    this.checkedId = res.menuId;
+                    if (this.checkedId != undefined && this.checkedId.length > 0) {
+                        this.setCheckedKeys(this.checkedId);
+                    }
+                    this.loading = false;
+                })
+                .catch(e => {
+                    this.loading = false;
+                    console.log(e);
+                    this.$message.error(e.error);
+                });
+        },
+        setCheckedKeys(ids) {
+            this.$refs.tree.setCheckedKeys(ids);
+        },
+        handleCheckChange(data, checked) {
+            this.checkedTreeId = this.$refs.tree.getCheckedKeys();
+        },
+        handleClose() {
+            this.$emit('closeEditMenu', false); // 给父组件传值，隐藏弹出框
+        },
+        handleSubmit() {
+            // 为该角色添加权限;
+            this.saving = true;
+            this.$axios
+                .post(
+                    '/authorityMenu/save',
+                    { authorityName: this.editMenu.roleId, menuId: this.checkedTreeId.join(',') },
+                    { emulateJSON: true }
+                )
+                .then(res => {
+                    this.saving = false;
+                    let success = res.data.success;
+                    if (success === true) {
+                        this.$message({
+                            type: 'success',
+                            message: '提交成功'
+                        });
+                        this.$emit('closeEditMenu', false); // 给父组件传值，隐藏弹出框
+                    } else {
+                        this.$message.error(res.data.message);
+                    }
+                })
+                .catch(error => {
+                    this.saving = false;
+                    console.log(error);
+                    this.$message.error('服务器暂时无法连接，请稍后再试');
+                });
+        }
+    },
+    mounted: function() {
+        // this.$nextTick(function() {});
+    }
+};
+</script>
+
+<style>
+#userMenu .el-dialog__body {
+    overflow: auto;
+    max-height: 310px;
+}
+</style>