cloud-web-corejs 1.0.276 → 1.0.277

package/src/components/xform/form-designer/form-widget/container-widget/containerMixin.js

@@ -5,11 +5,9 @@ modules = {
     fieldKeyName() {
       let o = this.widget.options.name;
       return (
-        (this.widget.options.keyNameEnabled
-          && this.widget.options.keyName)
-        || o
+        (this.widget.options.keyNameEnabled && this.widget.options.keyName) || o
       );
-    }
+    },
   },
   methods: {
     appendTableRow(widget) {
@@ -30,7 +28,7 @@ modules = {
       }
 
       this.designer.emitHistoryChange();
-      this.designer.emitEvent('field-selected', this.widget);
+      this.designer.emitEvent("field-selected", this.widget);
     },
 
     onContainerDragUpdate() {
@@ -80,7 +78,7 @@ modules = {
           if (!!this.parentWidget) {
             nextSelected = this.parentWidget;
           }
-        } else if (this.parentList.length === (1 + this.indexOfParentList)) {
+        } else if (this.parentList.length === 1 + this.indexOfParentList) {
           nextSelected = this.parentList[this.indexOfParentList - 1];
         } else {
           nextSelected = this.parentList[this.indexOfParentList + 1];
@@ -93,20 +91,20 @@ modules = {
           //}
 
           this.designer.emitHistoryChange();
-        })
+        });
       }
     },
 
-    setWidgetOption(optionName, optionValue) { //通用组件选项修改API
+    setWidgetOption(optionName, optionValue) {
+      //通用组件选项修改API
       if (this.widget.options.hasOwnProperty(optionName)) {
         this.widget.options[optionName] = optionValue;
       }
     },
     getI18nLabel(label, path, param) {
       return !this.designState && label ? this.$t2(label, path, param) : label;
-    }
-
-  }
+    },
+  },
 };
 
 export default modules;

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

@@ -1,22 +1,22 @@
-import refMixinDesign from '../../../../../components/xform/form-designer/refMixinDesign';
-import * as formatUtil from '../../../../../components/xform/utils/format.js';
-import i18n from '../../../../../components/xform/utils/i18n';
-import containerMixin from '../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin';
-import {columnFormatMap} from "../../../../../components/xform/utils/util";
+import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign";
+import * as formatUtil from "../../../../../components/xform/utils/format.js";
+import i18n from "../../../../../components/xform/utils/i18n";
+import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
+import { columnFormatMap } from "../../../../../components/xform/utils/util";
 
 let modules = {};
 const baseRefUtil = {
   refMixinDesign,
   formatUtil,
   i18n,
-  containerMixin
+  containerMixin,
 };
 
 modules = {
   data() {
     return {
       gridOptions1: {
-        className: 'list-table',
+        className: "list-table",
         resizable: true,
         // showFooter: true,
         stripe: true,
@@ -25,31 +25,35 @@ modules = {
         highlightHoverRow: true,
         columns: this.columns,
         toolbarConfig: {
-          className: 'toolSet',
+          className: "toolSet",
           custom: {
-            icon: 'el-icon-s-tools'
-          }
+            icon: "el-icon-s-tools",
+          },
         },
-        data: []
+        data: [],
       },
       formData: {
-        saleOrgName: '',
-        loginAccount: '',
-        mobile: '',
-        enabled: 1
-      }
+        saleOrgName: "",
+        loginAccount: "",
+        mobile: "",
+        enabled: 1,
+      },
     };
   },
-  componentName: 'ContainerWidget',
-  mixins: [baseRefUtil.i18n, baseRefUtil.containerMixin, baseRefUtil.refMixinDesign],
-  inject: ['refList'],
+  componentName: "ContainerWidget",
+  mixins: [
+    baseRefUtil.i18n,
+    baseRefUtil.containerMixin,
+    baseRefUtil.refMixinDesign,
+  ],
+  inject: ["refList"],
 
   props: {
     widget: Object,
     parentWidget: Object,
     parentList: Array,
     indexOfParentList: Number,
-    designer: Object
+    designer: Object,
   },
   computed: {
     selected() {
@@ -57,16 +61,16 @@ modules = {
     },
 
     customClass() {
-      return this.widget.options.customClass || '';
+      return this.widget.options.customClass || "";
     },
     columns() {
       let tableColumns = this.widget.options.tableColumns;
       let newColumns = [];
       newColumns.push({
-        type: 'checkbox',
+        type: "checkbox",
         width: 48,
         resizable: false,
-        fixed: 'left'
+        fixed: "left",
       });
       const createColumn = (t, isChild) => {
         let col = {
@@ -74,16 +78,16 @@ modules = {
           field: t.prop,
           title: t.label,
           sortable: t.sortable,
-          align: t.align ? t.align : 'center',
+          align: t.align ? t.align : "center",
           formatter: this.formatterValue,
           params: {
-            formatS: t.formatS
+            formatS: t.formatS,
           },
-          visible: t.show
+          visible: t.show,
         };
         if (t.children && t.children.length) {
-          col.align = 'center';
-          let childColumns = t.children.map(child => {
+          col.align = "center";
+          let childColumns = t.children.map((child) => {
             return createColumn(child, true);
           });
           col.children = childColumns;
@@ -108,7 +112,7 @@ modules = {
         return col;
       };
 
-      tableColumns.forEach(t => {
+      tableColumns.forEach((t) => {
         /*let col = {
           fixed: !!t.fixed && t.fixed,
           field: t.prop,
@@ -131,10 +135,10 @@ modules = {
       let tableColumns = this.widget.columns;
       let newColumns = [];
       newColumns.push({
-        type: 'checkbox',
+        type: "checkbox",
         width: 48,
         resizable: false,
-        fixed: 'left'
+        fixed: "left",
       });
       tableColumns.forEach((item, index) => {
         let t = item.options;
@@ -144,12 +148,12 @@ modules = {
           title: t.label,
           width: t.columnWidth,
           sortable: !!t.name ? true : false,
-          align: 'center',
+          align: "center",
           /*formatter: this.formatterValue,
           params: {
             formatS: t.formatS
           },*/
-          visible: true
+          visible: true,
         };
         newColumns.push(col);
       });
@@ -158,9 +162,9 @@ modules = {
     gridOptions() {
       return {
         ...this.gridOptions1,
-        columns: this.columns
+        columns: this.columns,
       };
-    }
+    },
   },
   watch: {
     //
@@ -195,85 +199,82 @@ modules = {
           row.editWidget = fieldWidget;
         }
       })*/
-      this.handleTableColumnWidget(this.widget)
+      this.handleTableColumnWidget(this.widget);
     },
     handleTableColumnWidget(widget) {
       //修复data-table旧数据表格列widget与editWidget为空的问题
-      if (!widget || widget.type != "data-table" || !widget.options.tableColumns) return
+      if (
+        !widget ||
+        widget.type != "data-table" ||
+        !widget.options.tableColumns
+      )
+        return;
       let columnLoopDo = (t, e) => {
-        if(t.filterable===null || t.filterable===undefined) t.filterable = true;
+        if (t.filterable === null || t.filterable === undefined)
+          t.filterable = true;
         if (t.children && t.children.length) {
           for (let item of t.children) {
-            columnLoopDo(item)
+            columnLoopDo(item);
           }
-
         } else {
           let type1 = columnFormatMap[t.formatS];
-          if(type1){
-            if(!t.widget){
+          if (type1) {
+            if (!t.widget) {
               let fieldWidget = this.designer.getColumnWidget(t, false);
               t.widget = fieldWidget;
             }
-            if (t.widget) t.widget.columnType = t.formatS
+            if (t.widget) t.widget.columnType = t.formatS;
           }
           let type2 = columnFormatMap[t.editFormatS];
-          if(type2){
+          if (type2) {
             if (!t.editWidget) {
               let fieldWidget = this.designer.getColumnWidget(t, true);
               t.editWidget = fieldWidget;
             }
-            if (t.editWidget) t.editWidget.columnType = t.editFormatS
+            if (t.editWidget) t.editWidget.columnType = t.editFormatS;
           }
         }
-      }
+      };
 
       for (let item of widget.options.tableColumns) {
-        columnLoopDo(item)
+        columnLoopDo(item);
       }
       /*widget.options.tableColumns.forEach(item => {
         columnLoopDo(item)
       })*/
     },
-    resetEvent() {
-    },
-    searchEvent() {
-    },
-    openEditDialog() {
-    },
-    importExcel() {
-    },
-    formatterValue: function ({
-                                cellValue,
-                                row,
-                                column
-                              }) {
-      if (!cellValue) return '';
+    resetEvent() {},
+    searchEvent() {},
+    openEditDialog() {},
+    importExcel() {},
+    formatterValue: function ({ cellValue, row, column }) {
+      if (!cellValue) return "";
 
       if (column.params && column.params.formatS)
         switch (column.params.formatS) {
-          case 'd1':
+          case "d1":
             return baseRefUtil.formatUtil.formatDate1(cellValue);
-          case 'd2':
+          case "d2":
             return baseRefUtil.formatUtil.formatDate2(cellValue);
-          case 'd3':
+          case "d3":
             return baseRefUtil.formatUtil.formatDate3(cellValue);
-          case 'd4':
+          case "d4":
             return baseRefUtil.formatUtil.formatDate4(cellValue);
-          case 'd5':
+          case "d5":
             return baseRefUtil.formatUtil.formatDate4(cellValue);
-          case 'n1':
+          case "n1":
             return baseRefUtil.formatUtil.formatNumber1(cellValue);
-          case 'n2':
+          case "n2":
             return baseRefUtil.formatUtil.formatNumber2(cellValue);
-          case 'n3':
+          case "n3":
             return baseRefUtil.formatUtil.formatNumber3(cellValue);
-          case 'n4':
+          case "n4":
             return baseRefUtil.formatUtil.formatNumber4(cellValue);
-          case 'n5':
+          case "n5":
             return baseRefUtil.formatUtil.formatNumber5(cellValue);
-          case 'n6':
+          case "n6":
             return baseRefUtil.formatUtil.formatNumber6(cellValue);
-          case 'n7':
+          case "n7":
             return baseRefUtil.formatUtil.formatNumber7(cellValue);
         }
       return cellValue;
@@ -283,8 +284,8 @@ modules = {
     },
     getI18nLabel(label, path, param) {
       return !this.designState && label ? this.$t2(label, path, param) : label;
-    }
-  }
+    },
+  },
 };
 
 export default modules;

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

@@ -17,7 +17,7 @@
         <template #form>
           <template v-if="widget.options.isQueryTable">
             <div class="clearfix screen-btns">
-              <div class="fl" style="width: 700px;">
+              <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>-->
@@ -65,7 +65,7 @@
               <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>重置
+                            plain>刷新
                 </vxe-button>
 
                 <vxe-button status="warning" icon="el-icon-search" class="button-sty" @click="searchEvent">搜索
@@ -247,9 +247,14 @@ div.table-container {
   }
 }
 
+/* 按钮拖放区：宽度自适应，最多占满除右侧刷新/搜索按钮外的空间，超出后按钮换行 */
+.screen-btns .fl.button-drag-zone {
+  max-width: calc(100% - 180px);
+}
+
 .sub-form-table {
   min-height: 68px;
-  min-width: max-content
+  min-width: 200px
 }
 
 .sub-form-table .sub-form-drag-drop-zone {
@@ -257,7 +262,8 @@ div.table-container {
 }
 
 .sub-form-table div.sub-form-table-column {
-  display: inline-block
+  display: inline-block;
+  vertical-align: top
 }
 
 </style>

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

@@ -0,0 +1,76 @@
+<!--
+/**
+ * 简洁详情模块(detail-plain)设计态：无标题栏、无按钮拖放区，仅 panes(详情tab)。
+ */
+-->
+
+<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)">
+      <baseTabs style="height: auto;" :showNav="!widget.options.hideNav">
+        <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>
+      </baseTabs>
+    </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 FieldComponents from "../../../../../components/xform/form-designer/form-widget/field-widget";
+
+  export default {
+    name: "detail-plain-widget",
+    componentName: 'ContainerWidget',
+    mixins: [i18n, containerMixin, refMixinDesign],
+    inject: ['refList'],
+    components: {
+      ContainerWrapper,
+      detailPaneWidget,
+      ...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 || ''
+      },
+    },
+    created() {
+      this.initRefList()
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .grid-container {
+    min-height: 50px;
+    outline: 1px dashed #336699;
+    > div{height:100%;}
+    .form-widget-list {
+      height: 100%;
+    }
+  }
+
+  .grid-container.selected, .grid-cell.selected {
+    outline: 2px solid $--color-primary !important;
+  }
+</style>

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

@@ -65,11 +65,57 @@
             <el-button type="primary" class="button-sty" icon="el-icon-check">保存</el-button>
           </div>-->
         </div>
-        <baseTabs style="height: auto;">
-          <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>
-        </baseTabs>
+        <!-- 正文区：通用容器列表。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>
@@ -140,6 +186,14 @@
       height: 100%;
     }
 
+    /* 正文区(panes)的拖放区。不能复用上面的 .form-widget-list——那条是 height:100% 且
+       min-height 被注释掉的，空态会塌成一条线，没有地方往里拖组件。
+       这里给足高度，保证空态也是个看得见、拖得进的落区。 */
+    .detail-pane-list {
+      min-height: 150px;
+      height: auto;
+    }
+
   }
 
   .grid-container.selected, .grid-cell.selected {

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

@@ -11,6 +11,18 @@
                  :_dataId.sync="dataId" :defaultShowWfContent="defaultShowWfContent" :_isOutLink="true"
                  :parent-target="_self"
                  @reload="$reloadHandle" v-bind="queryParam" v-on="listeners"></component>
+      <micro-view-host
+        v-else-if="showWfContent && remoteView"
+        :owner="remoteView.owner"
+        :target-path="remoteView.targetPath"
+        :biz-params="remoteView.bizParams"
+        :view-meta="remoteView.viewMeta"
+        :initial-out-param="outParam"
+        @reload="$reloadHandle"
+        @update-out-param="outParam = $event"
+        @bridge-emit="onBridgeEmit"
+        @close="showWfContent = false"
+      ></micro-view-host>
     </div>
     <span slot="footer" class="dialog-footer" v-if="option.showFooter!==false" v-bind="option.footerConfig">
 			<el-button type="primary" plain class="button-sty" @click="close">
@@ -26,9 +38,9 @@
 </template>
 
 <script>
+import { loadViewComponent } from "@base/utils/resolveViewComponent";
 
 export default {
-  // name: "vabSearchDialog",
   components: {},
   props: {
     visiable: Boolean,
@@ -63,6 +75,7 @@ export default {
 
       showWfContent: true,
       wfContent: null,
+      remoteView: null,
       outParam: null,
       // dataId: null,
       defaultShowWfContent: null,
@@ -175,23 +188,29 @@ export default {
 
       this.showWfContent = true;
 
-      let t = "@base/views";
-      let urlArr = [
-        '/user/bill_setting/h5_view.vue',
-        '/user/form/view/list.vue',
-        '/user/form/view/edit.vue'
-      ]
-
-      if (urlArr.includes(url)) {
-        this.wfContent = require('@base/views' + url).default;
-      } else if (url.startsWith(t)) {
-        let path = url.slice(t.length);
-        this.wfContent = require('@base/views' + path).default;
-      } else {
-        this.wfContent = require('@/views' + url).default;
-      }
+      let res = loadViewComponent(url);
+      this.remoteView =
+        res.kind === "remote"
+          ? {
+              owner: res.owner,
+              targetPath: res.targetPath,
+              bizParams: this.queryParam,
+              viewMeta: {
+                visibleKey: "showWfContent",
+                defaultShowWfContent: this.defaultShowWfContent,
+                _isOutLink: true,
+                _dataId: this.dataId,
+              },
+            }
+          : null;
+      this.wfContent = res.component;
     },
 
+    // remote 承载态下，把子应用桥接回来的任意事件按名字派回原 option.on 监听
+    onBridgeEmit(name, args) {
+      let fn = this.listeners && this.listeners[name];
+      if (typeof fn === "function") fn.apply(null, args || []);
+    },
 
     reload(e, option) {
       let updateParam = option?.updateParam || {};
@@ -277,6 +296,8 @@ export default {
           outline: none;
 
           &.detail-wrap .d-cont {
+            //height: calc(100vh - 150px);
+
             .title .field-wrapper {
               display: inline-block !important
             }
@@ -291,7 +312,7 @@ export default {
       height: calc(100vh - 110px);
 
       &.nfootBtn {
-        height: calc(100vh - 58px)
+        height: calc(100vh - var(--xform-dialog-body-offset, 58px))
       }
     }
   }