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/userLogin/userLogin.html | 436 ++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 391 insertions(+), 45 deletions(-)
diff --git a/src/main/webapp/views/userLogin/userLogin.html b/src/main/webapp/views/userLogin/userLogin.html
index f63c53a..d28644c 100644
--- a/src/main/webapp/views/userLogin/userLogin.html
+++ b/src/main/webapp/views/userLogin/userLogin.html
@@ -1,61 +1,407 @@
<!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.user {
+ 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.user {
+ 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 cool-auto-complete">
- <input id="userId" class="layui-input" name="user_id" type="text" placeholder="璇疯緭鍏�" autocomplete="off" style="display: none">
- <input id="userUsername" 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="userQuery" onkeyup="autoLoad(this.getAttribute('data-key'))">
- <select class="cool-auto-complete-window-select" data-key="userQuerySelect" 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.userId"
+ class="search-item user"
+ clearable
+ filterable
+ remote
+ reserve-keyword
+ placeholder="鐢ㄦ埛"
+ :remote-method="searchUserOptions"
+ :loading="userSearchLoading">
+ <el-option
+ v-for="item in userSearchOptions"
+ :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 label="鍛樺伐" min-width="180" show-overflow-tooltip>
+ <template slot-scope="scope">
+ <span
+ v-if="scope.row.userId && scope.row.userUsername"
+ class="action-link"
+ @click="openUserDetail(scope.row)">
+ {{ scope.row.userUsername }}
+ </span>
+ <span v-else>--</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="token" label="鍑瘉鍊�" min-width="300" show-overflow-tooltip></el-table-column>
+ <el-table-column label="娣诲姞鏃堕棿" min-width="180" show-overflow-tooltip>
+ <template slot-scope="scope">
+ {{ scope.row['createTime$'] || '--' }}
+ </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="loginDialog.mode === 'create' ? '鏂板鍑瘉' : loginDialog.readonly ? '鍑瘉璇︽儏' : '缂栬緫鍑瘉'"
+ :visible.sync="loginDialog.visible"
+ width="760px"
+ :close-on-click-modal="false">
+ <el-form
+ ref="loginForm"
+ :model="loginForm"
+ :rules="loginRules"
+ label-width="90px"
+ size="small">
+ <el-row :gutter="16">
+ <el-col :span="12">
+ <el-form-item label="鍛樺伐" prop="userId">
+ <el-select
+ v-model="loginForm.userId"
+ clearable
+ filterable
+ remote
+ reserve-keyword
+ style="width: 100%;"
+ placeholder="璇烽�夋嫨鍛樺伐"
+ :disabled="loginDialog.readonly"
+ :remote-method="searchDialogUserOptions"
+ :loading="dialogUserLoading">
+ <el-option
+ v-for="item in dialogUserOptions"
+ :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="token">
+ <el-input v-model.trim="loginForm.token" :disabled="loginDialog.readonly" placeholder="璇疯緭鍏ュ嚟璇佸��"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="娣诲姞鏃堕棿" prop="createTime">
+ <el-date-picker
+ v-model="loginForm.createTime"
+ type="datetime"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ style="width: 100%;"
+ :disabled="loginDialog.readonly"
+ placeholder="璇烽�夋嫨娣诲姞鏃堕棿">
+ </el-date-picker>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="loginDialog.visible = false">{{ loginDialog.readonly ? '鍏抽棴' : '鍙栨秷' }}</el-button>
+ <el-button v-if="!loginDialog.readonly" type="primary" :loading="loginDialog.submitting" @click="submitLogin">淇濆瓨</el-button>
+ </div>
+ </el-dialog>
+
+ <el-dialog
+ class="dialog-panel"
+ title="鍛樺伐璇︽儏"
+ :visible.sync="userDetail.visible"
+ width="720px"
+ :close-on-click-modal="false">
+ <div class="detail-block">
+ <div class="detail-item">
+ <div class="detail-label">缂栧彿</div>
+ <div class="detail-value">{{ userDetail.data.id || '--' }}</div>
+ </div>
+ <div class="detail-item">
+ <div class="detail-label">璐﹀彿</div>
+ <div class="detail-value">{{ userDetail.data.mobile || '--' }}</div>
+ </div>
+ <div class="detail-item">
+ <div class="detail-label">鍚嶇О</div>
+ <div class="detail-value">{{ userDetail.data.username || '--' }}</div>
+ </div>
+ <div class="detail-item">
+ <div class="detail-label">瑙掕壊</div>
+ <div class="detail-value">{{ userDetail.data.roleName || '--' }}</div>
+ </div>
+ <div class="detail-item">
+ <div class="detail-label">娉ㄥ唽鏃堕棿</div>
+ <div class="detail-value">{{ userDetail.data['createTime$'] || '--' }}</div>
+ </div>
+ <div class="detail-item">
+ <div class="detail-label">鐘舵��</div>
+ <div class="detail-value">{{ userDetail.data['status$'] || '--' }}</div>
+ </div>
+ </div>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="userDetail.visible = false">鍏抽棴</el-button>
+ </div>
+ </el-dialog>
</div>
-<!-- 琛ㄦ牸 -->
-<table class="layui-hide" id="userLogin" lay-filter="userLogin"></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/userLogin/userLogin.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/userLogin/userLogin.js?v=20260310_userlogin_vue_custom" charset="utf-8"></script>
</body>
</html>
-
--
Gitblit v1.9.1