djangoadmin/djangoadmin-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化更新

Browse Source
This commit is contained in:
gitadmin
2026-09-13 21:53:16 +08:00
parent 8548fe9ea1
commit 3f8626fb10
84 changed files with 2058 additions and 2594 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DjangoAdmin_Flask_AntdVue/zh/volume7/fe-component.md
+85 -104
View File
@@ -2,12 +2,12 @@
## 概述
前端基于 Vue3 + ElementPlus + 自定义组件库构建。页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套，分页由 `BasicTable` 内置处理，无需单独引入分页组件。
前端基于 Vue3 + AntDesign Vue + 自定义组件库构建。页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `bodyCell` 插槽四件套，分页由 `BasicTable` 内置处理，无需单独引入分页组件。
:::tip 技术栈
- Vue3（Composition API + `<script setup>`）
- ElementPlus 2.x
- 自定义组件（BasicTable / BasicForm / TableAction / PageWrapper）
- AntDesign Vue 4.x
- 自定义组件（BasicTable / BasicForm / PageWrapper）
- Pinia 状态管理
- Vue Router 路由管理
:::
@@ -56,7 +56,7 @@ ui/src/
├── utils/ # 工具函数
├── hooks/ # 组合式函数
├── styles/ # 全局样式
├── plugins/ # 插件注册（ElementPlus、自定义组件、指令）
├── plugins/ # 插件注册（AntDesign Vue、自定义组件、指令）
└── main.ts # 入口文件
```
@@ -79,37 +79,42 @@ ui/src/
<template>
<PageWrapper>
<!-- 搜索表单 -->
<el-card :bordered="false" class="pt-3 mb-3 proCard">
<a-card :bordered="false" class="pt-3 mb-3 proCard">
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset" />
</el-card>
</a-card>
<!-- 数据表格 -->
<el-card :bordered="false" class="proCard">
<a-card :bordered="false" class="proCard">
<BasicTable
:columns="columns"
:request="loadDataTable"
:row-key="(row) => row.id"
ref="tableRef"
:actionColumn="actionColumn"
@selection-change="onSelectionChange"
scroll-x="1200"
:row-selection="{ onChange: onSelectionChange }"
>
<template #tableTitle>
<el-button type="primary" @click="handleAdd" v-perm="['sys:param:add']">
<el-icon><PlusOutlined /></el-icon>
添加参数
</el-button>
<el-button
type="danger"
@click="handleDelete()"
:disabled="!selectionData.length"
v-perm="['sys:param:batchDelete']"
>
<el-icon><Delete /></el-icon>
删除
</el-button>
<a-space>
<a-button type="primary" @click="handleAdd" v-perm="['sys:param:add']">
<template #icon><PlusOutlined /></template>
新建
</a-button>
<a-button type="danger" @click="handleDelete()" :disabled="!selectionData.length" v-perm="['sys:param:batchDelete']">
<template #icon><DeleteOutlined /></template>
删除
</a-button>
</a-space>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<a-space>
<a-button type="primary" @click="handleEdit(record.id)" v-perm="['sys:param:update']">编辑</a-button>
<a-button type="primary" danger @click="handleDelete(record.id)" v-perm="['sys:param:delete']">删除</a-button>
</a-space>
</template>
</template>
</BasicTable>
</el-card>
</a-card>
<!-- 编辑弹窗（懒加载） -->
<editDialog
@@ -133,56 +138,59 @@ ui/src/
```typescript
// views/data/param/columns.ts
import { h } from 'vue';
import { ElTag } from 'element-plus';
import { Tag } from 'ant-design-vue';
export const columns = [
{ type: 'selection' }, // 多选列
{ label: 'ID', prop: 'id', width: 50 }, // 固定列
{ label: '参数名称', prop: 'name', minWidth: 200 },
{ label: '参数编码', prop: 'code', minWidth: 250 },
{ label: '参数值', prop: 'value', minWidth: 200 },
{ title: 'ID', dataIndex: 'id', width: 50, fixed: 'left' },
{ title: '参数名称', dataIndex: 'name', width: 200 },
{ title: '参数编码', dataIndex: 'code', width: 250 },
{ title: '参数值', dataIndex: 'value', width: 200 },
{
label: '参数类型',
prop: 'type',
minWidth: 100,
render(record) {
return h(ElTag,
{ type: record.row.type == 0 ? 'primary' : 'warning' },
{ default: () => (record.row.type == 0 ? '系统' : '业务') }
title: '参数类型',
dataIndex: 'type',
width: 100,
customRender({ record }) {
return h(Tag,
{ color: record.type == 0 ? 'processing' : 'warning' },
{ default: () => (record.type == 0 ? '系统' : '业务') }
);
},
},
{
label: '状态',
prop: 'status',
minWidth: 100,
render(record) {
return h(ElTag,
{ type: record.row.status == 1 ? 'success' : 'danger' },
{ default: () => (record.row.status == 1 ? '正常' : '禁用') }
title: '参数状态',
dataIndex: 'status',
width: 100,
customRender({ record }) {
return h(Tag,
{ color: record.status == 1 ? 'success' : 'error' },
{ default: () => (record.status == 1 ? '正常' : '禁用') }
);
},
},
{ label: '创建时间', prop: 'createTime', width: 180 },
{ title: '排序', dataIndex: 'sort', width: 100 },
{ title: '备注', dataIndex: 'note', width: 200 },
{ title: '创建人', dataIndex: 'createUser', width: 100 },
{ title: '创建时间', dataIndex: 'createTime', width: 180 },
{ title: '操作', fixed: 'right', dataIndex: 'action', key: 'action', width: 200 },
];
```
### render 函数自定义渲染
### customRender 函数自定义渲染
```typescript
// 状态标签
render(record) {
return h(ElTag,
{ type: record.row.status == 1 ? 'success' : 'danger' },
{ default: () => record.row.statusText } // 使用后端 serialize_maps 返回的 xxxText
customRender({ record }) {
return h(Tag,
{ color: record.status == 1 ? 'success' : 'error' },
{ default: () => record.statusText }
);
}
// 链接
render(record) {
customRender({ record }) {
return h('a',
{ href: record.row.url, target: '_blank', class: 'text-blue-500' },
{ default: () => record.row.url }
{ href: record.url, target: '_blank', class: 'text-blue-500' },
{ default: () => record.url }
);
}
```
@@ -195,13 +203,13 @@ import { FormSchema } from '@/components/Form/index';
export const schemas: FormSchema[] = [
{
field: 'name',
name: 'name',
component: 'Input',
label: '参数名称',
componentProps: { placeholder: '请输入参数名称' },
},
{
field: 'type',
name: 'type',
component: 'Select',
label: '参数类型',
componentProps: {
@@ -214,7 +222,7 @@ export const schemas: FormSchema[] = [
},
},
{
field: 'status',
name: 'status',
component: 'Select',
label: '状态',
componentProps: {
@@ -229,38 +237,6 @@ export const schemas: FormSchema[] = [
];
```
## 操作栏（TableAction）
```typescript
const actionColumn = reactive({
width: 200,
label: '操作',
prop: 'action',
fixed: 'right',
render(record) {
return h(TableAction, {
style: 'button',
actions: [
{
label: '编辑',
icon: 'Edit',
type: 'warning',
onClick: handleEdit.bind(null, record),
auth: ['sys:param:update'],
},
{
label: '删除',
icon: 'Delete',
type: 'danger',
onClick: handleDelete.bind(null, record),
auth: ['sys:param:delete'],
},
],
});
},
});
```
## API 接口定义
```typescript
@@ -298,7 +274,7 @@ export function paramBatchDelete(data: any) {
// 加载数据（BasicTable 的 :request 回调，自动传入分页参数）
const loadDataTable = async (res: any) => {
const result = await getParamList({ ...formParams, ...res });
return result; // 返回 { items, total } 或 R.ok(data=列表, count=总数)
return result;
};
// 刷新表格
@@ -308,11 +284,13 @@ function reloadTable(noRefresh = '') {
// 搜索提交
function handleSubmit(values: Recordable) {
handleReset();
for (const key in formParams) {
formParams[key] = '';
}
for (const key in values) {
formParams[key] = values[key];
}
reloadTable(); // 重置到第一页
reloadTable();
}
// 重置搜索
@@ -320,6 +298,7 @@ function handleReset() {
for (const key in formParams) {
formParams[key] = '';
}
reloadTable();
}
```
@@ -349,26 +328,28 @@ const handleAdd = async () => {
};
// 编辑
const handleEdit = async (record: Recordable) => {
paramId.value = record.row.id;
async function handleEdit(id) {
paramId.value = id;
await nextTick();
editVisible.value = true;
};
}
```
## 删除（单条 + 批量）
```typescript
async function handleDelete(record: Recordable) {
let ids = [];
if (!record) {
// 批量删除：取多选行的 ID
ids = selectionData.value.map(({ id }) => id);
}
await confirm('确定要删除？');
record ? await paramDelete(record.row.id) : await paramBatchDelete(ids);
message('删除成功');
reloadTable();
import { Modal, message } from 'ant-design-vue';
async function handleDelete(id) {
Modal.confirm({
title: '提示',
content: '确定要删除？',
onOk: async () => {
id ? await paramDelete(id) : await paramBatchDelete(selectionData.value);
message.success('删除成功');
reloadTable();
},
});
}
// 多选变化
@@ -388,4 +369,4 @@ function onSelectionChange(value) {
## 总结
前端页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `TableAction` 四件套。分页由 `BasicTable` 内置处理，无需单独引入分页组件。每个模块包含 `index.vue`（列表页）、`edit.vue`（编辑弹窗）、`columns.ts`（列定义）、`querySchemas.ts`（搜索配置）四个文件。API 接口按模块分文件定义在 `api/` 目录下。
前端页面统一使用 `PageWrapper` + `BasicForm` + `BasicTable` + `bodyCell` 插槽四件套。分页由 `BasicTable` 内置处理，无需单独引入分页组件。每个模块包含 `index.vue`（列表页）、`edit.vue`（编辑弹窗）、`columns.ts`（列定义）、`querySchemas.ts`（搜索配置）四个文件。API 接口按模块分文件定义在 `api/` 目录下。