kuailelunwen_new_houtai/src/views/super/Ranking/YearProfit.vue

<template>
    <div class="demo-wrap min-flex-right">
        <div class="flex-between">
            <h2>总利润 - 年排行</h2>
            <GuipForm />
        </div>
        <div class=" flex-common" id="">
            <el-form>
                <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover">
                    <el-table-column type="index" label="排序" width="100">
                      <template #default="scope">
                        {{ scope.row.sort }}
                      </template>
                    </el-table-column>
                    <!-- 其他列 -->
                    <el-table-column prop="1" label="年份" sortable="custom">
                        <template #default="scope">
                          {{ scope.row.value_1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="2" label="总利润/元" sortable="custom">
                        <template #default="scope">
                            <div class="flex">
                              {{ scope.row.value_2 }}
                            </div>
                        </template>
                    </el-table-column>

                    <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>
                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                    :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                    :total="tableData.length">
                </el-pagination>
            </el-form>
        </div>
    </div>
</template>
<script>
import GuipForm from '@/components/GuipForm.vue'
export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
      GuipForm
    },
    data() {
        return {
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数
            options_payword: [
                {
                    label: '按篇', value: '0'
                },
                {
                    label: '按字符', value: '1'
                },
            ],
            options: [
                { label: '选项1', value: '1' },
                { label: '选项2', value: '2' },
                { label: '选项3', value: '3' },
                // 更多选项...
            ],
            filteredOptions: this.options,

            tableData: [],
            profit_top_list: [],
            show_detail_index:0,
            form: {
                payword: '0',
            }
        }
    },
    mounted() {
        // this.$refs.scrollContainer.scrollTo(0)
      this.getRankingData();
    },
    methods: {
        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
              that.profit_top_list = response.data.profit_top_list
              that.total = response.data.total
            })
          })
          .catch(error => {
            console.error(error, 'error')
          })
        },
        // 列筛选
        filterHandler(value, row, column) {
            //  console.log(value, row, column,'======');
            const property = column['property'];
            if (value == 0) {
                return row[property] != value
            }
            return row[property] === value;
        },
        // 自定义搜索筛选
        customFilter(keyword, options) {
            if (!keyword) return options
            return options.filter(item => {
                // 自定义筛选逻辑
                return item.label.includes(keyword) || item.value.includes(keyword)
            })
        },
        handleSizeChange(val) {
            this.pageSize = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
    }
}
</script>
<style scoped lang="scss">
.demo-wrap {
    width: 100%;
    letter-spacing: 0.08em;
}
.detail_icon{
  vertical-align: text-top;
}
</style>