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

提交

Browse Source
This commit is contained in:
始于初见
2024-12-25 14:32:02 +08:00
parent e9d234c2cb
commit 1f5f9e257b
8 changed files with 172 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/index.js
View File

@@ -19,8 +19,8 @@ const service = axios.create({
// baseURL: 'https://submission.tmrjournals.com/', //正式 记得切换
// baseURL: 'http://www.tougao.com/', //测试本地 记得切换
// baseURL: 'http://192.168.110.110/tougao/public/index.php/',
// baseURL: '/api', //本地
baseURL: '/', //正式
baseURL: '/api', //本地
// baseURL: '/', //正式
});

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,

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

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

85
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>
<!-- </template> -->
<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>
</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;