mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-21 12:52:26 +00:00
zhangtao
787a453973
- Added EnhancedDialog component to replace el-dialog in ExportModal.vue, ImportModal.vue, and PageModal.vue for better customization. - Updated styles in PageContent.vue to enhance layout and toolbar functionality. - Refactored PageSearch.vue to improve query handling and layout responsiveness. - Introduced new properties in types.ts for better configuration options in search and content components. - Updated package.json to include plop for improved project scaffolding.
86 lines
2.8 KiB
Handlebars
86 lines
2.8 KiB
Handlebars
<!-- plop(curd-list) 生成：补全 API、searchConfig、contentConfig、表格列与弹窗 -->
|
|
<template>
|
|
<div class="app-container">
|
|
<PageSearch
|
|
ref="searchRef"
|
|
:search-config="searchConfig"
|
|
@query-click="handleQueryClick"
|
|
@reset-click="handleResetClick"
|
|
/>
|
|
|
|
<PageContent ref="contentRef" :content-config="contentConfig">
|
|
<template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
|
|
<CrudToolbarLeft
|
|
:remove-ids="removeIds"
|
|
:perm-create="['{{permPrefix}}:create']"
|
|
:perm-delete="['{{permPrefix}}:delete']"
|
|
:perm-patch="['{{permPrefix}}:patch']"
|
|
@add="handleOpenDialog('create')"
|
|
@delete="onToolbar('delete')"
|
|
@more="handleMoreClick"
|
|
/>
|
|
<div class="data-table__toolbar--right">
|
|
<CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
|
|
</div>
|
|
</template>
|
|
|
|
<template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
|
|
<div class="data-table__content">
|
|
<el-table
|
|
:ref="tableRef as any"
|
|
v-loading="loading"
|
|
row-key="id"
|
|
:data="data"
|
|
height="calc(100vh - 350px)"
|
|
max-height="calc(100vh - 350px)"
|
|
border
|
|
stripe
|
|
@selection-change="onSelectionChange"
|
|
>
|
|
<template #empty>
|
|
<el-empty :image-size="80" description="暂无数据" />
|
|
</template>
|
|
<!-- TODO: el-table-column -->
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
</PageContent>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineOptions({ name: "{{componentName}}", inheritAttrs: false });
|
|
|
|
import { reactive } from "vue";
|
|
import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
|
|
import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
|
|
import PageSearch from "@/components/CURD/PageSearch.vue";
|
|
import PageContent from "@/components/CURD/PageContent.vue";
|
|
import { useCrudList } from "@/components/CURD/useCrudList";
|
|
import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
|
|
|
|
const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
|
|
|
|
const searchConfig = reactive<ISearchConfig>({
|
|
permPrefix: "{{permPrefix}}",
|
|
formItems: [],
|
|
});
|
|
|
|
const contentConfig = reactive<IContentConfig>({
|
|
permPrefix: "{{permPrefix}}",
|
|
toolbar: [],
|
|
defaultToolbar: ["refresh", "filter"],
|
|
cols: [],
|
|
/** TODO: 接入列表 API，返回 { total, list } 供 PageContent 解析 */
|
|
indexAction: async () => ({ total: 0, list: [] }),
|
|
});
|
|
|
|
function handleOpenDialog(_type: "create" | "update" | "detail", _id?: string) {
|
|
// TODO
|
|
}
|
|
|
|
async function handleMoreClick(_status: string) {
|
|
// TODO 批量启用/停用
|
|
}
|
|
</script>
|