suixy
/
portal_website_edit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加组件

Browse Source
main
yesg 2 weeks ago
parent fb3ce02930
commit e915c2f80f
4 changed files with 593 additions and 4 deletions
Show Stats Download Patch File Download Diff File

1
src/components/editEl/editEl17.vue
Unescape Escape View File

@ -12,6 +12,7 @@
</div>
<div class="list">
<div class="item" v-for=" (i,k) in data.productList">
<i class="del el-icon-circle-close" @click="data.productList.splice(k, 1);"></i>
<div class="img1">
<div class="img">
<UploadEl :data="i" field="img"/>

4
src/layout/index.vue
Unescape Escape View File

@ -3,10 +3,10 @@
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
style="position: sticky;top: 0;z-index: 9;">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">关于海威</el-menu-item>
<!-- <el-menu-item index="2">关于海威</el-menu-item>-->
<el-menu-item index="3">行业方案</el-menu-item>
<el-menu-item index="4">产品中心</el-menu-item>
<el-menu-item index="5">联系我们</el-menu-item>
<!-- <el-menu-item index="5">联系我们</el-menu-item>-->
</el-menu>
<router-view></router-view>
</div>

8
src/router/index.js
Unescape Escape View File

@ -6,7 +6,7 @@ Vue.use(Router)
export default new Router({
routes: [
{
path: '',
component: Layout,
@ -22,7 +22,7 @@ export default new Router({
},
{
path: '/industrySolutionsEdit',
component: () => import('@/views/editPage/index.vue'),
component: () => import('@/views/industrySolutions.vue'),
},
{
path: '/productCenterEdit',
@ -38,5 +38,9 @@ export default new Router({
path: '/newsEdit',
component: () => import('@/views/otherEdit/newsEdit.vue'),
},
{
path: '/editor',
component: () => import('@/views/editPage/index.vue'),
},
]
})

584
src/views/industrySolutions.vue
Unescape Escape View File

@ -0,0 +1,584 @@
<template>
<div>
<div class="top">
<div class="title">
页面编辑器
</div>
<el-select
v-model="value"
@change="pageChange"
size="small">
<el-option
v-for="i in options"
:key="i.webMenuId"
:label="i.webMenuName"
:value="i.webMenuId">
</el-option>
</el-select>
<!-- <el-cascader-->
<!-- @change="pageChange"-->
<!-- size="small"-->
<!-- v-model="value"-->
<!-- :props="props"-->
<!-- :options="options"></el-cascader>-->
<el-button type="primary" size="small" style="margin-left: 12px;" @click="save">上传网页<i
class="el-icon-upload"></i>
</el-button>
</div>
<div class="container">
<div class="component" v-for="(i,k) in components">
<i class="del el-icon-circle-close" @click="components.splice(k, 1);"></i>
<i class="up el-icon-top" @click="moveUp(k);"></i>
<i class="down el-icon-bottom" @click="moveDown(k);"></i>
<Carousel v-if="i.type === 'carousel'" :data="i.value"/>
<Carousel1 v-if="i.type === 'carousel1'" :data="i.value"/>
<EditEl1 v-if="i.type === 1" :data="i.value"/>
<EditEl2 v-if="i.type === 2" :data="i.value"/>
<EditEl3 v-if="i.type === 3" :data="i.value"/>
<EditEl4 v-if="i.type === 4" :data="i.value"/>
<EditEl5 v-if="i.type === 5" :data="i.value"/>
<EditEl6 v-if="i.type === 6" :data="i.value"/>
<EditEl7 v-if="i.type === 7" :data="i.value"/>
<EditEl8 v-if="i.type === 8" :data="i.value"/>
<EditEl9 v-if="i.type === 9" :data="i.value"/>
<EditEl10 v-if="i.type ===10" :data="i.value"/>
<EditEl11 v-if="i.type === 11" :data="i.value"/>
<EditEl12 v-if="i.type === 12" :data="i.value"/>
<EditEl13 v-if="i.type === 13" :data="i.value"/>
<EditEl14 v-if="i.type === 14" :data="i.value"/>
<EditEl15 v-if="i.type === 15" :data="i.value"/>
<EditEl16 v-if="i.type === 16" :data="i.value"/>
<EditEl17 v-if="i.type === 17" :data="i.value"/>
</div>
<div class="addItem">
<div style="width:100%;height:100%;" @click="add">
<i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 16.7vw"></i>
</div>
</div>
</div>
<el-dialog
title="添加组件"
:visible.sync="addEl"
width="80%">
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem('carousel')">
大图轮播图
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem('carousel1')">
小图轮播图
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(1)">
图标 +文字+内容横铺4个
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(2)">
左标题+内容，右图片
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(3)">
左图标，右标题+内容，一行2个
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(4)">
左大图右标题+内容，一行2个
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(5)">
上标题+下图片
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(6)">
上标题+内容，下图片
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(7)">
图标标题内容，一行3个
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(8)">
左图右列表
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(9)">
上图下内容，一行4个
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(10)">
一行3张图
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(11)">
图标标题内容，一行3个(大图)
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(12)">
产品特点+图片
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(13)">
产品参数
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(14)">
资料下载
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(15)">
产品banner
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(16)">
产品参数(多设备对比)
</div>
</el-card>
<el-card shadow="hover" style="width: 200px;display: inline-block;height:70px">
<div style="width: 100%;height: 100%" @click="addItem(17)">
配套产品
</div>
</el-card>
<span slot="footer" class="dialog-footer">
<el-button @click="addEl = false">关 闭</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Carousel from "@/components/editEl/carousel.vue";
import Carousel1 from "@/components/editEl/carousel1.vue";
import EditEl1 from "@/components/editEl/editEl1.vue";
import EditEl2 from "@/components/editEl/editEl2.vue";
import EditEl3 from "@/components/editEl/editEl3.vue";
import EditEl4 from "@/components/editEl/editEl4.vue";
import EditEl5 from "@/components/editEl/editEl5.vue";
import EditEl6 from "@/components/editEl/editEl6.vue";
import EditEl7 from "@/components/editEl/editEl7.vue";
import EditEl8 from "@/components/editEl/editEl8.vue";
import EditEl9 from "@/components/editEl/editEl9.vue";
import EditEl10 from "@/components/editEl/editEl10.vue";
import {selectMenuTree} from "@/api/hwWebMenu";
import {getHwWeb, listHwWeb1, updateHwWeb, updateHwWeb1} from "@/api/hwWeb";
import EditEl11 from "@/components/editEl/editEl11.vue";
import EditEl12 from "@/components/editEl/editEl12.vue";
import EditEl13 from "@/components/editEl/editEl13.vue";
import EditEl14 from "@/components/editEl/editEl14.vue";
import EditEl15 from "@/components/editEl/editEl15.vue";
import EditEl16 from "@/components/editEl/editEl16.vue";
import EditEl17 from "@/components/editEl/editEl17.vue";
export default {
components: {
Carousel,
Carousel1,
EditEl1,
EditEl2,
EditEl3,
EditEl4,
EditEl5,
EditEl6,
EditEl7,
EditEl8,
EditEl9,
EditEl10,
EditEl11,
EditEl12,
EditEl13,
EditEl14,
EditEl15,
EditEl16,
EditEl17
},
data() {
return {
a: '1',
addEl: false,
props: {},
type: '',
value: '',
options: [],
componentsM: [
{
type: 'carousel',
value: {
list: [
{
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '111',
value: '222'
}
],
},
},
{
type: 'carousel1',
value: {
list: [
{
img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '111',
value: '222'
}
],
},
},
{
type: 1,
value: {
title: '123',
subTitle: '456',
list: [
{
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '111',
value: '222'
},
],
},
},
{
type: 2,
value: {
title: '123',
subTitle: '456',
contentTitle: 'contentTitle',
contentSubTitle: 'DEVELOPMENT PLATFORM',
contentInfo: 'contentInfo',
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
},
},
{
type: 3,
value: {
title: '123',
subTitle: '456',
list: [
{
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
itemTitle: '111',
itemInfo: '222'
},
],
},
},
{
type: 4,
value: {
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '123',
subTitle: '456',
list: [
{
title: '111',
value: '222'
}
],
},
},
{
type: 5,
value: {
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '123',
subTitle: '456',
},
},
{
type: 6,
value: {
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '123',
subTitle: '456',
info: '789',
},
},
{
type: 7,
value: {
title: '123',
subTitle: '456',
list: [
{
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '111',
value: '222'
},
],
},
},
{
type: 8,
value: {
title: '123',
subTitle: '456',
list: [
{
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '111',
leftTitle: '222',
leftInfo: '333',
infos: [
{title: '111', info: '222'},
{title: '111', info: '222'},
{title: '111', info: '222'},
]
},
],
},
},
{
type: 9,
value: {
title: '123',
subTitle: '456',
list: [
{
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
value: '222'
},
],
},
},
{
type: 10,
value: {
title: '123',
subTitle: '456',
list: [
{
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '111',
value: '222'
}
],
},
},
{
type: 11,
value: {
title: '123',
subTitle: '456',
list: [
{
icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
title: '111',
value: '222'
},
],
},
},
{
type: 12,
value: {
imgList: [],
features: [],
},
},
{
type: 13,
value: {
params: [],
},
},
{
type: 14,
value: {
fileList: [],
},
},
{
type: 15,
value: {
banner: '',
banner1: '',
bannerTitle: '设备名称',
bannerValue: '设备介绍',
},
},
{
type: 16,
value: {
params: [
{
"title": "表名",
"columns": [],
"rows": []
}
]
},
},
{
type: 17,
value: {
title: '配套产品',
subTitle: 'SUPPORTING PRODUCT',
productList: [
{
"title": "设备名",
"img": '',
"toLink": []
}
]
},
},
],
components: [],
}
},
mounted() {
this.initByRoute();
},
watch: {
$route() {
this.initByRoute();
}
},
methods: {
initByRoute() {
selectMenuTree().then(v => {
this.options = v.data.find(vv => vv.webMenuId === 4).children
})
this.props = {checkStrictly: true, value: 'webMenuId', label: 'webMenuName'}
},
edit(key, e) {
this[key] = e.target.innerText
},
add() {
this.addEl = true
},
save() {
updateHwWeb({
webCode: this.value,
// webJson: JSON.stringify(this.components),
webJsonString: JSON.stringify(this.components),
}).then(res => {
if (res.code == 200) {
this.$message({
message: '保存成功',
type: 'success'
});
} else {
this.$message({
message: '保存失败',
type: 'error'
});
}
})
},
pageChange(e) {
getHwWeb(e).then(res => {
this.components = JSON.parse(res?.data?.webJsonString || '[]')
})
},
addItem(e) {
this.components.push(JSON.parse(JSON.stringify({
type: e,
value: this.componentsM.find(v => v.type === e)?.value,
})))
this.addEl = false
},
moveUp(k) {
if (k > 0) {
const item = this.components[k]
this.components.splice(k, 1) // 删除当前位置
this.components.splice(k - 1, 0, item) // 插入到上一个位置
}
},
moveDown(k) {
if (k < this.components.length - 1) {
const item = this.components[k]
this.components.splice(k, 1) // 删除当前位置
this.components.splice(k + 1, 0, item) // 插入到下一个位置
}
},
}
}
</script>
<style scoped lang="less">
.swiper {
width: 100%;
height: 650px;
}
.top {
position: sticky;
top: 0;
z-index: 999;
width: 100%;
height: 50px;
background: #fff;
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.2);
text-align: left;
.title {
line-height: 50px;
margin-left: 12px;
display: inline-block;
margin-right: 12px;
}
}
.container {
width: 90%;
text-align: left;
margin: 0 auto;
}
.component {
text-align: center;
position: relative;
.up {
position: absolute;
right: 50px;
top: 10px;
cursor: pointer;
z-index: 99999;
}
.down {
position: absolute;
right: 30px;
top: 10px;
cursor: pointer;
z-index: 99999;
}
.del {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
z-index: 99999;
}
}
.addItem {
width: 100%;
text-align: center;
}
</style>
Write Preview
Loading…
Cancel
Save