300 lines
11 KiB
Vue
300 lines
11 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-button size="mini" style="position: absolute;right: 40px;" @click="goEdit">Edit</el-button>
|
|
</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="container" style="height: 97%; min-width: 1000px; background-color: #fafafa; padding: 10px 0 0 0">
|
|
|
|
|
|
<common-word
|
|
:readonly="true"
|
|
v-if="htmlContent"
|
|
ref="commonWord"
|
|
:value="htmlContent"
|
|
:wordStyle="wordStyle"
|
|
style="width: calc(100%); height: calc(100%); "
|
|
:style="`100%`"
|
|
></common-word>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
|
|
export default {
|
|
data() {
|
|
return {
|
|
wordStyle: `
|
|
p {
|
|
position: relative;
|
|
padding: 8px 15px;
|
|
min-height: 22px;
|
|
border: 2px dashed #fff;
|
|
border-radius: 5px;
|
|
color: #606266;
|
|
}
|
|
p {
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.MaxPicture {
|
|
text-align: center;
|
|
}
|
|
|
|
.MaxPicture > img {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.font {
|
|
display: block;
|
|
margin: 0 auto;
|
|
font-size: 13px;
|
|
}
|
|
.tableTitle{
|
|
text-align:center!important;
|
|
font-weight: bold;
|
|
}
|
|
`,
|
|
detailMes: {},
|
|
baseUrl: this.Common.baseUrl,
|
|
mediaUrl: 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: '',
|
|
htmlContent: '',
|
|
Main_List: [],
|
|
exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!"
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.getInfo();
|
|
},
|
|
activated() {
|
|
this.getInfo();
|
|
},
|
|
methods: {
|
|
goEdit(){
|
|
|
|
|
|
this.$router.push({
|
|
path: '/GenerateCharts',
|
|
query: {
|
|
id: this.Art_Id
|
|
}
|
|
});
|
|
},
|
|
async getInfo() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: 'Loading...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
// 获取文章信息
|
|
await this.$api
|
|
.post('api/Production/getProductionDetail', { p_article_id: this.Art_Id })
|
|
.then(async (res) => {
|
|
if (res.code == 0) {
|
|
this.detailTitle = res.data.production.title
|
|
this.detailMes = res.data.production;
|
|
await this.getDate(loading);
|
|
|
|
loading.close();
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
loading.close();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
loading.close();
|
|
});
|
|
},
|
|
getWord() {
|
|
var htmlContent = `<h3 class="man_Title" contenteditable="false">${this.detailTitle} </h3>`;
|
|
htmlContent += this.Main_List.map((item) => {
|
|
//批注
|
|
let contentHtml = '';
|
|
var isRemark = ``;
|
|
// if (item.state == 2 && item.remark && item.remark != '') {
|
|
// // isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
|
|
// isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width: 20px; height: 20px" />
|
|
|
|
// <span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span>
|
|
// </span>
|
|
|
|
// `;
|
|
// }
|
|
// 判断是否是图片
|
|
if (item.type == 1) {
|
|
|
|
|
|
var extension = item.image.url.split('.').pop().toLowerCase();
|
|
if (extension == 'tif') {
|
|
contentHtml = `
|
|
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
|
|
item.am_id
|
|
}">
|
|
<img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
|
|
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
|
|
</p>
|
|
`;
|
|
} else if (['jpg', 'jpeg', 'png'].includes(extension)) {
|
|
contentHtml = `
|
|
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
|
|
item.ami_id
|
|
}" main-id="${item.am_id}">
|
|
${isRemark}
|
|
<img src="${this.mediaUrl + item.image.url}" style="width: ${
|
|
item.width ? `${item.width}px` : '100%'
|
|
}" />
|
|
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
|
|
item.image.note ? item.image.note : ''
|
|
}</font>
|
|
</p>
|
|
`;
|
|
} else {
|
|
contentHtml = `
|
|
<p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
|
|
item.ami_id
|
|
}" main-id="${item.am_id}">
|
|
${isRemark}
|
|
<span
|
|
style="
|
|
text-align: center;
|
|
font-size: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
"
|
|
>
|
|
Figures ( .${item.image.url.split('.').pop().toUpperCase()})
|
|
</span>
|
|
|
|
<font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
|
|
item.image.note ? item.image.note : ''
|
|
}</font>
|
|
</p>
|
|
`;
|
|
}
|
|
} else if (item.type == 2) {
|
|
var tableList = JSON.parse(item.table.table_data);
|
|
|
|
contentHtml = `
|
|
<div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
|
|
item.am_id
|
|
}" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
|
|
${isRemark}
|
|
<font class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
|
|
<table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
|
|
${tableList
|
|
.map((row) => {
|
|
return `
|
|
<tr>
|
|
${row
|
|
.map((cell) => {
|
|
return `
|
|
<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
|
|
<span>${cell.text || ''}</span>
|
|
</td>
|
|
`;
|
|
})
|
|
.join('')} <!-- join the cells in the row -->
|
|
</tr>
|
|
`;
|
|
})
|
|
.join('')} <!-- join the rows -->
|
|
</table>
|
|
<font class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
|
|
</div>
|
|
`;
|
|
} else {
|
|
contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
|
|
}
|
|
|
|
// 判断是否是表格类型
|
|
|
|
return contentHtml;
|
|
}).join('');
|
|
this.htmlContent = htmlContent;
|
|
},
|
|
async getDate(loading) {
|
|
let urlLInk = '';
|
|
let urlTask = {};
|
|
if (this.Art_Id != undefined) {
|
|
urlLInk = 'api/Preaccept/getArticleMains';
|
|
urlTask.article_id = this.detailMes.article_id;
|
|
}
|
|
|
|
// 获取文章信息
|
|
await this.$api
|
|
.post(urlLInk, urlTask)
|
|
.then(async (res) => {
|
|
if (res.code == 0) {
|
|
this.Main_List = res.data.list;
|
|
// this.detailTitle = res.data.production.title
|
|
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;
|
|
}
|
|
|
|
// setTimeout(async () => {
|
|
this.$nextTick(async () => {
|
|
await this.getWord();
|
|
loading.close();
|
|
});
|
|
loading.close();
|
|
} else {
|
|
this.$message.error(res.msg);
|
|
loading.close();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
loading.close();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.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;
|
|
}
|
|
</style>
|