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 './styles.less';
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 {action} from '@formily/reactive'
import request from '@/utils/request';
@ -30,14 +30,6 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
envId,
}) => {
const SchemaField = createSchemaField({
components: {
Select,
FormItem,
FormGrid,
},
})
// 通用的异步数据源加载方法
const useAsyncDataSource = (
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 = {
type: 'object',
@ -86,7 +110,8 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
style: {
width: '100%'
},
placeholder: '请选择三方系统'
placeholder: '请选择三方系统',
allowClear: true
},
'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: {
width: '100%'
},
placeholder: '请选择Jenkins视图'
placeholder: '请选择Jenkins视图',
disabled: '{{!$form.values.externalSystemId}}',
allowClear: true
},
'x-reactions': {
dependencies: ['externalSystemId'],
fulfill: {
state: {
visible: '{{!!$deps[0]}}',
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}}"
@ -122,16 +148,17 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
style: {
width: '100%'
},
placeholder: '请选择Jenkins作业'
placeholder: '请选择Jenkins作业',
disabled: '{{!$form.values.viewId}}',
allowClear: true
},
'x-reactions': {
dependencies: ['externalSystemId', 'viewId'],
fulfill: {
state: {
visible: '{{!!$deps[0] && !!$deps[1]}}',
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}}"
@ -139,7 +166,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
}
}
}
}
};
return (
<>
@ -161,9 +188,7 @@ const DeploymentConfigModal: React.FC<DeploymentConfigModalProps> = ({
>
<FormProvider form={form}>
<SchemaField schema={schema} scope={{useAsyncDataSource}}/>
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
</Modal>
</>