link site to spider

frontend/src/components/InfoView/SpiderInfoView.vue

@@ -23,6 +23,14 @@
           <el-input v-model="spiderForm.col" :placeholder="$t('Results Collection')"
                     :disabled="isView"></el-input>
         </el-form-item>
+        <el-form-item :label="$t('Site')">
+          <el-autocomplete v-model="spiderForm.site"
+                           :placeholder="$t('Site')"
+                           :fetch-suggestions="fetchSiteSuggestions"
+                           clearable
+                           @select="onSiteSelect">
+          </el-autocomplete>
+        </el-form-item>
         <el-form-item :label="$t('Spider Type')">
           <el-select v-model="spiderForm.type" :placeholder="$t('Spider Type')" :disabled="isView" clearable>
             <el-option value="scrapy" label="Scrapy"></el-option>
@@ -152,6 +160,22 @@ export default {
             })
         }
       })
+    },
+    fetchSiteSuggestions (keyword, callback) {
+      this.$request.get('/sites', {
+        keyword: keyword,
+        page_num: 1,
+        page_size: 100
+      }).then(response => {
+        const data = response.data.items.map(d => {
+          d.value = `${d.name} | ${d.domain}`
+          return d
+        })
+        callback(data)
+      })
+    },
+    onSiteSelect (item) {
+      this.spiderForm.site = item._id
     }
   }
 }
@@ -167,4 +191,8 @@ export default {
     width: 100%;
     text-align: right;
   }
+
+  .el-autocomplete {
+    width: 100%;
+  }
 </style>

frontend/src/store/modules/site.js

@@ -1,7 +1,7 @@
 import request from '../../api/request'
 
 const state = {
-  tableData: [],
+  siteList: [],
 
   // filter
   filter: {
@@ -21,8 +21,8 @@ const mutations = {
   SET_KEYWORD (state, value) {
     state.keyword = value
   },
-  SET_TABLE_DATA (state, value) {
-    state.tableData = value
+  SET_SITE_LIST (state, value) {
+    state.siteList = value
   },
   SET_PAGE_NUM (state, value) {
     state.pageNum = value
@@ -52,7 +52,7 @@ const actions = {
       }
     })
       .then(response => {
-        commit('SET_TABLE_DATA', response.data.items)
+        commit('SET_SITE_LIST', response.data.items)
         commit('SET_TOTAL_COUNT', response.data.total_count)
       })
   }

frontend/src/store/modules/spider.js

@@ -74,7 +74,8 @@ const actions = {
       lang: state.spiderForm.lang,
       col: state.spiderForm.col,
       cron: state.spiderForm.cron,
-      cron_enabled: state.spiderForm.cron_enabled ? 1 : 0
+      cron_enabled: state.spiderForm.cron_enabled ? 1 : 0,
+      site: state.spiderForm.site
     })
       .then(() => {
         dispatch('getSpiderList')
@@ -89,7 +90,8 @@ const actions = {
       lang: state.spiderForm.lang,
       col: state.spiderForm.col,
       cron: state.spiderForm.cron,
-      cron_enabled: state.spiderForm.cron_enabled ? 1 : 0
+      cron_enabled: state.spiderForm.cron_enabled ? 1 : 0,
+      site: state.spiderForm.site
     })
       .then(() => {
         dispatch('getSpiderList')

frontend/src/views/site/SiteList.vue

@@ -19,7 +19,7 @@
     </div>
 
     <!--table list-->
-    <el-table :data="tableData"
+    <el-table :data="siteList"
               class="table"
               :header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
               border>
@@ -109,7 +109,7 @@ export default {
   computed: {
     ...mapState('site', [
       'filter',
-      'tableData',
+      'siteList',
       'totalCount'
     ]),
     keyword: {