站点id、充电时间排版调整

admin-web/src/views/admin/ordering/index.vue

@@ -97,14 +97,14 @@
             @on-change="loadData(true)"
             class="wd150 mr10">
         </ext-d-select>
-<!--        <ext-d-select-->
-<!--            v-model="state.formQuery.stopReason"-->
-<!--            placeholder="充电停止原因"-->
-<!--            clearable-->
-<!--            type="ChargeOrder.stopReason"-->
-<!--            @blur="loadData(true)"-->
-<!--            class="wd150 mr10">-->
-<!--        </ext-d-select>-->
+        <!--        <ext-d-select-->
+        <!--            v-model="state.formQuery.stopReason"-->
+        <!--            placeholder="充电停止原因"-->
+        <!--            clearable-->
+        <!--            type="ChargeOrder.stopReason"-->
+        <!--            @blur="loadData(true)"-->
+        <!--            class="wd150 mr10">-->
+        <!--        </ext-d-select>-->
         <ext-d-select
             v-model="state.formQuery.invoiceStatus"
             placeholder="发票状态"
@@ -115,7 +115,7 @@
         </ext-d-select>
 
 
-        <el-button class="ml10"  plain size="default" type="success" @click="loadData(true)">
+        <el-button class="ml10" plain size="default" type="success" @click="loadData(true)">
           <SvgIcon name="ele-Search"/>
           查询
         </el-button>
@@ -124,19 +124,19 @@
       <el-card class="w100">
         <div class="order-summary">
           <span>订单笔数:</span>
-          <el-tag type="success">{{state.extraData.totalOrders}} 笔</el-tag>
+          <el-tag type="success">{{ state.extraData.totalOrders }} 笔</el-tag>
           <span class="ml5">电量:</span>
-          <el-tag type="success">{{state.extraData.totalPower}} 度</el-tag>
+          <el-tag type="success">{{ state.extraData.totalPower }} 度</el-tag>
           <span class="ml5">订单金额:</span>
-          <el-tag type="success">{{u.fmt.fmtMoney(state.extraData.totalMoney)}} 元</el-tag>
+          <el-tag type="success">{{ u.fmt.fmtMoney(state.extraData.totalMoney) }} 元</el-tag>
           <span class="ml5"> 电费:</span>
-          <el-tag type="success">{{u.fmt.fmtMoney(state.extraData.elecMoney)}} 元</el-tag>
+          <el-tag type="success">{{ u.fmt.fmtMoney(state.extraData.elecMoney) }} 元</el-tag>
           <span class="ml5">服务费:</span>
-          <el-tag type="success">{{u.fmt.fmtMoney(state.extraData.serviceMoney)}} 元</el-tag>
+          <el-tag type="success">{{ u.fmt.fmtMoney(state.extraData.serviceMoney) }} 元</el-tag>
           <span class="ml5">服务费优惠:</span>
-          <el-tag type="success">{{u.fmt.fmtMoney(state.extraData.serviceMoneyDiscount)}} 元</el-tag>
+          <el-tag type="success">{{ u.fmt.fmtMoney(state.extraData.serviceMoneyDiscount) }} 元</el-tag>
           <span class="ml5">实付服务费:</span>
-          <el-tag type="success">{{u.fmt.fmtMoney(state.extraData.payServiceAmount)}} 元</el-tag>
+          <el-tag type="success">{{ u.fmt.fmtMoney(state.extraData.payServiceAmount) }} 元</el-tag>
         </div>
 
       </el-card>
@@ -159,6 +159,7 @@
             v-for="field in state.tableData.columns"
             :key="field.prop"
             :label="field.label"
+            :align="field.align||'left'"
             :column-key="field.prop"
             :width="field.width"
             :min-width="field.minWidth"
@@ -171,25 +172,25 @@
               <p style="padding-left: 2em;" v-html="row[field.prop]"></p>
             </template>
             <template v-else-if="'totalMoney'===field.prop">
-              {{u.fmt.fmtMoney(row[field.prop])}}
+              {{ u.fmt.fmtMoney(row[field.prop]) }}
             </template>
             <template v-else-if="'elecMoney'===field.prop">
-              {{u.fmt.fmtMoney(row[field.prop])}}
+              {{ u.fmt.fmtMoney(row[field.prop]) }}
             </template>
             <template v-else-if="'serviceMoney'===field.prop">
-              {{u.fmt.fmtMoney(row[field.prop])}}
+              {{ u.fmt.fmtMoney(row[field.prop]) }}
             </template>
             <template v-else-if="'payAmount'===field.prop">
-              {{u.fmt.fmtMoney(row[field.prop])}}
+              {{ u.fmt.fmtMoney(row[field.prop]) }}
             </template>
             <template v-else-if="'discountAmount'===field.prop">
-              {{u.fmt.fmtMoney(row[field.prop])}}
+              {{ u.fmt.fmtMoney(row[field.prop]) }}
             </template>
             <template v-else-if="'serviceMoneyDiscount'===field.prop">
-              {{u.fmt.fmtMoney(row[field.prop])}}
+              {{ u.fmt.fmtMoney(row[field.prop]) }}
             </template>
             <template v-else-if="'payServiceAmount'===field.prop">
-              {{u.fmt.fmtMoney(row[field.prop])}}
+              {{ u.fmt.fmtMoney(row[field.prop]) }}
             </template>
             <template v-else-if="'orderStatus'===field.prop">
               <ext-d-label type="ChargeOrder.orderStatus" v-model="row[field.prop]"/>
@@ -200,12 +201,31 @@
             <template v-else-if="'stopReason'===field.prop">
               <ext-d-label type="ChargeOrder.stopReason" v-model="row[field.prop]"/>
             </template>
-          <template v-else-if="'invoiceStatus'===field.prop">
+            <template v-else-if="'invoiceStatus'===field.prop">
               <ext-d-label type="ChargeOrder.invoiceStatus" v-model="row[field.prop]"/>
             </template>
+            <template v-else-if="'startTime'===field.prop">
+              <div title="充电开始时间">
+                {{ (row.startTime) }}
+              </div>
+              <hr>
+              <div title="充电结束时间">
+                {{ (row.endTime) }}
+              </div>
+            </template>
+
+            <template v-else-if="'stationId'===field.prop">
+              <div >
+                {{ (row.stationId) }}
+              </div>
+              <hr v-if="row.stationName">
+              <div >
+                {{ (row.stationName) }}
+              </div>
+            </template>
 
             <template v-else>
-              <div>{{row[field.prop]}}</div>
+              <div>{{ row[field.prop] }}</div>
             </template>
 
           </template>
@@ -215,12 +235,12 @@
       <ext-page class="page-pager" v-model:value="state.pageQuery" @change="loadData(false)"/>
     </el-card>
   </div>
-<!--  <ChargeOrderDialog ref="chargeOrderDialogRef" @refresh="loadData(true)"/>-->
+  <!--  <ChargeOrderDialog ref="chargeOrderDialogRef" @refresh="loadData(true)"/>-->
 </template>
 
 <script setup lang="ts" name="ChargeOrderList">
 import {defineAsyncComponent, reactive, onMounted, onBeforeMount, ref, getCurrentInstance, nextTick, onBeforeUnmount} from 'vue';
-import {$body,$get} from "/@/utils/request";
+import {$body, $get} from "/@/utils/request";
 import {Msg} from "/@/utils/message";
 import u from "/@/utils/u"
 
@@ -252,30 +272,30 @@ const state = reactive({
   },
   tableData: {
     height: 500,
-    data: [] as Array < any >,
+    data: [] as Array<any>,
     loading: false,
     columns: [
-      {label: '站点ID',  prop: 'stationId',width:100, resizable: true, fixed: 'left'},
-      {label: '用户手机号',  prop: 'mobilePhone',width:130, resizable: true, fixed: 'left'},
+      {label: '站点', prop: 'stationId', width: 150,align:'center', resizable: true, fixed: 'left'},
+      {label: '用户手机号', prop: 'mobilePhone', width: 130, resizable: true, fixed: 'left'},
       // {label: '站点ID',  prop: 'stationId',width:100, resizable: true, fixed: 'left'},
-      {label: '站点',  prop: 'stationName',width:150, resizable: true, fixed: 'left'},
-      {label: '充电订单号', prop: 'startChargeSeq', width:170, resizable: true, fixed: 'left'},
-      {label: '充电设备接口编码', prop: 'connectorId', width:160, resizable: true},
-      {label: '充电开始时间', prop: 'startTime', sortable: 'custom', width:160, resizable: true},
-      {label: '充电结束时间', prop: 'endTime', sortable: 'custom',width:160,  resizable: true},
-      {label: '充电量（度）', prop: 'totalPower', width:120, resizable: true},
-      {label: '订单总金额（元）', prop: 'totalMoney', width:150, resizable: true},
-      {label: '服务费优惠（元）', prop: 'serviceMoneyDiscount', width:150, resizable: true},
-      {label: '实付金额（元）', prop: 'payAmount', width:150, resizable: true},
-      {label: '总电费（元）', prop: 'elecMoney', width:140, resizable: true},
-      {label: '总服务费（元）', prop: 'serviceMoney', width:150, resizable: true},
-      {label: '实付服务费（元）', prop: 'payServiceAmount', width:150, resizable: true},
+      // {label: '站点', prop: 'stationName', width: 150, resizable: true, fixed: 'left'},
+      {label: '充电订单号', prop: 'startChargeSeq', width: 170, resizable: true, fixed: 'left'},
+      {label: '充电设备接口编码', prop: 'connectorId', width: 160, resizable: true},
+      {label: '充电开始时间', prop: 'startTime', sortable: 'custom', width: 160, resizable: true},
+      // {label: '充电结束时间', prop: 'endTime', sortable: 'custom', width: 160, resizable: true},
+      {label: '充电量（度）', prop: 'totalPower', width: 120, resizable: true},
+      {label: '订单总金额（元）', prop: 'totalMoney', width: 150, resizable: true},
+      {label: '服务费优惠（元）', prop: 'serviceMoneyDiscount', width: 150, resizable: true},
+      {label: '实付金额（元）', prop: 'payAmount', width: 150, resizable: true},
+      {label: '总电费（元）', prop: 'elecMoney', width: 140, resizable: true},
+      {label: '总服务费（元）', prop: 'serviceMoney', width: 150, resizable: true},
+      {label: '实付服务费（元）', prop: 'payServiceAmount', width: 150, resizable: true},
       // {label: '时段数：0~32', prop: 'sumPeriod', width:150, resizable: true},
       // {label: '充电明细信息', prop: 'chargeDetail', width:150, resizable: true},
-      {label: '订单状态', prop: 'orderStatus', width:120, resizable: true},
-      {label: '充电状态', prop: 'chargeStatus', width:120, resizable: true},
-      {label: '充电停止原因', prop: 'stopReason', width:150, resizable: true},
-      {label: '发票状态', prop: 'invoiceStatus', width:120, resizable: true},
+      {label: '订单状态', prop: 'orderStatus', width: 120, resizable: true},
+      {label: '充电状态', prop: 'chargeStatus', width: 120, resizable: true},
+      {label: '充电停止原因', prop: 'stopReason', width: 150, resizable: true},
+      {label: '发票状态', prop: 'invoiceStatus', width: 120, resizable: true},
       // {label: '创建时间', prop: 'createTime', sortable: 'custom', width:150, resizable: true},
       // {label: '更新时间', prop: 'updateTime', sortable: 'custom',width:150,  resizable: true},
       // {
@@ -284,12 +304,12 @@ const state = reactive({
     ],
 
   },
-  extraData:{
-    totalOrders:0,
-    totalPower:0,
-    elecMoney:0,
-    serviceMoney:0,
-    totalMoney:0,
+  extraData: {
+    totalOrders: 0,
+    totalPower: 0,
+    elecMoney: 0,
+    serviceMoney: 0,
+    totalMoney: 0,
   }
 })
 
@@ -309,7 +329,7 @@ onBeforeMount(() => {
 onMounted(() => {
   var query = route.query;
   console.log(route.params, route.query)
-  if(query.connectorId){
+  if (query.connectorId) {
     state.formQuery.connectorId = query.connectorId;
   }
 
@@ -344,7 +364,7 @@ const loadData = (refresh: boolean = false) => {
   }
   state.tableData.loading = true;
   $get(`/custom/listChargeOrders`, {...state.formQuery, ...state.pageQuery}).then((res: any) => {
-    let {list, total,extraData} = res;
+    let {list, total, extraData} = res;
     state.extraData = extraData;
     state.tableData.data = list;
     state.pageQuery.total = total;