@fecp/vue 1.1.3 → 1.1.4

package/es/packages/vue/src/components/forms/form/Form.vue.mjs

@@ -5,13 +5,14 @@
 /* empty css                                                                                                                                         */
 /* empty css                                                                                                                                       */
 /* empty css                                                                                                                                       */
-import { getCurrentInstance, ref, onMounted, createElementBlock, openBlock, Fragment, createVNode, createTextVNode, withCtx, createBlock, createCommentVNode, unref, renderList, toDisplayString } from "vue";
+import { getCurrentInstance, ref, computed, onMounted, watch, provide, createBlock, openBlock, withCtx, createCommentVNode, createVNode, unref, normalizeStyle, createElementBlock, isRef, Fragment, renderList } from "vue";
 import "../../../../../../node_modules/.pnpm/grid-layout-plus@1.1.1_vue@3.5.13_typescript@5.7.3_/node_modules/grid-layout-plus/es/index.mjs";
 import { getCurrentVueInstance } from "../../../utils/getInstance.mjs";
 import getJsonAsyncUtil from "../../../utils/getJsonAsyncUtil.mjs";
 import _FormItem from "../formItem/FormItem.vue.mjs";
 import { createDataSource } from "../../../utils/datasource.mjs";
 import { generateFieldRules } from "./validation.mjs";
+import { cloneDeep } from "../../../utils/common.mjs";
 /* empty css                                                                                                                                        */
 /* empty css                                                                                                                                          */
 /* empty css                                                                                                                                              */
@@ -23,6 +24,11 @@ import { usePageEvents } from "../../../composables/usePageEvents.mjs";
 import { header } from "../../details/header/index.mjs";
 import { main } from "../../details/main/index.mjs";
 import { footer } from "../../details/footer/index.mjs";
+import { checkFilterMatch } from "../../../utils/parseFilterConfig.mjs";
+import { calculate } from "../../../utils/formulajs/calculate.mjs";
+import hooks from "../../../../../../node_modules/.pnpm/moment@2.30.1/node_modules/moment/dist/moment.mjs";
+/* empty css           */
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.mjs";
 import { ElContainer } from "../../../../../../node_modules/.pnpm/element-plus@2.13.2_vue@3.5.13_typescript@5.7.3_/node_modules/element-plus/es/components/container/index.mjs";
 import { ElForm } from "../../../../../../node_modules/.pnpm/element-plus@2.13.2_vue@3.5.13_typescript@5.7.3_/node_modules/element-plus/es/components/form/index.mjs";
 import De from "../../../../../../node_modules/.pnpm/grid-layout-plus@1.1.1_vue@3.5.13_typescript@5.7.3_/node_modules/grid-layout-plus/es/components/grid-layout.vue.mjs";
@@ -41,15 +47,35 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       type: Object,
       default: () => {
       }
+    },
+    modelValue: {
+      type: Object,
+      default: () => {
+      }
+    },
+    isSubForm: {
+      type: Boolean,
+      default: false
+    },
+    canPageEvent: {
+      type: Boolean,
+      default: true
     }
   },
-  emits: ["submit", "change", "validate"],
+  emits: [
+    "submit",
+    "change",
+    "validate",
+    "loaded",
+    "update:modelValue"
+  ],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const instance = getCurrentInstance();
     const ctx = getCurrentVueInstance();
     const formRef = ref(null);
+    const gridLayout = ref(null);
     const configLoading = ref(true);
     const configLoaded = ref(false);
     const localConfig = ref({});
@@ -59,17 +85,21 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     const dictionaryOptions = ref({});
     const fieldsData = ref({});
     const hiddenFields = ref({});
-    const pageEvents = usePageEvents(() => ({
+    const rowHeight = ref(1);
+    const pageEvents = props.canPageEvent ? usePageEvents(() => ({
       pageEventConfig: localConfig.value.pageEventConfig,
+      fields: [...fieldsData.value, ...hiddenFields.value],
       ctx,
       formData: formData.value,
       localConfig: localConfig.value,
       components: {
         form: instance == null ? void 0 : instance.proxy
       }
-    }));
-    pageEvents.handleBeforeUnmount();
-    pageEvents.handleUnmounted();
+    })) : null;
+    if (pageEvents) {
+      pageEvents.handleBeforeUnmount();
+      pageEvents.handleUnmounted();
+    }
     const loadConfig = async () => {
       if (!props.templateKey) {
         return;
@@ -82,14 +112,16 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
           "form",
           props.initOption
         );
+        emit("loaded", option);
+        rowHeight.value = option.labelPosition == "top" ? 1.5 : 1;
         localConfig.value = option;
         fieldsData.value = option.fieldsData.map((item) => item.component);
         hiddenFields.value = option.hiddenFields || [];
-        initFormData();
+        loadFormData();
         await loadFieldDataSources();
         loadEventFlow();
         configLoaded.value = true;
-        if (localConfig.value.pageEventConfig) {
+        if (pageEvents && localConfig.value.pageEventConfig) {
           const onCreatedEvent = localConfig.value.pageEventConfig.find(
             (e) => e.name === "onCreated"
           );
@@ -105,11 +137,11 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         configLoading.value = false;
       }
     };
-    const initFormData = () => {
+    const loadFormData = () => {
       const data = {};
       const rules = {};
-      if (localConfig.value.fieldsData) {
-        localConfig.value.fieldsData.forEach(({ component }) => {
+      if (fieldsData.value) {
+        fieldsData.value.forEach((component) => {
           if (component.fieldName) {
             data[component.fieldName] = component.defaultValue ? component.defaultValue : null;
           }
@@ -128,15 +160,15 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
           }
         });
       }
-      formData.value = data;
+      formData.value = { ...data, ...props.modelValue };
       formRules.value = rules;
     };
     const loadFieldDataSources = async () => {
       var _a, _b;
-      const fields = localConfig.value.fieldsData || [];
+      const fields = fieldsData.value || [];
       const fieldDataSources = /* @__PURE__ */ new Set();
       const dictionaryKeys = /* @__PURE__ */ new Set();
-      for (const { component } of fields) {
+      for (const component of fields) {
         const fieldType = component.fieldType;
         if ((fieldType === "select" || fieldType === "multipleSelection" || fieldType === "radio" || fieldType === "checkbox") && component.optionConfig) {
           const { optionSource, dataSourceValue, dictionaryValue } = component.optionConfig;
@@ -196,8 +228,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       mergeOptionsToFields();
     };
     const mergeOptionsToFields = () => {
-      if (localConfig.value.fieldsData) {
-        localConfig.value.fieldsData.forEach(({ component }) => {
+      if (fieldsData.value) {
+        fieldsData.value.forEach((component) => {
           if (!component.optionConfig) return;
           const {
             optionSource,
@@ -247,7 +279,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       const getEventHandlers = (row, item, eventConfig) => {
         return createEventHandlers(item, row, eventConfig);
       };
-      localConfig.value.fieldsData.forEach(({ component }) => {
+      fieldsData.value.forEach((component) => {
         if (component.fieldName) {
           component.eventHandlers = getEventHandlers(
             formData.value,
@@ -257,14 +289,132 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         }
       });
     }
+    const gridLayoutFieldsData = computed(() => {
+      let gridLayoutData = cloneDeep(localConfig.value.fieldsData || []);
+      gridLayoutData = gridLayoutData.map((item) => {
+        item.isResizable = false;
+        if (!item.fixedH) {
+          item.h = item.h * 60;
+        }
+        return item;
+      });
+      const linkedConfig = localConfig.value.linkedConfig || {};
+      const dataLink = (linkedConfig == null ? void 0 : linkedConfig.dataLink) || [];
+      const fields = [...fieldsData.value, ...hiddenFields.value];
+      dataLink.forEach((item) => {
+        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
+          const fieldAssignments = item.fieldAssignments || [];
+          fieldAssignments.forEach((assignment) => {
+            var _a, _b;
+            const fieldId = assignment.fieldId;
+            const formulaText = (_b = (_a = assignment.formula) == null ? void 0 : _a.value) == null ? void 0 : _b.text;
+            const field = fields.find((f) => f.id == fieldId);
+            if (field && formulaText) {
+              const calcResult = calculate({
+                text: formulaText,
+                value: formData.value
+              });
+              formData.value[field.fieldName] = calcResult;
+            }
+          });
+        }
+      });
+      const visibility = (linkedConfig == null ? void 0 : linkedConfig.visibility) || [];
+      visibility.forEach((item) => {
+        const dataLinkFieldList = item.dataLinkFieldList || [];
+        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.hidden = false;
+            }
+          });
+        } else {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.hidden = true;
+            }
+          });
+        }
+      });
+      gridLayoutData = gridLayoutData.filter((item) => !item.hidden);
+      const requiredArr = (linkedConfig == null ? void 0 : linkedConfig.required) || [];
+      requiredArr.forEach((item) => {
+        const dataLinkFieldList = item.dataLinkFieldList || [];
+        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.required = true;
+            }
+          });
+        } else {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.required = false;
+            }
+          });
+        }
+      });
+      const rules = {};
+      gridLayoutData.forEach(({ component }) => {
+        if (component.fieldName) {
+          const fieldRules = generateFieldRules(component);
+          if (fieldRules.length > 0) {
+            rules[component.fieldName] = fieldRules;
+          }
+        }
+      });
+      formRules.value = rules;
+      const readonlyArr = (linkedConfig == null ? void 0 : linkedConfig.readonly) || [];
+      readonlyArr.forEach((item) => {
+        const dataLinkFieldList = item.dataLinkFieldList || [];
+        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.readOnly = true;
+            }
+          });
+        } else {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.readOnly = false;
+            }
+          });
+        }
+      });
+      const disabledArr = (linkedConfig == null ? void 0 : linkedConfig.disabled) || [];
+      disabledArr.forEach((item) => {
+        const dataLinkFieldList = item.dataLinkFieldList || [];
+        if (checkFilterMatch(item.filterConfig, formData.value, fields)) {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.disabled = true;
+            }
+          });
+        } else {
+          dataLinkFieldList.forEach((fieldId) => {
+            const layoutFieldItem = gridLayoutData.find((g) => g.id == fieldId);
+            if (layoutFieldItem) {
+              layoutFieldItem.component.disabled = false;
+            }
+          });
+        }
+      });
+      return gridLayoutData;
+    });
     const getFieldError = (fieldName) => {
       var _a;
       if (!formRef.value) return "";
       const field = (_a = formRef.value.fields) == null ? void 0 : _a.find((f) => f.prop === fieldName);
       return (field == null ? void 0 : field.validateMessage) || "";
     };
-    const handleFieldChange = (value, field) => {
-      emit("change", { field: field.fieldName, value });
+    const handleFieldChange = (config, value) => {
     };
     const handleCustomButtonClick = (button) => {
       var _a;
@@ -282,22 +432,40 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       var _a, _b;
       (_a = formRef.value) == null ? void 0 : _a.clearValidate();
       (_b = formRef.value) == null ? void 0 : _b.resetFields();
-      initFormData();
+      loadFormData();
+    };
+    const valueFormatMap = {
+      date: "YYYYMMDD",
+      week: "YYYYMMDD",
+      month: "YYYYMM",
+      year: "YYYY",
+      datetime: "YYYYMMDDHHmmss"
+    };
+    const formValueFormatMap = {
+      date: "YYYY-MM-DD",
+      week: "YYYY-MM-DD",
+      month: "YYYY-MM",
+      year: "YYYY",
+      datetime: "YYYY-MM-DD HH:mm:ss"
     };
     const getFormData = () => {
       const result = { ...formData.value };
       const processField = (field) => {
         const fieldName = field.fieldName;
         const fieldType = field.fieldType;
+        const value = result[fieldName];
         if (fieldName && (fieldType === "checkbox" || fieldType === "multipleSelection")) {
-          const value = result[fieldName];
           if (Array.isArray(value)) {
             result[fieldName] = value.join("|");
           }
+        } else if (fieldName && fieldType === "date" && value) {
+          const valueFormat = valueFormatMap[field.dateType] || "YYYYMMDD";
+          const formValueFormat = formValueFormatMap[field.dateType] || "YYYY-MM-DD";
+          result[fieldName] = hooks(value, formValueFormat).format(valueFormat);
         }
       };
-      if (localConfig.value.fieldsData) {
-        localConfig.value.fieldsData.forEach(({ component }) => {
+      if (fieldsData.value) {
+        fieldsData.value.forEach((component) => {
           processField(component);
         });
       }
@@ -313,8 +481,8 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
       const processField = (field) => {
         const fieldName = field.fieldName;
         const fieldType = field.fieldType;
+        const value = processedData[fieldName];
         if (fieldName && (fieldType === "checkbox" || fieldType === "multipleSelection")) {
-          const value = processedData[fieldName];
           if (typeof value === "string" && value.includes("|")) {
             processedData[fieldName] = value.split("|");
           } else if (typeof value === "string" && value !== "") {
@@ -322,10 +490,16 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
           } else if (value === "" || value === null || value === void 0) {
             processedData[fieldName] = [];
           }
+        } else if (fieldName && fieldType === "date" && value) {
+          const valueFormat = valueFormatMap[field.dateType] || "YYYYMMDD";
+          const formValueFormat = formValueFormatMap[field.dateType] || "YYYY-MM-DD";
+          processedData[fieldName] = hooks(value, valueFormat).format(
+            formValueFormat
+          );
         }
       };
-      if (localConfig.value.fieldsData) {
-        localConfig.value.fieldsData.forEach(({ component }) => {
+      if (fieldsData.value) {
+        fieldsData.value.forEach((component) => {
           processField(component);
         });
       }
@@ -339,6 +513,17 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     onMounted(() => {
       loadConfig();
     });
+    watch(
+      formData,
+      (newVal) => {
+        emit("update:modelValue", newVal);
+      },
+      { deep: true }
+    );
+    provide("formData", formData);
+    provide("rowHeight", rowHeight);
+    provide("gridLayout", gridLayout);
+    provide("gridLayoutFieldsData", gridLayoutFieldsData);
     __expose({
       validate,
       resetFields,
@@ -349,78 +534,78 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     return (_ctx, _cache) => {
       const _component_el_form = ElForm;
       const _component_el_container = ElContainer;
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_component_el_container, {
-          direction: "vertical",
-          style: { "height": "100%" }
-        }, {
-          default: withCtx(() => [
-            !configLoading.value ? (openBlock(), createBlock(unref(header), {
-              key: 0,
-              pageHeaderConfig: localConfig.value.pageHeaderConfig
-            }, null, 8, ["pageHeaderConfig"])) : createCommentVNode("", true),
-            createVNode(unref(main), null, {
-              default: withCtx(() => [
-                createVNode(_component_el_form, {
-                  ref_key: "formRef",
-                  ref: formRef,
-                  model: formData.value,
-                  rules: formRules.value,
-                  "label-position": localConfig.value.labelPosition,
-                  style: { "padding": "18px" },
-                  "validate-on-rule-change": false
-                }, {
-                  default: withCtx(() => [
-                    !configLoading.value ? (openBlock(), createBlock(unref(De), {
-                      key: 0,
-                      ref: "gridLayout",
-                      layout: localConfig.value.fieldsData,
-                      "onUpdate:layout": _cache[0] || (_cache[0] = ($event) => localConfig.value.fieldsData = $event),
-                      "row-height": localConfig.value.labelPosition == "top" ? 90 : 60,
-                      margin: [0, 0],
-                      "col-num": localConfig.value.columns,
-                      "is-draggable": false,
-                      "is-resizable": false
-                    }, {
-                      item: withCtx(({ item: { component } }) => [
-                        createVNode(_FormItem, {
-                          modelValue: formData.value[component.fieldName],
-                          "onUpdate:modelValue": ($event) => formData.value[component.fieldName] = $event,
-                          config: component,
-                          localConfig: localConfig.value,
-                          error: getFieldError(component.fieldName),
-                          formRef: formRef.value,
-                          onChange: handleFieldChange
-                        }, null, 8, ["modelValue", "onUpdate:modelValue", "config", "localConfig", "error", "formRef"])
-                      ]),
-                      _: 1
-                    }, 8, ["layout", "row-height", "col-num"])) : createCommentVNode("", true),
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(hiddenFields.value, (field) => {
-                      return openBlock(), createElementBlock("input", {
-                        key: field.fieldName,
-                        type: "hidden",
-                        name: field.fieldName,
-                        value: formData.value[field.fieldName]
-                      }, null, 8, _hoisted_1);
-                    }), 128))
-                  ]),
-                  _: 1
-                }, 8, ["model", "rules", "label-position"])
-              ]),
-              _: 1
-            }),
-            createVNode(unref(footer), {
-              pageFooterConfig: localConfig.value.pageFooterConfig,
-              onCustomButtonClick: handleCustomButtonClick
-            }, null, 8, ["pageFooterConfig"])
-          ]),
-          _: 1
-        }),
-        createTextVNode(" " + toDisplayString(formData.value), 1)
-      ], 64);
+      return openBlock(), createBlock(_component_el_container, {
+        direction: "vertical",
+        style: { "height": "100%" }
+      }, {
+        default: withCtx(() => [
+          !configLoading.value && !__props.isSubForm ? (openBlock(), createBlock(unref(header), {
+            key: 0,
+            pageHeaderConfig: localConfig.value.pageHeaderConfig
+          }, null, 8, ["pageHeaderConfig"])) : createCommentVNode("", true),
+          createVNode(unref(main), null, {
+            default: withCtx(() => [
+              createVNode(_component_el_form, {
+                ref_key: "formRef",
+                ref: formRef,
+                model: formData.value,
+                rules: formRules.value,
+                "label-position": localConfig.value.labelPosition,
+                style: normalizeStyle({ padding: __props.isSubForm ? "0" : "18px" }),
+                "validate-on-rule-change": false
+              }, {
+                default: withCtx(() => [
+                  !configLoading.value ? (openBlock(), createBlock(unref(De), {
+                    key: 0,
+                    ref_key: "gridLayout",
+                    ref: gridLayout,
+                    layout: unref(gridLayoutFieldsData),
+                    "onUpdate:layout": _cache[0] || (_cache[0] = ($event) => isRef(gridLayoutFieldsData) ? gridLayoutFieldsData.value = $event : null),
+                    "row-height": rowHeight.value,
+                    margin: [0, 0],
+                    "col-num": localConfig.value.columns,
+                    "is-draggable": false,
+                    "is-resizable": false
+                  }, {
+                    item: withCtx(({ item: { component } }) => [
+                      createVNode(_FormItem, {
+                        modelValue: formData.value[component.fieldName],
+                        "onUpdate:modelValue": ($event) => formData.value[component.fieldName] = $event,
+                        config: component,
+                        localConfig: localConfig.value,
+                        error: getFieldError(component.fieldName),
+                        formRef: formRef.value,
+                        onChange: handleFieldChange
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "config", "localConfig", "error", "formRef"])
+                    ]),
+                    _: 1
+                  }, 8, ["layout", "row-height", "col-num"])) : createCommentVNode("", true),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(hiddenFields.value, (field) => {
+                    return openBlock(), createElementBlock("input", {
+                      key: field.fieldName,
+                      type: "hidden",
+                      name: field.fieldName,
+                      value: formData.value[field.fieldName]
+                    }, null, 8, _hoisted_1);
+                  }), 128))
+                ]),
+                _: 1
+              }, 8, ["model", "rules", "label-position", "style"])
+            ]),
+            _: 1
+          }),
+          !__props.isSubForm ? (openBlock(), createBlock(unref(footer), {
+            key: 1,
+            pageFooterConfig: localConfig.value.pageFooterConfig,
+            onCustomButtonClick: handleCustomButtonClick
+          }, null, 8, ["pageFooterConfig"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      });
     };
   }
 });
+const _Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8a7ec746"]]);
 export {
-  _sfc_main as default
+  _Form as default
 };

package/es/packages/vue/src/components/forms/form/index.mjs

@@ -1,6 +1,6 @@
-import _sfc_main from "./Form.vue.mjs";
+import _Form from "./Form.vue.mjs";
 import install from "../../../utils/install.mjs";
-const Form = install.withInstall("Form", _sfc_main);
+const Form = install.withInstall("Form", _Form);
 export {
   Form,
   Form as default