zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'zy-email' of https://gitee.com/wjl2008_admin/tougao_web into pay

Browse Source
This commit is contained in:
始于初见
2024-12-26 13:06:58 +08:00
parent caba79154f 3a62f5ba56
commit e22c51e87f
11 changed files with 479 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/common/js/commonJS.js
View File

@@ -137,8 +137,7 @@ export default {
console.error("解析粘贴内容失败：", error);
callback([]);
}
}
,
},
async extractWordTablesToArrays(file, callback) {
const Zip = new JSZip();
@@ -419,13 +418,7 @@ export default {
const levelIndex = parseInt(level, 10) - 1;
return currentLevelNumbers[levelIndex] || 1;
});
}
,
},
async extractTablesFromWord(arrayBuffer, callback) {
@@ -450,8 +443,25 @@ export default {
const numberingMap = this.parseNumbering(numberingDoc);
console.log('numberingMap at line 232:', numberingMap)
// 提取表格
const tables = xmlDoc.getElementsByTagName("w:tbl");
console.log('tables at line 17:', tables)
// 获取所有的段落
const paragraphs = xmlDoc.getElementsByTagName("w:p");
// 获取所有的表格
const tables = xmlDoc.getElementsByTagName("w:tbl");
// 找到表格前的段落
let previousParagraphs = [];
let tableIndex = 0;
// 遍历段落，找到第一个表格之前的段落
for (let i = 0; i < paragraphs.length; i++) {
if (tableIndex < tables.length && paragraphs[i].nextSibling === tables[tableIndex]) {
break; // 找到表格
}
previousParagraphs.push(paragraphs[i]);
}
// 将前一段的内容转化为 HTML 或文本
const previousHtml = this.convertParagraphsToHtml(previousParagraphs);
console.log('tables at line 17:', previousHtml)
const tableHtml = this.convertTablesToHtml(tables, numberingMap);
console.log('tableHtml at line 18:', tableHtml)
@@ -467,7 +477,45 @@ export default {
callback("<p>文件解析失败，请检查文件格式。</p>");
}
},
// 转换段落为 HTML
convertParagraphsToHtml(paragraphs) {
let html = "";
paragraphs.forEach(p => {
let paragraphHtml = "";
// 处理段落中的所有子元素
const runs = p.getElementsByTagName("w:r"); // 获取段落中的所有文本运行（可能包含上标、下标等）
Array.from(runs).forEach(run => {
let text = "";
// 获取文本内容
const textNodes = run.getElementsByTagName("w:t");
Array.from(textNodes).forEach(t => {
text += t.textContent || t.text;
});
// 检查是否为上标或下标
const isSuperscript = run.getElementsByTagName("w:vertAlign")[0]?run.getElementsByTagName("w:vertAlign")[0].getAttribute("w:val") === "superscript":"";
const isSubscript = run.getElementsByTagName("w:vertAlign")[0]?run.getElementsByTagName("w:vertAlign")[0].getAttribute("w:val") === "subscript":'';
if (isSuperscript) {
text = `<sup>${text}</sup>`;
} else if (isSubscript) {
text = `<sub>${text}</sub>`;
}
// 拼接到段落 HTML 中
paragraphHtml += text;
});
// 将运行的文本拼接成完整的段落
html += `<p>${paragraphHtml}</p>`;
});
return html;
}
,
convertTablesToHtml(tables, numberingMap) {
const namespace = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
let html = "";
@@ -544,8 +592,7 @@ export default {
}
return html;
}
,
},

8
src/components/common/common.vue
View File

@@ -2,12 +2,12 @@
//记得切换
//正式
const mediaUrl = '/public/';
const baseUrl = '/';
// const mediaUrl = '/public/';
// const baseUrl = '/';
// const mediaUrl = 'https://submission.tmrjournals.com/public/';
// const baseUrl = '/api';
const mediaUrl = 'https://submission.tmrjournals.com/public/';
const baseUrl = '/api';
//本地(正式环境 )

60
src/components/page/GenerateCharts.vue
View File

@@ -131,7 +131,7 @@
:action="baseUrl+'api/Preaccept/up_img_mainImage'"
:show-file-list="false"
name="mainImage"
accept=".jpg,.jpeg,.png"
accept=".jpg,.jpeg,.png,.tif"
:on-success="handleAvatarSuccess"
:on-error="handleAvatarError"
:before-upload="beforeAvatarUpload"
@@ -174,7 +174,7 @@
@updateChange="(res) => updateChange(res, 'title')"
:value="lineStyle.title"
class="paste-area text-container"
toolbar="bold italic subscript superscript clearButton"
toolbar="bold italic subscript superscript clearButton"
height="120"
></tinymce>
</el-form-item>
@@ -262,7 +262,7 @@
@getContent="getContent"
:value="currentContent.content"
class="paste-area text-container"
toolbar="bold italic subscript superscript clearButton"
toolbar="bold italic forecolor subscript superscript clearButton"
style=""
></tinymce>
</el-form-item>
@@ -392,19 +392,19 @@ export default {
computed: {
combinedValue() {
// 将两个值组合成一个新的值，可以是字符串、数组、对象等
return `${this.isFirstComponentLoaded}-${this.isWordComponentLoaded}`;
// return `${this.isFirstComponentLoaded}-${this.isWordComponentLoaded}`;
}
},
watch: {
// 监听计算属性
combinedValue(newVal, oldVal) {
console.log('value1 或 value2 发生变化');
console.log('新值:', newVal);
console.log('旧值:', oldVal);
// combinedValue(newVal, oldVal) {
// console.log('value1 或 value2 发生变化');
// console.log('新值:', newVal);
// console.log('旧值:', oldVal);
// 处理任意一个值变化的逻辑
this.updateWordTiffImage(newVal);
}
// // 处理任意一个值变化的逻辑
// this.updateWordTiffImage(newVal);
// }
},
directives: {
@@ -431,23 +431,23 @@ export default {
this.isWordComponentLoaded = true;
},
// 监听第一个兄弟组件加载完毕
onFirstComponentLoaded(imagesList) {
this.imagesList = [...imagesList];
this.isFirstComponentLoaded = true;
},
updateWordTiffImage(data) {
console.log('updateWordTiffImage at line 423:', data);
// onFirstComponentLoaded(imagesList) {
// this.imagesList = [...imagesList];
// this.isFirstComponentLoaded = true;
// },
// updateWordTiffImage(data) {
// console.log('updateWordTiffImage at line 423:', data);
if (this.isFirstComponentLoaded && this.isWordComponentLoaded) {
this.imagesList.forEach((e) => {
if (e.dataUrl) {
this.$nextTick(() => {
this.$refs.commonWord.replacePlaceholderImage(e.ami_id, e.dataUrl);
});
}
});
}
},
// if (this.isFirstComponentLoaded && this.isWordComponentLoaded) {
// this.imagesList.forEach((e) => {
// if (e.dataUrl) {
// this.$nextTick(() => {
// this.$refs.commonWord.replacePlaceholderImage(e.ami_id, e.dataUrl);
// });
// }
// });
// }
// },
handleSaveContent() {
this.$refs.tinymceChild.getContent('content');
},
@@ -937,8 +937,8 @@ export default {
},
// 获取数据
async getDate() {
this.isFirstComponentLoaded = false;
this.isWordComponentLoaded = false;
// this.isFirstComponentLoaded = false;
// this.isWordComponentLoaded = false;
this.imagesList = [];
let urlLInk = '';
let urlTask = {};
@@ -1277,7 +1277,7 @@ export default {
// this.$message.error('Picture size cannot exceed 10M!');
// }
// return isLt2M;
const isValidFormat = ['image/jpeg', 'image/png'].includes(file.type);
const isValidFormat = ['image/jpeg', 'image/png', 'image/tiff'].includes(file.type);
if (!isValidFormat) {
this.$message.error(this.$t('commonTable.uploadImageInfo'));
}

5
src/components/page/articleDetailEditor.vue
View File

@@ -467,7 +467,7 @@
:visible.sync="drawer"
direction="rtl"
:before-close="handleClose"
size="1200px"
size="1000px"
>
<template #title>
<div style="display: inline-block; vertical-align: top">
@@ -494,7 +494,7 @@
</div>
</template>
<iframe
:src="`https://view.officeapps.live.com/op/embed.aspx?src=${previewData.previewUrl}`"
:src="`https://view.officeapps.live.com/op/view.aspx?src=${previewData.previewUrl}&ui=en-US`"
width="100%"
height="98%"
frameborder="0"
@@ -797,6 +797,7 @@ export default {
});
},
openDrawer(data, url) {
console.log('url at line 799:',data, url)
this.previewData = {
...data,
previewUrl: url,

6
src/components/page/articleListEditor_B1.vue
View File

@@ -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
View 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>

55
src/components/page/components/Tinymce/index.vue
View File

@@ -79,7 +79,7 @@ const tableStyle = ` b span{
table tr td p{
text-align:left !important;
margin:0;
font-family:'Charis SIL' !important;
font-size: 7.5000pt !important;
@@ -273,15 +273,18 @@ export default {
height: this.height,
paste_preprocess: function (plugin, args) {
let content = args.content;
// 阻止默认的粘贴行为
if (args.event) {
args.event.preventDefault(); // 阻止默认的粘贴处理
args.event.stopPropagation(); // 阻止事件冒泡，确保自定义处理优先执行
}
if (_this.type == 'table') {
_this.$commonJS.parseTableToArray(content, (tableList) => {
console.log('res at line 104:', tableList);
var contentHtml = `
// 创建一个临时 div 元素来解析粘贴的 HTML
let tempDiv = document.createElement('div');
tempDiv.innerHTML = content;
// 检查粘贴的内容是否包含 <table> 元素
if (tempDiv.querySelector('table')) {
console.log('粘贴的内容包含表格');
if (_this.type == 'table') {
_this.$commonJS.parseTableToArray(content, (tableList) => {
console.log('res at line 104:', tableList);
var contentHtml = `
<div class="thumbnailTableBox wordTableHtml table_Box" style="">
<table border="1" style="width: auto; border-collapse: collapse; text-align: center;">
${tableList
@@ -296,7 +299,7 @@ export default {
</td>
`;
})
.join('')}
.join('')}
</tr>
`;
})
@@ -305,18 +308,30 @@ export default {
</div>
`;
const container = document.createElement('div');
container.innerHTML = contentHtml;
const container = document.createElement('div');
container.innerHTML = contentHtml;
// _this.updateTableStyles(container); // 根据需要应用额外的样式
args.content = container.innerHTML; // 更新处理后的内容
});
} else if (_this.isAutomaticUpdate) {
args.content = _this.$commonJS.transformHtmlString(args.content); // 更新处理后的内容
// _this.updateTableStyles(container); // 根据需要应用额外的样式
args.content = container.innerHTML; // 更新处理后的内容
});
}
} else {
if (_this.isAutomaticUpdate) {
args.content = _this.$commonJS.transformHtmlString(args.content); // 更新处理后的内容
}
console.log('粘贴的内容不包含表格');
}
// 阻止默认的粘贴行为
if (args.event) {
args.event.preventDefault(); // 阻止默认的粘贴处理
args.event.stopPropagation(); // 阻止事件冒泡，确保自定义处理优先执行
}
},
content_style: `${tableStyle}`,
content_style: `${tableStyle} table span blue {
color: rgb(0, 130, 170) !important;
}`,
formats: {
bold: { inline: 'b' },
italic: { inline: 'i' }
@@ -332,7 +347,6 @@ export default {
end_container_on_empty_block: true,
content_css: 'default', // 加载 TinyMCE 默认样式表
//设置自定义按钮 myCustomToolbarButton
setup(ed) {
ed.ui.registry.addButton('uploadWord', {
text: 'Word',
@@ -481,7 +495,6 @@ export default {
var tableHtml = `<html xmlns:w="urn:schemas-microsoft-com:office:word">
<head>
<style>
${tableStyle}
</style>
</head>

21
src/components/page/components/table/word.vue
View File

@@ -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,8 +436,7 @@ export default {
ed.on('mouseup', function () {
_this.updateCurrentTag(ed);
});
ed.on('blur', function () {
ed.on('blur', function () {
console.log('_this.lastPTag at line 367:', _this.lastTag);
if (_this.lastTag) {
_this.lastTag.style.backgroundColor = ''; // 清除之前的高亮
@@ -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) => {

87
src/components/page/components/table/wordHtml.vue
View File

@@ -36,17 +36,13 @@
>Figure {{ index + 1 }}
<span
@click="openPreview(index, 'img')"
v-if="['jpg', 'jpeg', 'png'].includes(img.image.split('.').pop().toLowerCase())"
>
<!-- <el-tooltip class="item" effect="dark" :content="$t('commonTable.preview')" placement="top"> -->
<i class="el-icon-view" style="font-size: 16px"></i>
<!-- </el-tooltip> -->
</span>
<a :href="mediaUrl + img.image.url" style="color: #000" v-else>
<!-- <el-tooltip class="item" effect="dark" :content="$t('commonTable.preview')" placement="top"> -->
<i class="el-icon-download" style="font-size: 16px"></i>
<!-- </el-tooltip> -->
</a>
</span>
</div>
@@ -85,38 +81,14 @@
>
<div style="width: 100%; height: 80px; display: flex; justify-content: center; align-items: center">
<!-- 图片内容 -->
<template v-if="['jpg', 'jpeg', 'png'].includes(img.image.split('.').pop().toLowerCase())">
<!-- <template v-if="['jpg', 'jpeg', 'png'].includes(img.image.split('.').pop().toLowerCase())"> -->
<img
:data-img-id="img.article_image_id"
:src="mediaUrl + img.image"
style="width: 140px; height: 100%; object-fit: cover"
/>
</template>
<template v-else-if="img.image.split('.').pop().toLowerCase() === 'tif'">
<img
:data-img-id="img.article_image_id"
:src="img.dataUrl"
style="width: 140px; height: 100%; object-fit: cover"
/>
</template>
<template v-else>
<div
style="
width: 140px;
height: 100%;
text-align: center;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
"
>
{{ img.image.split('.').pop().toUpperCase() }}
<!-- <i class="el-icon-download" style="margin-left: 10px; color: #75abf1"></i> -->
</div>
<!-- </a> -->
</template>
<!-- </template> -->
</div>
<!-- 输入框 -->
</div>
@@ -466,42 +438,47 @@ export default {
list = list.map((e) => {
return {
...e,
image: e.url,
image: e.jpg_url?e.jpg_url:e.url,
article_image_id: e.ami_id
};
});
} else {
list = res.data.list;
list = list.map((e) => {
return {
...e,
image: e.jpg_url?e.jpg_url:e.image,
};
});
}
if (list.length > 0) {
list.forEach((img, index) => {
var extension = img.image.split('.').pop().toLowerCase();
if (extension === 'tif' || extension === 'jpg' || extension === 'jpeg' || extension === 'png') {
const modalContent = ['jpg', 'jpeg', 'png'].includes(extension)
? `<img src="${this.mediaUrl + img.image}" alt="Image ${index}" style="width:100%;background:#FFF;" >`
: `<canvas id="tiff-canvas-modal-${index}" ></canvas>`;
// var extension = img.image.split('.').pop().toLowerCase();
// if (extension === 'tif' || extension === 'jpg' || extension === 'jpeg' || extension === 'png') {
const modalContent = `<img src="${this.mediaUrl + img.image}" alt="Image ${index}" style="width:100%;background:#FFF;" >`;
console.log('modalContent at line 487:', modalContent)
this.$commonJS.createImageModal(index, modalContent, 'img');
}
// }
if (extension === 'tif') {
this.$nextTick(() => {
this.$commonJS.renderTiffImage(
this.mediaUrl + img.image,
`tiff-canvas-modal-${index}`,
function (url) {
list[index].dataUrl = url;
},
index,
true
);
});
}
// if (extension === 'tif') {
// this.$nextTick(() => {
// this.$commonJS.renderTiffImage(
// this.mediaUrl + img.image,
// `tiff-canvas-modal-${index}`,
// function (url) {
// list[index].dataUrl = url;
// },
// index,
// true
// );
// });
// }
});
}
this.images = list;
this.$emit('loaded');
// this.$emit('loaded');
});
},
async getWordTablesList(callback) {

28
src/components/page/components/table/wordHtmlTypesetting.vue
View File

@@ -86,8 +86,8 @@
<!-- 当 isEditing 为 false 时，显示评论文本 -->
<div style="display: flex; align-items: center; justify-content: space-between">
<p style="min-height: 20px; width: calc(100%);white-space: normal;">
{{ comment.remark }}
<p style="min-height: 20px; width: calc(100%);white-space: normal;" v-html="comment.remark">
<!-- <span @click="editComment(index)" style="cursor: pointer; color: #007bff; margin-left: 10px;">修改</span> -->
</p>
@@ -602,7 +602,7 @@ export default {
}
this.$forceUpdate();
this.isFresh = true;
this.$emit('loaded', this.images);
// this.$emit('loaded', loadedthis.images);
});
},
changeDataIsHidden(val, status, type) {
@@ -678,27 +678,13 @@ export default {
if (list.length > 0) {
list.forEach((img, index) => {
var extension = img.image.split('.').pop().toLowerCase();
if (extension === 'tif' || extension === 'jpg' || extension === 'jpeg' || extension === 'png') {
const modalContent = ['jpg', 'jpeg', 'png'].includes(extension)
? `<img src="${this.mediaUrl + img.image}" alt="Image ${index}" style="width:100%;" >`
: `<canvas id="tiff-canvas-modal-${index}" ></canvas>`;
// if (extension === 'tif' || extension === 'jpg' || extension === 'jpeg' || extension === 'png') {
const modalContent = `<img src="${this.mediaUrl + img.image}" alt="Image ${index}" style="width:100%;" >`;
this.$commonJS.createImageModal(index, modalContent, 'img');
}
// }
if (extension === 'tif') {
this.$nextTick(() => {
this.$commonJS.renderTiffImage(
this.mediaUrl + img.image,
`tiff-canvas-modal-${index}`,
function (url) {
list[index].dataUrl = url;
},
index,
true
);
});
}
});
}
this.images = list;

7
src/router/index.js
View File

@@ -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'),