From d78221b5c81cd93ab85c536df28811b653506274 Mon Sep 17 00:00:00 2001 From: zhoux Date: Fri, 8 Dec 2023 09:49:34 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8B=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E4=B8=AD=E6=96=B0=E5=A2=9E=E6=A8=A1=E5=9E=8B=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E7=9A=84=E5=A2=9E=E5=88=A0=E6=94=B9=EF=BC=8C=E9=80=89=E4=B8=AD?= =?UTF-8?q?=E6=A0=91=E7=9A=84=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/global.css | 6 + src/global.less | 7 + .../Resource/AlgorithmModelList/detail.tsx | 311 +++++++++++++----- .../components/MyCreateForm.tsx | 22 +- .../components/UpdateForm.tsx | 16 +- src/pages/Setting/AlgorithmSetting.tsx | 1 + 6 files changed, 270 insertions(+), 93 deletions(-) diff --git a/src/global.css b/src/global.css index 66bab0e..a87412c 100644 --- a/src/global.css +++ b/src/global.css @@ -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; diff --git a/src/global.less b/src/global.less index d961c24..cbd7f2f 100644 --- a/src/global.less +++ b/src/global.less @@ -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; diff --git a/src/pages/Resource/AlgorithmModelList/detail.tsx b/src/pages/Resource/AlgorithmModelList/detail.tsx index 10a80ad..c4d5801 100644 --- a/src/pages/Resource/AlgorithmModelList/detail.tsx +++ b/src/pages/Resource/AlgorithmModelList/detail.tsx @@ -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[] = [ - { - title: , - dataIndex: 'id', - sorter: true, - }, - - { - title: ( - - ), - dataIndex: 'modelFkId', - hideInSearch: false, - }, - - { - title: , - dataIndex: 'version', - hideInSearch: true, - }, - - { - title: , - dataIndex: 'path', - hideInSearch: true, - }, - - { - title: ( - - ), - dataIndex: 'startCode', - hideInSearch: true, - }, - - { - title: ( - - ), - dataIndex: 'isEnable', - filters: true, - onFilter: true, - hideInSearch: true, - valueType: 'switch', - }, - - { - title: , - dataIndex: 'remark', - hideInSearch: true, - }, - { - title: , - 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: ( - - ), - dataIndex: 'createTime', - sorter: true, - hideInSearch: true, - valueType: 'dateTime', - }, - - { - title: ( - - ), - dataIndex: 'updateTime', - sorter: true, - hideInSearch: true, - valueType: 'dateTime', - }, -]; + const AlgorithmModelDetail: React.FC = () => { + const access = useAccess(); + const intl = useIntl(); + + const actionRef = useRef(); + + const [createModalOpen, setCreateModalOpen] = useState(false); + const [updateModalOpen, setUpdateModalOpen] = useState(false); + + const [currentRow, setCurrentRow] = useState(); + const [selectedRowsState, setSelectedRows] = useState([]); + const [model_fk_id_open, set_model_fk_id_open] = useState(false); + const [model_fk_id, set_model_fk_id] = useState(); + 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[] = [ + { + title: , + dataIndex: 'id', + sorter: true, + }, + + { + title: ( + + ), + dataIndex: 'modelFkId', + hideInSearch: false, + }, + + { + title: , + dataIndex: 'version', + hideInSearch: true, + }, + + { + title: , + dataIndex: 'path', + hideInSearch: true, + }, + + { + title: ( + + ), + dataIndex: 'startCode', + hideInSearch: true, + }, + + { + title: ( + + ), + dataIndex: 'isEnable', + filters: true, + onFilter: true, + hideInSearch: true, + valueType: 'switch', + }, + + { + title: , + dataIndex: 'remark', + hideInSearch: true, + }, + { + title: , + 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: ( + + ), + dataIndex: 'createTime', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', + }, + + { + title: ( + + ), + dataIndex: 'updateTime', + sorter: true, + hideInSearch: true, + valueType: 'dateTime', + }, + { + title: , + dataIndex: 'option', + valueType: 'option', + fixed: 'right', + render: (_, record) => [ + { + setUpdateModalOpen(true); + setCurrentRow(record); + }} + > + + + ), + }, + { + key: 'destroy', + renderDom: ( + { + handleDestroy(record).then(() => {}); + }} + > + ), + }, + ]} + >, + ], + }, + ]; // 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 ( @@ -161,14 +261,33 @@ const AlgorithmModelDetail: React.FC = () => { + + } style={{ margin: 0, padding: 0 }} headStyle={{ paddingTop: 20, paddingBottom: 20, ...headerStylesProps }} bodyStyle={{ margin: 0, padding: 0 }} > [ + + ]} request={async (params = {}, sort) => { const { current, ...rest } = params; const reqParams = { @@ -232,6 +351,20 @@ const AlgorithmModelDetail: React.FC = () => { /> + + ); }; diff --git a/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx b/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx index 96334cb..0af975b 100644 --- a/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx +++ b/src/pages/Resource/ModelVersionList/components/MyCreateForm.tsx @@ -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; reload: any; + currentDefaultFieldsData?: Record }; const waitTime = (time: number = 100) => { return new Promise((resolve) => { @@ -54,6 +55,7 @@ interface ProjectConfig { params: Array; } const MyCreateForm: React.FC = (props) => { + const actionFormListRef = useRef< FormListActionType<{ name: string; @@ -77,6 +79,8 @@ const MyCreateForm: React.FC = (props) => { setFileList([...curFile]); }; const intl = useIntl(); + const [isHasModelFkId, setIsHasModelFkId] = useState(false) + const [dataFormList, setDataFormList] = useState([]); const dataFormListRef = useRef(dataFormList); const [fileList, setFileList] = useState[]>([]); @@ -85,6 +89,18 @@ const MyCreateForm: React.FC = (props) => { const [current, setCurrent] = useState(0); const formRef = useRef(); const [configData, setConfigData] = useState({ params: [] }); + + + + useEffect(()=>{ + if(props.currentDefaultFieldsData){ + // 如果是在模型详情新增版本，ModelFkId不可编辑 + console.log(props.values,'currentDefaultFieldsData') + setIsHasModelFkId(true) + } else { + setIsHasModelFkId(false) + } + }, []) return ( = (props) => { defaultMessage: '$$$', })}`} required={true} + initialValue={props.values.modelFkId} showSearch debounceTime={1000} + disabled={isHasModelFkId} request={async (keyWord) => { const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: keyWord?.keyWords || '', diff --git a/src/pages/Resource/ModelVersionList/components/UpdateForm.tsx b/src/pages/Resource/ModelVersionList/components/UpdateForm.tsx index 87d5d27..8a9eb61 100644 --- a/src/pages/Resource/ModelVersionList/components/UpdateForm.tsx +++ b/src/pages/Resource/ModelVersionList/components/UpdateForm.tsx @@ -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; reload: any; + currentDefaultFieldsData?: Record }; const UpdateForm: React.FC = (props) => { const intl = useIntl(); - const [form] = Form.useForm(); + const [isHasModelFkId, setIsHasModelFkId] = useState(false) + const [form] = Form.useForm(); + useEffect(()=>{ + if(props.currentDefaultFieldsData){ + // 如果是在模型详情新增版本，ModelFkId不可编辑 + console.log(props.values,'currentDefaultFieldsData') + setIsHasModelFkId(true) + } else { + setIsHasModelFkId(false) + } + }, []) return ( width={proFormModelWidth} @@ -87,6 +98,7 @@ const UpdateForm: React.FC = (props) => { initialValue={props.values.modelFkId} showSearch debounceTime={1000} + disabled={isHasModelFkId} request={async (keyWord) => { const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: keyWord?.keyWords || '', diff --git a/src/pages/Setting/AlgorithmSetting.tsx b/src/pages/Setting/AlgorithmSetting.tsx index fd69d42..e82b48e 100644 --- a/src/pages/Setting/AlgorithmSetting.tsx +++ b/src/pages/Setting/AlgorithmSetting.tsx @@ -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);