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,7 +11,7 @@ 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[];
}; };
@ -19,13 +19,11 @@ type TableActionItemProps = {
const TableActionCard: React.FC<TableActionItemProps> = (props) => { const TableActionCard: React.FC<TableActionItemProps> = (props) => {
const { renderActions } = props; const { renderActions } = props;
const maxActionCount = 3; const maxActionCount = 3;
if (renderActions.length <= maxActionCount) { let prevActions: any[] = [];
return renderActions.map((item) => {
return <>{item}</>;
});
}
const prevActions: any[] = [];
const moreActions: { key: string; label: any }[] = []; const moreActions: { key: string; label: any }[] = [];
if (renderActions.length <= maxActionCount) {
prevActions = renderActions;
} else {
// eslint-disable-next-line array-callback-return // eslint-disable-next-line array-callback-return
renderActions.map((item, index) => { renderActions.map((item, index) => {
if (index < maxActionCount - 1) { if (index < maxActionCount - 1) {
@ -33,24 +31,33 @@ type TableActionItemProps = {
} else { } else {
moreActions.push({ moreActions.push({
key: index + '', key: index + '',
label: item, label: item.renderDom,
}); });
} }
// eslint-disable-next-line react/jsx-key // 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>
);
})} })}
{moreActions.length ? (
<Dropdown menu={{ items: moreActions }}> <Dropdown menu={{ items: moreActions }}>
<a> <a style={{ paddingLeft: 4 }}>
<DownOutlined /> <DownOutlined />
</a> </a>
</Dropdown> </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,6 +265,9 @@ const AlgorithmModelList: React.FC = () => {
// eslint-disable-next-line react/jsx-key // eslint-disable-next-line react/jsx-key
<TableActionCard <TableActionCard
renderActions={[ renderActions={[
{
key: 'detail',
renderDom: (
<Button <Button
key="detail" key="detail"
type="link" type="link"
@ -276,8 +278,13 @@ const AlgorithmModelList: React.FC = () => {
// setShowDetail(true); // setShowDetail(true);
}} }}
> >
<FormattedMessage id="pages.searchTable.detail" defaultMessage="Update" />
</Button>, </Button>
),
},
{
key: 'update',
renderDom: (
<Button <Button
key="update" key="update"
type="link" type="link"
@ -288,7 +295,12 @@ const AlgorithmModelList: React.FC = () => {
}} }}
> >
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</Button>, </Button>
),
},
{
key: 'destroy',
renderDom: (
<Popconfirm <Popconfirm
key="destroy" key="destroy"
placement="topLeft" placement="topLeft"
@ -306,7 +318,9 @@ const AlgorithmModelList: React.FC = () => {
<Button type="link" size="small" danger> <Button type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button> </Button>
</Popconfirm>, </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

@ -287,6 +287,9 @@ const ModelVersionList: React.FC = () => {
> >
<TableActionCard <TableActionCard
renderActions={[ renderActions={[
{
key: 'update',
renderDom: (
<Button <Button
key="update" key="update"
type="link" type="link"
@ -297,7 +300,12 @@ const ModelVersionList: React.FC = () => {
}} }}
> >
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</Button>, </Button>
),
},
{
key: 'setDefault',
renderDom: (
<Popconfirm <Popconfirm
key="setDefault" key="setDefault"
title="设为默认" title="设为默认"
@ -326,7 +334,12 @@ const ModelVersionList: React.FC = () => {
{/* <FormattedMessage id="common.set_default" defaultMessage="$$$" /> */} {/* <FormattedMessage id="common.set_default" defaultMessage="$$$" /> */}
</Button> </Button>
</Popconfirm>, </Popconfirm>
),
},
{
key: 'publishModel',
renderDom: (
<Popconfirm <Popconfirm
key="publishModel" key="publishModel"
title="发布模型" title="发布模型"
@ -345,9 +358,17 @@ const ModelVersionList: React.FC = () => {
setCurrentRow(record); setCurrentRow(record);
}} }}
> >
<FormattedMessage id="common.confirm_publish" defaultMessage="confirm_publish" /> <FormattedMessage
id="common.confirm_publish"
defaultMessage="confirm_publish"
/>
</Button> </Button>
</Popconfirm>, </Popconfirm>
),
},
{
key: 'destroy',
renderDom: (
<Popconfirm <Popconfirm
key="destroy" key="destroy"
placement="topLeft" placement="topLeft"
@ -365,7 +386,9 @@ const ModelVersionList: React.FC = () => {
<Button type="link" size="small" danger> <Button type="link" size="small" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button> </Button>
</Popconfirm>, </Popconfirm>
),
},
]} ]}
></TableActionCard> ></TableActionCard>
</Access>, </Access>,

Loading…
Cancel
Save