添加动态页功能
This commit is contained in:
@ -14,6 +14,15 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@fortawesome/fontawesome-free": "6.7.2",
|
||||
"amis": "6.12.0",
|
||||
"amis-core": "6.12.0",
|
||||
"amis-editor": "6.12.0",
|
||||
"amis-editor-core": "6.12.0",
|
||||
"amis-formula": "6.12.0",
|
||||
"amis-theme-editor": "2.0.10",
|
||||
"amis-theme-editor-helper": "2.0.27",
|
||||
"amis-ui": "6.12.0",
|
||||
"ant-design-vue": "^4.2.6",
|
||||
"axios": "^1.8.4",
|
||||
"dayjs": "^1.11.13",
|
||||
@ -21,10 +30,16 @@
|
||||
"jsencrypt": "^3.3.2",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"mobx": "^4.15.7",
|
||||
"mobx-react": "^6.3.1",
|
||||
"mobx-state-tree": "3.17.3",
|
||||
"pinia": "^3.0.2",
|
||||
"pinia-plugin-persistedstate": "^4.2.0",
|
||||
"qs": "^6.14.0",
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"tree-lodash": "^0.4.0",
|
||||
"veaury": "^2.6.2",
|
||||
"vue": "^3.5.13",
|
||||
"vue-request": "^2.0.4",
|
||||
"vue-router": "^4.5.0"
|
||||
@ -46,6 +61,7 @@
|
||||
"vite": "^6.3.2",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-html": "^3.2.2",
|
||||
"vite-plugin-static-copy": "^3.0.0",
|
||||
"vite-plugin-vue-devtools": "^7.7.5"
|
||||
}
|
||||
}
|
||||
|
@ -174,7 +174,6 @@ const { data: messages } = useRequest(fetchMessage, {
|
||||
.content {
|
||||
height: calc(100vh - 64px - 20px);
|
||||
margin: 10px;
|
||||
padding: 24px;
|
||||
background-color: white;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
@ -42,6 +42,11 @@ const router = createRouter({
|
||||
meta: { needLogin: true, needMenu: true },
|
||||
component: () => import('@/views/TenantView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/system/page',
|
||||
meta: {needLogin: true, needMenu: true},
|
||||
component: () => import('@/views/PageView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/system/logger',
|
||||
meta: { needLogin: true, needMenu: true },
|
||||
@ -74,6 +79,14 @@ const router = createRouter({
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/page/designer',
|
||||
component: () => import('@/views/lowcode/AmisDesignerView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/page/render',
|
||||
component: () => import('@/views/lowcode/AmisRenderView.vue'),
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
@ -552,6 +552,8 @@ const roleOpt = computed({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.account {
|
||||
padding: 24px;
|
||||
|
||||
.ant-form {
|
||||
.ant-form-item:nth-last-child(2) {
|
||||
margin-right: 0;
|
||||
|
@ -522,6 +522,8 @@ const pagination = computed(() => ({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.authority {
|
||||
padding: 24px;
|
||||
|
||||
.ant-form {
|
||||
.ant-form-item:nth-last-child(2) {
|
||||
margin-right: 0;
|
||||
|
@ -242,6 +242,8 @@ const pagination = computed(() => ({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tenant {
|
||||
padding: 24px;
|
||||
|
||||
.ant-form {
|
||||
.ant-form-item:nth-last-child(2) {
|
||||
margin-right: 0;
|
||||
|
@ -345,6 +345,8 @@ const onSelectRecipient = (option) => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tenant {
|
||||
padding: 24px;
|
||||
|
||||
.ant-form {
|
||||
.ant-form-item:nth-last-child(2) {
|
||||
margin-right: 0;
|
||||
|
391
{{cookiecutter.project_slug}}/ManagerUI/src/views/PageView.vue
Normal file
391
{{cookiecutter.project_slug}}/ManagerUI/src/views/PageView.vue
Normal file
@ -0,0 +1,391 @@
|
||||
<script setup>
|
||||
import qs from 'qs'
|
||||
import dayjs from 'dayjs'
|
||||
import axios from '@/http/api.js'
|
||||
import {computed, reactive, ref} from 'vue'
|
||||
import {message} from 'ant-design-vue'
|
||||
import {usePagination} from 'vue-request'
|
||||
import router from '@/router/index.js'
|
||||
|
||||
const searchRef = ref()
|
||||
const editRef = ref()
|
||||
|
||||
const state = reactive({
|
||||
search: {},
|
||||
searchData: {},
|
||||
edit: {},
|
||||
modal: {
|
||||
title: '',
|
||||
show: false,
|
||||
},
|
||||
data: {
|
||||
title: '页面数据',
|
||||
show: false,
|
||||
},
|
||||
})
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'id',
|
||||
sorter: true,
|
||||
width: 200,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
dataIndex: 'description',
|
||||
maxWidth: 200,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
dataIndex: 'createBy',
|
||||
maxWidth: 100,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
maxWidth: 150,
|
||||
ellipsis: true,
|
||||
customRender: ({text}) => {
|
||||
return text ? dayjs(text).format('LLL') : ''
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '修改时间',
|
||||
dataIndex: 'updateTime',
|
||||
maxWidth: 150,
|
||||
ellipsis: true,
|
||||
customRender: ({text}) => {
|
||||
return text ? dayjs(text).format('LLL') : ''
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: 'center',
|
||||
width: 230,
|
||||
fixed: 'right',
|
||||
},
|
||||
]
|
||||
|
||||
const rules = {}
|
||||
|
||||
const onSearchRest = () => {
|
||||
searchRef.value.resetFields()
|
||||
onTableChange()
|
||||
}
|
||||
|
||||
const onEditChange = (record) => {
|
||||
if (record) {
|
||||
Object.assign(state.edit, record)
|
||||
state.modal.title = '修改'
|
||||
} else {
|
||||
state.edit = {}
|
||||
state.modal.title = '新增'
|
||||
}
|
||||
state.modal.show = true
|
||||
}
|
||||
|
||||
const onDataChange = (record) => {
|
||||
state.searchData = {pageId: record.id}
|
||||
onTableDataChange()
|
||||
state.data.show = true
|
||||
}
|
||||
|
||||
const fetchPage = (params) => {
|
||||
return axios
|
||||
.get('/db/tPage?' + qs.stringify(params, {allowDots: true}))
|
||||
.then(([, res]) => res.data)
|
||||
}
|
||||
|
||||
const fetchData = (params) => {
|
||||
return axios
|
||||
.get('/db/tPageData?' + qs.stringify(params, {allowDots: true}))
|
||||
.then(([, res]) => res.data)
|
||||
}
|
||||
|
||||
const submitPage = async () => {
|
||||
editRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
if (state.edit.id) {
|
||||
state.edit.content = null;
|
||||
axios.put('/db/tPage', state.edit).then(([err, res]) => {
|
||||
if (err || res.code !== 0) {
|
||||
return message.error(err.msg || '修改数据失败')
|
||||
} else {
|
||||
state.modal.show = false
|
||||
onTableChange()
|
||||
return message.success('修改数据成功')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
axios.post('/db/tPage', state.edit).then(([err, res]) => {
|
||||
if (err || res.code !== 0) {
|
||||
return message.error(err.msg || '保存数据失败')
|
||||
} else {
|
||||
state.modal.show = false
|
||||
onTableChange()
|
||||
return message.success('保存数据成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
message.warning('表单校验错误')
|
||||
})
|
||||
}
|
||||
|
||||
const deletePage = (record) => {
|
||||
let params = {idList: record.id}
|
||||
axios.delete('/db/tPage', {params}).then(([err, res]) => {
|
||||
if (err || res.code !== 0) {
|
||||
return message.error(err.msg || '删除数据失败')
|
||||
} else {
|
||||
onTableChange()
|
||||
return message.success('删除数据成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const deleteData = (record) => {
|
||||
let params = {idList: record.id}
|
||||
axios.delete('/db/tPageData', {params}).then(([err, res]) => {
|
||||
if (err || res.code !== 0) {
|
||||
return message.error(err.msg || '删除数据失败')
|
||||
} else {
|
||||
onTableDataChange()
|
||||
return message.success('删除数据成功')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const {
|
||||
data: page,
|
||||
run,
|
||||
loading,
|
||||
current,
|
||||
pageSize,
|
||||
total,
|
||||
} = usePagination(fetchPage, {
|
||||
pagination: {
|
||||
currentKey: 'current',
|
||||
pageSizeKey: 'size',
|
||||
listKey: 'records',
|
||||
totalKey: 'total',
|
||||
},
|
||||
defaultParams: [
|
||||
{
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const {
|
||||
data: data,
|
||||
run: runData,
|
||||
_,
|
||||
current: currentData,
|
||||
pageSize: pageSizeData,
|
||||
total: totalData,
|
||||
} = usePagination(fetchData, {
|
||||
pagination: {
|
||||
currentKey: 'current',
|
||||
pageSizeKey: 'size',
|
||||
listKey: 'records',
|
||||
totalKey: 'total',
|
||||
},
|
||||
defaultParams: [
|
||||
{
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
],
|
||||
manual: true,
|
||||
})
|
||||
|
||||
const onTableChange = (pagination, filters, sorter) => {
|
||||
// 排序条件
|
||||
let s = {}
|
||||
if (sorter) {
|
||||
s.orders = [{column: sorter?.field, asc: sorter?.order === 'ascend'}]
|
||||
}
|
||||
// 筛选条件
|
||||
let f = {}
|
||||
if (filters) {
|
||||
Object.entries(filters).forEach(([key, value]) => {
|
||||
if (value) {
|
||||
f[key] = value.join(',')
|
||||
} else {
|
||||
f[key] = ''
|
||||
}
|
||||
})
|
||||
}
|
||||
run({
|
||||
current: pagination?.current || current,
|
||||
size: pagination?.pageSize || pageSize,
|
||||
...state.search,
|
||||
...s,
|
||||
...f,
|
||||
})
|
||||
}
|
||||
|
||||
const onTableDataChange = (paginationData, filters, sorter) => {
|
||||
// 排序条件
|
||||
let s = {}
|
||||
if (sorter) {
|
||||
s.orders = [{column: sorter?.field, asc: sorter?.order === 'ascend'}]
|
||||
}
|
||||
// 筛选条件
|
||||
let f = {}
|
||||
if (filters) {
|
||||
Object.entries(filters).forEach(([key, value]) => {
|
||||
if (value) {
|
||||
f[key] = value.join(',')
|
||||
} else {
|
||||
f[key] = ''
|
||||
}
|
||||
})
|
||||
}
|
||||
runData({
|
||||
current: paginationData?.current || current,
|
||||
size: paginationData?.pageSize || pageSize,
|
||||
...state.searchData,
|
||||
...s,
|
||||
...f,
|
||||
})
|
||||
}
|
||||
|
||||
const pagination = computed(() => ({
|
||||
current: current.value,
|
||||
pageSize: pageSize.value,
|
||||
total: total.value,
|
||||
}))
|
||||
|
||||
const paginationData = computed(() => ({
|
||||
current: currentData.value,
|
||||
pageSize: pageSizeData.value,
|
||||
total: totalData.value,
|
||||
}))
|
||||
|
||||
const designCustom = (record) => {
|
||||
if (record?.id) {
|
||||
router.push({path: '/page/designer', query: {qid: record.id}})
|
||||
} else {
|
||||
router.push({path: '/page/designer'})
|
||||
}
|
||||
}
|
||||
|
||||
const renderCustom = (record) => {
|
||||
if (record?.pageId && record?.id) {
|
||||
router.push({
|
||||
path: '/page/render',
|
||||
query: {qid: record.pageId, aid: record.id},
|
||||
})
|
||||
} else if (record.id) {
|
||||
router.push({path: '/page/render', query: {qid: record.id}})
|
||||
} else {
|
||||
router.push({path: '/page/render'})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="custom">
|
||||
<a-form ref="searchRef" :labelCol="{ flex: '80px' }" :model="state.search" layout="inline">
|
||||
<a-form-item label="描述" name="description">
|
||||
<a-input v-model:value="state.search.description" placeholder="请输入描述"/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button html-type="submit" type="primary" @click="onTableChange()">查询</a-button>
|
||||
<a-button html-type="reset" style="margin-left: 10px" @click="onSearchRest">重置</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button v-hasAuth="['system:account:post']" type="primary" @click="designCustom()"
|
||||
>新增
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="page?.records"
|
||||
:loading="loading"
|
||||
:pagination="pagination"
|
||||
:scroll="{ x: '100%' }"
|
||||
@change="onTableChange"
|
||||
>
|
||||
<template v-slot:bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-button type="link" @click="renderCustom(record)">查看</a-button>
|
||||
<a-button type="link" @click="designCustom(record)">设计</a-button>
|
||||
<a-button type="link" @click="onDataChange(record)">数据</a-button>
|
||||
<a-button v-hasAuth="['system:account:put']" type="link" @click="onEditChange(record)"
|
||||
>修改
|
||||
</a-button>
|
||||
<a-popconfirm title="确定要删除这条记录吗?" @confirm="deletePage(record)">
|
||||
<a-button v-hasAuth="['system:logger:del']" danger type="link">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<!-- 弹出框 -->
|
||||
<a-modal v-model:open="state.modal.show" :title="state.modal.title" @ok="submitPage">
|
||||
<a-form ref="editRef" :labelCol="{ flex: '80px' }" :model="state.edit" :rules="rules">
|
||||
<a-form-item label="描述" name="description">
|
||||
<a-textarea v-model:value="state.edit.description" placeholder="请输入描述"/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
<a-modal v-model:open="state.data.show" :title="state.data.title" width="80%">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data?.records"
|
||||
:pagination="paginationData"
|
||||
:scroll="{ x: '100%' }"
|
||||
@change="onTableDataChange"
|
||||
>
|
||||
<template v-slot:bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-button type="link" @click="renderCustom(record)">查看</a-button>
|
||||
<a-popconfirm title="确定要删除这条记录吗?" @confirm="deleteData(record)">
|
||||
<a-button v-hasAuth="['system:logger:del']" danger type="link">删除</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom {
|
||||
padding: 24px;
|
||||
|
||||
.ant-form {
|
||||
.ant-form-item:nth-last-child(2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ant-form-item:last-child {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn-link {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.ant-row {
|
||||
flex-flow: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -501,6 +501,8 @@ const treeAuth = computed(() => fromArray(authorityOpts.value, { parentKey: 'par
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.role {
|
||||
padding: 24px;
|
||||
|
||||
.ant-form {
|
||||
.ant-form-item:nth-last-child(2) {
|
||||
margin-right: 0;
|
||||
|
@ -406,6 +406,8 @@ const tenantOpt = computed({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tenant {
|
||||
padding: 24px;
|
||||
|
||||
.ant-form {
|
||||
.ant-form-item:nth-last-child(2) {
|
||||
margin-right: 0;
|
||||
|
@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
import { DesktopOutlined, MobileOutlined } from '@ant-design/icons-vue'
|
||||
// 引入一些样式依赖
|
||||
import 'amis-ui/lib/themes/default.css'
|
||||
import 'amis-ui/lib/themes/antd.css'
|
||||
import 'amis-editor-core/lib/style.css'
|
||||
|
||||
import { applyReactInVue } from 'veaury'
|
||||
|
||||
import { Editor } from 'amis-editor' //引入编辑器
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import axios from '@/http/api.js'
|
||||
import { useRequest } from 'vue-request'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const qid = useRoute().query.qid
|
||||
|
||||
const AmisEditor = applyReactInVue(Editor) //使用编辑器
|
||||
|
||||
const previewModel = ref(false) //是否预览,实际开发中,如果需要编辑和预览,可以写一个change事件来改变这个值的状态
|
||||
const mobileModel = ref(false) //是否是手机模式
|
||||
|
||||
const schema = shallowRef({}) //渲染表单的内容
|
||||
|
||||
const editorChanged = (value) => {
|
||||
schema.value = value
|
||||
}
|
||||
|
||||
// 加载页面结构
|
||||
const fetchSchema = async (params) => {
|
||||
if (qid) {
|
||||
let [err, res] = await axios.get('/db/tPage/' + params.id)
|
||||
if (err || res.code !== 0) {
|
||||
message.error(err.msg || '获取页面结构失败')
|
||||
} else {
|
||||
schema.value = res.data?.content || {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useRequest(fetchSchema, { defaultParams: [{ id: qid }] })
|
||||
|
||||
// 保存或新增页面结构
|
||||
const submitSchema = async () => {
|
||||
if (qid) {
|
||||
let [err, res] = await axios.put('/db/tPage', { id: qid, content: schema.value })
|
||||
if (err || res.code !== 0) {
|
||||
message.error(err.msg || '更新页面结构失败')
|
||||
} else {
|
||||
message.success('更新页面结构成功')
|
||||
}
|
||||
} else {
|
||||
let [err, res] = await axios.post('/db/tPage', { content: schema.value })
|
||||
if (err || res.code !== 0) {
|
||||
message.error(err.msg || '保存页面结构失败')
|
||||
} else {
|
||||
message.success('保存页面结构成功')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-page-header class="header" title="设计器" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<a-radio-group v-model:value="mobileModel">
|
||||
<a-radio-button :value="false">
|
||||
<DesktopOutlined />
|
||||
</a-radio-button>
|
||||
<a-radio-button :value="true">
|
||||
<MobileOutlined />
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
<a-button v-if="previewModel" @click="previewModel = false">编辑</a-button>
|
||||
<a-space v-else>
|
||||
<a-button @click="previewModel = true">预览</a-button>
|
||||
<a-button type="primary" @click="submitSchema">保存</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-page-header>
|
||||
<AmisEditor
|
||||
theme="antd"
|
||||
className="amis-editor"
|
||||
:preview="previewModel"
|
||||
:isMobile="mobileModel"
|
||||
:value="schema"
|
||||
:onChange="editorChanged"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.amis-editor) {
|
||||
height: calc(100vh - 64px - 20px - 51px);
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid #e8e9eb;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<a-page-header class="header" title="渲染器" @back="() => $router.go(-1)">
|
||||
<template #extra>
|
||||
<a-popover>
|
||||
<template #content>
|
||||
<a-qrcode ref="qrcodeCanvasRef" :value="qrcode" />
|
||||
</template>
|
||||
<a-button @click="dowloadChange">二维码</a-button>
|
||||
</a-popover>
|
||||
</template>
|
||||
</a-page-header>
|
||||
<a-result v-if="loading" status="warning" :title="tips" />
|
||||
<div id="root" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import 'amis/sdk/sdk.js'
|
||||
import 'amis-ui/lib/themes/default.css'
|
||||
import 'amis-ui/lib/themes/antd.css'
|
||||
import { computed, ref, shallowRef } from 'vue'
|
||||
import axios from '@/http/api.js'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const qid = useRoute().query.qid
|
||||
const aid = useRoute().query.aid
|
||||
|
||||
const loading = ref(true)
|
||||
const tips = ref('加载中,请稍后...')
|
||||
const qrcode = computed(() => {
|
||||
return window.location.href
|
||||
})
|
||||
|
||||
const qrcodeCanvasRef = ref()
|
||||
const dowloadChange = async () => {
|
||||
const url = await qrcodeCanvasRef.value.toDataURL()
|
||||
const a = document.createElement('a')
|
||||
a.download = 'QRCode.png'
|
||||
a.href = url
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(a)
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const amis = amisRequire('amis/embed')
|
||||
|
||||
const schema = shallowRef({}) //渲染页面的结构
|
||||
// 加载页面结构
|
||||
const fetchSchema = qid ? axios.get('/db/tPage/' + qid) : Promise.resolve(null)
|
||||
const data = shallowRef({}) //渲染页面的数据
|
||||
// 加载页面数据
|
||||
const fetchData = aid ? axios.get('/db/tPageData/' + aid) : Promise.resolve(null)
|
||||
|
||||
Promise.all([fetchSchema, fetchData]).then((res) => {
|
||||
if (res[0] && res[0][1].code === 0) {
|
||||
schema.value = res[0][1].data?.content || {}
|
||||
}
|
||||
if (res[1] && res[1][1].code === 0) {
|
||||
data.value = res[1][1].data?.content || {}
|
||||
}
|
||||
amis.embed('#root', schema.value, data.value, {
|
||||
theme: 'antd',
|
||||
tracker: (eventTrack) => {
|
||||
if (eventTrack.eventType === 'pageLoaded') {
|
||||
if (Object.keys(schema.value).length === 0) {
|
||||
tips.value = '空页面'
|
||||
} else {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
border-bottom: 1px solid #e8e9eb;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
</style>
|
@ -10,11 +10,18 @@ import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
|
||||
import { createHtmlPlugin } from 'vite-plugin-html'
|
||||
import viteCompression from 'vite-plugin-compression'
|
||||
|
||||
import { viteStaticCopy } from 'vite-plugin-static-copy'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig(({ mode }) => {
|
||||
// eslint-disable-next-line no-undef
|
||||
const env = loadEnv(mode, process.cwd())
|
||||
|
||||
// 生产环境复制 Amis 的 SDK,开发环境按需引用
|
||||
let copes = [{ src: 'node_modules/amis/sdk/*', dest: 'assets' }]
|
||||
if (mode === 'development')
|
||||
copes.push({ src: 'node_modules/amis/sdk/*', dest: 'node_modules/.vite/deps' })
|
||||
|
||||
return {
|
||||
base: './',
|
||||
build: {
|
||||
@ -70,6 +77,7 @@ export default defineConfig(({ mode }) => {
|
||||
},
|
||||
},
|
||||
}),
|
||||
viteStaticCopy({ targets: copes }),
|
||||
],
|
||||
server: {
|
||||
proxy: {
|
||||
|
Reference in New Issue
Block a user