标签管理 标签使用记录

src/api/storeManage/tagManage/bindTagList.js

@@ -23,4 +23,12 @@ export function unbindTag(data) {
     data
   })
 }
-export default { initTagList, bingdingLabel, unbindTag }
+
+export function initTagLogList(parameter) {
+  return request({
+    url: 'api/tag/initTagLogList',
+    method: 'get',
+    params: parameter
+  })
+}
+export default { initTagList, bingdingLabel, unbindTag, initTagLogList }

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

@@ -1,53 +1,182 @@
 <template>
   <div>
-    <div class="content-container">
-      <div class="state-radio">
-        <p>
-          <label>
-            <input v-model="lineStateVal" type="radio" name="lineState" value="在线"><span>在线（直接完成借阅操作）</span>
-          </label>
-        </p>
-        <p>
-          <label>
-            <input v-model="lineStateVal" type="radio" name="lineState" value="离线"><span>离线（发起借阅操作后，将借阅的档案放在读写器上进行识别，将带有电子标签的档案的报警位进行解绑或绑定）</span>
-          </label>
-        </p>
-        <!-- <button @click="btn">测试按钮</button> -->
-      </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-option v-for="item in bindingTypeOptions" :key="item.value" :label="item.label" :value="item.value" @change="getData" />
+      </el-select>
+      <el-select v-model="operType" class="filter-item line-before" style="width: 130px; height: 30px;">
+        <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-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-select>
+      </el-input>
+      <!-- <rrOperation /> -->
+      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="searchTableData()">搜索</el-button>
     </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-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="tid" align="center" label="TID" min-width="150" />
+      <el-table-column prop="bindingType" align="center" label="绑定对象" min-width="100" />
+      <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>
+    <!-- 分页 -->
+    <pagination />
   </div>
 </template>
 
 <script>
-
+import crudOperation from '@crud/CRUD.operation'
+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 },
+  mixins: [presenter()],
+  cruds() {
+    return CRUD({
+      url: 'api/tag/initTagLogList',
+      // crudMethod: caseCrudMethod,
+      title: '标签使用列表',
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: true,
+        group: false
+      }
+    })
+  },
   data() {
     return {
-      lineStateVal: ''
+      bindingType: '0',
+      bindingTypeOptions: [
+        { value: '0', label: '全部' },
+        { value: '1', label: '档案' },
+        { value: '2', label: '档案盒' },
+        { value: '3', label: '层位' }
+      ],
+      operType: '0',
+      operTypeOptions: [
+        { value: '0', label: '全部' },
+        { value: '1', label: '解绑' },
+        { value: '2', label: '绑定' }
+      ],
+      searchVal: 'tid',
+      searchOptions: [
+        { value: 'tid', label: 'TID' },
+        { value: 'tagName', label: '标签名称' }
+      ],
+      keyWord: '',
+      params: {
+        tid: '',
+        title: '',
+        operType: '',
+        bindingType: ''
+      },
+      tableData: []
     }
   },
+  created() {
+    this.getData()
+  },
   methods: {
-    // btn() {
-    //   console.log(this.lineStateVal)
-    // }
+    getData() {
+      initTagLogList(this.params).then(res => {
+        // 处理表格数据
+        data = res
+        console.log(data, 'data')
+        this.tableRender(res.content)
+      })
+    },
+    // 处理表格数据
+    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, '表格渲染')
+      }
+    },
+    // 获取搜索词
+    getQueryParams() {
+      const queryParams = {
+        bindingType: this.bindingType,
+        operType: this.operType
+      }
+      queryParams.searchVal = this.keyWord.length === 0 ? undefined : this.searchVal
+      console.log(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()
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-h2{
-  color: #fff;
-}
-p{
-  height: 32px;
-  line-height: 32px;
-  input{
-    margin-right: 10px;
-  }
+@import "~@/assets/styles/archives-manage.scss";
+.head-container {
+  padding: 0 20px 20px 20px;
+  margin-top:-10px ;
+  display: flex;
+  align-items: center;
 }
-.content-container{
-  height:636px;
-  color: #fff;
-  padding: 0 20px;
+.line-before::before{
+  content: '';
+  width: 15px;
+  height: 1px;
+  background-color: #fff;
+  position: absolute;
+  left: -20px;
+  top: 50%;
+  transform: translateY(-50%);
 }
 </style>