mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 07:03:53 +08:00
update:添加“模型配置”、“用户管理”、“参数管理”页面“获取列表”时的加载状态
This commit is contained in:
@@ -44,9 +44,19 @@
|
||||
<!-- 右侧内容 -->
|
||||
<div class="content-area">
|
||||
<el-card class="model-card" shadow="never">
|
||||
<el-table ref="modelTable" style="width: 100%" :header-cell-style="{ background: 'transparent' }"
|
||||
:data="modelList" class="data-table" header-row-class-name="table-header"
|
||||
:header-cell-class-name="headerCellClassName" @selection-change="handleSelectionChange">
|
||||
<el-table
|
||||
ref="modelTable"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(255, 255, 255, 0.7)"
|
||||
:header-cell-style="{ background: 'transparent' }"
|
||||
:data="modelList"
|
||||
class="data-table"
|
||||
header-row-class-name="table-header"
|
||||
:header-cell-class-name="headerCellClassName"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center"></el-table-column>
|
||||
<el-table-column label="模型名称" prop="modelName" align="center"></el-table-column>
|
||||
<el-table-column label="模型编码" prop="modelCode" align="center"></el-table-column>
|
||||
@@ -157,7 +167,8 @@ export default {
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
selectedModels: [],
|
||||
isAllSelected: false
|
||||
isAllSelected: false,
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
|
||||
@@ -385,6 +396,7 @@ export default {
|
||||
|
||||
// 获取模型配置列表
|
||||
loadData() {
|
||||
this.loading = true; // 开始加载
|
||||
const params = {
|
||||
modelType: this.activeTab,
|
||||
modelName: this.search,
|
||||
@@ -393,6 +405,7 @@ export default {
|
||||
};
|
||||
|
||||
Api.model.getModelList(params, ({ data }) => {
|
||||
this.loading = false; // 结束加载
|
||||
if (data.code === 0) {
|
||||
this.modelList = data.data.list;
|
||||
this.total = data.data.total;
|
||||
@@ -912,4 +925,21 @@ export default {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-mask {
|
||||
background-color: rgba(255, 255, 255, 0.6) !important;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
::v-deep .el-loading-spinner .circular {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
::v-deep .el-loading-spinner .path {
|
||||
stroke: #6b8cff;
|
||||
}
|
||||
::v-deep .el-loading-text {
|
||||
color: #6b8cff !important;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -15,8 +15,15 @@
|
||||
<div class="content-panel">
|
||||
<div class="content-area">
|
||||
<el-card class="params-card" shadow="never">
|
||||
<el-table ref="paramsTable" :data="paramsList" class="transparent-table"
|
||||
:header-cell-class-name="headerCellClassName">
|
||||
<el-table
|
||||
ref="paramsTable"
|
||||
:data="paramsList"
|
||||
class="transparent-table"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(255, 255, 255, 0.7)"
|
||||
:header-cell-class-name="headerCellClassName">
|
||||
<el-table-column label="选择" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.selected"></el-checkbox>
|
||||
@@ -92,6 +99,7 @@ export default {
|
||||
searchCode: "",
|
||||
paramsList: [],
|
||||
currentPage: 1,
|
||||
loading: false,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: [10, 20, 50, 100],
|
||||
total: 0,
|
||||
@@ -138,27 +146,29 @@ export default {
|
||||
this.fetchParams();
|
||||
},
|
||||
fetchParams() {
|
||||
Api.admin.getParamsList(
|
||||
{
|
||||
page: this.currentPage,
|
||||
limit: this.pageSize,
|
||||
paramCode: this.searchCode,
|
||||
},
|
||||
({ data }) => {
|
||||
if (data.code === 0) {
|
||||
this.paramsList = data.data.list.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}));
|
||||
this.total = data.data.total;
|
||||
} else {
|
||||
this.$message.error({
|
||||
message: data.msg || '获取参数列表失败',
|
||||
showClose: true
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
this.loading = true;
|
||||
Api.admin.getParamsList(
|
||||
{
|
||||
page: this.currentPage,
|
||||
limit: this.pageSize,
|
||||
paramCode: this.searchCode,
|
||||
},
|
||||
({ data }) => {
|
||||
this.loading = false;
|
||||
if (data.code === 0) {
|
||||
this.paramsList = data.data.list.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}));
|
||||
this.total = data.data.total;
|
||||
} else {
|
||||
this.$message.error({
|
||||
message: data.msg || '获取参数列表失败',
|
||||
showClose: true
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
handleSearch() {
|
||||
this.currentPage = 1;
|
||||
@@ -656,4 +666,25 @@ export default {
|
||||
max-height: calc(var(--table-max-height) - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-loading-mask) {
|
||||
background-color: rgba(255, 255, 255, 0.6) !important;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
:deep(.el-loading-spinner .circular) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
:deep(.el-loading-spinner .path) {
|
||||
stroke: #6b8cff;
|
||||
}
|
||||
|
||||
:deep(.el-loading-text) {
|
||||
color: #6b8cff !important;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,14 @@
|
||||
<div class="content-panel">
|
||||
<div class="content-area">
|
||||
<el-card class="user-card" shadow="never">
|
||||
<el-table ref="userTable" :data="userList" class="transparent-table">
|
||||
<el-table
|
||||
ref="userTable"
|
||||
:data="userList"
|
||||
class="transparent-table"
|
||||
v-loading="loading"
|
||||
element-loading-text="拼命加载中"
|
||||
element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(255, 255, 255, 0.7)">
|
||||
<el-table-column label="选择" align="center" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox v-model="scope.row.selected"></el-checkbox>
|
||||
@@ -103,7 +110,8 @@ export default {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
isAllSelected: false
|
||||
isAllSelected: false,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -137,22 +145,24 @@ export default {
|
||||
},
|
||||
|
||||
fetchUsers() {
|
||||
Api.admin.getUserList(
|
||||
{
|
||||
page: this.currentPage,
|
||||
limit: this.pageSize,
|
||||
mobile: this.searchPhone,
|
||||
},
|
||||
({ data }) => {
|
||||
if (data.code === 0) {
|
||||
this.userList = data.data.list.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}));
|
||||
this.total = data.data.total;
|
||||
}
|
||||
}
|
||||
);
|
||||
this.loading = true;
|
||||
Api.admin.getUserList(
|
||||
{
|
||||
page: this.currentPage,
|
||||
limit: this.pageSize,
|
||||
mobile: this.searchPhone,
|
||||
},
|
||||
({ data }) => {
|
||||
this.loading = false; // 结束加载
|
||||
if (data.code === 0) {
|
||||
this.userList = data.data.list.map(item => ({
|
||||
...item,
|
||||
selected: false
|
||||
}));
|
||||
this.total = data.data.total;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
handleSearch() {
|
||||
this.currentPage = 1;
|
||||
@@ -682,5 +692,21 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-loading-mask) {
|
||||
background-color: rgba(255, 255, 255, 0.6) !important;
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
:deep(.el-loading-spinner .circular) {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
:deep(.el-loading-spinner .path) {
|
||||
stroke: #6b8cff;
|
||||
}
|
||||
:deep(.el-loading-text) {
|
||||
color: #6b8cff !important;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user