feat: 配置common模块的delete文案提示,表格列中新增badge图标

develop
zhoux 2 years ago
parent fc15e25bca
commit 14fd60b49e

@ -1,6 +1,16 @@
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-03 16:33:59
* @FilePath: \general-ai-platform-web\src\locales\zh-CN\common.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export default {
'common.modal.table.update.title': '更新表单',
'common.modal.table.create.title': '新增表单',
'common.modal.table.delete.title': '确定要删除吗?',
'common.modal.table.delete.content': '确定删除吗,删除后将无法找回,请谨慎操作',
'common.enable': '开启',
'common.disable': '禁用',
'common.yes': '是',
@ -31,4 +41,5 @@ export default {
'common.confirm_publish': '确认发布',
'common.set_default': '设为默认版本',
'common.bind_device': '绑定设备',
"common.tip.title": '温馨提示'
}

@ -1 +1,22 @@
export const project: {[key: string]: string} = {'project.project.table.list.id': 'ID', 'project.project.table.list.name': '项目名称', 'project.project.table.list.code': '项目代码', 'project.project.table.list.info': '项目简介', 'project.project.table.list.inferConfig': '推理配置', 'project.project.table.list.isEnable': '是否启用', 'project.project.table.list.remark': '备注', 'project.project.table.list.createTime': '创建时间', 'project.project.table.list.updateTime': '更新时间', 'project.project.table.rule.required.name': '项目名称为必填项', 'project.project.table.rule.required.code': '项目代码为必填项', 'project.project.table.rule.required.info': '项目简介为必填项'}
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-03 16:28:33
* @FilePath: \general-ai-platform-web\src\locales\zh-CN\project.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
export const project: { [key: string]: string } = {
'project.project.table.list.id': 'ID',
'project.project.table.list.name': '项目名称',
'project.project.table.list.code': '项目代码',
'project.project.table.list.info': '项目简介',
'project.project.table.list.inferConfig': '推理配置',
'project.project.table.list.isEnable': '是否启用',
'project.project.table.list.remark': '备注',
'project.project.table.list.createTime': '创建时间',
'project.project.table.list.updateTime': '更新时间',
'project.project.table.rule.required.name': '项目名称为必填项',
'project.project.table.rule.required.code': '项目代码为必填项',
'project.project.table.rule.required.info': '项目简介为必填项',
};

@ -1,29 +1,43 @@
import {ModalForm,ProForm} from '@ant-design/pro-components';import {ProFormText} from '@ant-design/pro-components';import {ProFormSwitch} from '@ant-design/pro-components';import {ProFormDateTimePicker} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {putProjectUpdateProject} from "@/services/project/Project";
import React, {useState} from 'react';
import {Button, Form, message} from 'antd';
import { putProjectUpdateProject } from '@/services/project/Project';
import {
ModalForm,
ProForm,
ProFormCheckbox,
ProFormDateTimePicker,
ProFormSwitch,
ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, message } from 'antd';
import React from 'react';
export type FormValueType = {
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.Project>;
target?: string;
template?: string;
type?: string;
time?: string;
frequency?: string;
} & Partial<API.Project>;
export type UpdateFormProps = {
updateModalOpen: boolean;
handleModal: () => void;
values: Partial<API.Project>;
reload: any;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
export type UpdateFormProps = {
updateModalOpen: boolean;
handleModal: () => void;
values: Partial<API.Project>;
reload: any;
};
/**styles 配置 */
const formContainerWidth: number = 512;
const formItemStyleProps: Record<string, any> = {
width: formContainerWidth,
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
const [form] = Form.useForm<API.Project>();
return (
<ModalForm<API.Project>
width={560}
title={intl.formatMessage({
id: 'common.modal.table.update.title',
defaultMessage: '$$$',
@ -37,63 +51,177 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
}}
submitTimeout={2000}
onFinish={async (values) => {
putProjectUpdateProject(values).then(()=>{
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
props.reload()
}).catch(()=>{
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
})
putProjectUpdateProject(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="id" label="id" disabled={true} initialValue={props.values.id}/>
<ProFormText width="md" name="name" label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.name', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.name} disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="project.project.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
<ProForm.Group>
<ProFormText
{...formItemStyleProps}
name="id"
label="id"
disabled={true}
initialValue={props.values.id}
/>
<ProFormText
{...formItemStyleProps}
name="name"
label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'project.project.table.list.name',
defaultMessage: '$$$',
})}`}
required={true}
initialValue={props.values.name}
disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="project.project.table.rule.required.name"
defaultMessage="name is required"
/>
<ProFormText width="md" name="code" label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.code', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.code} disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="project.project.table.rule.required.code"
defaultMessage="code is required"
/>
),
},
]}
),
},
]}
/>
<ProFormText
{...formItemStyleProps}
name="code"
label={<FormattedMessage id="project.project.table.list.code" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'project.project.table.list.code',
defaultMessage: '$$$',
})}`}
required={true}
initialValue={props.values.code}
disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="project.project.table.rule.required.code"
defaultMessage="code is required"
/>
<ProFormText width="md" name="info" label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.info', defaultMessage: '$$$'})}`} required={true} initialValue={props.values.info} disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="project.project.table.rule.required.info"
defaultMessage="info is required"
/>
),
},
]}
),
},
]}
/>
<ProFormText
{...formItemStyleProps}
name="info"
label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'project.project.table.list.info',
defaultMessage: '$$$',
})}`}
required={true}
initialValue={props.values.info}
disabled={false}
rules={[
{
required: true,
message: (
<FormattedMessage
id="project.project.table.rule.required.info"
defaultMessage="info is required"
/>
<ProFormSwitch width="md" name="isEnable" label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$"/>} initialValue={props.values.isEnable} disabled={false}/>
<ProFormText width="md" name="remark" label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.remark', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.remark} disabled={false}/>
<ProFormDateTimePicker width="md" name="createTime" label={<FormattedMessage id="project.project.table.list.createTime" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.createTime', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.createTime} disabled={true}/>
<ProFormDateTimePicker width="md" name="updateTime" label={<FormattedMessage id="project.project.table.list.updateTime" defaultMessage="$$$"/>} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'project.project.table.list.updateTime', defaultMessage: '$$$'})}`} required={false} initialValue={props.values.updateTime} disabled={true}/>
</ProForm.Group>
</ModalForm>)}
),
},
]}
/>
<ProFormSwitch
{...formItemStyleProps}
name="isEnable"
label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
initialValue={props.values.isEnable}
disabled={false}
/>
{/* <ProFormCheckbox.Group
{...formItemStyleProps}
name="isEnable"
layout="vertical"
label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
options={[{label: '启用此项目', value: true}]}
/> */}
{/* <div style={{ width: formItemStyleProps.width, paddingBottom: 10}}>
<div>
{<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />}
</div>
<ProFormCheckbox noStyle name="isEnable"></ProFormCheckbox>
</div> */}
<ProFormText
{...formItemStyleProps}
name="remark"
label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'project.project.table.list.remark',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.remark}
disabled={false}
/>
<ProFormDateTimePicker
{...formItemStyleProps}
name="createTime"
label={
<FormattedMessage id="project.project.table.list.createTime" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'project.project.table.list.createTime',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.createTime}
disabled={true}
/>
<ProFormDateTimePicker
{...formItemStyleProps}
name="updateTime"
label={
<FormattedMessage id="project.project.table.list.updateTime" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'project.project.table.list.updateTime',
defaultMessage: '$$$',
})}`}
required={false}
initialValue={props.values.updateTime}
disabled={true}
/>
</ProForm.Group>
</ModalForm>
);
};
export default UpdateForm;

@ -7,7 +7,7 @@ import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { FooterToolbar, PageContainer, ProTable } from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess, useIntl } from '@umijs/max';
import { Button, message } from 'antd';
import { Badge, Button, message } from 'antd';
import React, { useRef, useState } from 'react';
import { ColumnDrawer } from './components/ColumnDrawer';
import MyCreateForm from './components/MyCreateForm';
@ -121,6 +121,21 @@ const ProjectList: React.FC = () => {
onFilter: true,
hideInSearch: true,
valueType: 'switch',
render: (_, item) => {
return (
<>
<Badge
status={item.isEnable ? 'success' : 'default'}
text={
<FormattedMessage
id={item.isEnable ? 'common.enable' : 'common.disable'}
defaultMessage="$$$"
/>
}
></Badge>
</>
);
},
},
{

@ -1,493 +0,0 @@
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;

@ -12,19 +12,12 @@ import {
} from '@/services/resource/ModelCategory';
import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProFormSelect,
ProFormText,
ProTable,
} 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 {ModelVersionListDrawer} from "./components/ModelVersionListDrawer";
import CreateForm from './components/CreateForm';
import { ModelVersionListDrawer } from './components/ModelVersionListDrawer';
import UpdateForm from './components/UpdateForm';
const AlgorithmModelList: React.FC = () => {
/**
@ -46,7 +39,7 @@ const AlgorithmModelList: React.FC = () => {
const intl = useIntl();
const actionRef = useRef<ActionType>();
// TODO 动态设置每页数量
const [currentPageSize, setCurrentPageSize] = useState<number>(10)
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);
@ -140,15 +133,13 @@ const AlgorithmModelList: React.FC = () => {
<>
<ProFormText
width="md"
labelCol={{span: 4}}
wrapperCol={{span: 22}}
labelCol={{ span: 4 }}
wrapperCol={{ span: 22 }}
name="id"
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}`}
required={false}
/>
</>
@ -201,8 +192,8 @@ const AlgorithmModelList: React.FC = () => {
// value 和 onchange 会通过 form 自动注入。
<ProFormSelect
width="md"
labelCol={{span: 4}}
wrapperCol={{span: 22}}
labelCol={{ span: 4 }}
wrapperCol={{ span: 22 }}
placeholder={`${intl.formatMessage({
id: 'common.please_select',
defaultMessage: '$$$',
@ -283,7 +274,7 @@ const AlgorithmModelList: React.FC = () => {
<a
key="detail"
onClick={() => {
setCurrentRow(record)
setCurrentRow(record);
setShowDetail(true);
}}
>
@ -301,10 +292,19 @@ const AlgorithmModelList: React.FC = () => {
{/* update1101 */}
<Popconfirm
placement="topLeft"
title={'提示'}
description={`确认要删除么?`}
okText="确定"
cancelText="取消"
title={(
intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })
)}
description={(
intl.formatMessage({ id: 'common.modal.table.delete.content', defaultMessage: '$$$' })
)}
okText={(
intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })
)}
cancelText={(
intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })
)}
onConfirm={() => {
handleDestroy(record).then(() => {});
}}
@ -329,7 +329,7 @@ const AlgorithmModelList: React.FC = () => {
actionRef={actionRef}
rowKey="key"
search={{
labelWidth: 120
labelWidth: 120,
}}
onDataSourceChange={(data) => {
let CategoryFkIdIds: any = data.map((v) => {
@ -340,7 +340,7 @@ const AlgorithmModelList: React.FC = () => {
pagination={{
showSizeChanger: true,
pageSize: currentPageSize,
onChange: (page, pageSize) => setCurrentPageSize(pageSize)
onChange: (page, pageSize) => setCurrentPageSize(pageSize),
}}
columnsState={{
persistenceKey: 'algorithm_model_list',
@ -355,19 +355,27 @@ const AlgorithmModelList: React.FC = () => {
onClick={async () => {
Modal.confirm({
icon: <ExclamationCircleOutlined />,
title: "确定要删除此模型吗?",
content: ("确定删除这个模型吗,删除后将无法找回,请谨慎操作"),
cancelText: '',
title: (
intl.formatMessage({ id: 'common.modal.table.delete.title', defaultMessage: '$$$' })
),
content:(
intl.formatMessage({ id: 'common.modal.table.delete.content', defaultMessage: '$$$' })
),
okText: (
intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })
),
cancelText: (
intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })
),
onOk() {
// TODO 未对接批量删除接口
deleteAlgorithmModelDeleteAlgorithmModelByIds({
ids: selectedRowsState.map((v: API.AlgorithmModel) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
});
// TODO 未对接批量删除接口
deleteAlgorithmModelDeleteAlgorithmModelByIds({
ids: selectedRowsState.map((v: API.AlgorithmModel) => {
return v.id as number;
}),
}).then(() => {
actionRef.current?.reloadAndRest?.();
});
},
onCancel() {
console.log('Cancel');

Loading…
Cancel
Save