@bytenew/bn-bus-ui 1.1.463 → 1.1.464

package/packages/BnMenus/MenuItem.vue

@@ -1,321 +0,0 @@
-<!--
-  @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

@@ -1,389 +0,0 @@
-<!--
-  @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>