pay-admin/src/pages/asset/components/modals/GridCreate.tsx

import {
  MyBetaModalFormProps,
  MyButtons,
  MyModalFormProps,
  rulesHelper,
} from '@/common';
import { Selects } from '@/components/Select';
import { Apis } from '@/gen/Apis';
import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
import { Form, message } from 'antd';

export default function Create(props: MyBetaModalFormProps) {
  const [form] = Form.useForm();
  console.log(props?.item, 'item');
  return (
    <BetaSchemaForm<ApiTypes.Grid.Grids.Store>
      {...MyModalFormProps.props}
      title={`划分范围`}
      // 基本表单
      width="700px"
      layout="horizontal"
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 24 }}
      labelAlign="right"
      trigger={<MyButtons.Create title={`划分范围`} />}
      form={form}
      key={new Date().getTime()}
      onOpenChange={(open: any) => {
        if (open) {
          form.resetFields(); // 清空表单数据
        }
      }}
      onFinish={async (values: any) => {
        values?.grid_ranges?.forEach((res: { asset_projects_id: string }) => {
          res.asset_projects_id = props?.item?.id;
        });
        return Apis.Grid.Grids.Store({
          ...values,
          asset_projects_id: props?.item?.id,
        })
          .then(() => {
            props.reload?.();
            message.success('范围划分成功');
            return true;
          })
          .catch(() => false);
      }}
      columns={[
        Selects?.GetGridMark({
          key: 'grid_mark',
          title: '范围标识',
          params: {
            asset_projects_id: props?.item?.id,
          },
          colProps: { span: 24 },
          formItemProps: { ...rulesHelper.text },
        }),
        {
          valueType: 'formList',
          dataIndex: 'grid_ranges',
          colProps: { span: 24 },
          initialValue: [''],
          formItemProps: { ...rulesHelper.array },
          fieldProps: {
            copyIconProps: false,
            creatorButtonProps: {
              creatorButtonText: '添加楼栋单元',
            },
            itemRender: (
              { listDom, action }: any,
              { index }: { index: number },
            ) => {
              return (
                <ProCard
                  bordered
                  style={{ marginBlockEnd: 5 }}
                  title={`选择范围${index + 1}`}
                  extra={action}
                  bodyStyle={{ paddingBlockEnd: 0 }}
                >
                  {listDom}
                </ProCard>
              );
            },
          },
          columns: [
            {
              valueType: 'dependency',
              name: ['asset_buildings_id', 'asset_units_id'],
              columns: ({ asset_buildings_id }) => {
                return [
                  {
                    valueType: 'group',
                    columns: [
                      Selects?.AssetBuildings({
                        key: 'asset_buildings_id',
                        title: '选择楼栋',
                        params: {
                          asset_projects_id: props?.item?.id,
                        },
                        colProps: { span: 12 },
                        formItemProps: { ...rulesHelper.number },
                        fieldProps: {
                          showSearch: true,
                          onChange: (value: any) => {
                            // 获取当前表单的所有值
                            const formValues = form.getFieldsValue();
                            const gridRanges = formValues.grid_ranges || [];

                            // 清空所有行的asset_units_id，因为楼栋变化会影响所有单元选择
                            const updatedGridRanges = gridRanges.map(
                              (item: any, index: number) => {
                                if (item.asset_buildings_id === value) {
                                  return { ...item, asset_units_id: undefined };
                                }
                                return item;
                              },
                            );

                            // 更新表单值
                            form.setFieldsValue({
                              grid_ranges: updatedGridRanges,
                            });
                          },
                        },
                      }),
                      ...(asset_buildings_id
                        ? [
                            Selects?.GridUnits({
                              key: 'asset_units_id',
                              title: '选择单元',
                              params: {
                                asset_projects_id: props?.item?.id,
                                asset_buildings_id: asset_buildings_id,
                              },
                              colProps: { span: 12 },
                              formItemProps: { ...rulesHelper.text },
                              fieldProps: {
                                showSearch: true,
                              },
                            }),
                          ]
                        : []),
                    ],
                  },
                ];
              },
            },
          ],
        },
      ]}
    />
  );
}