【类 型】：refactor

【主	题】：完善订单列表页
【描	述】：
	[原因]：
	[过程]：1.添加防抖 访问接口 不在表单失焦时立马访问 2.获取列表在视图表格显示
	[影响]：
【结	束】

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

package-lock.json

@@ -28,6 +28,7 @@
         "eslint-plugin-promise": "^4.2.1",
         "eslint-plugin-standard": "^4.0.0",
         "eslint-plugin-vue": "^6.2.2",
+        "lodash": "^4.17.21",
         "mapbox-gl": "^2.15.0",
         "mqtt": "^2.18.9",
         "normalize.css": "^8.0.1",

package.json

@@ -29,6 +29,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^6.2.2",
+    "lodash": "^4.17.21",
     "mapbox-gl": "^2.15.0",
     "mqtt": "^2.18.9",
     "normalize.css": "^8.0.1",

src/views/layout/components/main/order/index.vue

@@ -24,7 +24,7 @@
       </el-col>
     </el-row>
     <!-- 订单列表 -->
-    <!-- <el-table class="m-t-20 w-100" ref="myTable"
+    <el-table class="m-t-20 w-100" ref="myTable"
       :data="orderList.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
       <el-table-column align="center" type="selection" width="40">
       </el-table-column>
@@ -38,9 +38,9 @@
         <template slot-scope="scope">
           {{ scope.row.addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
         </template>
-</el-table-column>
-<el-table-column prop="controler" label="操作" width="380" min-width="380">
-  <template slot-scope="scope">
+      </el-table-column>
+      <el-table-column prop="controler" label="操作" width="380" min-width="380">
+        <template slot-scope="scope">
           <el-button-group>
             <el-button type="warning" icon="el-icon-edit">同意退款</el-button>
             <el-button type="danger" icon="el-icon-delete" @click="deleteAdmin([scope.row.id])">拒绝退款</el-button>
@@ -48,12 +48,12 @@
               @click="$router.replace(`/order/show/${scope.row.id}`)">查看</el-button>
           </el-button-group>
         </template>
-</el-table-column>
-</el-table> -->
+      </el-table-column>
+    </el-table>
     <!-- 分页 -->
-    <!-- <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
+    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
       :total="orderList.length">
-    </el-pagination> -->
+    </el-pagination>
   </div>
 </template>
 
@@ -67,6 +67,7 @@ import SelectionShipmentStatus from '@/components/SelectionShipmentStatus'
 import SelectionRefundStatus from '@/components/SelectionRefundStatus'
 import DatePickerOrder from '@/components/DatePickerOrder'
 import SearchOrder from '@/components/SearchOrder'
+import { debounce } from 'lodash'// 防抖
 
 export default {
   name: 'Order',
@@ -74,7 +75,8 @@ export default {
     return {
       pageSize: 50, // 每页显示记录条数
       currentPage: 1, // 当前页
-      shop_id: this.$store.state.user.shop_id // 搜索条件 商铺id
+      shop_id: this.$store.state.user.shop_id, // 搜索条件 商铺id
+      orderList: []// 订单列表
     }
   },
   components: {
@@ -86,12 +88,6 @@ export default {
     SearchOrder
   },
   computed: {
-    /**
-     * @description: 订单列表
-     */
-    orderList () {
-      return []
-    },
     /**
      * @description: 搜索条件 集合
      */
@@ -106,15 +102,25 @@ export default {
      */
     async getOrderList (orderSerch) {
       const res = await getOrderList(orderSerch)
-      console.log(res)
-    }
+      this.orderList = res.data.orderList
+      console.log(res.data.orderList)
+    },
+    /**
+     * @description: 表单提交 加入防抖
+     */
+    debouncedGetOrderList: debounce(function (val) {
+      this.getOrderList(val)
+    }, 500)
   },
   watch: {
     shop_id (val) {
       this.$store.commit('app/setOrderSerch', { shop_id: val })
     },
-    orderSerch (val) {
-      this.getOrderList(val)
+    orderSerch: {
+      handler (val) {
+        this.debouncedGetOrderList(val)// 表单提交 加入防抖
+      },
+      deep: true
     }
   },
   created () {