可配置爬虫前端准备

frontend/src/components/InfoView/SpiderInfoView.vue

@@ -21,11 +21,11 @@
         <el-form-item :label="$t('Source Folder')">
           <el-input v-model="spiderForm.src" :placeholder="$t('Source Folder')" disabled></el-input>
         </el-form-item>
-        <el-form-item  :label="$t('Execute Command')" prop="cmd" required :inline-message="true">
+        <el-form-item v-if="spiderForm.type === 'customized'" :label="$t('Execute Command')" prop="cmd" required :inline-message="true">
           <el-input v-model="spiderForm.cmd" :placeholder="$t('Execute Command')"
                     :disabled="isView"></el-input>
         </el-form-item>
-        <el-form-item :label="$t('Results Collection')">
+        <el-form-item :label="$t('Results Collection')" prop="col" required :inline-message="true">
           <el-input v-model="spiderForm.col" :placeholder="$t('Results Collection')"
                     :disabled="isView"></el-input>
         </el-form-item>
@@ -39,11 +39,10 @@
           </el-autocomplete>
         </el-form-item>
         <el-form-item :label="$t('Spider Type')">
-          <!--<el-select v-model="spiderForm.type" :placeholder="$t('Spider Type')" :disabled="true" clearable>-->
-            <!--<el-option value="configurable" :label="$t('Configurable')"></el-option>-->
-            <!--<el-option value="customized" :label="$t('Customized')"></el-option>-->
-          <!--</el-select>-->
-          <el-input v-model="spiderForm.type" placeholder="爬虫类型" clearable/>
+          <el-select v-model="spiderForm.type" :placeholder="$t('Spider Type')" :disabled="true" clearable>
+            <el-option value="configurable" :label="$t('Configurable')"></el-option>
+            <el-option value="customized" :label="$t('Customized')"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item :label="$t('Remark')">
           <el-input v-model="spiderForm.remark"/>

frontend/src/i18n/zh.js

@@ -125,6 +125,8 @@ export default {
   'Customized Spider': '自定义爬虫',
   'Configurable': '可配置',
   'Customized': '自定义',
+  'configurable': '可配置',
+  'customized': '自定义',
   'Text': '文本',
   'Attribute': '属性',
   'Field Name': '字段名称',
@@ -148,6 +150,7 @@ export default {
   'List Page Fields': '列表页字段',
   'Detail Page Fields': '详情页字段',
   'Detail Page URL': '详情页URL',
+  'All': '全部',
 
   // 爬虫列表
   'Name': '名称',

frontend/src/views/spider/SpiderList.vue

@@ -93,7 +93,8 @@
           </el-upload>
         </el-form-item>
       </el-form>
-      <el-alert type="error" :title="$t('Please zip your spider files from the root directory')" :closable="false"></el-alert>
+      <el-alert type="error" :title="$t('Please zip your spider files from the root directory')"
+                :closable="false"></el-alert>
     </el-dialog>
     <!--./customized spider dialog-->
 
@@ -143,6 +144,14 @@
       </div>
       <!--./filter-->
 
+      <!--tabs-->
+      <el-tabs v-model="activeTab" @tab-click="onClickTab">
+        <el-tab-pane :label="$t('All')" name="all"></el-tab-pane>
+        <el-tab-pane :label="$t('Configurable')" name="configurable"></el-tab-pane>
+        <el-tab-pane :label="$t('Customized')" name="customized"></el-tab-pane>
+      </el-tabs>
+      <!--./tabs-->
+
       <!--table list-->
       <el-table :data="spiderList"
                 class="table"
@@ -157,7 +166,7 @@
                            align="left"
                            :width="col.width">
             <template slot-scope="scope">
-              {{scope.row.type === 'customized' ? '自定义' : scope.row.type}}
+              {{$t(scope.row.type)}}
             </template>
           </el-table-column>
           <el-table-column v-else-if="col.name === 'last_5_errors'"
@@ -249,6 +258,7 @@ import dayjs from 'dayjs'
 import CrawlConfirmDialog from '../../components/Common/CrawlConfirmDialog'
 import StatusTag from '../../components/Status/StatusTag'
 import request from '../../api/request'
+
 export default {
   name: 'SpiderList',
   components: {
@@ -287,7 +297,8 @@ export default {
       spiderFormRules: {
         name: [{ required: true, message: 'Required Field', trigger: 'change' }]
       },
-      fileList: []
+      fileList: [],
+      activeTab: 'all'
     }
   },
   computed: {