Yaxin
/
General-AI-Platform-Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

模型版项目模块分步

Browse Source
develop
chunquansang 2 years ago
parent 14fd60b49e
commit dfc7495975
2 changed files with 177 additions and 91 deletions
Show Stats Download Patch File Download Diff File

262
src/pages/Project/ProjectList/components/MyCreateForm.tsx
Unescape Escape View File

@ -1,9 +1,9 @@
import { postDeviceGroupGetDeviceGroupTree } from '@/services/device/DeviceGroup'; import {postDeviceGroupGetDeviceGroupTree} from '@/services/device/DeviceGroup';
import { postProjectCreateProject } from '@/services/project/Project'; import {postProjectCreateProject} from '@/services/project/Project';
import { postAlgorithmModelGetAlgorithmModelFkSelect } from '@/services/resource/AlgorithmModel'; import {postAlgorithmModelGetAlgorithmModelFkSelect} from '@/services/resource/AlgorithmModel';
import { beforeUploadFile } from '@/utils/common'; import {beforeUploadFile} from '@/utils/common';
import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons'; import {CloseOutlined, SnippetsOutlined} from '@ant-design/icons';
import type { ProFormInstance } from '@ant-design/pro-components'; import type {ProFormInstance} from '@ant-design/pro-components';
import { import {
ProForm, ProForm,
ProFormList, ProFormList,
@ -12,22 +12,27 @@ import {
ProFormUploadDragger, ProFormUploadDragger,
StepsForm, StepsForm,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max'; 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 type {TransferDirection} from 'antd/es/transfer';
import { DataNode } from 'antd/es/tree'; import {DataNode} from 'antd/es/tree';
import React, { useEffect, useRef, useState } from 'react'; import React, {useEffect, useRef, useState} from 'react';
// @ts-ignore // @ts-ignore
import cookie from 'react-cookies'; import cookie from 'react-cookies';
import {FormListActionType} from "@ant-design/pro-form/lib";
import yaml from "js-yaml";
interface RecordType { interface RecordType {
key: string; key: string;
title: string; title: string;
description: string; description: string;
chosen: boolean; chosen: boolean;
} }
interface ProjectConfig { interface ProjectConfig {
params: Array<object>; params: Array<object>;
} }
export type FormValueType = { export type FormValueType = {
target?: string; target?: string;
template?: string; template?: string;
@ -65,51 +70,51 @@ const treeData1: any[] = [
title: '0-0-0', title: '0-0-0',
key: '0-0-0', key: '0-0-0',
children: [ children: [
{ title: '0-0-0-0', key: '0-0-0-0' }, {title: '0-0-0-0', key: '0-0-0-0'},
{ title: '0-0-0-1', key: '0-0-0-1' }, {title: '0-0-0-1', key: '0-0-0-1'},
{ title: '0-0-0-2', key: '0-0-0-2' }, {title: '0-0-0-2', key: '0-0-0-2'},
], ],
}, },
{ {
title: '0-0-1', title: '0-0-1',
key: '0-0-1', key: '0-0-1',
children: [ children: [
{ title: '0-0-1-0', key: '0-0-1-0' }, {title: '0-0-1-0', key: '0-0-1-0'},
{ title: '0-0-1-1', key: '0-0-1-1' }, {title: '0-0-1-1', key: '0-0-1-1'},
{ title: '0-0-1-2', key: '0-0-1-2' }, {title: '0-0-1-2', key: '0-0-1-2'},
{ title: '0-0-1-0', key: '0-0-1-3' }, {title: '0-0-1-0', key: '0-0-1-3'},
{ title: '0-0-1-1', key: '0-0-1-4' }, {title: '0-0-1-1', key: '0-0-1-4'},
{ title: '0-0-1-2', key: '0-0-1-5' }, {title: '0-0-1-2', key: '0-0-1-5'},
{ title: '0-0-1-0', key: '0-0-1-6' }, {title: '0-0-1-0', key: '0-0-1-6'},
{ title: '0-0-1-1', key: '0-0-1-7' }, {title: '0-0-1-1', key: '0-0-1-7'},
{ title: '0-0-1-2', key: '0-0-1-8' }, {title: '0-0-1-2', key: '0-0-1-8'},
{ title: '0-0-1-0', key: '0-0-1-9' }, {title: '0-0-1-0', key: '0-0-1-9'},
{ title: '0-0-1-1', key: '0-0-1-10' }, {title: '0-0-1-1', key: '0-0-1-10'},
{ title: '0-0-1-2', key: '0-0-1-11' }, {title: '0-0-1-2', key: '0-0-1-11'},
{ title: '0-0-1-0', key: '0-0-1-12' }, {title: '0-0-1-0', key: '0-0-1-12'},
{ title: '0-0-1-1', key: '0-0-1-13' }, {title: '0-0-1-1', key: '0-0-1-13'},
{ title: '0-0-1-2', key: '0-0-1-14' }, {title: '0-0-1-2', key: '0-0-1-14'},
{ title: '0-0-1-0', key: '0-0-1-15' }, {title: '0-0-1-0', key: '0-0-1-15'},
{ title: '0-0-1-1', key: '0-0-1-16' }, {title: '0-0-1-1', key: '0-0-1-16'},
{ title: '0-0-1-2', key: '0-0-1-17' }, {title: '0-0-1-2', key: '0-0-1-17'},
{ title: '0-0-1-0', key: '0-0-1-18' }, {title: '0-0-1-0', key: '0-0-1-18'},
{ title: '0-0-1-1', key: '0-0-1-19' }, {title: '0-0-1-1', key: '0-0-1-19'},
{ title: '0-0-1-2', key: '0-0-1-20' }, {title: '0-0-1-2', key: '0-0-1-20'},
{ title: '0-0-1-0', key: '0-0-1-21' }, {title: '0-0-1-0', key: '0-0-1-21'},
{ title: '0-0-1-1', key: '0-0-1-22' }, {title: '0-0-1-1', key: '0-0-1-22'},
{ title: '0-0-1-2', key: '0-0-1-23' }, {title: '0-0-1-2', key: '0-0-1-23'},
{ title: '0-0-1-0', key: '0-0-1-24' }, {title: '0-0-1-0', key: '0-0-1-24'},
{ title: '0-0-1-1', key: '0-0-1-25' }, {title: '0-0-1-1', key: '0-0-1-25'},
{ title: '0-0-1-2', key: '0-0-1-26' }, {title: '0-0-1-2', key: '0-0-1-26'},
{ title: '0-0-1-0', key: '0-0-1-27' }, {title: '0-0-1-0', key: '0-0-1-27'},
{ title: '0-0-1-1', key: '0-0-1-28' }, {title: '0-0-1-1', key: '0-0-1-28'},
{ title: '0-0-1-2', key: '0-0-1-29' }, {title: '0-0-1-2', key: '0-0-1-29'},
{ title: '0-0-1-0', key: '0-0-1-30' }, {title: '0-0-1-0', key: '0-0-1-30'},
{ title: '0-0-1-1', key: '0-0-1-31' }, {title: '0-0-1-1', key: '0-0-1-31'},
{ title: '0-0-1-2', key: '0-0-1-32' }, {title: '0-0-1-2', key: '0-0-1-32'},
{ title: '0-0-1-0', key: '0-0-1-33' }, {title: '0-0-1-0', key: '0-0-1-33'},
{ title: '0-0-1-1', key: '0-0-1-34' }, {title: '0-0-1-1', key: '0-0-1-34'},
{ title: '0-0-1-2', key: '0-0-1-35' }, {title: '0-0-1-2', key: '0-0-1-35'},
], ],
}, },
{ {
@ -122,9 +127,9 @@ const treeData1: any[] = [
title: '0-1', title: '0-1',
key: '0-1', key: '0-1',
children: [ children: [
{ title: '0-1-0-0', key: '0-1-0-0' }, {title: '0-1-0-0', key: '0-1-0-0'},
{ title: '0-1-0-1', key: '0-1-0-1' }, {title: '0-1-0-1', key: '0-1-0-1'},
{ title: '0-1-0-2', key: '0-1-0-2' }, {title: '0-1-0-2', key: '0-1-0-2'},
], ],
}, },
{ {
@ -139,15 +144,43 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
const [targetKeys, setTargetKeys] = useState<string[]>([]); const [targetKeys, setTargetKeys] = useState<string[]>([]);
const [selectKeys, setSelectKeys] = useState([]); const [selectKeys, setSelectKeys] = useState([]);
const [filePath, setFilePath] = useState(''); const [filePath, setFilePath] = useState('');
const [configData, setConfigData] = useState<ProjectConfig>({ params: [] }); const [configData, setConfigData] = useState<ProjectConfig>({params: []});
const intl = useIntl(); const intl = useIntl();
const [isAuto, setIsAuto] = useState(true); const [isAuto, setIsAuto] = useState(true);
const formRef = useRef<ProFormInstance>(); const formRef = useRef<ProFormInstance>();
const formRef3 = useRef<ProFormInstance>(); const formRef3 = useRef<ProFormInstance>();
const [current, setCurrent] = useState(0); 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 = () => { const getModelData = () => {
postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: '' }).then((res) => { postAlgorithmModelGetAlgorithmModelFkSelect({keyword: ''}).then((res) => {
console.log(444, res);
let result = (res.data?.list || []).map((v: any) => { let result = (res.data?.list || []).map((v: any) => {
return { return {
key: v.id, key: v.id,
@ -172,14 +205,14 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
.then((resp: API.Response) => { .then((resp: API.Response) => {
setTreeData(resp.data.tree); setTreeData(resp.data.tree);
}) })
.catch(() => {}); .catch(() => {
});
} else { } else {
formRef.current?.resetFields(); formRef.current?.resetFields();
} }
}, [props.createModalOpen]); }, [props.createModalOpen]);
const handleSearch = (dir: TransferDirection, value: string) => { const handleSearch = (dir: TransferDirection, value: string) => {
postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: value }).then((res) => { postAlgorithmModelGetAlgorithmModelFkSelect({keyword: value}).then((res) => {
console.log(444, res);
let result = (res.data?.list || []).map((v: any) => { let result = (res.data?.list || []).map((v: any) => {
return { return {
key: v.id, key: v.id,
@ -200,19 +233,20 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
current={current} current={current}
onCurrentChange={setCurrent} onCurrentChange={setCurrent}
onFinish={async () => { onFinish={async () => {
setFileList([])
let formData = formRef.current?.getFieldsValue(); let formData = formRef.current?.getFieldsValue();
if (formData?.name) { if (formData?.name) {
formData.inferConfig = { models: targetKeys, params: configData?.params || [] }; formData.inferConfig = {models: targetKeys, params: configData?.params || []};
formData.groupIds = selectKeys; formData.groupIds = selectKeys;
formData.projectFilePath = filePath; formData.projectFilePath = filePath;
postProjectCreateProject(formData) postProjectCreateProject(formData)
.then(() => { .then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}));
props.handleModal(); props.handleModal();
props.reload(); props.reload();
}) })
.catch(() => { .catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}));
return false; return false;
}); });
} }
@ -230,6 +264,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
width={803} width={803}
onCancel={() => { onCancel={() => {
setCurrent(0); setCurrent(0);
setFileList([])
formRef.current?.resetFields(); formRef.current?.resetFields();
formRef3.current?.resetFields(); formRef3.current?.resetFields();
props.handleModal(); props.handleModal();
@ -243,7 +278,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
); );
}} }}
> >
{/* 创建项目数据 */} {/* 创建项目数据 */}
<StepsForm.StepForm<{ <StepsForm.StepForm<{
name: string; name: string;
}> }>
@ -263,7 +298,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
<ProFormText <ProFormText
{...stepFormItemStyleProps} {...stepFormItemStyleProps}
name="name" name="name"
label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />} label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({ placeholder={`${intl.formatMessage({
id: 'common.please_input', id: 'common.please_input',
defaultMessage: '$$$', defaultMessage: '$$$',
@ -287,7 +322,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
<ProFormText <ProFormText
width={680} width={680}
name="code" name="code"
label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$" />} label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({ placeholder={`${intl.formatMessage({
id: 'common.please_input', id: 'common.please_input',
defaultMessage: '$$$', defaultMessage: '$$$',
@ -302,22 +337,22 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
isAuto isAuto
? [] ? []
: [ : [
{ {
required: true, required: true,
message: ( message: (
<FormattedMessage <FormattedMessage
id="project.project.table.rule.required.code" id="project.project.table.rule.required.code"
defaultMessage="code is required" defaultMessage="code is required"
/> />
), ),
}, },
] ]
} }
addonAfter={ addonAfter={
<Switch <Switch
checked={isAuto} checked={isAuto}
checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />} checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$"/>}
unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />} unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$"/>}
onChange={setIsAuto} onChange={setIsAuto}
/> />
} }
@ -325,7 +360,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
<ProFormText <ProFormText
{...stepFormItemStyleProps} {...stepFormItemStyleProps}
name="info" name="info"
label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$" />} label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({ placeholder={`${intl.formatMessage({
id: 'common.please_input', id: 'common.please_input',
defaultMessage: '$$$', defaultMessage: '$$$',
@ -349,7 +384,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
<ProFormText <ProFormText
{...stepFormItemStyleProps} {...stepFormItemStyleProps}
name="remark" name="remark"
label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />} label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({ placeholder={`${intl.formatMessage({
id: 'common.please_input', id: 'common.please_input',
defaultMessage: '$$$', defaultMessage: '$$$',
@ -365,7 +400,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
width="lg" width="lg"
name="isEnable" name="isEnable"
label={ label={
<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" /> <FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$"/>
} }
initialValue={true} initialValue={true}
/> />
@ -389,11 +424,11 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
showSearch showSearch
titles={['未选模型', '已选模型']} titles={['未选模型', '已选模型']}
locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }} locale={{itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容'}}
targetKeys={targetKeys} targetKeys={targetKeys}
onChange={handleChange} onChange={handleChange}
onSearch={handleSearch} onSearch={handleSearch}
style={{ marginBottom: '20px' }} style={{marginBottom: '20px'}}
listStyle={{width: 289, height: 300}} listStyle={{width: 289, height: 300}}
operationStyle={{width: 100, alignItems: 'center'}} operationStyle={{width: 100, alignItems: 'center'}}
render={(item) => item.title} render={(item) => item.title}
@ -425,7 +460,7 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
fieldProps={{ fieldProps={{
name: 'file', name: 'file',
beforeUpload: beforeUploadFile, beforeUpload: beforeUploadFile,
data: { path: 'project/files' }, data: {path: 'project/files'},
headers: { headers: {
'X-CSRFToken': cookie.load('csrftoken'), 'X-CSRFToken': cookie.load('csrftoken'),
Authorization: `Bearer ${localStorage.getItem('access') || ''}`, Authorization: `Bearer ${localStorage.getItem('access') || ''}`,
@ -449,8 +484,54 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
> >
{/* <Icon type="delete" /> */} {/* <Icon type="delete" /> */}
{/* TODO 图标需要替换 */} {/* 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 <ProFormList
style={{width: stepFormItemStyleProps.width}} style={{width: stepFormItemStyleProps.width}}
actionRef={actionFormListRef}
copyIconProps={{ copyIconProps={{
Icon: SnippetsOutlined, Icon: SnippetsOutlined,
}} }}
@ -459,13 +540,16 @@ const MyCreateForm: React.FC<CreateFormProps> = (props) => {
}} }}
name="params" name="params"
label="模型参数" label="模型参数"
initialValue={[]}
> >
<ProForm.Group> {(f, index, action) => {
<ProFormText key="name" name="name" label="键名" /> return (
<ProFormText key="default" name="default" label="默认值" /> <>
<ProFormText key="remark" name="remark" label="备注" /> <ProFormText key="name" name="name" label="键名"/>
</ProForm.Group> <ProFormText key="default" name="default" label="默认值"/>
<ProFormText key="remark" name="remark" label="备注"/>
</>
);
}}
</ProFormList> </ProFormList>
</StepsForm.StepForm> </StepsForm.StepForm>
{/* 关联网点 */} {/* 关联网点 */}

6
src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save