标签管理

1 year ago · 1dd2c54753
4 changed files with 634 additions and 0 deletions
--- a/src/api/archivesKeeping/tidManage.js
+++ b/src/api/archivesKeeping/tidManage.js
@ -0,0 +1,12 @@
+import request from '@/utils/request'
+
+// 解绑标签
+export function unbindTag(data) {
+  return request({
+    url: 'api/archivesDeposit/unbindTag',
+    method: 'post',
+    data: data
+  })
+}
+
+export default { unbindTag }
--- a/src/views/archiveKeeping/tidManage/index.vue
+++ b/src/views/archiveKeeping/tidManage/index.vue
@ -0,0 +1,51 @@
+<template>
+  <div class="app-container tab-container">
+    <div class="tab-content">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <span class="right-bottom-line" />
+      <ul class="tab-nav">
+        <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">已绑列表<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">使用记录<i /></li>
+        <!-- 最右侧装饰img -->
+        <span class="tab-right-img" />
+      </ul>
+      <component :is="comName" />
+    </div>
+  </div>
+</template>
+
+<script>
+import tidList from './tidList/index'
+import tidLog from './tidLog/index'
+export default {
+  name: 'TidManage',
+  components: {
+    tidList,
+    tidLog
+  },
+  data() {
+    return {
+      activeIndex: 0
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'tidList'
+      } else if (this.activeIndex === 1) {
+        return 'tidLog'
+      }
+      return 'tidList'
+    }
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/views/archiveKeeping/tidManage/tidList/index.vue
+++ b/src/views/archiveKeeping/tidManage/tidList/index.vue
@ -0,0 +1,277 @@
+<template>
+  <div class="recordList-main">
+    <div class="head-container">
+      <div class="head-search">
+        <el-select
+          v-model="selectStatus"
+          style="margin-right: 10px; width: 110px;"
+          placeholder="请选择"
+          @change="crud.toQuery"
+        >
+          <el-option
+            v-for="item in stateOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input
+          v-model="typeValue"
+          size="small"
+          clearable
+          placeholder="请输入搜索关键字"
+          style="width: 300px;"
+          class="input-prepend filter-item"
+          @clear="crud.toQuery"
+          @keyup.enter.native="crud.toQuery"
+          @input="typeInput"
+        >
+          <el-select slot="prepend" v-model="inputSelect" style="width: 120px" @change="clearInputValue">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-input>
+        <rrOperation />
+        <el-button class="filter-rfid" type="success" disabled><i class="iconfont icon-duqu" />读取</el-button>
+      </div>
+      <div class="handle-container">
+        <div>
+          <el-button :loading="unbindBtnLoading" class="unbind-btn" size="mini" :disabled="crud.selections.length !== 1" @click="handleUnbind(crud.selections)">
+            <i class="iconfont icon-jiebang" />
+            解绑标签
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      :data="crud.data"
+      style="width: 100%;"
+      height="calc(100vh - 346px)"
+      @selection-change="crud.selectionChangeHandler"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="55" align="center" />
+      <el-table-column prop="depositNum" label="绑定对象" align="center" min-width="56">
+        <template slot-scope="scope">
+          <span v-if="scope.row.isType === 1">档案</span>
+          <span v-if="scope.row.isType === 2">档案盒</span>
+          <span v-if="scope.row.isType === 3">层架位</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="绑定对象名称" :show-overflow-tooltip="true" align="center" min-width="150" />
+      <el-table-column prop="tid" label="电子标签" align="center" min-width="180" />
+      <el-table-column prop="update_time" width="175" label="操作时间" align="center">
+        <template slot-scope="scope">
+          <div>{{ scope.row.update_time | parseTime }}</div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-if="crud.data.length !== 0" />
+
+  </div>
+</template>
+
+<script>
+import CRUD, { presenter, crud } from '@crud/crud'
+import { unbindTag } from '@/api/archivesKeeping/tidManage'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+
+export default {
+  name: 'TidList',
+  components: { pagination, rrOperation },
+  mixins: [presenter(), crud()],
+  cruds() {
+    return CRUD({
+      url: 'api/archivesDeposit/initTagList',
+      crudMethod: {},
+      title: '标签列表',
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: false,
+        reset: false,
+        group: false
+      }
+    })
+  },
+  props: {
+    activeIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      unbindBtnLoading: false,
+      selectStatus: null,
+      stateOptions: [
+        {
+          value: '',
+          label: '全部'
+        },
+        {
+          value: 1,
+          label: '档案'
+        },
+        {
+          value: 2,
+          label: '档案盒'
+        },
+        {
+          value: 3,
+          label: '层位架'
+        }
+      ],
+      options: [
+        { value: 'tid', label: '电子标签' },
+        { value: 'title', label: '绑定对象名称' }
+      ],
+      inputSelect: '',
+      typeValue: '',
+      typeInputkey: ''
+    }
+  },
+  created() {
+    // 初始化带select的输入框的 - 搜索
+    this.inputSelect = this.options[0].value
+  },
+  mounted() {
+  },
+  methods: {
+    typeInput(e) {
+      this.typeInputkey = this.getDescByValue(
+        this.inputSelect,
+        this.options,
+        'value',
+        'value'
+      )
+      this.crud.query[this.typeInputkey] = e
+    },
+    clearInputValue(val) {
+      this.inputSelect = val
+      this.typeValue = ''
+      // 避免向后端传递多余参数,切换和重置时，若有typeInputkey则去掉form中对应参数
+      if (this.typeInputkey) {
+        delete this.crud.query[this.typeInputkey]
+      }
+    },
+    getDescByValue(inputValue, data, inputKey = 'value', outputKey = 'value') {
+      let outputValue = ''
+      if (data && data.length > 0) {
+        for (let i = 0; i < data.length; i++) {
+          const item = data[i]
+          const itemValue = item[inputKey]
+          if (inputValue + '' === itemValue + '') {
+            outputValue = item[outputKey]
+            break
+          }
+        }
+      }
+      return outputValue
+    },
+    getClassByStorageType(row) {
+      if (row.storageType === 0) { // 未入
+        return 'row-state cancel-state'
+      } else if (row.storageType === 1) { // 待入
+        return 'row-state ing-state'
+      } else if (row.storageType === 2) { // 已入
+        return 'row-state end-state'
+      } else if (row.storageType === 3) { // 待出
+        return 'row-state ing-state'
+      }
+    },
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.query.isType = this.selectStatus
+    },
+    // 新增 - 判断当前节点类型
+    [CRUD.HOOK.beforeToAdd](crud, form, btn) {
+    },
+    // 提交前的验证
+    [CRUD.HOOK.afterValidateCU](crud) {
+      return true
+    },
+    handleUnbind(data) {
+      this.$confirm('此操作将解除所选电子标签的绑定关系' + '<span>你是否还要继续？</span>', '提示', {
+        confirmButtonText: '继续',
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(() => {
+        this.unbindBtnLoading = true
+        const unbindData = data.map((item) => {
+          return {
+            labelType: item.isType,
+            tid: item.tid
+          }
+        })
+        unbindTag(unbindData).then((res) => {
+          this.unbindBtnLoading = false
+          this.$message({
+            message: '解除绑定成功',
+            type: 'success',
+            duration: 2500
+          })
+          this.crud.refresh()
+        })
+      }).catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.head-container{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .head-search{
+    margin-bottom: 0 !important;
+  }
+  .handle-container{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .crud-opts{
+      margin-right: 80px;
+    }
+  }
+}
+::v-deep .el-pagination{
+  margin: 24px 0 10px 0 !important
+}
+
+::v-deep .input-prepend .el-input__inner{
+  padding-left: 126px;
+}
+.filter-rfid{
+  border: 1px solid #0348F3 !important;
+  background-color: #fff !important;
+  color: #0348F3 !important;
+}
+
+[data-theme=light] .el-button.unbind-btn,
+[data-theme=light] .el-button.unbind-btn:hover,
+[data-theme=light] .el-button.unbind-btn:focus{
+  color: #ED4A41;
+  border-color: #ED4A41;
+  background: transparent;
+}
+
+[data-theme=light] .el-button.unbind-btn.is-disabled,
+[data-theme=light] .el-button.unbind-btn.is-disabled:hover,
+[data-theme=light] .el-button.unbind-btn.is-disabled:focus{
+  color: #ED4A41;
+  border-color: #ED4A41;
+  background-color: #FFEBEB;
+}
+</style>
--- a/src/views/archiveKeeping/tidManage/tidLog/index.vue
+++ b/src/views/archiveKeeping/tidManage/tidLog/index.vue
@ -0,0 +1,294 @@
+<template>
+  <div class="recordList-main">
+    <div class="head-container">
+      <div class="head-search">
+        <el-select
+          v-model="selectStatus"
+          style="margin-right: 10px; width: 110px;"
+          placeholder="请选择"
+          @change="crud.toQuery"
+        >
+          <el-option
+            v-for="item in stateOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select
+          v-model="selectObj"
+          style="margin-right: 10px; width: 110px;"
+          placeholder="请选择"
+          @change="crud.toQuery"
+        >
+          <el-option
+            v-for="item in objOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+
+        <el-input
+          v-model="typeValue"
+          size="small"
+          clearable
+          placeholder="请输入搜索关键字"
+          style="width: 300px;"
+          class="input-prepend filter-item"
+          @clear="crud.toQuery"
+          @keyup.enter.native="crud.toQuery"
+          @input="typeInput"
+        >
+          <el-select slot="prepend" v-model="inputSelect" style="width: 120px" @change="clearInputValue">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-input>
+        <date-range-picker v-model="blurryTime" class="date-item" />
+        <rrOperation />
+        <el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
+      </div>
+      <div class="handle-container">
+        <el-button slot="reference" size="mini" :disabled="!crud.selections.length" @click="downloadApi(crud.selections)">
+          <i class="iconfont icon-daochu" />
+          导出
+        </el-button>
+      </div>
+    </div>
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      :data="crud.data"
+      style="width: 100%;"
+      height="calc(100vh - 346px)"
+      @selection-change="crud.selectionChangeHandler"
+      @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" label="类型" align="center" min-width="60">
+        <template slot-scope="scope">
+          <span v-if="scope.row.operType === 1" class="bind-state"><i class="iconfont icon-bendiguajie" />绑定</span>
+          <span v-if="scope.row.operType === 2" class="unbind-state"><i class="iconfont icon-jiebang" />解绑</span>
+        </template>
+      </el-table-column>
+
+      <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="tid" align="center" label="电子标签" min-width="150" />
+      <el-table-column prop="update_time" align="center" label="操作时间" min-width="150">
+        <template slot-scope="scope">
+          <div>{{ scope.row.update_time | parseTime }}</div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination v-if="crud.data.length !== 0" />
+
+  </div>
+</template>
+
+<script>
+import CRUD, { presenter, crud } from '@crud/crud'
+import caseCurd from '@/api/archivesKeeping/caseManage'
+import rrOperation from '@crud/RR.operation'
+import pagination from '@crud/Pagination'
+import DateRangePicker from '@/components/DateRangePicker'
+// import qs from 'qs'
+// import { exportFile } from '@/utils/index'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'TidLog',
+  components: { pagination, rrOperation, DateRangePicker },
+  mixins: [presenter(), crud()],
+  cruds() {
+    return CRUD({
+      url: 'api/archivesDeposit/initTagLogList',
+      crudMethod: { ...caseCurd },
+      title: '标签使用记录',
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        download: false,
+        reset: false,
+        group: false
+      }
+    })
+  },
+  props: {
+    activeIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      blurryTime: [],
+      selectStatus: null,
+      selectObj: null,
+      stateOptions: [
+        {
+          value: null,
+          label: '全部'
+        },
+        {
+          value: 1,
+          label: '绑定'
+        },
+        {
+          value: 2,
+          label: '解绑'
+        }
+      ],
+      objOptions: [
+        {
+          value: 1,
+          label: '档案'
+        },
+        {
+          value: 2,
+          label: '档案盒'
+        },
+        {
+          value: 3,
+          label: '层位架'
+        }
+      ],
+      options: [
+        { value: 'tid', label: '电子标签' },
+        { value: 'title', label: '绑定对象名称' }
+      ],
+      inputSelect: '',
+      typeValue: '',
+      typeInputkey: '' // 避免向后端传递多余参数,切换和重置时，若有typeInputkey则去掉form中对应参数
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
+  watch: {
+  },
+  created() {
+    // 初始化带select的输入框的 - 搜索
+    this.inputSelect = this.options[0].value
+  },
+  mounted() {
+  },
+  methods: {
+    resetQuery() {
+      this.blurryTime = []
+      this.typeValue = ''
+      this.selectStatus = null
+      this.selectObj = null
+      this.crud.query.operType = null
+      this.crud.query.bindingType = null
+      this.crud.query[this.typeInputkey] = null
+      this.crud.toQuery()
+    },
+    typeInput(e) {
+      this.typeInputkey = this.getDescByValue(
+        this.inputSelect,
+        this.options,
+        'value',
+        'value'
+      )
+      this.crud.query[this.typeInputkey] = e
+    },
+    clearInputValue(val) {
+      this.inputSelect = val
+      this.typeValue = ''
+      // 避免向后端传递多余参数,切换和重置时，若有typeInputkey则去掉form中对应参数
+      if (this.typeInputkey) {
+        delete this.crud.query[this.typeInputkey]
+      }
+    },
+    getDescByValue(inputValue, data, inputKey = 'value', outputKey = 'value') {
+      let outputValue = ''
+      if (data && data.length > 0) {
+        for (let i = 0; i < data.length; i++) {
+          const item = data[i]
+          const itemValue = item[inputKey]
+          if (inputValue + '' === itemValue + '') {
+            outputValue = item[outputKey]
+            break
+          }
+        }
+      }
+      return outputValue
+    },
+    [CRUD.HOOK.beforeRefresh]() {
+      this.crud.query.operType = this.selectStatus
+      this.crud.query.bindingType = this.selectObj
+      if (this.blurryTime) {
+        this.crud.query.startTime = this.blurryTime[0]
+        this.crud.query.endTime = this.blurryTime[1]
+      }
+    },
+    getRowKey(row) {
+      return row.id
+    },
+    clickRowHandler(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // 导出接口调用
+    downloadApi(data) {
+      // const ids = data.map(item => { return item.id })
+      // const params = {
+      //   'logIds': ids
+      // }
+      // exportFile(this.baseApi + '/api/archivesDeposit/exportTagLogList?' + qs.stringify(params, { indices: false }))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.head-container{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .head-search{
+    margin-bottom: 0 !important;
+  }
+  .handle-container{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .crud-opts{
+      margin-right: 80px;
+    }
+  }
+}
+::v-deep .el-pagination{
+  margin: 24px 0 10px 0 !important
+}
+
+::v-deep .input-prepend .el-input__inner{
+  padding-left: 126px;
+}
+.filter-rfid{
+  border: 1px solid #0348F3 !important;
+  background-color: #fff !important;
+  color: #0348F3 !important;
+}
+.bind-state{
+  color: #0FC278;
+}
+.unbind-state{
+  color: #ED4A41;
+}
+</style>