From a637cdb04ab7e0954196ad0d8e7cc24ae22ee93a Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期二, 10 三月 2026 13:22:22 +0800
Subject: [PATCH] #
---
src/main/webapp/views/role/role.html | 375 +++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 331 insertions(+), 44 deletions(-)
diff --git a/src/main/webapp/views/role/role.html b/src/main/webapp/views/role/role.html
index b0635fe..79084bd 100644
--- a/src/main/webapp/views/role/role.html
+++ b/src/main/webapp/views/role/role.html
@@ -1,59 +1,346 @@
<!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>
--
Gitblit v1.9.1