feat: 数据看板 - 运营数据 - 权限控制逻辑

project/src/components/dataBoard/operateDayRetrieve.vue

@@ -1,36 +1,47 @@
 <template>
-  <div v-loading="loading">
-    <div class="screenBox flex">
-      <div class="flex">
+  <div class="operateDayRetrieve-wrap" v-loading="loading">
+    <!-- S 无权限 -->
+    <el-empty class="empty-wrap" v-if="isShowEmpty" description="暂无数据权限" />
+    <!-- E 无权限 -->
+
+    <template v-else>
+      <div class="screenBox flex">
         <!-- S 选择订单类型 - 组件 -->
-        <switch-mp-adq v-model="order_type" @change="init(1)" />
+        <switchMpAdq
+          v-model="order_type"
+          :isShowAdqBtn="isShowAdqBtn"
+          :isShowMpBtn="isShowMpBtn"
+          @change="init(1)"
+        />
         <!-- E 选择订单类型 - 组件 -->
-        <date-picker title="选择日期" @changeTime="changeTime"></date-picker>
+        <el-button v-if="isCanExport" type="primary" size="mini" @click="init(1,'export')">导出Excel</el-button>
+      </div>
+      <div class="screenBox filter-wrap">
+        <date-picker style="margin-left: -20px;" :labelWidth="true" title="选择日期" @changeTime="changeTime"></date-picker>
         <self-channel v-show="isMP" title="公众号" type='thePublic' @channelDefine="(val)=>{account_id = val;init(1)}"></self-channel>
         <self-channel v-show="isMP" title="剧集" type='dramaList' @channelDefine="(val)=>{playlet_id = val;init(1)}"></self-channel>
       </div>
-      <el-button type="primary" size="mini" @click="init(1,'export')">导出Excel</el-button>
-    </div>
 
-    <ux-grid style="margin-top:10px" ref="plxTable" :border="false" @row-click="()=>{return}" :header-cell-style="()=>{return { backgroundColor: '#FFFFFF !important', border: 'none!important' }}" :height="height" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
-      <ux-table-column v-for="item in desCol" :key="item.prop" :resizable="true" :field="item.prop" :title="item.label" :min-width="item.min_width?item.min_width:120" :fixed="item.prop == 'date'?'left':''" align="center">
-        <template #header>
-          <div class="flex-align-jus-center">{{item.label}}
-            <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
-              <div><i class="el-icon-question"></i></div>
-            </el-tooltip>
-          </div>
-        </template>
-        <template v-slot="{ row }">
-          <span v-if="item.self_type == 'extra'">{{row.retrieveInfo[item.prop]||row.retrieveInfo[item.prop]==0?$formatNum(row.retrieveInfo[item.prop]):'-' }}</span>
-          <span v-else>{{row[item.prop]||row[item.prop]==0?$formatNum(row[item.prop]):'-' }}</span>
-        </template>
-      </ux-table-column>
-    </ux-grid>
-    <div class="pagination" v-show="total>0">
-      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
-      </el-pagination>
-    </div>
+      <ux-grid style="margin-top:10px" ref="plxTable" :border="false" @row-click="()=>{return}" :header-cell-style="()=>{return { backgroundColor: '#FFFFFF !important', border: 'none!important' }}" :height="height" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
+        <ux-table-column v-for="item in desCol" :key="item.prop" :resizable="true" :field="item.prop" :title="item.label" :min-width="item.min_width?item.min_width:120" :fixed="item.prop == 'date'?'left':''" align="center">
+          <template #header>
+            <div class="flex-align-jus-center">{{item.label}}
+              <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
+                <div><i class="el-icon-question"></i></div>
+              </el-tooltip>
+            </div>
+          </template>
+          <template v-slot="{ row }">
+            <span v-if="item.self_type == 'extra'">{{row.retrieveInfo[item.prop]||row.retrieveInfo[item.prop]==0?$formatNum(row.retrieveInfo[item.prop]):'-' }}</span>
+            <span v-else>{{row[item.prop]||row[item.prop]==0?$formatNum(row[item.prop]):'-' }}</span>
+          </template>
+        </ux-table-column>
+      </ux-grid>
+      <div class="pagination" v-show="total>0">
+        <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+        </el-pagination>
+      </div>
+    </template>
   </div>
 </template>
 <script>
@@ -63,7 +74,8 @@ export default {
         { prop: "new_cost", label: "下单成本", notes: '下单成本=当日总消耗/当日新增用户首单人数' },
       ],
       desColFlag: false,
-      height: ''
+      height: '',
+      isShowEmpty: false, // 是否展示空页面 => 无任何权限时展示
     }
   },
   computed: {
@@ -75,12 +87,46 @@ export default {
     isADQ() {
       return this.order_type === orderTypeOptions.ADQ
     },
+    // 是否有“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 () {
-    this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
-    this.init(1)
+    const isPermissioned = this.getDefaultOrderType() // 根据用户权限 获取order_type默认值
+    if (isPermissioned) { // 有权限 => 获取对应报表数据
+      this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
+      this.init(1)
+    } else { // 无权限 => 展示空页面
+      this.isShowEmpty = true
+    }
   },
   methods: {
+    // 根据用户权限 获取 order_type 默认值
+    getDefaultOrderType() {
+      if (this.isShowAdqBtn) { // 有ADQ权限 => 默认值ADQ
+        this.order_type = orderTypeOptions.ADQ
+        return orderTypeOptions.ADQ
+      } else if (this.isShowMpBtn) { // 有MP权限 => 默认值MP
+        this.order_type = orderTypeOptions.MP
+        return orderTypeOptions.MP
+      } else { // 无以上权限 => 返回false
+        this.$message.warning('暂无数据权限')
+        return false
+      }
+    },
     changeTime (time) {//筛选时间变化
       if (!time || time && time.length == 0) {
         this.time = []
@@ -187,6 +233,32 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.operateDayRetrieve-wrap {
+  position: relative;
+  min-width: 1125px;
+  min-height: calc(100vh - 70px);
+  .empty-wrap {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .filter-wrap {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-bottom: 10px;
+    & > div {
+      margin: 0 10px 10px 0;
+    }
+    & > button {
+      margin: -10px 0 0 10px;
+    }
+    .el-button+.el-button {
+      margin-left: 10px;
+    }
+  }
+}
 .screenBox {
   background: #fff;
   padding: 5px 20px;