cloud-web-corejs 1.0.284 → 1.0.285

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

@@ -1,207 +1,228 @@
-<template>
-  <div class="grid-cell" ref="baseTabRef"
-       :class="[selected ? 'selected' : '', customClass]"
-       :key="widget.id" @click.stop="selectWidget(widget)" :visible="!widget.options.hidden">
-    <div class="h5-item">
-      <div class="h5-title">
-        <b>{{ widget.options.label }}</b>
-        <div class="grid-cell">
-          <draggable
-            :list="widget.buttonWidgetList"
-            v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
-            handle=".drag-handler"
-            @add="evt => onContainerDragAdd(evt, widget.buttonWidgetList)"
-            @update="onContainerDragUpdate"
-            :move="checkContainerMove"
-          >
-            <transition-group name="fade" tag="div" class="form-widget-list">
-              <template v-for="(subWidget, swIdx) in widget.buttonWidgetList">
-                <template v-if="'container' === subWidget.category">
-                  <component
-                    :is="subWidget.type + '-widget'"
-                    :widget="subWidget"
-                    :designer="designer"
-                    :key="subWidget.id"
-                    :parent-list="widget.buttonWidgetList"
-                    :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.buttonWidgetList"
-                    :index-of-parent-list="swIdx"
-                    :parent-widget="widget"
-                    :design-state="true"
-                  ></component>
-                </template>
-              </template>
-            </transition-group>
-          </draggable>
-        </div>
-      </div>
-      <div class="h5-form-box">
-        <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 class="grid-col-action" v-if="designer.selectedId === widget.id && widget.type === 'h5-card-pane'">
-      <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
-         @click.stop="selectParentWidget(widget)"></i>
-      <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
-         @click.stop="moveUpWidget()"></i>
-      <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)"
-         :title="i18nt('designer.hint.moveDownWidget')"
-         @click.stop="moveDownWidget()"></i>
-      <i class="el-icon-copy-document" :title="i18nt('designer.hint.cloneWidget')"
-         @click.stop="designer.cloneH5CardPanePane(widget,parentWidget)"></i>
-      <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>
-    </div>
-    <div class="grid-col-handler" v-if="designer.selectedId === widget.id && widget.type === 'h5-card-pane'">
-      <i>{{ i18nt('designer.widgetLabel.' + widget.type) }}</i>
-    </div>
-  </div>
-</template>
-
-<script>
-import Draggable from 'vuedraggable'
-import i18n from "../../../../../components/xform/utils/i18n";
-import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign"
-import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
-import FieldComponents from "../../../../../components/xform/form-designer/form-widget/field-widget";
-
-export default {
-  name: "h5-card-pane-widget",
-  componentName: "ContainerWidget",
-  mixins: [i18n, containerMixin, refMixinDesign],
-  inject: ['refList'],
-  components: {
-    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-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%;
-    outline: 1px dashed #336699;
-  }
-
-  .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>
+  <div class="grid-cell" ref="baseTabRef"
+       :class="[selected ? 'selected' : '', customClass]"
+       :key="widget.id" @click.stop="selectWidget(widget)" :visible="!widget.options.hidden">
+    <div class="h5-item">
+      <div class="h5-title">
+        <b>{{ widget.options.label }}</b>
+        <!-- 投放区说明（设计器画布常驻）。标题栏这个格子收的是 buttonWidgetList，
+             下面 .h5-form-box 那个收的是 widgetList，两个空框长得一模一样、
+             不写清楚分不出哪个该放按钮。pointer-events:none 让它不挡拖放。 -->
+        <div class="grid-cell h5-area">
+          <span class="h5-area-hint">{{ i18nt('designer.hint.h5PaneButtonArea') }}</span>
+          <draggable
+            :list="widget.buttonWidgetList"
+            v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
+            handle=".drag-handler"
+            @add="evt => onContainerDragAdd(evt, widget.buttonWidgetList)"
+            @update="onContainerDragUpdate"
+            :move="checkContainerMove"
+          >
+            <transition-group name="fade" tag="div" class="form-widget-list">
+              <template v-for="(subWidget, swIdx) in widget.buttonWidgetList">
+                <template v-if="'container' === subWidget.category">
+                  <component
+                    :is="subWidget.type + '-widget'"
+                    :widget="subWidget"
+                    :designer="designer"
+                    :key="subWidget.id"
+                    :parent-list="widget.buttonWidgetList"
+                    :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.buttonWidgetList"
+                    :index-of-parent-list="swIdx"
+                    :parent-widget="widget"
+                    :design-state="true"
+                  ></component>
+                </template>
+              </template>
+            </transition-group>
+          </draggable>
+        </div>
+      </div>
+      <div class="h5-form-box h5-area">
+        <span class="h5-area-hint">{{ i18nt('designer.hint.h5PaneFieldArea') }}</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 class="grid-col-action" v-if="designer.selectedId === widget.id && widget.type === 'h5-card-pane'">
+      <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
+         @click.stop="selectParentWidget(widget)"></i>
+      <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
+         @click.stop="moveUpWidget()"></i>
+      <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)"
+         :title="i18nt('designer.hint.moveDownWidget')"
+         @click.stop="moveDownWidget()"></i>
+      <i class="el-icon-copy-document" :title="i18nt('designer.hint.cloneWidget')"
+         @click.stop="designer.cloneH5CardPanePane(widget,parentWidget)"></i>
+      <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>
+    </div>
+    <div class="grid-col-handler" v-if="designer.selectedId === widget.id && widget.type === 'h5-card-pane'">
+      <i>{{ i18nt('designer.widgetLabel.' + widget.type) }}</i>
+    </div>
+  </div>
+</template>
+
+<script>
+import Draggable from 'vuedraggable'
+import i18n from "../../../../../components/xform/utils/i18n";
+import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign"
+import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
+import FieldComponents from "../../../../../components/xform/form-designer/form-widget/field-widget";
+
+export default {
+  name: "h5-card-pane-widget",
+  componentName: "ContainerWidget",
+  mixins: [i18n, containerMixin, refMixinDesign],
+  inject: ['refList'],
+  components: {
+    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>
+/* 两个投放区的说明文字。常驻而不是「空了才出」：填上内容之后仍要看得出
+   哪个格子是按钮区、哪个是字段区。
+   ★ 走文档流（不用绝对定位）：它就排在各自那个虚线投放框的正上方，
+     一眼对得上归属；也不会盖住框里已有的组件、更不会挡住拖放。
+     绝对定位那一版还要跟 style.scss 的 `.h5-detail-wrap .h5-item .h5-form-box
+     {padding:12px}` (0,3,0) 抢内边距 —— 与 scoped 属性选择器同分，靠加载顺序
+     决胜负，不可靠。 */
+.h5-area > .h5-area-hint {
+  display: block;
+  font-size: 12px;
+  line-height: 16px;
+  color: #a8abb2;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.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%;
+    outline: 1px dashed #336699;
+  }
+
+  .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>