前端页面优化，角色权限页面添加

suerprisePlus

2024-11-29 abef413ca08628702b291889cef15d17b0a74aa6

前端页面优化，角色权限页面添加

 se-ui/src/views/system/role/index.vue

@@ -206,7 +206,7 @@
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单权限">
          <el-form-item label="菜单权限" v-show="false">
            <el-checkbox
              v-model="menuExpand"
              @change="handleCheckedTreeExpand($event, 'menu')"

 se-ui/src/views/system/rolePower/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,359 @@
<template>
    <div class="app-container">
        <div>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="用户名称：">
                    <el-input v-model="formInline.roleName" ize="mini" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-divider></el-divider>
        <div class="roleCotent">
            <div class="roleLeft roleBox">
                <div class="roleTable">
                    <el-table ref="roleTable" highlight-current-row :data="tableData" @row-click="handleRoleClick"
                        style="width: 100%" height="calc(100% - 1px)">
                        <el-table-column label="角色编号" prop="roleId" align="center" />
                        <el-table-column label="角色名称" prop="roleName" align="center" />
                        <el-table-column label="权限字符" prop="roleKey" align="center" />
                        <el-table-column label="显示顺序" prop="roleSort" align="center" />
                        <el-table-column label="创建时间" align="center" prop="createTime">
                            <template slot-scope="scope">
                                <span>{{ parseTime(scope.row.createTime) }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="rolePage">
                    <pagination v-show="formInline.total > 0" :total="formInline.total" :page.sync="formInline.pageNum"
                        :limit.sync="formInline.pageSize" @pagination="getList" />
                </div>

            </div>
            <div class="roleRight roleBox">

                <el-form>
                    <el-form-item label="菜单权限" v-show="false">
                       <el-checkbox v-model="menuExpand"
                            @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
                        <el-checkbox v-model="menuNodeAll"
                            @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
                        <el-checkbox v-model="form.menuCheckStrictly"
                            @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox> 
                    </el-form-item>
                </el-form>
                <div class="roleTreeBox">
                    <div class="treeBox">
                        <el-tree ref="powerTree" class="tree-border" :data="menuOptions" show-checkbox node-key="id"
                            :check-strictly="!form.menuCheckStrictly" empty-text="加载中，请稍候"
                            :default-expanded-keys="expanded" :props="defaultProps"></el-tree>
                    </div>
                </div>
                <div class="roeleSubmit">
                    <el-button type="primary" icon="el-icon-upload2" size="mini" @click="handleUpload">提交</el-button>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
import {
    addRole,
    listRole,
    getRole,
    updateRole,
} from "@/api/system/role";
import {
    treeselect as menuTreeselect,
    roleMenuTreeselect
} from "@/api/system/menu"
export default {
    data() {
        return {
            formInline: {
                roleName: '',
                total: 0,
                pageNum: 1,
                pageSize: 10,
            },
            tableData: [],
            checkRow: null,
            form: {},
            menuOptions: [],
            checkedKeys: [],
            defaultProps: {
                children: "children",
                label: "label"
            },
            menuExpand: false,
            menuNodeAll: false,
            menuIds: [],
            expanded: []
        }
    },
    mounted() {
        this.resetQuery();
    },
    methods: {
        // æœç´¢äº‹ä»¶
        handleQuery() {
            this.formInline.pageNum = 1
            this.getRoleData();
        },
        // é‡ç½®äº‹ä»¶
        resetQuery() {
            this.formInline = {
                roleName: '',
                total: 0,
                pageNum: 1,
                pageSize: 10,
            }
            this.$nextTick(() => {
                this.getRoleData();
            })
        },
        // åˆ†é¡µç‚¹å‡»äº‹ä»¶
        getList() {
            this.getRoleData();
        },
        // è¡¨æ ¼è¡Œç‚¹å‡»äº‹ä»¶
        handleRoleClick(row, column, event) {
            this.checkRow = row;
            this.getTreePower();
        },

        // èŽ·å–角色列表数据
        getRoleData() {
            listRole(this.formInline).then(response => {
                if (response.code != 200) {
                    return this.$message({
                        message: '角色列表查询失败',
                        type: 'warning'
                    });
                };
                this.formInline.total = response.total;
                var table_data = response.rows.filter(item => {
                    if (item.roleId != 1) {
                        return item
                    }
                })
                this.tableData = table_data;
                this.checkRow = this.tableData[0];
                this.getTreePower();
                this.$refs.roleTable.setCurrentRow(this.checkRow);

            })
        },
        // èŽ·å–菜单权限
        getTreePower() {
            this.menuExpand = false;
            this.menuNodeAll = false;
            this.menuOptions = [];
            this.checkedKeys = [];
            this.menuIds = [];
            roleMenuTreeselect(this.checkRow.roleId).then(response => {
                if (response.code != 200) {
                    return this.$message({
                        message: '菜单列表查询失败',
                        type: 'warning'
                    });
                }
                this.menuOptions = response.menus;
                this.menuIds = this.getMenuIds(this.menuOptions, [])
                this.checkedKeys = response.checkedKeys;
               
                this.expanded= [this.menuOptions[0].id]
                this.getRole()
            });

        },
        getMenuIds(node, ids) {
            for (var i in node) {
                const child = node[i];
                if (child.children) {
                    this.getMenuIds(child.children, ids)
                } else {
                    ids.push(node[i].id)
                }
            }
            return ids;

        },
        // æ ¹æ®id æŸ¥è¯¢è§’色
        getRole() {
            getRole(this.checkRow.roleId).then(response => {
                if (response.code != 200) {
                    return this.$message({
                        message: '角色信息获取失败',
                        type: 'warning'
                    });
                }
                this.form = response.data
                let checkedKeys = this.checkedKeys;
                checkedKeys.forEach(v => {
                    this.$nextTick(() => {
                        this.$refs.powerTree.setChecked(v, true, false);
                    });
                });



            })
        },
        isElTreeAllSelected(tree) {
            // å‡è®¾tree是el-tree的实例，可以通过Vue实例访问到
            const getAllNodes = (tree) => {
                let allNodes = [];
                const traverse = (node) => {
                    allNodes.push(node);

                    node.childNodes.forEach((child) => traverse(child));
                };
                traverse(tree);
                return allNodes;
            };

            const allNodes = getAllNodes(tree); // èŽ·å–所有节点
            return allNodes.every(node => node.checked); // æ£€æŸ¥æ¯ä¸ªèŠ‚点是否选中
        },
        // æ ‘权限（全选/全不选）
        handleCheckedTreeNodeAll(value, type) {
            if (type == "menu") {
                this.$refs.powerTree.setCheckedNodes(value ? this.menuOptions : []);
            } else if (type == "dept") {
                this.$refs.dept.setCheckedNodes(value ? this.deptOptions : []);
            }
        },
        // æ ‘权限（展开/折叠）
        handleCheckedTreeExpand(value, type) {
            if (type == "menu") {
                let treeList = this.menuOptions;
                for (let i = 0; i < treeList.length; i++) {
                    this.$refs.powerTree.store.nodesMap[treeList[i].id].expanded = value;
                }
            } else if (type == "dept") {
                let treeList = this.deptOptions;
                for (let i = 0; i < treeList.length; i++) {
                    this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
                }
            }
        },
        // æ‰€æœ‰èœå•èŠ‚点数据
        getMenuAllCheckedKeys() {
            // ç›®å‰è¢«é€‰ä¸­çš„菜单节点
            let checkedKeys = this.$refs.powerTree.getCheckedKeys();
            // åŠé€‰ä¸­çš„菜单节点
            let halfCheckedKeys = this.$refs.powerTree.getHalfCheckedKeys();
            checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
            return checkedKeys;
        },
        //修改提交
        handleUpload() {
            if (this.form.roleId != undefined) {
                this.form.menuIds = this.getMenuAllCheckedKeys();
                updateRole(this.form).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.getTreePower();
                });
            } else {
                this.form.menuIds = this.getMenuAllCheckedKeys();
                addRole(this.form).then(response => {
                    this.$modal.msgSuccess("新增成功");

                    this.getTreePower();
                });
            }
        }

    }
}
</script>

<style lang="scss" scoped>
.app-container {
    height: calc(100vh - 84px);
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;

    .roleCotent {
        flex: 1;
        display: flex;
    }

    .roleRight {
        flex: 1;
        padding: 10px;
        display: flex;
        flex-direction: column;

        .roeleSubmit {
            margin: 10px 0px;
            width: 100%;
            display: flex;
            justify-content: end;
        }

        .roleTreeBox {
            flex: 1;
            position: relative;


            .treeBox {
                // padding: 10px;
                overflow: auto;
                width: 100%;
                height: 100%;
                position: absolute;
                // border: 1px solid #e5e6e7;
                // background: #FFFFFF none;
                border-radius: 4px;

                ::v-deep .tree-border {
                    margin: 0;
                    border: transparent;
                }
            }
        }
    }

    .roleLeft {
        width: 60%;
        height: 100%;
        margin-right: 1%;
        position: relative;
        display: flex;
        flex-direction: column;

        .roleTable {
            flex: 1;
        }

        .rolePage {
            margin: 10px 20px 20px 0px;
        }
    }

    .roleBox {
        border: 1px solid #DCDFE6;
        box-shadow: 0px 0px 4px 0px rgba(14, 22, 32, 0.2);
        border-radius: 10px;
    }



    ::v-deep .el-divider--horizontal {
        margin: 0px 0px 22px 0px;

    }
}
</style>

 se-ui/src/views/system/user/profile/userInfo.vue

@@ -1,6 +1,6 @@
<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="用户昵称" prop="nickName">
    <el-form-item label="用户姓名" prop="nickName">
      <el-input v-model="form.nickName" maxlength="30" />
    </el-form-item> 
    <el-form-item label="手机号码" prop="phonenumber">
@@ -37,7 +37,7 @@
      // è¡¨å•æ ¡éªŒ
      rules: {
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
          { required: true, message: "用户姓名不能为空", trigger: "blur" }
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },