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.
94 lines
2.2 KiB
94 lines
2.2 KiB
<template> |
|
<div> |
|
<BasicTable @register="registerTable"> |
|
<template #toolbar> |
|
<a-button type="primary" @click="handleCreate">新增网卡</a-button> |
|
</template> |
|
<template #action="{ record }"> |
|
<TableAction |
|
:actions="[ |
|
{ |
|
icon: 'clarity:note-edit-line', |
|
onClick: handleEdit.bind(null, record), |
|
}, |
|
{ |
|
icon: 'ant-design:delete-outlined', |
|
color: 'error', |
|
popConfirm: { |
|
title: '是否确认删除', |
|
confirm: handleDelete.bind(null, record), |
|
}, |
|
}, |
|
]" |
|
/> |
|
</template> |
|
</BasicTable> |
|
|
|
<BoxCardModal @register="registerModal" @success="handleSuccess"/> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import {BasicTable, useTable, TableAction} from '/@/components/Table'; |
|
import {useModal} from '/@/components/Modal'; |
|
import BoxCardModal from './BoxCardModal.vue'; |
|
import {columns, searchFormSchema} from './boxcard.data'; |
|
import {useMessage} from '/@/hooks/web/useMessage'; |
|
import {cardList, remove} from '/@/api/platform/system/controller/boxcard'; |
|
const {createMessage} = useMessage(); |
|
const [registerModal, {openModal}] = useModal(); |
|
const [registerTable, {reload}] = useTable({ |
|
title: '网卡列表', |
|
api: cardList, |
|
columns, |
|
formConfig: { |
|
labelWidth: 120, |
|
schemas: searchFormSchema, |
|
}, |
|
pagination: true, |
|
striped: true, |
|
useSearchForm: true, |
|
showTableSetting: true, |
|
bordered: true, |
|
showIndexColumn: true, |
|
canResize: false, |
|
actionColumn: { |
|
width: 80, |
|
title: '操作', |
|
dataIndex: 'action', |
|
slots: {customRender: 'action'}, |
|
fixed: undefined, |
|
}, |
|
}); |
|
/** |
|
* 创建菜单 |
|
*/ |
|
function handleCreate() { |
|
openModal(true, { |
|
isUpdate: false, |
|
}); |
|
} |
|
/** |
|
* 编辑菜单 |
|
*/ |
|
function handleEdit(record: Recordable) { |
|
openModal(true, { |
|
record, |
|
isUpdate: true, |
|
}); |
|
} |
|
/** |
|
* 删除菜单 |
|
*/ |
|
async function handleDelete(record: Recordable) { |
|
await remove({ids: record.id}); |
|
createMessage.success('删除成功!'); |
|
handleSuccess(); |
|
} |
|
/** |
|
* 成功后重载表格 |
|
*/ |
|
function handleSuccess() { |
|
reload(); |
|
} |
|
</script> |