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

fix

Browse Source
master
yujialong 1 year ago
parent d1f4161e8c
commit 7f80bfc473
9 changed files with 1033 additions and 822 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 145
      public/styles/css/editor.css
  2. 193
      src/components/modules/content.vue
  3. 5
      src/const/modules.js
  4. 2
      src/mixins/page/index.js
  5. 80
      src/pages/article/add/editor.js
  6. 24
      src/pages/article/add/index.vue
  7. 1395
      src/pages/column/add/index.vue
  8. 7
      src/pages/column/page/iasf.vue
  9. 2
      src/pages/column/page/lightSources.vue

145
public/styles/css/editor.css
Unescape View File

@ -1,83 +1,124 @@
@font-face {
font-family: SFProDisplay;
src: url('./styles/font/SF-Pro-Display-Regular.otf');
font-family: SFProDisplay;
src: url('./styles/font/SF-Pro-Display-Regular.otf');
}
@font-face {
font-family: ProximaNova;
src: url('./styles/font/ProximaNova-Regular.otf');
font-family: ProximaNova;
src: url('./styles/font/ProximaNova-Regular.otf');
}
.mce-content-body:not([dir=rtl]) blockquote {
padding: 8px 15px;
border-left: 0;
background-color: #ededed;
.mce-content-body:not([dir='rtl']) blockquote {
padding: 8px 15px;
border-left: 0;
background-color: #ededed;
}
.mce-content-body p {
margin: 0;
margin: 0;
}
.tiny-wrap {
/* width: 900px; */
margin: 0 auto;
/* width: 900px; */
margin: 0 auto;
}
.tiny-wrap .blue {
color: #1583ff;
}
.tiny-wrap blockquote p {
margin: 0;
font-style: italic;
margin: 0;
font-style: italic;
}
.tiny-wrap .block {
margin-bottom: 20px;
overflow: hidden;
margin-bottom: 20px;
overflow: hidden;
}
.tiny-wrap .block .fl {
float: left;
margin: 0 20px 0 0;
float: left;
margin: 0 20px 0 0;
}
.tiny-wrap .block .fr {
float: right;
margin: 0 0 0 20px;
float: right;
margin: 0 0 0 20px;
}
.tiny-wrap .block p {
margin: 0 0 10px;
font-size: 19px;
font-family: SFProDisplay;
font-weight: 400;
color: #101010;
line-height: 32px;
}
.tiny-wrap .en-block p, .tiny-wrap .en-block .img-des {
font-family: ProximaNova;
letter-spacing: -.0135em;
line-height: 1.5em;
margin: 0 0 10px;
font-size: 19px;
font-family: SFProDisplay;
font-weight: 400;
color: #101010;
line-height: 32px;
white-space: pre-wrap;
}
.tiny-wrap .en-block p,
.tiny-wrap .en-block .img-des {
font-family: ProximaNova;
letter-spacing: -0.0135em;
line-height: 1.5em;
}
.tiny-wrap .block .tiny-title {
margin: 10px 0;
font-size: 24px;
font-family: SFProDisplay;
font-weight: 500;
color: #101010;
line-height: 32px;
margin: 10px 0;
font-size: 24px;
font-family: SFProDisplay;
font-weight: 500;
color: #101010;
line-height: 32px;
}
.tiny-wrap .quote {
padding: 15px;
margin-bottom: 10px;
font-size: 16px;
font-style: italic;
border: 1px solid #e3e3e3;
background-color: #f1f1f1;
padding: 15px;
margin-bottom: 10px;
font-size: 16px;
font-style: italic;
border: 1px solid #e3e3e3;
background-color: #f1f1f1;
}
.tiny-wrap .img-wrap {
text-align: center;
text-align: center;
}
.tiny-wrap .img-wrap img {
max-width: 600px;
max-height: 600px;
max-width: 600px;
max-height: 600px;
}
.tiny-wrap .block .img-des {
margin: 10px 0 0;
font-size: 14px;
color: #8d8d8d;
text-align: center;
margin: 10px 0 0;
font-size: 14px;
color: #8d8d8d;
text-align: center;
}
.tiny-wrap .block .pic {
width: 300px;
height: 190px;
width: 300px;
height: 190px;
}
.tiny-wrap .people {
display: flex;
align-items: center;
margin-bottom: 30px;
}
.tiny-wrap .people .pic {
max-width: 400px;
margin-right: 50px;
}
.tiny-wrap .people h6 {
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.tiny-wrap .people h6 {
margin-top: 20px;
font-size: 18px;
color: #333;
line-height: 35px;
}
.tiny-wrap .p-title {
display: flex;
align-items: center;
margin: 0 0 10px;
font-size: 22px;
font-weight: 400;
color: #333;
}
.tiny-wrap .p-title:before {
content: '';
width: 5px;
height: 19px;
margin-right: 8px;
background: #1583ff;
border-radius: 4px;
}

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

@ -1,74 +1,115 @@
<template>
<!-- 内容 -->
<div>
<el-dialog title="编辑内容" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close">
<el-form ref="form" :model="data.form" :rules="rules" label-width="60px">
<el-form-item v-for="(item, i) in data.forms" :key="i" :prop="item.prop" :label="item.label">
<el-input v-if="item.type === 'input'" v-model="data.form[item.prop]" placeholder="请输入" maxlength="100"></el-input>
<el-input v-if="item.type === 'textarea'" v-model="data.form[item.prop]" type="textarea" placeholder="请输入" maxlength="300"></el-input>
<el-upload
v-if="item.type === 'upload' && item.crop"
class="uploader"
accept=".jpg,.png,.jpeg,.gif"
:on-change="res => changeFile(res, data.form)"
:show-file-list="false"
:action="api.upload"
:auto-upload="false">
<img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
<div class="uploader-default" v-else>
<i class="el-icon-plus"></i>
<p>上传图片</p>
</div>
<div slot="tip" class="el-upload__tip">
<p>只支持.jpg,.png格式</p>
</div>
<el-dialog title="编辑内容"
:visible.sync="visible"
width="700px"
custom-class="module"
:close-on-click-modal="false"
:before-close="close">
<el-form ref="form"
:model="data.form"
:rules="rules"
label-width="60px">
<el-form-item v-for="(item, i) in data.forms"
:key="i"
:prop="item.prop"
:label="item.label">
<el-input v-if="item.type === 'input'"
v-model="data.form[item.prop]"
placeholder="请输入"
maxlength="100"></el-input>
<el-input v-if="item.type === 'textarea'"
v-model="data.form[item.prop]"
type="textarea"
placeholder="请输入"
maxlength="300"></el-input>
<Editor v-if="item.type === 'editor'"
api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
v-model="data.form[item.prop]"
:init="editorConfig" />
<el-upload v-if="item.type === 'upload' && item.crop"
class="uploader"
accept=".jpg,.png,.jpeg,.gif"
:on-change="res => changeFile(res, data.form)"
:show-file-list="false"
:action="api.upload"
:auto-upload="false">
<img v-if="data.form[item.prop]"
:src="data.form[item.prop]"
class="avatar">
<div class="uploader-default"
v-else>
<i class="el-icon-plus"></i>
<p>上传图片</p>
</div>
<div slot="tip"
class="el-upload__tip">
<p>只支持.jpg,.png格式</p>
</div>
</el-upload>
<el-upload
v-if="item.type === 'upload' && !item.crop"
class="uploader"
accept=".jpg,.png,.jpeg"
:on-success="res => uploadSuccess(res, data.form)"
:show-file-list="false"
:headers="headers"
:action="api.upload">
<img v-if="data.form[item.prop]" :src="data.form[item.prop]" class="avatar">
<div class="uploader-default" v-else>
<i class="el-icon-plus"></i>
<p>上传图片</p>
</div>
<div slot="tip" class="el-upload__tip">
<p>只支持.jpg,.png格式</p>
</div>
<el-upload v-if="item.type === 'upload' && !item.crop"
class="uploader"
accept=".jpg,.png,.jpeg"
:on-success="res => uploadSuccess(res, data.form)"
:show-file-list="false"
:headers="headers"
:action="api.upload">
<img v-if="data.form[item.prop]"
:src="data.form[item.prop]"
class="avatar">
<div class="uploader-default"
v-else>
<i class="el-icon-plus"></i>
<p>上传图片</p>
</div>
<div slot="tip"
class="el-upload__tip">
<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>
<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>
<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>
</div>
</el-form-item>
</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 type="primary" @click="contentSubmit">确定</el-button>
<el-button type="primary"
@click="contentSubmit">确定</el-button>
</span>
</el-dialog>
<Link ref="link" :visible.sync="linkVisible" :data.sync="linkForm" @linkSubmit="linkSubmit" />
<Link ref="link"
:visible.sync="linkVisible"
:data.sync="linkForm"
@linkSubmit="linkSubmit" />
<!-- 剪裁组件弹窗 -->
<el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false">
<Cropper
ref="cropper"
:img-file.sync="file"
:is-upload="isUpload"
:fixed="fixed"
:fixedNumber.sync="fixedNumber"
@upload="customUpload" />
<el-dialog title="图片裁剪"
append-to-body
:visible.sync="cropperModel"
width="1100px"
:close-on-click-modal="false">
<Cropper ref="cropper"
:img-file.sync="file"
:is-upload="isUpload"
:fixed="fixed"
:fixedNumber.sync="fixedNumber"
@upload="customUpload" />
</el-dialog>
</div>
</template>
@ -78,18 +119,22 @@ import Link from '@/components/modules/link'
import Setting from '@/setting'
import Util from '@/libs/util'
import Cropper from '@/components/img-upload/Cropper'
import Editor from '@tinymce/tinymce-vue'
import editorConfig from '@/components/editor'
import Axios from 'axios'
export default {
props: ['data', 'visible'],
components: {
Link,
Cropper
Cropper,
Editor,
},
data() {
data () {
return {
headers: {
token: Util.local.get(Setting.tokenKey)
},
editorConfig,
rules: {},
linkVisible: false,
linkForm: {},
@ -104,17 +149,17 @@ export default {
};
},
watch: {
visible(open) {
visible (open) {
// 每次打开的时候处理参数
open && this.handleForm()
}
},
mounted() {
mounted () {
this.handleForm()
},
methods: {
// 处理form表单参数
handleForm() {
handleForm () {
const { forms, type } = this.data
// 这两张类型的模块才需要处理参数
if (type === 'form' || type === 'introduce') {
@ -139,17 +184,17 @@ export default {
})
}
},
close() {
close () {
this.$emit('update:visible', false)
},
// 图片裁剪上传事件
customUpload(data) {
customUpload (data) {
const formData = new FormData()
formData.append('file', data, this.file.name)
this.imgUpload(formData)
},
// 压缩图片
compress(img) {
compress (img) {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
// let initSize = img.src.length;
@ -166,7 +211,7 @@ export default {
return ndata
},
// base64转成bolb对象
dataURItoBlob(base64Data) {
dataURItoBlob (base64Data) {
let byteString
if (base64Data.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(base64Data.split(',')[1])
@ -186,7 +231,7 @@ export default {
})
},
// 图片上传到服务器
imgUpload(formData) {
imgUpload (formData) {
this.isUpload = true
Axios({
method: 'post',
@ -198,13 +243,13 @@ export default {
},
}).then(({ data }) => {
this.$set(this.curForm, 'pic', data.url)
}).catch(res => {})
}).catch(res => { })
this.$refs.cropper.isDisabled = false
this.isUpload = false
this.cropperModel = false
},
// 图片改变钩子
changeFile(file, form) {
changeFile (file, form) {
const { size, name } = file
const ext = name.substring(name.lastIndexOf('.') + 1)
if (!Util.isImg(ext)) {
@ -226,17 +271,17 @@ export default {
})
},
// 上传成功
uploadSuccess(res, row) {
uploadSuccess (res, row) {
this.$set(row, 'pic', res.url)
},
// 展示链接设置
toLink(row, i = 0) {
toLink (row, i = 0) {
this.linkVisible = true
this.curIndex = i
this.linkForm = row.link
},
// 链接设置提交
linkSubmit() {
linkSubmit () {
const el = this.$refs.link
const data = this.data.form ? this.data.form.link : this.data.list[this.curIndex].link
let name
@ -267,7 +312,7 @@ export default {
this.linkVisible = false
},
// 模块设置提交
contentSubmit() {
contentSubmit () {
this.$emit('contentSubmit')
},
}
@ -275,11 +320,11 @@ export default {
</script>
<style lang="scss" scoped>
.radio-wrap {
display: flex;
align-items: center;
.el-input {
width: 200px;
margin-left: -40px;
}
display: flex;
align-items: center;
.el-input {
width: 200px;
margin-left: -40px;
}
}
</style>

5
src/const/modules.js
Unescape View File

@ -6706,7 +6706,7 @@ export default {
required: true
},
{
type: 'textarea',
type: 'editor',
prop: 'des',
label: '描述'
}
@ -9015,6 +9015,7 @@ export default {
stations: '',
status: '',
time: '',
status: '',
}
]
},
@ -9647,7 +9648,7 @@ export default {
}
},
{
type: 'introduce',
type: 'form',
forms: [
{
type: 'upload',

2
src/mixins/page/index.js
Unescape View File

@ -78,7 +78,7 @@ export default {
e.originForm = modules[i].originForm
}
})
// this.modules = list
this.modules = list
console.log("🚀 ~ file: index.js:85 ~ this.$post ~ list:", list)
}
}).catch(err => {})

80
src/pages/article/add/editor.js
Unescape View File

@ -179,7 +179,8 @@ export default {
branding: false,
width: 940,
height: 650, //编辑器高度
min_height: 400,
// min_height: 400,
max_height: 650,
content_css: [ //可设置编辑区内容展示的css，谨慎使用
'./styles/css/editor.css',
],
@ -297,6 +298,83 @@ export default {
</div>
</div>
`
},
{ title: '人物详情', description: '', content: `
<div class="tiny-wrap">
<div class="people">
<img class="pic" src="http://10.10.11.7/images/team/5.png"/>
<div class="texts">
<h6>谢明远 XIE Mingyuan</h6>
<div class="text">
<p>同步辐射光源工程经理部 生物医药组 副研究员</p>
<p>负责深圳产业光源生物安全防护晶体学与成像实验站建设</p>
<p>深圳市海外高层次人才孔雀计划C类 </p>
</div>
</div>
</div>
<div class="block">
<h6 class="p-title">基本简介</h6>
<div class="block">
<p>职称：副教授</p>
<p>学位：博士</p>
<p>毕业学校：美国马里兰大学帕克分校</p>
<p>电子邮件：<span class="blue">xiemy@mail.iasf.ac.cn</span></p>
</div>
</div>
<div class="block">
<h6 class="p-title">学术经历 </h6>
<div class="block">
<p>2014年 毕业于中山大学获理学博士学位。</p>
<p>2014-2015年 香港理工大学从事博士后研究工作；</p>
<p>2015-2016年 北京理工大学珠海学院信息学院任讲师，主要从事高功率单模光纤激光器、大芯径高功率多模光纤激光器以及基于光纤的系统的研发工作。</p>
<p>2016-2019 于中山大学物理学院任副研究员，主要开展藻类捕光蛋白结构和功能研究。</p>
<p>2019-2021 获得广东省青年优秀人才海外派出计划资助，赴德国电子同步加速器实验室DESY任访问学者，共同搭建世界上首台基于光学参量放大过程的波形相干合成光源；</p>
<p>2021年至今 深圳综合粒子设施研究院同步辐射光源经理部生物医药组任副研究员，负责深圳产业光源生物安全防护晶体学与成像实验站建设。</p>
</div>
</div>
<div class="block">
<h6 class="p-title">学科方向</h6>
<div class="block">
<p>所在学科：材料物理</p>
<p>研究方向：分子模拟，计算材料学，统计力学</p>
<p>研究兴趣：软物质及复杂流体界面的分子模拟，熔盐传蓄热材料热物性的计算模拟</p>
</div>
</div>
<div class="block">
<h6 class="p-title">学术业绩</h6>
<div class="block">
<p>长期从事材料界面、软物质和能源材料的分子模拟工作，迄今为止以第一作者或通讯作者发表论文16篇。</p>
<p>主持科研项目</p>
<p>国家自然科学基金青年项目（2019-2021）：超级电容器双电层结构的多尺度模拟研究（11804400）</p>
<p>国家自然科学基金面上项目（2022-2025）：接枝表面上液体输运性质的多尺度模拟（12174457）</p>
</div>
</div>
<div class="block">
<h6 class="p-title">荣誉获奖</h6>
<div class="block">
<p>“百千万”人才工程、国家杰出青年科学基金项目、青年千人计划、中国科学院百人计划、珠江人才青年拔尖人才、深圳市高层次人</p>
</div>
</div>
<div class="block">
<h6 class="p-title">代表论著</h6>
<div class="block">
<p>1) F. Liang, J. Ding and S. Liu*, Collective Solvation and Transport at Tetrahydrofuran–Silica Interfaces for Separation of Aromatic Compounds: Insight from Molecular Dynamics Simulations, Langmuir, 2021, 37, 2091-2103.</p>
<p>2) K. Ren, Y.-P. Wang and S. Liu*, The role of solute polarity on methanol–silica interfacial solvation: a molecular dynamics study, Phys. Chem. Chem. Phys., 2021, 23, 1092-1102.</p>
<p>3) Y.-P. Wang, K. Ren and S. Liu*, The joint effect of surface polarity and concentration on the structure and dynamics of acetonitrile solution: a molecular dynamics simulation study, Phys. Chem. Chem. Phys., 2020, 22, 10322-10334.</p>
<p>4) K. Ren and S. Liu*, The effect of surface polarity on the structure and collective dynamics of liquid ethanol, Phys. Chem. Chem. Phys., 2020, 22, 1204-1213.</p>
<p>5) R. C. Remsing, S. Liu and J. D. Weeks, Long-ranged Contributions to Solvation Free Energies from Theory and Short-ranged Models, Proc. Natl. Acad. Sci. 113, 2819-2826(2016).</p>
<p>6) S. Liu, J. Savage and G. A. Voth, Mesoscale Study of Proton Transport in Proton Exchange Membranes: Role of Morphologies. J. Phys. Chem. C., 119, 1753-1762 (2015).</p>
<p>7) S. Liu and J. T. Fourkas, Orientational Time Correlati.</p>
</div>
</div>
</div>
`
}
],
// content_security_policy: "https://cdn.tiny.cloud/1/rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda/tinymce/6/tinymce.min.js",

24
src/pages/article/add/index.vue
Unescape View File

@ -240,7 +240,7 @@
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item v-else-if="!isJournal"
<el-form-item v-else-if="!isJournal && !isThesis"
prop="author"
label="作者">
<el-input placeholder="请输入作者"
@ -270,7 +270,7 @@
class="inline-input"></el-input>
</el-form-item>
</div>
<div v-if="form.articleTemplate === 22 || form.articleTemplate === 23"
<div v-if="form.articleTemplate === 22 || form.articleTemplate === 23 || isOrg"
class="item-line">
<el-form-item prop="edit"
label="编辑">
@ -335,7 +335,7 @@
</el-form-item>
</template>
<div v-if="form.articleTemplate === 22 || form.articleTemplate === 23"
<div v-if="form.articleTemplate === 22 || form.articleTemplate === 23 || isOrg"
class="item-line">
<el-form-item prop="source"
label="所属分类">
@ -372,7 +372,7 @@
@click="setLabel">设置</el-button>
</el-form-item>
</div>
<el-form-item v-if="form.articleTemplate === 22 || form.articleTemplate === 23"
<el-form-item v-if="form.articleTemplate === 22 || form.articleTemplate === 23 || isPeople || isOrg"
prop="summary"
label="摘要">
<el-input style="width: 940px"
@ -461,14 +461,14 @@
</div>
</template>
<el-form-item v-if="form.articleTemplate !== 24 && form.articleTemplate !== 26"
<el-form-item v-if="form.articleTemplate !== 24 && form.articleTemplate !== 26 && !isPublication"
prop="mainBody"
label="正文">
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda'
v-model="form.mainBody"
:init="editorConfig" />
</el-form-item>
<template v-if="isJournal">
<template v-if="isJournal || isPublication">
<el-form-item prop="publicationTypeId"
label="出版物类型">
<el-select style="width: 234px;"
@ -901,6 +901,10 @@ export default {
isPeople () {
return this.form.articleTemplate === 72
},
// 组织架构
isOrg () {
return this.form.articleTemplate === 69
},
getModelData: {
get () {
const data = this.classifications.find(item => item.id === this.form.classificationId)
@ -1412,9 +1416,11 @@ export default {
// 封面图跟banner的截取比例不一样，期刊详情模板的也不一样
this.fixedNumber = isBanner ?
[1, 0.26] :
this.isJournal ?
[1, 1.5] :
[1.76, 1]
this.isPeople ?
[1, 1] :
this.isJournal ?
[1, 1.5] :
[1.76, 1]
this.isBanner = isBanner
const { size, name } = file
const ext = name.substring(name.lastIndexOf('.') + 1)

1395
src/pages/column/add/index.vue
View File

File diff suppressed because it is too large Load Diff

7
src/pages/column/page/iasf.vue
Unescape View File

@ -317,7 +317,12 @@
<ul class="tools">
<li v-for="(item, i) in modules[18].list"
:key="i">{{ item.title }}</li>
:key="i">
<img :src="'http://10.10.11.7/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'"
alt=""
class="icon">
{{ item.title }}
</li>
<div class="cover"
@click="toSet(18)">点击更换导航</div>
</ul>

2
src/pages/column/page/lightSources.vue
Unescape View File

@ -95,7 +95,6 @@
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>光源名称</th>
<th>国家</th>
<th>地点</th>
@ -105,6 +104,7 @@
<th>重复频率/Hz Repetition rate</th>
<th>设施长度/m Overall length</th>
<th>线站数量</th>
<th>状态</th>
<th>出光时间</th>
</tr>
</thead>

Write Preview
Loading…
Cancel
Save