爬虫列表

frontend/package.json

@@ -3,7 +3,7 @@
   "version": "0.2.3",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --ip=0.0.0.0",
+    "serve": "vue-cli-service serve --ip=0.0.0.0 --mode=development",
     "serve:prod": "vue-cli-service serve --mode=production --ip=0.0.0.0",
     "config": "vue ui",
     "build:dev": "vue-cli-service build --mode development",

frontend/src/store/modules/spider.js

@@ -4,6 +4,8 @@ const state = {
   // list of spiders
   spiderList: [],
 
+  spiderTotal: 0,
+
   // active spider data
   spiderForm: {},
 
@@ -38,6 +40,9 @@ const state = {
 const getters = {}
 
 const mutations = {
+  SET_SPIDER_TOTAL (state, value) {
+    state.spiderTotal = value
+  },
   SET_SPIDER_FORM (state, value) {
     state.spiderForm = value
   },
@@ -71,14 +76,11 @@ const mutations = {
 }
 
 const actions = {
-  getSpiderList ({ state, commit }) {
-    let params = {}
-    if (state.filterSite) {
-      params.site = state.filterSite
-    }
+  getSpiderList ({ state, commit }, params = {}) {
     return request.get('/spiders', params)
       .then(response => {
-        commit('SET_SPIDER_LIST', response.data.data)
+        commit('SET_SPIDER_LIST', response.data.data.list)
+        commit('SET_SPIDER_TOTAL', response.data.data.total)
       })
   },
   editSpider ({ state, dispatch }) {

frontend/src/views/spider/SpiderList.vue

@@ -108,19 +108,10 @@
     <el-card style="border-radius: 0">
       <!--filter-->
       <div class="filter">
-        <!--<el-input prefix-icon="el-icon-search"-->
-        <!--:placeholder="$t('Search')"-->
-        <!--class="filter-search"-->
-        <!--v-model="filter.keyword"-->
-        <!--@change="onSearch">-->
-        <!--</el-input>-->
         <div class="left">
-          <el-autocomplete size="small" v-model="filterSite"
-                           :placeholder="$t('Site')"
-                           clearable
-                           :fetch-suggestions="fetchSiteSuggestions"
-                           @select="onSiteSelect">
-          </el-autocomplete>
+          <el-input @keyup.enter.native="onSearch" size="small" placeholder="名称" v-model="filter.keyword">
+            <i slot="suffix" class="el-input__icon el-icon-search"></i>
+          </el-input>
         </div>
         <div class="right">
           <el-button size="small" v-if="false" type="primary" icon="fa fa-download" @click="openImportDialog">
@@ -143,7 +134,7 @@
       <!--./filter-->
 
       <!--table list-->
-      <el-table :data="filteredTableData"
+      <el-table :data="spiderList"
                 class="table"
                 :header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
                 border
@@ -226,13 +217,13 @@
       </el-table>
       <div class="pagination">
         <el-pagination
-          @current-change="onPageChange"
-          @size-change="onPageChange"
+          @current-change="onPageNumChange"
+          @size-change="onPageSizeChange"
           :current-page.sync="pagination.pageNum"
           :page-sizes="[10, 20, 50, 100]"
           :page-size.sync="pagination.pageSize"
           layout="sizes, prev, pager, next"
-          :total="spiderList.length">
+          :total="spiderTotal">
         </el-pagination>
       </div>
       <!--./table list-->
@@ -258,7 +249,7 @@ export default {
   data () {
     return {
       pagination: {
-        pageNum: 0,
+        pageNum: 1,
         pageSize: 10
       },
       importLoading: false,
@@ -284,8 +275,6 @@ export default {
         { name: 'create_ts', label: 'Create Time', width: '140' },
         { name: 'update_ts', label: 'Update Time', width: '140' },
         { name: 'remark', label: 'Remark', width: '140' }
-        // { name: 'last_7d_tasks', label: 'Last 7-Day Tasks', width: '80' },
-        // { name: 'last_5_errors', label: 'Last 5-Run Errors', width: '80' }
       ],
       spiderFormRules: {
         name: [{ required: true, message: 'Required Field', trigger: 'change' }]
@@ -297,45 +286,24 @@ export default {
     ...mapState('spider', [
       'importForm',
       'spiderList',
-      'spiderForm'
+      'spiderForm',
+      'spiderTotal'
     ]),
     ...mapGetters('user', [
       'token'
-    ]),
-    filteredTableData () {
-      return this.spiderList
-        .filter(d => {
-          if (this.filterSite) {
-            return d.site === this.filterSite
-          }
-          return true
-        })
-        .filter((d, index) => {
-          return (this.pagination.pageSize * (this.pagination.pageNum - 1)) <= index && (index < this.pagination.pageSize * this.pagination.pageNum)
-        })
-      // .filter(d => {
-      //   if (!this.filter.keyword) return true
-      //   for (let i = 0; i < this.columns.length; i++) {
-      //     const colName = this.columns[i].name
-      //     if (d[colName] && d[colName].toLowerCase().indexOf(this.filter.keyword.toLowerCase()) > -1) {
-      //       return true
-      //     }
-      //   }
-      //   return false
-      // })
-    },
-    filterSite: {
-      get () {
-        return this.$store.state.spider.filterSite
-      },
-      set (value) {
-        this.$store.commit('spider/SET_FILTER_SITE', value)
-      }
-    }
+    ])
   },
   methods: {
-    onSearch (value) {
-      console.log(value)
+    onPageSizeChange (val) {
+      this.pagination.pageSize = val
+      this.getList()
+    },
+    onPageNumChange (val) {
+      this.pagination.pageNum = val
+      this.getList()
+    },
+    onSearch () {
+      this.getList()
     },
     onAdd () {
       // this.addDialogVisible = true
@@ -353,7 +321,7 @@ export default {
       this.$st.sendEv('爬虫', '添加爬虫-自定义爬虫')
     },
     onRefresh () {
-      this.$store.dispatch('spider/getSpiderList')
+      this.getList()
       this.$st.sendEv('爬虫', '刷新')
     },
     onSubmit () {
@@ -376,9 +344,6 @@ export default {
       this.$store.commit('spider/SET_SPIDER_FORM', {})
       this.dialogVisible = false
     },
-    onAddCancel () {
-      this.addDialogVisible = false
-    },
     onDialogClose () {
       this.$store.commit('spider/SET_SPIDER_FORM', {})
       this.dialogVisible = false
@@ -422,9 +387,6 @@ export default {
       this.$router.push('/spiders/' + row._id)
       this.$st.sendEv('爬虫', '查看')
     },
-    onPageChange () {
-      this.$store.dispatch('spider/getSpiderList')
-    },
     onImport () {
       this.$refs.importForm.validate(valid => {
         if (valid) {
@@ -433,7 +395,7 @@ export default {
           this.$store.dispatch('spider/importGithub')
             .then(response => {
               this.$message.success('Import repo successfully')
-              this.$store.dispatch('spider/getSpiderList')
+              this.getList()
             })
             .catch(response => {
               this.$message.error(response.data.error)
@@ -501,7 +463,7 @@ export default {
 
       // fetch spider list
       setTimeout(() => {
-        this.$store.dispatch('spider/getSpiderList')
+        this.getList()
       }, 500)
 
       // close popup
@@ -515,6 +477,14 @@ export default {
       if (column.label !== this.$t('Action')) {
         this.onView(row)
       }
+    },
+    getList () {
+      let params = {
+        pageNum: this.pagination.pageNum,
+        pageSize: this.pagination.pageSize,
+        keyword: this.filter.keyword
+      }
+      this.$store.dispatch('spider/getSpiderList', params)
     }
   },
   created () {
@@ -522,7 +492,7 @@ export default {
     this.$store.commit('spider/SET_FILTER_SITE', this.$route.params.domain)
 
     // fetch spider list
-    this.$store.dispatch('spider/getSpiderList')
+    this.getList()
   },
   mounted () {
   }

frontend/src/views/task/TaskList.vue

@@ -4,28 +4,28 @@
       <!--filter-->
       <div class="filter">
         <div class="left">
-          <el-select size="small" class="filter-select"
-                     v-model="filter.node_id"
-                     :placeholder="$t('Node')"
-                     filterable
-                     clearable
-                     @change="onSelectNode">
-            <el-option v-for="op in nodeList" :key="op._id" :value="op._id" :label="op.name"></el-option>
-          </el-select>
-          <el-select size="small" class="filter-select"
-                     v-model="filter.spider_id"
-                     :placeholder="$t('Spider')"
-                     filterable
-                     clearable
-                     @change="onSelectSpider">
-            <el-option v-for="op in spiderList" :key="op._id" :value="op._id" :label="op.name"></el-option>
-          </el-select>
-          <el-button size="small" type="success"
-                     icon="el-icon-search"
-                     class="refresh"
-                     @click="onRefresh">
-            {{$t('Search')}}
-          </el-button>
+          <!--<el-select size="small" class="filter-select"-->
+                     <!--v-model="filter.node_id"-->
+                     <!--:placeholder="$t('Node')"-->
+                     <!--filterable-->
+                     <!--clearable-->
+                     <!--@change="onSelectNode">-->
+            <!--<el-option v-for="op in nodeList" :key="op._id" :value="op._id" :label="op.name"></el-option>-->
+          <!--</el-select>-->
+          <!--<el-select size="small" class="filter-select"-->
+                     <!--v-model="filter.spider_id"-->
+                     <!--:placeholder="$t('Spider')"-->
+                     <!--filterable-->
+                     <!--clearable-->
+                     <!--@change="onSelectSpider">-->
+            <!--<el-option v-for="op in spiderList" :key="op._id" :value="op._id" :label="op.name"></el-option>-->
+          <!--</el-select>-->
+          <!--<el-button size="small" type="success"-->
+                     <!--icon="el-icon-search"-->
+                     <!--class="refresh"-->
+                     <!--@click="onRefresh">-->
+            <!--{{$t('Search')}}-->
+          <!--</el-button>-->
         </div>
         <!--<div class="right">-->
         <!--</div>-->