pay-admin/src/pages/asset/asset_projects/components/AssetBuildings.tsx

import { MyBetaModalFormProps, MyColumns, MyProTableProps } from '@/common';
import { Apis } from '@/gen/Apis';
import {
  AssetHousesOrientationEnum,
  AssetHousesOwnershipTypeEnum,
  AssetHousesStatusEnum,
  AssetHousesUsageEnum,
} from '@/gen/Enums';
import { ProCard, ProTable } from '@ant-design/pro-components';
import { Space } from 'antd';
import { useRef, useState } from 'react';
import BuildingsCreate from '../modals/AssetBuildingsCreate';
import AssetHousesCreate from '../modals/AssetHousesCreate';
import AssetUnitsCreate from '../modals/AssetUnitsCreate';

export default function AssetBuildings(props: MyBetaModalFormProps) {
  const actionBuildingsRef: any = useRef();
  const actionUnitsRef: any = useRef();
  const actionHousesRef: any = useRef();
  const [selectKey, setSelectkey] = useState<any>({});
  const [selectKeyUnits, setSelectKeyUnits] = useState<any>({});
  return (
    <ProCard
      extra={
        <Space>
          <BuildingsCreate
            key="BuildingsCreate"
            item={props?.item}
            reload={() => actionBuildingsRef?.current?.reload()}
            title="楼栋"
          />
          <AssetUnitsCreate
            key="UnitsCreate"
            item={{
              ...props?.item,
              asset_buildings_id: selectKey?.id || undefined,
            }}
            reload={() => actionUnitsRef?.current?.reload()}
            title="单元"
          />
          <AssetHousesCreate
            key="HousesCreate"
            item={{
              ...props?.item,
              asset_buildings_id: selectKey?.id || undefined,
              asset_units_id: selectKeyUnits?.id || undefined,
            }}
            reload={() => actionHousesRef?.current?.reload()}
            title="房源"
          />
        </Space>
      }
    >
      <Space align="start" size="large">
        <ProTable
          {...MyProTableProps.props}
          search={false}
          actionRef={actionBuildingsRef}
          rowClassName={(record: any) => {
            console.log(selectKey?.id, 'key', record?.id);
            return selectKey?.id === record?.id ? 'ant-table-row-selected' : '';
          }}
          onRow={(record: any) => {
            return {
              onClick: () => {
                setSelectkey(record);
                setSelectKeyUnits({});
                actionUnitsRef?.current?.reload();
                actionHousesRef?.current?.reload();
              },
              style: {
                cursor: 'pointer',
              },
            };
          }}
          request={async (params, sort) =>
            MyProTableProps.request(
              { ...params, asset_projects_id: props?.item?.id },
              sort,
              Apis.Asset.AssetBuildings.List,
            )
          }
          options={false}
          columns={[
            MyColumns.ID(),
            {
              title: '楼栋',
              width: '250px',
              dataIndex: 'name',
            },
          ]}
        />

        <ProTable
          {...MyProTableProps.props}
          search={false}
          actionRef={actionUnitsRef}
          request={async (params, sort) =>
            MyProTableProps.request(
              {
                ...params,
                asset_projects_id: props?.item?.id,
                asset_buildings_id: selectKey?.id,
              },
              sort,
              Apis.Asset.AssetUnits.List,
            )
          }
          rowClassName={(record: any) => {
            return selectKeyUnits?.id === record?.id
              ? 'ant-table-row-selected'
              : '';
          }}
          onRow={(record: any) => {
            return {
              onClick: () => {
                setSelectKeyUnits(record);
                actionHousesRef?.current?.reload();
              },
              style: {
                cursor: 'pointer',
              },
            };
          }}
          options={false}
          columns={[
            MyColumns.ID(),
            {
              title: '单元',
              width: '250px',
              dataIndex: 'name',
            },
          ]}
        />

        <ProTable
          {...MyProTableProps.props}
          search={false}
          actionRef={actionHousesRef}
          request={async (params, sort) =>
            MyProTableProps.request(
              {
                ...params,
                asset_projects_id: props?.item?.id,
                asset_buildings_id: selectKey?.id,
                asset_units_id: selectKeyUnits?.id,
              },
              sort,
              Apis.Asset.AssetHouses.List,
            )
          }
          options={false}
          columns={[
            MyColumns.ID(),
            MyColumns.EnumTag({
              title: '用途',
              dataIndex: 'usage',
              valueEnum: AssetHousesUsageEnum,
            }),
            {
              title: '房号',
              dataIndex: 'name',
            },
            MyColumns.EnumTag({
              title: '产权性质',
              dataIndex: 'ownership_type',
              valueEnum: AssetHousesOwnershipTypeEnum,
            }),
            MyColumns.EnumTag({
              title: '朝向',
              dataIndex: 'orientation',
              valueEnum: AssetHousesOrientationEnum,
            }),
            MyColumns.EnumTag({
              title: '房屋状态',
              dataIndex: 'status',
              valueEnum: AssetHousesStatusEnum,
            }),
            {
              title: '房',
              dataIndex: 'room',
            },
            {
              title: '厅',
              dataIndex: 'hall',
            },
            {
              title: '厨',
              dataIndex: 'kitchen',
            },
            {
              title: '卫',
              dataIndex: 'bathroom',
            },
            {
              title: '阳台',
              dataIndex: 'balcony',
            },
            {
              title: '产权年限',
              dataIndex: 'ownership_term',
            },
            {
              title: '建筑面积',
              dataIndex: 'built_area',
            },
            {
              title: '套内面积',
              dataIndex: 'inside_area',
            },
            {
              title: '计费面积',
              dataIndex: 'chargeable_area',
            },
          ]}
        />
      </Space>
    </ProCard>
  );
}