cloud-web-corejs 1.0.281 → 1.1.0-dev.5

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>