tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(PageContent): ♻️ 默认工具栏支持自定义

Browse Source
This commit is contained in:
cshaptx4869
2024-06-08 13:56:09 +08:00
parent 51e88cdf7d
commit f23cc6c6fe
1 changed files with 77 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/PageContent/index.vue
View File

@@ -57,51 +57,73 @@
<!-- 右侧工具栏 --> <!-- 右侧工具栏 -->
<div> <div>
<template v-for="item in defaultToolbar" :key="item"> <template v-for="item in defaultToolbar" :key="item">
<!-- 刷新 --> <template v-if="typeof item === 'string'">
<template v-if="item === 'refresh'"> <!-- 刷新 -->
<el-button <template v-if="item === 'refresh'">
icon="refresh" <el-button
circle icon="refresh"
title="刷新" circle
@click="handleToolbar(item)" title="刷新"
/> @click="handleToolbar(item)"
</template> />
<!-- 筛选列 --> </template>
<template v-else-if="item === 'filter'"> <!-- 筛选列 -->
<el-popover placement="bottom" trigger="click"> <template v-else-if="item === 'filter'">
<template #reference> <el-popover placement="bottom" trigger="click">
<el-button icon="Operation" circle title="筛选列" /> <template #reference>
</template> <el-button icon="Operation" circle title="筛选列" />
<el-scrollbar max-height="350px">
<template v-for="col in cols" :key="col">
<el-checkbox
v-if="col.prop"
v-model="col.show"
:label="col.label"
/>
</template> </template>
</el-scrollbar> <el-scrollbar max-height="350px">
</el-popover> <template v-for="col in cols" :key="col">
<el-checkbox
v-if="col.prop"
v-model="col.show"
:label="col.label"
/>
</template>
</el-scrollbar>
</el-popover>
</template>
<!-- 导出 -->
<template v-else-if="item === 'exports'">
<el-button
icon="FolderOpened"
circle
title="导出"
v-hasPerm="[`${contentConfig.pageName}:export`]"
@click="handleToolbar(item)"
/>
</template>
<!-- 搜索 -->
<template v-else-if="item === 'search'">
<el-button
icon="search"
circle
title="搜索"
v-hasPerm="[`${contentConfig.pageName}:query`]"
@click="handleToolbar(item)"
/>
</template>
</template> </template>
<!-- 导出 --> <!-- 其他 -->
<template v-else-if="item === 'exports'"> <template v-else-if="typeof item === 'object'">
<el-button <template v-if="item.auth">
icon="FolderOpened" <el-button
circle :icon="item.icon"
title="导出" circle
v-hasPerm="[`${contentConfig.pageName}:export`]" :title="item.text"
@click="handleToolbar(item)" v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
/> @click="handleToolbar(item.name)"
</template> />
<!-- 搜索 --> </template>
<template v-else-if="item === 'search'"> <template v-else>
<el-button <el-button
icon="search" :icon="item.icon"
circle circle
title="搜索" :title="item.title"
v-hasPerm="[`${contentConfig.pageName}:query`]" @click="handleToolbar(item.name)"
@click="handleToolbar(item)" />
/> </template>
</template> </template>
</template> </template>
</div> </div>
@@ -447,7 +469,18 @@ export interface IContentConfig<T = any> {
} }
>; >;
// 表格工具栏右侧图标 // 表格工具栏右侧图标
defaultToolbar?: ("refresh" | "filter" | "exports" | "search")[]; defaultToolbar?: Array<
| "refresh"
| "filter"
| "exports"
| "search"
| {
name: string;
icon: string;
title?: string;
auth?: string;
}
>;
// table组件列属性(额外的属性templet,operat,slotName) // table组件列属性(额外的属性templet,operat,slotName)
cols: Array<{ cols: Array<{
type?: "default" | "selection" | "index" | "expand"; type?: "default" | "selection" | "index" | "expand";