feat: 数据看板 - 粉丝激活趋势 - 权限控制逻辑

project/src/components/dataBoard/accountTrends.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="accountTrends-wrap" v-loading="pageLoading">
     <!-- S 无权限 -->
-    <el-empty class="empty-wrap" v-if="isShowEmpty" description="暂无数据权限" />
+    <el-empty v-if="isShowEmpty" class="empty-wrap" description="暂无数据权限" />
     <!-- E 无权限 -->
 
     <template v-else>

project/src/components/dataBoard/fansActiveTrends.vue

@@ -1,51 +1,59 @@
 <template>
   <div class="fansActiveTrends-wrap" v-loading="pageLoading">
-    <div class="screenBox flex">
-      <switchMpAdq v-model="filter.order_type" @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账号(公众号) -->
-      <selfChannel style="margin-right: 30px;margin-left: -30px;" v-show="isMP" :reset="reset" title="账号" type="thePublic" labelWidth @channelDefine="onChangeAccountId" />
-      <!-- ADQ账号(ADQ) -->
-      <selfChannel style="margin-right: 30px;margin-left: -30px;" v-show="isADQ" :reset="reset" title="账号" type="adqAccount" labelWidth @channelDefine="onChangeAccountIdAdq" />
-      <!-- 短剧 -->
-      <selfChannel style="margin-right: 30px;margin-left: -30px;" :reset="reset" title="短剧" type="dramaList" labelWidth @channelDefine="onChangePlayletId" />
-      <!-- 收益截止日期 -->
-      <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 v-if="isShowEmpty" class="empty-wrap" description="暂无数据权限" />
+    <!-- E 无权限 -->
+
+    <template v-else>
+      <div class="screenBox flex">
+        <switchMpAdq
+          v-model="filter.order_type"
+          :isShowAdqBtn="isShowAdqBtn"
+          :isShowMpBtn="isShowMpBtn"
+          @change="onChangeOrderType"
+        />
+        <el-button v-if="isCanExport" type="primary" size="mini" @click="onClickExport">导出Excel</el-button>
       </div>
-      <!-- 推广类型 -->
-      <selfChannel style="margin-right: 30px;margin-left: -30px;" :reset="reset" title="推广类型" type="promotionType" labelWidth @channelDefine="onChangePromotionType" />
-      <div class="flex">
-        <!-- 回本率(范围) -->
-        <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账号(公众号) -->
+        <selfChannel style="margin-right: 30px;margin-left: -30px;" v-show="isMP" :reset="reset" title="账号" type="thePublic" labelWidth @channelDefine="onChangeAccountId" />
+        <!-- ADQ账号(ADQ) -->
+        <selfChannel style="margin-right: 30px;margin-left: -30px;" v-show="isADQ" :reset="reset" title="账号" type="adqAccount" labelWidth @channelDefine="onChangeAccountIdAdq" />
+        <!-- 短剧 -->
+        <selfChannel style="margin-right: 30px;margin-left: -30px;" :reset="reset" title="短剧" type="dramaList" labelWidth @channelDefine="onChangePlayletId" />
+        <!-- 收益截止日期 -->
+        <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>
+        <!-- 推广类型 -->
+        <selfChannel style="margin-right: 30px;margin-left: -30px;" :reset="reset" title="推广类型" type="promotionType" labelWidth @channelDefine="onChangePromotionType" />
+        <div class="flex">
+          <!-- 回本率(范围) -->
+          <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">
@@ -147,7 +155,8 @@
         </div>
       </div>
       <!-- E 明细表 detailsTable -->
-    <!-- E 表 -->
+      <!-- E 表 -->
+    </template>
   </div>
 </template>
 <script>
@@ -200,7 +209,7 @@ export default {
         total: 0,
       },
       filter: {
-        order_type: orderTypeOptions.ADQ,
+        order_type: '',
         time: DEFAULT_TIME, // 自定义日期
         account_id: '', // 账号MP
         account_id_adq: '', // 账号ADQ
@@ -212,6 +221,7 @@ export default {
         sort_type: 'desc', // 升序/降序
       },
       updateTime: '', // 数据更新时间
+      isShowEmpty: false, // 是否展示空页面 => 无任何权限时展示
     }
   },
   computed: {
@@ -239,18 +249,48 @@ export default {
         return true
       }
     },
+    // 是否有“ADQ”权限
+    isShowAdqBtn() {
+      return !!this.$store.state.dataBoardAuth.adq_auth
+    },
+    // 是否有“MP”权限
+    isShowMpBtn() {
+      return !!this.$store.state.dataBoardAuth.mp_auth
+    },
+    // 是否有“导出”权限
+    isCanExport() {
+      return !!this.$store.state.dataBoardAuth.can_export
+    },
   },
   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
     },
@@ -705,7 +745,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 = ''
@@ -852,7 +892,15 @@ export default {
 </style>
 <style lang="scss" scoped>
 .fansActiveTrends-wrap {
+  position: relative;
+  min-height: calc(100vh - 70px);
   min-width: 1125px;
+  .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">
     <!-- S 无权限 -->
-    <el-empty class="empty-wrap" v-if="isShowEmpty" description="暂无数据权限" />
+    <el-empty v-if="isShowEmpty" class="empty-wrap" description="暂无数据权限" />
     <!-- E 无权限 -->
 
     <template v-else>