rb-document-form-constructor 0.9.22 → 0.9.24

package/src/components/DocForm.vue

@@ -1,308 +1,408 @@
-<template>
-  <b-form v-if="formConfig && formConfig.sections" class="rb-doc-form" @submit.prevent>
-    <div
-        v-for="section in formConfig.sections"
-        :key="section.labelRu"
-        :class="className"
-        class="rb-form-section"
-    >
-      <b-row>
-        <b-col lg="12">
-          <h4>{{ getDisplayField(section) }}</h4>
-        </b-col>
-        <template v-for="column in section.columns">
-          <b-col :key="column.index" :lg="getColumnSize(section)" :sm="12">
-            <template v-for="field in column.fields">
-              {{ field.valueName }}
-              <b-form-row v-if="field.visible" :key="field.name">
-                <b-col lg="12">
-                  <b-form-group
-                      ref="inputContainer"
-                      :data-field="field.name"
-                      :invalid-feedback="validationState[`${field.name}__feedback`]"
-                      :state="validationState[field.name]"
-                  >
-                    <component
-                        v-bind:is="field.input.type"
-                        :id="field.name"
-                        :ref="field.ref? field.ref: field.name"
-                        v-model="doc[field.name]"
-                        :disabled="!editable || !field.editable"
-                        :markForBackResolution="isResolvableField(field)"
-                        :required="field.required"
-                        :resolve-value="getResolveValue(field)"
-                        :resolveFromObject="isResolvableField(field)"
-                        :resolveObject.sync="doc[getResolveFieldName(field)]"
-                        :state="validationState[field.name]"
-                        v-bind="field.input.propsData"
-                        @change="onEventFired('change', $event, field)"
-                        @click="onEventFired('click', $event, field)"
-                        @input="onEventFired('input', $event, field)"
-                        @hook:created="onEventFired('created', $event, field)"
-                        @hook:destroyed="onEventFired('destroyed', $event, field)"
-                        @hook:activated="onEventFired('activated', $event, field)"
-                        @hook:mounted="onEventFired('mounted', $event, field)"
-                    ></component>
-                    <template #label>
-                      <span :title="getDisplayField(field)">{{ getDisplayField(field) }}</span>
-                      <span v-if="showRequiredInLabel && field.required" class="text-danger"
-                      >*</span
-                      >
-                    </template>
-                  </b-form-group>
-                </b-col>
-              </b-form-row>
-            </template>
-          </b-col>
-        </template>
-      </b-row>
-    </div>
-  </b-form>
-</template>
-
-<script>
-import Vue from 'vue';
-import {UtFormConstructor} from '../utils/UtFormConstructor';
-import typeOf from 'typeof';
-import {UtFormConfig} from '@/utils/UtFormConfig';
-import {UtArray} from "@/utils/UtArray";
-
-export default {
-  name: 'DocForm',
-  props: {
-    formConfig: Object,
-    applyDefaultValues: {type: Boolean, default: true},
-    doc: {type: Object, default: () => ({})},
-    refSuffix: {type: String, default: 'Id'},
-    editable: {type: Boolean, default: true},
-    displayField: {type: String, default: 'labelRu'},
-    showRequiredInLabel: {type: Boolean, default: true},
-    className: {type: String, default: 'container'},
-  },
-  data() {
-    return {
-      validationState: {},
-    };
-  },
-  watch: {
-    formConfig() {
-      this.validationState = {};
-      this.execApplyDefaultValues();
-      this.execApplyDefaultValRule();
-    },
-  },
-  methods: {
-    getResolveValueName(field) {
-      if ((field.dict || field.ref) && !field.multiple) {
-        return field.name.substring(0, field.name.length - 2);
-      }
-      return field.name;
-    },
-    getResolveValue(field) {
-      return this.doc[this.getResolveValueName(field)]
-          ? this.doc[this.getResolveValueName(field)]
-          : null;
-    },
-    getDisplayField(value) {
-      if (!value[this.displayField]) {
-        return value.labelRu;
-      } else {
-        return value[this.displayField];
-      }
-    },
-    isResolvableField(field) {
-      return !!field.ref;
-    },
-    getResolveObject(field) {
-      if (this.isResolvableField(field)) {
-        let resolveFieldName = this.getResolveFieldName(field);
-        return field.multiple ? this.doc[field.name] : this.doc[resolveFieldName];
-      } else {
-        return null;
-      }
-    },
-    getResolveFieldName(field) {
-      let resolveFieldName = field?.name
-      if (resolveFieldName?.endsWith('Id')) {
-        resolveFieldName = field.name.substring(0, field.name.length - 2);
-      }
-      return resolveFieldName;
-    },
-    onEventFired(eventName, event, field) {
-      if (field.rules) {
-        field.rules.forEach((rule) => {
-          if (rule.event === eventName && rule.script) {
-            this.runRule(rule, {event, eventName});
-          }
-        });
-      }
-    },
-    onGlobalEventFired(eventName, event) {
-      let fields = UtFormConfig.getFields(this.formConfig);
-      fields.forEach((f) => {
-        if (f.rules) {
-          f.rules.forEach((r) => {
-            if (r.event === eventName) {
-              this.runRule(r, {event, eventName});
-            }
-          });
-        }
-      });
-    },
-    createRuleContext(additionalContext) {
-      return Object.assign(
-          {
-            form: this,
-            doc: this.doc,
-            ...additionalContext,
-          },
-          UtFormConstructor.getRuleContext(),
-      );
-    },
-    runRule(rule, context) {
-      UtFormConstructor.runRule(this.createRuleContext(context), rule.script);
-    },
-    isValueEmpty(fieldName) {
-      if (this.doc[fieldName] == null) {
-        return true;
-      }
-      if (Array.isArray(this.doc[fieldName]) && !this.doc[fieldName]?.length) {
-        return true;
-      }
-
-      if (typeOf(this.doc[fieldName] === 'string') && this.doc[fieldName] === '') {
-        return true;
-      }
-      return false;
-    },
-    isValueLessThanMax(fieldname, max) {
-      if (this.doc[fieldname] && max) {
-        return this.doc[fieldname]?.length > parseInt(max);
-      }
-      return false;
-    },
-    isValueLessThanMin(fieldname, min) {
-      if (this.doc[fieldname] && min) {
-        return parseInt(this.doc[fieldname]) < parseInt(min);
-      }
-
-      return false;
-    },
-    validate(callback = () => {
-    }) {
-      this.formConfig.sections.forEach((s) => {
-        s.columns.forEach((c) => {
-          c.fields.forEach((f) => {
-            let feedback = '';
-
-            if (f.required && this.isValueEmpty(f.name)) {
-              feedback += this.getDisplayField(f);
-            }
-
-            if (f.type === 'integer' && this.isValueLessThanMin(f.name, f.input.propsData.min)) {
-              feedback += f.input.propsData.min;
-            }
-            // TODO: Костыль так как на бэке нету типа memo
-            if (f.input.type === 'b-form-textarea' && this.isValueLessThanMax(f.name, f.input.propsData?.max)) {
-              feedback += `\nМаксимальное значение для этого поля ${f.input.propsData?.max}`;
-            }
-
-            if (f.required && f.input.propsData?.isInlineTableInput) {
-              const findErrors = this.$refs?.[f.name]?.[0]?.getIsDirty?.() ?? [];
-              const errors = UtArray.removeDuplicate(findErrors, 'field')?.map(f => f?.label).join(', ')
-              feedback = errors ? this.$t('validate.multiRequired', {field: errors}) : this.isValueEmpty(f.name) ? this.getDisplayField(f) : ''
-            }
-                    // 🔥 Кастомная валидация для конкретного поля
-            if (typeof f.validate === 'function') {
-              console.log(f, this.doc);
-              const customError = f.validate(this.doc[f.name], f, this.doc, this.formConfig);
-              if (customError) {
-                feedback += `\n${customError}`;
-              }
-            }
-            if (feedback) {
-              Vue.set(this.validationState, f.name, false);
-              Vue.set(this.validationState, `${f.name}__feedback`, feedback);
-            } else {
-              Vue.set(this.validationState, f.name, null);
-            }
-            callback(feedback, this.$refs, f, this.doc)
-            this.onEventFired(
-                'validate',
-                {
-                  validationState: this.validationState,
-                  doc: this.doc,
-                },
-                f,
-            );
-          });
-        });
-      });
-      for (let fieldName in this.validationState) {
-        if (this.validationState[fieldName] === false) {
-          return false;
-        }
-      }
-
-      return true;
-    },
-    getColumnSize(section) {
-      const MAX_COLUMN_SIZE = 12;
-      if (!section || !section.columnCount) {
-        return MAX_COLUMN_SIZE;
-      }
-
-      let colSize = Math.floor(MAX_COLUMN_SIZE / section.columnCount);
-      return colSize;
-    },
-    isNotUndefinedAndNull(value) {
-      return !(value === null || value === undefined)
-    },
-    execApplyDefaultValues() {
-      if (this.applyDefaultValues) {
-        this.formConfig.sections.forEach((r) => {
-          r.columns.forEach((c) => {
-            c.fields.forEach((f) => {
-              if (this.isNotUndefinedAndNull(f.defaultValue)) {
-                let defValue;
-                if (this.defaultValue && typeOf(f.defaultValue) === 'function') {
-                  defValue = f.defaultValue();
-                } else {
-                  defValue = f.defaultValue == null ? null : f.defaultValue;
-                }
-                this.$set(this.doc, f.name, (f.defaultValue = defValue));
-              }
-            });
-          });
-        });
-      }
-    },
-    execApplyDefaultValRule() {
-      this.formConfig.sections.forEach((el) => {
-        el.columns.forEach((c) => {
-          c.fields.forEach((f) => {
-            if (f.rules) {
-              if (!f.defaultValue) {
-                const rule = f.rules.find((rule) => rule.event === 'defaultValue');
-                if (rule && !this.doc[f.name]) {
-                  this.$set(this.doc, f.name, (f.defaultValue = eval(rule.script)));
-                }
-              }
-            }
-          });
-        });
-      });
-    },
-  },
-  mounted() {
-    this.execApplyDefaultValues();
-    this.execApplyDefaultValRule();
-    this.onGlobalEventFired('form-mounted', this);
-  },
-  activated() {
-    this.execApplyDefaultValues();
-    this.execApplyDefaultValRule();
-    this.onGlobalEventFired('form-activated', this);
-  },
-};
-</script>
+<template>
+  <b-form v-if="formConfig && formConfig.sections" class="rb-doc-form" @submit.prevent>
+    <div
+        v-for="section in formConfig.sections"
+        :key="section.labelRu"
+        :class="className"
+        class="rb-form-section"
+    >
+      <b-row>
+        <b-col lg="12">
+          <h4>{{ getDisplayField(section) }}</h4>
+        </b-col>
+        <template v-for="column in section.columns">
+          <b-col :key="column.index" :lg="getColumnSize(section)" :sm="12">
+            <template v-for="field in column.fields">
+              {{ field.valueName }}
+              <b-form-row v-if="field.visible" :key="field.name">
+                <b-col lg="12">
+                  <b-form-group
+                      ref="inputContainer"
+                      :data-field="field.name"
+                      :invalid-feedback="validationState[`${field.name}__feedback`]"
+                      :state="validationState[field.name]"
+                  >
+                    <component
+                        v-bind:is="field.input.type"
+                        :id="field.name"
+                        :ref="field.ref? field.ref: field.name"
+                        :value="getFieldValue(field)"
+                        :disabled="!editable || !field.editable"
+                        :markForBackResolution="isResolvableField(field)"
+                        :required="field.required"
+                        :resolve-value="getResolveValue(field)"
+                        :resolveFromObject="isResolvableField(field)"
+                        :resolveObject.sync="doc[getResolveFieldName(field)]"
+                        :state="validationState[field.name]"
+                        v-bind="field.input.propsData"
+                        @change="onEventFired('change', $event, field)"
+                        @click="onEventFired('click', $event, field)"
+                        @input="onFieldInput($event, field)"
+                        @hook:created="onEventFired('created', $event, field)"
+                        @hook:destroyed="onEventFired('destroyed', $event, field)"
+                        @hook:activated="onEventFired('activated', $event, field)"
+                        @hook:mounted="onFieldMounted($event, field)"
+                    ></component>
+                    <template #label>
+                      <span :title="getDisplayField(field)">{{ getDisplayField(field) }}</span>
+                      <span v-if="showRequiredInLabel && field.required" class="text-danger"
+                      >*</span
+                      >
+                    </template>
+                  </b-form-group>
+                </b-col>
+              </b-form-row>
+            </template>
+          </b-col>
+        </template>
+      </b-row>
+    </div>
+  </b-form>
+</template>
+
+<script>
+import Vue from 'vue';
+import {UtFormConstructor} from '../utils/UtFormConstructor';
+import typeOf from 'typeof';
+import {UtFormConfig} from '@/utils/UtFormConfig';
+import {UtArray} from "@/utils/UtArray";
+
+export default {
+  name: 'DocForm',
+  props: {
+    formConfig: Object,
+    applyDefaultValues: {type: Boolean, default: true},
+    doc: {type: Object, default: () => ({})},
+    refSuffix: {type: String, default: 'Id'},
+    editable: {type: Boolean, default: true},
+    displayField: {type: String, default: 'labelRu'},
+    showRequiredInLabel: {type: Boolean, default: true},
+    className: {type: String, default: 'container'},
+  },
+  data() {
+    return {
+      validationState: {},
+      systemFieldsValues: {},
+    };
+  },
+  watch: {
+    formConfig() {
+      this.validationState = {};
+      this.systemFieldsValues = {};
+      this.execApplyDefaultValues();
+      this.execApplyDefaultValRule();
+    },
+  },
+  methods: {
+    isSystemField(field) {
+      return field.isSystem === true;
+    },
+    getFieldValue(field) {
+      if (this.isSystemField(field)) {
+        return this.systemFieldsValues[field.name];
+      }
+      return this.doc[field.name];
+    },
+    setFieldValue(field, value) {
+      if (this.isSystemField(field)) {
+        this.$set(this.systemFieldsValues, field.name, value);
+      } else {
+        this.$set(this.doc, field.name, value);
+      }
+    },
+    onFieldInput(event, field) {
+      const value = event?.target?.value !== undefined ? event.target.value : event;
+      this.setFieldValue(field, value);
+      
+      if (this.isSystemField(field)) {
+        this.$emit('isSystemFieldChange', {
+          event: 'input',
+          fieldName: field.name,
+          field: field,
+          value: value,
+        });
+      }
+      this.onEventFired('input', event, field);
+    },
+    // onFieldChange(event, field) {
+    //   const value = event?.target?.value !== undefined ? event.target.value : event;
+    //   this.setFieldValue(field, value);
+      
+    //   if (this.isSystemField(field)) {
+    //     this.$emit('isSystemFieldChange', {
+    //       event: 'input',
+    //       fieldName: field.name,
+    //       field: field,
+    //       value: value,
+    //     });
+    //   }
+    //   this.onEventFired('change', event, field);
+    // },
+    onFieldMounted(event, field) {
+      if (this.isSystemField(field)) {
+        const value = this.getFieldValue(field);
+        this.$emit('isSystemFieldChange', {
+          event: 'mounted',
+          fieldName: field.name,
+          field: field,
+          value: value,
+        });
+      }
+      this.onEventFired('mounted', event, field);
+    },
+    getResolveValueName(field) {
+      if ((field.dict || field.ref) && !field.multiple) {
+        return field.name.substring(0, field.name.length - 2);
+      }
+      return field.name;
+    },
+    getResolveValue(field) {
+      return this.doc[this.getResolveValueName(field)]
+          ? this.doc[this.getResolveValueName(field)]
+          : null;
+    },
+    getDisplayField(value) {
+      if (!value[this.displayField]) {
+        return value.labelRu;
+      } else {
+        return value[this.displayField];
+      }
+    },
+    isResolvableField(field) {
+      return !!field.ref;
+    },
+    getResolveObject(field) {
+      if (this.isResolvableField(field)) {
+        let resolveFieldName = this.getResolveFieldName(field);
+        return field.multiple ? this.doc[field.name] : this.doc[resolveFieldName];
+      } else {
+        return null;
+      }
+    },
+    getResolveFieldName(field) {
+      let resolveFieldName = field?.name
+      if (resolveFieldName?.endsWith('Id')) {
+        resolveFieldName = field.name.substring(0, field.name.length - 2);
+      }
+      return resolveFieldName;
+    },
+    onEventFired(eventName, event, field) {
+      if (field.rules) {
+        field.rules.forEach((rule) => {
+          if (rule.event === eventName && rule.script) {
+            this.runRule(rule, {event, eventName});
+          }
+        });
+      }
+    },
+    onGlobalEventFired(eventName, event) {
+      let fields = UtFormConfig.getFields(this.formConfig);
+      fields.forEach((f) => {
+        if (f.rules) {
+          f.rules.forEach((r) => {
+            if (r.event === eventName) {
+              this.runRule(r, {event, eventName});
+            }
+          });
+        }
+      });
+    },
+    createRuleContext(additionalContext) {
+      return Object.assign(
+          {
+            form: this,
+            doc: this.doc,
+            ...additionalContext,
+          },
+          UtFormConstructor.getRuleContext(),
+      );
+    },
+    runRule(rule, context) {
+      UtFormConstructor.runRule(this.createRuleContext(context), rule.script);
+    },
+    getFieldValueForValidation(field) {
+      return this.isSystemField(field) 
+        ? this.systemFieldsValues[field.name] 
+        : this.doc[field.name];
+    },
+    isValueEmpty(field) {
+      const fieldName = typeof field === 'string' ? field : field.name;
+      const fieldObj = typeof field === 'string' ? null : field;
+      const value = fieldObj && this.isSystemField(fieldObj) 
+        ? this.systemFieldsValues[fieldName] 
+        : this.doc[fieldName];
+      
+      if (value == null) {
+        return true;
+      }
+      if (Array.isArray(value) && !value?.length) {
+        return true;
+      }
+
+      if (typeOf(value === 'string') && value === '') {
+        return true;
+      }
+      return false;
+    },
+    isValueLessThanMax(field, max) {
+      const fieldName = typeof field === 'string' ? field : field.name;
+      const fieldObj = typeof field === 'string' ? null : field;
+      const value = fieldObj && this.isSystemField(fieldObj) 
+        ? this.systemFieldsValues[fieldName] 
+        : this.doc[fieldName];
+      
+      if (value && max) {
+        return value?.length > parseInt(max);
+      }
+      return false;
+    },
+    isValueLessThanMin(field, min) {
+      const fieldName = typeof field === 'string' ? field : field.name;
+      const fieldObj = typeof field === 'string' ? null : field;
+      const value = fieldObj && this.isSystemField(fieldObj) 
+        ? this.systemFieldsValues[fieldName] 
+        : this.doc[fieldName];
+      
+      if (value && min) {
+        return parseInt(value) < parseInt(min);
+      }
+
+      return false;
+    },
+    validate(callback = () => {
+    }) {
+      this.formConfig.sections.forEach((s) => {
+        s.columns.forEach((c) => {
+          c.fields.forEach((f) => {
+            let feedback = '';
+
+            if (f.required && this.isValueEmpty(f)) {
+              feedback += this.getDisplayField(f);
+            }
+
+            if (f.type === 'integer' && this.isValueLessThanMin(f, f.input.propsData.min)) {
+              feedback += f.input.propsData.min;
+            }
+            // TODO: Костыль так как на бэке нету типа memo
+            if (f.input.type === 'b-form-textarea' && this.isValueLessThanMax(f, f.input.propsData?.max)) {
+              feedback += `\nМаксимальное значение для этого поля ${f.input.propsData?.max}`;
+            }
+
+            if (f.required && f.input.propsData?.isInlineTableInput) {
+              const findErrors = this.$refs?.[f.name]?.[0]?.getIsDirty?.() ?? [];
+              const errors = UtArray.removeDuplicate(findErrors, 'field')?.map(f => f?.label).join(', ')
+              feedback = errors ? this.$t('validate.multiRequired', {field: errors}) : this.isValueEmpty(f) ? this.getDisplayField(f) : ''
+            }
+                    // 🔥 Кастомная валидация для конкретного поля
+            if (typeof f.validate === 'function') {
+              const fieldValue = this.getFieldValueForValidation(f);
+              const docForValidation = this.isSystemField(f) 
+                ? { ...this.doc, [f.name]: fieldValue } 
+                : this.doc;
+              console.log(f, docForValidation);
+              const customError = f.validate(fieldValue, f, docForValidation, this.formConfig);
+              if (customError) {
+                feedback += `\n${customError}`;
+              }
+            }
+            if (feedback) {
+              Vue.set(this.validationState, f.name, false);
+              Vue.set(this.validationState, `${f.name}__feedback`, feedback);
+            } else {
+              Vue.set(this.validationState, f.name, null);
+            }
+            callback(feedback, this.$refs, f, this.doc)
+            this.onEventFired(
+                'validate',
+                {
+                  validationState: this.validationState,
+                  doc: this.doc,
+                },
+                f,
+            );
+          });
+        });
+      });
+      for (let fieldName in this.validationState) {
+        if (this.validationState[fieldName] === false) {
+          return false;
+        }
+      }
+
+      return true;
+    },
+    getColumnSize(section) {
+      const MAX_COLUMN_SIZE = 12;
+      if (!section || !section.columnCount) {
+        return MAX_COLUMN_SIZE;
+      }
+
+      let colSize = Math.floor(MAX_COLUMN_SIZE / section.columnCount);
+      return colSize;
+    },
+    isNotUndefinedAndNull(value) {
+      return !(value === null || value === undefined)
+    },
+    execApplyDefaultValues() {
+      if (this.applyDefaultValues) {
+        this.formConfig.sections.forEach((r) => {
+          r.columns.forEach((c) => {
+            c.fields.forEach((f) => {
+              if (this.isNotUndefinedAndNull(f.defaultValue)) {
+                let defValue;
+                if (this.defaultValue && typeOf(f.defaultValue) === 'function') {
+                  defValue = f.defaultValue();
+                } else {
+                  defValue = f.defaultValue == null ? null : f.defaultValue;
+                }
+                if (this.isSystemField(f)) {
+                  this.$set(this.systemFieldsValues, f.name, (f.defaultValue = defValue));
+                } else {
+                  this.$set(this.doc, f.name, (f.defaultValue = defValue));
+                }
+              }
+            });
+          });
+        });
+      }
+    },
+    execApplyDefaultValRule() {
+      this.formConfig.sections.forEach((el) => {
+        el.columns.forEach((c) => {
+          c.fields.forEach((f) => {
+            if (f.rules) {
+              if (!f.defaultValue) {
+                const rule = f.rules.find((rule) => rule.event === 'defaultValue');
+                if (rule) {
+                  const currentValue = this.isSystemField(f) 
+                    ? this.systemFieldsValues[f.name] 
+                    : this.doc[f.name];
+                  if (!currentValue) {
+                    const defValue = eval(rule.script);
+                    if (this.isSystemField(f)) {
+                      this.$set(this.systemFieldsValues, f.name, (f.defaultValue = defValue));
+                    } else {
+                      this.$set(this.doc, f.name, (f.defaultValue = defValue));
+                    }
+                  }
+                }
+              }
+            }
+          });
+        });
+      });
+    },
+  },
+  mounted() {
+    this.execApplyDefaultValues();
+    this.execApplyDefaultValRule();
+    this.onGlobalEventFired('form-mounted', this);
+  },
+  activated() {
+    this.execApplyDefaultValues();
+    this.execApplyDefaultValRule();
+    // this.emitSystemFieldsMounted();
+    this.onGlobalEventFired('form-activated', this);
+  },
+};
+</script>