You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
400 lines
13 KiB
TypeScript
400 lines
13 KiB
TypeScript
2 years ago
|
import {ModelVersionColumns} from '@/pages/Resource/ModelVersionList/components/Columns';
|
||
|
import {postModelVersionGetModelVersionById, postModelVersionGetModelVersionFkSelect, postModelVersionGetModelVersionNames} from '@/services/resource/ModelVersion';
|
||
|
import {ColumnDrawer as ModelVersionColumnDrawer} from "@/pages/Resource/ModelVersionList/components/ColumnDrawer";
|
||
|
import {deleteModelImageDeleteModelImage, postModelImageGetModelImageList, deleteModelImageDeleteModelImageByIds} from '@/services/resource/ModelImage';
|
||
|
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} from 'antd';
|
||
|
import React, { useRef, useState } from 'react';
|
||
|
import UpdateForm from './components/UpdateForm';
|
||
|
import CreateForm from "./components/CreateForm";
|
||
|
import {ColumnDrawer} from "./components/ColumnDrawer";
|
||
|
const ModelImageList: 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>();
|
||
|
const [currentRow, setCurrentRow] = useState<API.ModelImage>();
|
||
|
const [selectedRowsState, setSelectedRows] = useState<API.ModelImage[]>([]);
|
||
|
const [model_version_fk_id_open, set_model_version_fk_id_open] = useState(false)
|
||
|
const [model_version_fk_id, set_model_version_fk_id] = useState<API.ModelVersion>()
|
||
|
const [model_version_fk_id_column_open, set_model_version_fk_id_column_open] = useState(false)
|
||
|
const [modelVersionFkIdIds, setModelVersionFkIdIds] = useState([])
|
||
|
const [modelVersionFkIdMap, setModelVersionFkIdMap] = useState<{ [key: number]: string }>({})
|
||
|
const handle_model_version_fk_id = (id: any)=>{
|
||
|
if (model_version_fk_id_open) {
|
||
|
set_model_version_fk_id(undefined);
|
||
|
set_model_version_fk_id_open(false)
|
||
|
}else {
|
||
|
postModelVersionGetModelVersionById({id: id}).then((resp)=>{
|
||
|
set_model_version_fk_id(resp.data.modelVersion)
|
||
|
set_model_version_fk_id_open(true)
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
const handle_model_version_fk_id_column_open = ()=>{
|
||
|
if (model_version_fk_id_column_open) {
|
||
|
set_model_version_fk_id_column_open(false)
|
||
|
}else {
|
||
|
postModelVersionGetModelVersionNames({ids: modelVersionFkIdIds}).then((resp)=>{
|
||
|
let a: any = {}
|
||
|
resp.data.list.forEach((v: any)=>{
|
||
|
if (v.id) {
|
||
|
a[v.id] = v.name
|
||
|
}
|
||
|
})
|
||
|
setModelVersionFkIdMap(a)
|
||
|
})
|
||
|
set_model_version_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.ModelImage) => {
|
||
|
deleteModelImageDeleteModelImage({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.ModelImage>[] = [
|
||
|
|
||
|
{
|
||
|
title: (<FormattedMessage
|
||
|
id="resource.model_image.table.list.id"
|
||
|
defaultMessage="id"/>),
|
||
|
dataIndex: "id",
|
||
|
sorter: true,
|
||
|
render: (dom, entity) => {
|
||
|
return (
|
||
|
<a
|
||
|
onClick={() => {
|
||
|
setCurrentRow(entity);
|
||
|
setShowDetail(true);
|
||
|
}}
|
||
|
>
|
||
|
{dom}
|
||
|
</a>
|
||
|
);
|
||
|
},
|
||
|
},
|
||
|
|
||
|
{
|
||
|
title: (<FormattedMessage
|
||
|
id="resource.model_image.table.list.name"
|
||
|
defaultMessage="$$$"/>),
|
||
|
dataIndex: "name",
|
||
|
hideInSearch: true,
|
||
|
},
|
||
|
|
||
|
|
||
|
{
|
||
|
title: (<FormattedMessage
|
||
|
id="resource.model_image.table.list.modelVersionFkId"
|
||
|
defaultMessage="$$$"/>),
|
||
|
dataIndex: "modelVersionFkId",
|
||
|
hideInSearch: false,
|
||
|
render: (text, record) => {
|
||
|
if (model_version_fk_id_column_open) {
|
||
|
return ( <a onClick={()=>{handle_model_version_fk_id(record.modelVersionFkId)}}>{record?.modelVersionFkId ? modelVersionFkIdMap[record.modelVersionFkId] : undefined}</a>)
|
||
|
} else {
|
||
|
return (<a onClick={()=>{handle_model_version_fk_id(record.modelVersionFkId)}}>{record.modelVersionFkId}</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 postModelVersionGetModelVersionFkSelect({keyword: keyWord?.keyWords || ''})
|
||
|
return resp.data.list.map((v: any)=>{
|
||
|
return {
|
||
|
label: v.name,
|
||
|
value: v.id
|
||
|
}
|
||
|
})
|
||
|
}}
|
||
|
/>
|
||
|
);
|
||
|
},
|
||
|
},
|
||
|
|
||
|
|
||
|
{
|
||
|
title: (<FormattedMessage
|
||
|
id="resource.model_image.table.list.path"
|
||
|
defaultMessage="$$$"/>),
|
||
|
dataIndex: "path",
|
||
|
hideInSearch: true,
|
||
|
},
|
||
|
|
||
|
|
||
|
{
|
||
|
title: (<FormattedMessage
|
||
|
id="resource.model_image.table.list.startCode"
|
||
|
defaultMessage="$$$"/>),
|
||
|
dataIndex: "startCode",
|
||
|
hideInSearch: true,
|
||
|
},
|
||
|
|
||
|
|
||
|
{
|
||
|
title: (<FormattedMessage
|
||
|
id="resource.model_image.table.list.remark"
|
||
|
defaultMessage="$$$"/>),
|
||
|
dataIndex: "remark",
|
||
|
hideInSearch: true,
|
||
|
},
|
||
|
|
||
|
|
||
|
{
|
||
|
title: (<FormattedMessage
|
||
|
id="resource.model_image.table.list.createTime"
|
||
|
defaultMessage="$$$"/>),
|
||
|
dataIndex: "createTime",
|
||
|
sorter: true,
|
||
|
hideInSearch: true,
|
||
|
valueType: 'dateTime',
|
||
|
},
|
||
|
|
||
|
|
||
|
{
|
||
|
title: (<FormattedMessage
|
||
|
id="resource.model_image.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>
|
||
|
<a
|
||
|
key="destroy"
|
||
|
onClick={() => {
|
||
|
handleDestroy(record).then(()=>{})
|
||
|
}}>
|
||
|
<FormattedMessage
|
||
|
id="pages.searchTable.destroy"
|
||
|
defaultMessage="Destroy"
|
||
|
/>
|
||
|
</a>
|
||
|
</Access>
|
||
|
],
|
||
|
},];
|
||
|
return (
|
||
|
<PageContainer>
|
||
|
<ProTable<API.ModelImage>
|
||
|
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 ModelVersionFkIdIds: any = data.map((v)=>{
|
||
|
return v.modelVersionFkId
|
||
|
})
|
||
|
setModelVersionFkIdIds(ModelVersionFkIdIds)
|
||
|
|
||
|
|
||
|
}}
|
||
|
pagination={{
|
||
|
showSizeChanger: true,
|
||
|
pageSize: 10,
|
||
|
}}
|
||
|
columnsState={{
|
||
|
persistenceKey: 'model_image_list',
|
||
|
persistenceType: 'localStorage'
|
||
|
}}
|
||
|
toolBarRender={() => [
|
||
|
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
|
||
|
|
||
|
<Button
|
||
|
type="primary"
|
||
|
key="model_version_fk_id_show"
|
||
|
onClick={() => {
|
||
|
handle_model_version_fk_id_column_open()
|
||
|
}}
|
||
|
>
|
||
|
{
|
||
|
model_version_fk_id_column_open ? (<FormattedMessage
|
||
|
id="common.hide"
|
||
|
defaultMessage="$$$"/>) : (<FormattedMessage
|
||
|
id="common.show"
|
||
|
defaultMessage="$$$"/>)
|
||
|
}
|
||
|
<FormattedMessage
|
||
|
id="resource.model_image.table.list.modelVersionFkId"
|
||
|
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 postModelImageGetModelImageList({...reqParams})
|
||
|
return {
|
||
|
data: resp.data.list.map((v: API.ModelImage)=>{
|
||
|
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);
|
||
|
},
|
||
|
}}
|
||
|
/>
|
||
|
{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 () => {
|
||
|
deleteModelImageDeleteModelImageByIds({ids: selectedRowsState.map((v: API.ModelImage)=>{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}
|
||
|
/>
|
||
|
<ModelVersionColumnDrawer
|
||
|
handleDrawer={handle_model_version_fk_id}
|
||
|
isShowDetail={model_version_fk_id_open}
|
||
|
columns={ModelVersionColumns}
|
||
|
currentRow={model_version_fk_id}
|
||
|
/>
|
||
|
|
||
|
</PageContainer>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default ModelImageList;
|