feat(PageContent): ✨ 支持表格远程筛选

src/components/PageContent/index.vue

@@ -110,6 +110,7 @@
       v-bind="contentConfig.table"
       :data="pageData"
       @selection-change="handleSelectionChange"
+      @filter-change="handleFilterChange"
     >
       <template v-for="col in cols" :key="col">
         <el-table-column v-if="col.show" v-bind="col">
@@ -380,7 +381,9 @@ export interface IContentConfig<T = any> {
     prop?: string;
     width?: string | number;
     align?: "left" | "center" | "right";
+    // 列是否显示
     show?: boolean;
+    // 模板
     templet?:
       | "image"
       | "list"
@@ -393,16 +396,23 @@ export interface IContentConfig<T = any> {
       | "date"
       | "tool"
       | "custom";
+    // image模板相关参数
     imageWidth?: number;
     imageHeight?: number;
+    // list模板相关参数
     selectList?: Record<string, any>;
+    // switch模板相关参数
     activeValue?: boolean | string | number;
     inactiveValue?: boolean | string | number;
     activeText?: string;
     inactiveText?: string;
+    // input模板相关参数
     inputType?: string;
+    // price模板相关参数
     priceFormat?: string;
+    // date模板相关参数
     dateFormat?: string;
+    // tool模板相关参数
     operat?: Array<
       | "edit"
       | "delete"
@@ -413,7 +423,11 @@ export interface IContentConfig<T = any> {
           text: string;
         }
     >;
+    // filter值拼接符
+    filterJoin?: string;
     [key: string]: any;
+    // 初始化数据函数
+    initFn?: (item: IObject) => void;
   }>;
 }
 const props = defineProps<{
@@ -427,6 +441,7 @@ const emit = defineEmits<{
   toolbarClick: [name: string];
   editClick: [row: IObject];
   operatClick: [data: IOperatData];
+  filterChange: [data: IObject];
 }>();
 
 // 主键
@@ -443,9 +458,17 @@ const defaultToolbar = props.contentConfig.defaultToolbar ?? [
 // 表格列
 const cols = ref(
   props.contentConfig.cols.map((col) => {
+    col.initFn && col.initFn(col);
     if (col.show === undefined) {
       col.show = true;
     }
+    if (
+      col.prop !== undefined &&
+      col.columnKey === undefined &&
+      col["column-key"] === undefined
+    ) {
+      col.columnKey = col.prop;
+    }
     return col;
   })
 );
@@ -602,7 +625,28 @@ function handleCurrentChange(value: number) {
   pagination.currentPage = value;
   fetchPageData(lastFormData);
 }
+// 远程数据筛选
+let filterParams: IObject = {};
+function handleFilterChange(newFilters: any) {
+  const filters: IObject = {};
+  for (const key in newFilters) {
+    const col = cols.value.find((col) => {
+      return col.columnKey === key || col["column-key"] === key;
+    });
+    if (col && col.filterJoin !== undefined) {
+      filters[key] = newFilters[key].join(col.filterJoin);
+    } else {
+      filters[key] = newFilters[key];
+    }
+  }
+  filterParams = { ...filterParams, ...filters };
+  emit("filterChange", filterParams);
+}
 
+// 获取涮选条件
+function getFilterParams() {
+  return filterParams;
+}
 // 获取分页数据
 let lastFormData = {};
 function fetchPageData(formData: IObject = {}, isRestart = false) {
@@ -666,7 +710,7 @@ function exportPageData(formData: IObject = {}) {
 }
 
 // 暴露的属性和方法
-defineExpose({ fetchPageData, exportPageData });
+defineExpose({ fetchPageData, exportPageData, getFilterParams });
 </script>
 
 <style lang="scss" scoped></style>

src/hooks/usePage.ts

@@ -13,11 +13,13 @@ function usePage() {
 
   // 搜索
   function handleQueryClick(queryParams: IObject) {
-    contentRef.value?.fetchPageData(queryParams, true);
+    const filterParams = contentRef.value?.getFilterParams();
+    contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
   }
   // 重置
   function handleResetClick(queryParams: IObject) {
-    contentRef.value?.fetchPageData(queryParams, true);
+    const filterParams = contentRef.value?.getFilterParams();
+    contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
   }
   // 新增
   function handleAddClick() {
@@ -45,6 +47,11 @@ function usePage() {
   function handleSearchClick() {
     searchRef.value?.toggleVisible();
   }
+  // 涮选数据
+  function handleFilterChange(filterParams) {
+    const queryParams = searchRef.value?.getQueryParams();
+    contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+  }
 
   return {
     searchRef,
@@ -58,6 +65,7 @@ function usePage() {
     handleSubmitClick,
     handleExportClick,
     handleSearchClick,
+    handleFilterChange,
   };
 }
 

src/views/demo/curd/config/content.ts

@@ -1,4 +1,5 @@
 import UserAPI from "@/api/user";
+import RoleAPI from "@/api/role";
 import type { UserQuery } from "@/api/user/model";
 import type { IContentConfig } from "@/components/PageContent/index.vue";
 
@@ -45,6 +46,22 @@ const contentConfig: IContentConfig<UserQuery> = {
     { label: "用户昵称", align: "center", prop: "nickname", width: 120 },
     { label: "性别", align: "center", prop: "genderLabel", width: 100 },
     { label: "部门", align: "center", prop: "deptName", width: 120 },
+    {
+      label: "角色",
+      align: "center",
+      prop: "roleNames",
+      width: 120,
+      columnKey: "roleIds",
+      filters: [],
+      filterMultiple: true,
+      filterJoin: ",",
+      async initFn(colItem) {
+        const roleOptions = await RoleAPI.getOptions();
+        colItem.filters = roleOptions.map((item) => {
+          return { text: item.label, value: item.value };
+        });
+      },
+    },
     { label: "手机号码", align: "center", prop: "mobile", width: 120 },
     {
       label: "状态",

src/views/demo/curd/index.vue

@@ -27,6 +27,7 @@
       @search-click="handleSearchClick"
       @toolbar-click="handleToolbarClick"
       @operat-click="handleOperatClick"
+      @filter-change="handleFilterChange"
     >
       <template #status="scope">
         <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
@@ -81,6 +82,7 @@ const {
   handleSubmitClick,
   handleExportClick,
   handleSearchClick,
+  handleFilterChange,
 } = usePage();
 // 编辑
 async function handleEditClick(row: IObject) {