| | |
|---|
| | | <!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.id { |
|---|
| | | width: 120px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-item.resource { |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .action-link { |
|---|
| | | color: #2f6bcb; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-block { |
|---|
| | | display: grid; |
|---|
| | | grid-template-columns: repeat(2, minmax(0, 1fr)); |
|---|
| | | gap: 14px 18px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-item { |
|---|
| | | min-width: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-item.full { |
|---|
| | | grid-column: 1 / -1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-label { |
|---|
| | | font-size: 12px; |
|---|
| | | color: #7c8a9d; |
|---|
| | | margin-bottom: 6px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-value { |
|---|
| | | min-height: 32px; |
|---|
| | | padding: 8px 10px; |
|---|
| | | border: 1px solid rgba(220, 229, 238, 0.95); |
|---|
| | | border-radius: 10px; |
|---|
| | | background: #f9fbfd; |
|---|
| | | color: var(--text-main); |
|---|
| | | word-break: break-all; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @media (max-width: 900px) { |
|---|
| | | .page-shell { |
|---|
| | | padding: 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .toolbar-bar, |
|---|
| | | .table-wrap, |
|---|
| | | .pager-bar { |
|---|
| | | padding-left: 12px; |
|---|
| | | padding-right: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-item.id, |
|---|
| | | .search-item.resource { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .detail-block { |
|---|
| | | grid-template-columns: 1fr; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | |
|---|
| | | <!-- 搜索栏 --> |
|---|
| | | <div id="search-box" class="layui-form layui-card-header"> |
|---|
| | | <div class="layui-inline"> |
|---|
| | | <div class="layui-input-inline"> |
|---|
| | | <input class="layui-input" type="text" name="id" placeholder="编号" autocomplete="off"> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="layui-inline"> |
|---|
| | | <div class="layui-input-inline cool-auto-complete"> |
|---|
| | | <input id="resourceId" class="layui-input" name="resource_id" type="text" placeholder="请输入" autocomplete="off" style="display: none"> |
|---|
| | | <input id="resourceName" 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="resourceQuery" onkeyup="autoLoad(this.getAttribute('data-key'))"> |
|---|
| | | <select class="cool-auto-complete-window-select" data-key="resourceQuerySelect" 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-input |
|---|
| | | v-model.trim="searchForm.id" |
|---|
| | | class="search-item id" |
|---|
| | | clearable |
|---|
| | | placeholder="编号"> |
|---|
| | | </el-input> |
|---|
| | | <el-select |
|---|
| | | v-model="searchForm.resourceId" |
|---|
| | | class="search-item resource" |
|---|
| | | clearable |
|---|
| | | filterable |
|---|
| | | remote |
|---|
| | | reserve-keyword |
|---|
| | | placeholder="所属菜单" |
|---|
| | | :remote-method="searchResourceOptions" |
|---|
| | | :loading="resourceSearchLoading"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in resourceSearchOptions" |
|---|
| | | :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="name" label="权限名称" min-width="180" show-overflow-tooltip></el-table-column> |
|---|
| | | <el-table-column prop="action" label="接口地址" min-width="240" show-overflow-tooltip></el-table-column> |
|---|
| | | <el-table-column label="所属菜单" min-width="180" show-overflow-tooltip> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <span |
|---|
| | | v-if="scope.row.resourceId && scope.row.resourceName" |
|---|
| | | class="action-link" |
|---|
| | | @click="openResourceDetail(scope.row)"> |
|---|
| | | {{ scope.row.resourceName }} |
|---|
| | | </span> |
|---|
| | | <span v-else>--</span> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column label="状态" width="100" align="center"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | {{ scope.row['status$'] || '--' }} |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column label="操作" width="150" fixed="right" align="center"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-button type="text" @click="openDetailDialog(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="permissionDialog.mode === 'create' ? '新增权限' : permissionDialog.readonly ? '权限详情' : '编辑权限'" |
|---|
| | | :visible.sync="permissionDialog.visible" |
|---|
| | | width="720px" |
|---|
| | | :close-on-click-modal="false"> |
|---|
| | | <el-form |
|---|
| | | ref="permissionForm" |
|---|
| | | :model="permissionForm" |
|---|
| | | :rules="permissionRules" |
|---|
| | | label-width="90px" |
|---|
| | | size="small"> |
|---|
| | | <el-row :gutter="16"> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="权限名称" prop="name"> |
|---|
| | | <el-input v-model.trim="permissionForm.name" :disabled="permissionDialog.readonly" placeholder="请输入权限名称"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="接口地址" prop="action"> |
|---|
| | | <el-input v-model.trim="permissionForm.action" :disabled="permissionDialog.readonly" placeholder="请输入接口地址"></el-input> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="所属菜单" prop="resourceId"> |
|---|
| | | <el-select |
|---|
| | | v-model="permissionForm.resourceId" |
|---|
| | | clearable |
|---|
| | | filterable |
|---|
| | | remote |
|---|
| | | reserve-keyword |
|---|
| | | style="width: 100%;" |
|---|
| | | placeholder="请选择所属菜单" |
|---|
| | | :disabled="permissionDialog.readonly" |
|---|
| | | :remote-method="searchDialogResourceOptions" |
|---|
| | | :loading="dialogResourceLoading"> |
|---|
| | | <el-option |
|---|
| | | v-for="item in dialogResourceOptions" |
|---|
| | | :key="'dialog-' + item.id" |
|---|
| | | :label="item.value" |
|---|
| | | :value="item.id"> |
|---|
| | | </el-option> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | <el-col :span="12"> |
|---|
| | | <el-form-item label="状态" prop="status"> |
|---|
| | | <el-select v-model="permissionForm.status" :disabled="permissionDialog.readonly" style="width: 100%;" placeholder="请选择状态"> |
|---|
| | | <el-option label="正常" :value="1"></el-option> |
|---|
| | | <el-option label="禁用" :value="0"></el-option> |
|---|
| | | </el-select> |
|---|
| | | </el-form-item> |
|---|
| | | </el-col> |
|---|
| | | </el-row> |
|---|
| | | </el-form> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button @click="permissionDialog.visible = false">{{ permissionDialog.readonly ? '关闭' : '取消' }}</el-button> |
|---|
| | | <el-button v-if="!permissionDialog.readonly" type="primary" :loading="permissionDialog.submitting" @click="submitPermission">保存</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | |
|---|
| | | <el-dialog |
|---|
| | | class="dialog-panel" |
|---|
| | | title="所属菜单详情" |
|---|
| | | :visible.sync="resourceDetail.visible" |
|---|
| | | width="640px" |
|---|
| | | :close-on-click-modal="false"> |
|---|
| | | <div class="detail-block"> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">编号</div> |
|---|
| | | <div class="detail-value">{{ resourceDetail.data.id || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">菜单编码</div> |
|---|
| | | <div class="detail-value">{{ resourceDetail.data.code || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">菜单名称</div> |
|---|
| | | <div class="detail-value">{{ resourceDetail.data.name || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">父级菜单</div> |
|---|
| | | <div class="detail-value">{{ resourceDetail.data.resourceName || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">菜单等级</div> |
|---|
| | | <div class="detail-value">{{ resourceDetail.data['level$'] || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item"> |
|---|
| | | <div class="detail-label">排序</div> |
|---|
| | | <div class="detail-value">{{ resourceDetail.data.sort || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | <div class="detail-item full"> |
|---|
| | | <div class="detail-label">状态</div> |
|---|
| | | <div class="detail-value">{{ resourceDetail.data['status$'] || '--' }}</div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div slot="footer" class="dialog-footer"> |
|---|
| | | <el-button @click="resourceDetail.visible = false">关闭</el-button> |
|---|
| | | </div> |
|---|
| | | </el-dialog> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 表格 --> |
|---|
| | | <table class="layui-hide" id="permission" lay-filter="permission"></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-primary layui-btn-xs" lay-event="detail">详情</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/permission/permission.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/permission/permission.js?v=20260310_permission_vue_custom" charset="utf-8"></script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| | | |
|---|
