预览
This commit is contained in:
@@ -2058,13 +2058,13 @@
|
||||
// 6----校对文章
|
||||
htmlContet() {
|
||||
this.$api
|
||||
.post('api/Production/getProductionMains', {
|
||||
p_article_id: this.p_article_id
|
||||
.post('api/Preaccept/getArticleMains', {
|
||||
article_id: this.detailMes.article_id
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$router.push({
|
||||
path: 'comArtHtmlCreat',
|
||||
path: 'comArtHtmlCreatNew',
|
||||
query: {
|
||||
id: this.p_article_id
|
||||
}
|
||||
|
||||
287
src/components/page/comArtHtmlCreatNew.vue
Normal file
287
src/components/page/comArtHtmlCreatNew.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<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">
|
||||
|
||||
|
||||
<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: {
|
||||
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>
|
||||
@@ -123,6 +123,12 @@ export default {
|
||||
id: {
|
||||
type: String
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
@@ -380,7 +386,8 @@ export default {
|
||||
content_css: 'default',
|
||||
|
||||
setup(ed) {
|
||||
ed.on('click', function (e) {
|
||||
if(!_this.readonly){
|
||||
ed.on('click', function (e) {
|
||||
// 判断点击的是否是目标元素
|
||||
const target = e.target;
|
||||
console.log('target at line 351:', target);
|
||||
@@ -422,7 +429,6 @@ export default {
|
||||
}
|
||||
});
|
||||
// 监听焦点变化并高亮当前选中的元素
|
||||
|
||||
ed.on('selectionChange', function () {
|
||||
_this.updateCurrentTag(ed);
|
||||
});
|
||||
@@ -430,7 +436,6 @@ export default {
|
||||
ed.on('mouseup', function () {
|
||||
_this.updateCurrentTag(ed);
|
||||
});
|
||||
|
||||
ed.on('blur', function () {
|
||||
console.log('_this.lastPTag at line 367:', _this.lastTag);
|
||||
if (_this.lastTag) {
|
||||
@@ -619,11 +624,6 @@ export default {
|
||||
// 将容器添加到页面中
|
||||
document.body.appendChild(wordButtonContainer);
|
||||
}
|
||||
|
||||
// 获取 TinyMCE iframe 内部的 document 对象
|
||||
|
||||
// 监听 TinyMCE iframe 内容区域的滚动事件
|
||||
|
||||
ed.on('mousedown', function (e) {
|
||||
// 检查点击的位置是否是删除按钮或选中的 <p> 标签
|
||||
if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
|
||||
@@ -633,6 +633,9 @@ export default {
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
init_instance_callback: (editor) => {
|
||||
|
||||
@@ -173,6 +173,13 @@ export default new Router({
|
||||
title: 'Artcile Html'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'comArtHtmlCreatNew',
|
||||
component: () => import('../components/page/comArtHtmlCreatNew.vue'),
|
||||
meta: {
|
||||
title: 'Artcile Html'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'comArtHtmlEdit',
|
||||
component: () => import('../components/page/comArtHtmlEdit.vue'),
|
||||
|
||||
Reference in New Issue
Block a user