update： 新增H5编辑操作区域
This commit is contained in:
liyu
parent
a45e64fcb2
commit
1c3e71dc49
|
|
@ -310,6 +310,38 @@ export const asyncRoutes = [
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/h5-page',
|
||||||
|
component: Layout,
|
||||||
|
redirect: '/h5-page/my-work',
|
||||||
|
name: 'H5',
|
||||||
|
meta: {
|
||||||
|
title: 'H5',
|
||||||
|
icon: 'excel'
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'my-work',
|
||||||
|
component: () => import('@/views/h5/my-work'),
|
||||||
|
name: 'MyWork',
|
||||||
|
meta: { title: 'H5编辑' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'my-data',
|
||||||
|
component: () => import('@/views/h5/my-work'),
|
||||||
|
name: 'MyData',
|
||||||
|
meta: { title: '我的数据' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'add',
|
||||||
|
component: () => import('@/views/h5/add-data'),
|
||||||
|
name: 'AddH5',
|
||||||
|
hidden: true,
|
||||||
|
meta: { title: '新增页面' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: '/zip',
|
path: '/zip',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ const getters = {
|
||||||
introduction: state => state.user.introduction,
|
introduction: state => state.user.introduction,
|
||||||
roles: state => state.user.roles,
|
roles: state => state.user.roles,
|
||||||
permission_routes: state => state.permission.routes,
|
permission_routes: state => state.permission.routes,
|
||||||
errorLogs: state => state.errorLog.logs
|
errorLogs: state => state.errorLog.logs,
|
||||||
|
pageMode: state => state.editor.pageMode
|
||||||
}
|
}
|
||||||
export default getters
|
export default getters
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
/*
|
||||||
|
新建/编辑页面数据
|
||||||
|
|
||||||
|
*/
|
||||||
|
const state = {
|
||||||
|
projectData: {
|
||||||
|
pageMode: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
<template>
|
||||||
|
<div class="page-edit">
|
||||||
|
<!-- 左侧操作区，控制编辑级别 -->
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="1">
|
||||||
|
<div class="edit-side-left">
|
||||||
|
<el-tabs v-model="activeTab" tab-position="left" style="height: 800px">
|
||||||
|
<template v-for="(item, index) in sidebarMenus">
|
||||||
|
<el-tab-pane v-if="!item.pageMode || (item.page === pageMode)" :key="index" :name="item.value">
|
||||||
|
<el-tooltip slot="label" class="item" effect="dark" :content="item.label" placement="right">
|
||||||
|
<i :class="item.elementUiIcon" />
|
||||||
|
</el-tooltip>
|
||||||
|
</el-tab-pane>
|
||||||
|
</template>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<div class="edit-level">
|
||||||
|
<componentLibs v-if="activeTab === 'componentLibs'" />
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="9">
|
||||||
|
<!-- 内容编辑区 -->
|
||||||
|
<div class="edit-content" />
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="7">
|
||||||
|
<!-- 属性编辑区 -->
|
||||||
|
<div class="edit-attr" />
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<!-- 操作条 -->
|
||||||
|
<!-- <div class="edit-toolTip"></div> -->
|
||||||
|
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import componentLibs from './components/component-libs.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
componentLibs
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeTab: 'componentLibs', // 默认展示组件级别
|
||||||
|
sidebarMenus: [
|
||||||
|
{
|
||||||
|
label: '组件列表',
|
||||||
|
value: 'componentLibs',
|
||||||
|
elementUiIcon: 'el-icon-s-operation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '页面管理',
|
||||||
|
pageMode: 'h5',
|
||||||
|
value: 'pageManage',
|
||||||
|
elementUiIcon: 'el-icon-document'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '模板库',
|
||||||
|
value: 'templateLibs',
|
||||||
|
elementUiIcon: 'el-icon-files'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 混入到state属性
|
||||||
|
...mapGetters([
|
||||||
|
'pageMode'
|
||||||
|
])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.page-edit {
|
||||||
|
height: 800px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<div class="component-libs-wrapper">
|
||||||
|
<p class="page-title">组件库</p>
|
||||||
|
<el-scrollbar>
|
||||||
|
<ul class="scrollbar-wrapper">
|
||||||
|
<li v-for="(item, index) in componentsList" :key="index">
|
||||||
|
<!-- 二级标题 -->
|
||||||
|
<div class="components-libs-title">
|
||||||
|
<p>{{ item.title }}</p>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.components && item.components.length" class="item-wrapper">
|
||||||
|
<div
|
||||||
|
v-for="(ele, idx) in item.components"
|
||||||
|
:key="idx"
|
||||||
|
class="component-item"
|
||||||
|
@click="handleItemClick(ele)"
|
||||||
|
>
|
||||||
|
<div class="lib-icon">
|
||||||
|
<i :class="[ele.icon]" />
|
||||||
|
</div>
|
||||||
|
<p class="lib-item-title">{{ ele.title }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import eleConfig from '../ele-config'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
componentsList: eleConfig
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
console.log('ll;', this.componentsList)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleItemClick() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.component-libs-wrapper {
|
||||||
|
.page-title {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.scrollbar-wrapper {
|
||||||
|
height: 600px;
|
||||||
|
.item-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.component-item {
|
||||||
|
background-color: gray;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
border: 1px solid white;
|
||||||
|
&:hover {
|
||||||
|
border-color: aqua;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,182 @@
|
||||||
|
/*
|
||||||
|
有关组件的一些配置文件,也可以写到数据库从接口来取
|
||||||
|
*/
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
title: '基础组件',
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
elName: 'qk-text',
|
||||||
|
title: '文字',
|
||||||
|
icon: 'iconfont iconwenben',
|
||||||
|
// 每个组件设置props来展示哪些显示哪些编辑项
|
||||||
|
valueType: '', // 标识数据类型，用于表单组件
|
||||||
|
defaultStyle: {
|
||||||
|
height: 40
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'qk-image',
|
||||||
|
title: '图片',
|
||||||
|
icon: 'iconfont icontupian',
|
||||||
|
valueType: '', // 标识数据类型，用于表单组件,
|
||||||
|
defaultStyle: {
|
||||||
|
height: 200
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'qk-button',
|
||||||
|
title: '按钮',
|
||||||
|
icon: 'iconfont iconanniuzu',
|
||||||
|
// 每个组件设置props来展示哪些显示哪些编辑项
|
||||||
|
valueType: '', // 标识数据类型，用于表单组件
|
||||||
|
defaultStyle: {
|
||||||
|
width: 140,
|
||||||
|
height: 40,
|
||||||
|
paddingTop: 10,
|
||||||
|
paddingBottom: 10,
|
||||||
|
borderColor: '#999999',
|
||||||
|
borderStyle: 'solid',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'qk-rectangle-border',
|
||||||
|
title: '矩形边框',
|
||||||
|
icon: 'iconfont iconjuxing',
|
||||||
|
valueType: '',
|
||||||
|
defaultStyle: {
|
||||||
|
width: 120,
|
||||||
|
height: 100,
|
||||||
|
borderColor: '#999999',
|
||||||
|
borderStyle: 'solid',
|
||||||
|
borderWidth: 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'qk-rectangle-border',
|
||||||
|
title: '分割线',
|
||||||
|
icon: 'iconfont icon758bianjiqi_fengexian',
|
||||||
|
valueType: '',
|
||||||
|
defaultStyle: {
|
||||||
|
height: 1,
|
||||||
|
width: 300,
|
||||||
|
backgroundColor: '#999999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'qk-image-carousel',
|
||||||
|
title: '图片轮播',
|
||||||
|
icon: 'iconfont iconshouyelunbotu',
|
||||||
|
valueType: '', // 标识数据类型，用于表单组件,
|
||||||
|
defaultStyle: {
|
||||||
|
height: 210
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'qk-iframe',
|
||||||
|
title: '内嵌iframe',
|
||||||
|
icon: 'iconfont iconiframetianjia',
|
||||||
|
valueType: '',
|
||||||
|
defaultStyle: {
|
||||||
|
// width: $config.canvasH5Width,
|
||||||
|
width: 200,
|
||||||
|
height: 300,
|
||||||
|
paddingTop: 10,
|
||||||
|
paddingBottom: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '表单组件',
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
elName: 'qk-input',
|
||||||
|
title: '文本框',
|
||||||
|
icon: 'iconfont iconwenbenkuang',
|
||||||
|
isForm: true,
|
||||||
|
defaultStyle: {
|
||||||
|
height: 38,
|
||||||
|
width: 250,
|
||||||
|
paddingTop: 2,
|
||||||
|
paddingBottom: 2,
|
||||||
|
paddingLeft: 10,
|
||||||
|
paddingRight: 10,
|
||||||
|
borderColor: '#999999',
|
||||||
|
borderStyle: 'solid',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'qk-textarea',
|
||||||
|
title: '多行文本',
|
||||||
|
icon: 'iconfont iconwenbenkuang',
|
||||||
|
isForm: true,
|
||||||
|
defaultStyle: {
|
||||||
|
height: 58,
|
||||||
|
width: 250,
|
||||||
|
paddingTop: 6,
|
||||||
|
paddingBottom: 6,
|
||||||
|
paddingLeft: 10,
|
||||||
|
paddingRight: 10,
|
||||||
|
borderColor: '#999999',
|
||||||
|
borderStyle: 'solid',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 4
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'radio',
|
||||||
|
title: '单选框',
|
||||||
|
icon: 'iconfont iconplus-radio',
|
||||||
|
isForm: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'checkbox',
|
||||||
|
title: '复选框',
|
||||||
|
icon: 'iconfont iconduoxuan',
|
||||||
|
isForm: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'date',
|
||||||
|
title: '日期选择器',
|
||||||
|
icon: 'iconfont iconriqi',
|
||||||
|
isForm: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'time',
|
||||||
|
title: '时间选择器',
|
||||||
|
icon: 'iconfont iconshijian',
|
||||||
|
isForm: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
elName: 'datetime',
|
||||||
|
title: '日期时间',
|
||||||
|
icon: 'iconfont iconriqishijian',
|
||||||
|
isForm: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '功能组件',
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
elName: 'qk-bg-music',
|
||||||
|
title: '音乐',
|
||||||
|
icon: 'iconfont iconyinlemusic217',
|
||||||
|
valueType: '',
|
||||||
|
defaultStyle: {
|
||||||
|
height: 52,
|
||||||
|
width: 52
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '业务组件',
|
||||||
|
components: []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
<template>
|
||||||
|
<div class="my-work">
|
||||||
|
<div class="tab">
|
||||||
|
<el-tabs v-model="searchParams.pageMode" @tab-click="handeleTabChange">
|
||||||
|
<el-tab-pane v-for="(item, index) in pageModeList" :key="index" :name="item.value" :disabled="item.disabled">
|
||||||
|
<div slot="label">{{ item.label }}</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
<div class="work-content">
|
||||||
|
<div class="nav-list">
|
||||||
|
<div class="nau-list-item" :class="{active: searchParams.type === 'my'}" @click="handleSearch('my')">我的作品{{ myCount }}</div>
|
||||||
|
<div class="nau-list-item" :class="{active: searchParams.type === 'share'}" @click="handleSearch('share')">参与作品{{ shareCount }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-wrapper">
|
||||||
|
<!-- 新增区域 -->
|
||||||
|
<div class="item-add" @click="handleAddConfig">
|
||||||
|
<i class="el-icon-plus" />
|
||||||
|
<p>{{ searchParams.pageMode | getLabelText() }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 已编辑页面 -->
|
||||||
|
<div v-for="(item, index) in pageList" :key="index" class="page-item" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
filters: {
|
||||||
|
getLabelText(val) {
|
||||||
|
return `新建${val}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// h5类型
|
||||||
|
pageModeList: [
|
||||||
|
{
|
||||||
|
value: 'h5',
|
||||||
|
label: 'H5',
|
||||||
|
disabled: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'longPage',
|
||||||
|
label: '长页H5',
|
||||||
|
disabled: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'relativePage',
|
||||||
|
label: '排版图文',
|
||||||
|
disabled: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'pc',
|
||||||
|
label: 'PC页面',
|
||||||
|
disabled: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
searchParams: {
|
||||||
|
type: 'my',
|
||||||
|
pageMode: 'h5'
|
||||||
|
},
|
||||||
|
shareCount: 5,
|
||||||
|
myCount: 6,
|
||||||
|
pageList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getPageList()
|
||||||
|
this.getPageCount()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 切换tab获取数据
|
||||||
|
handeleTabChange() {
|
||||||
|
this.getPageList()
|
||||||
|
this.getPageCount()
|
||||||
|
},
|
||||||
|
getPageList() {
|
||||||
|
|
||||||
|
},
|
||||||
|
getPageCount() {
|
||||||
|
|
||||||
|
},
|
||||||
|
handleSearch(str) {
|
||||||
|
this.searchParams.type = str || ''
|
||||||
|
},
|
||||||
|
handleAddConfig() {
|
||||||
|
// 关闭左侧目录
|
||||||
|
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
|
||||||
|
this.$router.push('add')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$green: #30B08F;
|
||||||
|
.my-work {
|
||||||
|
padding: 10px;
|
||||||
|
.work-content {
|
||||||
|
.nav-list {
|
||||||
|
width: 20%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.nau-list-item {
|
||||||
|
cursor: pointer;
|
||||||
|
&.active {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 20px;
|
||||||
|
.item-add {
|
||||||
|
width: 150px;
|
||||||
|
height: 240px;
|
||||||
|
background-color: gray;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid white;
|
||||||
|
transition: all 0.3s;
|
||||||
|
&:hover {
|
||||||
|
border-color: $green;
|
||||||
|
}
|
||||||
|
.el-icon-plus {
|
||||||
|
margin-top: 55%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue