cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

package/src/components/xform/form-designer/form-widget/container-widget/h5-card-widget.vue

@@ -1,136 +1,165 @@
-<template>
-  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
-                     :index-of-parent-list="indexOfParentList" :class="widget.options.isFullscreen ? 'full-height':''">
-    <div class="grid-container" :key="widget.id"
-         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
-      <h5CardPaneWidget v-for="(paneWidget, index) in widget.panes" :key="index" :widget="paneWidget"
-                        :designer="designer" :parent-list="widget.panes"
-                        :index-of-parent-list="index" :parent-widget="widget"
-                        :col-height="widget.options.colHeight" tabRef="baseTabRef"
-                        :tabPaneGrade="2"></h5CardPaneWidget>
-
-    </div>
-  </container-wrapper>
-</template>
-<script>
-
-import h5CardPaneWidget from "../../../../../components/xform/form-designer/form-widget/container-widget/h5-card-pane-widget.vue";
-import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper.vue";
-import i18n from "../../../../../components/xform/utils/i18n";
-import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
-import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign";
-
-export default {
-  name: "h5-card-widget",
-  componentName: 'ContainerWidget',
-  mixins: [i18n, containerMixin, refMixinDesign],
-  inject: ['refList'],
-  components: {ContainerWrapper, h5CardPaneWidget},
-  props: {
-    widget: Object,
-    parentWidget: Object,
-    parentList: Array,
-    indexOfParentList: Number,
-    designer: Object,
-  },
-  computed: {
-    selected() {
-      return this.widget.id === this.designer.selectedId
-    },
-
-    customClass() {
-      return this.widget.options.customClass || ''
-    },
-
-  },
-  watch: {
-    //
-  },
-  created() {
-    this.initRefList()
-  },
-  mounted() {
-    //
-  },
-  methods: {
-    checkContainerMove(evt) {
-      return true;
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.grid-container {
-  min-height: 50px;
-  //line-height: 48px;
-  //padding: 6px;
-  outline: 1px dashed #336699;
-
-  > div {
-    height: 100%;
-  }
-
-  .form-widget-list {
-    // min-height: 28px;
-    height: 100%;
-  }
-
-}
-
-.grid-container.selected, .grid-cell.selected {
-  outline: 2px solid $--color-primary !important;
-}
-
-.grid-cell {
-  min-height: 38px;
-  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
-  padding: 3px;
-  outline: 1px dashed #336699;
-  position: relative;
-
-  > div {
-    height: 100%;
-  }
-
-  .form-widget-list {
-    min-height: 50px;
-    height: 100%
-  }
-
-  .grid-col-action {
-    position: absolute;
-    bottom: 0;
-    right: -2px;
-    height: 28px;
-    line-height: 28px;
-    background: $--color-primary;
-    z-index: 999;
-
-    i {
-      font-size: 14px;
-      color: #fff;
-      margin: 0 5px;
-      cursor: pointer;
-    }
-  }
-
-  .grid-col-handler {
-    position: absolute;
-    top: -2px;
-    left: -2px;
-    height: 22px;
-    line-height: 22px;
-    background: $--color-primary;
-    z-index: 9;
-
-    i {
-      font-size: 14px;
-      font-style: normal;
-      color: #fff;
-      margin: 4px;
-      cursor: default;
-    }
-  }
-}
-
-</style>
+<template>
+  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
+                     :index-of-parent-list="indexOfParentList" :class="widget.options.isFullscreen ? 'full-height':''">
+    <div class="grid-container" :key="widget.id"
+         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
+      <!-- 常驻选中把手（设计器专用）。h5卡片自己的可点区域会被它的卡片选项卡整块铺满
+           —— 拖入「H5详情」时默认就带三个（基础信息/明细信息/附件信息，见 designer.js
+           的 detail-h5 分支），一落地就点不中，只能「先选中里面的选项卡、再点返回上级」
+           才能打开它的属性面板，而增删/改名/排序选项卡都在那个面板里。
+           container-wrapper 的 drag-handler 帮不上忙：它只在**已经选中之后**才出现。
+           运行期走 h5-card-item，不含本文件，故只影响设计器画布。 -->
+      <div class="h5-card-handler" @click.stop="selectWidget(widget)">
+        {{ i18n2t(`designer.widgetLabel.${widget.type}`, `extension.widgetLabel.${widget.type}`) }}
+      </div>
+      <h5CardPaneWidget v-for="(paneWidget, index) in widget.panes" :key="index" :widget="paneWidget"
+                        :designer="designer" :parent-list="widget.panes"
+                        :index-of-parent-list="index" :parent-widget="widget"
+                        :col-height="widget.options.colHeight" tabRef="baseTabRef"
+                        :tabPaneGrade="2"></h5CardPaneWidget>
+
+    </div>
+  </container-wrapper>
+</template>
+<script>
+
+import h5CardPaneWidget from "../../../../../components/xform/form-designer/form-widget/container-widget/h5-card-pane-widget.vue";
+import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper.vue";
+import i18n from "../../../../../components/xform/utils/i18n";
+import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
+import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign";
+
+export default {
+  name: "h5-card-widget",
+  componentName: 'ContainerWidget',
+  mixins: [i18n, containerMixin, refMixinDesign],
+  inject: ['refList'],
+  components: {ContainerWrapper, h5CardPaneWidget},
+  props: {
+    widget: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object,
+  },
+  computed: {
+    selected() {
+      return this.widget.id === this.designer.selectedId
+    },
+
+    customClass() {
+      return this.widget.options.customClass || ''
+    },
+
+  },
+  watch: {
+    //
+  },
+  created() {
+    this.initRefList()
+  },
+  mounted() {
+    //
+  },
+  methods: {
+    checkContainerMove(evt) {
+      return true;
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.grid-container {
+  min-height: 50px;
+  //line-height: 48px;
+  /* 侧边与底部留一圈属于卡片自己的可点区域，和顶上的把手一起圈出它的边界 */
+  padding: 0 6px 6px;
+  outline: 1px dashed #336699;
+
+  > div {
+    height: 100%;
+  }
+
+  .form-widget-list {
+    // min-height: 28px;
+    height: 100%;
+  }
+
+}
+
+.grid-container.selected, .grid-cell.selected {
+  outline: 2px solid $--color-primary !important;
+}
+
+/* 把手条。★ 必须显式给高度：上面那条 `.grid-container > div{height:100%}` (0,1,1)
+   会把所有直接子元素拉满，本条 (0,2,0) 压得过。
+   负的左右外边距把它顶回容器的 6px 内边距之外，与虚线框贴齐。 */
+.grid-container > .h5-card-handler {
+  height: 20px;
+  line-height: 20px;
+  margin: 0 -6px 6px;
+  padding: 0 6px;
+  font-size: 12px;
+  color: $--color-primary;
+  background: transparentize($--color-primary, 0.88);
+  cursor: pointer;
+}
+
+.grid-container.selected > .h5-card-handler {
+  color: #fff;
+  background: $--color-primary;
+}
+
+.grid-cell {
+  min-height: 38px;
+  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
+  padding: 3px;
+  outline: 1px dashed #336699;
+  position: relative;
+
+  > div {
+    height: 100%;
+  }
+
+  .form-widget-list {
+    min-height: 50px;
+    height: 100%
+  }
+
+  .grid-col-action {
+    position: absolute;
+    bottom: 0;
+    right: -2px;
+    height: 28px;
+    line-height: 28px;
+    background: $--color-primary;
+    z-index: 999;
+
+    i {
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: pointer;
+    }
+  }
+
+  .grid-col-handler {
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    height: 22px;
+    line-height: 22px;
+    background: $--color-primary;
+    z-index: 9;
+
+    i {
+      font-size: 14px;
+      font-style: normal;
+      color: #fff;
+      margin: 4px;
+      cursor: default;
+    }
+  }
+}
+
+</style>

package/src/components/xform/form-designer/form-widget/dialog/formDialog.vue

@@ -1,8 +1,14 @@
 <template>
   <el-dialog
+    ref="pageDialog"
     :visible.sync="showDialog"
     v-el-drag-dialog
-    v-el-dialog-center
+    v-el-dialog-center="!isPageScope"
+    :class="{
+      'xform-page-dialog-wrapper': isPageScope,
+      'xform-page-form-dialog-wrapper': isPageScope,
+      'xform-page-dialog-wrapper--top': pageDialogHasTop,
+    }"
     v-bind="dialogConfig"
     @close="close"
   >
@@ -13,7 +19,11 @@
       v-bind="bodyConfig"
       v-if="listHost"
     >
-      <list-view-host :formCode="listFormCode" :param="dialogParam" />
+      <list-view-host
+        :formCode="listFormCode"
+        :param="dialogParam"
+        :dialogScope="option.dialogScope"
+      />
     </div>
     <div class="cont designer-view" v-bind="bodyConfig" id="containt" v-else>
       <v-form-render
@@ -30,6 +40,7 @@
         @reload="reload"
         v-bind="formConfig"
         :param="dialogParam"
+        :dialogScope="option.dialogScope"
         :dataTableOption="dialogDataTableOption"
         class="data-table_height"
         @hook:mounted="handleFormMounted"
@@ -75,6 +86,10 @@
 
 <script>
 import VFormRender from "../../../../../components/xform/form-render/index.vue";
+import {
+  pageScopedDialogMixin,
+  pageDialogTop,
+} from "@base/components/xform/form-render/pageDialogScope";
 import {
   resolveActionButtons,
   hasButtonPermission,
@@ -95,7 +110,7 @@ export default {
     visiable: Boolean,
     option: Object,
   },
-  mixins: [],
+  mixins: [pageScopedDialogMixin],
   inject: ["getFormConfig"],
 
   mounted() {},
@@ -171,6 +186,15 @@ export default {
       config = Object.assign({}, config, this.option.dialogConfig, {
         customClass,
       });
+      if (this.isPageScope) {
+        Object.assign(config, {
+          appendToBody: false,
+          modalAppendToBody: false,
+          modal: false,
+          lockScroll: false,
+          top: pageDialogTop(this.option.dialogConfig?.top),
+        });
+      }
       config.title = this.$t1(config.title);
       return config;
     },
@@ -236,7 +260,9 @@ export default {
         method: `post`,
         data: data,
         isLoading: true,
-        loadingTarget: document.body,
+        loadingTarget: this.isPageScope
+          ? this.option.pageDialogHost
+          : document.body,
         modalStrictly: true,
         success: (res) => {
           let formTemplate = res.objx || {};