ele-admin-plus 1.3.0 → 1.4.0-beta.1

package/es/ele-pro-form/components/render-util.js

@@ -1,16 +1,19 @@
-import { h, mergeProps, createVNode, defineComponent, isVNode } from "vue";
+import { defineComponent, h, mergeProps, createVNode, isVNode } from "vue";
+import { get } from "lodash-es";
+import { cloneDeep, get as get2, merge, set } from "lodash-es";
 import VueDraggable from "vuedraggable";
-import { ElFormItem, ElCol, ElRow } from "element-plus";
-import { omit } from "../../utils/core";
-import { getValue } from "../util";
+import { ElFormItem, ElRow, ElCol } from "element-plus";
+import { useLocale } from "../../ele-config-provider/receiver";
+import { omit, getMappedSlots } from "../../utils/common";
 import { childrenRenderProps } from "../props";
 import BuilderWrapper from "./builder-wrapper";
+import BuilderToolWrapper from "./builder-tool-wrapper";
+import DraggableRow from "./draggable-row";
 import { defaultItemTypeData } from "./item-type-data";
+import { isShowItem, translateJsCode, getScreenSizeColProps, sortableGroupName, computeContentExtraCol } from "./render-core";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const sortableGroupName = "ProFormBuilderBodySortGroup";
-const codeStringPrefix = "/*__PRO_FORM__*/";
 function getItemTypeName(item) {
   var _a;
   let itemType = item.type;
@@ -38,6 +41,9 @@ function getItemTypeName(item) {
 }
 function getItemTypeData(item, itemTypeData) {
   const itemType = getItemTypeName(item);
+  if (itemType == null) {
+    return;
+  }
   const typeData = [...itemTypeData || [], ...defaultItemTypeData].find((d) => d.type === itemType);
   return typeData;
 }
@@ -76,14 +82,18 @@ function getComponentLegacyProps(item) {
   }
   return result;
 }
-function getRuleMessage(label, requiredMessage, placeholder) {
+function getRuleMessage(label, requiredMessage, placeholder, requiredLang) {
   if (typeof requiredMessage === "string" && requiredMessage) {
     return requiredMessage;
   }
   if (typeof placeholder === "string" && placeholder) {
     return placeholder;
   }
-  return `${label ?? ""}必填`;
+  const labelText = label ?? "";
+  if (!requiredLang) {
+    return labelText;
+  }
+  return requiredLang.replace(/\{\s*label\s*\}/g, String(labelText));
 }
 function getComponentRefName(item) {
   const prop = item.prop;
@@ -92,108 +102,8 @@ function getComponentRefName(item) {
   }
   return `${String(prop)}Ref`;
 }
-function getCodeResult(code, form, items, searchExpand, httpRequest, getProFormRefs) {
-  try {
-    return new Function("form", "items", "searchExpand", "httpRequest", "getProFormRefs", `return (${code})`)(form, items, searchExpand, httpRequest, getProFormRefs);
-  } catch (e) {
-    console.error(e);
-  }
-}
-function isShowItem(item, form, items, searchExpand, editable) {
-  if (editable) {
-    return true;
-  }
-  if (item.prop == null && item.key == null) {
-    return false;
-  }
-  if (item.vIf != null) {
-    if (typeof item.vIf === "function") {
-      return item.vIf(form, items, searchExpand);
-    }
-    if (typeof item.vIf === "string" && item.vIf.trim().length) {
-      return getCodeResult(item.vIf, form, items, searchExpand);
-    }
-    if (item.vIf === false) {
-      return false;
-    }
-  }
-  return true;
-}
-function translateJsCode(code, form, items, searchExpand, httpRequest, getProFormRefs, getAndCacheCode) {
-  if (code != null) {
-    if (typeof code === "string") {
-      if (code.startsWith(codeStringPrefix)) {
-        const result = getCodeResult(code, form, items, searchExpand, httpRequest, getProFormRefs);
-        if (getAndCacheCode && typeof result === "function") {
-          return {
-            result: getAndCacheCode(code, result),
-            isCode: true
-          };
-        }
-        return {
-          result,
-          isCode: true
-        };
-      }
-      return {
-        result: code,
-        isCode: false
-      };
-    } else if (Array.isArray(code)) {
-      const arrayResult = [];
-      let arrayIsCode = false;
-      code.forEach((c) => {
-        const {
-          result,
-          isCode
-        } = translateJsCode(c, form, items, searchExpand, httpRequest, getProFormRefs, getAndCacheCode);
-        arrayResult.push(result);
-        if (isCode) {
-          arrayIsCode = true;
-        }
-      });
-      if (arrayIsCode) {
-        return {
-          result: arrayResult,
-          isCode: true
-        };
-      }
-      return {
-        result: code,
-        isCode: false
-      };
-    } else if (typeof code === "object") {
-      const objectResult = {};
-      let objectIsCode = false;
-      Object.keys(code).forEach((k) => {
-        const {
-          result,
-          isCode
-        } = translateJsCode(code[k], form, items, searchExpand, httpRequest, getProFormRefs, getAndCacheCode);
-        objectResult[k] = result;
-        if (isCode) {
-          objectIsCode = true;
-        }
-      });
-      if (objectIsCode) {
-        return {
-          result: objectResult,
-          isCode: true
-        };
-      }
-      return {
-        result: code,
-        isCode: false
-      };
-    }
-  }
-  return {
-    result: code,
-    isCode: false
-  };
-}
 function renderProFormItem(props) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const slots = props.slots || {};
   const formData = props.model || {};
   const typeData = getItemTypeData(props.item, props.itemTypeData);
@@ -201,7 +111,7 @@ function renderProFormItem(props) {
   if (!typeSlot && !typeData) {
     return;
   }
-  const modelValue = props.item.prop == null ? void 0 : getValue(formData, props.item.prop);
+  const modelValue = props.item.prop == null ? void 0 : get(formData, props.item.prop);
   const handleUpdateModelValue = (value) => {
     const propName = props.item.prop;
     if (propName != null && props.updateItemValue) {
@@ -223,6 +133,7 @@ function renderProFormItem(props) {
       formItems: props.formItems,
       searchExpand: props.searchExpand,
       editable: props.editable,
+      screenSize: props.screenSize,
       sortDisabled: !!cSortDisabled,
       containerSelectable: !!cContainerSelectable,
       activeItemKey: props.activeItemKey,
@@ -233,24 +144,32 @@ function renderProFormItem(props) {
       itemTypeData: props.itemTypeData,
       httpRequest: props.httpRequest,
       getProFormRefs: props.getProFormRefs,
-      slots
+      slots,
+      requiredLang: props.requiredLang
     })
   };
   const slotProFormParams = {
     item: props.item,
+    // 替代 items , 兼容旧版
     model: formData,
     rules: props.rules,
+    grid: (_b = props.item) == null ? void 0 : _b.grid,
+    rowProps: (_c = props.item) == null ? void 0 : _c.rowProps,
+    parentItem: props.item,
     formItems: props.formItems,
     searchExpand: props.searchExpand,
     editable: props.editable,
+    screenSize: props.screenSize,
     activeItemKey: props.activeItemKey,
     itemTypeData: props.itemTypeData,
     httpRequest: props.httpRequest,
     getProFormRefs: props.getProFormRefs,
+    getAndCacheCode: props.getAndCacheCode,
     updateItemValue: props.updateItemValue,
     updateItemsData: props.updateItemsData,
     updateActiveItemKey: props.updateActiveItemKey,
-    slots
+    slots,
+    requiredLang: props.requiredLang
   };
   const itemSlots = {};
   if (!typeSlot) {
@@ -295,6 +214,7 @@ function renderProFormItem(props) {
               formItems: props.formItems,
               searchExpand: props.searchExpand,
               editable: props.editable,
+              screenSize: props.screenSize,
               sortDisabled: csd,
               containerSelectable: !!(typeData == null ? void 0 : typeData.containerSelectable),
               activeItemKey: props.activeItemKey,
@@ -305,7 +225,8 @@ function renderProFormItem(props) {
               itemTypeData: props.itemTypeData,
               httpRequest: props.httpRequest,
               getProFormRefs: props.getProFormRefs,
-              slots
+              slots,
+              requiredLang: props.requiredLang
             });
             if (contentNode) {
               if (Array.isArray(contentNode)) {
@@ -332,9 +253,9 @@ function renderProFormItem(props) {
     updateValue: handleUpdateModelValue,
     updatePropValue: props.updateItemValue,
     proForm: slotProFormParams
-  }) : h((isDivTag ? (_b = props.item.props) == null ? void 0 : _b.is : void 0) || componentTag, mergeProps({
+  }) : h((isDivTag ? (_d = props.item.props) == null ? void 0 : _d.is : void 0) || componentTag, mergeProps({
     key: props.key
-  }, getComponentLegacyProps(props.item), ((_c = typeData == null ? void 0 : typeData.defaultProps) == null ? void 0 : _c.call(typeData, propsFunctionParams)) || {}, isDivTag ? omit(componentPropsData, ["is"]) : componentPropsData, ((_d = typeData == null ? void 0 : typeData.reservedProps) == null ? void 0 : _d.call(typeData, propsFunctionParams)) || {}, {
+  }, getComponentLegacyProps(props.item), ((_e = typeData == null ? void 0 : typeData.defaultProps) == null ? void 0 : _e.call(typeData, propsFunctionParams)) || {}, isDivTag ? omit(componentPropsData, ["is"]) : (typeData == null ? void 0 : typeData.type) === "col" ? getScreenSizeColProps(props.screenSize, {}, componentPropsData) : componentPropsData, ((_f = typeData == null ? void 0 : typeData.reservedProps) == null ? void 0 : _f.call(typeData, propsFunctionParams)) || {}, {
     ref: getComponentRefName(props.item)
   }), itemSlots);
   if ((typeData == null ? void 0 : typeData.isContainer) || props.item.itemType === "container" || props.item.itemType === "view") {
@@ -343,21 +264,15 @@ function renderProFormItem(props) {
   const itemPropsData = translateJsCode(props.item.itemProps || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result;
   const labelWidth = itemPropsData.labelWidth;
   const formItemLabelWidth = typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth;
-  const formItemSlots = {};
-  const formItemSlotMap = props.item.itemSlots || {};
-  Object.keys(formItemSlotMap).forEach((name) => {
-    if (formItemSlotMap[name] && slots[formItemSlotMap[name]]) {
-      formItemSlots[name] = slots[formItemSlotMap[name]];
-    }
-  });
+  const formItemSlots = getMappedSlots(slots, props.item.itemSlots);
   formItemSlots.default = () => componentNode;
   const iRule = itemPropsData.rules;
   const iRules = iRule ? Array.isArray(iRule) ? iRule : [iRule] : void 0;
-  const fRule = props.rules && props.item.prop ? getValue(props.rules, props.item.prop) : void 0;
+  const fRule = props.rules && props.item.prop ? get(props.rules, props.item.prop) : void 0;
   const fRules = fRule ? Array.isArray(fRule) ? fRule : [fRule] : void 0;
   const formItemRules = iRules || fRules || [];
   const trigger = (typeData == null ? void 0 : typeData.requiredTrigger) ?? "change";
-  const message = getRuleMessage(props.item.label, props.item.requiredMessage, componentPropsData.placeholder);
+  const message = getRuleMessage(props.item.label, props.item.requiredMessage, componentPropsData.placeholder, props.requiredLang);
   if (props.item.required) {
     formItemRules.unshift({
       required: true,
@@ -382,7 +297,7 @@ function renderProFormContent(props) {
   const itemsData = props.items || [];
   const formData = props.model || {};
   const ownSlots = ["default", "contentExtra"];
-  const getProFormItemNode = (item, editable, sortDisabled) => {
+  const getProFormItemNode = (item, isEditable, isSortDisabled) => {
     const itemKey = item.key ?? item.prop;
     const defaultSlot = () => {
       return renderProFormItem({
@@ -393,6 +308,7 @@ function renderProFormContent(props) {
         formItems: props.formItems,
         searchExpand: props.searchExpand,
         editable: props.editable,
+        screenSize: props.screenSize,
         activeItemKey: props.activeItemKey,
         updateItemValue: props.updateItemValue,
         updateItemsData: props.updateItemsData,
@@ -401,16 +317,17 @@ function renderProFormContent(props) {
         itemTypeData: props.itemTypeData,
         httpRequest: props.httpRequest,
         getProFormRefs: props.getProFormRefs,
-        slots: omit(slots, ownSlots)
+        slots: omit(slots, ownSlots),
+        requiredLang: props.requiredLang
       });
     };
-    if (!editable) {
+    if (!isEditable) {
       return defaultSlot();
     }
     return createVNode(BuilderWrapper, {
       "key": itemKey,
       "item": item,
-      "handle": !sortDisabled,
+      "handle": !isSortDisabled,
       "activeItemKey": props.activeItemKey,
       "onUpdate:activeItemKey": props.updateActiveItemKey
     }, {
@@ -419,63 +336,80 @@ function renderProFormContent(props) {
       builderItemTools: slots.builderItemTools
     });
   };
+  const handleUpdateItemsModelValue = (data) => {
+    if (props.updateItemsData) {
+      props.updateItemsData(data, props.parentItem);
+    }
+  };
   if (props.grid) {
-    itemsData.forEach((item) => {
+    const gridColProps = props.grid === true ? {
+      span: 12
+    } : props.grid;
+    const getItemColNode = (item, isEditable, isSortDisabled, className) => {
+      let _slot;
       const itemKey = item.key ?? item.prop;
-      const gridColProps = props.grid === true ? {
-        span: 12
-      } : props.grid;
       const itemColProps = translateJsCode(item.colProps || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result;
-      if (props.editable && !props.sortDisabled) {
-        let _slot;
-        nodes.push(createVNode(ElCol, mergeProps({
-          "key": itemKey
-        }, gridColProps, itemColProps), _isSlot(_slot = getProFormItemNode(item, true, true)) ? _slot : {
-          default: () => [_slot]
-        }));
-      } else if (isShowItem(item, formData, props.formItems || [], props.searchExpand, props.editable)) {
-        let _slot2;
-        nodes.push(createVNode(ElCol, mergeProps({
-          "key": itemKey
-        }, gridColProps, itemColProps), _isSlot(_slot2 = getProFormItemNode(item)) ? _slot2 : {
-          default: () => [_slot2]
-        }));
+      return createVNode(ElCol, mergeProps({
+        "key": itemKey,
+        "class": className
+      }, getScreenSizeColProps(props.screenSize, gridColProps, itemColProps)), _isSlot(_slot = getProFormItemNode(item, isEditable, isSortDisabled)) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+    const getContentExtraNode = (contentExtraSlot) => {
+      let _slot2;
+      const itemsLength = (props.formItems || []).filter((item) => isShowItem(item, formData, props.formItems || [], props.searchExpand, props.editable)).length;
+      return createVNode(ElCol, getScreenSizeColProps(props.screenSize, props.autoContentExtraCol ? computeContentExtraCol(gridColProps, itemsLength) : {
+        span: 24
+      }, translateJsCode(props.contentExtraColProps || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result), _isSlot(_slot2 = contentExtraSlot()) ? _slot2 : {
+        default: () => [_slot2]
+      });
+    };
+    if (props.editable && !props.sortDisabled) {
+      return createVNode(DraggableRow, {
+        "itemsData": itemsData,
+        "componentData": translateJsCode(props.rowProps || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result,
+        "screenSize": props.screenSize,
+        "gridColProps": gridColProps,
+        "formData": formData,
+        "formItems": props.formItems,
+        "searchExpand": props.searchExpand,
+        "httpRequest": props.httpRequest,
+        "getProFormRefs": props.getProFormRefs,
+        "getAndCacheCode": props.getAndCacheCode,
+        "autoContentExtraCol": props.autoContentExtraCol,
+        "contentExtraColProps": props.contentExtraColProps,
+        "editable": props.editable,
+        "onUpdateItems": handleUpdateItemsModelValue
+      }, {
+        item: ({
+          element
+        }) => getProFormItemNode(element, true, false),
+        footer: slots.contentExtra ? slots.contentExtra() : void 0
+      });
+    }
+    itemsData.forEach((item) => {
+      const isShow = isShowItem(item, formData, props.formItems || [], props.searchExpand, props.editable);
+      if (isShow) {
+        nodes.push(getItemColNode(item));
       }
     });
     if (slots.contentExtra) {
-      let _slot3;
-      nodes.push(createVNode(ElCol, translateJsCode(props.contentExtraColProps || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result, _isSlot(_slot3 = slots.contentExtra()) ? _slot3 : {
-        default: () => [_slot3]
-      }));
+      nodes.push(getContentExtraNode(slots.contentExtra));
     }
     return createVNode(ElRow, translateJsCode(props.rowProps || {}, formData, props.formItems || [], props.searchExpand, props.httpRequest, props.getProFormRefs, props.getAndCacheCode).result, _isSlot(nodes) ? nodes : {
       default: () => [nodes]
     });
   }
   if (props.editable && !props.sortDisabled) {
-    const footerSlot = () => {
-      var _a;
-      return createVNode("div", {
-        "class": "ele-pro-form-builder-item-tool-wrapper"
-      }, [createVNode("div", {
-        "class": "ele-pro-form-builder-item-handle is-disabled"
-      }, [slots.builderItemHandleContent ? slots.builderItemHandleContent({
-        item: props.parentItem,
-        activeItemKey: props.activeItemKey
-      }) : createVNode("div", {
-        "class": "ele-pro-form-builder-item-handle-content"
-      }, [(_a = props.parentItem) == null ? void 0 : _a.type])]), createVNode("div", {
-        "class": "ele-pro-form-builder-item-tools"
-      }, [slots.builderItemTools ? slots.builderItemTools({
-        item: props.parentItem,
-        activeItemKey: props.activeItemKey
-      }) : void 0])]);
-    };
-    const handleUpdateModelValue = (data) => {
-      if (props.updateItemsData) {
-        props.updateItemsData(data, props.parentItem);
-      }
-    };
+    const footerSlot = () => createVNode(BuilderToolWrapper, {
+      "item": props.parentItem,
+      "activeItemKey": props.activeItemKey,
+      "handle": false
+    }, {
+      builderItemHandleContent: slots.builderItemHandleContent,
+      builderItemTools: slots.builderItemTools
+    });
     const handleContainerBuilderWrapperClick = (e) => {
       var _a;
       const parentItemKey = (_a = props.parentItem) == null ? void 0 : _a.key;
@@ -499,7 +433,7 @@ function renderProFormContent(props) {
       }, {
         "is-active": props.containerSelectable && props.parentItem && props.parentItem.key != null && props.activeItemKey != null && props.activeItemKey === props.parentItem.key
       }],
-      "onUpdate:modelValue": handleUpdateModelValue,
+      "onUpdate:modelValue": handleUpdateItemsModelValue,
       "onClick": handleContainerBuilderWrapperClick
     }, {
       item: ({
@@ -549,6 +483,9 @@ const ChildrenRender = /* @__PURE__ */ defineComponent({
     emit,
     slots
   }) {
+    const {
+      lang
+    } = useLocale("proForm", props);
     const handleUpdateItemValue = (prop, value) => {
       emit("updateItemValue", prop, value);
     };
@@ -567,23 +504,23 @@ const ChildrenRender = /* @__PURE__ */ defineComponent({
         updateItemValue: props.updateItemValue ?? handleUpdateItemValue,
         updateItemsData: props.updateItemsData ?? handleUpdateItemsData,
         updateActiveItemKey: props.updateActiveItemKey ?? handleUpdateActiveItemKey,
-        slots: props.slots ?? slots
+        slots: props.slots ?? slots,
+        requiredLang: props.requiredLang ?? lang.value.required
       });
     };
   }
 });
 export {
   ChildrenRender,
-  codeStringPrefix,
-  getCodeResult,
+  cloneDeep,
   getComponentLegacyProps,
   getComponentRefName,
   getItemTypeData,
   getItemTypeName,
   getRuleMessage,
-  isShowItem,
+  get2 as getValue,
+  merge as mergeValue,
   renderProFormContent,
   renderProFormItem,
-  sortableGroupName,
-  translateJsCode
+  set as setValue
 };