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 ++++++++++++++++++++++++++++++++------------------ 1 files changed, 32 insertions(+), 18 deletions(-) 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