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

package/src/views/bd/project/core/branchPage.js

@@ -0,0 +1,78 @@
+import branchScope from "./branchScope";
+import { BRANCH_FLAG } from "./branchContext";
+import branchPageWrap from "./branchPageWrap.vue";
+
+/**
+ * 分支工程页面通用逻辑：
+ * 1. 进入先选分支，选中后再渲染被复用的原组件
+ * 2. 选中后分支锁定，不可再改
+ * 3. 「打开新分支」以独立标签再开一页（需菜单 meta.repeatOpen）
+ */
+let modules = {};
+modules = {
+  components: { branchPageWrap },
+  mixins: [branchScope(BRANCH_FLAG.BRANCH)],
+  data() {
+    return {
+      branchCode: "",
+      branchName: "",
+      // 组件创建时记下原始菜单名，避免 route.meta.title 被改写后叠加多个分支名
+      baseTabTitle: "",
+    };
+  },
+  computed: {
+    branchLabel() {
+      if (!this.branchCode) {
+        return "";
+      }
+      if (this.branchName) {
+        return `${this.branchName}(${this.branchCode})`;
+      }
+      return this.branchCode;
+    },
+  },
+  created() {
+    this.baseTabTitle = this.resolveBaseTabTitle();
+  },
+  methods: {
+    resolveBaseTabTitle() {
+      let matched = this.$route.matched || [];
+      let last = matched[matched.length - 1] || {};
+      // 优先用路由记录上的原始 menuName，勿用可能已被污染的 meta.title
+      return (
+        last.menuName ||
+        this.$route.menuName ||
+        last.meta?.originTitle ||
+        this.$route.meta?.originTitle ||
+        last.meta?.title ||
+        this.$route.meta?.title ||
+        ""
+      );
+    },
+    onBranchChange(branch) {
+      if (!branch || !branch.branchCode) {
+        return;
+      }
+      this.branchCode = branch.branchCode;
+      this.branchName = branch.branchName || "";
+      this.updateTabTitle();
+    },
+    updateTabTitle() {
+      let base = this.baseTabTitle || this.resolveBaseTabTitle();
+      let suffix = this.branchName || this.branchCode;
+      // 菜单名形如「表单模板-分支」，选中分支后把末尾的「分支」换成分支名
+      let title = suffix
+        ? `${base.replace(/[-－—]?\s*分支$/, "")}-${suffix}`
+        : base;
+      this.$store.dispatch("tagsView/updateVisitedView2", {
+        view: this.$route,
+        title,
+      });
+    },
+    openNewBranch() {
+      // 带 repeatOpen 的菜单：附带唯一 _rk，新开独立标签回到选分支态
+      this.$openView({ path: this.$route.path }, this.$route);
+    },
+  },
+};
+export default modules;

package/src/views/bd/project/core/branchPageWrap.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="bd-branch-page" :class="{ 'has-branch': !!branchCode }">
+    <!-- 已选分支：内容区顶部工具条，不可改；提供打开新分支 -->
+    <div class="branch-bar" v-if="branchCode && showBar">
+      <span class="branch-locked">
+        <span class="label">{{ $t1("分支") }}:</span>
+        <span class="value">{{ branchLabel || branchCode }}</span>
+      </span>
+      <el-button
+        v-if="showOpenNew"
+        size="mini"
+        type="primary"
+        plain
+        icon="el-icon-plus"
+        @click="$emit('open-new')"
+      >
+        {{ $t1("打开新分支") }}
+      </el-button>
+    </div>
+    <div class="branch-body" ref="branchBody" v-if="branchCode">
+      <slot></slot>
+    </div>
+    <!-- 未选：先选分支再进入具体页面 -->
+    <div class="branch-empty" v-else>
+      <i class="el-icon-office-building"></i>
+      <p class="tip">{{ $t1("请先选择分支") }}</p>
+      <branchSelect
+        :value="branchCode"
+        @input="$emit('update:branchCode', $event)"
+        @change="$emit('branch-change', $event)"
+      ></branchSelect>
+    </div>
+  </div>
+</template>
+
+<script>
+import branchSelect from "./branchSelect.vue";
+
+const BADGE_CLASS = "bd-branch-detail-badge";
+
+export default {
+  name: "bdBranchPageWrap",
+  components: { branchSelect },
+  props: {
+    branchCode: String,
+    branchLabel: String,
+    // 页面自己在查询条件里展示/切换分支时，顶部工具条就是多余的
+    showBar: {
+      type: Boolean,
+      default: true,
+    },
+    showOpenNew: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  watch: {
+    branchCode() {
+      this.scheduleInjectBadge();
+    },
+    branchLabel() {
+      this.scheduleInjectBadge();
+    },
+  },
+  mounted() {
+    this.scheduleInjectBadge();
+  },
+  beforeDestroy() {
+    this.clearInjectTimer();
+    this.clearBodyObserver();
+  },
+  methods: {
+    clearInjectTimer() {
+      if (this._injectTimer) {
+        clearTimeout(this._injectTimer);
+        this._injectTimer = null;
+      }
+    },
+    clearBodyObserver() {
+      if (this._bodyObserver) {
+        this._bodyObserver.disconnect();
+        this._bodyObserver = null;
+      }
+    },
+    scheduleInjectBadge() {
+      this.clearInjectTimer();
+      this._injectTimer = setTimeout(() => {
+        this.ensureBodyObserver();
+        this.injectDetailBadges();
+      }, 50);
+    },
+    ensureBodyObserver() {
+      let body = this.$refs.branchBody;
+      if (!body || this._bodyObserver) {
+        return;
+      }
+      // 详情页通过 x-tabs 异步挂载，监听后补上分支名
+      this._bodyObserver = new MutationObserver(() => {
+        if (this._injecting) {
+          return;
+        }
+        this.scheduleInjectBadge();
+      });
+      this._bodyObserver.observe(body, { childList: true, subtree: true });
+    },
+    injectDetailBadges() {
+      let body = this.$refs.branchBody;
+      if (!body || !this.branchCode || this._injecting) {
+        return;
+      }
+      this._injecting = true;
+      try {
+        let text = this.$t1("分支") + ":" + (this.branchLabel || this.branchCode);
+        let headers = body.querySelectorAll(".detail-wrap .d-header .fl");
+        headers.forEach((el) => {
+          let badge = el.querySelector("." + BADGE_CLASS);
+          if (!badge) {
+            badge = document.createElement("span");
+            badge.className = BADGE_CLASS;
+            badge.textContent = text;
+            el.appendChild(badge);
+            return;
+          }
+          // 相同文案不要再写，否则会反复触发 MutationObserver 卡死页面
+          if (badge.textContent !== text) {
+            badge.textContent = text;
+          }
+        });
+      } finally {
+        this._injecting = false;
+      }
+    },
+  },
+};</script>
+
+<style lang="scss" scoped>
+.bd-branch-page {
+  position: relative;
+  height: 100%;
+
+  &.has-branch {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .branch-bar {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 0 10px 8px;
+    padding: 8px 12px;
+    background: #fff;
+    border-radius: 2px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+
+    .branch-locked {
+      display: inline-flex;
+      align-items: center;
+      color: #606266;
+      font-size: 13px;
+
+      .label {
+        margin-right: 6px;
+        color: #909399;
+      }
+
+      .value {
+        max-width: 320px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 500;
+        color: #303133;
+      }
+    }
+  }
+
+  .branch-body {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .branch-empty {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #909399;
+    background-color: #fff;
+    border-radius: 2px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+    margin: 0 10px;
+
+    i {
+      font-size: 48px;
+      margin-bottom: 12px;
+      color: #c0c4cc;
+    }
+
+    .tip {
+      margin: 0 0 16px;
+      font-size: 14px;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+/* 注入到原详情页标题栏，不能用 scoped */
+.bd-branch-detail-badge {
+  display: inline-block;
+  margin-left: 12px;
+  padding: 2px 8px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: #ff731c;
+  background: #fff3ea;
+  border-radius: 2px;
+  vertical-align: middle;
+}
+</style>

package/src/views/bd/project/core/branchScope.js

@@ -0,0 +1,44 @@
+import { SCOPE_KEY, setFallbackScope } from "./branchContext";
+import { installBranchHttp } from "./httpBranchPatch";
+
+/**
+ * 壳组件 mixin：在实例上挂分支作用域标记。
+ *
+ * created 早于子组件的 created，保证被复用的原组件发出的第一个请求就带上分支参数；
+ * 请求补丁也在这里安装，无需改动 main.js。
+ *
+ * @param {number} branchFlag 分支标识:0通用工程 1分支工程 99数据表分类
+ */
+export default function branchScope(branchFlag) {
+  return {
+    created() {
+      installBranchHttp();
+      this[SCOPE_KEY] = {
+        branchFlag,
+        branchCode: this.branchCode || null,
+        branchName: this.branchName || null,
+      };
+      setFallbackScope(this[SCOPE_KEY]);
+    },
+    mounted() {
+      setFallbackScope(this[SCOPE_KEY]);
+    },
+    activated() {
+      setFallbackScope(this[SCOPE_KEY]);
+    },
+    deactivated() {
+      setFallbackScope(null);
+    },
+    beforeDestroy() {
+      setFallbackScope(null);
+    },
+    watch: {
+      branchCode(val) {
+        this[SCOPE_KEY].branchCode = val || null;
+      },
+      branchName(val) {
+        this[SCOPE_KEY].branchName = val || null;
+      },
+    },
+  };
+}

package/src/views/bd/project/core/branchSearchPage.js

@@ -0,0 +1,285 @@
+import branchScope from "./branchScope";
+import { BRANCH_FLAG, needInject } from "./branchContext";
+
+const BRANCH_FIELD = "branchCode";
+
+/** 只读接口：分支未就绪时直接返回空结果，避免表格一直转圈 */
+const READ_SUFFIXES = [
+  "/getAllList",
+  "/getChildren",
+  "/listPage",
+  "/listOtherPage",
+  "/listPageWf",
+];
+
+function isReadUrl(url) {
+  if (!url) {
+    return false;
+  }
+  let path = url;
+  let qIndex = path.indexOf("?");
+  if (qIndex >= 0) {
+    path = path.substring(0, qIndex);
+  }
+  return READ_SUFFIXES.some((item) => path.endsWith(item));
+}
+
+/**
+ * 分支工程页面（分支收敛到查询条件）通用逻辑：
+ * 1. 不做进入前的分支门禁，也不提供「打开新分支」，分支就是查询条件里的第一个下拉框
+ * 2. 没选到有效分支时整页不可操作：不查询、不保存、不导入导出
+ * 3. 切换分支即清空其余查询条件并重新查询；分支不做记忆，每次进来都要重新选
+ * 4. 页面用 extends 复用 bd/setting 下的原组件，这里全部改在实例级的 $vxeTableUtil /
+ *    $http / $jsonImport / $jsonExport 上做，不必重写原组件的任何方法
+ */
+let modules = {};
+modules = {
+  mixins: [branchScope(BRANCH_FLAG.BRANCH)],
+  props: {
+    // 由外层前置选择页带进来的分支，组件挂载时就已经确定
+    initBranchCode: String,
+  },
+  data() {
+    return {
+      branchCode: this.initBranchCode || "",
+      branchName: "",
+      branches: [],
+      branchesLoaded: false,
+    };
+  },
+  computed: {
+    /** 后台匹配得到分支才算就绪；分支列表未回来前，先按已选分支放行 */
+    branchReady() {
+      if (!this.branchCode) {
+        return false;
+      }
+      if (!this.branchesLoaded) {
+        return true;
+      }
+      return this.branches.some((item) => item.branchCode === this.branchCode);
+    },
+  },
+  created() {
+    this.patchVxeTableUtil();
+    this.patchBranchGuard();
+  },
+  watch: {
+    "formData.branchCode"(val) {
+      this.applyBranch(val);
+    },
+  },
+  methods: {
+    /** 实例级覆盖 $vxeTableUtil.initVxeTable，给原页面的查询条件补一列分支 */
+    patchVxeTableUtil() {
+      let origin = this.$vxeTableUtil;
+      if (!origin || this._branchVxePatched) {
+        return;
+      }
+      this._branchVxePatched = true;
+      let that = this;
+      // $vxeTableUtil 上都是无 this 依赖的普通函数，原型继承 + 覆盖单个方法即可
+      this.$vxeTableUtil = Object.assign(Object.create(origin), {
+        initVxeTable(option) {
+          that.injectBranchSearchColumn(option);
+          return origin.initVxeTable(option);
+        },
+      });
+    },
+    /** 分支未就绪时拦掉本页所有分支相关请求与导入导出 */
+    patchBranchGuard() {
+      if (this._branchGuardPatched) {
+        return;
+      }
+      this._branchGuardPatched = true;
+      let that = this;
+
+      // $commonHttp 内部转调 this.$http，表格查询/树懒加载/行保存都会走到这里
+      let originHttp = this.$http;
+      let wrapped = function (option) {
+        if (option && needInject(option.url) && !that.branchReady) {
+          return that.refuseBranchRequest(option);
+        }
+        return originHttp.apply(this, arguments);
+      };
+      Object.assign(wrapped, originHttp);
+      wrapped.prototype = originHttp.prototype;
+      this.$http = wrapped;
+
+      let originImport = this.$jsonImport;
+      if (typeof originImport === "function") {
+        this.$jsonImport = function () {
+          if (!that.checkBranchReady()) {
+            return;
+          }
+          return originImport.apply(this, arguments);
+        };
+      }
+      let originExport = this.$jsonExport;
+      if (typeof originExport === "function") {
+        this.$jsonExport = function () {
+          if (!that.checkBranchReady()) {
+            return;
+          }
+          return originExport.apply(this, arguments);
+        };
+      }
+    },
+    refuseBranchRequest(option) {
+      if (isReadUrl(option.url)) {
+        let res = { type: "success", objx: { records: [], total: 0 } };
+        if (option.callback) {
+          option.callback(res);
+        }
+        if (option.success) {
+          option.success(res);
+        }
+        return Promise.resolve(res);
+      }
+      this.warnBranchRequired();
+      if (option.error) {
+        option.error(null);
+      }
+      return Promise.resolve(null);
+    },
+    checkBranchReady() {
+      if (this.branchReady) {
+        return true;
+      }
+      this.warnBranchRequired();
+      return false;
+    },
+    warnBranchRequired() {
+      // 同一批操作只提示一次，避免树表并发请求刷屏
+      if (this._branchWarning) {
+        return;
+      }
+      this._branchWarning = true;
+      setTimeout(() => {
+        this._branchWarning = false;
+      }, 1000);
+      this.$message({
+        type: "warning",
+        message: this.$t1("请先选择分支"),
+      });
+    },
+    injectBranchSearchColumn(option) {
+      if (!option) {
+        return;
+      }
+      this._branchTableRef = option.tableRef || this._branchTableRef;
+      let columns = option.searchColumns || [];
+      if (columns.some((item) => item.field === BRANCH_FIELD)) {
+        return;
+      }
+      option.searchColumns = [this.buildBranchSearchColumn(), ...columns];
+    },
+    buildBranchSearchColumn() {
+      return {
+        title: this.$t1("分支"),
+        field: BRANCH_FIELD,
+        type: "select",
+        common: true,
+        // fixed 让「查询条件设置」的保存结果无法把它挪位置或收进高级筛选
+        fixed: true,
+        // 分支不允许清空，页面必须始终处在某个分支下
+        clearable: false,
+        itemOption: [],
+        // 不做记忆，只回填前置页刚选的分支
+        defaultValue: this.branchCode || null,
+        syncHandle: () => {
+          return this.loadBranches();
+        },
+      };
+    },
+    loadBranches() {
+      return new Promise((resolve) => {
+        this.$http({
+          url: USER_PREFIX + "/bd_branch/listPage",
+          method: "post",
+          data: {
+            enabled: true,
+            current: 1,
+            size: 500,
+          },
+          success: (res) => {
+            let records = res?.objx?.records || [];
+            this.branches = records;
+            this.branchesLoaded = true;
+            this.dropInvalidBranch();
+            this.syncBranchName();
+            resolve(
+              records.map((item) => {
+                return {
+                  label: item.branchName + "(" + item.branchCode + ")",
+                  value: item.branchCode,
+                };
+              })
+            );
+          },
+          error: () => {
+            this.branchesLoaded = true;
+            resolve([]);
+          },
+        });
+      });
+    },
+    /** 已选分支后台查不到（停用/删除）时清掉，页面回到不可操作状态 */
+    dropInvalidBranch() {
+      if (!this.branchCode || this.branchReady) {
+        return;
+      }
+      this.branchCode = "";
+      if (this.formData) {
+        this.$set(this.formData, BRANCH_FIELD, null);
+      }
+      this.$message({
+        type: "warning",
+        message: this.$t1("原分支已不可用，请重新选择分支"),
+      });
+      // 清掉可能已经查回来的旧分支数据
+      this.reloadBranchTable();
+    },
+    syncBranchName() {
+      let current = this.branches.find(
+        (item) => item.branchCode === this.branchCode
+      );
+      this.branchName = current ? current.branchName || "" : "";
+    },
+    applyBranch(val) {
+      let branchCode = val || "";
+      // 值没变就不要再触发一次查询
+      if (branchCode === this.branchCode) {
+        return;
+      }
+      this.branchCode = branchCode;
+      this.syncBranchName();
+      // 换分支等于换了一套数据，其余查询条件全部清空
+      this.formData = { [BRANCH_FIELD]: branchCode || null };
+      this.reloadBranchTable();
+      // 通知外层同步标签页名等分支信息
+      this.$emit("branch-change", {
+        branchCode: this.branchCode,
+        branchName: this.branchName,
+      });
+    },
+    reloadBranchTable() {
+      let grid = this.$refs[this._branchTableRef || "table-m1"];
+      if (grid) {
+        grid.commitProxy("reload");
+      }
+    },
+    searchEvent() {
+      if (!this.checkBranchReady()) {
+        return;
+      }
+      this.reloadBranchTable();
+    },
+    /** 重置查询条件时保留已选分支 */
+    resetEvent() {
+      let branchCode = this.formData ? this.formData.branchCode : "";
+      this.formData = { [BRANCH_FIELD]: branchCode || null };
+      this.reloadBranchTable();
+    },
+  },
+};
+export default modules;

package/src/views/bd/project/core/branchSelect.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="bd-branch-select">
+    <span class="label">{{ $t1("分支") }}:</span>
+    <el-select
+      :value="value"
+      size="small"
+      filterable
+      :placeholder="$t1('请选择分支')"
+      @change="handleChange"
+    >
+      <el-option
+        v-for="item in branches"
+        :key="item.branchCode"
+        :label="item.branchName + '(' + item.branchCode + ')'"
+        :value="item.branchCode"
+      ></el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "bdBranchSelect",
+  props: {
+    value: String,
+  },
+  data() {
+    return {
+      branches: [],
+    };
+  },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      this.$http({
+        url: USER_PREFIX + "/bd_branch/listPage",
+        method: "post",
+        data: {
+          enabled: true,
+          current: 1,
+          size: 500,
+        },
+        success: (res) => {
+          this.branches = res?.objx?.records || [];
+        },
+      });
+    },
+    // 分支不做记忆，每次进页面都要重新选
+    handleChange(val) {
+      let branchCode = val || "";
+      this.$emit("input", branchCode);
+      this.$emit(
+        "change",
+        this.branches.find((item) => item.branchCode === branchCode) || null
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bd-branch-select {
+  display: inline-flex;
+  align-items: center;
+
+  .label {
+    margin-right: 6px;
+    color: #666;
+    white-space: nowrap;
+  }
+
+  /* 覆盖全局 .el-select{display:block} / .el-input{width:148px}，避免框体和内层宽度不一致 */
+  ::v-deep .el-select {
+    display: inline-block;
+    width: 180px;
+
+    .el-input,
+    .el-input__inner {
+      width: 100% !important;
+    }
+  }
+}
+</style>