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

feat: 模型详情中新增模型版本的增删改，选中树的样式调整

Browse Source
develop
zhoux 1 year ago
parent 61bc6012e0
commit d78221b5c8
6 changed files with 270 additions and 93 deletions
Show Stats Download Patch File Download Diff File

6
src/global.css
Unescape Escape View File

@ -138,6 +138,12 @@ a.ant-dropdown-trigger {
.ant-steps .ant-steps-item-active > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description {
color: #155BD4;
}
.ant-tree-treenode.ant-tree-treenode-switcher-open.ant-tree-treenode-selected {
background-color: #e8effb;
width: 100%;
border-radius: 4px;
padding-top: 4px ;
}
/* 表单 */
.ant-form-item {
margin-bottom: 16px;

7
src/global.less
Unescape Escape View File

@ -169,6 +169,13 @@ a.ant-dropdown-trigger{
}
}
.ant-tree-treenode.ant-tree-treenode-switcher-open.ant-tree-treenode-selected {
background-color: #e8effb;
width: 100%;
border-radius: 4px;
padding-top: 4px ;
}
/* 表单 */
.ant-form-item {
margin-bottom: 16px;

311
src/pages/Resource/AlgorithmModelList/detail.tsx
Unescape Escape View File

@ -1,9 +1,22 @@
import { postAlgorithmModelGetAlgorithmModelById } from '@/services/resource/AlgorithmModel';
import { postModelVersionGetModelVersionList } from '@/services/resource/ModelVersion';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { PageContainer, ProCard, ProDescriptions, ProTable } from '@ant-design/pro-components';
import { FormattedMessage, useParams } from '@umijs/max';
import React from 'react';
import { deleteModelVersionDeleteModelVersion, postModelVersionGetModelVersionList } from '@/services/resource/ModelVersion';
import { ArrowLeftOutlined, PlusOutlined } from '@ant-design/icons';
import {
ActionType,
PageContainer,
ProCard,
ProColumns,
ProDescriptions,
ProTable,
} from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess, useParams, useIntl } from '@umijs/max';
import { Button, message } from 'antd';
import React, { useRef, useState } from 'react';
import MyCreateForm from '../ModelVersionList/components/MyCreateForm';
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
import UpdateForm from '../ModelVersionList/components/UpdateForm';
/**styles */
@ -17,92 +30,159 @@ const headerStylesProps = {
color: '#333333',
};
const columns: ProColumns<API.ModelVersion>[] = [
{
title: <FormattedMessage id="resource.model_version.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.modelFkId" defaultMessage="$$$" />
),
dataIndex: 'modelFkId',
hideInSearch: false,
},
{
title: <FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />,
dataIndex: 'version',
hideInSearch: true,
},
{
title: <FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />,
dataIndex: 'path',
hideInSearch: true,
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.startCode" defaultMessage="$$$" />
),
dataIndex: 'startCode',
hideInSearch: true,
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.isEnable" defaultMessage="$$$" />
),
dataIndex: 'isEnable',
filters: true,
onFilter: true,
hideInSearch: true,
valueType: 'switch',
},
{
title: <FormattedMessage id="resource.model_version.table.list.remark" defaultMessage="$$$" />,
dataIndex: 'remark',
hideInSearch: true,
},
{
title: <FormattedMessage id="resource.model_version.table.list.status" defaultMessage="$$$" />,
dataIndex: 'status',
hideInSearch: true,
valueEnum: {
1: { text: '已创建', status: 'Default' },
2: { text: '已发布', status: 'Processing' },
3: { text: '已上架', status: 'Success' },
4: { text: '已下架', status: 'Default' },
5: { text: '已关闭', status: 'Error' },
},
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.createTime" defaultMessage="$$$" />
),
dataIndex: 'createTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.updateTime" defaultMessage="$$$" />
),
dataIndex: 'updateTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
];
const AlgorithmModelDetail: React.FC = () => {
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [currentRow, setCurrentRow] = useState<API.ModelVersion>();
const [selectedRowsState, setSelectedRows] = useState<API.ModelVersion[]>([]);
const [model_fk_id_open, set_model_fk_id_open] = useState(false);
const [model_fk_id, set_model_fk_id] = useState<API.AlgorithmModel>();
const [model_fk_id_column_open, set_model_fk_id_column_open] = useState(false);
const [modelFkIdIds, setModelFkIdIds] = useState([]);
const [modelFkIdMap, setModelFkIdMap] = useState<{ [key: number]: string }>({});
const handleDestroy = async (selectedRow: API.ModelVersion) => {
deleteModelVersionDeleteModelVersion({ id: selectedRow.id })
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
actionRef.current?.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
};
const columns: ProColumns<API.ModelVersion>[] = [
{
title: <FormattedMessage id="resource.model_version.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.modelFkId" defaultMessage="$$$" />
),
dataIndex: 'modelFkId',
hideInSearch: false,
},
{
title: <FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />,
dataIndex: 'version',
hideInSearch: true,
},
{
title: <FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />,
dataIndex: 'path',
hideInSearch: true,
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.startCode" defaultMessage="$$$" />
),
dataIndex: 'startCode',
hideInSearch: true,
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.isEnable" defaultMessage="$$$" />
),
dataIndex: 'isEnable',
filters: true,
onFilter: true,
hideInSearch: true,
valueType: 'switch',
},
{
title: <FormattedMessage id="resource.model_version.table.list.remark" defaultMessage="$$$" />,
dataIndex: 'remark',
hideInSearch: true,
},
{
title: <FormattedMessage id="resource.model_version.table.list.status" defaultMessage="$$$" />,
dataIndex: 'status',
hideInSearch: true,
valueEnum: {
1: { text: '已创建', status: 'Default' },
2: { text: '已发布', status: 'Processing' },
3: { text: '已上架', status: 'Success' },
4: { text: '已下架', status: 'Default' },
5: { text: '已关闭', status: 'Error' },
},
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.createTime" defaultMessage="$$$" />
),
dataIndex: 'createTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.updateTime" defaultMessage="$$$" />
),
dataIndex: 'updateTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed: 'right',
render: (_, record) => [
<TableActionCard
key="TableActionCardRef"
renderActions={[
{
key: 'update',
renderDom: (
<Button
key="update"
type="link"
size="small"
onClick={() => {
setUpdateModalOpen(true);
setCurrentRow(record);
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</Button>
),
},
{
key: 'destroy',
renderDom: (
<IsDelete
deleteApi={() => {
handleDestroy(record).then(() => {});
}}
></IsDelete>
),
},
]}
></TableActionCard>,
],
},
];
// TODO 需要将业务层代码转移到此处
// TODO 按UI原稿重新布局此模块
// 关闭页面
@ -110,6 +190,26 @@ const AlgorithmModelDetail: React.FC = () => {
history.back();
};
const handleCreateModal = () => {
if (createModalOpen) {
setCreateModalOpen(false);
setCurrentRow(undefined);
} else {
setCreateModalOpen(true);
}
};
const handleUpdateModal = () => {
if (updateModalOpen) {
setUpdateModalOpen(false);
setCurrentRow(undefined);
} else {
setUpdateModalOpen(true);
}
};
const routeParams = useParams();
return (
<PageContainer>
@ -161,14 +261,33 @@ const AlgorithmModelDetail: React.FC = () => {
</ProCard>
<ProCard
title="模型版本"
extra={<><Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined />{' '}
<FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access></>}
style={{ margin: 0, padding: 0 }}
headStyle={{ paddingTop: 20, paddingBottom: 20, ...headerStylesProps }}
bodyStyle={{ margin: 0, padding: 0 }}
>
<ProTable
actionRef={actionRef}
tableStyle={{ paddingTop: 15, paddingBottom: 15 }}
columns={columns}
cardBordered
toolBarRender={() => [
]}
request={async (params = {}, sort) => {
const { current, ...rest } = params;
const reqParams = {
@ -232,6 +351,20 @@ const AlgorithmModelDetail: React.FC = () => {
/>
</ProCard>
</ProCard>
<MyCreateForm
createModalOpen={createModalOpen}
values={{modelFkId: Number(routeParams?.id)}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
currentDefaultFieldsData={{modelFkId: Number(routeParams?.id)}}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
currentDefaultFieldsData={{modelFkId: Number(routeParams?.id)}}
/>
</PageContainer>
);
};

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

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-22 13:50:12
* @LastEditTime: 2023-12-05 17:13:10
* @FilePath: \general-ai-platform-web\src\pages\Resource\ModelVersionList\components\MyCreateForm.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -22,7 +22,7 @@ import { FormListActionType } from '@ant-design/pro-form/lib';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, Modal, UploadFile, message } from 'antd';
import yaml from 'js-yaml';
import React, { useRef, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import {
proFormMaxItemStyleProps,
proFormMaxModelWidth,
@ -42,6 +42,7 @@ export type MyCreateFormProps = {
handleModal: () => void;
values: Partial<API.ModelVersion>;
reload: any;
currentDefaultFieldsData?: Record<string,any>
};
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
@ -54,6 +55,7 @@ interface ProjectConfig {
params: Array<object>;
}
const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
const actionFormListRef = useRef<
FormListActionType<{
name: string;
@ -77,6 +79,8 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
setFileList([...curFile]);
};
const intl = useIntl();
const [isHasModelFkId, setIsHasModelFkId] = useState<boolean>(false)
const [dataFormList, setDataFormList] = useState<any>([]);
const dataFormListRef = useRef(dataFormList);
const [fileList, setFileList] = useState<UploadFile<any>[]>([]);
@ -85,6 +89,18 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
const [current, setCurrent] = useState(0);
const formRef = useRef<ProFormInstance>();
const [configData, setConfigData] = useState<ProjectConfig>({ params: [] });
useEffect(()=>{
if(props.currentDefaultFieldsData){
// 如果是在模型详情新增版本，ModelFkId不可编辑
console.log(props.values,'currentDefaultFieldsData')
setIsHasModelFkId(true)
} else {
setIsHasModelFkId(false)
}
}, [])
return (
<StepsForm<{
name: string;
@ -152,8 +168,10 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
defaultMessage: '$$$',
})}`}
required={true}
initialValue={props.values.modelFkId}
showSearch
debounceTime={1000}
disabled={isHasModelFkId}
request={async (keyWord) => {
const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({
keyword: keyWord?.keyWords || '',

16
src/pages/Resource/ModelVersionList/components/UpdateForm.tsx
Unescape Escape View File

@ -11,7 +11,7 @@ import {
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
import React from 'react';
import React, { useEffect , useState} from 'react';
export type FormValueType = {
target?: string;
template?: string;
@ -25,11 +25,22 @@ export type UpdateFormProps = {
handleModal: () => void;
values: Partial<API.ModelVersion>;
reload: any;
currentDefaultFieldsData?: Record<string,any>
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
const [form] = Form.useForm<API.ModelVersion>();
const [isHasModelFkId, setIsHasModelFkId] = useState<boolean>(false)
const [form] = Form.useForm<API.ModelVersion>();
useEffect(()=>{
if(props.currentDefaultFieldsData){
// 如果是在模型详情新增版本，ModelFkId不可编辑
console.log(props.values,'currentDefaultFieldsData')
setIsHasModelFkId(true)
} else {
setIsHasModelFkId(false)
}
}, [])
return (
<ModalForm<API.ModelVersion>
width={proFormModelWidth}
@ -87,6 +98,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
initialValue={props.values.modelFkId}
showSearch
debounceTime={1000}
disabled={isHasModelFkId}
request={async (keyWord) => {
const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({
keyword: keyWord?.keyWords || '',

1
src/pages/Setting/AlgorithmSetting.tsx
Unescape Escape View File

@ -339,6 +339,7 @@ const AlgorithmSetting: React.FC = () => {
selectedKeys={selectNodes}
treeData={nodeTreeData}
onSelect={(selectKeys, info) => {
// TODO_1 此处接口需要重新联调
console.log(info.node, 'onSelect_info');
setSelectNodes(selectKeys);
fetchProjectInfoByGroupId(info?.node);

Write Preview
Loading…
Cancel
Save