cloud-web-corejs 1.0.54-dev.810 → 1.0.54-dev.812

package/src/components/xform/form-designer/setting-panel/propertyRegister.js

@@ -27,6 +27,7 @@ const COMMON_PROPERTIES = {
   border: "border-editor",
   labelWidth: "labelWidth-editor",
   labelHidden: "labelHidden-editor",
+  h5Span: "h5Span-editor",
   rows: "rows-editor",
   required: "required-editor",
   // 'requiredHint': 'requiredHint-editor',
@@ -71,6 +72,7 @@ const COMMON_PROPERTIES = {
   fileTypes: "fileTypes-editor",
   customClass: "customClass-editor",
   styleTitClass: "styleTitClass-editor",
+  styleTempClass: "styleTempClass-editor",
   styleTableClass: "styleTableClass-editor",
   iconClass: "iconClass-editor",
   echartHeight: "echartHeight-editor",
@@ -108,6 +110,7 @@ const COMMON_PROPERTIES = {
   pull: "pull-editor",
   height: "height-editor",
   detailContainer: "detail-editor",
+  detailTempContainer: "detail-temp-editor",
   detailPlainContainer: "detail-plain-editor",
   detailPaneContainer: "detail-pane-editor",
   vabSearchField: "vabSearchField-editor",
@@ -121,6 +124,7 @@ const COMMON_PROPERTIES = {
   detailH5Container: "detail-h5-editor",
   h5Card: "h5-card-editor",
   listH5: "list-h5-editor",
+  itemStyle: "itemStyle-editor",
   formScriptEnabled: "formScriptEnabled-editor",
   textFlag: "textFlag-editor",
   showRuleFlag: "showRuleFlag-editor",

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -445,6 +445,26 @@ export const containers = [
       customClass: ""
     }
   },*/
+  {
+    type: "detail-temp",
+    category: "container",
+    icon: "form",
+    commonFlag: !0,
+    layoutType: "PC",
+    panes: [],
+    widgetList: [],
+    options: {
+      name: "",
+      hidden: !1,
+      label: "模板模块",
+      detailTempContainer: true,
+      styleTempClass: 'd-temp-1',
+      customClass: "",
+      wfEnabled: false,
+      onCreated: "",
+      onMounted: "",
+    },
+  },
   {
     type: "detail",
     category: "container",
@@ -548,6 +568,7 @@ export const containers = [
       detailH5Container: true,
       // colHeight: null,
       customClass: "",
+      // 底栏平铺个数不做成选项，写死在 detail-h5-item 的 H5_BOTTOM_MAX_BUTTONS（=3）
       wfEnabled: false,
       onCreated: "",
       onMounted: "",
@@ -573,6 +594,8 @@ export const containers = [
       listH5: true,
       // colHeight: null,
       customClass: "",
+      // 明细行样式：'plain'=原有朴素列表（默认，保持存量表现）；'card'=卡片皮肤
+      itemStyle: "plain",
       isQueryTable: false,
 
       accessUrl: null,
@@ -4548,6 +4571,7 @@ export const widgetPanelOrder = {
     "detail-tabs",
     "detail-plain",
     "detail-pane",
+    "detail-temp",
     "tree-pane",
     "tree",
     "vf-dialog",
@@ -4629,18 +4653,46 @@ export const widgetPanelOrder = {
   ],
 };
 
+/**
+ * H5 版式：所有表单字段统一具备 h5Span（整宽/半宽）。
+ *
+ * 为什么用后处理而不是在 42 个字段定义里逐个展开 ...defaultH5Config：
+ *   1) 一处逻辑覆盖全部字段，不会漏；
+ *   2) 顺带覆盖 extension 通过 add*Schema 动态注册的组件；
+ *   3) 用函数调用而非展开运算符，不踩本文件头部注释里那个 Babel TDZ 的坑。
+ *
+ * 属性面板显不显示「H5 占宽」由 designer.hasConfig 决定，它查的是**原型 widget
+ * 的 options**（不是实例），所以必须在这里写进原型。
+ * 详见 docs/2026-08 xform H5 P0 实现规格.md §3.1。
+ */
+export const defaultH5Config = {
+  h5Span: "full", // 'full' | 'half'
+};
+
+function applyH5FieldDefaults(schema) {
+  if (!schema || !schema.formItemFlag || !schema.options) return schema;
+  if (!Object.prototype.hasOwnProperty.call(schema.options, "h5Span")) {
+    Object.assign(schema.options, defaultH5Config);
+  }
+  return schema;
+}
+
+[basicFields, advancedFields, businessFields, customFields].forEach((list) =>
+  list.forEach(applyH5FieldDefaults)
+);
+
 export function addContainerWidgetSchema(containerSchema) {
   containers.push(containerSchema);
 }
 
 export function addBasicFieldSchema(fieldSchema) {
-  basicFields.push(fieldSchema);
+  basicFields.push(applyH5FieldDefaults(fieldSchema));
 }
 
 export function addAdvancedFieldSchema(fieldSchema) {
-  advancedFields.push(fieldSchema);
+  advancedFields.push(applyH5FieldDefaults(fieldSchema));
 }
 
 export function addCustomWidgetSchema(widgetSchema) {
-  customFields.push(widgetSchema);
+  customFields.push(applyH5FieldDefaults(widgetSchema));
 }

package/src/components/xform/form-render/container-item/data-table-mixin.js

@@ -68,6 +68,7 @@ import {
   isTemporaryTreeKey,
   syncTreeKeyReferences,
   sanitizeTreeRow,
+  stripTreeContainers,
 } from "../../utils/treeTableUtil";
 import { tableTreeMixins } from "../../../../mixins/tableTree/index.js";
 
@@ -3570,7 +3571,7 @@ modules = {
         let newData = this.createNewTableData();
         tableRows.push(newData);
       }
-      this.setValue(tableRows);
+      this.setValue(this.stripTreeContainerRows(tableRows));
       this.$nextTick(() => {
         this.handleWbs();
       });
@@ -4557,7 +4558,7 @@ modules = {
               await reconcileGrid.clearActived();
             }
             if (rebuildTreeAfterSave && !responseAlreadyApplied) {
-              this.setValue(treeTableRows);
+              this.setValue(this.stripTreeContainerRows(treeTableRows));
               treeSnapshotApplied = true;
               await new Promise((resolve) => this.$nextTick(resolve));
             }
@@ -4729,7 +4730,7 @@ modules = {
         } else {
           tableRows.splice(0, 0, newRow);
         }
-        this.setValue(tableRows);
+        this.setValue(this.stripTreeContainerRows(tableRows));
         this.$nextTick(() => {
           this.handleWbs();
           if (isEditTable) {
@@ -4751,7 +4752,7 @@ modules = {
           } else {
             tableRows.splice(0, 0, newRow);
           }
-          this.setValue(tableRows);
+          this.setValue(this.stripTreeContainerRows(tableRows));
           this.$nextTick(() => {
             this.handleWbs();
             // setValue 已浅克隆所有行，obj.row 是失效引用，须按 _X_ROW_KEY 找回新行
@@ -4839,7 +4840,7 @@ modules = {
       });
       this.validateNewTreeRows(newRows, treeContext);
       tableRows.push(...newRows);
-      this.setValue(tableRows);
+      this.setValue(this.stripTreeContainerRows(tableRows));
       this.$nextTick(() => {
         this.handleWbs();
         if (parent) {
@@ -4848,6 +4849,26 @@ modules = {
         }
       });
     },
+    /**
+     * 去掉 VXE 建树时写回行对象的容器字段（children / mapChildren）。
+     *
+     * 删除、排序这类「改扁平数组再整表重载」的操作必须先剥容器：容器是上一次
+     * 渲染的产物，已被移出数组的节点仍挂在存活父行下，setValue 里的
+     * canonicalizeTreeInput 会顺着容器把它们收回来，删除与排序因此静默失效。
+     *
+     * 只对 isTreeTable（强制 transform，父子关系由 parentField 表达）生效；
+     * 靠 children 表达层级的表原样返回，剥掉会丢层级。
+     * @param {Array} rows 取自表单模型的扁平活动行。
+     * @returns {Array} 可安全交给 setValue 的行数组。
+     */
+    stripTreeContainerRows(rows) {
+      if (!this.widget.options.isTreeTable) {
+        return rows || [];
+      }
+      return stripTreeContainers(rows || [], {
+        fields: this.getTreeFields(),
+      });
+    },
     /**
      * 收集节点全部后代的 _X_ROW_KEY（不含节点自身）。
      * 兼容嵌套结构（children 字段）与扁平结构（parentField 关联）两种数据形态。
@@ -4927,7 +4948,7 @@ modules = {
         });
       }
       let newRows = tableRows.filter((item) => !delKeys.has(item._X_ROW_KEY));
-      this.setValue(newRows);
+      this.setValue(this.stripTreeContainerRows(newRows));
       this.$nextTick(() => {
         this.handleWbs();
       });
@@ -5185,7 +5206,7 @@ modules = {
         } else {
           tableRows.splice(0, 0, newRow);
         }
-        this.setValue(tableRows);
+        this.setValue(this.stripTreeContainerRows(tableRows));
         this.$nextTick(() => {
           this.handleWbs();
         });
@@ -5202,7 +5223,7 @@ modules = {
           } else {
             tableRows.splice(0, 0, newRow);
           }
-          this.setValue(tableRows);
+          this.setValue(this.stripTreeContainerRows(tableRows));
           this.$nextTick(() => {
             this.handleWbs();
             // setValue 已浅克隆所有行，obj.row 是失效引用，须按 _X_ROW_KEY 找回新行
@@ -5399,7 +5420,7 @@ modules = {
             );
             tableRows.splice(currentIndex, 1);
             tableRows.splice(prevIndex, 0, row);
-            this.setValue(tableRows);
+            this.setValue(this.stripTreeContainerRows(tableRows));
             this.$nextTick(() => {
               this.handleWbs();
             });
@@ -5448,7 +5469,7 @@ modules = {
             );
             tableRows.splice(currentIndex, 1);
             tableRows.splice(nextIndex, 0, row);
-            this.setValue(tableRows);
+            this.setValue(this.stripTreeContainerRows(tableRows));
             this.$nextTick(() => {
               this.handleWbs();
             });
@@ -5525,7 +5546,7 @@ modules = {
         rows.forEach((row, index1) => {
           items.splice(index + index1, 0, row);
         });
-        this.setValue(items);
+        this.setValue(this.stripTreeContainerRows(items));
         this.$nextTick(() => {
           this.handleWbs();
         });
@@ -5820,7 +5841,7 @@ modules = {
       if (this.designState) return;
       this.$on("setFormData", (o) => {
         let rows = this.formModel[this.fieldKeyName] || [];
-        this.setValue(rows);
+        this.setValue(this.stripTreeContainerRows(rows));
       });
     },
     /** @param {Object} widget 组件 schema。@param {Array<String>} ignoreFields 忽略字段。@returns {Boolean} 是否处理禁用状态。 */

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

@@ -12,7 +12,9 @@
   <container-item-wrapper :widget="widget">
     <div class="h5-detail-wrap grid-container" :class="[customClass]" :ref="widget.id">
       <div class="h5-header">{{ widget.options.label }}</div>
-      <div>
+      <!-- 唯一滚动区：标题栏与底部动作栏 flex:none 固定，内容在这里滚。
+           样式见 components/xform/styles/h5.scss 块 G（.h5-detail-body 必须有 min-height:0） -->
+      <div class="h5-detail-body">
         <transition-group name="fade" tag="div" class="form-widget-list">
           <template v-if="!!widget.panes && (widget.panes.length > 0)">
             <template v-for="(subWidget, swIdx) in widget.panes">
@@ -39,12 +41,24 @@
             </template>
           </template>
         </transition-group>
+        <!-- 移动版流程面板：自给自足（mounted 里自己取数），只需给 wfOption。
+             全部用方法求值而非 computed —— 流程状态挂在表单实例上且非响应式，
+             computed 会缓存住早于流程就绪时的空值（见 wfStart 的注释）。
+             样式见 styles/h5.scss 块 L。 -->
+        <mobileWfContent v-if="showWfPanel()" ref="wfContent" :wfOption="getWfOption()"
+                         :defaultShowWfContent="getDefaultShowWfContent()"
+                         :hideActions="true"/>
       </div>
       <div class="h5-fixed-bottom-btns ">
         <transition-group name="fade" tag="div" class="form-widget-list">
-          <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
-            <template v-for="(subWidget, swIdx) in widget.widgetList">
-              <template v-if="'container' === subWidget.category">
+          <template v-if="visibleButtons().length > 0">
+            <template v-for="(subWidget, swIdx) in visibleButtons()">
+              <!-- 审批动作按钮，不是 widget，单独渲染。只出文字不带图标 -->
+              <div class="field-wrapper" v-if="subWidget.__builtin" :key="'b-' + subWidget.__builtin">
+                <el-button class="button-sty" :type="subWidget.type"
+                           @click="subWidget.onClick">{{ subWidget.label }}</el-button>
+              </div>
+              <template v-else-if="'container' === subWidget.category">
                 <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx"
                            :parent-list="widget.widgetList"
                            :index-of-parent-list="swIdx" :parent-widget="widget">
@@ -67,6 +81,25 @@
             </template>
           </template>
         </transition-group>
+        <!-- 超出的按钮收进纯图标下拉。它按内容宽（不参与等分），排在最右。
+             popper-class 而非嵌套作用域：el-dropdown-menu 默认 append-to-body，
+             菜单 DOM 会被挪到 body 下、脱离 .xform-h5，故样式写成顶层
+             .xform-h5-dropdown 选择器（见 styles/h5.scss）。 -->
+        <el-dropdown v-if="overflowButtons().length > 0" class="h5-more-dropdown"
+                     trigger="click" popper-class="xform-h5-dropdown">
+          <!-- 裸图标触发器，不套 el-button：底栏在页面底部、菜单往上弹，故用向上箭头 -->
+          <i class="el-icon-arrow-up h5-more-icon"></i>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item v-for="(subWidget, swIdx) in overflowButtons()" :key="swIdx">
+              <el-button v-if="subWidget.__builtin" class="button-sty" :type="subWidget.type"
+                         @click="subWidget.onClick">{{ subWidget.label }}</el-button>
+              <component v-else :is="subWidget.type + '-widget'" :field="subWidget" :designer="null"
+                         :parent-list="widget.widgetList"
+                         :index-of-parent-list="swIdx + visibleButtons().length"
+                         :parent-widget="widget"/>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
       </div>
     </div>
 
@@ -83,7 +116,18 @@ import containerItemMixin from "./containerItemMixin"
 import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index'
 
 
-import {initWf} from '../../../../components/wf/wfUtil'
+import {getVisibleWfActionItems} from '../../../../components/wf/wfActionItems'
+
+/* H5 底栏只放这四个审批动作，其余（催办/加签/减签/沟通/修改候选人/撤回…）不进底栏。
+   ★ 这里的书写序就是底栏的显示序：通过 → 驳回 → 中断 → 转办。 */
+const H5_WF_ACTION_KEYS = ['agree', 'reject', 'manual', 'transfer'];
+
+/* 底栏平铺的按钮个数上限，超出的收进最右侧的「更多」图标下拉 ——
+   即一行最多「3 个操作按钮 + 1 个更多图标」。
+   写死而不做成表单选项：这个数由底栏宽度决定，配大了会挤成一团，
+   而且此前做成 options.maxVisibleButtons 后，已保存的表单会锁住旧值，
+   改了原型默认值也不生效，反成绊脚石。 */
+const H5_BOTTOM_MAX_BUTTONS = 3;
 
 export default {
   name: "detail-h5-item",
@@ -92,6 +136,11 @@ export default {
   components: {
     ContainerItemWrapper,
     ...FieldComponents,
+    /* 懒加载：PC 版式的表单不该把移动 wf 那坨打进主包。
+       注：content.vue 的根节点是 <h5-card-pane>，Vue 2 的组件解析只查自身
+       components 与全局注册、不查父组件的局部注册，所以那个依赖必须由
+       content.vue 自己声明（已在该文件补上），在这里注册是没用的。 */
+    mobileWfContent: () => import('../../../../components/mobile/wf/content.vue'),
   },
   props: {
     widget: Object,
@@ -103,19 +152,142 @@ export default {
   },
   mounted() {
     this.handleOnMounted();
-    this.$nextTick(() => {
-      this.createWf();
-    })
   },
   beforeDestroy() {
     this.unregisterFromRefList()
   },
   data() {
-    return {
-      wfInfo: {}
-    }
+    return {}
   },
   methods: {
+    /**
+     * 流程状态实时求值 —— 与 PC 的 detail-item.wfStart() 同口径。
+     *
+     * 取数不归本组件管：form-render 的 loadDefaultEntityData 在
+     * formConfig.wfEnabled 为真时就已经初始化好流程，把结果挂在表单实例上
+     * （wfStartOption / wfStartCtx / wfParam / hasWf），入参也在那边算好
+     * （objId = dataId、wfCode = reportTemplate.objTypeCode，见 indexMixin:1394）。
+     *
+     * 必须用方法而不是 computed：wfStartOption / wfStartCtx / wfParam **都不在
+     * form-render 的 data 里**（只有 hasWf 在），不是响应式的，computed 会把
+     * 早于流程就绪时求得的空值缓存住。监听 hasWf 也不行 —— 单据没启动流程时
+     * 它是 false 赋 false，watcher 根本不触发。
+     *
+     * 注意：容器 options 上那个 wfEnabled 是旧路径的开关，与表单设置里的
+     * formConfig.wfEnabled 不是一回事，这里一律以表单实例的状态为准。
+     */
+    wfStart() {
+      let f = this.getFormRef && this.getFormRef();
+      if (!f || !f.wfStartOption) return null
+      let param = f.wfParam || {};
+      return {
+        ctx: f.wfStartCtx || f.$parent,
+        option: f.wfStartOption,
+        param: param,
+        hasWf: !!(f.hasWf || param.hasWf),
+        wfInfo: param.wfInfo || {},
+        taskParam: param.taskParam || {},
+      };
+    },
+    /**
+     * 映射成移动版 content.vue 要的 wfOption。
+     * 结果缓存在非响应式实例属性上：模板里调用的方法每次渲染都会执行，
+     * 每次返回新对象会让子组件 props 无谓变化；而在渲染期写 data 会触发重渲染循环。
+     */
+    getWfOption() {
+      if (this._wfOptionCache) return this._wfOptionCache
+      let ws = this.wfStart();
+      if (!ws) return null
+      let opt = ws.option;
+      let serviceId = opt.serviceId || "user";
+      this._wfOptionCache = {
+        objId: opt.objId,
+        wfCode: opt.wfCode,
+        serviceId: serviceId,
+        wf_prefix: "/" + serviceId,
+        startParam: opt.startParam,
+        startConfirmText: opt.startConfirmText,
+        parentVue: ws.ctx,
+      };
+      return this._wfOptionCache
+    },
+    /* 流程面板：已启动流程且非预览态才渲染 */
+    showWfPanel() {
+      let ws = this.wfStart();
+      return !this.previewState && !!ws && ws.hasWf;
+    },
+    /* 宿主通过 $attrs 传「进来就展开流程区」，与 PC 版 wfUtil 同口径 */
+    getDefaultShowWfContent() {
+      let ws = this.wfStart();
+      let target = ws && ws.ctx;
+      return !!(target && target.$attrs && target.$attrs.defaultShowWfContent);
+    },
+    /* 注：H5 底栏不放「流程启动」和「修改单据」两个内建按钮
+       （PC 的 wfUtil 与移动版 mixin 里都有，这里按需求去掉），
+       底栏只有审批动作 + 业务按钮。 */
+    /**
+     * 审批动作按钮（通过/驳回/中断/转办）。
+     *
+     * 复用 PC 的动作注册表 wfActionItems —— 它的 run 是 (wfVm) => wfVm.openAgreeDialog()
+     * 这种形式，而这些方法名在移动版 content.vue 里完全一致，所以同一份注册表两边通用。
+     *
+     * show 用表单实例上的 wfInfo 求值（读 f.hasWf 会建立响应式依赖，流程就绪时能重渲染）；
+     * run 则要真实的面板实例，点击时才从 $refs 取 —— 那时面板一定已经渲染好了。
+     * 面板内那一排同名按钮由 :hideActions="true" 藏掉，不会出现两份。
+     */
+    wfActionButtons() {
+      let ws = this.wfStart();
+      if (!ws || !ws.hasWf || this.previewState) return []
+      // 只用 wfInfo 算显隐，不依赖面板实例（它可能还没渲染）
+      let items = getVisibleWfActionItems({ wfInfo: ws.wfInfo });
+      let byKey = {};
+      items.forEach((item) => {
+        byKey[item.key] = item;
+      });
+      // 按 H5_WF_ACTION_KEYS 取，顺序由它决定 —— 不能用 items.filter，
+      // 那样保留的是注册表的定义序（通过/中断/驳回/转办），与要求的顺序不一致
+      return H5_WF_ACTION_KEYS.map((key) => byKey[key])
+        .filter((item) => !!item)
+        .map((item) => ({
+          __builtin: "wfAction-" + item.key,
+          label: item.i18nPath
+            ? this.$t2(item.defaultLabel, item.i18nPath)
+            : item.defaultLabel,
+          // 注册表里的 iconClass/elIcon 不取：H5 底栏按钮只出文字
+          type: item.buttonType || "primary",
+          onClick: () => {
+            let wfVm = this.$refs.wfContent;
+            if (!wfVm) return
+            item.run(wfVm);
+          },
+        }));
+    },
+    /**
+     * 底栏按钮：审批动作在前（审批中的单据以审批为主），然后是流程启动/修改单据，
+     * 最后是业务按钮。hidden 的业务按钮先剔除，否则「更多」里会留空条目
+     * （static-content-wrapper 内部只是 v-show 隐藏，el-dropdown-item 仍占一行）。
+     */
+    bottomButtons() {
+      let widgetButtons = (this.widget.widgetList || []).filter(
+        (w) => !w.options || !w.options.hidden
+      );
+      return this.wfActionButtons().concat(widgetButtons);
+    },
+    /**
+     * 平铺的按钮。宽度由 CSS 的 flex:1 等分决定 ——
+     * 1 个铺满、2 个各一半、3 个各三分之一，不需要在这里算。
+     */
+    visibleButtons() {
+      let list = this.bottomButtons();
+      if (list.length <= H5_BOTTOM_MAX_BUTTONS) return list;
+      return list.slice(0, H5_BOTTOM_MAX_BUTTONS);
+    },
+    /** 超出上限的按钮，收进底栏最右侧那个纯图标下拉 */
+    overflowButtons() {
+      let list = this.bottomButtons();
+      if (list.length <= H5_BOTTOM_MAX_BUTTONS) return [];
+      return list.slice(H5_BOTTOM_MAX_BUTTONS);
+    },
     reload() {
       this.getFormRef().$parent.$baseReload()
     },
@@ -123,27 +295,6 @@ export default {
       if (!!this.previewState) return
       this.getFormRef().saveForm();
     },
-    createWf() {
-      if (!!this.previewState || !this.widget.options.wfEnabled) return
-      let formTarget = this.getFormRef();
-      let formData = formTarget.formData;
-      if (formData && formData.object_foreign_id) {
-        let reportTemplate = formTarget.reportTemplate;
-        let formCode = reportTemplate.formCode;
-        let option = {
-          objId: formData.object_foreign_id, //单据ID
-          wfCode: formCode, //流程编码
-          showStartBtn: true, //是否放出启动按钮,流程已启动时此参数失效
-          serviceId: 'user',
-          startConfirmText: () => formTarget.getWfStartConfirmText(),
-          callback: ({wfInfo}) => {
-            this.wfInfo = wfInfo;
-          }
-        }
-        initWf.call(formTarget.$parent, option);
-      }
-
-    }
   },
 }
 </script>

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

@@ -0,0 +1,110 @@
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: https://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+<template>
+  <container-item-wrapper :widget="widget">
+    <div class="detail-temp-wrap" :class="[customClass]" :ref="widget.id">
+      <div class="detail-temp-box" v-for="(paneWidget, index) in widget.panes" :key="paneWidget.id || index" :class="widget.options.styleTempClass">
+        <div class="detail-temp-header">
+          <span class="detail-temp-label">{{ getI18nLabel(paneWidget.options.label) || '模块' }}</span>
+        </div>
+        <div class="detail-temp-body">
+          <template v-for="(subWidget, swIdx) in paneWidget.widgetList">
+            <template v-if="'container' === subWidget.category">
+              <component
+                :is="subWidget.type + '-item'"
+                :widget="subWidget"
+                :key="subWidget.id || swIdx"
+                :parent-list="paneWidget.widgetList"
+                :index-of-parent-list="swIdx"
+                :parent-widget="paneWidget"
+              >
+                <!-- 递归传递插槽 -->
+                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                  <slot :name="slot" v-bind="scope" />
+                </template>
+              </component>
+            </template>
+            <template v-else>
+              <component
+                :is="subWidget.type + '-widget'"
+                :field="subWidget"
+                :designer="null"
+                :key="subWidget.id || swIdx"
+                :parent-list="paneWidget.widgetList"
+                :index-of-parent-list="swIdx"
+                :parent-widget="paneWidget"
+              >
+                <!-- 递归传递插槽 -->
+                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                  <slot :name="slot" v-bind="scope" />
+                </template>
+              </component>
+            </template>
+          </template>
+        </div>
+      </div>
+    </div>
+  </container-item-wrapper>
+</template>
+
+<script>
+import emitter from '../../../../components/xform/utils/emitter'
+import i18n from "../../../../components/xform/utils/i18n"
+import refMixin from "../../../../components/xform/form-render/refMixin"
+import containerItemMixin from "./containerItemMixin"
+import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index'
+
+export default {
+  name: "detail-temp-item",
+  componentName: 'ContainerItem',
+  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  components: {
+    ...FieldComponents,
+  },
+  props: {
+    widget: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+  },
+  inject: ['refList', 'globalModel', 'previewState'],
+  computed: {
+    customClass() {
+      return this.widget.options.customClass || ''
+    }
+  },
+  watch: {
+    //
+  },
+  created() {
+    this.initRefList()
+    this.handleOnCreated();
+  },
+  mounted() {
+    this.handleOnMounted();
+  },
+  data() {
+    return {
+      showStatus: true,
+    }
+  },
+  methods: {
+    opeaShowCont() {
+      this.showStatus = !this.showStatus
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail-temp-wrap {
+  min-height: 50px;
+}
+</style>