feat: 模型详情独立成页面,全局未配置菜单页面在app.tsx过滤处理

develop
zhoux 2 years ago
parent 953bdf2a40
commit ce2262593f

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-06 09:43:02
* @LastEditTime: 2023-11-09 14:10:27
* @FilePath: \general-ai-platform-web\README.md
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@ -67,3 +67,9 @@ refactor: 既不修复bug也不添加特性的代码更改
perf: 改进性能的代码更改
test: 添加缺少的测试或更正现有测试
chore: 对构建过程或辅助工具和库(如文档)的更改(无法确认内容可使用)
### TODO bug汇总
* 新增路由页面,默认该角色拥有查看权限,实际配置并没有(重新配置权限,又能正常访问该新增页面)

@ -131,7 +131,13 @@ export default [
'path': '/resource/algorithm-model-list',
'component': 'Resource/AlgorithmModelList',
'access': 'canReadMenu'
'access': 'canReadMenu',
}, {
'name': 'algorithm-model-detail',
'path': '/resource/algorithm-model-detail/:id',
'component': 'Resource/AlgorithmModelList/detail',
'access': 'canReadMenu',
"isHideTab": true,
}, {
'name': 'business-image-list',

@ -0,0 +1,68 @@
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-09 14:29:49
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-09 15:34:50
* @FilePath: \general-ai-platform-web\mock\modelDetail.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { Request, Response } from 'express';
import { parse } from 'url';
// mock tableListDataSource
const genData = (params: Record<string, any>): Record<string, any> => {
const data: Record<string, any> = {
categoryFkId: 2,
createTime: '2023-10-20T06:23:56.158622Z',
defaultVersionFkId: null,
id: params.id,
name: '离岗',
remark: '',
updateTime: '2023-10-20T06:23:56.158622Z',
};
// key: index,
// disabled: i % 6 === 0,
// href: 'https://ant.design',
// avatar: [
// 'https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png',
// 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png',
// ][i % 2],
// name: `TradeCode ${index}`,
// owner: '曲丽丽',
// desc: '这是一段描述',
// callNo: Math.floor(Math.random() * 1000),
// status: Math.floor(Math.random() * 10) % 4,
// updatedAt: moment().format('YYYY-MM-DD'),
// createdAt: moment().format('YYYY-MM-DD'),
// progress: Math.ceil(Math.random() * 100),
return data;
};
function getModelDetail(req: Request, res: Response, u: string, b: Request) {
// let realUrl = u;
// if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
// realUrl = req.url;
// }
// const body = (b && b.body) || req.body;
// const { method, name, desc, key } = body;
// const params = parse(realUrl, true).query as unknown as API.PageParams &
// API.RuleListItem & {
// sorter: any;
// filter: any;
// };
// console.log(req, 'getModelDetailApi');
const result = {
data: genData({id: 2}),
success: true,
msg: '获取成功',
};
return res.json(result);
}
export default {
'GET /api/v1/mock/model/detail': getModelDetail,
};

@ -1,28 +1,28 @@
import { Footer, Question, SelectLang, AvatarDropdown, AvatarName } from '@/components';
import { AvatarDropdown, AvatarName, Footer, Question, SelectLang } from '@/components';
import { LinkOutlined } from '@ant-design/icons';
import type { Settings as LayoutSettings } from '@ant-design/pro-components';
import { SettingDrawer } from '@ant-design/pro-components';
import type { RunTimeLayoutConfig } from '@umijs/max';
import { history, Link, getLocale } from '@umijs/max';
import { Link, RunTimeLayoutConfig, getLocale, history, useIntl } from '@umijs/max';
import { RequestConfig } from 'umi';
import defaultSettings from '../config/defaultSettings';
import { errorConfig } from './requestErrorConfig';
import React from 'react';
const isDev = process.env.NODE_ENV === 'development';
const loginPath = '/user/login';
import {RequestConfig} from 'umi';
// @ts-ignore
import { SelectRole } from '@/components/RightContent';
import zhCN from '@/locales/zh-CN';
import { postMenuGetMenu } from '@/services/system/Menu';
import { getUserGetUserInfo } from '@/services/system/User';
import fixMenuItemIcon from '@/utils/FixMenuItemIcon';
import { getAllRouteNameTile } from '@/utils/common';
import { addLocale } from '@@/plugin-locale';
import { MenuDataItem } from '@ant-design/pro-layout';
import cookie from 'react-cookies';
import {getUserGetUserInfo} from "@/services/system/User";
import {MenuDataItem} from "@ant-design/pro-layout";
import fixMenuItemIcon from "@/utils/FixMenuItemIcon";
import {postMenuGetMenu} from "@/services/system/Menu";
import {SelectRole} from "@/components/RightContent";
import {addLocale} from "@@/plugin-locale";
import zhCN from "@/locales/zh-CN";
import {getAllRouteNameTile} from "@/utils/common";
/**
* @see https://umijs.org/zh-CN/plugins/plugin-initial-state
* */
// 自定义路由路径集合
const isCustomPageTitlePaths : string[]= ['/resource/algorithm-model-detail']
export async function getInitialState(): Promise<{
@ -47,15 +47,16 @@ export async function getInitialState(): Promise<{
const currentUser = await fetchUserInfo();
const menus = await postMenuGetMenu();
if (getLocale() === 'zh-CN') {
let localData = getAllRouteNameTile(menus.data.routes, '')
let localRes:any = {}
localData.forEach((v)=>{
localRes[`menu${v.name}`] = v.title
})
console.log(localRes)
addLocale("zh-CN", localRes,{
momentLocale: "zh-CN",
antd: zhCN
let localData = getAllRouteNameTile(menus.data.routes, '');
let localRes: any = {};
localData.forEach((v) => {
// console.log(v.title,'localData_v')
localRes[`menu${v.name}`] = v.title;
});
console.log(localRes, 'getAllRouteNameTile');
addLocale('zh-CN', localRes, {
momentLocale: 'zh-CN',
antd: zhCN,
});
}
@ -65,7 +66,6 @@ export async function getInitialState(): Promise<{
settings: defaultSettings as Partial<LayoutSettings>,
menuData: menus.data.routes,
};
}
return {
@ -76,15 +76,37 @@ export async function getInitialState(): Promise<{
// ProLayout 支持的api https://procomponents.ant.design/components/layout
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
return {
actionsRender: () => [<SelectRole key="selectRole"/>, <Question key="doc" />, <SelectLang key="SelectLang" />],
actionsRender: () => [
<SelectRole key="selectRole" />,
<Question key="doc" />,
<SelectLang key="SelectLang" />,
],
avatarProps: {
src: SERVER_HOST + initialState?.currentUser?.avatarUrl,
title: <AvatarName />,
render: (_, avatarChildren) => {
// console.log(avatarChildren,'')
return <AvatarDropdown>{avatarChildren}</AvatarDropdown>;
},
},
pageTitleRender: () => {
console.log(history, 'pageTitleRender');
// TODO 目前使用路由path全匹配后续改成从接口字段读取
let isCustom: boolean = false
for(let i=0; i<isCustomPageTitlePaths.length; i++){
const item = isCustomPageTitlePaths[i]
if(history.location.pathname.includes(item)){
isCustom = true
break;
} else {
isCustom = false
}
}
return isCustom ? ("") : (undefined)
// 默认不进行重定义 使用null即可
},
waterMarkProps: {
// content: initialState?.currentUser?.name,
},
@ -95,8 +117,9 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
userId: initialState?.currentUser?.id,
},
request: async () => {
return initialState?.menuData || []
}
// console.log(initialState?.menuData,'initialState_menuData')
return initialState?.menuData || [];
},
},
footerRender: () => <Footer />,
onPageChange: () => {
@ -108,7 +131,7 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
},
menuDataRender: () => {
if (initialState?.menuData !== undefined) {
return fixMenuItemIcon(initialState?.menuData || [])
return fixMenuItemIcon(initialState?.menuData || []);
}
},
layoutBgImgList: [
@ -168,18 +191,21 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
};
};
const csrfAndJwtHeaderInterceptor = (url: string, options: RequestConfig) => {
const csrfHeader = { 'X-CSRFToken': cookie.load('csrftoken') };
let bearerToken = {}
const access = localStorage.getItem('access')
let bearerToken = {};
const access = localStorage.getItem('access');
if (access) {
bearerToken = {'X-Token': `${access}`}
bearerToken = { 'X-Token': `${access}` };
}
let locale = getLocale()
let locale = getLocale();
return {
url: `${url}`,
options: { ...options, interceptors: true, headers: {...csrfHeader, ...bearerToken, 'Accept-Language': locale} },
options: {
...options,
interceptors: true,
headers: { ...csrfHeader, ...bearerToken, 'Accept-Language': locale },
},
};
};

@ -71,7 +71,7 @@ export const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu, childre
return;
}
history.push(`/account/${key}`);
},
},
[setInitialState],
);

@ -70,6 +70,11 @@ ol {
.ant-btn-link {
color: #155BD4;
}
.ant-pro-card .ant-pro-card-title {
color: #333333;
font-weight: 700;
font-size: 16px;
}
/* 单行文本溢出显示省略号 */
.single_line {
white-space: nowrap;

@ -87,6 +87,12 @@ ol {
color: #155BD4;
}
.ant-pro-card .ant-pro-card-title {
color: #333333;
font-weight: 700;
font-size: 16px;
}
// TODO 自定义样式块
/* 单行文本溢出显示省略号 */

@ -69,7 +69,11 @@ const KeepAliveLayout = () => {
}, [menuItems]);
const tabItems = useMemo(() => {
return keepAliveTabs.map(tab => {
let finalKeepAliveTabs = keepAliveTabs
// .filter(item => !item?.isHideTab)
return finalKeepAliveTabs.map(tab => {
console.log(tab,'tabItems')
// TODO 未找到合适办法只去除tab标题栏位保留页面内容
return {
key: tab.routePath,
label: renderTabTitle(tab),
@ -81,7 +85,9 @@ const KeepAliveLayout = () => {
{tab.children}
</div>
),
// style: {display: 'none'},
closable: keepAliveTabs.length > 1,
forceRender: true
}
})
}, [keepAliveTabs]);

@ -3,6 +3,7 @@ import { useMatchRoute } from './useMatchRoute';
import { history } from '@umijs/max';
export interface KeepAliveTab {
isHideTab: any;
title: string;
routePath: string;
key: string; // 这个key后面刷新有用到它
@ -106,6 +107,7 @@ export function useKeepAliveTabs() {
pathname: matchRoute.pathname,
children: matchRoute.children,
icon: matchRoute.icon,
isHideTab: matchRoute.isHideTab
}]);
} else if (existKeepAliveTab.pathname !== matchRoute.pathname) {
// 如果是同一个路由但是参数不同我们只需要刷新当前页签并且把pathname设置为新的pathname children设置为新的children

@ -1,3 +1,11 @@
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-10 11:26:54
* @FilePath: \general-ai-platform-web\src\layouts\useMatchRoute.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { IRoute, history, useAppData, useIntl, useLocation, useOutlet, useSelectedRoutes } from '@umijs/max';
import { useEffect, useState } from 'react';
@ -11,6 +19,7 @@ interface MatchRouteType {
children: any;
routePath: string; // /user/:id
icon?: any;
isHideTab?: boolean
}
export function useMatchRoute() {
@ -62,13 +71,14 @@ export function useMatchRoute() {
// 获取菜单名称
const title = getMenuTitle(lastRoute);
console.log(lastRoute,'lastRoute')
setMatchRoute({
title,
pathname,
children,
routePath: lastRoute.route.path,
icon: (lastRoute.route as any).icon, // icon是拓展出来的字段
isHideTab: (lastRoute.route as any)?.isHideTab || false, //isHideTab 是否在tab栏位中隐藏
});
}, [pathname])

@ -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 14:24:30
* @LastEditTime: 2023-11-10 14:44:54
* @FilePath: \general-ai-platform-web\src\locales\zh-CN\menu.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -70,4 +70,5 @@ export default {
'menu.list.staff': '人力资源',
'menu.list.staff.employee-list': '员工列表',
'menu.device.device-relation-list': '设备版本列表',
'menu.resource.algorithm-model-detail': '模型详情'
};

@ -1,5 +1,71 @@
export const algorithm_model: {[key: string]: string} = {'resource.algorithm_model.table.list.defaultVersionFkId': '默认版本', 'resource.algorithm_model.table.list.id': 'ID', 'resource.algorithm_model.table.list.name': '模型名称', 'resource.algorithm_model.table.list.categoryFkId': '模型类别', 'resource.algorithm_model.table.list.remark': '备注', 'resource.algorithm_model.table.list.createTime': '创建时间', 'resource.algorithm_model.table.list.updateTime': '更新时间', 'resource.algorithm_model.table.rule.required.name': '模型名称为必填项', 'resource.algorithm_model.table.rule.required.categoryFkId': '模型类别为必填项'}
export const business_image: {[key: string]: string} = {'resource.business_image.table.list.id': 'ID', 'resource.business_image.table.list.name': '镜像名称', 'resource.business_image.table.list.version': '镜像版本', 'resource.business_image.table.list.projectFkId': '项目', 'resource.business_image.table.list.path': '镜像地址', 'resource.business_image.table.list.startCode': '启动代码', 'resource.business_image.table.list.config': '配置', 'resource.business_image.table.list.configHash': '配置hash', 'resource.business_image.table.list.remark': '备注', 'resource.business_image.table.list.createTime': '创建时间', 'resource.business_image.table.list.updateTime': '更新时间', 'resource.business_image.table.rule.required.name': '镜像名称为必填项', 'resource.business_image.table.rule.required.version': '镜像版本为必填项', 'resource.business_image.table.rule.required.projectFkId': '项目为必填项'}
export const model_category: {[key: string]: string} = {'resource.model_category.table.list.id': 'ID', 'resource.model_category.table.list.name': '类别名称', 'resource.model_category.table.list.code': '类别代码', 'resource.model_category.table.list.remark': '备注', 'resource.model_category.table.list.createTime': '创建时间', 'resource.model_category.table.list.updateTime': '更新时间', 'resource.model_category.table.rule.required.name': '类别名称为必填项', 'resource.model_category.table.rule.required.code': '类别代码为必填项'}
export const model_image: {[key: string]: string} = {'resource.model_image.table.list.id': 'ID', 'resource.model_image.table.list.name': '镜像名称', 'resource.model_image.table.list.modelVersionFkId': '模型版本', 'resource.model_image.table.list.path': '镜像地址', 'resource.model_image.table.list.startCode': '启动代码', 'resource.model_image.table.list.remark': '备注', 'resource.model_image.table.list.createTime': '创建时间', 'resource.model_image.table.list.updateTime': '更新时间', 'resource.model_image.table.rule.required.name': '镜像名称为必填项', 'resource.model_image.table.rule.required.modelVersionFkId': '模型版本为必填项'}
export const model_version: {[key: string]: string} = {'resource.model_version.table.list.status': '状态', 'resource.model_version.table.list.id': 'ID', 'resource.model_version.table.list.modelFkId': '模型', 'resource.model_version.table.list.version': '模型版本', 'resource.model_version.table.list.path': '模型地址', 'resource.model_version.table.list.startCode': '启动代码', 'resource.model_version.table.list.isEnable': '是否启用', 'resource.model_version.table.list.remark': '备注', 'resource.model_version.table.list.createTime': '创建时间', 'resource.model_version.table.list.updateTime': '更新时间', 'resource.model_version.table.rule.required.modelFkId': '模型为必填项', 'resource.model_version.table.rule.required.path': '模型地址为必填项'}
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-09 13:11:05
* @FilePath: \general-ai-platform-web\src\locales\zh-CN\resource.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export const algorithm_model: { [key: string]: string } = {
'resource.algorithm_model.table.list.defaultVersionFkId': '默认版本',
'resource.algorithm_model.table.list.id': 'ID',
'resource.algorithm_model.table.list.name': '模型名称',
'resource.algorithm_model.table.list.categoryFkId': '模型类别',
'resource.algorithm_model.table.list.remark': '备注',
'resource.algorithm_model.table.list.createTime': '创建时间',
'resource.algorithm_model.table.list.updateTime': '更新时间',
'resource.algorithm_model.table.rule.required.name': '模型名称为必填项',
'resource.algorithm_model.table.rule.required.categoryFkId': '模型类别为必填项',
};
export const business_image: { [key: string]: string } = {
'resource.business_image.table.list.id': 'ID',
'resource.business_image.table.list.name': '镜像名称',
'resource.business_image.table.list.version': '镜像版本',
'resource.business_image.table.list.projectFkId': '项目',
'resource.business_image.table.list.path': '镜像地址',
'resource.business_image.table.list.startCode': '启动代码',
'resource.business_image.table.list.config': '配置',
'resource.business_image.table.list.configHash': '配置hash',
'resource.business_image.table.list.remark': '备注',
'resource.business_image.table.list.createTime': '创建时间',
'resource.business_image.table.list.updateTime': '更新时间',
'resource.business_image.table.rule.required.name': '镜像名称为必填项',
'resource.business_image.table.rule.required.version': '镜像版本为必填项',
'resource.business_image.table.rule.required.projectFkId': '项目为必填项',
};
export const model_category: { [key: string]: string } = {
'resource.model_category.table.list.id': 'ID',
'resource.model_category.table.list.name': '类别名称',
'resource.model_category.table.list.code': '类别代码',
'resource.model_category.table.list.remark': '备注',
'resource.model_category.table.list.createTime': '创建时间',
'resource.model_category.table.list.updateTime': '更新时间',
'resource.model_category.table.rule.required.name': '类别名称为必填项',
'resource.model_category.table.rule.required.code': '类别代码为必填项',
};
export const model_image: { [key: string]: string } = {
'resource.model_image.table.list.id': 'ID',
'resource.model_image.table.list.name': '镜像名称',
'resource.model_image.table.list.modelVersionFkId': '模型版本',
'resource.model_image.table.list.path': '镜像地址',
'resource.model_image.table.list.startCode': '启动代码',
'resource.model_image.table.list.remark': '备注',
'resource.model_image.table.list.createTime': '创建时间',
'resource.model_image.table.list.updateTime': '更新时间',
'resource.model_image.table.rule.required.name': '镜像名称为必填项',
'resource.model_image.table.rule.required.modelVersionFkId': '模型版本为必填项',
};
export const model_version: { [key: string]: string } = {
'resource.model_version.table.list.status': '状态',
'resource.model_version.table.list.id': 'ID',
'resource.model_version.table.list.modelFkId': '模型',
'resource.model_version.table.list.version': '模型版本',
'resource.model_version.table.list.path': '模型地址',
'resource.model_version.table.list.startCode': '启动代码',
'resource.model_version.table.list.isEnable': '是否启用',
'resource.model_version.table.list.remark': '备注',
'resource.model_version.table.list.createTime': '创建时间',
'resource.model_version.table.list.updateTime': '更新时间',
'resource.model_version.table.rule.required.modelFkId': '模型为必填项',
'resource.model_version.table.rule.required.path': '模型地址为必填项',
};

@ -1,353 +0,0 @@
import React, {useEffect, useRef, useState} from "react";
import {Button, Drawer, message, Popconfirm} from "antd";
import {
ProColumns,
ProDescriptions,
ProDescriptionsItemProps,
ProCard,
ProTable,
TableDropdown,
ProFormSelect, ActionType
} from "@ant-design/pro-components";
import ModelVersionList from "@/pages/Resource/ModelVersionList";
import {Access, FormattedMessage, history, useAccess} from "@@/exports";
import {
postAlgorithmModelGetAlgorithmModelFkSelect,
putAlgorithmModelUpdateAlgorithmModel
} from "@/services/resource/AlgorithmModel";
import {postModelVersionGetModelVersionList} from "@/services/resource/ModelVersion";
import {PlusOutlined} from "@ant-design/icons";
import MyCreateForm from "@/pages/Resource/ModelVersionList/components/MyCreateForm";
export type ColumnDrawProps = {
handleDrawer: (id?: any)=>void;
isShowDetail: boolean;
columns: any;
currentRow: API.AlgorithmModel | undefined;
};
type GithubIssueItem = {
url: string;
id: number;
number: number;
title: string;
labels: {
name: string;
color: string;
}[];
state: string;
comments: number;
created_at: string;
updated_at: string;
closed_at?: string;
};
const columns: ProColumns<API.ModelVersion>[] = [
{
title: (<FormattedMessage
id="resource.model_version.table.list.id"
defaultMessage="id"/>),
dataIndex: "id",
sorter: true,
},
{
title: (<FormattedMessage
id="resource.model_version.table.list.modelFkId"
defaultMessage="$$$"/>),
dataIndex: "modelFkId",
hideInSearch: false,
},
{
title: (<FormattedMessage
id="resource.model_version.table.list.version"
defaultMessage="$$$"/>),
dataIndex: "version",
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_version.table.list.path"
defaultMessage="$$$"/>),
dataIndex: "path",
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_version.table.list.startCode"
defaultMessage="$$$"/>),
dataIndex: "startCode",
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_version.table.list.isEnable"
defaultMessage="$$$"/>),
dataIndex: "isEnable",
filters: true, onFilter: true,
hideInSearch: true,
valueType: 'switch',
},
{
title: (<FormattedMessage
id="resource.model_version.table.list.remark"
defaultMessage="$$$"/>),
dataIndex: "remark",
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.model_version.table.list.status"
defaultMessage="$$$"/>),
dataIndex: "status",
hideInSearch: true,
valueEnum: {
1: { text: '已创建', status: 'Default' },
2: { text: '已发布', status: 'Processing' },
3: { text: '已上架', status: 'Success' },
4: { text: '已下架', status: 'Default' },
5: { text: '已关闭', status: 'Error' },
},
},
{
title: (<FormattedMessage
id="resource.model_version.table.list.createTime"
defaultMessage="$$$"/>),
dataIndex: "createTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: (<FormattedMessage
id="resource.model_version.table.list.updateTime"
defaultMessage="$$$"/>),
dataIndex: "updateTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option',
valueType: 'option',
fixed:'right',
// render: (_, record) => [
// <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
// <a
// key="update"
// onClick={() => {
// setUpdateModalOpen(true);
// setCurrentRow(record);
// }}
// >
// <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
// </a>
// <a
// key="destroy"
// onClick={() => {
// handleDestroy(record).then(()=>{})
// }}>
// <FormattedMessage
// id="pages.searchTable.destroy"
// defaultMessage="Destroy"
// />
// </a>
// <Popconfirm
// title="发布模型"
// description="确认发布模型吗?"
// onConfirm={()=>{}}
// onCancel={()=>{}}
// okText="Yes"
// cancelText="No"
// >
// <a
// key="confirm_publish"
// onClick={() => {
// setPublishModalOpen(true);
// setCurrentRow(record);
// }}>
// <FormattedMessage
// id="common.confirm_publish"
// defaultMessage="confirm_publish"
// />
// </a>
// </Popconfirm>
// <Popconfirm
// title="设置为默认版本"
// description="确认设置为默认版本吗?"
// onConfirm={()=>{
// putAlgorithmModelUpdateAlgorithmModel({id: record.modelFkId, defaultVersionFkId: record.id}).then(()=>{
// message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
// }).catch(()=>{
// message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
// })
// }}
// onCancel={()=>{}}
// okText="Yes"
// cancelText="No"
// >
// <a
// key="set_default"
// onClick={() => {
//
// }}>
// <FormattedMessage
// id="common.set_default"
// defaultMessage="$$$"
// />
// </a>
// </Popconfirm>
// </Access>
// ],
},];
const ModelVersionListDrawer: React.FC<ColumnDrawProps> = (props) => {
const access = useAccess();
const actionRef = useRef<ActionType>();
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
const [currentRow, setCurrentRow] = useState<API.ModelVersion>();
const handleCreateModal = ()=>{
if (createModalOpen) {
setCreateModalOpen(false)
setCurrentRow(undefined)
} else {
setCreateModalOpen(true)
}
}
useEffect(() => {
if (props.isShowDetail) {
actionRef.current?.reload();
}
}, [props.isShowDetail]);
return (
<Drawer
width={"80%"}
open={props.isShowDetail}
onClose={() => {
props.handleDrawer();
}}
closable={true}
>
<ProCard split="horizontal">
<ProCard>
<ProDescriptions
column={2}
dataSource={props.currentRow}
title="模型详细信息"
tooltip="包含了模型详细信息"
columns={props.columns.filter((item: Record<string,any>) => !['option'].includes(item.dataIndex))}
>
</ProDescriptions>
</ProCard>
<ProCard>
<ProTable
columns={columns}
cardBordered
actionRef={actionRef}
request={async (params = {}, sort) => {
const {current, ...rest} = params
const reqParams = {
page: current,
desc: false,
orderKey: "",
modelFkId: props.currentRow?.id,
...rest,
}
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0]
let sort_select = sort[reqParams.orderKey]
reqParams.desc = sort_select === 'descend';
}
let resp = await postModelVersionGetModelVersionList({...reqParams})
return {
data: resp.data.list.map((v: API.ModelVersion)=>{
return {...v, key: v.id}
}),
success: resp.success,
total: resp.data.total,
current: resp.data.page,
pageSize: resp.data.pageSize
};
}}
editable={{
type: 'multiple',
}}
columnsState={{
persistenceKey: 'pro-table-singe-demos',
persistenceType: 'localStorage',
onChange(value) {
console.log('value: ', value);
},
}}
rowKey="id"
search={false}
options={{
setting: {
listsHeight: 400,
},
}}
form={{
// 由于配置了 transform提交的参与与定义的不同这里需要转化一下
syncToUrl: (values, type) => {
if (type === 'get') {
return {
...values,
created_at: [values.startTime, values.endTime],
};
}
return values;
},
}}
pagination={{
pageSize: 5,
onChange: (page) => console.log(page),
}}
dateFormatter="string"
headerTitle="模型版本列表"
toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>
]}
/>
<MyCreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
</ProCard>
</ProCard>
</Drawer>
)
}
export {ModelVersionListDrawer}

@ -0,0 +1,238 @@
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';
/**styles */
const detailStylesProps = {
marginBottom: 15,
textColor: '#333333',
};
const headerStylesProps = {
fontSize: 16,
fontWeight: 700,
color: '#333333',
};
const columns: ProColumns<API.ModelVersion>[] = [
{
title: <FormattedMessage id="resource.model_version.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.modelFkId" defaultMessage="$$$" />
),
dataIndex: 'modelFkId',
hideInSearch: false,
},
{
title: <FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />,
dataIndex: 'version',
hideInSearch: true,
},
{
title: <FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />,
dataIndex: 'path',
hideInSearch: true,
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.startCode" defaultMessage="$$$" />
),
dataIndex: 'startCode',
hideInSearch: true,
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.isEnable" defaultMessage="$$$" />
),
dataIndex: 'isEnable',
filters: true,
onFilter: true,
hideInSearch: true,
valueType: 'switch',
},
{
title: <FormattedMessage id="resource.model_version.table.list.remark" defaultMessage="$$$" />,
dataIndex: 'remark',
hideInSearch: true,
},
{
title: <FormattedMessage id="resource.model_version.table.list.status" defaultMessage="$$$" />,
dataIndex: 'status',
hideInSearch: true,
valueEnum: {
1: { text: '已创建', status: 'Default' },
2: { text: '已发布', status: 'Processing' },
3: { text: '已上架', status: 'Success' },
4: { text: '已下架', status: 'Default' },
5: { text: '已关闭', status: 'Error' },
},
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.createTime" defaultMessage="$$$" />
),
dataIndex: 'createTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.updateTime" defaultMessage="$$$" />
),
dataIndex: 'updateTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
];
const AlgorithmModelDetail: React.FC = () => {
// TODO 需要将业务层代码转移到此处
// TODO 按UI原稿重新布局此模块
// 关闭页面
const doClose = () => {
history.back();
};
const routeParams = useParams();
return (
<PageContainer>
<ProCard split="horizontal" style={{ background: 'transparent' }}>
<ProCard
wrap
bodyStyle={{ margin: 0, padding: 0 }}
style={{ margin: 0, padding: 0, background: 'transparent' }}
>
<ProCard
title={
<div onClick={doClose} style={{ display: 'flex', alignItems: 'center' }}>
<ArrowLeftOutlined style={{ marginRight: 10 }} />
<span style={{ fontSize: 20, color: '#333333', fontWeight: 700 }}></span>
</div>
}
style={{
margin: 0,
padding: 0,
marginBottom: detailStylesProps.marginBottom,
background: 'transparent',
}}
headStyle={{ margin: 0, padding: 0 }}
bodyStyle={{ margin: 0, padding: 0 }}
></ProCard>
<ProCard
style={{ margin: 0, padding: 0, marginBottom: detailStylesProps.marginBottom }}
bodyStyle={{ margin: 0, padding: 20 }}
>
<ProDescriptions
column={4}
title="模型详细信息"
tooltip="包含了模型详细信息"
columns={columns}
request={async () => {
console.log(routeParams, 'id');
const resp = await postAlgorithmModelGetAlgorithmModelById({
id: Number(routeParams.id),
});
// postModelVersionGetModelVersionList({modelFkId: 3})
console.log('resp', resp);
return {
data: resp.data?.algorithmModel,
success: resp.success,
};
}}
></ProDescriptions>
</ProCard>
</ProCard>
<ProCard
title="模型版本"
style={{ margin: 0, padding: 0 }}
headStyle={{ paddingTop: 20, paddingBottom: 20, ...headerStylesProps }}
bodyStyle={{ margin: 0, padding: 0 }}
>
<ProTable
tableStyle={{ paddingTop: 15, paddingBottom: 15 }}
columns={columns}
cardBordered
request={async (params = {}, sort) => {
const { current, ...rest } = params;
const reqParams = {
page: current,
desc: false,
orderKey: '',
modelFkId: Number(routeParams?.id),
...rest,
};
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend';
}
let resp = await postModelVersionGetModelVersionList({ ...reqParams });
return {
data: resp.data.list.map((v: API.ModelVersion) => {
return { ...v, key: v.id };
}),
success: resp.success,
total: resp.data.total,
current: resp.data.page,
pageSize: resp.data.pageSize,
};
}}
editable={{
type: 'multiple',
}}
columnsState={{
persistenceKey: 'pro-table-singe-demos',
persistenceType: 'localStorage',
onChange(value) {
console.log('value: ', value);
},
}}
rowKey="id"
search={false}
options={{
fullScreen: false,
setting: false,
density: false,
reload: false,
}}
form={{
// 由于配置了 transform提交的参与与定义的不同这里需要转化一下
syncToUrl: (values, type) => {
if (type === 'get') {
return {
...values,
created_at: [values.startTime, values.endTime],
};
}
return values;
},
}}
pagination={{
pageSize: 5,
onChange: (page) => console.log(page),
}}
dateFormatter="string"
/>
</ProCard>
</ProCard>
</PageContainer>
);
};
export default AlgorithmModelDetail;

@ -17,8 +17,9 @@ import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/ma
import { Button, Modal, Popconfirm, message } from 'antd';
import React, { useRef, useState } from 'react';
import CreateForm from './components/CreateForm';
import { ModelVersionListDrawer } from './components/ModelVersionListDrawer';
import UpdateForm from './components/UpdateForm';
const AlgorithmModelList: React.FC = () => {
/**
* @en-US Pop-up window of new window
@ -99,6 +100,10 @@ const AlgorithmModelList: React.FC = () => {
setShowDetail(true);
}
};
const doToDetail = (rowData: Record<string,any>) => {
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
history.push(`/resource/algorithm-model-detail/${rowData.id}`)
}
const handleDestroy = async (selectedRow: API.AlgorithmModel) => {
deleteAlgorithmModelDeleteAlgorithmModel({ id: selectedRow.id })
.then(() => {
@ -120,7 +125,8 @@ const AlgorithmModelList: React.FC = () => {
<a
onClick={() => {
setCurrentRow(entity);
setShowDetail(true);
doToDetail(entity)
// setShowDetail(true);
}}
>
{dom}
@ -276,7 +282,8 @@ const AlgorithmModelList: React.FC = () => {
size="small"
onClick={() => {
setCurrentRow(record);
setShowDetail(true);
doToDetail(record)
// setShowDetail(true);
}}
>
@ -327,6 +334,7 @@ const AlgorithmModelList: React.FC = () => {
rowKey="key"
search={{
labelWidth: 100,
}}
onDataSourceChange={(data) => {
let CategoryFkIdIds: any = data.map((v) => {
@ -465,13 +473,6 @@ const AlgorithmModelList: React.FC = () => {
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
<ModelVersionListDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
<ModelCategoryColumnDrawer
handleDrawer={handle_category_fk_id}
isShowDetail={category_fk_id_open}

@ -2,7 +2,7 @@
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-06 16:12:17
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-08 15:42:49
* @LastEditTime: 2023-11-09 17:29:04
* @FilePath: \general-ai-platform-web\src\pages\Setting\components\ProjectCardList.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -39,9 +39,12 @@ const listItemTextStyle = {
margin: 0
}
// 卡片
export type UpdateProjectProps = {
info: Record<string, any>
// reload: any;
};
const ProjectCard: React.FC = ({ info }: { info: Record<string, any> }) => {
const ProjectCard: React.FC<UpdateProjectProps> = ({ info }: { info: Record<string, any> }) => {
return (
<div
style={{

Loading…
Cancel
Save