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

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>