feat: 模型列表固定表头设置批量按钮完成，遍历Vnode比对刷新节点key添加，分步表单整体样式初步完成调整
parent
7fb0fad3c3
commit
5cea7c19a5
@ -1,411 +1,506 @@
|
|||||||
import {ModalForm, ProForm, ProFormList, ProFormUploadButton} from '@ant-design/pro-components';
|
import { postDeviceGroupGetDeviceGroupTree } from '@/services/device/DeviceGroup';
|
||||||
import {ProFormText, StepsForm, ProFormTreeSelect, ProFormUploadDragger} from '@ant-design/pro-components';
|
import { postProjectCreateProject } from '@/services/project/Project';
|
||||||
|
import { postAlgorithmModelGetAlgorithmModelFkSelect } from '@/services/resource/AlgorithmModel';
|
||||||
|
import { beforeUploadFile } from '@/utils/common';
|
||||||
|
import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons';
|
||||||
import type { ProFormInstance } from '@ant-design/pro-components';
|
import type { ProFormInstance } from '@ant-design/pro-components';
|
||||||
import {postAlgorithmModelGetAlgorithmModelFkSelect} from "@/services/resource/AlgorithmModel";
|
import {
|
||||||
import {ProFormSwitch} from '@ant-design/pro-components';
|
ProForm,
|
||||||
import {FormattedMessage, useIntl} from '@umijs/max';
|
ProFormList,
|
||||||
import {postProjectCreateProject, putProjectUpdateProjectGroup} from "@/services/project/Project";
|
ProFormSwitch,
|
||||||
import React, {useState, useRef, useEffect} from 'react';
|
ProFormText,
|
||||||
import {Button, Form, message, Modal, Transfer, Tree} from 'antd';
|
ProFormUploadDragger,
|
||||||
import {Switch} from 'antd';
|
StepsForm,
|
||||||
|
} from '@ant-design/pro-components';
|
||||||
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
||||||
|
import { Modal, Switch, Transfer, Tree, message } from 'antd';
|
||||||
import type { TransferDirection } from 'antd/es/transfer';
|
import type { TransferDirection } from 'antd/es/transfer';
|
||||||
import {DataNode} from "antd/es/tree";
|
import { DataNode } from 'antd/es/tree';
|
||||||
import {postMenuGetMenuTree} from "@/services/system/Menu";
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
import {postDeviceGroupGetDeviceGroupTree} from "@/services/device/DeviceGroup";
|
|
||||||
import {CloseOutlined, SnippetsOutlined} from "@ant-design/icons";
|
|
||||||
import {beforeUploadFile, imageInit} from "@/utils/common";
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import cookie from 'react-cookies';
|
import cookie from 'react-cookies';
|
||||||
interface RecordType {
|
interface RecordType {
|
||||||
key: string;
|
key: string;
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
chosen: boolean;
|
chosen: boolean;
|
||||||
}
|
}
|
||||||
interface ProjectConfig {
|
interface ProjectConfig {
|
||||||
params: Array<object>;
|
params: Array<object>;
|
||||||
}
|
}
|
||||||
export type FormValueType = {
|
export type FormValueType = {
|
||||||
target?: string;
|
target?: string;
|
||||||
template?: string;
|
template?: string;
|
||||||
type?: string;
|
type?: string;
|
||||||
time?: string;
|
time?: string;
|
||||||
frequency?: string;
|
frequency?: string;
|
||||||
} & Partial<API.Project>;
|
} & Partial<API.Project>;
|
||||||
|
|
||||||
export type CreateFormProps = {
|
export type CreateFormProps = {
|
||||||
createModalOpen: boolean;
|
createModalOpen: boolean;
|
||||||
handleModal: ()=>void;
|
handleModal: () => void;
|
||||||
values: Partial<API.Project>;
|
values: Partial<API.Project>;
|
||||||
reload: any;
|
reload: any;
|
||||||
};
|
};
|
||||||
const waitTime = (time: number = 100) => {
|
const waitTime = (time: number = 100) => {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
resolve(true);
|
resolve(true);
|
||||||
}, time);
|
}, time);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**styles 配置 */
|
||||||
|
const formContainerWidth: number = 755
|
||||||
|
const stepFormItemStyleProps: Record<string, any> = {
|
||||||
|
width: formContainerWidth,
|
||||||
|
};
|
||||||
|
|
||||||
const treeData1: any[] = [
|
const treeData1: any[] = [
|
||||||
{
|
{
|
||||||
title: '0-0',
|
title: '0-0',
|
||||||
key: '0-0',
|
key: '0-0',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: '0-0-0',
|
||||||
|
key: '0-0-0',
|
||||||
children: [
|
children: [
|
||||||
{
|
{ title: '0-0-0-0', key: '0-0-0-0' },
|
||||||
title: '0-0-0',
|
{ title: '0-0-0-1', key: '0-0-0-1' },
|
||||||
key: '0-0-0',
|
{ title: '0-0-0-2', key: '0-0-0-2' },
|
||||||
children: [
|
|
||||||
{ title: '0-0-0-0', key: '0-0-0-0' },
|
|
||||||
{ title: '0-0-0-1', key: '0-0-0-1' },
|
|
||||||
{ title: '0-0-0-2', key: '0-0-0-2' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '0-0-1',
|
|
||||||
key: '0-0-1',
|
|
||||||
children: [
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-0' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-1' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-2' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-3' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-4' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-5' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-6' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-7' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-8' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-9' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-10' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-11' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-12' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-13' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-14' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-15' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-16' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-17' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-18' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-19' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-20' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-21' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-22' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-23' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-24' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-25' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-26' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-27' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-28' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-29' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-30' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-31' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-32' },
|
|
||||||
{ title: '0-0-1-0', key: '0-0-1-33' },
|
|
||||||
{ title: '0-0-1-1', key: '0-0-1-34' },
|
|
||||||
{ title: '0-0-1-2', key: '0-0-1-35' },
|
|
||||||
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '0-0-2',
|
|
||||||
key: '0-0-2',
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '0-1',
|
title: '0-0-1',
|
||||||
key: '0-1',
|
key: '0-0-1',
|
||||||
children: [
|
children: [
|
||||||
{ title: '0-1-0-0', key: '0-1-0-0' },
|
{ title: '0-0-1-0', key: '0-0-1-0' },
|
||||||
{ title: '0-1-0-1', key: '0-1-0-1' },
|
{ title: '0-0-1-1', key: '0-0-1-1' },
|
||||||
{ title: '0-1-0-2', key: '0-1-0-2' },
|
{ title: '0-0-1-2', key: '0-0-1-2' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-3' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-4' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-5' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-6' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-7' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-8' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-9' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-10' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-11' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-12' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-13' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-14' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-15' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-16' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-17' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-18' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-19' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-20' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-21' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-22' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-23' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-24' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-25' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-26' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-27' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-28' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-29' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-30' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-31' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-32' },
|
||||||
|
{ title: '0-0-1-0', key: '0-0-1-33' },
|
||||||
|
{ title: '0-0-1-1', key: '0-0-1-34' },
|
||||||
|
{ title: '0-0-1-2', key: '0-0-1-35' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '0-2',
|
title: '0-0-2',
|
||||||
key: '0-2',
|
key: '0-0-2',
|
||||||
},
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '0-1',
|
||||||
|
key: '0-1',
|
||||||
|
children: [
|
||||||
|
{ title: '0-1-0-0', key: '0-1-0-0' },
|
||||||
|
{ title: '0-1-0-1', key: '0-1-0-1' },
|
||||||
|
{ title: '0-1-0-2', key: '0-1-0-2' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '0-2',
|
||||||
|
key: '0-2',
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
const MyCreateForm: React.FC<CreateFormProps> = (props) => {
|
const MyCreateForm: React.FC<CreateFormProps> = (props) => {
|
||||||
const [treeData, setTreeData] = React.useState<DataNode[]>([]);
|
const [treeData, setTreeData] = React.useState<DataNode[]>([]);
|
||||||
const [modalData, setModalData] = useState<RecordType[]>([]);
|
const [modalData, setModalData] = useState<RecordType[]>([]);
|
||||||
const [targetKeys, setTargetKeys] = useState<string[]>([]);
|
const [targetKeys, setTargetKeys] = useState<string[]>([]);
|
||||||
const [selectKeys, setSelectKeys] = useState([]);
|
const [selectKeys, setSelectKeys] = useState([]);
|
||||||
const [filePath, setFilePath] = useState('')
|
const [filePath, setFilePath] = useState('');
|
||||||
const [configData, setConfigData] = useState<ProjectConfig>({params: []});
|
const [configData, setConfigData] = useState<ProjectConfig>({ params: [] });
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [isAuto, setIsAuto] = useState(true);
|
const [isAuto, setIsAuto] = useState(true);
|
||||||
const formRef = useRef<ProFormInstance>();
|
const formRef = useRef<ProFormInstance>();
|
||||||
const formRef3 = useRef<ProFormInstance>();
|
const formRef3 = useRef<ProFormInstance>();
|
||||||
const [current, setCurrent] = useState(0);
|
const [current, setCurrent] = useState(0);
|
||||||
const getModelData = () => {
|
const getModelData = () => {
|
||||||
postAlgorithmModelGetAlgorithmModelFkSelect({keyword: ''}).then((res)=>{
|
postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: '' }).then((res) => {
|
||||||
console.log(444, res);
|
console.log(444, res);
|
||||||
let result = (res.data?.list || []).map((v: any)=>{
|
let result = (res.data?.list || []).map((v: any) => {
|
||||||
return {
|
return {
|
||||||
key: v.id,
|
key: v.id,
|
||||||
title: v.name,
|
title: v.name,
|
||||||
chosen: false,
|
chosen: false,
|
||||||
}
|
};
|
||||||
})
|
});
|
||||||
setModalData(result);
|
setModalData(result);
|
||||||
})
|
});
|
||||||
// setMockData(tempMockData);
|
// setMockData(tempMockData);
|
||||||
// setTargetKeys(tempTargetKeys);
|
// setTargetKeys(tempTargetKeys);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleChange = (newTargetKeys: string[]) => {
|
const handleChange = (newTargetKeys: string[]) => {
|
||||||
setTargetKeys(newTargetKeys);
|
setTargetKeys(newTargetKeys);
|
||||||
};
|
};
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTargetKeys([])
|
setTargetKeys([]);
|
||||||
if (props.createModalOpen) {
|
if (props.createModalOpen) {
|
||||||
getModelData();
|
getModelData();
|
||||||
postDeviceGroupGetDeviceGroupTree().then((resp: API.Response)=>{
|
postDeviceGroupGetDeviceGroupTree()
|
||||||
setTreeData(resp.data.tree)
|
.then((resp: API.Response) => {
|
||||||
}).catch(()=>{})
|
setTreeData(resp.data.tree);
|
||||||
} else {
|
|
||||||
formRef.current?.resetFields()
|
|
||||||
}
|
|
||||||
}, [props.createModalOpen])
|
|
||||||
const handleSearch = (dir: TransferDirection, value: string) => {
|
|
||||||
postAlgorithmModelGetAlgorithmModelFkSelect({keyword: value}).then((res)=>{
|
|
||||||
console.log(444, res);
|
|
||||||
let result = (res.data?.list || []).map((v: any)=>{
|
|
||||||
return {
|
|
||||||
key: v.id,
|
|
||||||
title: v.name,
|
|
||||||
chosen: false,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
setModalData(result);
|
|
||||||
})
|
})
|
||||||
};
|
.catch(() => {});
|
||||||
return (
|
} else {
|
||||||
<StepsForm<{
|
formRef.current?.resetFields();
|
||||||
name: string;
|
}
|
||||||
}>
|
}, [props.createModalOpen]);
|
||||||
stepsProps={{}}
|
const handleSearch = (dir: TransferDirection, value: string) => {
|
||||||
current={current}
|
postAlgorithmModelGetAlgorithmModelFkSelect({ keyword: value }).then((res) => {
|
||||||
onCurrentChange={setCurrent}
|
console.log(444, res);
|
||||||
onFinish={async () => {
|
let result = (res.data?.list || []).map((v: any) => {
|
||||||
let formData = formRef.current?.getFieldsValue();
|
return {
|
||||||
if (formData?.name) {
|
key: v.id,
|
||||||
formData.inferConfig = {models: targetKeys, params: configData?.params || []};
|
title: v.name,
|
||||||
formData.groupIds = selectKeys;
|
chosen: false,
|
||||||
formData.projectFilePath = filePath;
|
};
|
||||||
postProjectCreateProject(formData).then(()=>{
|
});
|
||||||
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
|
setModalData(result);
|
||||||
props.handleModal();
|
});
|
||||||
props.reload()
|
};
|
||||||
}).catch(()=>{
|
return (
|
||||||
message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
|
<StepsForm<{
|
||||||
return false
|
name: string;
|
||||||
})
|
}>
|
||||||
}
|
stepsProps={{
|
||||||
return true;
|
labelPlacement: 'vertical',
|
||||||
}}
|
}}
|
||||||
formProps={{
|
current={current}
|
||||||
validateMessages: {
|
onCurrentChange={setCurrent}
|
||||||
required: '此项为必填项',
|
onFinish={async () => {
|
||||||
},
|
let formData = formRef.current?.getFieldsValue();
|
||||||
}}
|
if (formData?.name) {
|
||||||
stepsFormRender={(dom, submitter) => {
|
formData.inferConfig = { models: targetKeys, params: configData?.params || [] };
|
||||||
return (
|
formData.groupIds = selectKeys;
|
||||||
<Modal
|
formData.projectFilePath = filePath;
|
||||||
title="分步表单"
|
postProjectCreateProject(formData)
|
||||||
width={1000}
|
.then(() => {
|
||||||
onCancel={()=>{
|
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
|
||||||
setCurrent(0)
|
props.handleModal();
|
||||||
formRef.current?.resetFields()
|
props.reload();
|
||||||
formRef3.current?.resetFields()
|
})
|
||||||
props.handleModal();
|
.catch(() => {
|
||||||
}}
|
message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
|
||||||
open={props.createModalOpen}
|
return false;
|
||||||
footer={submitter}
|
});
|
||||||
destroyOnClose
|
}
|
||||||
>
|
return true;
|
||||||
{dom}
|
}}
|
||||||
</Modal>
|
formProps={{
|
||||||
);
|
validateMessages: {
|
||||||
}}
|
required: '此项为必填项',
|
||||||
>
|
},
|
||||||
|
}}
|
||||||
<StepsForm.StepForm<{
|
stepsFormRender={(dom, submitter) => {
|
||||||
name: string;
|
return (
|
||||||
}>
|
<Modal
|
||||||
name="base"
|
title="分步表单"
|
||||||
formRef={formRef}
|
width={803}
|
||||||
title="创建项目数据"
|
onCancel={() => {
|
||||||
stepProps={{
|
setCurrent(0);
|
||||||
description: '这里填入项目基本信息',
|
formRef.current?.resetFields();
|
||||||
}}
|
formRef3.current?.resetFields();
|
||||||
onFinish={async () => {
|
props.handleModal();
|
||||||
// setFormData(formRef.current?.getFieldsValue());
|
}}
|
||||||
await waitTime(500);
|
open={props.createModalOpen}
|
||||||
return true;
|
footer={submitter}
|
||||||
}}
|
destroyOnClose
|
||||||
>
|
>
|
||||||
<ProForm.Group>
|
{dom}
|
||||||
<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}
|
</Modal>
|
||||||
rules={[
|
);
|
||||||
{
|
}}
|
||||||
required: true,
|
>
|
||||||
message: (
|
{/* 创建项目数据 */}
|
||||||
<FormattedMessage
|
<StepsForm.StepForm<{
|
||||||
id="project.project.table.rule.required.name"
|
name: string;
|
||||||
defaultMessage="name is required"
|
}>
|
||||||
/>
|
name="base"
|
||||||
),
|
formRef={formRef}
|
||||||
},
|
title="创建项目数据"
|
||||||
]}
|
stepProps={{
|
||||||
/>
|
description: '这里填入项目基本信息',
|
||||||
<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={!isAuto} initialValue='' disabled={isAuto}
|
}}
|
||||||
rules={isAuto?[]:[
|
onFinish={async () => {
|
||||||
{
|
// setFormData(formRef.current?.getFieldsValue());
|
||||||
required: true,
|
await waitTime(500);
|
||||||
message: (
|
return true;
|
||||||
<FormattedMessage
|
}}
|
||||||
id="project.project.table.rule.required.code"
|
>
|
||||||
defaultMessage="code is required"
|
<ProForm.Group>
|
||||||
/>
|
<ProFormText
|
||||||
),
|
{...stepFormItemStyleProps}
|
||||||
},
|
name="name"
|
||||||
]}
|
label={<FormattedMessage id="project.project.table.list.name" defaultMessage="$$$" />}
|
||||||
addonAfter={<Switch
|
placeholder={`${intl.formatMessage({
|
||||||
checked={isAuto}
|
id: 'common.please_input',
|
||||||
checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$"/>}
|
defaultMessage: '$$$',
|
||||||
unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$"/>}
|
})}${intl.formatMessage({
|
||||||
onChange={setIsAuto}
|
id: 'project.project.table.list.name',
|
||||||
/>}/>
|
defaultMessage: '$$$',
|
||||||
<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}
|
})}`}
|
||||||
rules={[
|
required={true}
|
||||||
{
|
rules={[
|
||||||
required: true,
|
{
|
||||||
message: (
|
required: true,
|
||||||
<FormattedMessage
|
message: (
|
||||||
id="project.project.table.rule.required.info"
|
<FormattedMessage
|
||||||
defaultMessage="info is required"
|
id="project.project.table.rule.required.name"
|
||||||
/>
|
defaultMessage="name is required"
|
||||||
),
|
/>
|
||||||
},
|
),
|
||||||
]}
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<ProFormText
|
||||||
|
width={680}
|
||||||
|
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={!isAuto}
|
||||||
|
initialValue=""
|
||||||
|
disabled={isAuto}
|
||||||
|
rules={
|
||||||
|
isAuto
|
||||||
|
? []
|
||||||
|
: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: (
|
||||||
|
<FormattedMessage
|
||||||
|
id="project.project.table.rule.required.code"
|
||||||
|
defaultMessage="code is required"
|
||||||
/>
|
/>
|
||||||
<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}/>
|
),
|
||||||
</ProForm.Group>
|
},
|
||||||
<ProForm.Group>
|
]
|
||||||
<ProFormSwitch width="md" name="isEnable" label={<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$"/>} initialValue={true}/>
|
}
|
||||||
</ProForm.Group>
|
addonAfter={
|
||||||
|
<Switch
|
||||||
</StepsForm.StepForm>
|
checked={isAuto}
|
||||||
<StepsForm.StepForm<{
|
checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
|
||||||
model: string;
|
unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
|
||||||
}>
|
onChange={setIsAuto}
|
||||||
name="model"
|
/>
|
||||||
title="关联算法模型"
|
}
|
||||||
stepProps={{
|
/>
|
||||||
description: '选择算法模型',
|
<ProFormText
|
||||||
}}
|
{...stepFormItemStyleProps}
|
||||||
onFinish={async () => {
|
name="info"
|
||||||
return true;
|
label={<FormattedMessage id="project.project.table.list.info" defaultMessage="$$$" />}
|
||||||
}}
|
placeholder={`${intl.formatMessage({
|
||||||
>
|
id: 'common.please_input',
|
||||||
|
defaultMessage: '$$$',
|
||||||
<Transfer
|
})}${intl.formatMessage({
|
||||||
dataSource={modalData}
|
id: 'project.project.table.list.info',
|
||||||
showSearch
|
defaultMessage: '$$$',
|
||||||
locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }}
|
})}`}
|
||||||
targetKeys={targetKeys}
|
required={true}
|
||||||
onChange={handleChange}
|
rules={[
|
||||||
onSearch={handleSearch}
|
{
|
||||||
style={{marginBottom: '20px'}}
|
required: true,
|
||||||
render={(item) => item.title}
|
message: (
|
||||||
/>
|
<FormattedMessage
|
||||||
</StepsForm.StepForm>
|
id="project.project.table.rule.required.info"
|
||||||
<StepsForm.StepForm<{
|
defaultMessage="info is required"
|
||||||
project_file: string;
|
/>
|
||||||
}>
|
),
|
||||||
name="project_file"
|
},
|
||||||
title="上传业务代码"
|
]}
|
||||||
stepProps={{
|
/>
|
||||||
description: '上传业务代码格式为(.zip,.tar.gz)',
|
<ProFormText
|
||||||
}}
|
{...stepFormItemStyleProps}
|
||||||
onFinish={async (values:any) => {
|
name="remark"
|
||||||
if ('projectFilePath' in values && values['projectFilePath'].length > 0) {
|
label={<FormattedMessage id="project.project.table.list.remark" defaultMessage="$$$" />}
|
||||||
let projectFilePath = values['projectFilePath'][0]?.response?.data?.path || ''
|
placeholder={`${intl.formatMessage({
|
||||||
setFilePath(projectFilePath) }
|
id: 'common.please_input',
|
||||||
return true;
|
defaultMessage: '$$$',
|
||||||
}}
|
})}${intl.formatMessage({
|
||||||
>
|
id: 'project.project.table.list.remark',
|
||||||
<ProFormUploadDragger label="上传文件" name="projectFilePath" action="/api/v1/file/uploadFile" max={1}
|
defaultMessage: '$$$',
|
||||||
fieldProps={{name: 'file', beforeUpload: beforeUploadFile, data: {path: 'project/files'},
|
})}`}
|
||||||
headers: { 'X-CSRFToken': cookie.load('csrftoken') , Authorization: `Bearer ${localStorage.getItem('access') || ''}`},}}
|
required={false}
|
||||||
/>
|
/>
|
||||||
</StepsForm.StepForm>
|
</ProForm.Group>
|
||||||
<StepsForm.StepForm<{
|
<ProForm.Group>
|
||||||
config: string;
|
<ProFormSwitch
|
||||||
}>
|
width="lg"
|
||||||
name="config"
|
name="isEnable"
|
||||||
title="业务参数配置"
|
label={
|
||||||
stepProps={{
|
<FormattedMessage id="project.project.table.list.isEnable" defaultMessage="$$$" />
|
||||||
description: '业务参数配置',
|
}
|
||||||
}}
|
initialValue={true}
|
||||||
onFinish={async (values: any) => {
|
/>
|
||||||
setConfigData(values)
|
</ProForm.Group>
|
||||||
return true;
|
</StepsForm.StepForm>
|
||||||
}}
|
{/* 关联算法模型 */}
|
||||||
>
|
<StepsForm.StepForm<{
|
||||||
<ProFormList
|
model: string;
|
||||||
copyIconProps={{
|
}>
|
||||||
Icon: SnippetsOutlined,
|
name="model"
|
||||||
}}
|
title="关联算法模型"
|
||||||
deleteIconProps={{
|
stepProps={{
|
||||||
Icon: CloseOutlined,
|
description: '选择算法模型',
|
||||||
}}
|
}}
|
||||||
name="params"
|
onFinish={async () => {
|
||||||
label="模型参数"
|
return true;
|
||||||
initialValue={[
|
}}
|
||||||
]}
|
>
|
||||||
>
|
<Transfer
|
||||||
<ProForm.Group>
|
dataSource={modalData}
|
||||||
<ProFormText key="name" name="name" label="键名" />
|
showSearch
|
||||||
<ProFormText key="default" name="default" label="默认值" />
|
titles={['未选模型', '已选模型']}
|
||||||
<ProFormText key="remark" name="remark" label="备注" />
|
|
||||||
</ProForm.Group>
|
|
||||||
|
|
||||||
</ProFormList>
|
locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }}
|
||||||
</StepsForm.StepForm>
|
targetKeys={targetKeys}
|
||||||
<StepsForm.StepForm<{
|
onChange={handleChange}
|
||||||
group: string;
|
onSearch={handleSearch}
|
||||||
}>
|
style={{ marginBottom: '20px' }}
|
||||||
name="group"
|
listStyle={{width: 289, height: 300}}
|
||||||
title="关联网点"
|
operationStyle={{width: 100, alignItems: 'center'}}
|
||||||
stepProps={{
|
render={(item) => item.title}
|
||||||
description: '选择网点',
|
/>
|
||||||
}}
|
</StepsForm.StepForm>
|
||||||
onFinish={async () => {
|
{/* 上传业务代码 */}
|
||||||
return true;
|
<StepsForm.StepForm<{
|
||||||
}}
|
project_file: string;
|
||||||
formRef={formRef3}
|
}>
|
||||||
>
|
name="project_file"
|
||||||
<Tree
|
title="上传业务代码"
|
||||||
checkable
|
style={{width: stepFormItemStyleProps.width}}
|
||||||
defaultExpandAll={true}
|
stepProps={{
|
||||||
defaultCheckedKeys={[]}
|
description: '上传业务代码格式为(.zip,.tar.gz)',
|
||||||
autoExpandParent={true}
|
}}
|
||||||
onCheck={(checkedKeys:any) => {
|
onFinish={async (values: any) => {
|
||||||
// form.setFieldsValue({menuIds: checkedKeys})
|
if ('projectFilePath' in values && values['projectFilePath'].length > 0) {
|
||||||
setSelectKeys(checkedKeys)
|
let projectFilePath = values['projectFilePath'][0]?.response?.data?.path || '';
|
||||||
// formRef3.current?.setFieldValue('groupIds', checkedKeys)
|
setFilePath(projectFilePath);
|
||||||
}}
|
}
|
||||||
treeData={treeData}
|
return true;
|
||||||
// loadData={({treeNode}) => {
|
}}
|
||||||
// return treeData
|
>
|
||||||
// }}
|
<ProFormUploadDragger
|
||||||
/>
|
label="上传文件"
|
||||||
</StepsForm.StepForm>
|
name="projectFilePath"
|
||||||
</StepsForm>
|
action="/api/v1/file/uploadFile"
|
||||||
)
|
max={1}
|
||||||
}
|
fieldProps={{
|
||||||
|
name: 'file',
|
||||||
|
beforeUpload: beforeUploadFile,
|
||||||
|
data: { path: 'project/files' },
|
||||||
|
headers: {
|
||||||
|
'X-CSRFToken': cookie.load('csrftoken'),
|
||||||
|
Authorization: `Bearer ${localStorage.getItem('access') || ''}`,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
{/* 业务参数配置 */}
|
||||||
|
<StepsForm.StepForm<{
|
||||||
|
config: string;
|
||||||
|
}>
|
||||||
|
name="config"
|
||||||
|
title="业务参数配置"
|
||||||
|
stepProps={{
|
||||||
|
description: '业务参数配置',
|
||||||
|
}}
|
||||||
|
onFinish={async (values: any) => {
|
||||||
|
setConfigData(values);
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* <Icon type="delete" /> */}
|
||||||
|
{/* TODO 图标需要替换 */}
|
||||||
|
<ProFormList
|
||||||
|
style={{width: stepFormItemStyleProps.width}}
|
||||||
|
copyIconProps={{
|
||||||
|
Icon: SnippetsOutlined,
|
||||||
|
}}
|
||||||
|
deleteIconProps={{
|
||||||
|
Icon: CloseOutlined,
|
||||||
|
}}
|
||||||
|
name="params"
|
||||||
|
label="模型参数"
|
||||||
|
initialValue={[]}
|
||||||
|
>
|
||||||
|
<ProForm.Group>
|
||||||
|
<ProFormText key="name" name="name" label="键名" />
|
||||||
|
<ProFormText key="default" name="default" label="默认值" />
|
||||||
|
<ProFormText key="remark" name="remark" label="备注" />
|
||||||
|
</ProForm.Group>
|
||||||
|
</ProFormList>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
{/* 关联网点 */}
|
||||||
|
<StepsForm.StepForm<{
|
||||||
|
group: string;
|
||||||
|
}>
|
||||||
|
name="group"
|
||||||
|
title="关联网点"
|
||||||
|
stepProps={{
|
||||||
|
description: '选择网点',
|
||||||
|
}}
|
||||||
|
onFinish={async () => {
|
||||||
|
return true;
|
||||||
|
}}
|
||||||
|
style={{width: stepFormItemStyleProps.width}}
|
||||||
|
formRef={formRef3}
|
||||||
|
>
|
||||||
|
<div style={{paddingBottom: 10}}>{'选择网点'}</div>
|
||||||
|
<Tree
|
||||||
|
checkable
|
||||||
|
defaultExpandAll={true}
|
||||||
|
defaultCheckedKeys={[]}
|
||||||
|
autoExpandParent={true}
|
||||||
|
onCheck={(checkedKeys: any) => {
|
||||||
|
// form.setFieldsValue({menuIds: checkedKeys})
|
||||||
|
setSelectKeys(checkedKeys);
|
||||||
|
// formRef3.current?.setFieldValue('groupIds', checkedKeys)
|
||||||
|
}}
|
||||||
|
treeData={treeData}
|
||||||
|
// loadData={({treeNode}) => {
|
||||||
|
// return treeData
|
||||||
|
// }}
|
||||||
|
/>
|
||||||
|
</StepsForm.StepForm>
|
||||||
|
</StepsForm>
|
||||||
|
);
|
||||||
|
};
|
||||||
export default MyCreateForm;
|
export default MyCreateForm;
|
||||||
|
|||||||
@ -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