From 01df5849cfd10d19dddb437b196b4d2cf3b6de87 Mon Sep 17 00:00:00 2001 From: luoer Date: Mon, 27 Nov 2023 17:23:53 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=85=B6=E4=BB=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 5 +- src/components/AnTable/components/Table.tsx | 16 +++--- .../AnTable/hooks/useTablePlugin.tsx | 22 +++---- .../AnTable/plugins/useTableDelete.tsx | 42 +++++++++++--- .../AnTable/plugins/useTableSelect.tsx | 24 ++++++-- src/pages/home/index.vue | 4 +- src/pages/system/dict/components/group.vue | 57 +++++++++---------- src/pages/system/logo/index.vue | 4 +- src/pages/system/user/index.vue | 4 +- 9 files changed, 107 insertions(+), 71 deletions(-) diff --git a/.env b/.env index b1a2f37..4a80a21 100644 --- a/.env +++ b/.env @@ -8,7 +8,8 @@ VITE_SUBTITLE = 绝弹管理中心 # 部署路径: 当为 ./ 时路由模式需为 hash VITE_BASE = / # 接口前缀：参见 axios 的 baseURL -VITE_API = http://127.0.0.1:3030/ +# VITE_API = http://127.0.0.1:3030/ +VITE_API = https://appnify.app.juetan.cn/ # 首页路径 VITE_HOME_PATH = /home # 路由模式：web(路径) hash(锚点) @@ -24,7 +25,7 @@ VITE_PORT = 3020 # 代理前缀 VITE_PROXY_PREFIX = /api,/upload # 代理地址 -VITE_PROXY = http://127.0.0.1:3030/ +VITE_PROXY = https://appnify.app.juetan.cn/ # API文档 说明：需返回符合 OPENAPI 规范的json内容 VITE_OPENAPI = http://127.0.0.1:3030/openapi.json # 文件后缀 说明：设为dev时会优先加载index.dev.vue文件，否则回退至index.vue文件 diff --git a/src/components/AnTable/components/Table.tsx b/src/components/AnTable/components/Table.tsx index 5e847ea..c483869 100644 --- a/src/components/AnTable/components/Table.tsx +++ b/src/components/AnTable/components/Table.tsx @@ -14,6 +14,11 @@ import { PluginContainer } from '../hooks/useTablePlugin'; type DataFn = (filter: { page: number; size: number; [key: string]: any }) => any | Promise; +export type ArcoTableProps = Omit< + TableInstance['$props'], + 'ref' | 'pagination' | 'loading' | 'data' | 'onPageChange' | 'onPageSizeChange' +>; + export const AnTableContextKey = Symbol('AnTableContextKey') as InjectionKey; /** @@ -64,9 +69,7 @@ export const AnTable = defineComponent({ * 传递给 Table 组件的属性 */ tableProps: { - type: Object as PropType< - Omit - >, + type: Object as PropType, }, /** * 插件列表 @@ -126,8 +129,9 @@ export const AnTable = defineComponent({ try { loading.value = true; let params = { ...search, ...paging }; - params = props.pluginer?.callBeforeSearchHook(params) ?? params; - const resData = await props.source(params); + params = props.pluginer?.callLoadHook(params) ?? params; + let resData = await props.source(params); + resData = props.pluginer?.callLoadedHook(resData) ?? params; const { data = [], total = 0 } = resData?.data || {}; renderData.value = data; setPaging({ total }); @@ -160,13 +164,11 @@ export const AnTable = defineComponent({ }); const onPageChange = (page: number) => { - props.pluginer?.callPageChangeHook(page); setPaging({ current: page }); loadData(); }; const onPageSizeChange = (size: number) => { - props.pluginer?.callSizeChangeHook(size); setPaging({ current: 1, pageSize: size }); loadData(); }; diff --git a/src/components/AnTable/hooks/useTablePlugin.tsx b/src/components/AnTable/hooks/useTablePlugin.tsx index 0cd6402..638d83d 100644 --- a/src/components/AnTable/hooks/useTablePlugin.tsx +++ b/src/components/AnTable/hooks/useTablePlugin.tsx @@ -67,8 +67,8 @@ export interface AnTablePlugin { * */ onBeforeSearch?: (args: { page: number; size: number; [key: string]: any }) => Recordable | null | undefined | void; - onPageChange?: (page: number) => void; - onSizeChange?: (size: number) => void; + onLoad?: (search: Recordable) => void; + onLoaded?: (res: any) => void; } export class PluginContainer { @@ -76,13 +76,7 @@ export class PluginContainer { widgets: any[] = []; constructor(private plugins: AnTablePlugin[]) { - this.plugins.unshift( - useTableRefresh(), - useColumnConfig(), - useRowFormat(), - useRowDelete(), - useRowModify() - ); + this.plugins.unshift(useTableRefresh(), useColumnConfig(), useRowFormat(), useRowDelete(), useRowModify()); for (const plugin of plugins) { const action = plugin.action?.(); if (action) { @@ -129,15 +123,17 @@ export class PluginContainer { return options; } - callPageChangeHook(page: number) { + callLoadHook(search: Recordable) { for (const plugin of this.plugins) { - plugin.onPageChange?.(page); + search = plugin.onLoad?.(search) ?? search; } + return search as any; } - callSizeChangeHook(page: number) { + callLoadedHook(res: any) { for (const plugin of this.plugins) { - plugin.onPageChange?.(page); + res = plugin.onLoaded?.(res) ?? res; } + return res; } } diff --git a/src/components/AnTable/plugins/useTableDelete.tsx b/src/components/AnTable/plugins/useTableDelete.tsx index c77205c..2138024 100644 --- a/src/components/AnTable/plugins/useTableDelete.tsx +++ b/src/components/AnTable/plugins/useTableDelete.tsx @@ -1,16 +1,27 @@ import { Ref } from 'vue'; -import { AnTableContext } from '../components/Table'; +import { AnTableContext, ArcoTableProps } from '../components/Table'; import { AnTablePlugin } from '../hooks/useTablePlugin'; import { useTableSelect } from './useTableSelect'; import { delConfirm, delOptions, sleep } from '@/utils'; -import { Button, Message } from '@arco-design/web-vue'; +import { Button, Message, TableInstance } from '@arco-design/web-vue'; -export function useTableDelete(): AnTablePlugin { +interface UseTableDeleteOptions { + confirm?: string; + onDelete?: (keys: (string | number)[]) => any | Promise; +} + +export function useTableDelete(options: UseTableDeleteOptions = {}): AnTablePlugin { let selected: Ref; let context: AnTableContext; + let tableProps: ArcoTableProps; + const { confirm, onDelete } = options; return { id: 'deletemany', + onSetup(ctx) { + context = ctx; + tableProps = ctx.props.tableProps!; + }, options(options) { let selectPlugin = options.plugins?.find(i => i.id === 'selection'); if (!selectPlugin) { @@ -20,18 +31,31 @@ export function useTableDelete(): AnTablePlugin { selected = selectPlugin.provide!.selectedKeys; return options; }, + onLoaded() { + console.log('loaded'); + selected.value = []; + }, action() { const onClick = async (props: any) => { delConfirm({ ...delOptions, - content: '危险操作，确定删除所选数据吗?', + content: confirm ?? '危险操作，确定删除所选数据吗?', async onBeforeOk() { await sleep(3000); - const res: any = await onClick?.(props); - const msg = res?.data?.message; - msg && Message.success(`提示: ${msg}`); - selected.value = []; - context.refresh(); + try { + const res: any = await onDelete?.(props); + const msg = res?.data?.message; + msg && Message.success(`提示: ${msg}`); + if (tableProps) { + (tableProps as any).selectedKeys = []; + } + selected.value = []; + context.refresh(); + return true; + } catch (e) { + console.log('删除失败：', e); + } + return false; }, }); }; diff --git a/src/components/AnTable/plugins/useTableSelect.tsx b/src/components/AnTable/plugins/useTableSelect.tsx index a7e18bf..dfa9826 100644 --- a/src/components/AnTable/plugins/useTableSelect.tsx +++ b/src/components/AnTable/plugins/useTableSelect.tsx @@ -1,12 +1,7 @@ import { cloneDeep, defaultsDeep, merge } from 'lodash-es'; import { TableUseOptions } from '../hooks/useTable'; import { AnTablePlugin } from '../hooks/useTablePlugin'; - -// declare module '@/components/AnTable/hooks/useTable' { -// interface TableUseOptions { -// todo?: string; -// } -// } +import { AnTableContext, ArcoTableProps } from '../components/Table'; const defaults: TableUseOptions = { tableProps: { @@ -26,8 +21,15 @@ interface UseTableSelectOptions { * @description 请配合其他插件使用 */ export function useTableSelect({ key = 'id', mode = 'key' }: UseTableSelectOptions = {}): AnTablePlugin { + let context: AnTableContext; const selectedKeys = ref<(string | number)[]>([]); const selectedRows = ref([]); + const setKeys = (keys: any[]) => { + const tableProps = context.props.tableProps; + if (tableProps) { + (tableProps as any).selectedKeys = keys; + } + }; return { id: 'selection', @@ -35,6 +37,9 @@ export function useTableSelect({ key = 'id', mode = 'key' }: UseTableSelectOptio selectedKeys, selectedRows, }, + onSetup(ctx) { + context = ctx; + }, options(options) { const opts: TableUseOptions = defaultsDeep({}, defaults); @@ -45,6 +50,8 @@ export function useTableSelect({ key = 'id', mode = 'key' }: UseTableSelectOptio if (mode === 'both' || mode === 'key') { opts.tableProps!.onSelectionChange = rowkeys => { selectedKeys.value = rowkeys; + setKeys(rowkeys); + console.log(rowkeys); }; } @@ -54,6 +61,7 @@ export function useTableSelect({ key = 'id', mode = 'key' }: UseTableSelectOptio if (index > -1) { selectedRows.value.splice(index, 1); } + setKeys(selectedRows.value.map(i => i.id)); }; opts.tableProps!.onSelectAll = checked => { if (checked) { @@ -61,10 +69,14 @@ export function useTableSelect({ key = 'id', mode = 'key' }: UseTableSelectOptio } else { selectedRows.value = []; } + setKeys(selectedRows.value.map(i => i.id)); }; } return merge(options, opts); }, + onLoaded() { + setKeys([]); + }, }; } diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index bb8f450..0f3e09b 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -73,7 +73,9 @@ const { component: UserTable } = useTable({ ], }, ], - source: search => api.user.getUsers(search), + source: search => { + return []; + }, search: [ { field: 'username', diff --git a/src/pages/system/dict/components/group.vue b/src/pages/system/dict/components/group.vue index ac0e527..097c7e4 100644 --- a/src/pages/system/dict/components/group.vue +++ b/src/pages/system/dict/components/group.vue @@ -2,12 +2,12 @@
- + - +
    @@ -29,7 +29,7 @@