订单管理页面增加订单总数

src/views/system/order/index.vue

@@ -2,11 +2,22 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="120px">
       <el-form-item label="所属门店" prop="storeId">
-        <el-select v-model="queryParams.storeId" placeholder="请选择所属门店">
+        <el-select v-model="queryParams.storeId" placeholder="请选择所属门店" @change="onGetRoomListByStoreId">
           <el-option
             v-for="item in options"
             :key="item.id"
             :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属房间" prop="roomId">
+        <el-select v-model="queryParams.roomId" placeholder="请选择所属房间" clearable>
+          <el-option
+            v-for="item in rooms"
+            :key="item.id"
+            :label="item.name"
             :value="item.id">
           </el-option>
         </el-select>
@@ -140,9 +151,13 @@
           v-hasPermi="['system:order:export']"
         >导出</el-button>
       </el-col>
+      <div style="display: flex;flex-direction: row;">
+        <span>订单总数: {{ total }}</span>
+        <span>订单总价: {{ totalPrice }}</span>
+        <span>实际总支付金额: {{ payPrice }}</span>
+      </div>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-
     <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="订单流水号" align="center" prop="orderNo" />
@@ -387,10 +402,12 @@ export default {
       loading: true,
       // 选中数组
       ids: [],
+      id: null,
       options: [],
       roomList: [],
       packList: [],
       couponList: [],
+      rooms: [],
       // 非单个禁用
       single: true,
       // 非多个禁用
@@ -399,6 +416,10 @@ export default {
       showSearch: true,
       // 总条数
       total: 0,
+      //订单总价
+      totalPrice: 0,
+      //实际支付金额
+      payPrice: 0,
       // 订单表格数据
       orderList: [],
       // 弹出层标题
@@ -427,6 +448,7 @@ export default {
         preStartDate: null,
         preEndDate: null,
         orderNo: null,
+        roomId: null,
         storeId: null
       },
       // 表单参数
@@ -480,6 +502,12 @@ export default {
         this.roomList = res.data
       })
     },
+    onGetRoomListByStoreId(id) {
+      this.queryParams.roomId = null;
+      queryRoom().then(res => {
+        this.rooms = res.data.filter(item => item.storeId === id)
+      })
+    },
     onGetPackList(){
       query().then(res => {
         this.packList = res.data
@@ -491,6 +519,10 @@ export default {
       listOrder(this.queryParams).then(response => {
         this.orderList = response.rows;
         this.total = response.total;
+        //计算订单总价
+        this.totalPrice = response.rows.reduce((total, item) => total + item.totalPrice, 0);
+        //计算实际支付金额,取3位小数
+        this.payPrice = response.rows.reduce((total, item) => total + item.payPrice, 0).toFixed(3);
         this.loading = false;
       });
     },

src/views/system/store/index.vue

@@ -513,7 +513,7 @@ export default {
       getStore(id).then(response => {
         this.form = {
           ...response.data,
-          images: response.data.images?  response.data.images.split(',') : []
+          images: response.data.images ? response.data.images.split(',') : ''
         }
         this.open = true
         this.title = '修改门店'