feat：列表页新增搜索功能 (#46)

web/src/management/api/survey.js

@@ -1,10 +1,11 @@
 import axios from './base';
 
-export const getSurveyList = (curPage) => {
+export const getSurveyList = (curPage, filter) => {
   return axios.get('/surveyManage/list', {
     params: {
       pageSize: 10,
       curPage,
+      filter,
     },
   });
 };

web/src/management/pages/list/components/baseList.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="tableview-root">
+    <div class="filter-wrap">
+      <div class="search">
+        <text-search 
+          placeholder="请输入问卷标题"
+          :value="searchVal" 
+          @search="onSearchText" />
+      </div>
+    </div>
     <el-table
       v-if="total"
       ref="multipleListTable"
@@ -59,7 +67,7 @@
     </div>
 
     <div v-else>
-      <empty :data="noListDataConfig" />
+      <empty :data="!searchVal? noListDataConfig : noSearchDataConfig" />
     </div>
 
     <modify-dialog
@@ -83,7 +91,8 @@ import ModifyDialog from './modify';
 import Tag from './tag';
 import State from './state';
 import ToolBar from './toolBar';
-import { fieldConfig, thead, noListDataConfig } from '../config';
+import TextSearch from './textSearch'
+import { fieldConfig, thead, noListDataConfig, noSearchDataConfig } from '../config';
 import { CODE_MAP } from '@/management/api/base';
 import { QOP_MAP } from '@/management/utils/constant';
 import { getSurveyList, deleteSurvey } from '@/management/api/survey';
@@ -98,10 +107,12 @@ export default {
       loading: false,
       theadDict: thead,
       noListDataConfig,
+      noSearchDataConfig,
       questionInfo: {},
       total: 0,
       data: [],
       currentPage: 1,
+      searchVal: ''
     };
   },
   computed: {
@@ -111,6 +122,18 @@ export default {
       });
       return fieldInfo;
     },
+    filter() {
+      return [
+        {
+          comparator:"",
+          condition:[{
+            "field":"title",
+            "value":this.searchVal,
+            "comparator":"$regex"
+          }]
+        }
+      ]
+    }
   },
   created() {
     this.init();
@@ -119,7 +142,8 @@ export default {
     async init() {
       this.loading = true;
       try {
-        const res = await getSurveyList(this.currentPage);
+        const filter = JSON.stringify(this.filter)
+        const res = await getSurveyList(this.currentPage, filter);
         this.loading = false;
         if (res.code === CODE_MAP.SUCCESS) {
           this.total = res.data.count;
@@ -219,12 +243,18 @@ export default {
         },
       });
     },
+    onSearchText(e) { 
+      this.searchVal = e
+      this.currentPage = 1
+      this.init()
+    }
   },
   components: {
     empty,
     ModifyDialog,
     Tag,
     ToolBar,
+    TextSearch,
     State,
   },
 };
@@ -232,6 +262,14 @@ export default {
 
 <style lang="scss" rel="stylesheet/scss" scoped>
 .tableview-root {
+  .filter-wrap{
+    display: flex;
+    justify-content: right;
+    .search{
+      padding-bottom: 20px;
+    }
+  }
+  
   .list-table {
     min-height: 620px;
     padding: 10px 20px;

web/src/management/pages/list/components/textSearch.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="filter-input">
+      <input
+          :class="['text-search_root']"
+          v-model="curValue"
+          @keyup.enter="onSearch"
+          autocomplete="off"
+          :placeholder="placeholder"
+          type="text"
+          rows="1"
+          class="el-input__inner"
+      />
+      <i class="el-icon-search el-input__icon" @click="onSearch"></i>
+  </div>
+</template>
+<script>
+export default {
+name: 'TextSearch',
+props: {
+  value: String,
+  placeholder: String
+},
+data() {
+  return {
+    curValue: this.value,
+  }
+},
+watch: {
+  value(val) {
+    this.curValue = val
+  },
+},
+methods: {
+  onSearch() {
+    this.$emit('search', this.curValue)
+  },
+},
+}
+</script>
+<style lang="scss" rel="stylesheet/scss">
+// @import '@didi/question-common/assets/css/variable';
+      .filter-input {
+          position: relative;
+          width: 200px;
+      .el-input__inner {
+          height: 32px;
+          line-height: 32px;
+          padding: 0 25px;
+          font-size: 12px;
+          background: #FFFFFF;
+          border: 1px solid $border-color;
+          border-radius: 18px;
+          &:focus {
+              border-color: $primary-color;
+          }
+      }
+      .el-icon-search {
+          position: absolute;
+          line-height: 32px;
+          right: 10px;
+          color: #7E7F8A;
+          cursor: pointer;
+          &:hover {
+              color:$primary-color;
+          }
+      }
+  }
+</style>

web/src/management/pages/list/config/index.js

@@ -59,6 +59,12 @@ export const noListDataConfig = {
   img: '/imgs/icons/list-empty.png',
 };
 
+export const noSearchDataConfig = {
+  title: '没有满足该查询条件的问卷哦',
+  desc: '可以更换条件查询试试',
+  img: '/imgs/icons/list-empty.png',
+};
+
 export const statusMaps = {
   new: '未发布',
   editing: '修改中',

web/src/management/pages/list/index.vue

@@ -79,6 +79,7 @@ export default {
   }
 
   .list-content {
+    height: calc(100% - 56px);
     padding: 20px;
 
     .top {