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

package/src/components/vb-tabs/x-tabs.vue

@@ -1,143 +1,167 @@
-<template>
-  <el-tabs
-    v-model="activeName"
-    class="tab-box tab-morenav"
-    @tab-remove="removeTab"
-    @tab-click="tabClick"
-    ref="tabs"
-  >
-    <slot name="default"></slot>
-    <template v-for="(tab, index) in tabs">
-      <slot name="editTab" v-bind="{ tab, index, tabs, reloadTabContent }"></slot>
-    </template>
-  </el-tabs>
-</template>
-<script>
-export default {
-  name: "x-tabs",
-  props: {
-    value: String,
-    paneKeyName: {
-      type: String,
-      default: () => "id",
-    },
-    tabNameEnable: {
-      type: Boolean,
-      default: () => false,
-    },
-  },
-  data() {
-    return {
-      activeName: "0",
-      tabs: [],
-    };
-  },
-  watch: {
-    value(val) {
-      this.activeName = val;
-    },
-    activeName(val) {
-      this.$emit("input", val);
-    },
-  },
-  created() {
-    if (this.value) {
-      this.activeName = this.value;
-    }
-  },
-  methods: {
-    openEditTab(row, param, option) {
-      let paneKeyName = this.paneKeyName;
-      let tab = this.tabs.find((tab) => tab.data[paneKeyName] === row[paneKeyName]);
-      let tabParam = option?.tabParam || {};
-      let dataId = row ? row[paneKeyName] : null;
-      let newTab = {
-        data: row,
-        showContent: false,
-        dataId: dataId,
-        param,
-        ...tabParam,
-      };
-      if (!tab) {
-        tab = newTab;
-        if (this.tabs.length >= 30) {
-          this.tabs.splice(0, 1, tab);
-        } else {
-          this.tabs.push(tab);
-        }
-        this.$nextTick(() => {
-          let paneName = this.getCurrentPaneName();
-          tab.paneName = paneName;
-        });
-      } else {
-        Object.assign(tab, newTab);
-      }
-      let tabNameEnable = this.tabNameEnable;
-      this.activeName = row ? (tabNameEnable ? tab.tabName : row[paneKeyName] + "") : "";
-      tab.showContent = false;
-      setTimeout(() => {
-        tab.showContent = true;
-      }, 200);
-    },
-    removeTab(targetName) {
-      let tabNameEnable = this.tabNameEnable;
-      let paneKeyName = this.paneKeyName;
-      let tabIndex = this.tabs.findIndex((tab) => {
-        if (tabNameEnable) {
-          return tab.tabName === targetName;
-        } else {
-          return tab.data[paneKeyName] + "" === targetName;
-        }
-      });
-      if (this.activeName === targetName) {
-        if (tabIndex > 0) {
-          let prev = this.tabs[tabIndex - 1];
-          this.activeName = tabNameEnable
-            ? prev.tabName
-            : prev.data[paneKeyName] + "";
-        } else {
-          this.activeName = "second";
-        }
-      }
-      if (tabIndex !== -1) {
-        this.tabs.splice(tabIndex, 1);
-      }
-      this.$emit("removeTab", targetName);
-    },
-    getCurrentPaneName() {
-      return this.getCurrntPaneTarget().paneName;
-    },
-    getCurrntPaneTarget() {
-      let panes = this.$refs.tabs.panes;
-      let target = panes.find((pane) => pane.active);
-      return target;
-    },
-    reloadTabContent(target, param, tab) {
-      let updateParam =
-        param != null && param.updateParam != null ? param.updateParam : {};
-      for (let key in updateParam) {
-        target.$emit("update:" + key, updateParam[key]);
-      }
-
-      if (!tab) {
-        let activeName = this.activeName;
-        tab = this.tabs.find((item) => item.paneName == activeName);
-      }
-      if (tab) {
-        tab.showContent = false;
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            tab.showContent = true;
-            this.$nextTick(resolve);
-          }, 200);
-        });
-      }
-      return Promise.resolve();
-    },
-    tabClick(targetName) {
-      this.$emit("tabClick", targetName);
-    },
-  },
-};
-</script>
-<style scoped></style>
+<template>
+  <el-tabs
+    v-model="activeName"
+    class="tab-box tab-morenav"
+    @tab-remove="removeTab"
+    @tab-click="tabClick"
+    ref="tabs"
+  >
+    <slot name="default"></slot>
+    <template v-for="(tab, index) in tabs">
+      <slot name="editTab" v-bind="{ tab, index, tabs, reloadTabContent }"></slot>
+    </template>
+  </el-tabs>
+</template>
+<script>
+export default {
+  name: "x-tabs",
+  props: {
+    value: String,
+    paneKeyName: {
+      type: String,
+      default: () => "id",
+    },
+    tabNameEnable: {
+      type: Boolean,
+      default: () => false,
+    },
+    // 关闭页签前置钩子 beforeRemove(targetName, tab) => Boolean | Promise<Boolean>
+    // 返回 false（或 reject）则中止关闭，用于「未保存提示」。不传 = 行为与原来完全一致。
+    beforeRemove: Function,
+  },
+  data() {
+    return {
+      activeName: "0",
+      tabs: [],
+    };
+  },
+  watch: {
+    value(val) {
+      this.activeName = val;
+    },
+    activeName(val) {
+      this.$emit("input", val);
+    },
+  },
+  created() {
+    if (this.value) {
+      this.activeName = this.value;
+    }
+  },
+  methods: {
+    openEditTab(row, param, option) {
+      let paneKeyName = this.paneKeyName;
+      let tab = this.tabs.find((tab) => tab.data[paneKeyName] === row[paneKeyName]);
+      let tabParam = option?.tabParam || {};
+      let dataId = row ? row[paneKeyName] : null;
+      let newTab = {
+        data: row,
+        showContent: false,
+        dataId: dataId,
+        param,
+        ...tabParam,
+      };
+      if (!tab) {
+        tab = newTab;
+        if (this.tabs.length >= 30) {
+          this.tabs.splice(0, 1, tab);
+        } else {
+          this.tabs.push(tab);
+        }
+        this.$nextTick(() => {
+          let paneName = this.getCurrentPaneName();
+          tab.paneName = paneName;
+        });
+      } else {
+        Object.assign(tab, newTab);
+      }
+      let tabNameEnable = this.tabNameEnable;
+      this.activeName = row ? (tabNameEnable ? tab.tabName : row[paneKeyName] + "") : "";
+      tab.showContent = false;
+      setTimeout(() => {
+        tab.showContent = true;
+      }, 200);
+    },
+    // el-tabs 的 tab-remove 入口：先过 beforeRemove 钩子，通过后才真正关闭。
+    // 程序化关闭（如流程提交后自动关页签）应直接调 doRemoveTab 跳过确认。
+    removeTab(targetName) {
+      if (!this.beforeRemove) {
+        this.doRemoveTab(targetName);
+        return;
+      }
+      let tabNameEnable = this.tabNameEnable;
+      let paneKeyName = this.paneKeyName;
+      let tab = this.tabs.find((tab) => {
+        return tabNameEnable
+          ? tab.tabName === targetName
+          : tab.data[paneKeyName] + "" === targetName;
+      });
+      Promise.resolve(this.beforeRemove(targetName, tab)).then(
+        (pass) => {
+          if (pass !== false) this.doRemoveTab(targetName);
+        },
+        () => {} // reject 视为取消关闭（方便直接把 $baseConfirm 的 promise 丢回来）
+      );
+    },
+    doRemoveTab(targetName) {
+      let tabNameEnable = this.tabNameEnable;
+      let paneKeyName = this.paneKeyName;
+      let tabIndex = this.tabs.findIndex((tab) => {
+        if (tabNameEnable) {
+          return tab.tabName === targetName;
+        } else {
+          return tab.data[paneKeyName] + "" === targetName;
+        }
+      });
+      if (this.activeName === targetName) {
+        if (tabIndex > 0) {
+          let prev = this.tabs[tabIndex - 1];
+          this.activeName = tabNameEnable
+            ? prev.tabName
+            : prev.data[paneKeyName] + "";
+        } else {
+          this.activeName = "second";
+        }
+      }
+      if (tabIndex !== -1) {
+        this.tabs.splice(tabIndex, 1);
+      }
+      this.$emit("removeTab", targetName);
+    },
+    getCurrentPaneName() {
+      return this.getCurrntPaneTarget().paneName;
+    },
+    getCurrntPaneTarget() {
+      let panes = this.$refs.tabs.panes;
+      let target = panes.find((pane) => pane.active);
+      return target;
+    },
+    reloadTabContent(target, param, tab) {
+      let updateParam =
+        param != null && param.updateParam != null ? param.updateParam : {};
+      for (let key in updateParam) {
+        target.$emit("update:" + key, updateParam[key]);
+      }
+
+      if (!tab) {
+        let activeName = this.activeName;
+        tab = this.tabs.find((item) => item.paneName == activeName);
+      }
+      if (tab) {
+        tab.showContent = false;
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            tab.showContent = true;
+            this.$nextTick(resolve);
+          }, 200);
+        });
+      }
+      return Promise.resolve();
+    },
+    tabClick(targetName) {
+      this.$emit("tabClick", targetName);
+    },
+  },
+};
+</script>
+<style scoped></style>