feat: 新增字典渲染组件释放业务层处理,新增small模式的表单格式

develop
zhoux 2 years ago
parent 7ec6df5540
commit bd2c1ede98

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-13 14:19:57 * @Date: 2023-11-13 14:19:57
* @LastEditors: zhoux zhouxia@supervision.ltd * @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-14 14:46:05 * @LastEditTime: 2023-11-15 17:22:54
* @FilePath: \general-ai-platform-web\config\defaultForm.ts * @FilePath: \general-ai-platform-web\config\defaultForm.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE2 * @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE2
*/ */
@ -12,15 +12,25 @@
export const proFormCommonOptions: Record<string,any> = { export const proFormCommonOptions: Record<string,any> = {
} }
const formBoxMargin = 2 * 24
// Small 560
export const proFormSmallModelWidth: number = 560;
export const proFormSmallItemStyleProps: Record<string, any> = {
width: proFormSmallModelWidth - formBoxMargin, // 一列
// column2Width: (proFormSmallModelWidth - 2 * formBoxMargin)/2 , // 两列
};
// normal 804 // normal 804
export const proFormModelWidth: number = 804; export const proFormModelWidth: number = 804;
export const proFormItemStyleProps: Record<string, any> = { export const proFormItemStyleProps: Record<string, any> = {
width: proFormModelWidth - 30, // 一列 width: proFormModelWidth - formBoxMargin, // 一列
column2Width: (proFormModelWidth - 62)/2 , // 两列 column2Width: (proFormModelWidth - formBoxMargin - 32)/2 , // 两列
}; };
// max 968 // max 968
export const proFormMaxModelWidth: number = 968; export const proFormMaxModelWidth: number = 968;
export const proFormMaxItemStyleProps: Record<string, any> = { export const proFormMaxItemStyleProps: Record<string, any> = {
width: proFormMaxModelWidth - 30, width: proFormMaxModelWidth - formBoxMargin,
column2Width: (proFormMaxModelWidth - formBoxMargin - 32)/2 , // 两列
}; };

@ -0,0 +1,24 @@
import { isEnableEnum } from '@/enums/common';
import { Badge } from 'antd';
import { FormattedMessage } from 'react-intl';
type IsEnableBoxProps = {
isEnable: boolean;
};
const IsEnableBox: React.FC<IsEnableBoxProps> = (props) => {
const { isEnable } = props;
const currentItem = isEnableEnum[isEnable ? '1' : '0']
return (
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Badge status={isEnable ? 'success' : 'default'}></Badge>
<span style={{color: currentItem.color, padding: 4 }}>
<FormattedMessage id={isEnable ? 'common.enable' : 'common.disable'} defaultMessage="$$$" />
</span>
</div>
);
};
export default IsEnableBox;

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-14 15:49:36 * @Date: 2023-11-14 15:49:36
* @LastEditors: zhoux zhouxia@supervision.ltd * @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-14 16:07:11 * @LastEditTime: 2023-11-15 16:47:40
* @FilePath: \general-ai-platform-web\src\components\TableActionCard\index.tsx * @FilePath: \general-ai-platform-web\src\components\TableActionCard\index.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -11,46 +11,53 @@ import { DownOutlined } from '@ant-design/icons';
import { Dropdown } from 'antd'; import { Dropdown } from 'antd';
import React from 'react'; import React from 'react';
//TODO 表单的操作按钮集合 //TODO 表单的操作按钮集合 key的报错未解决
type TableActionItemProps = { type TableActionItemProps = {
renderActions: any[]; renderActions: any[];
}; };
const TableActionCard: React.FC<TableActionItemProps> = (props) => { const TableActionCard: React.FC<TableActionItemProps> = (props) => {
const { renderActions } = props; const { renderActions } = props;
const maxActionCount = 3; const maxActionCount = 3;
let prevActions: any[] = [];
const moreActions: { key: string; label: any }[] = [];
if (renderActions.length <= maxActionCount) { if (renderActions.length <= maxActionCount) {
return renderActions.map((item) => { prevActions = renderActions;
return <>{item}</>; } else {
// eslint-disable-next-line array-callback-return
renderActions.map((item, index) => {
if (index < maxActionCount - 1) {
prevActions.push(item);
} else {
moreActions.push({
key: index + '',
label: item.renderDom,
});
}
// eslint-disable-next-line react/jsx-key
}); });
} }
const prevActions: any[] = [];
const moreActions: { key: string; label: any }[] = [];
// eslint-disable-next-line array-callback-return
renderActions.map((item, index) => {
if (index < maxActionCount - 1) {
prevActions.push(item);
} else {
moreActions.push({
key: index + '',
label: item,
});
}
// eslint-disable-next-line react/jsx-key
});
return ( return (
<> <div>
{prevActions.map((item, index) => { {prevActions.map((item) => {
return <div key={index}>{item}</div>; return (
<span style={{ padding: 4 }} key={item.key}>
{item.renderDom}
</span>
);
})} })}
<Dropdown menu={{ items: moreActions }}> {moreActions.length ? (
<a> <Dropdown menu={{ items: moreActions }}>
<a style={{ paddingLeft: 4 }}>
<DownOutlined />
</a> <DownOutlined />
</Dropdown> </a>
</> </Dropdown>
) : (
<></>
)}
</div>
); );
}; };
export default TableActionCard export default TableActionCard;

@ -0,0 +1,44 @@
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-14 17:03:13
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-15 13:27:35
* @FilePath: \general-ai-platform-web\src\components\TablePaginationCard\index.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { TableDropdown } from '@ant-design/pro-components';
import React from 'react';
export type TablePaginationCardProps = {
total: number;
pageSize: number;
current: number;
// eslint-disable-next-line @typescript-eslint/ban-types
onChange: Function
};
// 分页器
const TablePaginationCard: React.FC<TablePaginationCardProps> = (props) => {
const { total, pageSize, current, onChange } = props;
const totalPage = Math.ceil(total / pageSize);
const handleChange = (page: number, pageSize: number) => {
onChange(page, pageSize);
};
return (
<div>
<span>
Total {total} items, {totalPage} pages
</span>
<TableDropdown
total={totalPage as number}
current={current}
pageSize={pageSize}
onClick={(e) => handleChange(e, pageSize)}
/>
</div>
);
};
export default TablePaginationCard;

@ -0,0 +1,9 @@
// 是否启用
export const isEnableEnum = {
'0' : {
color: '#999999',
},
'1' : {
color: '#52C41A',
}
}

@ -80,7 +80,10 @@ ol {
font-size: 16px; font-size: 16px;
} }
.ant-modal .ant-modal-content { .ant-modal .ant-modal-content {
padding: 20px 15px; padding: 20px 24px;
}
.ant-modal-header {
padding-bottom: 10px;
} }
/* 单行文本溢出显示省略号 */ /* 单行文本溢出显示省略号 */
.single_line { .single_line {

@ -101,7 +101,10 @@ ol {
// 弹出框 // 弹出框
.ant-modal .ant-modal-content{ .ant-modal .ant-modal-content{
padding: 20px 15px; padding: 20px 24px;
}
.ant-modal-header{
padding-bottom: 10px;
} }
// TODO_update 自定义样式块 // TODO_update 自定义样式块

@ -27,6 +27,7 @@ export default {
'pages.admin.subPage.title': ' 这个页面只有 admin 权限才能查看', 'pages.admin.subPage.title': ' 这个页面只有 admin 权限才能查看',
'pages.admin.subPage.alertMessage': 'umi ui 现已发布,欢迎使用 npm run ui 启动体验。', 'pages.admin.subPage.alertMessage': 'umi ui 现已发布,欢迎使用 npm run ui 启动体验。',
'pages.searchTable.createForm.newRule': '新建规则', 'pages.searchTable.createForm.newRule': '新建规则',
'pages.searchTable.detail': '详情',
'pages.searchTable.update': '更新', 'pages.searchTable.update': '更新',
'pages.searchTable.destroy': '删除', 'pages.searchTable.destroy': '删除',
'pages.searchTable.create_son_menu': '添加子菜单', 'pages.searchTable.create_son_menu': '添加子菜单',

@ -1,3 +1,4 @@
import IsEnableBox from '@/components/DictionaryBox/isEnable';
import { import {
deleteProjectDeleteProject, deleteProjectDeleteProject,
deleteProjectDeleteProjectByIds, deleteProjectDeleteProjectByIds,
@ -7,7 +8,7 @@ import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components'; import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components'; import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max'; import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Badge, Button, message } from 'antd'; import { Button, message } from 'antd';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer'; import { ColumnDrawer } from './components/ColumnDrawer';
import MyCreateForm from './components/MyCreateForm'; import MyCreateForm from './components/MyCreateForm';
@ -121,18 +122,10 @@ const ProjectList: React.FC = () => {
onFilter: true, onFilter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'switch', valueType: 'switch',
render: (_, item) => { render: (_text, item) => {
return ( return (
<> <>
<Badge <IsEnableBox isEnable={!!item.isEnable}></IsEnableBox>
status={item.isEnable ? 'success' : 'default'}
text={
<FormattedMessage
id={item.isEnable ? 'common.enable' : 'common.disable'}
defaultMessage="$$$"
/>
}
></Badge>
</> </>
); );
}, },

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33 * @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd * @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-14 14:57:12 * @LastEditTime: 2023-11-15 16:35:04
* @FilePath: \general-ai-platform-web\src\pages\Resource\AlgorithmModelList\components\CreateForm.tsx * @FilePath: \general-ai-platform-web\src\pages\Resource\AlgorithmModelList\components\CreateForm.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -12,7 +12,7 @@ import { ModalForm, ProForm, ProFormSelect, ProFormText } from '@ant-design/pro-
import { FormattedMessage, useIntl } from '@umijs/max'; import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd'; import { Form, message } from 'antd';
import React from 'react'; import React from 'react';
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm'; import { proFormSmallItemStyleProps,proFormSmallModelWidth } from '../../../../../config/defaultForm';
export type FormValueType = { export type FormValueType = {
target?: string; target?: string;
template?: string; template?: string;
@ -33,7 +33,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
return ( return (
<ModalForm<API.AlgorithmModel> <ModalForm<API.AlgorithmModel>
width={proFormModelWidth} width={proFormSmallModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'resource.algorithm_model.table.list.add', id: 'resource.algorithm_model.table.list.add',
defaultMessage: '$$$', defaultMessage: '$$$',
@ -61,7 +61,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
> >
<ProForm.Group> <ProForm.Group>
<ProFormText <ProFormText
width={proFormItemStyleProps.width} width={proFormSmallItemStyleProps.width}
name="name" name="name"
label={ label={
<FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$" /> <FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$" />
@ -87,7 +87,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
]} ]}
/> />
<ProFormSelect <ProFormSelect
width={proFormItemStyleProps.width} width={proFormSmallItemStyleProps.width}
name="categoryFkId" name="categoryFkId"
label={ label={
<FormattedMessage <FormattedMessage
@ -118,7 +118,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
}} }}
/> />
<ProFormText <ProFormText
width={proFormItemStyleProps.width} width={proFormSmallItemStyleProps.width}
name="remark" name="remark"
label={ label={
<FormattedMessage <FormattedMessage

@ -10,6 +10,8 @@ import {
import { FormattedMessage, useIntl } from '@umijs/max'; import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd'; import { Form, message } from 'antd';
import React from 'react'; import React from 'react';
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
export type FormValueType = { export type FormValueType = {
target?: string; target?: string;
template?: string; template?: string;
@ -30,6 +32,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
return ( return (
<ModalForm<API.AlgorithmModel> <ModalForm<API.AlgorithmModel>
width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'resource.algorithm_model.table.list.update', id: 'resource.algorithm_model.table.list.update',
defaultMessage: '$$$', defaultMessage: '$$$',
@ -58,14 +61,14 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
> >
<ProForm.Group> <ProForm.Group>
<ProFormText <ProFormText
width="md" width={proFormItemStyleProps.column2Width}
name="id" name="id"
label="id" label="id"
disabled={true} disabled={true}
initialValue={props.values.id} initialValue={props.values.id}
/> />
<ProFormText <ProFormText
width="md" width={proFormItemStyleProps.column2Width}
name="name" name="name"
label={ label={
<FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$" /> <FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$" />
@ -93,7 +96,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
]} ]}
/> />
<ProFormSelect <ProFormSelect
width="md" width={proFormItemStyleProps.column2Width}
name="categoryFkId" name="categoryFkId"
label={ label={
<FormattedMessage <FormattedMessage
@ -125,7 +128,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
}} }}
/> />
<ProFormText <ProFormText
width="md" width={proFormItemStyleProps.column2Width}
name="remark" name="remark"
label={ label={
<FormattedMessage <FormattedMessage
@ -145,7 +148,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={false} disabled={false}
/> />
<ProFormDateTimePicker <ProFormDateTimePicker
width="md" width={proFormItemStyleProps.column2Width}
name="createTime" name="createTime"
label={ label={
<FormattedMessage <FormattedMessage
@ -165,7 +168,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={true} disabled={true}
/> />
<ProFormDateTimePicker <ProFormDateTimePicker
width="md" width={proFormItemStyleProps.column2Width}
name="updateTime" name="updateTime"
label={ label={
<FormattedMessage <FormattedMessage

@ -22,8 +22,6 @@ import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
// import TablePaginationCard, { TablePaginationCardProps } from '@/components/TablePaginationCard'; // import TablePaginationCard, { TablePaginationCardProps } from '@/components/TablePaginationCard';
const AlgorithmModelList: React.FC = () => { const AlgorithmModelList: React.FC = () => {
/** /**
* @en-US Pop-up window of new window * @en-US Pop-up window of new window
@ -257,6 +255,7 @@ const AlgorithmModelList: React.FC = () => {
dataIndex: 'option', dataIndex: 'option',
valueType: 'option', valueType: 'option',
fixed: 'right', fixed: 'right',
key: 'option',
// width: 140, // width: 140,
render: (_, record) => [ render: (_, record) => [
// <Access // <Access
@ -266,47 +265,62 @@ const AlgorithmModelList: React.FC = () => {
// eslint-disable-next-line react/jsx-key // eslint-disable-next-line react/jsx-key
<TableActionCard <TableActionCard
renderActions={[ renderActions={[
<Button {
key="detail" key: 'detail',
type="link" renderDom: (
size="small" <Button
onClick={() => { key="detail"
setCurrentRow(record); type="link"
doToDetail(record); size="small"
// setShowDetail(true); onClick={() => {
}} setCurrentRow(record);
> doToDetail(record);
// setShowDetail(true);
</Button>, }}
<Button >
key="update" <FormattedMessage id="pages.searchTable.detail" defaultMessage="Update" />
type="link" </Button>
size="small" ),
onClick={() => { },
setUpdateModalOpen(true); {
setCurrentRow(record); key: 'update',
}} renderDom: (
> <Button
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> key="update"
</Button>, type="link"
<Popconfirm size="small"
key="destroy" onClick={() => {
placement="topLeft" setUpdateModalOpen(true);
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })} setCurrentRow(record);
description={intl.formatMessage({ }}
id: 'common.modal.table.delete.content', >
defaultMessage: '$$$', <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
})} </Button>
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} ),
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} },
onConfirm={() => { {
handleDestroy(record).then(() => {}); key: 'destroy',
}} renderDom: (
> <Popconfirm
<Button type="link" size="small" danger> key="destroy"
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> placement="topLeft"
</Button> title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
</Popconfirm>, description={intl.formatMessage({
id: 'common.modal.table.delete.content',
defaultMessage: '$$$',
})}
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
onConfirm={() => {
handleDestroy(record).then(() => {});
}}
>
<Button type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
),
},
]} ]}
></TableActionCard>, ></TableActionCard>,
// </Access>, // </Access>,

@ -1,3 +1,11 @@
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-15 14:51:54
* @FilePath: \general-ai-platform-web\src\pages\Resource\ModelCategoryList\components\ColumnDrawer.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React from "react"; import React from "react";
import {Drawer} from "antd"; import {Drawer} from "antd";
import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components"; import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components";
@ -14,7 +22,7 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return ( return (
<Drawer <Drawer
width={600} width={400}
open={props.isShowDetail} open={props.isShowDetail}
onClose={() => { onClose={() => {
props.handleDrawer(); props.handleDrawer();
@ -24,8 +32,8 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
{props.currentRow?.id && ( {props.currentRow?.id && (
<ProDescriptions<API.ModelCategory> <ProDescriptions<API.ModelCategory>
style={{ style={{
paddingLeft: 10, // paddingLeft: 4,
paddingRight: 10 // paddingRight: 4
}} }}
column={2} column={2}
title={props.currentRow?.id} title={props.currentRow?.id}

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33 * @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd * @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-14 15:29:30 * @LastEditTime: 2023-11-15 17:23:44
* @FilePath: \general-ai-platform-web\src\pages\Resource\ModelVersionList\components\CreateForm.tsx * @FilePath: \general-ai-platform-web\src\pages\Resource\ModelVersionList\components\CreateForm.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -17,6 +17,7 @@ import {
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max'; import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd'; import { Form, message } from 'antd';
import { proFormMaxItemStyleProps, proFormMaxModelWidth } from '../../../../../config/defaultForm';
import React from 'react'; import React from 'react';
export type FormValueType = { export type FormValueType = {
target?: string; target?: string;
@ -38,6 +39,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
return ( return (
<ModalForm<API.ModelVersion> <ModalForm<API.ModelVersion>
width={proFormMaxModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'resource.model_version.table.list.add', id: 'resource.model_version.table.list.add',
defaultMessage: '$$$', defaultMessage: '$$$',
@ -65,7 +67,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
> >
<ProForm.Group> <ProForm.Group>
<ProFormSelect <ProFormSelect
width="md" width={proFormMaxItemStyleProps.column2Width}
name="modelFkId" name="modelFkId"
label={ label={
<FormattedMessage <FormattedMessage
@ -96,7 +98,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
}} }}
/> />
<ProFormText <ProFormText
width="md" width={proFormMaxItemStyleProps.column2Width}
name="version" name="version"
label={ label={
<FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" /> <FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />
@ -111,7 +113,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
required={false} required={false}
/> />
<ProFormText <ProFormText
width="md" width={proFormMaxItemStyleProps.column2Width}
name="path" name="path"
label={ label={
<FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" /> <FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />
@ -137,7 +139,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
]} ]}
/> />
<ProFormText <ProFormText
width="md" width={proFormMaxItemStyleProps.column2Width}
name="startCode" name="startCode"
label={ label={
<FormattedMessage <FormattedMessage
@ -155,7 +157,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
required={false} required={false}
/> />
<ProFormSwitch <ProFormSwitch
width="md" width={proFormMaxItemStyleProps.column2Width}
name="isEnable" name="isEnable"
label={ label={
<FormattedMessage <FormattedMessage
@ -166,7 +168,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
initialValue={true} initialValue={true}
/> />
<ProFormText <ProFormText
width="md" width={proFormMaxItemStyleProps.column2Width}
name="remark" name="remark"
label={ label={
<FormattedMessage id="resource.model_version.table.list.remark" defaultMessage="$$$" /> <FormattedMessage id="resource.model_version.table.list.remark" defaultMessage="$$$" />

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd * @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33 * @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd * @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-14 15:29:42 * @LastEditTime: 2023-11-15 17:39:37
* @FilePath: \general-ai-platform-web\src\pages\Resource\ModelVersionList\components\MyCreateForm.tsx * @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 * @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -23,6 +23,7 @@ import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, Modal, UploadFile, message } from 'antd'; import { Form, Modal, UploadFile, message } from 'antd';
import yaml from 'js-yaml'; import yaml from 'js-yaml';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { proFormMaxItemStyleProps, proFormMaxModelWidth } from '../../../../../config/defaultForm';
export type FormValueType = { export type FormValueType = {
target?: string; target?: string;
@ -95,8 +96,10 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
stepsFormRender={(dom, submitter) => { stepsFormRender={(dom, submitter) => {
return ( return (
<Modal <Modal
title="分步表单" title={
width={1000} <FormattedMessage id="resource.model_version.table.list.add" defaultMessage="$$$" />
}
width={proFormMaxModelWidth}
onCancel={() => { onCancel={() => {
setCurrent(0); setCurrent(0);
formRef.current?.resetFields(); formRef.current?.resetFields();
@ -129,7 +132,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
> >
<ProForm.Group> <ProForm.Group>
<ProFormSelect <ProFormSelect
width="md" width={proFormMaxItemStyleProps.column2Width}
name="modelFkId" name="modelFkId"
label={ label={
<FormattedMessage <FormattedMessage
@ -160,7 +163,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
}} }}
/> />
<ProFormText <ProFormText
width="md" width={proFormMaxItemStyleProps.column2Width}
name="version" name="version"
label={ label={
<FormattedMessage <FormattedMessage
@ -177,34 +180,9 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
})}`} })}`}
required={false} required={false}
/> />
<ProFormText <ProFormText
width="md" width={proFormMaxItemStyleProps.column2Width}
name="path"
label={
<FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_version.table.list.path',
defaultMessage: '$$$',
})}`}
required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="resource.model_version.table.rule.required.path"
defaultMessage="path is required"
/>
),
},
]}
/>
<ProFormText
width="md"
name="startCode" name="startCode"
label={ label={
<FormattedMessage <FormattedMessage
@ -222,7 +200,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
required={false} required={false}
/> />
<ProFormSwitch <ProFormSwitch
width="md" width={proFormMaxItemStyleProps.column2Width}
name="isEnable" name="isEnable"
label={ label={
<FormattedMessage <FormattedMessage
@ -233,7 +211,33 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
initialValue={true} initialValue={true}
/> />
<ProFormText <ProFormText
width="md" width={proFormMaxItemStyleProps.column2Width}
name="path"
label={
<FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.model_version.table.list.path',
defaultMessage: '$$$',
})}`}
required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="resource.model_version.table.rule.required.path"
defaultMessage="path is required"
/>
),
},
]}
/>
<ProFormText
width={proFormMaxItemStyleProps.column2Width}
name="remark" name="remark"
label={ label={
<FormattedMessage <FormattedMessage
@ -283,8 +287,9 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
}} }}
> >
<ProFormUploadDragger <ProFormUploadDragger
width={proFormMaxItemStyleProps.width}
max={1} max={1}
label="配置文件上传" label={<span style={{ fontWeight: 600 }}></span>}
value={fileList} value={fileList}
name="dragger" name="dragger"
fieldProps={{ fieldProps={{
@ -334,6 +339,7 @@ const MyCreateForm: React.FC<MyCreateFormProps> = (props) => {
}} }}
/> />
<ProFormList <ProFormList
name="params" name="params"
label="模型参数" label="模型参数"
actionRef={actionFormListRef} actionRef={actionFormListRef}

@ -10,6 +10,7 @@ import {
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max'; import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd'; import { Form, message } from 'antd';
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
import React from 'react'; import React from 'react';
export type FormValueType = { export type FormValueType = {
target?: string; target?: string;
@ -31,6 +32,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
return ( return (
<ModalForm<API.ModelVersion> <ModalForm<API.ModelVersion>
width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'resource.model_version.table.list.update', id: 'resource.model_version.table.list.update',
defaultMessage: '$$$', defaultMessage: '$$$',
@ -59,14 +61,14 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
> >
<ProForm.Group> <ProForm.Group>
<ProFormText <ProFormText
width="md" width={proFormItemStyleProps.column2Width}
name="id" name="id"
label="id" label="id"
disabled={true} disabled={true}
initialValue={props.values.id} initialValue={props.values.id}
/> />
<ProFormSelect <ProFormSelect
width="md" width={proFormItemStyleProps.column2Width}
name="modelFkId" name="modelFkId"
label={ label={
<FormattedMessage <FormattedMessage
@ -98,7 +100,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
}} }}
/> />
<ProFormText <ProFormText
width="md" width={proFormItemStyleProps.column2Width}
name="version" name="version"
label={ label={
<FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" /> <FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />
@ -115,7 +117,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={false} disabled={false}
/> />
<ProFormText <ProFormText
width="md" width={proFormItemStyleProps.column2Width}
name="path" name="path"
label={ label={
<FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" /> <FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />
@ -143,7 +145,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
]} ]}
/> />
<ProFormText <ProFormText
width="md" width={proFormItemStyleProps.column2Width}
name="startCode" name="startCode"
label={ label={
<FormattedMessage <FormattedMessage
@ -163,7 +165,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={false} disabled={false}
/> />
<ProFormSwitch <ProFormSwitch
width="md" width={proFormItemStyleProps.column2Width}
name="isEnable" name="isEnable"
label={ label={
<FormattedMessage <FormattedMessage
@ -175,7 +177,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={false} disabled={false}
/> />
<ProFormText <ProFormText
width="md" width={proFormItemStyleProps.column2Width}
name="remark" name="remark"
label={ label={
<FormattedMessage id="resource.model_version.table.list.remark" defaultMessage="$$$" /> <FormattedMessage id="resource.model_version.table.list.remark" defaultMessage="$$$" />
@ -192,7 +194,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={false} disabled={false}
/> />
<ProFormDateTimePicker <ProFormDateTimePicker
width="md" width={proFormItemStyleProps.column2Width}
name="createTime" name="createTime"
label={ label={
<FormattedMessage <FormattedMessage
@ -212,7 +214,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
disabled={true} disabled={true}
/> />
<ProFormDateTimePicker <ProFormDateTimePicker
width="md" width={proFormItemStyleProps.column2Width}
name="updateTime" name="updateTime"
label={ label={
<FormattedMessage <FormattedMessage

@ -122,7 +122,7 @@ const ModelVersionList: React.FC = () => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' })); message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
}); });
}; };
const columns: ProColumns<API.ModelVersion>[] = [ const columns: ProColumns<API.ModelVersion>[] = [
{ {
title: ( title: (
@ -287,85 +287,108 @@ const ModelVersionList: React.FC = () => {
> >
<TableActionCard <TableActionCard
renderActions={[ renderActions={[
<Button {
key="update" key: 'update',
type="link" renderDom: (
size="small" <Button
onClick={() => { key="update"
setUpdateModalOpen(true); type="link"
setCurrentRow(record); size="small"
}} onClick={() => {
> setUpdateModalOpen(true);
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> setCurrentRow(record);
</Button>, }}
<Popconfirm >
key="setDefault" <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
title="设为默认" </Button>
description="确认设置为默认版本吗?" ),
onConfirm={() => { },
putAlgorithmModelUpdateAlgorithmModel({ {
id: record.modelFkId, key: 'setDefault',
defaultVersionFkId: record.id, renderDom: (
}) <Popconfirm
.then(() => { key="setDefault"
message.success( title="设为默认"
intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }), description="确认设置为默认版本吗?"
); onConfirm={() => {
}) putAlgorithmModelUpdateAlgorithmModel({
.catch(() => { id: record.modelFkId,
message.error( defaultVersionFkId: record.id,
intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }), })
); .then(() => {
}); message.success(
}} intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }),
onCancel={() => {}} );
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} })
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} .catch(() => {
> message.error(
<Button key="set_default" type="link" size="small"> intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }),
);
{/* <FormattedMessage id="common.set_default" defaultMessage="$$$" /> */} });
</Button> }}
</Popconfirm>, onCancel={() => {}}
<Popconfirm okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
key="publishModel" cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
title="发布模型" >
description="确认发布模型吗?" <Button key="set_default" type="link" size="small">
onConfirm={() => {}}
onCancel={() => {}} {/* <FormattedMessage id="common.set_default" defaultMessage="$$$" /> */}
okText="Yes" </Button>
cancelText="No" </Popconfirm>
> ),
<Button },
key="confirm_publish" {
type="link" key: 'publishModel',
size="small" renderDom: (
onClick={() => { <Popconfirm
// setPublishModalOpen(true); key="publishModel"
setCurrentRow(record); title="发布模型"
}} description="确认发布模型吗?"
> onConfirm={() => {}}
<FormattedMessage id="common.confirm_publish" defaultMessage="confirm_publish" /> onCancel={() => {}}
</Button> okText="Yes"
</Popconfirm>, cancelText="No"
<Popconfirm >
key="destroy" <Button
placement="topLeft" key="confirm_publish"
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })} type="link"
description={intl.formatMessage({ size="small"
id: 'common.modal.table.delete.content', onClick={() => {
defaultMessage: '$$$', // setPublishModalOpen(true);
})} setCurrentRow(record);
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} }}
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} >
onConfirm={() => { <FormattedMessage
handleDestroy(record).then(() => {}); id="common.confirm_publish"
}} defaultMessage="confirm_publish"
> />
<Button type="link" size="small" danger> </Button>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> </Popconfirm>
</Button> ),
</Popconfirm>, },
{
key: 'destroy',
renderDom: (
<Popconfirm
key="destroy"
placement="topLeft"
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
description={intl.formatMessage({
id: 'common.modal.table.delete.content',
defaultMessage: '$$$',
})}
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
onConfirm={() => {
handleDestroy(record).then(() => {});
}}
>
<Button type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
),
},
]} ]}
></TableActionCard> ></TableActionCard>
</Access>, </Access>,

Loading…
Cancel
Save