@fecp/vue 1.1.3 → 1.1.5

package/lib/packages/vue/src/components/forms/form/Form.vue.js

@@ -14,6 +14,7 @@ const getJsonAsyncUtil = require("../../../utils/getJsonAsyncUtil.js");
 const FormItem = require("../formItem/FormItem.vue.js");
 const datasource = require("../../../utils/datasource.js");
 const validation = require("./validation.js");
+const common = require("../../../utils/common.js");
 ;/* empty css                                                                                                                                        */
 ;/* empty css                                                                                                                                          */
 ;/* empty css                                                                                                                                              */
@@ -25,6 +26,11 @@ const usePageEvents = require("../../../composables/usePageEvents.js");
 const index$1 = require("../../details/header/index.js");
 const index$2 = require("../../details/main/index.js");
 const index$4 = require("../../details/footer/index.js");
+const parseFilterConfig = require("../../../utils/parseFilterConfig.js");
+const calculate = require("../../../utils/formulajs/calculate.js");
+const moment = require("../../../../../../node_modules/.pnpm/moment@2.30.1/node_modules/moment/dist/moment.js");
+;/* empty css           */
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.js");
 const index = require("../../../../../../node_modules/.pnpm/element-plus@2.13.2_vue@3.5.13_typescript@5.7.3_/node_modules/element-plus/es/components/container/index.js");
 const index$3 = require("../../../../../../node_modules/.pnpm/element-plus@2.13.2_vue@3.5.13_typescript@5.7.3_/node_modules/element-plus/es/components/form/index.js");
 const gridLayout_vue = require("../../../../../../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.js");
@@ -43,15 +49,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 = vue.getCurrentInstance();
     const ctx = getInstance.getCurrentVueInstance();
     const formRef = vue.ref(null);
+    const gridLayout = vue.ref(null);
     const configLoading = vue.ref(true);
     const configLoaded = vue.ref(false);
     const localConfig = vue.ref({});
@@ -61,17 +87,21 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     const dictionaryOptions = vue.ref({});
     const fieldsData = vue.ref({});
     const hiddenFields = vue.ref({});
-    const pageEvents = usePageEvents.usePageEvents(() => ({
+    const rowHeight = vue.ref(1);
+    const pageEvents = props.canPageEvent ? usePageEvents.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;
@@ -84,14 +114,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"
           );
@@ -107,11 +139,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;
           }
@@ -130,15 +162,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;
@@ -198,8 +230,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,
@@ -249,7 +281,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,
@@ -259,14 +291,138 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
         }
       });
     }
+    const gridLayoutFieldsData = vue.computed(() => {
+      let gridLayoutData = common.cloneDeep(localConfig.value.fieldsData || []);
+      gridLayoutData = gridLayoutData.map((item) => {
+        item.isResizable = false;
+        if (!item.fixedH) {
+          item.y = item.y * 60;
+          item.h = item.h * 60;
+        }
+        return item;
+      });
+      console.log(
+        "🚀 ~ localConfig.value.fieldsData:",
+        localConfig.value.fieldsData
+      );
+      const linkedConfig = localConfig.value.linkedConfig || {};
+      const dataLink = (linkedConfig == null ? void 0 : linkedConfig.dataLink) || [];
+      const fields = [...fieldsData.value, ...hiddenFields.value];
+      dataLink.forEach((item) => {
+        if (parseFilterConfig.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.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 (parseFilterConfig.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 (parseFilterConfig.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 = validation.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 (parseFilterConfig.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 (parseFilterConfig.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;
+            }
+          });
+        }
+      });
+      console.log("🚀 ~ gridLayoutData:", gridLayoutData);
+      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;
@@ -284,22 +440,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] = moment.default(value, formValueFormat).format(valueFormat);
         }
       };
-      if (localConfig.value.fieldsData) {
-        localConfig.value.fieldsData.forEach(({ component }) => {
+      if (fieldsData.value) {
+        fieldsData.value.forEach((component) => {
           processField(component);
         });
       }
@@ -315,8 +489,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 !== "") {
@@ -324,10 +498,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] = moment.default(value, valueFormat).format(
+            formValueFormat
+          );
         }
       };
-      if (localConfig.value.fieldsData) {
-        localConfig.value.fieldsData.forEach(({ component }) => {
+      if (fieldsData.value) {
+        fieldsData.value.forEach((component) => {
           processField(component);
         });
       }
@@ -341,6 +521,17 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     vue.onMounted(() => {
       loadConfig();
     });
+    vue.watch(
+      formData,
+      (newVal) => {
+        emit("update:modelValue", newVal);
+      },
+      { deep: true }
+    );
+    vue.provide("formData", formData);
+    vue.provide("rowHeight", rowHeight);
+    vue.provide("gridLayout", gridLayout);
+    vue.provide("gridLayoutFieldsData", gridLayoutFieldsData);
     __expose({
       validate,
       resetFields,
@@ -351,76 +542,76 @@ const _sfc_main = /* @__PURE__ */ Object.assign({
     return (_ctx, _cache) => {
       const _component_el_form = index$3.ElForm;
       const _component_el_container = index.ElContainer;
-      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createVNode(_component_el_container, {
-          direction: "vertical",
-          style: { "height": "100%" }
-        }, {
-          default: vue.withCtx(() => [
-            !configLoading.value ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.header), {
-              key: 0,
-              pageHeaderConfig: localConfig.value.pageHeaderConfig
-            }, null, 8, ["pageHeaderConfig"])) : vue.createCommentVNode("", true),
-            vue.createVNode(vue.unref(index$2.main), null, {
-              default: vue.withCtx(() => [
-                vue.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: vue.withCtx(() => [
-                    !configLoading.value ? (vue.openBlock(), vue.createBlock(vue.unref(gridLayout_vue.default), {
-                      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: vue.withCtx(({ item: { component } }) => [
-                        vue.createVNode(FormItem.default, {
-                          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"])) : vue.createCommentVNode("", true),
-                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(hiddenFields.value, (field) => {
-                      return vue.openBlock(), vue.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
-            }),
-            vue.createVNode(vue.unref(index$4.footer), {
-              pageFooterConfig: localConfig.value.pageFooterConfig,
-              onCustomButtonClick: handleCustomButtonClick
-            }, null, 8, ["pageFooterConfig"])
-          ]),
-          _: 1
-        }),
-        vue.createTextVNode(" " + vue.toDisplayString(formData.value), 1)
-      ], 64);
+      return vue.openBlock(), vue.createBlock(_component_el_container, {
+        direction: "vertical",
+        style: { "height": "100%" }
+      }, {
+        default: vue.withCtx(() => [
+          !configLoading.value && !__props.isSubForm ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.header), {
+            key: 0,
+            pageHeaderConfig: localConfig.value.pageHeaderConfig
+          }, null, 8, ["pageHeaderConfig"])) : vue.createCommentVNode("", true),
+          vue.createVNode(vue.unref(index$2.main), null, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_el_form, {
+                ref_key: "formRef",
+                ref: formRef,
+                model: formData.value,
+                rules: formRules.value,
+                "label-position": localConfig.value.labelPosition,
+                style: vue.normalizeStyle({ padding: __props.isSubForm ? "0" : "18px" }),
+                "validate-on-rule-change": false
+              }, {
+                default: vue.withCtx(() => [
+                  !configLoading.value ? (vue.openBlock(), vue.createBlock(vue.unref(gridLayout_vue.default), {
+                    key: 0,
+                    ref_key: "gridLayout",
+                    ref: gridLayout,
+                    layout: vue.unref(gridLayoutFieldsData),
+                    "onUpdate:layout": _cache[0] || (_cache[0] = ($event) => vue.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: vue.withCtx(({ item: { component } }) => [
+                      vue.createVNode(FormItem.default, {
+                        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"])) : vue.createCommentVNode("", true),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(hiddenFields.value, (field) => {
+                    return vue.openBlock(), vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.footer), {
+            key: 1,
+            pageFooterConfig: localConfig.value.pageFooterConfig,
+            onCustomButtonClick: handleCustomButtonClick
+          }, null, 8, ["pageFooterConfig"])) : vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      });
     };
   }
 });
-exports.default = _sfc_main;
+const _Form = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-5ea07f4a"]]);
+exports.default = _Form;