标签管理 标签使用记录 搜索

src/views/storeManage/tagManage/tagLog/index.vue

@@ -3,9 +3,9 @@
     <div class="head-container">
       <crudOperation />
       <el-select v-model="bindingType" class="filter-item" style="width: 130px; height: 30px;margin:0 25px 0 10px" @change="getData">
-        <el-option v-for="item in bindingTypeOptions" :key="item.value" :label="item.label" :value="item.value" @change="getData" />
+        <el-option v-for="item in bindingTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
-      <el-select v-model="operType" class="filter-item line-before" style="width: 130px; height: 30px;">
+      <el-select v-model="operType" class="filter-item line-before" style="width: 130px; height: 30px;" @change="getData">
         <el-option v-for="item in operTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
       <el-input
@@ -27,7 +27,7 @@
         </el-select>
       </el-input>
       <!-- <rrOperation /> -->
-      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="searchTableData()">搜索</el-button>
+      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="getData">搜索</el-button>
     </div>
     <!-- :cell-class-name="cell"
       @row-dblclick="handleDbClick" -->
@@ -57,7 +57,7 @@ import CRUD, { presenter } from '@crud/crud'
 // import rrOperation from '@crud/RR.operation'
 import pagination from '@crud/Pagination'
 import { initTagLogList } from '@/api/storeManage/tagManage/bindTagList'
-let data = null // 接口数据
+
 export default {
   name: 'TagLog',
   components: { crudOperation, pagination },
@@ -88,13 +88,13 @@ export default {
       operType: '0',
       operTypeOptions: [
         { value: '0', label: '全部' },
-        { value: '1', label: '解绑' },
-        { value: '2', label: '绑定' }
+        { value: '1', label: '绑定' },
+        { value: '2', label: '解绑' }
       ],
       searchVal: 'tid',
       searchOptions: [
         { value: 'tid', label: 'TID' },
-        { value: 'tagName', label: '标签名称' }
+        { value: 'title', label: '标签名称' }
       ],
       keyWord: '',
       params: {
@@ -111,11 +111,23 @@ export default {
   },
   methods: {
     getData() {
-      initTagLogList(this.params).then(res => {
+      initTagLogList(this.getQueryParams()).then(res => {
         // 处理表格数据
-        data = res
-        console.log(data, 'data')
-        this.tableRender(res.content)
+        // console.log(res, 'res')
+        let table = res.content
+        // console.log(this.keyWord, 'keyWord')
+        // console.log(this.searchVal)
+        if (!this.keyWord.length) {
+          this.tableRender(table)
+        } else {
+          if (this.searchVal === 'title') {
+            table = table.filter(item => item.title.includes(this.keyWord))
+            this.tableRender(table)
+          } else if (this.searchVal === 'tid') {
+            table = table.filter(item => item.tid.includes(this.keyWord))
+            this.tableRender(table)
+          }
+        }
       })
     },
     // 处理表格数据
@@ -136,26 +148,24 @@ export default {
           return item
         })
         console.log(this.tableData, '表格渲染')
+      } else {
+        this.tableData = []
       }
     },
-    // 获取搜索词
+    // 获取参数
     getQueryParams() {
-      const queryParams = {
-        bindingType: this.bindingType,
-        operType: this.operType
+      const queryParams = {}
+      // queryParams.searchVal = this.keyWord.length === 0 ? '' : this.searchVal
+      queryParams.bindingType = parseInt(this.bindingType) === 0 ? '' : this.bindingType
+      queryParams.operType = parseInt(this.operType) === 0 ? '' : this.operType
+      if (this.keyWord.length === 0) {
+        queryParams.title = ''
+        queryParams.tid = ''
       }
-      queryParams.searchVal = this.keyWord.length === 0 ? undefined : this.searchVal
-      console.log(queryParams)
+      return queryParams
     },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
-    },
-    // 搜索
-    searchTableData() {
-      // console.log(this.bindingType, this.operType, this.searchVal)
-      // const table = data.content
-      // console.log(table)
-      this.getQueryParams()
     }
   }
 }