模型版本分布表单更新

README.md

@@ -21,7 +21,7 @@
 
 
 * 展示抽屉内容时需要有关闭按钮，排版需和谐
-
+* 使用stepForm的时候，最后的提交写在最后一步的onfinish里面而不是总的stepForm里
 
 
 

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<object>;
 }
 const MyCreateForm: React.FC<MyCreateFormProps> = (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<API.ModelVersion>();
+    setFileList([...curFile]);
+  }
+  const intl = useIntl();
+  const [dataFormList, setDataFormList] = useState<any>([]);
+  const dataFormListRef = useRef(dataFormList)
+  const [fileList, setFileList] = useState<UploadFile<any>[]>([]);
+
+  const [form] = Form.useForm<API.ModelVersion>();
     const [current, setCurrent] = useState(0);
     const formRef = useRef<ProFormInstance>();
     const [configData, setConfigData] = useState<ProjectConfig>({params: []});
-
     return (
 
         <StepsForm<{
@@ -56,21 +80,6 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (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<MyCreateFormProps> = (props) => {
                         onCancel={()=>{
                             setCurrent(0)
                             formRef.current?.resetFields()
+                          setFileList([])
                             props.handleModal();
                         }}
                         open={props.createModalOpen}
@@ -151,29 +161,84 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (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;
                 }}
             >
-                <ProFormList
-                    copyIconProps={{
-                        Icon: SnippetsOutlined,
-                    }}
-                    deleteIconProps={{
-                        Icon: CloseOutlined,
-                    }}
-                    name="params"
-                    label="模型参数"
-                    initialValue={[
-                    ]}
-                >
-                    <ProForm.Group>
-                        <ProFormText key="name" name="name" label="键名" />
-                        <ProFormText key="default" name="default" label="默认值" />
-                        <ProFormText key="remark" name="remark" label="备注" />
-                    </ProForm.Group>
+              <ProFormUploadDragger max={1}
+                                    label="配置文件上传"
+                                   value={fileList}
+                                    name="dragger"
+                  fieldProps={{
+                    onChange: handleChange,
+                    onRemove: ()=>{
+                      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<string, unknown>;
+                          }
+                          if (file.name.endsWith('.json')) {
+                            parsedData = JSON.parse(text) as Record<string, unknown>;
+                          }
+                          if (Object.keys(parsedData).length > 0) {
+                            dataFormListRef.current = Object.entries(parsedData).map(([key, value]) => ({
+                              name: key,
+                              default: value
+                            }))
 
-                </ProFormList>
+                            dataFormListRef.current.forEach((v:any, i:number)=>{
+                              actionFormListRef.current?.add(v, i)
+                            })
+                          }
+                          return true
+                        }).catch(()=>{
+                          return false
+                        })
+                      }
+                    },
+                  }}
+              />
+              <ProFormList
+                name="params"
+                label="模型参数"
+                actionRef={actionFormListRef}
+                itemContainerRender={(doms) => {
+                  return <ProForm.Group>{doms}</ProForm.Group>;
+                }}
+                alwaysShowItemLabel
+              >
+                {(f, index, action) => {
+                  return (
+                    <>
+                      <ProFormText key="name" name="name" label="键名" />
+                      <ProFormText key="default" name="default" label="默认值" />
+                      <ProFormText key="remark" name="remark" label="备注" />
+                    </>
+                  );
+                }}
+              </ProFormList>
             </StepsForm.StepForm>
         </StepsForm>
         // <ModalForm<API.ModelVersion>

src/pages/Resource/ModelVersionList/index.tsx

@@ -125,7 +125,7 @@ const ModelVersionList: React.FC = () => {
     renderActions: any[];
   };
 
-  const TableActionCard: React.FC<TableActionItemProps[]> = (props) => {
+  const TableActionCard: React.FC<TableActionItemProps> = (props) => {
     const { renderActions } = props;
     const maxActionCount = 3;
     if (renderActions.length <= maxActionCount) {