<template>
|
<!-- 查询表单 -->
|
<SearchForm
|
v-show="isShowSearch"
|
:search="_search"
|
:reset="_reset"
|
:columns="searchColumns"
|
:search-param="searchParam"
|
:search-col="12"
|
/>
|
|
<!-- 表格主体 -->
|
<div class="card table-main">
|
<!-- 表格头部 操作按钮 -->
|
<div class="table-header">
|
<div class="header-button-lf">
|
<slot name="tableHeader" :selected-list="selectedList" :selected-list-ids="selectedListIds" :is-selected="isSelected" />
|
</div>
|
<div v-if="toolButton" class="header-button-ri">
|
<slot name="UpdateList"></slot>
|
<slot name="toolButton">
|
<el-button v-if="showToolButton('refresh')" :icon="Refresh" circle @click="getTableList" />
|
<el-button v-if="showToolButton('setting') && columns.length" :icon="Operation" circle @click="openColSetting" />
|
<el-button
|
v-if="showToolButton('search') && searchColumns?.length"
|
:icon="Search"
|
circle
|
@click="isShowSearch = !isShowSearch"
|
/>
|
|
<el-button v-if="showToolButton('export')" :icon="Download" circle @click="exportData" />
|
</slot>
|
</div>
|
</div>
|
<!-- 表格主体 -->
|
<el-table
|
ref="tableRef"
|
v-bind="$attrs"
|
:id="uuid"
|
:data="processTableData"
|
:row-key="rowKey"
|
@selection-change="selectionChange"
|
>
|
<!-- 默认插槽 -->
|
<slot />
|
<template v-for="item in tableColumns" :key="item">
|
<!-- selection || radio || index || expand || sort -->
|
<el-table-column
|
v-if="item.type && columnTypes.includes(item.type)"
|
v-bind="item"
|
:align="item.align ?? 'center'"
|
:reserve-selection="item.type == 'selection'"
|
>
|
<template #default="scope">
|
<!-- expand -->
|
<template v-if="item.type == 'expand'">
|
<component :is="item.render" v-bind="scope" v-if="item.render" />
|
<slot v-else :name="item.type" v-bind="scope" />
|
</template>
|
<!-- radio -->
|
<el-radio v-if="item.type == 'radio'" v-model="radio" :label="scope.row[rowKey]">
|
<i></i>
|
</el-radio>
|
<!-- sort -->
|
<el-tag v-if="item.type == 'sort'" class="move">
|
<el-icon> <DCaret /></el-icon>
|
</el-tag>
|
</template>
|
</el-table-column>
|
<!-- other -->
|
<TableColumn v-else :column="item">
|
<template v-for="slot in Object.keys($slots)" #[slot]="scope">
|
<slot :name="slot" v-bind="scope" />
|
</template>
|
</TableColumn>
|
</template>
|
<!-- 插入表格最后一行之后的插槽 -->
|
<template #append>
|
<slot name="append" />
|
</template>
|
<!-- 无数据 -->
|
<template #empty>
|
<div class="table-empty">
|
<slot name="empty">
|
<img src="@/assets/images/notData.png" alt="notData" />
|
<div>暂无数据</div>
|
</slot>
|
</div>
|
</template>
|
</el-table>
|
<!-- 分页组件 -->
|
<slot name="pagination">
|
<Pagination
|
v-if="pagination"
|
:pageable="pageable"
|
:handle-size-change="handleSizeChange"
|
:handle-current-change="handleCurrentChange"
|
/>
|
</slot>
|
</div>
|
<!-- 列设置 -->
|
<ColSetting v-if="toolButton" ref="colRef" v-model:col-setting="colSetting" />
|
</template>
|
|
<script setup lang="ts" name="ProTable">
|
import { ref, watch, provide, onMounted, unref, computed, reactive } from "vue";
|
import { ElTable } from "element-plus";
|
import { useTable } from "@/hooks/useTable";
|
import { useSelection } from "@/hooks/useSelection";
|
import { BreakPoint } from "@/components/Grid/interface";
|
import { ColumnProps, TypeProps } from "@/components/ProTable/interface";
|
import { Refresh, Operation, Search, Download } from "@element-plus/icons-vue";
|
import { generateUUID, handleProp } from "@/utils";
|
import SearchForm from "@/components/SearchForm/index.vue";
|
import Pagination from "./components/Pagination.vue";
|
import ColSetting from "./components/ColSetting.vue";
|
import TableColumn from "./components/TableColumn.vue";
|
import Sortable from "sortablejs";
|
import { ElMessage } from "element-plus";
|
export interface ProTableProps {
|
columns: ColumnProps[]; // 列配置项 ==> 必传
|
data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
|
requestApi?: (params: any) => Promise<any>; // 请求表格数据的 api ==> 非必传
|
requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
|
requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
|
dataCallback?: (data: any) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
|
title?: string; // 表格标题 ==> 非必传
|
pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
|
initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
|
border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
|
toolButton?: ("refresh" | "setting" | "search")[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
|
rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
|
searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
|
}
|
|
// 在 ProTableProps 接口中添加导出相关配置
|
export interface ProTableProps {
|
// ...其他属性
|
exportFileName?: string; // 导出文件名 ==> 非必传（默认为'表格数据'）
|
exportMaxSize?: number; // 导出最大数据量 ==> 非必传（默认为10000）
|
}
|
|
// 接受父组件参数，配置默认值
|
const props = withDefaults(defineProps<ProTableProps>(), {
|
columns: () => [],
|
requestAuto: true,
|
pagination: true,
|
initParam: {},
|
border: true,
|
toolButton: true,
|
rowKey: "id",
|
searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
|
exportFileName: "表格数据",
|
exportMaxSize: 10000
|
});
|
|
// 导出方法
|
const exportData = () => {
|
// 获取要导出的数据
|
let dataToExport = [];
|
|
if (props.data) {
|
// 如果有静态数据，使用静态数据
|
dataToExport = props.data;
|
} else {
|
// 否则使用表格数据
|
dataToExport = tableData.value;
|
}
|
|
// 检查数据量是否超过限制
|
if (dataToExport.length > props.exportMaxSize) {
|
ElMessage.warning(`导出数据量超过限制（最大 ${props.exportMaxSize} 条），请筛选后导出`);
|
return;
|
}
|
|
// 处理导出数据
|
const exportColumns = flatColumns.value.filter(col => col.isShow && !columnTypes.includes(col.type!));
|
|
// 创建 CSV 内容
|
let csvContent = "";
|
|
// 添加表头
|
const headers = exportColumns.map(col => col.label || col.prop).join(",");
|
csvContent += headers + "\n";
|
|
// 添加数据行
|
dataToExport.forEach(row => {
|
const rowData = exportColumns
|
.map(col => {
|
let value = row[col.prop!];
|
// 如果有格式化函数，先格式化
|
if (col.formatter) {
|
value = col.formatter(row, col, value, 0);
|
}
|
// 处理枚举值
|
if (col.isFilterEnum && col.enum && enumMap.value.has(col.prop!)) {
|
const enumData = enumMap.value.get(col.prop!);
|
const enumItem = enumData?.find(item => item.value === value);
|
value = enumItem?.label ?? value;
|
}
|
// 处理 CSV 特殊字符
|
if (typeof value === "string" && (value.includes(",") || value.includes('"'))) {
|
value = `"${value.replace(/"/g, '""')}"`;
|
}
|
return value ?? "";
|
})
|
.join(",");
|
csvContent += rowData + "\n";
|
});
|
|
// 创建下载链接
|
const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
|
const link = document.createElement("a");
|
const url = URL.createObjectURL(blob);
|
|
link.href = url;
|
link.setAttribute("download", `${props.exportFileName}_${new Date().toISOString().slice(0, 10)}.csv`);
|
document.body.appendChild(link);
|
link.click();
|
|
// 清理
|
document.body.removeChild(link);
|
URL.revokeObjectURL(url);
|
|
ElMessage.success("导出成功");
|
};
|
|
// table 实例
|
const tableRef = ref<InstanceType<typeof ElTable>>();
|
|
// 生成组件唯一id
|
const uuid = ref("id-" + generateUUID());
|
|
// column 列类型
|
const columnTypes: TypeProps[] = ["selection", "radio", "index", "expand", "sort"];
|
|
// 是否显示搜索模块
|
const isShowSearch = ref(true);
|
|
// 控制 ToolButton 显示
|
const showToolButton = (key: "refresh" | "setting" | "search" | "export") => {
|
return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton;
|
};
|
|
// 单选值
|
const radio = ref("");
|
|
// 表格多选 Hooks
|
const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey);
|
|
// 表格操作 Hooks
|
const { tableData, pageable, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
|
useTable(props.requestApi, props.initParam, props.pagination, props.dataCallback, props.requestError);
|
|
// 清空选中数据列表
|
const clearSelection = () => tableRef.value!.clearSelection();
|
|
// 初始化表格数据 && 拖拽排序
|
onMounted(() => {
|
dragSort();
|
props.requestAuto && getTableList();
|
props.data && (pageable.value.total = props.data.length);
|
});
|
|
// 处理表格数据
|
const processTableData = computed(() => {
|
if (!props.data) return tableData.value;
|
if (!props.pagination) return props.data;
|
return props.data.slice(
|
(pageable.value.pageNum - 1) * pageable.value.pageSize,
|
pageable.value.pageSize * pageable.value.pageNum
|
);
|
});
|
|
// 监听页面 initParam 改化，重新获取表格数据
|
watch(() => props.initParam, getTableList, { deep: true });
|
|
// 接收 columns 并设置为响应式
|
const tableColumns = reactive<ColumnProps[]>(props.columns);
|
|
// 扁平化 columns
|
const flatColumns = computed(() => flatColumnsFunc(tableColumns));
|
|
// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
|
const enumMap = ref(new Map<string, { [key: string]: any }[]>());
|
const setEnumMap = async ({ prop, enum: enumValue }: ColumnProps) => {
|
if (!enumValue) return;
|
|
// 如果当前 enumMap 存在相同的值 return
|
if (enumMap.value.has(prop!) && (typeof enumValue === "function" || enumMap.value.get(prop!) === enumValue)) return;
|
|
// 当前 enum 为静态数据，则直接存储到 enumMap
|
if (typeof enumValue !== "function") return enumMap.value.set(prop!, unref(enumValue!));
|
|
// 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
|
enumMap.value.set(prop!, []);
|
|
// 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
|
const { data } = await enumValue();
|
enumMap.value.set(prop!, data);
|
};
|
|
// 注入 enumMap
|
provide("enumMap", enumMap);
|
|
// 扁平化 columns 的方法
|
const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) => {
|
columns.forEach(async col => {
|
if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children));
|
flatArr.push(col);
|
|
// column 添加默认 isShow && isSetting && isFilterEnum 属性值
|
col.isShow = col.isShow ?? true;
|
col.isSetting = col.isSetting ?? true;
|
col.isFilterEnum = col.isFilterEnum ?? true;
|
|
// 设置 enumMap
|
await setEnumMap(col);
|
});
|
return flatArr.filter(item => !item._children?.length);
|
};
|
|
// 过滤需要搜索的配置项 && 排序
|
const searchColumns = computed(() => {
|
return flatColumns.value
|
?.filter(item => item.search?.el || item.search?.render)
|
.sort((a, b) => a.search!.order! - b.search!.order!);
|
});
|
|
// 设置 搜索表单默认排序 && 搜索表单项的默认值
|
searchColumns.value?.forEach((column, index) => {
|
column.search!.order = column.search?.order ?? index + 2;
|
const key = column.search?.key ?? handleProp(column.prop!);
|
const defaultValue = column.search?.defaultValue;
|
if (defaultValue !== undefined && defaultValue !== null) {
|
searchParam.value[key] = defaultValue;
|
searchInitParam.value[key] = defaultValue;
|
}
|
});
|
|
// 列设置 ==> 需要过滤掉不需要设置的列
|
const colRef = ref();
|
const colSetting = tableColumns!.filter(item => {
|
const { type, prop, isSetting } = item;
|
return !columnTypes.includes(type!) && prop !== "operation" && isSetting;
|
});
|
const openColSetting = () => colRef.value.openColSetting();
|
|
// 定义 emit 事件
|
const emit = defineEmits<{
|
search: [];
|
reset: [];
|
dragSort: [{ newIndex?: number; oldIndex?: number }];
|
}>();
|
|
const _search = () => {
|
search();
|
emit("search");
|
};
|
|
const _reset = () => {
|
reset();
|
emit("reset");
|
};
|
|
// 表格拖拽排序
|
const dragSort = () => {
|
const tbody = document.querySelector(`#${uuid.value} tbody`) as HTMLElement;
|
Sortable.create(tbody, {
|
handle: ".move",
|
animation: 300,
|
onEnd({ newIndex, oldIndex }) {
|
const [removedItem] = processTableData.value.splice(oldIndex!, 1);
|
processTableData.value.splice(newIndex!, 0, removedItem);
|
emit("dragSort", { newIndex, oldIndex });
|
}
|
});
|
};
|
|
// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
|
defineExpose({
|
element: tableRef,
|
tableData: processTableData,
|
radio,
|
pageable,
|
searchParam,
|
searchInitParam,
|
isSelected,
|
selectedList,
|
selectedListIds,
|
|
// 下面为 function
|
getTableList,
|
search,
|
reset,
|
handleSizeChange,
|
handleCurrentChange,
|
clearSelection,
|
enumMap
|
});
|
</script>
|
