管理员排行榜

src/views/super/Ranking/YearProfit.vue

@@ -2,41 +2,35 @@
     <div class="demo-wrap min-flex-right">
         <div class="flex-between">
             <h2>总利润 - 年排行</h2>
-            <el-form :model="form">
-                <GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%"
-                    :options="options_payword" />
-            </el-form>
+            <GuipForm />
         </div>
         <div class=" flex-common" id="">
             <el-form>
-                <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
-                    style="width: 100%" :key="random()">
+                <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover">
                     <el-table-column type="index" label="排序" width="100">
-                      <template slot-scope="scope">
+                      <template #default="scope">
                         {{ scope.row.sort }}
                       </template>
                     </el-table-column>
                     <!-- 其他列 -->
-                    <el-table-column prop="name" label="年份">
-                        <template slot-scope="scope">
+                    <el-table-column prop="1" label="年份" sortable="custom">
+                        <template #default="scope">
                           {{ scope.row.value_1 }}
                         </template>
                     </el-table-column>
-                    <el-table-column prop="count" label="总利润/元" sortable>
-                        <template slot-scope="scope">
+                    <el-table-column prop="2" label="总利润/元" sortable="custom">
+                        <template #default="scope">
                             <div class="flex">
                               {{ scope.row.value_2 }}
-                              {{scope.row.value }}%上年持平
                             </div>
                         </template>
                     </el-table-column>
 
-                    <el-table-column prop="count" label="代理商排行">
-                      <template slot-scope="scope">
-                        <div class="flex">
-                          {{ scope.row.value_1 }}
-                          <span class="flex"><img class="edit_icon" src="../../../assets/site/form_link.svg" alt=""></span>
-                        </div>
+                    <el-table-column label="代理商排行">
+                      <template #default="scope">
+                        <span v-if="profit_top_list[scope.row.id]['name']">
+                          No.1 {{ profit_top_list[scope.row.id]['name'] }} <img v-if="show_detail_index == scope.row.sort" class="detail_icon" src="../../../assets/super/list-detail.svg" alt="">
+                        </span>
                       </template>
                     </el-table-column>
                 </el-table>
@@ -49,35 +43,16 @@
     </div>
 </template>
 <script>
-import GuipSelect from '@/components/GuipSelect.vue'
+import GuipForm from '@/components/GuipForm.vue'
 export default {
     // 站点设置
     name: '',
     props: [''],
     components: {
-        GuipSelect,
-        // GuipSelectFilter,
+      GuipForm
     },
     data() {
         return {
-            phoneService: [
-                {
-                    text: '不限',
-                    value: '0'
-                },
-                {
-                    text: 'H5',
-                    value: '1'
-                },
-                {
-                    text: '小程序',
-                    value: '2'
-                },
-                {
-                    text: 'H5以及小程序',
-                    value: '3'
-                },
-            ],
             currentPage: 1,    //当前页
             pageSize: 20,   //每页的容量
             total: 0,   //列表总数
@@ -97,15 +72,9 @@ export default {
             ],
             filteredOptions: this.options,
 
-            phoneServicelist:
-            {
-                0: '不限',
-                1: ' H5',
-                2: '小程序',
-                3: '无手机服务'
-
-            },
             tableData: [],
+            profit_top_list: [],
+            show_detail_index:0,
             form: {
                 payword: '0',
             }
@@ -116,16 +85,40 @@ export default {
       this.getRankingData();
     },
     methods: {
-        getRankingData(){
+        handleSortChange({ prop, order }) {
+          this.currentPage = 1;
+
+          let sortBy = 0;
+          let sortOrder = 0;
+          if(order == 'ascending'){
+            sortBy = prop;
+            sortOrder = 1;
+          }
+          if(order == 'descending'){
+            sortBy = prop;
+            sortOrder = 2;
+          }
+          this.getRankingData({sortBy:sortBy,sortOrder:sortOrder})
+        },
+        handleRowHover(row) {
+          this.show_detail_index = row.sort
+        },
+        getRankingData(obj){
           const that = this
           this.$http('POST', this.reqUri + '/super/ajax_get_rank_detail',{
             rank_type:1,
+            cur_page:that.currentPage,
+            page_size:that.pageSize,
+            ...obj
           }).then(response => {
+            this.$nextTick(() => {
               that.tableData = response.data.list
-            console.log(response.data.list, '0001')
+              that.profit_top_list = response.data.profit_top_list
+              that.total = response.data.total
+            })
           })
           .catch(error => {
-            console.error(error, '-----')
+            console.error(error, 'error')
           })
         },
         // 列筛选
@@ -151,10 +144,6 @@ export default {
         handleCurrentChange(val) {
             this.currentPage = val
         },
-        random() {
-            var randomNumber = Math.random();
-            return randomNumber
-        },
     }
 }
 </script>
@@ -163,4 +152,7 @@ export default {
     width: 100%;
     letter-spacing: 0.08em;
 }
+.detail_icon{
+  vertical-align: text-top;
+}
 </style>