pay-company/src/pages/quality/emergency/index.tsx

import {
  MyButtons,
  MyColumns,
  MyPageContainer,
  MyProTableProps,
  MyTableActions,
  MyToolBarActions,
} from '@/common';
import { Apis } from '@/gen/Apis';
import {
  EmergencyEventsCompensationTypeEnum,
  EmergencyEventsStatusEnum,
} from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Space } from 'antd';
import EventApplyClose from './modals/EventApplyClose';
import EventCreate from './modals/EventCreate';
import EventReview from './modals/EventReview';
import EventUpdate from './modals/EventUpdate';

export default function Index({ title = '突发事件' }) {
  const navigate = useNavigate();

  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="emergency_events"
      tabLabel={title}
    >
      <ProTable
        {...MyProTableProps.props}
        request={async (params, sort) =>
          MyProTableProps.request(
            params,
            sort,
            Apis.Emergency.EmergencyEvents.List,
          )
        }
        headerTitle={`${title}列表`}
        toolBarRender={(action: any) => [
          <MyToolBarActions
            key="toolbar"
            actions={{
              create: (
                <EventCreate
                  key="Create"
                  reload={action?.reload}
                  title={title}
                />
              ),
              teams: (
                <MyButtons.Default
                  key="Teams"
                  size="middle"
                  onClick={() => {
                    navigate('/quality/emergency/teams');
                  }}
                  title="应急小组"
                />
              ),
              categories: (
                <MyButtons.Default
                  key="Categories"
                  size="middle"
                  onClick={() => {
                    navigate('/quality/emergency/categories');
                  }}
                  title="事件分类"
                />
              ),
              levels: (
                <MyButtons.Default
                  key="Levels"
                  size="middle"
                  onClick={() => {
                    navigate('/quality/emergency/levels');
                  }}
                  title="级别配置"
                />
              ),
            }}
          />,
        ]}
        columns={[
          MyColumns.ID({
            search: false,
          }),
          {
            title: '名称',
            dataIndex: 'name',
          },
          {
            title: '所属项目',
            dataIndex: ['asset_project', 'name'],
            search: false,
          },
          MyColumns.EnumTag({
            title: '状态',
            dataIndex: 'status',
            valueEnum: EmergencyEventsStatusEnum,
          }),
          MyColumns.EnumTag({
            title: '赔偿方',
            dataIndex: 'compensation_type',
            valueEnum: EmergencyEventsCompensationTypeEnum,
          }),
          {
            title: '赔偿事项',
            search: false,
            render: (_, item: any) => {
              return (
                <div>
                  <div>赔偿比例：{item?.compensation_rate}%</div>
                  <div>赔偿金额：{item?.compensation_amount}元</div>
                  <div>已支付赔偿金额：{item?.compensation_paid_amount}元</div>
                </div>
              );
            },
          },
          {
            title: '分类',
            search: false,
            render: (_, item: any) => {
              return `${item?.one_emergency_categories_name} / ${item?.two_emergency_categories_name}`;
            },
          },
          {
            title: '等级',
            dataIndex: 'emergency_event_levels_name',
            search: false,
          },
          MyColumns.UpdatedAt(),
          MyColumns.CreatedAt(),
          MyColumns.Option({
            render: (_, item: any, index, action) => (
              <Space key={index}>
                <MyTableActions
                  actions={{
                    show: (
                      <MyButtons.View
                        key="show"
                        title="查看"
                        to={`/quality/emergency/show/${item.id}`}
                      />
                    ),
                    close: (
                      <EventApplyClose
                        key="close"
                        item={item}
                        reload={action?.reload}
                      />
                    ),
                    update: (
                      <EventUpdate
                        key="update"
                        item={item}
                        reload={action?.reload}
                        title={title}
                      />
                    ),
                    audit: (
                      <EventReview
                        key="audit"
                        item={item}
                        reload={action?.reload}
                      />
                    ),
                    delete: (
                      <MyButtons.Delete
                        key="delete"
                        onConfirm={() =>
                          Apis.Emergency.EmergencyEvents.Delete({
                            id: item.id,
                          }).then(() => action?.reload())
                        }
                      />
                    ),
                  }}
                  maxVisible={3}
                />
              </Space>
            ),
          }),
        ]}
      />
    </MyPageContainer>
  );
}