标签管理 标签使用记录 crud使用

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

@@ -2,47 +2,38 @@
   <div>
     <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-select v-model="bindingType" class="filter-item" style="width: 130px; height: 30px;margin:0 25px 0 10px" @change="crud.toQuery">
         <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;" @change="getData">
+      <el-select v-model="operType" class="filter-item line-before" allow-create="" style="width: 130px; height: 30px;" @change="crud.toQuery">
         <el-option v-for="item in operTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
-      <el-input
-        v-model="keyWord"
-        size="small"
-        clearable
-        placeholder="请输入关键词"
-        style="width: 245px;margin:0 10px 0 -20px;padding-left:10px"
-        class="input-prepend filter-item"
-        @keyup.enter.native="crud.toQuery"
-      >
+      <el-input v-model="keyWord" size="small" clearable placeholder="请输入关键词" style="width: 245px;margin:0 10px 0 -20px;padding-left:10px" class="input-prepend filter-item" @keyup.enter.native="crud.toQuery">
         <el-select slot="prepend" v-model="searchVal" style="width: 100px">
-          <el-option
-            v-for="item in searchOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+          <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-input>
-      <!-- <rrOperation /> -->
-      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="getData">搜索</el-button>
+      <rrOperation />
     </div>
     <!-- :cell-class-name="cell"
       @row-dblclick="handleDbClick" -->
-    <el-table
-      ref="table"
-      style="width: 100%"
-      height="calc(100vh - 355px)"
-      :data="tableData"
-      @row-click="clickRowHandler"
-    >
+    <el-table ref="table" v-loading="crud.loading" style="width: 100%" height="calc(100vh - 355px)" :data="crud.data" @row-click="clickRowHandler">
       <el-table-column type="selection" width="55" />
       <el-table-column type="index" label="序号" align="center" width="55" />
-      <el-table-column prop="operType" align="center" label="类型" min-width="100" />
+      <el-table-column prop="operType" label="类型" align="center" min-width="80">
+        <template slot-scope="scope">
+          <span v-if="scope.row.operType === 1">绑定</span>
+          <span v-if="scope.row.operType === 2">解绑</span>
+        </template>
+      </el-table-column>
       <el-table-column prop="tid" align="center" label="TID" min-width="150" />
-      <el-table-column prop="bindingType" align="center" label="绑定对象" min-width="100" />
+      <el-table-column prop="bindingType" align="center" label="绑定对象" min-width="100">
+        <template slot-scope="scope">
+          <span v-if="scope.row.bindingType === 1">档案</span>
+          <span v-if="scope.row.bindingType === 2">档案盒</span>
+          <span v-if="scope.row.bindingType === 3">层架位</span>
+        </template>
+      </el-table-column>
       <el-table-column prop="title" align="center" label="标签名称" min-width="150" />
       <el-table-column prop="update_time" align="center" label="操作时间" min-width="150" />
     </el-table>
@@ -54,13 +45,12 @@
 <script>
 import crudOperation from '@crud/CRUD.operation'
 import CRUD, { presenter } from '@crud/crud'
-// import rrOperation from '@crud/RR.operation'
+import rrOperation from '@crud/RR.operation'
 import pagination from '@crud/Pagination'
-import { initTagLogList } from '@/api/storeManage/tagManage/bindTagList'
 
 export default {
   name: 'TagLog',
-  components: { crudOperation, pagination },
+  components: { crudOperation, pagination, rrOperation },
   mixins: [presenter()],
   cruds() {
     return CRUD({
@@ -106,63 +96,21 @@ export default {
       tableData: []
     }
   },
-  created() {
-    this.getData()
-  },
   methods: {
-    getData() {
-      initTagLogList(this.getQueryParams()).then(res => {
-        // 处理表格数据
-        // 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)
-          }
-        }
-      })
-    },
-    // 处理表格数据
-    tableRender(table) {
-      if (table.length > 0) {
-        this.tableData = table.map(item => {
-          switch (item.operType) {
-            case 1:item.operType = '绑定'; break
-            case 2:item.operType = '解绑'; break
-            default:''
-          }
-          switch (item.bindingType) {
-            case 1:item.bindingType = '档案'; break
-            case 2:item.bindingType = '档案盒'; break
-            case 3:item.bindingType = '层架位'; break
-            default:''
-          }
-          return item
-        })
-        console.log(this.tableData, '表格渲染')
-      } else {
-        this.tableData = []
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.query.tid = this.params.tid
+      if (this.operType > 0) {
+        this.crud.query.operType = this.operType
       }
-    },
-    // 获取参数
-    getQueryParams() {
-      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 = ''
+      if (this.bindingType > 0) {
+        this.crud.query.bindingType = this.bindingType
+      }
+      // todo
+      if (this.searchVal === 'title') {
+        this.crud.query.title = this.keyWord
+      } else if (this.searchVal === 'tid') {
+        this.crud.query.tid = this.keyWord
       }
-      return queryParams
     },
     clickRowHandler(row) {
       this.$refs.table.toggleRowSelection(row)
@@ -175,12 +123,12 @@ export default {
 @import "~@/assets/styles/archives-manage.scss";
 .head-container {
   padding: 0 20px 20px 20px;
-  margin-top:-10px ;
+  margin-top: -10px;
   display: flex;
   align-items: center;
 }
-.line-before::before{
-  content: '';
+.line-before::before {
+  content: "";
   width: 15px;
   height: 1px;
   background-color: #fff;