优化爬虫添加逻辑

frontend/src/components/InfoView/SpiderInfoView.vue

@@ -21,7 +21,8 @@
         <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 v-if="spiderForm.type === 'customized'" :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>
@@ -45,20 +46,41 @@
           </el-select>
         </el-form-item>
         <el-form-item :label="$t('Remark')">
-          <el-input v-model="spiderForm.remark"/>
+          <el-input type="textarea" v-model="spiderForm.remark" :placeholder="$t('Remark')"/>
         </el-form-item>
       </el-form>
     </el-row>
     <el-row class="button-container" v-if="!isView">
-      <el-button size="small" v-if="isShowRun" type="danger" @click="onCrawl">{{$t('Run')}}</el-button>
-      <el-button size="small" type="success" @click="onSave">{{$t('Save')}}</el-button>
+      <el-upload
+        v-if="spiderForm.type === 'customized'"
+        :action="$request.baseUrl + `/spiders/${spiderForm._id}/upload`"
+        :headers="{Authorization:token}"
+        :on-progress="() => this.uploadLoading = true"
+        :on-error="onUploadError"
+        :on-success="onUploadSuccess"
+        :file-list="fileList"
+        style="display:inline-block;margin-right:10px"
+      >
+        <el-button size="normal" type="primary" icon="el-icon-upload" v-loading="uploadLoading">
+          {{$t('Upload')}}
+        </el-button>
+      </el-upload>
+      <el-button size="normal" v-if="isShowRun" type="danger" @click="onCrawl"
+                 icon="el-icon-video-play">
+        {{$t('Run')}}
+      </el-button>
+      <el-button size="normal" type="success" @click="onSave"
+                 icon="el-icon-check">
+        {{$t('Save')}}
+      </el-button>
     </el-row>
   </div>
 </template>
 
 <script>
 import {
-  mapState
+  mapState,
+  mapGetters
 } from 'vuex'
 import CrawlConfirmDialog from '../Common/CrawlConfirmDialog'
 
@@ -88,6 +110,8 @@ export default {
       callback()
     }
     return {
+      uploadLoading: false,
+      fileList: [],
       crawlConfirmDialogVisible: false,
       cmdRule: [
         { message: 'Execute Command should not be empty', required: true }
@@ -101,6 +125,9 @@ export default {
     ...mapState('spider', [
       'spiderForm'
     ]),
+    ...mapGetters('user', [
+      'token'
+    ]),
     isShowRun () {
       if (this.spiderForm.type === 'customized') {
         return !!this.spiderForm.cmd
@@ -143,6 +170,14 @@ export default {
     },
     onSiteSelect (item) {
       this.spiderForm.site = item._id
+    },
+    onUploadSuccess () {
+      this.$store.dispatch('file/getFileList', this.spiderForm.src)
+
+      this.uploadLoading = false
+    },
+    onUploadError () {
+      this.uploadLoading = false
     }
   }
 }
@@ -162,4 +197,8 @@ export default {
   .el-autocomplete {
     width: 100%;
   }
+
+  .info-view >>> .el-upload-list {
+    display: none;
+  }
 </style>