starfish-form-custom 1.0.0

package/dist/starfish-form-a18a5409.mjs

@@ -0,0 +1,328 @@
+import { ElFormItem, ElForm } from 'element-plus/es';
+import 'element-plus/es/components/base/style/css';
+import 'element-plus/es/components/form/style/css';
+import 'element-plus/es/components/form-item/style/css';
+import { defineComponent, getCurrentInstance, ref, onMounted, openBlock, createElementBlock, createVNode, withCtx, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, createCommentVNode, toRaw } from 'vue';
+import { _ as _export_sfc } from './main-96327b2e.mjs';
+import 'element-plus/es/components/input/style/css';
+import 'element-plus/es/components/checkbox/style/css';
+import 'element-plus/es/components/tooltip/style/css';
+import 'element-plus/es/components/loading/style/css';
+import 'element-plus/es/components/dropdown/style/css';
+import 'element-plus/es/components/dropdown-menu/style/css';
+import 'element-plus/es/components/dropdown-item/style/css';
+import 'element-plus/es/components/collapse/style/css';
+import 'element-plus/es/components/collapse-item/style/css';
+import 'element-plus/es/components/row/style/css';
+import 'element-plus/es/components/button/style/css';
+import 'element-plus/es/components/icon/style/css';
+import 'element-plus/es/components/col/style/css';
+import 'element-plus/es/components/select/style/css';
+import 'element-plus/es/components/option/style/css';
+import '@element-plus/icons-vue';
+import 'element-plus/es/components/input-number/style/css';
+import 'element-plus/es/components/radio-group/style/css';
+import 'element-plus/es/components/radio-button/style/css';
+import 'element-plus/es/components/checkbox-group/style/css';
+import 'element-plus/es/components/color-picker/style/css';
+import 'element-plus/es/components/date-picker/style/css';
+import 'element-plus/es/components/radio/style/css';
+import 'element-plus/es/components/slider/style/css';
+import 'element-plus/es/components/switch/style/css';
+import 'element-plus/es/components/time-select/style/css';
+import 'element-plus/es/components/divider/style/css';
+import 'element-plus/es/components/alert/style/css';
+import 'element-plus/es/components/tabs/style/css';
+import 'element-plus/es/components/tab-pane/style/css';
+import 'element-plus';
+
+const _sfc_main = defineComponent({
+  name: "Dynamicform",
+  props: {
+    allFormList: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    formResult: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    globalConfig: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(props, { emit }) {
+    const { proxy } = getCurrentInstance();
+    const rules = ref({});
+    const ruleForm = ref();
+    const controlObj = ref();
+    props.allFormList?.forEach((item2) => {
+      getRules(item2);
+    });
+    function getFormListRules(rules) {
+      const result = [];
+      if (Array.isArray(rules) && rules && rules.length > 0) {
+        rules.forEach((item) => {
+          if (item.type == "enum") {
+            const func = eval(`(${item.value})`);
+            result.push({
+              validator: func,
+              trigger: "blur"
+            });
+          } else if (item.type == "func") {
+            const mainData = props.formResult;
+            const func = eval(`((rule, value, callback, mainData = mainData) => {${item.value.func}})`);
+            result.push({
+              validator: func,
+              trigger: "blur"
+            });
+            console.log("mainData", mainData);
+          } else if (item.type == "high") {
+            if (item.value.ruleType == 5) {
+              result.push({
+                validator: eval(item.value.validor),
+                trigger: item.value.trigger
+              });
+              return;
+            }
+            result.push(item.value);
+          }
+        });
+      }
+      return result;
+    }
+    function getRules(item2) {
+      if (!item2.layout) {
+        let rule = [];
+        if (item2.data.required) {
+          rule.push({
+            required: true,
+            message: "\u8BF7\u8F93\u5165" + item2.data.label,
+            trigger: "blur"
+          });
+        }
+        if (typeof item2.data.rule == "string") {
+          rule = rule.concat(proxy.$Flex.tryParseJson(item2.data.rule));
+        } else {
+          rule = rule.concat(getFormListRules(item2.data.rule));
+        }
+        if (item2.data.json) {
+          rule.push(...proxy.$Flex.getJsonValidate());
+        }
+        rules.value[item2.data.fieldName] = rule;
+      } else if (item2.layout) {
+        if (item2.ControlType == "Grid") {
+          item2.data.columns.forEach((colItem) => {
+            colItem.list.forEach((listItem) => {
+              getRules(listItem);
+            });
+          });
+        } else if (item2.ControlType == "TableLayout") {
+          const trs = item2.data.trs;
+          trs.forEach((trItem) => {
+            trItem.tds.forEach((tdItem) => {
+              tdItem.list.forEach((listItem) => {
+                getRules(listItem);
+              });
+            });
+          });
+        } else if (item2.ControlType == "Collapse" || item2.ControlType == "Tabs") {
+          const items = item2.data.items;
+          items.forEach((colItem) => {
+            colItem.list.forEach((listItem) => {
+              getRules(listItem);
+            });
+          });
+        }
+      }
+    }
+    const handleControlChange = () => {
+      const allFormLists = props.allFormList;
+      allFormLists.forEach((item2) => {
+        if (item2.data.showRule === "{}") {
+          item2.show = true;
+        } else {
+          try {
+            if (Array.isArray(item2.data.showRule)) {
+              item2.show = conditionChange(transformData(toRaw(item2.data.showRule)));
+            } else {
+              item2.show = conditionChange(toRaw(item2.data.showRule));
+            }
+          } catch (e) {
+            item2.show = true;
+          }
+        }
+      });
+      executeFunc("updated");
+      emit("change");
+    };
+    function transformData(data) {
+      const r = [];
+      data.forEach((item2) => {
+        r.push({
+          type: "andgroup",
+          result: item2.map((d) => {
+            return {
+              type: "data",
+              data: d
+            };
+          })
+        });
+      });
+      const result2 = {
+        type: "orgroup",
+        result: r
+      };
+      return result2;
+    }
+    function conditionChange(data) {
+      if (data.type == "andgroup") {
+        const result2 = data.result.map((item2) => {
+          const r = conditionChange(item2);
+          return r;
+        }).find((item2) => {
+          return item2 == false;
+        });
+        return result2 === void 0 ? true : result2;
+      } else if (data.type == "orgroup") {
+        const result2 = data.result.map((item2) => {
+          const r = conditionChange(item2);
+          return r;
+        }).find((item2) => {
+          return item2 == true;
+        });
+        return result2 === void 0 ? false : result2;
+      } else if (data.type == "data") {
+        const result2 = data.data;
+        const formResults = props.formResult;
+        const value = formResults[result2.field];
+        let isShow = false;
+        switch (result2.logic) {
+          case "=":
+            isShow = value == result2.value;
+            break;
+          case "!=":
+            isShow = value != result2.value;
+            break;
+          case "in":
+            if (Array.isArray(value)) {
+              value.find((item2) => {
+                if (result2.value.include(item2)) {
+                  isShow = result2.value.includes(item2);
+                  return item2;
+                }
+              });
+            } else {
+              isShow = result2.value.includes(value);
+            }
+            break;
+          case "not in":
+            if (Array.isArray(value)) {
+              value.find((item2) => {
+                if (!result2.value.include(item2)) {
+                  isShow = !result2.value.includes(item2);
+                  return item2;
+                }
+              });
+            } else {
+              isShow = !result2.value.includes(value);
+            }
+            break;
+        }
+        return isShow;
+      }
+    }
+    function reset() {
+      ruleForm.value.resetFields();
+    }
+    function getValidate() {
+      return new Promise((resolve) => {
+        ruleForm.value.validate((valide) => {
+          resolve(valide);
+        });
+      });
+    }
+    onMounted(() => {
+      handleControlChange();
+      executeFunc("mounted");
+    });
+    function executeFunc(funcName) {
+      const mountedAction = props.globalConfig.action?.find((item2) => {
+        if (item2.type == funcName) {
+          return item2;
+        }
+      });
+      if (mountedAction) {
+        eval(`(function(){${mountedAction.funcStr}}).call(proxy)`);
+      }
+    }
+    return {
+      rules,
+      ruleForm,
+      controlObj,
+      handleControlChange,
+      reset,
+      getValidate
+    };
+  }
+});
+const _hoisted_1 = { class: "starfish-dynamicform" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_form_item = ElFormItem;
+  const _component_el_form = ElForm;
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_el_form, {
+      ref: "ruleForm",
+      model: _ctx.formResult,
+      rules: _ctx.rules,
+      "label-width": "120px",
+      class: "demo-ruleForm",
+      size: _ctx.globalConfig.size || "large",
+      "validate-on-rule-change": false
+    }, {
+      default: withCtx(() => [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.allFormList, (item2) => {
+          return openBlock(), createElementBlock(Fragment, null, [
+            !item2.layout && item2.show ? (openBlock(), createBlock(_component_el_form_item, {
+              prop: item2.data.fieldName,
+              key: item2.id
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(item2.ControlType), mergeProps({
+                  ref_for: true,
+                  ref: "controlObj",
+                  onChange: _ctx.handleControlChange
+                }, { ref_for: true }, _ctx.globalConfig, {
+                  item: item2,
+                  data: _ctx.formResult || "{}",
+                  drag: false
+                }), null, 16, ["onChange", "item", "data"]))
+              ]),
+              _: 2
+            }, 1032, ["prop"])) : item2.show ? (openBlock(), createBlock(resolveDynamicComponent(item2.ControlType), mergeProps({
+              ref_for: true,
+              ref: "controlObj",
+              onChange: _ctx.handleControlChange,
+              key: item2.id
+            }, { ref_for: true }, _ctx.globalConfig, {
+              item: item2,
+              data: _ctx.formResult || "{}",
+              drag: false
+            }), null, 16, ["onChange", "item", "data"])) : createCommentVNode("", true)
+          ], 64);
+        }), 256))
+      ]),
+      _: 1
+    }, 8, ["model", "rules", "size"])
+  ]);
+}
+const Dynamicform = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+
+export { Dynamicform as default };

package/dist/starfish-form.mjs

@@ -0,0 +1,36 @@
+export { D as Dynamicform, m as default } from './main-96327b2e.mjs';
+import 'vue';
+import 'element-plus/es';
+import 'element-plus/es/components/base/style/css';
+import 'element-plus/es/components/input/style/css';
+import 'element-plus/es/components/checkbox/style/css';
+import 'element-plus/es/components/tooltip/style/css';
+import 'element-plus/es/components/loading/style/css';
+import 'element-plus/es/components/dropdown/style/css';
+import 'element-plus/es/components/dropdown-menu/style/css';
+import 'element-plus/es/components/dropdown-item/style/css';
+import 'element-plus/es/components/collapse/style/css';
+import 'element-plus/es/components/collapse-item/style/css';
+import 'element-plus/es/components/row/style/css';
+import 'element-plus/es/components/button/style/css';
+import 'element-plus/es/components/icon/style/css';
+import 'element-plus/es/components/col/style/css';
+import 'element-plus/es/components/select/style/css';
+import 'element-plus/es/components/option/style/css';
+import '@element-plus/icons-vue';
+import 'element-plus/es/components/input-number/style/css';
+import 'element-plus/es/components/radio-group/style/css';
+import 'element-plus/es/components/radio-button/style/css';
+import 'element-plus/es/components/checkbox-group/style/css';
+import 'element-plus/es/components/color-picker/style/css';
+import 'element-plus/es/components/date-picker/style/css';
+import 'element-plus/es/components/radio/style/css';
+import 'element-plus/es/components/slider/style/css';
+import 'element-plus/es/components/switch/style/css';
+import 'element-plus/es/components/time-select/style/css';
+import 'element-plus/es/components/divider/style/css';
+import 'element-plus/es/components/alert/style/css';
+import 'element-plus/es/components/tabs/style/css';
+import 'element-plus/es/components/tab-pane/style/css';
+import 'element-plus/es/components/form-item/style/css';
+import 'element-plus';