temu-plugin/src/view/ExportSaleData.vue

<template>

  <ai-list class="list">
    <ai-title
      slot="title"
      title="销售数据"
      isShowBottomBorder>
    </ai-title>
    <template slot="content">
      <ai-search-bar>
        <template #left>
          <div class="search-item">
            <label style="width:90px">店铺：</label>
            <el-select v-model="mallId" @change="beforeGetList" placeholder="请选择">
              <el-option
                v-for="item in $store.state.mallList"
                :key="item.mallId"
                :label="item.mallName"
                :value="item.mallId">
              </el-option>
            </el-select>
          </div>
        </template>
        <template #right>
          <json-excel
            :data="list"
            :fields="jsonFields"
            :before-generate = "startDownload"
            name="销售数据.xls"
            worksheet="销售统计">
            <el-button type="primary">导出销售数据</el-button>
          </json-excel>
        </template>
      </ai-search-bar>
      <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div><el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic></div>
      </el-col>
      <el-col :span="6">
        <div><el-statistic title="今天销量"><template slot="formatter"> 456/2 </template></el-statistic></div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic group-separator="," :precision="2" decimal-separator="." :value="11111" title="t11itle">
            <template slot="prefix"><i class="el-icon-s-flag" style="color: red"></i></template>
            <template slot="suffix"><i class="el-icon-s-flag" style="color: blue"></i></template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic :value="like ? 521 : 520" title="Feedback">
            <template slot="suffix">
              <span @click="like = !like" class="like">
                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </div>
      <ai-table
        :isShowPagination="false"
        :tableData="list"
        :col-configs="colConfigs"
        :total="list.length"
        style="margin-top: 8px;"
        @getList="() => {}">
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
import {sendChromeAPIMessage} from '@/api/chromeApi'
import JsonExcel from 'vue-json-excel'
import { Message } from 'element-ui'

  export default {
    name: 'ExportSaleData',

    data () {
      return {
        list: [],
        mallId: '',
        pageSize: 10,
        currentPage: 1,
        colConfigs: [
          {
            prop: 'productName',
            label: '商品名称',
            "show-overflow-tooltip": true, 
            width: '300px',
            align: 'left'
          },
          {
            prop: 'productId',
            label: 'SPU',
            align: 'center'
          },
          {
            prop: 'productSkcId',
            label: 'SKC',
            align: 'center'
          },
          {
            prop: 'productSkuId',
            label: 'SKU ID',
            align: 'center'
          },
          {
            prop: 'className',
            label: 'SKU属性',
            align: 'center'
          },
          {
            prop: 'isVerifyPrice',
            label: '开款核价状态',
            align: 'center',
            format: v => v ? '核价通过': '核价未通过 / 无法备货'
          },
          {
            prop: 'supplierPrice',
            label: '申报价格(CNY)',
            align: 'center',
            format: v => v / 100,
            fixed: "right"
          },
          {
            prop: 'warehouseInventoryNum',
            label: '仓内可用库存',
            align: 'center',
            fixed: "right"
          },
          {
            prop: 'productTotalPrice',
            label: '货值(CNY)',
            align: 'center',
            fixed: "right"
          },
          
        ],
        jsonFields: {
          "商品名称": "productName",
          "SPU": "productId",
          "SKC": "productSkcId",
          "SKU ID": "productSkuId",
          "SKU属性": "className",
          "申报价格(CNY)": {
            "field": "supplierPrice",
            callback: (value) => {
              return value /100;
            }
          },
          "SKU货号": "skuExtCode",
          "开款核价状态": {
            "field": "isVerifyPrice",
            callback: (value) => {
              return value ? '核价通过': '核价未通过 / 无法备货';
            }
          },
          "缺货数量": "lackQuantity",
          "建议备货量": "adviceQuantity",
          "可售天数": "availableSaleDays",
          "库存可售天数": "availableSaleDaysFromInventory",
          "仓内库存可售天数": "warehouseAvailableSaleDays",
          "近7日用户加购数量": "inCartNumber7d",
          "用户累计加购数量": "inCardNumber",
          "已订阅待提醒到货": "nomsgSubsCntCntSth",
          "销售数据 - 今日": "todaySaleVolume",
          "销售数据 - 近7日": "lastSevenDaysSaleVolume",
          "销售数据 - 近30天": "lastThirtyDaysSaleVolume",
          "库存数据 - 仓内可用库存": "inventoryNumInfo.warehouseInventoryNum",
          "库存数据 - 仓内暂不可用库存": "inventoryNumInfo.unavailableWarehouseInventoryNum",
          "库存数据 - 已发货库存": "inventoryNumInfo.waitReceiveNum",
          "库存数据 - 已下单待发货库存": "inventoryNumInfo.waitDeliveryInventoryNum",
          "库存数据 - 待审核备货库存": "inventoryNumInfo.waitApproveInventoryNum",
          "VMI备货单数 - 待发货": "vmiOrderInfo.waitDeliveryNum",
          "VMI备货单数 - 在途单数": "vmiOrderInfo.transportationNum",
          "VMI备货单数 - 发货延迟": "vmiOrderInfo.deliveryDelayNum",
          "VMI备货单数 - 到货延迟": "vmiOrderInfo.arrivalDelayNum",
          "非VMI备货单数 - 待发货": "notVmiOrderInfo.waitDeliveryNum",
          "非VMI备货单数 - 在途单数": "notVmiOrderInfo.transportationNum",
          "非VMI备货单数 - 发货延迟": "notVmiOrderInfo.deliveryDelayNum",
          "非VMI备货单数 - 到货延迟": "notVmiOrderInfo.arrivalDelayNum",
          "备货逻辑": "purchaseConfig",
          "货值(CNY)": "productTotalPrice",
        }
      }
    },

    components: {
      JsonExcel
    },

    created () {
    },

    methods: {
      beforeGetList() {
        this.list = []
        if (!this.mallId) {
          Message.error("请先选择店铺")
          return
        }
        this.$userCheck(this.mallId).then(() => {
          this.getList()
        }).catch((err) => {
          console.log(err)
        })
      },
      getList () {
        sendChromeAPIMessage({
          url: 'marvel-mms/cn/api/kiana/venom/sales/management/list',
          needMallId: true,
          mallId: this.mallId,
          data: {
            pageNo: this.currentPage,
            pageSize: this.pageSize,
            isLack: 0,
            priceAdjustRecentDays: 7
        }}).then((res) => {
          if (res.errorCode == 1000000) {
            for(let i = 0;i < res.result.subOrderList.length; i++) {
              let item = res.result.subOrderList[i];
              let data = {};
              data.productName = item.productName;
              data.productId = item.productId;
              data.productSkcId = item.productSkcId;
              data.purchaseConfig = item.purchaseConfig;

              for(let j = 0;j < item.skuQuantityDetailList.length; j++) {
                data = {...data, ...item.skuQuantityDetailList[j], 
                  productTotalPrice: ((item.skuQuantityDetailList[j].supplierPrice / 100) * item.skuQuantityDetailList[j].inventoryNumInfo.warehouseInventoryNum).toFixed(2),
                  warehouseInventoryNum: item.skuQuantityDetailList[j].inventoryNumInfo.warehouseInventoryNum}
                this.list.push(data);
              }
            }
            if (this.pageSize == res.result.subOrderList.length) {
              this.currentPage ++
              this.getList()
            } else {
              Message.success('销售数据加载完成，可进行导出')
            }
          } else {
            Message.error("【拼多多】" + res.errorMsg)
          }
        });
      },
      startDownload() {
        this.$http.post('/api/malluser/info').then(res => {
          if (res.code == 0) {
            this.$store.commit('setUserInfo', res.data)
            if (res.data.flag != 1) {
              Message.error('您的账号未激活或已失效，请激活后使用')
              this.$store.commit('setActiveDlgShow', true)
              return;
            }
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
</style>