refactor: device allocation

src/api/device.js

@@ -133,42 +133,6 @@ export function getDevicesByAdmin (query, options) {
   })
 }
 
-export function getBoundDevices (query, options) {
-  const { pageNum: pageIndex, pageSize, ...params } = query
-  return request({
-    url: '/device/allocate/page',
-    method: 'GET',
-    params: {
-      pageIndex, pageSize,
-      ...params
-    },
-    ...options
-  })
-}
-
-export function bindDeviceToObject (deviceId, org) {
-  return send({
-    url: '/device/allocate/department',
-    method: 'POST',
-    data: { deviceId, org }
-  })
-}
-
-export function unbindDevice ({ deviceRelationId, name }) {
-  return confirmAndSend('移除', name, {
-    url: `/device/allocate/${deviceRelationId}`,
-    method: 'DELETE'
-  })
-}
-
-export function unbindDevices (params) {
-  return request({
-    url: '/device/allocate/department',
-    method: 'DELETE',
-    params
-  })
-}
-
 export function activateDevice ({ id, name }) {
   return confirmAndSend('激活', name, {
     url: '/device/batch/activate',

src/views/realm/assign/Device.vue

@@ -2,29 +2,36 @@
   <schema-table
     ref="table"
     :schema="schema"
+    @row-click="onToggleSelection"
+    @selection-change="onSelectionChange"
   >
-    <table-dialog
+    <selection-table-dialog
       ref="tableDialog"
       size="lg"
-      title="分配设备"
+      title="分配设备（分配已有归属的设备将移除原有关联）"
+      message="请选择需要分配的设备"
       :schema="deviceSchema"
-      @row-dblclick="onChoosen"
+      @confirm="onBindDevices"
     />
   </schema-table>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import {
-  getDevicesByAdmin,
   getBoundDevices,
-  bindDeviceToObject,
-  unbindDevice
-} from '@/api/device'
+  getDevices,
+  bindDevices,
+  unbindDevice,
+  unbindDevices
+} from './api'
 
 export default {
   name: 'Device',
   props: {
+    groups: {
+      type: Array,
+      required: true
+    },
     group: {
       type: Object,
       required: true
@@ -33,64 +40,84 @@ export default {
   data () {
     return {
       schema: {
-        list: this.getDevices,
+        list: this.getBoundDevices,
+        condition: { termQuery: 0 },
         buttons: [
-          { type: 'add', label: '分配', on: this.onAdd }
+          { type: 'add', label: '分配', on: this.onAdd },
+          { type: 'del', label: '移除', on: this.onBatchDel }
         ],
         filters: [
+          { key: 'termQuery', type: 'select', options: [
+            { value: 0, label: '级联' },
+            { value: 1, label: '精准' }
+          ] },
           { key: 'name', type: 'search', placeholder: '设备名称' }
         ],
         cols: [
-          { prop: 'name', label: '设备名称', 'min-width': 120 },
-          { prop: 'serialNumber', label: '序列号', 'min-width': 140 },
-          { prop: 'mac', label: 'MAC', 'min-width': 140 },
+          { type: 'selection' },
+          { prop: 'name', label: '设备名称' },
+          { label: '归属部门', render: ({ org }) => org ? this.groupMap[org] || '未知' : '-' },
           { prop: 'address', label: '地址' },
           { type: 'invoke', width: 100, render: [
             { label: '移除', on: this.onDel }
           ] }
         ]
-      }
-    }
-  },
-  computed: {
-    ...mapGetters(['tenant']),
-    deviceSchema () {
-      return {
-        list: getDevicesByAdmin,
-        condition: { name: '', tenant: this.tenant },
+      },
+      deviceSchema: {
+        list: this.getDevices,
+        condition: { isFullDisplay: 0 },
         filters: [
+          { key: 'isFullDisplay', type: 'select', options: [
+            { value: 0, label: '未绑定' },
+            { value: 1, label: '未绑定自身' }
+          ] },
           { key: 'name', type: 'search', placeholder: '设备名称' }
         ],
         cols: [
-          { prop: 'name', label: '设备名称', 'min-width': 120 },
-          { prop: 'serialNumber', label: '序列号', 'min-width': 140 },
-          { prop: 'mac', label: 'MAC', 'min-width': 140 },
-          { prop: 'address', label: '地址', 'min-width': 100 }
+          { prop: 'name', label: '设备名称' },
+          { label: '归属部门', render: ({ org }) => org ? this.groupMap[org] || '未知' : '-' },
+          { prop: 'address', label: '地址' }
         ]
       }
     }
   },
+  computed: {
+    groupMap () {
+      const map = {}
+      this.createMap(this.groups, map)
+      return map
+    }
+  },
   watch: {
     group () {
       this.$refs.table.pageTo(1)
     }
   },
   methods: {
-    getDevices (params) {
+    createMap (arr, map) {
+      arr?.forEach(({ path, name, children }) => {
+        map[path] = name
+        this.createMap(children, map)
+      })
+    },
+    getBoundDevices (params) {
       return getBoundDevices({
         org: this.group.path,
         ...params
       })
     },
+    getDevices (params) {
+      return getDevices({
+        org: this.group.path,
+        ...params
+      })
+    },
     onAdd () {
       this.$refs.tableDialog.show()
     },
-    onChoosen ({ id }) {
-      bindDeviceToObject(id, this.group.path).then(() => {
-        this.$message({
-          type: 'success',
-          message: '分配成功'
-        })
+    onBindDevices ({ value, done }) {
+      bindDevices(this.group.path, value.map(({ id }) => id)).then(() => {
+        done()
         this.$refs.table.pageTo(1)
       })
     },
@@ -98,6 +125,25 @@ export default {
       unbindDevice(device).then(() => {
         this.$refs.table.decrease(1)
       })
+    },
+    onBatchDel () {
+      if (this.$selectionItems?.length) {
+        unbindDevices(this.$selectionItems.map(({ deviceRelationIds }) => deviceRelationIds)).then(() => {
+          this.$refs.table.decrease(this.$selectionItems.length)
+          this.$selectionItems = null
+        })
+      } else {
+        this.$message({
+          type: 'warning',
+          message: '请先选择需要移除的设备'
+        })
+      }
+    },
+    onToggleSelection (row) {
+      this.$refs.table.getInst().toggleRowSelection(row)
+    },
+    onSelectionChange (val) {
+      this.$selectionItems = val
     }
   }
 }

src/views/realm/assign/api.js

@@ -0,0 +1,58 @@
+import request from '@/utils/request'
+import {
+  messageSend,
+  confirmAndSend
+} from '@/api/base'
+
+export function getBoundDevices (query, options) {
+  const { pageNum: pageIndex, pageSize, ...params } = query
+  return request({
+    url: '/device/allocate/page',
+    method: 'GET',
+    params: {
+      pageIndex, pageSize,
+      ...params
+    },
+    ...options
+  })
+}
+
+export function getDevices (query, options) {
+  const { pageNum: pageIndex, pageSize, ...params } = query
+  return request({
+    url: '/device/unassigned/page',
+    method: 'GET',
+    params: {
+      pageIndex, pageSize,
+      ...params
+    },
+    ...options
+  })
+}
+
+export function bindDevices (org, deviceIds) {
+  return messageSend({
+    url: '/device/allocate/department',
+    method: 'POST',
+    data: {
+      org,
+      deviceIds
+    }
+  }, '分配')
+}
+
+export function unbindDevice ({ deviceRelationId, name }) {
+  return confirmAndSend('移除', name, {
+    url: 'device/allocate/batch/deletion',
+    method: 'POST',
+    data: [deviceRelationId]
+  })
+}
+
+export function unbindDevices (deviceRelationIds) {
+  return confirmAndSend('移除', '所选设备', {
+    url: 'device/allocate/batch/deletion',
+    method: 'POST',
+    data: deviceRelationIds
+  })
+}

src/views/realm/assign/index.vue

@@ -1,7 +1,10 @@
 <template>
   <tenant-page>
-    <template #default="{ group }">
-      <device :group="group" />
+    <template #default="{ groups, group }">
+      <device
+        :groups="groups"
+        :group="group"
+      />
     </template>
   </tenant-page>
 </template>