Fix page designer validation and generation
This commit is contained in:
王鹏
464
RuoYi-Vue/easycode-web/src/views/PageDesignerView.vue
Normal file
464
RuoYi-Vue/easycode-web/src/views/PageDesignerView.vue
Normal file
@@ -0,0 +1,464 @@
|
||||
<template>
|
||||
<section class="designer-shell-page" v-loading="loading">
|
||||
<header class="designer-topbar">
|
||||
<div class="designer-title">
|
||||
<span class="breadcrumb">{{ projectName || '项目' }} / 页面设计器</span>
|
||||
<h1>{{ scopeTitle }}</h1>
|
||||
<p>{{ scopeDescription }}</p>
|
||||
</div>
|
||||
<div class="designer-actions">
|
||||
<span v-if="hasUnsavedChanges" class="dirty-badge">有未保存修改</span>
|
||||
<el-button :disabled="!projectId" :loading="previewing" @click="handlePreview">预览页面</el-button>
|
||||
<el-button type="primary" :disabled="!projectId" :loading="saving" @click="saveAllDesigns">保存设计</el-button>
|
||||
<el-button @click="handleBack">返回工作台</el-button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="designer-toolbar">
|
||||
<el-segmented v-model="scopeProxy" :options="scopeOptions" />
|
||||
<div class="toolbar-meta">
|
||||
<span>{{ pageDesigns.length }} 个页面</span>
|
||||
<span>{{ database.tables.length }} 张数据表</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<el-alert
|
||||
v-if="errorMessage"
|
||||
class="designer-alert"
|
||||
type="warning"
|
||||
:title="errorMessage"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<div class="designer-card">
|
||||
<FrontendPageDesigner
|
||||
ref="designerRef"
|
||||
:designs="pageDesigns"
|
||||
:database="database"
|
||||
:block-definitions="scope === 'frontend' ? businessBlockDefinitions : []"
|
||||
:mode="scope"
|
||||
:show-header="false"
|
||||
:saving="saving"
|
||||
:initializing="initializing"
|
||||
@update:designs="handleDesignsUpdate"
|
||||
@dirty-change="handleDirtyChange"
|
||||
@init-designs="handleInitPageDesigns"
|
||||
@create-design="handleCreatePageDesign"
|
||||
@delete-design="handleDeletePageDesign"
|
||||
@save-design="handleSavePageDesign"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import FrontendPageDesigner from '@/components/FrontendPageDesigner.vue'
|
||||
import {
|
||||
createPageDesign,
|
||||
deletePageDesign,
|
||||
generateProject,
|
||||
getDatabase,
|
||||
getProject,
|
||||
initPageDesigns,
|
||||
listBusinessBlocks,
|
||||
listPageDesigns,
|
||||
savePageDesign
|
||||
} from '@/api/project'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const designerRef = ref(null)
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const initializing = ref(false)
|
||||
const previewing = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const projectName = ref('')
|
||||
const database = ref({ tables: [], sql: '', erDiagram: emptyErDiagram(), businessActions: [] })
|
||||
const pageDesigns = ref([])
|
||||
const businessBlockDefinitions = ref([])
|
||||
const hasUnsavedChanges = ref(false)
|
||||
|
||||
const projectId = computed(() => normalizeProjectId(route.params.projectId || route.query.projectId))
|
||||
const scope = computed(() => route.query.scope === 'admin' ? 'admin' : 'frontend')
|
||||
const scopeProxy = computed({
|
||||
get: () => scope.value,
|
||||
set: (value) => {
|
||||
router.replace({
|
||||
path: `/project/${projectId.value}/page-designer`,
|
||||
query: { ...route.query, scope: value }
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const scopeOptions = [
|
||||
{ label: '前台', value: 'frontend' },
|
||||
{ label: '后台', value: 'admin' }
|
||||
]
|
||||
|
||||
const scopeTitle = computed(() => scope.value === 'admin' ? '后台页面设计' : '前台页面设计')
|
||||
const scopeDescription = computed(() => scope.value === 'admin'
|
||||
? '配置后台管理页的查询区、工具栏、表格列、表单字段、批量操作和行按钮。'
|
||||
: '配置前台页面的字段、查询区、卡片列表、按钮和公告、轮播等业务块。')
|
||||
|
||||
function emptyErDiagram() {
|
||||
return {
|
||||
positions: {},
|
||||
relations: [],
|
||||
deletedEdgeIds: []
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeProjectId(value) {
|
||||
const id = Number(value)
|
||||
return Number.isFinite(id) && id > 0 ? id : null
|
||||
}
|
||||
|
||||
function normalizeErDiagram(value) {
|
||||
const source = value && typeof value === 'object' ? value : {}
|
||||
return {
|
||||
positions: source.positions && typeof source.positions === 'object' ? source.positions : {},
|
||||
relations: Array.isArray(source.relations) ? source.relations : [],
|
||||
deletedEdgeIds: Array.isArray(source.deletedEdgeIds) ? source.deletedEdgeIds : []
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeDatabase(payload) {
|
||||
const data = payload?.data || payload || {}
|
||||
return {
|
||||
tables: Array.isArray(data.tables) ? data.tables : [],
|
||||
sql: data.sql || '',
|
||||
erDiagram: normalizeErDiagram(data.erDiagram),
|
||||
businessActions: Array.isArray(data.businessActions) ? data.businessActions : []
|
||||
}
|
||||
}
|
||||
|
||||
async function loadDesignerData() {
|
||||
if (!projectId.value) {
|
||||
errorMessage.value = '缺少项目 ID，请从工作台重新进入页面设计器'
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
const [projectResult, databaseResult, designResult, blockResult] = await Promise.all([
|
||||
getProject(projectId.value),
|
||||
getDatabase(projectId.value),
|
||||
listPageDesigns(projectId.value, scope.value),
|
||||
listBusinessBlocks(projectId.value)
|
||||
])
|
||||
projectName.value = projectResult?.projectName || ''
|
||||
database.value = normalizeDatabase(databaseResult)
|
||||
pageDesigns.value = Array.isArray(designResult) ? designResult : []
|
||||
businessBlockDefinitions.value = Array.isArray(blockResult) ? blockResult : []
|
||||
hasUnsavedChanges.value = false
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message || '加载页面设计器失败'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleDesignsUpdate(designs) {
|
||||
pageDesigns.value = Array.isArray(designs) ? designs : []
|
||||
hasUnsavedChanges.value = true
|
||||
}
|
||||
|
||||
function handleDirtyChange(isDirty) {
|
||||
if (isDirty) {
|
||||
hasUnsavedChanges.value = true
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInitPageDesigns() {
|
||||
if (!projectId.value) return
|
||||
initializing.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
const result = await initPageDesigns(projectId.value, scope.value)
|
||||
pageDesigns.value = Array.isArray(result?.designs) ? result.designs : []
|
||||
if (!pageDesigns.value.length) {
|
||||
const refreshed = await listPageDesigns(projectId.value, scope.value)
|
||||
pageDesigns.value = Array.isArray(refreshed) ? refreshed : []
|
||||
}
|
||||
hasUnsavedChanges.value = false
|
||||
ElMessage.success(`${scopeTitle.value}已初始化`)
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message || `初始化${scopeTitle.value}失败`
|
||||
} finally {
|
||||
initializing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCreatePageDesign(design) {
|
||||
if (!projectId.value) return
|
||||
const wasDirty = hasUnsavedChanges.value
|
||||
saving.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
const saved = await createPageDesign(projectId.value, design, scope.value)
|
||||
pageDesigns.value = pageDesigns.value.concat(saved)
|
||||
hasUnsavedChanges.value = wasDirty
|
||||
ElMessage.success('页面已新增')
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message || '新增页面失败'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSavePageDesign(design) {
|
||||
if (!projectId.value || !design?.designId) return
|
||||
saving.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
const saved = await savePageDesign(projectId.value, design.designId, design, scope.value)
|
||||
replacePageDesign(saved)
|
||||
hasUnsavedChanges.value = false
|
||||
ElMessage.success('页面设计已保存')
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message || '保存页面设计失败'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeletePageDesign(design) {
|
||||
if (!projectId.value || !design?.designId) return
|
||||
const confirmed = await confirmDeletePage(design)
|
||||
if (!confirmed) return
|
||||
const wasDirty = hasUnsavedChanges.value
|
||||
saving.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
await deletePageDesign(projectId.value, design.designId, scope.value)
|
||||
removePageDesign(design)
|
||||
hasUnsavedChanges.value = wasDirty
|
||||
ElMessage.success('页面已删除')
|
||||
} catch (error) {
|
||||
if (shouldRemoveMissingPage(error)) {
|
||||
removePageDesign(design)
|
||||
ElMessage.warning('页面已不存在，已从列表移除')
|
||||
return
|
||||
}
|
||||
errorMessage.value = error.message || '删除页面失败'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function replacePageDesign(saved) {
|
||||
pageDesigns.value = pageDesigns.value.map((item) => {
|
||||
const sameDesign = String(item.designId || item.pageCode) === String(saved.designId || saved.pageCode)
|
||||
return sameDesign ? saved : item
|
||||
})
|
||||
}
|
||||
|
||||
function removePageDesign(deleted) {
|
||||
pageDesigns.value = pageDesigns.value.filter((item) => {
|
||||
return String(item.designId || item.pageCode) !== String(deleted.designId || deleted.pageCode)
|
||||
})
|
||||
}
|
||||
|
||||
function shouldRemoveMissingPage(error) {
|
||||
const message = String(error?.message || '')
|
||||
return message.includes('不存在') || message.includes('无权限') || message.includes('404')
|
||||
}
|
||||
|
||||
async function confirmDeletePage(design) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认删除页面“${design.pageName || design.pageCode}”？`, '删除页面', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '删除',
|
||||
cancelButtonText: '取消'
|
||||
})
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveAllDesigns() {
|
||||
if (!projectId.value) return
|
||||
designerRef.value?.commitCurrentDraft?.()
|
||||
const pendingDesigns = pageDesigns.value.filter((design) => design?.designId)
|
||||
if (!pendingDesigns.length) {
|
||||
hasUnsavedChanges.value = false
|
||||
return
|
||||
}
|
||||
saving.value = true
|
||||
errorMessage.value = ''
|
||||
try {
|
||||
for (const design of pendingDesigns) {
|
||||
const saved = await savePageDesign(projectId.value, design.designId, design, scope.value)
|
||||
replacePageDesign(saved)
|
||||
}
|
||||
hasUnsavedChanges.value = false
|
||||
ElMessage.success('页面设计已保存')
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message || '保存页面设计失败'
|
||||
throw error
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePreview() {
|
||||
if (!projectId.value) return
|
||||
previewing.value = true
|
||||
try {
|
||||
await saveAllDesigns()
|
||||
await generateProject(projectId.value)
|
||||
router.push(`/project/${projectId.value}/preview`)
|
||||
} catch (error) {
|
||||
errorMessage.value = error.message || '生成预览失败'
|
||||
} finally {
|
||||
previewing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmLeaveDirty() {
|
||||
if (!hasUnsavedChanges.value) return true
|
||||
try {
|
||||
await ElMessageBox.confirm('当前页面设计有未保存修改，确认离开吗？', '未保存修改', {
|
||||
type: 'warning',
|
||||
confirmButtonText: '离开',
|
||||
cancelButtonText: '继续编辑'
|
||||
})
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleBack() {
|
||||
router.push({ path: '/generate', query: { projectId: projectId.value } })
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [projectId.value, scope.value],
|
||||
() => {
|
||||
loadDesignerData()
|
||||
}
|
||||
)
|
||||
|
||||
onMounted(loadDesignerData)
|
||||
|
||||
onBeforeRouteLeave(async () => {
|
||||
return confirmLeaveDirty()
|
||||
})
|
||||
|
||||
onBeforeRouteUpdate(async () => {
|
||||
return confirmLeaveDirty()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.designer-shell-page {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
min-height: calc(100vh - 76px);
|
||||
padding: 20px;
|
||||
background: #f4f7fb;
|
||||
}
|
||||
|
||||
.designer-topbar,
|
||||
.designer-toolbar,
|
||||
.designer-card {
|
||||
border: 1px solid #dfe6f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.designer-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
|
||||
.designer-title {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
color: #667085;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.designer-title h1 {
|
||||
margin: 0;
|
||||
color: #172033;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.designer-title p {
|
||||
margin: 0;
|
||||
color: #667085;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.designer-actions,
|
||||
.designer-toolbar,
|
||||
.toolbar-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.designer-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.designer-toolbar {
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.toolbar-meta {
|
||||
color: #667085;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dirty-badge {
|
||||
padding: 5px 9px;
|
||||
border-radius: 999px;
|
||||
background: #fff8e6;
|
||||
color: #b7791f;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.designer-alert {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.designer-card {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.designer-card :deep(.page-designer-body) {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.designer-topbar,
|
||||
.designer-toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.designer-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user