pay-company/src/components/ModalsHouseSelectList.tsx

import {
  MyBetaModalFormProps,
  MyButtons,
  MyColumns,
  MyProTableProps,
} from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import { AssetHousesUsageEnum } from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { type TableProps } from 'antd';
import { useRef, useState } from 'react';
interface DataType {
  key: React.Key;
  id: React.Key;
  is_enabled: boolean;
}
export default function ModalsHouseSelectList(
  props: MyBetaModalFormProps & {
    onChange?: (selectedRows: DataType[]) => void;
  },
) {
  const modalRef = useRef<any>();
  // const [selectedDataRow, setSelectedDataRow] = useState<any>({});
  const [getSelectedRow, setSelectedRow] = useState<any>([]);
  const rowSelection: TableProps<any>['rowSelection'] = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(selectedRows[0], 'selectedRows[0]');
      setSelectedRow(selectedRows[0]);
    },
    defaultSelectedRowKeys: props?.item?.id ? [props?.item?.id] : [],
  };

  return (
    <MyModal
      title={'选择房屋'}
      width="1000px"
      myRef={modalRef}
      size="middle"
      onOpen={() => {
        setSelectedRow(props?.item);
      }}
      node={
        <ProTable
          {...MyProTableProps.props}
          request={async (params, sort) =>
            MyProTableProps.request(params, sort, Apis.Asset.AssetHouses.List)
          }
          rowSelection={{ type: 'radio', ...rowSelection }}
          options={false}
          tableAlertOptionRender={() => {
            return (
              <MyButtons.Default
                key="okSelect"
                size="middle"
                type="primary"
                onClick={() => {
                  let res: any = getSelectedRow;
                  props?.onChange?.(res);
                  modalRef.current?.close();
                }}
                title="确定选项"
              />
            );
          }}
          columns={[
            MyColumns.ID({ search: false }),
            {
              title: '项目名称',
              dataIndex: ['asset_project', 'name'],
              search: {
                transform: (value) => {
                  return { project_name: value };
                },
              },
            },
            {
              title: '房屋名称',
              dataIndex: 'full_name',
            },
            {
              title: '楼栋名称',
              dataIndex: 'building_name',
              hidden: true,
            },
            {
              title: '单元名称',
              dataIndex: 'unit_name',
              hidden: true,
            },
            MyColumns.EnumTag({
              title: '用途',
              dataIndex: 'usage',
              valueEnum: AssetHousesUsageEnum,
            }),
            {
              title: '楼层',
              dataIndex: 'floor',
              render(_, record) {
                return `${record?.floor || '-'}`;
              },
              search: false,
            },
          ]}
        />
      }
    ></MyModal>
  );
}