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={`创建网格`}
      wrapperCol={{ span: 24 }}
      width="700px"
      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: 0 }}
                  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: () => {
                            form.setFieldsValue({
                              asset_units_id: undefined,
                              asset_floors_id: undefined,
                            });
                          },
                        },
                      }),
                      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,
                        },
                      }),
                    ],
                  },
                ];
              },
            },
          ],
        },
      ]}
    />
  );
}