|
|
import {
|
|
|
postAlgorithmModelGetAlgorithmModelById,
|
|
|
putAlgorithmModelUpdateAlgorithmModel
|
|
|
} from '@/services/resource/AlgorithmModel';
|
|
|
import { deleteModelVersionDeleteModelVersion, postModelVersionGetModelVersionList } from '@/services/resource/ModelVersion';
|
|
|
import { ArrowLeftOutlined, PlusOutlined } from '@ant-design/icons';
|
|
|
import {
|
|
|
ActionType,
|
|
|
PageContainer,
|
|
|
ProCard,
|
|
|
ProColumns,
|
|
|
ProDescriptions,
|
|
|
ProTable,
|
|
|
} from '@ant-design/pro-components';
|
|
|
import { Access, FormattedMessage, history, useAccess, useParams, useIntl } from '@umijs/max';
|
|
|
|
|
|
import { Button, message } from 'antd';
|
|
|
import React, { useRef, useState } from 'react';
|
|
|
import MyCreateForm from '../ModelVersionList/components/MyCreateForm';
|
|
|
import TableActionCard from '@/components/TableActionCard';
|
|
|
import IsDelete from '@/components/TableActionCard/isDelete';
|
|
|
import UpdateForm from '../ModelVersionList/components/UpdateForm';
|
|
|
import {proTableCommonOptions} from "../../../../config/defaultTable";
|
|
|
import {AlgorithmModelColumns} from "./components/Columns"
|
|
|
import IsConfirmAction from "@/components/TableActionCard/isConfirmAction";
|
|
|
/**styles */
|
|
|
|
|
|
const detailStylesProps = {
|
|
|
marginBottom: 15,
|
|
|
textColor: '#333333',
|
|
|
};
|
|
|
const headerStylesProps = {
|
|
|
fontSize: 16,
|
|
|
fontWeight: 700,
|
|
|
color: '#333333',
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const AlgorithmModelDetail: React.FC = () => {
|
|
|
const access = useAccess();
|
|
|
const intl = useIntl();
|
|
|
|
|
|
const actionRef = useRef<ActionType>();
|
|
|
|
|
|
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
|
|
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
|
|
|
|
|
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 handleDestroy = async (selectedRow: API.ModelVersion) => {
|
|
|
deleteModelVersionDeleteModelVersion({ id: selectedRow.id })
|
|
|
.then(() => {
|
|
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
|
|
actionRef.current?.reload();
|
|
|
})
|
|
|
.catch(() => {
|
|
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const columns: ProColumns<API.ModelVersion>[] = [
|
|
|
{
|
|
|
title: <FormattedMessage id="resource.model_version.table.list.id" defaultMessage="id" />,
|
|
|
dataIndex: 'id',
|
|
|
sorter: true,
|
|
|
},
|
|
|
|
|
|
|
|
|
{
|
|
|
title: <FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />,
|
|
|
dataIndex: 'version',
|
|
|
hideInSearch: true,
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: <FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />,
|
|
|
dataIndex: 'path',
|
|
|
hideInSearch: true,
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: (
|
|
|
<FormattedMessage id="resource.model_version.table.list.isEnable" defaultMessage="$$$" />
|
|
|
),
|
|
|
dataIndex: 'isEnable',
|
|
|
filters: true,
|
|
|
onFilter: true,
|
|
|
hideInSearch: true,
|
|
|
valueType: 'switch',
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: <FormattedMessage id="resource.model_version.table.list.remark" defaultMessage="$$$" />,
|
|
|
dataIndex: 'remark',
|
|
|
hideInSearch: true,
|
|
|
},
|
|
|
{
|
|
|
title: <FormattedMessage id="resource.model_version.table.list.status" defaultMessage="$$$" />,
|
|
|
dataIndex: 'status',
|
|
|
hideInSearch: true,
|
|
|
valueEnum: {
|
|
|
1: { text: '已创建', status: 'Default' },
|
|
|
2: { text: '已发布', status: 'Processing' },
|
|
|
3: { text: '已上架', status: 'Success' },
|
|
|
4: { text: '已下架', status: 'Default' },
|
|
|
5: { text: '已关闭', status: 'Error' },
|
|
|
},
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: (
|
|
|
<FormattedMessage id="resource.model_version.table.list.createTime" defaultMessage="$$$" />
|
|
|
),
|
|
|
dataIndex: 'createTime',
|
|
|
sorter: true,
|
|
|
hideInSearch: true,
|
|
|
valueType: 'dateTime',
|
|
|
},
|
|
|
|
|
|
{
|
|
|
title: (
|
|
|
<FormattedMessage id="resource.model_version.table.list.updateTime" defaultMessage="$$$" />
|
|
|
),
|
|
|
dataIndex: 'updateTime',
|
|
|
sorter: true,
|
|
|
hideInSearch: true,
|
|
|
valueType: 'dateTime',
|
|
|
},
|
|
|
{
|
|
|
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
|
|
dataIndex: 'option',
|
|
|
valueType: 'option',
|
|
|
fixed: 'right',
|
|
|
render: (_, record) => [
|
|
|
<TableActionCard
|
|
|
key="TableActionCardRef"
|
|
|
renderActions={[
|
|
|
{
|
|
|
key: 'default',
|
|
|
renderDom: (
|
|
|
<IsConfirmAction
|
|
|
title="设为默认"
|
|
|
buttonText="设为默认"
|
|
|
confirmAction={() => {
|
|
|
// setPublishModalOpen(true);
|
|
|
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: '$$$' }),
|
|
|
);
|
|
|
});
|
|
|
}}
|
|
|
></IsConfirmAction>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
key: 'update',
|
|
|
renderDom: (
|
|
|
<Button
|
|
|
key="update"
|
|
|
type="link"
|
|
|
size="small"
|
|
|
onClick={() => {
|
|
|
setUpdateModalOpen(true);
|
|
|
setCurrentRow(record);
|
|
|
}}
|
|
|
>
|
|
|
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
|
|
|
</Button>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
key: 'destroy',
|
|
|
renderDom: (
|
|
|
<IsDelete
|
|
|
deleteApi={() => {
|
|
|
handleDestroy(record).then(() => {});
|
|
|
}}
|
|
|
></IsDelete>
|
|
|
),
|
|
|
},
|
|
|
]}
|
|
|
></TableActionCard>,
|
|
|
],
|
|
|
},
|
|
|
];
|
|
|
// TODO 需要将业务层代码转移到此处
|
|
|
// TODO 按UI原稿重新布局此模块
|
|
|
// 关闭页面
|
|
|
const doClose = () => {
|
|
|
history.back();
|
|
|
};
|
|
|
|
|
|
const handleCreateModal = () => {
|
|
|
if (createModalOpen) {
|
|
|
setCreateModalOpen(false);
|
|
|
setCurrentRow(undefined);
|
|
|
} else {
|
|
|
setCreateModalOpen(true);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleUpdateModal = () => {
|
|
|
if (updateModalOpen) {
|
|
|
setUpdateModalOpen(false);
|
|
|
setCurrentRow(undefined);
|
|
|
} else {
|
|
|
setUpdateModalOpen(true);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const routeParams = useParams();
|
|
|
return (
|
|
|
<PageContainer>
|
|
|
<ProCard split="horizontal" style={{ background: 'transparent' }}>
|
|
|
<ProCard
|
|
|
wrap
|
|
|
bodyStyle={{ margin: 0, padding: 0 }}
|
|
|
style={{ margin: 0, padding: 0, background: 'transparent' }}
|
|
|
>
|
|
|
<ProCard
|
|
|
title={
|
|
|
<div onClick={doClose} style={{ display: 'flex', alignItems: 'center' }}>
|
|
|
<ArrowLeftOutlined style={{ marginRight: 10 }} />
|
|
|
<span style={{ fontSize: 20, color: '#333333', fontWeight: 700 }}>模型详情</span>
|
|
|
</div>
|
|
|
}
|
|
|
style={{
|
|
|
margin: 0,
|
|
|
padding: 0,
|
|
|
marginBottom: detailStylesProps.marginBottom,
|
|
|
background: 'transparent',
|
|
|
}}
|
|
|
headStyle={{ margin: 0, padding: 0 }}
|
|
|
bodyStyle={{ margin: 0, padding: 0 }}
|
|
|
></ProCard>
|
|
|
<ProCard
|
|
|
style={{ margin: 0, padding: 0, marginBottom: detailStylesProps.marginBottom }}
|
|
|
bodyStyle={{ margin: 0, padding: 20 }}
|
|
|
>
|
|
|
<ProDescriptions
|
|
|
column={4}
|
|
|
title="模型详细信息"
|
|
|
tooltip="包含了模型详细信息"
|
|
|
columns={AlgorithmModelColumns}
|
|
|
request={async () => {
|
|
|
console.log(routeParams, 'id');
|
|
|
const resp = await postAlgorithmModelGetAlgorithmModelById({
|
|
|
id: Number(routeParams.id),
|
|
|
});
|
|
|
// postModelVersionGetModelVersionList({modelFkId: 3})
|
|
|
console.log('resp', resp);
|
|
|
return {
|
|
|
data: resp.data?.algorithmModel,
|
|
|
success: resp.success,
|
|
|
};
|
|
|
}}
|
|
|
></ProDescriptions>
|
|
|
</ProCard>
|
|
|
</ProCard>
|
|
|
<ProCard
|
|
|
title="模型版本"
|
|
|
extra={<><Access
|
|
|
accessible={access.canUpdate(history.location.pathname)}
|
|
|
key={`${history.location.pathname}-add`}
|
|
|
>
|
|
|
<Button
|
|
|
type="primary"
|
|
|
key="primary"
|
|
|
onClick={() => {
|
|
|
setCreateModalOpen(true);
|
|
|
}}
|
|
|
>
|
|
|
<PlusOutlined />{' '}
|
|
|
<FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
|
|
|
</Button>
|
|
|
</Access></>}
|
|
|
style={{ margin: 0, padding: 0 }}
|
|
|
headStyle={{ paddingTop: 20, paddingBottom: 20, ...headerStylesProps }}
|
|
|
bodyStyle={{ margin: 0, padding: 0 }}
|
|
|
>
|
|
|
<ProTable
|
|
|
actionRef={actionRef}
|
|
|
tableStyle={{ paddingTop: 15, paddingBottom: 15 }}
|
|
|
columns={columns}
|
|
|
scroll={{
|
|
|
x: proTableCommonOptions.scrollX,
|
|
|
}}
|
|
|
cardBordered
|
|
|
toolBarRender={() => [
|
|
|
|
|
|
]}
|
|
|
request={async (params = {}, sort) => {
|
|
|
const { current, ...rest } = params;
|
|
|
const reqParams = {
|
|
|
page: current,
|
|
|
desc: false,
|
|
|
orderKey: '',
|
|
|
modelFkId: Number(routeParams?.id),
|
|
|
...rest,
|
|
|
};
|
|
|
if (sort && Object.keys(sort).length) {
|
|
|
reqParams.orderKey = Object.keys(sort)[0];
|
|
|
let sort_select = sort[reqParams.orderKey];
|
|
|
reqParams.desc = sort_select === 'descend';
|
|
|
}
|
|
|
let resp = await postModelVersionGetModelVersionList({ ...reqParams });
|
|
|
return {
|
|
|
data: resp.data.list.map((v: API.ModelVersion) => {
|
|
|
return { ...v, key: v.id };
|
|
|
}),
|
|
|
success: resp.success,
|
|
|
total: resp.data.total,
|
|
|
current: resp.data.page,
|
|
|
pageSize: resp.data.pageSize,
|
|
|
};
|
|
|
}}
|
|
|
editable={{
|
|
|
type: 'multiple',
|
|
|
}}
|
|
|
columnsState={{
|
|
|
persistenceKey: 'pro-table-singe-demos',
|
|
|
persistenceType: 'localStorage',
|
|
|
onChange(value) {
|
|
|
console.log('value: ', value);
|
|
|
},
|
|
|
}}
|
|
|
rowKey="id"
|
|
|
search={false}
|
|
|
options={{
|
|
|
fullScreen: false,
|
|
|
setting: false,
|
|
|
density: false,
|
|
|
reload: false,
|
|
|
}}
|
|
|
form={{
|
|
|
// 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
|
|
|
syncToUrl: (values, type) => {
|
|
|
if (type === 'get') {
|
|
|
return {
|
|
|
...values,
|
|
|
created_at: [values.startTime, values.endTime],
|
|
|
};
|
|
|
}
|
|
|
return values;
|
|
|
},
|
|
|
}}
|
|
|
pagination={{
|
|
|
pageSize: 5,
|
|
|
onChange: (page) => console.log(page),
|
|
|
}}
|
|
|
dateFormatter="string"
|
|
|
/>
|
|
|
</ProCard>
|
|
|
</ProCard>
|
|
|
<MyCreateForm
|
|
|
createModalOpen={createModalOpen}
|
|
|
values={{modelFkId: Number(routeParams?.id)}}
|
|
|
handleModal={handleCreateModal}
|
|
|
reload={actionRef.current?.reload}
|
|
|
currentDefaultFieldsData={{modelFkId: Number(routeParams?.id)}}
|
|
|
/>
|
|
|
<UpdateForm
|
|
|
updateModalOpen={updateModalOpen}
|
|
|
values={currentRow || {}}
|
|
|
handleModal={handleUpdateModal}
|
|
|
reload={actionRef.current?.reload}
|
|
|
currentDefaultFieldsData={{modelFkId: Number(routeParams?.id)}}
|
|
|
/>
|
|
|
</PageContainer>
|
|
|
);
|
|
|
};
|
|
|
export default AlgorithmModelDetail;
|