refactor: PageTable组件重构

mayfly_go_web/src/components/pagetable/PageTable.vue

@@ -1,170 +1,112 @@
 <template>
-    <div class="page-table">
-        <!-- 
-            实现：通过我们配置好的 查询条件
-                首先去创建form表单，根据我们配置的查询条件去做一个循环判断，展示出不用类型所对应不同的输入框
-                比如：text对应普通的输入框，select对应下拉选择，dateTime对应日期时间选择器
-                在使用时，父组件会传来一个queryForm空的对象，
-                循环出来的输入框会绑定表格配置中的prop字段绑定在queryForm对象中
-         -->
+    <div>
+        <!-- 查询表单 -->
+        <SearchForm v-show="isShowSearch" :items="searchItems" v-model="queryForm_" :search="queryData" :reset="reset" :search-col="searchCol">
+            <!-- 遍历父组件传入的 solts 透传给子组件 -->
+            <template v-for="(_, key) in useSlots()" v-slot:[key]>
+                <slot :name="key"></slot>
+            </template>
+        </SearchForm>
+
         <el-card>
-            <div class="query" ref="queryRef">
-                <div>
-                    <div v-if="props.query.length > 0">
-                        <el-form :model="queryForm_" label-width="auto" :size="props.size">
-                            <el-row
-                                v-for="i in Math.ceil((props.query.length + 1) / (defaultQueryCount + 1))"
-                                :key="i"
-                                v-show="i == 1 || isOpenMoreQuery"
-                                :class="i > 1 && isOpenMoreQuery ? 'is-open' : ''"
+            <div class="table-main">
+                <!-- 表格头部 操作按钮 -->
+                <div class="table-header">
+                    <div class="header-button-lf">
+                        <slot name="tableHeader" />
+                    </div>
+
+                    <div v-if="toolButton" class="header-button-ri">
+                        <slot name="toolButton">
+                            <el-button v-if="showToolButton('refresh')" icon="Refresh" circle @click="execQuery()" />
+
+                            <el-button v-if="showToolButton('search') && searchItems?.length" icon="Search" circle @click="isShowSearch = !isShowSearch" />
+
+                            <el-popover
+                                placement="bottom"
+                                title="表格配置"
+                                popper-style="max-height: 550px; overflow: auto; max-width: 450px"
+                                width="auto"
+                                trigger="click"
                             >
-                                <el-form-item
-                                    :label="item.label"
-                                    style="margin-right: 12px; margin-bottom: 0px"
-                                    v-for="item in getRowQueryItem(i)"
-                                    :key="item.prop"
-                                >
-                                    <!-- 这里只获取指定个数的筛选条件 -->
-                                    <el-input
-                                        v-model="queryForm_[item.prop]"
-                                        :placeholder="'输入' + item.label + '关键字'"
-                                        clearable
-                                        v-if="item.type == 'text'"
-                                    ></el-input>
-
-                                    <el-select-v2
-                                        v-model="queryForm_[item.prop]"
-                                        :options="item.options"
-                                        clearable
-                                        :placeholder="'选择' + item.label + '关键字'"
-                                        v-else-if="item.type == 'select'"
-                                    />
-
-                                    <el-date-picker
-                                        v-model="queryForm_[item.prop]"
-                                        clearable
-                                        type="datetimerange"
-                                        format="YYYY-MM-DD hh:mm:ss"
-                                        value-format="x"
-                                        range-separator="至"
-                                        start-placeholder="开始时间"
-                                        end-placeholder="结束时间"
-                                        v-else-if="item.type == 'date'"
-                                    />
-
-                                    <template v-else-if="item.slot == 'queryBtns'">
-                                        <template v-if="props.query?.length > defaultQueryCount">
-                                            <el-button
-                                                @click="isOpenMoreQuery = !isOpenMoreQuery"
-                                                v-if="!isOpenMoreQuery"
-                                                icon="ArrowDownBold"
-                                                circle
-                                            ></el-button>
-                                            <el-button @click="isOpenMoreQuery = !isOpenMoreQuery" v-else icon="ArrowUpBold" circle></el-button>
-                                        </template>
-
-                                        <el-button @click="queryData()" type="primary" icon="search" plain>查询</el-button>
-                                        <el-button @click="reset()" icon="RefreshRight">重置</el-button>
-                                    </template>
-
-                                    <slot :name="item.slot"></slot>
-                                </el-form-item>
-                            </el-row>
-                        </el-form>
+                                <div v-for="(item, index) in tableColumns" :key="index">
+                                    <el-checkbox v-model="item.show" :label="item.label" :true-label="true" :false-label="false" />
+                                </div>
+                                <template #reference>
+                                    <el-button icon="Operation" circle :size="props.size"></el-button>
+                                </template>
+                            </el-popover>
+                        </slot>
                     </div>
                 </div>
 
-                <div class="slot">
-                    <!-- 查询栏右侧slot插槽（用来添加表格其他操作，比如，新增数据，删除数据等其他操作） -->
-                    <slot name="queryRight"></slot>
+                <el-table
+                    v-bind="$attrs"
+                    :max-height="tableMaxHeight"
+                    @selection-change="handleSelectionChange"
+                    :data="state.data"
+                    highlight-current-row
+                    v-loading="state.loading"
+                    :size="props.size"
+                    :border="border"
+                >
+                    <el-table-column v-if="props.showSelection" type="selection" width="40" />
 
-                    <!-- 
-                    动态表头显示，根据表格每条配置项中的show字段来决定改列是否显示或者隐藏 
-                    columns 就是我们表格配置的数组对象
-                    -->
-                    <el-popover
-                        placement="bottom"
-                        title="表格配置"
-                        popper-style="max-height: 550px; overflow: auto; max-width: 450px"
-                        width="auto"
-                        trigger="click"
-                    >
-                        <div v-for="(item, index) in props.columns" :key="index">
-                            <el-checkbox v-model="item.show" :label="item.label" :true-label="true" :false-label="false" />
-                        </div>
-                        <template #reference>
-                            <!-- 一个Element Plus中的图标 -->
-                            <el-button icon="Operation" :size="props.size"></el-button>
-                        </template>
-                    </el-popover>
-                </div>
+                    <template v-for="(item, index) in tableColumns">
+                        <el-table-column
+                            :key="index"
+                            v-if="item.show"
+                            :prop="item.prop"
+                            :label="item.label"
+                            :fixed="item.fixed"
+                            :align="item.align"
+                            :show-overflow-tooltip="item.showOverflowTooltip"
+                            :min-width="item.minWidth"
+                            :sortable="item.sortable || false"
+                            :type="item.type"
+                            :width="item.width"
+                        >
+                            <!-- 插槽：预留功能 -->
+                            <template #default="scope" v-if="item.slot">
+                                <slot :name="item.prop" :data="scope.row"></slot>
+                            </template>
+
+                            <!-- 枚举类型使用tab展示 -->
+                            <template #default="scope" v-else-if="item.type == 'tag'">
+                                <enum-tag :size="props.size" :enums="item.typeParam" :value="scope.row[item.prop]"></enum-tag>
+                            </template>
+
+                            <template #default="scope" v-else>
+                                <!-- 配置了美化文本按钮以及文本内容大于指定长度，则显示美化按钮 -->
+                                <el-popover
+                                    v-if="item.isBeautify && scope.row[item.prop]?.length > 35"
+                                    effect="light"
+                                    trigger="click"
+                                    placement="top"
+                                    width="600px"
+                                >
+                                    <template #default>
+                                        <el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
+                                    </template>
+                                    <template #reference>
+                                        <el-link
+                                            @click="formatText(scope.row[item.prop])"
+                                            :underline="false"
+                                            type="success"
+                                            icon="MagicStick"
+                                            class="mr5"
+                                        ></el-link>
+                                    </template>
+                                </el-popover>
+
+                                <span>{{ item.getValueByData(scope.row) }}</span>
+                            </template>
+                        </el-table-column>
+                    </template>
+                </el-table>
             </div>
 
-            <el-table
-                v-bind="$attrs"
-                :max-height="tableMaxHeight"
-                @selection-change="handleSelectionChange"
-                :data="state.data"
-                highlight-current-row
-                v-loading="state.loading"
-                :size="props.size"
-            >
-                <el-table-column v-if="props.showSelection" type="selection" width="40" />
-
-                <template v-for="(item, index) in columns">
-                    <el-table-column
-                        :key="index"
-                        v-if="item.show"
-                        :prop="item.prop"
-                        :label="item.label"
-                        :fixed="item.fixed"
-                        :align="item.align"
-                        :show-overflow-tooltip="item.showOverflowTooltip"
-                        :min-width="item.minWidth"
-                        :sortable="item.sortable || false"
-                        :type="item.type"
-                        :width="item.width"
-                    >
-                        <!-- 插槽：预留功能 -->
-                        <template #default="scope" v-if="item.slot">
-                            <slot :name="item.prop" :data="scope.row"></slot>
-                        </template>
-
-                        <!-- 枚举类型使用tab展示 -->
-                        <template #default="scope" v-else-if="item.type == 'tag'">
-                            <enum-tag :size="props.size" :enums="item.typeParam" :value="scope.row[item.prop]"></enum-tag>
-                        </template>
-
-                        <template #default="scope" v-else>
-                            <!-- 配置了美化文本按钮以及文本内容大于指定长度，则显示美化按钮 -->
-                            <el-popover
-                                v-if="item.isBeautify && scope.row[item.prop]?.length > 35"
-                                effect="light"
-                                trigger="click"
-                                placement="top"
-                                width="600px"
-                            >
-                                <template #default>
-                                    <el-input :autosize="{ minRows: 3, maxRows: 15 }" disabled v-model="formatVal" type="textarea" />
-                                </template>
-                                <template #reference>
-                                    <el-link
-                                        @click="formatText(scope.row[item.prop])"
-                                        :underline="false"
-                                        type="success"
-                                        icon="MagicStick"
-                                        class="mr5"
-                                    ></el-link>
-                                </template>
-                            </el-popover>
-
-                            <span>{{ item.getValueByData(scope.row) }}</span>
-                        </template>
-                    </el-table-column>
-                </template>
-            </el-table>
-
-            <el-row style="margin-top: 20px" type="flex" justify="end">
+            <el-row class="mt20" type="flex" justify="end">
                 <el-pagination
                     :small="props.size == 'small'"
                     @current-change="handlePageChange"
@@ -182,79 +124,55 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, watch, reactive, onMounted, Ref } from 'vue';
-import { TableColumn, TableQuery } from './index';
+import { toRefs, watch, reactive, onMounted, Ref, ref, useSlots } from 'vue';
+import { TableColumn } from './index';
 import EnumTag from '@/components/enumtag/EnumTag.vue';
 import { useThemeConfig } from '@/store/themeConfig';
 import { storeToRefs } from 'pinia';
-import { useVModel } from '@vueuse/core';
+import { useVModel, useEventListener } from '@vueuse/core';
 import Api from '@/common/Api';
+import SearchForm from '@/components/SearchForm/index.vue';
+import { SearchItem } from '../SearchForm/index';
 
-const emit = defineEmits(['update:queryForm', 'update:pageNum', 'update:pageSize', 'update:selectionData', 'pageChange']);
+const emit = defineEmits(['update:queryForm', 'update:selectionData', 'pageChange']);
 
-const props = defineProps({
-    size: {
-        type: String,
-        default: '',
-    },
-    inputWidth: {
-        type: [Number, String],
-        default: '200px',
-    },
-    // 是否显示选择列
-    showSelection: {
-        type: Boolean,
-        default: false,
-    },
-    // 当前选择的数据
-    selectionData: {
-        type: Array<any>,
-    },
-    // 列信息
-    columns: {
-        type: Array<TableColumn>,
-        default: function () {
-            return [];
-        },
-        required: true,
-    },
-    // 调用分页数据的api
-    pageApi: {
-        type: Api,
-        required: true,
-    },
-    // 懒加载，即需要手动调用search方法才可调接口获取数据，不会在mounted的时候调用。
-    lazy: {
-        type: Boolean,
-        default: false,
-    },
-    // 执行查询时对查询参数进行处理，调整等
-    beforeQueryFn: {
-        type: Function,
-    },
-    // 数据处理回调函数，用于将请求回来的数据二次加工处理等
-    dataHandlerFn: {
-        type: Function,
-    },
-    // 查询条件配置
-    query: {
-        type: Array<TableQuery>,
-        default: function () {
-            return [];
-        },
-    },
-    // 绑定的查询表单
+export interface PageTableProps {
+    size?: string;
+    showSelection?: boolean;
+    showSearch?: boolean; // 是否显示搜索表单
+    columns: TableColumn[]; // 列配置项  ==> 必传
+    data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
+    pageApi: Api; // 请求表格数据的 api
+    lazy?: boolean; // 是否自动执行请求 api ==> 非必传（默认为false）
+    beforeQueryFn?: (params: any) => any; // 执行查询时对查询参数进行处理，调整等
+    dataHandlerFn?: (data: any) => any; // 数据处理回调函数，用于将请求回来的数据二次加工处理等
+    searchItems?: SearchItem[];
+    queryForm?: any; // 查询表单参数 ==> 非必传（默认为{pageNum:1, pageSize: 10}）
+    border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为false）
+    toolButton?: ('refresh' | 'setting' | 'search')[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
+    searchCol?: any; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<PageTableProps>(), {
+    columns: () => [],
+    showSelection: false,
+    lazy: false,
+    initParam: {},
     queryForm: {
-        type: Object,
-        default: function () {
-            return {
-                pageNum: 1,
-                pageSize: 10,
-            };
-        },
+        pageNum: 1,
+        pageSize: 0,
     },
+    border: false,
+    toolButton: true,
+    showSearch: false,
+    searchItems: () => [],
+    searchCol: () => ({ xs: 1, sm: 3, md: 3, lg: 4, xl: 4 }),
 });
 
+// 接收 columns 并设置为响应式
+const tableColumns = reactive<TableColumn[]>(props.columns);
+
 const { themeConfig } = storeToRefs(useThemeConfig());
 
 const state = reactive({
@@ -267,10 +185,18 @@ const state = reactive({
     // 输入框宽度
     inputWidth_: '200px' as any,
     formatVal: '', // 格式化后的值
-    tableMaxHeight: window.innerHeight - 240 + 'px',
+    tableMaxHeight: '500px',
 });
 
-const { pageSizes, isOpenMoreQuery, defaultQueryCount, inputWidth_, formatVal, tableMaxHeight } = toRefs(state);
+// 是否显示搜索模块
+const isShowSearch = ref(props.showSearch);
+
+// 控制 ToolButton 显示
+const showToolButton = (key: 'refresh' | 'setting' | 'search') => {
+    return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton;
+};
+
+const { pageSizes, formatVal, tableMaxHeight } = toRefs(state);
 
 const queryForm_: Ref<any> = useVModel(props, 'queryForm', emit);
 
@@ -287,9 +213,19 @@ watch(
     }
 );
 
-onMounted(async () => {
-    let pageSize = queryForm_.value.pageSize;
+watch(
+    () => isShowSearch.value,
+    () => {
+        console.log('watch show sa');
+        calcuTableHeight();
+    }
+);
 
+onMounted(async () => {
+    calcuTableHeight();
+    useEventListener(window, 'resize', calcuTableHeight);
+
+    let pageSize = queryForm_.value.pageSize;
     // 如果pageSize设为0，则使用系统全局配置的pageSize
     if (!pageSize) {
         pageSize = themeConfig.value.defaultListPageSize;
@@ -303,24 +239,14 @@ onMounted(async () => {
     queryForm_.value.pageSize = pageSize;
     state.pageSizes = [pageSize, pageSize * 2, pageSize * 3, pageSize * 4, pageSize * 5];
 
-    // 如果没传输入框宽度，则根据组件size设置默认宽度
-    if (!props.inputWidth) {
-        state.inputWidth_ = props.size == 'small' ? '150px' : '200px';
-    } else {
-        state.inputWidth_ = props.inputWidth;
-    }
-
-    window.addEventListener('resize', () => {
-        calcuTableHeight();
-    });
-
     if (!props.lazy) {
         await reqPageApi();
     }
 });
 
 const calcuTableHeight = () => {
-    state.tableMaxHeight = window.innerHeight - 240 + 'px';
+    const headerHeight = isShowSearch.value ? 320 : 240;
+    state.tableMaxHeight = window.innerHeight - headerHeight + 'px';
 };
 
 const formatText = (data: any) => {
@@ -332,18 +258,6 @@ const formatText = (data: any) => {
     }
 };
 
-const getRowQueryItem = (row: number) => {
-    // 第一行需要加个查询等按钮列
-    if (row === 1) {
-        const res = props.query.slice(row - 1, defaultQueryCount.value);
-        // 查询等按钮列
-        res.push(TableQuery.slot('', '', 'queryBtns'));
-        return res;
-    }
-    const columnCount = defaultQueryCount.value + 1;
-    return props.query.slice((row - 1) * columnCount - 1, row * columnCount - 1);
-};
-
 const handleSelectionChange = (val: any) => {
     emit('update:selectionData', val);
 };
@@ -390,7 +304,7 @@ const queryData = () => {
 
 const reset = () => {
     // 将查询参数绑定的值置空，并重新粗发查询接口
-    for (let qi of props.query) {
+    for (let qi of props.searchItems) {
         queryForm_.value[qi.prop] = null;
     }
 
@@ -411,49 +325,88 @@ defineExpose({
 });
 </script>
 <style scoped lang="scss">
-.page-table {
-    .query {
-        margin-bottom: 10px;
-        overflow: hidden;
+.table-box,
+.table-main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
 
-        .is-open {
-            // padding: 10px 0;
-            max-height: 200px;
-            margin-top: 10px;
+    // 表格 header 样式
+    .table-header {
+        width: 100%;
+        .header-button-lf {
+            float: left;
         }
 
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
+        .header-button-ri {
+            float: right;
+        }
 
-        .slot {
-            display: flex;
-            justify-content: flex-end;
+        .el-button {
+            margin-bottom: 10px;
         }
     }
 
-    .page {
-        margin-top: 10px;
+    // el-table 表格样式
+    .el-table {
+        flex: 1;
+
+        // 修复 safari 浏览器表格错位 https://github.com/HalseySpicy/Geeker-Admin/issues/83
+        table {
+            width: 100%;
+        }
+
+        // .el-table__header th {
+        //     height: 45px;
+        //     font-size: 15px;
+        //     font-weight: bold;
+        //     color: var(--el-text-color-primary);
+        //     background: var(--el-fill-color-light);
+        // }
+
+        // .el-table__row {
+        //     height: 45px;
+        //     font-size: 14px;
+
+        //     .move {
+        //         cursor: move;
+
+        //         .el-icon {
+        //             cursor: move;
+        //         }
+        //     }
+        // }
+
+        // 设置 el-table 中 header 文字不换行，并省略
+        .el-table__header .el-table__cell > .cell {
+            // white-space: nowrap;
+            white-space: wrap;
+        }
+
+        // 解决表格数据为空时样式不居中问题(仅在element-plus中)
+        // .el-table__empty-block {
+        //     position: absolute;
+        //     top: 50%;
+        //     left: 50%;
+        //     transform: translate(-50%, -50%);
+
+        //     .table-empty {
+        //         line-height: 30px;
+        //     }
+        // }
+
+        // table 中 image 图片样式
+        .table-image {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+        }
     }
 }
 
 ::v-deep(.el-form-item__label) {
     font-weight: bold;
 }
-
-.el-select-v2 {
-    width: v-bind(inputWidth_);
-}
-
-.el-input {
-    width: v-bind(inputWidth_);
-}
-
-.el-select {
-    width: v-bind(inputWidth_);
-}
-
-.el-date-editor {
-    width: 380px !important;
-}
 </style>