feat: 模型列表固定表头设置批量按钮完成，遍历Vnode比对刷新节点key添加，分步表单整体样式初步完成调整
parent
7fb0fad3c3
commit
5cea7c19a5
@ -0,0 +1,493 @@
|
||||
import { ColumnDrawer as ModelCategoryColumnDrawer } from '@/pages/Resource/ModelCategoryList/components/ColumnDrawer';
|
||||
import { ModelCategoryColumns } from '@/pages/Resource/ModelCategoryList/components/Columns';
|
||||
import {
|
||||
deleteAlgorithmModelDeleteAlgorithmModel,
|
||||
deleteAlgorithmModelDeleteAlgorithmModelByIds,
|
||||
postAlgorithmModelGetAlgorithmModelList,
|
||||
} from '@/services/resource/AlgorithmModel';
|
||||
import {
|
||||
postModelCategoryGetModelCategoryById,
|
||||
postModelCategoryGetModelCategoryFkSelect,
|
||||
postModelCategoryGetModelCategoryNames,
|
||||
} from '@/services/resource/ModelCategory';
|
||||
import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import type { ActionType, ProColumns } from '@ant-design/pro-components';
|
||||
import { PageContainer, ProFormSelect, ProFormText, ProTable } from '@ant-design/pro-components';
|
||||
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
|
||||
import { Button, Modal, 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';
|
||||
const AlgorithmModelList: React.FC = () => {
|
||||
/**
|
||||
* @en-US Pop-up window of new window
|
||||
* @zh-CN 新建窗口的弹窗
|
||||
* */
|
||||
const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
|
||||
/**
|
||||
* @en-US The pop-up window of the distribution update window
|
||||
* @zh-CN 分布更新窗口的弹窗
|
||||
* */
|
||||
const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
/**
|
||||
* @en-US International configuration
|
||||
* @zh-CN 国际化配置
|
||||
* */
|
||||
const access = useAccess();
|
||||
const intl = useIntl();
|
||||
const actionRef = useRef<ActionType>();
|
||||
// TODO 动态设置每页数量
|
||||
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
|
||||
const [currentRow, setCurrentRow] = useState<API.AlgorithmModel>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.AlgorithmModel[]>([]);
|
||||
const [category_fk_id_open, set_category_fk_id_open] = useState(false);
|
||||
const [category_fk_id, set_category_fk_id] = useState<API.ModelCategory>();
|
||||
const [category_fk_id_column_open, set_category_fk_id_column_open] = useState(false);
|
||||
const [categoryFkIdIds, setCategoryFkIdIds] = useState([]);
|
||||
const [categoryFkIdMap, setCategoryFkIdMap] = useState<{ [key: number]: string }>({});
|
||||
const handle_category_fk_id = (id: any) => {
|
||||
if (category_fk_id_open) {
|
||||
set_category_fk_id(undefined);
|
||||
set_category_fk_id_open(false);
|
||||
} else {
|
||||
postModelCategoryGetModelCategoryById({ id: id }).then((resp) => {
|
||||
set_category_fk_id(resp.data.modelCategory);
|
||||
set_category_fk_id_open(true);
|
||||
});
|
||||
}
|
||||
};
|
||||
const handle_category_fk_id_column_open = () => {
|
||||
if (category_fk_id_column_open) {
|
||||
set_category_fk_id_column_open(false);
|
||||
} else {
|
||||
postModelCategoryGetModelCategoryNames({ ids: categoryFkIdIds }).then((resp) => {
|
||||
let a: any = {};
|
||||
resp.data.list.forEach((v: any) => {
|
||||
if (v.id) {
|
||||
a[v.id] = v.name;
|
||||
}
|
||||
});
|
||||
setCategoryFkIdMap(a);
|
||||
});
|
||||
set_category_fk_id_column_open(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateModal = () => {
|
||||
if (updateModalOpen) {
|
||||
setUpdateModalOpen(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setUpdateModalOpen(true);
|
||||
}
|
||||
};
|
||||
const handleCreateModal = () => {
|
||||
if (createModalOpen) {
|
||||
setCreateModalOpen(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setCreateModalOpen(true);
|
||||
}
|
||||
};
|
||||
const handleColumnDrawer = () => {
|
||||
if (showDetail) {
|
||||
setShowDetail(false);
|
||||
setCurrentRow(undefined);
|
||||
} else {
|
||||
setShowDetail(true);
|
||||
}
|
||||
};
|
||||
const handleDestroy = async (selectedRow: API.AlgorithmModel) => {
|
||||
deleteAlgorithmModelDeleteAlgorithmModel({ id: selectedRow.id })
|
||||
.then(() => {
|
||||
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||
actionRef.current?.reload();
|
||||
})
|
||||
.catch(() => {
|
||||
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||
});
|
||||
};
|
||||
|
||||
const columns: ProColumns<API.AlgorithmModel>[] = [
|
||||
{
|
||||
title: <FormattedMessage id="resource.algorithm_model.table.list.id" defaultMessage="id" />,
|
||||
dataIndex: 'id',
|
||||
sorter: true,
|
||||
render: (dom, entity) => {
|
||||
return (
|
||||
<a
|
||||
onClick={() => {
|
||||
setCurrentRow(entity);
|
||||
setShowDetail(true);
|
||||
}}
|
||||
>
|
||||
{dom}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
//TODO 默认使用renderFormItem update1101
|
||||
renderFormItem: () => {
|
||||
return (
|
||||
<>
|
||||
<ProFormText
|
||||
width="md"
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 22 }}
|
||||
name="id"
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_input',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage id="resource.algorithm_model.table.list.name" defaultMessage="$$$" />
|
||||
),
|
||||
dataIndex: 'name',
|
||||
hideInSearch: true,
|
||||
},
|
||||
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="resource.algorithm_model.table.list.categoryFkId"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'categoryFkId',
|
||||
hideInSearch: false,
|
||||
render: (text, record) => {
|
||||
if (category_fk_id_column_open) {
|
||||
return (
|
||||
<a
|
||||
onClick={() => {
|
||||
handle_category_fk_id(record.categoryFkId);
|
||||
}}
|
||||
>
|
||||
{record?.categoryFkId ? categoryFkIdMap[record.categoryFkId] : undefined}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<a
|
||||
onClick={() => {
|
||||
handle_category_fk_id(record.categoryFkId);
|
||||
}}
|
||||
>
|
||||
{record.categoryFkId}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
},
|
||||
renderFormItem: () => {
|
||||
return (
|
||||
// value 和 onchange 会通过 form 自动注入。
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 22 }}
|
||||
placeholder={`${intl.formatMessage({
|
||||
id: 'common.please_select',
|
||||
defaultMessage: '$$$',
|
||||
})}`}
|
||||
required={false}
|
||||
showSearch
|
||||
debounceTime={1000}
|
||||
request={async (keyWord) => {
|
||||
const resp = await postModelCategoryGetModelCategoryFkSelect({
|
||||
keyword: keyWord?.keyWords || '',
|
||||
});
|
||||
return resp.data.list.map((v: any) => {
|
||||
return {
|
||||
label: v.name,
|
||||
value: v.id,
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="resource.algorithm_model.table.list.defaultVersionFkId"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'defaultVersionFkId',
|
||||
hideInSearch: true,
|
||||
},
|
||||
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage id="resource.algorithm_model.table.list.remark" defaultMessage="$$$" />
|
||||
),
|
||||
dataIndex: 'remark',
|
||||
hideInSearch: true,
|
||||
},
|
||||
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="resource.algorithm_model.table.list.createTime"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'createTime',
|
||||
sorter: true,
|
||||
hideInSearch: true,
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="resource.algorithm_model.table.list.updateTime"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
),
|
||||
dataIndex: 'updateTime',
|
||||
sorter: true,
|
||||
hideInSearch: true,
|
||||
valueType: 'dateTime',
|
||||
},
|
||||
|
||||
{
|
||||
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
fixed: 'right',
|
||||
render: (_, record) => [
|
||||
<Access
|
||||
accessible={access.canUpdate(history.location.pathname)}
|
||||
key={`${history.location.pathname}-add`}
|
||||
>
|
||||
<a
|
||||
key="update"
|
||||
onClick={() => {
|
||||
setUpdateModalOpen(true);
|
||||
setCurrentRow(record);
|
||||
}}
|
||||
>
|
||||
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
|
||||
</a>
|
||||
{/* 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>
|
||||
headerTitle={intl.formatMessage({
|
||||
id: 'pages.searchTable.title',
|
||||
defaultMessage: '$$$',
|
||||
})}
|
||||
scroll={{ y: 500 }}
|
||||
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',
|
||||
}}
|
||||
tableAlertOptionRender={() => {
|
||||
return (
|
||||
<>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<Button
|
||||
danger
|
||||
onClick={async () => {
|
||||
Modal.confirm({
|
||||
icon: <ExclamationCircleOutlined />,
|
||||
title: "确定要删除此模型吗？",
|
||||
content: ("确定删除这个模型吗，删除后将无法找回，请谨慎操作"),
|
||||
cancelText: '',
|
||||
|
||||
onOk() {
|
||||
// TODO 未对接批量删除接口
|
||||
deleteAlgorithmModelDeleteAlgorithmModelByIds({
|
||||
ids: selectedRowsState.map((v: API.AlgorithmModel) => {
|
||||
return v.id as number;
|
||||
}),
|
||||
}).then(() => {
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
});
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.batchDeletion"
|
||||
defaultMessage="Batch deletion"
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Access
|
||||
accessible={access.canUpdate(history.location.pathname)}
|
||||
key={`${history.location.pathname}-add`}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
key="category_fk_id_show"
|
||||
onClick={() => {
|
||||
handle_category_fk_id_column_open();
|
||||
}}
|
||||
>
|
||||
{category_fk_id_column_open ? (
|
||||
<FormattedMessage id="common.hide" defaultMessage="$$$" />
|
||||
) : (
|
||||
<FormattedMessage id="common.show" defaultMessage="$$$" />
|
||||
)}
|
||||
<FormattedMessage
|
||||
id="resource.algorithm_model.table.list.categoryFkId"
|
||||
defaultMessage="$$$"
|
||||
/>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
key="primary"
|
||||
onClick={() => {
|
||||
setCreateModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
|
||||
</Button>
|
||||
</Access>,
|
||||
]}
|
||||
request={async (params = {}, sort) => {
|
||||
const { current, ...rest } = params;
|
||||
const reqParams = {
|
||||
page: current,
|
||||
desc: false,
|
||||
orderKey: '',
|
||||
...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 postAlgorithmModelGetAlgorithmModelList({ ...reqParams });
|
||||
return {
|
||||
data: resp.data.list.map((v: API.AlgorithmModel) => {
|
||||
return { ...v, key: v.id };
|
||||
}),
|
||||
success: resp.success,
|
||||
total: resp.data.total,
|
||||
current: resp.data.page,
|
||||
pageSize: resp.data.pageSize,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => {
|
||||
setSelectedRows(selectedRows);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
{/* TODO 不明显需要重新设计 底部已选项操作固定栏 */}
|
||||
{/* {selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
<FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
<FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
deleteAlgorithmModelDeleteAlgorithmModelByIds({
|
||||
ids: selectedRowsState.map((v: API.AlgorithmModel) => {
|
||||
return v.id as number;
|
||||
}),
|
||||
}).then(() => {
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="pages.searchTable.batchDeletion"
|
||||
defaultMessage="Batch deletion"
|
||||
/>
|
||||
</Button>
|
||||
</FooterToolbar>
|
||||
)} */}
|
||||
{/* 列表关联操作项组件 */}
|
||||
<CreateForm
|
||||
createModalOpen={createModalOpen}
|
||||
values={currentRow || {}}
|
||||
handleModal={handleCreateModal}
|
||||
reload={actionRef.current?.reload}
|
||||
/>
|
||||
<UpdateForm
|
||||
updateModalOpen={updateModalOpen}
|
||||
values={currentRow || {}}
|
||||
handleModal={handleUpdateModal}
|
||||
reload={actionRef.current?.reload}
|
||||
/>
|
||||
|
||||
<ColumnDrawer
|
||||
handleDrawer={handleColumnDrawer}
|
||||
isShowDetail={showDetail}
|
||||
columns={columns}
|
||||
currentRow={currentRow}
|
||||
/>
|
||||
<ModelCategoryColumnDrawer
|
||||
handleDrawer={handle_category_fk_id}
|
||||
isShowDetail={category_fk_id_open}
|
||||
columns={ModelCategoryColumns}
|
||||
currentRow={category_fk_id}
|
||||
/>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlgorithmModelList;
|
||||
Loading…
Reference in New Issue