Yaxin
/
General-AI-Platform-Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 模型列表删除按钮个性化、气泡确认操作；抽屉展开内容间距调整；模型版本按钮超过3个显示更多

Browse Source
develop
zhoux 2 years ago
parent dfd2169f32
commit e780b5f9f5
7 changed files with 1040 additions and 732 deletions
Show Stats Download Patch File Download Diff File

2
.gitignore vendored
Unescape Escape View File

@ -8,7 +8,7 @@ _roadhog-api-doc
# production
/dist
/taskDoc
# misc
.DS_Store
npm-debug.log*

31
README.md
Unescape Escape View File

@ -1,3 +1,34 @@
# General-AI-Platform-Web
通用算法平台前端仓库 develop
### remark
* 列表筛选表单配置统一使用renderFormItem配置，方便个性化处理
* 删除按钮颜色配色 统一将a标签换成Button 设置属性{ type="text" danger}
* 列表多选的操作高亮处理，目前不明显
* 列表action栏位操作多个排在一起显得拥挤
* 展示抽屉内容时需要有关闭按钮，排版需和谐
### 具体实现
1. 筛选表单区： 列表在columns配置初始数据时，需要筛选的表单项统一使用renderFormItem属性，基于renderFormItem去配置表单项field, 【searchFormItemProps】属性统一配置自定义业务
{
width="md" // 表单项宽度可以是数字
labelCol={{span: 4}} // 标签布局
wrapperCol={{span: 22}} // 输入控件布局
}
2. 列表action区按钮个性化和操作确认调整为 统一将a标签换成Button 设置属性【actionInnerDeleteBtnProps】
{ type="text" danger}
3. 列表action有多个按钮显示更多
暂时使用默认超过3个显示更多，如需统一处理或者权限控制下的按钮显示隐藏导致的按钮数量不一致，可根据需要独立封装TableActionComp

17
src/pages/Resource/AlgorithmModelList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -1,3 +1,11 @@
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-02 15:19:11
* @FilePath: \general-ai-platform-web\src\pages\Resource\AlgorithmModelList\components\ColumnDrawer.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%
*/
import React from "react";
import {Drawer} from "antd";
import {ProColumns, ProDescriptions, ProDescriptionsItemProps} from "@ant-design/pro-components";
@ -9,7 +17,11 @@ export type ColumnDrawProps = {
currentRow: API.AlgorithmModel | undefined;
};
/**
* @表格列信息展示
* @param props
* @returns
*/
const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return (
@ -20,6 +32,9 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
props.handleDrawer();
}}
closable={false}
extra={
<>123</>
}
>
{props.currentRow?.id && (
<ProDescriptions<API.AlgorithmModel>

203
src/pages/Resource/AlgorithmModelList/components/CreateForm.tsx
Unescape Escape View File

@ -1,79 +1,140 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormSelect} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {postModelCategoryGetModelCategoryFkSelect} from "@/services/resource/ModelCategory";
import {postAlgorithmModelCreateAlgorithmModel} from "@/services/resource/AlgorithmModel";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-02 14:01:29
* @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
*/
import { postAlgorithmModelCreateAlgorithmModel } from '@/services/resource/AlgorithmModel';
import { postModelCategoryGetModelCategoryFkSelect } from '@/services/resource/ModelCategory';
import { ModalForm, ProForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import React from 'react';
export type FormValueType = {
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.AlgorithmModel>;
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.AlgorithmModel>;
export type CreateFormProps = {
createModalOpen: boolean;
handleModal: ()=>void;
values: Partial<API.AlgorithmModel>;
reload: any;
};
export type CreateFormProps = {
createModalOpen: boolean;
handleModal: () => void;
values: Partial<API.AlgorithmModel>;
reload: any;
};
const CreateForm: React.FC<CreateFormProps> = (props) => {
const intl = useIntl();
const [form] = Form.useForm<API.AlgorithmModel>();
const intl = useIntl();
const [form] = Form.useForm<API.AlgorithmModel>();
return (
<ModalForm<API.AlgorithmModel>
title={intl.formatMessage({
id: 'common.modal.table.create.title',
defaultMessage: '$$$',
})}
open={props.createModalOpen}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
}}
submitTimeout={2000}
onFinish={async (values) => {
postAlgorithmModelCreateAlgorithmModel(values).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
props.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
return (
<ModalForm<API.AlgorithmModel>
title={intl.formatMessage({
id: 'common.modal.table.create.title',
defaultMessage: '$$$',
})}
open={props.createModalOpen}
form={form}
autoFocusFirstInput
modalProps={{
destroyOnClose: true,
onCancel: () => props.handleModal(),
}}
submitTimeout={2000}
onFinish={async (values) => {
postAlgorithmModelCreateAlgorithmModel(values)
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
props.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
props.handleModal();
return true;
}}
>
<ProForm.Group>
<ProFormText width="md" name="name" label={<FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.algorithm_model.table.list.name', defaultMessage: '$$$'})}`} required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="resource.algorithm_model.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormSelect width="md" name="categoryFkId" label={<FormattedMessage id="resource.algorithm_model.table.list.categoryFkId" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.algorithm_model.table.list.categoryFkId', defaultMessage: '$$$'})}`} required={true} showSearch debounceTime={1000} request={async (keyWord)=>{
const resp = await postModelCategoryGetModelCategoryFkSelect({keyword: keyWord?.keyWords || ''})
return resp.data.list.map((v: any)=>{
return {
label: v.name,
value: v.id
}
})
}
}/>
<ProFormText width="md" name="remark" label={<FormattedMessage id="resource.algorithm_model.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.algorithm_model.table.list.remark', defaultMessage: '$$$'})}`} required={false}/>
</ProForm.Group>
</ModalForm>)}
>
<ProForm.Group>
<ProFormText
width="lg"
name="name"
label={
<FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.algorithm_model.table.list.name',
defaultMessage: '$$$',
})}`}
required={true}
rules={[
{
required: true,
message: (
<FormattedMessage
id="resource.algorithm_model.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormSelect
width="lg"
name="categoryFkId"
label={
<FormattedMessage
id="resource.algorithm_model.table.list.categoryFkId"
defaultMessage="$$$"
/>
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.algorithm_model.table.list.categoryFkId',
defaultMessage: '$$$',
})}`}
required={true}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postModelCategoryGetModelCategoryFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return {
label: v.name,
value: v.id,
};
});
}}
/>
<ProFormText
width="lg"
name="remark"
label={
<FormattedMessage
id="resource.algorithm_model.table.list.remark"
defaultMessage="$$$"
/>
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.algorithm_model.table.list.remark',
defaultMessage: '$$$',
})}`}
required={false}
/>
</ProForm.Group>
</ModalForm>
);
};
export default CreateForm;

675
src/pages/Resource/AlgorithmModelList/index.tsx
Unescape Escape View File

@ -1,115 +1,125 @@
import {ModelCategoryColumns} from '@/pages/Resource/ModelCategoryList/components/Columns';
import {postModelCategoryGetModelCategoryById, postModelCategoryGetModelCategoryFkSelect, postModelCategoryGetModelCategoryNames} from '@/services/resource/ModelCategory';
import {ColumnDrawer as ModelCategoryColumnDrawer} from "@/pages/Resource/ModelCategoryList/components/ColumnDrawer";
import {deleteAlgorithmModelDeleteAlgorithmModel, postAlgorithmModelGetAlgorithmModelList, deleteAlgorithmModelDeleteAlgorithmModelByIds} from '@/services/resource/AlgorithmModel';
import { ColumnDrawer as ModelCategoryColumnDrawer } from '@/pages/Resource/ModelCategoryList/components/ColumnDrawer';
import { ModelCategoryColumns } from '@/pages/Resource/ModelCategoryList/components/Columns';
import {
deleteAlgorithmModelDeleteAlgorithmModel,
deleteAlgorithmModelDeleteAlgorithmModelByIds,
postAlgorithmModelGetAlgorithmModelList,
} from '@/services/resource/AlgorithmModel';
import {
postModelCategoryGetModelCategoryById,
postModelCategoryGetModelCategoryFkSelect,
postModelCategoryGetModelCategoryNames,
} from '@/services/resource/ModelCategory';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProTable,
ProFormSelect,
ProFormText,
ProTable,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message} from 'antd';
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, Popconfirm, message } from 'antd';
import React, { useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm';
import CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const AlgorithmModelList: React.FC = () => {
/**
* @en-US Pop-up window of new window
* @zh-CN 新建窗口的弹窗
* */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN 分布更新窗口的弹窗
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN 国际化配置
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.AlgorithmModel>();
const [selectedRowsState, setSelectedRows] = useState<API.AlgorithmModel[]>([]);
const [category_fk_id_open, set_category_fk_id_open] = useState(false)
const [category_fk_id, set_category_fk_id] = useState<API.ModelCategory>()
const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false)
const [categoryFkIdIds, setCategoryFkIdIds] = useState([])
const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({})
const handle_category_fk_id = (id: any)=>{
if (category_fk_id_open) {
set_category_fk_id(undefined);
set_category_fk_id_open(false)
}else {
postModelCategoryGetModelCategoryById({id: id}).then((resp)=>{
set_category_fk_id(resp.data.modelCategory)
set_category_fk_id_open(true)
})
}
}
const handle_category_fk_id_column_open = ()=>{
if (category_fk_id_column_open) {
set_category_fk_id_column_open(false)
}else {
postModelCategoryGetModelCategoryNames({ids: categoryFkIdIds}).then((resp)=>{
let a: any = {}
resp.data.list.forEach((v: any)=>{
if (v.id) {
a[v.id] = v.name
}
})
setCategoryFkIdMap(a)
})
set_category_fk_id_column_open(true)
}
}
const handleUpdateModal = ()=>{
if (updateModalOpen) {
setUpdateModalOpen(false)
setCurrentRow(undefined)
} else {
setUpdateModalOpen(true)
}
}
const handleCreateModal = ()=>{
if (createModalOpen) {
setCreateModalOpen(false)
setCurrentRow(undefined)
} else {
setCreateModalOpen(true)
}
}
const handleColumnDrawer = ()=>{
if (showDetail) {
setShowDetail(false)
setCurrentRow(undefined)
} else {
setShowDetail(true)
}
}
const handleDestroy = async (selectedRow: API.AlgorithmModel) => {
deleteAlgorithmModelDeleteAlgorithmModel({id: selectedRow.id}).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
actionRef.current?.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
};
/**
* @en-US Pop-up window of new window
* @zh-CN 新建窗口的弹窗
* */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN 分布更新窗口的弹窗
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN 国际化配置
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
// TODO 动态设置每页数量
const [currentPageSize, setCurrentPageSize] = useState<number>(10)
const [currentRow, setCurrentRow] = useState<API.AlgorithmModel>();
const [selectedRowsState, setSelectedRows] = useState<API.AlgorithmModel[]>([]);
const [category_fk_id_open, set_category_fk_id_open] = useState(false);
const [category_fk_id, set_category_fk_id] = useState<API.ModelCategory>();
const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false);
const [categoryFkIdIds, setCategoryFkIdIds] = useState([]);
const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({});
const handle_category_fk_id = (id: any) => {
if (category_fk_id_open) {
set_category_fk_id(undefined);
set_category_fk_id_open(false);
} else {
postModelCategoryGetModelCategoryById({ id: id }).then((resp) => {
set_category_fk_id(resp.data.modelCategory);
set_category_fk_id_open(true);
});
}
};
const handle_category_fk_id_column_open = () => {
if (category_fk_id_column_open) {
set_category_fk_id_column_open(false);
} else {
postModelCategoryGetModelCategoryNames({ ids: categoryFkIdIds }).then((resp) => {
let a: any = {};
resp.data.list.forEach((v: any) => {
if (v.id) {
a[v.id] = v.name;
}
});
setCategoryFkIdMap(a);
});
set_category_fk_id_column_open(true);
}
};
const columns: ProColumns<API.AlgorithmModel>[] = [
const handleUpdateModal = () => {
if (updateModalOpen) {
setUpdateModalOpen(false);
setCurrentRow(undefined);
} else {
setUpdateModalOpen(true);
}
};
const handleCreateModal = () => {
if (createModalOpen) {
setCreateModalOpen(false);
setCurrentRow(undefined);
} else {
setCreateModalOpen(true);
}
};
const handleColumnDrawer = () => {
if (showDetail) {
setShowDetail(false);
setCurrentRow(undefined);
} else {
setShowDetail(true);
}
};
const handleDestroy = async (selectedRow: API.AlgorithmModel) => {
deleteAlgorithmModelDeleteAlgorithmModel({ id: selectedRow.id })
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
actionRef.current?.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
};
const columns: ProColumns<API.AlgorithmModel>[] = [
{
title: (<FormattedMessage
id="resource.algorithm_model.table.list.id"
defaultMessage="id"/>),
dataIndex: "id",
title: <FormattedMessage id="resource.algorithm_model.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
render: (dom, entity) => {
return (
@ -123,228 +133,293 @@ const columns: ProColumns<API.AlgorithmModel>[] = [
</a>
);
},
//TODO 默认使用renderFormItem update1101
renderFormItem: () => {
return (
<>
<ProFormText
width="md"
labelCol={{span: 4}}
wrapperCol={{span: 22}}
name="id"
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}`}
required={false}
/>
</>
);
},
},
{
title: (<FormattedMessage
id="resource.algorithm_model.table.list.name"
defaultMessage="$$$"/>),
dataIndex: "name",
hideInSearch: true,
title: (
<FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$" />
),
dataIndex: 'name',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.algorithm_model.table.list.categoryFkId"
defaultMessage="$$$"/>),
dataIndex: "categoryFkId",
hideInSearch: false,
render: (text, record) => {
if (category_fk_id_column_open) {
return ( <a onClick={()=>{handle_category_fk_id(record.categoryFkId)}}>{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}</a>)
} else {
return (<a onClick={()=>{handle_category_fk_id(record.categoryFkId)}}>{record.categoryFkId}</a>)
}
},
renderFormItem: () => {
return (
// value 和 onchange 会通过 form 自动注入。
<ProFormSelect
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`}
required={false} showSearch debounceTime={1000}
request={async (keyWord)=>{
const resp = await postModelCategoryGetModelCategoryFkSelect({keyword: keyWord?.keyWords || ''})
return resp.data.list.map((v: any)=>{
return {
label: v.name,
value: v.id
}
})
}}
/>
);
title: (
<FormattedMessage
id="resource.algorithm_model.table.list.categoryFkId"
defaultMessage="$$$"
/>
),
dataIndex: 'categoryFkId',
hideInSearch: false,
render: (text, record) => {
if (category_fk_id_column_open) {
return (
<a
onClick={() => {
handle_category_fk_id(record.categoryFkId);
}}
>
{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}
</a>
);
} else {
return (
<a
onClick={() => {
handle_category_fk_id(record.categoryFkId);
}}
>
{record.categoryFkId}
</a>
);
}
},
renderFormItem: () => {
return (
// value 和 onchange 会通过 form 自动注入。
<ProFormSelect
width="md"
labelCol={{span: 4}}
wrapperCol={{span: 22}}
placeholder={`${intl.formatMessage({
id: 'common.please_select',
defaultMessage: '$$$',
})}`}
required={false}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postModelCategoryGetModelCategoryFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return {
label: v.name,
value: v.id,
};
});
}}
/>
);
},
},
{
title: (<FormattedMessage
id="resource.algorithm_model.table.list.defaultVersionFkId"
defaultMessage="$$$"/>),
dataIndex: "defaultVersionFkId",
hideInSearch: true,
title: (
<FormattedMessage
id="resource.algorithm_model.table.list.defaultVersionFkId"
defaultMessage="$$$"
/>
),
dataIndex: 'defaultVersionFkId',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.algorithm_model.table.list.remark"
defaultMessage="$$$"/>),
dataIndex: "remark",
hideInSearch: true,
title: (
<FormattedMessage id="resource.algorithm_model.table.list.remark" defaultMessage="$$$" />
),
dataIndex: 'remark',
hideInSearch: true,
},
{
title: (<FormattedMessage
id="resource.algorithm_model.table.list.createTime"
defaultMessage="$$$"/>),
dataIndex: "createTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
title: (
<FormattedMessage
id="resource.algorithm_model.table.list.createTime"
defaultMessage="$$$"
/>
),
dataIndex: 'createTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
title: (<FormattedMessage
id="resource.algorithm_model.table.list.updateTime"
defaultMessage="$$$"/>),
dataIndex: "updateTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
title: (
<FormattedMessage
id="resource.algorithm_model.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>
</Access>
],
},];
return (
<PageContainer>
<ProTable<API.AlgorithmModel>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120,
}}
onDataSourceChange={(data)=>{
let CategoryFkIdIds: any = data.map((v)=>{
return v.categoryFkId
})
setCategoryFkIdIds(CategoryFkIdIds)
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
{
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);
}}
columnsState={{
persistenceKey: 'algorithm_model_list',
persistenceType: 'localStorage'
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a>
{/* update1101 */}
<Popconfirm
placement="topLeft"
title={'提示'}
description={`确认要删除么？`}
okText="确定"
cancelText="取消"
onConfirm={() => {
handleDestroy(record).then(() => {});
}}
toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<Button
>
<Button key="destroy" type="text" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
</Access>,
],
},
];
return (
<PageContainer>
<ProTable<API.AlgorithmModel>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120
}}
onDataSourceChange={(data) => {
let CategoryFkIdIds: any = data.map((v) => {
return v.categoryFkId;
});
setCategoryFkIdIds(CategoryFkIdIds);
}}
pagination={{
showSizeChanger: true,
pageSize: currentPageSize,
onChange: (page, pageSize) => setCurrentPageSize(pageSize)
}}
columnsState={{
persistenceKey: 'algorithm_model_list',
persistenceType: 'localStorage',
}}
toolBarRender={() => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
type="primary"
key="category_fk_id_show"
onClick={() => {
handle_category_fk_id_column_open()
handle_category_fk_id_column_open();
}}
>
{
category_fk_id_column_open ? (<FormattedMessage
id="common.hide"
defaultMessage="$$$"/>) : (<FormattedMessage
id="common.show"
defaultMessage="$$$"/>)
}
{category_fk_id_column_open ? (
<FormattedMessage id="common.hide" defaultMessage="$$$" />
) : (
<FormattedMessage id="common.show" defaultMessage="$$$" />
)}
<FormattedMessage
id="resource.algorithm_model.table.list.categoryFkId"
defaultMessage="$$$"/>
defaultMessage="$$$"
/>
</Button>
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>
]}
request={async (params = {}, sort) => {
const {current, ...rest} = params
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>,
]}
request={async (params = {}, sort) => {
const { current, ...rest } = params;
const reqParams = {
page: current,
desc: false,
orderKey: "",
orderKey: '',
...rest,
}
};
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0]
let sort_select = sort[reqParams.orderKey]
reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend';
}
let resp = await postAlgorithmModelGetAlgorithmModelList({...reqParams})
let resp = await postAlgorithmModelGetAlgorithmModelList({ ...reqParams });
return {
data: resp.data.list.map((v: API.AlgorithmModel)=>{
return {...v, key: v.id}
data: resp.data.list.map((v: API.AlgorithmModel) => {
return { ...v, key: v.id };
}),
success: resp.success,
total: resp.data.total,
current: resp.data.page,
pageSize: resp.data.pageSize
pageSize: resp.data.pageSize,
};
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{/* TODO 不明显需要重新设计 底部已选项操作固定栏 */}
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
deleteAlgorithmModelDeleteAlgorithmModelByIds({ids: selectedRowsState.map((v: API.AlgorithmModel)=>{return v.id as number})}).then(()=>{
deleteAlgorithmModelDeleteAlgorithmModelByIds({
ids: selectedRowsState.map((v: API.AlgorithmModel) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
})
});
}}
>
<FormattedMessage
@ -352,36 +427,36 @@ return (
defaultMessage="Batch deletion"
/>
</Button>
</FooterToolbar>
)}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
</FooterToolbar>
)}
{/* 列表关联操作项组件 */}
<CreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
<ModelCategoryColumnDrawer
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
<ModelCategoryColumnDrawer
handleDrawer={handle_category_fk_id}
isShowDetail={category_fk_id_open}
columns={ModelCategoryColumns}
currentRow={category_fk_id}
/>
</PageContainer>
);
</PageContainer>
);
};
export default AlgorithmModelList;
export default AlgorithmModelList;

6
src/pages/Resource/ModelCategoryList/components/ColumnDrawer.tsx
Unescape Escape View File

@ -19,10 +19,14 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
onClose={() => {
props.handleDrawer();
}}
closable={false}
closable={true}
>
{props.currentRow?.id && (
<ProDescriptions<API.ModelCategory>
style={{
paddingLeft: 10,
paddingRight: 10
}}
column={2}
title={props.currentRow?.id}
request={async () => ({

838
src/pages/Resource/ModelVersionList/index.tsx
Unescape Escape View File

@ -1,130 +1,167 @@
import {AlgorithmModelColumns} from '@/pages/Resource/AlgorithmModelList/components/Columns';
import { ColumnDrawer as AlgorithmModelColumnDrawer } from '@/pages/Resource/AlgorithmModelList/components/ColumnDrawer';
import { AlgorithmModelColumns } from '@/pages/Resource/AlgorithmModelList/components/Columns';
import {
postAlgorithmModelGetAlgorithmModelById,
postAlgorithmModelGetAlgorithmModelFkSelect,
postAlgorithmModelGetAlgorithmModelNames,
putAlgorithmModelUpdateAlgorithmModel
postAlgorithmModelGetAlgorithmModelById,
postAlgorithmModelGetAlgorithmModelFkSelect,
postAlgorithmModelGetAlgorithmModelNames,
putAlgorithmModelUpdateAlgorithmModel,
} from '@/services/resource/AlgorithmModel';
import {ColumnDrawer as AlgorithmModelColumnDrawer} from "@/pages/Resource/AlgorithmModelList/components/ColumnDrawer";
import {deleteModelVersionDeleteModelVersion, postModelVersionGetModelVersionList, deleteModelVersionDeleteModelVersionByIds} from '@/services/resource/ModelVersion';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProTable,
ProFormSelect,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message, Popconfirm} from 'antd';
deleteModelVersionDeleteModelVersion,
deleteModelVersionDeleteModelVersionByIds,
postModelVersionGetModelVersionList,
} from '@/services/resource/ModelVersion';
import { DownOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { FooterToolbar, PageContainer, ProFormSelect, ProTable } from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, Popconfirm, message , Dropdown} from 'antd';
// import { MenuProps } from 'rc-menu';
import React, { useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer';
import MyCreateForm from './components/MyCreateForm';
import UpdateForm from './components/UpdateForm';
import MyCreateForm from "./components/MyCreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const ModelVersionList: React.FC = () => {
/**
* @en-US Pop-up window of new window
* @zh-CN 新建窗口的弹窗
* */
const [publishModalOpen, setPublishModalOpen] = useState<boolean>(false);
/**
* @en-US Pop-up window of new window
* @zh-CN 新建窗口的弹窗
* */
const [publishModalOpen, setPublishModalOpen] = useState<boolean>(false);
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN 分布更新窗口的弹窗
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN 国际化配置
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.ModelVersion>();
const [selectedRowsState, setSelectedRows] = useState<API.ModelVersion[]>([]);
const [model_fk_id_open, set_model_fk_id_open] = useState(false)
const [model_fk_id, set_model_fk_id] = useState<API.AlgorithmModel>()
const [model_fk_id_column_open, set_model_fk_id_column_open] = useState(false)
const [modelFkIdIds, setModelFkIdIds] = useState([])
const [modelFkIdMap, setModelFkIdMap] = useState<{ [key: number]: string }>({})
const handle_model_fk_id = (id: any)=>{
if (model_fk_id_open) {
set_model_fk_id(undefined);
set_model_fk_id_open(false)
}else {
postAlgorithmModelGetAlgorithmModelById({id: id}).then((resp)=>{
set_model_fk_id(resp.data.algorithmModel)
set_model_fk_id_open(true)
})
}
}
const handle_model_fk_id_column_open = ()=>{
if (model_fk_id_column_open) {
set_model_fk_id_column_open(false)
}else {
postAlgorithmModelGetAlgorithmModelNames({ids: modelFkIdIds}).then((resp)=>{
let a: any = {}
resp.data.list.forEach((v: any)=>{
if (v.id) {
a[v.id] = v.name
}
})
setModelFkIdMap(a)
})
set_model_fk_id_column_open(true)
}
}
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/**
* @en-US The pop-up window of the distribution update window
* @zh-CN 分布更新窗口的弹窗
* */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false);
/**
* @en-US International configuration
* @zh-CN 国际化配置
* */
const access = useAccess();
const intl = useIntl();
const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.ModelVersion>();
const [selectedRowsState, setSelectedRows] = useState<API.ModelVersion[]>([]);
const [model_fk_id_open, set_model_fk_id_open] = useState(false);
const [model_fk_id, set_model_fk_id] = useState<API.AlgorithmModel>();
const [model_fk_id_column_open, set_model_fk_id_column_open] = useState(false);
const [modelFkIdIds, setModelFkIdIds] = useState([]);
const [modelFkIdMap, setModelFkIdMap] = useState<{ [key: number]: string }>({});
const handle_model_fk_id = (id: any) => {
if (model_fk_id_open) {
set_model_fk_id(undefined);
set_model_fk_id_open(false);
} else {
postAlgorithmModelGetAlgorithmModelById({ id: id }).then((resp) => {
set_model_fk_id(resp.data.algorithmModel);
set_model_fk_id_open(true);
});
}
};
const handle_model_fk_id_column_open = () => {
if (model_fk_id_column_open) {
set_model_fk_id_column_open(false);
} else {
postAlgorithmModelGetAlgorithmModelNames({ ids: modelFkIdIds }).then((resp) => {
let a: any = {};
resp.data.list.forEach((v: any) => {
if (v.id) {
a[v.id] = v.name;
}
});
setModelFkIdMap(a);
});
set_model_fk_id_column_open(true);
}
};
const handleUpdateModal = ()=>{
if (updateModalOpen) {
setUpdateModalOpen(false)
setCurrentRow(undefined)
} else {
setUpdateModalOpen(true)
}
}
const handlePublishModal = ()=>{
if (publishModalOpen) {
setPublishModalOpen(false)
setCurrentRow(undefined)
} else {
setPublishModalOpen(true)
}
const handleUpdateModal = () => {
if (updateModalOpen) {
setUpdateModalOpen(false);
setCurrentRow(undefined);
} else {
setUpdateModalOpen(true);
}
const handleCreateModal = ()=>{
if (createModalOpen) {
setCreateModalOpen(false)
setCurrentRow(undefined)
} else {
setCreateModalOpen(true)
}
}
const handleColumnDrawer = ()=>{
if (showDetail) {
setShowDetail(false)
setCurrentRow(undefined)
};
const handlePublishModal = () => {
if (publishModalOpen) {
setPublishModalOpen(false);
setCurrentRow(undefined);
} else {
setPublishModalOpen(true);
}
};
const handleCreateModal = () => {
if (createModalOpen) {
setCreateModalOpen(false);
setCurrentRow(undefined);
} else {
setCreateModalOpen(true);
}
};
const handleColumnDrawer = () => {
if (showDetail) {
setShowDetail(false);
setCurrentRow(undefined);
} else {
setShowDetail(true);
}
};
const handleDestroy = async (selectedRow: API.ModelVersion) => {
deleteModelVersionDeleteModelVersion({ id: selectedRow.id })
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
actionRef.current?.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
};
//TODO 表单的操作按钮集合
type TableActionItemProps = {
renderActions: any[];
};
const TableActionCard: React.FC<TableActionItemProps[]> = (props) => {
const { renderActions } = props;
const maxActionCount = 3;
if (renderActions.length <= maxActionCount) {
return renderActions.map((item) => {
return <>{item}</>;
});
}
const prevActions: any[] = [];
const moreActions: { key: string; label: any; }[] = [];
renderActions.map((item, index) => {
if (index < maxActionCount - 1) {
prevActions.push(item);
} else {
setShowDetail(true)
}
moreActions.push({
key: index+"",
label: item
});
}
const handleDestroy = async (selectedRow: API.ModelVersion) => {
deleteModelVersionDeleteModelVersion({id: selectedRow.id}).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
actionRef.current?.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
};
const columns: ProColumns<API.ModelVersion>[] = [
// eslint-disable-next-line react/jsx-key
});
return (
<>
{prevActions.map((item) => {
return <>{item}</>;
})}
<Dropdown menu={{items: moreActions}}>
<a>更多<DownOutlined/></a>
</Dropdown>
</>
);
};
const columns: ProColumns<API.ModelVersion>[] = [
{
title: (<FormattedMessage
id="resource.model_version.table.list.id"
defaultMessage="id"/>),
dataIndex: "id",
title: <FormattedMessage id="resource.model_version.table.list.id" defaultMessage="id" />,
dataIndex: 'id',
sorter: true,
render: (dom, entity) => {
return (
@ -141,128 +178,148 @@ const columns: ProColumns<API.ModelVersion>[] = [
},
{
title: (<FormattedMessage
id="resource.model_version.table.list.modelFkId"
defaultMessage="$$$"/>),
dataIndex: "modelFkId",
hideInSearch: false,
render: (text, record) => {
if (model_fk_id_column_open) {
return ( <a onClick={()=>{handle_model_fk_id(record.modelFkId)}}>{record?.modelFkId ? modelFkIdMap[record.modelFkId] : undefined}</a>)
} else {
return (<a onClick={()=>{handle_model_fk_id(record.modelFkId)}}>{record.modelFkId}</a>)
}
},
renderFormItem: () => {
return (
// value 和 onchange 会通过 form 自动注入。
<ProFormSelect
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`}
required={false} showSearch debounceTime={1000}
request={async (keyWord)=>{
const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({keyword: keyWord?.keyWords || ''})
return resp.data.list.map((v: any)=>{
return {
label: v.name,
value: v.id
}
})
}}
/>
);
title: (
<FormattedMessage id="resource.model_version.table.list.modelFkId" defaultMessage="$$$" />
),
dataIndex: 'modelFkId',
hideInSearch: false,
render: (text, record) => {
if (model_fk_id_column_open) {
return (
<a
onClick={() => {
handle_model_fk_id(record.modelFkId);
}}
>
{record?.modelFkId ? modelFkIdMap[record.modelFkId] : undefined}
</a>
);
} else {
return (
<a
onClick={() => {
handle_model_fk_id(record.modelFkId);
}}
>
{record.modelFkId}
</a>
);
}
},
renderFormItem: () => {
return (
// value 和 onchange 会通过 form 自动注入。
<ProFormSelect
placeholder={`${intl.formatMessage({
id: 'common.please_select',
defaultMessage: '$$$',
})}`}
required={false}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return {
label: v.name,
value: v.id,
};
});
}}
/>
);
},
},
{
title: (
<FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />
),
dataIndex: 'version',
hideInSearch: true,
},
{
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.path" defaultMessage="$$$" />,
dataIndex: 'path',
hideInSearch: true,
},
{
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.startCode" defaultMessage="$$$" />
),
dataIndex: 'startCode',
hideInSearch: true,
},
{
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.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.updateTime"
defaultMessage="$$$"/>),
dataIndex: "updateTime",
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
},
{
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`}>
{
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`}
>
<TableActionCard
renderActions={[
<a
key="update"
onClick={() => {
@ -271,18 +328,83 @@ const columns: ProColumns<API.ModelVersion>[] = [
}}
>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a>
</a>,
<a
key="destroy"
onClick={() => {
handleDestroy(record).then(()=>{})
}}>
<FormattedMessage
id="pages.searchTable.destroy"
defaultMessage="Destroy"
/>
</a>
<Popconfirm
onClick={() => {
handleDestroy(record).then(() => {});
}}
>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</a>,
// eslint-disable-next-line react/jsx-key
<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>,
// eslint-disable-next-line react/jsx-key
<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>,
]}
></TableActionCard>
{/* <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={()=>{}}
@ -326,121 +448,122 @@ const columns: ProColumns<API.ModelVersion>[] = [
defaultMessage="$$$"
/>
</a>
</Popconfirm>
</Access>
],
},];
return (
<PageContainer>
<ProTable<API.ModelVersion>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120,
}}
onDataSourceChange={(data)=>{
let ModelFkIdIds: any = data.map((v)=>{
return v.modelFkId
})
setModelFkIdIds(ModelFkIdIds)
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
}}
columnsState={{
persistenceKey: 'model_version_list',
persistenceType: 'localStorage'
}}
toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
<Button
</Popconfirm> */}
</Access>,
],
},
];
return (
<PageContainer>
<ProTable<API.ModelVersion>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: '$$$',
})}
options={{ fullScreen: true, setting: true, density: true, reload: true }}
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120,
}}
onDataSourceChange={(data) => {
let ModelFkIdIds: any = data.map((v) => {
return v.modelFkId;
});
setModelFkIdIds(ModelFkIdIds);
}}
pagination={{
showSizeChanger: true,
pageSize: 10,
}}
columnsState={{
persistenceKey: 'model_version_list',
persistenceType: 'localStorage',
}}
toolBarRender={() => [
<Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button
type="primary"
key="model_fk_id_show"
onClick={() => {
handle_model_fk_id_column_open()
handle_model_fk_id_column_open();
}}
>
{
model_fk_id_column_open ? (<FormattedMessage
id="common.hide"
defaultMessage="$$$"/>) : (<FormattedMessage
id="common.show"
defaultMessage="$$$"/>)
}
{model_fk_id_column_open ? (
<FormattedMessage id="common.hide" defaultMessage="$$$" />
) : (
<FormattedMessage id="common.show" defaultMessage="$$$" />
)}
<FormattedMessage
id="resource.model_version.table.list.modelFkId"
defaultMessage="$$$"/>
defaultMessage="$$$"
/>
</Button>
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>
]}
request={async (params = {}, sort) => {
const {current, ...rest} = params
<Button
type="primary"
key="primary"
onClick={() => {
setCreateModalOpen(true);
}}
>
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button>
</Access>,
]}
request={async (params = {}, sort) => {
const { current, ...rest } = params;
const reqParams = {
page: current,
desc: false,
orderKey: "",
orderKey: '',
...rest,
}
};
if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0]
let sort_select = sort[reqParams.orderKey]
reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend';
}
let resp = await postModelVersionGetModelVersionList({...reqParams})
let resp = await postModelVersionGetModelVersionList({ ...reqParams });
return {
data: resp.data.list.map((v: API.ModelVersion)=>{
return {...v, key: v.id}
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
pageSize: resp.data.pageSize,
};
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
}}
columns={columns}
rowSelection={{
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
<div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div>
}
>
<Button
onClick={async () => {
deleteModelVersionDeleteModelVersionByIds({ids: selectedRowsState.map((v: API.ModelVersion)=>{return v.id as number})}).then(()=>{
deleteModelVersionDeleteModelVersionByIds({
ids: selectedRowsState.map((v: API.ModelVersion) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
})
});
}}
>
<FormattedMessage
@ -448,42 +571,41 @@ return (
defaultMessage="Batch deletion"
/>
</Button>
</FooterToolbar>
)}
<MyCreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
{/*<PublishForm*/}
{/* publishModalOpen={publishModalOpen}*/}
{/* handleModal={handlePublishModal}*/}
{/* values={currentRow || {}}*/}
{/* reload={actionRef.current?.reload}*/}
{/*></PublishForm>*/}
</FooterToolbar>
)}
<MyCreateForm
createModalOpen={createModalOpen}
values={currentRow || {}}
handleModal={handleCreateModal}
reload={actionRef.current?.reload}
/>
<UpdateForm
updateModalOpen={updateModalOpen}
values={currentRow || {}}
handleModal={handleUpdateModal}
reload={actionRef.current?.reload}
/>
{/*<PublishForm*/}
{/* publishModalOpen={publishModalOpen}*/}
{/* handleModal={handlePublishModal}*/}
{/* values={currentRow || {}}*/}
{/* reload={actionRef.current?.reload}*/}
{/*></PublishForm>*/}
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
<AlgorithmModelColumnDrawer
<ColumnDrawer
handleDrawer={handleColumnDrawer}
isShowDetail={showDetail}
columns={columns}
currentRow={currentRow}
/>
<AlgorithmModelColumnDrawer
handleDrawer={handle_model_fk_id}
isShowDetail={model_fk_id_open}
columns={AlgorithmModelColumns}
currentRow={model_fk_id}
/>
</PageContainer>
);
</PageContainer>
);
};
export default ModelVersionList;
export default ModelVersionList;

Write Preview
Loading…
Cancel
Save