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.
126 lines
3.8 KiB
126 lines
3.8 KiB
<script lang="ts" setup> |
|
import { ref } 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>() |
|
|
|
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" @change="reload" /> |
|
<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>
|
|
|