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.
86 lines
2.3 KiB
86 lines
2.3 KiB
1 year ago
|
<script setup lang="ts">
|
||
|
|
import { PlusOutlined } from '@ant-design/icons-vue'
|
||
|
|
import { columns, searchFormSchemas } from './data'
|
||
|
|
import ProductFormModal from './ProductFormModal.vue'
|
||
|
|
import { BasicTable, TableAction, useTable } from '@/components/Table'
|
||
|
|
import { deleteProduct, getProductList } from '@/api/product'
|
||
|
|
import { useModal } from '@/components/Modal'
|
||
|
|
import type { Product } from '@/api/product/types'
|
||
|
|
import { useMessage } from '@/hooks/web/useMessage'
|
||
|
|
|
||
|
|
defineOptions({ name: 'Product' })
|
||
|
|
|
||
|
|
const [registerModal, { openModal }] = useModal<Product>()
|
||
|
|
|
||
|
|
const [register, { reload }] = useTable({
|
||
|
|
api: getProductList,
|
||
|
|
columns,
|
||
|
|
formConfig: {
|
||
|
|
schemas: searchFormSchemas,
|
||
|
|
labelWidth: 80,
|
||
|
|
},
|
||
|
|
bordered: true,
|
||
|
|
canResize: false,
|
||
|
|
useSearchForm: true,
|
||
|
|
actionColumn: {
|
||
|
|
width: 220,
|
||
|
|
title: '操作',
|
||
|
|
dataIndex: 'action',
|
||
|
|
fixed: 'right',
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
async function handleDelete(id: string) {
|
||
|
|
try {
|
||
|
|
await deleteProduct(id)
|
||
|
|
useMessage().createMessage.success('删除成功')
|
||
|
|
reload()
|
||
|
|
}
|
||
|
|
catch {}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<BasicTable :api="async () => ([] as Product[])" @register="register">
|
||
|
|
<template #tableTitle>
|
||
|
|
<a-button type="primary" @click="openModal">
|
||
|
|
<PlusOutlined />
|
||
|
|
新建
|
||
|
|
</a-button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template #bodyCell="{ column, record }">
|
||
|
|
<template v-if="column.key === 'action'">
|
||
|
|
<TableAction
|
||
|
|
:actions="[
|
||
|
|
{
|
||
|
|
icon: 'i-ant-design:file-search-outlined',
|
||
|
|
label: '详情',
|
||
|
|
onClick: () => $router.push(`/product/detail/${record.id}`),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'i-ant-design:edit-outlined',
|
||
|
|
label: '编辑',
|
||
|
|
onClick: () => openModal(true, record),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
icon: 'i-ant-design:delete-outlined',
|
||
|
|
danger: true,
|
||
|
|
label: '删除',
|
||
|
|
popConfirm: {
|
||
|
|
title: '是否要删除数据？',
|
||
|
|
placement: 'left',
|
||
|
|
confirm: () => handleDelete(record.id),
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</BasicTable>
|
||
|
|
|
||
|
|
<ProductFormModal @register="registerModal" @success="reload" />
|
||
|
|
</div>
|
||
|
|
</template>
|