|
|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div style="display:flex;align-items:center;">
|
|
|
+ <el-input
|
|
|
+ v-if="isdealer"
|
|
|
+ placeholder="请输入搜索内容"
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ v-model="dealerParam.content.where.condition"
|
|
|
+ style="width:200px"
|
|
|
+ size="mini"
|
|
|
+ class="input-with-select inline-16"
|
|
|
+ @keyup.native.enter="search()"
|
|
|
+ @clear="listData(dealerParam.content.where.condition='')"
|
|
|
+ clearable>
|
|
|
+ </el-input>
|
|
|
+ <el-input
|
|
|
+ v-else
|
|
|
+ placeholder="请输入搜索内容"
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ v-model="productParam.content.where.condition"
|
|
|
+ style="width:200px"
|
|
|
+ size="mini"
|
|
|
+ class="input-with-select inline-16"
|
|
|
+ @keyup.native.enter="search()"
|
|
|
+ @clear="listData(productParam.content.where.condition='')"
|
|
|
+ clearable>
|
|
|
+ </el-input>
|
|
|
+ <isExport v-if="isdealer" :tablecols="dealercols" :param="dealerParam" :total="total" excelTitle="经销商销量排行"></isExport>
|
|
|
+ <isExport v-else :tablecols="productcols" :param="productParam" :total="total" excelTitle="商品销量排行"></isExport>
|
|
|
+ <div class="float-icon">
|
|
|
+ <i class="el-icon-sort icon-style" @click="dealerChange" :style="{color:isdealer?'#1376e7':''}">经销商</i>
|
|
|
+ <i class="el-icon-sort icon-style" @click="productChange" :style="{color:!isdealer?'#1376e7':''}">商品</i>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <tableLayout v-if="isdealer" style="margin-top: 15px" :layout="dealercols" :data="dealerData" :opwidth="200" :custom="true" :width="false" :height="tableHeight">
|
|
|
+ <template v-slot:customcol="scope">
|
|
|
+ <p>{{scope.column.data[scope.column.columnname]}}</p>
|
|
|
+ </template>
|
|
|
+ </tableLayout>
|
|
|
+ <tableLayout v-else style="margin-top: 15px" :layout="productcols" :data="productData" :opwidth="200" :custom="true" :width="false" :height="tableHeight">
|
|
|
+ <template v-slot:customcol="scope">
|
|
|
+ <p>{{scope.column.data[scope.column.columnname]}}</p>
|
|
|
+ </template>
|
|
|
+ </tableLayout>
|
|
|
+ <div style="margin-top:16px;text-align:right" v-if="isdealer">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ small
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="dealerParam.content.pageNumber"
|
|
|
+ :page-size="dealerParam.content.pageSize"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:16px;text-align:right" v-else>
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ small
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="productParam.content.pageNumber"
|
|
|
+ :page-size="productParam.content.pageSize"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import tableLayout from '@/components/selectTable/index1.vue'
|
|
|
+import isExport from '@/components/export_excel/index'
|
|
|
+export default {
|
|
|
+ name: "salesRanking",
|
|
|
+ components:{tableLayout,isExport},
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ isdealer:true,
|
|
|
+ tableHeight:"calc(100vh - 526px)",
|
|
|
+ total:0,
|
|
|
+ dealercols:[],
|
|
|
+ dealerData:[],
|
|
|
+ dealerParam:{
|
|
|
+ "id": 20231007101703,
|
|
|
+ "content": {
|
|
|
+ "sa_promotionid":'',
|
|
|
+ "pageNumber":1,
|
|
|
+ "pageSize":20,
|
|
|
+ "where":{
|
|
|
+ "condition":""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ productcols:[],
|
|
|
+ productData:[],
|
|
|
+ productParam:{
|
|
|
+ "id": 20231007101803,
|
|
|
+ "content": {
|
|
|
+ "sa_promotionid":'',
|
|
|
+ "pageNumber":1,
|
|
|
+ "pageSize":20,
|
|
|
+ "where":{
|
|
|
+ "condition":""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ async listData(){
|
|
|
+ console.log(this.isdealer,'isdealer')
|
|
|
+ if (this.isdealer){
|
|
|
+ const res = await this.$api.requested(this.dealerParam)
|
|
|
+ console.log(res.data,'经销商')
|
|
|
+ this.dealerData = res.data
|
|
|
+ this.total = res.total
|
|
|
+ }else {
|
|
|
+ const res1 = await this.$api.requested(this.productParam)
|
|
|
+ console.log(res1.data,'商品')
|
|
|
+ this.productData = res1.data
|
|
|
+ this.total = res1.total
|
|
|
+ }
|
|
|
+ },
|
|
|
+ search(){
|
|
|
+ if (this.isdealer){
|
|
|
+ this.listData(this.dealerParam.content.pageNumber = 1)
|
|
|
+ }else {
|
|
|
+ this.listData(this.productParam.content.pageNumber = 1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dealerChange(){
|
|
|
+ this.isdealer = true
|
|
|
+ this.listData(this.dealerParam.content.pageNumber = 1)
|
|
|
+ },
|
|
|
+ productChange(){
|
|
|
+ this.isdealer = false
|
|
|
+ this.listData(this.productParam.content.pageNumber = 1)
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ // console.log(`每页 ${val} 条`);
|
|
|
+ if (this.isdealer){
|
|
|
+ this.dealerParam.content.pageSize = val
|
|
|
+ this.listData()
|
|
|
+ }else {
|
|
|
+ this.productParam.content.pageSize = val
|
|
|
+ this.listData()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
+ if (this.isdealer){
|
|
|
+ this.dealerParam.content.pageNumber = val
|
|
|
+ this.listData()
|
|
|
+ }else {
|
|
|
+ this.productParam.content.pageNumber = val
|
|
|
+ this.listData()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.listData()
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.dealercols = this.tool.tabelCol(this.$route.name).dealerSalesRankingTable.tablecols
|
|
|
+ this.productcols = this.tool.tabelCol(this.$route.name).productSalesRankingTable.tablecols
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.float-icon{
|
|
|
+ position:absolute;
|
|
|
+ right:30px
|
|
|
+}
|
|
|
+.icon-style{
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+</style>
|
qymljy