盒管理绑定标签

3 years ago · 3b520efa1a
3 changed files with 127 additions and 41 deletions
--- a/src/api/RFID/RFID.js
+++ b/src/api/RFID/RFID.js
@ -0,0 +1,46 @@
+import request from '@/utils/request'
+
+export function checkStatus(params) {
+  return request({
+    url: 'api/RFID/CheckStatus',
+    method: 'get',
+    params
+  })
+}
+
+// 点击排序对话框保存按钮，保存顺序
+export function readEpc(params) {
+  return request({
+    url: 'api/RFID/ReadEpc',
+    method: 'get',
+    params
+  })
+}
+
+// export function add(data) {
+//   data = Object.assign({ isTypeMetic: data.isType === 6 }, data)
+//   return request({
+//     url: 'api/archives-type/create',
+//     method: 'post',
+//     data
+//   })
+// }
+
+// export function del(ids) {
+//   const params = { id: ids[0] }
+//   return request({
+//     url: 'api/archives-type/delete',
+//     method: 'delete',
+//     params
+//   })
+// }
+
+// export function edit(data) {
+//   return request({
+//     url: 'api/archives-type/update',
+//     method: 'put',
+//     data
+//   })
+// }
+
+export default { checkStatus, readEpc }
--- a/src/views/archivesManage/caseManage/index.vue
+++ b/src/views/archivesManage/caseManage/index.vue
@ -5,17 +5,12 @@
      <crudOperation :permission="permission">
        <template v-slot:right>
          <!-- 搜索 v-model="query.enabled"-->
-          <el-select clearable size="small" class="filter-item" style="width: 100px" @change="crud.toQuery">
+          <!-- <el-select clearable size="small" class="filter-item" style="width: 100px" @change="crud.toQuery">
            <el-option v-for="item in stateOptions" :key="item.key" :label="item.label" :value="item.key" />
-          </el-select>
+          </el-select> -->
          <el-input v-model="crud.query[inputSelect]" clearable size="small" placeholder="请输入关键词" style="width: 200px;" class="input-prepend filter-item" @keyup.enter.native="crud.toQuery">
-            <el-select slot="prepend" v-model="inputSelect" style="width: 80px" @change="querySelect">
-              <el-option
-                v-for="item in queryOption"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
+            <el-select slot="prepend" v-model="inputSelect" style="width: 80px" @change="crud.toQuery">
+              <el-option v-for="item in queryOption" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-input>
          <rrOperation />
@ -23,7 +18,7 @@
        <template v-slot:rightButtonGroup>
          <div class="archives-handler-btn">
            <el-button class="packing-btn iconfont icon-weibiaoti-2" type="primary">拆盒</el-button>
-            <el-button class="binding-btn iconfont icon-weibiaoti-2" type="primary">绑定标签</el-button>
+            <el-button class="binding-btn iconfont icon-weibiaoti-2" type="primary" :disabled="crud.selections.length !== 1" @click="bindingTag">绑定标签</el-button>
          </div>
        </template>
      </crudOperation>
@ -55,6 +50,8 @@
      </el-table>
      <!--新增编辑表单渲染-->
      <eForm />
+      <!-- :chart-data="lineChartData"  -->
+      <binding-tag-dlg ref="bindingTag" />
      <pagination />
    </div>
  </div>
@ -62,6 +59,7 @@

 <script>
 import caseCrudMethod from '@/api/archivesManage/caseManage'
+import BindingTagDlg from '@/views/components/BindingTagDlg'
 import eForm from './module/form'
 import CRUD, { presenter, crud } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
@ -69,7 +67,7 @@ import rrOperation from '@crud/RR.operation'
 import pagination from '@crud/Pagination'

 export default {
-  components: { eForm, crudOperation, rrOperation, pagination },
+  components: { eForm, crudOperation, rrOperation, pagination, BindingTagDlg },
  mixins: [presenter(), crud()],
  cruds() {
    return CRUD({
@ -136,6 +134,9 @@ export default {
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
+    },
+    bindingTag() {
+      this.$refs.bindingTag.bindingVisible = true
    }
  }
 }
--- a/src/views/components/BindingTagDlg.vue
+++ b/src/views/components/BindingTagDlg.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <el-dialog class="bindingDialog" :title="bindingTitle" :visible.sync="bindingVisible" :close-on-click-modal="false" :before-close="handleClose">
+    <el-dialog class="bindingDialog" :title="bindingTitle" :visible.sync="bindingVisible" :close-on-click-modal="false" :before-close="handleClose" @opened="opened">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
@ -12,40 +12,43 @@
          <div v-else class="binding-flow">
            <div class="step-item">
              <!-- step-active 完成  step-loading 进行种 -->
-              <span class="step-left-num step-active">1</span>
+              <span class="step-left-num" :class="{ 'step-active': 1 <= step, 'step-loading': 1 === step }">1</span>
              <div class="step-right-cont">
                <p class="step-title">第一步<span>连接读写器</span></p>
-                <p class="step-tip tip-active">连接成功</p>
+                <p class="step-tip" :class="{ 'tip-error': 1 === errorStep, 'tip-active': 1 <= step }">{{ step1Message }}</p>
                <!-- err: 连接失败，请检查网络 -->
                <!-- err: 当前电脑未绑定读写器，请到档案设备里进行绑定 -->
              </div>
            </div>
            <div class="step-item">
-              <span class="step-left-num step-active step-loading">2</span>
+              <span class="step-left-num" :class="{ 'step-active': 2 <= step, 'step-loading': 2 === step }">2</span>
              <div class="pulse1" />
              <div class="pulse2" />
              <div class="pulse3" />
              <div class="step-right-cont">
                <p class="step-title">第二步<span>放入标签</span></p>
-                <p class="step-tip tip-error">请放入标签</p>
+                <p class="step-tip" :class="{ 'tip-error': 2 === errorStep, 'tip-active': 2 <= step }">{{ step2Message }}</p>
+                <!-- tip: 请放入标签 -->
                <!-- tip: 已放入标签 -->
                <!-- err: 未读取到标签，请重新放入 -->
              </div>
            </div>
            <div class="step-item">
-              <span class="step-left-num">3</span>
+              <span class="step-left-num" :class="{ 'step-active': 3 <= step, 'step-loading': 3 === step }">3</span>
              <div class="step-right-cont">
                <p class="step-title">第三步<span>读取标签</span></p>
-                <p class="step-tip">放入标签后开始读取标签</p>
+                <p class="step-tip" :class="{ 'tip-error': 3 === errorStep, 'tip-active': 3 <= step }">{{ step3Message }}</p>
+                <!-- tip: 放入标签后开始读取标签 -->
                <!-- tip: 读取成功 -->
                <!-- err: 当前标签存在多个，请取出多余的标签只保留一张！ -->
              </div>
            </div>
            <div class="step-item">
-              <span class="step-left-num">4</span>
+              <span class="step-left-num" :class="{ 'step-active': 4 <= step, 'step-loading': 4 === step }">4</span>
              <div class="step-right-cont">
                <p class="step-title">第四步<span>开始绑定</span></p>
-                <p class="step-tip">标签读取成功后，开始绑定档案</p>
+                <p class="step-tip" :class="{ 'tip-error': 4 === errorStep, 'tip-active': 4 <= step }">{{ step4Message }}</p>
+                <!-- tip: 标签读取成功后，开始绑定档案 -->
                <!-- tip: 绑定中 -->
                <!-- err: 当前标签已被绑定，是否覆盖？  -->
                <!-- 3s后 弹出覆盖绑定dialog -->
@ -54,10 +57,11 @@
              </div>
            </div>
            <div class="step-item">
-              <span class="step-left-num">5</span>
+              <span class="step-left-num" :class="{ 'step-active': 5 === step }">5</span>
              <div class="step-right-cont">
                <p class="step-title">第五步<span>绑定成功</span></p>
-                <p class="step-tip">当前标签与档案绑定成功</p>
+                <p class="step-tip" :class="{ 'tip-active': 5 === step }">{{ step5Message }}</p>
+                <!-- tip: 当前标签与档案绑定成功 -->
                <!-- tip: 绑定成功 -->
              </div>
            </div>
@ -87,15 +91,12 @@
 </template>

 <script>
+import RFID from '@/api/RFID/RFID'
 export default {
  name: 'BindingTagDlg',
  components: {},
  mixins: [],
  props: {
-    isBinding: {
-      type: Boolean,
-      default: false
-    },
    bindingId: {
      type: String,
      default: ''
@ -107,30 +108,68 @@ export default {
  },
  data() {
    return {
-      bindingVisible: false, // 绑定标签
+      isBinding: false, // 读取标签是否被覆盖
+      bindingVisible: false, // 绑定标签对话框是否显示
      bindingTitle: '绑定标签',
      tidCode: null,
-      coverBindingVisible: false
+      coverBindingVisible: false,
+      step: 1,
+      errorStep: 0,
+      step1Message: '连接中',
+      step2Message: '请放入标签',
+      step3Message: '放入标签后开始读取标签',
+      step4Message: '标签读取成功后，开始绑定档案',
+      step5Message: '当前标签与档案绑定成功'
    }
  },
-  mounted() {
-    // test
-    // setTimeout(() => {
-    //   this.coverBindingVisible = true
-    // }, 4000)
-  },
  methods: {
-    // 右边初始化数据是空
-    // [CRUD.HOOK.beforeRefresh]() {
-    //   if (this.$refs.dictDetail) {
-    //     this.$refs.dictDetail.query.id = ''
-    //   }
-    //   return true
-    // },
+    initData() {
+      this.step = 1
+      this.errorStep = 0
+      this.step1Message = '连接中'
+      this.step2Message = '请放入标签'
+      this.step3Message = '放入标签后开始读取标签'
+      this.step4Message = '标签读取成功后，开始绑定档案'
+      this.step5Message = '当前标签与档案绑定成功'
+    },
+    opened() {
+      RFID.checkStatus({ op: 'RFID_CheckStatus', sDevID: 'D001' }).then((res) => {
+        res = JSON.parse(res)
+        if (res.code === '0') {
+          this.step = 2
+          this.step1Message = '连接成功'
+          RFID.readEpc({ op: 'RFID_ReadEpc', sDevID: 'D001' }).then((res) => {
+            res = JSON.parse(res)
+            console.log(res)
+            if (res.code === '0') {
+              this.step = 3
+              this.step2Message = '已放入标签'
+            } else if (res.code === '-2') {
+              this.errorStep = 2
+              this.step2Message = '未读取到标签，请重新放入'
+            } else {
+              this.errorStep = 2
+              this.step2Message = '读取标签失败'
+            }
+          })
+        } else {
+          this.errorStep = 1
+          if (res.code === '-1') {
+            this.step1Message = '读写器状态异常(例如读写器USB线未插入)'
+          } else if (res.code === '-1000') {
+            this.step1Message = '读写器超时未响应(例如终端读写服务未开启或网络异常)'
+          }
+        }
+      }).catch(() => {
+        this.errorStep = 1
+        this.step1Message = '连接失败，请检查网络'
+      })
+    },
    // 关闭
    handleClose(done) {
      this.coverBindingVisible = false
      done()
+      this.initData()
    }
  }
 }