General-AI-Platform-Web/src/pages/Business/DeviceGroup/components/modelDeployConfig.tsx

/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-04-08 16:57:30
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-05-15 15:01:35
 * @FilePath: \general-ai-manage\src\pages\Project\BusinessProject\components\detailServerState.tsx
 * @Description: 服务器详情
 * @交互说明
 *
 */
import { getAllDeviceList } from '@/services/testApi/device';
import { ProCard, ProColumns, ProDescriptions, ProTable } from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Modal } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { proFormSmallModelWidth } from '../../../../../config/defaultForm';

type ModelDeployConfigProps = {
  info: Record<string, any>;
  detailOpen: boolean;
  closeModal: () => void;
};

const ModelDeployConfig: React.FC<ModelDeployConfigProps> = ({ info, detailOpen, closeModal }) => {
  /**state */
  const intl = useIntl();
  const [selectedRows, setSelectedRows] = useState<Record<string, any>[]>([]);
  const actionRef = useRef();
  // 基础配置信息
  const detailColumns = [
    {
      title: (
        <FormattedMessage
          id="business_model.deploy.config.bussnessName"
          defaultMessage="业务名称"
        />
      ),
      dataIndex: 'bussnessName',
    },
    {
      title: <FormattedMessage id="business_model.deploy.config.remark" defaultMessage="简介" />,
      dataIndex: 'remark',
    },
    {
      title: (
        <FormattedMessage
          id="business_model.deploy.config.linkModels"
          defaultMessage="关联基础模型"
        />
      ),
      dataIndex: 'linkModels',
      render: (_, record) => {
        return (
          <ul className="flex flex-wrap">
            {record?.linkModels?.map((item, index) => {
              return (
                <li
                  className={`text_primary primary_border rounded-[2px] px-[8px] mb-[8px] ${
                    index !== 0 ? 'ml-[8px]' : ''
                  }`}
                  key={item.id}
                >
                  {item.name}
                </li>
              );
            })}
          </ul>
        );
      },
    },
  ];

  // 模型列表信息
  const columns: ProColumns<Record<string, any>>[] = [
    {
      title: (
        <FormattedMessage id="business_model.deploy.config.table.name" defaultMessage="设备名称" />
      ),
      dataIndex: 'name',
      hideInSearch: true,
      key: 'fixedName',
      fixed: 'left',
      width: '55%',
    },
    {
      title: (
        <FormattedMessage
          id="business_model.deploy.config.table.deviceType"
          defaultMessage="设备类型"
        />
      ),
      dataIndex: 'deviceType',
      hideInSearch: true,
    },
  ];

  // 基础模型列表数据api
  function loadData() {}

  // 初始化加载
  useEffect(() => {
    console.log('modelDeployConfig_detailOpen', detailOpen);
    if (detailOpen) {
      loadData();
    } else {
      actionRef?.current?.clearSelected();
      setSelectedRows([]);
    }
  }, [detailOpen]);

  return (
    <Modal
      width={proFormSmallModelWidth}
      title={`${intl.formatMessage({
        id: 'business_model.table.list.action.config',
        defaultMessage: '配置参数',
      })}`}
      open={detailOpen}
      onCancel={() => {
        closeModal();
      }}
      onOk={() => {
        console.log('onOk_selectedRows', selectedRows);
        // TODO 选择完成后再关闭弹框
        closeModal();
      }}
      okText={<FormattedMessage id="pages.modelForm.okText" defaultMessage="确认" />}
      cancelText={<FormattedMessage id="pages.modelForm.cancelText" defaultMessage="取消" />}
    >
      <ProCard className="gn_card" bodyStyle={{ padding: 0 }}>
        <div className="my-[8px] gn_active_descriptions gn_descriptions bg_active_4">
          <ProDescriptions column={1} columns={detailColumns} dataSource={info}></ProDescriptions>
        </div>
        <div className="head4 py-[8px]">
          <FormattedMessage
            id="business_model.deploy.config.table.title.name"
            defaultMessage="请选择"
          />
        </div>
        <ProTable
          style={{
            height: '300px',
            overflowY: 'scroll',
          }}
          className="gn_pro_table"
          cardProps={{
            bodyStyle: { padding: 0 },
          }}
          actionRef={actionRef}
          // 标题栏
          search={false}
          options={{ fullScreen: false, setting: false, density: false, reload: false }}
          rowKey="id"
          pagination={false}
          rowSelection={{
            onChange: (_, selectedRowsData) => {
              setSelectedRows(selectedRowsData);
            },
          }}
          tableAlertOptionRender={() => {
            return <>{selectedRows?.length > 0 && <></>}</>;
          }}
          request={async () => {
            let resp = await getAllDeviceList();
            console.log(resp, 'getAllDeviceList_resp');
            return {
              data: resp.data?.results,
              success: resp.success,
            };
          }}
          columns={columns}
        />
      </ProCard>
    </Modal>
  );
};

export default ModelDeployConfig;