|
|
@@ -31,6 +31,7 @@ import TableFilterForm from '@/components/table/TableFilterForm/TableFilterForm.
|
|
|
import axiosInstance from '@/utils/axios/axiosInstance.ts'
|
|
|
import TableTools from './TableTools.vue'
|
|
|
import TableColumn from './TableColumn/TableColumn.vue'
|
|
|
+import type { ResponseInfo } from '@/types/res.ts'
|
|
|
|
|
|
type TableFilterFormRef = InstanceType<typeof TableFilterForm>
|
|
|
|
|
|
@@ -61,6 +62,25 @@ const loading = ref(false)
|
|
|
// 表格数据
|
|
|
const tableData: Array<any> = reactive([])
|
|
|
|
|
|
+// 展开表格数据
|
|
|
+const expandTableData: Record<string, Array<any>> = reactive({})
|
|
|
+
|
|
|
+// 分页展开表格数据
|
|
|
+const expandPaginationConfig = reactive<Record<string, TablePaginationSetting>>({})
|
|
|
+
|
|
|
+const expandPageData = computed(() => {
|
|
|
+ const nowActive = activeExpandTablePageConfig.value
|
|
|
+ const { currentPage, limit } = expandPaginationConfig[nowActive]
|
|
|
+ if (!expandTableData[nowActive]) return []
|
|
|
+
|
|
|
+ // const data = expandTableData[nowActive].slice((currentPage - 1) * limit, currentPage * limit)
|
|
|
+
|
|
|
+ return expandTableData[nowActive].slice((currentPage - 1) * limit, currentPage * limit)
|
|
|
+})
|
|
|
+
|
|
|
+// 现在使用的分页
|
|
|
+const activeExpandTablePageConfig = ref<string>('')
|
|
|
+
|
|
|
// 查询表单的数据
|
|
|
const queryFormData = reactive<{ [key: string]: any }>({})
|
|
|
|
|
|
@@ -117,6 +137,13 @@ if (!props.openRemoteReqData && props.dataList) {
|
|
|
*/
|
|
|
const getData = async (): Promise<[Array<any>, number]> => {
|
|
|
try {
|
|
|
+ for (let [k, v] of Object.entries(expandTableData)) {
|
|
|
+ if (v) {
|
|
|
+ delete expandTableData[k]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ expandRowKeys.value = []
|
|
|
+ // expandPageData.value.splice(0, expandPageData.value.length)
|
|
|
// 使用传入数据源
|
|
|
// 如果使用前端查询，则需要传入dataList作为数据源
|
|
|
if (!props.openRemoteReqData) {
|
|
|
@@ -431,6 +458,77 @@ onMounted(() => {
|
|
|
// changeTableFooterPos()
|
|
|
})
|
|
|
})
|
|
|
+
|
|
|
+const expandRowKeys = ref<string[]>([])
|
|
|
+
|
|
|
+const getRowKey = (row: any) => {
|
|
|
+ const id = row['actionId'] ?? row['id']
|
|
|
+ if (!id) {
|
|
|
+ console.warn('请检查表格数据，没有可用的ID 作为RowKey，当前使用随机key')
|
|
|
+ return createRowKey()
|
|
|
+ }
|
|
|
+ return id + ''
|
|
|
+}
|
|
|
+
|
|
|
+const handleExpand = async (row: any, expandedRows: any[]) => {
|
|
|
+ if (!props.expandConfig) return
|
|
|
+
|
|
|
+ let id = row['actionId'] ?? row['id']
|
|
|
+ if (!id) {
|
|
|
+ console.warn('请检查表格数据，没有可用的ID 作为RowKey，当前使用随机key')
|
|
|
+ id = createRowKey()
|
|
|
+ }
|
|
|
+
|
|
|
+ // expandRowKeys.value.push(id)
|
|
|
+ if (expandedRows.length) {
|
|
|
+ //展开
|
|
|
+ expandRowKeys.value = [] //先干掉之前展开的行
|
|
|
+ if (row) {
|
|
|
+ expandRowKeys.value.push(id) //push新的行 (原理有点类似防抖)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ expandRowKeys.value = [] //折叠 就清空expand-row-keys对应的数组
|
|
|
+ }
|
|
|
+
|
|
|
+ activeExpandTablePageConfig.value = id
|
|
|
+ if (!expandPaginationConfig[id]) {
|
|
|
+ expandPaginationConfig[id] = {
|
|
|
+ currentPage: 1,
|
|
|
+ limit: 10,
|
|
|
+ total: 0,
|
|
|
+ pageSizeList: [10, 20, 30]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 有数据后就不要重新请求数据
|
|
|
+ // 这里只判断是否已经请求过了，而不判断是否有数据，防止重复请求
|
|
|
+ if (expandTableData[id] !== undefined) return
|
|
|
+ const params = {
|
|
|
+ ...props.expandConfig.expandReqConfig.otherOptions,
|
|
|
+ actionId: id + ''
|
|
|
+ }
|
|
|
+ const res = (await axiosInstance.post(
|
|
|
+ props.expandConfig.expandReqConfig.url,
|
|
|
+ params
|
|
|
+ )) as ResponseInfo
|
|
|
+ if (res.code !== 0) {
|
|
|
+ ElMessage.error('获取展开信息失败')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ expandTableData[id] = res.data
|
|
|
+ expandPaginationConfig[id].total = res.data.length
|
|
|
+}
|
|
|
+
|
|
|
+const handleExpandPageChange = (page: number) => {
|
|
|
+ const config = expandPaginationConfig[activeExpandTablePageConfig.value]
|
|
|
+ config.currentPage = page
|
|
|
+}
|
|
|
+
|
|
|
+const handleExpandSizeChange = (size: number) => {
|
|
|
+ const config = expandPaginationConfig[activeExpandTablePageConfig.value]
|
|
|
+ config.currentPage = 1
|
|
|
+ config.limit = size
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -451,7 +549,7 @@ onMounted(() => {
|
|
|
<!-- <div class="chartContainer" v-if="needChart && props.chartOptions">-->
|
|
|
<!-- <PieBorderRadius :options="props.chartOptions"></PieBorderRadius>-->
|
|
|
<!-- </div>-->
|
|
|
- <slot name="chart" v-if="$slots.chart"> </slot>
|
|
|
+ <slot name="chart" v-if="$slots.chart"></slot>
|
|
|
|
|
|
<div class="tableTools">
|
|
|
<TableTools
|
|
|
@@ -490,9 +588,11 @@ onMounted(() => {
|
|
|
class="tableBody"
|
|
|
:cell-style="tableCellStyle"
|
|
|
v-loading="openRemoteReqData ? loading : props.loadingState"
|
|
|
- :row-key="createRowKey()"
|
|
|
+ :row-key="getRowKey"
|
|
|
+ :expand-row-keys="expandRowKeys"
|
|
|
@sort-change="tableSortChange"
|
|
|
@query="throttleGetData"
|
|
|
+ @expand-change="handleExpand"
|
|
|
table-layout="auto"
|
|
|
>
|
|
|
<el-table-column
|
|
|
@@ -502,6 +602,50 @@ onMounted(() => {
|
|
|
type="index"
|
|
|
:index="computedRowIndex"
|
|
|
/>
|
|
|
+ <el-table-column align="center" show-overflow-tooltip type="expand">
|
|
|
+ <template #default="rowInfo" v-if="props.needExpand">
|
|
|
+ <el-table :data="expandPageData">
|
|
|
+ <template v-for="child in props.expandConfig?.expandField" :key="child.name">
|
|
|
+ <el-table-column
|
|
|
+ :prop="child.name"
|
|
|
+ :label="child.cnName"
|
|
|
+ align="center"
|
|
|
+ show-overflow-tooltip
|
|
|
+ v-if="child.isShow"
|
|
|
+ :sortable="child.needSort ? 'custom' : false"
|
|
|
+ >
|
|
|
+ <template v-slot="scope">
|
|
|
+ <TableColumn
|
|
|
+ :column-config="child"
|
|
|
+ :row="scope.row"
|
|
|
+ :need-average="props.needAverage"
|
|
|
+ ></TableColumn>
|
|
|
+ </template>
|
|
|
+ <!-- {{ expandTableData[rowInfo.row.actionId] }}-->
|
|
|
+ <!-- <TableColumn-->
|
|
|
+ <!-- :column-config="child"-->
|
|
|
+ <!-- :row="rowInfo.row"-->
|
|
|
+ <!-- :need-average="rowInfo.needAverage"-->
|
|
|
+ <!-- ></TableColumn>-->
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <div class="expandPageConfig">
|
|
|
+ <el-pagination
|
|
|
+ class="userTablePagination"
|
|
|
+ background
|
|
|
+ :page-size="expandPaginationConfig[rowInfo.row.actionId].limit"
|
|
|
+ :page-sizes="expandPaginationConfig[rowInfo.row.actionId].pageSizeList"
|
|
|
+ table-layout="fixed"
|
|
|
+ layout="prev, pager, next ,jumper ,sizes,total,"
|
|
|
+ :total="expandPaginationConfig[rowInfo.row.actionId].total"
|
|
|
+ :current-page="expandPaginationConfig[rowInfo.row.actionId].currentPage"
|
|
|
+ @current-change="handleExpandPageChange"
|
|
|
+ @size-change="handleExpandSizeChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<template v-for="item in tableFieldsInfo" :key="item.name">
|
|
|
<el-table-column
|
|
|
:prop="item.name"
|
|
|
@@ -662,6 +806,17 @@ onMounted(() => {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
+.expandPageConfig {
|
|
|
+ /*width: 98%;*/
|
|
|
+ /*height: 600px;*/
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 98%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 1% 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
.leftToolBtn {
|
|
|
margin-right: 5px;
|
|
|
}
|
