General-AI-Platform-Web/src/pages/Model/ModelIndex/index.tsx

/*
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-04-07 14:02:00
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-04-18 10:09:20
 * @FilePath: \general-ai-manage\src\pages\ModelIndex\ModelIndex.tsx
 * @Description: 模型列表首页
 * @交互说明
 * 1. 模型列表分页展示、关键词检索
 * 2. 新增、删除（模型）功能
 * 3. 更新模型分类功能
 * 4. 模型详情配置入口
 *
 */
import { CommButton } from '@/components/Button';
import { ReactComponent as ResetIcon } from '/public/home/reset_icon.svg';
import { ReactComponent as SearchIcon } from '/public/home/search_icon.svg';

import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
import { getModelList } from '@/services/testApi/model';
import { SearchOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProCard, ProForm, ProFormText, ProTable } from '@ant-design/pro-components';
import { Access, FormattedMessage, history, useAccess } from '@umijs/max';
import { Button } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
import CreateForm from './components/createForm';
import IndustryUpdate from './components/industryUpdate';

import './index.less';
const ModelIndex: React.FC = () => {
  const access = useAccess();
  // const intl = useIntl();
  const actionRef = useRef<ActionType>();
  const [querysData, setQuerysData] = useState<Record<string, any>>({}); // 列表查询参数
  const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
  const [industryOpen, setIndustryOpen] = useState<boolean>(false);

  // const [categoryFkIdIds, setCategoryFkIdIds] = useState([]);
  //  动态设置每页数量
  const [currentPageSize, setCurrentPageSize] = useState<number>(10);
  // const [currentRow, setCurrentRow] = useState<Record<string,any>>({});
  const [form] = ProForm.useForm(); // form 对象
  /**新增 设置行业分类 删除 */
  // 新增
  const handleCreateModal = () => {
    if (createModalOpen) {
      setCreateModalOpen(false);
    } else {
      setCreateModalOpen(true);
    }
  };
  // 设置行业分类
  const handleSetIndustry = () => {
    if (industryOpen) {
      setIndustryOpen(false);
    } else {
      setIndustryOpen(true);
    }
  };
  /**
   * @en-US The pop-up window of the distribution update window
   * @zh-CN 分布更新窗口的弹窗
   * */
  // const [updateModalOpen, setUpdateModalOpen] = useState<boolean>(false);
  // const [showDetail, setShowDetail] = useState<boolean>(false);
  const columns: ProColumns<Record<string, any>>[] = [
    {
      title: <FormattedMessage id="model_index.table.list.name" defaultMessage="$$$" />,
      dataIndex: 'name',
      hideInSearch: true,
      key: 'fixedName',
      fixed: 'left',
    },
    {
      title: <FormattedMessage id="model_index.table.list.type" defaultMessage="$$$" />,
      dataIndex: 'type',
      hideInSearch: true,
      render: (dom, record) => {
        let activeName = 'active1';
        switch (record.type) {
          case '深度学习':
            activeName = 'active2';
            break;
          default:
            activeName = 'active1';
            break;
        }
        return (
          <div className={`model_index_type_tag flex items-center justify-center ${activeName}`}>
            <span className="dot"></span>
            <span>{dom}</span>
          </div>
        );
      },
    },
    {
      title: <FormattedMessage id="model_index.table.list.industry" defaultMessage="$$$" />,
      dataIndex: 'industry',
      hideInSearch: true,
    },
    {
      title: (
        <FormattedMessage id="model_index.table.list.defaultVersionFkId" defaultMessage="$$$" />
      ),
      dataIndex: 'defaultVersionFkId',
      hideInSearch: true,
    },

    {
      title: <FormattedMessage id="model_index.table.list.updateTime" defaultMessage="$$$" />,
      dataIndex: 'updateTime',
      sorter: true,
      hideInSearch: true,
      valueType: 'dateTime',
    },

    {
      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
      dataIndex: 'option',
      valueType: 'option',
      fixed: 'right',
      key: 'option',
      render: (_, record) => [
        <TableActionCard
          key="TableActionCardRef"
          renderActions={[
            {
              key: 'detail',
              renderDom: (
                <Button
                  key="detail"
                  type="link"
                  size="small"
                  onClick={() => {
                    // setCurrentRow(record);
                    history.push(`/home/model-detail/${record.id}`);
                  }}
                >
                  <FormattedMessage id="model_index.table.list.detail" defaultMessage="详情配置" />
                </Button>
              ),
            },
            // {
            //   key: 'update',
            //   renderDom: (
            //     <Button
            //       key="update"
            //       type="link"
            //       size="small"
            //       onClick={() => {
            //         setUpdateModalOpen(true);
            //         setCurrentRow(record);
            //       }}
            //     >
            //       <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
            //     </Button>
            //   ),
            // },
            {
              key: 'destroy',
              renderDom: (
                <IsDelete
                  deleteApi={() => {
                    // TODO 调用删除接口
                    // handleDestroy(record).then(() => {});
                  }}
                ></IsDelete>
              ),
            },
          ]}
        ></TableActionCard>,
      ],
    },
  ];

  function reloadList() {
    actionRef.current?.reload();
  }
  // 筛选查询
  useEffect(() => {
    if (actionRef) {
      reloadList();
    }
  }, [actionRef, querysData]);

  return (
    <div className="modelIndex_page home_container">
      <ProCard
        style={{ padding: 0, margin: 0, backgroundColor: 'transparent' }}
        bodyStyle={{ padding: 0, margin: 0, backgroundColor: 'transparent' }}
      >
        <ProTable
          className="gn_pro_table"
          headerTitle={
            <div className="gn_table_query_filter">
              <ProForm
                form={form}
                layout="horizontal"
                submitter={{
                  render: () => (
                    <div style={{ textAlign: 'center', marginLeft: 12 }}>
                      <CommButton
                        type="primary"
                        htmlType="submit"
                        prevIcon={<SearchIcon />}
                        buttonLabel="查询"
                      ></CommButton>
                      <CommButton
                        style={{ marginLeft: 12 }}
                        htmlType="button"
                        prevIcon={<ResetIcon />}
                        buttonLabel="重置"
                        onClick={() => {
                          form.resetFields(); // 点击重置按钮时重置表单数据
                          setQuerysData(() => {}); // 清空筛选项
                        }}
                      ></CommButton>
                    </div>
                  ),
                }}
                onFinish={async (values) => {
                  console.log(values, 'filter_finish_values');
                  setQuerysData(() => values);

                  return true;
                }}
              >
                <ProFormText
                  label={
                    <FormattedMessage id="model_index.table.list.name" defaultMessage="模型名称" />
                  }
                  labelClassName="label_set_1"
                  fieldProps={{
                    style: {
                      width: 280,
                    },
                    prefix: <SearchOutlined style={{ color: 'rgba(0,0,0,.25)' }} />,
                  }}
                  name="name"
                  placeholder="请输入模型名称"
                />
              </ProForm>
            </div>
          }
          // 标题栏
          toolBarRender={() => [
            <Access
              accessible={access.canUpdate(history.location.pathname)}
              key={`model-index-add`}
            >
              <Button
                type="primary"
                key="primary"
                onClick={() => {
                  setCreateModalOpen(true);
                }}
              >
                <FormattedMessage id="model_index.table.list.add" defaultMessage="New" />
              </Button>
              <Button
                className="ml-[4px]"
                key="setIndustry"
                onClick={() => {
                  setIndustryOpen(true);
                }}
              >
                <FormattedMessage
                  id="model_index.table.list.setIndustry"
                  defaultMessage="行业分类"
                />
              </Button>
            </Access>,
          ]}
          search={false}
          scroll={{ y: proTableCommonOptions.commscrollY, x: proTableCommonOptions.commscrollX }}
          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 = {}, sort) => {
            const { current, ...rest } = params;
            const reqParams = {
              page: current,
              desc: false,
              orderKey: '',
              ...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 getModelList({ ...reqParams, ...querysData });
            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}
        />
      </ProCard>
      <CreateForm
        createModalOpen={createModalOpen}
        handleModal={handleCreateModal}
        reload={reloadList}
      />
      <IndustryUpdate industryOpen={industryOpen} handleModal={handleSetIndustry} />
    </div>
  );
};

export default ModelIndex;