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

project/src/components/dataBoard/regRangeReport.vue

@@ -1,83 +1,94 @@
 <template>
-  <div v-loading="loading">
-    <div class="screenBox flex">
-      <switchMpAdq v-model="order_type" @change="init(1);handleGetUpdateTime();" />
-      <el-button type="primary" size="mini" @click="init(1, 'export')">导出Excel</el-button>
-    </div>
-    <div class="screenBox flex">
-      <div class="flex">
-        <date-picker :reset="reset" title="自定义" :quickFlag='true' :afferent_time="default_time" :clearFlag='false'
-          @changeTime="changeTime"></date-picker>
-        <!-- 推广类型 -->
-        <selfChannel :reset="reset" title="推广类型" type="promotionType" @channelDefine="(val)=>{plat_order_type=val;init(1);handleGetUpdateTime();}" />
-        <!-- 收益截止日期 -->
-        <div style="margin-left: 30px;" 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 class="regRangeReport-wrap" v-loading="loading">
+    <!-- S 无权限 -->
+    <el-empty class="empty-wrap" v-if="isShowEmpty" description="暂无数据权限" />
+    <!-- E 无权限 -->
+
+    <template v-else>
+      <div class="screenBox flex">
+        <switchMpAdq
+          v-model="order_type"
+          :isShowAdqBtn="isShowAdqBtn"
+          :isShowMpBtn="isShowMpBtn"
+          @change="init(1);handleGetUpdateTime();"
+        />
+        <el-button v-if="isCanExport" type="primary" size="mini" @click="init(1, 'export')">导出Excel</el-button>
+      </div>
+      <div class="screenBox flex">
+        <div class="flex">
+          <date-picker :reset="reset" title="自定义" :quickFlag='true' :afferent_time="default_time" :clearFlag='false'
+            @changeTime="changeTime"></date-picker>
+          <!-- 推广类型 -->
+          <selfChannel :reset="reset" title="推广类型" type="promotionType" @channelDefine="(val)=>{plat_order_type=val;init(1);handleGetUpdateTime();}" />
+          <!-- 收益截止日期 -->
+          <div style="margin-left: 30px;" 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>
         </div>
       </div>
-    </div>
-    <!-- S 新增区间筛选项 -->
-    <div class="screenBox filter-wrap">
-      <input-range v-model="firstDayRoi" label="首日ROI" />
-      <input-range v-model="firstOrderCost " label="下单成本" />
-      <input-range v-model="firstOrderCostUnique" 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>
+      <!-- S 新增区间筛选项 -->
+      <div class="screenBox filter-wrap">
+        <input-range v-model="firstDayRoi" label="首日ROI" />
+        <input-range v-model="firstOrderCost " label="下单成本" />
+        <input-range v-model="firstOrderCostUnique" 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>
+        </div>
       </div>
-    </div>
-    <!-- S 新增区间筛选项 -->
-    <!-- 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 新增区间筛选项 -->
+      <!-- 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>
@@ -111,12 +122,13 @@ export default {
       totalRoi: ['', ''], // 回本率（范围）
       paid: ['', ''], // 消耗（范围）
       reset: false,
-      order_type: orderTypeOptions.ADQ, // MP/ADQ
+      order_type: '', // MP/ADQ
       plat_order_type: '', // 推广类型
       closing_date: '', // 收益截止日期
       sort_field: 'date', // 排序字段 默认 时间 & 降序
       sort_type: 'desc', // 升序/降序
       updateTime: '', // 数据更新时间
+      isShowEmpty: false, // 是否展示空页面 => 无任何权限时展示
     }
   },
   computed: {
@@ -128,14 +140,44 @@ 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
+    },
+    // 是否有“导出”权限
+    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()
+    const isPermissioned = this.getDefaultOrderType() // 根据用户权限 获取order_type默认值
+    if (isPermissioned) { // 有权限 => 获取对应报表数据
+      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
+    }
   },
   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
+      }
+    },
     // 获取"数据更新时间"
     async handleGetUpdateTime() {
       try {
@@ -155,7 +197,7 @@ export default {
     },
     handleReset() {
       this.reset = !this.reset
-      this.order_type = orderTypeOptions.ADQ
+      this.order_type = this.getDefaultOrderType()
       this.plat_order_type = ''
       this.closing_date = '',
       this.time = this.default_time
@@ -297,6 +339,20 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.regRangeReport-wrap {
+  position: relative;
+  min-height: calc(100vh - 70px);
+  .empty-wrap {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  /deep/ .common-screen-label {
+    flex-shrink: 0;
+  }
+}
+
 .screenBox {
   position: relative;
   background: #fff;

project/src/components/dataBoard/regRangeReport_backup.vue

@@ -1,208 +0,0 @@
-<template>
-  <div v-loading="loading">
-    <div class="screenBox flex">
-      <div class="flex">
-        <date-picker :reset="reset" title="自定义" :quickFlag='true' :afferent_time="default_time" :clearFlag='false'
-          @changeTime="changeTime"></date-picker>
-      </div>
-      <el-button type="primary" size="mini" @click="init(1, 'export')">导出Excel</el-button>
-    </div>
-
-    <!-- S 新增区间筛选项 -->
-    <div class="screenBox filter-wrap">
-      <input-range v-model="firstDayRoi" label="首日ROI" />
-      <input-range v-model="firstOrderCost " label="下单成本" />
-      <input-range v-model="firstOrderCostUnique" label="下单成本（去重）" />
-      <input-range v-model="perFollowCost" label="企微成本" />
-      <input-range v-model="totalRoi" label="回本率" />
-      <div>
-        <el-button size="mini" type="primary" plain @click="init(1)">确定</el-button>
-        <el-button size="mini" plain @click="handleReset">重置</el-button>
-      </div>
-    </div>
-    <!-- S 新增区间筛选项 -->
-
-    <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.column" :resizable="true" :field="item.column"
-        :title="item.name" :min-width="item.min_width ? item.min_width : 140"
-        :fixed="item.column == 'date' ? 'left' : ''" 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] ? $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>
-  </div>
-</template>
-<script>
-import datePicker from '@/components/assembly/screen/datePicker.vue'
-import inputRange from '@/components/dataBoard/inputRange.vue'
-export default {
-  components: { datePicker, inputRange },
-  data () {
-    return {
-      loading: false,
-      page: 1,
-      pages: 0,
-      total: 0,
-      page_size: 20,
-      sort_field: 'charge_total',
-      dataInfo: {},
-      default_time: [this.$getDay(-30, false), this.$getDay(0, false)],
-      time: [],
-      desCol: [],
-      height: '',
-
-      firstDayRoi: ['', ''], // 首日ROI（范围）
-      firstOrderCost: ['', ''], // 下单成本（范围）
-      firstOrderCostUnique: ['', ''], // 下单成本（去重）（范围）
-      perFollowCost: ['', ''], // 企微成本（范围）
-      totalRoi: ['', ''], // 回本率（范围）
-      reset: false,
-    }
-  },
-  created () {
-    this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
-    this.time = this.default_time
-    this.init(1)
-  },
-  methods: {
-    handleReset() {
-      this.reset = !this.reset
-      this.time = this.default_time
-      this.firstDayRoi = ['', ''] // 首日ROI（范围）
-      this.firstOrderCost = ['', ''] // 下单成本（范围）
-      this.firstOrderCostUnique = ['', ''] // 下单成本（去重）（范围）
-      this.perFollowCost = ['', ''] // 企微成本（范围）
-      this.totalRoi = ['', ''] // 回本率（范围）
-      this.init(1)
-    },
-    changeTime (time) {//筛选时间变化
-      if (!time || time && time.length == 0) {
-        this.time = []
-      } else {
-        this.time = time
-      }
-      this.init(1)
-    },
-    init (page, type) {
-      if (type != 'export') {
-        this.page = page ? page : this.page;
-      } else {
-        if (this.total == 0) {
-          this.$message({
-            message: '暂无数据可导出',
-            type: "warning"
-          })
-          return
-        }
-      }
-      this.loading = true
-      this.$axios.get(`${this.URL.BASEURL}${this.URL.statistics_reg_range_report_new}`, {
-        params: {
-          begin_date: this.time[0],
-          end_date: this.time[1],
-          first_day_roi_min: this.firstDayRoi[0],
-          first_day_roi_max: this.firstDayRoi[1],
-          first_order_cost_min: this.firstOrderCost[0],
-          first_order_cost_max: this.firstOrderCost[1],
-          first_order_cost_unique_min: this.firstOrderCostUnique[0],
-          first_order_cost_unique_max: this.firstOrderCostUnique[1],
-          per_follow_cost_min: this.perFollowCost[0],
-          per_follow_cost_max: this.perFollowCost[1],
-          total_roi_min: this.totalRoi[0],
-          total_roi_max: this.totalRoi[1],
-          page: type == 'export' ? 1 : this.page,
-          page_size: type == 'export' ? this.$store.state.exportNumber : this.page_size,
-        }
-      }).then((res) => {
-        var res = res.data
-        this.loading = false
-        if (res && res.errno == 0) {
-          if (type == 'export') {
-            this.exportEvent(res.rst.data.list)
-          } else {
-            this.desCol = res.rst.data.head;
-            this.$nextTick((item) => {
-              this.datas = res.rst.data.list // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
-              this.$refs.plxTable.reloadData(this.datas)
-            })
-            this.total = res.rst.pageInfo.total;
-            this.pages = res.rst.pageInfo.pages;
-          }
-        } else if (res.errno != 4002) {
-          this.$message({
-            message: res.err,
-            type: "warning"
-          })
-        }
-      }).catch((err) => {
-        this.loading = false
-      });
-    },
-    handleCurrentChange (val) {
-      this.init(val)
-    },
-    sortFieldEvent (type) {
-      this.sort_field = type;
-      this.init(1)
-    },
-    exportEvent (data) {
-      let list = data;
-      let tHeader = this.desCol.map((v) => {
-        return v.name;
-      })
-      let filterVal = this.desCol.map((v) => {
-        return v.column
-      })
-      let excelDatas = [
-        {
-          tHeader: tHeader, // sheet表一头部
-          filterVal: filterVal, // 表一的数据字段
-          tableDatas: list, // 表一的整体json数据
-          sheetName: ''// 表一的sheet名字
-        }
-      ]
-      this.$exportOrder({ excelDatas, name: `数据循环统计（导出时间：${this.$getDay(0)}）` })
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.screenBox {
-  position: relative;
-  background: #fff;
-  padding: 5px 20px;
-}
-.ml-10 {
-  margin-left: 10px;
-}
-.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: 5px;
-  }
-}
-</style>