From d27e40602cf35dd3a97608d18305efbc3de62cae Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Mon, 19 Apr 2021 17:21:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BA=97=E9=93=BA=E7=9A=84?=
 =?UTF-8?q?=E5=85=B3=E9=94=AE=E5=AD=97=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts     |  2 +-
 src/views/shop/list.vue | 37 +++++++++++++++++++++++++++++++------
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index f15ef11..1848dd0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -119,7 +119,7 @@ export const constantRoutes: RouteConfig[] = [
 export const asyncRoutes: RouteConfig[] = [
   systemRoutes,
   shopRoutes,
-  articleRouters,
+  // articleRouters,
   marketingRoutes,
   questionRoutes,
   {
diff --git a/src/views/shop/list.vue b/src/views/shop/list.vue
index 835fccf..cc9ab07 100644
--- a/src/views/shop/list.vue
+++ b/src/views/shop/list.vue
@@ -1,5 +1,16 @@
 <template>
   <div class="app-container">
+    <!-- filter -->
+    <el-form ref="filterForm" :inline="true" :model="filterForm" class="filter">
+      <el-form-item label="关键字" prop="key">
+        <el-input v-model="filterForm.key" placeholder="关键字"/>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="search">查询</el-button>
+        <el-button @click="resetFilterForm">重置</el-button>
+      </el-form-item>
+    </el-form>
     <router-link to="/shop/create">
       <el-button
           type="primary"
@@ -16,7 +27,6 @@
         highlight-current-row
         style="width: 100%;margin-top:30px;"
     >
-
       <el-table-column
           width="180px"
           align="center"
@@ -103,7 +113,11 @@ export default class extends Vue {
   private listLoading = true
   private listQuery = {
     page: 1,
-    limit: 20
+    limit: 20,
+    key: ''
+  }
+  private filterForm = {
+    key: ''
   }
 
   created() {
@@ -113,12 +127,9 @@ export default class extends Vue {
   private async getList() {
     this.listLoading = true
     const { data } = await getShops(this.listQuery)
+    this.listLoading = false
     this.list = data.records
     this.total = data.total
-    // Just to simulate the time of the request
-    setTimeout(() => {
-      this.listLoading = false
-    }, 0.5 * 1000)
   }
   private handleDelete(scope: any) {
     const { $index, row } = scope
@@ -138,6 +149,20 @@ export default class extends Vue {
         })
         .catch(err => { console.error(err) })
   }
+  private search() {
+    this.tableData = this.filterData()
+    this.currentPage = 1
+  }
+
+  private filterData() {
+    this.listQuery.key = this.filterForm.key
+    this.listQuery.page = 1
+    this.getList()
+  }
+
+  private resetFilterForm() {
+    this.$refs.filterForm.resetFields()
+  }
 }
 </script>