CN-1089 统一各列表页的loading、nodata交互

This commit is contained in:
hyx
2023-06-16 17:51:08 +08:00
parent c86a7cfeae
commit 5e682f81d9
23 changed files with 300 additions and 134 deletions

View File

@@ -28,10 +28,11 @@
</button>
</template>
<template #default>
<loading :loading="loading"></loading>
<chart-table
ref="dataTable"
v-loading="tools.loading"
:api="url"
:isNoData="isNoData"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"

View File

@@ -49,10 +49,11 @@
</top-tool-more-options>
</template>
<template v-slot:default>
<loading :loading="loading"></loading>
<galaxy-proxy-table
ref="dataTable"
v-loading="tools.loading"
:api="url"
:isNoData="isNoData"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"

View File

@@ -28,10 +28,11 @@
</button>
</template>
<template #default>
<loading :loading="loading"></loading>
<i18n-table
ref="dataTable"
v-loading="tools.loading"
:api="url"
:isNoData="isNoData"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"

View File

@@ -9,10 +9,11 @@
:from="fromRoute.operationLog"
@search="search">
<template v-slot:default>
<loading :loading="loading"></loading>
<operation-log-table
ref="dataTable"
v-loading="tools.loading"
:api="url"
:isNoData="isNoData"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"

View File

@@ -29,10 +29,11 @@
<delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
</template>
<template v-slot:default>
<loading :loading="loading"></loading>
<roles-table
ref="dataTable"
v-loading="tools.loading"
:api="url"
:isNoData="isNoData"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"

View File

@@ -27,10 +27,11 @@
</button>
</template>
<template #default>
<loading :loading="loading"></loading>
<user-table
ref="dataTable"
v-loading="tools.loading"
:api="url"
:isNoData="isNoData"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"
@@ -102,14 +103,15 @@ export default {
this.searchLabel = { ...this.searchLabel, ...params }
}
this.searchLabel = { ...this.searchLabel, ...this.pageObj }
this.tools.loading = true
this.isNoData = false
this.tableData = []
this.toggleLoading(true)
delete this.searchLabel.total
let listUrl = this.url
if (this.listUrl) {
listUrl = this.listUrl
}
get(listUrl, this.searchLabel).then(response => {
this.tools.loading = false
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + ''
@@ -118,14 +120,25 @@ export default {
this.pageObj.total = response.data.total
} else {
console.error(response)
this.isNoData = true
if (response.message) {
this.$message.error(response.message)
} else {
this.$message.error('Something went wrong...')
}
}
}).finally(() => {
this.toggleLoading(false)
if (!this.tableData || this.tableData.length === 0) {
this.isNoData = true
} else {
this.isNoData = false
}
})
}
},
unmounted () {
this.isNoData = false
}
}
</script>

View File

@@ -40,10 +40,11 @@
</button>
</template>
<template #default>
<loading :loading="builtinRightLoading"></loading>
<loading :loading="loading"></loading>
<report-table
ref="dataTable"
:api="url"
:isNoData="isNoData"
:custom-table-title="tools.customTableTitle"
:category-list="builtinReportLeftMenu"
:height="mainTableHeight"
@@ -157,7 +158,7 @@ export default {
],
tableId: 'reportTable',
builtinLeftLoading: false,
builtinRightLoading: false,
// builtinRightLoading: false,
isInit: true
}
},
@@ -246,7 +247,11 @@ export default {
}
this.searchLabel = { ...this.searchLabel, ...this.pageObj }
// this.tools.loading = true
this.builtinRightLoading = true
// this.builtinRightLoading = true
// this.loading = true
this.isNoData = false
this.tableData = []
this.toggleLoading(true)
delete this.searchLabel.total
let listUrl = this.url
if (this.listUrl) {
@@ -260,13 +265,13 @@ export default {
if (!this.isInit) {
get(listUrl, this.searchLabel).then(response => {
// this.tools.loading = false
this.builtinRightLoading = false
// this.builtinRightLoading = false
// this.loading = false
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + ''
}
this.$nextTick(() => {
this.tableData = []
this.tableData = response.data.list.map(item => {
return {
...item,
@@ -274,9 +279,18 @@ export default {
}
})
this.pageObj.total = response.data.total
if (!this.tableData || this.tableData.length === 0) {
this.isNoData = true
} else {
this.isNoData = false
}
})
// TODO 回到顶部
} else {
this.isNoData = true
}
}).finally(() => {
this.toggleLoading(false)
})
}
this.isInit = false
@@ -349,6 +363,9 @@ export default {
}
}
}
},
unmounted () {
this.isNoData = false
}
}
</script>

View File

@@ -53,12 +53,13 @@
</div>
<!-- 列表式 -->
<template v-if="listMode === 'list'">
<div class="list-mode__row" >
<div class="list-mode__row" style="position:relative;">
<loading :loading="loading"></loading>
<knowledge-base-table-for-row
ref="dataTable"
v-loading="tools.loading"
height="100%"
:api="url"
:isNoData="isNoData"
:custom-table-title="tools.customTableTitle"
:table-data="tableData"
:is-selected-status="isSelectedStatus"
@@ -68,16 +69,18 @@
@edit="edit"
@orderBy="tableDataSort"
@reload="reloadRowList"
@toggleLoading="toggleLoading"
></knowledge-base-table-for-row>
</div>
</template>
<!-- 卡片式 -->
<template v-else-if="listMode === 'block'">
<div class="list-mode__card" >
<div class="list-mode__card" style="position:relative;">
<loading :loading="loading"></loading>
<knowledge-base-table-for-card
ref="dataTableCard"
v-loading="tools.loading"
:api="url"
:isNoData="isNoData"
:custom-table-title="tools.customTableTitle"
:table-data="tableData"
:is-selected-status="isSelectedStatus"
@@ -85,10 +88,10 @@
@delete="toDelete"
@checkboxStatusChange="checkboxStatusChange"
@reload="reloadRowList"
@toggleLoading="toggleLoading"
></knowledge-base-table-for-card>
</div>
</template>
<div class="knowledge-pagination" style="">
<pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
</div>
@@ -132,7 +135,6 @@
</el-dialog>
</template>
<script>
import cnDataList from '@/components/table/CnDataList'
import dataListMixin from '@/mixins/data-list'
import KnowledgeBaseTableForCard from '@/components/table/setting/knowledgeBaseTableForCard'
import KnowledgeBaseTableForRow from '@/components/table/setting/KnowledgeBaseTableForRow'
@@ -145,7 +147,6 @@ import KnowledgeFilter from '@/views/setting/KnowledgeFilter'
export default {
name: 'knowledgeBase',
components: {
cnDataList,
KnowledgeBaseTableForCard,
KnowledgeBaseTableForRow,
KnowledgeFilter
@@ -171,13 +172,13 @@ export default {
},
methods: {
onSearch () {
let params = {
const params = {
...this.filterParams,
name: this.keyWord
}
this.clearList()
this.search(params)
this.$refs.knowledgeFilter.reloadFilter(this.checkedCategoryIds,this.checkedStatusIds)
this.$refs.knowledgeFilter.reloadFilter(this.checkedCategoryIds, this.checkedStatusIds)
},
reloadRowList () {
this.getTableData()
@@ -262,7 +263,7 @@ export default {
type: 'warning'
}).catch(() => {})
} else {
this.tools.loading = true
this.toggleLoading(true)
axios.delete(this.url + '?knowledgeIds=' + ids).then(response => {
if (response.data.code === 200) {
this.delFlag = true
@@ -280,7 +281,7 @@ export default {
this.$message.error(response.data.message)
}
}).finally(() => {
this.tools.loading = false
this.toggleLoading(false)
if (this.isSelectedStatus != undefined) {
this.isSelectedStatus = false
this.disableDelete = true
@@ -318,7 +319,7 @@ export default {
}
})
},
reload (params, isAll, isClearType,checkedCategoryIds,checkedStatusIds) {
reload (params, isAll, isClearType, checkedCategoryIds, checkedStatusIds) {
this.disableDelete = true
this.isSelectedStatus = false
this.batchDeleteObjs = []
@@ -385,7 +386,7 @@ export default {
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
this.tools.loading = true
this.toggleLoading(true)
axios.delete(this.url + '?knowledgeIds=' + row.id).then(response => {
if (response.data.code === 200) {
this.delFlag = true
@@ -404,7 +405,7 @@ export default {
this.$message.error('Something went wrong...')
}
}).finally(() => {
this.tools.loading = false
this.toggleLoading(false)
})
}).catch(() => {})
},

View File

@@ -633,8 +633,8 @@ export default {
this.typeSelectDisable = true
this.isClick = false
},
backEditData(){
if(this.oldTagItem.isValid){
backEditData () {
if (this.oldTagItem.isValid) {
this.showImportedData[this.oldTagItem.index].isValid = this.oldTagItem.isValid
this.showImportedData[this.oldTagItem.index].msg = this.oldTagItem.msg
}
@@ -886,7 +886,7 @@ export default {
msg: this.showImportedData[index].msg,
tagName: this.showImportedData[index].tagName,
tagValue: this.showImportedData[index].tagValue,
index:index
index: index
}
this.editIndex = index
this.backEditFlag = true

View File

@@ -196,7 +196,7 @@ export default {
}
}
this.filterParams = params
this.$emit('reload', params, true,false,this.defaultCheckedCategory,this.defaultCheckedStatus)
this.$emit('reload', params, true, false, this.defaultCheckedCategory, this.defaultCheckedStatus)
}
},
getAllTableData (params) {
@@ -254,7 +254,7 @@ export default {
category.children.push(source)
})
})
if(this.defaultCheckedCategory.length === 0){
if (this.defaultCheckedCategory.length === 0) {
this.defaultCheckedCategory = categoryIds
}
},
@@ -273,15 +273,15 @@ export default {
})
statusIds.push(index)
})
if(this.defaultCheckedStatus.length === 0){
if (this.defaultCheckedStatus.length === 0) {
this.defaultCheckedStatus = statusIds
}
},
reloadFilter (checkedCategoryIds ,checkedStatusIds) {
if(checkedCategoryIds && checkedCategoryIds.length > 0){
reloadFilter (checkedCategoryIds, checkedStatusIds) {
if (checkedCategoryIds && checkedCategoryIds.length > 0) {
this.defaultCheckedCategory = checkedCategoryIds
}
if(checkedStatusIds && checkedStatusIds.length > 0){
if (checkedStatusIds && checkedStatusIds.length > 0) {
this.defaultCheckedStatus = checkedStatusIds
}
this.getAllTableData()