const getOverviewList = async () => {
? if (!searchParams.value.train_type_id) {
? ? return;
? }
? const resp = await Pepper.get('/api/match/detail', {
? ? params: searchParams.value
? });
? overviewTotal.value = resp.data.list.length;
? overviewList.value = handleOverviewList(resp.data.list);
};
const handleOverviewList = (data: OverviewListModel[], listLevel = 1) => {
? const result: OverviewListModel[] = data.map((item, index) => {
? ? return {
? ? ? ...item,
? ? ? // 新增字段
? ? ? disableExpand: !!item.sub_number,
? ? ? level: listLevel,
? ? ? id: listLevel + '-' + index,
? ? ? // 處理list
? ? ? list: item.list && item.list.length ? handleOverviewList(item.list as OverviewListModel[], listLevel + 1) : []
? ? };
? });
? return result;
};

    <overview-table
      ref="overviewTableRef"
      :total="overviewTotal"
      :data="overviewList"
    />

<template>
? <div>
? ? <expand-table
? ? ? ref="tableRef"
? ? ? :data="data"
? ? ? :total="total"
? ? ? :pageParams="pageParams"
? ? ? v-model:expandRowKeys="expandKeys"
? ? ? v-bind="$attrs"
? ? ? @oneClick="rowClick"
? ? ? @expand="handleExpand"
? ? >
? ? ? <template #expand="{ row }">
? ? ? ? <overview-table
? ? ? ? ? :ref="el => setOverviewDetailRef(el, row.id)"
? ? ? ? ? v-if="row.level !== 3"
? ? ? ? ? :data="row.list"
? ? ? ? ? :total="row.list.length"
? ? ? ? ? :show-header="false"
? ? ? ? ? :height="2000"
? ? ? ? ? :table-level="row.level + 1"
? ? ? ? />
? ? ? ? <overview-table-detail
? ? ? ? ? v-else
? ? ? ? ? :data="row.list"
? ? ? ? ? @openDialog="openDialog"
? ? ? ? />
? ? ? </template>
? ? ? <el-table-column
? ? ? ? prop="name"
? ? ? ? min-width="10%"
? ? ? ? label="數(shù)據(jù)類型"
? ? ? />
? ? ? ....
? ? ? <el-table-column
? ? ? ? prop="sub_number"
? ? ? ? min-width="10%"
? ? ? ? label="包含下級數(shù)"
? ? ? >
? ? ? ? <template #default="{ row }">
? ? ? ? ? <span :class="!row.sub_number ? 'no-sub' : ''">{{ row.sub_number }}</span>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <operation-column
? ? ? ? min-width="10%"
? ? ? ? :operationOptions="operationOptions"
? ? ? />
? ? </expand-table>
? ? <image-detail-dialog
? ? ? :showDeleteBtn="false"
? ? ? ref="imageDetailDialogRef"
? ? />
? </div>
</template>
<script setup lang="ts">
import { computed, ref, inject, nextTick } from 'vue';
import ExpandTable from '@/components/table/ExpandTable.vue';
import OverviewTableDetail from './OverviewTableDetail.vue';
import ImageDetailDialog from '../../original/stop/ImageDetailDialog.vue';
import OperationColumn, { OperationOptionModel } from '@/components/table/OperationColumn.vue';
import { PageAware } from '@/model';
import { ConfigModel } from 'public/config';
import { OverviewListModel } from '@/model/registration';
import { PhotoListModel } from '@/model/original';
const props = withDefaults(
? defineProps<{
? ? data: OverviewListModel[];
? ? total: number;
? ? tableLevel?: number;
? }>(),
? {
? ? data: () => [],
? ? tableLevel: 1
? }
);
const pageParams = ref<PageAware>({
? page_no: 1,
? page_size: (inject('global') as ConfigModel).registration.registrationLimit
});
const tableRef = ref<InstanceType<typeof ExpandTable>>();
const overviewDetailRefs = ref<any>({});
const imageDetailDialogRef = ref<InstanceType<typeof ImageDetailDialog>>();
const expandKeys = ref<string[]>([]);
const operationOptions = computed<OperationOptionModel[]>(() => {
? return [
? ? {
? ? ? icon: 'icon-upload',
? ? ? title: '上傳',
? ? ? hidden: props.tableLevel !== 1,
? ? ? onClick: () => {}
? ? },
? ? {
? ? ? icon: 'icon-compute',
? ? ? title: '計算',
? ? ? hidden: props.tableLevel !== 2,
? ? ? disabled: (row: OverviewListModel) => {
? ? ? ? return row.state !== '待計算';
? ? ? },
? ? ? onClick: () => {}
? ? }
? ];
});
// 動態(tài)ref
const setOverviewDetailRef = (el: any, id: number) => {
? if (el) {
? ? overviewDetailRefs.value[id] = el;
? }
};
// 打開彈窗
const openDialog = (index: any, data: PhotoListModel[]) => {
? imageDetailDialogRef.value?.open(index, data);
};
// 單擊展開/關(guān)閉
const rowClick = (row: OverviewListModel) => {
? if (expandKeys.value.includes(row.id)) {
? ? tableRef.value?.closeRowExpansion(row);
? } else {
? ? expandKeys.value.push(row.id);
? }
};
// 展開全部
const handleExpand = (ids: number[] | string[]) => {
? // 情況1:一級全部展開 點擊其他的時候 只展開下一級
? // const handleExpand = (ids: number[] | string[], autoExpand) => {
? // autoExpand.value = autoExpandEd ? autoExpandEd : props.tableLevel === 1;
? // if (!autoExpand.value) {
? // ? return;
? // }
? // ?情況3:點擊一級 只展開到三級
? // if (props.tableLevel !== 1) {
? // ? return;
? // }
? ids.forEach(async id => {
? ? await nextTick();
? ? const stopOverviewDetailRef = overviewDetailRefs.value[id];
? ? if (stopOverviewDetailRef) {
? ? ? await stopOverviewDetailRef?.openRowExpansion();
? ? }
? });
};
const openRowExpansion = () => {
? //情況1:一級全部展開 點擊其他的時候 只展開下一級
? // const ids = (props.data as OverviewListModel[]).map(i => i.id);
? // handleExpand(ids, true);
? // 情況2:點擊任何一級 他下面的都展開
? props.data.map(item => {
? ? if (!item.disableExpand) {
? ? ? return;
? ? }
? ? if (!expandKeys.value.includes(item.id)) {
? ? ? expandKeys.value.push(item.id);
? ? }
? });
};
const reset = () => {
? // 重新搜索的時候 關(guān)閉展開的
? tableRef.value?.closeAllExpand();
? expandKeys.value = [];
};
defineExpose({
? reset,
? expandKeys,
? openRowExpansion
});
</script>
<style lang="scss" scoped>
:deep(.el-table__expanded-cell[class*='cell']) {
? padding: 0;
}
:deep(.el-button + .el-button) {
? margin-left: 0;
}
.no-sub {
? color: #b9bdc9;
}
// 防止彈框樣式有問題
:deep(.el-table .el-table__row) {
? position: relative;
? z-index: 0;
}
</style>