销售数据模块样式调整

2023-08-18 17:51:28 +08:00
parent e7200de6a0
commit ecab78d46d
3 changed files with 184 additions and 86 deletions
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -448,3 +448,7 @@ img {
 .el-menu .el-menu-item i {
  color: #fff;
 }
+
+.fill {
+  flex: 1;
+}
--- a/src/entry/popup.js
+++ b/src/entry/popup.js
@@ -4,6 +4,7 @@ import store from '../store'
 import router from '../router'
 import ElementUI from 'element-ui'
 import '../assets/css/element-variables.scss'
+import '../assets/css/index.scss'
 import instance from '../api'
 import utils from '../utils'
 import '../utils/install'
--- a/src/view/ExportSaleData.vue
+++ b/src/view/ExportSaleData.vue
@@ -1,17 +1,29 @@
 <template>
-
-  <ai-list class="list">
+  <ai-list class="list" v-loading="isLoading">
    <ai-title
      slot="title"
      title="销售数据"
      isShowBottomBorder>
-    </ai-title>
-    <template slot="content">
-      <ai-search-bar>
-        <template #left>
-          <div class="search-item">
+      <template #rightBtn>
+        <div class="title-right">
+          <div>
+            <label style="width:90px">统计类型：</label>
+            <el-select v-model="type" @change="currentPage = 0, isLoading = true, beforeGetList()" placeholder="请选择" size="small">
+              <el-option
+                key="0"
+                label="销售数据"
+                value="0">
+              </el-option>
+              <el-option
+                key="1"
+                label="近30天销售"
+                value="1">
+              </el-option>
+            </el-select>
+          </div>
+          <div>
            <label style="width:90px">店铺：</label>
-            <el-select v-model="mallId" @change="beforeGetList" placeholder="请选择">
+            <el-select v-model="mallId" @change="isLoading = true, beforeGetList()" placeholder="请选择" size="small">
              <el-option
                v-for="item in $store.state.mallList"
                :key="item.mallId"
@@ -20,7 +32,29 @@
              </el-option>
            </el-select>
          </div>
-        </template>
+        </div>
+      </template>
+    </ai-title>
+    <template slot="content">
+      <div class="top" v-if="type === '0'">
+        <div class="item">
+          <h2>今天销量</h2>
+          <p>{{ todayTotal }}</p>
+        </div>
+        <div class="item">
+          <h2>今天销售额</h2>
+          <p>{{ todayMoney }}</p>
+        </div>
+        <div class="item">
+          <h2>库存总量</h2>
+          <p>{{ inventoryTotal }}</p>
+        </div>
+        <div class="item">
+          <h2>库存总额</h2>
+          <p>{{ inventoryMoeny }}</p>
+        </div>
+      </div>
+      <ai-card title="销售数据明细" style="padding-bottom: 40px;">
        <template #right>
          <json-excel
            :data="list"
@@ -31,33 +65,15 @@
            <el-button type="primary">导出销售数据</el-button>
          </json-excel>
        </template>
-      </ai-search-bar>
-      <div>
-  <ai-card :hideTitle="true" :panel="true">
-    <el-row :gutter="20">
-      <el-col :span="6">
-        <div><el-statistic title="今天销量" :value="todayTotal"></el-statistic></div>
-      </el-col>
-      <el-col :span="6">
-        <div><el-statistic title="今天销售额" group-separator="," :precision="2" :value="todayMoney"></el-statistic></div>
-      </el-col>
-      <el-col :span="6">
-        <div><el-statistic title="库存总量" :value="inventoryTotal"></el-statistic></div>
-      </el-col>
-      <el-col :span="6">
-        <div><el-statistic title="库存总额" group-separator="," :precision="2" :value="inventoryMoeny"></el-statistic></div>
-      </el-col>
-    </el-row>
-  </ai-card>
-  </div>
-      <ai-table
-        :isShowPagination="false"
-        :tableData="list"
-        :col-configs="colConfigs"
-        :total="list.length"
-        style="margin-top: 8px;"
-        @getList="() => {}">
-      </ai-table>
+        <ai-table
+          :isShowPagination="false"
+          :tableData="list"
+          :col-configs="colConfigs"
+          :total="list.length"
+          style="margin-top: 8px;"
+          @getList="() => {}">
+        </ai-table>
+      </ai-card>
    </template>
  </ai-list>
 </template>
@@ -74,13 +90,66 @@ import { Message } from 'element-ui'
      return {
        list: [],
        mallId: '',
+        type: '0',
+        isLoading: false,
        pageSize: 10,
        currentPage: 1,
        todayTotal: 0,
        todayMoney: 0.0,
        inventoryTotal: 0,
        inventoryMoeny: 0.0,
-        colConfigs: [
+        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",
+        }
+      }
+    },
+
+    computed: {
+      colConfigs () {
+        return [
          {
            prop: 'productName',
            label: '商品名称',
@@ -131,56 +200,14 @@ import { Message } from 'element-ui'
            prop: 'productTotalPrice',
            label: '库存货值(CNY)',
            align: 'center',
-            fixed: "right"
+            fixed: "right",
+            sortable: true,
+            'sort-method': (a, b) => {
+              return a.productTotalPrice - b.productTotalPrice
+            }
          },
          
-        ],
-        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",
-        }
+        ]
      }
    },

@@ -246,6 +273,7 @@ import { Message } from 'element-ui'
                this.getList()
              }, 1500)
            } else {
+              this.isLoading = false
              Message.success('销售数据加载完成，可进行导出')
            }
          } else {
@@ -254,7 +282,9 @@ import { Message } from 'element-ui'
            }, 1500)
            // Message.error("【拼多多】" + res.errorMsg + ", 请重新尝试加载")
          }
-        });
+        }).catch(() => {
+          this.isLoading = false
+        })
      },
      startDownload() {
        this.$http.post('/api/malluser/info').then(res => {
@@ -273,6 +303,69 @@ import { Message } from 'element-ui'
 </script>

 <style scoped lang="scss">
+  .list {
+    .title-right {
+      display: flex;
+      align-items: center;
+
+      & > div:first-child {
+        margin-right: 20px;
+      }
+    }
+    ::v-deep.ai-list {
+      .ai-list__content--right-wrapper {
+        background: transparent;
+        box-shadow: none;
+        padding: 0!important;
+      }
+    }
+
+    .top {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 24px;
+
+      .item {
+        flex: 1;
+        margin-right: 20px;
+        padding: 16px 24px;
+        background: #FFF;
+        box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
+        border-radius: 4px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &:nth-of-type(1) {
+          color: #2266ff;
+        }
+
+        &:nth-of-type(2) {
+          color: #f8b426;
+        }
+        &:nth-of-type(3) {
+          color: #21aa99;
+        }
+        &:nth-of-type(4) {
+          color: #F46;
+        }
+        &:nth-of-type(5) {
+          color: #11A265;
+        }
+        h2 {
+          margin-bottom: 30px;
+          font-size: 16px;
+          color: #999;
+        }
+
+        p {
+          font-weight: 600;
+          font-size: 28px;
+        }
+      }
+    }
+  }
 .like {
    cursor: pointer;
    font-size: 25px;