From c37df8655fbf6b64dca5cf92c2e8f0504a164246 Mon Sep 17 00:00:00 2001
From: du <13220750630.163.com>
Date: 星期三, 25 六月 2025 16:19:01 +0800
Subject: [PATCH] 页面设计器
---
ruoyi-ui/apps/web-antd/src/views/tool/page-designer/index.vue | 75 ++++++++++++++++++++++++++++++++++---
1 files changed, 69 insertions(+), 6 deletions(-)
diff --git a/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/index.vue b/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/index.vue
index af1bcf1..aa8342d 100644
--- a/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/index.vue
+++ b/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/index.vue
@@ -9,14 +9,13 @@
<template #action="{ row }">
<Space>
<ghost-button @click="handleEdit(row)">缂栬緫</ghost-button>
- <ghost-button class="btn-success" @click="handleSubAdd(row)">鏂板</ghost-button>
<Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="纭鍒犻櫎锛�" @confirm="handleDelete(row)">
<ghost-button danger @click.stop="">鍒犻櫎</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
- <PageDrawer ref="pageModalRef" @reload="tableApi.query()" />
+ <PageDrawer ref="pageModalRef" @reload="tableApi.query()" :menu-array="menuArray" />
</Page>
<Fallback v-else description="鎮ㄦ病鏈夐〉闈㈢敓鎴愬櫒鐨勮闂潈闄�" status="403" />
</template>
@@ -34,11 +33,50 @@
import PageDrawer from './page-drawer.vue';
import FcDesigner from '@form-create/designer';
import { pageList, pageRemove } from '#/api/tool/page-designer';
-
+import { menuList } from '../../../api/system/menu';
+import { listToTree} from '@vben/utils';
// 绉婚櫎mock鏁版嵁
// const pageList = async (params: any) => { ... };
// const pageRemove = async (ids: number[]) => {};
+const menuArray = ref([]);
+const processedMenuTree = ref([]);
+onMounted(async () => {
+ try {
+ // 鑾峰彇鍘熷鑿滃崟鏁版嵁
+ const rawMenuData = await menuList();
+ menuArray.value = rawMenuData;
+ // 澶勭悊鑿滃崟鏁版嵁
+ processMenuData();
+ } catch (error) {
+ console.error('鑾峰彇鑿滃崟鏁版嵁澶辫触:', error);
+ }
+});
+// 澶勭悊鑿滃崟鏁版嵁鐨勫嚱鏁�
+const processMenuData = () => {
+ if (!menuArray.value || menuArray.value.length === 0) return;
+
+ // 1. 杩囨护鎺夋寜閽被鍨�(F)鍜岃彍鍗曠被鍨�(C)
+ const filteredList = menuArray.value.filter(item =>
+ item.menuType !== 'F' && item.menuType !== 'C'
+ );
+
+ // 2. 杞崲涓烘爲褰㈢粨鏋�
+ const treeData = listToTree(filteredList, {
+ id: 'menuId',
+ pid: 'parentId'
+ });
+
+ // 3. 娣诲姞鏍硅妭鐐�
+ processedMenuTree.value = [
+ {
+ menuId: 0,
+ parentId: 0,
+ menuName: '鏍圭洰褰�',
+ children: treeData
+ }
+ ];
+};
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 80,
@@ -49,7 +87,26 @@
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
};
+const getFullMenuPath = (id: number) => {
+ if (!processedMenuTree.value || processedMenuTree.value.length === 0) return '';
+ // 閫掑綊鏌ユ壘鑿滃崟璺緞
+ const findPath = (tree, currentId, path = []): string[] | null => {
+ for (const item of tree) {
+ if (item.menuId === currentId) {
+ return [...path, item.menuName];
+ }
+ if (item.children && item.children.length > 0) {
+ const found = findPath(item.children, currentId, [...path, item.menuName]);
+ if (found) return found;
+ }
+ }
+ return null;
+ };
+
+ const path = findPath(processedMenuTree.value, id);
+ return path ? path.join(' / ') : '鏍圭洰褰�';
+};
const gridOptions: VxeGridProps = {
columns,
height: 'auto',
@@ -60,15 +117,21 @@
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
- console.log('鏌ヨ鍙傛暟:', { page, formValues });
const resp = await pageList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
- console.log('鎺ュ彛杩斿洖鏁版嵁:', resp);
+
+ // 澶勭悊杩斿洖鏁版嵁锛屾坊鍔爉enuParentName
+ const processedRows = resp.rows.map(row => {
+ return {
+ ...row,
+ menuParentName: getFullMenuPath(row.menuParentId) || '鏍圭洰褰�'
+ };
+ });
return {
- rows: resp.rows,
+ rows: processedRows, // 浣跨敤澶勭悊鍚庣殑鏁版嵁
total: resp.total,
};
},
--
Gitblit v1.9.3