|
|
|
|
@ -0,0 +1,464 @@
|
|
|
|
|
import { FormUploadDraggerToken } from '@/components/UploadFile';
|
|
|
|
|
import { apiEntityNodes } from '@/services/business/entity';
|
|
|
|
|
import { apiModelDeploymentEdit } from '@/services/business/model';
|
|
|
|
|
import { isSuccessApi } from '@/utils/forApi';
|
|
|
|
|
import {
|
|
|
|
|
ProForm,
|
|
|
|
|
ProFormInstance,
|
|
|
|
|
ProFormText,
|
|
|
|
|
ProFormTextArea,
|
|
|
|
|
StepsForm,
|
|
|
|
|
} from '@ant-design/pro-components';
|
|
|
|
|
import { FormattedMessage, useIntl } from '@umijs/max';
|
|
|
|
|
import { Modal, Transfer, Tree, message } from 'antd';
|
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
|
import {
|
|
|
|
|
proFormMaxItemStyleProps,
|
|
|
|
|
proFormMaxModelWidth,
|
|
|
|
|
proFormStepsFormProps,
|
|
|
|
|
} from '../../../../../config/defaultForm';
|
|
|
|
|
// import {beforeUploadFile} from "@/utils/common";
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
import { apiModelListSimple } from '@/services/business/model';
|
|
|
|
|
import { mathExtractIds } from '@/utils/forMath';
|
|
|
|
|
import { isArrayAndNotEmpty } from '@/utils/is';
|
|
|
|
|
|
|
|
|
|
export type UpdateFormProps = {
|
|
|
|
|
updateModalOpen: boolean;
|
|
|
|
|
handleModal: () => void;
|
|
|
|
|
commInfo: Record<string, any>;
|
|
|
|
|
values: Record<string, any>;
|
|
|
|
|
reload: any;
|
|
|
|
|
};
|
|
|
|
|
const waitTime = (time: number = 100) => {
|
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
resolve(true);
|
|
|
|
|
}, time);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
|
|
|
|
|
const intl = useIntl();
|
|
|
|
|
// state
|
|
|
|
|
const [currFormData, setCurrFormData] = useState<Record<string, any>>({});
|
|
|
|
|
|
|
|
|
|
// 关联模型state
|
|
|
|
|
const [modalData, setModalData] = useState<RecordType[]>([]);
|
|
|
|
|
const [modelLinkKeys, setModelLinkKeys] = useState<string[]>([]);
|
|
|
|
|
|
|
|
|
|
// 关联节点state
|
|
|
|
|
const [deviceTreeList, setDeviceTreeList] = useState<Record<string, any>[]>([]);
|
|
|
|
|
const [deviceLinkKeys, setDeviceLinkKeys] = useState([]);
|
|
|
|
|
|
|
|
|
|
// const [form] = Form.useForm<API.ModelVersion>();
|
|
|
|
|
const [current, setCurrent] = useState(0);
|
|
|
|
|
const formRef = useRef<ProFormInstance>();
|
|
|
|
|
|
|
|
|
|
// 获取所有模型选项
|
|
|
|
|
const loadModelData = async () => {
|
|
|
|
|
const resp = await apiModelListSimple();
|
|
|
|
|
if (isSuccessApi(resp) && resp?.data) {
|
|
|
|
|
console.log('apiModelListSimple_resp', resp.data);
|
|
|
|
|
let result = (resp.data?.result || []).map((v: any) => {
|
|
|
|
|
console.log(v);
|
|
|
|
|
return {
|
|
|
|
|
key: v.id,
|
|
|
|
|
title: v.name,
|
|
|
|
|
chosen: false,
|
|
|
|
|
disabled: false,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
setModalData(result);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
// 设备节点树
|
|
|
|
|
async function loadDeviceTree() {
|
|
|
|
|
const resp = await apiEntityNodes({ entity_id: props.commInfo.id });
|
|
|
|
|
if (isSuccessApi(resp)) {
|
|
|
|
|
setDeviceTreeList(resp?.data.data);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleChange = (newTargetKeys: string[]) => {
|
|
|
|
|
console.log(newTargetKeys, 'newTargetKeys');
|
|
|
|
|
setModelLinkKeys(newTargetKeys);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function resetForm() {
|
|
|
|
|
setCurrFormData({});
|
|
|
|
|
formRef.current?.resetFields();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 处理其它表单内容
|
|
|
|
|
function setOthersData() {
|
|
|
|
|
const { basemodel_list, link_node_list } = props.values;
|
|
|
|
|
console.log('mathExtractIds', mathExtractIds(basemodel_list));
|
|
|
|
|
const currModelLinkKeys = mathExtractIds(basemodel_list);
|
|
|
|
|
if (isArrayAndNotEmpty(currModelLinkKeys)) {
|
|
|
|
|
handleChange(currModelLinkKeys);
|
|
|
|
|
}
|
|
|
|
|
const currLinkNodeList = mathExtractIds(link_node_list, 'node_id');
|
|
|
|
|
console.log(currLinkNodeList, 'currLinkNodeList');
|
|
|
|
|
if (isArrayAndNotEmpty(currLinkNodeList)) {
|
|
|
|
|
setDeviceLinkKeys(currLinkNodeList);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
setModelLinkKeys([]);
|
|
|
|
|
// 初始化赋值
|
|
|
|
|
if (props.updateModalOpen && props.values?.id) {
|
|
|
|
|
loadModelData();
|
|
|
|
|
loadDeviceTree();
|
|
|
|
|
setCurrFormData({
|
|
|
|
|
...props.values,
|
|
|
|
|
business_logic: props.values?.business_logic_md5,
|
|
|
|
|
business_conf_file: props.values?.business_conf_md5,
|
|
|
|
|
});
|
|
|
|
|
setOthersData();
|
|
|
|
|
console.log(props.values, 'useEffect_values', currFormData);
|
|
|
|
|
} else {
|
|
|
|
|
resetForm();
|
|
|
|
|
}
|
|
|
|
|
}, [props.updateModalOpen, props.values]);
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<StepsForm<{
|
|
|
|
|
name: string;
|
|
|
|
|
}>
|
|
|
|
|
onFinish={async (values) => {
|
|
|
|
|
console.log('All form values:', values, {
|
|
|
|
|
...currFormData,
|
|
|
|
|
entity_id: props.commInfo.id,
|
|
|
|
|
basemodel_ids: modelLinkKeys,
|
|
|
|
|
link_node_ids: deviceLinkKeys,
|
|
|
|
|
});
|
|
|
|
|
// 在这里处理提交数据，例如调用API
|
|
|
|
|
let resp = await apiModelDeploymentEdit({
|
|
|
|
|
...values,
|
|
|
|
|
id: props.values?.id,
|
|
|
|
|
entity_id: props.commInfo.id,
|
|
|
|
|
basemodel_ids: isArrayAndNotEmpty(modelLinkKeys) ? modelLinkKeys.join(',') : '',
|
|
|
|
|
business_logic: currFormData?.business_logic,
|
|
|
|
|
business_conf_file: currFormData?.business_conf_file,
|
|
|
|
|
link_node_ids: isArrayAndNotEmpty(deviceLinkKeys) ? deviceLinkKeys.join(',') : '',
|
|
|
|
|
});
|
|
|
|
|
if (isSuccessApi(resp)) {
|
|
|
|
|
message.success(
|
|
|
|
|
intl.formatMessage({ id: 'common.action.success', defaultMessage: '$$$' }),
|
|
|
|
|
);
|
|
|
|
|
props.reload();
|
|
|
|
|
props.handleModal();
|
|
|
|
|
} else {
|
|
|
|
|
message.error(
|
|
|
|
|
resp?.meta?.message ||
|
|
|
|
|
intl.formatMessage({ id: 'common.action.failure', defaultMessage: '$$$' }),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
}}
|
|
|
|
|
stepsProps={proFormStepsFormProps.stepsProps}
|
|
|
|
|
current={current}
|
|
|
|
|
onCurrentChange={setCurrent}
|
|
|
|
|
formProps={{
|
|
|
|
|
validateMessages: {
|
|
|
|
|
required: `${intl.formatMessage({
|
|
|
|
|
id: 'common.form.required',
|
|
|
|
|
defaultMessage: '此项为必填项',
|
|
|
|
|
})}`,
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
stepsFormRender={(dom, submitter) => {
|
|
|
|
|
return (
|
|
|
|
|
<Modal
|
|
|
|
|
className="gn_model_steps_form"
|
|
|
|
|
title={
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id="business_model.table.list.action.edit"
|
|
|
|
|
defaultMessage="编辑"
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
width={proFormMaxModelWidth}
|
|
|
|
|
onCancel={() => {
|
|
|
|
|
setCurrent(0);
|
|
|
|
|
formRef.current?.resetFields();
|
|
|
|
|
props.handleModal();
|
|
|
|
|
}}
|
|
|
|
|
open={props.updateModalOpen}
|
|
|
|
|
footer={submitter}
|
|
|
|
|
destroyOnClose
|
|
|
|
|
>
|
|
|
|
|
{dom}
|
|
|
|
|
</Modal>
|
|
|
|
|
);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{/* 基本信息 数据创建 */}
|
|
|
|
|
<StepsForm.StepForm<{
|
|
|
|
|
name: string;
|
|
|
|
|
}>
|
|
|
|
|
className="gn_form"
|
|
|
|
|
name="base"
|
|
|
|
|
formRef={formRef}
|
|
|
|
|
title={<FormattedMessage id="business_model.stepForm.base" defaultMessage="基本信息" />}
|
|
|
|
|
stepProps={{
|
|
|
|
|
description: (
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id="business_model.stepForm.base.description"
|
|
|
|
|
defaultMessage="填写基础信息"
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
}}
|
|
|
|
|
onFinish={async () => {
|
|
|
|
|
// setFormData(formRef.current?.getFieldsValue());
|
|
|
|
|
await waitTime(500);
|
|
|
|
|
return true;
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<ProForm.Group>
|
|
|
|
|
<ProFormText
|
|
|
|
|
width={proFormMaxItemStyleProps.width}
|
|
|
|
|
name="name"
|
|
|
|
|
label={<FormattedMessage id="business_model.form.modelFkId" defaultMessage="名称" />}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_input',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({
|
|
|
|
|
id: 'business_model.form.modelFkId',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}`}
|
|
|
|
|
required={true}
|
|
|
|
|
initialValue={currFormData?.name}
|
|
|
|
|
rules={[
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: (
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id="model_index.create.form.rule.required.name"
|
|
|
|
|
defaultMessage="name is required"
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
<ProFormTextArea
|
|
|
|
|
width={proFormMaxItemStyleProps.width}
|
|
|
|
|
name="comment"
|
|
|
|
|
label={<FormattedMessage id="business_model.form.remark" defaultMessage="简介" />}
|
|
|
|
|
placeholder={`${intl.formatMessage({
|
|
|
|
|
id: 'common.please_input',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}${intl.formatMessage({
|
|
|
|
|
id: 'business_model.form.remark',
|
|
|
|
|
defaultMessage: '$$$',
|
|
|
|
|
})}`}
|
|
|
|
|
initialValue={currFormData?.comment}
|
|
|
|
|
required={false}
|
|
|
|
|
/>
|
|
|
|
|
</ProForm.Group>
|
|
|
|
|
</StepsForm.StepForm>
|
|
|
|
|
{/* 关联算法模型 */}
|
|
|
|
|
<StepsForm.StepForm<{
|
|
|
|
|
model: string;
|
|
|
|
|
}>
|
|
|
|
|
name="baseModel"
|
|
|
|
|
title={
|
|
|
|
|
<FormattedMessage id="business_model.stepForm.baseModel" defaultMessage="关联模型" />
|
|
|
|
|
}
|
|
|
|
|
stepProps={{
|
|
|
|
|
description: (
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id="business_model.stepForm.baseModel.description"
|
|
|
|
|
defaultMessage="关联基础模型"
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
}}
|
|
|
|
|
onFinish={async () => {
|
|
|
|
|
if (modelLinkKeys.length === 0) {
|
|
|
|
|
message.warning('请至少选择一项内容');
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return true;
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<Transfer
|
|
|
|
|
dataSource={modalData}
|
|
|
|
|
titles={['基础模型库', '已选模型']}
|
|
|
|
|
locale={{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }}
|
|
|
|
|
targetKeys={modelLinkKeys}
|
|
|
|
|
onChange={handleChange}
|
|
|
|
|
// onSearch={handleSearch}
|
|
|
|
|
style={{ marginBottom: '20px' }}
|
|
|
|
|
listStyle={{ width: 410, height: 300 }}
|
|
|
|
|
operationStyle={{ width: 50, alignItems: 'center' }}
|
|
|
|
|
render={(item) => item.title}
|
|
|
|
|
/>
|
|
|
|
|
</StepsForm.StepForm>
|
|
|
|
|
{/* 业务代码 */}
|
|
|
|
|
<StepsForm.StepForm<{
|
|
|
|
|
project_file: string;
|
|
|
|
|
}>
|
|
|
|
|
className="gn_form"
|
|
|
|
|
name="project_file"
|
|
|
|
|
title={
|
|
|
|
|
<FormattedMessage id="business_model.stepForm.project_file" defaultMessage="业务代码" />
|
|
|
|
|
}
|
|
|
|
|
style={{ width: proFormMaxItemStyleProps.width }}
|
|
|
|
|
stepProps={{
|
|
|
|
|
description: (
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id="business_model.stepForm.project_file.description"
|
|
|
|
|
defaultMessage="上传业务代码"
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<FormUploadDraggerToken
|
|
|
|
|
proFieldProps={{
|
|
|
|
|
label: (
|
|
|
|
|
<div className="flex">
|
|
|
|
|
<span className="font-bold">上传业务代码</span>
|
|
|
|
|
<div style={{ color: '#666666' }}>（请上传格式为zip.tar.gz的模型文件）</div>
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
title: (
|
|
|
|
|
<div className="gn_uploadfile_title py-[16px] text1 text-center">
|
|
|
|
|
<span>拖拽文件到这里，或</span>
|
|
|
|
|
<a>点此添加</a>
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
description: '',
|
|
|
|
|
icon: <i className="iconfont icon-shangchuanwenjian text_primary text-[32px]"></i>,
|
|
|
|
|
name: 'business_logic_arr',
|
|
|
|
|
max: 1,
|
|
|
|
|
initialValue: currFormData?.business_logic_md5
|
|
|
|
|
? [
|
|
|
|
|
{
|
|
|
|
|
uid: currFormData?.business_logic_md5,
|
|
|
|
|
name: currFormData?.business_logic_name || currFormData?.business_logic_md5,
|
|
|
|
|
status: 'done',
|
|
|
|
|
url: '/file/' + currFormData?.business_logic_md5,
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
: [],
|
|
|
|
|
}}
|
|
|
|
|
afterUploadFile={({ resp }) => {
|
|
|
|
|
setCurrFormData((data) => {
|
|
|
|
|
return { ...data, business_logic: resp?.data?.result };
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
afterRemoveFile={() => {
|
|
|
|
|
setCurrFormData((data) => {
|
|
|
|
|
return { ...data, business_logic: '' };
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
openPreviewFile={true}
|
|
|
|
|
/>
|
|
|
|
|
</StepsForm.StepForm>
|
|
|
|
|
{/* 参数配置 */}
|
|
|
|
|
<StepsForm.StepForm<{
|
|
|
|
|
config: string;
|
|
|
|
|
}>
|
|
|
|
|
className="gn_form"
|
|
|
|
|
name="config"
|
|
|
|
|
title={<FormattedMessage id="business_model.stepForm.config" defaultMessage="参数配置" />}
|
|
|
|
|
stepProps={{
|
|
|
|
|
description: (
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id="business_model.stepForm.config.description"
|
|
|
|
|
defaultMessage="配置业务参数"
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
}}
|
|
|
|
|
onFinish={async (values: any) => {
|
|
|
|
|
console.log(values, 'config_values');
|
|
|
|
|
return true;
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<FormUploadDraggerToken
|
|
|
|
|
proFieldProps={{
|
|
|
|
|
label: (
|
|
|
|
|
<div className="flex">
|
|
|
|
|
<span className="font-bold">上传配置文件</span>
|
|
|
|
|
<div style={{ color: '#666666' }}>（请上传格式为.json.yaml.yml的模型文件）</div>
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
title: (
|
|
|
|
|
<div className="gn_uploadfile_title py-[16px] text1 text-center">
|
|
|
|
|
<span>拖拽文件到这里，或</span>
|
|
|
|
|
<a>点此添加</a>
|
|
|
|
|
</div>
|
|
|
|
|
),
|
|
|
|
|
description: '',
|
|
|
|
|
icon: <i className="iconfont icon-shangchuanwenjian text_primary text-[32px]"></i>,
|
|
|
|
|
name: 'business_conf_file_arr',
|
|
|
|
|
max: 1,
|
|
|
|
|
initialValue: currFormData?.business_conf_md5
|
|
|
|
|
? [
|
|
|
|
|
{
|
|
|
|
|
uid: currFormData?.business_conf_md5,
|
|
|
|
|
name: currFormData?.business_conf_name || currFormData?.business_conf_md5,
|
|
|
|
|
status: 'done',
|
|
|
|
|
url: '/file/' + currFormData?.business_conf_md5,
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
: [],
|
|
|
|
|
}}
|
|
|
|
|
afterUploadFile={({ resp }) => {
|
|
|
|
|
setCurrFormData((data) => {
|
|
|
|
|
return { ...data, business_conf_file: resp?.data?.result };
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
afterRemoveFile={() => {
|
|
|
|
|
setCurrFormData((data) => {
|
|
|
|
|
return { ...data, business_conf_file: '' };
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
openPreviewFile={true}
|
|
|
|
|
/>
|
|
|
|
|
</StepsForm.StepForm>
|
|
|
|
|
{/* 关联节点 */}
|
|
|
|
|
<StepsForm.StepForm<{
|
|
|
|
|
group: string;
|
|
|
|
|
}>
|
|
|
|
|
name="group"
|
|
|
|
|
title={<FormattedMessage id="business_model.stepForm.group" defaultMessage="关联节点" />}
|
|
|
|
|
stepProps={{
|
|
|
|
|
description: (
|
|
|
|
|
<FormattedMessage
|
|
|
|
|
id="business_model.stepForm.group.description"
|
|
|
|
|
defaultMessage="关联相关设备节点"
|
|
|
|
|
/>
|
|
|
|
|
),
|
|
|
|
|
}}
|
|
|
|
|
onFinish={async () => {
|
|
|
|
|
return true;
|
|
|
|
|
}}
|
|
|
|
|
style={{ width: proFormMaxItemStyleProps.width }}
|
|
|
|
|
>
|
|
|
|
|
<div style={{ paddingBottom: 10, fontWeight: 700 }}>{'节点信息'}</div>
|
|
|
|
|
<Tree
|
|
|
|
|
fieldNames={{
|
|
|
|
|
title: 'name',
|
|
|
|
|
key: 'id',
|
|
|
|
|
children: 'children',
|
|
|
|
|
}}
|
|
|
|
|
checkable
|
|
|
|
|
defaultExpandAll={true}
|
|
|
|
|
checkedKeys={deviceLinkKeys}
|
|
|
|
|
autoExpandParent={true}
|
|
|
|
|
onCheck={(checkedKeys: any) => {
|
|
|
|
|
// form.setFieldsValue({menuIds: checkedKeys})
|
|
|
|
|
console.log(checkedKeys, 'checkedKeys');
|
|
|
|
|
setDeviceLinkKeys(checkedKeys);
|
|
|
|
|
// formRef3.current?.setFieldValue('groupIds', checkedKeys)
|
|
|
|
|
}}
|
|
|
|
|
treeData={deviceTreeList}
|
|
|
|
|
/>
|
|
|
|
|
</StepsForm.StepForm>
|
|
|
|
|
</StepsForm>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
export default UpdateForm;
|
