cloud-web-corejs 1.0.54-dev.797 → 1.0.54-dev.799

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.797",
+  "version": "1.0.54-dev.799",
   "scripts": {
     "dev": "vue-cli-service serve",
     "dev:micro": "vue-cli-service serve --port 17527",
@@ -172,8 +172,10 @@
     "src/components/langTag",
     "src/components/formDialog",
     "src/components/formDrawer",
+    "src/components/bizTab",
     "src/api",
     "src/views/bd",
+    "src/views/demo",
     "src/views/support",
     "src/views/user",
     "src/views/mobile/user",

package/src/components/baseTabs/mixins.js

@@ -1,3 +1,5 @@
+import { scrollIntoScrollParent } from '@base/utils/scrollUtil';
+
 let baseTabsMixin, baseTabPaneMixin;
 
 baseTabsMixin = {
@@ -76,17 +78,10 @@ baseTabsMixin = {
       this.$emit('input', name);
       this.$emit('on-click', name);
       let target = this.getTabs()[index].$el;
-      let scrollContainer = Array.prototype.find.call(
-        this.$el.children,
-        item => item.classList && item.classList.contains('d-cont')
-      );
-      if (scrollContainer) {
-        let containerRect = scrollContainer.getBoundingClientRect();
-        let targetRect = target.getBoundingClientRect();
-        scrollContainer.scrollTop += targetRect.top - containerRect.top;
-      } else {
-        target.scrollIntoView();
-      }
+      //滚动体是 .d-cont 还是它外面那层(.d-header + div{flex:1;overflow-y:auto})由布局决定,
+      //原来写死 .d-cont,在 .d-cont 没有确定高度(height:inherit 拿到 auto)的页面上
+      //scrollTop 赋值是空操作,点导航没反应——统一交给 scrollIntoScrollParent 找真正的滚动体。
+      scrollIntoScrollParent(target);
     }
   },
   watch: {
@@ -127,7 +122,11 @@ baseTabPaneMixin = {
     }
   },
   beforeDestroy() {
-    let navList = this.getParent().navList;
+    //getParent() 只认 baseTabs 父级/祖父级,拿不到就是没被 baseTabs 包着(如设计期画布、
+    //或中间隔了 draggable),此时没有 navList 可维护,直接跳过——原来这里直接取 .navList 会崩。
+    let parentPanel = this.getParent();
+    if (!parentPanel) return;
+    let navList = parentPanel.navList;
     if (navList.length <= 1) {
       this.updateNav();
     }

package/src/components/bizTab/BizBillActions.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="fr">
+    <!-- 按钮顺序（.fr 里 DOM 次序即从左到右）：
+         翻单 → 提交流程 → 业务按钮(默认插槽) → 重置 → 保存
+         #before 是留给"要排在翻单之前"的特例，一般不用。
+         另外 wfUtil 的「修改单据」按钮是 append 到本容器最前面的，会落在最左侧。 -->
+    <slot name="before"></slot>
+    <!-- ① 上一单 / 下一单：列表侧 openDetail 传了 navRows 才出现 -->
+    <template v-if="showBillNav">
+      <!-- 用默认按钮而不是 primary+plain：element 对 primary+plain 的禁用态是淡蓝
+           (#8cc5ff/#ecf5ff)，在头部一排蓝按钮里看不出不可点；默认按钮的禁用态本来就是灰的 -->
+      <el-button
+        class="button-sty"
+        icon="el-icon-arrow-left"
+        :disabled="!detail.canPrevBill || busy"
+        @click="detail.gotoPrevBill()"
+        >{{ $t1("上一单") }}</el-button
+      >
+      <el-button
+        class="button-sty"
+        :disabled="!detail.canNextBill || busy"
+        @click="detail.gotoNextBill()"
+        >{{ $t1("下一单") }}<i class="el-icon-arrow-right el-icon--right"
+      /></el-button>
+    </template>
+    <!-- ② 提交流程。新增页是「保存并提交流程」，已存过的单据是「提交流程」，两者互斥 -->
+    <el-button
+      v-if="detail.showSaveSubmitBtn"
+      type="success"
+      class="button-sty"
+      icon="el-icon-video-play"
+      :disabled="busy"
+      :loading="detail.billSaving"
+      @click="detail.saveAndSubmitHandle()"
+      >{{ detail.saveSubmitButtonName }}</el-button
+    >
+    <el-button
+      v-if="detail.showWfStartBtn"
+      type="success"
+      class="button-sty"
+      icon="el-icon-video-play"
+      :disabled="busy"
+      @click="detail.startWfHandle()"
+      >{{ detail.submitButtonName }}</el-button
+    >
+    <!-- ③ 业务按钮（作废/复制/打印这类各单据自己的动作） -->
+    <slot></slot>
+    <!-- ④⑤ 重置、保存。每个按钮都显式写 :disabled：el-button 没传 disabled 时会继承外层
+         el-form 的 disabled（element-ui button.vue buttonDisabled），显式传就切断这条继承 -->
+    <el-button
+      v-if="canEdit"
+      type="primary"
+      plain
+      class="button-sty"
+      icon="el-icon-refresh-right"
+      :disabled="busy"
+      @click="detail.reloadDetail()"
+      >{{ $t1("重置") }}</el-button
+    >
+    <el-button
+      v-if="canEdit"
+      type="primary"
+      class="button-sty"
+      icon="el-icon-check"
+      :disabled="busy"
+      :loading="detail.billSaving"
+      @click="detail.saveHandle()"
+      >{{ $t1("保存") }}</el-button
+    >
+  </div>
+</template>
+
+<script>
+/**
+ * 单据详情头部按钮区，统一「上一单/下一单 / 提交流程 / 保存 / 重置」的显隐、顺序与文案。
+ * 从左到右固定为：翻单 → 提交流程 → 业务按钮(默认插槽) → 重置 → 保存。
+ * 按钮名走后台 wf_diy_attribute 的 param18（wfButtonName.js），后台没配才用默认文案。
+ *
+ * 用法（detail 传详情组件自身，模板里用 Vue 内置的 _self）：
+ *   <div class="d-header clearfix">
+ *     <div class="fl">标题</div>
+ *     <biz-bill-actions :detail="_self" />
+ *   </div>
+ *
+ * 注意：根节点是 .d-header 里的 .fr，别再往外包一层，否则布局会散，
+ * 而且 wfUtil 的「修改单据」按钮就是往 .el-form .d-header > .fr 里塞的。
+ */
+export default {
+  name: "BizBillActions",
+  props: {
+    // 详情组件实例（混入了 bizBillDetailMixin）
+    detail: {
+      type: Object,
+      required: true,
+    },
+    /**
+     * 覆盖「是否可编辑」（显示重置/保存）。
+     * 不传 = 自动判断：流程没启动、或流程当前节点允许改单据。
+     * 故意不声明 type：Boolean 型 prop 不传时 Vue 会塞 false，三态就没法表达。
+     */
+    editable: {
+      default: undefined,
+    },
+    // 是否显示上一单/下一单。不传 = 有翻单快照就显示
+    billNav: {
+      default: undefined,
+    },
+  },
+  computed: {
+    // 与字段禁用同源：都取详情的 canEditBill()，不会出现「字段能改却没有保存按钮」
+    canEdit() {
+      if (this.editable !== undefined && this.editable !== null) {
+        return !!this.editable;
+      }
+      return !this.detail.billDisabled;
+    },
+    showBillNav() {
+      if (this.billNav !== undefined && this.billNav !== null) {
+        return !!this.billNav;
+      }
+      return !!this.detail.billNavState;
+    },
+    // 保存中、或「已入库待提交流程」期间：一律禁用，避免并发写同一张单
+    busy() {
+      return !!(this.detail.billSaving || this.detail.billSubmitting);
+    },
+  },
+};
+</script>

package/src/components/bizTab/BizTabListPage.vue

@@ -0,0 +1,391 @@
+<template>
+  <div id="containt">
+    <x-tabs
+      ref="xTabs"
+      v-model="activeName"
+      class="tab-box"
+      :tabNameEnable="true"
+      :beforeRemove="handleBeforeRemove"
+      @removeTab="handleTabRemoved"
+      @tabClick="handleTabClick"
+    >
+      <!-- 列表页签的 name 必须是 "second"：x-tabs.doRemoveTab 关掉首个页签时会硬回退到 "second" -->
+      <el-tab-pane :label="listLabel" :name="LIST_TAB_NAME">
+        <div class="grid-height">
+          <slot name="list"></slot>
+        </div>
+      </el-tab-pane>
+      <template #editTab="{ tab }">
+        <el-tab-pane
+          :key="tab.tabName"
+          :label="getTabLabel(tab)"
+          :name="tab.tabName"
+          :closable="true"
+        >
+          <!-- showContent 由宿主控制：置 false 再置 true = 详情整体重挂载（重新取数） -->
+          <div v-if="tab.showContent" class="biz-tab-detail">
+            <slot name="detail" :tab="tab"></slot>
+          </div>
+        </el-tab-pane>
+      </template>
+    </x-tabs>
+    <!-- 页签之外的内容（各类选择弹框等），与 std 手写列表页把 dialog 放在 el-tabs 外的习惯一致 -->
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+/**
+ * 单据「列表 + 多详情页签」宿主壳。
+ *
+ * 只管页签，不认识任何业务表单：详情内容整个由 #detail 插槽提供。
+ * 详情组件通过 inject("bizTabHost") 拿到本组件实例，配合 bizBillDetailMixin 完成
+ * 「新增页签 → 保存升编辑态 → 提交流程 → 关页签回列表刷新」这条链路。
+ *
+ * 用法见 src/components/bizTab/README.md 与 src/views/demo/bizTab/。
+ */
+// 列表页签固定名：x-tabs.doRemoveTab 关掉第一个动态页签时会硬回退到 "second"
+const LIST_TAB_NAME = "second";
+
+export default {
+  name: "BizTabListPage",
+  props: {
+    // 当前页签名，可选 v-model；不绑也能用（内部自持）
+    value: String,
+    // 列表页签标题
+    listLabel: {
+      type: String,
+      default: () => "列表",
+    },
+    // 页签标题取详情数据的哪个字段（如单号 sn、名称 name）
+    titleField: {
+      type: String,
+      default: () => "name",
+    },
+    // 新增页签的初始标题；保存成功后自动换成 titleField 的值
+    addTitle: {
+      type: String,
+      default: () => "新增",
+    },
+    /**
+     * 流程动作完成后的页签行为。
+     *   "refreshCurrent" 刷新当前页签（默认，能看到最新流程信息）
+     *   "closeToList"    关掉当前页签 → 回列表 → 刷新列表
+     * 传字符串 = 所有动作统一；传对象 = 按动作分别配置，未列出的走 default：
+     *   { submit: "closeToList", agree: "closeToList", default: "refreshCurrent" }
+     * 动作类型：submit 提交(启动流程) / agree 通过 / reject 驳回 /
+     *          interrupt 中断撤回 / transfer 转办 / talk 沟通
+     */
+    behavior: {
+      type: [String, Object],
+      default: () => "refreshCurrent",
+    },
+    /**
+     * 关闭页签前置钩子 beforeTabClose(tab, detail) => Boolean | Promise，返回 false / reject 中止关闭。
+     * 不传则用内置判断：详情实现了 isBillDirty() 就问它，否则「未保存过的新增页签」才确认。
+     */
+    beforeTabClose: Function,
+    // 是否启用上面那套内置关闭确认（自己传了 beforeTabClose 时本项无效）
+    confirmOnClose: {
+      type: Boolean,
+      default: () => true,
+    },
+    // 激活列表页签时（含关掉详情页签自动回到列表）是否自动刷新列表
+    refreshOnActivateList: {
+      type: Boolean,
+      default: () => true,
+    },
+    // 页签数量上限。x-tabs 内部超过 30 会顶掉第一个，这里提前拦下来给提示
+    maxTabs: {
+      type: Number,
+      default: () => 10,
+    },
+  },
+  data() {
+    return {
+      LIST_TAB_NAME,
+      activeName: LIST_TAB_NAME,
+    };
+  },
+  provide() {
+    return {
+      bizTabHost: this,
+    };
+  },
+  created() {
+    // 详情组件实例登记表（key = tabName）。故意不放 data：这里只做查表，
+    // 进了响应式反而会让详情实例被递归 observe。
+    this.detailRefs = {};
+    if (this.value) this.activeName = this.value;
+  },
+  watch: {
+    value(val) {
+      if (val && val !== this.activeName) this.activeName = val;
+    },
+    activeName(val) {
+      this.$emit("input", val);
+      this.$emit("tab-change", val);
+      if (val !== LIST_TAB_NAME) return;
+      // 回到列表就刷新：手动关页签、程序化关页签、手动点列表页签三条路径都在这里收口，
+      // 免得列表停留在陈旧数据上（低代码 list.vue 的 watch activeName 是同一意图）。
+      if (this._skipListRefresh) {
+        this._skipListRefresh = false;
+        return;
+      }
+      if (this.refreshOnActivateList) this.refreshList();
+    },
+  },
+  methods: {
+    // ===== 对外：打开页签 =====
+    /**
+     * 打开「新增」页签。
+     * 关键点：合成一个唯一 id 当页签标识，同时把 dataId 显式置 null——
+     * 否则 x-tabs 默认拿 row.id 当 dataId，详情会拿着这个假 id 去 getOne。
+     */
+    openAdd(param, option) {
+      if (!this.checkTabLimit()) return null;
+      let key
+        = "add_" + Date.now() + "_" + Math.random().toString(36).slice(2, 6);
+      let row = { id: key };
+      row[this.titleField] = this.buildAddTitle();
+      this.$refs.xTabs.openEditTab(row, param || null, {
+        tabParam: {
+          tabName: key,
+          tabLabelField: this.titleField,
+          isAdd: true,
+          dataId: null,
+          // 翻单快照：新增也带上(navIndex=-1)，保存后把新单插到序列首位
+          navRows: (option && option.navRows) || null,
+          navIndex: -1,
+          ...((option && option.tabParam) || {}),
+        },
+      });
+      return key;
+    },
+    /**
+     * 打开「详情/编辑」页签。同一单据已开则复用并激活，不重复开。
+     * option.navRows / option.navIndex 传了就能用「上一单/下一单」翻单，
+     * 一般直接把列表的 fullData 和当前行下标丢进来。
+     */
+    openDetail(row, param, option) {
+      let dataId = row ? row.id : null;
+      if (dataId == null || dataId === "") return this.openAdd(param, option);
+      if (!this.hasTab(dataId) && !this.checkTabLimit()) return null;
+      let key = String(dataId);
+      // 这单已经开着、而且里面有没保存的修改：只激活，不重新取数。
+      // openEditTab 的复用分支会 showContent 置 false 再置 true（等于重挂载），
+      // 从列表再点一次就把用户改了半天的内容无声冲掉了。
+      if (this.hasTab(key) && this.isDetailDirty(this.getTab(key))) {
+        this.activeName = key;
+        return key;
+      }
+      this.$refs.xTabs.openEditTab(row, param || null, {
+        tabParam: {
+          tabName: key,
+          tabLabelField: this.titleField,
+          isAdd: false,
+          dataId: dataId,
+          navRows: (option && option.navRows) || null,
+          navIndex: (option && option.navIndex != null) ? option.navIndex : -1,
+          ...((option && option.tabParam) || {}),
+        },
+      });
+      return key;
+    },
+
+    // ===== 对外：供详情组件（bizBillDetailMixin）回调 =====
+    /**
+     * 新增保存成功后「只升级页签元数据」：转编辑态 + 换标题，不重渲染详情内容。
+     *
+     * 元数据升级与内容刷新必须分开做：
+     *  - 升级了 dataId，后续再保存走更新，不会重复入库（提交失败/取消后重点依赖这条）；
+     *  - 不在这里重渲染，把那唯一一次刷新留给流程结束后的分支，详情最多刷一次、不闪。
+     */
+    promoteTab(tab, info) {
+      if (!tab) return;
+      let dataId = info ? info.dataId : null;
+      if (dataId != null && dataId !== "") {
+        let isAdd = tab.isAdd;
+        tab.dataId = dataId;
+        tab.isAdd = false;
+        if (tab.data) this.$set(tab.data, "id", dataId);
+        // 新增保存：把新单插到翻单序列首位（新数组，不改列表的 fullData 引用）
+        if (isAdd && Array.isArray(tab.navRows)) {
+          tab.navRows = [tab.data, ...tab.navRows];
+          tab.navIndex = 0;
+        }
+        // 页签 key(tabName) 仍是当初的合成 id：换掉会连带 el-tab-pane 重建、详情被迫重挂载，
+        // 正好破坏「保存后不刷详情」的设计。重复打开的去重靠 tab.data.id，它已是真单号。
+      }
+      this.syncTabTitle(tab, info ? info.title : null);
+    },
+    // 同步页签标题；空值保持原标题，不回退成单号
+    syncTabTitle(tab, title) {
+      if (!tab || !tab.data) return;
+      if (title == null || title === "") return;
+      this.$set(tab.data, this.titleField, title);
+    },
+    // 重挂载详情内容（重新取数）。页签已被关掉时自动跳过。
+    refreshTab(tab) {
+      if (!tab || !this.isLiveTab(tab)) return;
+      tab.showContent = false;
+      setTimeout(() => {
+        if (this.isLiveTab(tab)) tab.showContent = true;
+      }, 200);
+    },
+    // 关页签 → 回列表 → 刷新列表。顺序不能反：doRemoveTab 会自己抢 activeName。
+    closeTabToList(tab) {
+      this.backToList();
+      if (tab) this.$refs.xTabs.doRemoveTab(tab.tabName);
+    },
+    // 程序化关页签，跳过关闭确认
+    closeTab(tab) {
+      if (tab) this.$refs.xTabs.doRemoveTab(tab.tabName);
+    },
+    // 切到列表页签；刷新由 activeName 的 watcher 统一收口，refresh === false 可跳过这次刷新
+    backToList(refresh) {
+      if (refresh === false) this._skipListRefresh = true;
+      if (this.activeName === LIST_TAB_NAME) {
+        this._skipListRefresh = false;
+        if (refresh !== false && this.refreshOnActivateList) this.refreshList();
+        return;
+      }
+      this.activeName = LIST_TAB_NAME;
+    },
+    refreshList() {
+      this.$emit("refresh-list");
+    },
+    /**
+     * 取某个动作完成后的页签行为。详情组件用它决定「刷新本页」还是「关页签回列表」。
+     */
+    getBehavior(kind) {
+      let behavior = this.behavior;
+      if (typeof behavior === "string") return behavior;
+      if (behavior && typeof behavior === "object") {
+        return behavior[kind] || behavior.default || "refreshCurrent";
+      }
+      return "refreshCurrent";
+    },
+
+    // ===== 对外：上一单 / 下一单 =====
+    /**
+     * 能不能翻到相邻单据（同步判断：不是新增页签、有快照、没到边界）。
+     * 返回目标行下标，不能翻返回 -1。
+     */
+    canNavigate(tab, step) {
+      if (!tab || tab.isAdd) return -1;
+      let rows = tab.navRows;
+      if (!Array.isArray(rows) || !rows.length) return -1;
+      let idx = (tab.navIndex == null ? -1 : tab.navIndex) + step;
+      if (idx < 0 || idx >= rows.length) return -1;
+      let row = rows[idx];
+      if (!row || row.id == null || row.id === "") return -1;
+      return idx;
+    },
+    /**
+     * 把某个页签翻到相邻单据。step = -1 上一单 / +1 下一单，到边界不循环。
+     * 页签标题取 tab.data[titleField]，所以整行换掉即可；详情靠重挂载按新 dataId 取数。
+     * 翻单会丢掉未保存的修改，所以先过一遍脏数据确认（与关页签同一判据）。
+     * @returns {Promise<Boolean>} 是否真的翻了
+     */
+    navigateTab(tab, step) {
+      let idx = this.canNavigate(tab, step);
+      if (idx < 0) return Promise.resolve(false);
+      return this.confirmLeaveDetail(tab).then((pass) => {
+        if (!pass) return false;
+        // 确认期间可能已经被关掉或翻走了，重新校一次
+        let target = this.canNavigate(tab, step);
+        if (target < 0 || !this.isLiveTab(tab)) return false;
+        tab.navIndex = target;
+        tab.data = tab.navRows[target];
+        tab.dataId = tab.data.id; // 详情不 watch dataId，靠下面的重挂载按新单号取数
+        this.refreshTab(tab);
+        return true;
+      });
+    },
+    // 详情有没有未保存的修改（详情实现了 isBillDirty 才判得出来）
+    isDetailDirty(tab) {
+      let detail = this.getDetail(tab);
+      return !!(
+        detail
+        && typeof detail.isBillDirty === "function"
+        && detail.isBillDirty()
+      );
+    },
+    // 要离开/重载当前详情（翻单等）前的确认；不脏直接放行
+    confirmLeaveDetail(tab) {
+      if (!this.isDetailDirty(tab)) return Promise.resolve(true);
+      return this.$baseConfirm(
+        this.$t1("单据已修改尚未保存，确定放弃修改吗？")
+      ).then(
+        () => true,
+        () => false
+      );
+    },
+
+    // ===== 内部 =====
+    // 详情实例登记：refreshTab 会销毁重建详情，所以登记/注销都由详情自己在生命周期里做
+    registerDetail(tab, vm) {
+      if (tab && tab.tabName) this.detailRefs[tab.tabName] = vm;
+    },
+    unregisterDetail(tab, vm) {
+      if (!tab || !tab.tabName) return;
+      if (this.detailRefs[tab.tabName] === vm) delete this.detailRefs[tab.tabName];
+    },
+    getDetail(tab) {
+      return tab && tab.tabName ? this.detailRefs[tab.tabName] || null : null;
+    },
+    getTabs() {
+      return this.$refs.xTabs ? this.$refs.xTabs.tabs : [];
+    },
+    getTab(tabName) {
+      return this.getTabs().find((tab) => tab.tabName === tabName) || null;
+    },
+    isLiveTab(tab) {
+      return this.getTabs().indexOf(tab) >= 0;
+    },
+    hasTab(dataId) {
+      return this.getTabs().some((tab) => tab.tabName === String(dataId));
+    },
+    getTabLabel(tab) {
+      let label = tab.data ? tab.data[this.titleField] : null;
+      return label == null || label === "" ? this.addTitle : label;
+    },
+    // 多个新增页签标题一样会分不清，第二个起加序号：新增 / 新增2 / 新增3
+    buildAddTitle() {
+      let count = this.getTabs().filter((tab) => tab.isAdd).length;
+      return count > 0 ? this.addTitle + (count + 1) : this.addTitle;
+    },
+    checkTabLimit() {
+      if (this.getTabs().length < this.maxTabs) return true;
+      this.$message.warning(
+        this.$t1
+          ? this.$t1(`最多同时打开 ${this.maxTabs} 个页签，请先关闭部分页签`)
+          : `最多同时打开 ${this.maxTabs} 个页签，请先关闭部分页签`
+      );
+      return false;
+    },
+    handleBeforeRemove(targetName, tab) {
+      let detail = this.getDetail(tab);
+      if (this.beforeTabClose) return this.beforeTabClose(tab, detail);
+      if (!this.confirmOnClose) return true;
+      // 详情自己会判脏就听它的，否则退回「新增还没存过」这一条
+      if (detail && typeof detail.isBillDirty === "function") {
+        if (!detail.isBillDirty()) return true;
+        return this.$baseConfirm(this.$t1("单据已修改尚未保存，确定关闭吗？"));
+      }
+      if (!tab || !tab.isAdd) return true;
+      return this.$baseConfirm(this.$t1("新增内容尚未保存，确定关闭吗？"));
+    },
+    handleTabRemoved(targetName) {
+      let detail = this.detailRefs[targetName];
+      if (detail) delete this.detailRefs[targetName];
+      this.$emit("tab-removed", targetName);
+    },
+    // x-tabs 转发的是 el-tabs 的 tab-click 载荷（页签组件实例，不是名字），原样往上抛
+    handleTabClick(tab) {
+      this.$emit("tab-click", tab);
+    },
+  },
+};
+</script>