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

develop
zhoux 2 years ago
parent dfd2169f32
commit e780b5f9f5

2
.gitignore vendored

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

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

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

@ -1,9 +1,17 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormSelect} from '@ant-design/pro-components';
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-02 14:01:29
* @FilePath: \general-ai-platform-web\src\pages\Resource\AlgorithmModelList\components\CreateForm.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { postAlgorithmModelCreateAlgorithmModel } from '@/services/resource/AlgorithmModel';
import { postModelCategoryGetModelCategoryFkSelect } from '@/services/resource/ModelCategory';
import { ModalForm, ProForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import {postModelCategoryGetModelCategoryFkSelect} from "@/services/resource/ModelCategory";
import {postAlgorithmModelCreateAlgorithmModel} from "@/services/resource/AlgorithmModel";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
import { Form, message } from 'antd';
import React from 'react';
export type FormValueType = {
target?: string;
template?: string;
@ -19,7 +27,6 @@ export type FormValueType = {
reload: any;
};
const CreateForm: React.FC<CreateFormProps> = (props) => {
const intl = useIntl();
const [form] = Form.useForm<API.AlgorithmModel>();
@ -38,19 +45,33 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
}}
submitTimeout={2000}
onFinish={async (values) => {
postAlgorithmModelCreateAlgorithmModel(values).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
props.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
postAlgorithmModelCreateAlgorithmModel(values)
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
props.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
});
props.handleModal();
return true;
}}
>
<ProForm.Group>
<ProFormText width="md" name="name" label={<FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'resource.algorithm_model.table.list.name', defaultMessage: '$$$'})}`} required={true}
<ProFormText
width="lg"
name="name"
label={
<FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.algorithm_model.table.list.name',
defaultMessage: '$$$',
})}`}
required={true}
rules={[
{
required: true,
@ -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)=>{
const resp = await postModelCategoryGetModelCategoryFkSelect({keyword: keyWord?.keyWords || ''})
<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
}
})
value: v.id,
};
});
}}
/>
<ProFormText
width="lg"
name="remark"
label={
<FormattedMessage
id="resource.algorithm_model.table.list.remark"
defaultMessage="$$$"
/>
}
}/>
<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}/>
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'resource.algorithm_model.table.list.remark',
defaultMessage: '$$$',
})}`}
required={false}
/>
</ProForm.Group>
</ModalForm>)}
</ModalForm>
);
};
export default CreateForm;

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

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

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

Loading…
Cancel
Save