From 8c0c5037b580698d173045a052e4ebc631c7bc26 Mon Sep 17 00:00:00 2001 From: luoer Date: Mon, 16 Oct 2023 17:22:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BChoo?= =?UTF-8?q?k=E7=9A=84=E4=BD=BF=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/form/form.tsx | 10 +- src/components/form/use-form-modal.tsx | 54 +++++++++-- src/components/table/table.tsx | 21 ++-- src/components/table/use-interface.ts | 6 +- src/components/table/use-table.tsx | 67 +++++++++++-- src/pages/_layout/index.vue | 45 ++++++--- src/pages/post/media/index.vue | 129 ++++++++++++++++--------- src/pages/system/role/index.vue | 21 ++-- src/router/routes/index.ts | 9 +- src/store/app/index.ts | 49 +++++++++- src/types/auto-component.d.ts | 1 - 11 files changed, 298 insertions(+), 114 deletions(-) diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx index b215a51..6a8ec04 100644 --- a/src/components/form/form.tsx +++ b/src/components/form/form.tsx @@ -75,14 +75,10 @@ export const Form = defineComponent({ try { loading.value = true; const res = await props.submit?.({ model, items: props.items }); - if (res?.message) { - Message.success(`提示: ${res.message}`); - } + res?.message && Message.success(`提示: ${res.message}`); } catch (error: any) { - const message = error?.response?.data?.message || error?.message || "提交失败"; - if (message) { - Message.error(`提示: ${message}`); - } + const message = error?.response?.data?.message || error?.message; + message && Message.error(`提示: ${message}`); } finally { loading.value = false; } diff --git a/src/components/form/use-form-modal.tsx b/src/components/form/use-form-modal.tsx index e709109..7380242 100644 --- a/src/components/form/use-form-modal.tsx +++ b/src/components/form/use-form-modal.tsx @@ -1,23 +1,61 @@ import { Modal } from "@arco-design/web-vue"; -import { assign, merge } from "lodash-es"; -import { reactive } from "vue"; +import { merge } from "lodash-es"; +import { Component, Ref, reactive } from "vue"; import { useForm } from "./use-form"; -import { FormModalProps } from "./form-modal"; +import FormModal, { FormModalInstance, FormModalProps } from "./form-modal"; const defaults: Partial> = { width: 1080, titleAlign: "start", - closable: false + closable: false, + maskClosable: false, }; /** * 构建传给FormModal组件的参数 * @see src/components/form/use-form-modal.tsx */ -export const useFormModal = (options: FormModalProps): FormModalProps & { model: Record } => { - const { model, items } = options || {}; - +export const useFormModal = (options: Partial): FormModalProps => { + const { model = {}, items = [] } = options || {}; const form = useForm({ model, items }); - return reactive(merge({ modalProps: { ...defaults } }, { ...options, ...form })); + return reactive( + merge( + { + modalProps: { ...defaults }, + formProps: { + layout: "vertical", + }, + }, + { + ...options, + ...form, + } + ) + ); +}; + +interface Context { + props: any; + modalRef: Ref; + open: (args?: Record) => Promise | undefined; +} + +export const useAniFormModal = (options: Partial): [Component, Context] => { + const props = useFormModal(options); + const modalRef = ref(null); + const onModalRef = (el: any) => (modalRef.value = el); + const component = defineComponent({ + name: "AniFormModalWrapper", + render() { + return ; + }, + }); + const component1 = (p: any) => ; + const context = { + props, + modalRef, + open: (args?: Record) => modalRef.value?.open(args), + }; + return [component1, context]; }; diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx index acb3e70..91b85e2 100644 --- a/src/components/table/table.tsx +++ b/src/components/table/table.tsx @@ -161,18 +161,14 @@ export const Table = defineComponent({
{!this.inlined && (
-
+
)}
-
+
{this.create && ( - + )} {this.modify && ( -
- {this.inlined &&
} -
+
{this.inlined &&
}
; +/** + * 表格组件参数 + */ export type TableProps = TableInstance["$props"]; diff --git a/src/components/table/use-interface.ts b/src/components/table/use-interface.ts index a8df104..9d7b66c 100644 --- a/src/components/table/use-interface.ts +++ b/src/components/table/use-interface.ts @@ -80,7 +80,7 @@ interface TableColumnDropdown { doptionProps?: Partial & Record>; } -export interface UseTableColumn extends TableColumnData { +export interface TableColumn extends TableColumnData { /** * 表格列类型 */ @@ -113,7 +113,7 @@ type Search = Partial< */ items?: SearchFormItem[]; /** - * bu + * 显示/隐藏搜索按钮 */ button?: boolean } @@ -137,7 +137,7 @@ export interface UseTableOptions extends Omit { try { const resData: any = await item?.onClick?.(columnData); const message = resData?.data?.message; - if (message) { - Message.success(`提示：${message}`); - } + message && Message.success(`提示：${message}`); getTable()?.loadData(); } catch (error: any) { const message = error.response?.data?.message; - if (message) { - Message.warning(`提示：${message}`); - } + message && Message.warning(`提示：${message}`); } return; } @@ -171,13 +167,13 @@ export const useTable = (optionsOrFn: UseTableOptions | (() => UseTableOptions)) continue; } } - const search = !item.enableLoad ? undefined : () => getTable().reloadData() + const search = !item.enableLoad ? undefined : () => getTable().reloadData(); searchItems.push( merge( { nodeProps: { onSearch: search, - onPressEnter: search + onPressEnter: search, }, }, item @@ -213,3 +209,54 @@ export const useTable = (optionsOrFn: UseTableOptions | (() => UseTableOptions)) return reactive({ ...options, columns }); }; + +/** + * 提供操作的上下文 + */ +interface TableContext { + /** + * 传递给表格的参数(响应式) + */ + props: TableProps; + /** + * 表格实例 + */ + tableRef: Ref; + /** + * 刷新表格 + */ + refresh: () => void; + /** + * 重置表格 + */ + reload?: () => void; +} + +type TableReturnType = [ + /** + * 绑定好参数的组件 + */ + Component, + /** + * 提供操作的上下文 + */ + TableContext +]; + +export const useAniTable = (options: UseTableOptions): TableReturnType => { + const props = useTable(options); + const tableRef = ref(null); + const context = { + props, + tableRef, + refresh: () => tableRef.value?.reloadData(), + }; + const aniTable = defineComponent({ + name: "AniTableWrapper", + setup() { + const onRef = (el: TableInstance) => (tableRef.value = el); + return () =>
; + }, + }); + return [aniTable, context]; +}; diff --git a/src/pages/_layout/index.vue b/src/pages/_layout/index.vue index 5294a30..7239fd4 100644 --- a/src/pages/_layout/index.vue +++ b/src/pages/_layout/index.vue @@ -44,11 +44,15 @@ :breakpoint="'lg'" @collapse="onCollapse" > - + @@ -56,15 +60,17 @@
- {{ item.text }} + {{ item.title }}
@@ -77,10 +83,7 @@
- - + @@ -94,7 +97,6 @@