Hass/xiaozhi-esp32-server
1
0
Fork 0
mirror of https://github.com/xinnan-tech/xiaozhi-esp32-server.git synced 2026-07-25 16:43:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #914 from xinnan-tech/web-table-loading

Browse Source 
Web table loading
This commit is contained in:
Sakura-RanChen
2025-04-21 11:40:47 +08:00
committed by GitHub
parent 264aa15281 ec9fa32c81
commit 94605345e5
6 changed files with 224 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main/manager-web/src/views/ModelConfig.vue
+37 -5
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
};
},
@@ -301,9 +312,10 @@ export default {
this.currentPage = page;
this.$refs.modelTable.clearSelection();
},
handleModelSave({ provideCode, formData }) {
handleModelSave({ provideCode, formData, done }) {
const modelType = this.activeTab;
const id = formData.id;
Api.model.updateModel(
{ modelType, provideCode, id, formData },
({ data }) => {
@@ -314,6 +326,7 @@ export default {
} else {
this.$message.error(data.msg || '保存失败');
}
done && done(); // 调用done回调关闭加载状态
}
);
},
@@ -385,6 +398,7 @@ export default {
// 获取模型配置列表
loadData() {
this.loading = true; // 开始加载
const params = {
modelType: this.activeTab,
modelName: this.search,
@@ -393,6 +407,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 +927,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>
main/manager-web/src/views/ParamsManagement.vue
+81 -47
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;
@@ -185,32 +195,35 @@ export default {
this.paramForm = { ...row };
this.dialogVisible = true;
},
handleSubmit(form) {
if (form.id) {
// 编辑
Api.admin.updateParam(form, ({ data }) => {
if (data.code === 0) {
this.$message.success({
message:"修改成功",
showClose:true
});
this.dialogVisible = false;
this.fetchParams();
}
handleSubmit({ form, done }) {
if (form.id) {
// 编辑
Api.admin.updateParam(form, ({ data }) => {
if (data.code === 0) {
this.$message.success({
message:"修改成功",
showClose:true
});
} else {
// 新增
Api.admin.addParam(form, ({ data }) => {
if (data.code === 0) {
this.$message.success({
message:"新增成功",
showClose:true
});
this.dialogVisible = false;
this.fetchParams();
}
this.dialogVisible = false;
this.fetchParams();
}
done && done();
});
} else {
// 新增
Api.admin.addParam(form, ({ data }) => {
if (data.code === 0) {
this.$message.success({
message:"新增成功",
showClose:true
});
}
this.dialogVisible = false;
this.fetchParams();
}
done && done();
});
}
},
deleteSelectedParams() {
@@ -656,4 +669,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>
main/manager-web/src/views/UserManagement.vue
+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>