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

import {
  MyBetaModalFormProps,
  MyButtons,
  MyColumns,
  MyProTableProps,
} from '@/common';
import { Apis } from '@/gen/Apis';
import {
  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 AssetBuildingsUpdate from '../modals/AssetBuildingsUpdate';
import AssetHousesCreate from '../modals/AssetHousesCreate';
import AssetHousesShow from '../modals/AssetHousesShow';
import AssetHousesUpdate from '../modals/AssetHousesUpdate';
import AssetUnitsCreate from '../modals/AssetUnitsCreate';
import AssetUnitsUpdate from '../modals/AssetUnitsUpdate';

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
      title={
        <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: '楼栋名称',
              dataIndex: 'name',
            },
            MyColumns.Option({
              render: (_, item: any, index, action) => (
                <Space key={index}>
                  <AssetBuildingsUpdate item={item} reload={action?.reload} />
                  <MyButtons.Delete
                    size="small"
                    onConfirm={() =>
                      Apis.Asset.AssetBuildings.Delete({ id: item.id }).then(
                        () => action?.reload(),
                      )
                    }
                  />
                </Space>
              ),
            }),
          ]}
        />

        {selectKey?.id && (
          <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: '单元名称',
                dataIndex: 'name',
              },
              MyColumns.Option({
                render: (_, item: any, index, action) => (
                  <Space key={index}>
                    <AssetUnitsUpdate item={item} reload={action?.reload} />
                    <MyButtons.Delete
                      size="small"
                      onConfirm={() =>
                        Apis.Asset.AssetUnits.Delete({ id: item.id }).then(() =>
                          action?.reload(),
                        )
                      }
                    />
                  </Space>
                ),
              }),
            ]}
          />
        )}

        {selectKeyUnits?.id && (
          <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',
              },
              {
                title: '楼层',
                dataIndex: 'floor',
                render(_, record) {
                  return `${record?.floor}层`;
                },
              },
              MyColumns.EnumTag({
                title: '产权性质',
                dataIndex: 'ownership_type',
                valueEnum: AssetHousesOwnershipTypeEnum,
              }),
              MyColumns.EnumTag({
                title: '房屋状态',
                dataIndex: 'status',
                valueEnum: AssetHousesStatusEnum,
              }),
              MyColumns.Option({
                render: (_, item: any, index, action) => (
                  <Space key={index}>
                    <AssetHousesShow item={item} reload={action?.reload} />
                    <AssetHousesUpdate item={item} reload={action?.reload} />
                    <MyButtons.Delete
                      onConfirm={() =>
                        Apis.Asset.AssetBuildings.Delete({ id: item.id }).then(
                          () => action?.reload(),
                        )
                      }
                    />
                  </Space>
                ),
              }),
            ]}
          />
        )}
      </Space>
    </ProCard>
  );
}