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>

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'; * @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 [form] = Form.useForm<API.AlgorithmModel>();
const intl = useIntl(); return (
const [form] = Form.useForm<API.AlgorithmModel>(); <ModalForm<API.AlgorithmModel>
title={intl.formatMessage({
return ( id: 'common.modal.table.create.title',
<ModalForm<API.AlgorithmModel> defaultMessage: '$$$',
title={intl.formatMessage({ })}
id: 'common.modal.table.create.title', open={props.createModalOpen}
defaultMessage: '$$$', form={form}
})} autoFocusFirstInput
open={props.createModalOpen} modalProps={{
form={form} destroyOnClose: true,
autoFocusFirstInput onCancel: () => props.handleModal(),
modalProps={{ }}
destroyOnClose: true, submitTimeout={2000}
onCancel: () => props.handleModal(), onFinish={async (values) => {
}} postAlgorithmModelCreateAlgorithmModel(values)
submitTimeout={2000} .then(() => {
onFinish={async (values) => { message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
postAlgorithmModelCreateAlgorithmModel(values).then(()=>{ props.reload();
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) })
props.reload() .catch(() => {
}).catch(()=>{ message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
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"
rules={[ name="name"
{ label={
required: true, <FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$" />
message: ( }
<FormattedMessage placeholder={`${intl.formatMessage({
id="resource.algorithm_model.table.rule.required.name" id: 'common.please_input',
defaultMessage="name is required" defaultMessage: '$$$',
/> })}${intl.formatMessage({
), id: 'resource.algorithm_model.table.list.name',
}, defaultMessage: '$$$',
]} })}`}
/> required={true}
<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)=>{ rules={[
const resp = await postModelCategoryGetModelCategoryFkSelect({keyword: keyWord?.keyWords || ''}) {
return resp.data.list.map((v: any)=>{ required: true,
return { message: (
label: v.name, <FormattedMessage
value: v.id id="resource.algorithm_model.table.rule.required.name"
} defaultMessage="name is required"
}) />
} ),
}/> },
<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>)} <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; 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 { 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
* @zh-CN 新建窗口的弹窗 * @zh-CN 新建窗口的弹窗
* */ * */
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false); const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/** /**
* @en-US The pop-up window of the distribution update window * @en-US The pop-up window of the distribution update window
* @zh-CN 分布更新窗口的弹窗 * @zh-CN 分布更新窗口的弹窗
* */ * */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false); const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false); const [showDetail, setShowDetail] = useState<boolean>(false);
/** /**
* @en-US International configuration * @en-US International configuration
* @zh-CN 国际化配置 * @zh-CN 国际化配置
* */ * */
const access = useAccess(); const access = useAccess();
const intl = useIntl(); const intl = useIntl();
const actionRef = useRef<ActionType>(); const actionRef = useRef<ActionType>();
const [currentRow, setCurrentRow] = useState<API.AlgorithmModel>(); // TODO 动态设置每页数量
const [selectedRowsState, setSelectedRows] = useState<API.AlgorithmModel[]>([]); const [currentPageSize, setCurrentPageSize] = useState<number>(10)
const [category_fk_id_open, set_category_fk_id_open] = useState(false) const [currentRow, setCurrentRow] = useState<API.AlgorithmModel>();
const [category_fk_id, set_category_fk_id] = useState<API.ModelCategory>() const [selectedRowsState, setSelectedRows] = useState<API.AlgorithmModel[]>([]);
const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false) const [category_fk_id_open, set_category_fk_id_open] = useState(false);
const [categoryFkIdIds, setCategoryFkIdIds] = useState([]) const [category_fk_id, set_category_fk_id] = useState<API.ModelCategory>();
const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({}) const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false);
const handle_category_fk_id = (id: any)=>{ const [categoryFkIdIds, setCategoryFkIdIds] = useState([]);
if (category_fk_id_open) { const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({});
set_category_fk_id(undefined); const handle_category_fk_id = (id: any) => {
set_category_fk_id_open(false) if (category_fk_id_open) {
}else { set_category_fk_id(undefined);
postModelCategoryGetModelCategoryById({id: id}).then((resp)=>{ set_category_fk_id_open(false);
set_category_fk_id(resp.data.modelCategory) } else {
set_category_fk_id_open(true) 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) const handle_category_fk_id_column_open = () => {
}else { if (category_fk_id_column_open) {
postModelCategoryGetModelCategoryNames({ids: categoryFkIdIds}).then((resp)=>{ set_category_fk_id_column_open(false);
let a: any = {} } else {
resp.data.list.forEach((v: any)=>{ postModelCategoryGetModelCategoryNames({ ids: categoryFkIdIds }).then((resp) => {
if (v.id) { let a: any = {};
a[v.id] = v.name resp.data.list.forEach((v: any) => {
} if (v.id) {
}) 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 = ()=>{ };
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>[] = [ 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 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,228 +133,293 @@ 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: (
id="resource.algorithm_model.table.list.categoryFkId" <FormattedMessage
defaultMessage="$$$"/>), id="resource.algorithm_model.table.list.categoryFkId"
dataIndex: "categoryFkId", defaultMessage="$$$"
hideInSearch: false, />
render: (text, record) => { ),
if (category_fk_id_column_open) { dataIndex: 'categoryFkId',
return ( <a onClick={()=>{handle_category_fk_id(record.categoryFkId)}}>{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}</a>) hideInSearch: false,
} else { render: (text, record) => {
return (<a onClick={()=>{handle_category_fk_id(record.categoryFkId)}}>{record.categoryFkId}</a>) if (category_fk_id_column_open) {
} return (
}, <a
renderFormItem: () => { onClick={() => {
return ( handle_category_fk_id(record.categoryFkId);
// value 和 onchange 会通过 form 自动注入。 }}
<ProFormSelect >
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`} {record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}
required={false} showSearch debounceTime={1000} </a>
request={async (keyWord)=>{ );
const resp = await postModelCategoryGetModelCategoryFkSelect({keyword: keyWord?.keyWords || ''}) } else {
return resp.data.list.map((v: any)=>{ return (
return { <a
label: v.name, onClick={() => {
value: v.id 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 title: (
id="resource.algorithm_model.table.list.defaultVersionFkId" <FormattedMessage
defaultMessage="$$$"/>), id="resource.algorithm_model.table.list.defaultVersionFkId"
dataIndex: "defaultVersionFkId", defaultMessage="$$$"
hideInSearch: true, />
),
dataIndex: 'defaultVersionFkId',
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: (
id="resource.algorithm_model.table.list.createTime" <FormattedMessage
defaultMessage="$$$"/>), id="resource.algorithm_model.table.list.createTime"
dataIndex: "createTime", defaultMessage="$$$"
sorter: true, />
hideInSearch: true, ),
valueType: 'dateTime', dataIndex: 'createTime',
sorter: true,
hideInSearch: true,
valueType: 'dateTime',
}, },
{ {
title: (<FormattedMessage title: (
id="resource.algorithm_model.table.list.updateTime" <FormattedMessage
defaultMessage="$$$"/>), id="resource.algorithm_model.table.list.updateTime"
dataIndex: "updateTime", defaultMessage="$$$"
sorter: true, />
hideInSearch: true, ),
valueType: 'dateTime', dataIndex: 'updateTime',
sorter: true,
hideInSearch: true,
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
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> accessible={access.canUpdate(history.location.pathname)}
<a key={`${history.location.pathname}-add`}
key="update" >
onClick={() => { <a
setUpdateModalOpen(true); key="update"
setCurrentRow(record); 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,
}} }}
columnsState={{ >
persistenceKey: 'algorithm_model_list', <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
persistenceType: 'localStorage' </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 key="destroy" type="text" danger>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
<Button </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" 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
type="primary" type="primary"
key="primary" key="primary"
onClick={() => { onClick={() => {
setCreateModalOpen(true); setCreateModalOpen(true);
}} }}
> >
<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={{ onChange: (_, selectedRows) => {
onChange: (_, selectedRows) => { setSelectedRows(selectedRows);
setSelectedRows(selectedRows); },
}, }}
}} />
/> {/* TODO 不明显需要重新设计 底部已选项操作固定栏 */}
{selectedRowsState?.length > 0 && ( {selectedRowsState?.length > 0 && (
<FooterToolbar <FooterToolbar
extra={ extra={
<div> <div>
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '} <FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '} <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" /> <FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
</div> </div>
} }
> >
<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
@ -352,36 +427,36 @@ return (
defaultMessage="Batch deletion" defaultMessage="Batch deletion"
/> />
</Button> </Button>
</FooterToolbar> </FooterToolbar>
)} )}
<CreateForm {/* 列表关联操作项组件 */}
createModalOpen={createModalOpen} <CreateForm
values={currentRow || {}} createModalOpen={createModalOpen}
handleModal={handleCreateModal} values={currentRow || {}}
reload={actionRef.current?.reload} handleModal={handleCreateModal}
/> reload={actionRef.current?.reload}
<UpdateForm />
updateModalOpen={updateModalOpen} <UpdateForm
values={currentRow || {}} updateModalOpen={updateModalOpen}
handleModal={handleUpdateModal} values={currentRow || {}}
reload={actionRef.current?.reload} handleModal={handleUpdateModal}
/> reload={actionRef.current?.reload}
/>
<ColumnDrawer <ColumnDrawer
handleDrawer={handleColumnDrawer} handleDrawer={handleColumnDrawer}
isShowDetail={showDetail} isShowDetail={showDetail}
columns={columns} columns={columns}
currentRow={currentRow} currentRow={currentRow}
/> />
<ModelCategoryColumnDrawer <ModelCategoryColumnDrawer
handleDrawer={handle_category_fk_id} handleDrawer={handle_category_fk_id}
isShowDetail={category_fk_id_open} isShowDetail={category_fk_id_open}
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 () => ({

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 { 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
* @zh-CN 新建窗口的弹窗 * @zh-CN 新建窗口的弹窗
* */ * */
const [publishModalOpen, setPublishModalOpen] = useState<boolean>(false); const [publishModalOpen, setPublishModalOpen] = useState<boolean>(false);
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false); const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
/** /**
* @en-US The pop-up window of the distribution update window * @en-US The pop-up window of the distribution update window
* @zh-CN 分布更新窗口的弹窗 * @zh-CN 分布更新窗口的弹窗
* */ * */
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false); const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
const [showDetail, setShowDetail] = useState<boolean>(false); const [showDetail, setShowDetail] = useState<boolean>(false);
/** /**
* @en-US International configuration * @en-US International configuration
* @zh-CN 国际化配置 * @zh-CN 国际化配置
* */ * */
const access = useAccess(); const access = useAccess();
const intl = useIntl(); const intl = useIntl();
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) setModelFkIdMap(a);
}) });
set_model_fk_id_column_open(true) 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 = ()=>{
if (publishModalOpen) {
setPublishModalOpen(false)
setCurrentRow(undefined)
} else {
setPublishModalOpen(true)
}
} }
const handleCreateModal = ()=>{ };
if (createModalOpen) { const handlePublishModal = () => {
setCreateModalOpen(false) if (publishModalOpen) {
setCurrentRow(undefined) setPublishModalOpen(false);
} else { setCurrentRow(undefined);
setCreateModalOpen(true) } else {
} setPublishModalOpen(true);
} }
const handleColumnDrawer = ()=>{ };
if (showDetail) { const handleCreateModal = () => {
setShowDetail(false) if (createModalOpen) {
setCurrentRow(undefined) 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 { } else {
setShowDetail(true) moreActions.push({
} key: index+"",
label: item
});
} }
const handleDestroy = async (selectedRow: API.ModelVersion) => { // eslint-disable-next-line react/jsx-key
deleteModelVersionDeleteModelVersion({id: selectedRow.id}).then(()=>{ });
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'})) return (
actionRef.current?.reload() <>
}).catch(()=>{ {prevActions.map((item) => {
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'})) return <>{item}</>;
}) })}
}; <Dropdown menu={{items: moreActions}}>
<a>更多<DownOutlined/></a>
const columns: ProColumns<API.ModelVersion>[] = [ </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,128 +178,148 @@ 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 (
} else { <a
return (<a onClick={()=>{handle_model_fk_id(record.modelFkId)}}>{record.modelFkId}</a>) onClick={() => {
} handle_model_fk_id(record.modelFkId);
}, }}
renderFormItem: () => { >
return ( {record?.modelFkId ? modelFkIdMap[record.modelFkId] : undefined}
// value 和 onchange 会通过 form 自动注入。 </a>
<ProFormSelect );
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$' })}`} } else {
required={false} showSearch debounceTime={1000} return (
request={async (keyWord)=>{ <a
const resp = await postAlgorithmModelGetAlgorithmModelFkSelect({keyword: keyWord?.keyWords || ''}) onClick={() => {
return resp.data.list.map((v: any)=>{ handle_model_fk_id(record.modelFkId);
return { }}
label: v.name, >
value: v.id {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 title: <FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />,
id="resource.model_version.table.list.version" dataIndex: 'path',
defaultMessage="$$$"/>), hideInSearch: true,
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 title: (
id="resource.model_version.table.list.remark" <FormattedMessage id="resource.model_version.table.list.startCode" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "remark", dataIndex: 'startCode',
hideInSearch: true, 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 title: (
id="resource.model_version.table.list.createTime" <FormattedMessage id="resource.model_version.table.list.isEnable" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "createTime", dataIndex: 'isEnable',
sorter: true, filters: true,
hideInSearch: true, onFilter: true,
valueType: 'dateTime', 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 title: (
id="resource.model_version.table.list.updateTime" <FormattedMessage id="resource.model_version.table.list.createTime" defaultMessage="$$$" />
defaultMessage="$$$"/>), ),
dataIndex: "updateTime", dataIndex: 'createTime',
sorter: true, sorter: true,
hideInSearch: true, hideInSearch: true,
valueType: 'dateTime', 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" />, 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
</a> <Popconfirm
<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="发布模型" title="发布模型"
description="确认发布模型吗?" description="确认发布模型吗?"
onConfirm={()=>{}} onConfirm={()=>{}}
@ -326,121 +448,122 @@ const columns: ProColumns<API.ModelVersion>[] = [
defaultMessage="$$$" defaultMessage="$$$"
/> />
</a> </a>
</Popconfirm> </Popconfirm> */}
</Access> </Access>,
], ],
},]; },
return ( ];
<PageContainer> return (
<ProTable<API.ModelVersion> <PageContainer>
headerTitle={intl.formatMessage({ <ProTable<API.ModelVersion>
id: 'pages.searchTable.title', headerTitle={intl.formatMessage({
defaultMessage: '$$$', id: 'pages.searchTable.title',
})} defaultMessage: '$$$',
options={{ fullScreen: true, setting: true, density: true, reload: true }} })}
actionRef={actionRef} options={{ fullScreen: true, setting: true, density: true, reload: true }}
rowKey="key" actionRef={actionRef}
search={{ rowKey="key"
labelWidth: 120, search={{
}} 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={{
}} showSizeChanger: true,
pagination={{ pageSize: 10,
showSizeChanger: true, }}
pageSize: 10, columnsState={{
}} persistenceKey: 'model_version_list',
columnsState={{ persistenceType: 'localStorage',
persistenceKey: 'model_version_list', }}
persistenceType: 'localStorage' toolBarRender={() => [
}} <Access
toolBarRender={() => [ accessible={access.canUpdate(history.location.pathname)}
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> 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
type="primary" type="primary"
key="primary" key="primary"
onClick={() => { onClick={() => {
setCreateModalOpen(true); setCreateModalOpen(true);
}} }}
> >
<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={{ onChange: (_, selectedRows) => {
onChange: (_, selectedRows) => { setSelectedRows(selectedRows);
setSelectedRows(selectedRows); },
}, }}
}} />
/> {selectedRowsState?.length > 0 && (
{selectedRowsState?.length > 0 && ( <FooterToolbar
<FooterToolbar extra={
extra={ <div>
<div> <FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '} <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '} <FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" /> </div>
</div> }
} >
> <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
@ -448,42 +571,41 @@ return (
defaultMessage="Batch deletion" defaultMessage="Batch deletion"
/> />
</Button> </Button>
</FooterToolbar> </FooterToolbar>
)} )}
<MyCreateForm <MyCreateForm
createModalOpen={createModalOpen} createModalOpen={createModalOpen}
values={currentRow || {}} values={currentRow || {}}
handleModal={handleCreateModal} handleModal={handleCreateModal}
reload={actionRef.current?.reload} reload={actionRef.current?.reload}
/> />
<UpdateForm <UpdateForm
updateModalOpen={updateModalOpen} updateModalOpen={updateModalOpen}
values={currentRow || {}} values={currentRow || {}}
handleModal={handleUpdateModal} handleModal={handleUpdateModal}
reload={actionRef.current?.reload} reload={actionRef.current?.reload}
/> />
{/*<PublishForm*/} {/*<PublishForm*/}
{/* publishModalOpen={publishModalOpen}*/} {/* publishModalOpen={publishModalOpen}*/}
{/* handleModal={handlePublishModal}*/} {/* handleModal={handlePublishModal}*/}
{/* values={currentRow || {}}*/} {/* values={currentRow || {}}*/}
{/* reload={actionRef.current?.reload}*/} {/* reload={actionRef.current?.reload}*/}
{/*></PublishForm>*/} {/*></PublishForm>*/}
<ColumnDrawer <ColumnDrawer
handleDrawer={handleColumnDrawer} handleDrawer={handleColumnDrawer}
isShowDetail={showDetail} isShowDetail={showDetail}
columns={columns} columns={columns}
currentRow={currentRow} currentRow={currentRow}
/> />
<AlgorithmModelColumnDrawer <AlgorithmModelColumnDrawer
handleDrawer={handle_model_fk_id} handleDrawer={handle_model_fk_id}
isShowDetail={model_fk_id_open} isShowDetail={model_fk_id_open}
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