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

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;