@bytenew/bn-bus-ui 1.1.462 → 1.1.463

package/packages/BnOrderCard/orderRemark.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-dialog v-model="show" :title="`${postData.type=='create'?'新建':'修改'}订单备注`"
+             top="18px" width="680" destroy-on-close align-center>
+    <div class="orderRemark">
+      <el-form :model="postData" label-width="auto">
+        <el-form-item label="备注旗帜:" prop="name">
+          <el-radio-group v-model="postData.flag">
+            <el-radio v-for="(flag) in flagList[postData.sellerType || 1]"
+                      :value="flag.key" >
+              <span class="bnUIcon bnUIcon-flag w-font16" :class="`flag-color-${flag.className}`"></span>
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注内容:" prop="desc">
+          <el-input v-model="postData.sellerMemo" type="textarea" :autosize="{minRows:6,maxRows:8}"  resize="none" />
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="w-flex-right w-flex-center">
+		<span class="w-font13 w-color-gray w-margin-right8">已输入
+      <span class="w-color-blue">{{ changeContent(postData.sellerMemo) }}</span>/1000</span>
+        <el-button @click="show = false">取消</el-button>
+        <el-button type="primary" @click="sure()" :loading="loading">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script>
+import {cloneDeep} from "lodash";
+import {flagList} from "./util.js";
+
+export default {
+  name: 'orderRemark',
+  props: {
+    // 接口请求外部转发
+    postFunc: Function,
+    // 扩展参数
+    extendPost: Object,
+  },
+  data() {
+    return {
+      show: false,
+      flagList: flagList,
+      postData:{flag:'',sellerMemo:''},
+      loading: false,
+    }
+  },
+  methods: {
+    /**
+     * 打开选择弹框，处理数据回显
+     * */
+    open(postData) {
+      this.postData = cloneDeep(postData)
+      this.show = true;
+    },
+    /**
+     * 手动备注内容转字节提示
+     * */
+    changeContent(val) {
+      let length = val.replace(/[\u0391-\uFFE5]/g, "aa").length;
+      if (length > 1000) {
+        //根据字节截取字符串
+        this.postData.sellerMemo = this.cutStr(val, 1000)
+      }
+      return length;
+    },
+    /**
+     * 根据字节截取字符串
+     * @param {String} str 要截取的字符串
+     * @param {Number} L 要截取的字节长度，注意是字节不是字符，一个汉字两个字节
+     * @return {String} 截取后的字符串
+     */
+    cutStr(str, L) {
+      let result = '',
+          strlen = str.length, // 字符串长度
+          chrlen = str.replace(/[\u0391-\uFFE5]/g, "aa").length; // 字节长度
+      if (chrlen <= L) {
+        return str;
+      }
+      for (let i = 0, j = 0; i < strlen; i++) {
+        let chr = str.charAt(i);
+        if (/[\x00-\xff]/.test(chr)) {
+          j++; // ascii码为0-255，一个字符就是一个字节的长度
+        } else {
+          j += 2; // ascii码为0-255以外，一个字符就是两个字节的长度
+        }
+        if (j <= L) { // 当加上当前字符以后，如果总字节长度小于等于L，则将当前字符真实的+在result后
+          result += chr;
+        } else { // 反之则说明result已经是不拆分字符的情况下最接近L的值了，直接返回
+          return result;
+        }
+      }
+    },
+    /**
+     * 确认
+     * */
+    sure() {
+      this.loading = true;
+      this.postFunc('/v2/trade/saveTradeMark', this.postData).then(res=>{
+        this.loading = false;
+        if(!res.code){
+          this.$emit('overRemark',this.postData)
+          this.show=false;
+        }
+      })
+    },
+  }
+}
+</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;
+}
+.orderRemark {
+  height: 100%;
+  overflow: hidden;
+}
+</style>

package/packages/BnOrderCard/util.js

@@ -0,0 +1,94 @@
+export const flagList = {
+    // 淘宝 sellerType为1 旗帜颜色 和 key值对应
+    1: [
+        {value: "grey", className: "gray", key: '0'}, // 灰色
+        {value: "red", className: "red", key: '1'}, // 红色
+        {value: "yellow", className: "orange", key: '2'}, // 橙色 （因为旧版的原因做兼容，旧版的yellow展示的是橙色）PS：布奇、乔巴
+        {value: "green", className: "green", key: '3'}, // 绿色
+        {value: "blue", className: "blue", key: '4'}, // 蓝色
+        {value: "purple", className: "purple", key: '5'}, // 紫色
+        {value: "yellow2", className: "yellow", key: '6'}, // 黄色 （因为旧版的原因做兼容，旧版的yellow展示的是橙色）
+        {value: "lightBlue", className: "lightBlue", key: '7'}, // 浅蓝色
+        {value: "lightPink", className: "lightPink", key: '8'}, // 浅粉色
+        {value: "bottleGreen", className: "bottleGreen", key: '9'}, // 深绿色
+        {value: "peach", className: "peach", key: '10'}, // 桃红色
+    ],
+    // 天猫 sellerType为8 旗帜颜色 和 key值对应
+    8: [
+        {value: "grey", className: "gray", key: '0'}, // 灰色
+        {value: "red", className: "red", key: '1'}, // 红色
+        {value: "yellow", className: "orange", key: '2'}, // 橙色 （因为旧版的原因做兼容，旧版的yellow展示的是橙色）PS：布奇、乔巴
+        {value: "green", className: "green", key: '3'}, // 绿色
+        {value: "blue", className: "blue", key: '4'}, // 蓝色
+        {value: "purple", className: "purple", key: '5'}, // 紫色
+        {value: "yellow2", className: "yellow", key: '6'}, // 黄色 （因为旧版的原因做兼容，旧版的yellow展示的是橙色）
+        {value: "lightBlue", className: "lightBlue", key: '7'}, // 浅蓝色
+        {value: "lightPink", className: "lightPink", key: '8'}, // 浅粉色
+        {value: "bottleGreen", className: "bottleGreen", key: '9'}, // 深绿色
+        {value: "peach", className: "peach", key: '10'}, // 桃红色
+    ],
+    // 京东 sellerType为3 旗帜颜色 和 key值对应
+    3: [
+        {value: "grey", className: "gray", key: '0'}, // 灰色
+        {value: "red", className: "red", key: '1'}, // 红色
+        {value: "yellow", className: "orange", key: '2'}, // 橙色 （因为旧版的原因做兼容，旧版的yellow展示的是橙色）
+        {value: "green", className: "green", key: '3'}, // 绿色
+        {value: "blue", className: "blue", key: '4'}, // 蓝色
+        {value: "purple", className: "purple", key: '5'}, // 紫色
+    ],
+    // 拼多多 sellerType为29 旗帜颜色 和 key值对应
+    29: [
+        // {value: "grey", className: "gray", key: '0'}, // 灰色
+        {value: "red", className: "red", key: '1'}, // 红色
+        {value: "yellow", className: "orange", key: '2'}, // 橙色 （因为旧版的原因做兼容，旧版的yellow展示的是橙色）
+        {value: "green", className: "green", key: '3'}, // 绿色
+        {value: "blue", className: "blue", key: '4'}, // 蓝色
+        {value: "purple", className: "purple", key: '5'}, // 紫色
+    ],
+    // 抖音 sellerType为37 旗帜颜色 和 key值对应
+    37: [
+        {value: "grey", className: "gray", key: '0'}, // 灰色
+        {value: "red", className: "red", key: '5'}, // 红色
+        {value: "yellow", className: "orange", key: '4'}, // 橙色 （因为旧版的原因做兼容，旧版的yellow展示的是橙色）
+        {value: "green", className: "green", key: '3'}, // 绿色
+        {value: "blue", className: "blue", key: '2'}, // 蓝色
+        {value: "purple", className: "purple", key: '1'}, // 紫色
+    ],
+    // 快手 sellerType为36 旗帜颜色 和 key值对应
+    36: [
+        {value: "grey", className: "gray", key: '6'}, // 灰色
+        {value: "red", className: "red", key: '1'}, // 红色
+        {value: "yellow", className: "orange", key: '2'}, // 橙色 （因为旧版的原因做兼容，旧版的yellow展示的是橙色）
+        {value: "green", className: "green", key: '3'}, // 绿色
+        {value: "blue", className: "blue", key: '4'}, // 蓝色
+        {value: "purple", className: "purple", key: '5'}, // 紫色
+    ],
+    // EASTBUY sellerType为43 旗帜颜色 和 key值对应
+    43: [
+        {value: "grey", className: "gray", key: '0'}, // 灰色
+        {value: "red", className: "red", key: '1'}, // 红色
+        {value: "yellow", className: "orange", key: '2'}, // 橙色（因为旧版的原因做兼容，旧版的yellow展示的是橙色）
+        {value: "green", className: "green", key: '3'}, // 绿色
+        {value: "blue", className: "blue", key: '4'}, // 蓝色
+        {value: "purple", className: "purple", key: '5'}, // 紫色
+    ],
+    // 得物 sellerType为44 旗帜颜色 和 key值对应
+    44: [
+        {value: "red", className: "red", key: '1'}, // 红色
+        {value: "yellow", className: "orange", key: '2'}, // 橙色
+        {value: "green", className: "green", key: '3'}, // 绿色
+        {value: "blue", className: "blue", key: '4'}, // 蓝色
+        {value: "purple", className: "purple", key: '5'}, // 紫色
+        {value: "yellow2", className: "yellow", key: '6'}, // 黄色
+    ],
+    // 小红书 sellerType为25 旗帜颜色 和 key值对应
+    25: [
+        {value: "grey", className: "gray", key: '0'}, // 灰色
+        {value: "red", className: "red", key: '1'}, // 红色
+        {value: "yellow", className: "orange", key: '2'}, // 橙色
+        {value: "green", className: "green", key: '3'}, // 绿色
+        {value: "blue", className: "blue", key: '4'}, // 蓝色
+        {value: "purple", className: "purple", key: '5'}, // 紫色
+        // {value: "yellow2", className: "yellow", key: '6'}, // 黄色
+    ]
+}

package/packages/BnOrderDetail/BnOrderDetail.vue

@@ -0,0 +1,338 @@
+<template>
+  <div class="BnOrderDetail" id="BnOrderDetail" v-if="show" @click="show=false">
+    <div class="BnOrderDetail-main" @click.stop="">
+      <div class="BnOrderDetail-main-top">
+        <slot name="top" :taskDetail="taskDetail" :components="componentList" :id="id"></slot>
+        <div class="BnOrderDetail-main-top-btn w-flex-center">
+          <template v-for="item in operateList">
+            <el-button plain size="small" class="w-margin-left0" @click="operate(item.type)">
+              {{ item.title }}
+            </el-button>
+          </template>
+          <span class="bnUIcon bnUIcon-copy w-color-blue" v-if="!noPower.includes('copy')" title="复制" @click="operate('copy')"></span>
+          <span class="bnUIcon bnUIcon-edit w-color-blue" v-if="!noPower.includes('edit')" @click="operate('edit')"></span>
+          <el-tooltip :content="showEmpty?'隐藏空值':'显示空值'" placement="top">
+			    <span class="bnUIcon" :class="[showEmpty?'bnUIcon-notLookEmpty w-color-red':'bnUIcon-lookEmpty w-color-blue']"
+            @click="toggleEmpty"></span>
+          </el-tooltip>
+          <span class="bnUIcon bnUIcon-close" @click="show=false"></span>
+        </div>
+      </div>
+      <div class="BnOrderDetail-main-body" v-loading="loading">
+        <div class="BnOrderDetail-main-detail">
+          <BnEmptyTip v-if="!taskDetail.id"></BnEmptyTip>
+          <template v-for="(item,index) in componentList" :key="index">
+            <div class="BnOrderDetail-item" v-if="showEmpty || !isEmpty(taskDetail[item.columnCode])">
+              <div class="BnOrderDetail-item-header">{{ item.name }}
+                <div class="w-margin-top4" v-if="isAiMarkingColumn(item)">
+                  <img style="width: 72px;height: 16px"
+                       src="https://banniu-work.oss-cn-zhangjiakou.aliyuncs.com/125_10030158_10c0871f0e3550f1297a850a1a9ecabd.jpg">
+                </div>
+              </div>
+              <div class="BnOrderDetail-item-content" v-if="!isEmpty(taskDetail[item.columnCode])">
+                <slot :name="'columnDetail_' + item.columnCode" :item="item" :value="taskDetail[item.columnCode]" :row="taskDetail">
+                <div class="BnOrderDetail-item-content-text" v-if="item.behaviorType != 13 && item.behaviorType != 10">
+                  {{ taskDetail[item.columnCode] }}
+                  <span class="w-color-blue w-cursor-pointer" @click="copyVal(taskDetail[item.columnCode])">复制</span>
+                </div>
+                <div class="BnOrderDetail-item-content-sub" v-else-if="item.behaviorType == 10">
+                  <BnFileView :file-list="taskDetail.inside[item.columnCode]" :is-mini="true" :no-warp="true"
+                              width="50px"/>
+                </div>
+                <div class="BnOrderDetail-item-content-sub" v-else-if="item.behaviorType == 13">
+                  <showSubForm :column="item" :row="taskDetail" :maxHeight="300"></showSubForm>
+                </div>
+                </slot>
+              </div>
+            </div>
+          </template>
+          <BnOrderCard v-if="taskDetail.tid" :postFunc="postFunc" :extendPost="{tid:taskDetail.tid,taskId:id,appId:tableInfo.appId,projectId:tableInfo.tableId}"></BnOrderCard>
+        </div>
+        <div class="BnOrderDetail-main-other">
+          <el-affix target=".BnOrderDetail-main-other" :offset="30">
+            <div class="w-flex-center w-flex-between" style="background: #fff">
+              <el-tabs v-model="defaultTab" class="e-clear-tabs-border">
+                <el-tab-pane name="1" label="操作记录"/>
+                <el-tab-pane :name="item.name" :label="item.label" v-for="item in tabPaneList" />
+              </el-tabs>
+              <filterLogByUser v-model="filterUsers" v-if="defaultTab == 1" v-bind="$props"></filterLogByUser>
+            </div>
+          </el-affix>
+          <orderLogs :table-info="tableInfo" :filterUsers="filterUsers" :id="id" :postFunc="postFunc" v-if="defaultTab == 1"></orderLogs>
+          <slot name="tabPane" :chooseTab="defaultTab" :taskDetail="taskDetail" :id="id" :components="componentList"></slot>
+        </div>
+        <el-backtop :right="30" :bottom="100" target=".BnOrderDetail-main-body"/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {isEmpty} from "lodash";
+import showSubForm from "./showSubForm/index.vue";
+import orderLogs from "./orderLogs.vue";
+import {getWatchComponents,userConst} from "../../utils/index.js";
+import filterLogByUser from "./filterLogByUser.vue";
+
+export default {
+  name: 'BnOrderDetail',
+  components: {showSubForm, orderLogs,filterLogByUser},
+  props: {
+    // 表信息
+    tableInfo: Object,
+    // 组件列表
+    watchComponents: Array,
+    // 没有权限的默认操作  copy  edit
+    noPower: {
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    // 根据成员过滤操作记录时要不要考虑工作表权限
+    userByTable:Boolean,
+    // 操作列表
+    operateList: {
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    // 底部tabList
+    tabPaneList: {
+      type:Array,
+      default(){
+        return []
+      }
+    },
+    // 接口请求外部转发
+    postUrl: {},
+    postFunc: Function,
+  },
+  computed:{
+    componentList(){
+      return this.watchComponents || this.components
+    }
+  },
+  data() {
+    return {
+      userConst,
+      show: false,
+      loading: false,
+      // 默认看板 操作日志、售后记录
+      defaultTab: '1',
+      showEmpty: localStorage.getItem('workOrderDetail_showEmpty') === 'true' || false,
+      // 任务id
+      id: '',
+      // 任务详情
+      taskDetail: {},
+      // 当没有传入组件列表时通过接口获取组件列表
+      components:[],
+      // 根据成员过滤操作日志
+      filterUsers:[],
+    }
+  },
+  methods: {
+    isEmpty,
+    /**
+     * 判断字段是否被 AI 打标（beneben_ai_marking 为逗号分隔的 columnId 字符串）
+     */
+    isAiMarkingColumn(item) {
+      const marking = this.taskDetail.beneben_ai_marking;
+      if (!marking) return false;
+      const columnId = String(item.id);
+      if (typeof marking === 'string') {
+        return marking.split(',').some(id => id.trim() === columnId);
+      }
+      if (Array.isArray(marking)) {
+        return marking.some(id => String(id) === columnId);
+      }
+      return Boolean(marking[columnId]);
+    },
+    /**
+     * 打开编辑弹框
+     * */
+    async open(id) {
+      this.loading = true;
+      this.defaultTab = '1';
+      this.id = id;
+      this.taskDetail = {};
+      this.show = true;
+      if(!this.watchComponents){
+        await this.getTableInfo()
+      }
+      this.getTaskDetail()
+    },
+    /**
+     * 是否可查看空值
+     * */
+    toggleEmpty() {
+      this.showEmpty = !this.showEmpty;
+      localStorage.setItem('workOrderDetail_showEmpty', this.showEmpty);
+    },
+    /**
+     * 操作
+     * @param object row 行数据
+     * */
+    operate(type) {
+      this.$emit('orderOperate', type, this.taskDetail)
+      this.show = false;
+    },
+
+    /**
+     * 查询表信息
+     * */
+    async getTableInfo() {
+      let tableData = await this.postFunc(`/biztable/definition/table?tableCode=${this.tableInfo.tableCode}&columns=1`, null, 'get')
+      if (!tableData.code) {
+        this.components = getWatchComponents(tableData.data.columns, tableData.data.appId, tableData.data.tableId);
+      }
+    },
+    /**
+     * 查询工单详情
+     * */
+    getTaskDetail() {
+      let postData = {
+        tableCode: this.tableInfo.tableCode,
+        id: this.id
+      }
+      this.loading = true;
+      // 获取工单详情
+      this.postFunc(this.postUrl || '/biztable/content/get',postData).then(res => {
+        this.loading = false;
+        if (!res.code) {
+          let taskDetail = {...res.data.view, inside: res.data.inside};
+          if(!taskDetail.tid){
+            // 获取订单号的columnCode
+            const matchedItem = this.componentList.find(item => {
+              if (item.outDataSourceInfo && item.outDataSourceInfo[0]) {
+                let {field, table, platform} = item.outDataSourceInfo[0]
+                return field == 'tid' && platform == 'CRM' && table == 'TRADE'
+              }
+              return false
+            })
+            if (matchedItem) {
+              taskDetail.tid = taskDetail[matchedItem.columnCode]
+            }
+          }
+          this.taskDetail = taskDetail;
+        }
+      })
+    },
+    /**
+     * 复制
+     * */
+    copyVal(val) {
+      const textarea = document.createElement('textarea');
+      textarea.value = val;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      this.$message.success('复制成功');
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.BnOrderDetail {
+  position: fixed;
+  justify-items: right;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, .3);
+  z-index: 999;
+
+  &-main {
+    position: relative;
+    height: 100%;
+    width: 60%;
+    background: #fff;
+
+    &-top {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+      height: 42px;
+      border-bottom: 1px solid #eee;
+      color: #666;
+
+      &-btn {
+        display: flex;
+        gap: 10px;
+
+        span {
+          cursor: pointer;
+        }
+      }
+    }
+
+    &-body {
+      display: flex;
+      flex-wrap: wrap;
+      position: relative;
+      width: 100%;
+      height: calc(100% - 42px);
+      overflow-y: auto;
+    }
+
+    &-detail {
+      display: flex;
+      flex-wrap: wrap;
+      align-content: start;
+      position: relative;
+      width: 100%;
+      padding: 10px 20px;
+    }
+
+    &-other {
+      position: relative;
+      width: 100%;
+      padding: 0 20px;
+    }
+  }
+
+  &-item {
+    display: flex;
+    width: 100%;
+    margin-bottom: 10px;
+
+    &-header {
+      width: 140px;
+      font-size: 14px;
+      height: 32px;
+      padding: 8px 0;
+      color: #888;
+    }
+
+    &-content {
+      width: calc(100% - 140px);
+      padding: 8px 0 0 18px;
+
+      &-text {
+        font-size: 14px;
+        line-height: 22px;
+        color: #333;
+
+        span {
+          display: none;
+        }
+
+        &:hover {
+          span {
+            display: inline;
+          }
+        }
+      }
+
+      &-sub {
+        padding-left: 3px;
+      }
+    }
+  }
+}
+</style>