feat(device): attention

src/api/device.js

@@ -112,6 +112,8 @@ export function deleteDevice ({ id, name, masterId }) {
   return confirm(`删除设备【${name}】？`).then(() => deleteDeviceById(id))
 }
 
+// isAttentionFlag 是否带关注标识位，开启值为1
+// attentionValue 过滤值，2为不过滤
 export function getDevices (query, options) {
   return getDevicesByQuery(addTenantOrOrg(query), options)
 }
@@ -538,3 +540,25 @@ export function authCode (stream) {
     method: 'GET'
   })
 }
+
+export function addDeviceAttention (deviceId) {
+  return update({
+    url: `/device/attention/add/${deviceId}`,
+    method: 'POST',
+    data: { deviceId }
+  }, '关注')
+}
+
+export function cancelDeviceAttention (deviceId) {
+  return update({
+    url: `/device/attention/cancel/${deviceId}`,
+    method: 'DELETE'
+  }, '取关')
+}
+
+export function getDeviceAttentionList () {
+  return request({
+    url: '/device/user/attention/list',
+    method: 'GET'
+  })
+}

src/views/realm/device/index.vue

@@ -10,12 +10,16 @@
       class="c-sibling-item c-sidebar u-width--md"
       @change="onGroupChanged"
     />
+    <table-dialog
+      ref="attentionList"
+      title="关注列表"
+      :schema="attentionSchema"
+    />
     <schema-table
       ref="table"
       class="c-sibling-item far"
       row-key="id"
       :schema="schema"
-      @row-click="onRowClick"
     />
     <confirm-dialog
       ref="editDialog"
@@ -75,33 +79,72 @@ import {
   getSubDevices,
   activateDevice,
   deactivateDevice,
-  updateDevice
+  updateDevice,
+  addDeviceAttention,
+  cancelDeviceAttention,
+  getDeviceAttentionList
 } from '@/api/device'
 
 export default {
   name: 'DeviceManagement',
   data () {
     return {
+      attentionSchema: {
+        nonPagination: true,
+        list: getDeviceAttentionList,
+        cols: [
+          { type: 'refresh', render: (data, h) => h(
+            'i',
+            {
+              staticClass: `${data.ifAttention === 1 ? 'el-icon-star-on u-font-size--xl' : 'el-icon-star-off u-font-size--lg'} u-color--warning`,
+              on: {
+                click: () => {
+                  data.ifAttention === 1 ? this.cancelDeviceAttention(data) : this.addDeviceAttention(data)
+                }
+              }
+            }
+          ) },
+          { prop: 'name', label: '设备名称' }
+        ]
+      },
       schema: {
         keepalive: true,
         list: this.getDevicesByQuery,
         transform: this.transform,
         transformData: __SUB_DEVICE__ && this.transformTableData,
+        // listeners: {
+        //   'row-click': this.onRowClick
+        // },
         filters: [
           { key: 'name', type: 'search', placeholder: '设备名称' }
         ],
+        buttons: [
+          { label: '关注列表', on: this.onShowAttentionList }
+        ],
         cols: [
-          { type: 'refresh', render: __SUB_DEVICE__
-            ? (data, h) => data.isMaster
-              ? h('i', {
-                staticClass: `o-expand-icon u-pointer ${data.loading ? 'el-icon-loading' : 'el-icon-arrow-right'}`,
-                class: { expand: data.expand }
-              })
-              : null
-            : null },
-          __SUB_DEVICE__
-            ? { label: '设备名称', render: (data, h) => data.empty ? h('span', { staticClass: 'u-color--info' }, '暂无备份设备') : data.name, 'min-width': 120 }
-            : { prop: 'name', label: '设备名称', 'min-width': 120 },
+          // { type: 'refresh', render: __SUB_DEVICE__
+          //   ? (data, h) => data.isMaster
+          //     ? h('i', {
+          //       staticClass: `o-expand-icon u-pointer ${data.loading ? 'el-icon-loading' : 'el-icon-arrow-right'}`,
+          //       class: { expand: data.expand }
+          //     })
+          //     : null
+          //   : null },
+          // __SUB_DEVICE__
+          //   ? { label: '设备名称', render: (data, h) => data.empty ? h('span', { staticClass: 'u-color--info' }, '暂无备份设备') : data.name, 'min-width': 120 }
+          //   : { prop: 'name', label: '设备名称', 'min-width': 120 },
+          { type: 'refresh', render: (data, h) => h(
+            'i',
+            {
+              staticClass: `${data.ifAttention === 1 ? 'el-icon-star-on u-font-size--xl' : 'el-icon-star-off u-font-size--lg'} u-color--warning`,
+              on: {
+                click: () => {
+                  data.ifAttention === 1 ? this.cancelDeviceAttention(data) : this.addDeviceAttention(data)
+                }
+              }
+            }
+          ) },
+          { prop: 'name', 'min-width': 120 },
           { prop: 'serialNumber', label: '序列号' },
           { prop: 'mac', label: 'MAC' },
           { label: '运行时间', render: ({ empty, openTime, closeTime }) => empty
@@ -151,6 +194,8 @@ export default {
       }
       return getDevicesByQuery({
         org: this.$group.path,
+        isAttentionFlag: 1,
+        attentionValue: 2,
         ...params
       })
     },
@@ -314,6 +359,24 @@ export default {
         name: 'device-management-settings',
         params: { id }
       })
+    },
+    addDeviceAttention (row) {
+      addDeviceAttention(row.id).then(() => {
+        row.ifAttention = 1
+      })
+    },
+    cancelDeviceAttention (row) {
+      cancelDeviceAttention(row.id).then(() => {
+        row.ifAttention = 0
+      })
+    },
+    cancelDeviceAttentionByDialog (row) {
+      cancelDeviceAttention(row.id).then(() => {
+        this.$refs.table.pageTo()
+      })
+    },
+    onShowAttentionList () {
+      this.$refs.attentionList.show()
     }
   }
 }