完成可配置爬虫设置部分

frontend/src/components/Config/ConfigList.vue

@@ -177,7 +177,7 @@
                     :value="isList(stage)"
                     @change="onCheckIsList($event, stage)"
                   />
-                  <el-popover v-if="isList(stage)" placement="top">
+                  <el-popover v-model="stage.isListOpen" v-if="isList(stage)" placement="top">
                     <div>
                       <el-tag :class="stage.list_css ? 'active' : 'inactive'" type="success"
                               @click="onSelectStageListType(stage, 'css')">CSS
@@ -190,11 +190,24 @@
                       <el-input v-if="stage.list_css" v-model="stage.list_css"/>
                       <el-input v-else v-model="stage.list_xpath"/>
                     </div>
-                    <el-tag v-if="stage.list_css" type="success" slot="reference"
-                            @click="onClickStageList($event, stage, 'css')">CSS
+                    <el-tag
+                      v-if="stage.list_css"
+                      type="success"
+                      slot="reference"
+                      @click="onClickStageList($event, stage, 'css')"
+                    >
+                      <i v-if="!stage.isListOpen" class="el-icon-circle-plus-outline"></i>
+                      <i v-else class="el-icon-remove-outline"></i>
+                      CSS
                     </el-tag>
-                    <el-tag v-else type="primary" slot="reference"
-                            @click="onClickStageList($event, stage, 'xpath')">
+                    <el-tag
+                      v-else
+                      type="primary"
+                      slot="reference"
+                      @click="onClickStageList($event, stage, 'xpath')"
+                    >
+                      <i v-if="!stage.isListOpen" class="el-icon-circle-plus-outline"></i>
+                      <i v-else class="el-icon-remove-outline"></i>
                       XPath
                     </el-tag>
                   </el-popover>
@@ -208,8 +221,9 @@
                     style="text-align: left; flex-basis: 20px; margin-right: 5px"
                     :value="isPage(stage)"
                     @change="onCheckIsPage($event, stage)"
+                    :disabled="!isList(stage)"
                   />
-                  <el-popover v-if="isPage(stage)" placement="top">
+                  <el-popover v-model="stage.isPageOpen" v-if="isPage(stage)" placement="top">
                     <div>
                       <el-tag :class="stage.page_css ? 'active' : 'inactive'" type="success"
                               @click="onSelectStagePageType(stage, 'css')">CSS
@@ -222,11 +236,24 @@
                       <el-input v-if="stage.page_css" v-model="stage.page_css"/>
                       <el-input v-else v-model="stage.page_xpath"/>
                     </div>
-                    <el-tag v-if="stage.page_css" type="success" slot="reference"
-                            @click="onClickStagePage($event, stage, 'css')">CSS
+                    <el-tag
+                      v-if="stage.page_css"
+                      type="success"
+                      slot="reference"
+                      @click="onClickStagePage($event, stage, 'css')"
+                    >
+                      <i v-if="!stage.isPageOpen" class="el-icon-circle-plus-outline"></i>
+                      <i v-else class="el-icon-remove-outline"></i>
+                      CSS
                     </el-tag>
-                    <el-tag v-else type="primary" slot="reference"
-                            @click="onClickStagePage($event, stage, 'xpath')">
+                    <el-tag
+                      v-else
+                      type="primary"
+                      slot="reference"
+                      @click="onClickStagePage($event, stage, 'xpath')"
+                    >
+                      <i v-if="!stage.isPageOpen" class="el-icon-circle-plus-outline"></i>
+                      <i v-else class="el-icon-remove-outline"></i>
                       XPath
                     </el-tag>
                   </el-popover>
@@ -255,7 +282,7 @@
       <!--Setting-->
       <el-tab-pane name="settings" :label="$t('Settings')">
         <div class="actions" style="text-align: right;margin-bottom: 10px">
-          <el-button type="success" size="small">
+          <el-button type="success" size="small" @click="onSave">
             {{$t('Save')}}
           </el-button>
         </div>
@@ -522,6 +549,25 @@ export default {
     },
     onClickSelectorType (selectorType) {
       Object.values(this.spiderForm.config.stages).forEach(stage => {
+        // 列表
+        if (selectorType === 'css') {
+          if (stage.list_xpath) stage.list_xpath = ''
+          if (!stage.list_css) stage.list_css = 'body'
+        } else {
+          if (stage.list_css) stage.list_css = ''
+          if (!stage.list_xpath) stage.list_xpath = '//body'
+        }
+
+        // 分页
+        if (selectorType === 'css') {
+          if (stage.page_xpath) stage.page_xpath = ''
+          if (!stage.page_css) stage.page_css = 'body'
+        } else {
+          if (stage.page_css) stage.page_css = ''
+          if (!stage.page_xpath) stage.page_xpath = '//body'
+        }
+
+        // 字段
         stage.fields.forEach(field => {
           if (selectorType === 'css') {
             if (field.xpath) field.xpath = ''

frontend/src/components/TableView/FieldsTableView.vue

@@ -23,6 +23,7 @@
           <template slot-scope="scope">
             <el-input v-model="scope.row.name"
                       :placeholder="$t('Field Name')"
+                      suffix-icon="el-icon-edit"
                       @change="onNameChange(scope.row)"
             />
           </template>
@@ -50,10 +51,20 @@
         <el-table-column :label="$t('Selector')" width="200px">
           <template slot-scope="scope">
             <template v-if="scope.row.css">
-              <el-input v-model="scope.row.css" :placeholder="$t('CSS / XPath')"></el-input>
+              <el-input
+                v-model="scope.row.css"
+                :placeholder="$t('CSS / XPath')"
+                suffix-icon="el-icon-edit"
+              >
+              </el-input>
             </template>
             <template v-else>
-              <el-input v-model="scope.row.xpath" :placeholder="$t('CSS / XPath')"></el-input>
+              <el-input
+                v-model="scope.row.xpath"
+                :placeholder="$t('CSS / XPath')"
+                suffix-icon="el-icon-edit"
+              >
+              </el-input>
             </template>
           </template>
         </el-table-column>
@@ -80,7 +91,12 @@
         <el-table-column :label="$t('Attribute')" width="200px">
           <template slot-scope="scope">
             <template v-if="isShowAttr(scope.row)">
-              <el-input v-model="scope.row.attr" :placeholder="$t('Attribute')" @change="onAttrChange(scope.row)"/>
+              <el-input
+                v-model="scope.row.attr"
+                :placeholder="$t('Attribute')"
+                suffix-icon="el-icon-edit"
+                @change="onAttrChange(scope.row)"
+              />
             </template>
             <template v-else>
               <span style="margin-left: 15px; color: lightgrey">
@@ -103,7 +119,7 @@
         </el-table-column>
         <el-table-column :label="$t('Remark')" width="auto" min-width="120px">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.remark" :placeholder="$t('Remark')"/>
+            <el-input v-model="scope.row.remark" :placeholder="$t('Remark')" suffix-icon="el-icon-edit"/>
           </template>
         </el-table-column>
       </el-table>

frontend/src/components/TableView/SettingFieldsTableView.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="setting-list-table-view">
-    <!--    <el-row class="button-group-container">-->
-    <!--      <label class="title">{{$t(this.title)}}</label>-->
-    <!--      <div class="button-group">-->
-    <!--        <el-button type="primary" size="small" @click="addField" icon="el-icon-plus">{{$t('Add Field')}}</el-button>-->
-    <!--      </div>-->
-    <!--    </el-row>-->
     <el-row>
       <el-table :data="list"
                 class="table edit"
@@ -14,22 +8,24 @@
       >
         <el-table-column class-name="action" width="80px" align="right">
           <template slot-scope="scope">
-            <i class="action-item el-icon-copy-document" @click="onCopyField(scope.row)"></i>
+            <!--            <i class="action-item el-icon-copy-document" @click="onCopyField(scope.row)"></i>-->
             <i class="action-item el-icon-remove-outline" @click="onRemoveField(scope.row)"></i>
             <i class="action-item el-icon-circle-plus-outline" @click="onAddField(scope.row)"></i>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Name')" width="150px">
+        <el-table-column :label="$t('Name')" width="240px">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.name"
-                      :placeholder="$t('Name')"
-                      @change="onNameChange(scope.row)"
+            <el-input
+              v-model="scope.row.name"
+              :placeholder="$t('Name')"
+              suffix-icon="el-icon-edit"
+              @change="onNameChange(scope.row)"
             />
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Remark')" width="auto" min-width="120px">
+        <el-table-column :label="$t('Value')" width="auto" min-width="120px">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.remark" :placeholder="$t('Remark')"/>
+            <el-input v-model="scope.row.value" :placeholder="$t('Value')" suffix-icon="el-icon-edit"/>
           </template>
         </el-table-column>
       </el-table>
@@ -58,18 +54,22 @@ export default {
       default () {
         return []
       }
-    },
-    list: {
-      type: Array,
-      default () {
-        return []
-      }
     }
   },
   computed: {
     ...mapState('spider', [
       'spiderForm'
-    ])
+    ]),
+    list () {
+      const list = []
+      for (let name in this.spiderForm.config.settings) {
+        if (this.spiderForm.config.settings.hasOwnProperty(name)) {
+          const value = this.spiderForm.config.settings[name]
+          list.push({ name, value })
+        }
+      }
+      return list
+    }
   },
   methods: {
     addField () {
@@ -124,27 +124,29 @@ export default {
       }
     },
     onRemoveField (row) {
-      for (let i = 0; i < this.list.length; i++) {
-        if (row.name === this.list[i].name) {
-          this.list.splice(i, 1)
-          break
-        }
-      }
+      console.log(row)
+      this.$store.commit(
+        'spider/UNSET_SPIDER_FORM_CONFIG_SETTING_ITEM',
+        row.name
+      )
       if (this.list.length === 0) {
-        this.list.push({
-          css: 'body',
-          next_stage: ''
-        })
+        this.$store.commit(
+          'spider/SET_SPIDER_FORM_CONFIG_SETTING_ITEM',
+          'VARIABLE_NAME_' + Math.floor(new Date().getTime()),
+          'VARIABLE_VALUE_' + Math.floor(new Date().getTime())
+        )
       }
     },
     onAddField (row) {
       for (let i = 0; i < this.list.length; i++) {
         if (row.name === this.list[i].name) {
-          this.list.splice(i + 1, 0, {
-            name: `field_${Math.floor(new Date().getTime()).toString()}`,
-            css: 'body',
-            next_stage: ''
-          })
+          this.$store.commit(
+            'spider/SET_SPIDER_FORM_CONFIG_SETTING_ITEM',
+            {
+              name: 'VARIABLE_NAME_' + Math.floor(new Date().getTime()),
+              value: 'VARIABLE_VALUE_' + Math.floor(new Date().getTime())
+            }
+          )
           break
         }
       }
@@ -173,6 +175,15 @@ export default {
         }
       })
     }
+  },
+  created () {
+    if (this.list.length === 0) {
+      this.$store.commit(
+        'spider/SET_SPIDER_FORM_CONFIG_SETTING_ITEM',
+        'VARIABLE_NAME_' + Math.floor(new Date().getTime()),
+        'VARIABLE_VALUE_' + Math.floor(new Date().getTime())
+      )
+    }
   }
 }
 </script>

frontend/src/store/modules/spider.js

@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import request from '../../api/request'
 
 const state = {
@@ -72,6 +73,15 @@ const mutations = {
   },
   SET_PREVIEW_CRAWL_DATA (state, value) {
     state.previewCrawlData = value
+  },
+  SET_SPIDER_FORM_CONFIG_SETTING_ITEM (state, payload) {
+    const { name, value } = payload
+    Vue.set(state.spiderForm.config.settings, name, value)
+  },
+  UNSET_SPIDER_FORM_CONFIG_SETTING_ITEM (state, name) {
+    const settings = JSON.parse(JSON.stringify(state.spiderForm.config.settings))
+    delete settings[name]
+    Vue.set(state.spiderForm.config, 'settings', settings)
   }
 }
 

frontend/src/views/spider/SpiderDetail.vue

@@ -109,6 +109,9 @@ export default {
 
     // get spider tasks
     this.$store.dispatch('spider/getTaskList', this.$route.params.id)
+
+    // get spider list
+    this.$store.dispatch('spider/getSpiderList')
   }
 }
 </script>