diff --git a/src/components/RePlusPage/src/utils/columns.tsx b/src/components/RePlusPage/src/utils/columns.tsx index 04fafac..2b4380a 100644 --- a/src/components/RePlusPage/src/utils/columns.tsx +++ b/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 }; diff --git a/src/components/RePlusPage/src/utils/handle.tsx b/src/components/RePlusPage/src/utils/handle.tsx index d051abc..013945d 100644 --- a/src/components/RePlusPage/src/utils/handle.tsx +++ b/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) => any; + }; // 外部处理方法 title: string; // 弹窗的的title formValue?: Ref; // 表单值 - rawRow: object; // 默认数据或者更新的数据 + rawRow: { [key: string]: any }; // 默认数据或者更新的数据 minWidth?: string; // 弹窗的的最小宽度 - columns?: ((formOptions: formDialogOptions) => object) | object; // 表单字段 - rawColumns?: PlusColumn[] | Array; // 表单字段 + columns?: + | object + | { + [key: string]: ( + formOptions: Partial & { column: PageColumn } + ) => object; + }; // 表单字段 + rawColumns?: PageColumn[] | Array; // 表单字段 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) => any; + }; // plus form 的props rawFormProps?: PlusFormProps; // plus form 的props dialogOptions?: DialogOptions; // dialog options beforeSubmit?: ({ diff --git a/src/views/demo/book/index.vue b/src/views/demo/book/index.vue index 1d7911a..7273349 100644 --- a/src/views/demo/book/index.vue +++ b/src/views/demo/book/index.vue @@ -7,7 +7,14 @@ defineOptions({ name: "DemoBook" // 必须定义，用于菜单自动匹配组件 }); const tableRef = ref(); -const { api, auth, operationButtonsProps } = useDemoBook(tableRef); +const { + api, + auth, + addOrEditOptions, + searchColumnsFormat, + tableBarButtonsProps, + operationButtonsProps +} = useDemoBook(tableRef); diff --git a/src/views/demo/book/utils/hook.tsx b/src/views/demo/book/utils/hook.tsx index a36f5c8..a9f7bc0 100644 --- a/src/views/demo/book/utils/hook.tsx +++ b/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({ + buttons: [ + { + text: "全部推送", + code: "batchPush", + props: { + type: "success", + icon: useRenderIcon(Success), + plain: true + }, + onClick: () => { + // 这里写处理逻辑 + message("操作成功"); + }, + confirm: { + title: "确定操作？" + }, + show: auth.push + } + ] + }); + + /** + * 自定义新增或编辑 + */ + const addOrEditOptions = shallowRef({ + 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 }; } diff --git a/src/views/system/notice/utils/hook.tsx b/src/views/system/notice/utils/hook.tsx index 810f647..e1c6366 100644 --- a/src/views/system/notice/utils/hook.tsx +++ b/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).forEach(option => { option["fieldSlot"] = () => { return ( {option.label} @@ -115,7 +115,7 @@ export function useNotice(tableRef: Ref) { if (!isAdd) { column["fieldProps"]["disabled"] = true; } - column?.options.forEach(option => { + (column?.options as Array).forEach(option => { if (option.value?.value == NoticeChoices.SYSTEM) { option.fieldItemProps.disabled = true; } diff --git a/src/views/system/permission/utils/hook.tsx b/src/views/system/permission/utils/hook.tsx index 7cf212d..6eff1c7 100644 --- a/src/views/system/permission/utils/hook.tsx +++ b/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 diff --git a/src/views/system/role/utils/hook.tsx b/src/views/system/role/utils/hook.tsx index af774e2..66b207d 100644 --- a/src/views/system/role/utils/hook.tsx +++ b/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,