You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

128 lines
3.8 KiB

<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>