feat: 🚀 订阅功能

src/components/ProTable/components/ColSetting.vue

@@ -0,0 +1,45 @@
+<template>
+    <!-- 列设置 -->
+    <el-drawer v-model="drawerVisible" title="列设置" size="450px">
+        <div class="table-main">
+            <el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
+                <el-table-column prop="label" align="center" label="列名" />
+                <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
+                    <el-switch v-model="scope.row.isShow"></el-switch>
+                </el-table-column>
+                <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
+                    <el-switch v-model="scope.row.sortable"></el-switch>
+                </el-table-column>
+                <template #empty>
+                    <div class="table-empty">
+                        <img src="@/assets/images/notData.png" alt="notData" />
+                        <div>暂无可配置列</div>
+                    </div>
+                </template>
+            </el-table>
+        </div>
+    </el-drawer>
+</template>
+
+<script setup lang="ts" name="ColSetting">
+import { ref } from "vue";
+import { ColumnProps } from "@/components/ProTable/interface";
+
+defineProps<{ colSetting: ColumnProps[] }>();
+
+const drawerVisible = ref<boolean>(false);
+
+const openColSetting = () => {
+    drawerVisible.value = true;
+};
+
+defineExpose({
+    openColSetting
+});
+</script>
+
+<style scoped lang="scss">
+.cursor-move {
+    cursor: move;
+}
+</style>

src/components/ProTable/components/Empty.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="table-empty">
+        <slot name="empty">
+            <img src="@/assets/images/notData.png" alt="notData" />
+            <div>暂无数据</div>
+        </slot>
+    </div>
+</template>
+
+<script setup name="Empty"></script>
+
+<style lang="scss" scoped></style>

src/components/ProTable/components/Pagination.vue

@@ -0,0 +1,37 @@
+<template>
+    <!-- 分页组件 -->
+    <el-pagination
+        :background="true"
+        :current-page="pageable.page"
+        :page-size="pageable.size"
+        :page-sizes="sizes"
+        :total="pageable.total_size"
+        layout="slot,sizes, total,prev,pager, next,jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    >
+        <span style="font-size: 12px">
+            <span>共选中</span>
+            <span style="margin: 0 5px; color: #4178d5"> {{ length ? length : 0 }}</span>
+            <span>行 </span>
+        </span>
+    </el-pagination>
+</template>
+
+<script setup lang="ts" name="Pagination">
+interface Pageable {
+    page: number;
+    size: number;
+    total_size: number;
+}
+//size
+interface PaginationProps {
+    pageable: Pageable;
+    handleSizeChange: (size: number) => void;
+    handleCurrentChange: (currentPage: number) => void;
+    length: number;
+    sizes: any;
+}
+
+defineProps<PaginationProps>();
+</script>

src/components/ProTable/components/TableColumn.vue

@@ -0,0 +1,90 @@
+<template>
+    <RenderTableColumn v-bind="column" />
+</template>
+
+<script setup lang="tsx" name="TableColumn">
+import { inject, ref, useSlots } from "vue";
+import { ColumnProps, RenderScope, HeaderRenderScope } from "@/components/ProTable/interface";
+import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "@/utils";
+
+defineProps<{ column: ColumnProps }>();
+
+const slots = useSlots();
+
+const enumMap = inject("enumMap", ref(new Map()));
+
+// 渲染表格数据
+const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
+    return enumMap.value.get(item.prop) && item.isFilterEnum
+        ? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
+        : formatValue(handleRowAccordingToProp(scope.row, item.prop!));
+};
+
+// 获取 tag 类型
+const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
+    return filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, "tag");
+};
+
+const RenderTableColumn = (item: ColumnProps) => {
+    return (
+        <>
+            {item.isShow && (
+                <el-table-column
+                    {...item}
+                    align={item.align ?? "center"}
+                    showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== "operation"}
+                >
+                    {{
+                        default: (scope: RenderScope<any>) => {
+                            if (item._children) return item._children.map(child => RenderTableColumn(child));
+                            if (item.render) return item.render(scope);
+                            if (slots[handleProp(item.prop!)]) return slots[handleProp(item.prop!)]!(scope);
+                            if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>;
+                            return renderCellData(item, scope);
+                        },
+                        header: (scope: HeaderRenderScope<any>) => {
+                            if (item.headerRender) return item.headerRender(scope);
+                            if (slots[`${handleProp(item.prop!)}Header`]) return slots[`${handleProp(item.prop!)}Header`]!(scope);
+                            return item.label;
+                        }
+                    }}
+                </el-table-column>
+            )}
+        </>
+    );
+};
+</script>
+<style scope lang="scss">
+.color-a {
+    color: #909399;
+}
+.color-b {
+    color: #409eff;
+}
+.color-c {
+    color: #67c23a;
+}
+.color-d {
+    color: #e6a23c;
+}
+
+// .label {
+//     width: 100%;
+//     border-right: 1px solid #ced1d9;
+// }
+
+// .table-main .el-table .el-table__header .el-table__cell > .cell {
+//     width: 100%;
+//     height: 18px;
+//     border-right: 1px solid #ced1d9;
+// }
+// .table-main .el-table .el-table__header .el-table__cell:first-child > .cell {
+//     border-right: none;
+// }
+// .table-main .el-table .el-table__header .el-table__cell:last-child > .cell {
+//     border-right: none;
+// }
+// .el-table.is-scrolling-left th.el-table-fixed-column--left {
+//     background-color: #f5f7fa;
+// }
+</style>

src/components/ProTable/index.vue

@@ -0,0 +1,217 @@
+<template>
+    <!-- 表格内容 card -->
+    <div :class="!isBoxClass ? '' : 'card table-main'">
+        <!-- 查询表单 card -->
+        <!-- <SearchForm
+            v-show="isShowSearch"
+            :search="search"
+            :reset="reset"
+            :formData="formData"
+            :search-param="searchParam"
+            :search-col="searchCol"
+        /> -->
+        <slot name="search"></slot>
+        <!-- 表格头部 操作按钮 -->
+        <div class="table-header">
+            <div class="header-button-lf">
+                <slot
+                    name="tableHeader"
+                    :selected-list-ids="selectedListIds"
+                    :selected-list="selectedList"
+                    :is-selected="isSelected"
+                />
+            </div>
+        </div>
+        <!-- 表格主体 -->
+        <el-table
+            ref="tableRef"
+            v-bind="$attrs"
+            :data="data ?? tableData"
+            :border="border"
+            :row-key="
+                row => {
+                    return routeName === 'boxCode' || routeName === 'boxMarkIndex' ? row.detailId + '' + row.id : row.id;
+                }
+            "
+            @selection-change="selectionChange"
+            :style="!isBoxClass ? 'height: 400px; overflow-y: auto' : ''"
+        >
+            <!-- 默认插槽 -->
+            <slot></slot>
+            <template v-for="item in tableColumns" :key="item">
+                <!-- selection || index || expand -->
+                <el-table-column
+                    v-if="item.type && ['selection', 'index', 'expand'].includes(item.type)"
+                    v-bind="item"
+                    :align="item.align ?? 'center'"
+                    :reserve-selection="item.type == 'selection'"
+                >
+                    <template v-if="item.type == 'expand'" #default="scope">
+                        <component :is="item.render" v-bind="scope" v-if="item.render"> </component>
+                        <slot v-else :name="item.type" v-bind="scope"></slot>
+                    </template>
+                </el-table-column>
+                <!-- other -->
+                <TableColumn v-if="!item.type && item.prop && item.isShow" :column="item">
+                    <template v-for="slot in Object.keys($slots)" #[slot]="scope">
+                        <slot :name="slot" v-bind="scope"></slot>
+                    </template>
+                </TableColumn>
+            </template>
+            <!-- 插入表格最后一行之后的插槽 -->
+            <template #append>
+                <slot name="append"> </slot>
+            </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"
+                :length="selectedList.length"
+                :sizes="sizes"
+            />
+        </slot>
+    </div>
+    <!-- 列设置 -->
+    <ColSetting v-if="toolButton" ref="colRef" v-model:col-setting="colSetting" />
+</template>
+
+<script setup lang="ts" name="ProTable">
+// import SearchForm from "@/components/SearchForm/index.vue";
+// /watch
+import { ref, provide, onMounted, toRef } 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 } from "@/components/ProTable/interface";
+// 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";
+const $router = useRouter();
+const routeName: any = ref($router.currentRoute.value.name);
+export interface ProTableProps {
+    columns: ColumnProps[]; // 列配置项  ==> 必传
+    // formData?: any[];
+    isBoxClass?: boolean;
+    data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
+    requestApi?: (params: any) => Promise<any>; // Promise<any>; // 请求表格数据的 api ==> 非必传
+    requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
+    requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
+    dataCallback?: (data: any) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
+    title?: string; // 表格标题，目前只在打印的时候用到 ==> 非必传
+    pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
+    initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
+    orgCode?: any; //组织ID,组织id改变时，重新请求数据
+    border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
+    toolButton?: boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
+    rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
+    //  searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
+    sizes?: any;
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+    formData: () => [],
+    columns: () => [],
+    requestAuto: true,
+    pagination: true,
+    initParam: {},
+    isBoxClass: true,
+    border: true,
+    toolButton: true,
+    // rowKey: `id${index}`,
+    // searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+    sizes: [1, 2, 3, 4]
+});
+
+// 是否显示搜索模块
+// const isShowSearch = ref(true);
+// 表格 DOM 元素
+const tableRef = ref<InstanceType<typeof ElTable>>();
+const newValInitParams = toRef(props, "initParam");
+// 表格多选 Hooks
+const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey);
+
+// 清空选中数据列表
+const clearSelection = () => tableRef.value!.clearSelection();
+// 表格操作 Hooks
+const { tableData, pageable, getTableList, handleSizeChange, handleCurrentChange } = useTable(
+    routeName.value,
+    props.requestApi,
+    newValInitParams,
+    props.pagination,
+    props.requestError,
+    clearSelection
+);
+// 初始化请求
+onMounted(() => props.requestAuto && getTableList());
+
+// 接收 columns 并设置为响应式
+const tableColumns = ref<ColumnProps[]>(props.columns);
+
+// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
+const enumMap = ref(new Map<string, { [key: string]: any }[]>());
+provide("enumMap", enumMap);
+const setEnumMap = async (col: ColumnProps) => {
+    if (!col.enum) return;
+    // 如果当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+    if (typeof col.enum !== "function") return enumMap.value.set(col.prop!, col.enum!);
+    const { data } = await col.enum();
+    enumMap.value.set(col.prop!, data);
+};
+
+// 扁平化 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 && isFilterEnum 默认属性
+        col.isShow = col.isShow ?? true;
+        col.isFilterEnum = col.isFilterEnum ?? true;
+
+        // 设置 enumMap
+        setEnumMap(col);
+    });
+    return flatArr.filter(item => !item._children?.length);
+};
+
+// flatColumns
+const flatColumns = ref<ColumnProps[]>();
+flatColumns.value = flatColumnsFunc(tableColumns.value);
+
+// 列设置 ==> 过滤掉不需要设置的列
+const colRef = ref();
+const colSetting = tableColumns.value!.filter(
+    item => !["selection", "index", "expand"].includes(item.type!) && item.prop !== "operation" && item.isShow
+);
+
+// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
+defineExpose({
+    element: tableRef,
+    tableData,
+    pageable,
+    getTableList,
+    handleSizeChange,
+    handleCurrentChange,
+    clearSelection,
+    enumMap,
+    isSelected,
+    selectedList,
+    selectedListIds
+});
+</script>

src/components/ProTable/interface/index.ts

@@ -0,0 +1,81 @@
+import { VNode, ComponentPublicInstance } from "vue";
+import { BreakPoint, Responsive } from "@/components/Grid/interface";
+import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
+import { ProTableProps } from "@/components/ProTable/index.vue";
+import ProTable from "@/components/ProTable/index.vue";
+
+export interface EnumProps {
+    label?: string; // 选项框显示的文字
+    value?: string | number | boolean | any[]; // 选项框值
+    disabled?: boolean; // 是否禁用此选项
+    tagType?: string; // 当 tag 为 true 时，此选择会指定 tag 显示类型
+    children?: EnumProps[]; // 为树形选择时，可以通过 children 属性指定子选项
+    [key: string]: any;
+}
+
+export type TypeProps = "index" | "selection" | "expand";
+
+export type SearchType =
+    | "input"
+    | "input-number"
+    | "select"
+    | "select-v2"
+    | "tree-select"
+    | "cascader"
+    | "date-picker"
+    | "time-picker"
+    | "time-select"
+    | "switch"
+    | "slider";
+
+export type SearchRenderScope = {
+    searchParam: { [key: string]: any };
+    placeholder: string;
+    clearable: boolean;
+    options: EnumProps[];
+    data: EnumProps[];
+};
+
+export type SearchProps = {
+    el?: SearchType; // 当前项搜索框的类型
+    props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+    key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
+    order?: number; // 搜索项排序（从大到小）
+    span?: number; // 搜索项所占用的列数，默认为1列
+    offset?: number; // 搜索字段左侧偏移列数
+    defaultValue?: string | number | boolean | any[]; // 搜索项默认值
+    render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
+} & Partial<Record<BreakPoint, Responsive>>;
+
+export type FieldNamesProps = {
+    label: string;
+    value: string;
+    children?: string;
+};
+
+export type RenderScope<T> = {
+    row: T;
+    $index: number;
+    column: TableColumnCtx<T>;
+    [key: string]: any;
+};
+
+export type HeaderRenderScope<T> = {
+    $index: number;
+    column: TableColumnCtx<T>;
+    [key: string]: any;
+};
+
+export interface ColumnProps<T = any> extends Partial<Omit<TableColumnCtx<T>, "children" | "renderCell" | "renderHeader">> {
+    tag?: boolean; // 是否是标签展示
+    isShow?: boolean; // 是否显示在表格当中
+    search?: SearchProps | undefined; // 搜索项配置
+    enum?: EnumProps[] | ((params?: any) => Promise<any>); // 枚举类型（字典）
+    isFilterEnum?: boolean; // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据）
+    fieldNames?: FieldNamesProps; // 指定 label && value && children 的 key 值
+    headerRender?: (scope: HeaderRenderScope<T>) => VNode; // 自定义表头内容渲染（tsx语法）
+    render?: (scope: RenderScope<T>) => VNode | string; // 自定义单元格内容渲染（tsx语法）
+    _children?: ColumnProps<T>[]; // 多级表头
+}
+
+export type ProTableInstance = Omit<InstanceType<typeof ProTable>, keyof ComponentPublicInstance | keyof ProTableProps>;