pay-company/src/components/TransferUnits.tsx

import { Apis } from '@/gen/Apis';
import { Transfer } from 'antd';
import { useEffect, useState } from 'react';
const MyTransferUnits = (props: any) => {
  const [getLoading, setLoading] = useState(false);
  const [dataSource, setTransferData] = useState<any[]>([]);
  const [targetKeys, setTargetKeys] = useState<string[]>([]);
  useEffect(() => {
    if (props?.item?.asset_projects_id) {
      Apis.Asset.AssetUnits.GridSelect({
        asset_projects_id: props?.item?.asset_projects_id,
        type: props?.item?.type,
      })
        .then((res) => {
          setLoading(true);
          const data =
            res.data?.map((item: any) => ({
              key: item.value?.toString(),
              title: item?.asset_building?.name + item.label,
              asset_buildings_id: item.asset_buildings_id,
            })) || [];
          setTransferData(data);
        })
        .catch(() => {
          setTransferData([]);
        });
    }
  }, [props?.item?.asset_projects_id]);

  useEffect(() => {
    console.log(props.value, 'props.value');
    if (props.value?.length && !props.value[0]?.asset_units_id) {
      let dataIds: any = [];
      props.value?.forEach((res: any) => {
        dataIds?.push(res?.toString());
      });
      setTargetKeys(dataIds);
    }
  }, [props.value]);

  useEffect(() => {
    if (dataSource?.length && props?.value?.length) {
      let dataIds: any = [];
      props.value?.forEach((res: any) => {
        dataSource?.forEach((k: any) => {
          if (res?.toString() === k.key) {
            dataIds?.push({
              asset_projects_id: props?.item?.asset_projects_id,
              asset_buildings_id: k?.asset_buildings_id,
              asset_units_id: k?.key,
            });
          }
        });
      });
      props?.onChange?.(dataIds);
    }
  }, [getLoading]);

  return (
    getLoading && (
      <Transfer
        dataSource={dataSource}
        targetKeys={targetKeys}
        onChange={(targetKeys) => {
          let dataIds: any = [];
          console.log(targetKeys, 'targetKeys', props.value);
          targetKeys?.forEach((res: any) => {
            dataSource?.forEach((k: any) => {
              if (res === k.key) {
                dataIds?.push({
                  asset_projects_id: props?.item?.asset_projects_id,
                  asset_buildings_id: k?.asset_buildings_id,
                  asset_units_id: k?.key,
                });
              }
            });
          });
          setTargetKeys(targetKeys as string[]);
          props?.onChange?.(dataIds);
        }}
        render={(item) => item.title}
        titles={['可选单元', '已选单元']}
        showSearch
        listStyle={{
          width: 250,
          height: 300,
        }}
        operations={['选择', '移除']}
        operationStyle={{ marginTop: 20 }}
        locale={{
          itemUnit: '项',
          itemsUnit: '项',
          searchPlaceholder: '请输入搜索内容',
          notFoundContent: '列表为空',
        }}
        onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {
          console.log(
            sourceSelectedKeys,
            targetSelectedKeys,
            'sourceSelectedKeys',
          );
          // 处理选择变化，但不触发表单提交
        }}
      />
    )
  );
};

export default MyTransferUnits;