jialong.yu
/
FE_IASF_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

页面设置（home）

Browse Source
master
yujialong 2 years ago
parent dcaa7a3caa
commit 4140318af6
5 changed files with 413 additions and 101 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

2
src/api/index.js
Unescape View File

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

118
src/components/editor.js
Unescape View File

@ -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',
}

13
src/components/modules/content.vue
Unescape View File

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

77
src/components/modules/module.vue
Unescape View File

@ -5,9 +5,10 @@
<template v-if="data.type === 'banner' || data.type === 'introduce'"> <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 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 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"> <template slot-scope="scope">
<el-upload <el-upload
v-if="data.type === 'banner'"
class="uploader" class="uploader"
accept=".jpg,.png,.jpeg" accept=".jpg,.png,.jpeg"
:on-success="res => uploadSuccess(res, scope.row)" :on-success="res => uploadSuccess(res, scope.row)"
@ -22,10 +23,16 @@
<p>只支持.jpg,.png格式</p> <p>只支持.jpg,.png格式</p>
</div> </div>
</el-upload> </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> </template>
</el-table-column> </el-table-column>
<el-table-column v-if="data.type === 'introduce'" prop="title" label="标题" min-width="140"></el-table-column> <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"> <el-table-column label="链接" min-width="140" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="link-wrap"> <div class="link-wrap">
<span>{{ scope.row.link.linkName }}</span> <span>{{ scope.row.link.linkName }}</span>
@ -48,7 +55,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="plus"> <div class="plus">
<i class="el-icon-circle-plus-outline"></i> <i class="el-icon-circle-plus-outline" @click="addRow"></i>
</div> </div>
</template> </template>
<el-form v-else-if="data.type === 'form'" ref="form" :model="data.form" :rules="rules" label-width="80px"> <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-input class="m-r-10" v-model="data.form.link.linkName"></el-input>
<el-button @click="toLink(data.form)">设置链接</el-button> <el-button @click="toLink(data.form)">设置链接</el-button>
</div> </div>
<Editor v-if="item.type === 'editor'" api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="data.form[item.prop]" :init="editorConfig" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-form v-else-if="data.type === 'column'" ref="form" :model="data.form" :rules="columnRules" label-width="100px"> <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-form-item prop="site" label="站点选择">
<el-select v-model="data.form.site"> <el-select v-model="data.form.site" @change="siteChange">
<el-option <el-option
v-for="item in $refs.link.sites" v-for="item in $refs.link.sites"
:key="item.id" :key="item.id"
@ -89,14 +97,12 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item prop="column" label="关联栏目"> <el-form-item prop="column" label="关联栏目">
<el-select v-model="data.form.column"> <el-cascader
<el-option ref="links"
v-for="item in columns" v-model="data.form.column"
:key="item.id" :options="columns"
:label="item.siteName" :props="columnProps"
:value="item.id"> clearable></el-cascader>
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="文章展示数量"> <el-form-item label="文章展示数量">
<el-select v-model="data.form.articleNum"> <el-select v-model="data.form.articleNum">
@ -122,13 +128,14 @@
</span> </span>
</el-dialog> </el-dialog>
<Link ref="link" :diaVisible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" /> <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> </div>
</template> </template>
<script> <script>
import Link from '@/components/modules/link' import Link from '@/components/modules/link'
import Content from '@/components/modules/content' import Content from '@/components/modules/content'
import editorConfig from '@/components/editor'
export default { export default {
name: 'module', name: 'module',
props: ['data', 'visible'], props: ['data', 'visible'],
@ -142,6 +149,7 @@ export default {
linkVisible: false, linkVisible: false,
linkForm: {}, linkForm: {},
curIndex: 0, curIndex: 0,
editorConfig,
columnRules: { columnRules: {
site: [ site: [
@ -170,8 +178,15 @@ export default {
name: '2' name: '2'
}, },
], ],
columnProps: {
checkStrictly: true,
value: 'id',
label: 'columnName'
},
contentVisible: false contentVisible: false,
curModule: 0,
curData: {},
}; };
}, },
watch: { 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() { close() {
this.$emit('update:visible', false) this.$emit('update:visible', false)
@ -229,8 +259,21 @@ export default {
}, },
// 编辑内容 // 编辑内容
editIntro(row, i = 0) { editIntro(row, i = 0) {
this.curModule = i
this.contentVisible = true 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() { linkSubmit() {
// return console.log(3, this.$refs.link.data) // return console.log(3, this.$refs.link.data)
@ -257,7 +300,7 @@ export default {
}, },
// 模块设置提交 // 模块设置提交
moduleSubmit() { moduleSubmit() {
this.$emit('moduleSubmit')
}, },
} }
}; };

304
src/pages/column/page/index.vue
Unescape View File

@ -8,32 +8,38 @@
</div> </div>
<div class="relative"> <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 class="cover" @click="toSet(0)">点击更换banner与链接</div>
</div> </div>
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">OUR FACILITIES</h2> <h2 class="b-title">{{ modules[1].form.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> <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 class="cover" @click="toSet(1)">点击更换标题与描述</div>
</div> </div>
<ul class="card"> <ul class="card">
<li> <li>
<img width="100%" src="@/assets/images/channel/channel1.png" alt=""> <img width="100%" :src="modules[2].form.pic" alt="">
<div class="texts"> <div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6> <h6>{{ modules[2].form.title || '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> <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=""> <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div> </div>
<div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div> <div class="cover" @click="toSet(2)">点击更改图片、标题概述与链接</div>
</li> </li>
<li> <li>
<img width="100%" src="@/assets/images/channel/channel2.png" alt=""> <img width="100%" :src="modules[3].form.pic" alt="">
<div class="texts"> <div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6> <h6>{{ modules[3].form.title || '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> <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=""> <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div> </div>
<div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</div> <div class="cover" @click="toSet(3)">点击更改图片、标题概述与链接</div>
@ -45,8 +51,8 @@
<div class="block news-block"> <div class="block news-block">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">Latest information</h2> <h2 class="b-title">{{ modules[4].form.title || 'Latest information' }}</h2>
<p class="intro">Keep up with what happen with IASF</p> <p class="intro">{{ modules[4].form.des || 'Keep up with what happen with IASF' }}</p>
<div class="cover" @click="toSet(4)">点击更换标题与描述</div> <div class="cover" @click="toSet(4)">点击更换标题与描述</div>
</div> </div>
<ul class="news"> <ul class="news">
@ -106,32 +112,16 @@
<div class="block"> <div class="block">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <div class="c-wrap">
<h2 class="b-title">Light Chasers' Home at IASF</h2> <h2 class="b-title">{{ modules[6].form.title || "Light Chasers' Home at IASF" }}</h2>
<p class="intro">Keep up with what happen with IASF</p> <p class="intro">{{ modules[6].form.des || 'Keep up with what happen with IASF' }}</p>
<div class="cover" @click="toSet(6)">点击更换标题与描述</div> <div class="cover" @click="toSet(6)">点击更换标题与描述</div>
</div> </div>
<ul class="people"> <ul class="people">
<li> <li v-for="(item, i) in modules[7].list" :key="i">
<img class="pic" src="@/assets/images/channel/channel1.png" alt=""> <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>
</li>
<li>
<div class="texts"> <div class="texts">
<h6>Shenzhen Innovation Lightsource Facility </h6> <h6>{{ item.title || '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> <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>
<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>
<img class="arrow" src="@/assets/images/channel/arrow.png" alt=""> <img class="arrow" src="@/assets/images/channel/arrow.png" alt="">
</div> </div>
</li> </li>
@ -144,10 +134,8 @@
<div class="inner"> <div class="inner">
<img src="@/assets/images/channel/about.png" alt=""> <img src="@/assets/images/channel/about.png" alt="">
<div class="line"></div> <div class="line"></div>
<div class="text">ABOUT</div> <div class="text">{{ modules[8].form.title || 'ABOUT' }}</div>
<div class="des"> <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>
<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> </div>
<div class="cover" @click="toSet(8)">点击更换标题与描述</div> <div class="cover" @click="toSet(8)">点击更换标题与描述</div>
</div> </div>
@ -155,45 +143,45 @@
<div class="block" style="padding-bottom: 0"> <div class="block" style="padding-bottom: 0">
<div class="inner"> <div class="inner">
<div class="c-wrap"> <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 class="cover" @click="toSet(9)">点击更换标题与描述</div>
</div> </div>
<ul class="stat"> <ul class="stat">
<li> <li>
<p class="num">2020</p> <p class="num">{{ modules[10].form.title }}</p>
<p class="text">The year IASF was founded</p> <p class="text">{{ modules[10].form.des }}</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div> <div class="cover" @click="toSet(10)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">2</p> <p class="num">{{ modules[11].form.title }}</p>
<p class="text">Facility projects</p> <p class="text">{{ modules[11].form.des }}</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div> <div class="cover" @click="toSet(11)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">240</p> <p class="num">{{ modules[12].form.title }}</p>
<p class="text">Employees</p> <p class="text">{{ modules[12].form.des }}</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div> <div class="cover" @click="toSet(12)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">10</p> <p class="num">{{ modules[13].form.title }}</p>
<p class="text">Academicians</p> <p class="text">{{ modules[13].form.des }}</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div> <div class="cover" @click="toSet(13)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">45%</p> <p class="num">{{ modules[14].form.title }}</p>
<p class="text">Hold doctorates or the highest degree in their field</p> <p class="text">{{ modules[14].form.des }}</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div> <div class="cover" @click="toSet(14)">点击更换标题与描述</div>
</li> </li>
<li> <li>
<p class="num">$32B+</p> <p class="num">{{ modules[15].form.title }}</p>
<p class="text">Facility construction need-based grant aid provided </p> <p class="text">{{ modules[15].form.des }}</p>
<div class="cover" @click="toSet(10)">点击更换标题与描述</div> <div class="cover" @click="toSet(15)">点击更换标题与描述</div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<Module :data.sync="modules[curModule]" :visible.sync="diaVisible" /> <Module :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />
</div> </div>
</template> </template>
@ -206,13 +194,14 @@ export default {
return { return {
userId: +this.$store.state.user.userId, userId: +this.$store.state.user.userId,
site: this.$store.state.content.site, site: this.$store.state.content.site,
id: +this.$route.query.id, id: '',
columnId: +this.$route.query.id,
modules: [ modules: [
{ {
type: 'banner', type: 'banner',
list: [ list: [
{ {
pic: '', pic: require('@/assets/images/channel/channel-bg.png'),
link: { link: {
linkName: '无', linkName: '无',
connectionType: 1, connectionType: 1,
@ -270,7 +259,7 @@ export default {
} }
], ],
form: { form: {
pic: '', pic: require('@/assets/images/channel/channel1.png'),
title: '', title: '',
link: { link: {
linkName: '无', linkName: '无',
@ -307,7 +296,7 @@ export default {
} }
], ],
form: { form: {
pic: '', pic: require('@/assets/images/channel/channel1.png'),
title: '', title: '',
link: { link: {
linkName: '无', linkName: '无',
@ -411,8 +400,9 @@ export default {
}, },
list: [ list: [
{ {
pic: '', pic: require('@/assets/images/channel/channel1.png'),
title: '', title: '',
subTitle: '',
link: { link: {
linkName: '无', linkName: '无',
connectionType: 1, connectionType: 1,
@ -433,13 +423,24 @@ export default {
required: true required: true
}, },
{ {
type: 'textarea', type: 'link',
prop: 'link',
label: '链接'
},
{
type: 'editor',
prop: 'des', prop: 'des',
label: '概述' label: '概述',
required: true
} }
], ],
form: { form: {
title: '', title: '',
link: {
linkName: '无',
connectionType: 1,
linkAddress : '',
},
des: '' des: ''
} }
}, },
@ -479,33 +480,155 @@ export default {
} }
], ],
form: { form: {
title: '', title: '2020',
des: '' 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, diaVisible: false,
curModule: 0 curModule: 0,
curData: {},
edited: false
} }
}, },
components: { components: {
Module, Module,
}, },
watch: {
'$route'() {
this.id = this.$route.query.id
// this.getInfo()
}
},
mounted() { mounted() {
this.getInfo()
}, },
methods: { 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) { toSet(i) {
this.curModule = i this.curModule = i
this.curData = JSON.parse(JSON.stringify(this.modules[i]))
this.diaVisible = true 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 // 处理预览和保存的json
handleJson() { handleJson() {
const list = JSON.parse(JSON.stringify(this.modules)) const list = JSON.parse(JSON.stringify(this.modules))
@ -517,7 +640,7 @@ export default {
// 预览 // 预览
preview() { preview() {
this.$post(this.api.saveRedisPage, { this.$post(this.api.saveRedisPage, {
columnId: this.id, columnId: this.columnId,
json: this.handleJson() json: this.handleJson()
}).then(({ data }) => { }).then(({ data }) => {
@ -525,15 +648,19 @@ export default {
}, },
// 保存 // 保存
save(state) { save(state) {
this.$post(this.api.savePage, { const json = this.handleJson()
columnId: this.id, const data = {
id: this.id,
columnId: this.columnId,
state, state,
sort: 1, sort: 1,
founderId: this.userId, founderId: this.userId,
editorId: this.userId, editorId: this.userId,
jsonBeforeEditing: this.handleJson(), jsonBeforeEditing: json
theEditedJson: this.handleJson(), }
}).then(({ data }) => { debugger
if (state) data.theEditedJson = json
this.$post(this.api[this.edited ? 'updatePage' : 'savePage'], data).then(({ data }) => {
}).catch(err => {}) }).catch(err => {})
} }
@ -649,6 +776,9 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 126px; margin-bottom: 126px;
&:nth-child(even) {
flex-direction: row-reverse;
}
} }
.pic { .pic {
width: 660px; width: 660px;
@ -732,6 +862,7 @@ export default {
} }
} }
.cover { .cover {
z-index: 2;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -777,6 +908,21 @@ export default {
} }
$avatar-width: 140px; $avatar-width: 140px;
$avatar-height: 80px; $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 { /deep/ .uploader {
.el-upload { .el-upload {
position: relative; position: relative;

Write Preview
Loading…
Cancel
Save