fixed https://github.com/crawlab-team/crawlab/issues/514

frontend/src/components/Config/ConfigList.vue

@@ -131,9 +131,26 @@
 
           <div class="button-group-container">
             <div class="button-group">
-              <el-button id="btn-run" size="small" type="danger" :disabled="isDisabled" @click="onCrawl">
+              <el-button
+                id="btn-run"
+                size="small"
+                type="danger"
+                :disabled="isDisabled"
+                icon="el-icon-video-play"
+                @click="onCrawl"
+              >
                 {{$t('Run')}}
               </el-button>
+              <el-button
+                id="btn-convert"
+                size="small"
+                type="warning"
+                :disabled="isDisabled"
+                icon="el-icon-refresh-right"
+                @click="onConvert"
+              >
+                {{$t('Convert to Customized')}}
+              </el-button>
               <!--              <el-button type="primary" @click="onExtractFields" v-loading="extractFieldsLoading">-->
               <!--                {{$t('ExtractFields')}}-->
               <!--              </el-button>-->
@@ -144,7 +161,7 @@
                 type="success"
                 :disabled="saveLoading || isDisabled"
                 @click="onSave"
-                :icon="saveLoading ? 'el-icon-loading' : ''"
+                :icon="saveLoading ? 'el-icon-loading' : 'el-icon-check'"
               >
                 {{$t('Save')}}
               </el-button>
@@ -1009,10 +1026,33 @@ ${f.css || f.xpath} ${f.attr ? ('(' + f.attr + ')') : ''} ${f.next_stage ? (' --
       const nextStageField = this.getNextStageField(stage)
       if (!nextStageField) return
       return this.spiderForm.config.stages[nextStageField.next_stage]
+    },
+    onConvert () {
+      this.$confirm(this.$t('Are you sure to convert this spider to customized spider?'), this.$t('Notification'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel'),
+        type: 'warning'
+      }).then(async () => {
+        this.spiderForm.type = 'customized'
+        this.$store.dispatch('spider/editSpider')
+          .then(res => {
+            if (!res.data.error) {
+              this.$store.commit('spider/SET_CONFIG_LIST_TS', +new Date())
+              this.$message({
+                type: 'success',
+                message: 'Converted successfully'
+              })
+            } else {
+              this.$message({
+                type: 'error',
+                message: 'Converted unsuccessfully'
+              })
+            }
+            this.$store.dispatch('spider/getSpiderData', this.spiderForm._id)
+            this.$st.sendEv('爬虫详情', '配置', '转化为自定义爬虫')
+          })
+      })
     }
-  },
-  mounted () {
-    this.activeNames = this.spiderForm.config.stages.map(stage => stage.name)
   }
 }
 </script>

frontend/src/i18n/zh.js

@@ -227,6 +227,7 @@ export default {
   'Public Spiders': '公共爬虫',
   'Is Public': '是否公共',
   'Owner': '所有者',
+  'Convert to Customized': '转化为自定义',
 
   // 爬虫列表
   'Name': '名称',
@@ -375,7 +376,10 @@ export default {
   'Are you sure to delete this node?': '你确定要删除该节点?',
   'Are you sure to run this spider?': '你确定要运行该爬虫?',
   'Are you sure to delete this file/directory?': '你确定要删除该文件/文件夹?',
+  'Are you sure to convert this spider to customized spider?': '你确定要转化该爬虫为自定义爬虫?',
   'Added spider successfully': '成功添加爬虫',
+  'Converted successfully': '成功转化',
+  'Converted unsuccessfully': '未成功转化',
   'Uploaded spider files successfully': '成功上传爬虫文件',
   'Node info has been saved successfully': '节点信息已成功保存',
   'A task has been scheduled successfully': '已经成功派发一个任务',

frontend/src/store/modules/spider.js

@@ -50,7 +50,10 @@ const state = {
   templateList: [],
 
   // spider file tree
-  fileTree: {}
+  fileTree: {},
+
+  // config list ts
+  configListTs: undefined
 }
 
 const getters = {}
@@ -110,6 +113,9 @@ const mutations = {
   },
   SET_SPIDER_SCRAPY_PIPELINES (state, value) {
     state.spiderScrapyPipelines = value
+  },
+  SET_CONFIG_LIST_TS (state, value) {
+    state.configListTs = value
   }
 }
 

frontend/src/views/spider/SpiderDetail.vue

@@ -32,7 +32,7 @@
         />
       </el-tab-pane>
       <el-tab-pane v-if="isConfigurable" :label="$t('Config')" name="config">
-        <config-list ref="config"/>
+        <config-list ref="config" @convert="onConvert"/>
       </el-tab-pane>
       <el-tab-pane :label="$t('Files')" name="files">
         <file-list
@@ -78,7 +78,8 @@ export default {
     SpiderOverview
   },
   watch: {
-    activeTabName () {
+    configListTs () {
+      this.onConvert()
     }
   },
   data () {
@@ -174,7 +175,8 @@ export default {
   computed: {
     ...mapState('spider', [
       'spiderList',
-      'spiderForm'
+      'spiderForm',
+      'configListTs'
     ]),
     ...mapState('file', [
       'currentPath'
@@ -242,6 +244,9 @@ export default {
       this.activeTabName = 'files'
       await this.$store.dispatch('spider/getFileTree')
       this.$refs['file-list'].clickPipeline()
+    },
+    onConvert () {
+      this.activeTabName = 'overview'
     }
   },
   async created () {

frontend/src/views/spider/SpiderList.vue

@@ -1003,7 +1003,7 @@ export default {
         await this.$store.dispatch('spider/deleteSpider', row._id)
         this.$message({
           type: 'success',
-          message: 'Deleted successfully'
+          message: this.$t('Deleted successfully')
         })
         await this.getList()
         this.$st.sendEv('爬虫列表', '删除爬虫')