cloud-web-corejs 1.0.284 → 1.0.286

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

@@ -1,227 +1,243 @@
-<!--
-/**
- * author: vformAdmin
- * email: vdpadmin@163.com
- * website: https://www.vform666.com
- * date: 2021.08.18
- * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
- */
--->
-
-<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="h5-detail-wrap grid-container" :key="widget.id"
-         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
-      <div class="h5-header">{{ widget.options.label }}</div>
-<!--      <div class="h5-tab-nav">
-        <div class="item on"><b>基本信息</b></div>
-        <div class="item"><b>基本信息</b></div>
-        <div class="item"><b>基本信息</b></div>
-      </div>-->
-<!--      <detail-pane-widget 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"></detail-pane-widget>
-      -->
-      <div>
-        <draggable
-          :list="widget.panes"
-          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
-          handle=".drag-handler"
-          @add="evt => onContainerDragAdd(evt, widget.panes)"
-          @update="onContainerDragUpdate"
-          :move="checkContainerMove"
-        >
-          <transition-group name="fade" tag="div" class="form-widget-list">
-            <template v-for="(subWidget, swIdx) in widget.panes">
-              <template v-if="'container' === subWidget.category">
-                <component
-                  :is="subWidget.type + '-widget'"
-                  :widget="subWidget"
-                  :designer="designer"
-                  :key="subWidget.id"
-                  :parent-list="widget.panes"
-                  :index-of-parent-list="swIdx"
-                  :parent-widget="widget"
-                ></component>
-              </template>
-              <template v-else>
-                <component
-                  :is="subWidget.type + '-widget'"
-                  :field="subWidget"
-                  :designer="designer"
-                  :key="subWidget.id"
-                  :parent-list="widget.panes"
-                  :index-of-parent-list="swIdx"
-                  :parent-widget="widget"
-                  :design-state="true"
-                ></component>
-              </template>
-            </template>
-          </transition-group>
-        </draggable>
-      </div>
-
-      <div class="h5-fixed-bottom-btns " >
-      <div class="grid-cell" :class="[selected ? 'selected' : '', customClass]" :key="widget.id" @click.stop="selectWidget(widget)" :visible="!widget.options.hidden">
-          <draggable
-            :list="widget.widgetList"
-            v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
-            handle=".drag-handler"
-            @add="evt => onContainerDragAdd(evt, widget.widgetList)"
-            @update="onContainerDragUpdate"
-            :move="checkContainerMove"
-          >
-            <transition-group name="fade" tag="div" class="form-widget-list">
-              <template v-for="(subWidget, swIdx) in widget.widgetList">
-                <template v-if="'container' === subWidget.category">
-                  <component
-                    :is="subWidget.type + '-widget'"
-                    :widget="subWidget"
-                    :designer="designer"
-                    :key="subWidget.id"
-                    :parent-list="widget.widgetList"
-                    :index-of-parent-list="swIdx"
-                    :parent-widget="widget"
-                  ></component>
-                </template>
-                <template v-else>
-                  <component
-                    :is="subWidget.type + '-widget'"
-                    :field="subWidget"
-                    :designer="designer"
-                    :key="subWidget.id"
-                    :parent-list="widget.widgetList"
-                    :index-of-parent-list="swIdx"
-                    :parent-widget="widget"
-                    :design-state="true"
-                  ></component>
-                </template>
-              </template>
-            </transition-group>
-          </draggable>
-        </div>
-      </div>
-    </div>
-  </container-wrapper>
-</template>
-
-<script>
-  import i18n from "../../../../../components/xform/utils/i18n"
-  import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin"
-  import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper"
-  import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign"
-  import Draggable from 'vuedraggable'
-  import FieldComponents from "../../../../../components/xform/form-designer/form-widget/field-widget";
-
-  export default {
-    name: "detail-h5-widget",
-    componentName: 'ContainerWidget',
-    mixins: [i18n, containerMixin, refMixinDesign],
-    inject: ['refList'],
-    components: {
-      ContainerWrapper,
-      Draggable,
-      ...FieldComponents,
-    },
-    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>
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: https://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<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="h5-detail-wrap grid-container" :key="widget.id"
+         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
+      <div class="h5-header">{{ widget.options.label }}</div>
+<!--      <div class="h5-tab-nav">
+        <div class="item on"><b>基本信息</b></div>
+        <div class="item"><b>基本信息</b></div>
+        <div class="item"><b>基本信息</b></div>
+      </div>-->
+<!--      <detail-pane-widget 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"></detail-pane-widget>
+      -->
+      <!-- 投放区说明（设计器画布常驻）。H5详情有两个投放区：这里收 panes（内容区，
+           装 h5卡片），下面 .h5-fixed-bottom-btns 收 widgetList（底部动作栏按钮）。
+           空框长得一样，不写清楚分不出哪个是哪个。同款见 h5-card-pane-widget。 -->
+      <div class="h5-area">
+        <span class="h5-area-hint">{{ i18nt('designer.hint.h5DetailContentArea') }}</span>
+        <draggable
+          :list="widget.panes"
+          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
+          handle=".drag-handler"
+          @add="evt => onContainerDragAdd(evt, widget.panes)"
+          @update="onContainerDragUpdate"
+          :move="checkContainerMove"
+        >
+          <transition-group name="fade" tag="div" class="form-widget-list">
+            <template v-for="(subWidget, swIdx) in widget.panes">
+              <template v-if="'container' === subWidget.category">
+                <component
+                  :is="subWidget.type + '-widget'"
+                  :widget="subWidget"
+                  :designer="designer"
+                  :key="subWidget.id"
+                  :parent-list="widget.panes"
+                  :index-of-parent-list="swIdx"
+                  :parent-widget="widget"
+                ></component>
+              </template>
+              <template v-else>
+                <component
+                  :is="subWidget.type + '-widget'"
+                  :field="subWidget"
+                  :designer="designer"
+                  :key="subWidget.id"
+                  :parent-list="widget.panes"
+                  :index-of-parent-list="swIdx"
+                  :parent-widget="widget"
+                  :design-state="true"
+                ></component>
+              </template>
+            </template>
+          </transition-group>
+        </draggable>
+      </div>
+
+      <div class="h5-fixed-bottom-btns " >
+      <div class="grid-cell h5-area" :class="[selected ? 'selected' : '', customClass]" :key="widget.id" @click.stop="selectWidget(widget)" :visible="!widget.options.hidden">
+          <span class="h5-area-hint">{{ i18nt('designer.hint.h5DetailBottomArea') }}</span>
+          <draggable
+            :list="widget.widgetList"
+            v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
+            handle=".drag-handler"
+            @add="evt => onContainerDragAdd(evt, widget.widgetList)"
+            @update="onContainerDragUpdate"
+            :move="checkContainerMove"
+          >
+            <transition-group name="fade" tag="div" class="form-widget-list">
+              <template v-for="(subWidget, swIdx) in widget.widgetList">
+                <template v-if="'container' === subWidget.category">
+                  <component
+                    :is="subWidget.type + '-widget'"
+                    :widget="subWidget"
+                    :designer="designer"
+                    :key="subWidget.id"
+                    :parent-list="widget.widgetList"
+                    :index-of-parent-list="swIdx"
+                    :parent-widget="widget"
+                  ></component>
+                </template>
+                <template v-else>
+                  <component
+                    :is="subWidget.type + '-widget'"
+                    :field="subWidget"
+                    :designer="designer"
+                    :key="subWidget.id"
+                    :parent-list="widget.widgetList"
+                    :index-of-parent-list="swIdx"
+                    :parent-widget="widget"
+                    :design-state="true"
+                  ></component>
+                </template>
+              </template>
+            </transition-group>
+          </draggable>
+        </div>
+      </div>
+    </div>
+  </container-wrapper>
+</template>
+
+<script>
+  import i18n from "../../../../../components/xform/utils/i18n"
+  import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin"
+  import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper"
+  import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign"
+  import Draggable from 'vuedraggable'
+  import FieldComponents from "../../../../../components/xform/form-designer/form-widget/field-widget";
+
+  export default {
+    name: "detail-h5-widget",
+    componentName: 'ContainerWidget',
+    mixins: [i18n, containerMixin, refMixinDesign],
+    inject: ['refList'],
+    components: {
+      ContainerWrapper,
+      Draggable,
+      ...FieldComponents,
+    },
+    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>
+  /* 两个投放区的说明文字，与 h5-card-pane-widget 同款：走文档流排在各自那个
+     虚线投放框的正上方，归属一眼对得上；不盖住已有组件，也不挡拖放。 */
+  .h5-area > .h5-area-hint {
+    display: block;
+    font-size: 12px;
+    line-height: 16px;
+    color: #a8abb2;
+    pointer-events: none;
+    white-space: nowrap;
+  }
+
+  .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>