Dev

src/components/RePlusPage/src/utils/columns.tsx

@@ -64,6 +64,7 @@ export function useBaseColumns(localeName: string) {
         tooltip: column?.help_text,
         options: computed(() => formatAddOrEditOptions(column.choices)),
         valueType: "input",
+        fieldProps: {},
         hideInForm: true,
         hideInTable: true
       };

src/components/RePlusPage/src/utils/handle.tsx

@@ -3,11 +3,11 @@ import { deviceDetection } from "@pureadmin/utils";
 import { type Component, h, type Ref, ref, toRaw } from "vue";
 import { cloneDeep } from "lodash-es";
 import { message } from "@/utils/message";
-import type { PlusColumn, PlusFormProps } from "plus-pro-components";
+import type { PlusFormProps } from "plus-pro-components";
 import { ElMessageBox, type FormInstance } from "element-plus";
 import type { BaseApi } from "@/api/base";
 import type { DetailResult } from "@/api/types";
-import { uniqueArrayObj } from "@/components/RePlusPage";
+import { type PageColumn, uniqueArrayObj } from "@/components/RePlusPage";
 import { resourcesIDCacheApi } from "@/api/common";
 import AddOrEdit from "../components/AddOrEdit.vue";
 import ExportData from "../components/ExportData.vue";
@@ -26,16 +26,30 @@ interface callBackArgs {
 interface formDialogOptions {
   t: (arg0: string, arg1?: object) => string;
   isAdd?: boolean;
-  row?: ((formOptions: formDialogOptions) => object) | object; //  外部处理方法
+  row?:
+    | object
+    | {
+        [key: string]: (formOptions: Partial<formDialogOptions>) => any;
+      }; //  外部处理方法
   title: string; // 弹窗的的title
   formValue?: Ref; // 表单值
-  rawRow: object; //  默认数据或者更新的数据
+  rawRow: { [key: string]: any }; //  默认数据或者更新的数据
   minWidth?: string; // 弹窗的的最小宽度
-  columns?: ((formOptions: formDialogOptions) => object) | object; // 表单字段
-  rawColumns?: PlusColumn[] | Array<any>; // 表单字段
+  columns?:
+    | object
+    | {
+        [key: string]: (
+          formOptions: Partial<formDialogOptions> & { column: PageColumn }
+        ) => object;
+      }; // 表单字段
+  rawColumns?: PageColumn[] | Array<any>; // 表单字段
   form?: Component | any; // 挂载的form组件，默认是AddOrEdit组件
   props?: ((formOptions: formDialogOptions) => object) | object; //  内容区组件的 props，可通过 defineProps 接收
-  formProps?: ((formOptions: formDialogOptions) => object) | object; //  plus form 的props
+  formProps?:
+    | object
+    | {
+        [key: string]: (formOptions: Partial<formDialogOptions>) => any;
+      }; //  plus form 的props
   rawFormProps?: PlusFormProps; //  plus form 的props
   dialogOptions?: DialogOptions; // dialog options
   beforeSubmit?: ({

src/views/demo/book/index.vue

@@ -7,14 +7,24 @@ defineOptions({
   name: "DemoBook" // 必须定义，用于菜单自动匹配组件
 });
 const tableRef = ref();
-const { api, auth, operationButtonsProps } = useDemoBook(tableRef);
+const {
+  api,
+  auth,
+  addOrEditOptions,
+  searchColumnsFormat,
+  tableBarButtonsProps,
+  operationButtonsProps
+} = useDemoBook(tableRef);
 </script>
 <template>
   <RePlusPage
     ref="tableRef"
     :api="api"
     :auth="auth"
     locale-name="demoBook"
+    :search-columns-format="searchColumnsFormat"
+    :add-or-edit-options="addOrEditOptions"
+    :tableBarButtonsProps="tableBarButtonsProps"
     :operationButtonsProps="operationButtonsProps"
   />
 </template>

src/views/demo/book/utils/hook.tsx

@@ -1,11 +1,17 @@
 import { bookApi } from "./api";
 import { getCurrentInstance, reactive, type Ref, shallowRef } from "vue";
 import { getDefaultAuths } from "@/router/utils";
-import type { OperationProps } from "@/components/RePlusPage";
+import type {
+  OperationProps,
+  PageColumn,
+  RePlusPageProps
+} from "@/components/RePlusPage";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import CircleClose from "@iconify-icons/ep/circle-close";
 import { handleOperation } from "@/components/RePlusPage";
 import { useI18n } from "vue-i18n";
+import Success from "@iconify-icons/ep/success-filled";
+import { message } from "@/utils/message";
 
 export function useDemoBook(tableRef: Ref) {
   // 权限判断，用于判断是否有该权限
@@ -53,9 +59,116 @@ export function useDemoBook(tableRef: Ref) {
       }
     ]
   });
+
+  /**
+   * 新增表格标题栏按钮
+   */
+  const tableBarButtonsProps = shallowRef<OperationProps>({
+    buttons: [
+      {
+        text: "全部推送",
+        code: "batchPush",
+        props: {
+          type: "success",
+          icon: useRenderIcon(Success),
+          plain: true
+        },
+        onClick: () => {
+          // 这里写处理逻辑
+          message("操作成功");
+        },
+        confirm: {
+          title: "确定操作？"
+        },
+        show: auth.push
+      }
+    ]
+  });
+
+  /**
+   * 自定义新增或编辑
+   */
+  const addOrEditOptions = shallowRef<RePlusPageProps["addOrEditOptions"]>({
+    props: {
+      columns: {
+        /**
+         * 重写 publisher 组件，可参考 https://plus-pro-components.com/components/config.html
+         * @param column
+         */
+        publisher: ({ column }) => {
+          column.valueType = "autocomplete";
+          column["fieldProps"]["fetchSuggestions"] = (
+            queryString: string,
+            cb: any
+          ) => {
+            const queryList = [
+              { value: "人民出版社" },
+              { value: "中华书局" },
+              { value: "科学出版社" }
+            ];
+
+            let results = [];
+            results = queryString
+              ? queryList.filter(
+                  item =>
+                    item.value
+                      .toLowerCase()
+                      .indexOf(queryString.toLowerCase()) === 0
+                )
+              : queryList;
+            cb(results);
+          };
+          return column;
+        }
+      }
+    }
+  });
+
+  /**
+   * 自定义搜索
+   * @param columns
+   */
+  const searchColumnsFormat = (columns: PageColumn[]) => {
+    columns.forEach(column => {
+      switch (column._column?.key) {
+        case "publisher":
+          /**
+           * 重写 publisher 组件，可参考 https://plus-pro-components.com/components/config.html
+           */
+          column.valueType = "autocomplete";
+          column["fieldProps"]["fetchSuggestions"] = (
+            queryString: string,
+            cb: any
+          ) => {
+            const queryList = [
+              { value: "人民出版社" },
+              { value: "中华书局" },
+              { value: "科学出版社" }
+            ];
+
+            let results = [];
+            results = queryString
+              ? queryList.filter(
+                  item =>
+                    item.value
+                      .toLowerCase()
+                      .indexOf(queryString.toLowerCase()) === 0
+                )
+              : queryList;
+            cb(results);
+          };
+          break;
+      }
+    });
+    return columns;
+  };
+
   return {
     api,
     auth,
+    addOrEditOptions,
+    searchColumnsFormat,
+    tableBarButtonsProps,
     operationButtonsProps
   };
 }

src/views/system/notice/utils/hook.tsx

@@ -98,7 +98,7 @@ export function useNotice(tableRef: Ref) {
     props: {
       columns: {
         level: ({ column }) => {
-          column?.options.forEach(option => {
+          (column?.options as Array<any>).forEach(option => {
             option["fieldSlot"] = () => {
               return (
                 <el-text type={option.value?.value}> {option.label}</el-text>
@@ -115,7 +115,7 @@ export function useNotice(tableRef: Ref) {
           if (!isAdd) {
             column["fieldProps"]["disabled"] = true;
           }
-          column?.options.forEach(option => {
+          (column?.options as Array<any>).forEach(option => {
             if (option.value?.value == NoticeChoices.SYSTEM) {
               option.fieldItemProps.disabled = true;
             }

src/views/system/permission/utils/hook.tsx

@@ -99,7 +99,7 @@ export function useDataPermission() {
           column["renderField"] = (value, onChange) => {
             return h(filterForm, {
               class: ["overflow-auto"],
-              dataList: value,
+              dataList: value as any,
               valuesData: valuesData.value,
               ruleList: fieldLookupsData.value,
               onChange

src/views/system/role/utils/hook.tsx

@@ -106,7 +106,7 @@ export function useRole() {
         },
         menu: ({ column, formValue }) => {
           column["fieldProps"] = {};
-          column["renderField"] = (value, onChange) => {
+          column["renderField"] = (value: any, onChange) => {
             return h(menuFieldForm, {
               api,
               auth,