From e063cb47353bc39a7286a109100e4537e5be0b55 Mon Sep 17 00:00:00 2001
From: z_yu <1534695664@qq.com>
Date: Fri, 15 Jul 2022 17:33:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/storeManage/deviceManage/mac.js       |  18 ++
 src/api/storeManage/deviceManage/param.js     |  30 ++++
 src/views/storeManage/deviceManage/index.vue  |   9 +-
 .../deviceManage/module/bindParams.vue        | 164 +++++++++++++++++
 .../deviceManage/module/deviceDetail.vue      | 166 +++++++++++++-----
 5 files changed, 334 insertions(+), 53 deletions(-)
 create mode 100644 src/api/storeManage/deviceManage/mac.js
 create mode 100644 src/api/storeManage/deviceManage/param.js
 create mode 100644 src/views/storeManage/deviceManage/module/bindParams.vue

diff --git a/src/api/storeManage/deviceManage/mac.js b/src/api/storeManage/deviceManage/mac.js
new file mode 100644
index 0000000..c2a2e5f
--- /dev/null
+++ b/src/api/storeManage/deviceManage/mac.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+export function getMac() {
+  return request({
+    url: 'api/mac/get',
+    method: 'get'
+  })
+}
+
+export function bindMac(data) {
+  return request({
+    url: 'api/mac/bind',
+    method: 'post',
+    data
+  })
+}
+
+export default { getMac, bindMac }
diff --git a/src/api/storeManage/deviceManage/param.js b/src/api/storeManage/deviceManage/param.js
new file mode 100644
index 0000000..3de1354
--- /dev/null
+++ b/src/api/storeManage/deviceManage/param.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+export function getParams(params) {
+  return request({
+    url: 'api/spec/list',
+    method: 'get',
+    params
+  })
+}
+
+export function del(ids) {
+  const params = {
+    id: ids[0]
+  }
+  return request({
+    url: 'api/storeroom/delete',
+    method: 'delete',
+    params
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/storeroom/update',
+    method: 'put',
+    data
+  })
+}
+
+export default { getParams, edit, del }
diff --git a/src/views/storeManage/deviceManage/index.vue b/src/views/storeManage/deviceManage/index.vue
index 05013a6..78ef012 100644
--- a/src/views/storeManage/deviceManage/index.vue
+++ b/src/views/storeManage/deviceManage/index.vue
@@ -90,9 +90,9 @@ export default {
         ]
       },
       permission: {
-        add: ['admin', 'deviceManage:add'],
-        edit: ['admin', 'deviceManage:edit'],
-        del: ['admin', 'deviceManage:del']
+        add: ['admin', 'storeroom:add'],
+        edit: ['admin', 'storeroom:edit'],
+        del: ['admin', 'storeroom:del']
       },
       defaultProps: {
         children: 'children',
@@ -123,9 +123,8 @@ export default {
     handleNodeClick(val) {
       if (val) {
         this.crud.selectionChangeHandler([val])
-        this.$refs.deviceDetail.query.id = val.id
         this.$refs.deviceDetail.storeroomId = val
-        // this.$refs.deviceDetail.crud.toQuery()
+        this.$refs.deviceDetail.crud.toQuery()
         this.activeRightBtn = true
       }
     },
diff --git a/src/views/storeManage/deviceManage/module/bindParams.vue b/src/views/storeManage/deviceManage/module/bindParams.vue
new file mode 100644
index 0000000..e811395
--- /dev/null
+++ b/src/views/storeManage/deviceManage/module/bindParams.vue
@@ -0,0 +1,164 @@
+<template>
+  <!--表单组件-->
+  <!-- :before-close="crud.cancelCU" -->
+  <el-dialog class="binding-params-dialog" :close-on-click-modal="false" :visible.sync="bingParamsVisible" title="绑定参数">
+    <span class="dialog-right-top" />
+    <span class="dialog-left-bottom" />
+    <div class="setting-dialog">
+      <div class="head-container">
+        <el-form ref="form" :model="form" inline :rules="rules" size="small" label-width="80px">
+          <el-form-item label="参数ID" prop="paramId">
+            <el-input v-model="form.paramId" style="width: 120px;" />
+          </el-form-item>
+          <el-form-item label="参数名称" prop="paramName">
+            <el-input v-model="form.paramName" style="width: 120px;" />
+          </el-form-item>
+          <el-form-item label="单位值" prop="unit">
+            <el-input v-model="form.unit" style="width: 120px;" />
+          </el-form-item>
+          <el-button type="primary" @click="add">添加</el-button>
+        </el-form>
+      </div>
+      <!-- <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="区域名称" prop="name">
+          <el-input v-model="form.name" style="width: 370px;" />
+        </el-form-item>
+      </el-form> -->
+      <el-table ref="table" v-loading="crud.loading" :data="params">
+        <el-table-column type="index" label="序号" width="55" align="center" />
+        <el-table-column prop="paramId" label="参数ID" align="center" />
+        <el-table-column prop="paramName" label="参数名称" align="center" />
+        <el-table-column prop="unit" label="单位值" align="center" />
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button size="mini" icon="el-icon-delete" class="delete-btn" @click="handleDelete(scope.$index)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import crudMethod from '@/api/storeManage/deviceManage/param'
+import CRUD, { presenter, form } from '@crud/crud'
+// import Vue from 'vue'
+
+const defaultForm = { id: null, name: null, sort: null }
+
+export default {
+  name: 'BingParams',
+  cruds() {
+    return [
+      CRUD({
+        title: '区域', url: 'api/storeroom/tree',
+        crudMethod: { ...crudMethod },
+        sort: ['sort,asc']
+      })
+    ]
+  },
+  mixins: [presenter(), form(defaultForm)],
+  data() {
+    return {
+      rules: {
+        name: [
+          { required: true, message: '请输入区域名称', trigger: 'blur' }
+        ]
+      },
+      params: [],
+      form: {},
+      // permission: {
+      //   add: ['admin', 'storeroom:add'],
+      //   edit: ['admin', 'storeroom:edit'],
+      //   del: ['admin', 'storeroom:del']
+      // },
+      // defaultProps: {
+      //   children: 'children',
+      //   label: 'name'
+      // },
+      // activeRightBtn: false,
+      bingParamsVisible: false
+      // ,
+      // deleteData: {},
+      // allowDelete: false, // 是否允许删除当前区域
+      // defaultExpandedKeys: []
+    }
+  },
+  methods: {
+    // // 获取数据前设置好接口地址
+    // [CRUD.HOOK.beforeRefresh]() {
+    //   if (this.$refs.deviceDetail) {
+    //     this.$refs.deviceDetail.query.id = ''
+    //   }
+    //   return true
+    // },
+    // [CRUD.HOOK.afterRefresh]() {
+    //   Vue.set(this.defaultExpandedKeys, 0, this.crud.data[0].id)
+    //   this.$refs.tree.setCurrentKey(this.crud.data[0].id)
+    //   this.$refs.deviceDetail.storeroomId = this.crud.data[0].id
+    //   this.crud.selections = [this.crud.data[0]]
+    // },
+    // // 选中区域后，显示设备详情数据
+    // handleNodeClick(val) {
+    //   if (val) {
+    //     this.crud.selectionChangeHandler([val])
+    //     this.$refs.deviceDetail.query.id = val.id
+    //     this.$refs.deviceDetail.storeroomId = val
+    //     // this.$refs.deviceDetail.crud.toQuery()
+    //     this.activeRightBtn = true
+    //   }
+    // },
+    // // 编辑前将区域临时清空，避免日志入库数据过长
+    // [CRUD.HOOK.beforeToEdit](crud, form) {
+    //   form.deviceDetails = null
+    // },
+    // [CRUD.HOOK.beforeSubmit]() {
+    //   this.crud.form.pid = this.defaultExpandedKeys[0]
+    //   this.crud.form.remark = this.crud.form.name
+    //   if (!this.crud.form.sort) {
+    //     this.crud.form.sort = this.crud.data[0].children.reduce((prev, cur) => { return { sort: Math.max(prev.sort, cur.sort) } }).sort + 1
+    //   }
+    // },
+    // toDelete(data) {
+    //   this.deleteData = data
+    //   this.deleteVisible = true
+    //   this.allowDelete = this.$refs.deviceDetail.crud.data && this.$refs.deviceDetail.crud.data.length === 0
+    // },
+    // handleConfirm() {
+    //   this.deleteVisible = false
+    //   this.crud.delAllLoading = true
+    //   this.crud.doDelete(this.deleteData)
+    // },
+    // handleClose(done) {
+    //   this.deleteData = {}
+    //   done()
+    // }
+    handleDelete(index) {
+      // this.params.splice(index, 1)
+    },
+    add() {
+      // this.params.push(JSON.parse(JSON.stringify(this.form)))
+      // this.form.paramId = ''
+      // this.form.paramName = ''
+      // this.form.unit = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-scroll {
+  height: calc(100vh - 275px);
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+.binding-params-dialog {
+  ::v-deep .el-dialog{
+    width: 950px !important;
+  }
+}
+.delete-btn{
+  background-color: #F65163;
+  border-color: #F65163;
+}
+</style>
diff --git a/src/views/storeManage/deviceManage/module/deviceDetail.vue b/src/views/storeManage/deviceManage/module/deviceDetail.vue
index e33625e..475e618 100644
--- a/src/views/storeManage/deviceManage/module/deviceDetail.vue
+++ b/src/views/storeManage/deviceManage/module/deviceDetail.vue
@@ -8,14 +8,16 @@
         </template>
         <template v-slot:right>
           <el-button v-permission="permission.del" icon="el-icon-delete" size="mini" :loading="crud.delAllLoading" :disabled="crud.selections && crud.selections.length === 0" @click="toDelete(crud.selections)">删除</el-button>
-          <!-- <el-select v-model="deviceType" placeholder="全部">
-            <el-option
-              v-for="item in deviceTypeOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select> -->
+          <el-select v-model="deviceType" class="filter-item" style="margin-left:10px" placeholder="全部">
+            <el-option :key="0" label="全部" value="" />
+            <el-option v-for="item in deviceTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select> <!-- -->
+        </template>
+        <template v-slot:rightButtonGroup>
+          <div class="archives-handler-btn">
+            <el-button class="binding-mac-btn iconfont icon-bangdingshebei-fanbai" type="primary" :disabled="crud.selections.length !== 1" @click="bindingMac()">绑定设备</el-button>
+            <el-button class="binding-param-btn iconfont icon-bangdingcanshu-fanbai" type="primary" :disabled="crud.selections.length !== 1" @click="bindingParam(crud.selections[0].id)">绑定参数</el-button>
+          </div>
         </template>
       </crudOperation>
     </div>
@@ -134,6 +136,39 @@
         </div>
       </div>
     </el-dialog>
+    <el-dialog :close-on-click-modal="false" :visible.sync="bindingMacVisible" title="绑定设备">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">
+          <el-form-item label="当前电脑Mac地址">
+            <el-input v-model="currentMac" style="width: 370px;" :disabled="true" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="dobindingMac()">
+            确定绑定
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog :close-on-click-modal="false" :visible.sync="bindingMacVisible" title="绑定设备">
+      <span class="dialog-right-top" />
+      <span class="dialog-left-bottom" />
+      <div class="setting-dialog">
+        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">
+          <el-form-item label="当前电脑Mac地址">
+            <el-input v-model="currentMac" style="width: 370px;" :disabled="true" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="doBindingMac()">
+            确定绑定
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <bindParams ref="bindingParamsDlg" />
     <div class="container-right" style="min-height: calc(100vh - 242px);">
       <span class="right-top-line" />
       <span class="left-bottom-line" />
@@ -160,17 +195,20 @@
 
 <script>
 import crudDevice from '@/api/storeManage/deviceManage/device'
+import macApi from '@/api/storeManage/deviceManage/mac'
+import paramApi from '@/api/storeManage/deviceManage/param'
 import CRUD, { presenter, header, form } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
+import bindParams from './bindParams'
 const defaultForm = { supplier: null, id: null, deviceId: null, deviceName: null, deviceIp: null, devicePort: null, rowNo: null, areaNo: null, sumColumnNo: null, firstColumnNo: null, partNo: null, storeroomCode: null, columnRowNo: null, deviceAccount: null, devicePassword: null, cupboardNo: null, videoRoute: null, isLinkage: { stateType: 1, lend: false, borrow: false, inBound: false, outBound: false }, isCallback: { stateType: 2, lend: false, borrow: false, inBound: false, outBound: false }, isNotice: false }
 
 export default {
-  components: { crudOperation, pagination },
+  components: { crudOperation, pagination, bindParams },
   cruds() {
     return [
       CRUD({
-        title: '设备', url: 'api/dictrionary/findSubsetById', query: { id: '' },
+        title: '设备', url: 'api/device/list',
         crudMethod: { ...crudDevice },
         optShow: {
           add: false,
@@ -180,7 +218,6 @@ export default {
           download: false,
           group: false
         },
-        queryOnPresenterCreated: false,
         sort: ['dicSequence,asc']
       })
     ]
@@ -200,29 +237,16 @@ export default {
       storeroomId: null,
       deviceType: null, // 设备列表筛选项目（设备类型）
       needRefreshTree: false,
-      // rules: {
-      //   // deviceInfo.
-      //   supplier: [
-      //     { required: true, message: '请选择设备产商', trigger: 'blur' }
-      //   ],
-      //   deviceName: [
-      //     { required: true, message: '请输入设备名称', trigger: 'blur' }
-      //   ]
-      //   // ,
-      //   // deviceIp: [
-      //   //   { required: true, message: '请输入设备IP', trigger: 'blur' },
-      //   //   { validator: checkDeviceIp, trigger: 'blur' }
-      //   // ]
-      //   // deviceInfo.deviceName
-      // },
       permission: {
-        add: ['admin', 'dict:add'],
-        edit: ['admin', 'dict:edit'],
-        del: ['admin', 'dict:del']
+        add: ['admin', 'device:add'],
+        edit: ['admin', 'device:edit'],
+        del: ['admin', 'device:del']
       },
       deleteVisible: false,
       deleteData: {},
       selectDeviceTypeVisible: false,
+      bindingMacVisible: false,
+      currentMac: '',
       deviceTypeOptions: [
         {
           id: '89284777EFADA87FA342A7',
@@ -381,6 +405,13 @@ export default {
       return validateRule
     }
   },
+  created() {
+    // this.crud.data = [
+    //   { id: 'DF333EF5B14634550D6898' },
+    //   { id: 'AEBC0ABC616E66544B82AC' },
+    //   { id: '9027E25364729064673FCC' }
+    // ]
+  },
   methods: {
     // [CRUD.HOOK.afterSubmit]() {
     //   this.needRefreshTree = true
@@ -392,14 +423,15 @@ export default {
       this.crud.form.storeroomId = this.storeroomId
       this.crud.form.supplierId = this.supplierOptions.find(item => item.id === this.crud.form.supplier)
       this.crud.form.deviceTypeId = this.deviceTypeOptions.find(item => item.name === this.selectedDeviceType)
-      this.crud.form.sequence = 2
-      // if (!this.crud.form.isSequence) {
-      // this.crud.form.isSequence = this.crud.data.reduce((prev, cur) => { return { isSequence: Math.max(prev.isSequence, cur.isSequence) } }).isSequence + 1
-      // }
     },
     // 获取数据前设置默认参数
     [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query.id = this.storeroomId
+      if (this.storeroomId) {
+        this.crud.query.storeroomId = this.storeroomId.id
+      }
+      if (this.deviceType !== '0') {
+        this.crud.query.deviceTypeId = this.deviceType
+      }
     },
     // [CRUD.HOOK.afterRefresh](crud) {
     //   if (this.needRefreshTree) {
@@ -408,21 +440,10 @@ export default {
     //   }
     // },
     clickRowHandler(row) {
-      this.$refs.table.clearSelection()
       this.$refs.table.toggleRowSelection(row)
     },
     selectionChangeHandler(val) {
-      if (val.length > 1) {
-        // 取出最后val的最后一个返回出来
-        const finalVal = val.pop()
-        // 清除所有选中
-        this.$refs.table.clearSelection()
-        // 给最后一个加上选中
-        this.$refs.table.toggleRowSelection(finalVal)
-        this.crud.selectionChangeHandler([finalVal])
-      } else {
-        this.crud.selectionChangeHandler(val)
-      }
+      this.crud.selections = val
     },
     toDelete(data) {
       this.deleteData = data
@@ -449,13 +470,62 @@ export default {
       crudDevice.getSupplier().then((data) => {
         this.supplierOptions.splice(0, 0, ...data)
       })
+    },
+    bindingMac() {
+      macApi.getMac().then((data) => {
+        this.currentMac = data
+        this.bindingMacVisible = true
+      })
+    },
+    doBindingMac() {
+      macApi.bindMac({ deviceId: this.crud.selections[0].id, macAddress: this.currentMac }).then((data) => {
+        this.bindingMacVisible = false
+        this.$message({
+          message: '绑定成功',
+          type: 'success'
+        })
+      })
+    },
+    bindingParam(id) {
+      paramApi.getParams({ deviceInfoId: id }).then((data) => {
+        this.$refs.bindingParamsDlg.params = data
+        this.$refs.bindingParamsDlg.bingParamsVisible = true
+      })
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-::v-deep thead .el-table-column--selection .cell {
-  display: none;
+.archives-handler-btn {
+  .el-button {
+    padding: 0 13px 0 3px;
+    ::v-deep span {
+      margin-left: 5px;
+    }
+    &.binding-mac-btn {
+      border-color: #fd8042;
+      background-color: #fd8042;
+      &.is-disabled {
+        border-color: #7e4021;
+        background-color: #7e4021;
+      }
+    }
+    &.binding-param-btn {
+      border-color: #1aae93;
+      background-color: #1aae93;
+      &.is-disabled {
+        border-color: #0d5649;
+        background-color: #0d5649;
+      }
+    }
+    // &.is-disabled{
+    //   color: #666;
+    // }
+  }
+  .iconfont {
+    line-height: 30px;
+  }
+  margin-left: auto;
 }
 </style>