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

/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-04-30 10:02:29
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-04-30 17:01:59
 * @FilePath: \general-ai-platform-web\src\pages\Business\DeviceGroup\components\modelSetting.tsx
 * @Description: 业务模型部署
 * @交互说明
 * 1、业务模型部署列表的分页展示
 * 2、配置参数功能
 */
import TableActionCard from '@/components/TableActionCard';
import { getBusinessModelList } from '@/services/testApi/businessModel';
import { ExclamationCircleFilled } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { FormattedMessage } from '@umijs/max';
import { Button } from 'antd';
import { useRef, useState } from 'react';
import {
  proTableCommonOptions,
  proTablePaginationOptions,
} from '../../../../../config/defaultTable';
// import CreateForm from './components/createForm';

const ModelSetting: React.FC = () => {
  // const intl = useIntl();
  const actionRef = useRef<ActionType>();

  //   const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
  // const [categoryFkIdIds, setCategoryFkIdIds] = useState([]);
  //  动态设置每页数量
  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
  // const [currentRow, setCurrentRow] = useState<Record<string, any>>({});

  /**配置参数 */

  //   function reloadList() {
  //     actionRef.current?.reload();
  //   }

  // 业务模型列表信息
  const columns: ProColumns<Record<string, any>>[] = [
    {
      title: <FormattedMessage id="business_model.table.list.name" defaultMessage="业务模型名称" />,
      dataIndex: 'name',
      hideInSearch: true,
      key: 'fixedName',
      fixed: 'left',
    },
    {
      title: <FormattedMessage id="business_model.table.list.status" defaultMessage="部署状态" />,
      dataIndex: 'status',
      hideInSearch: true,
    },
    {
      title: (
        <FormattedMessage id="business_model.table.list.createTime" defaultMessage="创建时间" />
      ),
      dataIndex: 'createTime',
      hideInSearch: true,
      valueType: 'dateTime',
    },

    {
      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      key: 'option',
      render: () => [
        <TableActionCard
          key="TableActionCardRef"
          renderActions={[
            {
              key: 'updateDetail',
              renderDom: (
                <Button
                  key="updateDetail"
                  type="link"
                  size="small"
                  onClick={() => {
                    // TODO 编辑在新增联调后实现
                    // setCurrentRow(record);
                  }}
                >
                  <FormattedMessage id="pages.searchTable.updateDetail" defaultMessage="配置参数" />
                </Button>
              ),
            },
          ]}
        ></TableActionCard>,
      ],
    },
  ];
  return (
    <div className="modelSetting_page">
      <div
        className="pb-[12px]"
        style={{
          color: '#FAAD14',
        }}
      >
        <ExclamationCircleFilled />
        <span className="pl-[8px]">配置参数需关联具体设备请先至设备列表添加设备后再进行配置</span>
      </div>
      <ProTable
        className="gn_pro_table"
        cardProps={{
          bodyStyle: { padding: 0 },
        }}
        // 标题栏
        search={false}
        scroll={{ y: proTableCommonOptions.commscrollY }}
        options={{ fullScreen: false, setting: false, density: false, reload: false }}
        actionRef={actionRef}
        rowKey="key"
        onDataSourceChange={(data) => {
          console.log(data, 'onDataSourceChange_data');
          // let CategoryFkIdIds: any = data.map((v) => {
          //   return v.categoryFkId;
          // });
          // setCategoryFkIdIds(CategoryFkIdIds);
        }}
        pagination={{
          ...proTablePaginationOptions,
          pageSize: currentPageSize,
          onChange: (page, pageSize) => setCurrentPageSize(pageSize),
        }}
        columnsState={{
          persistenceKey: 'algorithm_model_list',
          persistenceType: 'localStorage',
        }}
        request={async (params = {}) => {
          const { current, ...rest } = params;
          const reqParams = {
            page: current,
            ...rest,
          };
          let resp = await getBusinessModelList({ ...reqParams });
          console.log(resp, 'getModelVersionList_resp');
          return {
            data: resp.data?.results.map((v: Record<string, any>) => {
              return { ...v, key: v.id };
            }),
            success: resp.success,
            total: resp.data.count,
            current: current,
            pageSize: currentPageSize,
          };
        }}
        columns={columns}
      />
    </div>
  );
};

export default ModelSetting;