Browse Source

修复切换api时,没有正常初始化相应的界面

main
dark 3 months ago
parent
commit
fa4c59d15b
  1. 39
      src/pages/x-form/hooks/useApi.tsx
  2. 4
      src/pages/x-form/index.tsx
  3. 29
      src/store/x-form/model.ts

39
src/pages/x-form/hooks/useApi.tsx

@ -1,7 +1,7 @@
import { useNavigate } from '@tanstack/react-router'
import { useAtom } from 'jotai/index'
import { apiAtom } from '@/store/x-form/model.ts'
import { useEffect, useRef, useState } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import { Input, message, Modal } from 'antd'
import { Route } from '@/pages/x-form'
@ -43,19 +43,7 @@ export const useApi = () => {
}, [ api, apiParam ])
const holderElement = (
<>
<Modal
title={'请指定 api 参数'}
closable={false}
open={open}
maskClosable={false}
afterOpenChange={setOpen}
onCancel={() => {
setOpen(false)
}}
onOk={() => {
const onOK = useCallback(() => {
if (!innerApi) {
message.destroy()
message.error('请填写 api 参数')
@ -71,9 +59,30 @@ export const useApi = () => {
api: innerApi
}
})
}, [ innerApi ])
const holderElement = (
<>
<Modal
title={'请指定 api 参数'}
closable={false}
open={open}
maskClosable={false}
afterOpenChange={setOpen}
onCancel={() => {
setOpen(false)
}}
onOk={() => {
onOK()
}}
>
<Input value={innerApi} onChange={e => {
<Input value={innerApi}
onKeyDown={e => {
if (e.key === 'Enter') {
onOK()
}
}}
onChange={e => {
setInnerApi(e.target.value)
}}/>
</Modal>

4
src/pages/x-form/index.tsx

@ -122,7 +122,7 @@ const XForm = () => {
<ProTable
rowKey="id"
headerTitle={api}
headerTitle={`${api}/list`}
toolbar={{
/*search: {
loading: isFetching && !!search?.key,
@ -162,7 +162,7 @@ const XForm = () => {
]
}}
scroll={{
x: (columns?.length || 1) * 200,
x: (columns?.length || 1) * 100,
y: 'calc(100vh - 290px)'
}}
search={false}

29
src/store/x-form/model.ts

@ -1,5 +1,5 @@
import { atom } from 'jotai'
import { IApiResult, IPage } from '@/global'
import { IApiResult, IPage, IPageResult } from '@/global'
import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
import { message } from 'antd'
import { t } from 'i18next'
@ -32,13 +32,12 @@ export const modelPageAtom = atom<IPage>({
page: 1,
})
export const modelCURDAtom = atomWithQuery<IApiResult<XForm.IModelCURD>, any, any>((get) => {
const api = get(apiAtom)
console.log('api', api)
export const modelCURDAtom = atomWithQuery<IApiResult<XForm.IModelCURD>, any, any, any>((get) => {
return {
enabled: !!api,
queryKey: [ 'modelCURD' ],
queryFn: async () => {
enabled: !!get(apiAtom),
queryKey: [ 'modelCURD', get(apiAtom) ],
queryFn: async ({ queryKey: [ , api ] }) => {
return await modelServ.model(api).proxy()
},
select: (res) => {
@ -47,14 +46,13 @@ export const modelCURDAtom = atomWithQuery<IApiResult<XForm.IModelCURD>, any, an
}
})
export const modelsAtom = atomWithQuery((get) => {
const api = get(apiAtom)
const curd = get(modelCURDAtom)
export const modelsAtom = atomWithQuery<IApiResult<IPageResult<any>>, any, any, any>((get) => {
const curd = get(modelCURDAtom)
return {
enabled: curd.isSuccess && !!api,
queryKey: [ 'models', get(modelSearchAtom) ],
queryFn: async ({ queryKey: [ , params ] }) => {
enabled: curd.isSuccess && !!get(apiAtom),
queryKey: [ 'models', get(modelSearchAtom), get(apiAtom) ],
queryFn: async ({ queryKey: [ , params, api ] }) => {
if (api.startsWith('http')) {
return await modelServ.model(api).proxy<XForm.IModel>({
@ -81,7 +79,7 @@ export const modelsAtom = atomWithQuery((get) => {
export const saveOrUpdateModelAtom = atomWithMutation<IApiResult, XForm.IModel>((get) => {
return {
mutationKey: [ 'updateModel' ],
mutationKey: [ 'updateModel', get(apiAtom) ],
mutationFn: async (data) => {
const api = get(apiAtom)
if (!api) {
@ -119,8 +117,9 @@ export const saveOrUpdateModelAtom = atomWithMutation<IApiResult, XForm.IModel>(
})
export const deleteModelAtom = atomWithMutation((get) => {
return {
mutationKey: [ 'deleteModel' ],
mutationKey: [ 'deleteModel', get(apiAtom) ],
mutationFn: async (ids: number[]) => {
const api = get(apiAtom)
if (api.startsWith('http')) {

Loading…
Cancel
Save