update:添加“模型配置”、“用户管理”、“参数管理”页面“获取列表”时的加载状态

This commit is contained in:
CGD
2025-04-21 10:02:50 +08:00
parent bc99341f85
commit 5904ee1571
3 changed files with 132 additions and 45 deletions
+34 -4
View File
@@ -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>
+54 -23
View File
@@ -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>
+44 -18
View File
@@ -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>