cloud-web-corejs 1.0.276 → 1.0.277

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

@@ -1,308 +1,351 @@
-import i18n from "../../../../components/xform/utils/i18n"
-import axios from "axios"
-import {
-  containers,
-  basicFields,
-  advancedFields,
-  customFields,
-  businessFields
-} from "./widgetsConfig"
-import {
-  formTemplates
-} from './templatesConfig'
-import {
-  addWindowResizeHandler
-} from "../../../../components/xform/utils/util"
-
-let modules = {};
-const baseRefUtil = {
-  i18n,
-  axios,
-  containers,
-  basicFields,
-  advancedFields,
-  customFields,
-  formTemplates,
-  addWindowResizeHandler
-};
-
-modules = {
-  mixins: [baseRefUtil.i18n],
-  props: {
-    designer: Object,
-  },
-  inject: ['getBannedWidgets', 'getDesignerConfig'],
-  data() {
-    return {
-      designerConfig: this.getDesignerConfig(),
-      firstTab: 'componentLib',
-      scrollerHeight: 0,
-      activeNames: ['1', '2', '3', '4'],
-      metadataActiveNames: ["0", "1", "2", "3", "4"],
-
-      businessActiveNames:["0"],
-
-      containers: baseRefUtil.containers,
-      commonContainers: [],
-      basicFields: baseRefUtil.basicFields,
-      advancedFields: baseRefUtil.advancedFields,
-      customFields: baseRefUtil.customFields,
-      businessFields:businessFields,
-      commonAdvancedFields: [],
-      chartContainers: [],
-      chartWidgets: [],
-      metaFields: {
-        main: {
-          entityName: "",
-          entityLabel: "",
-          fieldList: [
-            {
-              type: "",
-              icon: "",
-              displayName: "",
-              options: {},
-            },
-          ],
-        },
-        detail: [
-          {
-            entityName: "",
-            entityLabel: "",
-            fieldList: [
-              {
-                type: "",
-                icon: "",
-                displayName: "",
-                options: {},
-              },
-            ],
-          },
-        ],
-      },
-      formTemplates: baseRefUtil.formTemplates,
-      // ftImages: [
-      //   {imgUrl: ftImg1},
-      //   {imgUrl: ftImg2},
-      //   {imgUrl: ftImg3},
-      //   {imgUrl: ftImg4},
-      //   {imgUrl: ftImg5},
-      //   {imgUrl: ftImg6},
-      //   {imgUrl: ftImg7},
-      //   {imgUrl: ftImg8},
-      // ]
-    }
-  },
-  computed: {
-    //
-    showComponentLib() {
-      return this.designerConfig.componentLib === void 0
-        ? !0
-        : !!this.designerConfig.componentLib;
-    },
-    showFormTemplates() {
-      return this.designerConfig.formTemplates === void 0
-        ? !0
-        : !!this.designerConfig.formTemplates;
-    },
-    showChartLib() {
-      return this.designerConfig.chartLib === void 0
-        ? !1
-        : !!this.designerConfig.chartLib;
-    },
-    showMetadataLib() {
-      return this.designerConfig.metadataLib === void 0
-        ? !1
-        : !!this.designerConfig.metadataLib;
-    },
-  },
-  mounted() {
-    this.designerConfig.chartLib && (this.firstTab = "chartLib"),
-    this.designerConfig.metadataLib && (this.firstTab = "metadataLib");
-    this.loadWidgets();
-
-    this.scrollerHeight = window.innerHeight - 85 + 'px';
-    baseRefUtil.addWindowResizeHandler(() => {
-      this.$nextTick(() => {
-        this.scrollerHeight = window.innerHeight - 85 + 'px';
-        //console.log(this.scrollerHeight)
-      });
-    });
-  },
-  methods: {
-    getMetaFieldLabel(o) {
-      const e = o.displayName;
-      return e.substring(e.indexOf(".") + 1, e.length);
-    },
-    getWidgetLabel(o) {
-      return o.alias
-        ? this.i18n2t(
-          `designer.widgetLabel.${o.alias}`,
-          `extension.widgetLabel.${o.alias}`
-        )
-        : this.i18n2t(
-          `designer.widgetLabel.${o.type}`,
-          `extension.widgetLabel.${o.type}`
-        );
-    },
-    isBanned(wName) {
-      return this.getBannedWidgets().indexOf(wName) > -1;
-    },
-
-    /*showFormTemplates() {
-      if (this.designerConfig['formTemplates'] === undefined) {
-        return true;
-      }
-
-      return !!this.designerConfig['formTemplates'];
-    },*/
-    checkColumnFlag(widget){
-      if(this.designer.vueInstance.columnFlag){
-        return widget.columnFlag;
-      }
-      return true
-    },
-    loadWidgets() {
-      this.containers = containers.map(con => {
-        return {
-          ...con,
-          displayName: this.i18n2t(`designer.widgetLabel.${con.type}`, `extension.widgetLabel.${con.type}`)
-        };
-      }).filter(con => {
-        return !con.internal && !this.isBanned(con.type) && this.getIsShow(con);
-      });
-
-      this.commonContainers = this.containers.filter(con => !!con.commonFlag && this.getIsShow(con));
-
-      this.basicFields = this.basicFields.map(fld => {
-        return {
-          ...fld,
-          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
-        };
-      }).filter(fld => {
-        return !this.isBanned(fld.type) && this.getIsShow(fld);
-      });
-
-      this.advancedFields = this.advancedFields.map(fld => {
-        return {
-          ...fld,
-          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
-        };
-      }).filter(fld => {
-        return !this.isBanned(fld.type) && this.getIsShow(fld);
-      });
-
-      this.businessFields = this.businessFields.map(fld => {
-        return {
-          ...fld,
-          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
-        };
-      }).filter(fld => {
-        return !this.isBanned(fld.type) && this.getIsShow(fld);
-      });
-
-      this.commonAdvancedFields = advancedFields.map(fld => {
-        return {
-          ...fld,
-          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
-        };
-      }).filter(fld => {
-        return !this.isBanned(fld.type) && !!fld.commonFlag && this.getIsShow(fld);
-      });
-
-      this.customFields = this.customFields.map(fld => {
-        return {
-          ...fld,
-          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
-        };
-      }).filter(fld => {
-        return !this.isBanned(fld.type) && this.getIsShow(fld);
-      });
-
-
-      this.chartContainers = this.chartContainers.map(con => {
-        return {
-          ...con,
-          displayName: this.i18n2t(`designer.widgetLabel.${con.type}`, `extension.widgetLabel.${con.type}`)
-        };
-      }).filter(con => {
-        return !con.internal && !this.isBanned(con.type) && this.getIsShow(con);
-      });
-
-      this.chartWidgets = this.chartWidgets.map(fld => {
-        return {
-          ...fld,
-          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
-        };
-      }).filter(fld => {
-        return !this.isBanned(fld.type) && this.getIsShow(fld);
-      });
-
-    },
-
-    handleContainerWidgetClone(origin) {
-      return this.designer.copyNewContainerWidget(origin);
-    },
-
-    handleFieldWidgetClone(origin) {
-      return this.designer.copyNewFieldWidget(origin);
-    },
-
-    checkContainerMove(evt) {
-      return this.designer.checkWidgetMove(evt);
-    },
-
-    checkFieldMove(evt) {
-      return this.designer.checkFieldMove(evt);
-    },
-
-    onContainerDragEnd(evt) {
-      //console.log('Drag end of container: ')
-      //console.log(evt)
-    },
-
-    addContainerByDbClick(container) {
-      this.designer.addContainerByDbClick(container);
-    },
-
-    addFieldByDbClick(widget) {
-      this.designer.addFieldByDbClick(widget);
-    },
-
-    loadFormTemplate(jsonUrl) {
-      this.$confirm(this.i18nt('designer.hint.loadFormTemplateHint'), this.i18nt('render.hint.prompt'), {
-        confirmButtonText: this.i18nt('render.hint.confirm'),
-        cancelButtonText: this.i18nt('render.hint.cancel')
-      }).then(() => {
-        baseRefUtil.axios.get(jsonUrl).then(res => {
-          let modifiedFlag = false;
-          if (typeof res.data === 'string') {
-            modifiedFlag = this.designer.loadFormJson(JSON.parse(res.data));
-          } else if (res.data.constructor === Object) {
-            modifiedFlag = this.designer.loadFormJson(res.data);
-          }
-          if (modifiedFlag) {
-            this.designer.emitHistoryChange();
-          }
-
-          this.$message.success(this.i18nt('designer.hint.loadFormTemplateSuccess'));
-        }).catch(error => {
-          this.$message.error(this.i18nt('designer.hint.loadFormTemplateFailed') + ':' + error);
-        })
-      }).catch(error => {
-        console.error(error);
-      });
-    },
-    setMetaFields(o) {
-      this.metaFields = o;
-    },
-    getIsShow(ftd) {
-      let layoutType = this.designer.getLayoutType()
-      let flag = !ftd.layoutType || ftd.layoutType === layoutType;
-      let flag2 = this.checkColumnFlag(ftd)
-      let flag3 = !!ftd.commonFlag
-      return flag && flag2 && flag3;
-    }
-  }
-};
-
-export default modules;
+import i18n from "../../../../components/xform/utils/i18n"
+import axios from "axios"
+import {
+  containers,
+  basicFields,
+  advancedFields,
+  customFields,
+  businessFields,
+  widgetPanelOrder
+} from "./widgetsConfig"
+import {
+  formTemplates
+} from './templatesConfig'
+import {
+  addWindowResizeHandler
+} from "../../../../components/xform/utils/util"
+
+let modules = {};
+const baseRefUtil = {
+  i18n,
+  axios,
+  containers,
+  basicFields,
+  advancedFields,
+  customFields,
+  formTemplates,
+  addWindowResizeHandler
+};
+
+modules = {
+  mixins: [baseRefUtil.i18n],
+  props: {
+    designer: Object,
+  },
+  inject: ['getBannedWidgets', 'getDesignerConfig'],
+  data() {
+    return {
+      designerConfig: this.getDesignerConfig(),
+      firstTab: 'componentLib',
+      scrollerHeight: 0,
+      activeNames: ['1', '2', '3', '4'],
+      metadataActiveNames: ["0", "1", "2", "3", "4"],
+
+      businessActiveNames:["0"],
+
+      containers: baseRefUtil.containers,
+      commonContainers: [],
+      basicFields: baseRefUtil.basicFields,
+      advancedFields: baseRefUtil.advancedFields,
+      customFields: baseRefUtil.customFields,
+      businessFields:businessFields,
+      commonAdvancedFields: [],
+      chartContainers: [],
+      chartWidgets: [],
+      metaFields: {
+        main: {
+          entityName: "",
+          entityLabel: "",
+          fieldList: [
+            {
+              type: "",
+              icon: "",
+              displayName: "",
+              options: {},
+            },
+          ],
+        },
+        detail: [
+          {
+            entityName: "",
+            entityLabel: "",
+            fieldList: [
+              {
+                type: "",
+                icon: "",
+                displayName: "",
+                options: {},
+              },
+            ],
+          },
+        ],
+      },
+      formTemplates: baseRefUtil.formTemplates,
+      // ftImages: [
+      //   {imgUrl: ftImg1},
+      //   {imgUrl: ftImg2},
+      //   {imgUrl: ftImg3},
+      //   {imgUrl: ftImg4},
+      //   {imgUrl: ftImg5},
+      //   {imgUrl: ftImg6},
+      //   {imgUrl: ftImg7},
+      //   {imgUrl: ftImg8},
+      // ]
+    }
+  },
+  computed: {
+    //
+    showComponentLib() {
+      return this.designerConfig.componentLib === void 0
+        ? !0
+        : !!this.designerConfig.componentLib;
+    },
+    showFormTemplates() {
+      return this.designerConfig.formTemplates === void 0
+        ? !0
+        : !!this.designerConfig.formTemplates;
+    },
+    showChartLib() {
+      return this.designerConfig.chartLib === void 0
+        ? !1
+        : !!this.designerConfig.chartLib;
+    },
+    showMetadataLib() {
+      return this.designerConfig.metadataLib === void 0
+        ? !1
+        : !!this.designerConfig.metadataLib;
+    },
+  },
+  mounted() {
+    this.designerConfig.chartLib && (this.firstTab = "chartLib"),
+    this.designerConfig.metadataLib && (this.firstTab = "metadataLib");
+    this.loadWidgets();
+
+    this.scrollerHeight = window.innerHeight - 85 + 'px';
+    this.winResizeUnbind = baseRefUtil.addWindowResizeHandler(() => {
+      this.$nextTick(() => {
+        this.scrollerHeight = window.innerHeight - 85 + 'px';
+        //console.log(this.scrollerHeight)
+      });
+    });
+  },
+  beforeDestroy() {
+    // window 级监听持有本实例，销毁时必须解绑，否则控件面板整树泄露
+    if (this.winResizeUnbind) {
+      this.winResizeUnbind();
+      this.winResizeUnbind = null;
+    }
+  },
+  methods: {
+    getMetaFieldLabel(o) {
+      const e = o.displayName;
+      return e.substring(e.indexOf(".") + 1, e.length);
+    },
+    getWidgetLabel(o) {
+      return o.alias
+        ? this.i18n2t(
+          `designer.widgetLabel.${o.alias}`,
+          `extension.widgetLabel.${o.alias}`
+        )
+        : this.i18n2t(
+          `designer.widgetLabel.${o.type}`,
+          `extension.widgetLabel.${o.type}`
+        );
+    },
+    isBanned(wName) {
+      return this.getBannedWidgets().indexOf(wName) > -1;
+    },
+
+    /*showFormTemplates() {
+      if (this.designerConfig['formTemplates'] === undefined) {
+        return true;
+      }
+
+      return !!this.designerConfig['formTemplates'];
+    },*/
+    checkColumnFlag(widget){
+      if(this.designer.vueInstance.columnFlag){
+        return widget.columnFlag;
+      }
+      return true
+    },
+    loadWidgets() {
+      this.containers = this.sortByPanelOrder(containers.map(con => {
+        return {
+          ...con,
+          displayName: this.i18n2t(`designer.widgetLabel.${con.type}`, `extension.widgetLabel.${con.type}`)
+        };
+      }).filter(con => {
+        return !con.internal && !this.isBanned(con.type) && this.getIsShow(con);
+      }), widgetPanelOrder.containers);
+
+      this.commonContainers = this.containers.filter(con => !!con.commonFlag && this.getIsShow(con));
+
+      this.basicFields = this.basicFields.map(fld => {
+        return {
+          ...fld,
+          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
+        };
+      }).filter(fld => {
+        return !this.isBanned(fld.type) && this.getIsShow(fld);
+      });
+
+      this.advancedFields = this.advancedFields.map(fld => {
+        return {
+          ...fld,
+          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
+        };
+      }).filter(fld => {
+        return !this.isBanned(fld.type) && this.getIsShow(fld);
+      });
+
+      /* 面板分组归一：表单数据字段（搜索框/自动完成/级联/凭证/状态等）展示在基础字段分组 */
+      const moveTypes = widgetPanelOrder.basicFromAdvanced || [];
+      const movedFields = this.advancedFields.filter(fld => moveTypes.indexOf(fld.type) > -1);
+      this.advancedFields = this.advancedFields.filter(fld => moveTypes.indexOf(fld.type) === -1);
+      this.basicFields = this.sortByPanelOrder(
+        this.basicFields.concat(movedFields),
+        widgetPanelOrder.basicFields
+      );
+      this.advancedFields = this.sortByPanelOrder(this.advancedFields, widgetPanelOrder.advancedFields);
+
+      this.businessFields = this.businessFields.map(fld => {
+        return {
+          ...fld,
+          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
+        };
+      }).filter(fld => {
+        /* deprecated: 已被表单设置取代的组件，面板下架但保留定义供老模板渲染 */
+        return !fld.deprecated && !this.isBanned(fld.type) && this.getIsShow(fld);
+      });
+
+      this.commonAdvancedFields = this.sortByPanelOrder(advancedFields.map(fld => {
+        return {
+          ...fld,
+          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
+        };
+      }).filter(fld => {
+        return !this.isBanned(fld.type) && !!fld.commonFlag && this.getIsShow(fld)
+          && moveTypes.indexOf(fld.type) === -1;
+      }), widgetPanelOrder.advancedFields);
+
+      this.customFields = this.customFields.map(fld => {
+        return {
+          ...fld,
+          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
+        };
+      }).filter(fld => {
+        return !this.isBanned(fld.type) && this.getIsShow(fld);
+      });
+
+
+      this.chartContainers = this.chartContainers.map(con => {
+        return {
+          ...con,
+          displayName: this.i18n2t(`designer.widgetLabel.${con.type}`, `extension.widgetLabel.${con.type}`)
+        };
+      }).filter(con => {
+        return !con.internal && !this.isBanned(con.type) && this.getIsShow(con);
+      });
+
+      this.chartWidgets = this.chartWidgets.map(fld => {
+        return {
+          ...fld,
+          displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
+        };
+      }).filter(fld => {
+        return !this.isBanned(fld.type) && this.getIsShow(fld);
+      });
+
+    },
+
+    /* 按 widgetPanelOrder 排序面板展示列表；未列出的类型（含扩展组件）排在末尾，保持原有相对顺序 */
+    sortByPanelOrder(list, orderList) {
+      if (!orderList || !orderList.length) {
+        return list;
+      }
+      const orderMap = {};
+      orderList.forEach((type, index) => {
+        orderMap[type] = index;
+      });
+      return list
+        .map((widget, index) => ({ widget, index }))
+        .sort((a, b) => {
+          const oa = orderMap[a.widget.type] !== undefined
+            ? orderMap[a.widget.type]
+            : orderList.length + a.index;
+          const ob = orderMap[b.widget.type] !== undefined
+            ? orderMap[b.widget.type]
+            : orderList.length + b.index;
+          return oa - ob;
+        })
+        .map(item => item.widget);
+    },
+
+    handleContainerWidgetClone(origin) {
+      return this.designer.copyNewContainerWidget(origin);
+    },
+
+    handleFieldWidgetClone(origin) {
+      return this.designer.copyNewFieldWidget(origin);
+    },
+
+    checkContainerMove(evt) {
+      return this.designer.checkWidgetMove(evt);
+    },
+
+    checkFieldMove(evt) {
+      return this.designer.checkFieldMove(evt);
+    },
+
+    onContainerDragEnd(evt) {
+      //console.log('Drag end of container: ')
+      //console.log(evt)
+    },
+
+    addContainerByDbClick(container) {
+      this.designer.addContainerByDbClick(container);
+    },
+
+    addFieldByDbClick(widget) {
+      this.designer.addFieldByDbClick(widget);
+    },
+
+    loadFormTemplate(jsonUrl) {
+      this.$confirm(this.i18nt('designer.hint.loadFormTemplateHint'), this.i18nt('render.hint.prompt'), {
+        confirmButtonText: this.i18nt('render.hint.confirm'),
+        cancelButtonText: this.i18nt('render.hint.cancel')
+      }).then(() => {
+        baseRefUtil.axios.get(jsonUrl).then(res => {
+          let modifiedFlag = false;
+          if (typeof res.data === 'string') {
+            modifiedFlag = this.designer.loadFormJson(JSON.parse(res.data));
+          } else if (res.data.constructor === Object) {
+            modifiedFlag = this.designer.loadFormJson(res.data);
+          }
+          if (modifiedFlag) {
+            this.designer.emitHistoryChange();
+          }
+
+          this.$message.success(this.i18nt('designer.hint.loadFormTemplateSuccess'));
+        }).catch(error => {
+          this.$message.error(this.i18nt('designer.hint.loadFormTemplateFailed') + ':' + error);
+        })
+      }).catch(error => {
+        console.error(error);
+      });
+    },
+    setMetaFields(o) {
+      this.metaFields = o;
+    },
+    getIsShow(ftd) {
+      let layoutType = this.designer.getLayoutType()
+      let flag = !ftd.layoutType || ftd.layoutType === layoutType;
+      let flag2 = this.checkColumnFlag(ftd)
+      let flag3 = !!ftd.commonFlag
+      return flag && flag2 && flag3;
+    }
+  }
+};
+
+export default modules;