增加订单筛选页面静态样式

jsowell-ui/src/views/order/order/index.vue

@@ -86,8 +86,19 @@
       <div>
         {{dateDescription}}期间，总用电量{{sumUsedElectricity}}度，总消费金额{{sumOrderAmount}}元
       </div>
-    </el-row>
+      <el-popover
+        placement="top-start"
+        width="400"
+        trigger="click">
+        <el-checkbox  :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+        <div style="margin: 15px 0;"></div>
+        <el-checkbox-group style="display: grid" v-model="checkedCities" @change="handleCheckedCitiesChange">
+          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+        </el-checkbox-group>
 
+        <el-button style="float: right" icon="el-icon-s-grid" slot="reference">筛选</el-button>
+      </el-popover>
+    </el-row>
     <!--<el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -136,7 +147,7 @@
 
     <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="orderCode" width="150px">
+      <el-table-column label="订单编号" align="center" prop="orderCode" width="150px"  fixed>
         <template slot-scope="scope">
           <router-link
             :to="'/order/index/orderDetail/'+scope.row.orderCode"
@@ -154,7 +165,7 @@
           />
         </template>
       </el-table-column>-->
-      <el-table-column label="订单状态描述" align="center" prop="orderStatusDescribe">
+      <el-table-column label="订单状态描述" align="center" prop="orderStatusDescribe"  fixed>
         <template slot-scope="scope">
           <el-tag :type="getTagType(scope.row)">{{scope.row.orderStatusDescribe}}</el-tag>
         </template>
@@ -196,7 +207,7 @@
       <el-table-column label="终止soc" align="center" prop="endSoc" />
       <el-table-column label="开始充电时间" align="center" prop="chargeStartTime" width="180"/>
       <el-table-column label="结束充电时间" align="center" prop="chargeEndTime" width="180"/>
-      <el-table-column label="订单总金额" align="center" prop="orderAmount" width="100px"/>
+      <el-table-column label="订单总金额" align="center" prop="orderAmount" width="100px"  fixed="right"/>
       <!--<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -234,6 +245,7 @@ import {listOrder, getOrder, delOrder, addOrder, updateOrder, totalData} from "@
 import Template from "@/views/billing/template";
 import {listStation} from "@/api/pile/station";
 import {getDay} from "@/utils/common";
+import log from "@/views/monitor/job/log";
 
 export default {
   name: "Order",
@@ -242,6 +254,10 @@ export default {
   dicts: ['order_status', 'start_mode', 'pay_mode', 'pay_status'],
   data() {
     return {
+      checkAll: false,
+      checkedCities: [],
+      cities: ['订单状态描述', '启动方式', '起始SOC', '终止SOC'],
+      isIndeterminate: true,
       dateDescription: '',
       sumOrderAmount:'',
       sumUsedElectricity:'',
@@ -293,14 +309,28 @@ export default {
     this.dataLoading();
   },
   methods: {
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? cityOptions : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      console.log(value)
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
+    },
     getTagType(row) {
-      for (let i = 0; i < this.dict.type.order_status.length; i++) {
+      // console.log(this.dict.type.order_status,'订单描述')
-        var orderStatus = this.dict.type.order_status[i];
+      let arr = this.dict.type.order_status.find( item => item.value === row.orderStatus)
-        if (orderStatus.value === row.orderStatus) {
+      console.log(arr.raw.listClass)
-          return orderStatus.raw.listClass;
+      return arr.raw.listClass
-        }
+      // for (let i = 0; i < this.dict.type.order_status.length; i++) {
-      }
+      //   let orderStatus = this.dict.type.order_status[i];
-      return "";
+      //   if (orderStatus.value === row.orderStatus) {
+      //     return orderStatus.raw.listClass;
+      //   }
+      // }
+      // return "";
     },
     async dataLoading() {
       console.log("加载订单列表页数据...")