General-AI-Platform-Web/src/pages/Business/BusinessModel/components/createForm.tsx

import { FormUploadDraggerToken } from '@/components/UploadFile';
import { apiEntityNodes } from '@/services/business/entity';
import { apiModelDeploymentAdd } 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 { isArrayAndNotEmpty } from '@/utils/is';

export type CreateFormProps = {
  createModalOpen: boolean;
  handleModal: () => void;
  commInfo: Record<string, any>;
  reload: any;
};
const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const CreateForm: React.FC<CreateFormProps> = (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);
  };

  useEffect(() => {
    setModelLinkKeys([]);
    console.log('deviceLinkKeys', deviceLinkKeys);
    if (props.createModalOpen) {
      loadModelData();
      loadDeviceTree();
    } else {
      formRef.current?.resetFields();
    }
  }, [props.createModalOpen]);

  // test 测试数据
  useEffect(() => {
    //  初始化赋值
    setCurrFormData({
      name: '晶圆检测工艺00',
      comment:
        '测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注测试一下备注',
    });
  }, [props.createModalOpen]);
  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 apiModelDeploymentAdd({
            ...values,
            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.add.name" defaultMessage="新增" />
              }
              width={proFormMaxModelWidth}
              onCancel={() => {
                setCurrent(0);
                formRef.current?.resetFields();
                props.handleModal();
              }}
              open={props.createModalOpen}
              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 () => {
            return true;
          }}
        >
          {/* //TODO 此项校验必填 与UI确定调整尺寸布局 */}
          <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,
            }}
            afterUploadFile={({ resp }) => {
              setCurrFormData((data) => {
                return { ...data, business_logic: resp?.data?.result };
              });
            }}
            afterRemoveFile={() => {
              setCurrFormData((data) => {
                return { ...data, business_logic: '' };
              });
            }}
          />
        </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,
            }}
            afterUploadFile={({ resp }) => {
              setCurrFormData((data) => {
                return { ...data, business_conf_file: resp?.data?.result };
              });
            }}
            afterRemoveFile={() => {
              setCurrFormData((data) => {
                return { ...data, business_conf_file: '' };
              });
            }}
          />

          {/* //TODO 补充json文件上传预览
           */}
        </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}
            defaultCheckedKeys={[]}
            autoExpandParent={true}
            onCheck={(checkedKeys: any) => {
              // form.setFieldsValue({menuIds: checkedKeys})
              setDeviceLinkKeys(checkedKeys);
              // formRef3.current?.setFieldValue('groupIds', checkedKeys)
            }}
            treeData={deviceTreeList}
          />
        </StepsForm.StepForm>
      </StepsForm>
    </div>
  );
};
export default CreateForm;