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