hongze_fsms_web/src/views/financialStatistics/salesStatistics.vue

<script setup>
  import {getSellerGroupStatisticsList,getSellerStatisticsList} from '@/api/financialStatistics'
  import {getSellerGroupList,getSellerTeamList} from '@/api/crm'
  import {downloadByFlow} from '@/utils/common-methods'
  const moment = inject('$moment')

  const sortFiledMap = new Map([['invoice_amount',1],['group_rate',2],['seller_rate',3]])
  const customerTypeArray=[{label:'全部',value:0},{label:'新客户',value:1},{label:'老客户',value:2}]
  const dateButtonData=[{text:'近1周',tabId:1,type:'week',diff:1},{text:'近1月',tabId:2,type:'month',diff:1},
  {text:'近2月',tabId:3,type:'month',diff:2},{text:'近3月',tabId:4,type:'month',diff:3},{text:'今年以来',tabId:5,type:'year',diff:1}]

  // let groupList=ref([])
  let sellerSellerTeamList=ref([])
  const tabType=ref(1)
  const statisticsData=reactive({
    tableData:[],
    total:0
  })
  // 搜索参数
  const searchParams=reactive({
    current:1,
    page_size:10,
    // group_id:'',
    seller_ids:'',
    start_date:'',
    end_date:'',
    // 排序字段: 1-开票金额; 2-组别占比
    sort_field:'',
    // 排序方式: 1-正序; 2-倒序
    sort_type:'',
    // 是否导出：0-否；1-是
    is_export:0,
    // 销售类型 1-ficc销售 2-权益销售
    seller_type:1,
    company_type:0,
    show_resign:false
  })
  // 搜索参数-创建时间数组
  const createtime=ref(null)

  // 日期按钮选项
  const currentTabId=ref(0)

  watch(createtime,(newVal)=>{
    if(newVal){
      searchParams.start_date=newVal[0]
      searchParams.end_date=newVal[1]
    }else{
      searchParams.start_date=''
      searchParams.end_date=''
    }
    searchStatistics()
    
  })
  // 销售类型缓存 为了减少请求次数
  // let sellerTypeCache=0

  const changeTab=(tab)=>{
    if(tabType.value==tab) return 
    tabType.value=tab
    // if(tab==2 && sellerTypeCache!=searchParams.seller_type){
      // getSellerGroup()
    getSellerListFun()
    // }
    searchParams.current=1
    searchParams.page_size=10
    // searchParams.group_id=''
    searchParams.seller_ids=''
    searchParams.sort_field=''
    searchParams.sort_type=''
    searchParams.company_type=0
    searchParams.show_resign=false
    currentTabId.value=0
    if(createtime.value===null){
      statisticsList()
    }else{
      // 监听了createtime，createtime变化就会发起请求，避免发起两次请求
      createtime.value=null
    }
  }

  const sellerChange=(value)=>{
    console.log(value);
    searchParams.seller_ids=(value&&value.length)?value.join(','):''
    statisticsList()
  }

  // 获取列表
  const statisticsList=()=>{
    if(tabType.value==1){
      // 销售组排名 - 无分页
      getSellerGroupStatisticsList(searchParams).then(res=>{
        statisticsData.tableData = res.data || []
        statisticsData.total = 0
      })
    }else if(tabType.value==2){
      // 销售排名
      getSellerStatisticsList(searchParams).then(res=>{
        statisticsData.tableData = res.data.list || []
        statisticsData.total = res.data.page.total || 0
      })
    }

  }

  // 获取销售组别
  // const getSellerGroup=()=>{
  //   sellerTypeCache=searchParams.seller_type
  //   getSellerGroupList({seller_type:searchParams.seller_type}).then(res=>{
  //     groupList.value=res.data || []
  //   })
  // }

  //获取销售列表
  const getSellerListFun=()=>{
    getSellerTeamList().then(res=>{
      sellerSellerTeamList.value = res.data.all_list || []
    })
  }
  
  // 切换销售类型
  // const changeSellerType=()=>{
    // if(tabType.value==2&&sellerTypeCache!=searchParams.seller_type){
    //   searchParams.group_id=''
    //   getSellerGroup()
    // }
  //   searchStatistics()
  // }

  // 日期选项改变
  const changeDateType=()=>{
    let currentTab = dateButtonData.find(it => it.tabId == currentTabId.value)
    if(!currentTab) return 
    let {type,diff} = currentTab
    let startOfType=type
    if(type=='week'){
      startOfType='isoWeek'
    }
    createtime.value=[moment().startOf(startOfType).subtract((diff-1), type+'s').format('YYYY-MM-DD'),
      moment().format('YYYY-MM-DD')]
  }

  const searchStatistics=()=>{
    searchParams.current = 1
    statisticsList()
  }
  // 切换每页的数量
  const changePageSize=(pageSize)=>{
    searchParams.page_size = pageSize
    statisticsList()
  }
  const changePageNo = (pageNo)=>{
    searchParams.current = pageNo
    statisticsList()
  }
  // 列表排序发生改变
  const sortChange=({order,prop})=>{
    searchParams.sort_field=sortFiledMap.get(prop)
    searchParams.sort_type=order == 'ascending'?1:2
    statisticsList()
  }
  // 导出
  const statisticeExport=()=>{
    if(tabType.value == 1){
      getSellerGroupStatisticsList({...searchParams,is_export:1}).then(res=>{
        downloadByFlow(res,'xlsx',`销售统计-销售组排名列表`)
      })
    }else if(tabType.value == 2){
      getSellerStatisticsList({...searchParams,is_export:1}).then(res=>{
        downloadByFlow(res,'xlsx',`销售统计-销售排名列表`)
      })
    }

  }

  // ------------------------------------------------
  statisticsList()
</script>

<template>
    <div id="sales-statistics-container" class="sales-statistics-container">
      <div class="statistics-tabs-zone">
        <el-button size="large" class="tab-button element-common-button" :class="tabType==1?'actice-tab':''"
        style="border-radius: 4px 0 0 4px;" @click="changeTab(1)">销售组排名</el-button>
        <el-button size="large" class="tab-button element-common-button" :class="tabType==2?'actice-tab':''"
        style="border-radius: 0 4px 4px 0;margin-left: 0;" @click="changeTab(2)">销售排名</el-button>
      </div>
      <div class="statistics-top-zone">
        <div class="statistics-search-zone">
          <el-select v-model="searchParams.seller_type" placeholder="请选择销售类型"
          @change="searchStatistics" class="statistics-search-item" v-show="tabType==1">
            <el-option label="FICC销售" :value="1"></el-option>
            <el-option label="权益销售" :value="2"></el-option>
          </el-select>
          <!-- <el-select v-model="searchParams.group_id" placeholder="请选择销售组别" class="statistics-search-item"
          @change="searchStatistics" v-show="tabType==2" clearable >
            <el-option :label="item.group_name" :value="item.group_id" v-for="item in groupList"></el-option>
          </el-select> -->
          <el-cascader :options="sellerSellerTeamList" style="width: 240px;margin:0 30px 8px 0;" filterable collapse-tags-tooltip
            @change="sellerChange" placeholder="请选择销售" clearable collapse-tags :show-all-levels="false"
            :props="{multiple:true,label:'seller_name',value:'seller_id',children:'child',emitPath:false}" key="seller" 
            v-if="tabType==2">
          </el-cascader>
          <el-checkbox v-model="searchParams.show_resign" style="margin: 0 30px 8px 0;"
          v-show="tabType==2" @change="searchStatistics">显示离职销售</el-checkbox>
          <el-radio-group v-model="searchParams.company_type" size="large" @change="searchStatistics"
          style="margin: 0 30px 8px 0;">
            <el-radio-button v-for="item in customerTypeArray" :key="item.value" class="dimension-radio"
            :label="item.value" >{{ item.label }}</el-radio-button>
          </el-radio-group>
          <div class="date-box">
            <el-date-picker v-model="createtime" type="daterange" @change="currentTabId=0"
            value-format="YYYY-MM-DD" style="max-width:240px;margin-right: 30px"
            start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            <el-radio-group v-model="currentTabId" size="large" @change="changeDateType">
              <el-radio-button v-for="item in dateButtonData" :key="item.tabId" class="dimension-radio"
              :label="item.tabId" >{{ item.text }}</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="statistice-buttons-zone">
          <el-button @click="statisticeExport" class="element-common-button" size="large">导出</el-button>
        </div>
      </div>
      <div class="statistics-table-zone" >
        <el-table :data="statisticsData.tableData" border
        max-height="600" @sort-change="sortChange" size='large'>
          <el-table-column label="排名" align="center">
            <template #default="{$index}">
              {{ searchParams.page_size*(searchParams.current-1)+$index+1}}
            </template>
          </el-table-column>
          <el-table-column label="销售员" prop="seller_name" align="center" v-if="tabType==2"></el-table-column>
          <el-table-column label="销售组别" prop="group_name" align="center"></el-table-column>
          <el-table-column label="收入金额（元）" prop="invoice_amount" align="center" sortable="custom" >
            <template #header>
              <el-tooltip content="收入金额为开票金额换算后的人民币金额" placement="top">
                <span style="display: inline-flex;align-items: center;">收入金额（元）
                  <svg-Icon name="svgIcon-financial-info" size="18" color="#C0C4CC" style="margin-left: 5px;color: white;" />
                </span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="小组占比" prop="group_rate" align="center" sortable="custom">
            <template #default="{row}">
              {{ row.group_rate+'%' }}
            </template>
          </el-table-column>
          <el-table-column label="全员占比" prop="seller_rate" align="center" sortable="custom" v-if="tabType==2">
            <template #default="{row}">
              {{ (row.seller_rate || '0.00')+'%' }}
            </template>
          </el-table-column>
          <template #empty>
            <div class="table-no-data">
              <img src="@/assets/img/icon/empty-data.png" />
              <span>暂无数据</span>
            </div>
          </template>
        </el-table>
        <!-- 分页 -->
        <m-page :pageSize="searchParams.page_size" :page_no="searchParams.current" 
        style="display: flex;justify-content: flex-end;margin-top: 20px;"
        :total="statisticsData.total" @handleCurrentChange="changePageNo" @handleSizeChange="changePageSize"/>
      </div>
    </div>
</template>
  
<style lang="scss" scoped>
  #sales-statistics-container{
    min-height: 100%;
    .statistics-tabs-zone{
      margin-bottom: 26px;
      .tab-button{
        color: $themeColor;
        border: 1px solid $themeColor;
        width: 130px;
        background-color: white;
      }
      .actice-tab{
        color: white;
        background-color: $themeColor;
      }
    }
    .statistics-top-zone{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .statistics-search-zone{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        // margin-right: 30px;
        .statistics-search-item{
          width: 200px;
          margin-bottom: 8px;
          margin-right: 30px;
        }
        .date-box{
          display: flex;
          align-items: center;
          margin: 0 30px 8px 0;
        }
      }
    }
  }
</style>
<style lang="scss">
#sales-statistics-container{
  .el-radio-group{
    flex-wrap: nowrap;
  }
  .dimension-radio{
    span{
      display: inline-block;
      color: $hitTextColorTwo;
      padding: 12px 12px;
    }
  }
  .is-active{
    span{
      color:white
    }
  }
}
</style>