TBtools-下拉框选词

htmldev/TBTools/src/views/modules/tools/tools-starkeysearch.vue

@@ -11,30 +11,48 @@
             <el-radio label="天猫"></el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="深度" prop="level">
-          <el-select v-model="ruleForm.level" placeholder="请选择深度级别">
-            <el-option label="一级" value="0"></el-option>
-            <el-option label="二级" value="1"></el-option>
-          </el-select>
-        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="submitForm('ruleForm')">一键淘词</el-button>
-          <el-button>数据导出</el-button>
+          <el-button @click="exportExcel('my-table2')">数据导出</el-button>
         </el-form-item>
       </el-form>
     </el-col>
+    <el-col :span="10" :offset="2">
+      <el-table
+        :data="dataList"
+        border
+        v-loading="dataListLoading"
+        id="my-table2"
+        style="width: 100%">
+        <el-table-column
+          prop="value"
+          header-align="center"
+          align="center"
+          label="关键词">
+        </el-table-column>
+        <el-table-column
+          prop="resource"
+          header-align="center"
+          align="center"
+          label="类型">
+        </el-table-column>
+      </el-table>
+      <p class="TT-total">共获取{{ dataList.length }}条数据</p>
+    </el-col>
   </el-row>
 </template>
 
 <script>
+import FileSaver from 'file-saver'
+import XLSX from 'xlsx'
+
 export default {
   name: 'tools-starkeysearch',
   data () {
     return {
       ruleForm: {
-        name: '',
-        resource: '淘宝',
-        level: '0'
+        name: '', // apple
+        resource: '淘宝'
       },
       rules: {
         name: [
@@ -42,30 +60,58 @@ export default {
         ],
         region: [
           { required: true, message: '请选择数据来源', trigger: 'change' }
-        ],
-        level: [
-          { required: true, message: '请选择深度级别', trigger: 'blur' }
         ]
-      }
+      },
+      dataList: [],
+      dataListLoading: false
     }
   },
   methods: {
     submitForm (formName) {
+      const { name, resource } = this.ruleForm
+      const ts = new Date().getTime()
+      const api = resource === '天猫' ? `https://suggest.taobao.com/sug?code=utf-8&q=${name}&_ksTS=${ts}_1105&callback=jsonp1106&area=b2c&code=utf-8&k=1&bucketid=19&src=tmall_pc` : `https://suggest.taobao.com/sug?code=utf-8&q=${name}&_ksTS=${ts}_512&callback=jsonp513&k=1&area=c2c&bucketid=10`
       this.$refs[formName].validate((valid) => {
         if (!valid) {
           return
         }
-        // 天猫 https://suggest.taobao.com/sug?code=utf-8&q=dia&_ksTS=1608391936207_1105&callback=jsonp1106&area=b2c&code=utf-8&k=1&bucketid=19&src=tmall_pc
-        // 淘宝 https://suggest.taobao.com/sug?code=utf-8&q=%E7%94%B5%E5%95%86&_ksTS=1608392073458_512&callback=jsonp513&k=1&area=c2c&bucketid=10
-        this.$jsonp('https://api.map.baidu.com/geocoder/v2/?callback=renderReverse&output=json&pois=1', {}).then((res) => {
-          console.log(res)
+        this.dataListLoading = true
+        this.$jsonp(api, {}).then((res) => {
+          if (res && Array.isArray(res.result)) {
+            this.dataList = res.result.map(item => ({
+              value: item[0],
+              resource: resource
+            }))
+          }
+          this.dataListLoading = false
         })
       })
+    },
+    // 导出表格所用
+    exportExcel (id) {
+      var wb = XLSX.utils.table_to_book(document.querySelector('#' + id))
+      var wbout = XLSX.write(wb, {
+        bookType: 'xlsx',
+        bookSST: true,
+        type: 'array'
+      })
+      try {
+        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${this.ruleForm.resource}下拉框选词` + '.xlsx')
+      } catch (e) {
+        if (typeof console !== 'undefined') {
+          console.log(e, wbout)
+        }
+      }
+      return wbout
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.TT-total {
+  width: 100%;
+  margin-top: 10px;
+  text-align: center;
+}
 </style>