@fecp/vue 1.1.2 → 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, createBlock, openBlock, withCtx, createCommentVNode, createVNode, unref } 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,10 +24,16 @@ 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";
 import { ElMessage } from "../../../../../../node_modules/.pnpm/element-plus@2.13.2_vue@3.5.13_typescript@5.7.3_/node_modules/element-plus/es/components/message/index.mjs";
+const _hoisted_1 = ["name", "value"];
 const _sfc_main = /* @__PURE__ */ Object.assign({
   inheritAttrs: false
 }, {
@@ -40,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({});
@@ -57,17 +84,22 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     const dataSourceOptions = ref({});
     const dictionaryOptions = ref({});
     const fieldsData = ref({});
-    const pageEvents = usePageEvents(() => ({
+    const hiddenFields = ref({});
+    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;
@@ -80,13 +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);
-        initFormData();
+        hiddenFields.value = option.hiddenFields || [];
+        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"
           );
@@ -102,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;
           }
@@ -118,15 +153,22 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
           }
         });
       }
-      formData.value = data;
+      if (hiddenFields.value && hiddenFields.value.length > 0) {
+        hiddenFields.value.forEach((field) => {
+          if (field.fieldName) {
+            data[field.fieldName] = field.value !== void 0 ? field.value : null;
+          }
+        });
+      }
+      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;
@@ -186,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,
@@ -226,7 +268,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         getEventHandlers: createEventHandlers,
         handleEvent: createHandleEvent
       } = useEventFlow({
-        fields: fieldsData.value,
+        fields: [...fieldsData.value, ...hiddenFields.value],
         ctx,
         dataSources: localConfig.value.dataSources,
         components: {
@@ -237,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,
@@ -247,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;
@@ -272,40 +432,80 @@ 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 };
-      if (localConfig.value.fieldsData) {
-        localConfig.value.fieldsData.forEach(({ component }) => {
-          const fieldName = component.fieldName;
-          const fieldType = component.fieldType;
-          if (fieldName && (fieldType === "checkbox" || fieldType === "multipleSelection")) {
-            const value = result[fieldName];
-            if (Array.isArray(value)) {
-              result[fieldName] = value.join("|");
-            }
+      const processField = (field) => {
+        const fieldName = field.fieldName;
+        const fieldType = field.fieldType;
+        const value = result[fieldName];
+        if (fieldName && (fieldType === "checkbox" || fieldType === "multipleSelection")) {
+          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 (fieldsData.value) {
+        fieldsData.value.forEach((component) => {
+          processField(component);
+        });
+      }
+      if (hiddenFields.value && hiddenFields.value.length > 0) {
+        hiddenFields.value.forEach((field) => {
+          processField(field);
         });
       }
       return result;
     };
     const setFormData = (data) => {
       const processedData = { ...data };
-      if (localConfig.value.fieldsData) {
-        localConfig.value.fieldsData.forEach(({ component }) => {
-          const fieldName = component.fieldName;
-          const fieldType = component.fieldType;
-          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 !== "") {
-              processedData[fieldName] = [value];
-            } else if (value === "" || value === null || value === void 0) {
-              processedData[fieldName] = [];
-            }
+      const processField = (field) => {
+        const fieldName = field.fieldName;
+        const fieldType = field.fieldType;
+        const value = processedData[fieldName];
+        if (fieldName && (fieldType === "checkbox" || fieldType === "multipleSelection")) {
+          if (typeof value === "string" && value.includes("|")) {
+            processedData[fieldName] = value.split("|");
+          } else if (typeof value === "string" && value !== "") {
+            processedData[fieldName] = [value];
+          } 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 (fieldsData.value) {
+        fieldsData.value.forEach((component) => {
+          processField(component);
+        });
+      }
+      if (hiddenFields.value && hiddenFields.value.length > 0) {
+        hiddenFields.value.forEach((field) => {
+          processField(field);
         });
       }
       Object.assign(formData.value, processedData);
@@ -313,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,
@@ -328,7 +539,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         style: { "height": "100%" }
       }, {
         default: withCtx(() => [
-          !configLoading.value ? (openBlock(), createBlock(unref(header), {
+          !configLoading.value && !__props.isSubForm ? (openBlock(), createBlock(unref(header), {
             key: 0,
             pageHeaderConfig: localConfig.value.pageHeaderConfig
           }, null, 8, ["pageHeaderConfig"])) : createCommentVNode("", true),
@@ -340,16 +551,17 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
                 model: formData.value,
                 rules: formRules.value,
                 "label-position": localConfig.value.labelPosition,
-                style: { "padding": "18px" },
+                style: normalizeStyle({ padding: __props.isSubForm ? "0" : "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,
+                    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,
@@ -367,23 +579,33 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
                       }, null, 8, ["modelValue", "onUpdate:modelValue", "config", "localConfig", "error", "formRef"])
                     ]),
                     _: 1
-                  }, 8, ["layout", "row-height", "col-num"])) : createCommentVNode("", true)
+                  }, 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"])
+              }, 8, ["model", "rules", "label-position", "style"])
             ]),
             _: 1
           }),
-          createVNode(unref(footer), {
+          !__props.isSubForm ? (openBlock(), createBlock(unref(footer), {
+            key: 1,
             pageFooterConfig: localConfig.value.pageFooterConfig,
             onCustomButtonClick: handleCustomButtonClick
-          }, null, 8, ["pageFooterConfig"])
+          }, 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