页面设置(home)

master
yujialong 2 years ago
parent dcaa7a3caa
commit 4140318af6
  1. 2
      src/api/index.js
  2. 118
      src/components/editor.js
  3. 13
      src/components/modules/content.vue
  4. 77
      src/components/modules/module.vue
  5. 304
      src/pages/column/page/index.vue

@ -51,7 +51,7 @@ export default {
searchAllBySite: `iasf/sysNavigationStyle/searchAllBySite`,
updateStyle: `iasf/sysNavigationStyle/update`,
saveStyle: `iasf/sysNavigationStyle/save`,
findPage: `iasf/sysColumnLongPage/findById`,
findPage: `iasf/sysColumnLongPage/getLongPageInformation`,
getRedisPage: `iasf/sysColumnLongPage/getRedisCache`,
savePage: `iasf/sysColumnLongPage/save`,
saveRedisPage: `iasf/sysColumnLongPage/saveTheCache`,

@ -0,0 +1,118 @@
import axios from 'axios'
import Api from '@/api'
export default {
//skin:'oxide-dark',
language:'zh_CN',
plugins: 'print powerpaste preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize formatpainter',
toolbar: 'code undo redo restoredraft | cut copy powerpaste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | indent2em lineheight formatpainter',
height: 650, //编辑器高度
min_height: 400,
// content_css: [ //可设置编辑区内容展示的css,谨慎使用
// '/static/reset.css',
// ],
content_style: `.mce-content-body:not([dir=rtl]) blockquote {
padding: 8px 15px;
border-left: 0;
background-color: #ededed;
}
blockquote p {
margin: 0;
font-style: italic;
}
.block {
margin-bottom: 20px;
overflow: hidden;
}
.block .fl {
float: left;
margin-right: 10px;
}
.block .fr {
float: right;
margin-left: 10px;
}
.block p {
margin: 0 0 10px;
}
`,
fontsize_formats: '12px 14px 16px 19px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
link_list: [
{ title: '预置链接1', value: 'http://www.tinymce.com' },
{ title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
],
image_list: [
{ title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
{ title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
],
image_class_list: [
{ title: 'None', value: '' },
{ title: 'Some class', value: 'class-name' }
],
//importcss_append: true,
//自定义文件选择器的回调内容
file_picker_callback: function (callback, value, meta) {
if (meta.filetype === 'file') {
callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
}
if (meta.filetype === 'image') {
callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
}
if (meta.filetype === 'media') {
callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
}
},
//为内容模板插件提供预置模板
templates: [
{ title: '文章模板1', description: '图片文字流', content: `
<div class="block">
<img align="left" hspace="5" vspace="5" src="https://tse1-mm.cn.bing.net/th/id/OIP-C._S-t6T2kt-j6ydemeoB1wAHaEs?w=301&h=190&c=7&r=0&o=5&pid=1.7"/>
<div class="texts">
<p>S³FEL主要由一台超导直线加速器波荡器光束线和实验站组成可产生重复频率达1MHz电子束能量达2.5 GeV的软X 射线自由电子激光可在百飞秒内级实现原子分子及外壳层电子结构的无损动态监测是科学家认识和了解物质微观结构及动态变化的高速摄像机S³FEL为科学家和企业用户提供了一种具有超高时间分辨空间分辨和能量分辨的新方法新技术 S³FEL在量子材料能源催化生物医药大气与星际科学原子分子科学等领域的应用研究将为促进我国战略性新兴产业创新发展和关键
</p>
</div>
</div>
<div class="block">
<img align="right" hspace="5" vspace="5" src="https://tse1-mm.cn.bing.net/th/id/OIP-C._S-t6T2kt-j6ydemeoB1wAHaEs?w=301&h=190&c=7&r=0&o=5&pid=1.7"/>
<div>
<p>集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地</p>
<p>S³FEL汇聚并培养信息生命材料能源等学科领域的国际水平科技领军人才集聚世界前沿和原创性科学技术及产业研发将推动一批高水平大学和科研机构的科技人才队伍建设及相关学科的高质量发展营造粤港澳大湾区人才高地并助力粤港澳大湾区国际科技创新中心的建设此外 S³FEL作为重要的科普教育基地是展示我国科技实力提高全民族科学素质和民族自信的重要宣传窗口 S³FEL主体建筑将成为深圳市地标式建筑促进提升深圳市的城市形象和国际化知名度</p>
</div>
</div>
`
}
],
// content_security_policy: "https://cdn.tiny.cloud/1/rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda/tinymce/6/tinymce.min.js",
// extended_valid_elements:'script[src]',
//
// template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
// template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
// autosave_ask_before_unload: false,
toolbar_mode : 'wrap',
// automatic_uploads: true,
// images_upload_base_path: '/demo',
// images_upload_url: 'http://192.168.31.136:10000/iasf/sysFiles/upload',
paste_data_images: true,
powerpaste_allow_local_images: true,
powerpaste_word_import: 'clean',
powerpaste_html_import: 'clean',
// 自定义上传
images_upload_handler: function (blobInfo, succFun, failFun) {
console.log("🚀 ~ file: editor.js ~ line 62 ~ blobInfo", blobInfo)
const form = new FormData()
form.append('file', blobInfo.blob()),
axios({
method: 'post',
url: Api.upload,
data: form,
headers: {
'Content-Type': 'multipart/form-data'
},
}).then(({ data }) => {
succFun(data.url)
}).catch(res => {})
},
//icons:'ax-color',
}

@ -22,6 +22,12 @@
<p>只支持.jpg,.png格式</p>
</div>
</el-upload>
<template v-if="item.type === 'pic'">
<img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
<div class="uploader-default" v-else>
<i class="el-icon-picture-outline"></i>
</div>
</template>
<div v-if="item.type === 'link'" class="flex">
<el-input class="m-r-10" v-model="data.form.link.linkName"></el-input>
<el-button @click="toLink(data.form)">设置链接</el-button>
@ -30,7 +36,7 @@
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="$emit('update:visible', false)">取消</el-button>
<el-button type="primary" @click="moduleSubmit">确定</el-button>
<el-button type="primary" @click="contentSubmit">确定</el-button>
</span>
</el-dialog>
<Link ref="link" :diaVisible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
@ -85,7 +91,6 @@ export default {
},
//
uploadSuccess(res, row) {
console.log("🚀 ~ file: index.vue ~ line 238 ~ uploadSuccess ~ res, row", res, row)
// let url = this.form.columnBanner
// url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {})
this.$set(row, 'pic', res.url)
@ -122,8 +127,8 @@ export default {
this.linkVisible = false
},
//
moduleSubmit() {
contentSubmit() {
this.$emit('contentSubmit')
},
}
};

@ -5,9 +5,10 @@
<template v-if="data.type === 'banner' || data.type === 'introduce'">
<el-table class="module-table" :data="data.list" header-align="center" row-key="id">
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
<el-table-column label="图片" min-width="140">
<el-table-column label="图片" min-width="140" align="center">
<template slot-scope="scope">
<el-upload
v-if="data.type === 'banner'"
class="uploader"
accept=".jpg,.png,.jpeg"
:on-success="res => uploadSuccess(res, scope.row)"
@ -22,10 +23,16 @@
<p>只支持.jpg,.png格式</p>
</div>
</el-upload>
<template v-else>
<img v-if="scope.row.pic" :src="scope.row.pic" class="upload-pic">
<div class="upload-none" v-else>
<i class="el-icon-picture-outline"></i>
</div>
</template>
</template>
</el-table-column>
<el-table-column v-if="data.type === 'introduce'" prop="title" label="标题" min-width="140"></el-table-column>
<el-table-column label="链接" min-width="140">
<el-table-column v-if="data.type === 'introduce'" prop="title" label="标题" min-width="140" align="center"></el-table-column>
<el-table-column label="链接" min-width="140" align="center">
<template slot-scope="scope">
<div class="link-wrap">
<span>{{ scope.row.link.linkName }}</span>
@ -48,7 +55,7 @@
</el-table-column>
</el-table>
<div class="plus">
<i class="el-icon-circle-plus-outline"></i>
<i class="el-icon-circle-plus-outline" @click="addRow"></i>
</div>
</template>
<el-form v-else-if="data.type === 'form'" ref="form" :model="data.form" :rules="rules" label-width="80px">
@ -75,11 +82,12 @@
<el-input class="m-r-10" v-model="data.form.link.linkName"></el-input>
<el-button @click="toLink(data.form)">设置链接</el-button>
</div>
<Editor v-if="item.type === 'editor'" api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="data.form[item.prop]" :init="editorConfig" />
</el-form-item>
</el-form>
<el-form v-else-if="data.type === 'column'" ref="form" :model="data.form" :rules="columnRules" label-width="100px">
<el-form-item prop="site" label="站点选择">
<el-select v-model="data.form.site">
<el-select v-model="data.form.site" @change="siteChange">
<el-option
v-for="item in $refs.link.sites"
:key="item.id"
@ -89,14 +97,12 @@
</el-select>
</el-form-item>
<el-form-item prop="column" label="关联栏目">
<el-select v-model="data.form.column">
<el-option
v-for="item in columns"
:key="item.id"
:label="item.siteName"
:value="item.id">
</el-option>
</el-select>
<el-cascader
ref="links"
v-model="data.form.column"
:options="columns"
:props="columnProps"
clearable></el-cascader>
</el-form-item>
<el-form-item label="文章展示数量">
<el-select v-model="data.form.articleNum">
@ -122,13 +128,14 @@
</span>
</el-dialog>
<Link ref="link" :diaVisible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
<Content :data.sync="data" :visible.sync="contentVisible" />
<Content :data.sync="data" :visible.sync="contentVisible" @contentSubmit="contentSubmit" />
</div>
</template>
<script>
import Link from '@/components/modules/link'
import Content from '@/components/modules/content'
import editorConfig from '@/components/editor'
export default {
name: 'module',
props: ['data', 'visible'],
@ -142,6 +149,7 @@ export default {
linkVisible: false,
linkForm: {},
curIndex: 0,
editorConfig,
columnRules: {
site: [
@ -170,8 +178,15 @@ export default {
name: '2'
},
],
columnProps: {
checkStrictly: true,
value: 'id',
label: 'columnName'
},
contentVisible: false
contentVisible: false,
curModule: 0,
curData: {},
};
},
watch: {
@ -200,7 +215,22 @@ export default {
}
})
}
console.log("🚀 ~ file: banner.vue ~ line 114 ~ handleForm ~ forms", this.data, this.rules)
},
//
siteChange(siteId) {
this.$post(this.api.listWithTree, {
siteId,
columnName: '',
templateId: '',
typeId : '',
isSort: 0
}).then(({ data }) => {
this.columns = data
}).catch(err => {})
},
//
addRow() {
this.data.list.push(JSON.parse(JSON.stringify(this.data.originForm)))
},
close() {
this.$emit('update:visible', false)
@ -229,8 +259,21 @@ export default {
},
//
editIntro(row, i = 0) {
this.curModule = i
this.contentVisible = true
},
// content
contentSubmit() {
this.contentVisible = false
const { form } = this.data
const list = this.data.list[this.curModule]
for (const i in form) {
this.$set(list, i, form[i])
}
this.data.form = JSON.parse(JSON.stringify(this.data.originForm))
console.log("🚀 ~ file: module.vue ~ line 267 ~ contentSubmit ~ list", this.data)
},
//
linkSubmit() {
// return console.log(3, this.$refs.link.data)
@ -257,7 +300,7 @@ export default {
},
//
moduleSubmit() {
this.$emit('moduleSubmit')
},
}
};

@ -8,32 +8,38 @@
</div>
<div class="relative">
<img width="100%" height="500" src="@/assets/images/channel/channel-bg.png" alt="">
<el-carousel height="500px">
<template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic" :key="i">
<img width="100%" height="100%" :src="item.pic" alt="">
</el-carousel-item>
</template>
</el-carousel>
<div class="cover" @click="toSet(0)">点击更换banner与链接</div>
</div>
<div class="block">
<div class="inner">
<div class="c-wrap">
<h2 class="b-title">OUR FACILITIES</h2>
<p class="intro">IASF will carry a world-class light source research park by operating a synchrotron radiation facility and a soft X-ray Superconducting free-electron laser facility.</p>
<h2 class="b-title">{{ modules[1].form.title || 'OUR FACILITIES' }}</h2>
<p class="intro">{{ modules[1].form.des || 'IASF will carry a world-class light source research park by operating a synchrotron radiation facility and a soft X-ray Superconducting free-electron laser facility.' }}</p>
<div class="cover" @click="toSet(1)">点击更换标题与描述</div>
</div>
<ul class="card">
<li>
<img width="100%" src="@/assets/images/channel/channel1.png" alt="">
<img width="100%" :src="modules[2].form.pic" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<h6>{{ modules[2].form.title || 'Shenzhen Innovation Lightsource Facility ' }}</h6>
<p class="des">{{ modules[2].form.des || 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' }}</p>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div>
<div class="cover" @click="toSet(2)">点击更改图片标题概述与链接</div>
</li>
<li>
<img width="100%" src="@/assets/images/channel/channel2.png" alt="">
<img width="100%" :src="modules[3].form.pic" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<h6>{{ modules[3].form.title || 'Shenzhen Innovation Lightsource Facility ' }}</h6>
<p class="des">{{ modules[3].form.des || 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' }}</p>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div>
<div class="cover" @click="toSet(3)">点击更改图片标题概述与链接</div>
@ -45,8 +51,8 @@
<div class="block news-block">
<div class="inner">
<div class="c-wrap">
<h2 class="b-title">Latest information</h2>
<p class="intro">Keep up with what happen with IASF</p>
<h2 class="b-title">{{ modules[4].form.title || 'Latest information' }}</h2>
<p class="intro">{{ modules[4].form.des || 'Keep up with what happen with IASF' }}</p>
<div class="cover" @click="toSet(4)">点击更换标题与描述</div>
</div>
<ul class="news">
@ -106,32 +112,16 @@
<div class="block">
<div class="inner">
<div class="c-wrap">
<h2 class="b-title">Light Chasers' Home at IASF</h2>
<p class="intro">Keep up with what happen with IASF</p>
<h2 class="b-title">{{ modules[6].form.title || "Light Chasers' Home at IASF" }}</h2>
<p class="intro">{{ modules[6].form.des || 'Keep up with what happen with IASF' }}</p>
<div class="cover" @click="toSet(6)">点击更换标题与描述</div>
</div>
<ul class="people">
<li>
<img class="pic" src="@/assets/images/channel/channel1.png" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div>
</li>
<li>
<li v-for="(item, i) in modules[7].list" :key="i">
<img class="pic" :src="item.pic" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div>
<img class="pic" src="@/assets/images/channel/channel2.png" alt="">
</li>
<li>
<img class="pic" src="@/assets/images/channel/channel1.png" alt="">
<div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6>
<p class="des">The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.</p>
<h6>{{ item.title || 'Shenzhen Innovation Lightsource Facility ' }}</h6>
<p class="des">{{ item.des || 'The Shenzhen synchrotron radiation facility has a fourth-generation diffraction-limited storage ring with an electron energy of 3 GeV at a low emittance of 50-150 pm·rad, and it provides photons with broad range energy from 4 meV to 160 keV.' }}</p>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div>
</li>
@ -144,10 +134,8 @@
<div class="inner">
<img src="@/assets/images/channel/about.png" alt="">
<div class="line"></div>
<div class="text">ABOUT</div>
<div class="des">
<p>The Institute of Advanced Science Facilities in Shenzhen, China is home to world-class science, world-class facilities, and world-class people. Located 25 miles east of Shenzhen city center, on a 1.2 acre campus, IASF has over three hundred researchers and support staff.</p>
</div>
<div class="text">{{ modules[8].form.title || 'ABOUT' }}</div>
<div class="des">{{ modules[8].form.des || 'The Institute of Advanced Science Facilities in Shenzhen, China is home to world-class science, world-class facilities, and world-class people. Located 25 miles east of Shenzhen city center, on a 1.2 acre campus, IASF has over three hundred researchers and support staff.…' }}</div>
</div>
<div class="cover" @click="toSet(8)">点击更换标题与描述</div>
</div>
@ -155,45 +143,45 @@
<div class="block" style="padding-bottom: 0">
<div class="inner">
<div class="c-wrap">
<h2 class="glance">IASF at a glance</h2>
<h2 class="glance">{{ modules[9].form.title || 'IASF at a glance' }}</h2>
<div class="cover" @click="toSet(9)">点击更换标题与描述</div>
</div>
<ul class="stat">
<li>
<p class="num">2020</p>
<p class="text">The year IASF was founded</p>
<p class="num">{{ modules[10].form.title }}</p>
<p class="text">{{ modules[10].form.des }}</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
</li>
<li>
<p class="num">2</p>
<p class="text">Facility projects</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
<p class="num">{{ modules[11].form.title }}</p>
<p class="text">{{ modules[11].form.des }}</p>
<div class="cover" @click="toSet(11)">点击更换标题与描述</div>
</li>
<li>
<p class="num">240</p>
<p class="text">Employees</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
<p class="num">{{ modules[12].form.title }}</p>
<p class="text">{{ modules[12].form.des }}</p>
<div class="cover" @click="toSet(12)">点击更换标题与描述</div>
</li>
<li>
<p class="num">10</p>
<p class="text">Academicians</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
<p class="num">{{ modules[13].form.title }}</p>
<p class="text">{{ modules[13].form.des }}</p>
<div class="cover" @click="toSet(13)">点击更换标题与描述</div>
</li>
<li>
<p class="num">45%</p>
<p class="text">Hold doctorates or the highest degree in their field</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
<p class="num">{{ modules[14].form.title }}</p>
<p class="text">{{ modules[14].form.des }}</p>
<div class="cover" @click="toSet(14)">点击更换标题与描述</div>
</li>
<li>
<p class="num">$32B+</p>
<p class="text">Facility construction need-based grant aid provided </p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div>
<p class="num">{{ modules[15].form.title }}</p>
<p class="text">{{ modules[15].form.des }}</p>
<div class="cover" @click="toSet(15)">点击更换标题与描述</div>
</li>
</ul>
</div>
</div>
<Module :data.sync="modules[curModule]" :visible.sync="diaVisible" />
<Module :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
</div>
</template>
@ -206,13 +194,14 @@ export default {
return {
userId: +this.$store.state.user.userId,
site: this.$store.state.content.site,
id: +this.$route.query.id,
id: '',
columnId: +this.$route.query.id,
modules: [
{
type: 'banner',
list: [
{
pic: '',
pic: require('@/assets/images/channel/channel-bg.png'),
link: {
linkName: '无',
connectionType: 1,
@ -270,7 +259,7 @@ export default {
}
],
form: {
pic: '',
pic: require('@/assets/images/channel/channel1.png'),
title: '',
link: {
linkName: '无',
@ -307,7 +296,7 @@ export default {
}
],
form: {
pic: '',
pic: require('@/assets/images/channel/channel1.png'),
title: '',
link: {
linkName: '无',
@ -411,8 +400,9 @@ export default {
},
list: [
{
pic: '',
pic: require('@/assets/images/channel/channel1.png'),
title: '',
subTitle: '',
link: {
linkName: '无',
connectionType: 1,
@ -433,13 +423,24 @@ export default {
required: true
},
{
type: 'textarea',
type: 'link',
prop: 'link',
label: '链接'
},
{
type: 'editor',
prop: 'des',
label: '概述'
label: '概述',
required: true
}
],
form: {
title: '',
link: {
linkName: '无',
connectionType: 1,
linkAddress : '',
},
des: ''
}
},
@ -479,33 +480,155 @@ export default {
}
],
form: {
title: '',
des: ''
title: '2020',
des: 'The year IASF was founded'
}
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: '2',
des: 'Facility projects'
}
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: '240',
des: 'Employees'
}
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: '10',
des: 'Academicians'
}
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: '45%',
des: 'Hold doctorates or the highest degree in their field'
}
},
{
type: 'form',
forms: [
{
type: 'input',
prop: 'title',
label: '标题',
required: true
},
{
type: 'textarea',
prop: 'des',
label: '概述'
}
],
form: {
title: '$32B+',
des: 'Facility construction need-based grant aid provided '
}
},
],
diaVisible: false,
curModule: 0
curModule: 0,
curData: {},
edited: false
}
},
components: {
Module,
},
watch: {
'$route'() {
this.id = this.$route.query.id
// this.getInfo()
}
},
mounted() {
this.getInfo()
},
methods: {
//
getInfo() {
this.modules.map(e => {
const { type } = e
// row便
if (type === 'banner' || type === 'introduce') {
const data = JSON.parse(JSON.stringify(e.list[0]))
data.pic = ''
e.originForm = data
}
})
this.$post(`${this.api.findPage}?columnId=${this.columnId}`).then(({ data }) => {
if (data.length) {
this.id = data[0].id
this.edited = true
}
}).catch(err => {})
},
//
toSet(i) {
this.curModule = i
this.curData = JSON.parse(JSON.stringify(this.modules[i]))
this.diaVisible = true
},
//
moduleSubmit() {
this.diaVisible = false
this.modules[this.curModule] = this.curData
console.log("🚀 ~ file: index.vue ~ line 520 ~ moduleSubmit ~ this.modules[this.curModule]", this.modules[this.curModule])
},
// json
handleJson() {
const list = JSON.parse(JSON.stringify(this.modules))
@ -517,7 +640,7 @@ export default {
//
preview() {
this.$post(this.api.saveRedisPage, {
columnId: this.id,
columnId: this.columnId,
json: this.handleJson()
}).then(({ data }) => {
@ -525,15 +648,19 @@ export default {
},
//
save(state) {
this.$post(this.api.savePage, {
columnId: this.id,
const json = this.handleJson()
const data = {
id: this.id,
columnId: this.columnId,
state,
sort: 1,
founderId: this.userId,
editorId: this.userId,
jsonBeforeEditing: this.handleJson(),
theEditedJson: this.handleJson(),
}).then(({ data }) => {
jsonBeforeEditing: json
}
debugger
if (state) data.theEditedJson = json
this.$post(this.api[this.edited ? 'updatePage' : 'savePage'], data).then(({ data }) => {
}).catch(err => {})
}
@ -649,6 +776,9 @@ export default {
display: flex;
justify-content: space-between;
margin-bottom: 126px;
&:nth-child(even) {
flex-direction: row-reverse;
}
}
.pic {
width: 660px;
@ -732,6 +862,7 @@ export default {
}
}
.cover {
z-index: 2;
position: absolute;
top: 0;
right: 0;
@ -777,6 +908,21 @@ export default {
}
$avatar-width: 140px;
$avatar-height: 80px;
/deep/.upload-pic, /deep/.upload-none {
width: $avatar-width;
height: $avatar-height;
margin-bottom: 10px;
}
/deep/.upload-none {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.04);
i {
font-size: 20px;
color: #8c939d;
}
}
/deep/ .uploader {
.el-upload {
position: relative;

Loading…
Cancel
Save