playlet/project/src/components/dataBoard/platformProm.../promotePlayl...

<template>
  <div class="promotePlaylet-wrap" v-loading="pageLoading">
    <div class="screenBox flex">
      <!-- <div />
      <el-button type="primary" size="mini" @click="onClickExport">导出Excel</el-button> -->
    </div>
    <!-- S 筛选区 -->
    <div class="screenBox filter-wrap">
      <!-- 日期 -->
      <datePicker style="margin-right: 30px;" :reset="reset" title="自定义" :quickFlag="true" :afferent_time="default_time" :clearFlag="false" @changeTime="onChangeTime" />
      <!-- 剧集 -->
      <selectPlaylet v-model="filter.playlet" style="margin-right: 30px;margin-left: -60px;" @change="onChangePlaylet" />
      <!-- <div class="flex">
        <el-button size="mini" type="primary" plain @click="onClickSearch">确定</el-button>
        <el-button size="mini" plain @click="onClickReset">重置</el-button>
      </div> -->
    </div>
    <!-- E 筛选区 -->

    <!-- S 表 -->
      <!-- S 明细表 detailsTable -->
      <div v-loading="detailLoading">
        <ux-grid class="detailsTable" ref="detailsTable" :border="false" @row-click="() => { return }" :header-cell-style="getHeaderCellStyle" show-footer-overflow="tooltip" show-overflow="tooltip" size="mini" :height="height">
          <ux-table-column v-for="(item, idx) in detailsTableCol" :key="item.column + idx" :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': filter.sort_field === item.column && filter.sort_type === 'asc' }" @click="onClickSort(item.column, 'asc')" />
                  <i class="el-icon-caret-bottom" :class="{ 'active': filter.sort_field === item.column && filter.sort_type === 'desc' }" @click="onClickSort(item.column, 'desc')" />
                </div>
              </div>
            </template>
            <template v-slot="{ row }">
              <!-- 时间 -->
              <div v-if="item.column === 'ref_date'">
                <span>{{ row['expense_date'] }}</span><span v-if="row['expense_date_end']"> ~ {{ row['expense_date_end'] }}</span>
              </div>
              <!-- 其他 -->
              <span v-else>{{ row[item.column] ? $formatNum(row[item.column]) : '-' }}</span>
            </template>
          </ux-table-column>
        </ux-grid>
        <div class="pagination" v-show="pagination.total > 0">
          <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pagination.pages)' />
        </div>
      </div>
      <!-- E 明细表 detailsTable -->
    <!-- E 表 -->
  </div>
</template>
<script>
import datePicker from '@/components/assembly/screen/datePicker.vue'
import selfChannel from '@/components/assembly/screen/channel.vue'
import selectPlaylet from './selectPlaylet.vue'
import _lodash from 'lodash'

export default {
  components: {
    datePicker,
    selfChannel,
    selectPlaylet,
  },
  data () {
    const DEFAULT_TIME = [this.$getDay(-30, false), this.$getDay(0, false)]
    return {
      default_time: DEFAULT_TIME,
      reset: false,
      height: '',
      pageLoading: false,

      detailLoading: false,
      detailsTableCol: [],
      pagination: {
        page: 1,
        page_size: 20,
        pages: 0,
        total: 0,
      },
      filter: {
        time: DEFAULT_TIME, // 自定义日期
        playlet: '', // 剧集
        sort_field: 'paid', // 排序字段 - 默认值
        sort_type: 'desc', // 升序/降序
      },
    }
  },
  created () {
    this.initTableHeight()
    // this.handleGetList()
  },
  methods: {
    initTableHeight() {
      this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
    },
    // 获取列表数据
    async handleGetList() {
      try {
        this.detailLoading = true
        const params = {
          page: this.pagination.page,
          page_size: this.pagination.page_size,
          start_date: this.filter.time[0],
          end_date: this.filter.time[1],
          playlet: this.filter.playlet,
          sort_field: this.filter.sort_field,
          sort_type: this.filter.sort_type,
        }
        const url = `${this.URL.BASEURL}${this.URL.dataBoard_loseUser_account}`
        const { data: res = {} } = await this.$axios.get(url, { params })
        if (res && res.errno == 0) {
          res.rst.extra[0].fixed = 'left' // 前2列固定左侧
          res.rst.extra[1].fixed = 'left' // 前2列固定左侧
          const detailsTableCol = []
          res.rst.extra.forEach(item => {
            if (item.name && item.name.length > 6) { // 长字符宽度
              item['min_width'] = item.name.length * 20
            }
            detailsTableCol.push(item) // 收集普通表头
          })
          this.detailsTableCol = Object.freeze(detailsTableCol)
          await this.$nextTick()
          const detailsTableList = Array.isArray(res.rst.data) ? res.rst.data : []
          this.$refs.detailsTable.reloadData(detailsTableList)
          this.pagination.total = res.rst.pageInfo.total
          this.pagination.pages = res.rst.pageInfo.pages
        } else if (res.errno != 4002) {
          this.$message.warning(res.err)
          this.$refs.detailsTable.reloadData([])
          this.pagination.total = 0
          this.pagination.pages = 0
        }
      } catch (error) {
        console.log(error)
        this.$refs.detailsTable.reloadData([])
        this.pagination.total = 0
        this.pagination.pages = 0
      } finally {
        this.detailLoading = false
      }
    },
    // 监听时间筛选变化
    onChangeTime(time) {
      this.filter.time = Array.isArray(time) ? time : []
      this.pagination.page = 1
      // this.handleGetList()
    },
    // 监听剧集筛选变化
    onChangePlaylet(val) {
      this.filter.playlet = val
      this.pagination.page = 1
      // this.handleGetList()
    },
    // 监听当前页变化
    handleCurrentChange(currentPage) {
      this.pagination.page = currentPage
      // this.handleGetList()
    },
    // 监听点击"确定(搜索)"按钮
    onClickSearch() {
      this.pagination.page = 1
      // this.handleGetList()
    },
    // 监听排序变化
    onClickSort(sort_field, sort_type) {
      // sort_type：升序asc、降序desc
      if (this.filter.sort_field === sort_field) {
        if (this.filter.sort_type === sort_type) {
          // 点击的是当前排序字段 && 是当前排序类型 => 重置 取消排序
          this.filter.sort_field = 'paid'
          this.filter.sort_type = 'desc'
        } else {
          // 点击的是当前排序字段 && 非当前排序类型 => 设置排序类型
          this.filter.sort_type = sort_type
        }
      } else {
        // 点击的不是当前排序字段 => 设置排序字段和类型
        this.filter.sort_field = sort_field
        this.filter.sort_type = sort_type
      }
      // 后端排序 => 获取最新数据
      this.pagination.page = 1
      // this.handleGetList()
    },
    // 监听点击"重置"按钮
    onClickReset() {
      this.reset = !this.reset
      this.filter.time = this.default_time
      this.filter.playlet = ''
      this.filter.sort_field = 'paid'
      this.filter.sort_type = 'desc'
      this.pagination.page = 1
      // this.handleGetList()
    },
    getHeaderCellStyle() {
      return { backgroundColor: '#FFFFFF !important', border: 'none!important' }
    },
  }
}
</script>
<style lang="scss" scoped>
.promotePlaylet-wrap {
  min-width: 1125px;
}
.screenBox {
  position: relative;
  background: #fff;
  padding: 5px 20px;
}
.mt-10 {
  margin-top: 10px;
}
.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: 10px;
  }
}


.sort-wrap {
  display: flex;
  flex-direction: column;
  i {
    cursor: pointer;
    &.active {
      color: #32B38A;
    }
  }
  i:first-child {
    margin-bottom: -3px;
  }
  i:last-child {
    margin-top: -3px;
  }
}
</style>