cloud-web-corejs 1.0.280 → 1.1.0-dev.10

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

@@ -1,269 +1,269 @@
-<!--
-/**
- * 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">
-    <div :key="widget.id" class="table-container" :class="[selected ? 'selected' : '', customClass]"
-         @click.stop="selectWidget(widget)">
-      <vxe-grid v-bind="gridOptions" :data="widget.options.tableData" :auto-resize="true">
-        <template #form>
-          <template v-if="widget.options.isQueryTable">
-            <div class="clearfix screen-btns">
-              <div class="fl button-drag-zone">
-                <!--                <vxe-button status="primary" class="button-sty" icon="el-icon-upload2"
-                                            v-if="widget.options.showExportBtn!==false">导出
-                                </vxe-button>-->
-                <el-form label-position="top">
-                  <draggable
-                    :list="widget.buttons"
-                    v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
-                    handle=".drag-handler"
-                    @add="evt => onContainerDragAdd(evt, widget.buttons)"
-                    @update="onContainerDragUpdate"
-                    :move="checkContainerMove"
-                  >
-                    <transition-group name="fade" tag="div" class="sub-form-table form-widget-list">
-                      <template v-for="(subWidget, swIdx) in widget.buttons">
-                        <div class="sub-form-table-column" :key="swIdx">
-                          <template v-if="'container' === subWidget.category">
-                            <component
-                              :is="subWidget.type + '-widget'"
-                              :widget="subWidget"
-                              :designer="designer"
-                              :key="subWidget.id"
-                              :parent-list="widget.buttons"
-                              :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.buttons"
-                              :index-of-parent-list="swIdx"
-                              :parent-widget="widget"
-                              :design-state="true"
-                            ></component>
-                          </template>
-                        </div>
-                      </template>
-                    </transition-group>
-                  </draggable>
-                </el-form>
-              </div>
-              <div class="fr">
-                <!-- <vxe-button icon="el-icon-view" class="button-sty" @click="searchEvent">显示总记录数</vxe-button> -->
-                <vxe-button icon="el-icon-brush" class="button-sty" @click="resetEvent" type="text" status="primary"
-                            plain>刷新
-                </vxe-button>
-
-                <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">搜索
-                </vxe-button>
-              </div>
-            </div>
-            <div class="screen-box" title-width="92px" title-align="right" @click.stop="selectWidget(widget)">
-              <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"
-                        :table-condition="true"
-                      ></component>
-                    </template>
-                  </template>
-                </transition-group>
-              </draggable>
-              <!-- <vxe-form-item title="机构名称:" field="saleOrgName">
-                <template v-slot>
-                  <el-input v-model="formData.saleOrgName" size="small" :disabled="true"></el-input>
-                </template>
-              </vxe-form-item>
-              <vxe-form-item title="登录名:" field="loginAccount">
-                <template v-slot>
-                  <el-input v-model="formData.loginAccount" size="small" clearable></el-input>
-                </template>
-              </vxe-form-item>
-              <vxe-form-item title="手机号:" field="mobile">
-                <template v-slot>
-                  <el-input v-model="formData.mobile" size="small" clearable></el-input>
-                </template>
-              </vxe-form-item>
-              <vxe-form-item title="是否启用:" field="enabled">
-                <template v-slot>
-                  <el-select v-model="formData.enabled" clearable>
-                    <el-option value="true" label="启用"></el-option>
-                    <el-option value="false" label="禁用"></el-option>
-                  </el-select>
-                </template>
-              </vxe-form-item> -->
-            </div>
-          </template>
-          <!--          <div class="design-listcolu" title-width="92px" title-align="right" @click.stop="selectWidget(widget)">
-                      <el-form label-position="top">
-                        <draggable
-                          :list="widget.columns"
-                          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
-                          handle=".drag-handler"
-                          @add="evt => onContainerDragAdd(evt, widget.columns)"
-                          @update="onContainerDragUpdate"
-                          :move="checkContainerMove"
-                        >
-                          <transition-group name="fade" tag="div" class="sub-form-table form-widget-list">
-                            <template v-for="(subWidget, swIdx) in widget.columns">
-                              <div class="sub-form-table-column" :key="swIdx" :style="'width:'+subWidget.options.columnWidth">
-                                <template v-if="'container' === subWidget.category">
-                                  <component
-                                    :is="subWidget.type + '-widget'"
-                                    :widget="subWidget"
-                                    :designer="designer"
-                                    :key="subWidget.id"
-                                    :parent-list="widget.columns"
-                                    :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.columns"
-                                    :index-of-parent-list="swIdx"
-                                    :parent-widget="widget"
-                                    :design-state="true"
-                                  ></component>
-                                </template>
-                              </div>
-                            </template>
-                          </transition-group>
-                        </draggable>
-                      </el-form>
-
-                    </div>-->
-        </template>
-      </vxe-grid>
-    </div>
-  </container-wrapper>
-</template>
-
-<script>
-import ContainerWrapper from '../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper';
-import TableCellWidget from '../../../../../components/xform/form-designer/form-widget/container-widget/table-cell-widget';
-import FieldComponents from '../../../../../components/xform/form-designer/form-widget/field-widget/index';
-import Draggable from 'vuedraggable';
-import dataTableMixin from './data-table-mixin.js';
-import { enrichTableColumnsWithLabelIcon } from '../../../utils/tableColumnHelper';
-
-export default {
-  name: 'data-table-widget',
-  components: {
-    ContainerWrapper,
-    TableCellWidget,
-    Draggable,
-    ...FieldComponents
-  },
-  mixins: [dataTableMixin],
-  computed: {
-    columns() {
-      const baseColumns = dataTableMixin.computed.columns.call(this);
-      return enrichTableColumnsWithLabelIcon(
-        baseColumns,
-        this.widget.options.tableColumns || []
-      );
-    },
-  },
-  created() {
-    if(this.widget.options.isNotQueryAllPage===undefined)this.widget.options.isNotQueryAllPage = false;
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-div.table-container {
-  padding: 5px;
-  border: 1px dashed #336699;
-  box-sizing: border-box;
-
-  table.table-layout {
-    width: 100%;
-    text-align: center;
-    //border: 1px solid #c8ebfb;
-    border-collapse: collapse;
-    table-layout: fixed;
-
-    ::v-deep td {
-      height: 48px;
-      border: 0.5px dashed #336699;
-      padding: 3px;
-      display: table-cell;
-    }
-  }
-
-  .form-widget-list {
-    border: 1px dashed #336699;
-    min-height: 36px;
-  }
-
-  &.selected {
-    outline: 2px solid $--color-primary !important;
-  }
-}
-
-/* 按钮拖放区：宽度自适应，最多占满除右侧刷新/搜索按钮外的空间，超出后按钮换行 */
-.screen-btns .fl.button-drag-zone {
-  max-width: calc(100% - 180px);
-}
-
-.sub-form-table {
-  min-height: 68px;
-  min-width: 200px
-}
-
-.sub-form-table .sub-form-drag-drop-zone {
-  min-height: 68px
-}
-
-.sub-form-table div.sub-form-table-column {
-  display: inline-block;
-  vertical-align: top
-}
-
-</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">
+    <div :key="widget.id" class="table-container" :class="[selected ? 'selected' : '', customClass]"
+         @click.stop="selectWidget(widget)">
+      <vxe-grid v-bind="gridOptions" :data="widget.options.tableData" :auto-resize="true">
+        <template #form>
+          <template v-if="widget.options.isQueryTable">
+            <div class="clearfix screen-btns">
+              <div class="fl button-drag-zone">
+                <!--                <vxe-button status="primary" class="button-sty" icon="el-icon-upload2"
+                                            v-if="widget.options.showExportBtn!==false">导出
+                                </vxe-button>-->
+                <el-form label-position="top">
+                  <draggable
+                    :list="widget.buttons"
+                    v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
+                    handle=".drag-handler"
+                    @add="evt => onContainerDragAdd(evt, widget.buttons)"
+                    @update="onContainerDragUpdate"
+                    :move="checkContainerMove"
+                  >
+                    <transition-group name="fade" tag="div" class="sub-form-table form-widget-list">
+                      <template v-for="(subWidget, swIdx) in widget.buttons">
+                        <div class="sub-form-table-column" :key="swIdx">
+                          <template v-if="'container' === subWidget.category">
+                            <component
+                              :is="subWidget.type + '-widget'"
+                              :widget="subWidget"
+                              :designer="designer"
+                              :key="subWidget.id"
+                              :parent-list="widget.buttons"
+                              :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.buttons"
+                              :index-of-parent-list="swIdx"
+                              :parent-widget="widget"
+                              :design-state="true"
+                            ></component>
+                          </template>
+                        </div>
+                      </template>
+                    </transition-group>
+                  </draggable>
+                </el-form>
+              </div>
+              <div class="fr">
+                <!-- <vxe-button icon="el-icon-view" class="button-sty" @click="searchEvent">显示总记录数</vxe-button> -->
+                <vxe-button icon="el-icon-brush" class="button-sty" @click="resetEvent" type="text" status="primary"
+                            plain>刷新
+                </vxe-button>
+
+                <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">搜索
+                </vxe-button>
+              </div>
+            </div>
+            <div class="screen-box" title-width="92px" title-align="right" @click.stop="selectWidget(widget)">
+              <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"
+                        :table-condition="true"
+                      ></component>
+                    </template>
+                  </template>
+                </transition-group>
+              </draggable>
+              <!-- <vxe-form-item title="机构名称:" field="saleOrgName">
+                <template v-slot>
+                  <el-input v-model="formData.saleOrgName" size="small" :disabled="true"></el-input>
+                </template>
+              </vxe-form-item>
+              <vxe-form-item title="登录名:" field="loginAccount">
+                <template v-slot>
+                  <el-input v-model="formData.loginAccount" size="small" clearable></el-input>
+                </template>
+              </vxe-form-item>
+              <vxe-form-item title="手机号:" field="mobile">
+                <template v-slot>
+                  <el-input v-model="formData.mobile" size="small" clearable></el-input>
+                </template>
+              </vxe-form-item>
+              <vxe-form-item title="是否启用:" field="enabled">
+                <template v-slot>
+                  <el-select v-model="formData.enabled" clearable>
+                    <el-option value="true" label="启用"></el-option>
+                    <el-option value="false" label="禁用"></el-option>
+                  </el-select>
+                </template>
+              </vxe-form-item> -->
+            </div>
+          </template>
+          <!--          <div class="design-listcolu" title-width="92px" title-align="right" @click.stop="selectWidget(widget)">
+                      <el-form label-position="top">
+                        <draggable
+                          :list="widget.columns"
+                          v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
+                          handle=".drag-handler"
+                          @add="evt => onContainerDragAdd(evt, widget.columns)"
+                          @update="onContainerDragUpdate"
+                          :move="checkContainerMove"
+                        >
+                          <transition-group name="fade" tag="div" class="sub-form-table form-widget-list">
+                            <template v-for="(subWidget, swIdx) in widget.columns">
+                              <div class="sub-form-table-column" :key="swIdx" :style="'width:'+subWidget.options.columnWidth">
+                                <template v-if="'container' === subWidget.category">
+                                  <component
+                                    :is="subWidget.type + '-widget'"
+                                    :widget="subWidget"
+                                    :designer="designer"
+                                    :key="subWidget.id"
+                                    :parent-list="widget.columns"
+                                    :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.columns"
+                                    :index-of-parent-list="swIdx"
+                                    :parent-widget="widget"
+                                    :design-state="true"
+                                  ></component>
+                                </template>
+                              </div>
+                            </template>
+                          </transition-group>
+                        </draggable>
+                      </el-form>
+
+                    </div>-->
+        </template>
+      </vxe-grid>
+    </div>
+  </container-wrapper>
+</template>
+
+<script>
+import ContainerWrapper from '../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper';
+import TableCellWidget from '../../../../../components/xform/form-designer/form-widget/container-widget/table-cell-widget';
+import FieldComponents from '../../../../../components/xform/form-designer/form-widget/field-widget/index';
+import Draggable from 'vuedraggable';
+import dataTableMixin from './data-table-mixin.js';
+import { enrichTableColumnsWithLabelIcon } from '../../../utils/tableColumnHelper';
+
+export default {
+  name: 'data-table-widget',
+  components: {
+    ContainerWrapper,
+    TableCellWidget,
+    Draggable,
+    ...FieldComponents
+  },
+  mixins: [dataTableMixin],
+  computed: {
+    columns() {
+      const baseColumns = dataTableMixin.computed.columns.call(this);
+      return enrichTableColumnsWithLabelIcon(
+        baseColumns,
+        this.widget.options.tableColumns || []
+      );
+    },
+  },
+  created() {
+    if(this.widget.options.isNotQueryAllPage===undefined)this.widget.options.isNotQueryAllPage = false;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+div.table-container {
+  padding: 5px;
+  border: 1px dashed #336699;
+  box-sizing: border-box;
+
+  table.table-layout {
+    width: 100%;
+    text-align: center;
+    //border: 1px solid #c8ebfb;
+    border-collapse: collapse;
+    table-layout: fixed;
+
+    ::v-deep td {
+      height: 48px;
+      border: 0.5px dashed #336699;
+      padding: 3px;
+      display: table-cell;
+    }
+  }
+
+  .form-widget-list {
+    border: 1px dashed #336699;
+    min-height: 36px;
+  }
+
+  &.selected {
+    outline: 2px solid $--color-primary !important;
+  }
+}
+
+/* 按钮拖放区：宽度自适应，最多占满除右侧刷新/搜索按钮外的空间，超出后按钮换行 */
+.screen-btns .fl.button-drag-zone {
+  max-width: calc(100% - 180px);
+}
+
+.sub-form-table {
+  min-height: 68px;
+  min-width: 200px
+}
+
+.sub-form-table .sub-form-drag-drop-zone {
+  min-height: 68px
+}
+
+.sub-form-table div.sub-form-table-column {
+  display: inline-block;
+  vertical-align: top
+}
+
+</style>

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

@@ -23,7 +23,11 @@
                           :index-of-parent-list="index" :parent-widget="widget"
                           :col-height="widget.options.colHeight" tabRef="baseTabRef" :tabPaneGrade="2"></detail-pane-widget>
       -->
-      <div>
+      <!-- 投放区说明（设计器画布常驻）。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 }"
@@ -63,7 +67,8 @@
       </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">
+      <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 }"
@@ -159,6 +164,17 @@
 </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;