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/permission/permission.html | 458 +++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 408 insertions(+), 50 deletions(-)
diff --git a/src/main/webapp/views/permission/permission.html b/src/main/webapp/views/permission/permission.html
index b73d0e3..4fadf6f 100644
--- a/src/main/webapp/views/permission/permission.html
+++ b/src/main/webapp/views/permission/permission.html
@@ -1,66 +1,424 @@
<!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>
-
--
Gitblit v1.9.1