cloud-web-corejs 1.0.276 → 1.0.278

package/src/components/xform/form-designer/setting-panel/indexMixin.js

@@ -1,335 +1,370 @@
-import WidgetProperties from './propertyRegister';
-import {
-  addWindowResizeHandler
-} from '../../../../components/xform/utils/util';
-import i18n from '../../../../components/xform/utils/i18n';
-import {
-  propertyRegistered
-} from '../../../../components/xform/form-designer/setting-panel/propertyRegister';
-
-let modules = {};
-const {
-  COMMON_PROPERTIES,
-  ADVANCED_PROPERTIES,
-  EVENT_PROPERTIES,
-  WF_PROPERTIES
-} = WidgetProperties;
-
-const baseRefUtil = {
-  addWindowResizeHandler,
-  i18n,
-  propertyRegistered,
-  COMMON_PROPERTIES,
-  ADVANCED_PROPERTIES,
-  EVENT_PROPERTIES
-};
-
-modules = {
-  componentName: 'SettingPanel',
-  mixins: [baseRefUtil.i18n],
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    formConfig: Object,
-    globalDsv: {
-      type: Object,
-      default: function () {
-        return {};
-      }
-    }
-  },
-  provide() {
-    return {
-      isSubFormChildWidget: () => this.subFormChildWidgetFlag,
-      isDataTableChildWidget: () => this.dataTableChildWidgetFlag,
-      getGlobalDsv: () => this.globalDsv,
-      showEventCollapse: this.showEventCollapse,
-      openWidgetPropertyDialog: this.openWidgetPropertyDialog
-    };
-  },
-  inject: ['getDesignerConfig'],
-  data() {
-    return {
-      designerConfig: this.getDesignerConfig(),
-
-      scrollerHeight: 0,
-
-      activeTab: '1',
-      widgetActiveCollapseNames: ['1', '3','4'], //['1', '2', '3'],
-      formActiveCollapseNames: ['1', '2'],
-
-      commonProps: baseRefUtil.COMMON_PROPERTIES,
-      advProps: baseRefUtil.ADVANCED_PROPERTIES,
-      eventProps: baseRefUtil.EVENT_PROPERTIES,
-      wfProps : WF_PROPERTIES,
-
-      showWidgetEventDialogFlag: false,
-      eventHandlerCode: '',
-      curEventName: '',
-      eventHeader: '',
-      eventOption:{},
-
-      subFormChildWidgetFlag: false,
-      dataTableChildWidgetFlag: false,
-
-      showDateConfigDialog: false,
-      columnOption: {},
-      columnSelectedWidget: {},
-      columnEditFields: [],
-      widgetActiveCollapseName1s: ['1', '3'], //['1', '2', '3'],
-      tableColumns:null
-    };
-  },
-  computed: {
-    optionModel: {
-      get() {
-        return this.selectedWidget?.options || {};
-      },
-
-      set(newValue) {
-        if (this.selectedWidget) this.selectedWidget.options = newValue;
-      }
-    }
-  },
-  watch: {
-    'designer.selectedWidget': {
-      handler(val) {
-        if (!!val) {
-          this.activeTab = '1';
-        }
-      }
-    },
-
-    'selectedWidget.options': {
-      //组件属性变动后，立即保存表单JSON！！
-      deep: true,
-      handler() {
-        this.designer.saveCurrentHistoryStep();
-      }
-    },
-
-    formConfig: {
-      deep: true,
-      handler() {
-        this.designer.saveCurrentHistoryStep();
-      }
-    }
-  },
-  created() {
-    this.$on('editEventHandler', function (eventName, eventParams, option) {
-      this.editEventHandler(eventName, eventParams, option);
-    });
-
-    this.designer.handleEvent('form-css-updated', cssClassList => {
-      this.designer.setCssClassList(cssClassList);
-    });
-
-    //监听字段组件选中事件
-    this.designer.handleEvent('field-selected', parentWidget => {
-      let widgetType = parentWidget?.type;
-      this.subFormChildWidgetFlag = widgetType === 'sub-form' || widgetType === 'data-table';
-      this.dataTableChildWidgetFlag = widgetType === 'data-table';
-      //console.log('subFormChildWidgetFlag', this.subFormChildWidgetFlag)
-    });
-  },
-  mounted() {
-    if (!this.designer.selectedWidget) {
-      // this.activeTab = '2';
-      this.activeTab = '1';
-    } else {
-      this.activeTab = '1';
-    }
-
-    this.scrollerHeight = window.innerHeight - 125 + 'px';
-    baseRefUtil.addWindowResizeHandler(() => {
-      this.$nextTick(() => {
-        this.scrollerHeight = window.innerHeight - 125 + 'px';
-        //console.log(this.scrollerHeight)
-      });
-    });
-    window.formSettingPanelRef = this;
-  },
-  methods: {
-    showEventCollapse() {
-      if (this.designerConfig['eventCollapse'] === undefined) {
-        return true;
-      }
-
-      return !!this.designerConfig['eventCollapse'];
-    },
-
-    hasPropEditor(propName, editorName) {
-      if (!editorName) {
-        return false;
-      }
-
-      /* alert组件注册了两个type属性编辑器，跳过第一个type属性编辑器，只显示第二个alert-type属性编辑器！！ */
-      if (propName.indexOf('-') <= -1) {
-        let uniquePropName = this.selectedWidget.type + '-' + propName;
-        if (baseRefUtil.propertyRegistered(uniquePropName)) {
-          return false;
-        }
-      }
-
-      let originalPropName = propName.replace(this.selectedWidget.type + '-', ''); //去掉组件名称前缀-，如果有的话！！
-      return this.designer.hasConfig(this.selectedWidget, originalPropName);
-    },
-
-    getPropEditor(propName, editorName) {
-      let originalPropName = propName.replace(this.selectedWidget.type + '-', ''); //去掉组件名称前缀-，如果有的话！！
-      let ownPropEditorName = `${this.selectedWidget.type}-${originalPropName}-editor`;
-      //console.log(ownPropEditorName, this.$options.components[ownPropEditorName])
-      if (!!this.$options.components[ownPropEditorName]) {
-        //局部注册的属性编辑器组件
-        return ownPropEditorName;
-      }
-
-      return !!this.$root.$options.components[ownPropEditorName] ? ownPropEditorName : editorName; //全局注册的属性编辑器组件
-    },
-
-    showCollapse(propsObj) {
-      let result = false;
-      for (let propName in propsObj) {
-        if (!propsObj.hasOwnProperty(propName)) {
-          continue;
-        }
-
-        if (this.hasPropEditor(propName, propsObj[propName])) {
-          result = true;
-          break;
-        }
-      }
-
-      return result;
-    },
-
-    editEventHandler(eventName, eventParams, option) {
-      this.curEventName = eventName;
-      option =option || {};
-      // if (!isFormSetiing) {
-      let selectedWidget = this.showDateConfigDialog ? this.columnSelectedWidget : this.selectedWidget;
-      this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`;
-      if(option.customCode){
-        this.eventHandlerCode = option.customCode() || '';
-      }else{
-        this.eventHandlerCode = selectedWidget.options[eventName] || '';
-      }
-
-      this.eventOption = option;
-
-      // 设置字段校验函数示例代码
-      if (eventName === 'onValidate' && !this.optionModel['onValidate']) {
-        this.eventHandlerCode =
-          "  /* sample code */\n  /*\n  if ((value > 100) || (value < 0)) {\n    callback(new Error('error message'))  //fail\n  } else {\n    callback();  //pass\n  }\n  */";
-      }
-      /*} else {
-        this.eventHeader = `formSetting.${eventName}(${eventParams.join(', ')}) {`;
-      }*/
-
-
-      this.showWidgetEventDialogFlag = true;
-    },
-
-    saveEventHandler() {
-      const codeHints = this.$refs.ecEditor.getEditorAnnotations();
-      let syntaxErrorFlag = false;
-      if (!!codeHints && codeHints.length > 0) {
-        codeHints.forEach(chItem => {
-          if (chItem.type === 'error') {
-            syntaxErrorFlag = true;
-          }
-        });
-
-        if (syntaxErrorFlag) {
-          this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'));
-          return;
-        }
-      }
-      let eventOption = this.eventOption || {};
-      if(!eventOption.callback){
-        let selectedWidget = this.showDateConfigDialog ? this.columnSelectedWidget : this.selectedWidget;
-
-        if (selectedWidget) selectedWidget.options[this.curEventName] = this.eventHandlerCode;
-      }else{
-        eventOption.callback(this.eventHandlerCode);
-      }
-
-      this.showWidgetEventDialogFlag = false;
-    },
-
-
-    showEventCollapse1() {
-      if (this.designerConfig['eventCollapse'] === undefined) {
-        return true;
-      }
-
-      return !!this.designerConfig['eventCollapse'];
-    },
-
-    hasPropEditor1(propName, editorName) {
-      if (!editorName) {
-        return false;
-      }
-
-      if (this.columnEditFields) {
-        if (!this.columnEditFields.includes(propName)) {
-          return false;
-        }
-      }
-
-      /* alert组件注册了两个type属性编辑器，跳过第一个type属性编辑器，只显示第二个alert-type属性编辑器！！ */
-      if (propName.indexOf('-') <= -1) {
-        let uniquePropName = this.columnSelectedWidget.type + '-' + propName;
-        if (baseRefUtil.propertyRegistered(uniquePropName)) {
-          return false;
-        }
-      }
-
-      let originalPropName = propName.replace(this.columnSelectedWidget.type + '-', ''); //去掉组件名称前缀-，如果有的话！！
-      return this.designer.hasConfig(this.columnSelectedWidget, originalPropName);
-    },
-
-    getPropEditor1(propName, editorName) {
-      let originalPropName = propName.replace(this.columnSelectedWidget.type + '-', ''); //去掉组件名称前缀-，如果有的话！！
-      let ownPropEditorName = `${this.columnSelectedWidget.type}-${originalPropName}-editor`;
-      //console.log(ownPropEditorName, this.$options.components[ownPropEditorName])
-      if (!!this.$options.components[ownPropEditorName]) {
-        //局部注册的属性编辑器组件
-        return ownPropEditorName;
-      }
-
-      return !!this.$root.$options.components[ownPropEditorName] ? ownPropEditorName : editorName; //全局注册的属性编辑器组件
-    },
-
-    showCollapse1(propsObj) {
-      let result = false;
-      for (let propName in propsObj) {
-        if (!propsObj.hasOwnProperty(propName)) {
-          continue;
-        }
-
-        if (this.hasPropEditor1(propName, propsObj[propName])) {
-          result = true;
-          break;
-        }
-      }
-
-      return result;
-    },
-    openWidgetPropertyDialog(option) {
-      this.formatConfig = option;
-      this.tableColumns = option.tableColumns;
-      this.columnSelectedWidget = option.columnSelectedWidget;
-      this.columnEditFields = option.columnEditFields;
-      this.widgetActiveCollapseName1s = ['1', '3'];
-      this.showDateConfigDialog = true;
-    },
-    confirmWidgetPropertyDialog() {
-      let columnOption = this.$baseLodash.cloneDeep(this.columnSelectedWidget.options);
-      this.formatConfig.callback(columnOption)
-      this.showDateConfigDialog = false;
-    }
-  }
-};
-
-export default modules;
+import WidgetProperties from "./propertyRegister";
+import { addWindowResizeHandler } from "../../../../components/xform/utils/util";
+import i18n from "../../../../components/xform/utils/i18n";
+import { propertyRegistered } from "../../../../components/xform/form-designer/setting-panel/propertyRegister";
+
+let modules = {};
+const {
+  COMMON_PROPERTIES,
+  ADVANCED_PROPERTIES,
+  EVENT_PROPERTIES,
+  WF_PROPERTIES,
+} = WidgetProperties;
+
+const baseRefUtil = {
+  addWindowResizeHandler,
+  i18n,
+  propertyRegistered,
+  COMMON_PROPERTIES,
+  ADVANCED_PROPERTIES,
+  EVENT_PROPERTIES,
+};
+
+modules = {
+  componentName: "SettingPanel",
+  mixins: [baseRefUtil.i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    formConfig: Object,
+    globalDsv: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  provide() {
+    return {
+      isSubFormChildWidget: () => this.subFormChildWidgetFlag,
+      isDataTableChildWidget: () => this.dataTableChildWidgetFlag,
+      getGlobalDsv: () => this.globalDsv,
+      showEventCollapse: this.showEventCollapse,
+      openWidgetPropertyDialog: this.openWidgetPropertyDialog,
+    };
+  },
+  inject: ["getDesignerConfig"],
+  data() {
+    return {
+      designerConfig: this.getDesignerConfig(),
+
+      scrollerHeight: 0,
+
+      activeTab: "1",
+      widgetActiveCollapseNames: ["1", "3", "4"], //['1', '2', '3'],
+      formActiveCollapseNames: ["1", "2"],
+
+      commonProps: baseRefUtil.COMMON_PROPERTIES,
+      advProps: baseRefUtil.ADVANCED_PROPERTIES,
+      eventProps: baseRefUtil.EVENT_PROPERTIES,
+      wfProps: WF_PROPERTIES,
+
+      showWidgetEventDialogFlag: false,
+      eventHandlerCode: "",
+      curEventName: "",
+      eventHeader: "",
+      eventOption: {},
+
+      subFormChildWidgetFlag: false,
+      dataTableChildWidgetFlag: false,
+
+      showDateConfigDialog: false,
+      columnOption: {},
+      columnSelectedWidget: {},
+      columnEditFields: [],
+      widgetActiveCollapseName1s: ["1", "3"], //['1', '2', '3'],
+      tableColumns: null,
+    };
+  },
+  computed: {
+    optionModel: {
+      get() {
+        return this.selectedWidget?.options || {};
+      },
+
+      set(newValue) {
+        if (this.selectedWidget) this.selectedWidget.options = newValue;
+      },
+    },
+  },
+  watch: {
+    "designer.selectedWidget": {
+      handler(val) {
+        if (!!val) {
+          this.activeTab = "1";
+        }
+      },
+    },
+
+    "selectedWidget.options": {
+      //组件属性变动后，立即保存表单JSON！！
+      deep: true,
+      handler() {
+        this.designer.saveCurrentHistoryStep();
+      },
+    },
+
+    formConfig: {
+      deep: true,
+      handler() {
+        this.designer.saveCurrentHistoryStep();
+      },
+    },
+  },
+  created() {
+    this.$on("editEventHandler", function (eventName, eventParams, option) {
+      this.editEventHandler(eventName, eventParams, option);
+    });
+
+    this.designer.handleEvent("form-css-updated", (cssClassList) => {
+      this.designer.setCssClassList(cssClassList);
+    });
+
+    //监听字段组件选中事件
+    this.designer.handleEvent("field-selected", (parentWidget) => {
+      let widgetType = parentWidget?.type;
+      this.subFormChildWidgetFlag =
+        widgetType === "sub-form" || widgetType === "data-table";
+      this.dataTableChildWidgetFlag = widgetType === "data-table";
+      //console.log('subFormChildWidgetFlag', this.subFormChildWidgetFlag)
+    });
+  },
+  mounted() {
+    if (!this.designer.selectedWidget) {
+      // this.activeTab = '2';
+      this.activeTab = "1";
+    } else {
+      this.activeTab = "1";
+    }
+
+    this.scrollerHeight = window.innerHeight - 125 + "px";
+    this.winResizeUnbind = baseRefUtil.addWindowResizeHandler(() => {
+      this.$nextTick(() => {
+        this.scrollerHeight = window.innerHeight - 125 + "px";
+        //console.log(this.scrollerHeight)
+      });
+    });
+    window.formSettingPanelRef = this;
+  },
+  beforeDestroy() {
+    // window 级监听/全局引用持有本实例，销毁时必须清理，否则设置面板整树泄露
+    if (this.winResizeUnbind) {
+      this.winResizeUnbind();
+      this.winResizeUnbind = null;
+    }
+    if (window.formSettingPanelRef === this) {
+      window.formSettingPanelRef = null;
+    }
+  },
+  methods: {
+    showEventCollapse() {
+      if (this.designerConfig["eventCollapse"] === undefined) {
+        return true;
+      }
+
+      return !!this.designerConfig["eventCollapse"];
+    },
+
+    hasPropEditor(propName, editorName) {
+      if (!editorName) {
+        return false;
+      }
+
+      /* alert组件注册了两个type属性编辑器，跳过第一个type属性编辑器，只显示第二个alert-type属性编辑器！！ */
+      if (propName.indexOf("-") <= -1) {
+        let uniquePropName = this.selectedWidget.type + "-" + propName;
+        if (baseRefUtil.propertyRegistered(uniquePropName)) {
+          return false;
+        }
+      }
+
+      let originalPropName = propName.replace(
+        this.selectedWidget.type + "-",
+        ""
+      ); //去掉组件名称前缀-，如果有的话！！
+      return this.designer.hasConfig(this.selectedWidget, originalPropName);
+    },
+
+    getPropEditor(propName, editorName) {
+      let originalPropName = propName.replace(
+        this.selectedWidget.type + "-",
+        ""
+      ); //去掉组件名称前缀-，如果有的话！！
+      let ownPropEditorName = `${this.selectedWidget.type}-${originalPropName}-editor`;
+      //console.log(ownPropEditorName, this.$options.components[ownPropEditorName])
+      if (!!this.$options.components[ownPropEditorName]) {
+        //局部注册的属性编辑器组件
+        return ownPropEditorName;
+      }
+
+      return !!this.$root.$options.components[ownPropEditorName]
+        ? ownPropEditorName
+        : editorName; //全局注册的属性编辑器组件
+    },
+
+    showCollapse(propsObj) {
+      let result = false;
+      for (let propName in propsObj) {
+        if (!propsObj.hasOwnProperty(propName)) {
+          continue;
+        }
+
+        if (this.hasPropEditor(propName, propsObj[propName])) {
+          result = true;
+          break;
+        }
+      }
+
+      return result;
+    },
+
+    editEventHandler(eventName, eventParams, option) {
+      this.curEventName = eventName;
+      option = option || {};
+      // if (!isFormSetiing) {
+      let selectedWidget = this.showDateConfigDialog
+        ? this.columnSelectedWidget
+        : this.selectedWidget;
+      this.eventHeader = `${
+        this.optionModel.name
+      }.${eventName}(${eventParams.join(", ")}) {`;
+      if (option.customCode) {
+        this.eventHandlerCode = option.customCode() || "";
+      } else {
+        this.eventHandlerCode = selectedWidget.options[eventName] || "";
+      }
+
+      this.eventOption = option;
+
+      // 设置字段校验函数示例代码
+      if (eventName === "onValidate" && !this.optionModel["onValidate"]) {
+        this.eventHandlerCode =
+          "  /* sample code */\n  /*\n  if ((value > 100) || (value < 0)) {\n    callback(new Error('error message'))  //fail\n  } else {\n    callback();  //pass\n  }\n  */";
+      }
+      /*} else {
+        this.eventHeader = `formSetting.${eventName}(${eventParams.join(', ')}) {`;
+      }*/
+
+      this.showWidgetEventDialogFlag = true;
+    },
+
+    saveEventHandler() {
+      const codeHints = this.$refs.ecEditor.getEditorAnnotations();
+      let syntaxErrorFlag = false;
+      if (!!codeHints && codeHints.length > 0) {
+        codeHints.forEach((chItem) => {
+          if (chItem.type === "error") {
+            syntaxErrorFlag = true;
+          }
+        });
+
+        if (syntaxErrorFlag) {
+          this.$message.error(
+            this.i18nt("designer.setting.syntaxCheckWarning")
+          );
+          return;
+        }
+      }
+      let eventOption = this.eventOption || {};
+      if (!eventOption.callback) {
+        let selectedWidget = this.showDateConfigDialog
+          ? this.columnSelectedWidget
+          : this.selectedWidget;
+
+        if (selectedWidget)
+          selectedWidget.options[this.curEventName] = this.eventHandlerCode;
+      } else {
+        eventOption.callback(this.eventHandlerCode);
+      }
+
+      this.showWidgetEventDialogFlag = false;
+    },
+
+    showEventCollapse1() {
+      if (this.designerConfig["eventCollapse"] === undefined) {
+        return true;
+      }
+
+      return !!this.designerConfig["eventCollapse"];
+    },
+
+    hasPropEditor1(propName, editorName) {
+      if (!editorName) {
+        return false;
+      }
+
+      if (this.columnEditFields) {
+        if (!this.columnEditFields.includes(propName)) {
+          return false;
+        }
+      }
+
+      /* alert组件注册了两个type属性编辑器，跳过第一个type属性编辑器，只显示第二个alert-type属性编辑器！！ */
+      if (propName.indexOf("-") <= -1) {
+        let uniquePropName = this.columnSelectedWidget.type + "-" + propName;
+        if (baseRefUtil.propertyRegistered(uniquePropName)) {
+          return false;
+        }
+      }
+
+      let originalPropName = propName.replace(
+        this.columnSelectedWidget.type + "-",
+        ""
+      ); //去掉组件名称前缀-，如果有的话！！
+      return this.designer.hasConfig(
+        this.columnSelectedWidget,
+        originalPropName
+      );
+    },
+
+    getPropEditor1(propName, editorName) {
+      let originalPropName = propName.replace(
+        this.columnSelectedWidget.type + "-",
+        ""
+      ); //去掉组件名称前缀-，如果有的话！！
+      let ownPropEditorName = `${this.columnSelectedWidget.type}-${originalPropName}-editor`;
+      //console.log(ownPropEditorName, this.$options.components[ownPropEditorName])
+      if (!!this.$options.components[ownPropEditorName]) {
+        //局部注册的属性编辑器组件
+        return ownPropEditorName;
+      }
+
+      return !!this.$root.$options.components[ownPropEditorName]
+        ? ownPropEditorName
+        : editorName; //全局注册的属性编辑器组件
+    },
+
+    showCollapse1(propsObj) {
+      let result = false;
+      for (let propName in propsObj) {
+        if (!propsObj.hasOwnProperty(propName)) {
+          continue;
+        }
+
+        if (this.hasPropEditor1(propName, propsObj[propName])) {
+          result = true;
+          break;
+        }
+      }
+
+      return result;
+    },
+    openWidgetPropertyDialog(option) {
+      this.formatConfig = option;
+      this.tableColumns = option.tableColumns;
+      this.columnSelectedWidget = option.columnSelectedWidget;
+      this.columnEditFields = option.columnEditFields;
+      this.widgetActiveCollapseName1s = ["1", "3"];
+      this.showDateConfigDialog = true;
+    },
+    confirmWidgetPropertyDialog() {
+      let columnOption = this.$baseLodash.cloneDeep(
+        this.columnSelectedWidget.options
+      );
+      this.formatConfig.callback(columnOption);
+      this.showDateConfigDialog = false;
+    },
+  },
+};
+
+export default modules;