表格处理
This commit is contained in:
971
src/components/page/GenerateCharts.vue
Normal file
971
src/components/page/GenerateCharts.vue
Normal file
@@ -0,0 +1,971 @@
|
||||
<template>
|
||||
<div style="height: 98%">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item> <i class="el-icon-document-copy"></i> Generate Charts </el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div
|
||||
class="container"
|
||||
style="height: 97%; min-width: calc(1000px - 300px); width: calc(100% - 300px); background-color: #fafafa; padding: 10px 0 0 0"
|
||||
>
|
||||
<h3 class="man_Title">
|
||||
{{ detailTitle }}
|
||||
</h3>
|
||||
<div class="type_MTxt" style="box-sizing: border-box">
|
||||
<div
|
||||
v-for="(item, index) in Main_List"
|
||||
@dragover.prevent
|
||||
:class="item.p_main_img_id ? 'imgBox' : ''"
|
||||
@drop="onDrop($event, index)"
|
||||
>
|
||||
<p v-html="item.text" v-if="!item.p_main_img_id"></p>
|
||||
<p v-if="item.p_main_img_id" class="MaxPicture">
|
||||
<img :src="baseUrl + 'public/mainimg/' + item.content" :style="'width:' + item.width + 'px'" />
|
||||
<font :style="'width:' + item.width + 'px'">{{ item.note }} </font>
|
||||
</p>
|
||||
<font v-if="item.getnum != 0" class="chNumer">{{ item.getnum }}</font>
|
||||
<b
|
||||
class="MaxBtn"
|
||||
@click="MTxtEdit(item, index)"
|
||||
style="background-color: #006699; right: 40px"
|
||||
v-if="item.p_main_img_id"
|
||||
>
|
||||
<i class="el-icon-edit"></i>
|
||||
</b>
|
||||
<!-- <b class="MaxBtn" @click="MTxtPic(item, index)" style="background-color: #13bc20; right: 40px">
|
||||
<svg
|
||||
t="1684978324047"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1967"
|
||||
width="15"
|
||||
height="15"
|
||||
>
|
||||
<path
|
||||
d="M512 46.208a42.666667 42.666667 0 0 1 4.992 85.077333L512 131.541333H174.208a42.666667 42.666667 0 0 0-42.368 37.717334l-0.298667 4.949333v487.850667L307.2 501.12a88.874667 88.874667 0 0 1 112.042667-6.570667l5.845333 4.608 150.442667 128.896 101.973333-101.888a88.874667 88.874667 0 0 1 110.122667-12.373333l6.058666 4.138667 104.832 78.592V512a42.666667 42.666667 0 0 1 85.077334-4.992l0.298666 4.992v342.698667a128 128 0 0 1-120.490666 127.786666l-7.509334 0.213334H174.208a128 128 0 0 1-127.786667-120.490667l-0.213333-7.509333V174.208a128 128 0 0 1 120.490667-127.786667l7.509333-0.213333H512zM366.378667 563.2l-1.536 0.853333-233.301334 213.76v76.885334a42.666667 42.666667 0 0 0 37.717334 42.368l4.949333 0.298666H855.893333a42.666667 42.666667 0 0 0 42.368-37.717333l0.298667-4.949333v-151.808l-3.285333-2.090667-152.789334-114.602667a3.541333 3.541333 0 0 0-3.2-0.554666l-1.450666 0.853333-97.28 97.28 76.970666 66.048a42.666667 42.666667 0 0 1-51.2 68.010667l-4.309333-3.2-292.437333-250.666667a3.541333 3.541333 0 0 0-3.2-0.768z m415.829333-516.992a42.666667 42.666667 0 0 1 42.410667 37.717333l0.256 4.949334v96h96a42.666667 42.666667 0 0 1 4.992 85.077333l-4.992 0.256h-96v96a42.666667 42.666667 0 0 1-85.034667 4.992l-0.298667-4.992v-96h-96a42.666667 42.666667 0 0 1-4.949333-85.034667l4.949333-0.298666h96v-96a42.666667 42.666667 0 0 1 42.666667-42.666667z"
|
||||
fill="#ffffff"
|
||||
p-id="1968"
|
||||
></path>
|
||||
</svg>
|
||||
</b> -->
|
||||
<!-- <b class="MaxBtn" @click="MTxtTable(item, index)" style="background-color: #e07404; right: 0px">
|
||||
<i class="el-icon-document-add"></i>
|
||||
</b> -->
|
||||
<b
|
||||
class="MaxBtn"
|
||||
@click="MTxtDelet(item, index)"
|
||||
style="background-color: #bc1a13; right: 0px"
|
||||
v-if="item.p_main_img_id"
|
||||
>
|
||||
<i class="el-icon-delete"></i>
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 20px" v-if="Art_Doi == undefined"></div>
|
||||
<div style="margin: 20px 0 0 0; text-align: center; padding-bottom: 30px" v-if="Art_Doi != undefined">
|
||||
<el-button icon="el-icon-finished" type="primary" style="width: 350px" @click="pushOnline()"> Push Online </el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="right-side"
|
||||
style="
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 17vh;
|
||||
bottom: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
||||
border-radius: 4px;
|
||||
"
|
||||
>
|
||||
<p style="padding: 10px 10px; box-sizing: border-box; font-weight: bold">
|
||||
Unfettered area
|
||||
<b class="MaxBtn" @click="MTxtPic()" style="background-color: #13bc20; right: 40px; top: 5px">
|
||||
<svg
|
||||
t="1684978324047"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1967"
|
||||
width="15"
|
||||
height="15"
|
||||
>
|
||||
<path
|
||||
d="M512 46.208a42.666667 42.666667 0 0 1 4.992 85.077333L512 131.541333H174.208a42.666667 42.666667 0 0 0-42.368 37.717334l-0.298667 4.949333v487.850667L307.2 501.12a88.874667 88.874667 0 0 1 112.042667-6.570667l5.845333 4.608 150.442667 128.896 101.973333-101.888a88.874667 88.874667 0 0 1 110.122667-12.373333l6.058666 4.138667 104.832 78.592V512a42.666667 42.666667 0 0 1 85.077334-4.992l0.298666 4.992v342.698667a128 128 0 0 1-120.490666 127.786666l-7.509334 0.213334H174.208a128 128 0 0 1-127.786667-120.490667l-0.213333-7.509333V174.208a128 128 0 0 1 120.490667-127.786667l7.509333-0.213333H512zM366.378667 563.2l-1.536 0.853333-233.301334 213.76v76.885334a42.666667 42.666667 0 0 0 37.717334 42.368l4.949333 0.298666H855.893333a42.666667 42.666667 0 0 0 42.368-37.717333l0.298667-4.949333v-151.808l-3.285333-2.090667-152.789334-114.602667a3.541333 3.541333 0 0 0-3.2-0.554666l-1.450666 0.853333-97.28 97.28 76.970666 66.048a42.666667 42.666667 0 0 1-51.2 68.010667l-4.309333-3.2-292.437333-250.666667a3.541333 3.541333 0 0 0-3.2-0.768z m415.829333-516.992a42.666667 42.666667 0 0 1 42.410667 37.717333l0.256 4.949334v96h96a42.666667 42.666667 0 0 1 4.992 85.077333l-4.992 0.256h-96v96a42.666667 42.666667 0 0 1-85.034667 4.992l-0.298667-4.992v-96h-96a42.666667 42.666667 0 0 1-4.949333-85.034667l4.949333-0.298666h96v-96a42.666667 42.666667 0 0 1 42.666667-42.666667z"
|
||||
fill="#ffffff"
|
||||
p-id="1968"
|
||||
></path>
|
||||
</svg> </b
|
||||
><b class="MaxBtn" @click="MTxtTable()" style="background-color: #e07404; right: 0px; top: 5px">
|
||||
<i class="el-icon-document-add"></i>
|
||||
</b>
|
||||
</p>
|
||||
<div class="unfetteredBox">
|
||||
<div
|
||||
:style="item.isHidden ? 'opacity:0.2' : 'opacity:1'"
|
||||
v-for="(item, index) in images"
|
||||
:key="index"
|
||||
class="image"
|
||||
draggable="true"
|
||||
@dragstart="onDragStart($event, item, index)"
|
||||
>
|
||||
<img :src="baseUrl + 'public/mainimg/' + item.content" style="width: 100%; height: 100%; object-fit: cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--修改文本 -->
|
||||
<el-dialog title="Edit Text" :visible.sync="txtVisible" width="800px" :close-on-click-modal="false">
|
||||
<el-form ref="editMes" :model="txtStyle" label-width="1px">
|
||||
<p style="margin: 0 5px 15px 5px; line-height: 18px; font-size: 13px; color: #aaa">{{ exegesis }}</p>
|
||||
<el-form-item label="">
|
||||
<el-input type="textarea" placeholder="Please enter the table content..." v-model="txtStyle.text" autosize> </el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<p class="type_Gbtn" @click="trsanGtp">
|
||||
<i class="el-icon-document-copy" style="margin-right: 5px" v-if="btnDisble"></i>
|
||||
<i class="el-icon-loading" style="margin-right: 5px" v-if="!btnDisble"></i>
|
||||
TMRGTP Proofreading
|
||||
</p>
|
||||
<div class="type_CHar" v-if="txtStyle.ChGtpTxt != ''">
|
||||
<p v-html="txtStyle.ChGtpTxt"></p>
|
||||
<font class="chReple" @click="replceChGpr(item)">Replace</font>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="txtVisible = false"> Cancel </el-button>
|
||||
<el-button type="primary" @click="saveTxt">
|
||||
<i class="el-icon-finished" style="margin-right: 5px"></i>
|
||||
Save
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!--添加/修改图片 -->
|
||||
<el-dialog :title="picStyle.visiTitle" :visible.sync="pictVisible" width="800px" :close-on-click-modal="false">
|
||||
<el-form ref="editMes" :model="picStyle" label-width="150px">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
<font style="color: #f56c6c; margin-right: 5px">*</font>
|
||||
Picture :
|
||||
</span>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="'/api/api/Production/up_mainimg_file'"
|
||||
:show-file-list="false"
|
||||
name="mainimg"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:on-error="handleAvatarError"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img v-if="picStyle.imageUrl" :src="picStyle.imageUrl" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="Bottom Title :">
|
||||
<el-input placeholder="Please enter the table title..." v-model="picStyle.titleBot">
|
||||
</el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="Picture Describe :">
|
||||
<el-input placeholder="Please enter the table describe..." v-model="picStyle.note" type="textarea" :rows="3">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<p style="margin: 20px 0; text-align: right">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
@click="
|
||||
picStyle.picUrl = '';
|
||||
picStyle.titleBot = '';
|
||||
picStyle.note = '';
|
||||
picStyle.imageUrl = '';
|
||||
"
|
||||
>
|
||||
<i class="el-icon-refresh" style="margin-right: 5px"></i>Empty
|
||||
</el-button>
|
||||
</p>
|
||||
<div class="lineStyle" v-if="picStyle.picUrl != ''">
|
||||
<div>
|
||||
<span class="title" style="margin-left: 25px">Picture Width :</span>
|
||||
<el-input v-model="picStyle.width" style="width: 120px">
|
||||
<template slot="append">px</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 20px" v-if="picStyle.picUrl != ''">
|
||||
<div style="text-align: center">
|
||||
<img :src="baseUrl + 'public/mainimg/' + picStyle.picUrl" :style="'width:' + picStyle.width + 'px'" />
|
||||
</div>
|
||||
<p style="text-align: center; margin: 10px 0 15px 0; font-size: 12px; color: #006699">
|
||||
<b>{{ picStyle.titleBot }}</b>
|
||||
</p>
|
||||
<p
|
||||
style="text-align: center; margin: 10px auto 0; font-size: 12px; line-height: 22px"
|
||||
:style="'width:' + picStyle.width + 'px'"
|
||||
v-html="picStyle.note"
|
||||
></p>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer" v-if="picStyle.picUrl != ''">
|
||||
<el-button @click="pictVisible = false"> Cancel </el-button>
|
||||
<el-button type="primary" @click="savePic">
|
||||
<i class="el-icon-finished" style="margin-right: 5px"></i>
|
||||
Save Picture
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 添加表格 -->
|
||||
<el-dialog title="Insert Table" :visible.sync="threeVisible" width="1200px" :close-on-click-modal="false" >
|
||||
<el-form ref="editMes" :model="lineStyle" label-width="115px">
|
||||
<el-form-item label="Top Title :">
|
||||
<el-input placeholder="Please enter the table title..." v-model="lineStyle.titleTop"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Word">
|
||||
<span slot="label">
|
||||
<font style="color: #f56c6c; margin-right: 5px">*</font>
|
||||
Content :
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
<common-table ref="commonTable" style="margin-left: -115px;" :lineStyle="lineStyle"></common-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="Bottom Title :">
|
||||
<el-input placeholder="Please enter the table title..." v-model="lineStyle.titleBot"> </el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<p style="margin: 20px 0; text-align: right">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
@click="
|
||||
lineStyle.textarea = '';
|
||||
lineStyle.titleTop = '';
|
||||
lineStyle.titleBot = '';
|
||||
lineTable = [];
|
||||
"
|
||||
>
|
||||
<i class="el-icon-refresh" style="margin-right: 5px"></i>Empty
|
||||
</el-button>
|
||||
<el-button type="primary" plain @click="CopyExcelToTable">
|
||||
<i class="el-icon-sort" style="margin-right: 5px"></i>Generate Table
|
||||
</el-button>
|
||||
</p>
|
||||
<div class="lineStyle" v-if="lineTable.length != 0">
|
||||
<div>
|
||||
<span class="title">Table All Width :</span>
|
||||
<el-input v-model="lineStyle.tabwith" style="width: 120px">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(item, index) in lineStyle.arrwith" class="styArry">
|
||||
<span class="title"
|
||||
>Column <b style="color: #006699">{{ index + 1 }}</b> :</span
|
||||
>
|
||||
<el-input v-model="lineStyle.arrwith[index]" style="width: 100px">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveLine" v-if="lineTable.length != 0">
|
||||
<i class="el-icon-finished" style="margin-right: 5px"></i>
|
||||
Save Table
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { del } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
p_main_img_id: 157,
|
||||
p_article_id: 2141,
|
||||
p_main_id: 101853,
|
||||
pre_id: 0,
|
||||
width: 500,
|
||||
content: '20240906/7c4cfd8f431cddf05f33634d4ee2cdca.jpg',
|
||||
note: 'Figure 1 Oracle bone inscriptions of YANG',
|
||||
ctime: 0,
|
||||
state: 0
|
||||
}
|
||||
],
|
||||
baseUrl: this.Common.baseUrl,
|
||||
baseUrl: 'https://submission.tmrjournals.com/',
|
||||
mediaUrl: this.Common.mediaUrl,
|
||||
Art_Id: this.$route.query.id,
|
||||
Art_Doi: this.$route.query.doi,
|
||||
Art_web_Id: this.$route.query.artID,
|
||||
Art_P_Id: '',
|
||||
btnDisble: true,
|
||||
detailTitle: '',
|
||||
Main_List: [],
|
||||
txtStyle: {
|
||||
text: '',
|
||||
ChGtpTxt: ''
|
||||
},
|
||||
txtVisible: false,
|
||||
lineStyle: {
|
||||
titleTop: '',
|
||||
titleBot: '',
|
||||
textarea: '',
|
||||
tableData: [],
|
||||
tabwith: '100',
|
||||
arrwith: []
|
||||
},
|
||||
lineTable: [],
|
||||
threeVisible: false,
|
||||
picStyle: {
|
||||
titleBot: '',
|
||||
note: '',
|
||||
// picUrl: 'https://www.tmrjournals.cn/public/articleHTML/TMR/TMR20230213002/images/alternativeImage/TMR20230213002-F004.jpg',
|
||||
picUrl: '',
|
||||
imageUrl: '',
|
||||
width: '500'
|
||||
},
|
||||
pictVisible: false,
|
||||
typesettingType: 1,
|
||||
exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!"
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getDate();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onDragStart(event, image, index) {
|
||||
event.dataTransfer.setData('image', JSON.stringify({ ...image, isNewReformat: true }));
|
||||
event.dataTransfer.setData('imageIndex', index);
|
||||
},
|
||||
onDrop(event, index) {
|
||||
console.log('index at line 297:', index);
|
||||
const draggedImage = JSON.parse(event.dataTransfer.getData('image'));
|
||||
const draggedImageIndex = JSON.parse(event.dataTransfer.getData('imageIndex'));
|
||||
console.log('draggedImage at line 298:', draggedImage);
|
||||
this.Main_List.splice(index, 0, draggedImage);
|
||||
this.images[draggedImageIndex].isHidden = true;
|
||||
},
|
||||
// 获取数据
|
||||
getDate() {
|
||||
let urlLInk = '';
|
||||
let urlTask = {};
|
||||
if (this.Art_Id != undefined) {
|
||||
urlLInk = 'api/Production/getProductionMains';
|
||||
urlTask.p_article_id = this.Art_Id;
|
||||
}
|
||||
// if (this.Art_Doi != undefined) {
|
||||
// urlLInk = 'api/Production/getProductionMainsByDoi';
|
||||
// urlTask.doi = this.Art_Doi;
|
||||
// }
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
|
||||
// 获取文章信息
|
||||
this.$api
|
||||
.post(urlLInk, urlTask)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.detailTitle = res.data.production.title;
|
||||
this.Art_P_Id = res.data.production.p_article_id;
|
||||
this.Main_List = res.data.mains;
|
||||
for (let i = 0; i < this.Main_List.length; i++) {
|
||||
this.Main_List[i].text = this.Main_List[i].content;
|
||||
this.Main_List[i].getnum = 0;
|
||||
}
|
||||
loading.close();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
loading.close();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
loading.close();
|
||||
});
|
||||
},
|
||||
|
||||
// 修改段落/图片
|
||||
MTxtEdit(val, num) {
|
||||
this.picStyle = JSON.parse(JSON.stringify(val));
|
||||
this.picStyle.picUrl = this.picStyle.content;
|
||||
this.picStyle.imageUrl = this.baseUrl + 'public/mainimg/' + this.picStyle.content;
|
||||
this.picStyle.visiTitle = 'Edit Picture';
|
||||
this.pictVisible = true;
|
||||
},
|
||||
|
||||
// 转化为gpt标准格式
|
||||
trsanGtp() {
|
||||
if (this.btnDisble) {
|
||||
this.btnDisble = false;
|
||||
this.$api
|
||||
.post('api/Production/mainGptcheck', {
|
||||
p_main_id: this.txtStyle.p_main_id
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.txtStyle.ChGtpTxt = res.data.content;
|
||||
this.btnDisble = true;
|
||||
// this.$forceUpdate()
|
||||
this.$message.success('Converting success!');
|
||||
} else {
|
||||
this.btnDisble = true;
|
||||
this.$message.error('Converting fail!');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.btnDisble = true;
|
||||
this.$message.error('Converting fail!');
|
||||
});
|
||||
} else {
|
||||
this.$message.warning('Converting, please wait!');
|
||||
}
|
||||
},
|
||||
|
||||
// 替换Gtp生成的内容
|
||||
replceChGpr(val) {
|
||||
this.txtStyle.text = JSON.parse(JSON.stringify(this.txtStyle.ChGtpTxt));
|
||||
},
|
||||
|
||||
// 确定保存段落修改
|
||||
saveTxt() {
|
||||
this.$api
|
||||
.post('api/Production/editProductionMain', {
|
||||
p_main_id: this.txtStyle.p_main_id,
|
||||
content: this.txtStyle.text
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully edit text!');
|
||||
this.txtVisible = false;
|
||||
this.getDate();
|
||||
// this.Main_List[this.txtStyle.index].text = JSON.parse(JSON.stringify(this.txtStyle.text))
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
},
|
||||
|
||||
// 图片段落
|
||||
MTxtPic(val, num) {
|
||||
this.picStyle.pre_type = 'img';
|
||||
// this.picStyle.body = val.p_main_img_id;
|
||||
|
||||
this.picStyle.p_article_id = this.Art_P_Id;
|
||||
this.picStyle.titleBot = '';
|
||||
this.picStyle.note = '';
|
||||
this.picStyle.width = '500';
|
||||
this.picStyle.picUrl = '';
|
||||
this.picStyle.imageUrl = '';
|
||||
this.picStyle.visiTitle = 'Insert Picture Backward';
|
||||
this.pictVisible = true;
|
||||
},
|
||||
|
||||
// 确定保存图片
|
||||
savePic() {
|
||||
this.picStyle.content = this.picStyle.picUrl;
|
||||
this.images.push(this.picStyle);
|
||||
this.pictVisible = false;
|
||||
return false;
|
||||
|
||||
//要走接口
|
||||
if (this.picStyle.note == '') {
|
||||
this.$message.error('Please fill in the picture describe!');
|
||||
return;
|
||||
}
|
||||
|
||||
this.picStyle.content = this.picStyle.picUrl;
|
||||
|
||||
if (this.picStyle.visiTitle == 'Edit Picture') {
|
||||
this.$api
|
||||
.post('api/Production/editProductionMainImg', this.picStyle)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully edit image!');
|
||||
this.pictVisible = false;
|
||||
this.getDate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
} else {
|
||||
this.$api
|
||||
.post('api/Production/addProductionMainImg', this.picStyle)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully added image!');
|
||||
this.pictVisible = false;
|
||||
this.getDate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
}
|
||||
},
|
||||
async removeEvent(row) {
|
||||
// const type = await VXETable.modal.confirm('您确定要删除该数据?')
|
||||
const $table = this.$refs.xTable;
|
||||
// if (type === 'confirm') {
|
||||
$table.remove(row);
|
||||
// }
|
||||
},
|
||||
async insertEvent(row) {
|
||||
const $table = this.$refs.xTable;
|
||||
const record = {};
|
||||
const { row: newRow } = await $table.insertAt(record, row);
|
||||
await $table.setEditCell(newRow, 'name');
|
||||
},
|
||||
// 表格段落
|
||||
MTxtTable(val, num) {
|
||||
// this.lineStyle.p_main_id = val.p_main_id;
|
||||
this.lineStyle.textarea = '';
|
||||
this.lineStyle.titleCon = '';
|
||||
this.lineTable = [];
|
||||
|
||||
this.threeVisible = true;
|
||||
this.typesettingType = '1';
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 表格转化
|
||||
CopyExcelToTable() {
|
||||
if (this.lineStyle.textarea == '') {
|
||||
this.$message.error('Please fill in the table content!');
|
||||
return;
|
||||
}
|
||||
console.log(this.lineStyle.textarea);
|
||||
let txtRows = this.lineStyle.textarea.split('\n');
|
||||
let txtColum = [];
|
||||
for (let i = 0; i < txtRows.length; i++) {
|
||||
if (txtRows[i] != '') {
|
||||
let columns = txtRows[i].split('\t');
|
||||
let dataone = [];
|
||||
for (let j = 0; j < columns.length; j++) {
|
||||
dataone.push(columns[j]);
|
||||
}
|
||||
txtColum.push(dataone);
|
||||
}
|
||||
}
|
||||
let arrwithNumer = Math.floor(100 / txtColum[0].length) - 2;
|
||||
this.lineStyle.arrwith = [];
|
||||
for (let i = 0; i < txtColum[0].length; i++) {
|
||||
this.lineStyle.arrwith.push(arrwithNumer);
|
||||
}
|
||||
this.lineTable = txtColum;
|
||||
},
|
||||
|
||||
// 确定保存表格
|
||||
saveLine() {
|
||||
let dataTable = '';
|
||||
for (let i = 0; i < this.lineTable.length; i++) {
|
||||
let ArryDr = '';
|
||||
let listHNem = '';
|
||||
for (let j = 0; j < this.lineTable[i].length; j++) {
|
||||
let ArrHtml =
|
||||
'<div style="width:' +
|
||||
this.lineStyle.arrwith[j] +
|
||||
'%;line-height: 22px;vertical-align: middle;display: inline-block;padding: 0 1%;font-size: 14px;color: #606266;word-wrap: break-word;word-break: normal;">' +
|
||||
this.lineTable[i][j] +
|
||||
'</div>';
|
||||
ArryDr = ArryDr + ArrHtml;
|
||||
}
|
||||
if (i == 0) {
|
||||
listHNem =
|
||||
'<div style="display: flex;border-top: 2px solid #333333;border-bottom: 1px solid #333333;padding: 10px 0;font-weight: bold;margin-bottom: 20px;">' +
|
||||
ArryDr +
|
||||
'</div>';
|
||||
} else if (i == this.lineTable.length - 1) {
|
||||
listHNem = '<div style="display: flex;border-bottom: 2px solid #333333;padding:0 0 20px 0;">' + ArryDr + '</div>';
|
||||
ArryDr = ArryDr + listHNem;
|
||||
} else {
|
||||
listHNem = '<div style="display: flex;padding:20px 0;">' + ArryDr + '</div>';
|
||||
}
|
||||
dataTable = dataTable + listHNem;
|
||||
}
|
||||
dataTable = '<div style="width:' + this.lineStyle.tabwith + '%">' + dataTable + '</div>';
|
||||
if (this.lineStyle.titleTop != '') {
|
||||
dataTable =
|
||||
'<p style="text-align: center;margin: 0 0 10px 0;font-size: 12px;color: #006699;"><b>' +
|
||||
this.lineStyle.titleTop +
|
||||
'</b></p>' +
|
||||
dataTable;
|
||||
}
|
||||
if (this.lineStyle.titleBot != '') {
|
||||
dataTable =
|
||||
dataTable + '<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">' + this.lineStyle.titleBot + '</p>';
|
||||
}
|
||||
console.log(dataTable);
|
||||
},
|
||||
|
||||
// 删除段落/图片
|
||||
MTxtDelet(val, index) {
|
||||
var imageIndex = this.images.findIndex((e) => e.p_main_img_id == val.p_main_img_id);
|
||||
if (imageIndex > -1) {
|
||||
delete this.images[imageIndex].isHidden;
|
||||
} else {
|
||||
this.images.push(val);
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.Main_List.splice(index, 1);
|
||||
console.log('this.images.push at line 654:', this.images);
|
||||
// this.$api
|
||||
// .post('api/Production/delProductionMainImg', {
|
||||
// p_main_img_id: val.p_main_img_id
|
||||
// })
|
||||
// .then((res) => {
|
||||
// if (res.code == 0) {
|
||||
// this.$message.success('Successfully deleted!');
|
||||
// this.getDate();
|
||||
// // this.Main_List.splice(num, 1);
|
||||
// } else {
|
||||
// this.$message.error(res.msg);
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// this.$message.error(err);
|
||||
// });
|
||||
},
|
||||
|
||||
// 推送
|
||||
pushOnline() {
|
||||
// 二次确认
|
||||
this.$confirm('Are you sure you want to push it to the official website?', 'Tips', {
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
this.$api
|
||||
.post('api/Production/pushMainToWeb', {
|
||||
article_id: this.Art_web_Id,
|
||||
p_article_id: this.Art_P_Id
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully push!');
|
||||
this.getDate();
|
||||
if (this.Art_Doi != undefined) {
|
||||
this.$router.push({
|
||||
path: 'comArtHtmlEdit',
|
||||
query: {
|
||||
artID: this.Art_web_Id
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
handleAvatarSuccess(res, file) {
|
||||
if (res.code == 0) {
|
||||
this.picStyle.picUrl = res.upurl;
|
||||
this.$forceUpdate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
this.picStyle.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
handleAvatarError(res, file) {},
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 1;
|
||||
if (!isLt2M) {
|
||||
this.$message.error('Picture size cannot exceed 1M!');
|
||||
}
|
||||
return isLt2M;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lineStyle {
|
||||
border-top: 1px solid #0066994d;
|
||||
padding: 20px 20px 40px 20px;
|
||||
}
|
||||
|
||||
.lineStyle > div {
|
||||
}
|
||||
|
||||
.lineStyle > div span.title {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin: 0px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.lineStyle > div font.mark {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.lineStyle .styArry {
|
||||
display: inline-block;
|
||||
margin: 15px 40px 0 0;
|
||||
}
|
||||
|
||||
.lineStyle .styArry:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.lineAll {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.lineAll .lineTit {
|
||||
padding: 0 0 20px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.lineAll .lineTit:nth-child(1) {
|
||||
border-top: 2px solid #333333;
|
||||
border-bottom: 1px solid #333333;
|
||||
padding: 10px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lineAll .lineTit:nth-child(2) {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.lineAll .lineTit:nth-last-child(1) {
|
||||
border-bottom: 2px solid #333333;
|
||||
}
|
||||
|
||||
.lineAll .lineTit > div {
|
||||
line-height: 22px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding: 0 1%;
|
||||
}
|
||||
|
||||
.man_Title {
|
||||
background-color: #fff;
|
||||
margin: 0 0 10px 0;
|
||||
border-bottom: 1px solid #dde1eb;
|
||||
box-shadow: 0 5px 5px -2px rgb(134 134 134);
|
||||
padding: 12px 25px 8px 25px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.man_Title button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.type_MTxt {
|
||||
background-color: #fff;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.type_MTxt > div {
|
||||
position: relative;
|
||||
padding: 8px 15px;
|
||||
min-height: 22px;
|
||||
border: 2px dashed #fff;
|
||||
border-radius: 5px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.type_MTxt > .imgBox:hover {
|
||||
background-color: rgb(0 102 153 / 10%);
|
||||
border: 2px dashed rgb(0 102 153 / 50%);
|
||||
}
|
||||
|
||||
.type_MTxt > div > p {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.type_MTxt > .imgBox .chNumer {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -1px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
background-color: rgb(0 102 153 / 85%);
|
||||
color: #fff;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.type_MTxt > div .MaxPicture {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.type_MTxt > div .MaxPicture > img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.type_MTxt > div .MaxPicture > font {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.MaxBtn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -1px;
|
||||
color: #fff;
|
||||
border-radius: 50px;
|
||||
font-size: 15.5px;
|
||||
padding: 6px 7px;
|
||||
display: none;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.MaxBtn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.MaxBtn:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.type_Gbtn {
|
||||
color: #fff;
|
||||
border-color: #006699;
|
||||
background: #006699;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.type_Gbtn:hover {
|
||||
box-shadow: 0 4px 14px rgb(0 102 153 / 30%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.type_CHar {
|
||||
position: relative;
|
||||
border-left: 4px solid rgba(0 102 153 / 20%);
|
||||
border-radius: 5px;
|
||||
padding: 20px 25px 15px 20px;
|
||||
background-color: #fff;
|
||||
margin: 20px 0 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
box-shadow: 0 1px 10px rgb(0 102 153 / 20%);
|
||||
}
|
||||
|
||||
.type_CHar .chReple {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 1px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
background-color: rgb(223 109 11);
|
||||
opacity: 0.85;
|
||||
color: #fff;
|
||||
padding: 1px 10px;
|
||||
}
|
||||
|
||||
.type_CHar .chReple:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.avatar-uploader_small {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar-uploader_small .el-upload {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.avatar-uploader_small .avatar-uploader-icon {
|
||||
line-height: 80px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
}
|
||||
.unfetteredBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unfetteredBox .image {
|
||||
margin-top: 10px;
|
||||
box-shadow: rgba(16, 17, 19, 0.5) 0px 1px 3px;
|
||||
margin-right: 10px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: 4px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user