cloud-web-corejs 1.0.281 → 1.1.0-dev.11

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

@@ -0,0 +1,132 @@
+<!--
+/**
+ * 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="detail-wrap grid-container" :key="widget.id"
+         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
+
+        <div class="detail-temp-box" :class="widget.options.styleTempClass" v-for="(paneWidget, index) in widget.panes" :key="paneWidget.id">
+          <div class="detail-temp-header">
+            <span class="detail-temp-label">{{ paneWidget.options.label || '模块' }}</span>
+          </div>
+          <div class="detail-temp-body">
+            <draggable
+              class="detail-temp-body-list"
+              :list="paneWidget.widgetList"
+              v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
+              handle=".drag-handler"
+              @add="evt => onContainerDragAdd(evt, paneWidget.widgetList)"
+              @update="onContainerDragUpdate"
+              :move="checkContainerMove"
+            >
+              <transition-group name="fade" tag="div" class="form-widget-list">
+                <template v-for="(subWidget, swIdx) in paneWidget.widgetList">
+                  <template v-if="subWidget.category === 'container'">
+                    <component
+                      :is="subWidget.type + '-widget'"
+                      :widget="subWidget"
+                      :designer="designer"
+                      :key="subWidget.id"
+                      :parent-list="paneWidget.widgetList"
+                      :index-of-parent-list="swIdx"
+                      :parent-widget="paneWidget"
+                    ></component>
+                  </template>
+                  <template v-else>
+                    <component
+                      :is="subWidget.type + '-widget'"
+                      :field="subWidget"
+                      :designer="designer"
+                      :key="subWidget.id"
+                      :parent-list="paneWidget.widgetList"
+                      :index-of-parent-list="swIdx"
+                      :parent-widget="paneWidget"
+                      :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-temp-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;
+    outline: 1px dashed #336699;
+    .form-widget-list {
+      height: 100%;
+    }
+  }
+
+  .grid-container.selected {
+    outline: 2px solid $--color-primary !important;
+  }
+</style>

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

@@ -1,250 +1,250 @@
-<!--
-/**
- * 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="detail-wrap grid-container" :key="widget.id"
-         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
-        <div class="d-header clearfix" style="height: auto;">
-          <div class="fl" style="width: 20%;overflow: hidden;height: 40px;">
-            <i class="el-icon-info"/>
-            {{ widget.options.label }}
-          </div>
-          <div class="fr" style="overflow: auto;">
-            <div class="grid-cell">
-              <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="fr">
-            <el-button type="primary" plain class="button-sty" icon="el-icon-refresh-right">重置
-            </el-button>
-            <el-button type="primary" class="button-sty" icon="el-icon-check">保存</el-button>
-          </div>-->
-        </div>
-        <!-- 正文区：通用容器列表。panes 里既可以直接挂 detail-pane(模块)，也可以挂 tab 等
-             其它容器(标签承载)。设计期这里不套 baseTabs——draggable 会隔断 baseTabs.getTabs()
-             对 slot 子级的探测(见 baseTabs/mixins.js getTabs)，导航拿不到 pane，索性不渲染，
-             左侧导航预览只在运行期有。 -->
-        <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="detail-pane-list">
-            <template v-for="(paneWidget, index) in widget.panes">
-              <!-- 模块：额外要 tabRef/tabPaneGrade,这两个 props 是 baseTabs 探测用的,只给 detail-pane -->
-              <detail-pane-widget
-                v-if="paneWidget.type === 'detail-pane'"
-                :key="paneWidget.id"
-                :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>
-              <component
-                v-else-if="'container' === paneWidget.category"
-                :is="paneWidget.type + '-widget'"
-                :key="paneWidget.id"
-                :widget="paneWidget"
-                :designer="designer"
-                :parent-list="widget.panes"
-                :index-of-parent-list="index"
-                :parent-widget="widget"
-              ></component>
-              <component
-                v-else
-                :is="paneWidget.type + '-widget'"
-                :key="paneWidget.id"
-                :field="paneWidget"
-                :designer="designer"
-                :parent-list="widget.panes"
-                :index-of-parent-list="index"
-                :parent-widget="widget"
-                :design-state="true"
-              ></component>
-            </template>
-          </transition-group>
-        </draggable>
-    </div>
-  </container-wrapper>
-</template>
-
-<script>
-  import i18n from "../../../../../components/xform/utils/i18n"
-  import detailPaneWidget from "../../../../../components/xform/form-designer/form-widget/container-widget/detail-pane-widget"
-  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-widget",
-    componentName: 'ContainerWidget',
-    mixins: [i18n, containerMixin, refMixinDesign],
-    inject: ['refList'],
-    components: {
-      ContainerWrapper,
-      detailPaneWidget,
-      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%;
-    }
-
-    /* 正文区(panes)的拖放区。不能复用上面的 .form-widget-list——那条是 height:100% 且
-       min-height 被注释掉的，空态会塌成一条线，没有地方往里拖组件。
-       这里给足高度，保证空态也是个看得见、拖得进的落区。 */
-    .detail-pane-list {
-      min-height: 150px;
-      height: auto;
-    }
-
-  }
-
-  .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="detail-wrap grid-container" :key="widget.id"
+         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
+        <div class="d-header clearfix" style="height: auto;">
+          <div class="fl" style="width: 20%;overflow: hidden;height: 40px;">
+            <i class="el-icon-info"/>
+            {{ widget.options.label }}
+          </div>
+          <div class="fr" style="overflow: auto;">
+            <div class="grid-cell">
+              <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="fr">
+            <el-button type="primary" plain class="button-sty" icon="el-icon-refresh-right">重置
+            </el-button>
+            <el-button type="primary" class="button-sty" icon="el-icon-check">保存</el-button>
+          </div>-->
+        </div>
+        <!-- 正文区：通用容器列表。panes 里既可以直接挂 detail-pane(模块)，也可以挂 tab 等
+             其它容器(标签承载)。设计期这里不套 baseTabs——draggable 会隔断 baseTabs.getTabs()
+             对 slot 子级的探测(见 baseTabs/mixins.js getTabs)，导航拿不到 pane，索性不渲染，
+             左侧导航预览只在运行期有。 -->
+        <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="detail-pane-list">
+            <template v-for="(paneWidget, index) in widget.panes">
+              <!-- 模块：额外要 tabRef/tabPaneGrade,这两个 props 是 baseTabs 探测用的,只给 detail-pane -->
+              <detail-pane-widget
+                v-if="paneWidget.type === 'detail-pane'"
+                :key="paneWidget.id"
+                :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>
+              <component
+                v-else-if="'container' === paneWidget.category"
+                :is="paneWidget.type + '-widget'"
+                :key="paneWidget.id"
+                :widget="paneWidget"
+                :designer="designer"
+                :parent-list="widget.panes"
+                :index-of-parent-list="index"
+                :parent-widget="widget"
+              ></component>
+              <component
+                v-else
+                :is="paneWidget.type + '-widget'"
+                :key="paneWidget.id"
+                :field="paneWidget"
+                :designer="designer"
+                :parent-list="widget.panes"
+                :index-of-parent-list="index"
+                :parent-widget="widget"
+                :design-state="true"
+              ></component>
+            </template>
+          </transition-group>
+        </draggable>
+    </div>
+  </container-wrapper>
+</template>
+
+<script>
+  import i18n from "../../../../../components/xform/utils/i18n"
+  import detailPaneWidget from "../../../../../components/xform/form-designer/form-widget/container-widget/detail-pane-widget"
+  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-widget",
+    componentName: 'ContainerWidget',
+    mixins: [i18n, containerMixin, refMixinDesign],
+    inject: ['refList'],
+    components: {
+      ContainerWrapper,
+      detailPaneWidget,
+      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%;
+    }
+
+    /* 正文区(panes)的拖放区。不能复用上面的 .form-widget-list——那条是 height:100% 且
+       min-height 被注释掉的，空态会塌成一条线，没有地方往里拖组件。
+       这里给足高度，保证空态也是个看得见、拖得进的落区。 */
+    .detail-pane-list {
+      min-height: 150px;
+      height: auto;
+    }
+
+  }
+
+  .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>