General-AI-Platform-Web/src/pages/Project/ProjectList/index.tsx

import {deleteProjectDeleteProject, postProjectGetProjectList, deleteProjectDeleteProjectByIds} from '@/services/project/Project';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import {
  FooterToolbar,
  PageContainer,
  ProTable,
  ProFormSelect,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl, useAccess, Access, history } from '@umijs/max';
import {Button, message} from 'antd';
import React, { useRef, useState } from 'react';
import UpdateForm from './components/UpdateForm';
import MyCreateForm from "./components/MyCreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer";
const ProjectList: React.FC = () => {
      /**
       * @en-US Pop-up window of new window
       * @zh-CN 新建窗口的弹窗
       *  */
      const [createModalOpen, setCreateModalOpen] = useState<boolean>(false);
      /**
       * @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);
      /**
       * @en-US International configuration
       * @zh-CN 国际化配置
       * */
      const access = useAccess();
      const intl = useIntl();
      const actionRef = useRef<ActionType>();
      const [currentRow, setCurrentRow] = useState<API.Project>();
      const [selectedRowsState, setSelectedRows] = useState<API.Project[]>([]);

      const handleUpdateModal = ()=>{
        if (updateModalOpen) {
          setUpdateModalOpen(false)
          setCurrentRow(undefined)
        } else {
          setUpdateModalOpen(true)
        }
      }
      const handleCreateModal = ()=>{
        if (createModalOpen) {
          setCreateModalOpen(false)
          setCurrentRow(undefined)
        } else {
          setCreateModalOpen(true)
        }
      }
      const handleColumnDrawer = ()=>{
        if (showDetail) {
          setShowDetail(false)
          setCurrentRow(undefined)
      } else {
          setShowDetail(true)
        }
      }
      const handleDestroy = async (selectedRow: API.Project) => {
        deleteProjectDeleteProject({id: selectedRow.id}).then(()=>{
          message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
          actionRef.current?.reload()
        }).catch(()=>{
          message.error(intl.formatMessage({id: 'common.failure', defaultMessage: '$$$'}))
        })
      };

const columns: ProColumns<API.Project>[] = [

    {
      title: (<FormattedMessage
        id="project.project.table.list.id"
        defaultMessage="id"/>),
      dataIndex: "id",
      sorter: true,
      render: (dom, entity) => {
        return (
          <a
            onClick={() => {
              setCurrentRow(entity);
              setShowDetail(true);
            }}
          >
            {dom}
          </a>
        );
      },
    },

    {
        title: (<FormattedMessage
            id="project.project.table.list.name"
            defaultMessage="$$$"/>),
        dataIndex: "name",
        hideInSearch: true,
    },


    {
        title: (<FormattedMessage
            id="project.project.table.list.code"
            defaultMessage="$$$"/>),
        dataIndex: "code",
        hideInSearch: true,
    },


    {
        title: (<FormattedMessage
            id="project.project.table.list.info"
            defaultMessage="$$$"/>),
        dataIndex: "info",
        hideInSearch: true,
    },


    {
        title: (<FormattedMessage
            id="project.project.table.list.inferConfig"
            defaultMessage="$$$"/>),
        dataIndex: "inferConfig",
        hideInSearch: true,
        hideInTable: true,
        hideInDescriptions: true,
    },


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


    {
        title: (<FormattedMessage
            id="project.project.table.list.remark"
            defaultMessage="$$$"/>),
        dataIndex: "remark",
        hideInSearch: true,
    },


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


    {
        title: (<FormattedMessage
            id="project.project.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',
            render: (_, record) => [
            <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
              <a
                key="update"
                onClick={() => {
                  setUpdateModalOpen(true);
                  setCurrentRow(record);
                }}
              >
                <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
              </a>
              <a
                key="destroy"
                 onClick={() => {
                   handleDestroy(record).then(()=>{})
              }}>
                <FormattedMessage
                  id="pages.searchTable.destroy"
                  defaultMessage="Destroy"
                />
              </a>
              </Access>
            ],
        },];
return (
        <PageContainer>
          <ProTable<API.Project>
            headerTitle={intl.formatMessage({
              id: 'pages.searchTable.title',
              defaultMessage: '$$$',
            })}
            options={{ fullScreen: true, setting: true, density: true, reload: true }}
            actionRef={actionRef}
            rowKey="key"
            search={{
              labelWidth: 120,
            }}
            onDataSourceChange={(data)=>{

            }}
            pagination={{
              showSizeChanger: true,
              pageSize: 10,
            }}
            columnsState={{
              persistenceKey: 'project_list',
              persistenceType: 'localStorage'
            }}
            toolBarRender={() => [
            <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>

              <Button
                type="primary"
                key="primary"
                onClick={() => {
                  setCreateModalOpen(true);
                }}
              >
                <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
              </Button>
            </Access>
            ]}
            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 postProjectGetProjectList({...reqParams})
          return {
            data: resp.data.list.map((v: API.Project)=>{
                return {...v, key: v.id}
            }),
            success: resp.success,
            total: resp.data.total,
            current: resp.data.page,
            pageSize: resp.data.pageSize
          };

            }}
            columns={columns}
            rowSelection={{
              onChange: (_, selectedRows) => {
                setSelectedRows(selectedRows);
              },
            }}
          />
          {selectedRowsState?.length > 0 && (
            <FooterToolbar
              extra={
                <div>
                  <FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
                  <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
                  <FormattedMessage id="pages.searchTable.item" defaultMessage="$$$" />
                </div>
              }
            >
              <Button
            onClick={async () => {
              deleteProjectDeleteProjectByIds({ids: selectedRowsState.map((v: API.Project)=>{return v.id as number})}).then(()=>{
                actionRef.current?.reloadAndRest?.();
              })
            }}
          >
            <FormattedMessage
              id="pages.searchTable.batchDeletion"
              defaultMessage="Batch deletion"
            />
          </Button>
            </FooterToolbar>
          )}
          <MyCreateForm
            createModalOpen={createModalOpen}
            values={currentRow || {}}
            handleModal={handleCreateModal}
            reload={actionRef.current?.reload}
          />
          <UpdateForm
            updateModalOpen={updateModalOpen}
            values={currentRow || {}}
            handleModal={handleUpdateModal}
            reload={actionRef.current?.reload}
          />

          <ColumnDrawer
            handleDrawer={handleColumnDrawer}
            isShowDetail={showDetail}
            columns={columns}
            currentRow={currentRow}
          />

        </PageContainer>
      );
};

    export default ProjectList;