cloud-web-corejs 1.1.0-dev.8 → 1.1.0-dev.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.1.0-dev.8",
+  "version": "1.1.0-dev.9",
   "scripts": {
     "dev": "vue-cli-service serve",
     "dev:micro": "vue-cli-service serve --port 17527",

package/src/components/xform/form-designer/indexMixin.js

@@ -93,7 +93,7 @@ modules = {
     readonly: Boolean,
     columnFlag: Boolean,
     sourceData: Object,
-    /* 进入设计器时的默认布局模式（临时模式：仅入口默认值，模板自带 layoutType 时不覆盖） */
+    /* 进入设计器时的布局模式（模板自带 layoutType 时不覆盖）；传入即锁定，工具栏不允许再切换 */
     defaultLayoutType: { type: String, default: "" },
   },
   data() {
@@ -149,6 +149,8 @@ modules = {
       serverFieldList: this.fieldList,
       getServerSubFormList: () => this.subFormList,
       getDesignerConfig: () => this.designerConfig,
+      /* 由表单模板等入口指定布局模式时，布局类型由模板类型决定，设计器内不可切换 */
+      getLayoutTypeLocked: () => !!this.defaultLayoutType,
       getBannedWidgets: () => this.bannedWidgets,
       saveReportTemplate: this.saveReportTemplate,
       getReportTemplate: () => this.reportTemplate,
@@ -348,7 +350,7 @@ modules = {
     },
 
     /**
-     * 应用入口默认布局模式：模板 JSON 自带 layoutType 时以模板为准，不覆盖
+     * 应用入口指定的布局模式：模板 JSON 自带 layoutType 时以模板为准，不覆盖
      */
     applyDefaultLayoutType(loadedFormJson) {
       if (!this.defaultLayoutType) {

package/src/components/xform/form-designer/toolbar-panel/index.vue

@@ -17,9 +17,12 @@
       >
         <svg-icon icon-class="redo" />
       </el-button>
-      <el-button-group>
+      <el-button-group :title="layoutTypeLocked ? layoutTypeLockedTip : ''">
+        <!-- 锁定时只保留当前模式一个按钮，另一个不显示 -->
         <el-button
+          v-if="!layoutTypeLocked || layoutType === 'PC'"
           :type="layoutType === 'PC' ? 'info' : ''"
+          :disabled="layoutTypeLocked"
           @click="changeLayoutType('PC')"
           size="mini"
         >
@@ -27,7 +30,9 @@
         </el-button>
         <!--         <el-button :type="layoutType === 'Pad' ? 'info' : ''" @click="changeLayoutType('Pad')">{{ i18nt('designer.toolbar.padLayout') }}</el-button>-->
         <el-button
+          v-if="!layoutTypeLocked || layoutType === 'H5'"
           :type="layoutType === 'H5' ? 'info' : ''"
+          :disabled="layoutTypeLocked"
           @click="changeLayoutType('H5')"
           size="mini"
         >
@@ -682,6 +687,11 @@ div.toolbar-container {
 .left-toolbar {
   float: left;
   font-size: 16px;
+
+  /* 按钮组不是 .el-button，吃不到 element 的 .el-button+.el-button 间距，得自己补 */
+  .el-button-group {
+    margin-left: 10px;
+  }
 }
 
 .right-toolbar {

package/src/components/xform/form-designer/toolbar-panel/indexMixin.js

@@ -36,6 +36,7 @@ modules = {
   },
   inject: [
     "getDesignerConfig",
+    "getLayoutTypeLocked",
     "saveReportTemplate",
     "getReportTemplate",
     "getFormTemplateTableDTOs",
@@ -105,6 +106,15 @@ modules = {
     layoutType() {
       return this.designer.getLayoutType();
     },
+
+    /* 布局模式由入口（表单模板类型）锁定时，PC/移动端按钮只回显不可切换 */
+    layoutTypeLocked() {
+      return !!this.getLayoutTypeLocked();
+    },
+
+    layoutTypeLockedTip() {
+      return this.$t1("模板类型由表单模板维护，设计器内不可切换");
+    },
   },
   watch: {
     "designer.widgetList": {
@@ -281,6 +291,9 @@ modules = {
     },
 
     changeLayoutType(newType) {
+      if (this.layoutTypeLocked) {
+        return;
+      }
       this.designer.changeLayoutType(newType);
       this.$emit("loadWidgets");
     },

package/src/components/xform/form-render/container-item/detail-h5-item.vue

@@ -10,7 +10,12 @@
 
 <template>
   <container-item-wrapper :widget="widget">
-    <div class="h5-detail-wrap grid-container" :class="[customClass]" :ref="widget.id">
+    <!-- h5-no-bottom-btns：底栏一个按钮都没有时打上，让内容区吃掉底栏那一格高度。
+         光靠底栏自己 v-if 不够 —— .h5-detail-body 的高度是
+         calc(100% - 底栏 - 标题栏) 硬减出来的（styles/h5.scss 块 G），
+         不同步改的话底部会空出一条 56px 的白带。见块 G2。 -->
+    <div class="h5-detail-wrap grid-container"
+         :class="[customClass, { 'h5-no-bottom-btns': !hasBottomButtons() }]" :ref="widget.id">
       <div class="h5-header">{{ widget.options.label }}</div>
       <!-- 唯一滚动区：标题栏与底部动作栏 flex:none 固定，内容在这里滚。
            样式见 components/xform/styles/h5.scss 块 G（.h5-detail-body 必须有 min-height:0） -->
@@ -49,7 +54,9 @@
                          :defaultShowWfContent="getDefaultShowWfContent()"
                          :hideActions="true"/>
       </div>
-      <div class="h5-fixed-bottom-btns ">
+      <!-- 一个按钮都没有时整条不渲染：底栏是 flex:none 的定高块，
+           留着就是一条 56px 的空白胶囊条，还带阴影。 -->
+      <div class="h5-fixed-bottom-btns " v-if="hasBottomButtons()">
         <transition-group name="fade" tag="div" class="form-widget-list">
           <template v-if="visibleButtons().length > 0">
             <template v-for="(subWidget, swIdx) in visibleButtons()">
@@ -273,6 +280,18 @@ export default {
       );
       return this.wfActionButtons().concat(widgetButtons);
     },
+    /**
+     * 底栏要不要出。与 visibleButtons/overflowButtons 同源（都走 bottomButtons），
+     * 不会出现「有按钮却不渲染」的错位。
+     *
+     * 用方法而非 computed，同本文件其余流程相关方法：wfActionButtons 依赖的流程状态
+     * 挂在表单实例上、多数不是响应式的。重渲染的触发点是 f.hasWf（它在 form-render
+     * 的 data 里）与 widget.widgetList —— 流程就绪、按钮显隐变化时都会重算，
+     * 底栏跟着出现或消失。
+     */
+    hasBottomButtons() {
+      return this.bottomButtons().length > 0;
+    },
     /**
      * 平铺的按钮。宽度由 CSS 的 flex:1 等分决定 ——
      * 1 个铺满、2 个各一半、3 个各三分之一，不需要在这里算。

package/src/components/xform/form-render/container-item/list-h5-item.vue

@@ -67,7 +67,7 @@
     </div>
     <div class="h5-list-box">
       <div
-        v-for="(row, rowIndex) in fieldModel"
+        v-for="(row, rowIndex) in visibleRows"
         :key="rowIndex"
         class="item"
         @click="onRowClick(row)"
@@ -397,6 +397,19 @@
                   <p>产地：广东佛山</p>
                 </div>-->
       </div>
+      <!-- 折叠尾行：详情里挂的明细列表默认只出 H5_LIST_COLLAPSE_SIZE 条，
+           点一次展开全部（不给「收起」，见 expandAllRows 的注释）。
+           摆在 .h5-list-box 里当最后一个子元素，跟着它的内边距与卡片对齐。
+           样式见 styles/h5.scss 块 I4。 -->
+      <div
+        class="h5-list-more"
+        v-if="collapsedRest > 0"
+        @click="expandAllRows"
+      >
+        <span>{{ $t1("更多") }}</span>
+        <span class="h5-list-more-count">（{{ collapsedRest }}）</span>
+        <i class="el-icon-arrow-down"></i>
+      </div>
     </div>
     <div class="vxe-grid" v-if="widget.options.isQueryTable">
       <div class="vxe-grid&#45;&#45;pager-wrapper">
@@ -752,6 +765,11 @@ const baseRefUtil = {
 };
 
 const defaultPageSize = 2;
+
+/* H5 详情里挂的明细列表，折叠态露出的行数。
+   写死而不做成表单选项：与 detail-h5-item 的 H5_BOTTOM_MAX_BUTTONS 同理 ——
+   做成 options 后，已保存的表单会锁住旧值，改原型默认值不生效，反成绊脚石。 */
+const H5_LIST_COLLAPSE_SIZE = 5;
 export default {
   name: "list-h5-item",
   components: {
@@ -827,11 +845,16 @@ export default {
       keyword: null,
 
       checkItemIds: [],
+      /* 「更多」是否点过。折叠只在详情里挂的明细列表上生效，见 collapsible */
+      showAllRows: false,
     };
   },
   watch: {
     fieldModel(val) {
       this.formModel[this.fieldKeyName] = val || [];
+      /* 换了一整批数据（setValue / 重新取数）就退回折叠态。
+         push 追加行不会触发这里，那条路径由 addTableData 自己展开。 */
+      this.showAllRows = false;
     },
   },
   computed: {
@@ -882,6 +905,32 @@ export default {
       // 明细卡片：只有一列时不抽标题 —— 抽走字段区就空了，不如照常当字段出
       return visible.length < 2 ? null : main;
     },
+    /**
+     * 是否走折叠（默认只出 H5_LIST_COLLAPSE_SIZE 条 + 「更多」尾行）。
+     * 两个条件缺一不可，见 isInDetailH5 与下面这条：
+     * 查询选择列表(isQueryTable)是整屏选数据用的、自己带分页器，再截断会跟分页打架。
+     */
+    collapsible() {
+      return !this.widget.options.isQueryTable && this.isInDetailH5();
+    },
+    /* 折起来没露出的行数，同时是「更多」尾行的显示条件 */
+    collapsedRest() {
+      if (!this.collapsible || this.showAllRows) return 0;
+      let total = (this.fieldModel || []).length;
+      return total > H5_LIST_COLLAPSE_SIZE ? total - H5_LIST_COLLAPSE_SIZE : 0;
+    },
+    /**
+     * 真正渲染的行。
+     * ★ 只能从头切：rowIndex 在模板里同时当 subFormRowIndex / formItemProp 的下标
+     * （行内控件靠它定位 formModel 里的那一行）和 deleteRow 的下标，从头切时它与
+     * fieldModel 的下标恒等，不必再做一层映射。
+     * 传给格式化函数的 items 仍是整份 fieldModel（模板里没改），那是数据不是视图。
+     */
+    visibleRows() {
+      let rows = this.fieldModel || [];
+      if (this.collapsedRest <= 0) return rows;
+      return rows.slice(0, H5_LIST_COLLAPSE_SIZE);
+    },
     columns() {
       let tableColumns = this.widget.options.tableColumns;
       let newColumns = [];
@@ -1009,6 +1058,36 @@ export default {
     this.unregisterFromRefList();
   },
   methods: {
+    /**
+     * 是否挂在 H5 详情容器里 —— 折叠只对这种场景生效：list-h5 也能当整屏列表用，
+     * 整屏的不该只出 5 条。
+     *
+     * 沿父链找 detail-h5-item，中间隔着 transition-group / 卡片容器都无所谓；
+     * 遇到弹框/抽屉容器就停 —— 弹框里那份是独立的一屏，不算详情里挂的明细。
+     * 结果缓存在非响应式实例属性上：父链在实例生命周期内不变，而 collapsible
+     * 是渲染期求值的 computed，不能每次都走一遍链。
+     */
+    isInDetailH5() {
+      if (this._inDetailH5 === undefined) {
+        this._inDetailH5 = false;
+        let vm = this.$parent;
+        while (vm) {
+          let name = vm.$options.name;
+          if (name === "vf-dialog-item" || name === "vf-drawer-item") break;
+          if (name === "detail-h5-item") {
+            this._inDetailH5 = true;
+            break;
+          }
+          vm = vm.$parent;
+        }
+      }
+      return this._inDetailH5;
+    },
+    /* 「更多」：一次性展开全部，不再收回 —— 详情里这一段本来就短，
+       展开后再给个「收起」只会多一次误点。重新取数时 watch 会退回折叠态。 */
+    expandAllRows() {
+      this.showAllRows = true;
+    },
     openAdvancedSearchDialog() {
       /*let formData = this.formModel;
       let advancedFormData = {};
@@ -1582,6 +1661,9 @@ export default {
         let newData = this.createNewTableData();
         tableRows.push(newData);
       }
+      /* 追加的行落在末尾，折叠态下会被藏住 —— 加完就展开。
+         这里是 push 改数组，watch fieldModel 不触发，必须自己来。 */
+      this.showAllRows = true;
       // this.formModel[this.fieldKeyName] = this.$baseLodash(this.fieldModel)
       // this.fieldModel = tableRows
       // $grid.loadData(tableRows);

package/src/components/xform/styles/h5.scss

@@ -473,6 +473,16 @@ $xformH5Size:14px;
   }
 }
 
+/* ============ 块 G2：底栏没按钮时把那一格还给内容区 ============ */
+/* 底栏一个按钮都没有时 detail-h5-item 不渲染它，并在根节点打 h5-no-bottom-btns。
+   块 G 的 .h5-detail-body 高度是 calc(100% - 底栏 - 标题栏) 硬减出来的，
+   不跟着改的话底部会空出一条 56px 的白带（底栏没了，减法还在）。
+   对手是块 G 里 .xform-h5 .h5-detail-body 那条 (0,2,0) + !important，
+   本方 (0,4,0) + !important，靠段数取胜，不依赖书写顺序。 */
+.xform-h5 .h5-detail-wrap.h5-no-bottom-btns .h5-detail-body {
+  height: calc(100% - $xformH5HeaderHeight) !important;
+}
+
 /* ★ 页面态必须定死一屏，不能用 min-height。
    实测宿主链没有确定高度（#containt 只有背景/圆角，没有 height），
    .designer-view{height:100%} → .xform-h5{height:100%} 一路塌陷成 auto；
@@ -843,6 +853,34 @@ $xformH5Size:14px;
   }
 }
 
+/* ============ 块 I4：明细列表的「更多」尾行 ============ */
+/* 详情里挂的明细列表默认只出 5 条（list-h5-item 的 H5_LIST_COLLAPSE_SIZE），
+   这一行是展开入口，点一次出全部、自己消失。
+   它是 .h5-list-box 的最后一个子元素，横向跟着那层 12px 内边距与卡片对齐；
+   卡片自带 12px 下边距（本文件块「查看角标」那段），这里不再叠上边距。
+   无对手规则，(0,3,0) 一条就够。 */
+.xform-h5 .h5-list-box .h5-list-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  border-radius: $xformH5CardRadius;
+  background: #fff;
+  border: solid 1px #eee;
+  color: $baseColor;
+  font-size: 13px;
+  cursor: pointer;
+
+  .h5-list-more-count {
+    color: #999;
+  }
+
+  i {
+    margin-left: 2px;
+    font-size: 12px;
+  }
+}
+
 /* ============ 块 J：附件（VabUpload 列表的 H5 行式版式） ============ */
 /* 这一块的第一版是照抄 bill_setting/h5.scss 的 74px 方格口径，实测把附件压没了、
    已撤回；那套 DOM 里 .el-upload-list__item-thumbnail 是 item 的直接子元素，而
@@ -942,6 +980,7 @@ $xformH5Size:14px;
       .el-image {
         width: 100%;
         height: 100%;
+        img{width:56px;height:56px}
       }
 
       img {

package/src/views/bd/setting/form_template/formTemplateType.js

@@ -36,7 +36,7 @@ export function getTemplateTypeByFormCode(formCode) {
 }
 
 /**
- * 进入设计器时的默认布局模式（临时模式：仅入口默认值，用户仍可手动切换）
+ * 进入设计器时的布局模式：由模板类型决定，进入后不允许在工具栏切换
  */
 export function getDesignerLayoutType(formCode) {
   return isH5FormTemplate(formCode) ? "H5" : "PC";

package/src/views/bd/setting/form_template/mixins/list.js

@@ -228,7 +228,7 @@ modules = {
       }
     },
     openDesingerDialog(row, callback, readonly = false) {
-      /* 移动端模板进设计器默认 H5 模式（临时模式，工具栏仍可手动切回 PC） */
+      /* 布局模式跟随模板类型，移动端模板进设计器为 H5，且工具栏不可切换 */
       this.designerLayoutType = getDesignerLayoutType(row.formCode);
       this.formCode = row.formCode;
       this.formName = row.formName;