修改充电订单样式

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

@@ -1,72 +1,47 @@
 <template>
     <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="168px"
-                 label-width="168px"
             @submit.native.prevent>
             <el-form-item label="所属运营商" prop="merchantId" label-width="120">
-                <el-select v-model="queryParams.merchantId" filterable clearable placeholder="请选择运营商" @change="changeSelectMerchant(queryParams.merchantId)">
+                <el-select v-model="queryParams.merchantId" filterable clearable placeholder="请选择运营商"
-                    <el-option
+                    @change="changeSelectMerchant(queryParams.merchantId)">
-                        v-for="item in merchantList"
+                    <el-option v-for="item in merchantList" :key="item.merchantName" :label="item.merchantName"
-                        :key="item.merchantName"
+                        :value="item.id" />
-                        :label="item.merchantName"
-                        :value="item.id"
-                    />
                 </el-select>
             </el-form-item>
             <el-form-item label="站点" prop="stationId">
-                <el-select v-model="queryParams.stationId" placeholder="请选择站点" clearable filterable
+                <el-select v-model="queryParams.stationId" placeholder="请选择站点" clearable filterable style="width: 140px">
-                           style="width: 140px">
+                    <el-option v-for="(station, index) in stationList" :key="index" :label="station.stationName"
-                    <el-option
+                        :value="station.id" />
-                        v-for="(station, index) in stationList"
-                        :key="index"
-                        :label="station.stationName"
-                        :value="station.id"
-                    />
                 </el-select>
             </el-form-item>
 
             <el-form-item label="订单编号" prop="orderCode">
                 <el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable
-                          @keyup.enter.native="handleQuery"/>
+                    @keyup.enter.native="handleQuery" />
             </el-form-item>
 
             <el-form-item label="订单状态" prop="orderStatus">
-                <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable
+                <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable style="width: 140px">
-                           style="width: 140px">
                     <el-option v-for="item1 in dict.type.order_status" :key="item1.value" :label="item1.label"
-                               :value="item1.value"/>
+                        :value="item1.value" />
                 </el-select>
             </el-form-item>
 
             <el-form-item label="手机号码" prop="mobileNumber">
                 <el-input v-model="queryParams.mobileNumber" placeholder="请输入手机号码" clearable
-                          @keyup.enter.native="handleQuery"/>
+                    @keyup.enter.native="handleQuery" />
             </el-form-item>
             <div v-if="buttonBoolean">
-                <el-form-item label="交易流水号" prop="transactionCode">
+                <el-form-item label="交易流水号" prop="transactionCode" label-width="120">
                     <el-input v-model="queryParams.transactionCode" placeholder="请输入交易流水号" clearable
-                              @keyup.enter.native="handleQuery"/>
+                        @keyup.enter.native="handleQuery" />
                 </el-form-item>
-
                 <el-form-item label="创建时间">
                     <el-date-picker v-model="createTimeRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                         :default-time="['00:00:00', '23:59:59']" type="daterange" range-separator="-"
-                                    start-placeholder="开始日期"
+                        start-placeholder="开始日期" end-placeholder="结束日期" :clearable="true"></el-date-picker>
-                                    end-placeholder="结束日期" :clearable="true"></el-date-picker>
                 </el-form-item>
-                <!-- <el-form-item label="结算时间">
-                  <el-date-picker
-                    v-model="settleTimeRange"
-                    style="width: 240px"
-                    value-format="yyyy-MM-dd HH:mm:ss"
-                    :default-time="['00:00:00', '23:59:59']"
-                    type="daterange"
-                    range-separator="-"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期"
-                    :clearable="true"
-                  ></el-date-picker>
-                </el-form-item> -->
             </div>
             <el-button @click="showOrHide()" style="
             border-color: white;
@@ -98,7 +73,7 @@
                     sumUsedElectricity
                 }}度，总消费金额{{ sumOrderAmount }}元，总结算金额{{
     sumSettleAmount
-                }}元
+}}元
             </div>
             <el-popover placement="top-start" width="400" trigger="click">
                 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
@@ -112,9 +87,9 @@
         </el-row>
         <el-skeleton style="width: 100%" :loading="loading" animated :count="3">
             <template slot="template">
-                <el-skeleton-item variant="text" style="width: 100%; height: 100%"/>
+                <el-skeleton-item variant="text" style="width: 100%; height: 100%" />
                 <div style="padding: 14px">
-                    <el-skeleton-item variant="h3" style="width: 50%"/>
+                    <el-skeleton-item variant="h3" style="width: 50%" />
                     <div style="
               display: flex;
               align-items: center;
@@ -122,8 +97,8 @@
               margin-top: 16px;
               height: 16px;
             ">
-                        <el-skeleton-item variant="text" style="margin-right: 16px"/>
+                        <el-skeleton-item variant="text" style="margin-right: 16px" />
-                        <el-skeleton-item variant="text" style="width: 30%"/>
+                        <el-skeleton-item variant="text" style="width: 30%" />
                     </div>
                 </div>
             </template>
@@ -172,7 +147,7 @@
                     </div>
 
                     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-                                :limit.sync="queryParams.pageSize" @pagination="getList"/>
+                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                 </template>
                 <el-empty description="暂无数据" v-else></el-empty>
             </template>
@@ -190,13 +165,13 @@ import {
     totalData,
 } from "@/api/order/order";
 import Template from "@/views/billing/template";
-import {getStationListByMerchantId, getStationSelectList, listStation} from "@/api/pile/station";
+import { getStationListByMerchantId, getStationSelectList, listStation } from "@/api/pile/station";
-import {getDay} from "@/utils/common";
+import { getDay } from "@/utils/common";
-import {getMerchantList} from "@/api/pile/merchant";
+import { getMerchantList } from "@/api/pile/merchant";
 
 export default {
     name: "Order",
-    components: {Template},
+    components: { Template },
 
     dicts: ["order_status", "start_mode", "pay_mode", "pay_status"],
     data() {
@@ -509,7 +484,7 @@ export default {
                 });
         },
         /** 订单详情序号 */
-        rowOrderDetailIndex({row, rowIndex}) {
+        rowOrderDetailIndex({ row, rowIndex }) {
             row.index = rowIndex + 1;
         },
         /** 订单详情添加按钮操作 */