优化FormBuilder和Table
parent
24a9b10d79
commit
4b7bb143ab
|
|
@ -47,6 +47,7 @@ const FormBuilder = (props) => {
|
||||||
labelCol={labelCol}
|
labelCol={labelCol}
|
||||||
span={span}
|
span={span}
|
||||||
useAutoGenerateRequired={useAutoGenerateRequired}
|
useAutoGenerateRequired={useAutoGenerateRequired}
|
||||||
|
initialValues={values}
|
||||||
/>
|
/>
|
||||||
</Row>
|
</Row>
|
||||||
{showActionButtons && (
|
{showActionButtons && (
|
||||||
|
|
|
||||||
|
|
@ -91,6 +91,8 @@ export interface FormItemsRendererProps {
|
||||||
collapse?: boolean;
|
collapse?: boolean;
|
||||||
/** 自动生成必填规则,默认 true */
|
/** 自动生成必填规则,默认 true */
|
||||||
useAutoGenerateRequired?: boolean;
|
useAutoGenerateRequired?: boolean;
|
||||||
|
/** 初始值,用于在表单未初始化时提供默认值 */
|
||||||
|
initialValues?: FormValues;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -26,20 +26,31 @@ const FormItemsRenderer = ({
|
||||||
span = 12,
|
span = 12,
|
||||||
collapse = false,
|
collapse = false,
|
||||||
useAutoGenerateRequired = true,
|
useAutoGenerateRequired = true,
|
||||||
|
initialValues,
|
||||||
}) => {
|
}) => {
|
||||||
const form = Form.useFormInstance();
|
const form = Form.useFormInstance();
|
||||||
|
|
||||||
|
// 获取表单值,优先使用 initialValues
|
||||||
|
const getFormValues = () => {
|
||||||
|
const formValues = form.getFieldsValue();
|
||||||
|
// 如果表单值为空但有 initialValues,则使用 initialValues
|
||||||
|
if (Object.keys(formValues).length === 0 && initialValues) {
|
||||||
|
return initialValues;
|
||||||
|
}
|
||||||
|
return formValues;
|
||||||
|
};
|
||||||
|
|
||||||
// 获取传给组件的属性
|
// 获取传给组件的属性
|
||||||
const getComponentProps = (option) => {
|
const getComponentProps = (option) => {
|
||||||
return typeof option.componentProps === "function"
|
return typeof option.componentProps === "function"
|
||||||
? option.componentProps(form.getFieldsValue())
|
? option.componentProps(getFormValues())
|
||||||
: (option.componentProps || {});
|
: (option.componentProps || {});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取传给formItem的属性
|
// 获取传给formItem的属性
|
||||||
const getFormItemProps = (option) => {
|
const getFormItemProps = (option) => {
|
||||||
const formItemProps = typeof option.formItemProps === "function"
|
const formItemProps = typeof option.formItemProps === "function"
|
||||||
? option.formItemProps(form.getFieldsValue())
|
? option.formItemProps(getFormValues())
|
||||||
: (option.formItemProps || {});
|
: (option.formItemProps || {});
|
||||||
|
|
||||||
// 为日期组件添加特殊处理
|
// 为日期组件添加特殊处理
|
||||||
|
|
@ -90,7 +101,7 @@ const FormItemsRenderer = ({
|
||||||
|
|
||||||
// 支持动态计算 required
|
// 支持动态计算 required
|
||||||
const required = typeof option.required === "function"
|
const required = typeof option.required === "function"
|
||||||
? option.required(form.getFieldsValue())
|
? option.required(getFormValues())
|
||||||
: (option.required ?? true);
|
: (option.required ?? true);
|
||||||
|
|
||||||
if (required) {
|
if (required) {
|
||||||
|
|
@ -290,10 +301,10 @@ const FormItemsRenderer = ({
|
||||||
shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
|
shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
|
||||||
dependencies={option.dependencies || option?.componentProps?.dependencies}
|
dependencies={option.dependencies || option?.componentProps?.dependencies}
|
||||||
>
|
>
|
||||||
{(form) => {
|
{() => {
|
||||||
// 支持动态计算 hidden
|
// 支持动态计算 hidden
|
||||||
const hidden = typeof option.hidden === "function"
|
const hidden = typeof option.hidden === "function"
|
||||||
? option.hidden(form.getFieldsValue())
|
? option.hidden(getFormValues())
|
||||||
: (option.hidden ?? false);
|
: (option.hidden ?? false);
|
||||||
|
|
||||||
if (hidden)
|
if (hidden)
|
||||||
|
|
@ -319,7 +330,12 @@ const FormItemsRenderer = ({
|
||||||
}
|
}
|
||||||
|
|
||||||
// 普通表单项(静态配置)
|
// 普通表单项(静态配置)
|
||||||
if (option.hidden)
|
// 支持动态计算 hidden
|
||||||
|
const hidden = typeof option.hidden === "function"
|
||||||
|
? option.hidden(getFormValues())
|
||||||
|
: (option.hidden ?? false);
|
||||||
|
|
||||||
|
if (hidden)
|
||||||
return null;
|
return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -84,6 +84,7 @@ const Search = (props) => {
|
||||||
span={6}
|
span={6}
|
||||||
collapse={collapse}
|
collapse={collapse}
|
||||||
useAutoGenerateRequired={false}
|
useAutoGenerateRequired={false}
|
||||||
|
initialValues={values}
|
||||||
/>
|
/>
|
||||||
<Col span={showCollapseButton ? (collapse ? 6 : span) : span}>
|
<Col span={showCollapseButton ? (collapse ? 6 : span) : span}>
|
||||||
<Form.Item label=" " colon={false} style={{ textAlign: "right" }}>
|
<Form.Item label=" " colon={false} style={{ textAlign: "right" }}>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
import Table from "@cqsjjb/jjb-react-admin-component/Table";
|
import Table from "@cqsjjb/jjb-react-admin-component/Table";
|
||||||
import { getIndexColumn } from "../../utils/index";
|
import { getIndexColumn } from "../../utils/index";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
function TablePro(props) {
|
function TablePro(props) {
|
||||||
const {
|
const {
|
||||||
columns = [],
|
columns = [],
|
||||||
showIndex = true,
|
showIndex = true,
|
||||||
useAlignCenter = true,
|
useAlignCenter = true,
|
||||||
rowKey = 'id',
|
rowKey = "id",
|
||||||
...restProps
|
...restProps
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.@{ant-prefix}-table-cell-scrollbar {
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue