151 lines
4.0 KiB
Plaintext
151 lines
4.0 KiB
Plaintext
<script setup lang="tsx">
|
|
import { NButton, NPopconfirm } from 'naive-ui';
|
|
import { fetchGet${BusinessName}List, fetchDelete${BusinessName}, fetchBatchDelete${BusinessName} } from '@/service/api';
|
|
import { $t } from '@/locales';
|
|
import { useAppStore } from '@/store/modules/app';
|
|
import { useTable, useTableOperate } from '@/hooks/common/table';
|
|
import ${BusinessName}OperateDrawer from './modules/${businessName}-operate-drawer.vue';
|
|
import ${BusinessName}Search from './modules/${businessName}-search.vue';
|
|
|
|
const appStore = useAppStore();
|
|
|
|
const {
|
|
columns,
|
|
columnChecks,
|
|
data,
|
|
getData,
|
|
getDataByPage,
|
|
loading,
|
|
mobilePagination,
|
|
searchParams,
|
|
resetSearchParams
|
|
} = useTable({
|
|
apiFn: fetchGet${BusinessName}List,
|
|
apiParams: {
|
|
current: 1,
|
|
size: 10,
|
|
// if you want to use the searchParams in Form, you need to define the following properties, and the value is null
|
|
// the value can not be undefined, otherwise the property in Form will not be reactive
|
|
#foreach ($column in $columns)
|
|
#if($column.query)
|
|
$column.javaField: null#if($foreach.hasNext),#end
|
|
#end
|
|
#end
|
|
},
|
|
columns: () => [
|
|
{
|
|
type: 'selection',
|
|
align: 'center',
|
|
width: 48
|
|
},
|
|
{
|
|
key: 'index',
|
|
title: $t('common.index'),
|
|
align: 'center',
|
|
width: 64
|
|
},
|
|
#foreach ($column in $columns)
|
|
#if($column.list)
|
|
{
|
|
key: '$column.javaField',
|
|
title: '$column.columnComment',
|
|
align: 'center',
|
|
minWidth: 120
|
|
},
|
|
#end
|
|
#end
|
|
{
|
|
key: 'operate',
|
|
title: $t('common.operate'),
|
|
align: 'center',
|
|
width: 130,
|
|
render: row => (
|
|
<div class="flex-center gap-8px">
|
|
<NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
|
|
{$t('common.edit')}
|
|
</NButton>
|
|
<NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
|
|
{{
|
|
default: () => $t('common.confirmDelete'),
|
|
trigger: () => (
|
|
<NButton type="error" ghost size="small">
|
|
{$t('common.delete')}
|
|
</NButton>
|
|
)
|
|
}}
|
|
</NPopconfirm>
|
|
</div>
|
|
)
|
|
}
|
|
]
|
|
});
|
|
|
|
const {
|
|
drawerVisible,
|
|
operateType,
|
|
editingData,
|
|
handleAdd,
|
|
handleEdit,
|
|
checkedRowKeys,
|
|
onBatchDeleted,
|
|
onDeleted
|
|
} = useTableOperate(data, getData);
|
|
|
|
async function handleBatchDelete() {
|
|
// request
|
|
const { error } = await fetchDelete${BusinessName}(checkedRowKeys.value)
|
|
if (error) return;
|
|
onBatchDeleted();
|
|
}
|
|
|
|
async function handleDelete(id: number) {
|
|
// request
|
|
const { error } = await fetchBatchDelete${BusinessName}([id])
|
|
if (error) return;
|
|
onDeleted();
|
|
}
|
|
|
|
async function edit(id: number) {
|
|
handleEdit('#foreach($column in $columns)#if($column.isPk == '1')$column.javaField#end#end', id);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
|
|
<${BusinessName}Search v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
|
|
<NCard title="${functionName}" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
|
|
<template #header-extra>
|
|
<TableHeaderOperation
|
|
v-model:columns="columnChecks"
|
|
:disabled-delete="checkedRowKeys.length === 0"
|
|
:loading="loading"
|
|
@add="handleAdd"
|
|
@delete="handleBatchDelete"
|
|
@refresh="getData"
|
|
/>
|
|
</template>
|
|
<NDataTable
|
|
v-model:checked-row-keys="checkedRowKeys"
|
|
:columns="columns"
|
|
:data="data"
|
|
size="small"
|
|
:flex-height="!appStore.isMobile"
|
|
:scroll-x="962"
|
|
:loading="loading"
|
|
remote
|
|
:row-key="row => row.id"
|
|
:pagination="mobilePagination"
|
|
class="sm:h-full"
|
|
/>
|
|
<${BusinessName}OperateDrawer
|
|
v-model:visible="drawerVisible"
|
|
:operate-type="operateType"
|
|
:row-data="editingData"
|
|
@submitted="getDataByPage"
|
|
/>
|
|
</NCard>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|