<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>
|
<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()" />
|
</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';
|
|
// 移除mock数据
|
// const pageList = async (params: any) => { ... };
|
// const pageRemove = async (ids: number[]) => {};
|
|
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 gridOptions: VxeGridProps = {
|
columns,
|
height: 'auto',
|
keepSource: true,
|
pagerConfig: {
|
enabled: true,
|
},
|
proxyConfig: {
|
ajax: {
|
query: async ({ page }, formValues = {}) => {
|
console.log('查询参数:', { page, formValues });
|
const resp = await pageList({
|
pageNum: page.currentPage,
|
pageSize: page.pageSize,
|
...formValues,
|
});
|
console.log('接口返回数据:', resp);
|
return {
|
rows: resp.rows,
|
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>
|
