canrd-main / canrd-erp-front · Files

import { RESPONSE_CODE } from '@/constants/enum';
import { getUserInfo } from '@/utils';
import { PlusOutlined } from '@ant-design/icons';
import { ActionType, ProTable } from '@ant-design/pro-components';
import { Button, Popconfirm, Tabs, message } from 'antd';
import { useMemo, useRef, useState } from 'react';

import {
  postResearchGroupsAccessBlackList,
  postResearchGroupsAccessDeleteBlackList,
  postResearchGroupsAccessDeleteWhiteList,
  postResearchGroupsAccessWhiteList,
} from '@/services';

import './index.css';
import './index.less';

import {
  RESEARCH_GROUP_ACCESS_BLACKLIST_COLUMNS,
  RESEARCH_GROUP_ACCESS_WHITELIST_COLUMNS,
} from './constant';

import AddModal, { AddModalRef } from './components/AddModal';

const ResearchGroupAccessPage = () => {
  const whitelistActionRef = useRef<ActionType>();
  const blacklistActionRef = useRef<ActionType>();
  const [activeKey, setActiveKey] = useState<string>('1');
  const addModalRef = useRef<AddModalRef>(null);

  const reloadWhitelistTable = () => {
    whitelistActionRef.current?.reload();
  };

  const reloadBlacklistTable = () => {
    blacklistActionRef.current?.reload();
  };

  const handleDeleteWhitelist = async (id: number) => {
    const res = await postResearchGroupsAccessDeleteWhiteList({ data: { id } });
    if (res && res.result === RESPONSE_CODE.SUCCESS) {
      message.success('删除成功');
      reloadWhitelistTable();
    } else {
      message.error(res?.message || '删除失败');
    }
  };

  const handleDeleteBlacklist = async (id: number) => {
    const res = await postResearchGroupsAccessDeleteBlackList({ data: { id } });
    if (res && res.result === RESPONSE_CODE.SUCCESS) {
      message.success('删除成功');
      reloadBlacklistTable();
    } else {
      message.error(res?.message || '删除失败');
    }
  };

  const handleAddClick = () => {
    const accessType = activeKey === '1' ? 'WHITELIST' : 'BLACKLIST';
    const onSuccess =
      activeKey === '1' ? reloadWhitelistTable : reloadBlacklistTable;
    addModalRef.current?.show(accessType, onSuccess);
  };

  const WhitelistTab = () => {
    // Check if the current user has permission to add/delete
    const hasPermission = useMemo(() => {
      const userInfo = getUserInfo();
      return userInfo?.username === 'canrd' || userInfo?.username === 'D-Tina';
    }, []);
    return (
      <ProTable
        actionRef={whitelistActionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
          defaultCollapsed: false,
        }}
        pagination={{
          pageSize: 10,
        }}
        toolBarRender={() =>
          hasPermission
            ? [
                <Button key="add" type="primary" onClick={handleAddClick}>
                  <PlusOutlined /> 添加
                </Button>,
              ]
            : []
        }
        request={async (params) => {
          const { current, pageSize, ...rest } = params;
          const res = await postResearchGroupsAccessWhiteList({
            data: {
              current: current || 1,
              pageSize: pageSize || 10,
              ...rest,
            },
          });
          if (res && res.result === RESPONSE_CODE.SUCCESS) {
            return {
              data: res.data?.data || [],
              success: true,
              total: res.data?.total || 0,
            };
          }
          return {
            data: [],
            success: false,
            total: 0,
          };
        }}
        columns={[
          ...RESEARCH_GROUP_ACCESS_WHITELIST_COLUMNS,
          {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) =>
              hasPermission
                ? [
                    <Popconfirm
                      key="delete"
                      title="确定要删除吗?"
                      onConfirm={() => handleDeleteWhitelist(record.id)}
                    >
                      <a style={{ color: '#ff4d4f' }}>删除</a>
                    </Popconfirm>,
                  ]
                : [],
          },
        ]}
      />
    );
  };

  const BlacklistTab = () => {
    // Check if the current user has permission to add/delete
    const hasPermission = useMemo(() => {
      const userInfo = getUserInfo();
      return userInfo?.username === 'canrd' || userInfo?.username === 'D-Tina';
    }, []);
    return (
      <ProTable
        actionRef={blacklistActionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
          defaultCollapsed: false,
        }}
        pagination={{
          pageSize: 10,
        }}
        toolBarRender={() =>
          hasPermission
            ? [
                <Button key="add" type="primary" onClick={handleAddClick}>
                  <PlusOutlined /> 添加
                </Button>,
              ]
            : []
        }
        request={async (params) => {
          const { current, pageSize, ...rest } = params;
          const res = await postResearchGroupsAccessBlackList({
            data: {
              current: current || 1,
              pageSize: pageSize || 10,
              ...rest,
            },
          });
          if (res && res.result === RESPONSE_CODE.SUCCESS) {
            return {
              data: res.data?.data || [],
              success: true,
              total: res.data?.total || 0,
            };
          }
          return {
            data: [],
            success: false,
            total: 0,
          };
        }}
        columns={[
          ...RESEARCH_GROUP_ACCESS_BLACKLIST_COLUMNS,
          {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) =>
              hasPermission
                ? [
                    <Popconfirm
                      key="delete"
                      title="确定要删除吗?"
                      onConfirm={() => handleDeleteBlacklist(record.id)}
                    >
                      <a style={{ color: '#ff4d4f' }}>删除</a>
                    </Popconfirm>,
                  ]
                : [],
          },
        ]}
      />
    );
  };

  // 空函数保留作为回调，但不做任何操作
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const setAddModalVisible = (_: boolean) => {
    // 我们不再需要在父组件中跟踪模态框状态
  };

  return (
    <div className="research-group-index">
      <Tabs
        defaultActiveKey="whitelist"
        onChange={setActiveKey}
        items={[
          {
            key: 'whitelist',
            label: '课题组白名单',
            children: <WhitelistTab />,
          },
          {
            key: 'blacklist',
            label: '课题组风险名单',
            children: <BlacklistTab />,
          },
        ]}
      />
      <AddModal ref={addModalRef} setVisible={setAddModalVisible} />
    </div>
  );
};

export default ResearchGroupAccessPage;