ai-coding/deploy-ease-platform
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
dengqichen 2025-01-17 17:28:07 +08:00
parent 35a07abd62
commit 00e166a4f3
1 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/pages/Deploy/Deployment/List/components/DeploymentConfigModal.tsx
View File

@ -3,7 +3,7 @@ import {Modal} from 'antd';
import type {DeploymentConfig} from '../types'; import type {DeploymentConfig} from '../types';
import './styles.less'; import './styles.less';
import {FormButtonGroup, FormItem, Select, Submit, FormGrid} from '@formily/antd-v5' import {FormButtonGroup, FormItem, Select, Submit, FormGrid} from '@formily/antd-v5'
import {createForm, Field, FieldDataSource} from '@formily/core' import {createForm, Field, FieldDataSource, onFormInit} from '@formily/core'
import {createSchemaField, FormProvider, ISchema} from '@formily/react' import {createSchemaField, FormProvider, ISchema} from '@formily/react'
import {action} from '@formily/reactive' import {action} from '@formily/reactive'
import request from '@/utils/request'; import request from '@/utils/request';
@ -30,14 +30,6 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
envId, envId,
}) => { }) => {
const SchemaField = createSchemaField({
components: {
Select,
FormItem,
FormGrid,
},
})
// 通用的异步数据源加载方法 // 通用的异步数据源加载方法
const useAsyncDataSource = ( const useAsyncDataSource = (
url: string, url: string,
@ -63,7 +55,39 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
})); }));
}; };
const form = createForm() const SchemaField = createSchemaField({
components: {
Select,
FormItem,
FormGrid
},
scope: {
useAsyncDataSource
}
})
// 创建表单实例
const form = createForm({
validateFirst: true,
initialValues: {},
effects() {
onFormInit((form) => {
form.setFieldState('*', (state) => {
if (state.decorator[0] === 'FormItem') {
state.decoratorProps = {
labelWidth: 100,
labelAlign: 'right',
layout: 'horizontal',
labelCol: 8,
wrapperCol: 16,
colon: true,
...state.decoratorProps
}
}
})
})
}
})
const schema: ISchema = { const schema: ISchema = {
type: 'object', type: 'object',
@ -86,7 +110,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
style: { style: {
width: '100%' width: '100%'
}, },
placeholder: '请选择三方系统' placeholder: '请选择三方系统',
allowClear: true
}, },
'x-reactions': ["{{useAsyncDataSource('/api/v1/external-system/list', { params: { type: 'JENKINS' }, mapping: { label: 'name', value: 'id' } })}}"], 'x-reactions': ["{{useAsyncDataSource('/api/v1/external-system/list', { params: { type: 'JENKINS' }, mapping: { label: 'name', value: 'id' } })}}"],
}, },
@ -99,16 +124,17 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
style: { style: {
width: '100%' width: '100%'
}, },
placeholder: '请选择Jenkins视图' placeholder: '请选择Jenkins视图',
disabled: '{{!$form.values.externalSystemId}}',
allowClear: true
}, },
'x-reactions': { 'x-reactions': {
dependencies: ['externalSystemId'], dependencies: ['externalSystemId'],
fulfill: { fulfill: {
state: { state: {
visible: '{{!!$deps[0]}}',
value: undefined value: undefined
}, },
run: '{{function runEffect(){if($deps[0]){useAsyncDataSource("/api/v1/jenkins-view/list", { params: { externalSystemId: $deps[0] }, mapping: { label: "viewName", value: "id" } })($self)}};runEffect()}}' run: '{{function runEffect(){if($deps[0]){useAsyncDataSource("/api/v1/jenkins-view/list", { params: { externalSystemId: $deps[0] }, mapping: { label: "viewName", value: "id" } })($self)}else{$self.dataSource=[];}};runEffect()}}'
} }
}, },
"description": "{{$self.dataSource && $self.value ? ($self.dataSource.find(item => item.value === $self.value)?.extra?.description) : undefined}}" "description": "{{$self.dataSource && $self.value ? ($self.dataSource.find(item => item.value === $self.value)?.extra?.description) : undefined}}"
@ -122,16 +148,17 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
style: { style: {
width: '100%' width: '100%'
}, },
placeholder: '请选择Jenkins作业' placeholder: '请选择Jenkins作业',
disabled: '{{!$form.values.viewId}}',
allowClear: true
}, },
'x-reactions': { 'x-reactions': {
dependencies: ['externalSystemId', 'viewId'], dependencies: ['externalSystemId', 'viewId'],
fulfill: { fulfill: {
state: { state: {
visible: '{{!!$deps[0] && !!$deps[1]}}',
value: undefined value: undefined
}, },
run: '{{function runEffect(){if($deps[0] && $deps[1]){useAsyncDataSource("/api/v1/jenkins-job/list", { params: { externalSystemId: $deps[0], viewId: $deps[1] }, mapping: { label: "jobName", value: "id" } })($self)}};runEffect()}}' run: '{{function runEffect(){if($deps[0] && $deps[1]){useAsyncDataSource("/api/v1/jenkins-job/list", { params: { externalSystemId: $deps[0], viewId: $deps[1] }, mapping: { label: "jobName", value: "id" } })($self)}else{$self.dataSource=[];}};runEffect()}}'
} }
}, },
"description": "{{$self.dataSource && $self.value ? ($self.dataSource.find(item => item.value === $self.value)?.extra?.description) : undefined}}" "description": "{{$self.dataSource && $self.value ? ($self.dataSource.find(item => item.value === $self.value)?.extra?.description) : undefined}}"
@ -139,7 +166,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
} }
} }
} }
} };
return ( return (
<> <>
@ -161,9 +188,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
> >
<FormProvider form={form}> <FormProvider form={form}>
<SchemaField schema={schema} scope={{useAsyncDataSource}}/> <SchemaField schema={schema} scope={{useAsyncDataSource}}/>
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider> </FormProvider>
</Modal> </Modal>
</> </>