Yaxin
/
General-AI-Platform-Web
27
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 # production
/dist /dist
/taskDoc
# misc # misc
.DS_Store .DS_Store
npm-debug.log* npm-debug.log*

31
README.md
Unescape Escape View File

@ -1,3 +1,34 @@
# General-AI-Platform-Web # General-AI-Platform-Web
通用算法平台前端仓库 develop 通用算法平台前端仓库 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 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";
@ -9,7 +17,11 @@ export type ColumnDrawProps = {
currentRow: API.AlgorithmModel | undefined; currentRow: API.AlgorithmModel | undefined;
}; };
/**
* @表格列信息展示
* @param props
* @returns
*/
const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => { const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
return ( return (
@ -20,6 +32,9 @@ const ColumnDrawer: React.FC<ColumnDrawProps> = (props) => {
props.handleDrawer(); props.handleDrawer();
}} }}
closable={false} closable={false}
extra={
<>123</>
}
> >
{props.currentRow?.id && ( {props.currentRow?.id && (
<ProDescriptions<API.AlgorithmModel> <ProDescriptions<API.AlgorithmModel>

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

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

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

@ -1,21 +1,30 @@
import {ModelCategoryColumns} from '@/pages/Resource/ModelCategoryList/components/Columns'; import { ColumnDrawer as ModelCategoryColumnDrawer } from '@/pages/Resource/ModelCategoryList/components/ColumnDrawer';
import {postModelCategoryGetModelCategoryById, postModelCategoryGetModelCategoryFkSelect, postModelCategoryGetModelCategoryNames} from '@/services/resource/ModelCategory'; import { ModelCategoryColumns } from '@/pages/Resource/ModelCategoryList/components/Columns';
import {ColumnDrawer as ModelCategoryColumnDrawer} from "@/pages/Resource/ModelCategoryList/components/ColumnDrawer"; import {
import {deleteAlgorithmModelDeleteAlgorithmModel, postAlgorithmModelGetAlgorithmModelList, deleteAlgorithmModelDeleteAlgorithmModelByIds} from '@/services/resource/AlgorithmModel'; deleteAlgorithmModelDeleteAlgorithmModel,
deleteAlgorithmModelDeleteAlgorithmModelByIds,
postAlgorithmModelGetAlgorithmModelList,
} from '@/services/resource/AlgorithmModel';
import {
postModelCategoryGetModelCategoryById,
postModelCategoryGetModelCategoryFkSelect,
postModelCategoryGetModelCategoryNames,
} from '@/services/resource/ModelCategory';
import { PlusOutlined } from '@ant-design/icons'; 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 { import {
FooterToolbar, FooterToolbar,
PageContainer, PageContainer,
ProTable,
ProFormSelect, ProFormSelect,
ProFormText,
ProTable,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max'; import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import {Button, message} from 'antd'; import { Button, Popconfirm, message } from 'antd';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer';
import CreateForm from './components/CreateForm';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
import CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const AlgorithmModelList: React.FC = () => { const AlgorithmModelList: React.FC = () => {
/** /**
* @en-US Pop-up window of new window * @en-US Pop-up window of new window
@ -35,81 +44,82 @@ const AlgorithmModelList: React.FC = () => {
const access = useAccess(); const access = useAccess();
const intl = useIntl(); const intl = useIntl();
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
// TODO 动态设置每页数量
const [currentPageSize, setCurrentPageSize] = useState<number>(10)
const [currentRow, setCurrentRow] = useState<API.AlgorithmModel>(); const [currentRow, setCurrentRow] = useState<API.AlgorithmModel>();
const [selectedRowsState, setSelectedRows] = 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_open, set_category_fk_id_open] = useState(false);
const [category_fk_id, set_category_fk_id] = useState<API.ModelCategory>() 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 [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false);
const [categoryFkIdIds, setCategoryFkIdIds] = useState([]) const [categoryFkIdIds, setCategoryFkIdIds] = useState([]);
const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({}) const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({});
const handle_category_fk_id = (id: any)=>{ const handle_category_fk_id = (id: any) => {
if (category_fk_id_open) { if (category_fk_id_open) {
set_category_fk_id(undefined); set_category_fk_id(undefined);
set_category_fk_id_open(false) set_category_fk_id_open(false);
}else { } else {
postModelCategoryGetModelCategoryById({id: id}).then((resp)=>{ postModelCategoryGetModelCategoryById({ id: id }).then((resp) => {
set_category_fk_id(resp.data.modelCategory) set_category_fk_id(resp.data.modelCategory);
set_category_fk_id_open(true) set_category_fk_id_open(true);
}) });
}
} }
const handle_category_fk_id_column_open = ()=>{ };
const handle_category_fk_id_column_open = () => {
if (category_fk_id_column_open) { if (category_fk_id_column_open) {
set_category_fk_id_column_open(false) set_category_fk_id_column_open(false);
}else { } else {
postModelCategoryGetModelCategoryNames({ids: categoryFkIdIds}).then((resp)=>{ postModelCategoryGetModelCategoryNames({ ids: categoryFkIdIds }).then((resp) => {
let a: any = {} let a: any = {};
resp.data.list.forEach((v: any)=>{ resp.data.list.forEach((v: any) => {
if (v.id) { if (v.id) {
a[v.id] = v.name a[v.id] = v.name;
}
})
setCategoryFkIdMap(a)
})
set_category_fk_id_column_open(true)
} }
});
setCategoryFkIdMap(a);
});
set_category_fk_id_column_open(true);
} }
};
const handleUpdateModal = ()=>{ const handleUpdateModal = () => {
if (updateModalOpen) { if (updateModalOpen) {
setUpdateModalOpen(false) setUpdateModalOpen(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setUpdateModalOpen(true) setUpdateModalOpen(true);
}
} }
const handleCreateModal = ()=>{ };
const handleCreateModal = () => {
if (createModalOpen) { if (createModalOpen) {
setCreateModalOpen(false) setCreateModalOpen(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setCreateModalOpen(true) setCreateModalOpen(true);
}
} }
const handleColumnDrawer = ()=>{ };
const handleColumnDrawer = () => {
if (showDetail) { if (showDetail) {
setShowDetail(false) setShowDetail(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setShowDetail(true) setShowDetail(true);
}
} }
};
const handleDestroy = async (selectedRow: API.AlgorithmModel) => { const handleDestroy = async (selectedRow: API.AlgorithmModel) => {
deleteAlgorithmModelDeleteAlgorithmModel({id: selectedRow.id}).then(()=>{ deleteAlgorithmModelDeleteAlgorithmModel({ id: selectedRow.id })
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) .then(() => {
actionRef.current?.reload() message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
}).catch(()=>{ actionRef.current?.reload();
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
}) })
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
}; };
const columns: ProColumns<API.AlgorithmModel>[] = [ const columns: ProColumns<API.AlgorithmModel>[] = [
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.algorithm_model.table.list.id" defaultMessage="id" />,
id="resource.algorithm_model.table.list.id" dataIndex: 'id',
defaultMessage="id"/>),
dataIndex: "id",
sorter: true, sorter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
@ -123,95 +133,152 @@ const columns: ProColumns<API.AlgorithmModel>[] = [
</a> </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 title: (
id="resource.algorithm_model.table.list.name" <FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "name", dataIndex: 'name',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
<FormattedMessage
id="resource.algorithm_model.table.list.categoryFkId" id="resource.algorithm_model.table.list.categoryFkId"
defaultMessage="$$$"/>), defaultMessage="$$$"
dataIndex: "categoryFkId", />
),
dataIndex: 'categoryFkId',
hideInSearch: false, hideInSearch: false,
render: (text, record) => { render: (text, record) => {
if (category_fk_id_column_open) { if (category_fk_id_column_open) {
return ( <a onClick={()=>{handle_category_fk_id(record.categoryFkId)}}>{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}</a>) return (
<a
onClick={() => {
handle_category_fk_id(record.categoryFkId);
}}
>
{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}
</a>
);
} else { } else {
return (<a onClick={()=>{handle_category_fk_id(record.categoryFkId)}}>{record.categoryFkId}</a>) return (
<a
onClick={() => {
handle_category_fk_id(record.categoryFkId);
}}
>
{record.categoryFkId}
</a>
);
} }
}, },
renderFormItem: () => { renderFormItem: () => {
return ( return (
// value 和 onchange 会通过 form 自动注入。 // value 和 onchange 会通过 form 自动注入。
<ProFormSelect <ProFormSelect
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`} width="md"
required={false} showSearch debounceTime={1000} labelCol={{span: 4}}
request={async (keyWord)=>{ wrapperCol={{span: 22}}
const resp = await postModelCategoryGetModelCategoryFkSelect({keyword: keyWord?.keyWords || ''}) placeholder={`${intl.formatMessage({
return resp.data.list.map((v: any)=>{ 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 { return {
label: v.name, label: v.name,
value: v.id value: v.id,
} };
}) });
}} }}
/> />
); );
}, },
}, },
{ {
title: (<FormattedMessage title: (
<FormattedMessage
id="resource.algorithm_model.table.list.defaultVersionFkId" id="resource.algorithm_model.table.list.defaultVersionFkId"
defaultMessage="$$$"/>), defaultMessage="$$$"
dataIndex: "defaultVersionFkId", />
),
dataIndex: 'defaultVersionFkId',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.algorithm_model.table.list.remark" <FormattedMessage id="resource.algorithm_model.table.list.remark" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "remark", dataIndex: 'remark',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
<FormattedMessage
id="resource.algorithm_model.table.list.createTime" id="resource.algorithm_model.table.list.createTime"
defaultMessage="$$$"/>), defaultMessage="$$$"
dataIndex: "createTime", />
),
dataIndex: 'createTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', valueType: 'dateTime',
}, },
{ {
title: (<FormattedMessage title: (
<FormattedMessage
id="resource.algorithm_model.table.list.updateTime" id="resource.algorithm_model.table.list.updateTime"
defaultMessage="$$$"/>), defaultMessage="$$$"
dataIndex: "updateTime", />
),
dataIndex: 'updateTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', valueType: 'dateTime',
}, },
{ {
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />, title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option', dataIndex: 'option',
valueType: 'option', valueType: 'option',
fixed:'right', fixed: 'right',
render: (_, record) => [ render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<a <a
key="update" key="update"
onClick={() => { onClick={() => {
@ -221,20 +288,26 @@ const columns: ProColumns<API.AlgorithmModel>[] = [
> >
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a> </a>
<a {/* update1101 */}
key="destroy" <Popconfirm
onClick={() => { placement="topLeft"
handleDestroy(record).then(()=>{}) title={'提示'}
}}> description={`确认要删除么？`}
<FormattedMessage okText="确定"
id="pages.searchTable.destroy" cancelText="取消"
defaultMessage="Destroy" onConfirm={() => {
/> handleDestroy(record).then(() => {});
</a> }}
</Access> >
<Button key="destroy" type="text" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
</Button>
</Popconfirm>
</Access>,
], ],
},]; },
return ( ];
return (
<PageContainer> <PageContainer>
<ProTable<API.AlgorithmModel> <ProTable<API.AlgorithmModel>
headerTitle={intl.formatMessage({ headerTitle={intl.formatMessage({
@ -245,46 +318,44 @@ return (
actionRef={actionRef} actionRef={actionRef}
rowKey="key" rowKey="key"
search={{ search={{
labelWidth: 120, labelWidth: 120
}} }}
onDataSourceChange={(data)=>{ onDataSourceChange={(data) => {
let CategoryFkIdIds: any = data.map((v) => {
let CategoryFkIdIds: any = data.map((v)=>{ return v.categoryFkId;
return v.categoryFkId });
}) setCategoryFkIdIds(CategoryFkIdIds);
setCategoryFkIdIds(CategoryFkIdIds)
}} }}
pagination={{ pagination={{
showSizeChanger: true, showSizeChanger: true,
pageSize: 10, pageSize: currentPageSize,
onChange: (page, pageSize) => setCurrentPageSize(pageSize)
}} }}
columnsState={{ columnsState={{
persistenceKey: 'algorithm_model_list', persistenceKey: 'algorithm_model_list',
persistenceType: 'localStorage' persistenceType: 'localStorage',
}} }}
toolBarRender={() => [ toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button <Button
type="primary" type="primary"
key="category_fk_id_show" key="category_fk_id_show"
onClick={() => { onClick={() => {
handle_category_fk_id_column_open() handle_category_fk_id_column_open();
}} }}
> >
{ {category_fk_id_column_open ? (
category_fk_id_column_open ? (<FormattedMessage <FormattedMessage id="common.hide" defaultMessage="$$$" />
id="common.hide" ) : (
defaultMessage="$$$"/>) : (<FormattedMessage <FormattedMessage id="common.show" defaultMessage="$$$" />
id="common.show" )}
defaultMessage="$$$"/>)
}
<FormattedMessage <FormattedMessage
id="resource.algorithm_model.table.list.categoryFkId" id="resource.algorithm_model.table.list.categoryFkId"
defaultMessage="$$$"/> defaultMessage="$$$"
/>
</Button> </Button>
<Button <Button
@ -296,32 +367,31 @@ return (
> >
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" /> <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button> </Button>
</Access> </Access>,
]} ]}
request={async (params = {}, sort) => { request={async (params = {}, sort) => {
const {current, ...rest} = params const { current, ...rest } = params;
const reqParams = { const reqParams = {
page: current, page: current,
desc: false, desc: false,
orderKey: "", orderKey: '',
...rest, ...rest,
} };
if (sort && Object.keys(sort).length) { if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0] reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey] let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend'; reqParams.desc = sort_select === 'descend';
} }
let resp = await postAlgorithmModelGetAlgorithmModelList({...reqParams}) let resp = await postAlgorithmModelGetAlgorithmModelList({ ...reqParams });
return { return {
data: resp.data.list.map((v: API.AlgorithmModel)=>{ data: resp.data.list.map((v: API.AlgorithmModel) => {
return {...v, key: v.id} return { ...v, key: v.id };
}), }),
success: resp.success, success: resp.success,
total: resp.data.total, total: resp.data.total,
current: resp.data.page, current: resp.data.page,
pageSize: resp.data.pageSize pageSize: resp.data.pageSize,
}; };
}} }}
columns={columns} columns={columns}
rowSelection={{ rowSelection={{
@ -330,6 +400,7 @@ return (
}, },
}} }}
/> />
{/* TODO 不明显需要重新设计 底部已选项操作固定栏 */}
{selectedRowsState?.length > 0 && ( {selectedRowsState?.length > 0 && (
<FooterToolbar <FooterToolbar
extra={ extra={
@ -342,9 +413,13 @@ return (
> >
<Button <Button
onClick={async () => { 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?.(); actionRef.current?.reloadAndRest?.();
}) });
}} }}
> >
<FormattedMessage <FormattedMessage
@ -354,6 +429,7 @@ return (
</Button> </Button>
</FooterToolbar> </FooterToolbar>
)} )}
{/* 列表关联操作项组件 */}
<CreateForm <CreateForm
createModalOpen={createModalOpen} createModalOpen={createModalOpen}
values={currentRow || {}} values={currentRow || {}}
@ -379,9 +455,8 @@ return (
columns={ModelCategoryColumns} columns={ModelCategoryColumns}
currentRow={category_fk_id} 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={() => { onClose={() => {
props.handleDrawer(); props.handleDrawer();
}} }}
closable={false} closable={true}
> >
{props.currentRow?.id && ( {props.currentRow?.id && (
<ProDescriptions<API.ModelCategory> <ProDescriptions<API.ModelCategory>
style={{
paddingLeft: 10,
paddingRight: 10
}}
column={2} column={2}
title={props.currentRow?.id} title={props.currentRow?.id}
request={async () => ({ request={async () => ({

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

@ -1,26 +1,26 @@
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 { import {
postAlgorithmModelGetAlgorithmModelById, postAlgorithmModelGetAlgorithmModelById,
postAlgorithmModelGetAlgorithmModelFkSelect, postAlgorithmModelGetAlgorithmModelFkSelect,
postAlgorithmModelGetAlgorithmModelNames, postAlgorithmModelGetAlgorithmModelNames,
putAlgorithmModelUpdateAlgorithmModel putAlgorithmModelUpdateAlgorithmModel,
} from '@/services/resource/AlgorithmModel'; } 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 { import {
FooterToolbar, deleteModelVersionDeleteModelVersion,
PageContainer, deleteModelVersionDeleteModelVersionByIds,
ProTable, postModelVersionGetModelVersionList,
ProFormSelect, } from '@/services/resource/ModelVersion';
} from '@ant-design/pro-components'; import { DownOutlined, PlusOutlined } from '@ant-design/icons';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max'; import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {Button, message, Popconfirm} from 'antd'; 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 React, { useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer';
import MyCreateForm from './components/MyCreateForm';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
import MyCreateForm from "./components/MyCreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const ModelVersionList: React.FC = () => { const ModelVersionList: React.FC = () => {
/** /**
* @en-US Pop-up window of new window * @en-US Pop-up window of new window
@ -44,87 +44,124 @@ const ModelVersionList: React.FC = () => {
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.ModelVersion>(); const [currentRow, setCurrentRow] = useState<API.ModelVersion>();
const [selectedRowsState, setSelectedRows] = 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_open, set_model_fk_id_open] = useState(false);
const [model_fk_id, set_model_fk_id] = useState<API.AlgorithmModel>() 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 [model_fk_id_column_open, set_model_fk_id_column_open] = useState(false);
const [modelFkIdIds, setModelFkIdIds] = useState([]) const [modelFkIdIds, setModelFkIdIds] = useState([]);
const [modelFkIdMap, setModelFkIdMap] = useState<{ [key: number]: string }>({}) const [modelFkIdMap, setModelFkIdMap] = useState<{ [key: number]: string }>({});
const handle_model_fk_id = (id: any)=>{ const handle_model_fk_id = (id: any) => {
if (model_fk_id_open) { if (model_fk_id_open) {
set_model_fk_id(undefined); set_model_fk_id(undefined);
set_model_fk_id_open(false) set_model_fk_id_open(false);
}else { } else {
postAlgorithmModelGetAlgorithmModelById({id: id}).then((resp)=>{ postAlgorithmModelGetAlgorithmModelById({ id: id }).then((resp) => {
set_model_fk_id(resp.data.algorithmModel) set_model_fk_id(resp.data.algorithmModel);
set_model_fk_id_open(true) set_model_fk_id_open(true);
}) });
}
} }
const handle_model_fk_id_column_open = ()=>{ };
const handle_model_fk_id_column_open = () => {
if (model_fk_id_column_open) { if (model_fk_id_column_open) {
set_model_fk_id_column_open(false) set_model_fk_id_column_open(false);
}else { } else {
postAlgorithmModelGetAlgorithmModelNames({ids: modelFkIdIds}).then((resp)=>{ postAlgorithmModelGetAlgorithmModelNames({ ids: modelFkIdIds }).then((resp) => {
let a: any = {} let a: any = {};
resp.data.list.forEach((v: any)=>{ resp.data.list.forEach((v: any) => {
if (v.id) { if (v.id) {
a[v.id] = v.name a[v.id] = v.name;
}
})
setModelFkIdMap(a)
})
set_model_fk_id_column_open(true)
} }
});
setModelFkIdMap(a);
});
set_model_fk_id_column_open(true);
} }
};
const handleUpdateModal = ()=>{ const handleUpdateModal = () => {
if (updateModalOpen) { if (updateModalOpen) {
setUpdateModalOpen(false) setUpdateModalOpen(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setUpdateModalOpen(true) setUpdateModalOpen(true);
}
} }
const handlePublishModal = ()=>{ };
const handlePublishModal = () => {
if (publishModalOpen) { if (publishModalOpen) {
setPublishModalOpen(false) setPublishModalOpen(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setPublishModalOpen(true) setPublishModalOpen(true);
}
} }
const handleCreateModal = ()=>{ };
const handleCreateModal = () => {
if (createModalOpen) { if (createModalOpen) {
setCreateModalOpen(false) setCreateModalOpen(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setCreateModalOpen(true) setCreateModalOpen(true);
}
} }
const handleColumnDrawer = ()=>{ };
const handleColumnDrawer = () => {
if (showDetail) { if (showDetail) {
setShowDetail(false) setShowDetail(false);
setCurrentRow(undefined) setCurrentRow(undefined);
} else { } else {
setShowDetail(true) setShowDetail(true);
}
} }
};
const handleDestroy = async (selectedRow: API.ModelVersion) => { const handleDestroy = async (selectedRow: API.ModelVersion) => {
deleteModelVersionDeleteModelVersion({id: selectedRow.id}).then(()=>{ deleteModelVersionDeleteModelVersion({ id: selectedRow.id })
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) .then(() => {
actionRef.current?.reload() message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
}).catch(()=>{ actionRef.current?.reload();
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
}) })
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
};
//TODO 表单的操作按钮集合
type TableActionItemProps = {
renderActions: any[];
}; };
const columns: ProColumns<API.ModelVersion>[] = [ 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 {
moreActions.push({
key: index+"",
label: item
});
}
// 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 title: <FormattedMessage id="resource.model_version.table.list.id" defaultMessage="id" />,
id="resource.model_version.table.list.id" dataIndex: 'id',
defaultMessage="id"/>),
dataIndex: "id",
sorter: true, sorter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
@ -141,89 +178,106 @@ const columns: ProColumns<API.ModelVersion>[] = [
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_version.table.list.modelFkId" <FormattedMessage id="resource.model_version.table.list.modelFkId" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "modelFkId", dataIndex: 'modelFkId',
hideInSearch: false, hideInSearch: false,
render: (text, record) => { render: (text, record) => {
if (model_fk_id_column_open) { if (model_fk_id_column_open) {
return ( <a onClick={()=>{handle_model_fk_id(record.modelFkId)}}>{record?.modelFkId ? modelFkIdMap[record.modelFkId] : undefined}</a>) return (
<a
onClick={() => {
handle_model_fk_id(record.modelFkId);
}}
>
{record?.modelFkId ? modelFkIdMap[record.modelFkId] : undefined}
</a>
);
} else { } else {
return (<a onClick={()=>{handle_model_fk_id(record.modelFkId)}}>{record.modelFkId}</a>) return (
<a
onClick={() => {
handle_model_fk_id(record.modelFkId);
}}
>
{record.modelFkId}
</a>
);
} }
}, },
renderFormItem: () => { renderFormItem: () => {
return ( return (
// value 和 onchange 会通过 form 自动注入。 // value 和 onchange 会通过 form 自动注入。
<ProFormSelect <ProFormSelect
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`} placeholder={`${intl.formatMessage({
required={false} showSearch debounceTime={1000} id: 'common.please_select',
request={async (keyWord)=>{ defaultMessage: '$$$',
const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({keyword: keyWord?.keyWords || ''}) })}`}
return resp.data.list.map((v: any)=>{ required={false}
showSearch
debounceTime={1000}
request={async (keyWord) => {
const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({
keyword: keyWord?.keyWords || '',
});
return resp.data.list.map((v: any) => {
return { return {
label: v.name, label: v.name,
value: v.id value: v.id,
} };
}) });
}} }}
/> />
); );
}, },
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_version.table.list.version" <FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "version", dataIndex: 'version',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: <FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />,
id="resource.model_version.table.list.path" dataIndex: 'path',
defaultMessage="$$$"/>),
dataIndex: "path",
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_version.table.list.startCode" <FormattedMessage id="resource.model_version.table.list.startCode" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "startCode", dataIndex: 'startCode',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_version.table.list.isEnable" <FormattedMessage id="resource.model_version.table.list.isEnable" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "isEnable", dataIndex: 'isEnable',
filters: true, onFilter: true, filters: true,
onFilter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'switch', valueType: 'switch',
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_version.table.list.remark" <FormattedMessage id="resource.model_version.table.list.remark" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "remark", dataIndex: 'remark',
hideInSearch: true, hideInSearch: true,
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_version.table.list.status" <FormattedMessage id="resource.model_version.table.list.status" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "status", dataIndex: 'status',
hideInSearch: true, hideInSearch: true,
valueEnum: { valueEnum: {
1: { text: '已创建', status: 'Default' }, 1: { text: '已创建', status: 'Default' },
@ -235,34 +289,37 @@ const columns: ProColumns<API.ModelVersion>[] = [
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_version.table.list.createTime" <FormattedMessage id="resource.model_version.table.list.createTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "createTime", dataIndex: 'createTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', valueType: 'dateTime',
}, },
{ {
title: (<FormattedMessage title: (
id="resource.model_version.table.list.updateTime" <FormattedMessage id="resource.model_version.table.list.updateTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "updateTime", dataIndex: 'updateTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', valueType: 'dateTime',
}, },
{ {
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />, title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
dataIndex: 'option', dataIndex: 'option',
valueType: 'option', valueType: 'option',
fixed:'right', fixed: 'right',
render: (_, record) => [ render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<TableActionCard
renderActions={[
<a <a
key="update" key="update"
onClick={() => { onClick={() => {
@ -271,18 +328,83 @@ const columns: ProColumns<API.ModelVersion>[] = [
}} }}
> >
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
</a> </a>,
<a <a
key="destroy" key="destroy"
onClick={() => { onClick={() => {
handleDestroy(record).then(()=>{}) handleDestroy(record).then(() => {});
}}> }}
<FormattedMessage >
id="pages.searchTable.destroy" <FormattedMessage id="pages.searchTable.destroy" defaultMessage="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> </a>
</Popconfirm>,
// eslint-disable-next-line react/jsx-key
<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>,
]}
></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="发布模型" title="发布模型"
description="确认发布模型吗?" description="确认发布模型吗?"
onConfirm={()=>{}} onConfirm={()=>{}}
@ -326,11 +448,12 @@ const columns: ProColumns<API.ModelVersion>[] = [
defaultMessage="$$$" defaultMessage="$$$"
/> />
</a> </a>
</Popconfirm> </Popconfirm> */}
</Access> </Access>,
], ],
},]; },
return ( ];
return (
<PageContainer> <PageContainer>
<ProTable<API.ModelVersion> <ProTable<API.ModelVersion>
headerTitle={intl.formatMessage({ headerTitle={intl.formatMessage({
@ -343,14 +466,11 @@ return (
search={{ search={{
labelWidth: 120, labelWidth: 120,
}} }}
onDataSourceChange={(data)=>{ onDataSourceChange={(data) => {
let ModelFkIdIds: any = data.map((v) => {
let ModelFkIdIds: any = data.map((v)=>{ return v.modelFkId;
return v.modelFkId });
}) setModelFkIdIds(ModelFkIdIds);
setModelFkIdIds(ModelFkIdIds)
}} }}
pagination={{ pagination={{
showSizeChanger: true, showSizeChanger: true,
@ -358,29 +478,29 @@ return (
}} }}
columnsState={{ columnsState={{
persistenceKey: 'model_version_list', persistenceKey: 'model_version_list',
persistenceType: 'localStorage' persistenceType: 'localStorage',
}} }}
toolBarRender={() => [ toolBarRender={() => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <Access
accessible={access.canUpdate(history.location.pathname)}
key={`${history.location.pathname}-add`}
>
<Button <Button
type="primary" type="primary"
key="model_fk_id_show" key="model_fk_id_show"
onClick={() => { onClick={() => {
handle_model_fk_id_column_open() handle_model_fk_id_column_open();
}} }}
> >
{ {model_fk_id_column_open ? (
model_fk_id_column_open ? (<FormattedMessage <FormattedMessage id="common.hide" defaultMessage="$$$" />
id="common.hide" ) : (
defaultMessage="$$$"/>) : (<FormattedMessage <FormattedMessage id="common.show" defaultMessage="$$$" />
id="common.show" )}
defaultMessage="$$$"/>)
}
<FormattedMessage <FormattedMessage
id="resource.model_version.table.list.modelFkId" id="resource.model_version.table.list.modelFkId"
defaultMessage="$$$"/> defaultMessage="$$$"
/>
</Button> </Button>
<Button <Button
@ -392,32 +512,31 @@ return (
> >
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" /> <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
</Button> </Button>
</Access> </Access>,
]} ]}
request={async (params = {}, sort) => { request={async (params = {}, sort) => {
const {current, ...rest} = params const { current, ...rest } = params;
const reqParams = { const reqParams = {
page: current, page: current,
desc: false, desc: false,
orderKey: "", orderKey: '',
...rest, ...rest,
} };
if (sort && Object.keys(sort).length) { if (sort && Object.keys(sort).length) {
reqParams.orderKey = Object.keys(sort)[0] reqParams.orderKey = Object.keys(sort)[0];
let sort_select = sort[reqParams.orderKey] let sort_select = sort[reqParams.orderKey];
reqParams.desc = sort_select === 'descend'; reqParams.desc = sort_select === 'descend';
} }
let resp = await postModelVersionGetModelVersionList({...reqParams}) let resp = await postModelVersionGetModelVersionList({ ...reqParams });
return { return {
data: resp.data.list.map((v: API.ModelVersion)=>{ data: resp.data.list.map((v: API.ModelVersion) => {
return {...v, key: v.id} return { ...v, key: v.id };
}), }),
success: resp.success, success: resp.success,
total: resp.data.total, total: resp.data.total,
current: resp.data.page, current: resp.data.page,
pageSize: resp.data.pageSize pageSize: resp.data.pageSize,
}; };
}} }}
columns={columns} columns={columns}
rowSelection={{ rowSelection={{
@ -438,9 +557,13 @@ return (
> >
<Button <Button
onClick={async () => { 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?.(); actionRef.current?.reloadAndRest?.();
}) });
}} }}
> >
<FormattedMessage <FormattedMessage
@ -481,9 +604,8 @@ return (
columns={AlgorithmModelColumns} columns={AlgorithmModelColumns}
currentRow={model_fk_id} currentRow={model_fk_id}
/> />
</PageContainer> </PageContainer>
); );
}; };
export default ModelVersionList; export default ModelVersionList;

Write Preview
Loading…
Cancel
Save