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

<template>
  <schema-table
    ref="table"
    :schema="schema"
    @row-click="onToggleSelection"
    @selection-change="onSelectionChange"
  >
    <selection-table-dialog
      ref="tableDialog"
      size="lg"
      title="分配设备（分配已有归属的设备将移除原有关联）"
      message="请选择需要分配的设备"
      :schema="deviceSchema"
      @confirm="onBindDevices"
    />
  </schema-table>
</template>

<script>
import {
  getBoundDevices,
  getDevices,
  bindDevices,
  unbindDevice,
  unbindDevices
} from './api'

export default {
  name: 'Device',
  props: {
    groups: {
      type: Array,
      required: true
    },
    group: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      schema: {
        list: this.getBoundDevices,
        condition: { termQuery: 0 },
        buttons: [
          { 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: [
          { type: 'selection' },
          { prop: 'name', label: '设备名称' },
          { label: '归属部门', render: ({ org }) => org ? this.groupMap[org] || '未知' : '-' },
          { prop: 'address', label: '地址' },
          { type: 'invoke', width: 100, render: [
            { label: '移除', on: this.onDel }
          ] }
        ]
      },
      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: '设备名称' },
          { 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: {
    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()
    },
    onBindDevices ({ value, done }) {
      bindDevices(this.group.path, value.map(({ id }) => id)).then(() => {
        done()
        this.$refs.table.pageTo(1)
      })
    },
    onDel (device) {
      unbindDevice(device).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onBatchDel () {
      if (this.$selectionItems?.length) {
        unbindDevices(this.$selectionItems.map(({ deviceRelationId }) => deviceRelationId)).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
    }
  }
}
</script>