General-AI-Platform-Web/src/pages/Resource/AlgorithmModelList/detail.tsx

import { postAlgorithmModelGetAlgorithmModelById } from '@/services/resource/AlgorithmModel';
import { postModelVersionGetModelVersionList } from '@/services/resource/ModelVersion';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { PageContainer, ProCard, ProDescriptions, ProTable } from '@ant-design/pro-components';
import { FormattedMessage, useParams } from '@umijs/max';
import React from 'react';

/**styles */

const detailStylesProps = {
  marginBottom: 15,
  textColor: '#333333',
};
const headerStylesProps = {
  fontSize: 16,
  fontWeight: 700,
  color: '#333333',
};

const columns: ProColumns<API.ModelVersion>[] = [
  {
    title: <FormattedMessage id="resource.model_version.table.list.id" defaultMessage="id" />,
    dataIndex: 'id',
    sorter: true,
  },

  {
    title: (
      <FormattedMessage id="resource.model_version.table.list.modelFkId" defaultMessage="$$$" />
    ),
    dataIndex: 'modelFkId',
    hideInSearch: false,
  },

  {
    title: <FormattedMessage id="resource.model_version.table.list.version" defaultMessage="$$$" />,
    dataIndex: 'version',
    hideInSearch: true,
  },

  {
    title: <FormattedMessage id="resource.model_version.table.list.path" defaultMessage="$$$" />,
    dataIndex: 'path',
    hideInSearch: true,
  },

  {
    title: (
      <FormattedMessage id="resource.model_version.table.list.startCode" defaultMessage="$$$" />
    ),
    dataIndex: 'startCode',
    hideInSearch: true,
  },

  {
    title: (
      <FormattedMessage id="resource.model_version.table.list.isEnable" defaultMessage="$$$" />
    ),
    dataIndex: 'isEnable',
    filters: true,
    onFilter: true,
    hideInSearch: true,
    valueType: 'switch',
  },

  {
    title: <FormattedMessage id="resource.model_version.table.list.remark" defaultMessage="$$$" />,
    dataIndex: 'remark',
    hideInSearch: true,
  },
  {
    title: <FormattedMessage id="resource.model_version.table.list.status" defaultMessage="$$$" />,
    dataIndex: 'status',
    hideInSearch: true,
    valueEnum: {
      1: { text: '已创建', status: 'Default' },
      2: { text: '已发布', status: 'Processing' },
      3: { text: '已上架', status: 'Success' },
      4: { text: '已下架', status: 'Default' },
      5: { text: '已关闭', status: 'Error' },
    },
  },

  {
    title: (
      <FormattedMessage id="resource.model_version.table.list.createTime" defaultMessage="$$$" />
    ),
    dataIndex: 'createTime',
    sorter: true,
    hideInSearch: true,
    valueType: 'dateTime',
  },

  {
    title: (
      <FormattedMessage id="resource.model_version.table.list.updateTime" defaultMessage="$$$" />
    ),
    dataIndex: 'updateTime',
    sorter: true,
    hideInSearch: true,
    valueType: 'dateTime',
  },
];

const AlgorithmModelDetail: React.FC = () => {
  //  TODO 需要将业务层代码转移到此处
  // TODO 按UI原稿重新布局此模块
  // 关闭页面
  const doClose = () => {
    history.back();
  };

  const routeParams = useParams();
  return (
    <PageContainer>
      <ProCard split="horizontal" style={{ background: 'transparent' }}>
        <ProCard
          wrap
          bodyStyle={{ margin: 0, padding: 0 }}
          style={{ margin: 0, padding: 0, background: 'transparent' }}
        >
          <ProCard
            title={
              <div onClick={doClose} style={{ display: 'flex', alignItems: 'center' }}>
                <ArrowLeftOutlined style={{ marginRight: 10 }} />
                <span style={{ fontSize: 20, color: '#333333', fontWeight: 700 }}>模型详情</span>
              </div>
            }
            style={{
              margin: 0,
              padding: 0,
              marginBottom: detailStylesProps.marginBottom,
              background: 'transparent',
            }}
            headStyle={{ margin: 0, padding: 0 }}
            bodyStyle={{ margin: 0, padding: 0 }}
          ></ProCard>
          <ProCard
            style={{ margin: 0, padding: 0, marginBottom: detailStylesProps.marginBottom }}
            bodyStyle={{ margin: 0, padding: 20 }}
          >
            <ProDescriptions
              column={4}
              title="模型详细信息"
              tooltip="包含了模型详细信息"
              columns={columns}
              request={async () => {
                console.log(routeParams, 'id');
                const resp = await postAlgorithmModelGetAlgorithmModelById({
                  id: Number(routeParams.id),
                });
                // postModelVersionGetModelVersionList({modelFkId: 3})
                console.log('resp', resp);
                return {
                  data: resp.data?.algorithmModel,
                  success: resp.success,
                };
              }}
            ></ProDescriptions>
          </ProCard>
        </ProCard>
        <ProCard
          title="模型版本"
          style={{ margin: 0, padding: 0 }}
          headStyle={{ paddingTop: 20, paddingBottom: 20, ...headerStylesProps }}
          bodyStyle={{ margin: 0, padding: 0 }}
        >
          <ProTable
            tableStyle={{ paddingTop: 15, paddingBottom: 15 }}
            columns={columns}
            cardBordered
            request={async (params = {}, sort) => {
              const { current, ...rest } = params;
              const reqParams = {
                page: current,
                desc: false,
                orderKey: '',
                modelFkId: Number(routeParams?.id),
                ...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 postModelVersionGetModelVersionList({ ...reqParams });
              return {
                data: resp.data.list.map((v: API.ModelVersion) => {
                  return { ...v, key: v.id };
                }),
                success: resp.success,
                total: resp.data.total,
                current: resp.data.page,
                pageSize: resp.data.pageSize,
              };
            }}
            editable={{
              type: 'multiple',
            }}
            columnsState={{
              persistenceKey: 'pro-table-singe-demos',
              persistenceType: 'localStorage',
              onChange(value) {
                console.log('value: ', value);
              },
            }}
            rowKey="id"
            search={false}
            options={{
              fullScreen: false,
              setting: false,
              density: false,
              reload: false,
            }}
            form={{
              // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
              syncToUrl: (values, type) => {
                if (type === 'get') {
                  return {
                    ...values,
                    created_at: [values.startTime, values.endTime],
                  };
                }
                return values;
              },
            }}
            pagination={{
              pageSize: 5,
              onChange: (page) => console.log(page),
            }}
            dateFormatter="string"
          />
        </ProCard>
      </ProCard>
    </PageContainer>
  );
};
export default AlgorithmModelDetail;