From 6b542454a304714e01cd3f48bca95a9acef9f512 Mon Sep 17 00:00:00 2001 From: zhoux Date: Mon, 6 Nov 2023 17:40:04 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A8=A1=E5=9E=8B=E7=89=88=E6=9C=AC?= =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=8C=89=E9=92=AE=E7=BB=9F=E4=B8=80=E4=BD=BF?= =?UTF-8?q?=E7=94=A8button,=E9=A1=B9=E7=9B=AE=E7=AE=A1=E7=90=86=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E6=95=B0=E6=8D=AE=E8=A1=A8=E5=8D=95=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E5=90=8C=E8=A1=8C=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 13 +- .../ProjectList/components/MyCreateForm.tsx | 273 +++++++++--------- .../components/ModelVersionListDrawer.tsx | 5 +- .../Resource/AlgorithmModelList/index.tsx | 56 ++-- src/pages/Resource/ModelVersionList/index.tsx | 46 +-- 5 files changed, 210 insertions(+), 183 deletions(-) diff --git a/README.md b/README.md index 561cd8c..2a7d2f3 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ * @Author: zhoux zhouxia@supervision.ltd * @Date: 2023-11-01 13:56:33 * @LastEditors: zhoux zhouxia@supervision.ltd - * @LastEditTime: 2023-11-03 11:09:56 + * @LastEditTime: 2023-11-06 09:43:02 * @FilePath: \general-ai-platform-web\README.md * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> @@ -22,6 +22,7 @@ * 展示抽屉内容时需要有关闭按钮，排版需和谐 * 使用stepForm的时候，最后的提交写在最后一步的onfinish里面而不是总的stepForm里 +* table操作栏按钮统一使用button，合理间距 @@ -56,3 +57,13 @@ ## ProForm 表单 + +### git提交修饰 +feat: 新功能 +fix: bug修复 +docs: 仅文档更改 +style: 不影响代码含义的更改（空白、格式设置、缺失 分号等） +refactor: 既不修复bug也不添加特性的代码更改 +perf: 改进性能的代码更改 +test: 添加缺少的测试或更正现有测试 +chore: 对构建过程或辅助工具和库（如文档）的更改（无法确认内容可使用） diff --git a/src/pages/Project/ProjectList/components/MyCreateForm.tsx b/src/pages/Project/ProjectList/components/MyCreateForm.tsx index 612e950..29db1cb 100644 --- a/src/pages/Project/ProjectList/components/MyCreateForm.tsx +++ b/src/pages/Project/ProjectList/components/MyCreateForm.tsx @@ -1,10 +1,11 @@ -import {postDeviceGroupGetDeviceGroupTree} from '@/services/device/DeviceGroup'; -import {postProjectCreateProject} from '@/services/project/Project'; -import {postAlgorithmModelGetAlgorithmModelFkSelect} from '@/services/resource/AlgorithmModel'; -import {beforeUploadFile} from '@/utils/common'; -import {CloseOutlined, SnippetsOutlined} from '@ant-design/icons'; -import type {ProFormInstance} from '@ant-design/pro-components'; +import { postDeviceGroupGetDeviceGroupTree } from '@/services/device/DeviceGroup'; +import { postProjectCreateProject } from '@/services/project/Project'; +import { postAlgorithmModelGetAlgorithmModelFkSelect } from '@/services/resource/AlgorithmModel'; +import { beforeUploadFile } from '@/utils/common'; +import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons'; +import type { ProFormInstance } from '@ant-design/pro-components'; import { + ProCard, ProForm, ProFormList, ProFormSwitch, @@ -12,15 +13,15 @@ import { ProFormUploadDragger, StepsForm, } from '@ant-design/pro-components'; -import {FormattedMessage, useIntl} from '@umijs/max'; -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'; +import { FormattedMessage, useIntl } from '@umijs/max'; +import { Modal, Switch, Transfer, Tree, UploadFile, message } 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 { FormListActionType } from '@ant-design/pro-form/lib'; +import yaml from 'js-yaml'; import cookie from 'react-cookies'; -import {FormListActionType} from "@ant-design/pro-form/lib"; -import yaml from "js-yaml"; interface RecordType { key: string; @@ -56,7 +57,7 @@ const waitTime = (time: number = 100) => { }; /**styles 配置 */ -const formContainerWidth: number = 755 +const formContainerWidth: number = 755; const stepFormItemStyleProps: Record = { width: formContainerWidth, }; @@ -70,51 +71,51 @@ const treeData1: any[] = [ title: '0-0-0', key: '0-0-0', children: [ - {title: '0-0-0-0', key: '0-0-0-0'}, - {title: '0-0-0-1', key: '0-0-0-1'}, - {title: '0-0-0-2', key: '0-0-0-2'}, + { title: '0-0-0-0', key: '0-0-0-0' }, + { title: '0-0-0-1', key: '0-0-0-1' }, + { title: '0-0-0-2', key: '0-0-0-2' }, ], }, { title: '0-0-1', key: '0-0-1', children: [ - {title: '0-0-1-0', key: '0-0-1-0'}, - {title: '0-0-1-1', key: '0-0-1-1'}, - {title: '0-0-1-2', key: '0-0-1-2'}, - {title: '0-0-1-0', key: '0-0-1-3'}, - {title: '0-0-1-1', key: '0-0-1-4'}, - {title: '0-0-1-2', key: '0-0-1-5'}, - {title: '0-0-1-0', key: '0-0-1-6'}, - {title: '0-0-1-1', key: '0-0-1-7'}, - {title: '0-0-1-2', key: '0-0-1-8'}, - {title: '0-0-1-0', key: '0-0-1-9'}, - {title: '0-0-1-1', key: '0-0-1-10'}, - {title: '0-0-1-2', key: '0-0-1-11'}, - {title: '0-0-1-0', key: '0-0-1-12'}, - {title: '0-0-1-1', key: '0-0-1-13'}, - {title: '0-0-1-2', key: '0-0-1-14'}, - {title: '0-0-1-0', key: '0-0-1-15'}, - {title: '0-0-1-1', key: '0-0-1-16'}, - {title: '0-0-1-2', key: '0-0-1-17'}, - {title: '0-0-1-0', key: '0-0-1-18'}, - {title: '0-0-1-1', key: '0-0-1-19'}, - {title: '0-0-1-2', key: '0-0-1-20'}, - {title: '0-0-1-0', key: '0-0-1-21'}, - {title: '0-0-1-1', key: '0-0-1-22'}, - {title: '0-0-1-2', key: '0-0-1-23'}, - {title: '0-0-1-0', key: '0-0-1-24'}, - {title: '0-0-1-1', key: '0-0-1-25'}, - {title: '0-0-1-2', key: '0-0-1-26'}, - {title: '0-0-1-0', key: '0-0-1-27'}, - {title: '0-0-1-1', key: '0-0-1-28'}, - {title: '0-0-1-2', key: '0-0-1-29'}, - {title: '0-0-1-0', key: '0-0-1-30'}, - {title: '0-0-1-1', key: '0-0-1-31'}, - {title: '0-0-1-2', key: '0-0-1-32'}, - {title: '0-0-1-0', key: '0-0-1-33'}, - {title: '0-0-1-1', key: '0-0-1-34'}, - {title: '0-0-1-2', key: '0-0-1-35'}, + { title: '0-0-1-0', key: '0-0-1-0' }, + { title: '0-0-1-1', key: '0-0-1-1' }, + { title: '0-0-1-2', key: '0-0-1-2' }, + { title: '0-0-1-0', key: '0-0-1-3' }, + { title: '0-0-1-1', key: '0-0-1-4' }, + { title: '0-0-1-2', key: '0-0-1-5' }, + { title: '0-0-1-0', key: '0-0-1-6' }, + { title: '0-0-1-1', key: '0-0-1-7' }, + { title: '0-0-1-2', key: '0-0-1-8' }, + { title: '0-0-1-0', key: '0-0-1-9' }, + { title: '0-0-1-1', key: '0-0-1-10' }, + { title: '0-0-1-2', key: '0-0-1-11' }, + { title: '0-0-1-0', key: '0-0-1-12' }, + { title: '0-0-1-1', key: '0-0-1-13' }, + { title: '0-0-1-2', key: '0-0-1-14' }, + { title: '0-0-1-0', key: '0-0-1-15' }, + { title: '0-0-1-1', key: '0-0-1-16' }, + { title: '0-0-1-2', key: '0-0-1-17' }, + { title: '0-0-1-0', key: '0-0-1-18' }, + { title: '0-0-1-1', key: '0-0-1-19' }, + { title: '0-0-1-2', key: '0-0-1-20' }, + { title: '0-0-1-0', key: '0-0-1-21' }, + { title: '0-0-1-1', key: '0-0-1-22' }, + { title: '0-0-1-2', key: '0-0-1-23' }, + { title: '0-0-1-0', key: '0-0-1-24' }, + { title: '0-0-1-1', key: '0-0-1-25' }, + { title: '0-0-1-2', key: '0-0-1-26' }, + { title: '0-0-1-0', key: '0-0-1-27' }, + { title: '0-0-1-1', key: '0-0-1-28' }, + { title: '0-0-1-2', key: '0-0-1-29' }, + { title: '0-0-1-0', key: '0-0-1-30' }, + { title: '0-0-1-1', key: '0-0-1-31' }, + { title: '0-0-1-2', key: '0-0-1-32' }, + { title: '0-0-1-0', key: '0-0-1-33' }, + { title: '0-0-1-1', key: '0-0-1-34' }, + { title: '0-0-1-2', key: '0-0-1-35' }, ], }, { @@ -127,9 +128,9 @@ const treeData1: any[] = [ title: '0-1', key: '0-1', children: [ - {title: '0-1-0-0', key: '0-1-0-0'}, - {title: '0-1-0-1', key: '0-1-0-1'}, - {title: '0-1-0-2', key: '0-1-0-2'}, + { title: '0-1-0-0', key: '0-1-0-0' }, + { title: '0-1-0-1', key: '0-1-0-1' }, + { title: '0-1-0-2', key: '0-1-0-2' }, ], }, { @@ -144,7 +145,7 @@ const MyCreateForm: React.FC = (props) => { const [targetKeys, setTargetKeys] = useState([]); const [selectKeys, setSelectKeys] = useState([]); const [filePath, setFilePath] = useState(''); - const [configData, setConfigData] = useState({params: []}); + const [configData, setConfigData] = useState({ params: [] }); const intl = useIntl(); const [isAuto, setIsAuto] = useState(true); const formRef = useRef(); @@ -152,7 +153,7 @@ const MyCreateForm: React.FC = (props) => { const [current, setCurrent] = useState(0); const [dataFormList, setDataFormList] = useState([]); - const dataFormListRef = useRef(dataFormList) + const dataFormListRef = useRef(dataFormList); const [fileList, setFileList] = useState[]>([]); const actionFormListRef = useRef< @@ -160,7 +161,7 @@ const MyCreateForm: React.FC = (props) => { name: string; }> >(); - const handleFileChange = ({file}: { file: UploadFile }) => { + const handleFileChange = ({ file }: { file: UploadFile }) => { let curFile: any; switch (file.status) { @@ -176,11 +177,10 @@ const MyCreateForm: React.FC = (props) => { } setFileList([...curFile]); - } - + }; const getModelData = () => { - postAlgorithmModelGetAlgorithmModelFkSelect({keyword: ''}).then((res) => { + postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: '' }).then((res) => { let result = (res.data?.list || []).map((v: any) => { return { key: v.id, @@ -205,14 +205,13 @@ const MyCreateForm: React.FC = (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) => { + postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: value }).then((res) => { let result = (res.data?.list || []).map((v: any) => { return { key: v.id, @@ -233,20 +232,20 @@ const MyCreateForm: React.FC = (props) => { current={current} onCurrentChange={setCurrent} onFinish={async () => { - setFileList([]) + setFileList([]); let formData = formRef.current?.getFieldsValue(); if (formData?.name) { - formData.inferConfig = {models: targetKeys, params: configData?.params || []}; + formData.inferConfig = { models: targetKeys, params: configData?.params || [] }; formData.groupIds = selectKeys; formData.projectFilePath = filePath; postProjectCreateProject(formData) .then(() => { - message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})); + message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' })); props.handleModal(); props.reload(); }) .catch(() => { - message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'})); + message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); return false; }); } @@ -264,7 +263,7 @@ const MyCreateForm: React.FC = (props) => { width={803} onCancel={() => { setCurrent(0); - setFileList([]) + setFileList([]); formRef.current?.resetFields(); formRef3.current?.resetFields(); props.handleModal(); @@ -298,7 +297,7 @@ const MyCreateForm: React.FC = (props) => { } + label={} placeholder={`${intl.formatMessage({ id: 'common.please_input', defaultMessage: '$$$', @@ -322,7 +321,7 @@ const MyCreateForm: React.FC = (props) => { } + label={} placeholder={`${intl.formatMessage({ id: 'common.please_input', defaultMessage: '$$$', @@ -337,22 +336,22 @@ const MyCreateForm: React.FC = (props) => { isAuto ? [] : [ - { - required: true, - message: ( - - ), - }, - ] + { + required: true, + message: ( + + ), + }, + ] } addonAfter={ } - unCheckedChildren={} + checkedChildren={} + unCheckedChildren={} onChange={setIsAuto} /> } @@ -360,7 +359,7 @@ const MyCreateForm: React.FC = (props) => { } + label={} placeholder={`${intl.formatMessage({ id: 'common.please_input', defaultMessage: '$$$', @@ -384,7 +383,7 @@ const MyCreateForm: React.FC = (props) => { } + label={} placeholder={`${intl.formatMessage({ id: 'common.please_input', defaultMessage: '$$$', @@ -400,7 +399,7 @@ const MyCreateForm: React.FC = (props) => { width="lg" name="isEnable" label={ - + } initialValue={true} /> @@ -423,14 +422,13 @@ const MyCreateForm: React.FC = (props) => { dataSource={modalData} showSearch titles={['未选模型', '已选模型']} - - locale={{itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容'}} + locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }} targetKeys={targetKeys} onChange={handleChange} onSearch={handleSearch} - style={{marginBottom: '20px'}} - listStyle={{width: 289, height: 300}} - operationStyle={{width: 100, alignItems: 'center'}} + style={{ marginBottom: '20px' }} + listStyle={{ width: 289, height: 300 }} + operationStyle={{ width: 100, alignItems: 'center' }} render={(item) => item.title} /> @@ -440,7 +438,7 @@ const MyCreateForm: React.FC = (props) => { }> name="project_file" title="上传业务代码" - style={{width: stepFormItemStyleProps.width}} + style={{ width: stepFormItemStyleProps.width }} stepProps={{ description: '上传业务代码格式为(.zip,.tar.gz)', }} @@ -460,7 +458,7 @@ const MyCreateForm: React.FC = (props) => { fieldProps={{ name: 'file', beforeUpload: beforeUploadFile, - data: {path: 'project/files'}, + data: { path: 'project/files' }, headers: { 'X-CSRFToken': cookie.load('csrftoken'), Authorization: `Bearer ${localStorage.getItem('access') || ''}`, @@ -485,7 +483,8 @@ const MyCreateForm: React.FC = (props) => { {/* */} {/* TODO 图标需要替换 */} - = (props) => { onChange: handleFileChange, onRemove: () => { let index_ids = actionFormListRef.current?.getList()?.map((v, i) => { - return i - }) - actionFormListRef.current?.remove(index_ids || []) + 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 + 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; - } - if (file.name.endsWith('.json')) { - parsedData = JSON.parse(text) as Record; - } - if (Object.keys(parsedData).length > 0) { - dataFormListRef.current = Object.entries(parsedData).map(([key, value]) => ({ - name: key, - default: value - })) + let parsedData = {}; + file + .text() + .then((text) => { + if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) { + parsedData = yaml.load(text) as Record; + } + if (file.name.endsWith('.json')) { + parsedData = JSON.parse(text) as Record; + } + 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 - }) + dataFormListRef.current.forEach((v: any, i: number) => { + actionFormListRef.current?.add(v, i); + }); + } + return true; + }) + .catch(() => { + return false; + }); } }, }} /> = (props) => { > {(f, index, action) => { return ( - <> - - - - + + + + + + + + + + + ); }} @@ -564,10 +575,10 @@ const MyCreateForm: React.FC = (props) => { onFinish={async () => { return true; }} - style={{width: stepFormItemStyleProps.width}} + style={{ width: stepFormItemStyleProps.width }} formRef={formRef3} > -
{'选择网点'}
+
{'选择网点'}
= (props) => { actionRef.current?.reload(); } }, [props.isShowDetail]); - + return ( = (props) => { dataSource={props.currentRow} title="模型详细信息" tooltip="包含了模型详细信息" - columns={props.columns} - + columns={props.columns.filter((item: Record) => !['option'].includes(item.dataIndex))} > diff --git a/src/pages/Resource/AlgorithmModelList/index.tsx b/src/pages/Resource/AlgorithmModelList/index.tsx index 0779ff7..9b4f22a 100644 --- a/src/pages/Resource/AlgorithmModelList/index.tsx +++ b/src/pages/Resource/AlgorithmModelList/index.tsx @@ -271,45 +271,43 @@ const AlgorithmModelList: React.FC = () => { accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`} > - { setCurrentRow(record); setShowDetail(true); }} > 详情 - - + {/* update1101 */} { handleDestroy(record).then(() => {}); }} > - @@ -355,18 +353,16 @@ const AlgorithmModelList: React.FC = () => { onClick={async () => { Modal.confirm({ icon: , - title: ( - intl.formatMessage({ id: 'common.modal.table.delete.title', defaultMessage: '$$$' }) - ), - content:( - intl.formatMessage({ id: 'common.modal.table.delete.content', defaultMessage: '$$$' }) - ), - okText: ( - intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' }) - ), - cancelText: ( - intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' }) - ), + title: intl.formatMessage({ + id: 'common.modal.table.delete.title', + defaultMessage: '$$$', + }), + content: intl.formatMessage({ + id: 'common.modal.table.delete.content', + defaultMessage: '$$$', + }), + okText: intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' }), + cancelText: intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' }), onOk() { // TODO 未对接批量删除接口 deleteAlgorithmModelDeleteAlgorithmModelByIds({ diff --git a/src/pages/Resource/ModelVersionList/index.tsx b/src/pages/Resource/ModelVersionList/index.tsx index 5765558..943beaa 100644 --- a/src/pages/Resource/ModelVersionList/index.tsx +++ b/src/pages/Resource/ModelVersionList/index.tsx @@ -15,7 +15,7 @@ import { DownOutlined, PlusOutlined } from '@ant-design/icons'; import type { ActionType, ProColumns } from '@ant-design/pro-components'; import { FooterToolbar, PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components'; import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max'; -import { Button, Popconfirm, message , Dropdown} from 'antd'; +import { Button, Dropdown, Popconfirm, message } from 'antd'; // import { MenuProps } from 'rc-menu'; import React, { useRef, useState } from 'react'; import { ColumnDrawer } from './components/ColumnDrawer'; @@ -134,26 +134,29 @@ const ModelVersionList: React.FC = () => { }); } const prevActions: any[] = []; - const moreActions: { key: string; label: any; }[] = []; + const moreActions: { key: string; label: any }[] = []; renderActions.map((item, index) => { if (index < maxActionCount - 1) { prevActions.push(item); } else { moreActions.push({ - key: index+"", - label: item + key: index + '', + label: item, }); } // eslint-disable-next-line react/jsx-key }); return ( <> - {prevActions.map((item,index) => { + {prevActions.map((item, index) => { return
{item}
; })} - - 更多 - + + + 更多 + + + ); }; @@ -320,23 +323,28 @@ const ModelVersionList: React.FC = () => { > { setUpdateModalOpen(true); setCurrentRow(record); }} > - , - , + , // eslint-disable-next-line react/jsx-key { okText="Yes" cancelText="No" > - { setPublishModalOpen(true); setCurrentRow(record); }} > - + , // eslint-disable-next-line react/jsx-key { }); }} onCancel={() => {}} - okText="Yes" - cancelText="No" + okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} + cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} > - {}}> + , ]} >