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-05-14 09:32:44 +08:00
parent 4f119adb9e
commit daf8e6bfa0
2 changed files with 151 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@
<div class="flex-x-between mb-[10px]"> <div class="flex-x-between mb-[10px]">
<!-- 左侧工具栏 --> <!-- 左侧工具栏 -->
<div> <div>
<template v-for="item in contentConfig.toolbar" :key="item"> <template v-for="item in toolbar" :key="item">
<template v-if="typeof item === 'string'"> <template v-if="typeof item === 'string'">
<!-- 新增 --> <!-- 新增 -->
<template v-if="item === 'add'"> <template v-if="item === 'add'">
@@ -43,46 +43,34 @@
</template> </template>
<!-- 其他 --> <!-- 其他 -->
<template v-else-if="typeof item === 'object'"> <template v-else-if="typeof item === 'object'">
<template v-if="item.auth"> <el-button
<el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon"
:icon="item.icon" type="default"
type="default" @click="handleToolbar(item.name)"
@click="handleToolbar(item.name)" >
> {{ item.text }}
{{ item.text }} </el-button>
</el-button>
</template>
<template v-else>
<el-button
:icon="item.icon"
type="default"
@click="handleToolbar(item.name)"
>
{{ item.text }}
</el-button>
</template>
</template> </template>
</template> </template>
</div> </div>
<!-- 右侧工具栏 --> <!-- 右侧工具栏 -->
<div> <div>
<template v-for="item in defaultToolbar" :key="item"> <template v-for="item in defaultToolbar" :key="item">
<!-- 刷新 -->
<template v-if="item === 'refresh'"> <template v-if="item === 'refresh'">
<el-icon class="cursor-pointer ml-2" @click="handleToolbar(item)"> <el-icon class="cursor-pointer ml-2" @click="handleToolbar(item)">
<i-ep-refresh /> <i-ep-refresh />
</el-icon> </el-icon>
</template> </template>
<!-- 列设置 -->
<template v-else-if="item === 'filter'"> <template v-else-if="item === 'filter'">
<!-- 列设置 -->
<el-popover placement="bottom" trigger="click"> <el-popover placement="bottom" trigger="click">
<template #reference> <template #reference>
<el-icon class="cursor-pointer ml-2"> <el-icon class="cursor-pointer ml-2">
<i-ep-setting /> <i-ep-setting />
</el-icon> </el-icon>
</template> </template>
<el-checkbox <el-checkbox
v-model="columnSetting.checkAll" v-model="columnSetting.checkAll"
:indeterminate="columnSetting.isIndeterminate" :indeterminate="columnSetting.isIndeterminate"
@@ -90,7 +78,6 @@
> >
全选 全选
</el-checkbox> </el-checkbox>
<el-checkbox-group <el-checkbox-group
v-model="columnSetting.checkedCols" v-model="columnSetting.checkedCols"
@change="handleCheckedColumnsChange" @change="handleCheckedColumnsChange"
@@ -116,10 +103,10 @@
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<template v-for="col in displayedColumns" :key="col.prop"> <template v-for="col in displayedColumns" :key="col.prop">
<!-- 显示图片 --> <el-table-column v-if="col.show" v-bind="col">
<template v-if="col.show && col.templet === 'image'"> <template #default="scope">
<el-table-column v-bind="col"> <!-- 显示图片 -->
<template #default="scope"> <template v-if="col.templet === 'image'">
<template v-if="Array.isArray(scope.row[col.prop])"> <template v-if="Array.isArray(scope.row[col.prop])">
<template <template
v-for="(item, index) in scope.row[col.prop]" v-for="(item, index) in scope.row[col.prop]"
@@ -143,20 +130,12 @@
/> />
</template> </template>
</template> </template>
</el-table-column> <!-- 根据行的selectList属性返回对应列表值 -->
</template> <template v-else-if="col.templet === 'list'">
<!-- 根据行的selectList属性返回对应列表值 -->
<template v-else-if="col.show && col.templet === 'list'">
<el-table-column v-bind="col">
<template #default="scope">
{{ (col.selectList ?? {})[scope.row[col.prop]] }} {{ (col.selectList ?? {})[scope.row[col.prop]] }}
</template> </template>
</el-table-column> <!-- 格式化显示链接 -->
</template> <template v-else-if="col.templet === 'url'">
<!-- 格式化显示链接 -->
<template v-else-if="col.show && col.templet === 'url'">
<el-table-column v-bind="col">
<template #default="scope">
<el-link <el-link
type="primary" type="primary"
:href="scope.row[col.prop]" :href="scope.row[col.prop]"
@@ -165,26 +144,16 @@
{{ scope.row[col.prop] }} {{ scope.row[col.prop] }}
</el-link> </el-link>
</template> </template>
</el-table-column> <!-- 格式化为价格 -->
</template> <template v-else-if="col.templet === 'price'">
<!-- 格式化为价格 -->
<template v-else-if="col.show && col.templet === 'price'">
<el-table-column v-bind="col">
<template #default="scope">
{{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }} {{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
</template> </template>
</el-table-column> <!-- 格式化为百分比 -->
</template> <template v-else-if="col.templet === 'percent'">
<!-- 格式化为百分比 --> {{ scope.row[col.prop] }}%
<template v-else-if="col.show && col.templet === 'percent'"> </template>
<el-table-column v-bind="col"> <!-- 显示图标 -->
<template #default="scope"> {{ scope.row[col.prop] }}% </template> <template v-else-if="col.templet === 'icon'">
</el-table-column>
</template>
<!-- 显示图标 -->
<template v-else-if="col.show && col.templet === 'icon'">
<el-table-column v-bind="col">
<template #default="scope">
<template v-if="scope.row[col.prop].startsWith('el-icon-')"> <template v-if="scope.row[col.prop].startsWith('el-icon-')">
<el-icon> <el-icon>
<component <component
@@ -196,12 +165,8 @@
<svg-icon :icon-class="scope.row[col.prop]" /> <svg-icon :icon-class="scope.row[col.prop]" />
</template> </template>
</template> </template>
</el-table-column> <!-- 格式化时间 -->
</template> <template v-else-if="col.templet === 'date'">
<!-- 格式化时间 -->
<template v-else-if="col.show && col.templet === 'date'">
<el-table-column v-bind="col">
<template #default="scope">
{{ {{
useDateFormat( useDateFormat(
scope.row[col.prop], scope.row[col.prop],
@@ -209,13 +174,12 @@
).value ).value
}} }}
</template> </template>
</el-table-column> <!-- 列操作栏 -->
</template> <template v-else-if="col.templet === 'tool'">
<!-- 列操作栏 --> <template
<template v-else-if="col.show && col.templet === 'tool'"> v-for="item in col.operat ?? ['edit', 'delete']"
<el-table-column v-bind="col"> :key="item"
<template #default="scope"> >
<template v-for="item in col.operat" :key="item">
<template v-if="typeof item === 'string'"> <template v-if="typeof item === 'string'">
<!-- 编辑/删除 --> <!-- 编辑/删除 -->
<template v-if="item === 'edit' || item === 'delete'"> <template v-if="item === 'edit' || item === 'delete'">
@@ -240,64 +204,36 @@
</template> </template>
<!-- 其他 --> <!-- 其他 -->
<template v-else-if="typeof item === 'object'"> <template v-else-if="typeof item === 'object'">
<template v-if="item.auth"> <el-button
<el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon"
:icon="item.icon" type="primary"
type="primary" size="small"
size="small" link
link @click="
@click=" handleOperat({
handleOperat({ name: item.name,
name: item.name, row: scope.row,
row: scope.row, column: scope.column,
column: scope.column, $index: scope.$index,
$index: scope.$index, })
}) "
" >
> {{ item.text }}
{{ item.text }} </el-button>
</el-button>
</template>
<template v-else>
<el-button
:icon="item.icon"
type="primary"
size="small"
link
@click="
handleOperat({
name: item.name,
row: scope.row,
column: scope.column,
$index: scope.$index,
})
"
>
{{ item.text }}
</el-button>
</template>
</template> </template>
</template> </template>
</template> </template>
</el-table-column> <!-- 自定义 -->
</template> <template v-else-if="col.templet === 'custom'">
<!-- 自定义 -->
<template v-else-if="col.show && col.templet === 'custom'">
<el-table-column v-bind="col">
<template #default="scope">
<slot <slot
:name="col.slotName ?? col.prop" :name="col.slotName ?? col.prop"
:prop="col.prop" :prop="col.prop"
v-bind="scope" v-bind="scope"
></slot> ></slot>
</template> </template>
</el-table-column> </template>
</template> </el-table-column>
<!-- 其他 -->
<template v-else>
<el-table-column v-bind="col" v-if="col.show" />
</template>
</template> </template>
</el-table> </el-table>
<!-- 分页 --> <!-- 分页 -->
@@ -341,7 +277,7 @@ export interface IContentConfig<T = any> {
// 主键名(默认为id) // 主键名(默认为id)
pk?: string; pk?: string;
// 表格工具栏(默认支持add,delete,export,也可自定义) // 表格工具栏(默认支持add,delete,export,也可自定义)
toolbar: Array< toolbar?: Array<
| "add" | "add"
| "delete" | "delete"
| "export" | "export"
@@ -405,7 +341,9 @@ defineExpose({ fetchPageData, exportPageData });
// 主键 // 主键
const pk = props.contentConfig.pk ?? "id"; const pk = props.contentConfig.pk ?? "id";
// 表格工具栏右侧图标 // 表格左侧工具栏
const toolbar = props.contentConfig.toolbar ?? ["add", "delete"];
// 表格右侧工具栏
const defaultToolbar = props.contentConfig.defaultToolbar ?? [ const defaultToolbar = props.contentConfig.defaultToolbar ?? [
"refresh", "refresh",
"filter", "filter",

91
src/views/demo/curd/config/content2.ts Normal file
View File

@@ -0,0 +1,91 @@
import type { IContentConfig } from "@/components/PageContent/index.vue";
const contentConfig: IContentConfig = {
pageName: "sys:user",
indexAction: function (params) {
return Promise.resolve({
total: 2,
list: [
{
id: 1,
username: "tom",
avatar:
"https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
percent: 99,
price: 10,
url: "https://www.baidu.com",
icon: "el-icon-setting",
gender: 1,
status: 1,
createTime: 1715647982437,
},
{
id: 2,
username: "jerry",
avatar:
"https://oss.youlai.tech/youlai-boot/2023/05/16/811270ef31f548af9cffc026dfc3777b.gif",
percent: 88,
price: 999,
url: "https://www.google.com",
icon: "el-icon-user",
gender: 0,
status: 0,
createTime: 1715648977426,
},
],
});
},
cols: [
{ type: "selection", width: 50, align: "center" },
{ label: "ID", align: "center", prop: "id" },
{ label: "用户名", align: "center", prop: "username" },
{ label: "图片", align: "center", prop: "avatar", templet: "image" },
{
label: "百分比",
align: "center",
prop: "percent",
templet: "percent",
},
{
label: "价格",
align: "center",
prop: "price",
templet: "price",
priceFormat: "$",
},
{ label: "链接", align: "center", prop: "url", width: 180, templet: "url" },
{ label: "图标", align: "center", prop: "icon", templet: "icon" },
{
label: "列表值",
align: "center",
prop: "gender",
templet: "list",
selectList: { 0: "女", 1: "男" },
},
{
label: "自定义",
align: "center",
prop: "status",
templet: "custom",
slotName: "status",
},
{
label: "创建时间",
align: "center",
prop: "createTime",
minWidth: 120,
templet: "date",
dateFormat: "YYYY/MM/DD HH:mm:ss",
},
{
label: "操作",
align: "center",
fixed: "right",
width: 150,
templet: "tool",
operat: ["edit", "delete"],
},
],
};
export default contentConfig;