feat: 数据看板 - 花生数据循环统计 - 权限控制逻辑

project/src/components/dataBoard/regRangeReportHS.vue

@@ -1,74 +1,80 @@
 <template>
-  <div v-loading="loading">
-    <div class="screenBox filter-wrap">
-      <date-picker :reset="reset" title="自定义" :quickFlag='true' :afferent_time="default_time" :clearFlag='false' @changeTime="changeTime"></date-picker>
-      <!-- 推广类型 -->
-      <selfChannel :reset="reset" title="推广类型" type="promotionType" @channelDefine="onChangePlatOrderType" style="margin-left: -30px; margin-right: 0;" />
-      <!-- 收益截止日期 -->
-      <div class="common-screen-item">
-        <label class="common-screen-label">收益截止日期</label>
-        <el-date-picker v-model="closing_date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" size="small" style="width:150px" @change="onChangeClosingDate" />
-      </div>
-      <!-- 花生mp账号 -->
-      <selfChannel :reset="reset" title="账号" type="mpAccountHS" @channelDefine="onChangeAccountHS" style="margin-left: -60px;" />
-      <input-range v-model="firstDayRoi" label="首日ROI" />
-      <input-range v-model="firstOrderCost " label="下单成本" />
-      <input-range v-model="perFollowCost" label="企微成本" />
-      <input-range v-model="totalRoi" label="回本率" />
-      <input-range v-model="paid" label="消耗" />
-      <div>
-        <el-button size="mini" type="primary" plain @click="init(1);handleGetUpdateTime();">确定</el-button>
-        <el-button size="mini" plain @click="handleReset">重置</el-button>
-        <el-button type="primary" size="mini" @click="init(1, 'export')">导出Excel</el-button>
+  <div class="regRangeReportHS-wrap" v-loading="loading">
+    <!-- S 无权限 -->
+    <el-empty class="empty-wrap" v-if="isShowEmpty" description="暂无数据权限" />
+    <!-- E 无权限 -->
+
+    <template v-else>
+      <div class="screenBox filter-wrap">
+        <date-picker :reset="reset" title="自定义" :quickFlag='true' :afferent_time="default_time" :clearFlag='false' @changeTime="changeTime"></date-picker>
+        <!-- 推广类型 -->
+        <selfChannel :reset="reset" title="推广类型" type="promotionType" @channelDefine="onChangePlatOrderType" style="margin-left: -30px; margin-right: 0;" />
+        <!-- 收益截止日期 -->
+        <div class="common-screen-item">
+          <label class="common-screen-label">收益截止日期</label>
+          <el-date-picker v-model="closing_date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" size="small" style="width:150px" @change="onChangeClosingDate" />
+        </div>
+        <!-- 花生mp账号 -->
+        <selfChannel :reset="reset" title="账号" type="mpAccountHS" @channelDefine="onChangeAccountHS" style="margin-left: -60px;" />
+        <input-range v-model="firstDayRoi" label="首日ROI" />
+        <input-range v-model="firstOrderCost " label="下单成本" />
+        <input-range v-model="perFollowCost" label="企微成本" />
+        <input-range v-model="totalRoi" label="回本率" />
+        <input-range v-model="paid" label="消耗" />
+        <div>
+          <el-button size="mini" type="primary" plain @click="init(1);handleGetUpdateTime();">确定</el-button>
+          <el-button size="mini" plain @click="handleReset">重置</el-button>
+          <el-button v-if="isCanExport" type="primary" size="mini" @click="init(1, 'export')">导出Excel</el-button>
+        </div>
       </div>
-    </div>
-    <!-- S 数据更新时间 -->
-    <div class="update-time"><i class="el-icon-warning-outline" />数据更新时间：{{ updateTime || '-' }}</div>
-    <!-- E 数据更新时间 -->
-    <!-- S 汇总表 summaryTable -->
-    <ux-grid style="margin-top:10px" ref="summaryTable" :border="false" @row-click="() => { return }" :header-cell-style="() => { return { backgroundColor: '#FFFFFF !important', border: 'none!important' } }" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
-      <ux-table-column v-for="item in summaryTableCol" :key="item.column + item.name" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 140" :fixed="item.fixed ? item.fixed : ''" align="center">
-        <template #header>
-          <div class="flex-align-jus-center">
-            {{ item.name }}
-            <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>{{ (row[item.column] || row[item.column] == 0) ? $formatNum(row[item.column]) : '-' }}</span>
-        </template>
-      </ux-table-column>
-    </ux-grid>
-    <!-- E 汇总表 summaryTable -->
+      <!-- S 数据更新时间 -->
+      <div class="update-time"><i class="el-icon-warning-outline" />数据更新时间：{{ updateTime || '-' }}</div>
+      <!-- E 数据更新时间 -->
+      <!-- S 汇总表 summaryTable -->
+      <ux-grid style="margin-top:10px" ref="summaryTable" :border="false" @row-click="() => { return }" :header-cell-style="() => { return { backgroundColor: '#FFFFFF !important', border: 'none!important' } }" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini">
+        <ux-table-column v-for="item in summaryTableCol" :key="item.column + item.name" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 140" :fixed="item.fixed ? item.fixed : ''" align="center">
+          <template #header>
+            <div class="flex-align-jus-center">
+              {{ item.name }}
+              <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>{{ (row[item.column] || row[item.column] == 0) ? $formatNum(row[item.column]) : '-' }}</span>
+          </template>
+        </ux-table-column>
+      </ux-grid>
+      <!-- E 汇总表 summaryTable -->
 
-    <!-- S 明细表 detailsTable -->
-    <ux-grid style="margin-top:10px" ref="detailsTable" :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 detailsTableCol" :key="item.column + item.name" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 140" :fixed="item.fixed ? item.fixed : ''" align="center">
-        <template #header>
-          <div class="flex-align-jus-center">
-            {{ item.name }}
-            <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
-              <div><i class="el-icon-question"></i></div>
-            </el-tooltip>
-            <div v-if="item.enable_to_sort" class="sort-wrap">
-              <i class="el-icon-caret-top" :class="{ 'active': sort_field === item.column && sort_type === 'asc' }" @click="onClickSort(item.column, 'asc')" />
-              <i class="el-icon-caret-bottom" :class="{ 'active': sort_field === item.column && sort_type === 'desc' }" @click="onClickSort(item.column, 'desc')" />
+      <!-- S 明细表 detailsTable -->
+      <ux-grid style="margin-top:10px" ref="detailsTable" :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 detailsTableCol" :key="item.column + item.name" :resizable="true" :field="item.column" :title="item.name" :min-width="item.min_width ? item.min_width : 140" :fixed="item.fixed ? item.fixed : ''" align="center">
+          <template #header>
+            <div class="flex-align-jus-center">
+              {{ item.name }}
+              <el-tooltip v-if="item.notes" :content="item.notes" placement="top">
+                <div><i class="el-icon-question"></i></div>
+              </el-tooltip>
+              <div v-if="item.enable_to_sort" class="sort-wrap">
+                <i class="el-icon-caret-top" :class="{ 'active': sort_field === item.column && sort_type === 'asc' }" @click="onClickSort(item.column, 'asc')" />
+                <i class="el-icon-caret-bottom" :class="{ 'active': sort_field === item.column && sort_type === 'desc' }" @click="onClickSort(item.column, 'desc')" />
+              </div>
             </div>
-          </div>
-        </template>
-        <template v-slot="{ row }">
-          <span>{{ (row[item.column] || row[item.column] == 0) ? $formatNum(row[item.column]) : '-' }}</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>
-    <!-- E 明细表 detailsTable -->
+          </template>
+          <template v-slot="{ row }">
+            <span>{{ (row[item.column] || row[item.column] == 0) ? $formatNum(row[item.column]) : '-' }}</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>
+      <!-- E 明细表 detailsTable -->
+    </template>
   </div>
 </template>
 <script>
@@ -106,13 +112,29 @@ export default {
       sort_field: 'date', // 排序字段 默认 时间 & 降序
       sort_type: 'desc', // 升序/降序
       updateTime: '', // 数据更新时间
+      isShowEmpty: false, // 是否展示空页面 => 无任何权限时展示
     }
   },
+  computed: {
+    // 是否有“MP”权限（花生数据循环统计表 只需要判断是否有MP权限）
+    isShowMpBtn() {
+      return !!this.$store.state.dataBoardAuth.mp_auth
+    },
+    // 是否有“导出”权限
+    isCanExport() {
+      return !!this.$store.state.dataBoardAuth.can_export
+    },
+  },
   created () {
-    this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
-    this.time = this.default_time
-    this.init(1)
-    this.handleGetUpdateTime()
+    if (this.isShowMpBtn) { // 有权限 => 获取报表数据
+      this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
+      this.time = this.default_time
+      this.init(1)
+      this.handleGetUpdateTime()
+    } else { // 无权限 => 展示空页面
+      this.isShowEmpty = true
+      this.$message.warning('暂无数据权限')
+    }
   },
   methods: {
     // 重置
@@ -301,6 +323,16 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.regRangeReportHS-wrap {
+  position: relative;
+  min-height: calc(100vh - 70px);
+  .empty-wrap {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
 .screenBox {
   position: relative;
   background: #fff;