1.优化订单统计数据

src/views/course/courseQuestionBank/index.vue

@@ -118,7 +118,7 @@
           icon="el-icon-upload2"
           size="mini"
           @click="handleImport"
-          v-hasPermi="['course:courseQuestionBank:import']"
+          v-hasPermi="['course:courseQuestionBank:importData']"
         >导入</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

src/views/store/statistics/orderstatatic.vue

@@ -62,105 +62,155 @@
     <el-dialog
       title="订单详情"
       :visible.sync="detailModalVisible"
-      width="80%"
-      z-index = "999"
-      size="75%"
+      width="85%"
+      top="5vh"
+      class="clean-dialog"
     >
-
-      <div>
-        <el-table style="height: 680px" v-loading="detailLoading" :data="orderDetails" border>
-          <el-table-column label="订单号" align="center" prop="orderCode" width="200px" />
-          <el-table-column label="所属公司" align="center" prop="companyName" />
-          <el-table-column label="所属员工" align="center" prop="companyUserNickName" />
-          <el-table-column label="用户昵称" align="center" prop="nickname" width="150px" >
-            <template slot-scope="scope">
-              <span>{{scope.row.nickname}} </span>
-            </template>
-          </el-table-column>
-          <el-table-column label="收件人" align="center" prop="realName" width="150px" >
-            <template slot-scope="scope">
-              <span>{{scope.row.realName}} </span>
-            </template>
-          </el-table-column>
-          <!-- <el-table-column label="商品" align="center" width="300px" >
-              <template slot-scope="scope">
-                  <div  v-for="(item, index) in scope.row.items" class="items"  >
-                      <img class="pic" :src="JSON.parse(item.jsonInfo).image" />
-                      <div class="goods-content">
-                      <div class="goods-title">{{ JSON.parse(item.jsonInfo).productName}}</div>
-                      <div class="sku">{{ JSON.parse(item.jsonInfo).sku}}</div>
-                      <div class="price">￥{{JSON.parse(item.jsonInfo).price}}×{{item.num}}</div>
-                      </div>
-
-                  </div>
-              </template>
-          </el-table-column> -->
-          <el-table-column label="订单金额" align="center" prop="totalPrice" >
-            <template slot-scope="scope">
-              <span v-if="scope.row.totalPrice!=null">{{scope.row.totalPrice.toFixed(2)}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="应付金额" align="center" prop="payPrice" >
-            <template slot-scope="scope">
-              <span v-if="scope.row.payPrice!=null">{{scope.row.payPrice.toFixed(2)}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="下单时间" align="center" prop="createTime" />
-          <!-- <el-table-column label="支付状态" align="center" prop="paid" /> -->
-          <el-table-column label="支付时间" align="center" prop="payTime" width="180">
-          </el-table-column>
-          <el-table-column label="支付方式" align="center" prop="payType" >
+      <div class="clean-container">
+        <el-table
+          :data="orderDetails"
+          border
+          style="width: 100%"
+          v-loading="detailLoading"
+          height="70vh"
+          class="clean-table"
+        >
+          <el-table-column
+            label="订单号"
+            align="center"
+            prop="orderCode"
+            width="180"
+            header-align="center"
+          />
+          <el-table-column
+            label="所属公司"
+            align="center"
+            prop="companyName"
+            header-align="center"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="用户/收件人"
+            align="center"
+            header-align="center"
+            width="150"
+          >
             <template slot-scope="scope">
-              <el-tag prop="payType" v-for="(item, index) in payTypeOptions"    v-if="scope.row.payType==item.dictValue">{{item.dictLabel}}</el-tag>
+              <div class="compact-cell">
+                <div>{{ scope.row.nickname || '-' }}</div>
+                <div class="secondary-text">{{ scope.row.realName || '-' }}</div>
+              </div>
             </template>
           </el-table-column>
-          <el-table-column label="订单类型" align="center" prop="orderType" >
+          <el-table-column
+            label="金额(元)"
+            align="center"
+            header-align="center"
+            width="150"
+          >
             <template slot-scope="scope">
-              <el-tag prop="status" v-for="(item, index) in orderTypeOptions"    v-if="scope.row.orderType==item.dictValue">{{item.dictLabel}}</el-tag>
+              <div class="compact-cell">
+                <div>总价: {{ scope.row.totalPrice ? scope.row.totalPrice.toFixed(2) : '0.00' }}</div>
+                <div>实付: {{ scope.row.payPrice ? scope.row.payPrice.toFixed(2) : '0.00' }}</div>
+              </div>
             </template>
           </el-table-column>
-          <el-table-column label="状态" align="center" prop="status" >
+          <el-table-column
+            label="时间"
+            align="center"
+            header-align="center"
+            width="220"
+          >
             <template slot-scope="scope">
-              <el-tag prop="status" v-for="(item, index) in statusOptions"    v-if="scope.row.status==item.dictValue">{{item.dictLabel}}</el-tag>
+              <div class="compact-cell">
+                <div>{{ scope.row.createTime }}</div>
+                <div class="secondary-text">{{ scope.row.payTime || '未支付' }}</div>
+              </div>
             </template>
           </el-table-column>
-          <el-table-column label="物流状态" align="center" prop="deliveryStatus" >
+          <el-table-column
+            label="支付/类型"
+            align="center"
+            header-align="center"
+            width="150"
+          >
             <template slot-scope="scope">
-              <el-tag prop="status" v-for="(item, index) in deliveryStatusOptions"    v-if="scope.row.deliveryStatus==item.dictValue">{{item.dictLabel}}</el-tag>
+              <div class="compact-cell">
+                <el-tag
+                  size="small"
+                  style="display:block;margin:0 auto 4px;width:fit-content"
+                  v-for="item in payTypeOptions"
+                  v-if="scope.row.payType==item.dictValue"
+                >{{item.dictLabel}}</el-tag>
+                <el-tag
+                  size="small"
+                  style="display:block;margin:0 auto;width:fit-content"
+                  v-for="item in orderTypeOptions"
+                  v-if="scope.row.orderType==item.dictValue"
+                >{{item.dictLabel}}</el-tag>
+              </div>
             </template>
           </el-table-column>
-          <el-table-column label="物流结算状态" align="center" prop="deliveryPayStatus" >
+          <el-table-column
+            label="状态"
+            align="center"
+            header-align="center"
+            width="150"
+          >
             <template slot-scope="scope">
-              <el-tag prop="status" v-for="(item, index) in deliveryPayStatusOptions"    v-if="scope.row.deliveryPayStatus==item.dictValue">{{item.dictLabel}}</el-tag>
+              <div class="compact-cell">
+                <el-tag
+                  size="small"
+                  style="display:block;margin:0 auto 4px;width:fit-content"
+                  v-for="item in statusOptions"
+                  v-if="scope.row.status==item.dictValue"
+                >{{item.dictLabel}}</el-tag>
+                <el-tag
+                  size="small"
+                  style="display:block;margin:0 auto;width:fit-content"
+                  v-for="item in deliveryStatusOptions"
+                  v-if="scope.row.deliveryStatus==item.dictValue"
+                >{{item.dictLabel}}</el-tag>
+              </div>
             </template>
           </el-table-column>
-          <el-table-column label="操作" fixed="right" width="80px" align="center" class-name="small-padding fixed-width">
+          <el-table-column
+            label="操作"
+            fixed="right"
+            width="90"
+            align="center"
+            header-align="center"
+          >
             <template slot-scope="scope">
               <el-button
                 size="mini"
                 type="text"
+                style="color:#409EFF;padding:5px 0"
                 @click="handleDetails(scope.row)"
                 v-hasPermi="['store:storeOrder:query']"
-              >查看</el-button>
+              >详情</el-button>
             </template>
           </el-table-column>
         </el-table>
-        <pagination
-          v-show="pagination.total>0"
-          :total="pagination.total"
-          :page.sync="pagination.currentPage"
-          :limit.sync="pagination.pageSize"
-          @pagination="fetchOrderDetails"
-        />
-        <el-drawer
-          z-index = "999"
-          size="75%"
-          :title="show.title" :visible.sync="show.open"
-        >
-          <product-order  ref="order" />
-        </el-drawer>
+
+        <div style="margin-top:15px;text-align:center">
+          <pagination
+            v-show="pagination.total>0"
+            :total="pagination.total"
+            :page.sync="pagination.currentPage"
+            :limit.sync="pagination.pageSize"
+            @pagination="fetchOrderDetails"
+          />
+        </div>
       </div>
 
+      <el-drawer
+        :title="show.title"
+        :visible.sync="show.open"
+        size="65%"
+      >
+        <product-order ref="order" />
+      </el-drawer>
     </el-dialog>
   </div>
 </template>
@@ -348,8 +398,7 @@ export default {
       this.detailLoading = true;
       try {
         const params = {
-          beginTime: this.formatDate(this.dateRange[0], 'yyyy-MM-dd'),
-          endTime: this.formatDate(this.dateRange[1], 'yyyy-MM-dd'),
+          createTimeRange: this.formatDate(this.dateRange[0], 'yyyy-MM-dd')+"--"+this.formatDate(this.dateRange[1], 'yyyy-MM-dd'),
           pageNum: this.pagination.currentPage,
           pageSize: this.pagination.pageSize,
           paid:1
@@ -418,10 +467,6 @@ export default {
   margin-bottom: 10px;
 }
 
-.statistic-compare {
-  font-size: 12px;
-  color: #666;
-}
 
 .statistic-compare .up {
   color: #f56c6c;
@@ -432,9 +477,18 @@ export default {
   color: #67c23a;
   margin-left: 5px;
 }
-
-.pagination-container {
-  margin-top: 20px;
-  text-align: right;
+.clean-dialog {
+  border-radius: 8px;
+}
+.clean-table .el-table__header th {
+  background-color: #f8f8f9;
+}
+.compact-cell {
+  padding: 4px 0;
+  line-height: 1.4;
+}
+.secondary-text {
+  color: #909399;
+  font-size: 0.9em;
 }
 </style>