From cec35a285572ddd201fbb0fa57cb50774e94ab63 Mon Sep 17 00:00:00 2001
From: marvzhang <tikazyq@163.com>
Date: Sun, 16 Feb 2020 10:23:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5scrapy=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Common/CrawlConfirmDialog.vue  | 177 ++++++++-------
 .../components/Common/ParametersDialog.vue    | 204 ++++++++++++++++++
 .../components/InfoView/SpiderInfoView.vue    |   2 +-
 frontend/src/i18n/zh.js                       |   4 +
 4 files changed, 310 insertions(+), 77 deletions(-)
 create mode 100644 frontend/src/components/Common/ParametersDialog.vue

diff --git a/frontend/src/components/Common/CrawlConfirmDialog.vue b/frontend/src/components/Common/CrawlConfirmDialog.vue
index a10442f3..6233d81c 100644
--- a/frontend/src/components/Common/CrawlConfirmDialog.vue
+++ b/frontend/src/components/Common/CrawlConfirmDialog.vue
@@ -1,88 +1,100 @@
 <template>
-  <el-dialog
-    :title="$t('Notification')"
-    :visible="visible"
-    class="crawl-confirm-dialog"
-    width="580px"
-    :before-close="beforeClose"
-  >
-    <div style="margin-bottom: 20px;">{{$t('Are you sure to run this spider?')}}</div>
-    <el-form label-width="140px" :model="form" ref="form">
-      <el-form-item :label="$t('Run Type')" prop="runType" required inline-message>
-        <el-select v-model="form.runType" :placeholder="$t('Run Type')">
-          <el-option value="all-nodes" :label="$t('All Nodes')"/>
-          <el-option value="selected-nodes" :label="$t('Selected Nodes')"/>
-          <el-option value="random" :label="$t('Random')"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="form.runType === 'selected-nodes'" prop="nodeIds" :label="$t('Node')" required inline-message>
-        <el-select v-model="form.nodeIds" :placeholder="$t('Node')" multiple clearable>
-          <el-option
-            v-for="op in nodeList"
-            :key="op._id"
-            :value="op._id"
-            :disabled="op.status !== 'online'"
-            :label="op.name"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="spiderForm.is_scrapy" :label="$t('Scrapy Spider')" prop="spider" required inline-message>
-        <el-select v-model="form.spider" :placeholder="$t('Scrapy Spider')" :disabled="isLoading">
-          <el-option
-            v-for="s in spiderForm.spider_names"
-            :key="s"
-            :label="s"
-            :value="s"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="spiderForm.is_scrapy" :label="$t('Scrapy Log Level')" prop="scrapy_log_level" required
-                    inline-message>
-        <el-select v-model="form.scrapy_log_level" :placeholder="$t('Scrapy Log Level')">
-          <el-option value="INFO" label="INFO"/>
-          <el-option value="DEBUG" label="DEBUG"/>
-          <el-option value="WARN" label="WARN"/>
-          <el-option value="ERROR" label="ERROR"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="spiderForm.type === 'customized'" :label="$t('Parameters')" prop="param" inline-message>
-        <template v-if="spiderForm.is_scrapy">
-          <el-input v-model="form.param" :placeholder="$t('Parameters')" class="param-input"/>
-          <el-button type="primary" icon="el-icon-edit" class="param-btn"/>
-        </template>
-        <template v-else>
-          <el-input v-model="form.param" :placeholder="$t('Parameters')"></el-input>
-        </template>
-      </el-form-item>
-      <el-form-item class="disclaimer-wrapper">
-        <div>
-          <el-checkbox v-model="isAllowDisclaimer"/>
-          <span style="margin-left: 5px">我已阅读并同意 <a href="javascript:" @click="onClickDisclaimer">《免责声明》</a> 所有内容</span>
-        </div>
-        <div>
-          <el-checkbox v-model="isRedirect"/>
-          <span style="margin-left: 5px">跳转到任务详情页</span>
-        </div>
-      </el-form-item>
-      <el-form-item>
-      </el-form-item>
-    </el-form>
-    <template slot="footer">
-      <el-button type="plain" size="small" @click="$emit('close')">{{$t('Cancel')}}</el-button>
-      <el-button type="primary" size="small" @click="onConfirm" :disabled="isConfirmDisabled">
-        {{$t('Confirm')}}
-      </el-button>
-    </template>
-  </el-dialog>
+  <div class="crawl-confirm-dialog-wrapper">
+    <parameters-dialog
+      :visible="isParametersVisible"
+      :param="form.param"
+      @confirm="onParametersConfirm"
+      @close="isParametersVisible = false"
+    />
+    <el-dialog
+      :title="$t('Notification')"
+      :visible="visible"
+      class="crawl-confirm-dialog"
+      width="580px"
+      :before-close="beforeClose"
+    >
+      <div style="margin-bottom: 20px;">{{$t('Are you sure to run this spider?')}}</div>
+      <el-form label-width="140px" :model="form" ref="form">
+        <el-form-item :label="$t('Run Type')" prop="runType" required inline-message>
+          <el-select v-model="form.runType" :placeholder="$t('Run Type')">
+            <el-option value="all-nodes" :label="$t('All Nodes')"/>
+            <el-option value="selected-nodes" :label="$t('Selected Nodes')"/>
+            <el-option value="random" :label="$t('Random')"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="form.runType === 'selected-nodes'" prop="nodeIds" :label="$t('Node')" required
+                      inline-message>
+          <el-select v-model="form.nodeIds" :placeholder="$t('Node')" multiple clearable>
+            <el-option
+              v-for="op in nodeList"
+              :key="op._id"
+              :value="op._id"
+              :disabled="op.status !== 'online'"
+              :label="op.name"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="spiderForm.is_scrapy" :label="$t('Scrapy Spider')" prop="spider" required inline-message>
+          <el-select v-model="form.spider" :placeholder="$t('Scrapy Spider')" :disabled="isLoading">
+            <el-option
+              v-for="s in spiderForm.spider_names"
+              :key="s"
+              :label="s"
+              :value="s"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="spiderForm.is_scrapy" :label="$t('Scrapy Log Level')" prop="scrapy_log_level" required
+                      inline-message>
+          <el-select v-model="form.scrapy_log_level" :placeholder="$t('Scrapy Log Level')">
+            <el-option value="INFO" label="INFO"/>
+            <el-option value="DEBUG" label="DEBUG"/>
+            <el-option value="WARN" label="WARN"/>
+            <el-option value="ERROR" label="ERROR"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="spiderForm.type === 'customized'" :label="$t('Parameters')" prop="param" inline-message>
+          <template v-if="spiderForm.is_scrapy">
+            <el-input v-model="form.param" :placeholder="$t('Parameters')" class="param-input"/>
+            <el-button type="primary" icon="el-icon-edit" class="param-btn" @click="onOpenParameters"/>
+          </template>
+          <template v-else>
+            <el-input v-model="form.param" :placeholder="$t('Parameters')"></el-input>
+          </template>
+        </el-form-item>
+        <el-form-item class="disclaimer-wrapper">
+          <div>
+            <el-checkbox v-model="isAllowDisclaimer"/>
+            <span style="margin-left: 5px">我已阅读并同意 <a href="javascript:"
+                                                      @click="onClickDisclaimer">《免责声明》</a> 所有内容</span>
+          </div>
+          <div>
+            <el-checkbox v-model="isRedirect"/>
+            <span style="margin-left: 5px">跳转到任务详情页</span>
+          </div>
+        </el-form-item>
+        <el-form-item>
+        </el-form-item>
+      </el-form>
+      <template slot="footer">
+        <el-button type="plain" size="small" @click="$emit('close')">{{$t('Cancel')}}</el-button>
+        <el-button type="primary" size="small" @click="onConfirm" :disabled="isConfirmDisabled">
+          {{$t('Confirm')}}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import {
   mapState
 } from 'vuex'
+import ParametersDialog from './ParametersDialog'
 
 export default {
   name: 'CrawlConfirmDialog',
+  components: { ParametersDialog },
   props: {
     spiderId: {
       type: String,
@@ -105,7 +117,8 @@ export default {
       },
       isAllowDisclaimer: true,
       isRedirect: true,
-      isLoading: false
+      isLoading: false,
+      isParametersVisible: false
     }
   },
   computed: {
@@ -129,6 +142,9 @@ export default {
     beforeClose () {
       this.$emit('close')
     },
+    beforeParameterClose () {
+      this.isParametersVisible = false
+    },
     onConfirm () {
       this.$refs['form'].validate(async valid => {
         if (!valid) return
@@ -180,6 +196,13 @@ export default {
         }
       }
       this.isLoading = false
+    },
+    onOpenParameters () {
+      this.isParametersVisible = true
+    },
+    onParametersConfirm (value) {
+      this.form.param = value
+      this.isParametersVisible = false
     }
   }
 }
@@ -197,6 +220,7 @@ export default {
   .crawl-confirm-dialog >>> .param-input {
     width: calc(100% - 56px);
   }
+
   .crawl-confirm-dialog >>> .param-input .el-input__inner {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -208,4 +232,5 @@ export default {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+
 </style>
diff --git a/frontend/src/components/Common/ParametersDialog.vue b/frontend/src/components/Common/ParametersDialog.vue
new file mode 100644
index 00000000..9deaf024
--- /dev/null
+++ b/frontend/src/components/Common/ParametersDialog.vue
@@ -0,0 +1,204 @@
+<template>
+  <el-dialog
+    :title="$t('Parameters')"
+    :visible="visible"
+    :before-close="beforeClose"
+    class="parameters-dialog"
+    width="720px"
+  >
+    <div class="action-wrapper">
+      <el-button
+        type="primary"
+        size="small"
+        @click="onAdd"
+      >
+        {{$t('Add')}}
+      </el-button>
+    </div>
+    <el-table
+      :data="paramData"
+      border
+    >
+      <el-table-column
+        :label="$t('Parameter Type')"
+        width="100px"
+      >
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.type" size="small">
+            <el-option
+              :label="$t('Spider')"
+              value="spider"
+            />
+            <el-option
+              :label="$t('Setting')"
+              value="setting"
+            />
+            <el-option
+              :label="$t('Other')"
+              value="other"
+            />
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('Parameter Name')"
+        width="240px"
+      >
+        <template slot-scope="scope">
+          <el-autocomplete
+            v-if="scope.row.type === 'setting'"
+            v-model="scope.row.name"
+            size="small"
+            suffix-icon="el-icon-edit"
+          />
+          <el-input
+            v-else-if="scope.row.type === 'spider'"
+            v-model="scope.row.name"
+            size="small"
+            suffix-icon="el-icon-edit"
+          />
+          <div v-else style="text-align: center">
+            N/A
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('Parameter Value')"
+      >
+        <template slot-scope="scope">
+          <el-input v-model="scope.row.value" size="small" suffix-icon="el-icon-edit"/>
+        </template>
+      </el-table-column>
+      <el-table-column
+        :label="$t('Action')"
+        width="60px"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <div class="action-btn-wrapper">
+            <el-button type="danger" icon="el-icon-delete" size="mini" @click="onRemove(scope.$index)" circle/>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <template slot="footer">
+      <el-button type="plain" size="small" @click="$emit('close')">{{$t('Cancel')}}</el-button>
+      <el-button type="primary" size="small" @click="onConfirm">
+        {{$t('Confirm')}}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ParametersDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    param: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      paramData: []
+    }
+  },
+  watch: {
+    visible (value) {
+      if (value) this.initParamData()
+    }
+  },
+  methods: {
+    beforeClose () {
+      this.$emit('close')
+    },
+    initParamData () {
+      const mArr = this.param.match(/((?:-[-a-zA-Z0-9] )?(?:\w+=)?\w+)/g)
+      if (!mArr) {
+        this.paramData = []
+        this.paramData.push({ type: 'spider', name: '', value: '' })
+        return
+      }
+      this.paramData = []
+      mArr.forEach(s => {
+        s = s.trim()
+        let d = {}
+        const arr = s.split(' ')
+        if (arr.length === 1) {
+          d.type = 'other'
+          d.value = s
+        } else {
+          const arr2 = arr[1].split('=')
+          d.name = arr2[0]
+          d.value = arr2[1]
+          if (arr[0] === '-a') {
+            d.type = 'spider'
+          } else if (arr[0] === '-s') {
+            d.type = 'setting'
+          } else {
+            d.type = 'other'
+            d.value = s
+          }
+        }
+        this.paramData.push(d)
+      })
+      if (this.paramData.length === 0) {
+        this.paramData.push({ type: 'spider', name: '', value: '' })
+      }
+    },
+    onConfirm () {
+      const param = this.paramData
+        .filter(d => d.value)
+        .map(d => {
+          let s = ''
+          if (d.type === 'setting') {
+            s = `-s ${d.name}=${d.value}`
+          } else if (d.type === 'spider') {
+            s = `-a ${d.name}=${d.value}`
+          } else if (d.type === 'other') {
+            s = d.value
+          }
+          return s
+        })
+        .filter(s => !!s)
+        .join(' ')
+      this.$emit('confirm', param)
+    },
+    onRemove (index) {
+      this.paramData.splice(index, 1)
+    },
+    onAdd () {
+      this.paramData.push({ type: 'spider', name: '', value: '' })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .parameters-dialog >>> .el-table td,
+  .parameters-dialog >>> .el-table td .cell {
+    padding: 0;
+    margin: 0;
+  }
+
+  .parameters-dialog >>> .el-table td .cell .el-autocomplete {
+    width: 100%;
+  }
+
+  .parameters-dialog >>> .el-table td .cell .el-input__inner {
+    border: none;
+  }
+
+  .parameters-dialog .action-wrapper {
+    margin-bottom: 10px;
+    text-align: right;
+  }
+
+  .parameters-dialog .action-btn-wrapper {
+  }
+</style>
diff --git a/frontend/src/components/InfoView/SpiderInfoView.vue b/frontend/src/components/InfoView/SpiderInfoView.vue
index cd9e9f95..f7226bf9 100644
--- a/frontend/src/components/InfoView/SpiderInfoView.vue
+++ b/frontend/src/components/InfoView/SpiderInfoView.vue
@@ -58,7 +58,7 @@
         <el-form-item :label="$t('Remark')">
           <el-input type="textarea" v-model="spiderForm.remark" :placeholder="$t('Remark')" :disabled="isView"/>
         </el-form-item>
-        <el-form-item v-if="spiderForm.type === 'customized'" :label="$t('Is Scrapy')" prop="is_scrapy">
+        <el-form-item v-if="spiderForm.type === 'customized' && !isView" :label="$t('Is Scrapy')" prop="is_scrapy">
           <el-switch
             v-model="spiderForm.is_scrapy"
             active-color="#13ce66"
diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
index c6a8afa7..66750cd2 100644
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -185,6 +185,10 @@ export default {
   'Is Scrapy': '是否为 Scrapy',
   'Scrapy Spider': 'Scrapy 爬虫',
   'Scrapy Log Level': 'Scrapy 日志等级',
+  'Parameter Name': '参数名',
+  'Parameter Value': '参数值',
+  'Parameter Type': '参数类别',
+  'Other': '其他',
 
   // 爬虫列表
   'Name': '名称',