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/page-drawer.vue | 50 ++++++++++------
ruoyi-ui/apps/web-antd/src/views/tool/page-designer/data.tsx | 10 +--
ruoyi-ui/apps/web-antd/src/views/tool/page-designer/index.vue | 75 +++++++++++++++++++++++--
3 files changed, 104 insertions(+), 31 deletions(-)
diff --git a/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/data.tsx b/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/data.tsx
index bdb0e85..365557c 100644
--- a/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/data.tsx
+++ b/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/data.tsx
@@ -29,12 +29,8 @@
},
{
title: '涓婄骇鐩綍',
- field: 'parentName',
- slots: {
- default: ({ row }) => {
- return row.parent?.name || row.menu?.menuName || '-';
- },
- },
+ field: 'menuParentName',
+
},
{
title: '鐘舵��',
@@ -110,4 +106,4 @@
rows: 2,
},
},
-];
\ No newline at end of file
+];
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,
};
},
diff --git a/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/page-drawer.vue b/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/page-drawer.vue
index 153664d..b8ac9be 100644
--- a/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/page-drawer.vue
+++ b/ruoyi-ui/apps/web-antd/src/views/tool/page-designer/page-drawer.vue
@@ -5,7 +5,7 @@
import { useVbenForm } from '#/adapter/form';
import { drawerSchema } from './data';
import FcDesigner from '@form-create/designer';
-import { menuList } from '../../../api/system/menu';
+
import { listToTree, addFullName, getPopupContainer } from '@vben/utils';
import { pageAdd, pageUpdate, pageInfo } from '#/api/tool/page-designer';
@@ -13,6 +13,7 @@
id?: number | string;
update: boolean;
}
+
const emit = defineEmits<{ reload: [] }>();
@@ -41,22 +42,29 @@
const modalLoading = ref(false);
const currentEditId = ref<string | number>(''); // 褰撳墠缂栬緫鐨処D
const fullMenuTree = ref([]);
-
+const props=defineProps({
+ menuArray: {
+ type: Array,
+ required: true,
+ default: () => []
+ }
+});
// 鎵撳紑寮圭獥
const open = async (params: ModalProps = { update: false }) => {
try {
+
modalVisible.value = true;
modalLoading.value = true;
isUpdate.value = params.update;
currentEditId.value = params.id || ''; // 淇濆瓨褰撳墠缂栬緫鐨処D
await setupPageSelect();
-
+
if (params.id) {
await formApi.setFieldValue('menuParentId', params.id);
if (params.update) {
// 鑾峰彇璇︽儏鏁版嵁
const record = await pageInfo(params.id);
-
+
// 璁剧疆鍩虹琛ㄥ崟鏁版嵁
const menuParentId = String(record.menuParentId || record.parentId || '');
await formApi.setValues({
@@ -73,11 +81,11 @@
const formRule = JSON.parse(record.formJson);
console.log('璁捐鍣ㄨ鍒�:', formRule);
designer.value.setRule(formRule);
-
+
// 鏇存柊瀛楁閫夐」
await nextTick();
updateFieldOptions();
-
+
// 鎭㈠閫変腑鐨勫瓧娈�
if (record.showColumn) {
selectedFields.value = JSON.parse(record.showColumn);
@@ -109,9 +117,15 @@
async function setupPageSelect() {
// 鑾峰彇鑿滃崟鏁版嵁
- const menuArray = await menuList();
+ if (!props.menuArray || props.menuArray.length === 0) {
+ await nextTick(); // 绛夊緟鍙兘鐨勫紓姝ュ姞杞�
+ if (!props.menuArray || props.menuArray.length === 0) {
+ console.warn('menuArray is empty');
+ return;
+ }
+ }
// 杩囨护鎺夋寜閽被鍨�
- const filteredList = menuArray.filter(item => item.menuType !== 'F' && item.menuType !== 'C');
+ const filteredList = props.menuArray.filter(item => item.menuType !== 'F' && item.menuType !== 'C');
// 鏀寔i18n
filteredList.forEach(item => { item.menuName = $t(item.menuName); });
// 杞负鏍戠粨鏋�
@@ -165,7 +179,7 @@
const syncAllFields = () => {
// 鑾峰彇琛ㄥ崟缁勪欢鐨勮鍒欐弿杩�
const formDesc = designer.value?.getFormDescription?.();
-
+
if (!formDesc || !Array.isArray(formDesc)) {
message.warning('鏆傛棤璁捐鏁版嵁');
return;
@@ -178,8 +192,8 @@
title: item.title,
field: item.field
}));
-
-
+
+
if (allFields.length === 0) {
message.warning('鏈壘鍒板彲鐢ㄥ瓧娈�');
return;
@@ -237,12 +251,12 @@
return;
}
const data = await formApi.getValues();
-
+
// 濡傛灉鏄紪杈戞ā寮忥紝娣诲姞id瀛楁
if (isUpdate.value) {
data.id = currentEditId.value;
}
-
+
// 鑾峰彇琛ㄥ崟璁捐 JSON
data.formJson = designer.value.getJson();
// 娣诲姞閫変腑鐨勫瓧娈�
@@ -279,19 +293,19 @@
:bodyStyle="{ padding: '24px', minHeight: '60vh' }"
destroyOnClose
wrapClassName="page-designer-modal"
- >
+ >
<template #closeIcon>
<span></span>
</template>
<BasicForm />
<div style="margin-top: 16px;">
- <FcDesigner
- ref="designer"
+ <FcDesigner
+ ref="designer"
@update="handleDesignerChange"
@change="handleDesignerChange"
@add-rule="handleDesignerChange"
@remove-rule="handleDesignerChange"
-
+
/>
<div style="margin-top: 8px; display: flex; justify-content: flex-end;">
<a-button type="primary" ghost @click="syncAllFields">
@@ -320,4 +334,4 @@
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3