cloud-web-corejs 1.0.284 → 1.0.285

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

@@ -1,136 +1,165 @@
-<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="grid-container" :key="widget.id"
-         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
-      <h5CardPaneWidget 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"></h5CardPaneWidget>
-
-    </div>
-  </container-wrapper>
-</template>
-<script>
-
-import h5CardPaneWidget from "../../../../../components/xform/form-designer/form-widget/container-widget/h5-card-pane-widget.vue";
-import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper.vue";
-import i18n from "../../../../../components/xform/utils/i18n";
-import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
-import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign";
-
-export default {
-  name: "h5-card-widget",
-  componentName: 'ContainerWidget',
-  mixins: [i18n, containerMixin, refMixinDesign],
-  inject: ['refList'],
-  components: {ContainerWrapper, h5CardPaneWidget},
-  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%;
-  }
-
-}
-
-.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>
+<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="grid-container" :key="widget.id"
+         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
+      <!-- 常驻选中把手（设计器专用）。h5卡片自己的可点区域会被它的卡片选项卡整块铺满
+           —— 拖入「H5详情」时默认就带三个（基础信息/明细信息/附件信息，见 designer.js
+           的 detail-h5 分支），一落地就点不中，只能「先选中里面的选项卡、再点返回上级」
+           才能打开它的属性面板，而增删/改名/排序选项卡都在那个面板里。
+           container-wrapper 的 drag-handler 帮不上忙：它只在**已经选中之后**才出现。
+           运行期走 h5-card-item，不含本文件，故只影响设计器画布。 -->
+      <div class="h5-card-handler" @click.stop="selectWidget(widget)">
+        {{ i18n2t(`designer.widgetLabel.${widget.type}`, `extension.widgetLabel.${widget.type}`) }}
+      </div>
+      <h5CardPaneWidget 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"></h5CardPaneWidget>
+
+    </div>
+  </container-wrapper>
+</template>
+<script>
+
+import h5CardPaneWidget from "../../../../../components/xform/form-designer/form-widget/container-widget/h5-card-pane-widget.vue";
+import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper.vue";
+import i18n from "../../../../../components/xform/utils/i18n";
+import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin";
+import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign";
+
+export default {
+  name: "h5-card-widget",
+  componentName: 'ContainerWidget',
+  mixins: [i18n, containerMixin, refMixinDesign],
+  inject: ['refList'],
+  components: {ContainerWrapper, h5CardPaneWidget},
+  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: 0 6px 6px;
+  outline: 1px dashed #336699;
+
+  > div {
+    height: 100%;
+  }
+
+  .form-widget-list {
+    // min-height: 28px;
+    height: 100%;
+  }
+
+}
+
+.grid-container.selected, .grid-cell.selected {
+  outline: 2px solid $--color-primary !important;
+}
+
+/* 把手条。★ 必须显式给高度：上面那条 `.grid-container > div{height:100%}` (0,1,1)
+   会把所有直接子元素拉满，本条 (0,2,0) 压得过。
+   负的左右外边距把它顶回容器的 6px 内边距之外，与虚线框贴齐。 */
+.grid-container > .h5-card-handler {
+  height: 20px;
+  line-height: 20px;
+  margin: 0 -6px 6px;
+  padding: 0 6px;
+  font-size: 12px;
+  color: $--color-primary;
+  background: transparentize($--color-primary, 0.88);
+  cursor: pointer;
+}
+
+.grid-container.selected > .h5-card-handler {
+  color: #fff;
+  background: $--color-primary;
+}
+
+.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>

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

@@ -274,9 +274,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .H5 .h5-fixed-bottom-btns {
-  bottom: 95px;
-}
+/* 原 ::v-deep .H5 .h5-fixed-bottom-btns{bottom:95px} 已删：本文件从未把 H5 类
+   绑到任何元素上，该选择器从来没生效过。H5 底栏已改为流内布局。 */
 
 .list-dialog {
   .el-dialog__body {

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

@@ -316,9 +316,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .H5 .h5-fixed-bottom-btns {
-  bottom: 95px;
-}
+/* 原 ::v-deep .H5 .h5-fixed-bottom-btns{bottom:95px} 已删：本文件从未把 H5 类
+   绑到任何元素上（layoutType 只存在 data 里），该选择器从来没生效过。
+   H5 底栏已改为流内布局（styles/h5.scss 块 G），自然贴弹框底部，无需此补丁。 */
 
 .list-dialog {
   .el-dialog__body {

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

@@ -485,9 +485,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-::v-deep .H5 .h5-fixed-bottom-btns {
-  bottom: 95px;
-}
+/* 原 ::v-deep .H5 .h5-fixed-bottom-btns{bottom:95px} 已删：本文件从未把 H5 类
+   绑到任何元素上，该选择器从来没生效过。H5 底栏已改为流内布局。 */
 ::v-deep .tree-container {
   height: 100%;
   .tree-box {

package/src/components/xform/form-designer/form-widget/field-widget/form-item-wrapper.vue

@@ -11,7 +11,12 @@
 <template>
   <div
     class="field-wrapper"
-    :class="{ 'design-time-bottom-margin': !!this.designer }"
+    :class="[
+      { 'design-time-bottom-margin': !!this.designer },
+      isH5Field ? 'h5-field' : '',
+      field.options.h5Span === 'half' ? 'h5-half' : '',
+      isH5BlockField ? 'h5-block' : '',
+    ]"
     v-show="!field.options.hidden || designState === true"
   >
     <div>
@@ -258,6 +263,18 @@ import {
   resolveTextMaskFlag,
 } from "../../../../../components/xform/utils/textMaskUtil";
 
+/* H5 版式下独占整行、左对齐的「宽内容」字段（见 isH5BlockField） */
+const H5_BLOCK_FIELD_TYPES = [
+  "vabUpload",
+  "vabUpload2",
+  "baseAttachment",
+  "singleUpload",
+  "picture-upload",
+  "file-upload",
+  "rich-editor",
+  "html-text",
+];
+
 export default {
   name: "form-item-wrapper",
   mixins: [i18n],
@@ -362,6 +379,27 @@ export default {
         : "";
     },
 
+    isH5BlockField() {
+      return H5_BLOCK_FIELD_TYPES.indexOf(this.field.type) > -1;
+    },
+
+    /**
+     * H5 版式的字段行锚点。整套 H5 行版式（styles/h5.scss 块 C/C1/C2/C3/D/E）都挂在
+     * .field-wrapper.h5-field 上，与容器解耦。
+     *
+     * 原先锚在 `.h5-detail-wrap .h5-item .h5-form-box`，而 `.h5-item` 只有
+     * h5-card-pane 会吐（h5-card-pane-item.vue），h5-card 吐的是 `.grid-cell`，
+     * 字段/表格直挂 detail-h5.panes 时（设计器的 draggable 是单一 dragGroup，
+     * 任何容器都能拖进去）连 `.h5-form-box` 都没有 —— 这些摆法下整套行版式会
+     * 静默落空，表现为「标签右对齐、值左对齐」（element 默认），与卡片内的
+     * 「标签左、值右」对不上。
+     *
+     * PC 版式不打这个类，故 PC 表单零影响。
+     */
+    isH5Field() {
+      return this.formConfig?.layoutType === "H5";
+    },
+
     subFormName() {
       return !!this.parentWidget ? this.parentWidget.options.name : "";
     },

package/src/components/xform/form-designer/form-widget/field-widget/singleUpload-widget.vue

@@ -15,7 +15,7 @@
                 :multi="field.options.limit!==1"
                 :limit="field.options.limit"
                 resultType="Array"
-                :edit="!field.options.disabled"
+                :edit="!field.options.disabled && !isReadMode"
                 @callback="submitFile"
                 :hideInfo="field.options.hideFileInfo"
                 :hideName="field.options.hideFileName"

package/src/components/xform/form-designer/form-widget/field-widget/vabUpload-widget.vue

@@ -26,13 +26,14 @@
       :file.sync="fieldModel"
       :hidePasteArea.sync="isH5"
       :uploadDialogCustomClass="isH5 ? 'dialog-upload-h5' : null"
+      :h5Preview="isH5"
       :pickPrivateProfile="false"
       :multi="field.options.limit !== 1"
       :limit="field.options.limit"
       :fileTypes="field.options.fileTypes || []"
       resultType="Array"
-      :edit="!field.options.disabled"
-      :remove="!field.options.hideRemoveButton"
+      :edit="!field.options.disabled && !isReadMode"
+      :remove="!field.options.hideRemoveButton && !isReadMode"
       @callback="submitFile"
       :hideInfo="field.options.hideFileInfo"
       :hideName="field.options.hideFileName"

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

@@ -93,6 +93,8 @@ modules = {
     readonly: Boolean,
     columnFlag: Boolean,
     sourceData: Object,
+    /* 进入设计器时的布局模式（模板自带 layoutType 时不覆盖）；传入即锁定，工具栏不允许再切换 */
+    defaultLayoutType: { type: String, default: "" },
   },
   data() {
     return {
@@ -147,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,
@@ -345,23 +349,51 @@ modules = {
       baseRefUtil.changeLocale(langName);
     },
 
+    /**
+     * 应用入口指定的布局模式：模板 JSON 自带 layoutType 时以模板为准，不覆盖
+     */
+    applyDefaultLayoutType(loadedFormJson) {
+      if (!this.defaultLayoutType) {
+        return;
+      }
+      if (loadedFormJson && loadedFormJson.formConfig?.layoutType) {
+        return;
+      }
+      this.designer.changeLayoutType(this.defaultLayoutType);
+    },
+
     setFormJson(formJson) {
       let modifiedFlag = false;
+      let loadedFormJson = null;
       if (!!formJson) {
         if (typeof formJson === "string") {
           let newFormJson = JSON.parse(formJson);
           this.upgradeFormJson(newFormJson);
+          loadedFormJson = newFormJson;
           modifiedFlag = this.designer.loadFormJson(newFormJson);
         } else if (formJson.constructor === Object) {
           this.upgradeFormJson(formJson);
+          loadedFormJson = formJson;
           modifiedFlag = this.designer.loadFormJson(formJson);
         }
 
         if (modifiedFlag) {
           this.designer.emitHistoryChange();
         }
+
+        this.applyDefaultLayoutType(loadedFormJson);
+        /* 模板 JSON 里的 layoutType 此刻才写入；左侧面板 mounted 时仍是默认 PC，
+           必须再筛一次，否则进入 H5 模板时仍展示 PC 容器（data-table/detail 等） */
+        this.$nextTick(() => {
+          this.loadWidgets();
+        });
       } else {
+        /* 新建模板 formViewContent 为空会走这里，同样要落入口默认布局 */
         this.clearDesigner();
+        this.applyDefaultLayoutType(null);
+        this.$nextTick(() => {
+          this.loadWidgets();
+        });
       }
     },
 
@@ -826,7 +858,9 @@ modules = {
       });
     },
     loadWidgets() {
-      this.$refs.widgetPanelRef.loadWidgets();
+      if (this.$refs.widgetPanelRef) {
+        this.$refs.widgetPanelRef.loadWidgets();
+      }
     },
     getBdEnv() {
       getBdFlag({

package/src/components/xform/form-designer/setting-panel/property-editor/container-list-h5/list-h5-editor.vue

@@ -59,11 +59,10 @@
               <el-input v-model="scope.row.prop"></el-input>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.columnWidth')" width="100" prop="width">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.width"></el-input>
-            </template>
-          </el-table-column>
+<!-- 「列宽」已移除：H5 明细卡片是 dl/dt/dd 排版，不读列宽 —— 它当年是从数据表格
+           那套列配置沿用过来的，运行期只被塞进一个拼错的键(witdh)、无人读取。
+           列在卡片里占整行还是半行，由下面的「H5列宽」控制。
+           存量模板里残留的 width 值不用清，读不到就是了。 -->
           <el-table-column :label="i18nt('designer.setting.visibleColumn')" width="70" prop="show">
             <template slot-scope="scope">
               <el-switch v-model="scope.row.show"></el-switch>
@@ -79,6 +78,21 @@
               <el-switch v-model="scope.row.showForRow"></el-switch>
             </template>
           </el-table-column>
+          <!-- H5 明细卡片里这个字段占整行还是半行（半行=一行两个）。
+               不配即整行，运行期判等只认 'half'（存量列读到 undefined 就是整行），
+               不能写成 !== 'full'。样式见 xform/styles/h5.scss 块 I2。
+               ★ 用 :value + $set 而不是 v-model：h5Span 是后加的键，存量列上没有，
+               Vue 2 只给赋值那一刻已存在的属性装 getter/setter，直接 v-model
+               新增属性追踪不到，选完不回显。 -->
+          <el-table-column label="H5列宽" width="110" prop="h5Span">
+            <template slot-scope="scope">
+              <el-select :value="scope.row.h5Span" clearable placeholder="整行"
+                         @input="v => $set(scope.row, 'h5Span', v)">
+                <el-option value="full" label="整行"></el-option>
+                <el-option value="half" label="半行(一行两个)"></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
           <el-table-column :label="i18nt('designer.setting.formatOfColumn')" width="200" prop="formatS">
             <template slot-scope="scope">
               <el-select v-model="scope.row.formatS" @change="changeFormatS(scope.row)" clearable>

package/src/components/xform/form-designer/setting-panel/property-editor/h5Span-editor.vue

@@ -0,0 +1,51 @@
+<template>
+  <!-- 仅 H5 版式下显示：该选项在 PC/Pad 版式没有任何作用 -->
+  <el-form-item
+    v-if="showEditor"
+    :label="i18nt('designer.setting.h5Span')"
+    class="form-item-label-top"
+  >
+    <el-tooltip
+      :enterable="false"
+      effect="dark"
+      :content="i18nt('designer.setting.h5SpanHelp')"
+      placement="top"
+      popper-class="tooltip-skin"
+    >
+      <el-radio-group v-model="optionModel.h5Span" size="mini">
+        <el-radio-button label="full">
+          {{ i18nt("designer.setting.h5SpanFull") }}
+        </el-radio-button>
+        <el-radio-button label="half">
+          {{ i18nt("designer.setting.h5SpanHalf") }}
+        </el-radio-button>
+      </el-radio-group>
+    </el-tooltip>
+  </el-form-item>
+</template>
+
+<script>
+import i18n from "../../../../../components/xform/utils/i18n";
+
+export default {
+  name: "h5Span-editor",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  computed: {
+    showEditor() {
+      let formConfig = this.designer && this.designer.formConfig;
+      return !!formConfig && formConfig.layoutType === "H5";
+    },
+  },
+  // 注意：不要在 created 里给老表单自动回填 "full"。
+  // upgradeWidgetConfig 给老表单补新增 option 时补的是 null（不是默认值），
+  // 此时两个 radio 都不选中是可接受表现（等价整宽）；自动回填会把所有老表单
+  // 标记成已修改。详见 docs/2026-08 xform H5 P0 实现规格.md §3.2 / §3.4。
+};
+</script>
+
+<style scoped></style>

package/src/components/xform/form-designer/setting-panel/property-editor/itemStyle-editor.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-form-item
+    :label="i18nt('designer.setting.itemStyle')"
+    class="form-item-label-top"
+  >
+    <el-tooltip
+      :enterable="false"
+      effect="dark"
+      :content="i18nt('designer.setting.itemStyleHelp')"
+      placement="top"
+      popper-class="tooltip-skin"
+    >
+      <el-radio-group v-model="optionModel.itemStyle" size="mini">
+        <el-radio-button label="plain">
+          {{ i18nt("designer.setting.itemStylePlain") }}
+        </el-radio-button>
+        <el-radio-button label="card">
+          {{ i18nt("designer.setting.itemStyleCard") }}
+        </el-radio-button>
+      </el-radio-group>
+    </el-tooltip>
+  </el-form-item>
+</template>
+
+<script>
+import i18n from "../../../../../components/xform/utils/i18n";
+
+export default {
+  name: "itemStyle-editor",
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+};
+</script>
+
+<style scoped></style>