mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 17:37:24 +08:00
Merge branch 'pure-admin:main' into main
This commit is contained in:
EchoByte
GitHub
commit
de4a0c33f5
@ -130,6 +130,7 @@ menus:
|
||||
hsdanmaku: Danmaku
|
||||
hsPureTableBase: Base Usage
|
||||
hsPureTableHigh: High Usage
|
||||
hsPureTableEdit: Edit Usage
|
||||
hsboard: Paint Board
|
||||
hsMenuoverflow: Menu Overflow Show Tooltip Text
|
||||
hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text
|
||||
|
||||
@ -129,8 +129,9 @@ menus:
|
||||
hsSensitive: 敏感词过滤
|
||||
hsPinyin: 汉语拼音
|
||||
hsdanmaku: 弹幕
|
||||
hsPureTableBase: 基础用法（23个示例）
|
||||
hsPureTableHigh: 高级用法（11个示例）
|
||||
hsPureTableBase: 基础用法
|
||||
hsPureTableHigh: 高级用法
|
||||
hsPureTableEdit: 可编辑用法
|
||||
hsboard: 艺术画板
|
||||
hsMenuoverflow: 目录超出显示 Tooltip 文字提示
|
||||
hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示
|
||||
|
||||
228
mock/system.ts
228
mock/system.ts
@ -140,6 +140,234 @@ export default defineFakeRoute([
|
||||
};
|
||||
}
|
||||
},
|
||||
// 角色管理-权限-菜单权限
|
||||
{
|
||||
url: "/role-menu",
|
||||
method: "post",
|
||||
response: () => {
|
||||
return {
|
||||
success: true,
|
||||
data: [
|
||||
// 外部页面
|
||||
{
|
||||
parentId: 0,
|
||||
id: 100,
|
||||
menuType: 0, // 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）
|
||||
title: "menus.hsExternalPage"
|
||||
},
|
||||
{
|
||||
parentId: 100,
|
||||
id: 101,
|
||||
menuType: 0,
|
||||
title: "menus.hsExternalDoc"
|
||||
},
|
||||
{
|
||||
parentId: 101,
|
||||
id: 102,
|
||||
menuType: 2,
|
||||
title: "menus.externalLink"
|
||||
},
|
||||
{
|
||||
parentId: 101,
|
||||
id: 103,
|
||||
menuType: 2,
|
||||
title: "menus.pureutilsLink"
|
||||
},
|
||||
{
|
||||
parentId: 100,
|
||||
id: 104,
|
||||
menuType: 1,
|
||||
title: "menus.hsEmbeddedDoc"
|
||||
},
|
||||
{
|
||||
parentId: 104,
|
||||
id: 105,
|
||||
menuType: 1,
|
||||
title: "menus.hsEpDocument"
|
||||
},
|
||||
{
|
||||
parentId: 104,
|
||||
id: 106,
|
||||
menuType: 1,
|
||||
title: "menus.hsTailwindcssDocument"
|
||||
},
|
||||
{
|
||||
parentId: 104,
|
||||
id: 107,
|
||||
menuType: 1,
|
||||
title: "menus.hsVueDocument"
|
||||
},
|
||||
{
|
||||
parentId: 104,
|
||||
id: 108,
|
||||
menuType: 1,
|
||||
title: "menus.hsViteDocument"
|
||||
},
|
||||
{
|
||||
parentId: 104,
|
||||
id: 109,
|
||||
menuType: 1,
|
||||
title: "menus.hsPiniaDocument"
|
||||
},
|
||||
{
|
||||
parentId: 104,
|
||||
id: 110,
|
||||
menuType: 1,
|
||||
title: "menus.hsRouterDocument"
|
||||
},
|
||||
// 权限管理
|
||||
{
|
||||
parentId: 0,
|
||||
id: 200,
|
||||
menuType: 0,
|
||||
title: "menus.permission"
|
||||
},
|
||||
{
|
||||
parentId: 200,
|
||||
id: 201,
|
||||
menuType: 0,
|
||||
title: "menus.permissionPage"
|
||||
},
|
||||
{
|
||||
parentId: 200,
|
||||
id: 202,
|
||||
menuType: 0,
|
||||
title: "menus.permissionButton"
|
||||
},
|
||||
{
|
||||
parentId: 202,
|
||||
id: 203,
|
||||
menuType: 3,
|
||||
title: "添加"
|
||||
},
|
||||
{
|
||||
parentId: 202,
|
||||
id: 204,
|
||||
menuType: 3,
|
||||
title: "修改"
|
||||
},
|
||||
{
|
||||
parentId: 202,
|
||||
id: 205,
|
||||
menuType: 3,
|
||||
title: "删除"
|
||||
},
|
||||
// 系统管理
|
||||
{
|
||||
parentId: 0,
|
||||
id: 300,
|
||||
menuType: 0,
|
||||
title: "menus.hssysManagement"
|
||||
},
|
||||
{
|
||||
parentId: 300,
|
||||
id: 301,
|
||||
menuType: 0,
|
||||
title: "menus.hsUser"
|
||||
},
|
||||
{
|
||||
parentId: 300,
|
||||
id: 302,
|
||||
menuType: 0,
|
||||
title: "menus.hsRole"
|
||||
},
|
||||
{
|
||||
parentId: 300,
|
||||
id: 303,
|
||||
menuType: 0,
|
||||
title: "menus.hsSystemMenu"
|
||||
},
|
||||
{
|
||||
parentId: 300,
|
||||
id: 304,
|
||||
menuType: 0,
|
||||
title: "menus.hsDept"
|
||||
},
|
||||
// 系统监控
|
||||
{
|
||||
parentId: 0,
|
||||
id: 400,
|
||||
menuType: 0,
|
||||
title: "menus.hssysMonitor"
|
||||
},
|
||||
{
|
||||
parentId: 400,
|
||||
id: 401,
|
||||
menuType: 0,
|
||||
title: "menus.hsOnlineUser"
|
||||
},
|
||||
{
|
||||
parentId: 400,
|
||||
id: 402,
|
||||
menuType: 0,
|
||||
title: "menus.hsLoginLog"
|
||||
},
|
||||
{
|
||||
parentId: 400,
|
||||
id: 403,
|
||||
menuType: 0,
|
||||
title: "menus.hsOperationLog"
|
||||
},
|
||||
{
|
||||
parentId: 400,
|
||||
id: 404,
|
||||
menuType: 0,
|
||||
title: "menus.hsSystemLog"
|
||||
},
|
||||
// 标签页操作
|
||||
{
|
||||
parentId: 0,
|
||||
id: 500,
|
||||
menuType: 0,
|
||||
title: "menus.hstabs"
|
||||
},
|
||||
{
|
||||
parentId: 500,
|
||||
id: 501,
|
||||
menuType: 0,
|
||||
title: "menus.hstabs"
|
||||
},
|
||||
{
|
||||
parentId: 500,
|
||||
id: 502,
|
||||
menuType: 0,
|
||||
title: "query传参模式"
|
||||
},
|
||||
{
|
||||
parentId: 500,
|
||||
id: 503,
|
||||
menuType: 0,
|
||||
title: "params传参模式"
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
// 角色管理-权限-菜单权限-根据角色 id 查对应菜单
|
||||
{
|
||||
url: "/role-menu-ids",
|
||||
method: "post",
|
||||
response: ({ body }) => {
|
||||
if (body.id == 1) {
|
||||
return {
|
||||
success: true,
|
||||
data: [
|
||||
100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 200, 201,
|
||||
202, 203, 204, 205, 300, 301, 302, 303, 304, 400, 401, 402, 403,
|
||||
404, 500, 501, 502, 503
|
||||
]
|
||||
};
|
||||
} else if (body.id == 2) {
|
||||
return {
|
||||
success: true,
|
||||
data: [
|
||||
100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 404, 500,
|
||||
501, 502, 503
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
// 菜单管理
|
||||
{
|
||||
url: "/menu",
|
||||
|
||||
@ -54,7 +54,7 @@
|
||||
"@logicflow/extension": "^1.2.22",
|
||||
"@pureadmin/descriptions": "^1.2.1",
|
||||
"@pureadmin/table": "^3.1.2",
|
||||
"@pureadmin/utils": "^2.4.6",
|
||||
"@pureadmin/utils": "^2.4.7",
|
||||
"@vueuse/core": "^10.9.0",
|
||||
"@vueuse/motion": "^2.1.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
|
||||
10
pnpm-lock.yaml
generated
10
pnpm-lock.yaml
generated
@ -24,8 +24,8 @@ dependencies:
|
||||
specifier: ^3.1.2
|
||||
version: 3.1.2(element-plus@2.6.1)(typescript@5.4.2)
|
||||
'@pureadmin/utils':
|
||||
specifier: ^2.4.6
|
||||
version: 2.4.6(echarts@5.5.0)(vue@3.4.21)
|
||||
specifier: ^2.4.7
|
||||
version: 2.4.7(echarts@5.5.0)(vue@3.4.21)
|
||||
'@vueuse/core':
|
||||
specifier: ^10.9.0
|
||||
version: 10.9.0(vue@3.4.21)
|
||||
@ -1758,7 +1758,7 @@ packages:
|
||||
element-plus: ^2.0.0
|
||||
dependencies:
|
||||
'@element-plus/icons-vue': 2.3.1(vue@3.4.21)
|
||||
'@pureadmin/utils': 2.4.6(echarts@5.5.0)(vue@3.4.21)
|
||||
'@pureadmin/utils': 2.4.7(echarts@5.5.0)(vue@3.4.21)
|
||||
element-plus: 2.6.1(vue@3.4.21)
|
||||
vue: 3.4.21(typescript@5.4.2)
|
||||
transitivePeerDependencies:
|
||||
@ -1785,8 +1785,8 @@ packages:
|
||||
string-hash: 1.1.3
|
||||
dev: true
|
||||
|
||||
/@pureadmin/utils@2.4.6(echarts@5.5.0)(vue@3.4.21):
|
||||
resolution: {integrity: sha512-TBN9fJhqrsjATvSHR1tDC4ZCQTvC6zMl2xj76lEJW7/VAX3OtNlb5073BAQBBMg7fXsAUXkMyBTwagsOZM5grg==}
|
||||
/@pureadmin/utils@2.4.7(echarts@5.5.0)(vue@3.4.21):
|
||||
resolution: {integrity: sha512-fUHwZm9wEtcxUk//bs8xoDe0XYAeoU/FbvAF9CM4Y5xBmaaXvzN+sSFCUyUKC08q4tmCyaHBeLNolO3I4t3X6Q==}
|
||||
peerDependencies:
|
||||
echarts: '*'
|
||||
vue: '*'
|
||||
|
||||
@ -73,3 +73,13 @@ export const getSystemLogsList = (data?: object) => {
|
||||
export const getSystemLogsDetail = (data?: object) => {
|
||||
return http.request<Result>("post", "/system-logs-detail", { data });
|
||||
};
|
||||
|
||||
/** 获取角色管理-权限-菜单权限 */
|
||||
export const getRoleMenu = (data?: object) => {
|
||||
return http.request<Result>("post", "/role-menu", { data });
|
||||
};
|
||||
|
||||
/** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */
|
||||
export const getRoleMenuIds = (data?: object) => {
|
||||
return http.request<Result>("post", "/role-menu-ids", { data });
|
||||
};
|
||||
|
||||
@ -64,9 +64,10 @@ const fullscreenClass = computed(() => {
|
||||
function eventsCallBack(
|
||||
event: EventType,
|
||||
options: DialogOptions,
|
||||
index: number
|
||||
index: number,
|
||||
isClickFullScreen = false
|
||||
) {
|
||||
fullscreen.value = options?.fullscreen ?? false;
|
||||
if (!isClickFullScreen) fullscreen.value = options?.fullscreen ?? false;
|
||||
if (options?.[event] && isFunction(options?.[event])) {
|
||||
return options?.[event]({ options, index });
|
||||
}
|
||||
@ -108,7 +109,17 @@ function handleClose(
|
||||
<i
|
||||
v-if="!options?.fullscreen"
|
||||
:class="fullscreenClass"
|
||||
@click="fullscreen = !fullscreen"
|
||||
@click="
|
||||
() => {
|
||||
fullscreen = !fullscreen;
|
||||
eventsCallBack(
|
||||
'fullscreenCallBack',
|
||||
{ ...options, fullscreen },
|
||||
index,
|
||||
true
|
||||
);
|
||||
}
|
||||
"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
class="pure-dialog-svg"
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
import type { CSSProperties, VNode, Component } from "vue";
|
||||
|
||||
type DoneFn = (cancel?: boolean) => void;
|
||||
type EventType = "open" | "close" | "openAutoFocus" | "closeAutoFocus";
|
||||
type EventType =
|
||||
| "open"
|
||||
| "close"
|
||||
| "openAutoFocus"
|
||||
| "closeAutoFocus"
|
||||
| "fullscreenCallBack";
|
||||
type ArgsType = {
|
||||
/** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
|
||||
command: "cancel" | "sure" | "close";
|
||||
@ -175,6 +180,14 @@ interface DialogOptions extends DialogProps {
|
||||
index: number;
|
||||
args: any;
|
||||
}) => void;
|
||||
/** 点击全屏按钮时的回调 */
|
||||
fullscreenCallBack?: ({
|
||||
options,
|
||||
index
|
||||
}: {
|
||||
options: DialogOptions;
|
||||
index: number;
|
||||
}) => void;
|
||||
/** 输入焦点聚焦在 `Dialog` 内容时的回调 */
|
||||
openAutoFocus?: ({
|
||||
options,
|
||||
|
||||
@ -25,6 +25,15 @@ export default {
|
||||
meta: {
|
||||
title: $t("menus.hsPureTableHigh")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/pure-table/edit",
|
||||
name: "PureTableEdit",
|
||||
component: () => import("@/views/pure-table/edit.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsPureTableEdit"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
}
|
||||
}
|
||||
]
|
||||
} satisfies RouteConfigsTable;
|
||||
|
||||
@ -43,9 +43,11 @@ function onFullscreenClick() {
|
||||
|
||||
function onFullscreenIconClick() {
|
||||
addDialog({
|
||||
title: "全屏按钮",
|
||||
title: "全屏按钮和全屏事件",
|
||||
fullscreenIcon: true,
|
||||
contentRenderer: () => <p>弹框内容-全屏按钮</p>
|
||||
fullscreenCallBack: ({ options, index }) =>
|
||||
message(options.fullscreen ? "全屏" : "非全屏"),
|
||||
contentRenderer: () => <p>弹框内容-全屏按钮和全屏事件</p>
|
||||
});
|
||||
}
|
||||
|
||||
@ -468,7 +470,7 @@ function onBeforeSureClick() {
|
||||
<el-button @click="onBaseClick"> 基础用法 </el-button>
|
||||
<el-button @click="onDraggableClick"> 可拖拽 </el-button>
|
||||
<el-button @click="onFullscreenClick"> 全屏 </el-button>
|
||||
<el-button @click="onFullscreenIconClick"> 全屏按钮 </el-button>
|
||||
<el-button @click="onFullscreenIconClick"> 全屏按钮和全屏事件 </el-button>
|
||||
<el-button @click="onModalClick"> 无背景遮罩层 </el-button>
|
||||
<el-button @click="onStyleClick"> 自定义弹出位置 </el-button>
|
||||
<el-button @click="onoOpenDelayClick"> 延时2秒打开弹框 </el-button>
|
||||
|
||||
@ -39,7 +39,7 @@ const {
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input
|
||||
|
||||
@ -39,7 +39,7 @@ const {
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="所属模块" prop="module">
|
||||
<el-input
|
||||
|
||||
@ -42,7 +42,7 @@ const {
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="所属模块" prop="module">
|
||||
<el-input
|
||||
|
||||
@ -33,7 +33,7 @@ const {
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input
|
||||
|
||||
82
src/views/pure-table/edit.vue
Normal file
82
src/views/pure-table/edit.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { list } from "./edit/list";
|
||||
|
||||
defineOptions({
|
||||
name: "PureTableEdit"
|
||||
});
|
||||
|
||||
const selected = ref(0);
|
||||
|
||||
function tabClick({ index }) {
|
||||
selected.value = index;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">
|
||||
可编辑用法全部采用 tsx 语法，充分发挥
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/pure-admin-table"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
@pureadmin/table
|
||||
</el-link>
|
||||
的灵活性，维护整体表格只需操作 columns 配置即可
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-alert
|
||||
title="可编辑用法中所有表格都设置了 row-key ，它是唯一值的字段，比如id。作用：1. 用来优化 Table
|
||||
的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置）"
|
||||
type="info"
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<el-tabs @tab-click="tabClick">
|
||||
<template v-for="(item, index) of list" :key="item.key">
|
||||
<el-tab-pane :lazy="true">
|
||||
<template #label>
|
||||
<el-tooltip
|
||||
:content="`（第 ${index + 1} 个示例）${item.content}`"
|
||||
placement="top-end"
|
||||
>
|
||||
<span>{{ item.title }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<component :is="item.component" v-if="selected == index" />
|
||||
</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-tabs__nav-wrap)::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-alert__title) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-next),
|
||||
:deep(.el-tabs__nav-prev) {
|
||||
font-size: 16px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-next.is-disabled),
|
||||
:deep(.el-tabs__nav-prev.is-disabled) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
74
src/views/pure-table/edit/data.ts
Normal file
74
src/views/pure-table/edit/data.ts
Normal file
@ -0,0 +1,74 @@
|
||||
const tableData = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Tom",
|
||||
sex: 0, // 0代表男 1代表女
|
||||
hobby: 2,
|
||||
date: "2024-03-17"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Jack",
|
||||
sex: 0,
|
||||
hobby: 1,
|
||||
date: "2024-03-18"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Lily",
|
||||
sex: 1,
|
||||
hobby: 1,
|
||||
date: "2024-03-19"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Mia",
|
||||
sex: 1,
|
||||
hobby: 3,
|
||||
date: "2024-03-20"
|
||||
}
|
||||
];
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: 0,
|
||||
label: "上午写代码"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: "下午写代码"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "晚上写代码"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "凌晨休息了"
|
||||
}
|
||||
];
|
||||
|
||||
const tableDataEdit = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Tom",
|
||||
address: "home"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Jack",
|
||||
address: "office"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Lily",
|
||||
address: "library"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Mia",
|
||||
address: "playground"
|
||||
}
|
||||
];
|
||||
|
||||
export { tableData, tableDataEdit, options };
|
||||
87
src/views/pure-table/edit/demo1/columns.tsx
Normal file
87
src/views/pure-table/edit/demo1/columns.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import { ref } from "vue";
|
||||
import { options } from "../data";
|
||||
|
||||
export function useColumns() {
|
||||
const dataList = ref([]);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name",
|
||||
cellRenderer: ({ row }) => <el-input v-model={row.name} />
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex",
|
||||
cellRenderer: ({ row }) => (
|
||||
<el-switch
|
||||
v-model={row.sex}
|
||||
inline-prompt
|
||||
active-value={0}
|
||||
inactive-value={1}
|
||||
active-text="男"
|
||||
inactive-text="女"
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "爱好",
|
||||
prop: "hobby",
|
||||
cellRenderer: ({ row }) => (
|
||||
<el-select v-model={row.hobby} clearable placeholder="请选择爱好">
|
||||
{options.map(item => {
|
||||
return (
|
||||
<el-option
|
||||
key={item.value}
|
||||
label={item.label}
|
||||
value={item.value}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</el-select>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "日期",
|
||||
prop: "date",
|
||||
cellRenderer: ({ row }) => (
|
||||
<el-date-picker
|
||||
v-model={row.date}
|
||||
type="date"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择日期"
|
||||
/>
|
||||
),
|
||||
minWidth: 110
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 90,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function onAdd() {
|
||||
dataList.value.push({
|
||||
id: dataList.value.length + 1,
|
||||
name: "",
|
||||
sex: 0,
|
||||
hobby: "",
|
||||
date: ""
|
||||
});
|
||||
}
|
||||
|
||||
function onDel(row) {
|
||||
const index = dataList.value.indexOf(row);
|
||||
if (index !== -1) dataList.value.splice(index, 1);
|
||||
}
|
||||
|
||||
return {
|
||||
columns,
|
||||
dataList,
|
||||
onAdd,
|
||||
onDel
|
||||
};
|
||||
}
|
||||
58
src/views/pure-table/edit/demo1/index.vue
Normal file
58
src/views/pure-table/edit/demo1/index.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import { useColumns } from "./columns";
|
||||
import Empty from "../empty.svg?component";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import AddFill from "@iconify-icons/ep/plus";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
|
||||
const { columns, dataList, onAdd, onDel } = useColumns();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<el-scrollbar height="540px">
|
||||
<code>
|
||||
<pre class="w-[400px]"> {{ dataList }}</pre>
|
||||
</code>
|
||||
</el-scrollbar>
|
||||
<pure-table
|
||||
row-key="id"
|
||||
align-whole="center"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
>
|
||||
<template #empty>
|
||||
<Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button
|
||||
plain
|
||||
class="w-full my-2"
|
||||
:icon="useRenderIcon(AddFill)"
|
||||
@click="onAdd"
|
||||
>
|
||||
添加一行数据
|
||||
</el-button>
|
||||
</template>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
@click="onDel(row)"
|
||||
/>
|
||||
</template>
|
||||
</pure-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-table__inner-wrapper::before) {
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
116
src/views/pure-table/edit/demo2/columns.tsx
Normal file
116
src/views/pure-table/edit/demo2/columns.tsx
Normal file
@ -0,0 +1,116 @@
|
||||
import { ref } from "vue";
|
||||
import { tableData, options } from "../data";
|
||||
import { clone, delObjectProperty } from "@pureadmin/utils";
|
||||
|
||||
export function useColumns() {
|
||||
const editMap = ref({});
|
||||
const dataList = ref(clone(tableData, true));
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name",
|
||||
cellRenderer: ({ row, index }) => (
|
||||
<>
|
||||
{editMap.value[index]?.editable ? (
|
||||
<el-input v-model={row.name} />
|
||||
) : (
|
||||
<p>{row.name}</p>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex",
|
||||
cellRenderer: ({ row, index }) => (
|
||||
<>
|
||||
{editMap.value[index]?.editable ? (
|
||||
<el-switch
|
||||
v-model={row.sex}
|
||||
inline-prompt
|
||||
active-value={0}
|
||||
inactive-value={1}
|
||||
active-text="男"
|
||||
inactive-text="女"
|
||||
/>
|
||||
) : (
|
||||
<p>{row.sex === 0 ? "男" : "女"}</p>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "爱好",
|
||||
prop: "hobby",
|
||||
cellRenderer: ({ row, index }) => (
|
||||
<>
|
||||
{editMap.value[index]?.editable ? (
|
||||
<el-select v-model={row.hobby} clearable placeholder="请选择爱好">
|
||||
{options.map(item => {
|
||||
return (
|
||||
<el-option
|
||||
key={item.value}
|
||||
label={item.label}
|
||||
value={item.value}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</el-select>
|
||||
) : (
|
||||
<el-tag type="primary">
|
||||
{options.filter(opt => opt.value == row.hobby)[0]?.label}
|
||||
</el-tag>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "日期",
|
||||
prop: "date",
|
||||
cellRenderer: ({ row, index }) => (
|
||||
<>
|
||||
{editMap.value[index]?.editable ? (
|
||||
<el-date-picker
|
||||
v-model={row.date}
|
||||
type="date"
|
||||
format="YYYY/MM/DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="请选择日期"
|
||||
/>
|
||||
) : (
|
||||
<p>{row.date}</p>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
minWidth: 110
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function onEdit(row, index) {
|
||||
editMap.value[index] = Object.assign({ ...row, editable: true });
|
||||
}
|
||||
|
||||
function onSave(index) {
|
||||
editMap.value[index].editable = false;
|
||||
}
|
||||
|
||||
function onCancel(index) {
|
||||
editMap.value[index].editable = false;
|
||||
dataList.value[index] = delObjectProperty(editMap.value[index], "editable");
|
||||
}
|
||||
|
||||
return {
|
||||
editMap,
|
||||
columns,
|
||||
dataList,
|
||||
onEdit,
|
||||
onSave,
|
||||
onCancel
|
||||
};
|
||||
}
|
||||
50
src/views/pure-table/edit/demo2/index.vue
Normal file
50
src/views/pure-table/edit/demo2/index.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { useColumns } from "./columns";
|
||||
|
||||
const { editMap, columns, dataList, onEdit, onSave, onCancel } = useColumns();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<el-scrollbar>
|
||||
<code>
|
||||
<pre class="w-[400px]"> {{ dataList }}</pre>
|
||||
</code>
|
||||
</el-scrollbar>
|
||||
<pure-table
|
||||
row-key="id"
|
||||
align-whole="center"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
>
|
||||
<template #operation="{ row, index }">
|
||||
<el-button
|
||||
v-if="!editMap[index]?.editable"
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
@click="onEdit(row, index)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<div v-else>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
@click="onSave(index)"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
<el-button class="reset-margin" link @click="onCancel(index)">
|
||||
取消
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</pure-table>
|
||||
</div>
|
||||
</template>
|
||||
87
src/views/pure-table/edit/demo3/columns.tsx
Normal file
87
src/views/pure-table/edit/demo3/columns.tsx
Normal file
@ -0,0 +1,87 @@
|
||||
import { ref, computed } from "vue";
|
||||
import { tableDataEdit } from "../data";
|
||||
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
export function useColumns() {
|
||||
const editMap = ref({});
|
||||
const activeIndex = ref(-1);
|
||||
const dataList = ref(tableDataEdit);
|
||||
|
||||
const editing = computed(() => {
|
||||
return index => {
|
||||
return editMap.value[index]?.editing;
|
||||
};
|
||||
});
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return (index, other = false) => {
|
||||
return [
|
||||
"cursor-pointer",
|
||||
"ml-2",
|
||||
"transition",
|
||||
"delay-100",
|
||||
other
|
||||
? ["hover:scale-110", "hover:text-red-500"]
|
||||
: editing.value(index) && ["scale-150", "text-red-500"]
|
||||
];
|
||||
};
|
||||
});
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "姓名（可修改）",
|
||||
prop: "name",
|
||||
cellRenderer: ({ row, index }) => (
|
||||
<div
|
||||
class="flex-bc w-full h-[32px]"
|
||||
onMouseenter={() => (activeIndex.value = index)}
|
||||
onMouseleave={() => onMouseleave(index)}
|
||||
>
|
||||
{!editing.value(index) ? (
|
||||
<p>{row.name}</p>
|
||||
) : (
|
||||
<>
|
||||
<el-input v-model={row.name} />
|
||||
<iconify-icon-offline
|
||||
icon={Check}
|
||||
class={iconClass.value(index)}
|
||||
onClick={() => onSave(index)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<iconify-icon-offline
|
||||
v-show={activeIndex.value === index && !editing.value(index)}
|
||||
icon={EditPen}
|
||||
class={iconClass.value(index, true)}
|
||||
onClick={() => onEdit(row, index)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "地址",
|
||||
prop: "address"
|
||||
}
|
||||
];
|
||||
|
||||
function onMouseleave(index) {
|
||||
editing.value[index]
|
||||
? (activeIndex.value = index)
|
||||
: (activeIndex.value = -1);
|
||||
}
|
||||
|
||||
function onEdit(row, index) {
|
||||
editMap.value[index] = Object.assign({ ...row, editing: true });
|
||||
}
|
||||
|
||||
function onSave(index) {
|
||||
editMap.value[index].editing = false;
|
||||
}
|
||||
|
||||
return {
|
||||
columns,
|
||||
dataList
|
||||
};
|
||||
}
|
||||
22
src/views/pure-table/edit/demo3/index.vue
Normal file
22
src/views/pure-table/edit/demo3/index.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { useColumns } from "./columns";
|
||||
|
||||
const { columns, dataList } = useColumns();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex">
|
||||
<el-scrollbar>
|
||||
<code>
|
||||
<pre class="w-[400px]"> {{ dataList }}</pre>
|
||||
</code>
|
||||
</el-scrollbar>
|
||||
<pure-table
|
||||
class="!w-[30vw]"
|
||||
row-key="id"
|
||||
border
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
1
src/views/pure-table/edit/empty.svg
Normal file
1
src/views/pure-table/edit/empty.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="empty-icon" viewBox="0 0 1024 1024"><path d="M855.6 427.2H168.5c-12.7 0-24.4 6.9-30.6 18L4.4 684.7C1.5 689.9 0 695.8 0 701.8v287.1c0 19.4 15.7 35.1 35.1 35.1H989c19.4 0 35.1-15.7 35.1-35.1V701.8c0-6-1.5-11.8-4.4-17.1L886.2 445.2c-6.2-11.1-17.9-18-30.6-18M673.4 695.6c-16.5 0-30.8 11.5-34.3 27.7-12.7 58.5-64.8 102.3-127.2 102.3s-114.5-43.8-127.2-102.3c-3.5-16.1-17.8-27.7-34.3-27.7H119c-26.4 0-43.3-28-31.1-51.4l81.7-155.8c6.1-11.6 18-18.8 31.1-18.8h622.4c13 0 25 7.2 31.1 18.8l81.7 155.8c12.2 23.4-4.7 51.4-31.1 51.4zm146.5-486.1c-1-1.8-2.1-3.7-3.2-5.5-9.8-16.6-31.1-22.2-47.8-12.6L648.5 261c-17 9.8-22.7 31.6-12.6 48.4.9 1.4 1.7 2.9 2.5 4.4 9.5 17 31.2 22.8 48 13L807 257.3c16.7-9.7 22.4-31 12.9-47.8m-444.5 51.6L255 191.6c-16.7-9.6-38-4-47.8 12.6-1.1 1.8-2.1 3.6-3.2 5.5-9.5 16.8-3.8 38.1 12.9 47.8L337.3 327c16.9 9.7 38.6 4 48-13.1.8-1.5 1.7-2.9 2.5-4.4 10.2-16.8 4.5-38.6-12.4-48.4M512 239.3h2.5c19.5.3 35.5-15.5 35.5-35.1v-139c0-19.3-15.6-34.9-34.8-35.1h-6.4C489.6 30.3 474 46 474 65.2v139c0 19.5 15.9 35.4 35.5 35.1z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
27
src/views/pure-table/edit/list.tsx
Normal file
27
src/views/pure-table/edit/list.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import Demo1 from "./demo1/index.vue";
|
||||
import Demo2 from "./demo2/index.vue";
|
||||
import Demo3 from "./demo3/index.vue";
|
||||
|
||||
const rendContent = (val: string) =>
|
||||
`代码位置：src/views/pure-table/edit/${val}/index.vue`;
|
||||
|
||||
export const list = [
|
||||
{
|
||||
key: "demo1",
|
||||
content: rendContent("demo1"),
|
||||
title: "整体编辑",
|
||||
component: Demo1
|
||||
},
|
||||
{
|
||||
key: "demo2",
|
||||
content: rendContent("demo2"),
|
||||
title: "单行编辑",
|
||||
component: Demo2
|
||||
},
|
||||
{
|
||||
key: "demo3",
|
||||
content: rendContent("demo3"),
|
||||
title: "单元格编辑",
|
||||
component: Demo3
|
||||
}
|
||||
];
|
||||
@ -1,133 +0,0 @@
|
||||
import { tableDataEdit } from "../data";
|
||||
import { message } from "@/utils/message";
|
||||
import { ref, computed, Transition } from "vue";
|
||||
import { clone, delay } from "@pureadmin/utils";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
// 温馨提示：修改整行方法雷同，将cellRenderer后面渲染的组件抽出来做对应处理即可
|
||||
export function useColumns() {
|
||||
// 修改值（可多个）
|
||||
const inputValMap = ref({});
|
||||
// 是否正处于修改状态（可多个）
|
||||
const editStatus = ref({});
|
||||
// 当前激活的单元格（唯一）
|
||||
const activeIndex = ref(-1);
|
||||
const dataList = ref(clone(tableDataEdit, true));
|
||||
|
||||
const comVal = computed(() => {
|
||||
return index => {
|
||||
return inputValMap.value[index]?.value;
|
||||
};
|
||||
});
|
||||
|
||||
const editing = computed(() => {
|
||||
return index => {
|
||||
return editStatus.value[index]?.editing;
|
||||
};
|
||||
});
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return (index, other = false) => {
|
||||
return [
|
||||
"cursor-pointer",
|
||||
"ml-2",
|
||||
"transition",
|
||||
"delay-100",
|
||||
other
|
||||
? ["hover:scale-110", "hover:text-red-500"]
|
||||
: editing.value(index) && ["scale-150", "text-red-500"]
|
||||
];
|
||||
};
|
||||
});
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "ID（可修改）",
|
||||
prop: "id",
|
||||
// class="flex-bc" flex-bc 代表 flex justify-between items-center 具体看 src/style/tailwind.css 文件
|
||||
cellRenderer: ({ row, index }) => (
|
||||
<div
|
||||
class="flex-bc w-full h-[32px]"
|
||||
onMouseenter={() => (activeIndex.value = index)}
|
||||
onMouseleave={() => onMouseleave(index)}
|
||||
>
|
||||
<p v-show={!editing.value(index)}>{row.id}</p>
|
||||
<Transition enter-active-class="animate__animated animate__fadeInUp animate__faster">
|
||||
<el-input
|
||||
v-show={editing.value(index)}
|
||||
modelValue={comVal.value(index)}
|
||||
onInput={value => onChange(value, index)}
|
||||
/>
|
||||
</Transition>
|
||||
<iconify-icon-offline
|
||||
v-show={editing.value(index)}
|
||||
icon={Check}
|
||||
class={iconClass.value(index)}
|
||||
onClick={() => onSure(index)}
|
||||
/>
|
||||
<iconify-icon-offline
|
||||
v-show={activeIndex.value === index && !editing.value(index)}
|
||||
icon={EditPen}
|
||||
class={iconClass.value(index, true)}
|
||||
onClick={() => onEdit(row, index)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "日期",
|
||||
prop: "date"
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name"
|
||||
},
|
||||
{
|
||||
label: "地址",
|
||||
prop: "address"
|
||||
}
|
||||
];
|
||||
|
||||
function onEdit({ id }, index) {
|
||||
inputValMap.value[index] = Object.assign({}, inputValMap.value[index], {
|
||||
value: id
|
||||
});
|
||||
// 处于修改状态
|
||||
editStatus.value[index] = Object.assign({}, editStatus.value[index], {
|
||||
editing: true
|
||||
});
|
||||
}
|
||||
|
||||
function onMouseleave(index) {
|
||||
inputValMap.value[index]?.value
|
||||
? (activeIndex.value = index)
|
||||
: (activeIndex.value = -1);
|
||||
}
|
||||
|
||||
function onChange(value, index) {
|
||||
inputValMap.value[index].value = value;
|
||||
}
|
||||
|
||||
function onSure(index) {
|
||||
dataList.value[index].id = inputValMap.value[index].value;
|
||||
message(
|
||||
`您修改了第 ${index + 1} 行，修改后数据为：${JSON.stringify(
|
||||
dataList.value[index]
|
||||
)}`,
|
||||
{
|
||||
type: "success"
|
||||
}
|
||||
);
|
||||
// 修改状态关闭
|
||||
editStatus.value[index] = Object.assign({}, editStatus.value[index], {
|
||||
editing: false
|
||||
});
|
||||
delay().then(() => (inputValMap.value[index].value = null));
|
||||
}
|
||||
|
||||
return {
|
||||
columns,
|
||||
dataList
|
||||
};
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useColumns } from "./columns";
|
||||
|
||||
const { columns, dataList } = useColumns();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<pure-table row-key="id" border :data="dataList" :columns="columns" />
|
||||
</template>
|
||||
@ -4,7 +4,6 @@ import RowDrag from "./drag/row/index.vue";
|
||||
import ColumnDrag from "./drag/column/index.vue";
|
||||
import Contextmenu from "./contextmenu/index.vue";
|
||||
import Excel from "./excel/index.vue";
|
||||
import Edit from "./edit/index.vue";
|
||||
import Watermark from "./watermark/index.vue";
|
||||
import Print from "./prints/index.vue";
|
||||
import Echarts from "./echarts/index.vue";
|
||||
@ -50,12 +49,6 @@ export const list = [
|
||||
title: "右键菜单",
|
||||
component: Contextmenu
|
||||
},
|
||||
{
|
||||
key: "edit",
|
||||
content: rendContent("edit"),
|
||||
title: "单元格修改",
|
||||
component: Edit
|
||||
},
|
||||
{
|
||||
key: "excel",
|
||||
content: rendContent("excel"),
|
||||
|
||||
@ -34,7 +34,7 @@ const {
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="部门名称：" prop="name">
|
||||
<el-input
|
||||
|
||||
@ -7,7 +7,7 @@ import { usePublicHooks } from "../../hooks";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { reactive, ref, onMounted, h } from "vue";
|
||||
import type { FormItemProps } from "../utils/types";
|
||||
import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
|
||||
import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
|
||||
|
||||
export function useDept() {
|
||||
const form = reactive({
|
||||
@ -120,6 +120,7 @@ export function useDept() {
|
||||
},
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
fullscreen: deviceDetection(),
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
|
||||
@ -35,7 +35,7 @@ const {
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="菜单名称：" prop="title">
|
||||
<el-input
|
||||
|
||||
@ -6,8 +6,8 @@ import { transformI18n } from "@/plugins/i18n";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import { reactive, ref, onMounted, h } from "vue";
|
||||
import type { FormItemProps } from "../utils/types";
|
||||
import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
|
||||
|
||||
export function useMenu() {
|
||||
const form = reactive({
|
||||
@ -161,6 +161,7 @@ export function useMenu() {
|
||||
},
|
||||
width: "45%",
|
||||
draggable: true,
|
||||
fullscreen: deviceDetection(),
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRole } from "./utils/hook";
|
||||
import { ref, computed, nextTick, onMounted } from "vue";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import {
|
||||
delay,
|
||||
subBefore,
|
||||
deviceDetection,
|
||||
useResizeObserver
|
||||
} from "@pureadmin/utils";
|
||||
|
||||
// import Database from "@iconify-icons/ri/database-2-line";
|
||||
// import More from "@iconify-icons/ep/more-filled";
|
||||
@ -11,29 +17,77 @@ import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import Menu from "@iconify-icons/ep/menu";
|
||||
import AddFill from "@iconify-icons/ri/add-circle-line";
|
||||
import Close from "@iconify-icons/ep/close";
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
|
||||
defineOptions({
|
||||
name: "SystemRole"
|
||||
});
|
||||
|
||||
const iconClass = computed(() => {
|
||||
return [
|
||||
"w-[22px]",
|
||||
"h-[22px]",
|
||||
"flex",
|
||||
"justify-center",
|
||||
"items-center",
|
||||
"outline-none",
|
||||
"rounded-[4px]",
|
||||
"cursor-pointer",
|
||||
"transition-colors",
|
||||
"hover:bg-[#0000000f]",
|
||||
"dark:hover:bg-[#ffffff1f]",
|
||||
"dark:hover:text-[#ffffffd9]"
|
||||
];
|
||||
});
|
||||
|
||||
const treeRef = ref();
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
const contentRef = ref();
|
||||
const treeHeight = ref();
|
||||
|
||||
const {
|
||||
form,
|
||||
isShow,
|
||||
curRow,
|
||||
loading,
|
||||
columns,
|
||||
rowStyle,
|
||||
dataList,
|
||||
treeData,
|
||||
treeProps,
|
||||
isLinkage,
|
||||
pagination,
|
||||
isExpandAll,
|
||||
isSelectAll,
|
||||
treeSearchValue,
|
||||
// buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleMenu,
|
||||
handleSave,
|
||||
handleDelete,
|
||||
filterMethod,
|
||||
transformI18n,
|
||||
onQueryChanged,
|
||||
// handleDatabase,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = useRole();
|
||||
} = useRole(treeRef);
|
||||
|
||||
onMounted(() => {
|
||||
useResizeObserver(contentRef, async () => {
|
||||
await nextTick();
|
||||
delay(60).then(() => {
|
||||
treeHeight.value = parseFloat(
|
||||
subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -42,7 +96,7 @@ const {
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="角色名称：" prop="name">
|
||||
<el-input
|
||||
@ -86,7 +140,13 @@ const {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div
|
||||
ref="contentRef"
|
||||
:class="['flex', deviceDetection() ? 'flex-wrap' : '']"
|
||||
>
|
||||
<PureTableBar
|
||||
:class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
|
||||
style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
|
||||
title="角色管理（仅演示，操作后不生效）"
|
||||
:columns="columns"
|
||||
@refresh="onSearch"
|
||||
@ -102,12 +162,14 @@ const {
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:row-style="rowStyle"
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
@ -132,16 +194,6 @@ const {
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Menu)"
|
||||
@click="handleMenu"
|
||||
>
|
||||
菜单权限
|
||||
</el-button>
|
||||
<el-popconfirm
|
||||
:title="`是否确认删除角色名称为${row.name}的这条数据`"
|
||||
@confirm="handleDelete(row)"
|
||||
@ -158,6 +210,16 @@ const {
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Menu)"
|
||||
@click="handleMenu(row)"
|
||||
>
|
||||
权限
|
||||
</el-button>
|
||||
<!-- <el-dropdown>
|
||||
<el-button
|
||||
class="ml-3 mt-[2px]"
|
||||
@ -199,6 +261,70 @@ const {
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
|
||||
<div
|
||||
v-if="isShow"
|
||||
class="!min-w-[calc(100vw-60vw-268px)] mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
|
||||
>
|
||||
<div class="flex justify-between w-full px-3 pt-5 pb-4">
|
||||
<div class="flex">
|
||||
<span :class="iconClass">
|
||||
<IconifyIconOffline
|
||||
v-tippy="{
|
||||
content: '关闭'
|
||||
}"
|
||||
class="dark:text-white"
|
||||
width="18px"
|
||||
height="18px"
|
||||
:icon="Close"
|
||||
@click="handleMenu"
|
||||
/>
|
||||
</span>
|
||||
<span :class="[iconClass, 'ml-2']">
|
||||
<IconifyIconOffline
|
||||
v-tippy="{
|
||||
content: '保存菜单权限'
|
||||
}"
|
||||
class="dark:text-white"
|
||||
width="18px"
|
||||
height="18px"
|
||||
:icon="Check"
|
||||
@click="handleSave"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<p class="font-bold truncate">
|
||||
菜单权限
|
||||
{{ `${curRow?.name ? `（${curRow.name}）` : ""}` }}
|
||||
</p>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="treeSearchValue"
|
||||
placeholder="请输入菜单进行搜索"
|
||||
class="mb-1"
|
||||
clearable
|
||||
@input="onQueryChanged"
|
||||
/>
|
||||
<div class="flex flex-wrap">
|
||||
<el-checkbox v-model="isExpandAll" label="展开/折叠" />
|
||||
<el-checkbox v-model="isSelectAll" label="全选/全不选" />
|
||||
<el-checkbox v-model="isLinkage" label="父子联动" />
|
||||
</div>
|
||||
<el-tree-v2
|
||||
ref="treeRef"
|
||||
show-checkbox
|
||||
:data="treeData"
|
||||
:props="treeProps"
|
||||
:height="treeHeight"
|
||||
:check-strictly="!isLinkage"
|
||||
:filter-method="filterMethod"
|
||||
>
|
||||
<template #default="{ node }">
|
||||
<span>{{ transformI18n(node.label) }}</span>
|
||||
</template>
|
||||
</el-tree-v2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,25 +1,41 @@
|
||||
import dayjs from "dayjs";
|
||||
import editForm from "../form.vue";
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import { message } from "@/utils/message";
|
||||
import { getRoleList } from "@/api/system";
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { usePublicHooks } from "../../hooks";
|
||||
import { transformI18n } from "@/plugins/i18n";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import type { FormItemProps } from "../utils/types";
|
||||
import type { PaginationProps } from "@pureadmin/table";
|
||||
import { reactive, ref, onMounted, h, toRaw } from "vue";
|
||||
import { getKeyList, deviceDetection } from "@pureadmin/utils";
|
||||
import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
|
||||
import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
|
||||
|
||||
export function useRole() {
|
||||
export function useRole(treeRef: Ref) {
|
||||
const form = reactive({
|
||||
name: "",
|
||||
code: "",
|
||||
status: ""
|
||||
});
|
||||
const curRow = ref();
|
||||
const formRef = ref();
|
||||
const dataList = ref([]);
|
||||
const treeIds = ref([]);
|
||||
const treeData = ref([]);
|
||||
const isShow = ref(false);
|
||||
const loading = ref(true);
|
||||
const isLinkage = ref(false);
|
||||
const treeSearchValue = ref();
|
||||
const switchLoadMap = ref({});
|
||||
const isExpandAll = ref(false);
|
||||
const isSelectAll = ref(false);
|
||||
const { switchStyle } = usePublicHooks();
|
||||
const treeProps = {
|
||||
value: "id",
|
||||
label: "title",
|
||||
children: "children"
|
||||
};
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
@ -29,22 +45,18 @@ export function useRole() {
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "角色编号",
|
||||
prop: "id",
|
||||
minWidth: 100
|
||||
prop: "id"
|
||||
},
|
||||
{
|
||||
label: "角色名称",
|
||||
prop: "name",
|
||||
minWidth: 120
|
||||
prop: "name"
|
||||
},
|
||||
{
|
||||
label: "角色标识",
|
||||
prop: "code",
|
||||
minWidth: 150
|
||||
prop: "code"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
minWidth: 130,
|
||||
cellRenderer: scope => (
|
||||
<el-switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
@ -58,24 +70,25 @@ export function useRole() {
|
||||
style={switchStyle.value}
|
||||
onChange={() => onChange(scope as any)}
|
||||
/>
|
||||
)
|
||||
),
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "remark",
|
||||
minWidth: 150
|
||||
minWidth: 160
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
minWidth: 180,
|
||||
prop: "createTime",
|
||||
minWidth: 160,
|
||||
formatter: ({ createTime }) =>
|
||||
dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 240,
|
||||
width: 210,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
@ -179,6 +192,7 @@ export function useRole() {
|
||||
},
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
fullscreen: deviceDetection(),
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
@ -210,29 +224,92 @@ export function useRole() {
|
||||
}
|
||||
|
||||
/** 菜单权限 */
|
||||
function handleMenu() {
|
||||
message("等菜单管理页面开发后完善");
|
||||
async function handleMenu(row?: any) {
|
||||
const { id } = row;
|
||||
if (id) {
|
||||
curRow.value = row;
|
||||
isShow.value = true;
|
||||
const { data } = await getRoleMenuIds({ id });
|
||||
treeRef.value.setCheckedKeys(data);
|
||||
} else {
|
||||
curRow.value = null;
|
||||
isShow.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 高亮当前权限选中行 */
|
||||
function rowStyle({ row: { id } }) {
|
||||
return {
|
||||
cursor: "pointer",
|
||||
background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
|
||||
};
|
||||
}
|
||||
|
||||
/** 菜单权限-保存 */
|
||||
function handleSave() {
|
||||
const { id, name } = curRow.value;
|
||||
// 根据用户 id 调用实际项目中菜单权限修改接口
|
||||
console.log(id, treeRef.value.getCheckedKeys());
|
||||
message(`角色名称为${name}的菜单权限修改成功`, {
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
|
||||
/** 数据权限 可自行开发 */
|
||||
// function handleDatabase() {}
|
||||
|
||||
onMounted(() => {
|
||||
const onQueryChanged = (query: string) => {
|
||||
treeRef.value!.filter(query);
|
||||
};
|
||||
|
||||
const filterMethod = (query: string, node) => {
|
||||
return transformI18n(node.title)!.includes(query);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
onSearch();
|
||||
const { data } = await getRoleMenu();
|
||||
treeIds.value = getKeyList(data, "id");
|
||||
treeData.value = handleTree(data);
|
||||
});
|
||||
|
||||
watch(isExpandAll, val => {
|
||||
val
|
||||
? treeRef.value.setExpandedKeys(treeIds.value)
|
||||
: treeRef.value.setExpandedKeys([]);
|
||||
});
|
||||
|
||||
watch(isSelectAll, val => {
|
||||
val
|
||||
? treeRef.value.setCheckedKeys(treeIds.value)
|
||||
: treeRef.value.setCheckedKeys([]);
|
||||
});
|
||||
|
||||
return {
|
||||
form,
|
||||
isShow,
|
||||
curRow,
|
||||
loading,
|
||||
columns,
|
||||
rowStyle,
|
||||
dataList,
|
||||
treeData,
|
||||
treeProps,
|
||||
isLinkage,
|
||||
pagination,
|
||||
isExpandAll,
|
||||
isSelectAll,
|
||||
treeSearchValue,
|
||||
// buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
openDialog,
|
||||
handleMenu,
|
||||
handleSave,
|
||||
handleDelete,
|
||||
filterMethod,
|
||||
transformI18n,
|
||||
onQueryChanged,
|
||||
// handleDatabase,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
|
||||
@ -32,6 +32,7 @@ const {
|
||||
selectedNum,
|
||||
pagination,
|
||||
buttonClass,
|
||||
deviceDetection,
|
||||
onSearch,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
@ -50,20 +51,22 @@ const {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-between">
|
||||
<div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
|
||||
<tree
|
||||
ref="treeRef"
|
||||
class="min-w-[200px] mr-2"
|
||||
:class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']"
|
||||
:treeData="treeData"
|
||||
:treeLoading="treeLoading"
|
||||
@tree-select="onTreeSelect"
|
||||
/>
|
||||
<div class="w-[calc(100%-200px)]">
|
||||
<div
|
||||
:class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="用户名称：" prop="username">
|
||||
<el-input
|
||||
|
||||
@ -36,8 +36,9 @@ const defaultProps = {
|
||||
const buttonClass = computed(() => {
|
||||
return [
|
||||
"!h-[20px]",
|
||||
"!text-sm",
|
||||
"reset-margin",
|
||||
"!text-gray-500",
|
||||
"!text-[var(--el-text-color-regular)]",
|
||||
"dark:!text-white",
|
||||
"dark:hover:!text-primary"
|
||||
];
|
||||
@ -96,7 +97,7 @@ defineExpose({ onTreeReset });
|
||||
<div
|
||||
v-loading="props.treeLoading"
|
||||
class="h-full bg-bg_color overflow-auto"
|
||||
:style="{ minHeight: `calc(100vh - 145px)` }"
|
||||
:style="{ minHeight: `calc(100vh - 141px)` }"
|
||||
>
|
||||
<div class="flex items-center h-[34px]">
|
||||
<el-input
|
||||
|
||||
@ -10,7 +10,12 @@ import { usePublicHooks } from "../../hooks";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import type { PaginationProps } from "@pureadmin/table";
|
||||
import type { FormItemProps, RoleFormItemProps } from "../utils/types";
|
||||
import { hideTextAtIndex, getKeyList, isAllEmpty } from "@pureadmin/utils";
|
||||
import {
|
||||
getKeyList,
|
||||
isAllEmpty,
|
||||
hideTextAtIndex,
|
||||
deviceDetection
|
||||
} from "@pureadmin/utils";
|
||||
import {
|
||||
getRoleIds,
|
||||
getDeptList,
|
||||
@ -322,6 +327,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
||||
},
|
||||
width: "46%",
|
||||
draggable: true,
|
||||
fullscreen: deviceDetection(),
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(editForm, { ref: formRef }),
|
||||
@ -360,6 +366,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
||||
width: "40%",
|
||||
draggable: true,
|
||||
closeOnClickModal: false,
|
||||
fullscreen: deviceDetection(),
|
||||
contentRenderer: () =>
|
||||
h(croppingUpload, {
|
||||
ref: cropRef,
|
||||
@ -389,6 +396,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
||||
width: "30%",
|
||||
draggable: true,
|
||||
closeOnClickModal: false,
|
||||
fullscreen: deviceDetection(),
|
||||
contentRenderer: () => (
|
||||
<>
|
||||
<ElForm ref={ruleFormRef} model={pwdForm}>
|
||||
@ -471,6 +479,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
||||
},
|
||||
width: "400px",
|
||||
draggable: true,
|
||||
fullscreen: deviceDetection(),
|
||||
fullscreenIcon: true,
|
||||
closeOnClickModal: false,
|
||||
contentRenderer: () => h(roleForm),
|
||||
@ -507,6 +516,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
|
||||
selectedNum,
|
||||
pagination,
|
||||
buttonClass,
|
||||
deviceDetection,
|
||||
onSearch,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user