cloud-web-corejs 1.0.276 → 1.0.278

package/src/components/xform/form-designer/form-widget/index.vue

@@ -98,8 +98,13 @@ export default {
     }
 
     .form-widget-list {
-      min-height: calc(100vh - 98px);
+      min-height: calc(100vh - var(--xform-designer-body-offset, 98px));
       padding: 3px;
+      // 明细区高度默认关闭：--xform-designer-detail-height 未设置时回退为 revert(等同不写该规则)
+      // 目标项目在自己的 :root 覆盖，如 --xform-designer-detail-height: calc(100vh - 200px)
+      ::v-deep .detail-wrap .d-cont {
+        height: var(--xform-designer-detail-height, revert) !important;
+      }
     }
   }
 

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

@@ -1,12 +1,12 @@
-import i18n from '../../../../components/xform/utils/i18n';
+import i18n from "../../../../components/xform/utils/i18n";
 
 let modules = {};
 const baseRefUtil = {
-  i18n
+  i18n,
 };
 
 modules = {
-  componentName: 'VFormWidget',
+  componentName: "VFormWidget",
   mixins: [baseRefUtil.i18n],
   props: {
     designer: Object,
@@ -15,14 +15,14 @@ modules = {
       type: Object,
       default: function () {
         return {};
-      }
+      },
     },
     globalDsv: {
       type: Object,
       default: function () {
         return {};
-      }
-    }
+      },
+    },
   },
   provide() {
     var e = this;
@@ -42,32 +42,35 @@ modules = {
         return !1;
       },
       globalModel: {
-        formModel: this.formModel
+        formModel: this.formModel,
       },
       getSubFormFieldFlag: function () {
         return !1;
       },
       getSubFormName: function () {
-        return '';
+        return "";
       },
       getObjectFieldFlag: () => !1,
       getObjectName: () => "",
     };
   },
-  inject: ['getDesignerConfig'],
+  inject: ["getDesignerConfig"],
   data() {
     return {
       formModel: {},
-      widgetRefList: {}
+      widgetRefList: {},
     };
   },
   computed: {
     labelPosition() {
-      if (!!this.designer.formConfig && !!this.designer.formConfig.labelPosition) {
+      if (
+        !!this.designer.formConfig &&
+        !!this.designer.formConfig.labelPosition
+      ) {
         return this.designer.formConfig.labelPosition;
       }
 
-      return 'left';
+      return "left";
     },
 
     size() {
@@ -75,31 +78,31 @@ modules = {
         return this.designer.formConfig.size;
       }
 
-      return 'medium';
+      return "medium";
     },
 
     customClass() {
-      return this.designer.formConfig.customClass || '';
+      return this.designer.formConfig.customClass || "";
     },
 
     layoutType() {
       return this.designer.getLayoutType();
-    }
+    },
   },
   watch: {
-    'designer.widgetList': {
+    "designer.widgetList": {
       deep: true,
       handler(val) {
         //
-      }
+      },
     },
 
-    'designer.formConfig': {
+    "designer.formConfig": {
       deep: true,
       handler(val) {
         //
-      }
-    }
+      },
+    },
   },
   created() {
     this.designer.initDesigner(!!this.getDesignerConfig().resetFormJson);
@@ -111,11 +114,12 @@ modules = {
   },
   methods: {
     getWidgetName(widget) {
-      return (widget.targetType || widget.type) + '-widget';
+      return (widget.targetType || widget.type) + "-widget";
     },
 
     disableFirefoxDefaultDrop() {
-      let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
+      let isFirefox =
+        navigator.userAgent.toLowerCase().indexOf("firefox") !== -1;
       if (isFirefox) {
         document.body.ondrop = function (event) {
           event.stopPropagation();
@@ -135,7 +139,7 @@ modules = {
       }
 
       this.designer.emitHistoryChange();
-      this.designer.emitEvent('field-selected', null);
+      this.designer.emitEvent("field-selected", null);
     },
 
     onDragUpdate() {
@@ -154,7 +158,7 @@ modules = {
     getWidgetRef(widgetName, showError = false) {
       let foundRef = this.widgetRefList[widgetName];
       if (!foundRef && !!showError) {
-        this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName);
+        this.$message.error(this.i18nt("render.hint.refNotFound") + widgetName);
       }
       return foundRef;
     },
@@ -177,7 +181,7 @@ modules = {
         delete this.widgetRefList[e];
       });
     },
-  }
+  },
 };
 
 export default modules;

package/src/components/xform/form-designer/index.vue

@@ -1,191 +1,194 @@
-<!--
-/**
- * author: vformAdmin
- * email: vdpadmin@163.com
- * website: https://www.vform666.com
- * date: 2021.08.18
- * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
- */
--->
-
-<template>
-  <el-container class="main-container full-height">
-    <!-- <el-header class="main-header">
-      <div class="float-left main-title">
-        <img src="../../assets/vform-logo.png" @click="openHome">
-        <span class="bold">VForm</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span></div>
-      <div class="float-right external-link">
-        <el-dropdown v-if="showLink('languageMenu')" :hide-timeout="2000" @command="handleLanguageChanged">
-          <span class="el-dropdown-link">{{curLangName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="zh-CN">{{i18nt('application.zh-CN')}}</el-dropdown-item>
-            <el-dropdown-item command="en-US">{{i18nt('application.en-US')}}</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-        <a v-if="showLink('externalLink')" href="javascript:void(0)" @click="(ev) => openUrl(ev, gitUrl)" target="_blank"><svg-icon icon-class="github" />{{i18nt('application.github')}}</a>
-        <a v-if="showLink('externalLink')" href="javascript:void(0)" @click="(ev) => openUrl(ev, docUrl)" target="_blank"><svg-icon icon-class="document" />{{i18nt('application.document')}}</a>
-        <a v-if="showLink('externalLink')" href="javascript:void(0)" @click="(ev) => openUrl(ev, chatUrl)" target="_blank">{{i18nt('application.qqGroup')}}</a>
-        <a v-if="showLink('externalLink')" href="javascript:void(0)" @click="(ev) => openUrl(ev, subScribeUrl)" target="_blank">
-          {{i18nt('application.subscription')}}<i class="el-icon-top-right"></i></a>
-      </div>
-    </el-header> -->
-
-    <el-container>
-      <el-aside class="side-panel attribute-right">
-        <widget-panel ref="widgetPanelRef" :designer="designer"/>
-      </el-aside>
-
-      <el-container class="center-layout-container">
-        <el-header class="toolbar-header">
-          <toolbar-panel :designer="designer" ref="toolbarRef" @loadWidgets="loadWidgets">
-            <template v-for="(idx, slotName) in $slots" #[slotName]>
-              <slot :name="slotName"></slot>
-            </template>
-          </toolbar-panel>
-        </el-header>
-        <el-main class="form-widget-main">
-          <el-scrollbar class="container-scroll-bar" style="height:calc(100vh - 125px)">
-            <v-form-widget :designer="designer" :form-config="designer.formConfig" ref="formRef"></v-form-widget>
-          </el-scrollbar>
-        </el-main>
-      </el-container>
-
-      <el-aside class="attribute-right">
-        <setting-panel :designer="designer" :selected-widget="designer.selectedWidget"
-                       :form-config="designer.formConfig" ref="formSettingRef"/>
-      </el-aside>
-    </el-container>
-    <preformDialog v-if="showPreformDialog" :visiable.sync="showPreformDialog"
-                   @confirm="confirmPreformDialog"></preformDialog>
-  </el-container>
-</template>
-
-<script>
-
-import WidgetPanel from './widget-panel/index';
-import ToolbarPanel from './toolbar-panel/index';
-import SettingPanel from './setting-panel/index';
-import VFormWidget from './form-widget/index';
-import indexMixin from '../../../components/xform/form-designer/indexMixin';
-import preformDialog from "../../../components/xform/form-designer/form-widget/dialog/preformDialog.vue";
-
-export default {
-  name: 'VFormDesigner',
-  components: {
-    preformDialog,
-    WidgetPanel,
-    ToolbarPanel,
-    SettingPanel,
-    VFormWidget
-  },
-  mixins: [indexMixin],
-};
-</script>
-
-<style lang="scss" scoped>
-.el-aside {
-  font-family: inherit !important;
-}
-
-.el-container.main-container {
-  background: #fff;
-
-  ::v-deep aside {
-    /* 防止aside样式被外部样式覆盖！！ */
-    margin: 0;
-    padding: 0;
-    background: inherit;
-  }
-}
-
-.el-container.full-height {
-  height: 100%;
-  overflow-y: hidden;
-}
-
-.el-container.center-layout-container {
-  min-width: 680px;
-  border-left: 2px dotted #ebeef5;
-  border-right: 2px dotted #ebeef5;
-}
-
-.el-header.main-header {
-  border-bottom: 2px dotted #ebeef5;
-  height: 48px !important;
-  line-height: 48px !important;
-  min-width: 800px;
-}
-
-div.main-title {
-  font-size: 18px;
-  color: #242424;
-  display: flex;
-  align-items: center;
-  justify-items: center;
-
-  img {
-    cursor: pointer;
-    width: 36px;
-    height: 36px;
-  }
-
-  span.bold {
-    font-size: 20px;
-    font-weight: bold;
-    margin: 0 6px 0 6px;
-  }
-
-  span.version-span {
-    font-size: 14px;
-    color: #101f1c;
-    margin-left: 6px;
-  }
-}
-
-.float-left {
-  float: left;
-}
-
-.float-right {
-  float: right;
-}
-
-.el-dropdown-link {
-  margin-right: 12px;
-  cursor: pointer;
-}
-
-div.external-link a {
-  font-size: 13px;
-  text-decoration: none;
-  margin-right: 10px;
-  color: #606266;
-}
-
-.el-header.toolbar-header {
-  font-size: 12px;
-  border-bottom: 2px dotted #ebeef5;
-  height: 40px !important;
-  line-height: 38px;
-  //line-height: 42px !important;
-}
-
-.el-aside.side-panel {
-  width: 260px !important;
-  overflow-y: hidden;
-}
-
-.el-main.form-widget-main {
-  padding: 0;
-
-  position: relative;
-  overflow-x: hidden;
-}
-
-.container-scroll-bar {
-  ::v-deep .el-scrollbar__wrap,
-  ::v-deep .el-scrollbar__view {
-    overflow-x: hidden;
-  }
-}
-</style>
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: https://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <el-container class="main-container full-height">
+    <!-- <el-header class="main-header">
+      <div class="float-left main-title">
+        <img src="../../assets/vform-logo.png" @click="openHome">
+        <span class="bold">VForm</span> {{i18nt('application.productTitle')}} <span class="version-span">Ver {{vFormVersion}}</span></div>
+      <div class="float-right external-link">
+        <el-dropdown v-if="showLink('languageMenu')" :hide-timeout="2000" @command="handleLanguageChanged">
+          <span class="el-dropdown-link">{{curLangName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="zh-CN">{{i18nt('application.zh-CN')}}</el-dropdown-item>
+            <el-dropdown-item command="en-US">{{i18nt('application.en-US')}}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+        <a v-if="showLink('externalLink')" href="javascript:void(0)" @click="(ev) => openUrl(ev, gitUrl)" target="_blank"><svg-icon icon-class="github" />{{i18nt('application.github')}}</a>
+        <a v-if="showLink('externalLink')" href="javascript:void(0)" @click="(ev) => openUrl(ev, docUrl)" target="_blank"><svg-icon icon-class="document" />{{i18nt('application.document')}}</a>
+        <a v-if="showLink('externalLink')" href="javascript:void(0)" @click="(ev) => openUrl(ev, chatUrl)" target="_blank">{{i18nt('application.qqGroup')}}</a>
+        <a v-if="showLink('externalLink')" href="javascript:void(0)" @click="(ev) => openUrl(ev, subScribeUrl)" target="_blank">
+          {{i18nt('application.subscription')}}<i class="el-icon-top-right"></i></a>
+      </div>
+    </el-header> -->
+
+    <el-container>
+      <el-aside class="side-panel attribute-right">
+        <widget-panel ref="widgetPanelRef" :designer="designer"/>
+      </el-aside>
+
+      <el-container class="center-layout-container">
+        <el-header class="toolbar-header">
+          <toolbar-panel :designer="designer" ref="toolbarRef" @loadWidgets="loadWidgets">
+            <template v-for="(idx, slotName) in $slots" #[slotName]>
+              <slot :name="slotName"></slot>
+            </template>
+          </toolbar-panel>
+        </el-header>
+        <el-main class="form-widget-main">
+          <el-scrollbar class="container-scroll-bar" style="height:100%">
+            <v-form-widget :designer="designer" :form-config="designer.formConfig" ref="formRef"></v-form-widget>
+          </el-scrollbar>
+        </el-main>
+      </el-container>
+
+      <el-aside class="attribute-right">
+        <setting-panel :designer="designer" :selected-widget="designer.selectedWidget"
+                       :form-config="designer.formConfig" ref="formSettingRef"/>
+      </el-aside>
+    </el-container>
+    <preformDialog v-if="showPreformDialog" :visiable.sync="showPreformDialog"
+                   @confirm="confirmPreformDialog"></preformDialog>
+  </el-container>
+</template>
+
+<script>
+
+import WidgetPanel from './widget-panel/index';
+import ToolbarPanel from './toolbar-panel/index';
+import SettingPanel from './setting-panel/index';
+import VFormWidget from './form-widget/index';
+import indexMixin from '../../../components/xform/form-designer/indexMixin';
+import preformDialog from "../../../components/xform/form-designer/form-widget/dialog/preformDialog.vue";
+
+export default {
+  name: 'VFormDesigner',
+  components: {
+    preformDialog,
+    WidgetPanel,
+    ToolbarPanel,
+    SettingPanel,
+    VFormWidget
+  },
+  mixins: [indexMixin],
+};
+</script>
+
+<style lang="scss" scoped>
+.el-aside {
+  font-family: inherit !important;
+}
+//.xform-designer-scroll{height:100%}
+.xform-designer-scroll {
+  height: calc(100vh - var(--xform-designer-scroll-offset, 125px));
+}
+
+.el-container.main-container {
+  background: #fff;
+
+  ::v-deep aside {
+    /* 防止aside样式被外部样式覆盖！！ */
+    margin: 0;
+    padding: 0;
+    background: inherit;
+  }
+}
+
+.el-container.full-height {
+  height: 100%;
+  overflow-y: hidden;
+}
+
+.el-container.center-layout-container {
+  min-width: 680px;
+  border-left: 2px dotted #ebeef5;
+  border-right: 2px dotted #ebeef5;
+}
+
+.el-header.main-header {
+  border-bottom: 2px dotted #ebeef5;
+  height: 48px !important;
+  line-height: 48px !important;
+  min-width: 800px;
+}
+
+div.main-title {
+  font-size: 18px;
+  color: #242424;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+
+  img {
+    cursor: pointer;
+    width: 36px;
+    height: 36px;
+  }
+
+  span.bold {
+    font-size: 20px;
+    font-weight: bold;
+    margin: 0 6px 0 6px;
+  }
+
+  span.version-span {
+    font-size: 14px;
+    color: #101f1c;
+    margin-left: 6px;
+  }
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.el-dropdown-link {
+  margin-right: 12px;
+  cursor: pointer;
+}
+
+div.external-link a {
+  font-size: 13px;
+  text-decoration: none;
+  margin-right: 10px;
+  color: #606266;
+}
+
+.el-header.toolbar-header {
+  font-size: 12px;
+  border-bottom: 2px dotted #ebeef5;
+  height: 40px !important;
+  line-height: 38px;
+  //line-height: 42px !important;
+}
+
+.el-aside.side-panel {
+  overflow-y: hidden;
+}
+
+.el-main.form-widget-main {
+  padding: 0;
+
+  position: relative;
+  overflow-x: hidden;
+}
+
+.container-scroll-bar {
+  ::v-deep .el-scrollbar__wrap,
+  ::v-deep .el-scrollbar__view {
+    overflow-x: hidden;
+  }
+}
+</style>