这种控制表单项能不能优化下 我感觉自己写的代码有点low

[LWppp]

import {
createForm,
onFieldValueChange,
onFormValuesChange,
} from "@formily/core";
import { createSchemaField, FormProvider } from "@formily/react";
import { Alert, Button, Drawer, Modal, Space } from "@m-ui/react";
import React, { memo, useEffect, useMemo } from "react";
import { useLegendReservedMoney } from "@/Store/LegendWithdrawReserveMoney";
import getSchema from "./schemal";
import { isEmpty } from "lodash";
import { OPERATE_REASONS_VALUES_LIST } from "../config";
const AddReserveAmount = () => {
const {
updateStore,
updateAddFormData,
modalVisible,
editFormData,
reserveAmountForm,
resetReserveAmountStore,
addReserveAmount,
fetchAccountList,
getSettlementChannel,
fetchLegendReservedMoney,
editReserveAmount,
} = useLegendReservedMoney();

const form = useMemo(() => {
    return createForm({
        values: {},
        effects: () => {
            // onFormValuesChange((form) => {
            //     console.log(form, "form");
            //     // updateAddFormData(form.values);
            // });
        },
    });
}, []);
// 返回的json拼接成下拉选项
const handleJson = (str: string, type?: string) => {
    try {
        if (str) {
            const jsonObject = JSON.parse(str);
            const entries = Object.entries(jsonObject);
            const result = entries.map(([key, value]) => {
                if (type) {
                    return {
                        label: key,
                        value: value,
                    };
                } else {
                    return {
                        label: `${key}-${value}`,
                        value: key,
                    };
                }
            });
            return result;
        } else {
            return [];
        }
    } catch (error) {
        console.error("JSON 解析错误:", error);
        return [];
    }
};

// 获取收款账户
const AccountList = (value: number) => {
    if (value && form.values?.customerSource) {
        fetchAccountList({
            customerSource: form.values?.customerSource,
            outerCustomerId: value,
        }).then((res) => {
            const list = handleJson(res?.data);
            form.setFieldState("subjectId", (state: any) => {
                if (!isEmpty(list)) {
                    state.dataSource = list;
                    state.component[1].disabled = false;
                }
            });
        });
    }
};
// 获取结算渠道
const handleSubjectIdChange = (value: number) => {
    if (value && form.values?.subjectId) {
        getSettlementChannel({
            customerSource: form.values?.customerSource,
            subjectId: value,
        }).then((res) => {
            const list = handleJson(res?.data, "channel");
            form.setFieldState("channel", (state: any) => {
                if (!isEmpty(list)) {
                    state.dataSource = list;
                    state.component[1].disabled = false;
                }
            });
        });
    }
};
// 获取收款账户
const handleRoleChange = (value: number) => {
    if (value && form.values?.outerCustomerId) {
        fetchAccountList({
            customerSource: value,
            outerCustomerId: form.values?.outerCustomerId,
        }).then((res) => {
            const list = handleJson(res?.data);
            form.setFieldState("subjectId", (state: any) => {
                if (!isEmpty(list)) {
                    state.dataSource = list;
                    state.component[1].disabled = false;
                }
            });
        });
    }
};

const { schema, schemaFieldProps } = getSchema(
    AccountList,
    handleSubjectIdChange,
    handleRoleChange
);

const SchemaField = useMemo(() => {
    return createSchemaField(schemaFieldProps);
}, []);

useEffect(() => {
    if (modalVisible) {
        if (!isEmpty(editFormData)) {
            const {
                freezeReason,
                amount,
                channel,
                subjectId,
                outerCustomerId,
                customerSource,
            } = editFormData;
            const isExtReason =
                !OPERATE_REASONS_VALUES_LIST?.includes(freezeReason);
            fetchAccountList({
                customerSource: editFormData?.customerSource,
                outerCustomerId: editFormData?.outerCustomerId,
            }).then((res) => {
                const list = handleJson(res?.data);
                form.setFieldState("subjectId", (state: any) => {
                    if (!isEmpty(list)) {
                        state.dataSource = list;
                    }
                });
            });
            form.setValues({
                channel,
                subjectId,
                outerCustomerId,
                customerSource,
                reserveAmount: amount,
                freezeReason: {
                    type: !isExtReason ? freezeReason : "",
                    extInfo: isExtReason ? freezeReason : "",
                },
            });
            form.disabled = true;
            form.setFieldState("*(reserveAmount,freezeReason)", {
                disabled: false,
            });
        } else {
            form.disabled = false;
        }
    }
}, [editFormData, modalVisible]);

const onReset = () => {
    form.reset();
    form.setFieldState("subjectId", (state: any) => {
        state.component[1].disabled = true;
    });
    form.setFieldState("channel", (state: any) => {
        // state.dataSource = [];
        state.component[1].disabled = true;
    });
    resetReserveAmountStore();
    updateStore({
        modalVisible: false,
        editFormData: {},
    });
};

const onFinish = () => {
    form.submit((value) => {
        console.log(value, "value");
        if (isEmpty(editFormData)) {
            addReserveAmount(value);
        } else {
            editReserveAmount({
                id: editFormData?.id,
                reserveAmount: value?.reserveAmount,
                freezeReason: value?.freezeReason,
            });
        }
        updateStore({
            modalVisible: false,
            editFormData: {},
        });
        form.reset();
        fetchLegendReservedMoney(true);
    }).catch(() => {});
};

return (
    <Modal
        width={700}
        title={`${!isEmpty(editFormData) ? "编辑" : "新增"}预留金`}
        visible={modalVisible}
        zIndex={1000}
        onCancel={onReset}
        footer={
            <Space>
                <Button type="primary" htmlType="submit" onClick={onFinish}>
                    提交
                </Button>
                <Button onClick={onReset}>取消</Button>
            </Space>
        }
    >
        <FormProvider form={form}>
            <SchemaField schema={schema} />
        </FormProvider>
    </Modal>
);

};
export default memo(AddReserveAmount);
上述是一个Modal弹框
import { useLegendReservedMoney } from "@/Store/LegendWithdrawReserveMoney";
import {
FormItem,
Input,
Select,
FormGrid,
NumberPicker,
} from "@ks-lfe/formily-mui";
import { CHANNEL_OPTIONS, ROLE_TYPE_OPTIONS } from "../config";
import OperateReason from "./OperateReason";

type AccountListType = (value: number) => void;
const getSchema = (
AccountList: AccountListType,
handleSubjectIdChange: AccountListType,
handleRoleChange: AccountListType
) => {
const schemaFieldProps = {
components: {
FormItem,
Input,
Select,
FormGrid,
NumberPicker,
OperateReason,
},
};
const COMMON_ITEM_CONFIG = {
labelWidth: 137,
};
const schema = {
type: "object",
properties: {
grid: {
type: "void",
"x-component": "FormGrid",
"x-component-props": {
maxColumns: 1,
minColumns: 1,
},
properties: {
customerSource: {
type: "number",
title: "角色类型",
required: true,
"x-decorator": "FormItem",
"x-component": "Select",
"x-decorator-props": {
...COMMON_ITEM_CONFIG,
},
"x-component-props": {
style: { width: "360px" },
placeholder: "请选择角色类型",
options: ROLE_TYPE_OPTIONS,
onChange: (value: number) => {
handleRoleChange(value);
},
},
},
outerCustomerId: {
type: "string",
title: "客户id",
required: true,
description:
"商家为商家id；门店为门店poi id；达人为达人id；服务商为服务商id",
"x-decorator": "FormItem",
"x-component": "Input",
"x-decorator-props": {
...COMMON_ITEM_CONFIG,
},
"x-component-props": {
style: { width: "360px" },
placeholder: "请输入客户id",
onBlur: (e: any) => {
AccountList(e.target.value);
},
},
},
subjectId: {
type: "number",
title: "收款账户",
required: true,
description: "请先填写角色类型和客户id",
"x-decorator": "FormItem",
"x-component": "Select",
"x-decorator-props": {
...COMMON_ITEM_CONFIG,
},
"x-component-props": {
style: { width: "360px" },
placeholder: "请输入收款账户",
options: [],
disabled: true,
onChange: (value: number) => {
handleSubjectIdChange(value);
},
},
},
channel: {
type: "string",
title: "结算渠道",
required: true,
description: "请先填写角色类型和收款账户",
"x-decorator": "FormItem",
"x-component": "Select",
"x-decorator-props": {
...COMMON_ITEM_CONFIG,
},
"x-component-props": {
style: { width: "360px" },
placeholder: "请选择结算渠道",
options: CHANNEL_OPTIONS,
disabled: true,
},
},
reserveAmount: {
type: "number",
title: "预留金额",
required: true,
"x-decorator": "FormItem",
"x-component": "NumberPicker",
"x-decorator-props": {
...COMMON_ITEM_CONFIG,
},
"x-component-props": {
style: { width: "360px" },
placeholder: "请输入冻结金额",
addonAfter: "元",
min: 0,
},
},
freezeReason: {
type: "object",
title: "操作原因",
required: true,
"x-decorator": "FormItem",
"x-decorator-props": {
...COMMON_ITEM_CONFIG,
},
"x-component": "OperateReason",
"x-validator": (value: {
type: string;
extInfo: string;
}) => {
if (!value?.type && !value?.extInfo) {
return "该字段是必填字段";
}
return "";
},
},
},
},
},
};
return {
schema,
schemaFieldProps,
};
};

export default getSchema;
上面是schema
表单项的联动能不能优化下 因为这个formily我真的不怎么会