mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 07:03:53 +08:00
解决提示框遮挡问题，优化UserManagement和HeaderBar布局，导航栏重复点击警告，退出跳转页面的优化
This commit is contained in:
Ran_Chen
@@ -27,6 +27,10 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
.el-message {
|
||||
top: 45px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
</script>
|
||||
@@ -110,7 +110,7 @@ function httpHandlerError(info, callBack) {
|
||||
}else if (info.data.code === 401) {
|
||||
console.log('触发 401，清除 Token 并跳转登录页');
|
||||
store.commit('clearAuth');
|
||||
window.location.href = '/login';
|
||||
goToPage(Constant.PAGE.LOGIN, true);
|
||||
return true
|
||||
} else {
|
||||
showDanger(info.data.msg)
|
||||
|
||||
@@ -47,7 +47,10 @@ export default {
|
||||
return;
|
||||
}
|
||||
userApi.addAgent(this.wisdomBodyName, (res) => {
|
||||
this.$message.success('添加成功');
|
||||
this.$message.success({
|
||||
message: '添加成功',
|
||||
showClose: true
|
||||
});
|
||||
this.$emit('confirm', res);
|
||||
this.$emit('update:visible', false);
|
||||
this.wisdomBodyName = "";
|
||||
|
||||
@@ -20,12 +20,12 @@
|
||||
<div class="settings-btn" @click="handleConfigure">
|
||||
配置角色
|
||||
</div>
|
||||
<div class="settings-btn">
|
||||
声纹识别
|
||||
</div>
|
||||
<div class="settings-btn">
|
||||
历史对话
|
||||
</div>
|
||||
<!-- <div class="settings-btn">-->
|
||||
<!-- 声纹识别-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="settings-btn">-->
|
||||
<!-- 历史对话-->
|
||||
<!-- </div>-->
|
||||
<div class="settings-btn" @click="handleDeviceManage">
|
||||
设备管理
|
||||
</div>
|
||||
|
||||
@@ -88,7 +88,7 @@ export default {
|
||||
methods: {
|
||||
goHome() {
|
||||
// 跳转到首页
|
||||
this.$router.push('/')
|
||||
this.$router.push('/home')
|
||||
},
|
||||
goUserManagement() {
|
||||
this.$router.push('/user-management')
|
||||
@@ -135,13 +135,16 @@ export default {
|
||||
try {
|
||||
// 调用 Vuex 的 logout action
|
||||
await this.logout();
|
||||
|
||||
this.$message.success('退出登录成功');
|
||||
|
||||
this.$router.push('/login');
|
||||
this.$message.success({
|
||||
message:'退出登录成功',
|
||||
showClose:true
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('退出登录失败:', error);
|
||||
this.$message.error('退出登录失败，请重试');
|
||||
this.$message.error({
|
||||
message:'退出登录失败，请重试',
|
||||
showClose:true
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -203,6 +206,7 @@ export default {
|
||||
}
|
||||
|
||||
.equipment-management {
|
||||
padding: 0 9px;
|
||||
width: 82px;
|
||||
height: 24px;
|
||||
border-radius: 12px;
|
||||
|
||||
@@ -76,6 +76,20 @@ const router = new VueRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
// 全局处理重复导航，改为刷新页面
|
||||
const originalPush = VueRouter.prototype.push
|
||||
VueRouter.prototype.push = function push(location) {
|
||||
return originalPush.call(this, location).catch(err => {
|
||||
if (err.name === 'NavigationDuplicated') {
|
||||
// 如果是重复导航，刷新页面
|
||||
window.location.reload()
|
||||
} else {
|
||||
// 其他错误正常抛出
|
||||
throw err
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 需要登录才能访问的路由
|
||||
const protectedRoutes = ['home', 'RoleConfig', 'DeviceManagement', 'UserManagement', 'ModelConfig']
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import Constant from '../utils/constant'
|
||||
import {goToPage} from "@/utils";
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
@@ -51,7 +52,8 @@ export default new Vuex.Store({
|
||||
logout({ commit }) {
|
||||
return new Promise((resolve) => {
|
||||
commit('clearAuth')
|
||||
window.location.href = '/login';
|
||||
goToPage(Constant.PAGE.LOGIN,true);
|
||||
window.location.reload(); // 彻底重置状态
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,62 +1,67 @@
|
||||
<template>
|
||||
<div class="welcome">
|
||||
<HeaderBar />
|
||||
<el-main class="main" style="padding: 20px; display: flex; flex-direction: column;">
|
||||
<div class="top-area">
|
||||
<div class="page-title">用户管理</div>
|
||||
<div class="page-search">
|
||||
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" @keyup.enter.native="handleSearch"/>
|
||||
<el-button class="btn-search" @click="handleSearch">搜索</el-button>
|
||||
|
||||
<div class="operation-bar">
|
||||
<h2 class="page-title">用户管理</h2>
|
||||
<div class="right-operations">
|
||||
<el-input placeholder="请输入手机号码查询" v-model="searchPhone" class="search-input" @keyup.enter.native="handleSearch"/>
|
||||
<el-button class="btn-search" @click="handleSearch">搜索</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="content-panel">
|
||||
<div class="content-area">
|
||||
<el-card class="user-card" shadow="never">
|
||||
<el-table ref="userTable" :data="userList" class="transparent-table" :header-cell-class-name="headerCellClassName">
|
||||
<el-table-column label="选择" type="selection" align="center" width="120"></el-table-column>
|
||||
<el-table-column label="用户Id" prop="userid" align="center"></el-table-column>
|
||||
<el-table-column label="手机号码" prop="mobile" align="center"></el-table-column>
|
||||
<el-table-column label="设备数量" prop="deviceCount" align="center"></el-table-column>
|
||||
<el-table-column label="状态" prop="status" align="center"></el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="resetPassword(scope.row)" style="color: #989fdd">重置密码</el-button>
|
||||
<el-button size="mini" type="text"
|
||||
v-if="scope.row.status === '正常'"
|
||||
@click="disableUser(scope.row)">禁用账户</el-button>
|
||||
<el-button size="mini" type="text"
|
||||
v-if="scope.row.status === '禁用'"
|
||||
@click="restoreUser(scope.row)">恢复账号</el-button>
|
||||
<el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #989fdd">删除用户</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="table_bottom">
|
||||
<div class="ctrl_btn">
|
||||
<el-button size="mini" type="primary" class="select-all-btn" @click="handleSelectAll">全选</el-button>
|
||||
<el-button size="mini" type="success" icon="el-icon-circle-check" @click="batchEnable">启用</el-button>
|
||||
<el-button size="mini" type="warning" @click="batchDisable"><i class="el-icon-remove-outline rotated-icon"></i>禁用</el-button>
|
||||
<el-button size="mini" type="danger" icon="el-icon-delete" @click="batchDelete">删除</el-button>
|
||||
</div>
|
||||
<div class="custom-pagination">
|
||||
<button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
|
||||
<button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
|
||||
|
||||
<button v-for="page in visiblePages" :key="page" class="pagination-btn" :class="{ active: page === currentPage }" @click="goToPage(page)">
|
||||
{{ page }}
|
||||
</button>
|
||||
|
||||
<button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
|
||||
<span class="total-text">共{{ total }}条记录</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card class="user-card" shadow="never">
|
||||
<el-table ref="userTable" :data="userList" class="transparent-table" :header-cell-class-name="headerCellClassName">
|
||||
<el-table-column label="选择" type="selection" align="center" width="120"></el-table-column>
|
||||
<el-table-column label="用户Id" prop="userid" align="center"></el-table-column>
|
||||
<el-table-column label="手机号码" prop="mobile" align="center"></el-table-column>
|
||||
<el-table-column label="设备数量" prop="deviceCount" align="center"></el-table-column>
|
||||
<el-table-column label="状态" prop="status" align="center"></el-table-column>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="resetPassword(scope.row)" style="color: #989fdd">重置密码</el-button>
|
||||
<el-button size="mini" type="text"
|
||||
v-if="scope.row.status === '正常'"
|
||||
@click="disableUser(scope.row)">禁用账户</el-button>
|
||||
<el-button size="mini" type="text"
|
||||
v-if="scope.row.status === '禁用'"
|
||||
@click="restoreUser(scope.row)">恢复账号</el-button>
|
||||
<el-button size="mini" type="text" @click="deleteUser(scope.row)" style="color: #989fdd">删除用户</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="table_bottom">
|
||||
<div class="ctrl_btn">
|
||||
<el-button size="mini" type="primary" class="select-all-btn" @click="handleSelectAll">全选</el-button>
|
||||
<el-button size="mini" type="success" icon="el-icon-circle-check" @click="batchEnable">启用</el-button>
|
||||
<el-button size="mini" type="warning" @click="batchDisable"><i class="el-icon-remove-outline rotated-icon"></i>禁用</el-button>
|
||||
<el-button size="mini" type="danger" icon="el-icon-delete" @click="batchDelete">删除</el-button>
|
||||
</div>
|
||||
<div class="custom-pagination">
|
||||
<button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
|
||||
<button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
|
||||
|
||||
<button v-for="page in visiblePages" :key="page" class="pagination-btn" :class="{ active: page === currentPage }" @click="goToPage(page)">
|
||||
{{ page }}
|
||||
</button>
|
||||
|
||||
<button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
|
||||
<span class="total-text">共{{ total }}条记录</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
|
||||
©2025 xiaozhi-esp32-server
|
||||
</div>
|
||||
<view-password-dialog :visible.sync="showViewPassword" :password="currentPassword"/>
|
||||
</el-main>
|
||||
<div class="copyright">
|
||||
©2025 xiaozhi-esp32-server
|
||||
</div>
|
||||
<view-password-dialog :visible.sync="showViewPassword" :password="currentPassword"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -70,7 +75,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
showViewPassword: false,
|
||||
currentPassword: '', // 存储获取到的密码
|
||||
currentPassword: '',
|
||||
searchPhone: '',
|
||||
userList: [],
|
||||
currentPage: 1,
|
||||
@@ -102,7 +107,6 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取用户列表
|
||||
fetchUsers() {
|
||||
adminApi.getUserList({
|
||||
page: this.currentPage,
|
||||
@@ -118,19 +122,13 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.currentPage = 1;
|
||||
this.fetchUsers();
|
||||
},
|
||||
|
||||
// 全选
|
||||
handleSelectAll() {
|
||||
this.$refs.userTable.toggleAllSelection();
|
||||
},
|
||||
|
||||
// 批量删除用户
|
||||
batchDelete() {
|
||||
const selectedUsers = this.$refs.userTable.selection;
|
||||
if (selectedUsers.length === 0) {
|
||||
@@ -186,8 +184,6 @@ export default {
|
||||
this.$message.info('已取消删除');
|
||||
});
|
||||
},
|
||||
|
||||
// 批量启用用户
|
||||
batchEnable() {
|
||||
const selectedUsers = this.$refs.userTable.selection;
|
||||
if (selectedUsers.length === 0) {
|
||||
@@ -199,16 +195,12 @@ export default {
|
||||
});
|
||||
this.$message.success('启用操作成功');
|
||||
},
|
||||
|
||||
// 批量禁用用户
|
||||
batchDisable() {
|
||||
this.userList.forEach(user => {
|
||||
user.status = '禁用';
|
||||
});
|
||||
this.$message.success('状态已更新为禁用');
|
||||
},
|
||||
|
||||
// 重置密码
|
||||
resetPassword(row) {
|
||||
this.$confirm('重置后将会生成新密码，是否继续？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
@@ -231,8 +223,6 @@ export default {
|
||||
row.status = '正常';
|
||||
console.log('恢复用户：', row);
|
||||
},
|
||||
|
||||
// 用户删除
|
||||
deleteUser(row) {
|
||||
this.$confirm('确定要删除该用户吗？', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
@@ -275,289 +265,155 @@ export default {
|
||||
this.currentPage = page;
|
||||
this.fetchUsers();
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
$table-bg-color: #ecf1fd;
|
||||
|
||||
.main {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
|
||||
}
|
||||
|
||||
.top-area {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.page-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.btn-search {
|
||||
margin-left: 10px;
|
||||
background: linear-gradient(to right, #5778ff, #c793f3);
|
||||
width: 100px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.welcome {
|
||||
min-width: 900px;
|
||||
min-height: 506px;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
background-image: url("@/assets/home/background.png");
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
|
||||
-webkit-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
}
|
||||
|
||||
.user-search-operate {
|
||||
margin-bottom: 20px;
|
||||
.main-wrapper {
|
||||
margin: 5px 22px;
|
||||
border-radius: 15px;
|
||||
min-height: 600px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
background: rgba(237,242,255,0.5);
|
||||
}
|
||||
|
||||
.operation-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.user-search-operate > * {
|
||||
margin-right: 10px;
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-table__header th {
|
||||
background-color: #f5f7fa;
|
||||
color: #606266;
|
||||
.right-operations {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
background: linear-gradient(135deg, #6B8CFF, #A966FF);
|
||||
border: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.content-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
min-width: 600px;
|
||||
overflow-x: auto;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
margin: 15px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.table_bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ctrl_btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 30px;
|
||||
.el-button {
|
||||
min-width: 72px;
|
||||
height: 32px;
|
||||
padding: 7px 12px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.ctrl_btn {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-left: 26px;
|
||||
.el-button {
|
||||
min-width: 72px;
|
||||
height: 32px;
|
||||
padding: 7px 12px 7px 10px;
|
||||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
opacity: 0;
|
||||
border-radius: 100%;
|
||||
transform: scale(1, 1) translate(-50%, -50%);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
&:focus:not(:active)::after {
|
||||
animation: ripple 0.6s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* 全选按钮 */
|
||||
.el-button--primary {
|
||||
background: #5f70f3;
|
||||
box-shadow: 0 2px 6px rgba(95, 112, 243, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: #4d5fe1;
|
||||
box-shadow: 0 4px 8px rgba(95, 112, 243, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #3a4bcf;
|
||||
box-shadow: 0 2px 4px rgba(95, 112, 243, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 启用按钮 */
|
||||
.el-button--success {
|
||||
background: #5bc98c;
|
||||
box-shadow: 0 2px 6px rgba(91, 201, 140, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: #4ab57d;
|
||||
box-shadow: 0 4px 8px rgba(91, 201, 140, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #3aa16e;
|
||||
box-shadow: 0 2px 4px rgba(91, 201, 140, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 禁用按钮 */
|
||||
.el-button--warning {
|
||||
background: #f6d075;
|
||||
color: black;
|
||||
box-shadow: 0 2px 6px rgba(246, 208, 117, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: #e4c068;
|
||||
box-shadow: 0 4px 8px rgba(246, 208, 117, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #d2b05b;
|
||||
box-shadow: 0 2px 4px rgba(246, 208, 117, 0.2);
|
||||
}
|
||||
|
||||
.rotated-icon {
|
||||
display: inline-block;
|
||||
transform: rotate(45deg);
|
||||
margin-right: 4px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
/* 删除按钮 */
|
||||
.el-button--danger {
|
||||
background: #fd5b63;
|
||||
box-shadow: 0 2px 6px rgba(253, 91, 99, 0.3);
|
||||
|
||||
&:hover {
|
||||
background: #e44a52;
|
||||
box-shadow: 0 4px 8px rgba(253, 91, 99, 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #cb3941;
|
||||
box-shadow: 0 2px 4px rgba(253, 91, 99, 0.2);
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ripple {
|
||||
0% {
|
||||
transform: scale(0, 0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
transform: scale(20, 20);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.el-button--primary {
|
||||
background: #5f70f3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rotated-icon {
|
||||
display: inline-block;
|
||||
transform: rotate(45deg);
|
||||
margin-right: 4px;
|
||||
.el-button--success {
|
||||
background: #5bc98c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.el-button--warning {
|
||||
background: #f6d075;
|
||||
color: black;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
background: white;
|
||||
|
||||
&.transparent-table {
|
||||
.el-table__header th {
|
||||
background: white !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:last-child td {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.el-table__body tr {
|
||||
background-color: white;
|
||||
td {
|
||||
border: {
|
||||
top: 1px solid rgba(0, 0, 0, 0.04);
|
||||
bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-button--danger {
|
||||
background: #fd5b63;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 300px;
|
||||
margin-right: 10px;
|
||||
.rotated-icon {
|
||||
display: inline-block;
|
||||
transform: rotate(45deg);
|
||||
margin-right: 4px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
background-color: transparent;
|
||||
border-color: #d3d6dc;
|
||||
|
||||
&:focus {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #606266;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.custom-selection-header) {
|
||||
.el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '选择';
|
||||
display: inline-block;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
text-align: center;
|
||||
color: #979db1;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
margin-top: auto;
|
||||
padding: 30px 0 20px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-pagination {
|
||||
display: flex;
|
||||
@@ -565,7 +421,6 @@ $table-bg-color: #ecf1fd;
|
||||
gap: 8px;
|
||||
margin-top: 15px;
|
||||
|
||||
/* 导航按钮样式 (首页、上一页、下一页) */
|
||||
.pagination-btn:first-child,
|
||||
.pagination-btn:nth-child(2),
|
||||
.pagination-btn:nth-last-child(2) {
|
||||
@@ -590,7 +445,6 @@ $table-bg-color: #ecf1fd;
|
||||
}
|
||||
}
|
||||
|
||||
/* 数字按钮样式 */
|
||||
.pagination-btn:not(:first-child):not(:nth-child(2)):not(:nth-last-child(2)) {
|
||||
min-width: 28px;
|
||||
height: 32px;
|
||||
@@ -608,7 +462,6 @@ $table-bg-color: #ecf1fd;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pagination-btn.active {
|
||||
background: #5f70f3 !important;
|
||||
color: #ffffff !important;
|
||||
@@ -626,6 +479,40 @@ $table-bg-color: #ecf1fd;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.transparent-table) {
|
||||
background: white;
|
||||
.el-table__header th {
|
||||
background: white !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-table__body tr {
|
||||
background-color: white;
|
||||
td {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.04);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.custom-selection-header) {
|
||||
.el-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '选择';
|
||||
display: inline-block;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__inner) {
|
||||
background-color: #eeeeee !important;
|
||||
border-color: #cccccc !important;
|
||||
@@ -640,5 +527,24 @@ $table-bg-color: #ecf1fd;
|
||||
border-color: #5f70f3 !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1144px) {
|
||||
.table_bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
:deep(.transparent-table) {
|
||||
.el-table__body tr {
|
||||
td {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
& + tr {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
@@ -109,10 +109,16 @@ export default {
|
||||
import('@/apis/module/agent').then(({ default: userApi }) => {
|
||||
userApi.deleteAgent(agentId, (res) => {
|
||||
if (res.data.code === 0) {
|
||||
this.$message.success('删除成功');
|
||||
this.$message.success({
|
||||
message: '删除成功',
|
||||
showClose: true
|
||||
});
|
||||
this.fetchAgentList(); // 刷新列表
|
||||
} else {
|
||||
this.$message.error(res.data.msg || '删除失败');
|
||||
this.$message.error({
|
||||
message: res.data.msg || '删除失败',
|
||||
showClose: true
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user