@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnMenus/MenuItem.vue

@@ -0,0 +1,321 @@
+<!--
+  @Description: BnMenus 递归菜单项子组件，负责渲染子菜单折叠标题与叶子节点
+  @VERSION: 1.0
+-->
+<template>
+  <!-- 有子菜单：渲染可折叠的分组标题 -->
+  <div v-if="hasChildren" class="BnMenus-sub" :class="{ 'is-open': opened }">
+    <div
+      class="BnMenus-sub-title"
+      :class="{ 'is-disable-fold': disableFold }"
+      :style="rowPaddingStyle"
+      @click="toggleSubMenu"
+    >
+      <div class="BnMenus-sub-title-inner">
+        <div class="BnMenus-item" :title="menu.title || menu.meta?.title">
+          <span v-if="menuIcon" class="BnMenus-item-icon" :class="menuIcon"></span>
+          <span class="BnMenus-item-folder">{{ menu.title || menu.meta?.title }}</span>
+        </div>
+        <!-- 展开 / 收起箭头；禁止折叠时显示圆点标识 -->
+        <span
+          v-if="disableFold"
+          class="BnMenus-sub-dot bnUIcon bnUIcon-circle w-font12"
+          :style="{ color: themeColor }"
+        ></span>
+        <span
+          v-else
+          class="BnMenus-sub-arrow bnUIcon bnUIcon-arrow2 w-font12"
+          :class="{ 'is-open': opened }"
+        ></span>
+      </div>
+    </div>
+    <div v-show="opened" class="BnMenus-sub-list">
+      <menu-item
+        v-for="(item, index) in menu.children"
+        :key="bnMenus.getMenuIndex(item) || index"
+        :menu="item"
+        :level="level + 1"
+        :theme-index="themeIndex"
+      />
+    </div>
+  </div>
+  <!-- 无子菜单：渲染可点击的叶子节点 -->
+  <div
+    v-else
+    class="BnMenus-body-item"
+    :class="{
+      'is-active': active && !useBorderActive,
+      'is-active-border': active && useBorderActive
+    }"
+    :style="[rowPaddingStyle, activeStyle]"
+    @click="bnMenus.selectMenu(menu)"
+  >
+    <div class="BnMenus-item" :title="menu.title || menu.meta?.title">
+      <span v-if="menuIcon" class="BnMenus-item-icon" :class="menuIcon"></span>
+      <span class="BnMenus-item-text">{{ menu.title || menu.meta?.title }}</span>
+      <span v-if="active" class="BnMenus-item-stick bnUIcon bnUIcon-stick"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MenuItem",
+  // 注入父组件 BnMenus 实例
+  inject: ['bnMenus'],
+  props: {
+    // 当前菜单项数据，含 name、icon、meta、children 等字段
+    menu: {
+      type: Object,
+      required: true
+    },
+    // 当前菜单层级，从 1 开始，用于计算左侧缩进
+    level: {
+      type: Number,
+      default: 1
+    },
+    // 所属一级菜单的索引，用于循环取主题色；子级继承父级传入的值
+    themeIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    /** 是否含有子菜单 */
+    hasChildren() {
+      return this.menu.children?.length > 0
+    },
+    /** 子菜单是否已展开 */
+    opened() {
+      return this.bnMenus.isOpen(this.menu)
+    },
+    /** 当前项是否禁止展开/收起 */
+    disableFold() {
+      return this.bnMenus.isDisableFold(this.menu)
+    },
+    /** 当前项是否处于选中高亮状态 */
+    active() {
+      return this.bnMenus.isActive(this.menu)
+    },
+    /**
+     * 菜单图标 class，优先取顶层 icon，兼容 meta.icon
+     * @returns {String} 矢量图标库 class 名，无图标时返回空字符串
+     */
+    menuIcon() {
+      return this.menu.icon || this.menu.meta?.icon || ''
+    },
+    /** 当前项所属一级菜单的主题色 */
+    themeColor() {
+      return this.bnMenus.getThemeColor(this.themeIndex)
+    },
+    /** 选中时是否使用边框高亮（menu.border / menu.meta.border） */
+    useBorderActive() {
+      return !!(this.menu.border || this.menu.meta?.border)
+    },
+    /**
+     * 选中态 CSS 变量，供样式中动态设置文字色与背景色
+     * @returns {Object} 未选中时返回空对象
+     */
+    activeStyle() {
+      if (!this.active) return {}
+      return {
+        '--menu-theme-color': this.themeColor,
+        '--menu-theme-bg': this.bnMenus.getThemeBg(this.themeIndex)
+      }
+    },
+    /**
+     * 行级左右边距：基础左右各 10px，子级每深一层左侧额外缩进 10px
+     */
+    rowPaddingStyle() {
+      return { paddingLeft: `${10 + (this.level - 1) * 10}px` }
+    }
+  },
+  methods: {
+    /** 切换当前子菜单展开 / 收起 */
+    toggleSubMenu() {
+      if (this.disableFold) return
+      this.bnMenus.toggleSubMenu(this.menu)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../font/iconfont.css";
+
+// 菜单项通用样式
+.BnMenus-body-item {
+  cursor: pointer;
+  user-select: none;
+  padding: 0 10px;
+
+  .BnMenus-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 8px;
+    padding: 0 10px;
+    overflow: hidden;
+    border: 1px solid transparent;
+    box-sizing: border-box;
+  }
+}
+
+.BnMenus-sub-title {
+  cursor: pointer;
+  user-select: none;
+  padding-right: 10px;
+
+  &.is-disable-fold {
+    cursor: default;
+  }
+
+  .BnMenus-item {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 8px;
+    padding: 0 10px;
+    overflow: hidden;
+  }
+}
+
+.BnMenus-body-item,
+.BnMenus-sub-title {
+  // 默认态图标颜色
+  .BnMenus-item-icon {
+    flex-shrink: 0;
+    margin-right: 8px;
+    font-size: 16px;
+    line-height: 1;
+    color: #86909c;
+  }
+
+  // 默认态文字颜色
+  .BnMenus-item-folder {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #333;
+    font-size: 14px;
+    font-weight: 600;
+  }
+  // 默认态文字颜色
+  .BnMenus-item-text {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #4a5565;
+    font-size: 14px;
+  }
+}
+
+// 叶子节点 hover 背景
+.BnMenus-body-item:hover .BnMenus-item {
+  background: #edf5ff;
+}
+
+// 选中高亮：主题色加粗文字 + 浅色背景
+.BnMenus-body-item.is-active {
+  .BnMenus-item {
+    background: var(--menu-theme-bg);
+  }
+
+  .BnMenus-item-text {
+    color: var(--menu-theme-color);
+    font-weight: 600;
+  }
+
+  .BnMenus-item-icon {
+    color: var(--menu-theme-color);
+  }
+
+  .BnMenus-item-stick {
+    color: var(--menu-theme-color);
+  }
+}
+
+// 选中高亮（border 模式）：主题色边框，无背景色
+.BnMenus-body-item.is-active-border {
+  .BnMenus-item {
+    background: transparent;
+    border-color: var(--menu-theme-color);
+  }
+
+  .BnMenus-item-text {
+    color: var(--menu-theme-color);
+    font-weight: 600;
+  }
+
+  .BnMenus-item-icon {
+    color: var(--menu-theme-color);
+  }
+
+  .BnMenus-item-stick {
+    color: var(--menu-theme-color);
+  }
+
+  &:hover .BnMenus-item {
+    background: transparent;
+  }
+}
+
+// 选中态右侧竖条标识
+.BnMenus-item-stick {
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.BnMenus-sub-title {
+  // 外层仅负责左右留白与层级缩进，背景色在内层
+  &-inner {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    border-radius: 5px;
+    padding-right: 6px;
+
+    &:hover {
+      background: #edf5ff;
+    }
+  }
+
+  .BnMenus-item {
+    padding-right: 0;
+  }
+}
+
+// 子菜单展开箭头，展开时旋转 180°
+.BnMenus-sub-arrow {
+  flex-shrink: 0;
+  margin-left: 4px;
+  font-size: 12px;
+  color: #86909c;
+  transition: transform 0.2s;
+
+  &.is-open {
+    transform: rotate(180deg);
+  }
+}
+
+// 禁止折叠时的圆点标识，颜色取所属一级菜单 THEME_COLORS 主题色
+.BnMenus-sub-dot {
+  flex-shrink: 0;
+  margin-left: 4px;
+  font-size: 12px;
+}
+
+.BnMenus-sub-list {
+  overflow: hidden;
+}
+</style>

package/packages/BnOrderCard/BnOrderCard.vue

@@ -0,0 +1,389 @@
+<!--
+  @Auther:辛巴
+  @Date:2025/10/16
+  @Description:工单详情弹框订单卡片组件
+  @VERSION:1.0-->
+<template>
+  <div class="bnOrder">
+    <orderRemark ref="orderRemark" @overRemark="overRemark" :post-func="postFunc"></orderRemark>
+    <el-card class="bnOrder-card" v-if="orderData.tid && orderData.CRMTRADE">
+      <div class="bnOrder-info">
+        <div class="bnOrder-info-item">
+          <span class="bnOrder-info-title">订单号：</span>
+          <span class="w-default-hover" @click="openTid('tid')">{{ orderData.tid }}</span>
+        </div>
+        <div class="bnOrder-info-item">
+          <span class="bnOrder-info-title">付款时间：</span>
+          <span>{{ orderData.CRMTRADE.payTime || '-' }}</span>
+        </div>
+      </div>
+      <div class="bnOrder-info">
+        <div class="bnOrder-info-item">
+          <span class="bnOrder-info-title">店铺：</span>
+          <span class="w-color-orange">{{ orderData?.CRMSELLER?.title || '-' }}</span>
+        </div>
+        <div class="bnOrder-info-item">
+          <span class="bnOrder-info-title">昵称：</span>
+          <span class="w-color-blue">{{ orderData.CRMTRADE.buyerNick.slice(0, 10) }}</span>
+          <span class="bnUIcon bnUIcon-openLock w-color-blue w-cursor-pointer"
+                v-if="!decryptIs.includes('buyerNick')" @click="decryptData('buyerNick')"></span>
+        </div>
+      </div>
+      <div class="bnOrder-info">
+        <div class="bnOrder-info-item">
+          <span class="bnOrder-info-title">收货地址：</span>
+          <span class="w-margin-right8" v-for="(item,index) in ['receiverAddress','receiverName','buyMobile']"
+                :key="index">
+          <span> {{ orderData.CRMTRADE[item] }}</span>
+            <span class="bnUIcon bnUIcon-openLock w-color-blue w-cursor-pointer"
+                  v-if="!decryptIs.includes(item)"
+                  @click="decryptData(item)"></span>
+         </span>
+        </div>
+      </div>
+      <el-table :data="orderData.CRMORDER" :show-header="false" style="width: 100%">
+        <el-table-column width="560">
+          <template #default="scope">
+            <div class="bnOrder-good">
+              <div class="w-flex-top">
+                <div>
+                  <el-image
+                      class="bnOrder-good-img"
+                      style=""
+                      :preview-teleported="true"
+                      :src="scope.row.picUrl"
+                      :preview-src-list="[scope.row.picUrl]"
+                      show-progress fit="cover"
+                  />
+                </div>
+                <div class="bnOrder-good-info">
+                  <div class="w-text-over-two w-color-black3 w-default-hover" @click="openTid(scope.row.sourceItemId)">
+                    {{ scope.row.title }}
+                  </div>
+                  <div class="w-font13">
+                    <span class="w-color-gray">商品属性：</span>{{ scope.row.skuPropName || '-' }}
+                    <span class="w-color-gray w-margin-left8">商家编码：</span>{{ scope.row.outerSkuId || '-' }}
+                  </div>
+                </div>
+              </div>
+              <div>
+                <span class="w-font12 w-margin-right2">x</span><span
+                  class="w-font16 w-font-weight">{{ scope.row.num }}</span>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column>
+          <template #default="scope">
+            <div class="w-flex-lrCenter w-text-over">
+              <span class="w-font-weight w-font16 w-color-deep-orange">￥{{ scope.row.price }}</span>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="bnOrder-flag">
+        <div class="bnOrder-info-item w-color-black8">卖家备注：</div>
+        <div class="bnOrder-flag-content">
+          <span v-if="orderData.CRMTRADE.sellerFlag && sellerRemarksColor"
+                class="bnUIcon bnUIcon-flag" :class="[`flag-color-${sellerRemarksColor}`]"></span>
+          <span class="w-font14 w-margin-lr3">{{ orderData.CRMTRADE.sellerMemo }}</span>
+          <span class="w-color-blue w-cursor-pointer w-font14" @click="orderRemark">编辑备注</span>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {flagList} from "./util.js";
+import orderRemark from "./orderRemark.vue";
+
+export default {
+  name: "BnOrderCard",
+  components: {orderRemark},
+  props: {
+    // 接口请求外部转发
+    postFunc: Function,
+    // 扩展参数
+    extendPost: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+  },
+  computed: {
+    // 获取订单备注旗帜颜色
+    sellerRemarksColor() {
+      const {sellerFlag} = this.orderData.CRMTRADE;
+      const {sellerType} = this.orderData.CRMSELLER;
+      // 特殊值，如果 flag 为100，一律展示橙色（因为其他平台没有橙色，橙黄相反的问题处理 - 布奇。）
+      if (sellerFlag == '100') {
+        return 'orange'
+      }
+      let flags = this.flagList[sellerType || 1];
+      // 没找到旗子列表（说明该平台没有旗帜）展示空旗帜
+      if (flags) {
+        let flagFind = flags.find(flag => flag.key == sellerFlag);
+        return flagFind.className;
+      } else {
+        return false
+      }
+    },
+  },
+  data() {
+    return {
+      flagList: flagList,
+      orderData: {},
+      // 解密历史
+      decryptIs:[]
+    }
+  },
+  created() {
+    this.getOrderData();
+  },
+  methods: {
+    /**
+     * 获取订单信息
+     * */
+    async getOrderData() {
+      let res = await this.postFunc(`/v2/ods/getOdsInfoByDetail/${this.extendPost.projectId}`, {
+        ...this.extendPost
+      })
+      if (!res.code) {
+        this.orderData = res.data;
+      }
+    },
+    /**
+     * 点击修改订单备注
+     * */
+    orderRemark() {
+      let postData = {
+        tid: this.orderData.CRMTRADE.tid, // 订单Id
+        sellerId: this.orderData.CRMSELLER.id, //淘宝店铺Id
+        sellerType: this.orderData.CRMSELLER.sellerType, //淘宝店铺Id
+        flag: this.orderData.CRMTRADE.sellerFlag,// 备注旗帜
+        sellerMemo: this.orderData.CRMTRADE.sellerMemo, // 备注内容
+        type: this.orderData.CRMTRADE && this.orderData.CRMTRADE.sellerMemo ? 'update' : 'create' // 1、create 新增 2、update 更新
+      }
+      this.$refs.orderRemark.open(postData)
+    },
+    /**
+     * 备注完毕更新备注信息
+     * */
+    overRemark(data) {
+      this.orderData.CRMTRADE.sellerFlag = data.flag;
+      this.orderData.CRMTRADE.sellerMemo = data.sellerMemo;
+    },
+    /**
+     * 打开订单详情\商品详情。
+     * type：tid-订单 其他-商品id
+     * */
+    openTid(type) {
+      if (['1', '8'].includes(this.orderData.CRMSELLER.sellerType)) {
+        let url = ''
+        if (type == 'tid') {
+          url = `https://trade.taobao.com/trade/detail/trade_item_detail.htm?spm=a1z09.1.0.0.d3wYGE&bizOrderId=${this.orderData.CRMTRADE.tid}`
+        } else {
+          url = `http://item.taobao.com/item.htm?id=${type}`
+        }
+        window.open(url, '_target')
+      } else {
+        this.$message.warning('仅淘天支持订单信息跳转')
+      }
+    },
+    /**
+     * 数据解密
+     * */
+    decryptData(type) {
+      this.decryptIs.push(type)
+      let sellerType = Number(this.orderData.CRMSELLER.sellerType);
+      let bool1 = Boolean([37, 21, 19, 29, 42, 25, 46].includes(sellerType) &&
+          ['buyerNick', 'buyMobile', 'receiverName', 'receiverAddress'].includes(type))
+      let bool2 = Boolean([1, 3, 8, 17, 36, 42, 25, 43, 44, 46].includes(sellerType) &&
+          ['buyMobile', 'receiverName', 'receiverAddress'].includes(type))
+      if (bool1 || bool2) {
+        let type = this.type == 'buyerNick' ? 'receiverName' : this.type;
+        let condition = {
+          taskId: this.extendPost.taskId,
+          sourceId: this.orderData.tid,
+        }
+        if (type == 'receiverAddress') {
+          let addressList = this.orderData.CRMTRADE.receiverAddress.split(',');
+          let addressString = ''
+          for (let i = 0; i < addressList.length; i++) {
+            if (i < 3) {
+              addressString += (addressList[i] + ',')
+            } else {
+              addressString += addressList[i]
+            }
+          }
+          condition[type] = addressString
+        } else {
+          condition[type] = this.orderData.CRMTRADE[type];
+        }
+        let postData = {
+          typeEnum: [1, 8].includes(sellerType) ? 12 : 1,// 类型
+          sellerId: this.orderData.CRMSELLER.id,
+          sellerType: sellerType,
+          appId: this.extendPost.appId,
+          projectId: this.extendPost.projectId,
+          conditions: [condition]
+        };
+        this.postFunc('/v2/decrypt/getReceiverInfo', postData).then(res => {
+          if (!res.code) {
+            this.orderData.CRMTRADE[type] = type == 'buyMobile' ? res.data[0].receiverPhone : res.data[0][type]
+          }
+        })
+      } else {
+        let postData = {
+          appId: this.extendPost.appId,   //小程序id
+          projectId: this.extendPost.projectId,
+          tid: this.orderData.tid,
+        }
+        this.postFunc(`/v2/ods/getOdsInfoByDetail/${this.extendPost.projectId}`, postData).then(res => {
+          if (!res.code) {
+            this.orderData.CRMTRADE[type] = type == 'buyMobile' ? res.data[0].receiverPhone : res.data[0][type]
+          }
+        })
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../font/iconfont.css";
+// 班牛旗帜颜色
+// 灰色
+.flag-color-gray {
+  color: #999999;
+}
+
+// 红色
+.flag-color-red {
+  color: #EA3D3D;
+}
+
+// 黄色
+.flag-color-yellow {
+  color: #FFC60B;
+}
+
+// 绿色
+.flag-color-green {
+  color: #3ACB36;
+}
+
+// 蓝色
+.flag-color-blue {
+  color: #0664F0;
+}
+
+// 紫色
+.flag-color-purple {
+  color: #BA2FFF;
+}
+
+// 橙色
+.flag-color-orange {
+  color: #F48804;
+}
+
+// 浅蓝色
+.flag-color-lightBlue {
+  color: #41B4FA;
+}
+
+// 浅粉色
+.flag-color-lightPink {
+  color: #E5B6B6;
+}
+
+// 深绿色
+.flag-color-bottleGreen {
+  color: #9BA217;
+}
+
+// 桃红色
+.flag-color-peach {
+  color: #E4248E;
+}
+
+// 青色（抖音的，在班牛没有这个颜色，班牛这边是深绿色）
+.flag-color-cyan {
+  color: #9BA217;
+}
+
+.bnOrder {
+  position: relative;
+  width: 100%;
+
+  &-card {
+    width: 100%;
+    padding: 0;
+
+    :deep(.el-card__body) {
+      padding: 0;
+    }
+  }
+
+  &-info {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    background: #f5f7fa;
+    padding: 0 15px;
+    border-bottom: 1px solid #dcdfe6;
+
+    &-item {
+      height: 40px;
+      line-height: 40px;
+      font-size: 14px;
+      margin-right: 10px;
+    }
+
+    &-title {
+      color: #888;
+    }
+
+  }
+
+  &-good {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-info {
+      padding: 0 10px;
+
+    }
+
+    &-img {
+      width: 68px;
+      height: 68px;
+      background: #f5f5f5;
+      border-radius: 4px;
+    }
+
+    &-num {
+      display: flex;
+    }
+  }
+
+  &-flag {
+    min-height: 40px;
+    background: #f5f7fa;
+    padding: 0 15px;
+    display: flex;
+
+    &-content {
+      max-width: calc(100% - 80px);
+      padding: 8px 0;
+      line-height: 20px;
+    }
+  }
+
+}
+
+</style>