页面设计前后端

康鲁杰

昨天 78314c7574a880a1bccbdf9a8a531d3cf025a6b4

 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>