pay-admin/src/pages/company/list/show/$id.tsx

import { MyPageContainer, usePageTabs } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProCard } from '@ant-design/pro-components';
import { useParams } from '@umijs/max';
import { Space, Steps, Tabs } from 'antd';
import { useEffect, useState } from 'react';

import ComponentsInfo from '../modals/CompanyShow';
import CompanyUpdate from '../modals/CompanyUpdate';
import CompanyApps from '../table/Apps';
import Assets from '../table/Assets';
import Brands from '../table/Brands';
import CustomerEnd from '../table/CustomerEnd';
import Employees from '../table/Employees';
import Organizations from '../table/Organizations';
import Positions from '../table/Positions';
import ReceiptAccounts from '../table/ReceiptAccounts';
import Roles from '../table/Roles';

export default function Show({ title }: { title?: string } = {}) {
  const { id } = useParams<{ id: string }>();
  const [data, setShow] = useState<any>({});
  const [activeKey, setActiveKey] = useState('1');
  // 注册当前页面为标签页
  const { addTab } = usePageTabs({
    tabKey: `company-show-${id}`,
    tabLabel: '配置:' + (data?.short_name || title || '资产详情'),
  });
  const loadShow = () => {
    let paramsId: any = { id: id ?? 0 };
    Apis.Company.Companies.Show(paramsId).then((res) => {
      setShow(res?.data);
      // 更新标签页名称为API返回的name
      if (res?.data?.short_name) {
        addTab({
          key: `company-show-${id}`,
          label: res.data.short_name,
          path: `/company/${id}`,
        });
      }
    });
  };
  useEffect(() => {
    loadShow();
  }, [id]);

  let items = [
    {
      label: '应用配置',
      key: '1',
      closable: false,
      children: <CompanyApps item={data} />,
    },
    {
      label: '组织配置',
      key: '2',
      closable: false,
      children: <Organizations item={data} />,
    },
    {
      label: '岗位配置',
      key: '3',
      closable: false,
      children: <Positions item={data} />,
    },
    {
      label: '员工配置',
      key: '4',
      closable: false,
      children: <Employees item={data} />,
    },
    {
      label: '账号配置',
      key: '5',
      closable: false,
      children: <ReceiptAccounts item={data} />,
    },

    {
      label: '品牌配置',
      key: '6',
      closable: false,
      children: <Brands item={data} />,
    },
    {
      label: '项目配置',
      key: '7',
      closable: false,
      children: <Assets item={data} />,
    },
    {
      label: '权限配置',
      key: '8',
      closable: false,
      children: <Roles item={data} />,
    },
    {
      label: '客户端配置',
      key: '9',
      closable: false,
      children: <CustomerEnd item={data} />,
    },
  ];
  return (
    <MyPageContainer title={title}>
      {/* <ComponentsInfo item={data} /> */}
      <ProCard
        title={`${data?.name} (${data?.short_name})`}
        extra={
          <Space>
            <ComponentsInfo
              item={{ ...data, type: 'primary' }}
              title="查看"
              reload={loadShow}
            />
            <CompanyUpdate item={data} title="机构" reload={loadShow} />
          </Space>
        }
      >
        <div>请按以下顺序配置：</div>
        <div style={{ padding: '10px 0' }}>
          <Steps
            type="navigation"
            current={-1}
            items={[
              {
                title: '应用配置',
                status: 'finish',
                icon: <></>,
              },
              {
                title: '组织配置',
                status: 'finish',
                icon: <></>,
              },
              {
                title: '岗位配置',
                status: 'finish',
                icon: <></>,
              },
              {
                title: '员工配置',
                status: 'finish',
                icon: <></>,
              },
              {
                title: '账号配置',
                status: 'finish',
                icon: <></>,
              },
              {
                title: '品牌配置',
                status: 'finish',
                icon: <></>,
              },
              {
                title: '项目配置',
                status: 'finish',
                icon: <></>,
              },
              {
                title: '权限配置',
                status: 'finish',
                icon: <></>,
              },
              {
                title: '客户端配置',
                status: 'finish',
                icon: <></>,
              },
            ]}
          />
        </div>
      </ProCard>
      <ProCard>
        <Tabs
          type="card"
          activeKey={activeKey}
          onChange={setActiveKey}
          items={data?.id ? items : []}
        />
      </ProCard>
    </MyPageContainer>
  );
}