cloud-web-corejs 1.0.276 → 1.0.277

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

@@ -1,224 +1,446 @@
-<!--
-/**
- * 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-wrap grid-container"
-      :class="[customClass]"
-      :ref="widget.id"
-    >
-      <div class="d-header clearfix">
-        <div class="fl">
-          <i class="el-icon-info" />
-          {{ getI18nLabel(widget.options.label) }}
-        </div>
-        <!--        <div class="fr">
-          <el-button type="primary" plain class="button-sty" icon="el-icon-refresh-right" @click="reload">重置
-          </el-button>
-          <el-button type="primary" class="button-sty" icon="el-icon-check" @click="saveData" v-if="!wfInfo.id">保存
-          </el-button>
-        </div>-->
-        <div class="fr">
-          <template v-if="billNav">
-            <el-button
-              class="button-sty"
-              size="mini"
-              icon="el-icon-arrow-left"
-              :disabled="!billNav.canPrev"
-              @click="navBill(-1)"
-              >上一单</el-button
-            >
-            <el-button
-              class="button-sty"
-              size="mini"
-              :disabled="!billNav.canNext"
-              @click="navBill(1)"
-              >下一单<i class="el-icon-arrow-right el-icon--right"></i
-            ></el-button>
-          </template>
-          <template v-for="(subWidget, swIdx) in widget.widgetList">
-            <template v-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"
-              >
-                <!-- 递归传递插槽！！！ -->
-                <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="swIdx"
-                :parent-list="widget.widgetList"
-                :index-of-parent-list="swIdx"
-                :parent-widget="widget"
-              >
-                <!-- 递归传递插槽！！！ -->
-                <template
-                  v-for="slot in Object.keys($scopedSlots)"
-                  v-slot:[slot]="scope"
-                >
-                  <slot :name="slot" v-bind="scope" />
-                </template>
-              </component>
-            </template>
-          </template>
-        </div>
-      </div>
-      <baseTabs :showNav="!widget.options.hideNav">
-        <detail-pane-widget
-          v-for="(paneWidget, index) in widget.panes"
-          :key="index"
-          :widget="paneWidget"
-          :parent-list="widget.panes"
-          :index-of-parent-list="index"
-          :parent-widget="widget"
-          :col-height="widget.options.colHeight"
-          tabRef="baseTabRef"
-          :tabPaneGrade="2"
-        ></detail-pane-widget>
-      </baseTabs>
-    </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 ContainerItemWrapper from "./container-item-wrapper";
-import containerItemMixin from "./containerItemMixin";
-import detailPaneWidget from "../../../../components/xform/form-render/container-item/detail-pane-item";
-import FieldComponents from "../../../../components/xform/form-designer/form-widget/field-widget/index";
-
-import { initWf } from "../../../../components/wf/wfUtil";
-
-export default {
-  name: "detail-item",
-  componentName: "ContainerItem",
-  mixins: [emitter, i18n, refMixin, containerItemMixin],
-  components: {
-    ContainerItemWrapper,
-    detailPaneWidget,
-    ...FieldComponents,
-  },
-  props: {
-    widget: Object,
-  },
-  inject: ["refList", "sfRefList", "globalModel", "previewState"],
-  created() {
-    this.initRefList();
-    this.handleOnCreated();
-  },
-  mounted() {
-    this.handleOnMounted();
-    this.$nextTick(() => {
-      this.createWf();
-    });
-  },
-  beforeDestroy() {
-    this.unregisterFromRefList();
-  },
-  data() {
-    return {
-      wfInfo: {},
-    };
-  },
-  computed: {
-    // 「上一单/下一单」翻单按钮状态：详情表单开启 billNavEnabled 且宿主列表有翻单快照时才显示。
-    // detail-item 在每次翻单时随详情表单重挂载，故此处按当前挂载时机取一次即可。
-    billNav() {
-      let formRef = this.getFormRef && this.getFormRef();
-      let formConfig = formRef && formRef.formConfig;
-      if (!formConfig || !formConfig.billNavEnabled) return null;
-      let host = formRef.getListPageRef && formRef.getListPageRef();
-      if (!host || typeof host.getActiveBillNavState !== "function")
-        return null;
-      let state = host.getActiveBillNavState();
-      if (!state) return null;
-      return {
-        canPrev: state.index > 0,
-        canNext: state.index < state.rows.length - 1,
-      };
-    },
-  },
-  methods: {
-    // 触发宿主翻单：step = -1 上一单 / +1 下一单
-    navBill(step) {
-      let host = this.getFormRef && this.getFormRef();
-      host = host && host.getListPageRef && host.getListPageRef();
-      host && host.navigateActiveBill && host.navigateActiveBill(step);
-    },
-    reload() {
-      this.getFormRef().$parent.$baseReload();
-    },
-    saveData() {
-      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>
-
-<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;
-}
-</style>
+<!--
+/**
+ * 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-wrap grid-container"
+      :class="[customClass]"
+      :ref="widget.id"
+    >
+      <div class="d-header clearfix" v-if="showHeader">
+        <div class="fl">
+          <i class="el-icon-info" />
+          {{ getI18nLabel(widget.options.label) }}
+        </div>
+        <!--        <div class="fr">
+          <el-button type="primary" plain class="button-sty" icon="el-icon-refresh-right" @click="reload">重置
+          </el-button>
+          <el-button type="primary" class="button-sty" icon="el-icon-check" @click="saveData" v-if="!wfInfo.id">保存
+          </el-button>
+        </div>-->
+        <div class="fr">
+          <template v-if="billNav">
+            <el-button
+              class="button-sty"
+              size="mini"
+              icon="el-icon-arrow-left"
+              :disabled="!billNav.canPrev"
+              @click="navBill(-1)"
+              >上一单</el-button
+            >
+            <el-button
+              class="button-sty"
+              size="mini"
+              :disabled="!billNav.canNext"
+              @click="navBill(1)"
+              >下一单<i class="el-icon-arrow-right el-icon--right"></i
+            ></el-button>
+          </template>
+          <el-button
+            v-if="showSaveSubmitBtn()"
+            class="button-sty"
+            type="success"
+            icon="el-icon-video-play"
+            @click="saveAndSubmitWfHandle()"
+            >{{ saveSubmitButtonName }}</el-button
+          >
+          <el-button
+            v-if="showWfStartBtn()"
+            class="button-sty yyy"
+            type="success"
+            icon="el-icon-video-play"
+            @click="startWf"
+            >{{ wfStartButtonName }}</el-button
+          >
+          <template v-for="(subWidget, swIdx) in widget.widgetList">
+            <template v-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"
+              >
+                <!-- 递归传递插槽！！！ -->
+                <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="swIdx"
+                :parent-list="widget.widgetList"
+                :index-of-parent-list="swIdx"
+                :parent-widget="widget"
+              >
+                <!-- 递归传递插槽！！！ -->
+                <template
+                  v-for="slot in Object.keys($scopedSlots)"
+                  v-slot:[slot]="scope"
+                >
+                  <slot :name="slot" v-bind="scope" />
+                </template>
+              </component>
+            </template>
+          </template>
+        </div>
+      </div>
+      <!-- 正文区：panes 是通用容器列表,既可直接挂 detail-pane(模块),也可挂 tab 等其它容器。
+           baseTabs 的锚点导航靠 getTabs() 探测 slot 子级:detail-pane 带 tabPaneGrade=2 会被收进
+           navList;tab 等容器两个条件都不满足,被静默跳过——即标签内的模块不进外层导航,由标签内
+           自己的 detail-plain 负责(见 docs/详情模块标签承载方案.md)。 -->
+      <baseTabs :showNav="!widget.options.hideNav && !plainMode">
+        <template v-for="(paneWidget, index) in widget.panes">
+          <detail-pane-widget
+            v-if="paneWidget.type === 'detail-pane'"
+            :key="paneWidget.id || index"
+            :widget="paneWidget"
+            :parent-list="widget.panes"
+            :index-of-parent-list="index"
+            :parent-widget="widget"
+            :col-height="widget.options.colHeight"
+            tabRef="baseTabRef"
+            :tabPaneGrade="2"
+          ></detail-pane-widget>
+          <component
+            v-else-if="'container' === paneWidget.category"
+            :is="paneWidget.type + '-item'"
+            :key="paneWidget.id || index"
+            :widget="paneWidget"
+            :parent-list="widget.panes"
+            :index-of-parent-list="index"
+            :parent-widget="widget"
+          >
+            <!-- 递归传递插槽！！！ -->
+            <template
+              v-for="slot in Object.keys($scopedSlots)"
+              v-slot:[slot]="scope"
+            >
+              <slot :name="slot" v-bind="scope" />
+            </template>
+          </component>
+          <component
+            v-else
+            :is="paneWidget.type + '-widget'"
+            :key="paneWidget.id || index"
+            :field="paneWidget"
+            :designer="null"
+            :parent-list="widget.panes"
+            :index-of-parent-list="index"
+            :parent-widget="widget"
+          >
+            <!-- 递归传递插槽！！！ -->
+            <template
+              v-for="slot in Object.keys($scopedSlots)"
+              v-slot:[slot]="scope"
+            >
+              <slot :name="slot" v-bind="scope" />
+            </template>
+          </component>
+        </template>
+      </baseTabs>
+    </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 ContainerItemWrapper from "./container-item-wrapper";
+import containerItemMixin from "./containerItemMixin";
+import detailPaneWidget from "../../../../components/xform/form-render/container-item/detail-pane-item";
+import FieldComponents from "../../../../components/xform/form-designer/form-widget/field-widget/index";
+
+import { initWf, openStartWfDialog } from "../../../../components/wf/wfUtil";
+import {
+  getWfButtonNames,
+  loadWfButtonNames,
+  DEFAULT_SUBMIT_BTN,
+  DEFAULT_SAVE_SUBMIT_BTN,
+} from "../../../../components/wf/wfButtonName";
+import { loadWfAutoConfirm } from "../../../../components/wf/wfAutoConfirm";
+import { loadWfUserRange } from "../../../../components/wf/wfUserRange";
+import settingConfig from "@/settings.js";
+
+export default {
+  name: "detail-item",
+  componentName: "ContainerItem",
+  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  components: {
+    ContainerItemWrapper,
+    detailPaneWidget,
+    ...FieldComponents,
+  },
+  props: {
+    widget: Object,
+  },
+  inject: ["refList", "sfRefList", "globalModel", "previewState"],
+  created() {
+    this.initRefList();
+    this.handleOnCreated();
+    //只有流程表单才需要按钮名/自动确认开关，避免给普通详情页平白多一次请求(模块内全局只发一次)
+    if (this.getFormRef()?.formConfig?.wfEnabled) {
+      loadWfButtonNames(this);
+      loadWfAutoConfirm(this);
+      loadWfUserRange(this);
+    }
+  },
+  mounted() {
+    this.handleOnMounted();
+    this.$nextTick(() => {
+      this.createWf();
+    });
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+  data() {
+    return {
+      wfInfo: {},
+      wfReady: false, // 流程状态是否已就绪(callback 返回后)
+      wfHasStarted: false, // 流程是否已启动(已启动则不显示启动按钮)
+      wfStartOption: null, // 启动流程所需 option(createWf 构造)
+      wfStartCtx: null, // openStartWfDialog 的执行上下文(与 initWf 一致)
+    };
+  },
+  computed: {
+    // 素身详情模式（宿主 VFormRender 传 plainDetailMode）：去标题栏、去模块导航，只留模块
+    plainMode() {
+      let formRef = this.getFormRef && this.getFormRef();
+      return !!(formRef && formRef.plainDetailMode);
+    },
+    // 标题栏：模板配 hideHeader 或宿主素身模式，两者任一命中即不渲染
+    showHeader() {
+      return !this.plainMode && !this.widget.options.hideHeader;
+    },
+    // 按钮名取值链：后台 param18 → 全局 settings(老部署兼容) → 默认。
+    // 只能用 $t1(找不到 key 原样返回)：$t2 的第二参在 i18n 命中 key 时会把自定义名整个覆盖掉。
+    wfStartButtonName() {
+      return (
+        getWfButtonNames().submitBtn ||
+        settingConfig.wfStartButtonName ||
+        this.$t1(DEFAULT_SUBMIT_BTN)
+      );
+    },
+    saveSubmitButtonName() {
+      return (
+        getWfButtonNames().saveSubmitBtn || this.$t1(DEFAULT_SAVE_SUBMIT_BTN)
+      );
+    },
+    // 「上一单/下一单」翻单按钮状态：详情表单开启 billNavEnabled 且宿主列表有翻单快照时才显示。
+    // detail-item 在每次翻单时随详情表单重挂载，故此处按当前挂载时机取一次即可。
+    billNav() {
+      let formRef = this.getFormRef && this.getFormRef();
+      if (
+        !formRef ||
+        !formRef.formConfig ||
+        !formRef.formConfig.billNavEnabled
+      ) {
+        return null;
+      }
+      let host = formRef.getListPageRef && formRef.getListPageRef();
+      if (!host || typeof host.getActiveBillNavState !== "function")
+        return null;
+      let state = host.getActiveBillNavState();
+      if (!state) return null;
+      return {
+        canPrev: state.index > 0,
+        canNext: state.index < state.rows.length - 1,
+      };
+    },
+  },
+  methods: {
+    // 解析流程启动信息：优先取表单实例(indexMixin,xform 主链路)暴露的,回退到本组件 createWf(旧路径)。
+    // 用方法实时求值,避免 computed 缓存导致早于 wf 就绪时求值后不再更新。
+    wfStart() {
+      let formRef = this.getFormRef && this.getFormRef();
+      if (formRef && formRef.wfStartOption) {
+        return {
+          ctx: formRef.wfStartCtx || formRef,
+          option: formRef.wfStartOption,
+          hasWf: !!formRef.hasWf,
+        };
+      }
+      if (this.wfReady && this.wfStartOption && this.wfStartCtx) {
+        return {
+          ctx: this.wfStartCtx,
+          option: this.wfStartOption,
+          hasWf: this.wfHasStarted,
+        };
+      }
+      return null;
+    },
+    // 流程启动按钮：有启动信息、需要按钮(showStartBtn 未显式关闭)、未启动、非预览态才显示。
+    // 声明式渲染,替代 wfUtil 的 DOM 强制注入。
+    showWfStartBtn() {
+      let ws = this.wfStart();
+      if (!ws || this.previewState) return false;
+      let opt = ws.option || {};
+      if (opt.showStartBtn === false || ws.hasWf) return false;
+      return this.evalWfStartBtnShow();
+    },
+    /**
+     * 「提交流程」按钮显隐脚本(formConfig.wfStartBtnShow)：return false 隐藏，不配则显示。
+     * 在渲染期求值，好处是随表单数据自动更新，代价是脚本会被反复执行——所以：
+     *   1) 编译结果按脚本原文缓存，避免每次渲染都 new Function；
+     *   2) 编译/执行异常一律放行(返回 true)，不能因为脚本写错就把提交入口挡死；
+     *   3) formData 取轻量的 formRef.formData，不走 getSysFormData/getRealFormData 那套重加工。
+     * 脚本里务必只读数据、返回布尔，改数据会引发渲染循环。
+     */
+    evalWfStartBtnShow() {
+      let formRef = this.getFormRef && this.getFormRef();
+      let src = formRef && formRef.formConfig && formRef.formConfig.wfStartBtnShow;
+      if (!src) return true;
+      let cache = this._wfStartShowFn; //挂实例属性即可，不需要响应式
+      if (!cache || cache.src !== src) {
+        try {
+          cache = {
+            src,
+            fn: new Function("dataId", "formCode", "formData", src),
+          };
+        } catch (error) {
+          console.error("wfStartBtnShow 脚本编译失败", error);
+          return true;
+        }
+        this._wfStartShowFn = cache;
+      }
+      try {
+        let ret = cache.fn.call(
+          formRef,
+          formRef.dataId,
+          formRef.reportTemplate && formRef.reportTemplate.formCode,
+          formRef.formData
+        );
+        return ret !== false;
+      } catch (error) {
+        console.error("wfStartBtnShow 脚本执行异常", error);
+        return true;
+      }
+    },
+    // 「保存并提交流程」内建按钮：表单设置里 saveSubmitEnabled 开启后渲染,只在新增页显示。
+    // 与 showWfStartBtn 一样用方法而非 computed:流程状态是异步就绪的,computed 缓存会漏更新。
+    showSaveSubmitBtn() {
+      if (this.previewState) return false;
+      let formRef = this.getFormRef && this.getFormRef();
+      let formConfig = formRef && formRef.formConfig;
+      if (!formConfig || !formConfig.wfEnabled || !formConfig.saveSubmitEnabled)
+        return false;
+      if (formRef.dataId) return false; //只有新增页(编辑态一律不显示)
+      let wfParam = formRef.wfParam || {};
+      //流程已启动不显示(与 save_submit_wf_button-widget 的 isWfStarted 同口径)
+      if (formRef.hasWf || wfParam.hasWf || wfParam.wfInfo?.procInstId)
+        return false;
+      return true;
+    },
+    // 声明式触发流程启动(替代原注入按钮的点击),复用 wfUtil 的 openStartWfDialog
+    startWf() {
+      let ws = this.wfStart();
+      if (!ws || !ws.option || !ws.ctx) return;
+      // startConfirmText 原样透传:它只承载模板脚本 wfStartConfirmText 的文案(见 indexMixin
+      // 的 option 构造)。按钮名拼接与「后台 param19 自动确认」都由 wf.js 统一处理——
+      // 在这里替它拼默认文案的话,wf.js 会把它当成脚本自定义的告警,自动确认就失效了。
+      let innerOnStart = ws.option.onStart;
+      let formRef = this.getFormRef && this.getFormRef();
+      openStartWfDialog(ws.ctx, {
+        ...ws.option, //浅拷贝:wfStartOption 是 formRef 上的共享对象,不可原地改
+        // 提交前置处理：确认框在 wfStartDialog 内部，这里(打开弹框前)是唯一能拦的位置。
+        // 既有的 onStart 是表单校验(仅 wfStartBindSave 开启时注入)，把它的 done 换成
+        // 「跑前置脚本」，即得到「先校验、后脚本、再确认框」；没开自动保存时直接跑脚本。
+        onStart: (done) => {
+          let runBefore = () => {
+            if (!formRef || typeof formRef.runBeforeSubmitWf !== "function") {
+              return done();
+            }
+            formRef.runBeforeSubmitWf("wfStart").then((pass) => {
+              if (pass) done();
+            });
+          };
+          if (typeof innerOnStart === "function") {
+            innerOnStart(runBefore);
+          } else {
+            runBefore();
+          }
+        },
+      });
+    },
+    // 触发宿主翻单：step = -1 上一单 / +1 下一单
+    navBill(step) {
+      let host = this.getFormRef && this.getFormRef();
+      host = host && host.getListPageRef && host.getListPageRef();
+      host && host.navigateActiveBill && host.navigateActiveBill(step);
+    },
+    reload() {
+      this.getFormRef().$parent.$baseReload();
+    },
+    saveData() {
+      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, //需要启动按钮(语义不变)
+          injectStartBtn: false, //不走 DOM 强制注入,改由本组件模板声明式渲染
+          serviceId: "user",
+          startConfirmText: () => formTarget.getWfStartConfirmText(),
+          callback: ({ wfInfo, hasWf }) => {
+            this.wfInfo = wfInfo;
+            this.wfHasStarted = !!hasWf; //已启动则不显示启动按钮(与原注入条件 !hasWf 一致)
+            this.wfReady = true; //状态就绪后才显示按钮,避免回调前闪现
+          },
+        };
+        this.wfStartOption = option;
+        this.wfStartCtx = formTarget.$parent; //与 initWf 执行上下文一致,供 openStartWfDialog 使用
+        initWf.call(formTarget.$parent, option);
+      }
+    },
+  },
+};
+</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;
+}
+</style>