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: 'https://submission.tmrjournals.com/', //正式 记得切换
// baseURL: 'http://www.tougao.com/', //测试本地 记得切换 // baseURL: 'http://www.tougao.com/', //测试本地 记得切换
// baseURL: 'http://192.168.110.110/tougao/public/index.php/', // baseURL: 'http://192.168.110.110/tougao/public/index.php/',
// baseURL: '/api', //本地 baseURL: '/api', //本地
baseURL: '/', //正式 // baseURL: '/', //正式
}); });

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

@@ -137,8 +137,7 @@ export default {
console.error("解析粘贴内容失败：", error); console.error("解析粘贴内容失败：", error);
callback([]); callback([]);
} }
} },
,
async extractWordTablesToArrays(file, callback) { async extractWordTablesToArrays(file, callback) {
const Zip = new JSZip(); const Zip = new JSZip();
@@ -419,13 +418,7 @@ export default {
const levelIndex = parseInt(level, 10) - 1; const levelIndex = parseInt(level, 10) - 1;
return currentLevelNumbers[levelIndex] || 1; return currentLevelNumbers[levelIndex] || 1;
}); });
} },
,
async extractTablesFromWord(arrayBuffer, callback) { async extractTablesFromWord(arrayBuffer, callback) {
@@ -450,8 +443,25 @@ export default {
const numberingMap = this.parseNumbering(numberingDoc); const numberingMap = this.parseNumbering(numberingDoc);
console.log('numberingMap at line 232:', numberingMap) 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); const tableHtml = this.convertTablesToHtml(tables, numberingMap);
console.log('tableHtml at line 18:', tableHtml) console.log('tableHtml at line 18:', tableHtml)
@@ -467,7 +477,45 @@ export default {
callback("<p>文件解析失败，请检查文件格式。</p>"); 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) { convertTablesToHtml(tables, numberingMap) {
const namespace = "http://schemas.openxmlformats.org/wordprocessingml/2006/main"; const namespace = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
let html = ""; let html = "";
@@ -544,8 +592,7 @@ export default {
} }
return html; return html;
} },
,

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

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

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

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

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

@@ -467,7 +467,7 @@
:visible.sync="drawer" :visible.sync="drawer"
direction="rtl" direction="rtl"
:before-close="handleClose" :before-close="handleClose"
size="1200px" size="1000px"
> >
<template #title> <template #title>
<div style="display: inline-block; vertical-align: top"> <div style="display: inline-block; vertical-align: top">
@@ -494,7 +494,7 @@
</div> </div>
</template> </template>
<iframe <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%" width="100%"
height="98%" height="98%"
frameborder="0" frameborder="0"
@@ -797,6 +797,7 @@ export default {
}); });
}, },
openDrawer(data, url) { openDrawer(data, url) {
console.log('url at line 799:',data, url)
this.previewData = { this.previewData = {
...data, ...data,
previewUrl: url, previewUrl: url,

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

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

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

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

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

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