fix: match type is empty

This commit is contained in:
maggieyyy
2024-09-02 13:40:50 +08:00
parent 77aa0080d9
commit 851c54b6af
8 changed files with 47 additions and 35 deletions
@@ -15,6 +15,7 @@ export interface ConfigField<T> {
renderText?: (value: unknown, record: T) => string;
required?: boolean;
ellipsis?:boolean
unRender?:(form:FormInstance)=>boolean
}
interface EditableTableWithModalProps<T> {
@@ -39,6 +40,7 @@ const EditableTableWithModal = <T extends { _id?: string }>({
const [configurations, setConfigurations] = useState<T[]>(value ||[]);
const [editingConfig, setEditingConfig] = useState<T | null>(null);
const {state} = useGlobalContext()
const [formsValue, setFormsValue] = useState<FormInstance<unknown>>()
const showModal = (config?: T) => {
if (config) {
@@ -111,18 +113,23 @@ const EditableTableWithModal = <T extends { _id?: string }>({
],[state.language, disabled, configFields])
const formItems = configFields.map(({ title,key, component, required }) => {
return (
<Form.Item
label={$t(title as string)}
name={key as string}
rules={[{ required}]}
>
{component}
</Form.Item>
)
const formItems = useMemo(()=>{
return configFields.map(({ title,key, component, required,unRender }) => {
return (
unRender && unRender(formsValue) ? null :
<Form.Item
label={$t(title as string)}
name={key as string}
rules={[{ required}]}
>
{component}
</Form.Item>
)
})
}
);
,[formsValue])
return (
<>
@@ -142,6 +149,9 @@ const EditableTableWithModal = <T extends { _id?: string }>({
<WithPermission access=""><Form form={form} name="editableTableWithModal"
layout="vertical"
scrollToFirstError
onFieldsChange={(()=>{
setFormsValue(form.getFieldsValue())
})}
// labelCol={{ span: 7 }}
// wrapperCol={{ span: 17}}
autoComplete="off">
@@ -195,7 +195,7 @@ export const PublishApprovalModalContent = forwardRef<PublishApprovalModalHandle
</Form.Item>
</>
}
<Row className="mt-mbase pb-[8px] h-[32px] font-bold" ><span >{$t('API 列表')}</span></Row>
<Row className="mt-mbase pb-[8px] h-[32px] font-bold" ><span >{$t('路由列表')}</span></Row>
<Row className="mb-mbase ">
<Table
columns={translatedRouteColumns}
@@ -215,9 +215,9 @@ export const ApprovalStatusColorClass = {
export const ApprovalRouteColumns = [
{
title:('请求方式'),
dataIndex:'method',
dataIndex:'methods',
ellipsis:true,
renderText:(value)=>value.join(',')
render:(value)=>value?.join(', ')
},
{
title:('路径'),
@@ -72,8 +72,8 @@ export const SYSTEM_I18NEXT_FOR_ENUM = {
export const HTTP_METHOD = ['GET','POST','PUT','DELETE','PATCH','HEAD']
export const API_PROTOCOL = [
{label:'HTTP',value:'http'},
{label:'HTTPS',value:'https'}
{label:'HTTP',value:'HTTP'},
{label:'HTTPS',value:'HTTPS'}
]
@@ -259,6 +259,7 @@ export const MATCH_CONFIG:ConfigField<MatchItem>[] = [
}, {
title:('参数值'),
key: 'pattern',
unRender:(formValue)=>{return formValue?.matchType === 'NULL' || formValue?.matchType==='EXIST' || formValue?.matchType === 'UNEXIST'},
component: <Input className="w-INPUT_NORMAL"/>,
renderText: (value: string) => {
return value
@@ -278,17 +279,17 @@ export const SYSTEM_API_TABLE_COLUMNS: PageProColumns<SystemApiTableListItem>[]
title:('协议'),
dataIndex: 'protocols',
ellipsis:true,
renderText:(value)=>value?.join(',')
renderText:(value)=>value?.join(', ')
},
{
title:('方法'),
dataIndex: 'method',
dataIndex: 'methods',
ellipsis:true,
renderText:(value)=>value?.join(',')
renderText:(value)=>value?.join(', ')
},
{
title:'是否放行',
dataIndex:'isDisabled',
dataIndex:'disable',
ellipsis:true,
filters: true,
onFilter: true,
@@ -95,7 +95,7 @@ export type SystemApiProxyFieldType = {
id:string;
description?:string;
path:string;
method:string[];
methods:string[];
match:MatchItem[]
isDisable?: boolean;
service?:string;
@@ -295,6 +295,7 @@ export type SystemInsideApiProxyProps = {
teamId:string
initProxyValue?:SystemApiProxyType
value?:SystemApiProxyType
type:'add'|'edit'
onChange?: (newConfigItems: SystemApiProxyType) => void; // 当配置项变化时,外部传入的回调函数
}
@@ -9,7 +9,7 @@ import { $t } from "@common/locales";
import { useGlobalContext } from "@common/contexts/GlobalStateContext";
const SystemInsideApiProxy = forwardRef<SystemInsideApiProxyHandle,SystemInsideApiProxyProps>((props,ref)=>{
const {value, onChange, className,initProxyValue} = props
const {value, onChange, className,initProxyValue,type} = props
const {state} = useGlobalContext()
const [form] = Form.useForm();
@@ -51,7 +51,7 @@ const SystemInsideApiProxy = forwardRef<SystemInsideApiProxyHandle,SystemInsideA
label={$t("转发上游路径")}
name={'path'}
>
<Input prefix="/" className="w-INPUT_NORMAL" placeholder={$t(PLACEHOLDER.input)}/>
<Input prefix={type === 'edit' ? null :"/"} className="w-INPUT_NORMAL" placeholder={$t(PLACEHOLDER.input)}/>
</Form.Item>
<Form.Item<SystemApiProxyType>
@@ -25,7 +25,7 @@ const SystemInsideRouterCreate = forwardRef<SystemInsideRouterCreateHandle,Syste
const onFinish = ()=>{
return Promise.all([proxyRef.current?.validate?.(), form.validateFields()]).then(([,formValue])=>{
const body = {...formValue,path:formValue.path.trim(),proxy:{...formValue.proxy,path:formValue.proxy.path ? (formValue.proxy.path.startsWith('/')? formValue.proxy.path: '/'+ formValue.proxy.path) : undefined}}
return fetchData<BasicResponse<null>>('service/router',{method: type === 'add' ? 'POST' : 'PUT',eoBody:(body), eoParams: {service:serviceId,team:teamId, ...(type === 'edit' ? {router:entity?.id}: {})},eoTransformKeys:['matchType','isDisable']}).then(response=>{
return fetchData<BasicResponse<null>>('service/router',{method: type === 'add' ? 'POST' : 'PUT',eoBody:(body), eoParams: {service:serviceId,team:teamId, ...(type === 'edit' ? {router:entity?.id}: {})},eoTransformKeys:['matchType','disable']}).then(response=>{
const {code,msg} = response
if(code === STATUS_CODE.SUCCESS){
message.success(msg || $t(RESPONSE_TIPS.success))
@@ -63,11 +63,11 @@ const SystemInsideRouterCreate = forwardRef<SystemInsideRouterCreateHandle,Syste
const getRouterConfig = ()=>{
setLoading(true)
fetchData<BasicResponse<{router:SystemApiProxyFieldType}>>('service/router/detail',{method:'GET',eoParams:{service:serviceId,team:teamId, router:entity!.id}}).then(response=>{
fetchData<BasicResponse<{router:SystemApiProxyFieldType}>>('service/router/detail',{method:'GET',eoParams:{service:serviceId,team:teamId, router:entity!.id}, eoTransformKeys:['create_time','update_time','match_type','upstream_id','opt_type']}).then(response=>{
const {code,data,msg} = response
if(code === STATUS_CODE.SUCCESS){
const {isDisable, protocols, path, method, description, match, proxy} = data.router
form.setFieldsValue({isDisable, protocols, path, method, description, match,proxy
const {disable, protocols, path, methods, description, match, proxy} = data.router
form.setFieldsValue({disable, protocols, path, methods, description, match,proxy
})
}else{
message.error(msg || $t(RESPONSE_TIPS.error))
@@ -85,7 +85,7 @@ const SystemInsideRouterCreate = forwardRef<SystemInsideRouterCreateHandle,Syste
form.setFieldValue('prefix',apiPrefix)
form.setFieldValue(['proxy','timeout'],10000)
form.setFieldValue(['proxy','retry'],0)
form.setFieldValue('protocols',['http','https'])
form.setFieldValue('protocols',['HTTP','HTTPS'])
break;
case 'copy':
// form.setFieldsValue({
@@ -134,7 +134,7 @@ const SystemInsideRouterCreate = forwardRef<SystemInsideRouterCreateHandle,Syste
<Row className="mb-btnybase" > <Col ><span className="font-bold mr-[13px]">{$t('API 基础信息')}</span></Col></Row>
<Form.Item<SystemApiProxyFieldType>
label={$t("拦截该接口的请求")}
name="isDisable"
name="disable"
extra={$t('开启拦截后,网关会拦截所有该路径的请求,相当于防火墙禁用了特定路径的访问。')}
>
<Switch />
@@ -158,13 +158,13 @@ const SystemInsideRouterCreate = forwardRef<SystemInsideRouterCreateHandle,Syste
}]}
className={styles['form-input-group']}
>
<Input prefix={(prefixForce ? `${apiPrefix}/` :"/")} className="w-INPUT_NORMAL"
<Input prefix={type === 'edit' ? null :(prefixForce ? `${apiPrefix}/` :"/")} className="w-INPUT_NORMAL"
placeholder={$t(PLACEHOLDER.input)}/>
</Form.Item>
<Form.Item<SystemApiProxyFieldType>
label={$t("请求方式")}
name="method"
name="methods"
rules={[{ required: true }]}
>
<Select className="w-INPUT_NORMAL" placeholder={$t(PLACEHOLDER.select)} mode="multiple" options={HTTP_METHOD.map((method:string)=>{
@@ -197,7 +197,7 @@ const SystemInsideRouterCreate = forwardRef<SystemInsideRouterCreateHandle,Syste
className="mb-0 bg-transparent border-none p-0"
name="proxy"
>
<SystemInsideApiProxy serviceId={serviceId!} teamId={teamId!} ref={proxyRef} />
<SystemInsideApiProxy type={type} serviceId={serviceId!} teamId={teamId!} ref={proxyRef} />
</Form.Item>
</>}
</div>
@@ -46,7 +46,7 @@ const SystemInsideRouterList:FC = ()=>{
});
}
return fetchData<BasicResponse<{routers:SystemApiTableListItem}>>('service/routers',{method:'GET',eoParams:{service:serviceId,team:teamId, keyword:searchWord},eoTransformKeys:['request_path','create_time','update_time','is_disable']}).then(response=>{
return fetchData<BasicResponse<{routers:SystemApiTableListItem}>>('service/routers',{method:'GET',eoParams:{service:serviceId,team:teamId, keyword:searchWord},eoTransformKeys:['request_path','create_time','update_time','disable']}).then(response=>{
const {code,data,msg} = response
if(code === STATUS_CODE.SUCCESS){
setTableListDataSource(data.routers)
@@ -171,7 +171,7 @@ const SystemInsideRouterList:FC = ()=>{
x.valueEnum = tmpValueEnum
}
if(x.filters &&((x.dataIndex as string[])?.indexOf('isDisabled') !== -1) ){
if(x.filters &&((x.dataIndex as string[])?.indexOf('disable') !== -1) ){
x.valueEnum = {
true:{text:<span className="text-status_fail">{$t('拦截')}</span>},
false:{text:<span className="text-status_success">{$t('放行')}</span>}
@@ -201,7 +201,7 @@ const SystemInsideRouterList:FC = ()=>{
request={()=>getRoutesList()}
dataSource={tableListDataSource}
addNewBtnTitle={$t('添加路由')}
searchPlaceholder={$t('输入名称、URL 查找路由')}
searchPlaceholder={$t('输入 URL 查找路由')}
onAddNewBtnClick={()=>{openDrawer('add')}}
addNewBtnAccess="team.service.router.add"
tableClickAccess="team.service.router.view"