updated ConfigList: allow edit field name on preview

crawlab/flower.py

@@ -3,14 +3,18 @@ import sys
 import subprocess
 
 # make sure the working directory is in system path
-file_dir = os.path.dirname(os.path.realpath(__file__))
-root_path = os.path.abspath(os.path.join(file_dir, '..'))
-sys.path.append(root_path)
+FILE_DIR = os.path.dirname(os.path.realpath(__file__))
+ROOT_PATH = os.path.abspath(os.path.join(FILE_DIR, '..'))
+sys.path.append(ROOT_PATH)
+
 from utils.log import other
 from config import BROKER_URL
 
 if __name__ == '__main__':
-    p = subprocess.Popen(['celery', 'flower', '-b', BROKER_URL], stdout=subprocess.PIPE, stderr=subprocess.STDOUT)
+    p = subprocess.Popen([sys.executable, '-m', 'celery', 'flower', '-b', BROKER_URL],
+                         stdout=subprocess.PIPE,
+                         stderr=subprocess.STDOUT,
+                         cwd=ROOT_PATH)
     for line in iter(p.stdout.readline, 'b'):
         if line.decode('utf-8') != '':
             other.info(line.decode('utf-8'))

frontend/src/components/Config/ConfigList.vue

@@ -5,17 +5,25 @@
                :title="$t('Preview Results')"
                width="90%"
                :before-close="onDialogClose">
+      <el-table class="table-header" :data="[{}]" :show-header="false">
+        <el-table-column v-for="(f, index) in fields"
+                         :key="f.name + '-' + index"
+                         min-width="100px">
+          <template>
+            <el-input v-model="columnsDict[f.name]" size="mini" style="width: calc(100% - 15px)"></el-input>
+            <a href="javascript:" style="margin-left: 2px;" @click="onDeleteField(index)">X</a>
+            <!--<el-button size="mini" type="danger" icon="el-icon-delete" style="width:45px;margin-left:2px"></el-button>-->
+          </template>
+        </el-table-column>
+      </el-table>
       <el-table :data="previewCrawlData"
-                :header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
+                :show-header="false"
                 border>
         <el-table-column v-for="(f, index) in fields"
                          :key="f.name + '-' + index"
                          :label="f.name"
                          min-width="100px">
-          <template slot="header" slot-scope="scope">
-            {{ span.column.label }}
-            <el-input v-model="scope.column.label" size="mini"></el-input>
-          </template>
+
           <template slot-scope="scope">
             {{scope.row[f.name] ? scope.row[f.name].trim() : ''}}
           </template>
@@ -138,7 +146,8 @@ export default {
       extractFieldsLoading: false,
       previewLoading: false,
       saveLoading: false,
-      dialogVisible: false
+      dialogVisible: false,
+      columnsDict: {}
     }
   },
   computed: {
@@ -193,6 +202,9 @@ export default {
     },
     onDialogClose () {
       this.dialogVisible = false
+      this.fields.forEach(f => {
+        f.name = this.columnsDict[f.name]
+      })
     },
     onPreview () {
       this.onSave()
@@ -200,6 +212,9 @@ export default {
           this.previewLoading = true
           this.$store.dispatch('spider/getPreviewCrawlData')
             .then(() => {
+              this.fields.forEach(f => {
+                this.columnsDict[f.name] = f.name
+              })
               this.dialogVisible = true
             })
             .catch(() => {
@@ -245,18 +260,8 @@ export default {
           this.$st.sendEv('爬虫详情-配置', '提取字段')
         })
     },
-    renderHeader (h, { column }) {
-      return h(
-        'el-input',
-        {
-          'v-model': 'column.label',
-          on: {
-            change: () => {
-            }
-          }
-        },
-        column.label
-      )
+    onDeleteField (index) {
+      this.fields.splice(index, 1)
     }
   },
   created () {
@@ -285,7 +290,7 @@ export default {
     }
 
     if (!this.spiderForm.crawl_type) this.$set(this.spiderForm, 'crawl_type', 'list')
-    if (!this.spiderForm.start_url) this.$set(this.spiderForm, 'start_url', 'http://example.com')
+    // if (!this.spiderForm.start_url) this.$set(this.spiderForm, 'start_url', 'http://example.com')
     if (!this.spiderForm.item_selector_type) this.$set(this.spiderForm, 'item_selector_type', 'css')
     if (!this.spiderForm.pagination_selector_type) this.$set(this.spiderForm, 'pagination_selector_type', 'css')
     if (this.spiderForm.obey_robots_txt === undefined) this.$set(this.spiderForm, 'obey_robots_txt', true)
@@ -319,4 +324,16 @@ export default {
     color: #606266;
     font-size: 14px;
   }
+
+  .el-table.table-header >>> td {
+    padding: 0;
+  }
+
+  .el-table.table-header >>> .cell {
+    padding: 0;
+  }
+
+  .el-table.table-header >>> .el-input .el-input__inner {
+    border-radius: 0;
+  }
 </style>

frontend/src/i18n/zh.js

@@ -122,6 +122,8 @@ export default {
   'Query': '查询',
   'Extract Type': '提取类别',
   'CSS Selector': 'CSS选择器',
+  'CSS': 'CSS',
+  'XPath': 'Xpath',
   'Crawl Type': '抓取类别',
   'List Only': '仅列表',
   'Detail Only': '仅详情页',