zy-react-library 1.1.1 → 1.1.3

package/components/FormBuilder/FormItemsRenderer.js

@@ -1,591 +1 @@
-import { InfoCircleOutlined } from "@ant-design/icons";
-import {
-  Button,
-  Checkbox,
-  Col,
-  DatePicker,
-  Divider,
-  Form,
-  Input,
-  InputNumber,
-  Radio,
-  Row,
-  Select,
-  Tooltip,
-} from "antd";
-import dayjs from "dayjs";
-import { FORM_ITEM_RENDER_ENUM } from "../../enum/formItemRender";
-
-const { TextArea } = Input;
-const { RangePicker } = DatePicker;
-
-/**
- * 表单项渲染器组件
- * @param {object} props - 组件属性
- * @param {Array} props.options - 表单配置项数组
- * @param {object} props.labelCol - label 栅格配置
- * @param {number} props.gutter - 栅格间距
- * @param {number} props.span - 默认栅格占据列数
- * @param {boolean} props.collapse - 是否折叠（仅显示前3项）
- * @param {boolean} props.useAutoGenerateRequired - 是否自动生成必填规则
- * @param {object} props.initialValues - 初始值
- */
-const FormItemsRenderer = ({
-  options,
-  labelCol,
-  gutter = 24,
-  span = 12,
-  collapse = false,
-  useAutoGenerateRequired = true,
-  initialValues,
-}) => {
-  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) => {
-    return typeof option.componentProps === "function"
-      ? option.componentProps(getFormValues())
-      : (option.componentProps || {});
-  };
-
-  // 获取 Form.List 独有的属性
-  const getFormListUniqueProps = (option) => {
-    const defaultProps = {
-      showAddButton: true,
-      showRemoveButton: true,
-      addButtonText: "添加",
-      removeButtonText: "删除",
-      options: [],
-      addDefaultValue: {},
-      addInsertIndex: undefined,
-    };
-
-    if (typeof option.formListUniqueProps === "function") {
-      return {
-        ...defaultProps,
-        ...option.formListUniqueProps(getFormValues()),
-      };
-    }
-
-    return {
-      ...defaultProps,
-      ...(option.formListUniqueProps || {}),
-    };
-  };
-
-  // 获取传给formItem的属性
-  const getFormItemProps = (option) => {
-    const formItemProps = typeof option.formItemProps === "function"
-      ? option.formItemProps(getFormValues())
-      : (option.formItemProps || {});
-
-    // 为日期组件添加特殊处理
-    if ([
-      FORM_ITEM_RENDER_ENUM.DATE,
-      FORM_ITEM_RENDER_ENUM.DATE_MONTH,
-      FORM_ITEM_RENDER_ENUM.DATE_YEAR,
-      FORM_ITEM_RENDER_ENUM.DATETIME,
-    ].includes(option.render)) {
-      formItemProps.getValueFromEvent = (_, dateString) => dateString;
-      formItemProps.getValueProps = value => ({ value: value ? dayjs(value) : undefined });
-    }
-
-    // 为日期周组件添加特殊处理
-    if ([
-      FORM_ITEM_RENDER_ENUM.DATE_WEEK,
-    ].includes(option.render)) {
-      formItemProps.getValueFromEvent = (_, dateString) => dateString;
-      formItemProps.getValueProps = value => ({ value: value ? dayjs(value, "YYYY-wo") : undefined });
-    }
-
-    // 为日期范围组件添加特殊处理
-    if ([
-      FORM_ITEM_RENDER_ENUM.DATE_RANGE,
-      FORM_ITEM_RENDER_ENUM.DATETIME_RANGE,
-    ].includes(option.render)) {
-      formItemProps.getValueFromEvent = (_, dateString) => dateString;
-      formItemProps.getValueProps = value => ({ value: Array.isArray(value) ? value.map(v => v ? dayjs(v) : undefined) : undefined });
-    }
-
-    return formItemProps;
-  };
-
-  // 获取items里的value和label字段key
-  const getItemsFieldKey = (option) => {
-    return {
-      valueKey: option?.itemsField?.valueKey || "bianma",
-      labelKey: option?.itemsField?.labelKey || "name",
-    };
-  };
-
-  // 获取 required
-  const getRequired = (required) => {
-    // 支持动态计算 required
-    return typeof required === "function"
-      ? required(getFormValues())
-      : (required ?? true);
-  };
-
-  // 获取验证规则
-  const getRules = (option) => {
-    if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER)
-      return [];
-
-    const rules = [];
-
-    /** @type {string | Function} */
-    const render = option.render || FORM_ITEM_RENDER_ENUM.INPUT;
-    switch (render) {
-      case FORM_ITEM_RENDER_ENUM.INPUT:
-        option.useConstraints !== false && rules.push({ max: 50, message: "最多输入50字符" });
-        break;
-
-      case FORM_ITEM_RENDER_ENUM.TEXTAREA:
-        option.useConstraints !== false && rules.push({ max: 500, message: "最多输入500字符" });
-        break;
-
-      case FORM_ITEM_RENDER_ENUM.INPUT_NUMBER:
-      case FORM_ITEM_RENDER_ENUM.NUMBER:
-        option.useConstraints !== false && rules.push({ pattern: /^(\d+)(\.\d{1,2})?$/, message: "请输入正确的数字，最多保留两位小数" });
-        option.useConstraints !== false && rules.push({
-          validator: (_, value) => {
-            if (value && Math.abs(Number.parseFloat(value)) > 999999999) {
-              return Promise.reject("输入数值超出安全范围");
-            }
-            return Promise.resolve();
-          },
-        });
-        break;
-    }
-
-    if (!useAutoGenerateRequired)
-      return option.rules ? (Array.isArray(option.rules) ? [...option.rules, ...rules] : [option.rules, ...rules]) : rules;
-
-    if (getRequired(option.required)) {
-      const isBlurTrigger = !option.render || [
-        FORM_ITEM_RENDER_ENUM.INPUT,
-        FORM_ITEM_RENDER_ENUM.TEXTAREA,
-        FORM_ITEM_RENDER_ENUM.INPUT_NUMBER,
-        FORM_ITEM_RENDER_ENUM.NUMBER,
-      ].includes(option.render);
-
-      rules.push({ required: true, message: `${isBlurTrigger ? "请输入" : "请选择"}${option.label}` });
-
-      if (option.rules) {
-        if (Array.isArray(option.rules)) {
-          rules.push(...option.rules);
-        }
-        else {
-          rules.push(option.rules);
-        }
-      }
-
-      return rules;
-    }
-
-    return option.rules ? (Array.isArray(option.rules) ? [...option.rules, ...rules] : [option.rules, ...rules]) : rules;
-  };
-
-  // 获取key
-  const getKey = (option) => {
-    return option.key || option.name;
-  };
-
-  // 使用 style 控制显示/隐藏
-  const getStyle = (index) => {
-    return collapse && index >= 3 ? { display: "none" } : undefined;
-  };
-
-  // 列数
-  const getCol = (option) => {
-    const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : (option.span ?? span);
-    const itemLabelCol = option.labelCol ?? (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol);
-    const itemWrapperCol = option.wrapperCol ?? { span: 24 - itemLabelCol.span };
-    return { span: itemSpan, labelCol: itemLabelCol, wrapperCol: itemWrapperCol };
-  };
-
-  // 获取 hidden
-  const getHidden = (hidden) => {
-    // 支持动态计算 hidden
-    return typeof hidden === "function"
-      ? hidden(getFormValues())
-      : (hidden ?? false);
-  };
-
-  // 获取 listOptions
-  const getListOptions = (listOptions, field, fieldIndex, add, remove, move) => {
-    return typeof listOptions === "function"
-      ? listOptions(field, fieldIndex, { field, fieldIndex, add, remove, move })
-      : (listOptions ?? []);
-  };
-
-  // 渲染表单控件
-  const renderFormControl = (option) => {
-    const componentProps = getComponentProps(option);
-    const itemsFieldKey = getItemsFieldKey(option);
-    /** @type {string | Function} */
-    const render = option.render || FORM_ITEM_RENDER_ENUM.INPUT;
-    const placeholder = option.placeholder || `请${[FORM_ITEM_RENDER_ENUM.INPUT, FORM_ITEM_RENDER_ENUM.TEXTAREA, FORM_ITEM_RENDER_ENUM.INPUT_NUMBER, FORM_ITEM_RENDER_ENUM.NUMBER].includes(render) ? "输入" : "选择"}${option.label}`;
-
-    switch (render) {
-      case FORM_ITEM_RENDER_ENUM.INPUT:
-        return <Input placeholder={placeholder} maxLength={50} {...componentProps} />;
-
-      case FORM_ITEM_RENDER_ENUM.TEXTAREA:
-        return <TextArea placeholder={placeholder} maxLength={500} showCount={true} rows={3} {...componentProps} />;
-
-      case FORM_ITEM_RENDER_ENUM.INPUT_NUMBER:
-      case FORM_ITEM_RENDER_ENUM.NUMBER:
-        return <InputNumber placeholder={placeholder} style={{ width: "100%" }} {...componentProps} />;
-
-      case FORM_ITEM_RENDER_ENUM.SELECT:
-        return (
-          <Select placeholder={placeholder} showSearch allowClear optionFilterProp="children" {...componentProps}>
-            {(option.items || []).map((item) => {
-              const value = item[itemsFieldKey.valueKey];
-              const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
-              return (
-                <Select.Option key={value} value={value}>
-                  {label}
-                </Select.Option>
-              );
-            })}
-          </Select>
-        );
-
-      case FORM_ITEM_RENDER_ENUM.RADIO:
-        return (
-          <Radio.Group {...componentProps}>
-            {(option.items || []).map((item) => {
-              const value = item[itemsFieldKey.valueKey];
-              const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
-              return (
-                <Radio key={value} value={value}>
-                  {label}
-                </Radio>
-              );
-            })}
-          </Radio.Group>
-        );
-
-      case FORM_ITEM_RENDER_ENUM.CHECKBOX:
-        return (
-          <Checkbox.Group {...componentProps}>
-            {(option.items || []).map((item) => {
-              const value = item[itemsFieldKey.valueKey];
-              const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
-              return (
-                <Checkbox key={value} value={value}>
-                  {label}
-                </Checkbox>
-              );
-            })}
-          </Checkbox.Group>
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATE:
-        return <DatePicker placeholder={placeholder} format="YYYY-MM-DD" style={{ width: "100%" }} {...componentProps} />;
-
-      case FORM_ITEM_RENDER_ENUM.DATE_MONTH:
-        return (
-          <DatePicker
-            picker="month"
-            placeholder={placeholder}
-            format="YYYY-MM"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATE_YEAR:
-        return (
-          <DatePicker
-            picker="year"
-            placeholder={placeholder}
-            format="YYYY"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATE_WEEK:
-        return (
-          <DatePicker
-            picker="week"
-            placeholder={placeholder}
-            format="YYYY-wo"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATE_RANGE:
-        return (
-          <RangePicker
-            placeholder={[`请选择开始${option.label}`, `请选择结束${option.label}`]}
-            format="YYYY-MM-DD"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATETIME:
-        return (
-          <DatePicker
-            showTime
-            placeholder={placeholder}
-            format="YYYY-MM-DD HH:mm:ss"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATETIME_RANGE:
-        return (
-          <RangePicker
-            showTime
-            placeholder={[`请选择开始${option.label}`, `请选择结束${option.label}`]}
-            format="YYYY-MM-DD HH:mm:ss"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DIVIDER:
-        return null;
-
-      default:
-        return render;
-    }
-  };
-
-  // 渲染 label（带提示）
-  const renderLabel = (option) => {
-    if (!option.tip)
-      return option.label;
-
-    return (
-      <>
-        {option.label}
-        <Tooltip title={option.tip}>
-          <InfoCircleOutlined style={{ marginLeft: 4, fontSize: 12 }} />
-        </Tooltip>
-      </>
-    );
-  };
-
-  // 渲染普通表单项
-  const renderFormItem = ({ option, style, col, index }) => {
-    if (getHidden(option.hidden))
-      return null;
-
-    return (
-      <Col key={getKey(option) || index} span={col.span} style={style}>
-        <Form.Item
-          name={option.name}
-          label={renderLabel(option)}
-          rules={getRules(option)}
-          labelCol={col.labelCol}
-          wrapperCol={col.wrapperCol}
-          preserve={false}
-          {...getFormItemProps(option)}
-        >
-          {renderFormControl(option)}
-        </Form.Item>
-      </Col>
-    );
-  };
-
-  // 渲染特殊类型的表单项
-  const renderOtherTypeItem = ({ option, style, col, index }) => {
-    const componentProps = getComponentProps(option);
-
-    // 如果是 customizeRender 类型，完全交给外部控制渲染
-    if (option.customizeRender) {
-      return (
-        <Col key={getKey(option) || index} span={col.span} style={style}>
-          {option.render}
-        </Col>
-      );
-    }
-
-    // 如果是 onlyForLabel 类型，不渲染任何UI，只在表单中保存数据
-    if (option.onlyForLabel) {
-      return (
-        <Form.Item
-          key={getKey(option) || index}
-          name={option.name}
-          noStyle
-          preserve={false}
-        >
-          <input type="hidden" />
-        </Form.Item>
-      );
-    }
-
-    // 如果是分割线
-    if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) {
-      return (
-        <Col key={getKey(option) || index} span={col.span} style={style}>
-          <Divider orientation="left" {...componentProps}>{option.label}</Divider>
-        </Col>
-      );
-    }
-
-    return null;
-  };
-
-  // 渲染 Form.List
-  const renderFormList = (option, index, col, style) => {
-    const formListUniqueProps = getFormListUniqueProps(option);
-    const componentProps = getComponentProps(option);
-
-    return (
-      <Col key={getKey(option) || index} span={col.span} style={style}>
-        <Form.List name={option.name} {...componentProps}>
-          {(fields, { add, remove, move }) => (
-            <>
-              {fields.map((field, fieldIndex) => {
-                const listOptions = getListOptions(option.formListUniqueProps.options, field, fieldIndex, add, remove, move);
-                return (
-                  <Row gutter={gutter} key={field.key}>
-                    {listOptions.map((listOption, listIndex) => {
-                      const col = getCol(listOption);
-
-                      const params = {
-                        option: listOption,
-                        style,
-                        col,
-                        index: `${fieldIndex}_${listIndex}`,
-                      };
-                      const otherTypeItem = renderOtherTypeItem(params);
-                      if (otherTypeItem)
-                        return otherTypeItem;
-
-                      // 如果是最后一个表单项，则在其后添加操作按钮
-                      // 这样可以确保每个表单项组都有添加/删除按钮
-                      if (listIndex === listOptions.length - 1) {
-                        return (
-                          <Col key={getKey(listOption) || listIndex} span={col.span} style={style}>
-                            <Form.Item
-                              label={renderLabel(listOption)}
-                              labelCol={col.labelCol}
-                              wrapperCol={col.wrapperCol}
-                              preserve={false}
-                              required={getRequired(listOption.required)}
-                              {...getFormItemProps(listOption)}
-                            >
-                              <div style={{ display: "flex", gap: 10, alignItems: "center", justifyContent: "space-between" }}>
-                                <div style={{ flex: 1 }}>
-                                  <Form.Item
-                                    noStyle
-                                    rules={getRules(listOption)}
-                                    name={listOption.name}
-                                  >
-                                    {renderFormControl(listOption)}
-                                  </Form.Item>
-                                </div>
-                                {
-                                  // 只有当不是第一行时才显示删除按钮
-                                  fieldIndex >= 1
-                                    ? (
-                                        formListUniqueProps.showRemoveButton
-                                        && (
-                                          <Button
-                                            type="primary"
-                                            danger
-                                            onClick={() => remove(field.name)}
-                                          >
-                                            {formListUniqueProps.removeButtonText}
-                                          </Button>
-                                        )
-                                      )
-                                    : (
-                                        // 第一行显示添加按钮
-                                        formListUniqueProps.showAddButton
-                                        && (
-                                          <Button
-                                            type="primary"
-                                            onClick={() => add(formListUniqueProps.addDefaultValue, formListUniqueProps.addInsertIndex)}
-                                          >
-                                            {formListUniqueProps.addButtonText}
-                                          </Button>
-                                        )
-                                      )
-                                }
-                              </div>
-                            </Form.Item>
-                          </Col>
-                        );
-                      }
-
-                      return renderFormItem(params);
-                    })}
-                  </Row>
-                );
-              })}
-            </>
-          )}
-        </Form.List>
-      </Col>
-    );
-  };
-
-  // 渲染需要动态更新的表单项
-  const renderDynamicFormItem = (option, index, style, col) => {
-    return (
-      <Form.Item
-        key={getKey(option) || index}
-        noStyle
-        preserve={false}
-        shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
-        dependencies={option.dependencies ?? option?.componentProps?.dependencies}
-      >
-        {() => {
-          return renderFormItem({ option, style, col, index });
-        }}
-      </Form.Item>
-    );
-  };
-
-  return (
-    <>
-      {options.map((option, index) => {
-        const col = getCol(option);
-        const style = getStyle(index);
-
-        // 处理特殊类型的表单项
-        const otherTypeItem = renderOtherTypeItem({ option, style, col, index });
-        if (otherTypeItem)
-          return otherTypeItem;
-
-        // 如果是 Form.List
-        if (option.render === FORM_ITEM_RENDER_ENUM.FORM_LIST) {
-          return renderFormList(option, index, col, style);
-        }
-
-        // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
-        if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) {
-          return renderDynamicFormItem(option, index, style, col);
-        }
-
-        // 普通表单项（静态配置）
-        return renderFormItem({ option, style, col, index });
-      })}
-    </>
-  );
-};
-
-FormItemsRenderer.displayName = "FormItemsRenderer";
-
-export default FormItemsRenderer;
+import{InfoCircleOutlined as e}from"@ant-design/icons";import{Input as r,DatePicker as n,Form as t,Col as l,Divider as o,Row as s,Button as a,Tooltip as i,Checkbox as d,Radio as p,Select as u,InputNumber as c}from"antd";import m from"dayjs";import{FORM_ITEM_RENDER_ENUM as h}from"../../enum/formItemRender/index.js";import{jsx as y,Fragment as E,jsxs as f}from"react/jsx-runtime";const{TextArea:T}=r,{RangePicker:A}=n,I=({options:I,labelCol:b,gutter:v=24,span:Y=12,collapse:D=!1,useAutoGenerateRequired:P=!0,initialValues:R})=>{const w=t.useFormInstance(),U=()=>{const e=w.getFieldsValue();return 0===Object.keys(e).length&&R?R:e},M=e=>"function"==typeof e.componentProps?e.componentProps(U()):e.componentProps||{},N=e=>{const r="function"==typeof e.formItemProps?e.formItemProps(U()):e.formItemProps||{};return[h.DATE,h.DATE_MONTH,h.DATE_YEAR,h.DATETIME].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:e?m(e):void 0})),[h.DATE_WEEK].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:e?m(e,"YYYY-wo"):void 0})),[h.DATE_RANGE,h.DATETIME_RANGE].includes(e.render)&&(r.getValueFromEvent=(e,r)=>r,r.getValueProps=e=>({value:Array.isArray(e)?e.map(e=>e?m(e):void 0):void 0})),r},C=e=>"function"==typeof e?e(U()):e??!0,g=e=>{if(e.render===h.DIVIDER)return[];const r=[];switch(e.render||h.INPUT){case h.INPUT:!1!==e.useConstraints&&r.push({max:50,message:"最多输入50字符"});break;case h.TEXTAREA:!1!==e.useConstraints&&r.push({max:500,message:"最多输入500字符"});break;case h.INPUT_NUMBER:case h.NUMBER:!1!==e.useConstraints&&r.push({pattern:/^(\d+)(\.\d{1,2})?$/,message:"请输入正确的数字，最多保留两位小数"}),!1!==e.useConstraints&&r.push({validator:(e,r)=>r&&Math.abs(Number.parseFloat(r))>999999999?Promise.reject("输入数值超出安全范围"):Promise.resolve()})}if(!P)return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r;if(C(e.required)){const n=!e.render||[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER].includes(e.render);return r.push({required:!0,message:`${n?"请输入":"请选择"}${e.label}`}),e.rules&&(Array.isArray(e.rules)?r.push(...e.rules):r.push(e.rules)),r}return e.rules?Array.isArray(e.rules)?[...e.rules,...r]:[e.rules,...r]:r},x=e=>e.key||e.name,K=e=>{const r=e.render===h.DIVIDER?24:e.span??Y,n=e.labelCol??(24===r?{span:b.span/2}:b);return{span:r,labelCol:n,wrapperCol:e.wrapperCol??{span:24-n.span}}},B=e=>{const t=M(e),l=(e=>({valueKey:e?.itemsField?.valueKey||"bianma",labelKey:e?.itemsField?.labelKey||"name"}))(e),o=e.render||h.INPUT,s=e.placeholder||`请${[h.INPUT,h.TEXTAREA,h.INPUT_NUMBER,h.NUMBER].includes(o)?"输入":"选择"}${e.label}`;switch(o){case h.INPUT:return y(r,{placeholder:s,maxLength:50,...t});case h.TEXTAREA:return y(T,{placeholder:s,maxLength:500,showCount:!0,rows:3,...t});case h.INPUT_NUMBER:case h.NUMBER:return y(c,{placeholder:s,style:{width:"100%"},...t});case h.SELECT:return y(u,{placeholder:s,showSearch:!0,allowClear:!0,optionFilterProp:"children",...t,children:(e.items||[]).map(e=>{const r=e[l.valueKey],n=e["function"==typeof l.labelKey?l.labelKey(e):l.labelKey];return y(u.Option,{value:r,children:n},r)})});case h.RADIO:return y(p.Group,{...t,children:(e.items||[]).map(e=>{const r=e[l.valueKey],n=e["function"==typeof l.labelKey?l.labelKey(e):l.labelKey];return y(p,{value:r,children:n},r)})});case h.CHECKBOX:return y(d.Group,{...t,children:(e.items||[]).map(e=>{const r=e[l.valueKey],n=e["function"==typeof l.labelKey?l.labelKey(e):l.labelKey];return y(d,{value:r,children:n},r)})});case h.DATE:return y(n,{placeholder:s,format:"YYYY-MM-DD",style:{width:"100%"},...t});case h.DATE_MONTH:return y(n,{picker:"month",placeholder:s,format:"YYYY-MM",style:{width:"100%"},...t});case h.DATE_YEAR:return y(n,{picker:"year",placeholder:s,format:"YYYY",style:{width:"100%"},...t});case h.DATE_WEEK:return y(n,{picker:"week",placeholder:s,format:"YYYY-wo",style:{width:"100%"},...t});case h.DATE_RANGE:return y(A,{placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD",style:{width:"100%"},...t});case h.DATETIME:return y(n,{showTime:!0,placeholder:s,format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...t});case h.DATETIME_RANGE:return y(A,{showTime:!0,placeholder:[`请选择开始${e.label}`,`请选择结束${e.label}`],format:"YYYY-MM-DD HH:mm:ss",style:{width:"100%"},...t});case h.DIVIDER:return null;default:return o}},_=r=>r.tip?f(E,{children:[r.label,y(i,{title:r.tip,children:y(e,{style:{marginLeft:4,fontSize:12}})})]}):r.label,V=({option:e,style:r,col:n,index:o})=>{return("function"==typeof(s=e.hidden)?s(U()):s)?null:y(l,{span:n.span,style:r,children:y(t.Item,{name:e.name,label:_(e),rules:g(e),labelCol:n.labelCol,wrapperCol:n.wrapperCol,preserve:!1,...N(e),children:B(e)})},x(e)||o);var s},k=({option:e,style:r,col:n,index:s})=>{const a=M(e);return e.customizeRender?y(l,{span:n.span,style:r,children:e.render},x(e)||s):e.onlyForLabel?y(t.Item,{name:e.name,noStyle:!0,preserve:!1,children:y("input",{type:"hidden"})},x(e)||s):e.render===h.DIVIDER?y(l,{span:n.span,style:r,children:y(o,{orientation:"left",...a,children:e.label})},x(e)||s):null};return y(E,{children:I.map((e,r)=>{const n=K(e),o=(e=>D&&e>=3?{display:"none"}:void 0)(r);return k({option:e,style:o,col:n,index:r})||(e.render===h.FORM_LIST?((e,r,n,o)=>{const i=(e=>{const r={showAddButton:!0,showRemoveButton:!0,addButtonText:"添加",removeButtonText:"删除",options:[],addDefaultValue:{},addInsertIndex:void 0};return"function"==typeof e.formListUniqueProps?{...r,...e.formListUniqueProps(U())}:{...r,...e.formListUniqueProps||{}}})(e),d=M(e);return y(l,{span:n.span,style:o,children:y(t.List,{name:e.name,...d,children:(r,{add:n,remove:d,move:p})=>y(E,{children:r.map((r,u)=>{const c=((e,r,n,t,l,o)=>"function"==typeof e?e(r,n,{field:r,fieldIndex:n,add:t,remove:l,move:o}):e??[])(e.formListUniqueProps.options,r,u,n,d,p);return y(s,{gutter:v,children:c.map((e,s)=>{const p=K(e),m={option:e,style:o,col:p,index:`${u}_${s}`};return k(m)||(s===c.length-1?y(l,{span:p.span,style:o,children:y(t.Item,{label:_(e),labelCol:p.labelCol,wrapperCol:p.wrapperCol,preserve:!1,required:C(e.required),...N(e),children:f("div",{style:{display:"flex",gap:10,alignItems:"center",justifyContent:"space-between"},children:[y("div",{style:{flex:1},children:y(t.Item,{noStyle:!0,rules:g(e),name:e.name,children:B(e)})}),u>=1?i.showRemoveButton&&y(a,{type:"primary",danger:!0,onClick:()=>d(r.name),children:i.removeButtonText}):i.showAddButton&&y(a,{type:"primary",onClick:()=>n(i.addDefaultValue,i.addInsertIndex),children:i.addButtonText})]})})},x(e)||s):V(m))})},r.key)})})})},x(e)||r)})(e,r,n,o):(e.shouldUpdate??e.dependencies)||(e?.componentProps?.shouldUpdate??e?.componentProps?.dependencies)?((e,r,n,l)=>y(t.Item,{noStyle:!0,preserve:!1,shouldUpdate:e.shouldUpdate??e?.componentProps?.shouldUpdate,dependencies:e.dependencies??e?.componentProps?.dependencies,children:()=>V({option:e,style:n,col:l,index:r})},x(e)||r))(e,r,o,n):V({option:e,style:o,col:n,index:r}))})})};I.displayName="FormItemsRenderer";export{I as default};

package/components/FormBuilder/index.js

@@ -1,3 +1 @@
-import FormBuilder from "./FormBuilder";
-
-export default FormBuilder;
+import r from"./FormBuilder.js";export{r as default};

package/components/HeaderBack/index.js

@@ -1,37 +1 @@
-import { ArrowLeftOutlined } from "@ant-design/icons";
-import { Divider } from "antd";
-import "./index.less";
-
-/**
- * 头部返回组件
- */
-function HeaderBack(props) {
-  const { title, history, previous = true } = props;
-
-  return (
-    <div className="header-back">
-      <div className="action">
-        {
-          previous
-          && (
-            <>
-              <div
-                className="back"
-                onClick={() => history?.goBack?.() || window.history.back()}
-              >
-                <ArrowLeftOutlined style={{ fontSize: 14 }} />
-                <span>返回</span>
-              </div>
-              <Divider type="vertical" style={{ backgroundColor: "#dcdfe6", marginLeft: 15, marginRight: 15 }} />
-            </>
-          )
-        }
-        <div className="title">{title}</div>
-      </div>
-    </div>
-  );
-}
-
-HeaderBack.displayName = "HeaderBack";
-
-export default HeaderBack;
+import{ArrowLeftOutlined as e}from"@ant-design/icons";import{Divider as i}from"antd";import"./index.less";import{jsx as a,jsxs as r,Fragment as t}from"react/jsx-runtime";function c(c){const{title:n,history:o,previous:s=!0}=c;return a("div",{className:"header-back",children:r("div",{className:"action",children:[s&&r(t,{children:[r("div",{className:"back",onClick:()=>o?.goBack?.()||window.history.back(),children:[a(e,{style:{fontSize:14}}),a("span",{children:"返回"})]}),a(i,{type:"vertical",style:{backgroundColor:"#dcdfe6",marginLeft:15,marginRight:15}})]}),a("div",{className:"title",children:n})]})})}c.displayName="HeaderBack";export{c as default};