<template>
|
<Page v-if="isAdmin" :auto-content-height="true">
|
<BasicTable table-title="页面设计器" >
|
<template #toolbar-tools>
|
<Space>
|
<a-button type="primary" @click="handleAdd">新增</a-button>
|
</Space>
|
</template>
|
<template #action="{ row }">
|
<Space>
|
<ghost-button @click="handleEdit(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()" :menu-array="menuArray" />
|
</Page>
|
<Fallback v-else description="您没有页面生成器的访问权限" status="403" />
|
</template>
|
|
<script setup lang="ts">
|
import type { VbenFormProps } from '@vben/common-ui';
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
import { computed, ref, onMounted } from 'vue';
|
import { useAccess } from '@vben/access';
|
import { Fallback, Page, useVbenDrawer } from '@vben/common-ui';
|
import { eachTree, getVxePopupContainer } from '@vben/utils';
|
import { Popconfirm, Space } from 'ant-design-vue';
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
import { columns, querySchema } from './data';
|
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,
|
componentProps: {
|
allowClear: true,
|
},
|
},
|
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',
|
keepSource: true,
|
pagerConfig: {
|
enabled: true,
|
},
|
proxyConfig: {
|
ajax: {
|
query: async ({ page }, formValues = {}) => {
|
const resp = await pageList({
|
pageNum: page.currentPage,
|
pageSize: page.pageSize,
|
...formValues,
|
});
|
|
// 处理返回数据，添加menuParentName
|
const processedRows = resp.rows.map(row => {
|
return {
|
...row,
|
menuParentName: getFullMenuPath(row.menuParentId) || '根目录'
|
};
|
});
|
return {
|
rows: processedRows, // 使用处理后的数据
|
total: resp.total,
|
};
|
},
|
},
|
},
|
rowConfig: {
|
keyField: 'id',
|
},
|
id: 'tool-page-designer-index',
|
columnConfig: { resizable: true },
|
};
|
|
const [BasicTable, tableApi] = useVbenVxeGrid({
|
formOptions,
|
gridOptions,
|
});
|
|
const designer = ref();
|
const pageModalRef = ref();
|
|
function getFormJson() {
|
// 获取设计结果
|
const json = designer.value.getRule();
|
// 你可以将 json 存到后端
|
}
|
|
function setFormJson(json) {
|
// 加载已有设计
|
designer.value.setRule(json);
|
}
|
|
function handleAdd() {
|
pageModalRef.value.open({ update: false });
|
}
|
|
function handleEdit(record) {
|
pageModalRef.value.open({ id: record.id, update: true });
|
}
|
|
async function handleDelete(row: any) {
|
await pageRemove([row.id]);
|
await tableApi.query();
|
}
|
|
function handleSubAdd(row) {
|
pageModalRef.value.open({ id: row.id, update: false });
|
}
|
|
const { hasAccessByRoles } = useAccess();
|
const isAdmin = computed(() => {
|
return hasAccessByRoles(['admin', 'superadmin']);
|
});
|
</script>
|
|
<style scoped>
|
.designer-page {
|
background: #f5f6fa;
|
padding: 16px;
|
min-height: 100vh;
|
}
|
.designer-query-form {
|
background: #fff;
|
padding: 16px 16px 0 16px;
|
border-radius: 6px;
|
margin-bottom: 12px;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
}
|
.designer-toolbar {
|
background: #fff;
|
padding: 12px 16px;
|
border-radius: 6px;
|
margin-bottom: 12px;
|
display: flex;
|
gap: 8px;
|
}
|
.designer-table {
|
background: #fff;
|
border-radius: 6px;
|
padding: 0 0 16px 0;
|
}
|
</style>
|
