|
|
|
@ -22,10 +22,10 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="table"> |
|
|
|
<el-table :data="filteredData" stripe style="width: 100%"> |
|
|
|
<el-table :data="tableData" stripe style="width: 100%"> |
|
|
|
<el-table-column |
|
|
|
type="index" |
|
|
|
:index="(index) => index + (pageOptions.currentPage - 1) * pageOptions.pageSize + 1" |
|
|
|
:index="(index) => index + (pageOptions.pageNum - 1) * pageOptions.pageSize + 1" |
|
|
|
label="序号" |
|
|
|
width="50" |
|
|
|
header-align="center" |
|
|
|
@ -47,10 +47,10 @@ |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
layout="prev, pager, next" |
|
|
|
:current-page.sync="pageOptions.currentPage" |
|
|
|
:total="dataAfterSearch.length" |
|
|
|
:current-page.sync="pageOptions.pageNum" |
|
|
|
:total="pageOptions.total" |
|
|
|
:page-size="pageOptions.pageSize" |
|
|
|
@current-change="pageChange" |
|
|
|
@current-change="getDirectory" |
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
@ -62,6 +62,7 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
import LayerDetailsVue from './LayerDetails.vue'; |
|
|
|
import debounce from 'lodash/debounce'; |
|
|
|
import { getDirectoryApi, addOrEditDirectoryApi, deleteDirectoryApi } from '@/api/aiSupervision/layerConfigApi.js'; |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
@ -75,8 +76,9 @@ export default { |
|
|
|
id: null |
|
|
|
}, |
|
|
|
pageOptions: { |
|
|
|
currentPage: 1, |
|
|
|
pageSize: 12 |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 12, |
|
|
|
total: 0 |
|
|
|
}, |
|
|
|
defaultProps: { |
|
|
|
children: 'children', |
|
|
|
@ -88,33 +90,42 @@ export default { |
|
|
|
directoryInfo: null //当前 详情界面 展示的信息对象 |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
dataAfterSearch() { |
|
|
|
// 按关键字筛 |
|
|
|
return this.tableData.filter( |
|
|
|
(data) => !this.keyword || data.name.toLowerCase().includes(this.keyword.toLowerCase()) |
|
|
|
); |
|
|
|
}, |
|
|
|
filteredData() { |
|
|
|
// 按页码筛 |
|
|
|
return this.dataAfterSearch.slice( |
|
|
|
(this.pageOptions.currentPage - 1) * this.pageOptions.pageSize, |
|
|
|
this.pageOptions.currentPage * this.pageOptions.pageSize |
|
|
|
); |
|
|
|
} |
|
|
|
}, |
|
|
|
// computed: { |
|
|
|
// dataAfterSearch() { |
|
|
|
// // 按关键字筛 |
|
|
|
// return this.tableData.filter( |
|
|
|
// (data) => !this.keyword || data.name.toLowerCase().includes(this.keyword.toLowerCase()) |
|
|
|
// ); |
|
|
|
// }, |
|
|
|
// filteredData() { |
|
|
|
// // 按页码筛 |
|
|
|
// return this.dataAfterSearch.slice( |
|
|
|
// (this.pageOptions.pageNum - 1) * this.pageOptions.pageSize, |
|
|
|
// this.pageOptions.pageNum * this.pageOptions.pageSize |
|
|
|
// ); |
|
|
|
// } |
|
|
|
// }, |
|
|
|
methods: { |
|
|
|
showDetails(index, row) { |
|
|
|
this.isShowLayerDetails = true; |
|
|
|
this.directoryInfo = row; |
|
|
|
}, |
|
|
|
pageChange(currentPage) { |
|
|
|
this.pageOptions.currentPage = currentPage; |
|
|
|
}, |
|
|
|
async getDirectory() { |
|
|
|
const res = await getDirectoryApi(); |
|
|
|
this.tableData = res.data[0].children; |
|
|
|
this.pageOptions.currentPage = 1; |
|
|
|
const params = { |
|
|
|
pageNum: this.pageOptions.pageNum, |
|
|
|
pageSize: this.pageOptions.pageSize, |
|
|
|
ids: null, |
|
|
|
data: { |
|
|
|
name: this.keyword |
|
|
|
}, |
|
|
|
params: { |
|
|
|
orderBy: 'pub_date', |
|
|
|
sortBy: 'asc' |
|
|
|
} |
|
|
|
}; |
|
|
|
const res = await getDirectoryApi(params); |
|
|
|
this.tableData = res.data.children; |
|
|
|
this.pageOptions.total = res.data.total; |
|
|
|
}, |
|
|
|
|
|
|
|
closeDialog() { |
|
|
|
@ -183,6 +194,15 @@ export default { |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getDirectory(); |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// 使用 lodash 的 debounce 函数创建防抖版本 |
|
|
|
this.debouncedGetDirectory = debounce(this.getDirectory, 500); |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
keyword() { |
|
|
|
this.debouncedGetDirectory(); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
panyuyi
1 year ago