From 78314c7574a880a1bccbdf9a8a531d3cf025a6b4 Mon Sep 17 00:00:00 2001
From: 康鲁杰 <60095866+KangLujie@users.noreply.github.com>
Date: 星期二, 24 六月 2025 10:13:28 +0800
Subject: [PATCH] 页面设计前后端
---
ruoyi-ui/apps/web-antd/src/views/tool/page-designer/index.vue | 151 ++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 146 insertions(+), 5 deletions(-)
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 d4fea39..af1bcf1 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
@@ -1,13 +1,154 @@
<template>
- <div>111</div>
+ <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>
-export default {
- name: "index"
+<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>
--
Gitblit v1.9.3