smsb-web-develop/src/views/realm/assign/Device.vue

<template>
  <schema-table
    ref="table"
    :schema="schema"
  >
    <table-dialog
      ref="tableDialog"
      title="分配设备"
      :schema="deviceSchema"
      @choosen="onChoosen"
    />
  </schema-table>
</template>

<script>
import { getUserGroups } from '@/api/user'
import {
  getProducts,
  getDevicesByAdmin,
  getDevicesByRelation,
  bindDeviceToObject,
  unbindDevice
} from '@/api/device'

export default {
  name: 'Device',
  props: {
    isGroup: {
      type: [Boolean, String],
      default: false
    },
    tenant: {
      type: Object,
      required: true
    },
    value: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      schema: {
        list: this.getDevices,
        buttons: [
          { type: 'add', label: '分配', on: this.onAdd }
        ],
        filters: [
          { key: 'name', type: 'search', placeholder: '设备名称' }
        ],
        cols: [
          { prop: 'name', label: '设备名称' },
          { prop: 'serialNumber', label: '序列号' },
          { prop: 'mac', label: 'MAC' },
          { prop: 'remark', label: '地址' },
          { type: 'invoke', width: 100, render: [
            { label: '移除', on: this.onDel }
          ] }
        ]
      }
    }
  },
  computed: {
    deviceSchema () {
      return {
        condition: { productId: void 0, name: '', tenant: this.tenant.path },
        list: getDevicesByAdmin,
        filters: [
          {
            key: 'productId',
            type: 'select',
            placeholder: '全部产品',
            remote: getProducts,
            condition: { tenant: this.tenant.path },
            pagination: true,
            value: 'id',
            label: 'name'
          },
          { key: 'name', type: 'search', placeholder: '设备名称' }
        ],
        cols: [
          { prop: 'name', label: '设备名称' },
          { prop: 'serialNumber', label: '序列号' },
          { prop: 'mac', label: 'MAC' },
          { prop: 'remark', label: '地址' }
        ]
      }
    }
  },
  watch: {
    value () {
      this.$userGroup = null
      this.$refs.table.pageTo(1)
    }
  },
  methods: {
    getDevices (params) {
      const queryParams = { ...params }
      if (this.isGroup) {
        queryParams.org = this.value
      } else {
        queryParams.user = this.value
      }
      return getDevicesByRelation(queryParams)
    },
    onAdd () {
      this.$refs.tableDialog.show()
    },
    async onChoosen ({ value: { id } }) {
      const loading = this.$showLoading()
      try {
        let key = this.value
        if (!this.isGroup) {
          if (!this.$userGroup) {
            const groups = await getUserGroups(this.value)
            this.$userGroup = groups[groups.length - 1].path
          }
          key = `${this.$userGroup}/${key}`
        }
        await bindDeviceToObject(id, key)
        this.$message({
          type: 'success',
          message: '分配成功'
        })
        this.$refs.table.pageTo(1)
      } catch (e) {
        console.log(e)
      }
      this.$closeLoading(loading)
    },
    onDel (device) {
      unbindDevice(device).then(() => {
        this.$refs.table.decrease(1)
      })
    }
  }
}
</script>