pay-admin/src/components/Address.tsx

import {
  ProColumns,
  ProFormCascader,
  ProFormColumnsType,
  ProFormText,
} from '@ant-design/pro-components';

import { rulesHelper } from '@/common';
import { DefaultOptionType } from 'antd/es/cascader';
import data from './city.json';
const request = async () => Promise.resolve(data as Record<string, any>[]);
type ReturnAddressType = ProColumns<Record<string, any>, 'text'>;
type ReturnType = ProFormColumnsType<any, 'text'>;
type PropsType = { required?: boolean } & ReturnType;
const filter = (inputValue: string, path: DefaultOptionType[]) =>
  path.some(
    (option) =>
      (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) >
      -1,
  );
export const Address = {
  Cascader: (
    props: { keys: string[]; max?: number } & PropsType,
  ): PropsType => {
    const { required, ...rest } = props;
    return {
      valueType: 'cascader',
      request,
      transform: (value: string[]) => {
        // console.log('transform', value);
        let root = data as Record<string, any> | undefined;
        return props.keys.reduce((accumulator, currentKey, index) => {
          if (root) {
            const node = root.find(
              (item: { value: number | string }) =>
                item.value === value?.[index],
            );
            if (node) {
              accumulator[currentKey] = node.label;
              root = node.children;
            } else {
              root = undefined;
            }
          }
          accumulator[currentKey + '_id'] = value?.[index];
          return accumulator;
        }, {} as Record<string, string>);
      },
      formItemProps: {
        ...(required ? rulesHelper.array : {}),
      },
      fieldProps: {
        showSearch: true,
        changeOnSelect: true,
        placeholder: '请选择 / 输入名称搜索',
        fieldNames: {
          label: 'label',
          value: 'value',
          children: 'children',
        },
      },
      ...rest,
    };
  },
};

export function FormAddress(props: any) {
  let root = data as any;
  return (
    <>
      <div
        style={{
          position: 'relative',
          zIndex: 10,
        }}
      >
        <ProFormCascader
          name="city_ids"
          fieldProps={{
            options: root,
            changeOnSelect: true,
            showSearch: { filter },
            onChange: (value: string, selectedOptions: { label: string }[]) => {
              props?.form?.setFieldsValue({
                province: selectedOptions?.[0]?.label || '',
                city: selectedOptions?.[1]?.label || '',
                area: selectedOptions?.[2]?.label || '',
              });
            },
          }}
          label="所在城市"
        />
      </div>
      <div
        style={{
          display: 'flex',
          position: 'absolute',
          top: 0,
          left: 0,
          zIndex: 1,
          opacity: 0,
        }}
      >
        <ProFormText name="province" />
        <ProFormText name="city" />
        <ProFormText name="area" />
      </div>
    </>
  );
}

export const MyAddressColumns = {
  Address({ ...rest }: ReturnAddressType): ReturnAddressType {
    let root = data as any;
    return {
      title: '所在城市',
      valueType: 'cascader',
      ...rest,
      fieldProps: {
        options: root,
        changeOnSelect: true,
        showSearch: { filter },
        ...rest?.fieldProps,
      },
    };
  },
};