|
|
|
<script lang="ts" setup>
|
|
|
|
import { ref, watch } from 'vue'
|
|
|
|
import { Space } from 'ant-design-vue'
|
|
|
|
import { DisconnectOutlined, LinkOutlined } from '@ant-design/icons-vue'
|
|
|
|
import { BindingDeviceDrawer, GroupList } from './components'
|
|
|
|
import { useColumns, useSearchFormSchemas } from './data'
|
|
|
|
import { BasicTable, TableAction, useTable } from '@/components/Table'
|
|
|
|
import { useMessage } from '@/hooks/web/useMessage'
|
|
|
|
import { getDeviceListByGroup, unbindingDeviceFromGroup } from '@/api/device-manage/group'
|
|
|
|
import { useDrawer } from '@/components/Drawer'
|
|
|
|
import { noop } from '@/utils'
|
|
|
|
import { usePermission } from '@/hooks/web/usePermission'
|
|
|
|
|
|
|
|
const { hasPermission } = usePermission()
|
|
|
|
|
|
|
|
const [register, { getSelectRowKeys, reload }] = useTable({
|
|
|
|
async api(params) {
|
|
|
|
if (!selectedGroupId.value)
|
|
|
|
return []
|
|
|
|
|
|
|
|
return getDeviceListByGroup({
|
|
|
|
...params,
|
|
|
|
groupId: selectedGroupId.value,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
rowKey: 'id',
|
|
|
|
columns: useColumns(),
|
|
|
|
formConfig: {
|
|
|
|
schemas: useSearchFormSchemas(),
|
|
|
|
labelWidth: 90,
|
|
|
|
},
|
|
|
|
rowSelection: {},
|
|
|
|
bordered: true,
|
|
|
|
canResize: false,
|
|
|
|
useSearchForm: true,
|
|
|
|
actionColumn: {
|
|
|
|
width: 210,
|
|
|
|
title: '操作',
|
|
|
|
dataIndex: 'action',
|
|
|
|
auth: ['device_group_unbinding', 'device_group_device_view'],
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|
|
|
|
const [registerBindingDeviceDrawer, { openDrawer }] = useDrawer()
|
|
|
|
|
|
|
|
const selectedGroupId = ref<string | undefined>()
|
|
|
|
watch(selectedGroupId, reload)
|
|
|
|
|
|
|
|
const message = useMessage()
|
|
|
|
function handleBindingDivice() {
|
|
|
|
if (!selectedGroupId.value)
|
|
|
|
return message.createMessage.warn('请先选择分组')
|
|
|
|
|
|
|
|
openDrawer(true, selectedGroupId.value)
|
|
|
|
}
|
|
|
|
function handleUnbindingDivice(id?: string) {
|
|
|
|
const selectionKeys = id ? [id] : getSelectRowKeys()
|
|
|
|
if (!selectionKeys.length)
|
|
|
|
return message.createMessage.warn('请先选择设备')
|
|
|
|
|
|
|
|
function execute() {
|
|
|
|
unbindingDeviceFromGroup(selectedGroupId.value!, selectionKeys.join(','))
|
|
|
|
.then(() => {
|
|
|
|
message.createMessage.success('解绑成功')
|
|
|
|
reload()
|
|
|
|
})
|
|
|
|
.catch(noop)
|
|
|
|
}
|
|
|
|
|
|
|
|
if (id)
|
|
|
|
return execute()
|
|
|
|
|
|
|
|
// 批量绑定设备二次确认
|
|
|
|
message.createConfirm({
|
|
|
|
iconType: 'warning',
|
|
|
|
title: '是否要解绑选择的设备?',
|
|
|
|
onOk: execute,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div flex="~">
|
|
|
|
<GroupList v-model:selectedGroupId="selectedGroupId" my="12px" ml="12px" />
|
|
|
|
<BasicTable flex="1" @register="register">
|
|
|
|
<template v-if="hasPermission(['device_group_binding', 'device_group_unbinding'])" #tableTitle>
|
|
|
|
<Space>
|
|
|
|
<a-button v-if="hasPermission('device_group_binding')" @click="handleBindingDivice">
|
|
|
|
<LinkOutlined />
|
|
|
|
批量绑定设备
|
|
|
|
</a-button>
|
|
|
|
<a-button v-if="hasPermission('device_group_unbinding')" @click="handleUnbindingDivice()">
|
|
|
|
<DisconnectOutlined />
|
|
|
|
批量解绑设备
|
|
|
|
</a-button>
|
|
|
|
</Space>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template #bodyCell="{ column, record }">
|
|
|
|
<template v-if="column.key === 'action'">
|
|
|
|
<TableAction
|
|
|
|
:actions="[
|
|
|
|
{
|
|
|
|
icon: 'i-ant-design:file-search-outlined',
|
|
|
|
label: '设备详情',
|
|
|
|
auth: 'device_group_device_view',
|
|
|
|
onClick: () => $router.push(`/device-manage/device/detail/${record.id}`),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
icon: 'i-ant-design:edit-outlined',
|
|
|
|
label: '解绑设备',
|
|
|
|
auth: 'device_group_unbinding',
|
|
|
|
popConfirm: {
|
|
|
|
title: '是否要解绑该设备?',
|
|
|
|
placement: 'left',
|
|
|
|
confirm: () => handleUnbindingDivice(record.id),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]"
|
|
|
|
/>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</BasicTable>
|
|
|
|
|
|
|
|
<BindingDeviceDrawer @register="registerBindingDeviceDrawer" @success="reload" />
|
|
|
|
</div>
|
|
|
|
</template>
|