1
This commit is contained in:
徐哼唧L
759
src/components/page/comArtHtmlEdit.vue
Normal file
759
src/components/page/comArtHtmlEdit.vue
Normal file
@@ -0,0 +1,759 @@
|
||||
<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 v-for="(item,index) in Main_List">
|
||||
<p v-html="item.text" v-if="item.width==0"></p>
|
||||
<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>
|
||||
<b class="MaxBtn" @click="MTxtEdit(item,index)" style="background-color: #006699;right: 120px;">
|
||||
<i class="el-icon-edit"></i>
|
||||
</b>
|
||||
<b class="MaxBtn" @click="MTxtAdtxt(item,index)" style="background-color: #1c0099;right: 80px;">
|
||||
<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;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:40px;">
|
||||
<i class="el-icon-document-add"></i>
|
||||
</b> -->
|
||||
<b class="MaxBtn" @click="MTxtDelet(item,index)" style="background-color: #bc1a13;right: 0px;">
|
||||
<i class="el-icon-delete"></i>
|
||||
</b>
|
||||
</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 in lineTable" class="lineTit">
|
||||
<div v-for="(eqrt,iner) in item" :style="'width:'+lineStyle.arrwith[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>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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'
|
||||
},
|
||||
pictVisible: false,
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getDate()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 获取数据
|
||||
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) {
|
||||
if (val.width == 0) {
|
||||
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.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>
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user