加入前端可配置编辑器

frontend/src/components/TableView/FieldsTableView.vue

@@ -1,73 +1,104 @@
 <template>
   <div class="fields-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 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="fields"
                 class="table edit"
                 :header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
-                border>
-        <el-table-column v-if="type === 'list' && spiderForm.crawl_type === 'list-detail'"
-                         :label="$t('Detail Page URL')"
-                         align="center">
+      >
+        <el-table-column class-name="action" width="80px" align="right">
           <template slot-scope="scope">
-            <el-checkbox v-model="scope.row.is_detail"
-                         @change="onCheck(scope.row)">
-            </el-checkbox>
+            <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('Field Name')" width="200px">
+        <el-table-column :label="$t('Field Name')" width="150px">
           <template slot-scope="scope">
             <el-input v-model="scope.row.name" :placeholder="$t('Field Name')"
                       @change="onNameChange(scope.row)"></el-input>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Query Type')" width="200px">
+        <el-table-column :label="$t('Selector Type')" width="150px" align="center" class-name="selector-type">
           <template slot-scope="scope">
-            <el-select v-model="scope.row.type" :placeholder="$t('Query Type')">
-              <el-option value="css" :label="$t('CSS Selector')"></el-option>
-              <el-option value="xpath" :label="$t('XPath')"></el-option>
-            </el-select>
+            <span class="button-selector-item" @click="onClickSelectorType(scope.row, 'css')">
+              <el-tag
+                :class="scope.row.css ? 'active' : 'inactive'"
+                type="success"
+              >
+                CSS
+              </el-tag>
+            </span>
+            <span class="button-selector-item" @click="onClickSelectorType(scope.row, 'xpath')">
+              <el-tag
+                :class="scope.row.xpath ? 'active' : 'inactive'"
+                type="primary"
+              >
+                XPath
+              </el-tag>
+            </span>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Query')" width="250px">
+        <el-table-column :label="$t('Selector')" width="200px">
           <template slot-scope="scope">
-            <el-input v-model="scope.row.query" :placeholder="$t('Query')"></el-input>
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('Extract Type')" width="120px">
-          <template slot-scope="scope">
-            <el-select v-model="scope.row.extract_type" :placeholder="$t('Extract Type')">
-              <el-option value="text" :label="$t('Text')"></el-option>
-              <el-option value="attribute" :label="$t('Attribute')"></el-option>
-            </el-select>
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('Attribute')" width="250px">
-          <template slot-scope="scope">
-            <template v-if="scope.row.extract_type === 'attribute'">
-              <el-input v-model="scope.row.attribute"
-                        :placeholder="$t('Attribute')">
-              </el-input>
+            <template v-if="scope.row.css">
+              <el-input v-model="scope.row.css" :placeholder="$t('CSS')"></el-input>
             </template>
             <template v-else>
+              <el-input v-model="scope.row.xpath" :placeholder="$t('XPath')"></el-input>
             </template>
           </template>
         </el-table-column>
-        <el-table-column :label="$t('Action')" fixed="right" min-width="100px">
+        <el-table-column :label="$t('Is Attribute')" width="150px" align="center">
           <template slot-scope="scope">
-            <div class="action-button-group">
-              <el-button size="mini"
-                         style="margin-left:10px"
-                         icon="el-icon-delete"
-                         type="danger"
-                         @click="deleteField(scope.$index)">
-              </el-button>
-            </div>
+            <span class="button-selector-item" @click="onClickIsAttribute(scope.row, false)">
+              <el-tag
+                :class="!scope.row.attr ? 'active' : 'inactive'"
+                type="success"
+              >
+                {{$t('Text')}}
+              </el-tag>
+            </span>
+            <span class="button-selector-item" @click="onClickIsAttribute(scope.row, true)">
+              <el-tag
+                :class="scope.row.attr ? 'active' : 'inactive'"
+                type="primary"
+              >
+                {{$t('Attribute')}}
+              </el-tag>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('Attribute')" width="200px">
+          <template slot-scope="scope">
+            <template v-if="scope.row.attr">
+              <el-input v-model="scope.row.attr" :placeholder="$t('Attribute')"/>
+            </template>
+            <template v-else>
+              <span style="margin-left: 15px">
+                N/A
+              </span>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('Next Stage')" width="250px">
+          <template slot-scope="scope">
+            <el-select
+              v-model="scope.row.next_stage"
+            >
+              <el-option :label="$t('No Next Stage')" value=""/>
+              <el-option v-for="n in stageNames" :key="n" :label="n" :value="n"/>
+            </el-select>
+          </template>
+        </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')"/>
           </template>
         </el-table-column>
       </el-table>
@@ -91,6 +122,12 @@ export default {
       type: String,
       default: ''
     },
+    stageNames: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
     fields: {
       type: Array,
       default () {
@@ -128,6 +165,57 @@ export default {
         }
       })
       this.$st.sendEv('爬虫详情-配置', '设置详情页URL')
+    },
+    onClickSelectorType (row, selectorType) {
+      if (selectorType === 'css') {
+        if (row.xpath) row.xpath = ''
+        if (!row.css) row.css = 'body'
+      } else {
+        if (row.css) row.css = ''
+        if (!row.xpath) row.xpath = '//body'
+      }
+    },
+    onClickIsAttribute (row, isAttribute) {
+      if (!isAttribute) {
+        // 文本
+        if (row.attr) row.attr = ''
+      } else {
+        // 属性
+        if (!row.attr) row.attr = 'href'
+      }
+    },
+    onCopyField (row) {
+      for (let i = 0; i < this.fields.length; i++) {
+        if (row.name === this.fields[i].name) {
+          this.fields.splice(i, 0, JSON.parse(JSON.stringify(row)))
+          break
+        }
+      }
+    },
+    onRemoveField (row) {
+      for (let i = 0; i < this.fields.length; i++) {
+        if (row.name === this.fields[i].name) {
+          this.fields.splice(i, 1)
+          break
+        }
+      }
+      if (this.fields.length === 0) {
+        this.fields.push({
+          css: 'body',
+          next_stage: ''
+        })
+      }
+    },
+    onAddField (row) {
+      for (let i = 0; i < this.fields.length; i++) {
+        if (row.name === this.fields[i].name) {
+          this.fields.splice(i + 1, 0, {
+            css: 'body',
+            next_stage: ''
+          })
+          break
+        }
+      }
     }
   }
 }
@@ -158,6 +246,50 @@ export default {
     line-height: 36px;
   }
 
+  .el-table.edit >>> .button-selector-item {
+    cursor: pointer;
+    margin: 0 5px;
+  }
+
+  .el-table.edit >>> .el-tag.inactive {
+    opacity: 0.5;
+  }
+
+  .el-table.edit >>> .action {
+    background: none !important;
+    border: none;
+  }
+
+  .el-table.edit >>> tr {
+    border: none;
+  }
+
+  .el-table.edit >>> tr th {
+    border-right: 1px solid rgb(220, 223, 230);
+  }
+
+  .el-table.edit >>> tr td:nth-child(2) {
+    border-left: 1px solid rgb(220, 223, 230);
+  }
+
+  .el-table.edit >>> tr td {
+    border-right: 1px solid rgb(220, 223, 230);
+  }
+
+  .el-table.edit::before {
+    background: none;
+  }
+
+  .el-table.edit >>> .action-item {
+    font-size: 14px;
+    margin-right: 5px;
+    cursor: pointer;
+  }
+
+  .el-table.edit >>> .action-item:last-child {
+    margin-right: 10px;
+  }
+
   .button-group-container {
     /*display: inline-block;*/
     /*width: 100%;*/