crawlab/frontend/src/components/Common/ParametersDialog.vue

<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
      :header-cell-style="{background:'rgb(48, 65, 86)',color:'white'}"
    >
      <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"
            :fetch-suggestions="querySearch"
          />
          <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" circle @click="onRemove(scope.$index)" />
          </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()
          const 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: '' })
      },
      querySearch(queryString, cb) {
        let data = this.$utils.scrapy.settingParamNames
        if (!queryString) {
          return cb(data.map(s => {
            return { value: s, label: s }
          }))
        }
        data = data
          .filter(s => s.match(new RegExp(queryString, 'i')))
          .sort((a, b) => a < b ? 1 : -1)
        cb(data.map(s => {
          return { value: s, label: s }
        }))
      }
    }
  }
</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>