cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

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()">
@@ -91,7 +98,7 @@
           <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"
+              <el-button v-if="subWidget.__builtin" class="button-sty h5-dropdown-button" :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"
@@ -116,7 +123,9 @@ import containerItemMixin from "./containerItemMixin"
 import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index'
 
 
-import {getVisibleWfActionItems} from '../../../../components/wf/wfActionItems'
+import {getVisibleWfActionItems} from '../../../../components/wf/wfActionItems'
+import { isWfInfoHidden } from '@base/components/wf/wfVisibility'
+import wfStartMixin from '@base/components/xform/mixins/wfStart'
 
 /* H5 底栏只放这四个审批动作，其余（催办/加签/减签/沟通/修改候选人/撤回…）不进底栏。
    ★ 这里的书写序就是底栏的显示序：通过 → 驳回 → 中断 → 转办。 */
@@ -132,7 +141,7 @@ const H5_BOTTOM_MAX_BUTTONS = 3;
 export default {
   name: "detail-h5-item",
   componentName: 'ContainerItem',
-  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  mixins: [emitter, i18n, refMixin, containerItemMixin, wfStartMixin],
   components: {
     ContainerItemWrapper,
     ...FieldComponents,
@@ -148,7 +157,8 @@ export default {
   inject: ['refList', 'sfRefList', 'globalModel', 'previewState'],
   created() {
     this.initRefList()
-    this.handleOnCreated();
+    this.handleOnCreated();
+    this.initWfStartSettings();
   },
   mounted() {
     this.handleOnMounted();
@@ -168,10 +178,8 @@ export default {
      * （wfStartOption / wfStartCtx / wfParam / hasWf），入参也在那边算好
      * （objId = dataId、wfCode = reportTemplate.objTypeCode，见 indexMixin:1394）。
      *
-     * 必须用方法而不是 computed：wfStartOption / wfStartCtx / wfParam **都不在
-     * form-render 的 data 里**（只有 hasWf 在），不是响应式的，computed 会把
-     * 早于流程就绪时求得的空值缓存住。监听 hasWf 也不行 —— 单据没启动流程时
-     * 它是 false 赋 false，watcher 根本不触发。
+     * 用方法统一 PC/H5 的实时取值口径。wfStartOption / wfStartCtx 已在 form-render
+     * 的 data 中声明，未启动流程时即使 hasWf 仍为 false，参数就绪也会触发重渲染。
      *
      * 注意：容器 options 上那个 wfEnabled 是旧路径的开关，与表单设置里的
      * formConfig.wfEnabled 不是一回事，这里一律以表单实例的状态为准。
@@ -191,7 +199,7 @@ export default {
     },
     /**
      * 映射成移动版 content.vue 要的 wfOption。
-     * 结果缓存在非响应式实例属性上：模板里调用的方法每次渲染都会执行，
+     * 结果缓存在非响应式实例属性上：模板里调用的方法每次渲染都会执行，
      * 每次返回新对象会让子组件 props 无谓变化；而在渲染期写 data 会触发重渲染循环。
      */
     getWfOption() {
@@ -214,7 +222,9 @@ export default {
     /* 流程面板：已启动流程且非预览态才渲染 */
     showWfPanel() {
       let ws = this.wfStart();
-      return !this.previewState && !!ws && ws.hasWf;
+      const formRef = this.getFormRef && this.getFormRef();
+      return !this.previewState && !!ws && ws.hasWf
+        && !isWfInfoHidden(formRef, ws.option) && !isWfInfoHidden(ws.ctx);
     },
     /* 宿主通过 $attrs 传「进来就展开流程区」，与 PC 版 wfUtil 同口径 */
     getDefaultShowWfContent() {
@@ -222,9 +232,15 @@ export default {
       let target = ws && ws.ctx;
       return !!(target && target.$attrs && target.$attrs.defaultShowWfContent);
     },
-    /* 注：H5 底栏不放「流程启动」和「修改单据」两个内建按钮
-       （PC 的 wfUtil 与移动版 mixin 里都有，这里按需求去掉），
-       底栏只有审批动作 + 业务按钮。 */
+    wfStartButtons() {
+      if (!this.showWfStartBtn()) return [];
+      return [{
+        __builtin: 'wfStart',
+        label: this.wfStartButtonName,
+        type: 'success',
+        onClick: () => this.startWf(),
+      }];
+    },
     /**
      * 审批动作按钮（通过/驳回/中断/转办）。
      *
@@ -235,8 +251,9 @@ export default {
      * run 则要真实的面板实例，点击时才从 $refs 取 —— 那时面板一定已经渲染好了。
      * 面板内那一排同名按钮由 :hideActions="true" 藏掉，不会出现两份。
      */
-    wfActionButtons() {
-      let ws = this.wfStart();
+    wfActionButtons() {
+      if (!this.showWfPanel()) return [];
+      let ws = this.wfStart();
       if (!ws || !ws.hasWf || this.previewState) return []
       // 只用 wfInfo 算显隐，不依赖面板实例（它可能还没渲染）
       let items = getVisibleWfActionItems({ wfInfo: ws.wfInfo });
@@ -263,7 +280,7 @@ export default {
         }));
     },
     /**
-     * 底栏按钮：审批动作在前（审批中的单据以审批为主），然后是流程启动/修改单据，
+     * 底栏按钮：审批动作在前（审批中的单据以审批为主），然后是流程启动，
      * 最后是业务按钮。hidden 的业务按钮先剔除，否则「更多」里会留空条目
      * （static-content-wrapper 内部只是 v-show 隐藏，el-dropdown-item 仍占一行）。
      */
@@ -271,7 +288,19 @@ export default {
       let widgetButtons = (this.widget.widgetList || []).filter(
         (w) => !w.options || !w.options.hidden
       );
-      return this.wfActionButtons().concat(widgetButtons);
+      return this.wfActionButtons().concat(this.wfStartButtons(), widgetButtons);
+    },
+    /**
+     * 底栏要不要出。与 visibleButtons/overflowButtons 同源（都走 bottomButtons），
+     * 不会出现「有按钮却不渲染」的错位。
+     *
+     * 用方法而非 computed，同本文件其余流程相关方法：wfActionButtons 依赖的流程状态
+     * 挂在表单实例上、多数不是响应式的。重渲染的触发点是 f.hasWf（它在 form-render
+     * 的 data 里）与 widget.widgetList —— 流程就绪、按钮显隐变化时都会重算，
+     * 底栏跟着出现或消失。
+     */
+    hasBottomButtons() {
+      return this.bottomButtons().length > 0;
     },
     /**
      * 平铺的按钮。宽度由 CSS 的 flex:1 等分决定 ——