模型版项目模块分步

src/pages/Project/ProjectList/components/MyCreateForm.tsx

@@ -13,21 +13,26 @@ import {
   StepsForm,
 } from '@ant-design/pro-components';
 import {FormattedMessage, useIntl} from '@umijs/max';
-import { Modal, Switch, Transfer, Tree, message } from 'antd';
+import {Modal, Switch, Transfer, Tree, message, UploadFile} from 'antd';
 import type {TransferDirection} from 'antd/es/transfer';
 import {DataNode} from 'antd/es/tree';
 import React, {useEffect, useRef, useState} from 'react';
 // @ts-ignore
 import cookie from 'react-cookies';
+import {FormListActionType} from "@ant-design/pro-form/lib";
+import yaml from "js-yaml";
+
 interface RecordType {
   key: string;
   title: string;
   description: string;
   chosen: boolean;
 }
+
 interface ProjectConfig {
   params: Array<object>;
 }
+
 export type FormValueType = {
   target?: string;
   template?: string;
@@ -145,9 +150,37 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
   const formRef = useRef<ProFormInstance>();
   const formRef3 = useRef<ProFormInstance>();
   const [current, setCurrent] = useState(0);
+
+  const [dataFormList, setDataFormList] = useState<any>([]);
+  const dataFormListRef = useRef(dataFormList)
+  const [fileList, setFileList] = useState<UploadFile<any>[]>([]);
+
+  const actionFormListRef = useRef<
+    FormListActionType<{
+      name: string;
+    }>
+  >();
+  const handleFileChange = ({file}: { file: UploadFile }) => {
+    let curFile: any;
+
+    switch (file.status) {
+      case 'uploading':
+      case 'done':
+        curFile = [file];
+        break;
+
+      case 'removed':
+      default:
+        curFile = [];
+        break;
+    }
+
+    setFileList([...curFile]);
+  }
+
+
   const getModelData = () => {
     postAlgorithmModelGetAlgorithmModelFkSelect({keyword: ''}).then((res) => {
-      console.log(444, res);
       let result = (res.data?.list || []).map((v: any) => {
         return {
           key: v.id,
@@ -172,14 +205,14 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
         .then((resp: API.Response) => {
           setTreeData(resp.data.tree);
         })
-        .catch(() => {});
+        .catch(() => {
+        });
     } else {
       formRef.current?.resetFields();
     }
   }, [props.createModalOpen]);
   const handleSearch = (dir: TransferDirection, value: string) => {
     postAlgorithmModelGetAlgorithmModelFkSelect({keyword: value}).then((res) => {
-      console.log(444, res);
       let result = (res.data?.list || []).map((v: any) => {
         return {
           key: v.id,
@@ -200,6 +233,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
       current={current}
       onCurrentChange={setCurrent}
       onFinish={async () => {
+        setFileList([])
         let formData = formRef.current?.getFieldsValue();
         if (formData?.name) {
           formData.inferConfig = {models: targetKeys, params: configData?.params || []};
@@ -230,6 +264,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
             width={803}
             onCancel={() => {
               setCurrent(0);
+              setFileList([])
               formRef.current?.resetFields();
               formRef3.current?.resetFields();
               props.handleModal();
@@ -449,8 +484,54 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
       >
         {/* <Icon type="delete" /> */}
         {/* TODO 图标需要替换 */}
+
+        <ProFormUploadDragger max={1}
+          label="配置文件上传"
+          value={fileList}
+          name="dragger"
+          fieldProps={{
+            onChange: handleFileChange,
+            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
+                    }))
+
+                    dataFormListRef.current.forEach((v: any, i: number) => {
+                      actionFormListRef.current?.add(v, i)
+                    })
+                  }
+                  return true
+                }).catch(() => {
+                  return false
+                })
+              }
+            },
+          }}
+        />
         <ProFormList
           style={{width: stepFormItemStyleProps.width}}
+          actionRef={actionFormListRef}
           copyIconProps={{
             Icon: SnippetsOutlined,
           }}
@@ -459,13 +540,16 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
           }}
           name="params"
           label="模型参数"
-          initialValue={[]}
         >
-          <ProForm.Group>
+          {(f, index, action) => {
+            return (
+              <>
                 <ProFormText key="name" name="name" label="键名"/>
                 <ProFormText key="default" name="default" label="默认值"/>
                 <ProFormText key="remark" name="remark" label="备注"/>
-          </ProForm.Group>
+              </>
+            );
+          }}
         </ProFormList>
       </StepsForm.StepForm>
       {/* 关联网点 */}

src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx

@@ -46,7 +46,8 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
     FormListActionType<{
       name: string;
     }>
-  >();  const handleChange = ({ file }: { file: UploadFile }) => {
+  >();
+  const handleFileChange = ({ file }: { file: UploadFile }) => {
     let curFile: any;
 
     switch (file.status) {
@@ -161,6 +162,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
                     description: '业务参数配置',
                 }}
                 onFinish={async (values: any) => {
+                  setFileList([])
                   let formData = formRef.current?.getFieldsValue();
                   if (formData?.modelFkId) {
                     await waitTime(500)
@@ -182,7 +184,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
                                    value={fileList}
                                     name="dragger"
                   fieldProps={{
-                    onChange: handleChange,
+                    onChange: handleFileChange,
                     onRemove: ()=>{
                       let index_ids = actionFormListRef.current?.getList()?.map((v, i)=>{
                         return i