safety-eval-service-frontend/src/pages/Container/QualApplication/FilingListTable.jsx

import { Button, Form, Space, Tag, Typography } from "antd";
import Search from "zy-react-library/components/Search";
import Table from "zy-react-library/components/Table";
import { CHONGQING_DISTRICTS } from "~/enumerate/enterpriseOptions";
import {
  FILING_FORM_MODE,
  getFilingStatusOptions,
  isFiledManageEditable,
  isQualFilingEditable,
  QUAL_FILING_STATUS_COLOR,
} from "~/enumerate/qualFilingOptions";
import { CHANGE_COUNT_STYLE, formSelectField, getChangeCount } from "~/utils/enterpriseForm";
import { goFilingForm } from "./filingPaths";

const SEARCH_COL = { xs: 24, sm: 12, md: 8, lg: 6 };

export default function FilingListTable({
  tableProps,
  searchForm,
  onSearch,
  mode,
  showChangeCount = false,
  onChangeCountClick,
  onCreate,
  createLabel,
  listTitle,
  listDesc,
  PageLayout,
  onDelete,
  extraActions,
}) {
  const statusOptions = getFilingStatusOptions(mode);

  const canEditRow = (record) => {
    if (mode === FILING_FORM_MODE.FILED) {
      return isFiledManageEditable(record.filingStatusCode, mode);
    }
    return isQualFilingEditable(record.filingStatusCode);
  };

  const columns = [
    { title: "备案属地", dataIndex: "filingTerritoryName", width: 120, ellipsis: true },
    { title: "备案单位", dataIndex: "filingUnitName", ellipsis: true },
    { title: "备案编号", dataIndex: "filingNo", width: 180, render: (val, record) => val || record.id || "-" },
    { title: "安全评价业务范围", dataIndex: "businessScope", ellipsis: true },
  ];

  if (showChangeCount) {
    columns.push({
      title: "变更次数",
      dataIndex: "changeCount",
      width: 90,
      render: (_, record) => {
        const count = getChangeCount(record);
        const style = count > 0 ? CHANGE_COUNT_STYLE.active : CHANGE_COUNT_STYLE.zero;
        if (count <= 0) {
          return <span style={style}>{count}</span>;
        }
        return (
          <Typography.Link
            style={style}
            onClick={() => onChangeCountClick?.(record)}
          >
            {count}
          </Typography.Link>
        );
      },
    });
  }

  columns.push({
    title: "备案状态",
    dataIndex: "filingStatusName",
    width: 110,
    render: (_, record) => (
      <Tag color={QUAL_FILING_STATUS_COLOR[record.filingStatusCode] || "default"}>
        {record.filingStatusName || "-"}
      </Tag>
    ),
  });

  columns.push({
    title: "操作",
    width: 180,
    render: (_, record) => (
      <Space size="small">
        <Button
          type="link"
          size="small"
          onClick={() => goFilingForm({
            mode,
            id: record.id,
            readOnly: true,
          })}
        >
          查看
        </Button>
        {extraActions?.(record)}
        {canEditRow(record) && mode !== FILING_FORM_MODE.CHANGE && (
          <Button
            type="link"
            size="small"
            onClick={() => goFilingForm({ mode, id: record.id })}
          >
            修改
          </Button>
        )}
        {mode === FILING_FORM_MODE.APPLICATION && isQualFilingEditable(record.filingStatusCode) && onDelete && (
          <Button type="link" size="small" danger onClick={() => onDelete(record)}>删除</Button>
        )}
      </Space>
    ),
  });

  return (
    <PageLayout
      title={listTitle}
      extra={onCreate && (
        <Button type="primary" onClick={onCreate}>{createLabel}</Button>
      )}
    >
      {listDesc && (
        <p style={{ margin: 0, marginBottom: 24, color: "rgba(0, 0, 0, 0.45)" }}>{listDesc}</p>
      )}
      <Search
        form={searchForm}
        values={{ filingStatus: "" }}
        options={[
          { name: "filingUnitName", label: "备案单位", placeholder: "关键字搜索", colProps: SEARCH_COL },
          formSelectField("filingTerritoryName", "备案属地", [{ label: "全部", value: "" }, ...CHONGQING_DISTRICTS], {
            colProps: SEARCH_COL,
          }),
          { name: "filingNo", label: "备案编号", placeholder: "关键字搜索", colProps: SEARCH_COL },
          formSelectField("filingStatus", "备案状态", statusOptions, {
            colProps: SEARCH_COL,
            componentProps: { allowClear: false, showSearch: false },
          }),
        ]}
        onFinish={() => onSearch?.({ type: "search" })}
      />
      <Table {...tableProps} columns={columns} />
    </PageLayout>
  );
}