964 lines
33 KiB
Vue
964 lines
33 KiB
Vue
<template>
|
|
<div style="height: 98%;">
|
|
<div class="crumbs">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item>
|
|
<i class="el-icon-document-copy"></i> Artcile Html
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="container" style="height: 97%;min-width: 1000px;background-color: #fafafa;padding: 10px 0 0 0;">
|
|
<h3 class="man_Title">
|
|
{{detailTitle}}
|
|
</h3>
|
|
<div class="type_MTxt">
|
|
<div class="type_MTxt_item" v-for="(item,index) in Main_List" :key="index">
|
|
<div :class="[item.is_title == 1 ? 'Ptitle' : '']">
|
|
<p v-html="item.text" v-if="item.width==0"></p>
|
|
</div>
|
|
<p v-if="item.width!=0" 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>
|
|
<div class="tools">
|
|
<b class="MaxBtn" @click="MTxtEdit(item,index)" style="background-color: #006699;">
|
|
<i class="el-icon-edit"></i>
|
|
</b>
|
|
<!-- 批量添加 -->
|
|
<b class="MaxBtn" @click="showMultAdd(item,index)" style="background-color: #bc9feb;">
|
|
<svg t="1689577244398" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3063" width="16" height="16"><path d="M793.343512 870.449643H76.775179c-42.482265 0-76.775179-34.292913-76.775179-76.775179V77.106131C0 34.623865 34.292913 0.330952 76.775179 0.330952h537.42625c14.331367 0 25.591726 11.26036 25.591726 25.591726s-11.26036 25.591726-25.591726 25.591727H76.775179c-14.331367 0-25.591726 11.26036-25.591727 25.591726v716.568333c0 14.331367 11.26036 25.591726 25.591727 25.591726h716.568333c14.331367 0 25.591726-11.26036 25.591726-25.591726v-281.508988c0-14.331367 11.26036-25.591726 25.591726-25.591726s25.591726 11.26036 25.591727 25.591726v281.508988c0 42.482265-34.292913 76.775179-76.775179 76.775179z" fill="#ffffff" p-id="3064"></path><path d="M946.893869 1024H281.508988c-14.331367 0-25.591726-11.26036-25.591726-25.591726s11.26036-25.591726 25.591726-25.591726h665.384881c14.331367 0 25.591726-11.26036 25.591726-25.591727V435.390298c0-14.331367 11.26036-25.591726 25.591727-25.591727s25.591726 11.26036 25.591726 25.591727v511.834523c0 42.482265-34.292913 76.775179-76.775179 76.775179zM485.219129 566.93177c-20.473381 0-39.411258-8.189352-54.25446-22.520719L238.003054 350.937601c-10.23669-10.23669-10.23669-26.103561 0-36.340251s26.103561-10.23669 36.340251 0l193.47345 193.47345c5.118345 5.118345 11.26036 7.677518 18.426043 7.677518 6.653849 0 13.307698-3.071007 18.426043-8.189353l475.494272-499.550495c9.724856-10.23669 26.103561-10.748525 36.340251-1.023669 10.23669 9.724856 10.748525 26.103561 1.02367 36.340251L541.009092 542.875548c-14.331367 15.355036-33.781079 23.544388-54.766294 24.056222h-1.023669z" fill="#ffffff" p-id="3065"></path></svg>
|
|
</b>
|
|
<b class="MaxBtn" @click="MTxtAdtxt(item,index)" style="background-color: #1c0099;">
|
|
<svg t="1685694820833" class="icon" viewBox="0 0 1025 1024" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" p-id="10080" width="15" height="15">
|
|
<path
|
|
d="M978.823529 843.294118 873.411765 843.294118 873.411765 978.823529C873.411765 1003.760941 853.172706 1024 828.235294 1024 803.297882 1024 783.058824 1003.760941 783.058824 978.823529L783.058824 843.294118 677.647059 843.294118C652.709647 843.294118 632.470588 823.055059 632.470588 798.117647 632.470588 773.150118 652.709647 752.941176 677.647059 752.941176L783.058824 752.941176 783.058824 647.529412C783.058824 622.561882 803.297882 602.352941 828.235294 602.352941 853.172706 602.352941 873.411765 622.561882 873.411765 647.529412L873.411765 752.941176 978.823529 752.941176C1003.760941 752.941176 1024 773.150118 1024 798.117647 1024 823.055059 1003.760941 843.294118 978.823529 843.294118ZM647.529412 692.705882 225.882353 692.705882C200.944941 692.705882 180.705882 672.466824 180.705882 647.529412 180.705882 622.561882 200.944941 602.352941 225.882353 602.352941L647.529412 602.352941C672.466824 602.352941 692.705882 622.561882 692.705882 647.529412 692.705882 672.466824 672.466824 692.705882 647.529412 692.705882ZM647.529412 331.294118 225.882353 331.294118C200.944941 331.294118 180.705882 311.055059 180.705882 286.117647 180.705882 261.150118 200.944941 240.911059 225.882353 240.911059L647.529412 240.911059C672.466824 240.911059 692.705882 261.150118 692.705882 286.117647 692.705882 311.055059 672.466824 331.294118 647.529412 331.294118ZM647.529412 512 225.882353 512C200.944941 512 180.705882 491.760941 180.705882 466.823529 180.705882 441.856 200.944941 421.647059 225.882353 421.647059L647.529412 421.647059C672.466824 421.647059 692.705882 441.856 692.705882 466.823529 692.705882 491.760941 672.466824 512 647.529412 512ZM828.235294 542.117647C803.297882 542.117647 783.058824 521.878588 783.058824 496.911059L783.058824 90.352941 90.352941 90.352941 90.352941 903.529412 647.529412 903.529412C672.466824 903.529412 692.705882 923.738353 692.705882 948.705882 692.705882 973.643294 672.466824 993.882353 647.529412 993.882353L45.176471 993.882353C20.239059 993.882353 0 973.643294 0 948.705882L0 45.176471C0 20.239059 20.239059 0 45.176471 0L828.235294 0C853.172706 0 873.411765 20.239059 873.411765 45.176471L873.411765 496.911059C873.411765 521.878588 853.172706 542.117647 828.235294 542.117647Z"
|
|
fill="#ffffff" p-id="10081"></path>
|
|
</svg>
|
|
</b>
|
|
<b class="MaxBtn" @click="MTxtPic(item,index)" style="background-color: #13bc20;">
|
|
<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="addReturn(item,index)" style="background-color: #f0d22c;">
|
|
<svg t="1689578654755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3402" width="16" height="16"><path d="M350.814815 797.392593c-5.499259 0-10.903704-2.085926-15.075556-6.257778l-113.777778-113.777778c-8.343704-8.343704-8.343704-21.807407 0-30.151111l0.18963-0.18963 113.588148-113.588148c8.343704-8.343704 21.807407-8.343704 30.151111 0s8.343704 21.807407 0 30.151111L267.188148 662.281481l98.702222 98.702223c8.343704 8.343704 8.343704 21.807407 0 30.151111-4.171852 4.171852-9.576296 6.257778-15.075555 6.257778z" p-id="3403" fill="#ffffff"></path><path d="M604.728889 683.614815h-367.881482c-11.757037 0-21.333333-9.576296-21.333333-21.333334s9.576296-21.333333 21.333333-21.333333h367.881482c71.86963 0 130.37037-58.500741 130.37037-130.37037v-208.592593c0-11.757037 9.576296-21.333333 21.333334-21.333333s21.333333 9.576296 21.333333 21.333333v208.592593c0 46.08-18.014815 89.505185-50.820741 122.216296C694.139259 665.6 650.714074 683.614815 604.728889 683.614815z" p-id="3404" fill="#ffffff"></path></svg>
|
|
</b>
|
|
<!-- <b class="MaxBtn" @click="MTxtTable(item,index)" style="background-color: #e07404;right:40px;">
|
|
<i class="el-icon-document-add"></i>
|
|
</b> -->
|
|
<b class="MaxBtn" @click="MTxtDelet(item,index)" style="background-color: #bc1a13;">
|
|
<i class="el-icon-delete"></i>
|
|
</b>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="height: 20px;"></div>
|
|
</div>
|
|
|
|
<!--修改/添加文本 -->
|
|
<el-dialog :title="txtStyle.visiTitle" :visible.sync="txtVisible" width="800px" :close-on-click-modal="false">
|
|
<el-form ref="editMes" :model="txtStyle" label-width="1px">
|
|
<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>
|
|
<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="baseUrl+'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="1000px" :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>
|
|
<span slot="label">
|
|
<font style="color: #f56c6c;margin-right: 5px;">*</font>
|
|
Content :
|
|
</span>
|
|
<el-input type="textarea" :rows="5" placeholder="Please enter the table content..."
|
|
v-model="lineStyle.textarea">
|
|
</el-input>
|
|
</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>
|
|
<div style="padding: 0 20px;" v-if="lineTable.length!=0">
|
|
<p style="text-align: center;margin: 0 0 10px 0;font-size: 12px;color: #006699;">
|
|
<b>{{lineStyle.titleTop}}</b>
|
|
</p>
|
|
<div class="lineAll" :style="'width:'+lineStyle.tabwith+'%'">
|
|
<div v-for="(item, index) in lineTable" class="lineTit" :key="index">
|
|
<div v-for="(eqrt,iner) in item" :style="'width:'+lineStyle.arrwith[iner]+'%'" :key="iner">
|
|
{{eqrt}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">{{lineStyle.titleBot}}</p>
|
|
</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>
|
|
<el-dialog ref="multAdd" title="Html layOut" z-index="1000"
|
|
:visible.sync="multAddVisible"
|
|
width="800px">
|
|
<div>
|
|
<div class="logtips">
|
|
<p >Paste the contents of the wold file here, delete the carriage return at the end and click "Submit".</p>
|
|
</div>
|
|
<div class="istitle" v-if="saveMode == 'edit'">
|
|
<span>Title set: </span>
|
|
<el-radio-group v-model="multAdd.isTitle">
|
|
<el-radio :label="0">Is not title</el-radio>
|
|
<el-radio :label="1">Is title</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<vue-ueditor-wrap v-model="wordText" :config="editorConfig" editor-id="editor-demo-01"></vue-ueditor-wrap>
|
|
</div>
|
|
<span slot="footer">
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="multAddVisible = false">Cancel</el-button>
|
|
<el-button v-if="saveMode == 'mult'" type="primary" @click="saveMultAdd">Add</el-button>
|
|
<el-button v-if="saveMode == 'edit'" type="primary" @click="saveEdit">Save</el-button>
|
|
<el-button v-if="saveMode == 'addOneText'" type="primary" @click="saveAddOne">Add</el-button>
|
|
</span>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VueUeditorWrap from 'vue-ueditor-wrap'; // ES6 Module
|
|
export default {
|
|
data() {
|
|
return {
|
|
baseUrl: this.Common.baseUrl,
|
|
mediaUrl: this.Common.mediaUrl,
|
|
Art_web_Id: this.$route.query.artID,
|
|
detailTitle: '',
|
|
Main_List: [],
|
|
txtStyle: {
|
|
text: '',
|
|
},
|
|
txtVisible: false,
|
|
lineStyle: {
|
|
titleTop: '',
|
|
titleBot: '',
|
|
textarea: '',
|
|
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'
|
|
},
|
|
wordText:'',
|
|
editorConfig: {
|
|
// 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
|
|
UEDITOR_HOME_URL: "/UEditor/",
|
|
// serverUrl: "//ueditor.zhenghaochuan.com/cos",
|
|
serverUrl: "",
|
|
|
|
},
|
|
pictVisible:false,
|
|
multAddVisible:false,
|
|
multAdd:{
|
|
// 批量添加项
|
|
article_id:null,
|
|
pre_id:null,
|
|
|
|
contents:[], // 识别出的word引用数组
|
|
article_main_id:null,
|
|
isTitle:0
|
|
|
|
},
|
|
saveMode:''
|
|
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.getDate()
|
|
},
|
|
components:{
|
|
VueUeditorWrap
|
|
},
|
|
methods: {
|
|
// 添加空白行
|
|
addReturn(item, index){
|
|
this.$api
|
|
.post('api/Production/addWebMainEmpty', {
|
|
'article_id':this.Art_web_Id,
|
|
'pre_id': item.article_main_id
|
|
} ).then((res)=>{
|
|
if (res.code == 0) {
|
|
this.getDate()
|
|
}else{
|
|
this.$message.error(res.msg);
|
|
}
|
|
}).catch(err => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
// 显示批量添加窗口
|
|
showMultAdd(item,index){
|
|
this.multAdd.article_id = this.Art_web_Id;
|
|
this.multAdd.pre_id = item.article_main_id;
|
|
this.multAddVisible = true
|
|
this.saveMode = 'mult'
|
|
// console.log(this.multAdd,'multAdd')
|
|
},
|
|
// 提交批量添加数据
|
|
saveMultAdd(){
|
|
var pp = this.wordText.split('</p>')
|
|
var ss = []
|
|
var re = /<[^>]+>/gi;
|
|
var noP = /<p>/gi;
|
|
// var nbsp = / /gi;
|
|
pp.forEach(element => {
|
|
// element = element.replace(re, "")
|
|
// element = element.replace(nbsp,"")
|
|
element = element.replace(noP,"")
|
|
ss.push(element)
|
|
});
|
|
// 去掉最后一个数据
|
|
console.log(ss[ss.length-1].length)
|
|
if(ss[ss.length-1].length <= 0){
|
|
this.multAdd.contents = ss.slice(0,-1)
|
|
}else{
|
|
this.multAdd.contents = ss
|
|
}
|
|
this.multAdd.contents.length > 0 ? this.wordSubmit() : this.$message.error('Please enter content in the editor before submitting!');
|
|
},
|
|
// 发送后台
|
|
wordSubmit(){
|
|
console.log(this.multAdd.contents)
|
|
this.$api
|
|
.post('api/Production/addWebMains', {
|
|
'article_id': this.multAdd.article_id,
|
|
'pre_id': this.multAdd.pre_id,
|
|
'contents':this.multAdd.contents
|
|
} ).then((res)=>{
|
|
if (res.code == 0) {
|
|
this.multAddVisible = false
|
|
this.multAdd.contents = []
|
|
this.multAdd.pre_id = ''
|
|
this.wordText = ''
|
|
this.saveMode = ''
|
|
this.$message.success('successed!');
|
|
this.getDate()
|
|
}else{
|
|
this.$message.error(res.msg);
|
|
}
|
|
}).catch(err => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
// 编辑文本(新)
|
|
saveEdit(){
|
|
this.$api
|
|
.post('api/Production/editWebMain', {
|
|
'article_main_id': this.multAdd.article_main_id,
|
|
'type': 'content',
|
|
'content': this.wordText,
|
|
'is_title':this.multAdd.isTitle
|
|
})
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('Successfully edit text!')
|
|
this.multAddVisible = false
|
|
this.multAdd.article_main_id = ''
|
|
this.wordText = ''
|
|
this.saveMode = ''
|
|
this.multAdd.isTitle = 0
|
|
this.getDate()
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 添加段落文本（新）
|
|
saveAddOne(){
|
|
this.$api
|
|
.post('api/Production/addWebMain', {
|
|
'article_id':this.Art_web_Id ,
|
|
'pre_id': this.multAdd.pre_id,
|
|
'type': 'content',
|
|
'content': this.wordText,
|
|
})
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('Successfully add text!')
|
|
this.multAddVisible = false
|
|
this.multAdd.pre_id = ''
|
|
this.wordText = ''
|
|
this.saveMode = ''
|
|
this.getDate()
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
// 获取数据
|
|
getDate() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: 'Loading...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
|
|
// 获取文章信息
|
|
this.$api
|
|
.post('api/Production/getWebMains', {
|
|
article_id: this.Art_web_Id
|
|
})
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.detailTitle = res.data.article.title
|
|
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) {
|
|
// console.log(val,'val')
|
|
if (val.width == 0) {
|
|
this.multAdd.article_id = this.Art_web_Id;
|
|
this.multAdd.article_main_id = val.article_main_id;
|
|
this.wordText = val.text
|
|
this.multAddVisible = true
|
|
this.multAdd.isTitle = val.is_title
|
|
this.saveMode = 'edit'
|
|
// 以前的
|
|
// this.txtVisible = true
|
|
// this.txtStyle = JSON.parse(JSON.stringify(val))
|
|
// this.txtStyle.index = num
|
|
// this.txtStyle.visiTitle = 'Edit Text'
|
|
} else {
|
|
this.picStyle = JSON.parse(JSON.stringify(val));
|
|
this.picStyle.type = 'img';
|
|
this.picStyle.picUrl = this.picStyle.content;
|
|
this.picStyle.imageUrl = this.baseUrl + 'public/mainimg/' + this.picStyle.content
|
|
this.picStyle.visiTitle = 'Edit Picture'
|
|
this.pictVisible = true
|
|
}
|
|
},
|
|
|
|
|
|
// 添加段落
|
|
MTxtAdtxt(val, num) {
|
|
this.multAdd.article_id = this.Art_web_Id;
|
|
this.multAdd.pre_id = val.article_main_id;
|
|
this.multAddVisible = true
|
|
this.saveMode = 'addOneText'
|
|
this.wordText = ''
|
|
// this.txtStyle.visiTitle = 'Add Text'
|
|
// this.txtStyle.article_id = this.Art_web_Id;
|
|
// this.txtStyle.pre_id = val.article_main_id;
|
|
// this.txtStyle.type = 'content'
|
|
// this.txtStyle.text = ''
|
|
// this.txtVisible = true
|
|
},
|
|
|
|
|
|
// 确定保存段落修改
|
|
saveTxt() {
|
|
if (this.txtStyle.visiTitle == 'Edit Text') {
|
|
this.$api
|
|
.post('api/Production/editWebMain', {
|
|
article_main_id: this.txtStyle.article_main_id,
|
|
type: 'content',
|
|
content: this.txtStyle.text
|
|
})
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('Successfully edit text!')
|
|
this.txtVisible = false
|
|
this.getDate()
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
} else {
|
|
if (this.txtStyle.text == '') {
|
|
this.$message.error('Please fill in the content!');
|
|
return
|
|
}
|
|
this.txtStyle.content = this.txtStyle.text
|
|
this.$api
|
|
.post('api/Production/addWebMain', this.txtStyle)
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('Successfully add text!')
|
|
this.txtVisible = false
|
|
this.getDate()
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// 图片段落
|
|
MTxtPic(val, num) {
|
|
this.picStyle.type = 'img';
|
|
this.picStyle.pre_id = val.article_main_id;
|
|
this.picStyle.article_id = this.Art_web_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() {
|
|
// let dataImage = ''
|
|
// dataImage = '<div style="text-align: center;"><img src="' + this.baseUrl + 'public/' + this.picStyle
|
|
// .picUrl + '" style="width:' + this.picStyle.width + 'px"></div>'
|
|
// if (this.picStyle.titleBot != '') {
|
|
// dataImage = dataImage +
|
|
// '<p style="text-align: center;margin: 10px 0 15px 0;font-size: 12px;color: #006699;">' +
|
|
// this.lineStyle.titleBot + '</p>'
|
|
// }
|
|
// if (this.picStyle.note != '') {
|
|
// dataImage = dataImage + '<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">' +
|
|
// this.lineStyle.note + '</p>'
|
|
// }
|
|
// console.log(dataImage)
|
|
|
|
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/editWebMain', 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/addWebMain', 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);
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
// 表格段落
|
|
MTxtTable(val, num) {
|
|
this.lineStyle.article_main_id = val.article_main_id;
|
|
this.lineStyle.textarea = '';
|
|
this.lineStyle.titleCon = '';
|
|
this.lineTable = [];
|
|
this.threeVisible = true
|
|
},
|
|
|
|
// 表格转化
|
|
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, num) {
|
|
this.$api
|
|
.post('api/Production/delWebMain', {
|
|
article_main_id: val.article_main_id
|
|
})
|
|
.then(res => {
|
|
if (res.code == 0) {
|
|
this.$message.success('Successfully deleted!')
|
|
this.getDate()
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
|
|
|
|
|
|
|
|
// 上传图片
|
|
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>
|
|
/* 隐藏编辑器底部内容 */
|
|
/deep/ #edui1_bottombar{display: none;}
|
|
/* 编辑器高度 */
|
|
/deep/ #edui1_iframeholder{ height: 260px;}
|
|
.logtips{margin-bottom: 15px; color: #666;}
|
|
.type_MTxt_item .tools{position: absolute; right: 0; top: 0; z-index: 1; width: 280px;}
|
|
.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>div: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>div .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;
|
|
}
|
|
|
|
.type_MTxt>div .MaxBtn { display:inline-block; float: left; margin-left: 15px; text-align: right;
|
|
/* position: absolute;
|
|
right: 0;
|
|
top: -1px; */
|
|
color: #fff;
|
|
border-radius: 50px;
|
|
font-size: 15.5px;
|
|
padding: 6px 7px;
|
|
display: none;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.type_MTxt>div:hover .MaxBtn {
|
|
display: block;
|
|
}
|
|
|
|
.type_MTxt>div .MaxBtn:hover {
|
|
opacity: 1;
|
|
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%);
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
}
|
|
.istitle{margin: 20px 0;}
|
|
.Ptitle{background: rgb(23, 138, 184); padding: 4px; margin: 15px 0;}
|
|
.Ptitle p{margin-bottom: 0 !important; font-weight: bold; color: #fff !important;}
|
|
</style>
|