diff --git a/README.md b/README.md index a2d3cb9..561cd8c 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ * 展示抽屉内容时需要有关闭按钮,排版需和谐 - +* 使用stepForm的时候,最后的提交写在最后一步的onfinish里面而不是总的stepForm里 diff --git a/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx b/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx index fa6e2a2..4f714e7 100644 --- a/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx +++ b/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx @@ -1,19 +1,20 @@ import { - ProForm, - ProFormInstance, - ProFormList, - StepsForm -} from '@ant-design/pro-components';import {ProFormSelect} from '@ant-design/pro-components'; -import {ProFormText} from '@ant-design/pro-components'; - import {ProFormSwitch} from '@ant-design/pro-components'; + ProForm, + ProFormInstance, + ProFormList, + ProFormSelect, + ProFormSwitch, + ProFormText, + ProFormUploadDragger, + StepsForm +} from '@ant-design/pro-components'; import {FormattedMessage, useIntl} from '@umijs/max'; import {postAlgorithmModelGetAlgorithmModelFkSelect} from "@/services/resource/AlgorithmModel"; import {postModelVersionCreateModelVersion} from "@/services/resource/ModelVersion"; -import React, {useState} from 'react'; -import {Form, message, Modal} from 'antd'; - -import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons'; -import { useRef } from 'react'; +import React, {useRef, useState} from 'react'; +import {Form, message, Modal, UploadFile} from 'antd'; +import yaml from 'js-yaml'; +import {FormListActionType} from "@ant-design/pro-form/lib"; export type FormValueType = { @@ -41,13 +42,36 @@ interface ProjectConfig { params: Array; } const MyCreateForm: React.FC = (props) => { + const actionFormListRef = useRef< + FormListActionType<{ + name: string; + }> + >(); const handleChange = ({ file }: { file: UploadFile }) => { + let curFile: any; + + switch (file.status) { + case 'uploading': + case 'done': + curFile = [file]; + break; + + case 'removed': + default: + curFile = []; + break; + } - const intl = useIntl(); - const [form] = Form.useForm(); + setFileList([...curFile]); + } + const intl = useIntl(); + const [dataFormList, setDataFormList] = useState([]); + const dataFormListRef = useRef(dataFormList) + const [fileList, setFileList] = useState[]>([]); + + const [form] = Form.useForm(); const [current, setCurrent] = useState(0); const formRef = useRef(); const [configData, setConfigData] = useState({params: []}); - return ( = (props) => { stepsProps={{}} current={current} onCurrentChange={setCurrent} - onFinish={async () => { - let formData = formRef.current?.getFieldsValue(); - if (formData?.modelFkId) { - formData.modelConfig = {params: configData?.params || []}; - postModelVersionCreateModelVersion(formData).then(()=>{ - message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) - props.handleModal(); - props.reload() - }).catch(()=>{ - message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'})) - return false - }) - } - return true; - }} formProps={{ validateMessages: { required: '此项为必填项', @@ -84,6 +93,7 @@ const MyCreateForm: React.FC = (props) => { onCancel={()=>{ setCurrent(0) formRef.current?.resetFields() + setFileList([]) props.handleModal(); }} open={props.createModalOpen} @@ -151,29 +161,84 @@ const MyCreateForm: React.FC = (props) => { description: '业务参数配置', }} onFinish={async (values: any) => { - setConfigData(values) - return true; + let formData = formRef.current?.getFieldsValue(); + if (formData?.modelFkId) { + await waitTime(500) + formData.modelConfig = {params: values?.params || []}; + postModelVersionCreateModelVersion(formData).then(()=>{ + message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) + props.handleModal(); + props.reload() + }).catch(()=>{ + message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'})) + return false + }) + } + return true; }} > - - - - - - + { + let index_ids = actionFormListRef.current?.getList()?.map((v, i)=>{ + return i + }) + actionFormListRef.current?.remove(index_ids || []) + }, + beforeUpload: (file, fileList)=>{ + if ( !file.name.endsWith('.yaml') && !file.name.endsWith('.yml') && !file.name.endsWith('.json')) { + message.error('请上传yaml或json文件').then(()=>{}) + return false + } else { + let parsedData = {} + file.text().then((text)=>{ + if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) { + parsedData = yaml.load(text) as Record; + } + if (file.name.endsWith('.json')) { + parsedData = JSON.parse(text) as Record; + } + if (Object.keys(parsedData).length > 0) { + dataFormListRef.current = Object.entries(parsedData).map(([key, value]) => ({ + name: key, + default: value + })) - + dataFormListRef.current.forEach((v:any, i:number)=>{ + actionFormListRef.current?.add(v, i) + }) + } + return true + }).catch(()=>{ + return false + }) + } + }, + }} + /> + { + return {doms}; + }} + alwaysShowItemLabel + > + {(f, index, action) => { + return ( + <> + + + + + ); + }} + // diff --git a/src/pages/Resource/ModelVersionList/index.tsx b/src/pages/Resource/ModelVersionList/index.tsx index b48efc1..5765558 100644 --- a/src/pages/Resource/ModelVersionList/index.tsx +++ b/src/pages/Resource/ModelVersionList/index.tsx @@ -125,7 +125,7 @@ const ModelVersionList: React.FC = () => { renderActions: any[]; }; - const TableActionCard: React.FC = (props) => { + const TableActionCard: React.FC = (props) => { const { renderActions } = props; const maxActionCount = 3; if (renderActions.length <= maxActionCount) {