feat: 数据看板 - 账号数据趋势 - 权限控制逻辑

project/src/components/assembly/screen/copy0104_switchMpAdq.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="switch-wrap">
+    <div
+      class="switch-item"
+      :class="{ 'active': value === orderTypeOptions.ADQ}"
+      @click="onClickSwitch(orderTypeOptions.ADQ)"
+    >ADQ</div>
+    <div
+      class="switch-item"
+      :class="{ 'active': value === orderTypeOptions.MP}"
+      @click="onClickSwitch(orderTypeOptions.MP)"
+    >MP</div>
+    <div
+      v-if="isSum"
+      class="switch-item"
+      :class="{ 'active': value === orderTypeOptions.SUM}"
+      @click="onClickSwitch(orderTypeOptions.SUM)"
+    >总表</div>
+  </div>
+</template>
+
+<script>
+import { orderTypeOptions } from '@/assets/js/staticTypes'
+export default {
+  props: {
+    value: {
+      type: String | Number,
+      default: () => ''
+    },
+    isSum: { // 是否显示"总表"（目前"账号数据趋势"、"短剧数据趋势"中存在）
+      type: Boolean,
+      default: () => false
+    },
+  },
+  data () {
+    return {
+      orderTypeOptions: Object.freeze(orderTypeOptions),
+    }
+  },
+  methods: {
+    onClickSwitch(orderType) {
+      this.$emit('input', orderType)
+      this.$emit('change', orderType)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.switch-wrap {
+  display: flex;
+  font-size: 14px;
+  font-weight: 600;
+  color: #32B38A;
+  .switch-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70px;
+    height: 28px;
+    border-top: 1px solid #E7E8EC;
+    border-bottom: 1px solid #E7E8EC;
+    cursor: pointer;
+    &:first-child {
+      border-left: 1px solid #E7E8EC;
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+    &:last-child {
+      border-right: 1px solid #E7E8EC;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+    &.active {
+      border-color: #32B38A;
+      background-color: #32B38A;
+      color: #fff;
+    }
+  }
+}
+</style>

project/src/components/assembly/screen/switchMpAdq.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="switch-wrap">
     <div
+      v-if="isShowAdqBtn"
       class="switch-item"
       :class="{ 'active': value === orderTypeOptions.ADQ}"
       @click="onClickSwitch(orderTypeOptions.ADQ)"
     >ADQ</div>
     <div
+      v-if="isShowMpBtn"
       class="switch-item"
       :class="{ 'active': value === orderTypeOptions.MP}"
       @click="onClickSwitch(orderTypeOptions.MP)"
     >MP</div>
     <div
-      v-if="isSum"
+      v-if="isShowSumBtn"
       class="switch-item"
       :class="{ 'active': value === orderTypeOptions.SUM}"
       @click="onClickSwitch(orderTypeOptions.SUM)"
@@ -27,7 +29,15 @@ export default {
       type: String | Number,
       default: () => ''
     },
-    isSum: { // 是否显示"总表"（目前"账号数据趋势"、"短剧数据趋势"中存在）
+    isShowAdqBtn: { // 是否显示"ADQ"（默认显示）
+      type: Boolean,
+      default: () => true
+    },
+    isShowMpBtn: { // 是否显示"MP"（默认显示）
+      type: Boolean,
+      default: () => true
+    },
+    isShowSumBtn: { // 是否显示"总表"（默认不显示、目前"账号数据趋势"、"短剧数据趋势"中存在）
       type: Boolean,
       default: () => false
     },

project/src/components/dataBoard/accountTrends.vue

@@ -1,51 +1,60 @@
 <template>
   <div class="accountTrends-wrap" v-loading="pageLoading">
-    <div class="screenBox flex">
-      <switchMpAdq v-model="filter.order_type" :isSum="true" @change="onChangeOrderType" />
-      <el-button type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
-    </div>
-    <!-- S 筛选区 -->
-    <div class="screenBox filter-wrap">
-      <!-- 日期 -->
-      <datePicker style="margin-right: 30px;" :reset="reset" title="自定义" :quickFlag="true" :afferent_time="default_time" :clearFlag="false" @changeTime="onChangeTime" />
-      <!-- MP账号(公众号) -->
-      <selfChannelMultiple style="margin-right: 30px;margin-left: -30px;" v-show="isMP" :reset="reset" title="账号" type="thePublic" labelWidth @channelDefine="onChangeAccountId" />
-      <!-- ADQ账号(ADQ) -->
-      <selfChannelMultiple style="margin-right: 30px;margin-left: -30px;" v-show="isADQ" :reset="reset" title="账号" type="adqAccount" labelWidth @channelDefine="onChangeAccountIdAdq" />
-      <!-- "总表"账号(总表) -->
-      <selfChannelMultiple style="margin-right: 30px;margin-left: -30px;" v-show="isSUM" :reset="reset" title="账号" type="allAccount" labelWidth @channelDefine="onChangeAccountIdSum" />
-      <!-- 收益截止日期 -->
-      <div style="margin-right: 30px;" class="common-screen-item">
-        <label class="common-screen-label">收益截止日期</label>
-        <el-date-picker v-model="filter.closing_date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" size="small" style="width:150px" @change="onChangeClosingDate" />
+    <!-- S 无权限 -->
+    <el-empty class="empty-wrap" v-if="isShowEmpty" description="暂无数据权限" />
+    <!-- E 无权限 -->
+
+    <template v-else>
+      <div class="screenBox flex">
+        <switchMpAdq
+          v-model="filter.order_type"
+          :isShowAdqBtn="isShowAdqBtn"
+          :isShowMpBtn="isShowMpBtn"
+          :isShowSumBtn="isShowSumBtn"
+          @change="onChangeOrderType"
+        />
+        <el-button v-if="isCanExport" type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
       </div>
-      <div class="flex">
-        <!-- 推广类型 -->
-        <selfChannel style="margin-right: 30px;margin-left: -30px;" :reset="reset" title="推广类型" type="promotionType" labelWidth @channelDefine="onChangePromotionType" />
-        <!-- 回本率(范围) -->
-        <!-- <inputRange style="margin-right: 10px;" v-model="filter.costCover" label="回本率" /> -->
-        <el-button size="mini" type="primary" plain @click="onClickSearch">确定</el-button>
-        <el-button size="mini" plain @click="onClickReset">重置</el-button>
+      <!-- S 筛选区 -->
+      <div class="screenBox filter-wrap">
+        <!-- 日期 -->
+        <datePicker style="margin-right: 30px;" :reset="reset" title="自定义" :quickFlag="true" :afferent_time="default_time" :clearFlag="false" @changeTime="onChangeTime" />
+        <!-- MP账号(公众号) -->
+        <selfChannelMultiple style="margin-right: 30px;margin-left: -30px;" v-show="isMP" :reset="reset" title="账号" type="thePublic" labelWidth @channelDefine="onChangeAccountId" />
+        <!-- ADQ账号(ADQ) -->
+        <selfChannelMultiple style="margin-right: 30px;margin-left: -30px;" v-show="isADQ" :reset="reset" title="账号" type="adqAccount" labelWidth @channelDefine="onChangeAccountIdAdq" />
+        <!-- "总表"账号(总表) -->
+        <selfChannelMultiple style="margin-right: 30px;margin-left: -30px;" v-show="isSUM" :reset="reset" title="账号" type="allAccount" labelWidth @channelDefine="onChangeAccountIdSum" />
+        <!-- 收益截止日期 -->
+        <div style="margin-right: 30px;" class="common-screen-item">
+          <label class="common-screen-label">收益截止日期</label>
+          <el-date-picker v-model="filter.closing_date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" size="small" style="width:150px" @change="onChangeClosingDate" />
+        </div>
+        <div class="flex">
+          <!-- 推广类型 -->
+          <selfChannel style="margin-right: 30px;margin-left: -30px;" :reset="reset" title="推广类型" type="promotionType" labelWidth @channelDefine="onChangePromotionType" />
+          <!-- 回本率(范围) -->
+          <!-- <inputRange style="margin-right: 10px;" v-model="filter.costCover" label="回本率" /> -->
+          <el-button size="mini" type="primary" plain @click="onClickSearch">确定</el-button>
+          <el-button size="mini" plain @click="onClickReset">重置</el-button>
+        </div>
       </div>
-    </div>
-    <!-- E 筛选区 -->
-    <!-- S 数据更新时间 -->
-    <div class="update-time"><i class="el-icon-warning-outline" />数据更新时间：{{ updateTime || '-' }}</div>
-    <!-- E 数据更新时间 -->
-    <!-- S 折线图 -->
-    <div class="trendBox mt-10" v-loading="chartLoading">
-      <div class="legendBox">
-        <div class="legendItem" v-for="(item, index) in legendList" :key="index" @click="onClickLegend(item, index)">{{ item.name }}
-          <div :class="['checkbox', item.selectFlag ? 'checkbox_active': '']" :style="item.selectFlag ? `background: ${item.color};border-color: ${item.color};`: '' "><i class="el-icon-check" /></div>
+      <!-- E 筛选区 -->
+      <!-- S 数据更新时间 -->
+      <div class="update-time"><i class="el-icon-warning-outline" />数据更新时间：{{ updateTime || '-' }}</div>
+      <!-- E 数据更新时间 -->
+      <!-- S 折线图 -->
+      <div class="trendBox mt-10" v-loading="chartLoading">
+        <div class="legendBox">
+          <div class="legendItem" v-for="(item, index) in legendList" :key="index" @click="onClickLegend(item, index)">{{ item.name }}
+            <div :class="['checkbox', item.selectFlag ? 'checkbox_active': '']" :style="item.selectFlag ? `background: ${item.color};border-color: ${item.color};`: '' "><i class="el-icon-check" /></div>
+          </div>
         </div>
+        <div id="trend" style="width: 100%; height: 250px;" />
+        <div v-if="!chartDataList || !chartDataList.length" style="text-align: center; color: #333; font-size: 14px; position: relative; top: -100px;">暂无数据</div>
       </div>
-      <div id="trend" style="width: 100%; height: 250px;" />
-      <div v-if="!chartDataList || !chartDataList.length" style="text-align: center; color: #333; font-size: 14px; position: relative; top: -100px;">暂无数据</div>
-    </div>
-    <!-- E 折线图 -->
-
-    <!-- S 表 -->
-
+      <!-- E 折线图 -->
+      <!-- S 表 -->
       <!-- S 汇总表 summaryTable -->
       <div v-loading="summaryLoading">
         <ux-grid class="summaryTable" ref="summaryTable" :border="false" @row-click="() => { return }" :header-cell-style="getHeaderCellStyle" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
@@ -178,7 +187,8 @@
         </div>
       </div>
       <!-- E 明细表 detailsTable -->
-    <!-- E 表 -->
+      <!-- E 表 -->
+    </template>
   </div>
 </template>
 <script>
@@ -234,7 +244,7 @@ export default {
         total: 0,
       },
       filter: {
-        order_type: orderTypeOptions.ADQ,
+        order_type: '',
         time: DEFAULT_TIME, // 自定义日期
         account_id: [], // 账号"MP"
         account_id_adq: [], // 账号"ADQ"
@@ -246,6 +256,7 @@ export default {
         sort_type: 'desc', // 升序/降序
       },
       updateTime: '', // 数据更新时间
+      isShowEmpty: false, // 是否展示空页面 => 无任何权限时展示
     }
   },
   computed: {
@@ -270,19 +281,53 @@ export default {
         return true
       }
     },
+    // 是否有“ADQ”权限
+    isShowAdqBtn() {
+      return !!this.$store.state.dataBoardAuth.adq_auth
+    },
+    // 是否有“MP”权限
+    isShowMpBtn() {
+      return !!this.$store.state.dataBoardAuth.mp_auth
+    },
+    // 是否有“总表”权限
+    isShowSumBtn() {
+      return this.isShowAdqBtn && this.isShowMpBtn
+    },
+    // 是否有“导出”权限
+    isCanExport() {
+      return !!this.$store.state.dataBoardAuth.can_export
+    },
   },
   created () {
     console.log('created => ')
-    this.initTableHeight()
-    this.handleGetChart()
-    this.handleGetSummaryList()
-    this.handleGetList()
-    this.handleGetUpdateTime()
+    const isPermissioned = this.getDefaultOrderType() // 根据用户权限 获取order_type默认值
+    if (isPermissioned) { // 有权限 => 获取对应报表数据
+      this.initTableHeight()
+      this.handleGetChart()
+      this.handleGetSummaryList()
+      this.handleGetList()
+      this.handleGetUpdateTime()
+    } else { // 无权限 => 展示空页面
+      this.isShowEmpty = true
+    }
   },
   beforeDestroy () {
     this.myChart && this.myChart.clear()
   },
   methods: {
+    // 根据用户权限 获取 order_type 默认值
+    getDefaultOrderType() {
+      if (this.isShowAdqBtn) { // 有ADQ权限 => 默认值ADQ
+        this.filter.order_type = orderTypeOptions.ADQ
+        return orderTypeOptions.ADQ
+      } else if (this.isShowMpBtn) { // 有MP权限 => 默认值MP
+        this.filter.order_type = orderTypeOptions.MP
+        return orderTypeOptions.MP
+      } else { // 无以上权限 => 返回false
+        this.$message.warning('暂无数据权限')
+        return false
+      }
+    },
     initTableHeight() {
       this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
     },
@@ -772,7 +817,7 @@ export default {
     // 监听点击"重置"按钮
     onClickReset() {
       this.reset = !this.reset
-      this.filter.order_type = orderTypeOptions.ADQ
+      this.filter.order_type = this.getDefaultOrderType()
       this.filter.time = this.default_time
       this.filter.account_id = []
       this.filter.account_id_adq = []
@@ -930,7 +975,15 @@ export default {
 </style>
 <style lang="scss" scoped>
 .accountTrends-wrap {
+  position: relative;
   min-width: 1125px;
+  min-height: calc(100vh - 70px);
+  .empty-wrap {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
   .update-time {
     margin-top: 10px;
     padding-left: 20px;

project/src/components/dataBoard/shortDramaTrends.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="shortDramaTrends-wrap" v-loading="pageLoading">
     <div class="screenBox flex">
-      <switchMpAdq v-model="filter.order_type" :isSum="true" @change="onChangeOrderType" />
+      <switchMpAdq v-model="filter.order_type" :isShowSumBtn="true" @change="onChangeOrderType" />
       <el-button type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
     </div>
     <!-- S 筛选区 -->