| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <html lang="zh-CN"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <title></title> |
|---|
| | | <title>角色管理</title> |
|---|
| | | <meta name="renderer" content="webkit"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|---|
| | | <link rel="stylesheet" href="../../static/layui/css/layui.css" media="all"> |
|---|
| | | <link rel="stylesheet" href="../../static/css/cool.css" media="all"> |
|---|
| | | <link rel="stylesheet" href="../../static/css/common.css" media="all"> |
|---|
| | | <link rel="stylesheet" href="../../static/vue/element/element.css"> |
|---|
| | | <link rel="stylesheet" href="../../static/css/cool.css"> |
|---|
| | | <style> |
|---|
| | | :root { |
|---|
| | | --card-bg: rgba(255, 255, 255, 0.94); |
|---|
| | | --card-border: rgba(216, 226, 238, 0.95); |
|---|
| | | --text-main: #243447; |
|---|
| | | } |
|---|
| | | |
|---|
| | | [v-cloak] { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | html, |
|---|
| | | body { |
|---|
| | | margin: 0; |
|---|
| | | min-height: 100%; |
|---|
| | | color: var(--text-main); |
|---|
| | | font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif; |
|---|
| | | background: |
|---|
| | | radial-gradient(1000px 420px at 0% -10%, rgba(44, 107, 193, 0.12), transparent 56%), |
|---|
| | | radial-gradient(900px 400px at 100% 0%, rgba(28, 150, 126, 0.10), transparent 58%), |
|---|
| | | linear-gradient(180deg, #f2f6fb 0%, #f8fafc 100%); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .page-shell { |
|---|
| | | max-width: 1700px; |
|---|
| | | margin: 0 auto; |
|---|
| | | padding: 14px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .card-shell { |
|---|
| | | border-radius: 24px; |
|---|
| | | border: 1px solid var(--card-border); |
|---|
| | | background: |
|---|
| | | radial-gradient(760px 220px at -8% 0%, rgba(43, 117, 196, 0.05), transparent 55%), |
|---|
| | | radial-gradient(680px 200px at 108% 10%, rgba(24, 150, 129, 0.05), transparent 58%), |
|---|
| | | var(--card-bg); |
|---|
| | | box-shadow: 0 16px 32px rgba(44, 67, 96, 0.08); |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-bar { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: space-between; |
|---|
| | | gap: 8px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | padding: 12px 16px 10px; |
|---|
| | | border-bottom: 1px solid rgba(222, 230, 239, 0.92); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-left, |
|---|
| | | .toolbar-right { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 8px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-title { |
|---|
| | | font-size: 13px; |
|---|
| | | color: #7a8a9f; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-title strong { |
|---|
| | | color: var(--text-main); |
|---|
| | | font-size: 15px; |
|---|
| | | margin-right: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-search { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 8px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-item { |
|---|
| | | width: 220px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-bar .el-input__inner, |
|---|
| | | .toolbar-bar .el-button { |
|---|
| | | height: 32px; |
|---|
| | | line-height: 32px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-bar .el-button { |
|---|
| | | padding: 0 12px; |
|---|
| | | border-radius: 8px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .table-wrap { |
|---|
| | | padding: 10px 16px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .table-shell { |
|---|
| | | border-radius: 20px; |
|---|
| | | overflow: hidden; |
|---|
| | | border: 1px solid rgba(217, 227, 238, 0.98); |
|---|
| | | background: rgba(255, 255, 255, 0.95); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .table-shell .el-table { |
|---|
| | | border-radius: 20px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .table-shell .el-table th { |
|---|
| | | background: #f7fafc; |
|---|
| | | color: #53677d; |
|---|
| | | font-weight: 700; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .pager-bar { |
|---|
| | | padding: 0 16px 16px; |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-panel .el-dialog { |
|---|
| | | border-radius: 24px; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-panel .el-dialog__header { |
|---|
| | | padding: 22px 24px 12px; |
|---|
| | | background: linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%); |
|---|
| | | border-bottom: 1px solid rgba(224, 232, 241, 0.92); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-panel .el-dialog__title { |
|---|
| | | font-weight: 700; |
|---|
| | | color: var(--text-main); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-panel .el-dialog__body { |
|---|
| | | padding: 18px 24px 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .dialog-footer { |
|---|
| | | display: flex; |
|---|
| | | justify-content: flex-end; |
|---|
| | | gap: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tree-shell { |
|---|
| | | max-height: 560px; |
|---|
| | | overflow: auto; |
|---|
| | | padding: 8px 4px 0 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tree-shell .el-tree-node__content { |
|---|
| | | height: 34px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @media (max-width: 900px) { |
|---|
| | | .page-shell { |
|---|
| | | padding: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-bar, |
|---|
| | | .table-wrap, |
|---|
| | | .pager-bar { |
|---|
| | | padding-left: 12px; |
|---|
| | | padding-right: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-item { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | |
|---|
| | | <!-- 搜索栏 --> |
|---|
| | | <div id="search-box" class="layui-form layui-card-header"> |
|---|
| | | <div class="layui-inline" > |
|---|
| | | <div class="layui-input-inline cool-auto-complete"> |
|---|
| | | <input id="leader" name="leader" class="layui-input" type="text" style="display: none"> |
|---|
| | | <input id="leader$" class="layui-input cool-auto-complete-div" onclick="autoShow(this.id)" type="text" placeholder="上级" onfocus=this.blur()> |
|---|
| | | <div class="cool-auto-complete-window"> |
|---|
| | | <input class="cool-auto-complete-window-input" data-key="roleQueryByleader" onkeyup="autoLoad(this.getAttribute('data-key'))"> |
|---|
| | | <select class="cool-auto-complete-window-select" data-key="roleQueryByleaderSelect" onchange="confirmed(this.getAttribute('data-key'))" multiple="multiple"> |
|---|
| | | </select> |
|---|
| | | <div id="app" class="page-shell" v-cloak> |
|---|
| | | <section class="card-shell"> |
|---|
| | | <div class="toolbar-bar"> |
|---|
| | | <div class="toolbar-left"> |
|---|
| | | <div class="toolbar-title"><strong>角色管理</strong></div> |
|---|
| | | <div class="toolbar-search"> |
|---|
| | | <el-select |
|---|
| | | v-model="searchForm.leader" |
|---|
| | | class="search-item" |
|---|
| | | clearable |
|---|
| | | filterable |
|---|
| | | remote |
|---|
| | | reserve-keyword |
|---|
| | | placeholder="请选择上级" |
|---|
| | | :remote-method="searchLeaderOptions" |
|---|
| | | :loading="leaderSearchLoading"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in leaderSearchOptions" |
|---|
| | | :key="'search-' + item.id" |
|---|
| | | :label="item.value" |
|---|
| | | :value="item.id"> |
|---|
| | | </el-option> |
|---|
| | | </el-select> |
|---|
| | | <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> |
|---|
| | | <el-button size="small" plain icon="el-icon-refresh-left" @click="handleReset">重置</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="toolbar-right"> |
|---|
| | | <el-button size="small" type="primary" plain icon="el-icon-plus" @click="openCreateDialog">新增</el-button> |
|---|
| | | <el-button size="small" type="danger" plain icon="el-icon-delete" :disabled="selection.length === 0" @click="removeSelection">删除</el-button> |
|---|
| | | <el-button size="small" plain icon="el-icon-download" :loading="exportLoading" @click="exportRows">导出</el-button> |
|---|
| | | <el-button size="small" plain icon="el-icon-refresh" :loading="loading" @click="loadList">刷新</el-button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- 待添加 --> |
|---|
| | | <div id="data-search-btn" class="layui-btn-container layui-form-item"> |
|---|
| | | <button id="search" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="search">搜索</button> |
|---|
| | | <button id="reset" class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="reset">重置</button> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="table-wrap"> |
|---|
| | | <div class="table-shell"> |
|---|
| | | <el-table |
|---|
| | | ref="dataTable" |
|---|
| | | v-loading="loading" |
|---|
| | | :data="tableData" |
|---|
| | | border |
|---|
| | | stripe |
|---|
| | | :height="tableHeight" |
|---|
| | | @selection-change="handleSelectionChange"> |
|---|
| | | <el-table-column type="selection" width="52" align="center"></el-table-column> |
|---|
| | | <el-table-column prop="id" label="ID" width="90" align="center"></el-table-column> |
|---|
| | | <el-table-column prop="code" label="编码" min-width="180" show-overflow-tooltip></el-table-column> |
|---|
| | | <el-table-column prop="name" label="名称" min-width="180" show-overflow-tooltip></el-table-column> |
|---|
| | | <el-table-column prop="leader$" label="上级" min-width="180" show-overflow-tooltip> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | {{ scope.row['leader$'] || '--' }} |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column label="操作" width="160" fixed="right" align="center"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-button type="text" @click="openPowerDialog(scope.row)">权限</el-button> |
|---|
| | | <el-button type="text" @click="openEditDialog(scope.row)">编辑</el-button> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="pager-bar"> |
|---|
| | | <el-pagination |
|---|
| | | background |
|---|
| | | layout="total, sizes, prev, pager, next, jumper" |
|---|
| | | :current-page="pagination.curr" |
|---|
| | | :page-sizes="[16, 30, 50, 100, 200, 500]" |
|---|
| | | :page-size="pagination.limit" |
|---|
| | | :total="pagination.total" |
|---|
| | | @size-change="handleSizeChange" |
|---|
| | | @current-change="handleCurrentChange"> |
|---|
| | | </el-pagination> |
|---|
| | | </div> |
|---|
| | | </section> |
|---|
| | | |
|---|
| | | <el-dialog |
|---|
| | | class="dialog-panel" |
|---|
| | | :title="roleDialog.mode === 'create' ? '新增角色' : '编辑角色'" |
|---|
| | | :visible.sync="roleDialog.visible" |
|---|
| | | width="640px" |
|---|
| | | :close-on-click-modal="false"> |
|---|
| | | <el-form |
|---|
| | | ref="roleForm" |
|---|
| | | :model="roleForm" |
|---|
| | | :rules="roleRules" |
|---|
| | | label-width="90px" |
|---|
| | | size="small"> |
|---|
| | | <el-row :gutter="16"> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="编码" prop="code"> |
|---|
| | | <el-input v-model.trim="roleForm.code" placeholder="请输入编码"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="名称" prop="name"> |
|---|
| | | <el-input v-model.trim="roleForm.name" placeholder="请输入名称"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="24"> |
|---|
| | | <el-form-item label="上级" prop="leader"> |
|---|
| | | <el-select |
|---|
| | | v-model="roleForm.leader" |
|---|
| | | clearable |
|---|
| | | filterable |
|---|
| | | remote |
|---|
| | | reserve-keyword |
|---|
| | | placeholder="请选择上级" |
|---|
| | | style="width: 100%;" |
|---|
| | | :remote-method="searchDialogLeaderOptions" |
|---|
| | | :loading="dialogLeaderLoading"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in dialogLeaderOptions" |
|---|
| | | :key="'dialog-' + item.id" |
|---|
| | | :label="item.value" |
|---|
| | | :value="item.id"> |
|---|
| | | </el-option> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button @click="roleDialog.visible = false">取消</el-button> |
|---|
| | | <el-button type="primary" :loading="roleDialog.submitting" @click="submitRole">保存</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | |
|---|
| | | <el-dialog |
|---|
| | | class="dialog-panel" |
|---|
| | | :title="powerDialog.roleName ? powerDialog.roleName + ' 权限分配' : '权限分配'" |
|---|
| | | :visible.sync="powerDialog.visible" |
|---|
| | | width="620px" |
|---|
| | | :close-on-click-modal="false"> |
|---|
| | | <div v-loading="powerDialog.loading" class="tree-shell"> |
|---|
| | | <el-tree |
|---|
| | | ref="powerTree" |
|---|
| | | node-key="id" |
|---|
| | | show-checkbox |
|---|
| | | :data="powerTreeData" |
|---|
| | | :props="{ label: 'title', children: 'children' }" |
|---|
| | | :default-expanded-keys="powerExpandedKeys" |
|---|
| | | empty-text="暂无权限数据"> |
|---|
| | | </el-tree> |
|---|
| | | </div> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button @click="powerDialog.visible = false">关闭</el-button> |
|---|
| | | <el-button type="primary" :loading="powerDialog.submitting" @click="submitPower">保存</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 表格 --> |
|---|
| | | <table class="layui-hide" id="role" lay-filter="role"></table> |
|---|
| | | <script type="text/html" id="toolbar"> |
|---|
| | | <div class="layui-btn-container"> |
|---|
| | | <button class="layui-btn layui-btn-sm" id="btn-add" lay-event="addData">新增</button> |
|---|
| | | <button class="layui-btn layui-btn-sm" id="btn-delete" lay-event="deleteData">删除</button> |
|---|
| | | <button class="layui-btn layui-btn-primary layui-btn-sm" id="btn-export" lay-event="exportData">导出</button> |
|---|
| | | </div> |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <script type="text/html" id="operate"> |
|---|
| | | <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="power">权限</a> |
|---|
| | | <a class="layui-btn layui-btn-xs btn-edit" lay-event="edit">编辑</a> |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/common.js?v=20260309_i18n_fix1" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/role/role.js" charset="utf-8"></script> |
|---|
| | | |
|---|
| | | <iframe id="detail-iframe" scrolling="auto" style="display:none;"></iframe> |
|---|
| | | |
|---|
| | | <script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script> |
|---|
| | | <script type="text/javascript" src="../../static/vue/js/vue.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../../static/vue/element/element.js"></script> |
|---|
| | | <script type="text/javascript" src="../../static/js/role/role.js?v=20260310_role_vue_custom" charset="utf-8"></script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
