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/detail.html | 406 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 258 insertions(+), 148 deletions(-)
diff --git a/src/main/webapp/views/detail.html b/src/main/webapp/views/detail.html
index 9a7739c..e62b4ae 100644
--- a/src/main/webapp/views/detail.html
+++ b/src/main/webapp/views/detail.html
@@ -1,172 +1,282 @@
<!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">
- <script type="text/javascript" src="../static/js/common.js?v=20260309_i18n_fix1"></script>
+ <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.96);
+ --card-border: rgba(216, 226, 238, 0.96);
+ --text-main: #243447;
+ }
+
+ [v-cloak] {
+ display: none;
+ }
+
+ html,
body {
- background-color: #fff;
+ margin: 0;
+ min-height: 100%;
+ color: var(--text-main);
+ font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
+ background: #f5f7fb;
}
- #container {
- padding: 15px;
- margin-top: 15px
+
+ .page-shell {
+ padding: 14px 16px;
+ box-sizing: border-box;
}
- .layui-card-body {
- padding: 20px 15px 5px 15px;
+
+ .card-shell {
+ max-width: 860px;
+ margin: 0 auto;
+ border-radius: 16px;
+ border: 1px solid var(--card-border);
+ background: var(--card-bg);
+ box-shadow: 0 8px 20px rgba(44, 67, 96, 0.05);
+ overflow: hidden;
}
- .layui-form-item {
- margin-bottom: 18px;
+
+ .card-head {
+ padding: 16px 20px 12px;
+ border-bottom: 1px solid rgba(222, 230, 239, 0.92);
+ background: #f8fbff;
}
- .layui-form-label {
- color: #999!important;;
- width: 60px;
+
+ .card-title {
+ font-size: 16px;
+ font-weight: 700;
+ color: var(--text-main);
}
- .layui-input-block {
- margin-left: 90px;
+
+ .card-body {
+ padding: 18px 20px 16px;
}
- #update-password {
- padding: 0 20px 0 15px;
+
+ .form-shell {
+ max-width: 740px;
+ margin: 0 auto;
}
- .layui-btn .layui-icon {
- margin-right: 0;
+
+ .profile-form .el-form-item {
+ margin-bottom: 14px;
+ }
+
+ .profile-form .el-form-item__label {
+ font-weight: 600;
+ color: #5c6f82;
+ }
+
+ .profile-form .el-input__inner,
+ .profile-form .el-button {
+ height: 34px;
+ line-height: 34px;
+ }
+
+ .profile-form .el-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 16px;
+ vertical-align: middle;
+ }
+
+ .profile-form .el-button [class^="el-icon-"],
+ .profile-form .el-button [class*=" el-icon-"] {
+ line-height: 1;
+ margin-right: 6px;
+ }
+
+ .password-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .password-mask {
+ width: 100%;
+ }
+
+ .password-row .el-button {
+ min-width: 118px;
+ flex: 0 0 118px;
+ }
+
+ .footer-bar {
+ display: flex;
+ justify-content: flex-end;
+ padding-top: 4px;
+ }
+
+ .footer-bar .el-button {
+ min-width: 118px;
+ }
+
+ .password-dialog .el-dialog {
+ border-radius: 18px;
+ overflow: hidden;
+ }
+
+ .password-dialog .el-dialog__header {
+ padding: 18px 20px 12px;
+ border-bottom: 1px solid rgba(222, 230, 239, 0.92);
+ background: #f8fbff;
+ }
+
+ .password-dialog .el-dialog__title {
+ font-weight: 700;
+ color: var(--text-main);
+ }
+
+ .password-dialog .el-dialog__body {
+ padding: 18px 20px 12px;
+ }
+
+ .password-form .el-form-item {
+ margin-bottom: 16px;
+ }
+
+ .password-form .el-form-item__label {
+ font-weight: 600;
+ color: #5c6f82;
+ white-space: nowrap;
+ }
+
+ .password-form .el-input__inner,
+ .password-form .el-button {
+ height: 34px;
+ line-height: 34px;
+ }
+
+ .password-form .el-button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 120px;
+ padding: 0 18px;
+ }
+
+ .password-footer {
+ display: flex;
+ justify-content: center;
+ gap: 12px;
+ padding-top: 4px;
+ }
+
+ @media (max-width: 768px) {
+ .page-shell {
+ padding: 10px;
+ }
+
+ .password-row {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .form-shell {
+ max-width: none;
+ }
}
</style>
</head>
-<body id="body">
-<div id="container">
- <fieldset class="layui-elem-field">
- <legend>璁剧疆鎴戠殑璧勬枡</legend>
- <div class="layui-card-body">
- <div id="person-detail" class="layui-form">
- <div class="layui-form-item" style="display: none">
- <label class="layui-form-label">缂栧彿</label>
- <div class="layui-input-inline">
- <input id="id" class="layui-input" type="text" placeholder="璇疯緭鍏�" autocomplete="off">
+<body>
+<div id="app" class="page-shell" v-cloak>
+ <section class="card-shell">
+ <div class="card-head">
+ <div class="card-title">璁剧疆鎴戠殑璧勬枡</div>
+ </div>
+ <div class="card-body">
+ <div class="form-shell">
+ <input id="id" type="hidden" v-model="form.id">
+ <input id="password" type="hidden" v-model="form.password">
+ <el-form
+ ref="profileForm"
+ class="profile-form"
+ :model="form"
+ :rules="rules"
+ label-width="78px"
+ size="small"
+ @submit.native.prevent>
+ <el-row :gutter="16">
+ <el-col :xs="24" :sm="12">
+ <el-form-item label="瑙掕壊">
+ <el-input id="roleName" v-model="form.roleName" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12">
+ <el-form-item label="娉ㄥ唽鏃堕棿">
+ <el-input v-model="form.createTime$" disabled></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12">
+ <el-form-item label="鍚嶇О" prop="username">
+ <el-input id="username" v-model.trim="form.username" maxlength="50" clearable placeholder="璇疯緭鍏�"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12">
+ <el-form-item label="璐﹀彿" prop="mobile">
+ <el-input id="mobile" v-model.trim="form.mobile" maxlength="50" clearable placeholder="璇疯緭鍏�"></el-input>
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24">
+ <el-form-item label="瀵嗙爜">
+ <div class="password-row">
+ <el-input class="password-mask" value="宸茶缃瘑鐮�" disabled></el-input>
+ <el-button type="primary" plain icon="el-icon-lock" @click="openPasswordDialog">淇敼瀵嗙爜</el-button>
+ </div>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <div class="footer-bar">
+ <el-button type="primary" :loading="saving" @click="handleSave">纭淇敼</el-button>
</div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">瑙掕壊</label>
- <div class="layui-input-inline">
- <input id="roleName" class="layui-input" type="text" placeholder="璇疯緭鍏�" autocomplete="off" disabled="disabled">
- </div>
- <div class="layui-form-mid layui-word-aux">褰撳墠瑙掕壊涓嶅彲鏇存敼涓哄叾瀹冭鑹�</div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">鍚嶇О</label>
- <div class="layui-input-inline">
- <input id="username" class="layui-input" type="text" placeholder="璇疯緭鍏�" autocomplete="off">
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">璐﹀彿</label>
- <div class="layui-input-inline">
- <input id="mobile" class="layui-input" type="text" placeholder="璇疯緭鍏�" autocomplete="off">
- </div>
- <div class="layui-form-mid layui-word-aux">閲嶈锛佷竴鑸敤浜庡悗鍙扮櫥鍏�</div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">瀵嗙爜</label>
- <div class="layui-input-inline">
- <input id="password" class="layui-input" type="text" placeholder="璇疯緭鍏�" autocomplete="off" style="display: none">
- <button id="update-password" class="layui-btn layui-btn-primary">
- <i class="layui-icon"></i>
- 淇敼瀵嗙爜
- </button>
- </div>
- </div>
- <div class="layui-form-item">
- <label class="layui-form-label">娉ㄥ唽鏃堕棿</label>
- <div class="layui-input-inline">
- <input id="createTime$" class="layui-input" type="text" placeholder="璇疯緭鍏�" autocomplete="off" disabled="disabled">
- </div>
- <div class="layui-form-mid layui-word-aux">涓嶅彲淇敼</div>
- </div>
- <div class="layui-form-item">
- <div class="layui-input-block">
- <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="save">纭淇敼</button>
- </div>
- </div>
+ </el-form>
</div>
</div>
- </fieldset>
+ </section>
+
+ <el-dialog
+ class="password-dialog"
+ title="淇敼瀵嗙爜"
+ :visible.sync="passwordDialogVisible"
+ width="420px"
+ :close-on-click-modal="false"
+ append-to-body>
+ <el-form
+ ref="passwordForm"
+ class="password-form"
+ :model="passwordForm"
+ :rules="passwordRules"
+ label-width="112px"
+ size="small"
+ @submit.native.prevent>
+ <el-form-item label="褰撳墠瀵嗙爜" prop="oldPassword">
+ <el-input v-model="passwordForm.oldPassword" type="password" show-password autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item label="鏂板瘑鐮�" prop="password">
+ <el-input v-model="passwordForm.password" type="password" show-password autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item label="纭鏂板瘑鐮�" prop="rePassword">
+ <el-input v-model="passwordForm.rePassword" type="password" show-password autocomplete="off"></el-input>
+ </el-form-item>
+ <div class="password-footer">
+ <el-button @click="closePasswordDialog">鍏抽棴</el-button>
+ <el-button type="primary" :loading="passwordSaving" @click="handlePasswordSave">淇濆瓨</el-button>
+ </div>
+ </el-form>
+ </el-dialog>
</div>
</body>
<script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
-<script src="../static/layui/layui.js"></script>
-<script>
- layui.use(['form'], function(){
- var form = layui.form,
- layer = layui.layer,
- $ = layui.jquery;
-
- // 鍒濆鍖栬〃鍗曟暟鎹�
- $.ajax({
- url: baseUrl+"/user/detail/auth",
- headers: {'token': localStorage.getItem('token')},
- method: 'POST',
- success: function (res) {
- if (res.code === 200){
- var user = res.data;
- for (var val in user) {
- $('#person-detail').find(":input[id='" + val + "']").val(user[val]);
- }
- } else if (res.code === 403){
- top.location.href = baseUrl+"/";
- } else {
- layer.msg(res.msg);
- }
- }
- });
-
- // 淇敼瀵嗙爜
- $(document).on('click','#update-password', function () {
- layer.open({
- type: 2,
- title: '淇敼瀵嗙爜',
- maxmin: true,
- area: ['350px', '310px'],
- shadeClose: false,
- content: 'password.html',
- success: function(layero, index){
- layer.iframeAuto(index);
- }
- })
- });
-
-
- // 淇濆瓨淇敼
- form.on('submit(save)', function (data) {
- var user = {
- id: $('#id').val(),
- username: $('#username').val(),
- mobile: $("#mobile").val(),
- };
- layer.confirm('纭畾淇敼璧勬枡鍚楋紵', function(){
- $.ajax({
- url: baseUrl+"/user/update/auth",
- headers: {'token': localStorage.getItem('token')},
- data: user,
- method: 'POST',
- success: function (res) {
- if (res.code === 200){
- layer.msg(res.msg);
- localStorage.setItem("username", user.username);
- parent.$('#person-username').text(localStorage.getItem('username'));
- } else if (res.code === 403){
- top.location.href = baseUrl+"/";
- } else {
- layer.msg(res.msg);
- }
- }
- });
- });
- return false;
- });
- });
-</script>
-</html>
\ No newline at end of file
+<script type="text/javascript" src="../static/js/tools/md5.js"></script>
+<script type="text/javascript" src="../static/js/common.js?v=20260309_i18n_fix1"></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/detail/detail.js?v=20260310_detail_vue3"></script>
+</html>
--
Gitblit v1.9.1