feat: 设备详情子设备添加和删除

 <template>
 <template>
   <div class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700">
   <div class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700">
     <BasicTable @register="registerTable">
     <BasicTable @register="registerTable">
+      <template #toolbar>
+        <Authority :value="DeviceListAuthEnum.DELETE">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDelete()"
+            :disabled="disabledDeleteFlag"
+          >
+            <Button type="primary" danger :disabled="disabledDeleteFlag"> 批量删除 </Button>
+          </Popconfirm>
+        </Authority>
+      </template>
       <template #tbDeviceName="{ record }">
       <template #tbDeviceName="{ record }">
         <div style="color: #619eff" class="cursor-pointer" @click="handleGetTbDeviceId(record)">
         <div style="color: #619eff" class="cursor-pointer" @click="handleGetTbDeviceId(record)">
           {{ record.alias || record.tbDeviceName }}
           {{ record.alias || record.tbDeviceName }}
@@ -26,22 +39,44 @@
           }}
           }}
         </Tag>
         </Tag>
       </template>
       </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '删除',
+              auth: DeviceListAuthEnum.DETAIL,
+              icon: 'ant-design:eye-outlined',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
     </BasicTable>
     </BasicTable>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Tag } from 'ant-design-vue';
-  import { DeviceState } from '/@/api/device/model/deviceModel';
+  import { defineComponent, ref } from 'vue';
+  import { Tag, Button, Popconfirm } from 'ant-design-vue';
+  import { DeviceRecord, DeviceState } from '/@/api/device/model/deviceModel';
   import { getTbDeviceId } from '/@/api/device/deviceConfigApi';
   import { getTbDeviceId } from '/@/api/device/deviceConfigApi';
-  import { BasicTable, useTable } from '/@/components/Table';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { childDeviceColumns, childDeviceSchemas } from '../../config/detail.config';
   import { childDeviceColumns, childDeviceSchemas } from '../../config/detail.config';
-  import { getChildDevicePage } from '/@/api/device/deviceManager';
+  import { deleteDevice, getChildDevicePage } from '/@/api/device/deviceManager';
+  import { DeviceListAuthEnum } from '../../config/device.data';
+  import { Authority } from '/@/components/Authority';
+  import { useMessage } from '/@/hooks/web/useMessage';
   export default defineComponent({
   export default defineComponent({
     name: 'DeviceManagement',
     name: 'DeviceManagement',
     components: {
     components: {
       BasicTable,
       BasicTable,
+      Popconfirm,
       Tag,
       Tag,
+      TableAction,
+      Authority,
+      Button,
     },
     },
     props: {
     props: {
       fromId: {
       fromId: {
@@ -51,7 +86,7 @@
     },
     },
     emits: ['openTbDeviceDetail'],
     emits: ['openTbDeviceDetail'],
     setup(props, { emit }) {
     setup(props, { emit }) {
-      const [registerTable] = useTable({
+      const [registerTable, { getSelectRowKeys, reload, setLoading }] = useTable({
         api: getChildDevicePage,
         api: getChildDevicePage,
         columns: childDeviceColumns,
         columns: childDeviceColumns,
         formConfig: {
         formConfig: {
@@ -61,12 +96,35 @@
         beforeFetch: (data) => {
         beforeFetch: (data) => {
           Reflect.set(data, 'fromId', props.fromId);
           Reflect.set(data, 'fromId', props.fromId);
         },
         },
+        rowKey: 'id',
         useSearchForm: true,
         useSearchForm: true,
         showTableSetting: true,
         showTableSetting: true,
         bordered: true,
         bordered: true,
         showIndexColumn: false,
         showIndexColumn: false,
+        clickToRowSelect: false,
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+
+        rowSelection: {
+          type: 'checkbox',
+          onSelect: (_record, _flag, allSelecteds) => {
+            disabledDeleteFlag.value = !allSelecteds.length;
+          },
+          onSelectAll: () => {
+            // 全选事件
+            disabledDeleteFlag.value = false;
+          },
+        },
       });
       });
 
 
+      const { createMessage } = useMessage();
+
+      const disabledDeleteFlag = ref(true);
+
       const handleGetTbDeviceId = async (record) => {
       const handleGetTbDeviceId = async (record) => {
         try {
         try {
           const res = await getTbDeviceId(record.tbDeviceId);
           const res = await getTbDeviceId(record.tbDeviceId);
@@ -75,10 +133,33 @@
           }
           }
         } catch (error) {}
         } catch (error) {}
       };
       };
+
+      const handleDelete = async (record?: DeviceRecord) => {
+        let ids: string[] = [];
+        if (record) {
+          ids.push(record.id);
+        } else {
+          ids = getSelectRowKeys();
+        }
+        try {
+          setLoading(true);
+          await deleteDevice(ids);
+          createMessage.success('删除成功');
+          reload();
+        } catch (error) {
+          throw error;
+        } finally {
+          setLoading(false);
+        }
+      };
+
       return {
       return {
         registerTable,
         registerTable,
         DeviceState,
         DeviceState,
         handleGetTbDeviceId,
         handleGetTbDeviceId,
+        DeviceListAuthEnum,
+        handleDelete,
+        disabledDeleteFlag,
       };
       };
     },
     },
   });
   });