512 lines
13 KiB
Vue
512 lines
13 KiB
Vue
<template>
|
||
<div>
|
||
<!-- <p class="luan_ma">以下内容的"<b> </b>"是生成环节的必要 请不要删除！！！</p> -->
|
||
<el-row :gutter="20" style="margin: 0 auto;height: 100%;overflow: hidden;">
|
||
<el-col :span="24" style="height: 100%;padding: 10px 0;">
|
||
<!-- <div class="step_role">
|
||
<el-steps :active="2" class="move_bar">
|
||
<el-step title="Choice" @click.native="handleStep1()">
|
||
<i class="step01" slot="icon"></i>
|
||
</el-step>
|
||
<el-step title="Check">
|
||
<i class="step02" slot="icon"></i>
|
||
</el-step>
|
||
<el-step title="Generate" @click.native="handleStep3()">
|
||
<i class="step03" slot="icon"></i>
|
||
</el-step>
|
||
</el-steps>
|
||
</div> -->
|
||
<div class="pane_act" v-loading="loading" element-loading-text="Loading desperately..." element-loading-spinner="el-icon-loading"
|
||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||
<h1>
|
||
<img src="../../assets/img/temp-iocn.png" style="vertical-align: middle;margin: 0 5px 0 0;">
|
||
{{this.article_title}}
|
||
</h1>
|
||
<div>
|
||
<div class="vefi_cation">
|
||
<h3 class="mark">Title</h3>
|
||
<el-input type="textarea" v-model="checkForm.info_title" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3 class="mark">Type</h3>
|
||
<p>{{checkForm.info_type}}</p>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3 class="mark">Author</h3>
|
||
<el-input type="textarea" v-model="checkForm.author" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3 class="mark">Department-Affiliation-Address</h3>
|
||
<el-input type="textarea" v-model="checkForm.authorAddress" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Author Contribution</h3>
|
||
<el-input type="textarea" v-model="checkForm.authorContribution" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
|
||
<div class="vefi_cation">
|
||
<h3>Acknowledgment</h3>
|
||
<el-input type="textarea" v-model="checkForm.acknowledgment" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Corresponding Author</h3>
|
||
<el-input type="textarea" v-model="checkForm.authorCorresponding" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Author Corresponding Email</h3>
|
||
<el-input type="textarea" v-model="checkForm.authorCorrespondingEmail" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Abbreviation</h3>
|
||
<el-input type="textarea" v-model="checkForm.abbreviation" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Accepted Date</h3>
|
||
{{modifDate(checkForm.accepted_date)}}
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Received Date</h3>
|
||
{{modifDate(checkForm.received_date)}}
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Topic</h3>
|
||
<el-input type="textarea" v-model="checkForm.topic" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Keywords</h3>
|
||
<el-input type="textarea" v-model="checkForm.keywords" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Doi</h3>
|
||
{{checkForm.doi}}
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Traditon</h3>
|
||
<el-input type="textarea" v-model="checkForm.traditon" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Abstract Text</h3>
|
||
<el-input type="textarea" v-model="checkForm.abstractText" :autosize="{minRows: 2}"></el-input>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<el-button type="primary" style="width: 400px;margin: 10px auto 50px auto;" @click="checkActicle(checkForm)">OK</el-button>
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3 class="mark">MainText</h3>
|
||
<p style="font-size: 14px;line-height: 1.6;color: #606266;">{{checkForm.mainText}}</p>
|
||
<!-- <el-input type="textarea" v-model="checkForm.mainText" :autosize="{minRows: 2}"></el-input> -->
|
||
<!-- <quill-editor ref="myTextEditor" v-model="checkForm.mainText" :options="editorOption"></quill-editor> -->
|
||
<!-- <el-upload class="avatar-uploader" :action="" name="journalfooter" :show-file-list="false"
|
||
:on-success="uploadSuccess">
|
||
</el-upload> -->
|
||
</div>
|
||
<div class="vefi_cation">
|
||
<h3>Reference</h3>
|
||
<div class="vef_refen" v-for="item in this.refFile">
|
||
<p>
|
||
{{item.refer_title}}
|
||
<i class="el-icon-edit" @click="handleEdit(item.typesetInfoReferenceId,item.refer_title)"></i>
|
||
<i class="el-icon-delete" @click="handleDelete(item.typesetInfoReferenceId)" style="color: #ff3636;"></i>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 编辑参考文献弹出框 -->
|
||
<el-dialog title="Edit references" :visible.sync="editVisible" width="50%">
|
||
<el-form ref="edit_Form" :model="editForm" :rules="rules" label-width="95px">
|
||
<el-form-item label="Reference" prop="title">
|
||
<el-input v-model="editForm.title" type="textarea" :autosize="{minRows: 2}"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="editVisible = false">Cancel</el-button>
|
||
<el-button type="primary" @click="saveEdit(editForm)">OK</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import 'quill/dist/quill.core.css';
|
||
import 'quill/dist/quill.snow.css';
|
||
import 'quill/dist/quill.bubble.css';
|
||
import {
|
||
quillEditor
|
||
} from 'vue-quill-editor';
|
||
export default {
|
||
data() {
|
||
return {
|
||
article_id: this.$route.query.esay_id,
|
||
article_title: '',
|
||
loading: false,
|
||
editVisible: false,
|
||
checkForm: {
|
||
'info_title': '',
|
||
'info_type': '',
|
||
'author': '',
|
||
'authorAddress': '',
|
||
'authorContribution': '',
|
||
'acknowledgment': '',
|
||
'authorCorresponding': '',
|
||
'authorCorrespondingEmail': '',
|
||
'abbreviation': '',
|
||
'accepted_date': '',
|
||
'online_date': '',
|
||
'received_date': '',
|
||
'topic': '',
|
||
'little_author': '',
|
||
'keywords': '',
|
||
'doi': '',
|
||
'traditon': '',
|
||
'abstractText': '',
|
||
'mainText': ''
|
||
},
|
||
refFile: [],
|
||
editForm: {
|
||
title: '',
|
||
typesetInfoReferenceId: '',
|
||
},
|
||
content: '',
|
||
editorOption: {
|
||
placeholder: 'Please enter...',
|
||
modules: {
|
||
toolbar: {
|
||
container: [
|
||
['bold', 'italic', 'underline', 'strike'],
|
||
['blockquote', 'code-block'],
|
||
[{
|
||
'header': 1
|
||
}, {
|
||
'header': 2
|
||
}],
|
||
[{
|
||
'list': 'ordered'
|
||
}, {
|
||
'list': 'bullet'
|
||
}],
|
||
[{
|
||
'script': 'sub'
|
||
}, {
|
||
'script': 'super'
|
||
}],
|
||
[{
|
||
'indent': '-1'
|
||
}, {
|
||
'indent': '+1'
|
||
}],
|
||
[{
|
||
'direction': 'rtl'
|
||
}],
|
||
[{
|
||
'size': ['small', false, 'large', 'huge']
|
||
}],
|
||
[{
|
||
'header': [1, 2, 3, 4, 5, 6, false]
|
||
}],
|
||
[{
|
||
'color': []
|
||
}, {
|
||
'background': []
|
||
}],
|
||
[{
|
||
'font': []
|
||
}],
|
||
[{
|
||
'align': []
|
||
}],
|
||
['link', 'image', 'video']
|
||
],
|
||
// 工具栏
|
||
handlers: {
|
||
image: function(value) {
|
||
if (value) {
|
||
// upload点击上传事件
|
||
document.querySelector('.avatar-uploader input').click()
|
||
} else {
|
||
this.quill.format('image', false)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
rules: {
|
||
title: [{
|
||
required: true,
|
||
message: 'To add a reference, please enter',
|
||
trigger: 'blur'
|
||
}]
|
||
}
|
||
};
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
created() {
|
||
this.getData()
|
||
},
|
||
methods: {
|
||
// 获取数据
|
||
getData() {
|
||
this.$api
|
||
.post('typeset/gettypesetdetail', {
|
||
'typesetId': this.article_id
|
||
})
|
||
.then(res => {
|
||
if (res.ret == 0) {
|
||
this.article_title = res.data.info.title;
|
||
this.checkForm = res.data.info.u_typeset_info;
|
||
this.checkForm.mainText = res.data.info.u_typeset_info.mainText;
|
||
this.refFile = res.data.refers;
|
||
} else {
|
||
this.$message.error(res.error);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
},
|
||
// 提交文章排版
|
||
checkActicle(checkForm) {
|
||
if (this.checkForm.info_title == '' || this.checkForm.author == '' || this.checkForm.authorAddress == '' || this.checkForm
|
||
.mainText == '') {
|
||
this.$message.error('Please complete the information');
|
||
} else {
|
||
this.loading = true;
|
||
this.$api
|
||
.post('typeset/edittypesetinfo', this.checkForm)
|
||
.then(res => {
|
||
if (res.ret == 0) {
|
||
this.$router.push({
|
||
path: '/formwork',
|
||
query: {
|
||
esay_id: this.article_id
|
||
}
|
||
});
|
||
this.loading = false;
|
||
} else {
|
||
this.loading = false;
|
||
this.$message.error(res.error);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.loading = false;
|
||
this.$message.error(err);
|
||
});
|
||
}
|
||
},
|
||
// 编辑文献操作
|
||
handleEdit(e, h) {
|
||
this.editForm.title = h;
|
||
this.editForm.typesetInfoReferenceId = e;
|
||
this.editVisible = true;
|
||
},
|
||
// 保存文献
|
||
saveEdit(editForm) {
|
||
this.$refs.edit_Form.validate((valid) => {
|
||
if (valid) {
|
||
this.$api
|
||
.post('typeset/editTypesetRefer', this.editForm)
|
||
.then(res => {
|
||
if (res.ret == 0) {
|
||
this.editVisible = false;
|
||
this.$message.success(`Change succeeded!`);
|
||
this.getData();
|
||
} else {
|
||
this.$message.error(res.error);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
} else {
|
||
this.$message.error('error submit!!');
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
// 删除文献操作
|
||
handleDelete(e) {
|
||
// 二次确认删除
|
||
this.$confirm('Are you sure you want to delete？', 'Tips', {
|
||
confirmButtonText: 'OK',
|
||
cancelButtonText: 'Cancel',
|
||
type: 'warning'
|
||
})
|
||
.then(() => {
|
||
this.$api
|
||
.post('typeset/delTypesetReferById', {
|
||
'typeset_info_reference_id': e
|
||
})
|
||
.then(res => {
|
||
if (res.ret == 0) {
|
||
this.$message.success('Delete succeeded');
|
||
this.getData();
|
||
} else {
|
||
this.$message.error(res.error);
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message.error(err);
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
// 富文本编辑器
|
||
onEditorChange({
|
||
editor,
|
||
html,
|
||
text
|
||
}) {
|
||
this.content = html;
|
||
},
|
||
|
||
// 上传成功
|
||
// uploadSuccess(res) {
|
||
// let quill = this.$refs.myTextEditor.quill;
|
||
|
||
// // 获取光标所在位置
|
||
// let length = quill.getSelection().index
|
||
// // 插入图片 res.upurl为服务器返回的图片地址
|
||
// // quill.insertEmbed(length, 'image', this.IMGqi_Url + 'journalfooter/' + res.upurl)
|
||
// // 调整光标到最后
|
||
// quill.setSelection(length + 1)
|
||
// }
|
||
|
||
// 点击步骤条
|
||
handleStep1() {
|
||
this.$router.push({
|
||
path: '/compose',
|
||
query: {
|
||
esay_id: this.article_id
|
||
}
|
||
});
|
||
},
|
||
handleStep3() {
|
||
this.$router.push({
|
||
path: '/formwork',
|
||
query: {
|
||
esay_id: this.article_id
|
||
}
|
||
});
|
||
},
|
||
|
||
// 修改时间标准格式
|
||
modifDate(e) {
|
||
let date = new Date(parseInt(e));
|
||
let Y = date.getFullYear() + '-';
|
||
let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
|
||
let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
||
return Y + M + D;
|
||
},
|
||
},
|
||
components: {
|
||
quillEditor
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.luan_ma {
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 50%;
|
||
margin-left: -290px;
|
||
color: #e61e12;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.step_role {
|
||
margin: 0 auto 10px auto;
|
||
/* width: 800px; */
|
||
}
|
||
|
||
.step_role .move_bar {
|
||
width: 100%;
|
||
margin: 5px 0 0 0;
|
||
}
|
||
|
||
.pane_act {
|
||
background-color: #fff;
|
||
height: 90.5%;
|
||
}
|
||
|
||
.pane_act>h1 {
|
||
font-size: 15px;
|
||
margin: 0 0 5px 0;
|
||
padding: 15px 0 15px 20px;
|
||
border-bottom: 1px solid #dde1eb;
|
||
box-shadow: rgb(134 134 134) 0px 5px 5px -2px;
|
||
}
|
||
|
||
.pane_act>div {
|
||
/* height: 92%;
|
||
overflow-y: scroll; */
|
||
}
|
||
|
||
.vefi_cation {
|
||
padding: 20px 30px;
|
||
}
|
||
|
||
.vefi_cation>h3 {
|
||
font-size: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.vefi_cation>h3.mark:before {
|
||
content: '*';
|
||
color: #F56C6C;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.vefi_cation .el-textarea__inner {
|
||
box-shadow: 1px 1px 5px 1px rgb(46 91 255 / 20%);
|
||
font-size: 14px;
|
||
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
|
||
}
|
||
|
||
|
||
.vefi_cation .ql-toolbar.ql-snow {
|
||
border: 0;
|
||
box-shadow: 1px 1px 5px 1px rgb(46 91 255 / 20%);
|
||
}
|
||
|
||
.vefi_cation .ql-container.ql-snow {
|
||
border: 0;
|
||
box-shadow: 1px 1px 5px 1px rgb(46 91 255 / 20%);
|
||
}
|
||
|
||
.vefi_cation .vef_refen>p {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: #606266;
|
||
padding: 10px 15px;
|
||
}
|
||
|
||
|
||
.vefi_cation .vef_refen>p>i {
|
||
display: none;
|
||
margin-left: 10px;
|
||
cursor: pointer;
|
||
color: #39aeff;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.vefi_cation .vef_refen>p:hover {
|
||
box-shadow: 1px 1px 5px 1px rgb(46 91 255 / 20%);
|
||
}
|
||
|
||
.vefi_cation .vef_refen>p:hover i.el-icon-edit {
|
||
display: inline-block;
|
||
}
|
||
|
||
.vefi_cation .vef_refen>p:hover i.el-icon-delete {
|
||
display: inline-block;
|
||
}
|
||
</style>
|