skhj-variant 2.1.12

package/src/components/form-render/index.vue

@@ -0,0 +1,712 @@
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: https://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <div class="widgetEvent">
+    <el-form
+      :label-position="labelPosition"
+      :size="size"
+      :class="['render-form', customClass]"
+      :label-width="labelWidth"
+      :validate-on-rule-change="false"
+      :model="formDataModel"
+      ref="renderForm"
+      @submit.native.prevent
+    >
+      <template v-for="(widget, index) in widgetList">
+        <template v-if="'container' === widget.category">
+          <component
+            :is="getContainerWidgetName(widget)"
+            :widget="widget"
+            :key="widget.id"
+            :parent-list="widgetList"
+            :index-of-parent-list="index"
+            :parent-widget="null"
+          ></component>
+        </template>
+        <template v-else>
+          <component
+            :is="getWidgetName(widget)"
+            :field="widget"
+            :form-model="formDataModel"
+            :designer="null"
+            :key="widget.id"
+            :parent-list="widgetList"
+            :index-of-parent-list="index"
+            :parent-widget="null"
+          ></component>
+        </template>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script>
+//import ElForm from 'element-ui/packages/form/src/form.vue'  /* 用于源码调试Element UI */
+import emitter from "element-ui/lib/mixins/emitter";
+import "./container-item/index";
+import FieldComponents from "@/components/form-designer/form-widget/field-widget/index";
+import {
+  deepClone,
+  insertCustomCssToHead,
+  insertGlobalFunctionsToHtml,
+} from "../../utils/util";
+import i18n, { changeLocale } from "../../utils/i18n";
+
+export default {
+  name: "VFormRender",
+  componentName: "VFormRender",
+  mixins: [emitter, i18n],
+  components: {
+    //ElForm,
+
+    ...FieldComponents,
+  },
+  props: {
+    formJson: Object, //prop传入的表单JSON配置
+    formData: {
+      //prop传入的表单数据
+      Object,
+      default: () => {},
+    },
+    optionData: {
+      //prop传入的选项数据
+      type: Object,
+      default: () => {},
+    },
+    previewState: {
+      //是否表单预览状态
+      type: Boolean,
+      default: false,
+    },
+  },
+  provide() {
+    return {
+      refList: this.widgetRefList,
+      sfRefList: this.subFormRefList, //收集SubForm引用
+      formConfig: this.formConfig,
+      globalOptionData: this.optionData,
+      getOptionData: () =>
+        this
+          .optionData /* 该方法用于在异步更新option-data之后重新获取到最新值 */,
+      globalModel: {
+        formModel: this.formDataModel,
+      },
+      previewState: this.previewState,
+    };
+  },
+  data() {
+    return {
+      formJsonObj: this.formJson,
+
+      formDataModel: {
+        //
+      },
+      widgetRefList: {},
+      subFormRefList: {},
+    };
+  },
+  computed: {
+    formConfig() {
+      return this.formJsonObj.formConfig;
+    },
+
+    widgetList() {
+      return this.formJsonObj.widgetList;
+    },
+
+    labelPosition() {
+      if (!!this.formConfig && !!this.formConfig.labelPosition) {
+        return this.formConfig.labelPosition;
+      }
+
+      return "left";
+    },
+
+    labelWidth() {
+      if (!!this.formConfig && !!this.formConfig.labelWidth) {
+        return this.formConfig.labelWidth + "px";
+      }
+
+      return "80px";
+    },
+
+    size() {
+      if (!!this.formConfig && !!this.formConfig.size) {
+        return this.formConfig.size;
+      }
+
+      return "medium";
+    },
+
+    customClass() {
+      return !!this.formConfig && !!this.formConfig.customClass
+        ? this.formConfig.customClass
+        : "";
+    },
+  },
+  watch: {
+    //
+  },
+  created() {
+    this.buildFormModel(!this.formJsonObj ? null : this.formJsonObj.widgetList);
+    this.initFormObject();
+  },
+  mounted() {
+    this.initLocale();
+    this.handleOnMounted();
+  },
+  methods: {
+    initFormObject() {
+      this.insertCustomStyleAndScriptNode();
+      this.addFieldChangeEventHandler();
+      this.addFieldValidateEventHandler();
+      this.registerFormToRefList();
+      this.handleOnCreated();
+    },
+
+    getContainerWidgetName(widget) {
+      return widget.type + "-item";
+    },
+
+    getWidgetName(widget) {
+      return widget.type + "-widget";
+    },
+
+    initLocale() {
+      let curLocale = localStorage.getItem("v_form_locale") || "zh-CN";
+      this.changeLanguage(curLocale);
+    },
+
+    insertCustomStyleAndScriptNode() {
+      if (!!this.formConfig && !!this.formConfig.cssCode) {
+        insertCustomCssToHead(this.formConfig.cssCode);
+      }
+
+      if (!!this.formConfig && !!this.formConfig.functions) {
+        insertGlobalFunctionsToHtml(this.formConfig.functions);
+      }
+    },
+
+    buildFormModel(widgetList) {
+      if (!!widgetList && widgetList.length > 0) {
+        widgetList.forEach((wItem) => {
+          this.buildDataFromWidget(wItem);
+        });
+      }
+    },
+
+    buildDataFromWidget(wItem) {
+      if (wItem.category === "container") {
+        if (wItem.type === "grid") {
+          if (!!wItem.cols && wItem.cols.length > 0) {
+            wItem.cols.forEach((childItem) => {
+              this.buildDataFromWidget(childItem);
+            });
+          }
+        } else if (wItem.type === "table") {
+          if (!!wItem.rows && wItem.rows.length > 0) {
+            wItem.rows.forEach((rowItem) => {
+              if (!!rowItem.cols && rowItem.cols.length > 0) {
+                rowItem.cols.forEach((colItem) => {
+                  this.buildDataFromWidget(colItem);
+                });
+              }
+            });
+          }
+        } else if (wItem.type === "tab") {
+          if (!!wItem.tabs && wItem.tabs.length > 0) {
+            wItem.tabs.forEach((tabItem) => {
+              if (!!tabItem.widgetList && tabItem.widgetList.length > 0) {
+                tabItem.widgetList.forEach((childItem) => {
+                  this.buildDataFromWidget(childItem);
+                });
+              }
+            });
+          }
+        } else if (wItem.type === "sub-form") {
+          let subFormName = wItem.options.name;
+          if (!this.formData.hasOwnProperty(subFormName)) {
+            let subFormDataRow = {};
+            if (wItem.options.showBlankRow) {
+              wItem.widgetList.forEach((subFormItem) => {
+                if (!!subFormItem.formItemFlag) {
+                  subFormDataRow[subFormItem.options.name] =
+                    subFormItem.options.defaultValue;
+                }
+              });
+
+              this.$set(this.formDataModel, subFormName, [subFormDataRow]); //
+            } else {
+              this.$set(this.formDataModel, subFormName, []); //
+            }
+          } else {
+            let initialValue = this.formData[subFormName];
+            this.$set(this.formDataModel, subFormName, deepClone(initialValue));
+          }
+        } else if (wItem.type === "grid-col" || wItem.type === "table-cell") {
+          if (!!wItem.widgetList && wItem.widgetList.length > 0) {
+            wItem.widgetList.forEach((childItem) => {
+              this.buildDataFromWidget(childItem);
+            });
+          }
+        } else {
+          //自定义容器组件
+          if (!!wItem.widgetList && wItem.widgetList.length > 0) {
+            wItem.widgetList.forEach((childItem) => {
+              this.buildDataFromWidget(childItem);
+            });
+          }
+        }
+      } else if (!!wItem.formItemFlag) {
+        if (!this.formData.hasOwnProperty(wItem.options.name)) {
+          //this.formDataModel[wItem.options.name] = '' //这种写法不支持对象属性响应式更新，必须用$set方法！！
+          this.$set(
+            this.formDataModel,
+            wItem.options.name,
+            wItem.options.defaultValue
+          ); //设置字段默认值
+        } else {
+          let initialValue = this.formData[wItem.options.name];
+          this.$set(
+            this.formDataModel,
+            wItem.options.name,
+            deepClone(initialValue)
+          );
+        }
+      }
+    },
+
+    addFieldChangeEventHandler() {
+      this.$off("fieldChange"); //移除原有事件监听
+
+      this.$on(
+        "fieldChange",
+        function (fieldName, newValue, oldValue, subFormName, subFormRowIndex) {
+          this.handleFieldDataChange(
+            fieldName,
+            newValue,
+            oldValue,
+            subFormName,
+            subFormRowIndex
+          );
+          this.$emit(
+            "formChange",
+            fieldName,
+            newValue,
+            oldValue,
+            this.formDataModel,
+            subFormName,
+            subFormRowIndex
+          );
+        }
+      );
+    },
+
+    addFieldValidateEventHandler() {
+      this.$off("fieldValidation"); //移除原有事件监听
+      this.$on("fieldValidation", (fieldName) => {
+        this.$refs.renderForm.validateField(fieldName);
+      });
+    },
+
+    registerFormToRefList() {
+      this.widgetRefList["v_form_ref"] = this;
+    },
+
+    handleFieldDataChange(
+      fieldName,
+      newValue,
+      oldValue,
+      subFormName,
+      subFormRowIndex
+    ) {
+      if (!!this.formConfig && !!this.formConfig.onFormDataChange) {
+        let customFunc = new Function(
+          "fieldName",
+          "newValue",
+          "oldValue",
+          "formModel",
+          "subFormName",
+          "subFormRowIndex",
+          this.formConfig.onFormDataChange
+        );
+        customFunc.call(
+          this,
+          fieldName,
+          newValue,
+          oldValue,
+          this.formDataModel,
+          subFormName,
+          subFormRowIndex
+        );
+      }
+    },
+
+    handleOnCreated() {
+      if (!!this.formConfig && !!this.formConfig.onFormCreated) {
+        let customFunc = new Function(this.formConfig.onFormCreated);
+        customFunc.call(this);
+      }
+    },
+
+    handleOnMounted() {
+      if (!!this.formConfig && !!this.formConfig.onFormMounted) {
+        let customFunc = new Function(this.formConfig.onFormMounted);
+        customFunc.call(this);
+      }
+    },
+
+    findWidgetAndSetDisabled(widgetName, disabledFlag) {
+      let foundW = this.getWidgetRef(widgetName);
+      if (!!foundW) {
+        foundW.setDisabled(disabledFlag);
+      }
+    },
+
+    findWidgetAndSetHidden(widgetName, hiddenFlag) {
+      let foundW = this.getWidgetRef(widgetName);
+      if (!!foundW) {
+        foundW.setHidden(hiddenFlag);
+      }
+    },
+
+    //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
+    /* 提示：用户可自行扩充这些方法！！！ */
+
+    changeLanguage(langName) {
+      changeLocale(langName);
+    },
+
+    getNativeForm() {
+      //获取原生form引用
+      return this.$refs["renderForm"];
+    },
+
+    getWidgetRef(widgetName, showError = false) {
+      let foundRef = this.widgetRefList[widgetName];
+      if (!foundRef && !!showError) {
+        this.$message.error(this.i18nt("render.hint.refNotFound") + widgetName);
+      }
+      return foundRef;
+    },
+
+    clearFormDataModel() {
+      for (let pkey in this.formDataModel) {
+        delete this.formDataModel[pkey];
+      }
+    },
+
+    /**
+     * 动态加载表单JSON
+     * @param newFormJson
+     */
+    setFormJson(newFormJson) {
+      if (!!newFormJson) {
+        if (
+          typeof newFormJson === "string" ||
+          newFormJson.constructor === Object
+        ) {
+          let newFormJsonObj = null;
+          if (typeof newFormJson === "string") {
+            newFormJsonObj = JSON.parse(newFormJson);
+          } else {
+            newFormJsonObj = newFormJson;
+          }
+
+          if (!newFormJsonObj.formConfig || !newFormJsonObj.widgetList) {
+            this.$message.error("Invalid format of form json.");
+            return;
+          }
+
+          /* formDataModel必须在widgetList赋值完成初始化，因为widgetList赋值意味着子组件开始创建！！！ */
+          //this.formDataModel = {}  //清空表单数据对象（有bug，会导致表单校验失败！！）
+          this.clearFormDataModel(); //上行代码有问题，会导致表单校验失败，故保留原对象引用只清空对象属性！！
+          this.buildFormModel(newFormJsonObj.widgetList);
+
+          this.$set(this.formJsonObj, "formConfig", newFormJsonObj.formConfig);
+          this._provided.formConfig = newFormJsonObj.formConfig; //强制更新provide的formConfig对象
+          this.$set(this.formJsonObj, "widgetList", newFormJsonObj.widgetList);
+
+          this.initFormObject();
+          this.handleOnMounted();
+        } else {
+          this.$message.error("Set form json failed.");
+        }
+      }
+    },
+
+    /**
+     * 重新加载选项数据
+     * @param widgetNames 指定重新加载的组件名称或组件名数组，不传则重新加载所有选项字段
+     */
+    reloadOptionData(widgetNames) {
+      //this._provided.globalOptionData = this.optionData
+
+      let eventParams = [];
+      if (!!widgetNames && typeof widgetNames === "string") {
+        eventParams = [widgetNames];
+      } else if (!!widgetNames && Array.isArray(widgetNames)) {
+        eventParams = [...widgetNames];
+      }
+      this.broadcast("FieldWidget", "reloadOptionItems", [eventParams]);
+    },
+
+    getFormData(needValidation = true) {
+      if (!needValidation) {
+        return this.formDataModel;
+      }
+
+      let callback = function nullFunc() {};
+      let promise = new window.Promise(function (resolve, reject) {
+        callback = function (formData, error) {
+          !error ? resolve(formData) : reject(error);
+        };
+      });
+
+      this.$refs["renderForm"].validate((valid) => {
+        if (valid) {
+          callback(this.formDataModel);
+        } else {
+          callback(
+            this.formDataModel,
+            this.i18nt("render.hint.validationFailed")
+          );
+        }
+      });
+
+      return promise;
+    },
+
+    setFormData(formData) {
+      //设置表单数据
+      //this.formDataModel = formData //inject注入的formModel不是响应式的，直接赋值在其他组件拿不到最新值！！
+
+      Object.keys(this.formDataModel).forEach((propName) => {
+        if (!!formData && formData.hasOwnProperty(propName)) {
+          this.formDataModel[propName] = deepClone(formData[propName]);
+        }
+      });
+
+      //this.formDataModel = formData
+      //this._provided.globalModel.formModel = formData  /* 这种写法可使inject的属性保持响应式更新！！ */
+      //
+
+      // 通知SubForm组件：表单数据更新事件！！
+      //this.broadcast('ContainerItem', 'setFormData', formData)
+      this.broadcast("ContainerItem", "setFormData", this.formDataModel);
+
+      // 通知FieldWidget组件：表单数据更新事件！！
+      //this.broadcast('FieldWidget', 'setFormData', formData)
+      this.broadcast("FieldWidget", "setFormData", this.formDataModel);
+    },
+
+    getFieldValue(fieldName) {
+      //单个字段获取值
+      let fieldRef = this.getWidgetRef(fieldName);
+      if (!!fieldRef && !!fieldRef.getValue) {
+        fieldRef.getValue();
+      }
+    },
+
+    setFieldValue(fieldName, fieldValue) {
+      //单个更新字段值
+      let fieldRef = this.getWidgetRef(fieldName);
+      if (!!fieldRef && !!fieldRef.setValue) {
+        fieldRef.setValue(fieldValue);
+      }
+    },
+
+    getSubFormValues(subFormName, needValidation = true) {
+      let foundSFRef = this.subFormRefList[subFormName];
+      // if (!foundSFRef) {
+      //   return this.formDataModel[subFormName]
+      // }
+      return foundSFRef.getSubFormValues(needValidation);
+    },
+
+    disableForm() {
+      let wNameList = Object.keys(this.widgetRefList);
+      wNameList.forEach((wName) => {
+        let foundW = this.getWidgetRef(wName);
+        if (!!foundW) {
+          // if (!!foundW.setDisabled) {
+          //   foundW.setDisabled(true)
+          // }
+
+          !!foundW.setDisabled && foundW.setDisabled(true);
+        }
+      });
+    },
+
+    enableForm() {
+      let wNameList = Object.keys(this.widgetRefList);
+      wNameList.forEach((wName) => {
+        let foundW = this.getWidgetRef(wName);
+        if (!!foundW) {
+          // if (!!foundW.setDisabled) {
+          //   foundW.setDisabled(false)
+          // }
+
+          !!foundW.setDisabled && foundW.setDisabled(false);
+        }
+      });
+    },
+
+    resetForm() {
+      //重置表单
+      let subFormNames = Object.keys(this.subFormRefList);
+      subFormNames.forEach((sfName) => {
+        if (!!this.subFormRefList[sfName].resetSubForm) {
+          this.subFormRefList[sfName].resetSubForm();
+        }
+      });
+
+      let wNameList = Object.keys(this.widgetRefList);
+      wNameList.forEach((wName) => {
+        let foundW = this.getWidgetRef(wName);
+        if (!!foundW && !!foundW.resetField) {
+          foundW.resetField();
+        }
+      });
+
+      this.$nextTick(() => {
+        this.clearValidate(); /* 清除resetField方法触发的校验错误提示 */
+      });
+    },
+
+    clearValidate(props) {
+      this.$refs.renderForm.clearValidate(props);
+    },
+
+    validateForm() {
+      //
+    },
+
+    validateFields() {
+      //
+    },
+
+    disableWidgets(widgetNames) {
+      if (!!widgetNames) {
+        if (typeof widgetNames === "string") {
+          this.findWidgetAndSetDisabled(widgetNames, true);
+        } else if (Array.isArray(widgetNames)) {
+          widgetNames.forEach((wn) => {
+            this.findWidgetAndSetDisabled(wn, true);
+          });
+        }
+      }
+    },
+
+    enableWidgets(widgetNames) {
+      if (!!widgetNames) {
+        if (typeof widgetNames === "string") {
+          this.findWidgetAndSetDisabled(widgetNames, false);
+        } else if (Array.isArray(widgetNames)) {
+          widgetNames.forEach((wn) => {
+            this.findWidgetAndSetDisabled(wn, false);
+          });
+        }
+      }
+    },
+
+    hideWidgets(widgetNames) {
+      if (!!widgetNames) {
+        if (typeof widgetNames === "string") {
+          this.findWidgetAndSetHidden(widgetNames, true);
+        } else if (Array.isArray(widgetNames)) {
+          widgetNames.forEach((wn) => {
+            this.findWidgetAndSetHidden(wn, true);
+          });
+        }
+      }
+    },
+
+    showWidgets(widgetNames) {
+      if (!!widgetNames) {
+        if (typeof widgetNames === "string") {
+          this.findWidgetAndSetHidden(widgetNames, false);
+        } else if (Array.isArray(widgetNames)) {
+          widgetNames.forEach((wn) => {
+            this.findWidgetAndSetHidden(wn, false);
+          });
+        }
+      }
+    },
+
+    //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-form ::v-deep .el-row {
+  padding: 8px;
+}
+.topBox {
+  padding: 10px;
+  margin-bottom: 27px;
+  .nameBox {
+    width: 100%;
+    font-size: 14px;
+    font-weight: 600;
+    color: #4a4a4a;
+  }
+  .disBox {
+    width: 100%;
+    display: flex;
+    font-size: 12px;
+    .contentAndType {
+      width: 200px;
+      color: rgba(74, 74, 74, 0.59);
+      font-weight: 400;
+      div {
+        height: 20px;
+      }
+    }
+    .timeAndState {
+      width: 62px;
+      color: #4a4a4a;
+      font-weight: 400;
+      div {
+        height: 20px;
+      }
+      .state {
+        color: #00b873;
+      }
+    }
+    .imgBox {
+      width: 40px;
+      height: 40px;
+      background: #00913a;
+      border-radius: 1px;
+      margin-left: 5px;
+      margin-top: -5px;
+    }
+  }
+}
+.bottomBox {
+  margin-top: 21px;
+  padding: 0 20px 20px;
+  .btmTitle {
+    font-size: 14px;
+    font-weight: 600;
+    color: #b3baba;
+    margin-bottom: 8px;
+  }
+  .btmContent {
+    color: rgba(2, 2, 2, 0.59);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+</style>