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/resource/resource.html | 583 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 292 insertions(+), 291 deletions(-)
diff --git a/src/main/webapp/views/resource/resource.html b/src/main/webapp/views/resource/resource.html
index a762410..89ce72e 100644
--- a/src/main/webapp/views/resource/resource.html
+++ b/src/main/webapp/views/resource/resource.html
@@ -1,309 +1,310 @@
<!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/admin.css?v=318" 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>
- #detail {
- padding: 25px 30px 0 0;
+ :root {
+ --card-bg: rgba(255, 255, 255, 0.94);
+ --card-border: rgba(216, 226, 238, 0.95);
+ --text-main: #243447;
}
- .ew-tree-table-box {
- height: 100%;
+
+ [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: 10px;
+ 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-bar .el-button {
+ padding: 8px 12px;
+ border-radius: 8px;
+ }
+
+ .toolbar-title {
+ font-size: 13px;
+ color: #7a8a9f;
+ }
+
+ .toolbar-title strong {
+ color: var(--text-main);
+ font-size: 15px;
+ margin-right: 8px;
+ }
+
+ .table-wrap {
+ padding: 10px 16px 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;
+ }
+
+ .menu-name {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ }
+
+ .status-tag,
+ .level-tag {
+ min-width: 54px;
+ text-align: center;
+ }
+
+ .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 8px;
+ }
+
+ .dialog-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+ }
+
+ .empty-wrap {
+ padding: 54px 0 72px;
+ }
+
+ @media (max-width: 900px) {
+ .page-shell {
+ padding: 10px;
+ }
+
+ .toolbar-bar,
+ .table-wrap {
+ padding-left: 12px;
+ padding-right: 12px;
+ }
}
</style>
</head>
<body>
-
-
-<!-- 姝ｆ枃寮�濮� -->
-<div class="layui-fluid">
- <div class="layui-card">
- <div class="layui-card-body">
- <!-- 鏁版嵁琛ㄦ牸 -->
- <table id="resource"></table>
+<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>
+ <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="expandAll ? 'el-icon-folder-opened' : 'el-icon-folder'" @click="toggleExpandAll">
+ {{ expandAll ? '鏀惰捣鍏ㄩ儴' : '灞曞紑鍏ㄩ儴' }}
+ </el-button>
+ <el-button size="small" plain icon="el-icon-refresh" :loading="loading" @click="loadTree">鍒锋柊</el-button>
+ </div>
</div>
- </div>
+
+ <div class="table-wrap">
+ <div class="table-shell">
+ <el-table
+ ref="treeTable"
+ v-loading="loading"
+ :key="'resource-tree-' + tableKey"
+ :data="tableData"
+ row-key="id"
+ border
+ stripe
+ :default-expand-all="expandAll"
+ :tree-props="{ children: 'children' }"
+ :height="tableHeight"
+ @selection-change="handleSelectionChange">
+ <el-table-column type="selection" width="52" align="center"></el-table-column>
+ <el-table-column label="鑿滃崟鍚嶇О" min-width="260">
+ <template slot-scope="scope">
+ <div class="menu-name">
+ <span>{{ scope.row.name }}</span>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="code" label="鑿滃崟缂栫爜" min-width="220" show-overflow-tooltip></el-table-column>
+ <el-table-column label="涓婄骇鑿滃崟" min-width="180" show-overflow-tooltip>
+ <template slot-scope="scope">
+ {{ parentName(scope.row.resourceId) || '--' }}
+ </template>
+ </el-table-column>
+ <el-table-column label="绫诲瀷" width="120" align="center">
+ <template slot-scope="scope">
+ <el-tag class="level-tag" size="mini" :type="levelTagType(scope.row.level)">
+ {{ levelText(scope.row.level) }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column prop="sort" label="鎺掑簭" width="90" align="center"></el-table-column>
+ <el-table-column label="鐘舵��" width="100" align="center">
+ <template slot-scope="scope">
+ <el-tag class="status-tag" size="mini" :type="Number(scope.row.status) === 1 ? 'success' : 'info'">
+ {{ Number(scope.row.status) === 1 ? '姝ｅ父' : '绂佺敤' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="150" fixed="right" align="center">
+ <template slot-scope="scope">
+ <el-button type="text" @click="openEditDialog(scope.row)">淇敼</el-button>
+ <el-button type="text" style="color:#f56c6c;" @click="removeRows([scope.row.id])">鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div v-if="!loading && tableData.length === 0" class="empty-wrap">
+ <el-empty description="鏆傛棤鑿滃崟鏁版嵁"></el-empty>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <el-dialog
+ class="dialog-panel"
+ :title="dialog.mode === 'create' ? '鏂板鑿滃崟' : '淇敼鑿滃崟'"
+ :visible.sync="dialog.visible"
+ width="680px"
+ :close-on-click-modal="false">
+ <el-form
+ ref="dialogForm"
+ :model="dialogForm"
+ :rules="dialogRules"
+ label-width="100px"
+ size="small">
+ <el-row :gutter="16">
+ <el-col :span="12">
+ <el-form-item label="涓婄骇鑿滃崟" prop="resourceId">
+ <el-cascader
+ v-model="dialogForm.resourceId"
+ :options="parentOptions"
+ :props="parentCascaderProps"
+ clearable
+ filterable
+ style="width: 100%;"
+ placeholder="璇烽�夋嫨涓婄骇鑿滃崟">
+ </el-cascader>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鑿滃崟缂栫爜" prop="code">
+ <el-input v-model.trim="dialogForm.code" placeholder="璇疯緭鍏ヨ彍鍗曠紪鐮�"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="绫诲瀷" prop="level">
+ <el-select v-model="dialogForm.level" placeholder="璇烽�夋嫨绫诲瀷" style="width: 100%;">
+ <el-option label="涓�绾ц彍鍗�" :value="1"></el-option>
+ <el-option label="浜岀骇鑿滃崟" :value="2"></el-option>
+ <el-option label="鎸夐挳" :value="3"></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鑿滃崟鍚嶇О" prop="name">
+ <el-input v-model.trim="dialogForm.name" placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鎺掑簭" prop="sort">
+ <el-input v-model.number="dialogForm.sort" placeholder="璇疯緭鍏ユ帓搴�"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="鐘舵��" prop="status">
+ <el-select v-model="dialogForm.status" placeholder="璇烽�夋嫨鐘舵��" style="width: 100%;">
+ <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="dialog.visible = false">鍙栨秷</el-button>
+ <el-button type="primary" :loading="dialog.submitting" @click="submitDialog">淇濆瓨</el-button>
+ </div>
+ </el-dialog>
</div>
-<script type="text/html" id="operate">
- <a class="layui-btn layui-btn-primary layui-btn-xs btn-edit" lay-event="edit">淇敼</a>
- <a class="layui-btn layui-btn-danger layui-btn-xs btn-del" lay-event="del">鍒犻櫎</a>
-</script>
-
-<!-- 琛ㄥ崟寮圭獥 -->
-<script type="text/html" id="editDialog">
- <form id="detail" lay-filter="detail" class="layui-form" style="margin: 0">
- <input name="id" type="hidden">
- <input name="uuid" type="hidden">
- <input name="level" type="hidden">
- <div class="layui-row">
-
- <div class="layui-col-md6">
-
- <div class="layui-form-item">
- <label class="layui-form-label">涓婄骇鑿滃崟</label>
- <div class="layui-input-block">
- <div id="resourceParentSel" class="ew-xmselect-tree"></div>
- </div>
- </div>
-
- <div class="layui-form-item">
- <label class="layui-form-label layui-form-required">鑿滃崟缂栫爜</label>
- <div class="layui-input-block">
- <input name="code" placeholder="璇疯緭鍏ヨ彍鍗曠紪鐮�" class="layui-input" lay-vertype="tips" lay-verify="required" required="">
- </div>
- </div>
-
- <div class="layui-form-item">
- <label class="layui-form-label layui-form-required">绫诲瀷</label>
- <div class="layui-input-block">
- <select name="level" lay-vertype="tips" lay-verify="required" required="">
- <option value="">璇烽�夋嫨绫诲瀷</option>
- <option value="1">涓�绾ц彍鍗�</option>
- <option value="2">浜岀骇鑿滃崟</option>
- <option value="3">鎸夐挳</option>
- </select>
- </div>
- </div>
-
- </div>
-
- <div class="layui-col-md6">
-
- <div class="layui-form-item">
- <label class="layui-form-label layui-form-required">鑿滃崟鍚嶇О</label>
- <div class="layui-input-block">
- <input name="name" placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�" class="layui-input" lay-vertype="tips" lay-verify="required" required="">
- </div>
- </div>
-
- <div class="layui-form-item">
- <label class="layui-form-label">鎺掑簭</label>
- <div class="layui-input-block">
- <input name="sort" placeholder="璇疯緭鍏ユ帓搴�" class="layui-input" lay-verify="number">
- </div>
- </div>
-
- <div class="layui-form-item">
- <label class="layui-form-label layui-form-required">鐘舵��</label>
- <div class="layui-input-block">
- <select name="status" lay-vertype="tips" lay-verify="required" required="">
- <option value="">璇烽�夋嫨鐘舵��</option>
- <option value="1">姝ｅ父</option>
- <option value="0">绂佺敤</option>
- </select>
- </div>
- </div>
-
- </div>
- </div>
- <hr class="layui-bg-gray">
- <div class="layui-form-item text-right">
- <button class="layui-btn" lay-filter="editSubmit" lay-submit="">淇濆瓨</button>
- <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">鍙栨秷</button>
- </div>
- </form>
-</script>
-<script type="text/html" id="typeTpl">
- {{# if( d.level === 1 ){ }}
- <span name="level" class="layui-badge layui-badge-green">鑿滃崟</span>
- {{# } else if(d.level === 2){ }}
- <span name="level" class="layui-badge layui-badge-green">鑿滃崟</span>
- {{# } else if(d.level === 3){ }}
- <span name="level" class="layui-badge layui-badge-gray">鎸夐挳</span>
- {{# } }}
-</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>
- layui.config({
- base: baseUrl + "/static/layui/lay/modules/"
- }).use(['form','treeTable', 'admin', 'xmSelect'], function() {
- var $ = layui.jquery;
- var layer = layui.layer;
- var form = layui.form;
- var admin = layui.admin;
- var treeTable = layui.treeTable;
- var xmSelect = layui.xmSelect;
- var tbDataList = [];
-
- var insTb = treeTable.render({
- elem: '#resource',
- url: baseUrl+'/resource/tree/auth',
- headers: {token: localStorage.getItem('token')},
- height: 'full-200',
- toolbar: ['<p>',
- '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon"></i>娣诲姞</button> ',
- '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon"></i>鍒犻櫎</button>',
- '</p>'].join(''),
- tree: {
- iconIndex: 2, // 鎶樺彔鍥炬爣鏄剧ず鍦ㄧ鍑犲垪
- isPidData: true, // 鏄惁鏄痠d銆乸id褰㈠紡鏁版嵁
- idName: 'id', // id瀛楁鍚嶇О
- pidName: 'resourceId' // pid瀛楁鍚嶇О
- },
- cols: [[
- {type: 'checkbox', fixed: 'left'}
- ,{field: 'id', title: 'ID', sort: true,align: 'center', fixed: 'left', width: 80, hide: true}
- ,{field: 'name', align: 'left',title: '鑿滃崟鍚嶇О'}
- ,{field: 'code', align: 'center',title: '鑿滃崟缂栫爜'}
- // ,{field: 'resourceName', align: 'center',title: '鐖剁骇鑿滃崟'}
- // ,{field: 'level$', align: 'center',title: '鑿滃崟绛夌骇'}
- ,{field: 'type', align: 'center',title: '绫诲瀷', templet: '#typeTpl', width: 120}
- ,{field: 'sort', align: 'center',title: '鎺掑簭'}
-
- ,{fixed: 'right', title:'鎿嶄綔', align: 'center', toolbar: '#operate', width:150}
- ]],
- done: function (data) {
- $('.ew-tree-table-box').css('height', '100%');
- // insTb.expandAll();
- tbDataList = data;
- limit();
- }
- });
-
- /* 琛ㄦ牸澶村伐鍏锋爮鐐瑰嚮浜嬩欢 */
- treeTable.on('toolbar(resource)', function (obj) {
- if (obj.event === 'add') { // 娣诲姞
- showEditModel();
- } else if (obj.event === 'del') { // 鍒犻櫎
- var checkRows = insTb.checkStatus();
- if (checkRows.length === 0) {
- layer.msg('璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁', {icon: 2});
- return;
- }
- var ids = checkRows.map(function (d) {
- if (!d.LAY_INDETERMINATE) {
- return d.id;
- } else {
- return null;
- }
- });
- doDel({ids: ids});
- }
- });
-
- /* 琛ㄦ牸鎿嶄綔鍒楃偣鍑讳簨浠� */
- treeTable.on('tool(resource)', function (obj) {
- if (obj.event === 'edit') { // 淇敼
- showEditModel(obj.data);
- } else if (obj.event === 'del') { // 鍒犻櫎
- doDel(obj);
- }
- });
-
- /* 鏄剧ず琛ㄥ崟寮圭獥 */
- function showEditModel(mData) {
- admin.open({
- type: 1,
- area: '600px',
- title: (mData ? '淇敼' : '娣诲姞') + '鏉冮檺',
- content: $('#editDialog').html(),
- success: function (layero, dIndex) {
- // 鍥炴樉琛ㄥ崟鏁版嵁
- form.val('detail', mData);
- // 琛ㄥ崟鎻愪氦浜嬩欢
- form.on('submit(editSubmit)', function (data) {
- data.field.resourceId = insXmSel.getValue('valueStr');
- var loadIndex = layer.load(2);
- $.ajax({
- url: baseUrl+"/resource/"+(mData?'update':'add')+"/auth",
- headers: {'token': localStorage.getItem('token')},
- data: data.field,
- method: 'POST',
- success: function (res) {
- layer.close(loadIndex);
- if (res.code === 200){
- layer.close(dIndex);
- layer.msg(res.msg, {icon: 1});
- insTb.refresh();
- setTimeout(function () {
- insTb.expand(data.field.resourceId);
- }, 200)
- } else if (res.code === 403){
- top.location.href = baseUrl+"/";
- }else {
- layer.msg(res.msg, {icon: 2});
- }
- }
- })
- return false;
- });
-
- // 娓叉煋涓嬫媺鏍�
- var insXmSel = xmSelect.render({
- el: '#resourceParentSel',
- height: '250px',
- data: insTb.options.data,
- initValue: mData&&mData.resourceId!=null ? [mData.resourceId] : [],
- model: {label: {type: 'text'}},
- prop: {
- name: 'name',
- value: 'id'
- },
- radio: true,
- clickClose: true,
- tree: {
- show: true,
- indent: 15,
- strict: false,
- expandedKeys: false
- }
- });
- // 寮圭獥涓嶅嚭鐜版粴鍔ㄦ潯
- $(layero).children('.layui-layer-content').css('overflow', 'visible');
- layui.form.render('select');
- }
- });
- }
-
- /* 鍒犻櫎 */
- function doDel(obj) {
- layer.confirm('纭畾瑕佸垹闄ら�変腑鏁版嵁鍚楋紵', {
- skin: 'layui-layer-admin',
- shade: .1
- }, function (i) {
- layer.close(i);
- var loadIndex = layer.load(2);
- var ids;
- if (obj.data) {
- ids = [];
- ids[0] = obj.data.id;
- } else {
- ids = obj.ids;
- }
- $.ajax({
- url: baseUrl+"/resource/delete/auth",
- headers: {'token': localStorage.getItem('token')},
- data: {ids: ids},
- method: 'POST',
- success: function (res) {
- layer.close(loadIndex);
- if (res.code === 200){
- layer.msg(res.msg, {icon: 1});
- insTb.refresh();
- } else if (res.code === 403){
- top.location.href = baseUrl+"/";
- } else {
- layer.msg(res.msg, {icon: 2});
- }
- }
- })
- });
- }
-
- });
-</script>
+<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/resource/resource.js?v=20260310_resource_vue" charset="utf-8"></script>
</body>
</html>
-
--
Gitblit v1.9.1