页面设计器

du

2 天以前 c37df8655fbf6b64dca5cf92c2e8f0504a164246

页面设计器

 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: '状态',

 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);

        // 处理返回数据，添加menuParentName
        const processedRows = resp.rows.map(row => {
        return {
          rows: resp.rows,
            ...row,
            menuParentName: getFullMenuPath(row.menuParentId) || '根目录'
          };
        });
        return {
          rows: processedRows,  // 使用处理后的数据
          total: resp.total,
        };
      },

 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,10 +42,17 @@
const modalLoading = ref(false);
const currentEditId = ref<string | number>(''); // 当前编辑的ID
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;
@@ -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); });
  // 转为树结构