增加店铺的关键字查询

src/router/index.ts

@@ -119,7 +119,7 @@ export const constantRoutes: RouteConfig[] = [
 export const asyncRoutes: RouteConfig[] = [
   systemRoutes,
   shopRoutes,
-  articleRouters,
+  // articleRouters,
   marketingRoutes,
   questionRoutes,
   {

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>