表格处理
This commit is contained in:
@@ -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: '/', //正式
|
||||
|
||||
});
|
||||
|
||||
|
||||
@@ -17,8 +17,8 @@ const en = {
|
||||
labelother: 'close other',
|
||||
labelall: 'close all'
|
||||
},
|
||||
info:{
|
||||
realname:'English names can only contain uppercase and lowercase letters, "-", and spaces'
|
||||
info: {
|
||||
realname: 'English names can only contain uppercase and lowercase letters, "-", and spaces'
|
||||
},
|
||||
total: {
|
||||
author: 'author',
|
||||
@@ -26,19 +26,19 @@ realname:'English names can only contain uppercase and lowercase letters, "-", a
|
||||
reviewers: 'reviewer',
|
||||
admin: 'admin'
|
||||
},
|
||||
articleListEditor:{
|
||||
Continuouspublication:'Continuous publication',
|
||||
publishInfo:'Are you sure you want to publish this article?',
|
||||
type:'Type',
|
||||
edit:'Edit',
|
||||
add:'Add',
|
||||
journalType0:'Continuous publication',
|
||||
journalType1:'Monthly',
|
||||
journalType3:'Quarterly',
|
||||
coverImage:'Cover Image',
|
||||
JournalInstallment:'Journal Installment',
|
||||
status:'Status',
|
||||
delete:'Delete',
|
||||
articleListEditor: {
|
||||
Continuouspublication: 'Continuous publication',
|
||||
publishInfo: 'Are you sure you want to publish this article?',
|
||||
type: 'Type',
|
||||
edit: 'Edit',
|
||||
add: 'Add',
|
||||
journalType0: 'Continuous publication',
|
||||
journalType1: 'Monthly',
|
||||
journalType3: 'Quarterly',
|
||||
coverImage: 'Cover Image',
|
||||
JournalInstallment: 'Journal Installment',
|
||||
status: 'Status',
|
||||
delete: 'Delete',
|
||||
deleteInfo: 'Are you sure you want to delete this journal installment?',
|
||||
},
|
||||
menu: {
|
||||
@@ -257,7 +257,7 @@ realname:'English names can only contain uppercase and lowercase letters, "-", a
|
||||
journalArticleCount: 'Journal Article Count',
|
||||
managingDirector: 'Managing Director',
|
||||
GroupClassification: 'Group List',
|
||||
JournalInstallment : 'Journal Installment',
|
||||
JournalInstallment: 'Journal Installment',
|
||||
},
|
||||
home: {
|
||||
authortop: 'Author guide',
|
||||
@@ -352,6 +352,18 @@ realname:'English names can only contain uppercase and lowercase letters, "-", a
|
||||
publicationTime: 'Year',
|
||||
publicationTimeInfo: 'Year;Volume(issue):Inclusive page numbers.',
|
||||
},
|
||||
commonTable: {
|
||||
add: 'Add',
|
||||
edit: 'Edit',
|
||||
rows: 'rows',
|
||||
columns: 'columns',
|
||||
table: 'Table',
|
||||
headerPlaceholder: 'Fill in the header',
|
||||
typesettingType2: 'Horizontal A4',
|
||||
typesettingType1: 'Vertical A4',
|
||||
exportWord: 'Export Word',
|
||||
exportImg: 'Export PNG',
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -345,6 +345,18 @@ const zh = {
|
||||
publicationTime: '年份',
|
||||
publicationTimeInfo: '年份；卷（期）：包括页码。',
|
||||
},
|
||||
commonTable: {
|
||||
add: '新增',
|
||||
edit: '编辑',
|
||||
rows: '行',
|
||||
columns: '列',
|
||||
table: '表格',
|
||||
headerPlaceholder: '填写表头',
|
||||
typesettingType2: '横向 A4',
|
||||
typesettingType1: '竖向 A4',
|
||||
exportWord: '导出 Word',
|
||||
exportImg: '导出 图片',
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -19,6 +19,15 @@
|
||||
<span v-if="Ainfo.refer_state.state" class="el-icon-check pass status"> Complete</span>
|
||||
<span v-else class="el-icon-pie-chart notPass status"> Pending</span>
|
||||
</h5>
|
||||
<div class="con">
|
||||
<h4>Generate charts </h4>
|
||||
|
||||
|
||||
|
||||
<p class="mt10"><el-button @click="goGenerateCharts(thisArtcleId)" icon="el-icon-edit" type="text">Edit</el-button></p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="con">
|
||||
<h4>References </h4>
|
||||
<p class="mt20">A total of <i class="tip">{{Ainfo.refer_state.num}}</i> references in this manuscript is identified.</p>
|
||||
@@ -73,6 +82,16 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
// 跳转到图表编辑页面
|
||||
goGenerateCharts(id){
|
||||
this.$router.push({
|
||||
path: 'GenerateCharts',
|
||||
query: {
|
||||
id: id
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 隐藏alert
|
||||
hideAlert(){
|
||||
|
||||
971
src/components/page/GenerateCharts copy.vue
Normal file
971
src/components/page/GenerateCharts copy.vue
Normal file
@@ -0,0 +1,971 @@
|
||||
<template>
|
||||
<div style="height: 98%">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item> <i class="el-icon-document-copy"></i> Generate Charts </el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div
|
||||
class="container"
|
||||
style="height: 97%; min-width: calc(1000px - 300px); width: calc(100% - 300px); background-color: #fafafa; padding: 10px 0 0 0"
|
||||
>
|
||||
<h3 class="man_Title">
|
||||
{{ detailTitle }}
|
||||
</h3>
|
||||
<div class="type_MTxt" style="box-sizing: border-box">
|
||||
<div
|
||||
v-for="(item, index) in Main_List"
|
||||
@dragover.prevent
|
||||
:class="item.p_main_img_id ? 'imgBox' : ''"
|
||||
@drop="onDrop($event, index)"
|
||||
>
|
||||
<p v-html="item.text" v-if="!item.p_main_img_id"></p>
|
||||
<p v-if="item.p_main_img_id" class="MaxPicture">
|
||||
<img :src="baseUrl + 'public/mainimg/' + item.content" :style="'width:' + item.width + 'px'" />
|
||||
<font :style="'width:' + item.width + 'px'">{{ item.note }} </font>
|
||||
</p>
|
||||
<font v-if="item.getnum != 0" class="chNumer">{{ item.getnum }}</font>
|
||||
<b
|
||||
class="MaxBtn"
|
||||
@click="MTxtEdit(item, index)"
|
||||
style="background-color: #006699; right: 40px"
|
||||
v-if="item.p_main_img_id"
|
||||
>
|
||||
<i class="el-icon-edit"></i>
|
||||
</b>
|
||||
<!-- <b class="MaxBtn" @click="MTxtPic(item, index)" style="background-color: #13bc20; right: 40px">
|
||||
<svg
|
||||
t="1684978324047"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1967"
|
||||
width="15"
|
||||
height="15"
|
||||
>
|
||||
<path
|
||||
d="M512 46.208a42.666667 42.666667 0 0 1 4.992 85.077333L512 131.541333H174.208a42.666667 42.666667 0 0 0-42.368 37.717334l-0.298667 4.949333v487.850667L307.2 501.12a88.874667 88.874667 0 0 1 112.042667-6.570667l5.845333 4.608 150.442667 128.896 101.973333-101.888a88.874667 88.874667 0 0 1 110.122667-12.373333l6.058666 4.138667 104.832 78.592V512a42.666667 42.666667 0 0 1 85.077334-4.992l0.298666 4.992v342.698667a128 128 0 0 1-120.490666 127.786666l-7.509334 0.213334H174.208a128 128 0 0 1-127.786667-120.490667l-0.213333-7.509333V174.208a128 128 0 0 1 120.490667-127.786667l7.509333-0.213333H512zM366.378667 563.2l-1.536 0.853333-233.301334 213.76v76.885334a42.666667 42.666667 0 0 0 37.717334 42.368l4.949333 0.298666H855.893333a42.666667 42.666667 0 0 0 42.368-37.717333l0.298667-4.949333v-151.808l-3.285333-2.090667-152.789334-114.602667a3.541333 3.541333 0 0 0-3.2-0.554666l-1.450666 0.853333-97.28 97.28 76.970666 66.048a42.666667 42.666667 0 0 1-51.2 68.010667l-4.309333-3.2-292.437333-250.666667a3.541333 3.541333 0 0 0-3.2-0.768z m415.829333-516.992a42.666667 42.666667 0 0 1 42.410667 37.717333l0.256 4.949334v96h96a42.666667 42.666667 0 0 1 4.992 85.077333l-4.992 0.256h-96v96a42.666667 42.666667 0 0 1-85.034667 4.992l-0.298667-4.992v-96h-96a42.666667 42.666667 0 0 1-4.949333-85.034667l4.949333-0.298666h96v-96a42.666667 42.666667 0 0 1 42.666667-42.666667z"
|
||||
fill="#ffffff"
|
||||
p-id="1968"
|
||||
></path>
|
||||
</svg>
|
||||
</b> -->
|
||||
<!-- <b class="MaxBtn" @click="MTxtTable(item, index)" style="background-color: #e07404; right: 0px">
|
||||
<i class="el-icon-document-add"></i>
|
||||
</b> -->
|
||||
<b
|
||||
class="MaxBtn"
|
||||
@click="MTxtDelet(item, index)"
|
||||
style="background-color: #bc1a13; right: 0px"
|
||||
v-if="item.p_main_img_id"
|
||||
>
|
||||
<i class="el-icon-delete"></i>
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 20px" v-if="Art_Doi == undefined"></div>
|
||||
<div style="margin: 20px 0 0 0; text-align: center; padding-bottom: 30px" v-if="Art_Doi != undefined">
|
||||
<el-button icon="el-icon-finished" type="primary" style="width: 350px" @click="pushOnline()"> Push Online </el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="right-side"
|
||||
style="
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 17vh;
|
||||
bottom: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
||||
border-radius: 4px;
|
||||
"
|
||||
>
|
||||
<p style="padding: 10px 10px; box-sizing: border-box; font-weight: bold">
|
||||
Unfettered area
|
||||
<b class="MaxBtn" @click="MTxtPic()" style="background-color: #13bc20; right: 40px; top: 5px">
|
||||
<svg
|
||||
t="1684978324047"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1967"
|
||||
width="15"
|
||||
height="15"
|
||||
>
|
||||
<path
|
||||
d="M512 46.208a42.666667 42.666667 0 0 1 4.992 85.077333L512 131.541333H174.208a42.666667 42.666667 0 0 0-42.368 37.717334l-0.298667 4.949333v487.850667L307.2 501.12a88.874667 88.874667 0 0 1 112.042667-6.570667l5.845333 4.608 150.442667 128.896 101.973333-101.888a88.874667 88.874667 0 0 1 110.122667-12.373333l6.058666 4.138667 104.832 78.592V512a42.666667 42.666667 0 0 1 85.077334-4.992l0.298666 4.992v342.698667a128 128 0 0 1-120.490666 127.786666l-7.509334 0.213334H174.208a128 128 0 0 1-127.786667-120.490667l-0.213333-7.509333V174.208a128 128 0 0 1 120.490667-127.786667l7.509333-0.213333H512zM366.378667 563.2l-1.536 0.853333-233.301334 213.76v76.885334a42.666667 42.666667 0 0 0 37.717334 42.368l4.949333 0.298666H855.893333a42.666667 42.666667 0 0 0 42.368-37.717333l0.298667-4.949333v-151.808l-3.285333-2.090667-152.789334-114.602667a3.541333 3.541333 0 0 0-3.2-0.554666l-1.450666 0.853333-97.28 97.28 76.970666 66.048a42.666667 42.666667 0 0 1-51.2 68.010667l-4.309333-3.2-292.437333-250.666667a3.541333 3.541333 0 0 0-3.2-0.768z m415.829333-516.992a42.666667 42.666667 0 0 1 42.410667 37.717333l0.256 4.949334v96h96a42.666667 42.666667 0 0 1 4.992 85.077333l-4.992 0.256h-96v96a42.666667 42.666667 0 0 1-85.034667 4.992l-0.298667-4.992v-96h-96a42.666667 42.666667 0 0 1-4.949333-85.034667l4.949333-0.298666h96v-96a42.666667 42.666667 0 0 1 42.666667-42.666667z"
|
||||
fill="#ffffff"
|
||||
p-id="1968"
|
||||
></path>
|
||||
</svg> </b
|
||||
><b class="MaxBtn" @click="MTxtTable()" style="background-color: #e07404; right: 0px; top: 5px">
|
||||
<i class="el-icon-document-add"></i>
|
||||
</b>
|
||||
</p>
|
||||
<div class="unfetteredBox">
|
||||
<div
|
||||
:style="item.isHidden ? 'opacity:0.2' : 'opacity:1'"
|
||||
v-for="(item, index) in images"
|
||||
:key="index"
|
||||
class="image"
|
||||
draggable="true"
|
||||
@dragstart="onDragStart($event, item, index)"
|
||||
>
|
||||
<img :src="baseUrl + 'public/mainimg/' + item.content" style="width: 100%; height: 100%; object-fit: cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--修改文本 -->
|
||||
<el-dialog title="Edit Text" :visible.sync="txtVisible" width="800px" :close-on-click-modal="false">
|
||||
<el-form ref="editMes" :model="txtStyle" label-width="1px">
|
||||
<p style="margin: 0 5px 15px 5px; line-height: 18px; font-size: 13px; color: #aaa">{{ exegesis }}</p>
|
||||
<el-form-item label="">
|
||||
<el-input type="textarea" placeholder="Please enter the table content..." v-model="txtStyle.text" autosize> </el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<p class="type_Gbtn" @click="trsanGtp">
|
||||
<i class="el-icon-document-copy" style="margin-right: 5px" v-if="btnDisble"></i>
|
||||
<i class="el-icon-loading" style="margin-right: 5px" v-if="!btnDisble"></i>
|
||||
TMRGTP Proofreading
|
||||
</p>
|
||||
<div class="type_CHar" v-if="txtStyle.ChGtpTxt != ''">
|
||||
<p v-html="txtStyle.ChGtpTxt"></p>
|
||||
<font class="chReple" @click="replceChGpr(item)">Replace</font>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="txtVisible = false"> Cancel </el-button>
|
||||
<el-button type="primary" @click="saveTxt">
|
||||
<i class="el-icon-finished" style="margin-right: 5px"></i>
|
||||
Save
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!--添加/修改图片 -->
|
||||
<el-dialog :title="picStyle.visiTitle" :visible.sync="pictVisible" width="800px" :close-on-click-modal="false">
|
||||
<el-form ref="editMes" :model="picStyle" label-width="150px">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
<font style="color: #f56c6c; margin-right: 5px">*</font>
|
||||
Picture :
|
||||
</span>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="'/api/api/Production/up_mainimg_file'"
|
||||
:show-file-list="false"
|
||||
name="mainimg"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:on-error="handleAvatarError"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img v-if="picStyle.imageUrl" :src="picStyle.imageUrl" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="Bottom Title :">
|
||||
<el-input placeholder="Please enter the table title..." v-model="picStyle.titleBot">
|
||||
</el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="Picture Describe :">
|
||||
<el-input placeholder="Please enter the table describe..." v-model="picStyle.note" type="textarea" :rows="3">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<p style="margin: 20px 0; text-align: right">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
@click="
|
||||
picStyle.picUrl = '';
|
||||
picStyle.titleBot = '';
|
||||
picStyle.note = '';
|
||||
picStyle.imageUrl = '';
|
||||
"
|
||||
>
|
||||
<i class="el-icon-refresh" style="margin-right: 5px"></i>Empty
|
||||
</el-button>
|
||||
</p>
|
||||
<div class="lineStyle" v-if="picStyle.picUrl != ''">
|
||||
<div>
|
||||
<span class="title" style="margin-left: 25px">Picture Width :</span>
|
||||
<el-input v-model="picStyle.width" style="width: 120px">
|
||||
<template slot="append">px</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 20px" v-if="picStyle.picUrl != ''">
|
||||
<div style="text-align: center">
|
||||
<img :src="baseUrl + 'public/mainimg/' + picStyle.picUrl" :style="'width:' + picStyle.width + 'px'" />
|
||||
</div>
|
||||
<p style="text-align: center; margin: 10px 0 15px 0; font-size: 12px; color: #006699">
|
||||
<b>{{ picStyle.titleBot }}</b>
|
||||
</p>
|
||||
<p
|
||||
style="text-align: center; margin: 10px auto 0; font-size: 12px; line-height: 22px"
|
||||
:style="'width:' + picStyle.width + 'px'"
|
||||
v-html="picStyle.note"
|
||||
></p>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer" v-if="picStyle.picUrl != ''">
|
||||
<el-button @click="pictVisible = false"> Cancel </el-button>
|
||||
<el-button type="primary" @click="savePic">
|
||||
<i class="el-icon-finished" style="margin-right: 5px"></i>
|
||||
Save Picture
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 添加表格 -->
|
||||
<el-dialog title="Insert Table" :visible.sync="threeVisible" width="1200px" :close-on-click-modal="false" >
|
||||
<el-form ref="editMes" :model="lineStyle" label-width="115px">
|
||||
<el-form-item label="Top Title :">
|
||||
<el-input placeholder="Please enter the table title..." v-model="lineStyle.titleTop"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Word">
|
||||
<span slot="label">
|
||||
<font style="color: #f56c6c; margin-right: 5px">*</font>
|
||||
Content :
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
<common-table ref="commonTable" style="margin-left: -115px;" :lineStyle="lineStyle"></common-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="Bottom Title :">
|
||||
<el-input placeholder="Please enter the table title..." v-model="lineStyle.titleBot"> </el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<p style="margin: 20px 0; text-align: right">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
@click="
|
||||
lineStyle.textarea = '';
|
||||
lineStyle.titleTop = '';
|
||||
lineStyle.titleBot = '';
|
||||
lineTable = [];
|
||||
"
|
||||
>
|
||||
<i class="el-icon-refresh" style="margin-right: 5px"></i>Empty
|
||||
</el-button>
|
||||
<el-button type="primary" plain @click="CopyExcelToTable">
|
||||
<i class="el-icon-sort" style="margin-right: 5px"></i>Generate Table
|
||||
</el-button>
|
||||
</p>
|
||||
<div class="lineStyle" v-if="lineTable.length != 0">
|
||||
<div>
|
||||
<span class="title">Table All Width :</span>
|
||||
<el-input v-model="lineStyle.tabwith" style="width: 120px">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(item, index) in lineStyle.arrwith" class="styArry">
|
||||
<span class="title"
|
||||
>Column <b style="color: #006699">{{ index + 1 }}</b> :</span
|
||||
>
|
||||
<el-input v-model="lineStyle.arrwith[index]" style="width: 100px">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveLine" v-if="lineTable.length != 0">
|
||||
<i class="el-icon-finished" style="margin-right: 5px"></i>
|
||||
Save Table
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { del } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
p_main_img_id: 157,
|
||||
p_article_id: 2141,
|
||||
p_main_id: 101853,
|
||||
pre_id: 0,
|
||||
width: 500,
|
||||
content: '20240906/7c4cfd8f431cddf05f33634d4ee2cdca.jpg',
|
||||
note: 'Figure 1 Oracle bone inscriptions of YANG',
|
||||
ctime: 0,
|
||||
state: 0
|
||||
}
|
||||
],
|
||||
baseUrl: this.Common.baseUrl,
|
||||
baseUrl: 'https://submission.tmrjournals.com/',
|
||||
mediaUrl: this.Common.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: '',
|
||||
Main_List: [],
|
||||
txtStyle: {
|
||||
text: '',
|
||||
ChGtpTxt: ''
|
||||
},
|
||||
txtVisible: false,
|
||||
lineStyle: {
|
||||
titleTop: '',
|
||||
titleBot: '',
|
||||
textarea: '',
|
||||
tableData: [],
|
||||
tabwith: '100',
|
||||
arrwith: []
|
||||
},
|
||||
lineTable: [],
|
||||
threeVisible: false,
|
||||
picStyle: {
|
||||
titleBot: '',
|
||||
note: '',
|
||||
// picUrl: 'https://www.tmrjournals.cn/public/articleHTML/TMR/TMR20230213002/images/alternativeImage/TMR20230213002-F004.jpg',
|
||||
picUrl: '',
|
||||
imageUrl: '',
|
||||
width: '500'
|
||||
},
|
||||
pictVisible: false,
|
||||
typesettingType: 1,
|
||||
exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!"
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getDate();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onDragStart(event, image, index) {
|
||||
event.dataTransfer.setData('image', JSON.stringify({ ...image, isNewReformat: true }));
|
||||
event.dataTransfer.setData('imageIndex', index);
|
||||
},
|
||||
onDrop(event, index) {
|
||||
console.log('index at line 297:', index);
|
||||
const draggedImage = JSON.parse(event.dataTransfer.getData('image'));
|
||||
const draggedImageIndex = JSON.parse(event.dataTransfer.getData('imageIndex'));
|
||||
console.log('draggedImage at line 298:', draggedImage);
|
||||
this.Main_List.splice(index, 0, draggedImage);
|
||||
this.images[draggedImageIndex].isHidden = true;
|
||||
},
|
||||
// 获取数据
|
||||
getDate() {
|
||||
let urlLInk = '';
|
||||
let urlTask = {};
|
||||
if (this.Art_Id != undefined) {
|
||||
urlLInk = 'api/Production/getProductionMains';
|
||||
urlTask.p_article_id = this.Art_Id;
|
||||
}
|
||||
// if (this.Art_Doi != undefined) {
|
||||
// urlLInk = 'api/Production/getProductionMainsByDoi';
|
||||
// urlTask.doi = this.Art_Doi;
|
||||
// }
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
|
||||
// 获取文章信息
|
||||
this.$api
|
||||
.post(urlLInk, urlTask)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.detailTitle = res.data.production.title;
|
||||
this.Art_P_Id = res.data.production.p_article_id;
|
||||
this.Main_List = res.data.mains;
|
||||
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;
|
||||
}
|
||||
loading.close();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
loading.close();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
loading.close();
|
||||
});
|
||||
},
|
||||
|
||||
// 修改段落/图片
|
||||
MTxtEdit(val, num) {
|
||||
this.picStyle = JSON.parse(JSON.stringify(val));
|
||||
this.picStyle.picUrl = this.picStyle.content;
|
||||
this.picStyle.imageUrl = this.baseUrl + 'public/mainimg/' + this.picStyle.content;
|
||||
this.picStyle.visiTitle = 'Edit Picture';
|
||||
this.pictVisible = true;
|
||||
},
|
||||
|
||||
// 转化为gpt标准格式
|
||||
trsanGtp() {
|
||||
if (this.btnDisble) {
|
||||
this.btnDisble = false;
|
||||
this.$api
|
||||
.post('api/Production/mainGptcheck', {
|
||||
p_main_id: this.txtStyle.p_main_id
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.txtStyle.ChGtpTxt = res.data.content;
|
||||
this.btnDisble = true;
|
||||
// this.$forceUpdate()
|
||||
this.$message.success('Converting success!');
|
||||
} else {
|
||||
this.btnDisble = true;
|
||||
this.$message.error('Converting fail!');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.btnDisble = true;
|
||||
this.$message.error('Converting fail!');
|
||||
});
|
||||
} else {
|
||||
this.$message.warning('Converting, please wait!');
|
||||
}
|
||||
},
|
||||
|
||||
// 替换Gtp生成的内容
|
||||
replceChGpr(val) {
|
||||
this.txtStyle.text = JSON.parse(JSON.stringify(this.txtStyle.ChGtpTxt));
|
||||
},
|
||||
|
||||
// 确定保存段落修改
|
||||
saveTxt() {
|
||||
this.$api
|
||||
.post('api/Production/editProductionMain', {
|
||||
p_main_id: this.txtStyle.p_main_id,
|
||||
content: this.txtStyle.text
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully edit text!');
|
||||
this.txtVisible = false;
|
||||
this.getDate();
|
||||
// this.Main_List[this.txtStyle.index].text = JSON.parse(JSON.stringify(this.txtStyle.text))
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
},
|
||||
|
||||
// 图片段落
|
||||
MTxtPic(val, num) {
|
||||
this.picStyle.pre_type = 'img';
|
||||
// this.picStyle.body = val.p_main_img_id;
|
||||
|
||||
this.picStyle.p_article_id = this.Art_P_Id;
|
||||
this.picStyle.titleBot = '';
|
||||
this.picStyle.note = '';
|
||||
this.picStyle.width = '500';
|
||||
this.picStyle.picUrl = '';
|
||||
this.picStyle.imageUrl = '';
|
||||
this.picStyle.visiTitle = 'Insert Picture Backward';
|
||||
this.pictVisible = true;
|
||||
},
|
||||
|
||||
// 确定保存图片
|
||||
savePic() {
|
||||
this.picStyle.content = this.picStyle.picUrl;
|
||||
this.images.push(this.picStyle);
|
||||
this.pictVisible = false;
|
||||
return false;
|
||||
|
||||
//要走接口
|
||||
if (this.picStyle.note == '') {
|
||||
this.$message.error('Please fill in the picture describe!');
|
||||
return;
|
||||
}
|
||||
|
||||
this.picStyle.content = this.picStyle.picUrl;
|
||||
|
||||
if (this.picStyle.visiTitle == 'Edit Picture') {
|
||||
this.$api
|
||||
.post('api/Production/editProductionMainImg', this.picStyle)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully edit image!');
|
||||
this.pictVisible = false;
|
||||
this.getDate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
} else {
|
||||
this.$api
|
||||
.post('api/Production/addProductionMainImg', this.picStyle)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully added image!');
|
||||
this.pictVisible = false;
|
||||
this.getDate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
}
|
||||
},
|
||||
async removeEvent(row) {
|
||||
// const type = await VXETable.modal.confirm('您确定要删除该数据?')
|
||||
const $table = this.$refs.xTable;
|
||||
// if (type === 'confirm') {
|
||||
$table.remove(row);
|
||||
// }
|
||||
},
|
||||
async insertEvent(row) {
|
||||
const $table = this.$refs.xTable;
|
||||
const record = {};
|
||||
const { row: newRow } = await $table.insertAt(record, row);
|
||||
await $table.setEditCell(newRow, 'name');
|
||||
},
|
||||
// 表格段落
|
||||
MTxtTable(val, num) {
|
||||
// this.lineStyle.p_main_id = val.p_main_id;
|
||||
this.lineStyle.textarea = '';
|
||||
this.lineStyle.titleCon = '';
|
||||
this.lineTable = [];
|
||||
|
||||
this.threeVisible = true;
|
||||
this.typesettingType = '1';
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 表格转化
|
||||
CopyExcelToTable() {
|
||||
if (this.lineStyle.textarea == '') {
|
||||
this.$message.error('Please fill in the table content!');
|
||||
return;
|
||||
}
|
||||
console.log(this.lineStyle.textarea);
|
||||
let txtRows = this.lineStyle.textarea.split('\n');
|
||||
let txtColum = [];
|
||||
for (let i = 0; i < txtRows.length; i++) {
|
||||
if (txtRows[i] != '') {
|
||||
let columns = txtRows[i].split('\t');
|
||||
let dataone = [];
|
||||
for (let j = 0; j < columns.length; j++) {
|
||||
dataone.push(columns[j]);
|
||||
}
|
||||
txtColum.push(dataone);
|
||||
}
|
||||
}
|
||||
let arrwithNumer = Math.floor(100 / txtColum[0].length) - 2;
|
||||
this.lineStyle.arrwith = [];
|
||||
for (let i = 0; i < txtColum[0].length; i++) {
|
||||
this.lineStyle.arrwith.push(arrwithNumer);
|
||||
}
|
||||
this.lineTable = txtColum;
|
||||
},
|
||||
|
||||
// 确定保存表格
|
||||
saveLine() {
|
||||
let dataTable = '';
|
||||
for (let i = 0; i < this.lineTable.length; i++) {
|
||||
let ArryDr = '';
|
||||
let listHNem = '';
|
||||
for (let j = 0; j < this.lineTable[i].length; j++) {
|
||||
let ArrHtml =
|
||||
'<div style="width:' +
|
||||
this.lineStyle.arrwith[j] +
|
||||
'%;line-height: 22px;vertical-align: middle;display: inline-block;padding: 0 1%;font-size: 14px;color: #606266;word-wrap: break-word;word-break: normal;">' +
|
||||
this.lineTable[i][j] +
|
||||
'</div>';
|
||||
ArryDr = ArryDr + ArrHtml;
|
||||
}
|
||||
if (i == 0) {
|
||||
listHNem =
|
||||
'<div style="display: flex;border-top: 2px solid #333333;border-bottom: 1px solid #333333;padding: 10px 0;font-weight: bold;margin-bottom: 20px;">' +
|
||||
ArryDr +
|
||||
'</div>';
|
||||
} else if (i == this.lineTable.length - 1) {
|
||||
listHNem = '<div style="display: flex;border-bottom: 2px solid #333333;padding:0 0 20px 0;">' + ArryDr + '</div>';
|
||||
ArryDr = ArryDr + listHNem;
|
||||
} else {
|
||||
listHNem = '<div style="display: flex;padding:20px 0;">' + ArryDr + '</div>';
|
||||
}
|
||||
dataTable = dataTable + listHNem;
|
||||
}
|
||||
dataTable = '<div style="width:' + this.lineStyle.tabwith + '%">' + dataTable + '</div>';
|
||||
if (this.lineStyle.titleTop != '') {
|
||||
dataTable =
|
||||
'<p style="text-align: center;margin: 0 0 10px 0;font-size: 12px;color: #006699;"><b>' +
|
||||
this.lineStyle.titleTop +
|
||||
'</b></p>' +
|
||||
dataTable;
|
||||
}
|
||||
if (this.lineStyle.titleBot != '') {
|
||||
dataTable =
|
||||
dataTable + '<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">' + this.lineStyle.titleBot + '</p>';
|
||||
}
|
||||
console.log(dataTable);
|
||||
},
|
||||
|
||||
// 删除段落/图片
|
||||
MTxtDelet(val, index) {
|
||||
var imageIndex = this.images.findIndex((e) => e.p_main_img_id == val.p_main_img_id);
|
||||
if (imageIndex > -1) {
|
||||
delete this.images[imageIndex].isHidden;
|
||||
} else {
|
||||
this.images.push(val);
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.Main_List.splice(index, 1);
|
||||
console.log('this.images.push at line 654:', this.images);
|
||||
// this.$api
|
||||
// .post('api/Production/delProductionMainImg', {
|
||||
// p_main_img_id: val.p_main_img_id
|
||||
// })
|
||||
// .then((res) => {
|
||||
// if (res.code == 0) {
|
||||
// this.$message.success('Successfully deleted!');
|
||||
// this.getDate();
|
||||
// // this.Main_List.splice(num, 1);
|
||||
// } else {
|
||||
// this.$message.error(res.msg);
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// this.$message.error(err);
|
||||
// });
|
||||
},
|
||||
|
||||
// 推送
|
||||
pushOnline() {
|
||||
// 二次确认
|
||||
this.$confirm('Are you sure you want to push it to the official website?', 'Tips', {
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
this.$api
|
||||
.post('api/Production/pushMainToWeb', {
|
||||
article_id: this.Art_web_Id,
|
||||
p_article_id: this.Art_P_Id
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully push!');
|
||||
this.getDate();
|
||||
if (this.Art_Doi != undefined) {
|
||||
this.$router.push({
|
||||
path: 'comArtHtmlEdit',
|
||||
query: {
|
||||
artID: this.Art_web_Id
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
handleAvatarSuccess(res, file) {
|
||||
if (res.code == 0) {
|
||||
this.picStyle.picUrl = res.upurl;
|
||||
this.$forceUpdate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
this.picStyle.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
handleAvatarError(res, file) {},
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 1;
|
||||
if (!isLt2M) {
|
||||
this.$message.error('Picture size cannot exceed 1M!');
|
||||
}
|
||||
return isLt2M;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lineStyle {
|
||||
border-top: 1px solid #0066994d;
|
||||
padding: 20px 20px 40px 20px;
|
||||
}
|
||||
|
||||
.lineStyle > div {
|
||||
}
|
||||
|
||||
.lineStyle > div span.title {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin: 0px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.lineStyle > div font.mark {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.lineStyle .styArry {
|
||||
display: inline-block;
|
||||
margin: 15px 40px 0 0;
|
||||
}
|
||||
|
||||
.lineStyle .styArry:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.lineAll {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.lineAll .lineTit {
|
||||
padding: 0 0 20px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.lineAll .lineTit:nth-child(1) {
|
||||
border-top: 2px solid #333333;
|
||||
border-bottom: 1px solid #333333;
|
||||
padding: 10px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lineAll .lineTit:nth-child(2) {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.lineAll .lineTit:nth-last-child(1) {
|
||||
border-bottom: 2px solid #333333;
|
||||
}
|
||||
|
||||
.lineAll .lineTit > div {
|
||||
line-height: 22px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding: 0 1%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.type_MTxt {
|
||||
background-color: #fff;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.type_MTxt > div {
|
||||
position: relative;
|
||||
padding: 8px 15px;
|
||||
min-height: 22px;
|
||||
border: 2px dashed #fff;
|
||||
border-radius: 5px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.type_MTxt > .imgBox:hover {
|
||||
background-color: rgb(0 102 153 / 10%);
|
||||
border: 2px dashed rgb(0 102 153 / 50%);
|
||||
}
|
||||
|
||||
.type_MTxt > div > p {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.type_MTxt > .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;
|
||||
}
|
||||
|
||||
.type_MTxt > div .MaxPicture {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.type_MTxt > div .MaxPicture > img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.type_MTxt > div .MaxPicture > font {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.MaxBtn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -1px;
|
||||
color: #fff;
|
||||
border-radius: 50px;
|
||||
font-size: 15.5px;
|
||||
padding: 6px 7px;
|
||||
display: none;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.MaxBtn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.MaxBtn:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.type_Gbtn {
|
||||
color: #fff;
|
||||
border-color: #006699;
|
||||
background: #006699;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.type_Gbtn:hover {
|
||||
box-shadow: 0 4px 14px rgb(0 102 153 / 30%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.type_CHar {
|
||||
position: relative;
|
||||
border-left: 4px solid rgba(0 102 153 / 20%);
|
||||
border-radius: 5px;
|
||||
padding: 20px 25px 15px 20px;
|
||||
background-color: #fff;
|
||||
margin: 20px 0 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
box-shadow: 0 1px 10px rgb(0 102 153 / 20%);
|
||||
}
|
||||
|
||||
.type_CHar .chReple {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 1px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
background-color: rgb(223 109 11);
|
||||
opacity: 0.85;
|
||||
color: #fff;
|
||||
padding: 1px 10px;
|
||||
}
|
||||
|
||||
.type_CHar .chReple:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.avatar-uploader_small {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar-uploader_small .el-upload {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.avatar-uploader_small .avatar-uploader-icon {
|
||||
line-height: 80px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
}
|
||||
.unfetteredBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unfetteredBox .image {
|
||||
margin-top: 10px;
|
||||
box-shadow: rgba(16, 17, 19, 0.5) 0px 1px 3px;
|
||||
margin-right: 10px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: 4px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
971
src/components/page/GenerateCharts.vue
Normal file
971
src/components/page/GenerateCharts.vue
Normal file
@@ -0,0 +1,971 @@
|
||||
<template>
|
||||
<div style="height: 98%">
|
||||
<div class="crumbs">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item> <i class="el-icon-document-copy"></i> Generate Charts </el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div
|
||||
class="container"
|
||||
style="height: 97%; min-width: calc(1000px - 300px); width: calc(100% - 300px); background-color: #fafafa; padding: 10px 0 0 0"
|
||||
>
|
||||
<h3 class="man_Title">
|
||||
{{ detailTitle }}
|
||||
</h3>
|
||||
<div class="type_MTxt" style="box-sizing: border-box">
|
||||
<div
|
||||
v-for="(item, index) in Main_List"
|
||||
@dragover.prevent
|
||||
:class="item.p_main_img_id ? 'imgBox' : ''"
|
||||
@drop="onDrop($event, index)"
|
||||
>
|
||||
<p v-html="item.text" v-if="!item.p_main_img_id"></p>
|
||||
<p v-if="item.p_main_img_id" class="MaxPicture">
|
||||
<img :src="baseUrl + 'public/mainimg/' + item.content" :style="'width:' + item.width + 'px'" />
|
||||
<font :style="'width:' + item.width + 'px'">{{ item.note }} </font>
|
||||
</p>
|
||||
<font v-if="item.getnum != 0" class="chNumer">{{ item.getnum }}</font>
|
||||
<b
|
||||
class="MaxBtn"
|
||||
@click="MTxtEdit(item, index)"
|
||||
style="background-color: #006699; right: 40px"
|
||||
v-if="item.p_main_img_id"
|
||||
>
|
||||
<i class="el-icon-edit"></i>
|
||||
</b>
|
||||
<!-- <b class="MaxBtn" @click="MTxtPic(item, index)" style="background-color: #13bc20; right: 40px">
|
||||
<svg
|
||||
t="1684978324047"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1967"
|
||||
width="15"
|
||||
height="15"
|
||||
>
|
||||
<path
|
||||
d="M512 46.208a42.666667 42.666667 0 0 1 4.992 85.077333L512 131.541333H174.208a42.666667 42.666667 0 0 0-42.368 37.717334l-0.298667 4.949333v487.850667L307.2 501.12a88.874667 88.874667 0 0 1 112.042667-6.570667l5.845333 4.608 150.442667 128.896 101.973333-101.888a88.874667 88.874667 0 0 1 110.122667-12.373333l6.058666 4.138667 104.832 78.592V512a42.666667 42.666667 0 0 1 85.077334-4.992l0.298666 4.992v342.698667a128 128 0 0 1-120.490666 127.786666l-7.509334 0.213334H174.208a128 128 0 0 1-127.786667-120.490667l-0.213333-7.509333V174.208a128 128 0 0 1 120.490667-127.786667l7.509333-0.213333H512zM366.378667 563.2l-1.536 0.853333-233.301334 213.76v76.885334a42.666667 42.666667 0 0 0 37.717334 42.368l4.949333 0.298666H855.893333a42.666667 42.666667 0 0 0 42.368-37.717333l0.298667-4.949333v-151.808l-3.285333-2.090667-152.789334-114.602667a3.541333 3.541333 0 0 0-3.2-0.554666l-1.450666 0.853333-97.28 97.28 76.970666 66.048a42.666667 42.666667 0 0 1-51.2 68.010667l-4.309333-3.2-292.437333-250.666667a3.541333 3.541333 0 0 0-3.2-0.768z m415.829333-516.992a42.666667 42.666667 0 0 1 42.410667 37.717333l0.256 4.949334v96h96a42.666667 42.666667 0 0 1 4.992 85.077333l-4.992 0.256h-96v96a42.666667 42.666667 0 0 1-85.034667 4.992l-0.298667-4.992v-96h-96a42.666667 42.666667 0 0 1-4.949333-85.034667l4.949333-0.298666h96v-96a42.666667 42.666667 0 0 1 42.666667-42.666667z"
|
||||
fill="#ffffff"
|
||||
p-id="1968"
|
||||
></path>
|
||||
</svg>
|
||||
</b> -->
|
||||
<!-- <b class="MaxBtn" @click="MTxtTable(item, index)" style="background-color: #e07404; right: 0px">
|
||||
<i class="el-icon-document-add"></i>
|
||||
</b> -->
|
||||
<b
|
||||
class="MaxBtn"
|
||||
@click="MTxtDelet(item, index)"
|
||||
style="background-color: #bc1a13; right: 0px"
|
||||
v-if="item.p_main_img_id"
|
||||
>
|
||||
<i class="el-icon-delete"></i>
|
||||
</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height: 20px" v-if="Art_Doi == undefined"></div>
|
||||
<div style="margin: 20px 0 0 0; text-align: center; padding-bottom: 30px" v-if="Art_Doi != undefined">
|
||||
<el-button icon="el-icon-finished" type="primary" style="width: 350px" @click="pushOnline()"> Push Online </el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="right-side"
|
||||
style="
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 17vh;
|
||||
bottom: 10px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
||||
border-radius: 4px;
|
||||
"
|
||||
>
|
||||
<p style="padding: 10px 10px; box-sizing: border-box; font-weight: bold">
|
||||
Unfettered area
|
||||
<b class="MaxBtn" @click="MTxtPic()" style="background-color: #13bc20; right: 40px; top: 5px">
|
||||
<svg
|
||||
t="1684978324047"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1967"
|
||||
width="15"
|
||||
height="15"
|
||||
>
|
||||
<path
|
||||
d="M512 46.208a42.666667 42.666667 0 0 1 4.992 85.077333L512 131.541333H174.208a42.666667 42.666667 0 0 0-42.368 37.717334l-0.298667 4.949333v487.850667L307.2 501.12a88.874667 88.874667 0 0 1 112.042667-6.570667l5.845333 4.608 150.442667 128.896 101.973333-101.888a88.874667 88.874667 0 0 1 110.122667-12.373333l6.058666 4.138667 104.832 78.592V512a42.666667 42.666667 0 0 1 85.077334-4.992l0.298666 4.992v342.698667a128 128 0 0 1-120.490666 127.786666l-7.509334 0.213334H174.208a128 128 0 0 1-127.786667-120.490667l-0.213333-7.509333V174.208a128 128 0 0 1 120.490667-127.786667l7.509333-0.213333H512zM366.378667 563.2l-1.536 0.853333-233.301334 213.76v76.885334a42.666667 42.666667 0 0 0 37.717334 42.368l4.949333 0.298666H855.893333a42.666667 42.666667 0 0 0 42.368-37.717333l0.298667-4.949333v-151.808l-3.285333-2.090667-152.789334-114.602667a3.541333 3.541333 0 0 0-3.2-0.554666l-1.450666 0.853333-97.28 97.28 76.970666 66.048a42.666667 42.666667 0 0 1-51.2 68.010667l-4.309333-3.2-292.437333-250.666667a3.541333 3.541333 0 0 0-3.2-0.768z m415.829333-516.992a42.666667 42.666667 0 0 1 42.410667 37.717333l0.256 4.949334v96h96a42.666667 42.666667 0 0 1 4.992 85.077333l-4.992 0.256h-96v96a42.666667 42.666667 0 0 1-85.034667 4.992l-0.298667-4.992v-96h-96a42.666667 42.666667 0 0 1-4.949333-85.034667l4.949333-0.298666h96v-96a42.666667 42.666667 0 0 1 42.666667-42.666667z"
|
||||
fill="#ffffff"
|
||||
p-id="1968"
|
||||
></path>
|
||||
</svg> </b
|
||||
><b class="MaxBtn" @click="MTxtTable()" style="background-color: #e07404; right: 0px; top: 5px">
|
||||
<i class="el-icon-document-add"></i>
|
||||
</b>
|
||||
</p>
|
||||
<div class="unfetteredBox">
|
||||
<div
|
||||
:style="item.isHidden ? 'opacity:0.2' : 'opacity:1'"
|
||||
v-for="(item, index) in images"
|
||||
:key="index"
|
||||
class="image"
|
||||
draggable="true"
|
||||
@dragstart="onDragStart($event, item, index)"
|
||||
>
|
||||
<img :src="baseUrl + 'public/mainimg/' + item.content" style="width: 100%; height: 100%; object-fit: cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--修改文本 -->
|
||||
<el-dialog title="Edit Text" :visible.sync="txtVisible" width="800px" :close-on-click-modal="false">
|
||||
<el-form ref="editMes" :model="txtStyle" label-width="1px">
|
||||
<p style="margin: 0 5px 15px 5px; line-height: 18px; font-size: 13px; color: #aaa">{{ exegesis }}</p>
|
||||
<el-form-item label="">
|
||||
<el-input type="textarea" placeholder="Please enter the table content..." v-model="txtStyle.text" autosize> </el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<p class="type_Gbtn" @click="trsanGtp">
|
||||
<i class="el-icon-document-copy" style="margin-right: 5px" v-if="btnDisble"></i>
|
||||
<i class="el-icon-loading" style="margin-right: 5px" v-if="!btnDisble"></i>
|
||||
TMRGTP Proofreading
|
||||
</p>
|
||||
<div class="type_CHar" v-if="txtStyle.ChGtpTxt != ''">
|
||||
<p v-html="txtStyle.ChGtpTxt"></p>
|
||||
<font class="chReple" @click="replceChGpr(item)">Replace</font>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="txtVisible = false"> Cancel </el-button>
|
||||
<el-button type="primary" @click="saveTxt">
|
||||
<i class="el-icon-finished" style="margin-right: 5px"></i>
|
||||
Save
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!--添加/修改图片 -->
|
||||
<el-dialog :title="picStyle.visiTitle" :visible.sync="pictVisible" width="800px" :close-on-click-modal="false">
|
||||
<el-form ref="editMes" :model="picStyle" label-width="150px">
|
||||
<el-form-item>
|
||||
<span slot="label">
|
||||
<font style="color: #f56c6c; margin-right: 5px">*</font>
|
||||
Picture :
|
||||
</span>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="'/api/api/Production/up_mainimg_file'"
|
||||
:show-file-list="false"
|
||||
name="mainimg"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:on-error="handleAvatarError"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img v-if="picStyle.imageUrl" :src="picStyle.imageUrl" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="Bottom Title :">
|
||||
<el-input placeholder="Please enter the table title..." v-model="picStyle.titleBot">
|
||||
</el-input>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="Picture Describe :">
|
||||
<el-input placeholder="Please enter the table describe..." v-model="picStyle.note" type="textarea" :rows="3">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<p style="margin: 20px 0; text-align: right">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
@click="
|
||||
picStyle.picUrl = '';
|
||||
picStyle.titleBot = '';
|
||||
picStyle.note = '';
|
||||
picStyle.imageUrl = '';
|
||||
"
|
||||
>
|
||||
<i class="el-icon-refresh" style="margin-right: 5px"></i>Empty
|
||||
</el-button>
|
||||
</p>
|
||||
<div class="lineStyle" v-if="picStyle.picUrl != ''">
|
||||
<div>
|
||||
<span class="title" style="margin-left: 25px">Picture Width :</span>
|
||||
<el-input v-model="picStyle.width" style="width: 120px">
|
||||
<template slot="append">px</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 20px" v-if="picStyle.picUrl != ''">
|
||||
<div style="text-align: center">
|
||||
<img :src="baseUrl + 'public/mainimg/' + picStyle.picUrl" :style="'width:' + picStyle.width + 'px'" />
|
||||
</div>
|
||||
<p style="text-align: center; margin: 10px 0 15px 0; font-size: 12px; color: #006699">
|
||||
<b>{{ picStyle.titleBot }}</b>
|
||||
</p>
|
||||
<p
|
||||
style="text-align: center; margin: 10px auto 0; font-size: 12px; line-height: 22px"
|
||||
:style="'width:' + picStyle.width + 'px'"
|
||||
v-html="picStyle.note"
|
||||
></p>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer" v-if="picStyle.picUrl != ''">
|
||||
<el-button @click="pictVisible = false"> Cancel </el-button>
|
||||
<el-button type="primary" @click="savePic">
|
||||
<i class="el-icon-finished" style="margin-right: 5px"></i>
|
||||
Save Picture
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 添加表格 -->
|
||||
<el-dialog title="Insert Table" :visible.sync="threeVisible" width="1200px" :close-on-click-modal="false" >
|
||||
<el-form ref="editMes" :model="lineStyle" label-width="115px">
|
||||
<el-form-item label="Top Title :">
|
||||
<el-input placeholder="Please enter the table title..." v-model="lineStyle.titleTop"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Word">
|
||||
<span slot="label">
|
||||
<font style="color: #f56c6c; margin-right: 5px">*</font>
|
||||
Content :
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
<common-table ref="commonTable" style="margin-left: -115px;" :lineStyle="lineStyle"></common-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="Bottom Title :">
|
||||
<el-input placeholder="Please enter the table title..." v-model="lineStyle.titleBot"> </el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<p style="margin: 20px 0; text-align: right">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
@click="
|
||||
lineStyle.textarea = '';
|
||||
lineStyle.titleTop = '';
|
||||
lineStyle.titleBot = '';
|
||||
lineTable = [];
|
||||
"
|
||||
>
|
||||
<i class="el-icon-refresh" style="margin-right: 5px"></i>Empty
|
||||
</el-button>
|
||||
<el-button type="primary" plain @click="CopyExcelToTable">
|
||||
<i class="el-icon-sort" style="margin-right: 5px"></i>Generate Table
|
||||
</el-button>
|
||||
</p>
|
||||
<div class="lineStyle" v-if="lineTable.length != 0">
|
||||
<div>
|
||||
<span class="title">Table All Width :</span>
|
||||
<el-input v-model="lineStyle.tabwith" style="width: 120px">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<div v-for="(item, index) in lineStyle.arrwith" class="styArry">
|
||||
<span class="title"
|
||||
>Column <b style="color: #006699">{{ index + 1 }}</b> :</span
|
||||
>
|
||||
<el-input v-model="lineStyle.arrwith[index]" style="width: 100px">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="saveLine" v-if="lineTable.length != 0">
|
||||
<i class="el-icon-finished" style="margin-right: 5px"></i>
|
||||
Save Table
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { del } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: [
|
||||
{
|
||||
p_main_img_id: 157,
|
||||
p_article_id: 2141,
|
||||
p_main_id: 101853,
|
||||
pre_id: 0,
|
||||
width: 500,
|
||||
content: '20240906/7c4cfd8f431cddf05f33634d4ee2cdca.jpg',
|
||||
note: 'Figure 1 Oracle bone inscriptions of YANG',
|
||||
ctime: 0,
|
||||
state: 0
|
||||
}
|
||||
],
|
||||
baseUrl: this.Common.baseUrl,
|
||||
baseUrl: 'https://submission.tmrjournals.com/',
|
||||
mediaUrl: this.Common.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: '',
|
||||
Main_List: [],
|
||||
txtStyle: {
|
||||
text: '',
|
||||
ChGtpTxt: ''
|
||||
},
|
||||
txtVisible: false,
|
||||
lineStyle: {
|
||||
titleTop: '',
|
||||
titleBot: '',
|
||||
textarea: '',
|
||||
tableData: [],
|
||||
tabwith: '100',
|
||||
arrwith: []
|
||||
},
|
||||
lineTable: [],
|
||||
threeVisible: false,
|
||||
picStyle: {
|
||||
titleBot: '',
|
||||
note: '',
|
||||
// picUrl: 'https://www.tmrjournals.cn/public/articleHTML/TMR/TMR20230213002/images/alternativeImage/TMR20230213002-F004.jpg',
|
||||
picUrl: '',
|
||||
imageUrl: '',
|
||||
width: '500'
|
||||
},
|
||||
pictVisible: false,
|
||||
typesettingType: 1,
|
||||
exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!"
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getDate();
|
||||
},
|
||||
|
||||
methods: {
|
||||
onDragStart(event, image, index) {
|
||||
event.dataTransfer.setData('image', JSON.stringify({ ...image, isNewReformat: true }));
|
||||
event.dataTransfer.setData('imageIndex', index);
|
||||
},
|
||||
onDrop(event, index) {
|
||||
console.log('index at line 297:', index);
|
||||
const draggedImage = JSON.parse(event.dataTransfer.getData('image'));
|
||||
const draggedImageIndex = JSON.parse(event.dataTransfer.getData('imageIndex'));
|
||||
console.log('draggedImage at line 298:', draggedImage);
|
||||
this.Main_List.splice(index, 0, draggedImage);
|
||||
this.images[draggedImageIndex].isHidden = true;
|
||||
},
|
||||
// 获取数据
|
||||
getDate() {
|
||||
let urlLInk = '';
|
||||
let urlTask = {};
|
||||
if (this.Art_Id != undefined) {
|
||||
urlLInk = 'api/Production/getProductionMains';
|
||||
urlTask.p_article_id = this.Art_Id;
|
||||
}
|
||||
// if (this.Art_Doi != undefined) {
|
||||
// urlLInk = 'api/Production/getProductionMainsByDoi';
|
||||
// urlTask.doi = this.Art_Doi;
|
||||
// }
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: 'Loading...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
|
||||
// 获取文章信息
|
||||
this.$api
|
||||
.post(urlLInk, urlTask)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.detailTitle = res.data.production.title;
|
||||
this.Art_P_Id = res.data.production.p_article_id;
|
||||
this.Main_List = res.data.mains;
|
||||
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;
|
||||
}
|
||||
loading.close();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
loading.close();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
loading.close();
|
||||
});
|
||||
},
|
||||
|
||||
// 修改段落/图片
|
||||
MTxtEdit(val, num) {
|
||||
this.picStyle = JSON.parse(JSON.stringify(val));
|
||||
this.picStyle.picUrl = this.picStyle.content;
|
||||
this.picStyle.imageUrl = this.baseUrl + 'public/mainimg/' + this.picStyle.content;
|
||||
this.picStyle.visiTitle = 'Edit Picture';
|
||||
this.pictVisible = true;
|
||||
},
|
||||
|
||||
// 转化为gpt标准格式
|
||||
trsanGtp() {
|
||||
if (this.btnDisble) {
|
||||
this.btnDisble = false;
|
||||
this.$api
|
||||
.post('api/Production/mainGptcheck', {
|
||||
p_main_id: this.txtStyle.p_main_id
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.txtStyle.ChGtpTxt = res.data.content;
|
||||
this.btnDisble = true;
|
||||
// this.$forceUpdate()
|
||||
this.$message.success('Converting success!');
|
||||
} else {
|
||||
this.btnDisble = true;
|
||||
this.$message.error('Converting fail!');
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.btnDisble = true;
|
||||
this.$message.error('Converting fail!');
|
||||
});
|
||||
} else {
|
||||
this.$message.warning('Converting, please wait!');
|
||||
}
|
||||
},
|
||||
|
||||
// 替换Gtp生成的内容
|
||||
replceChGpr(val) {
|
||||
this.txtStyle.text = JSON.parse(JSON.stringify(this.txtStyle.ChGtpTxt));
|
||||
},
|
||||
|
||||
// 确定保存段落修改
|
||||
saveTxt() {
|
||||
this.$api
|
||||
.post('api/Production/editProductionMain', {
|
||||
p_main_id: this.txtStyle.p_main_id,
|
||||
content: this.txtStyle.text
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully edit text!');
|
||||
this.txtVisible = false;
|
||||
this.getDate();
|
||||
// this.Main_List[this.txtStyle.index].text = JSON.parse(JSON.stringify(this.txtStyle.text))
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
},
|
||||
|
||||
// 图片段落
|
||||
MTxtPic(val, num) {
|
||||
this.picStyle.pre_type = 'img';
|
||||
// this.picStyle.body = val.p_main_img_id;
|
||||
|
||||
this.picStyle.p_article_id = this.Art_P_Id;
|
||||
this.picStyle.titleBot = '';
|
||||
this.picStyle.note = '';
|
||||
this.picStyle.width = '500';
|
||||
this.picStyle.picUrl = '';
|
||||
this.picStyle.imageUrl = '';
|
||||
this.picStyle.visiTitle = 'Insert Picture Backward';
|
||||
this.pictVisible = true;
|
||||
},
|
||||
|
||||
// 确定保存图片
|
||||
savePic() {
|
||||
this.picStyle.content = this.picStyle.picUrl;
|
||||
this.images.push(this.picStyle);
|
||||
this.pictVisible = false;
|
||||
return false;
|
||||
|
||||
//要走接口
|
||||
if (this.picStyle.note == '') {
|
||||
this.$message.error('Please fill in the picture describe!');
|
||||
return;
|
||||
}
|
||||
|
||||
this.picStyle.content = this.picStyle.picUrl;
|
||||
|
||||
if (this.picStyle.visiTitle == 'Edit Picture') {
|
||||
this.$api
|
||||
.post('api/Production/editProductionMainImg', this.picStyle)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully edit image!');
|
||||
this.pictVisible = false;
|
||||
this.getDate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
} else {
|
||||
this.$api
|
||||
.post('api/Production/addProductionMainImg', this.picStyle)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully added image!');
|
||||
this.pictVisible = false;
|
||||
this.getDate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
}
|
||||
},
|
||||
async removeEvent(row) {
|
||||
// const type = await VXETable.modal.confirm('您确定要删除该数据?')
|
||||
const $table = this.$refs.xTable;
|
||||
// if (type === 'confirm') {
|
||||
$table.remove(row);
|
||||
// }
|
||||
},
|
||||
async insertEvent(row) {
|
||||
const $table = this.$refs.xTable;
|
||||
const record = {};
|
||||
const { row: newRow } = await $table.insertAt(record, row);
|
||||
await $table.setEditCell(newRow, 'name');
|
||||
},
|
||||
// 表格段落
|
||||
MTxtTable(val, num) {
|
||||
// this.lineStyle.p_main_id = val.p_main_id;
|
||||
this.lineStyle.textarea = '';
|
||||
this.lineStyle.titleCon = '';
|
||||
this.lineTable = [];
|
||||
|
||||
this.threeVisible = true;
|
||||
this.typesettingType = '1';
|
||||
this.$forceUpdate();
|
||||
},
|
||||
|
||||
// 表格转化
|
||||
CopyExcelToTable() {
|
||||
if (this.lineStyle.textarea == '') {
|
||||
this.$message.error('Please fill in the table content!');
|
||||
return;
|
||||
}
|
||||
console.log(this.lineStyle.textarea);
|
||||
let txtRows = this.lineStyle.textarea.split('\n');
|
||||
let txtColum = [];
|
||||
for (let i = 0; i < txtRows.length; i++) {
|
||||
if (txtRows[i] != '') {
|
||||
let columns = txtRows[i].split('\t');
|
||||
let dataone = [];
|
||||
for (let j = 0; j < columns.length; j++) {
|
||||
dataone.push(columns[j]);
|
||||
}
|
||||
txtColum.push(dataone);
|
||||
}
|
||||
}
|
||||
let arrwithNumer = Math.floor(100 / txtColum[0].length) - 2;
|
||||
this.lineStyle.arrwith = [];
|
||||
for (let i = 0; i < txtColum[0].length; i++) {
|
||||
this.lineStyle.arrwith.push(arrwithNumer);
|
||||
}
|
||||
this.lineTable = txtColum;
|
||||
},
|
||||
|
||||
// 确定保存表格
|
||||
saveLine() {
|
||||
let dataTable = '';
|
||||
for (let i = 0; i < this.lineTable.length; i++) {
|
||||
let ArryDr = '';
|
||||
let listHNem = '';
|
||||
for (let j = 0; j < this.lineTable[i].length; j++) {
|
||||
let ArrHtml =
|
||||
'<div style="width:' +
|
||||
this.lineStyle.arrwith[j] +
|
||||
'%;line-height: 22px;vertical-align: middle;display: inline-block;padding: 0 1%;font-size: 14px;color: #606266;word-wrap: break-word;word-break: normal;">' +
|
||||
this.lineTable[i][j] +
|
||||
'</div>';
|
||||
ArryDr = ArryDr + ArrHtml;
|
||||
}
|
||||
if (i == 0) {
|
||||
listHNem =
|
||||
'<div style="display: flex;border-top: 2px solid #333333;border-bottom: 1px solid #333333;padding: 10px 0;font-weight: bold;margin-bottom: 20px;">' +
|
||||
ArryDr +
|
||||
'</div>';
|
||||
} else if (i == this.lineTable.length - 1) {
|
||||
listHNem = '<div style="display: flex;border-bottom: 2px solid #333333;padding:0 0 20px 0;">' + ArryDr + '</div>';
|
||||
ArryDr = ArryDr + listHNem;
|
||||
} else {
|
||||
listHNem = '<div style="display: flex;padding:20px 0;">' + ArryDr + '</div>';
|
||||
}
|
||||
dataTable = dataTable + listHNem;
|
||||
}
|
||||
dataTable = '<div style="width:' + this.lineStyle.tabwith + '%">' + dataTable + '</div>';
|
||||
if (this.lineStyle.titleTop != '') {
|
||||
dataTable =
|
||||
'<p style="text-align: center;margin: 0 0 10px 0;font-size: 12px;color: #006699;"><b>' +
|
||||
this.lineStyle.titleTop +
|
||||
'</b></p>' +
|
||||
dataTable;
|
||||
}
|
||||
if (this.lineStyle.titleBot != '') {
|
||||
dataTable =
|
||||
dataTable + '<p style="text-align: center;margin: 10px 0 0 0;font-size: 12px;">' + this.lineStyle.titleBot + '</p>';
|
||||
}
|
||||
console.log(dataTable);
|
||||
},
|
||||
|
||||
// 删除段落/图片
|
||||
MTxtDelet(val, index) {
|
||||
var imageIndex = this.images.findIndex((e) => e.p_main_img_id == val.p_main_img_id);
|
||||
if (imageIndex > -1) {
|
||||
delete this.images[imageIndex].isHidden;
|
||||
} else {
|
||||
this.images.push(val);
|
||||
}
|
||||
this.$forceUpdate();
|
||||
this.Main_List.splice(index, 1);
|
||||
console.log('this.images.push at line 654:', this.images);
|
||||
// this.$api
|
||||
// .post('api/Production/delProductionMainImg', {
|
||||
// p_main_img_id: val.p_main_img_id
|
||||
// })
|
||||
// .then((res) => {
|
||||
// if (res.code == 0) {
|
||||
// this.$message.success('Successfully deleted!');
|
||||
// this.getDate();
|
||||
// // this.Main_List.splice(num, 1);
|
||||
// } else {
|
||||
// this.$message.error(res.msg);
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// this.$message.error(err);
|
||||
// });
|
||||
},
|
||||
|
||||
// 推送
|
||||
pushOnline() {
|
||||
// 二次确认
|
||||
this.$confirm('Are you sure you want to push it to the official website?', 'Tips', {
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
this.$api
|
||||
.post('api/Production/pushMainToWeb', {
|
||||
article_id: this.Art_web_Id,
|
||||
p_article_id: this.Art_P_Id
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('Successfully push!');
|
||||
this.getDate();
|
||||
if (this.Art_Doi != undefined) {
|
||||
this.$router.push({
|
||||
path: 'comArtHtmlEdit',
|
||||
query: {
|
||||
artID: this.Art_web_Id
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$message.error(err);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
handleAvatarSuccess(res, file) {
|
||||
if (res.code == 0) {
|
||||
this.picStyle.picUrl = res.upurl;
|
||||
this.$forceUpdate();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
this.picStyle.imageUrl = URL.createObjectURL(file.raw);
|
||||
},
|
||||
handleAvatarError(res, file) {},
|
||||
beforeAvatarUpload(file) {
|
||||
const isLt2M = file.size / 1024 / 1024 < 1;
|
||||
if (!isLt2M) {
|
||||
this.$message.error('Picture size cannot exceed 1M!');
|
||||
}
|
||||
return isLt2M;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lineStyle {
|
||||
border-top: 1px solid #0066994d;
|
||||
padding: 20px 20px 40px 20px;
|
||||
}
|
||||
|
||||
.lineStyle > div {
|
||||
}
|
||||
|
||||
.lineStyle > div span.title {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin: 0px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.lineStyle > div font.mark {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
margin: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.lineStyle .styArry {
|
||||
display: inline-block;
|
||||
margin: 15px 40px 0 0;
|
||||
}
|
||||
|
||||
.lineStyle .styArry:nth-last-child(1) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.lineAll {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.lineAll .lineTit {
|
||||
padding: 0 0 20px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.lineAll .lineTit:nth-child(1) {
|
||||
border-top: 2px solid #333333;
|
||||
border-bottom: 1px solid #333333;
|
||||
padding: 10px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lineAll .lineTit:nth-child(2) {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.lineAll .lineTit:nth-last-child(1) {
|
||||
border-bottom: 2px solid #333333;
|
||||
}
|
||||
|
||||
.lineAll .lineTit > div {
|
||||
line-height: 22px;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
padding: 0 1%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.type_MTxt {
|
||||
background-color: #fff;
|
||||
padding: 0 10px 10px 10px;
|
||||
box-shadow: 0 1px 3px rgb(16 17 19 / 6%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.type_MTxt > div {
|
||||
position: relative;
|
||||
padding: 8px 15px;
|
||||
min-height: 22px;
|
||||
border: 2px dashed #fff;
|
||||
border-radius: 5px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.type_MTxt > .imgBox:hover {
|
||||
background-color: rgb(0 102 153 / 10%);
|
||||
border: 2px dashed rgb(0 102 153 / 50%);
|
||||
}
|
||||
|
||||
.type_MTxt > div > p {
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.type_MTxt > .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;
|
||||
}
|
||||
|
||||
.type_MTxt > div .MaxPicture {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.type_MTxt > div .MaxPicture > img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.type_MTxt > div .MaxPicture > font {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.MaxBtn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -1px;
|
||||
color: #fff;
|
||||
border-radius: 50px;
|
||||
font-size: 15.5px;
|
||||
padding: 6px 7px;
|
||||
display: none;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.MaxBtn {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.MaxBtn:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.type_Gbtn {
|
||||
color: #fff;
|
||||
border-color: #006699;
|
||||
background: #006699;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.type_Gbtn:hover {
|
||||
box-shadow: 0 4px 14px rgb(0 102 153 / 30%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.type_CHar {
|
||||
position: relative;
|
||||
border-left: 4px solid rgba(0 102 153 / 20%);
|
||||
border-radius: 5px;
|
||||
padding: 20px 25px 15px 20px;
|
||||
background-color: #fff;
|
||||
margin: 20px 0 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
box-shadow: 0 1px 10px rgb(0 102 153 / 20%);
|
||||
}
|
||||
|
||||
.type_CHar .chReple {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 1px;
|
||||
border-radius: 3px;
|
||||
font-size: 10px;
|
||||
background-color: rgb(223 109 11);
|
||||
opacity: 0.85;
|
||||
color: #fff;
|
||||
padding: 1px 10px;
|
||||
}
|
||||
|
||||
.type_CHar .chReple:hover {
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.avatar-uploader_small {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar-uploader_small .el-upload {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.avatar-uploader_small .avatar-uploader-icon {
|
||||
line-height: 80px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
}
|
||||
.unfetteredBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.unfetteredBox .image {
|
||||
margin-top: 10px;
|
||||
box-shadow: rgba(16, 17, 19, 0.5) 0px 1px 3px;
|
||||
margin-right: 10px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
border-radius: 4px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
522
src/components/page/components/Tinymce/index.vue
Normal file
522
src/components/page/components/Tinymce/index.vue
Normal file
@@ -0,0 +1,522 @@
|
||||
<template>
|
||||
<div class="tinymce-container editor-container">
|
||||
<textarea class="tinymce-textarea" :id="tinymceId"></textarea>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { string } from 'html-docx-js/dist/html-docx';
|
||||
import htmlDocx from 'html-docx-js/dist/html-docx.js';
|
||||
import { Document, Packer, PageOrientation, Paragraph, TextRun } from "docx"; // 引入 docx.js
|
||||
import html2canvas from 'html2canvas';
|
||||
const toolbar =
|
||||
'undo redo | formatselect | bold italic | forecolor |subscript superscript|table tabledelete | |spacer customButton |customButtonExportWord |customButtonExportImg | pageOrientation';
|
||||
const tableStyle = ` b span{
|
||||
font-weight: bold !important;
|
||||
}
|
||||
i span{
|
||||
font-style: italic !important; ;
|
||||
}
|
||||
sub span{
|
||||
vertical-align: sub;
|
||||
}
|
||||
sup span{
|
||||
vertical-align: sup;
|
||||
}
|
||||
table {
|
||||
border:0px !important;
|
||||
border-collapse: collapse; /* 去除单元格间隙 */
|
||||
width: auto;
|
||||
margin : 0 auto !important;
|
||||
table-layout: auto; /* 自动调整列宽 */
|
||||
text-align:left;
|
||||
font-family:'Charis SIL' !important;
|
||||
font-size: 7.5000pt !important;
|
||||
mso-font-kerning: 1.0000pt !important;
|
||||
line-height: 10pt !important;
|
||||
mos-line-height: 10pt !important;
|
||||
}
|
||||
table td, table th {
|
||||
padding: 5px;
|
||||
text-align:left !important;
|
||||
white-space: pre-wrap; /* 保留换行符并换行 */
|
||||
word-wrap: break-word; /* 长单词自动换行 */
|
||||
word-break: break-word;
|
||||
font-family:'Charis SIL' !important;
|
||||
font-size: 7.5000pt !important;
|
||||
mso-font-kerning: 1.0000pt !important;
|
||||
line-height: 10pt !important;
|
||||
mos-line-height: 10pt !important;
|
||||
}
|
||||
table tr td{
|
||||
text-align:left !important;
|
||||
border-left:none !important;
|
||||
mso-border-left-alt:none !important;
|
||||
border-right:none !important;
|
||||
mso-border-right-alt:none !important;
|
||||
border-top:none;mso-border-top-alt:none !important;
|
||||
border-bottom:none !important;
|
||||
mso-border-bottom-alt:none !important;
|
||||
border:1px dashed #dcdfe6 !important;
|
||||
border-left:1px dashed #dcdfe6 !important;
|
||||
border-right:1px dashed #dcdfe6 !important;
|
||||
|
||||
}
|
||||
table tr td p{
|
||||
display:flex;text-align:left !important;
|
||||
align-items:center;
|
||||
margin:0;
|
||||
font-family:'Charis SIL' !important;
|
||||
font-size: 7.5000pt !important;
|
||||
mso-font-kerning: 1.0000pt !important;
|
||||
line-height: 10pt !important;
|
||||
mos-line-height: 10pt !important;
|
||||
}
|
||||
table span{
|
||||
color:#000000;text-align:left !important;
|
||||
font-family:'Charis SIL' !important;
|
||||
font-size: 7.5000pt !important;
|
||||
mso-font-kerning: 1.0000pt !important;
|
||||
line-height: 10pt !important;
|
||||
mos-line-height: 10pt !important;
|
||||
}
|
||||
table .color-highlight{
|
||||
color:rgb(0,130,170) !important;
|
||||
font-family:'Charis SIL' !important;
|
||||
font-size: 7.5000pt !important;
|
||||
mso-font-kerning: 1.0000pt !important;
|
||||
line-height: 10pt !important;
|
||||
mos-line-height: 10pt !important;
|
||||
}
|
||||
|
||||
`;
|
||||
export default {
|
||||
name: 'tinymce',
|
||||
components: {},
|
||||
props: {
|
||||
id: {
|
||||
type: String
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isEdit: {},
|
||||
toolbar: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
menubar: {
|
||||
default: 'file edit insert view format table '
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 360
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '100%'
|
||||
},
|
||||
isShowArtWorkButton: {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
typesettingType: 1,
|
||||
uploadReset: false,
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
},
|
||||
formLabelWidth: '120px',
|
||||
hasChange: false,
|
||||
hasInit: false,
|
||||
|
||||
tinymceId: this.id || 'vue-tinymce-' + +new Date()
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
if (!this.hasChange && this.hasInit) {
|
||||
this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.typesettingType = 1;
|
||||
this.initTinymce();
|
||||
},
|
||||
activated() {
|
||||
this.typesettingType = 1;
|
||||
this.initTinymce();
|
||||
},
|
||||
deactivated() {
|
||||
this.destroyTinymce();
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$refs.uploadImage.handleSubmit();
|
||||
},
|
||||
getDetail(val) {
|
||||
if (this.hasInit == true) {
|
||||
this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val));
|
||||
}
|
||||
},
|
||||
//将字符串添加到富文本编辑器中
|
||||
addArtWork(str) {
|
||||
window.tinymce.get(this.tinymceId).insertContent(str);
|
||||
},
|
||||
onClick(e) {
|
||||
this.$emit('onClick', e, tinymce);
|
||||
},
|
||||
|
||||
changeTable() {
|
||||
// 获取所有表格
|
||||
const tables = window.tinymce.get(this.tinymceId).getBody().querySelectorAll('table');
|
||||
console.log('tables at line 110:', tables);
|
||||
|
||||
// 遍历并设置样式
|
||||
tables.forEach((table) => {
|
||||
const editor = window.tinymce.get(this.tinymceId);
|
||||
editor.dom.setStyles(table, {
|
||||
width: this.typesettingType == 1 ? '171.5mm' : '258.6mm'
|
||||
});
|
||||
});
|
||||
|
||||
this.$forceUpdate();
|
||||
},
|
||||
initTinymce() {
|
||||
const _this = this;
|
||||
window.tinymce.init({
|
||||
selector: `#${this.tinymceId}`,
|
||||
content_css: false, // 禁用默认样式
|
||||
table_resize_bars: true, // 启用拖动调整功能
|
||||
valid_elements: '*[*]', // 允许所有 HTML 标签
|
||||
|
||||
paste_preprocess: function (plugin, args) {
|
||||
let content = args.content;
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = content;
|
||||
_this.updateTableStyles(container);
|
||||
args.content = container.innerHTML; // 更新内容
|
||||
},
|
||||
content_style: `${tableStyle}`,
|
||||
formats: {
|
||||
bold: { inline: 'b' },
|
||||
italic: { inline: 'i' }
|
||||
},
|
||||
body_class: 'panel-body ',
|
||||
object_resizing: false,
|
||||
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
|
||||
menubar: false, // 启用菜单栏并保持必要的项目
|
||||
statusbar: false, // 关闭底部状态栏
|
||||
custom_colors: false,
|
||||
color_map: ['000000', 'Black', '0082AA', 'TMR Blue'],
|
||||
plugins: 'forecolor code paste table', // 启用 forecolor 和 code 插件
|
||||
end_container_on_empty_block: true,
|
||||
content_css: 'default', // 加载 TinyMCE 默认样式表
|
||||
//设置自定义按钮 myCustomToolbarButton
|
||||
setup(ed) {
|
||||
ed.ui.registry.addButton('pageOrientation', {
|
||||
text: '切换方向',
|
||||
onAction: function () {
|
||||
_this.typesettingType = _this.typesettingType == 1 ? 2 : 1;
|
||||
_this.changeTable();
|
||||
// if (ed.dom.hasClass(ed.getBody(), 'a4-portrait')) {
|
||||
// ed.dom.removeClass(ed.getBody(), 'a4-portrait');
|
||||
// ed.dom.addClass(ed.getBody(), 'a4-landscape');
|
||||
// } else {
|
||||
// ed.dom.removeClass(ed.getBody(), 'a4-landscape');
|
||||
// ed.dom.addClass(ed.getBody(), 'a4-portrait');
|
||||
// }
|
||||
}
|
||||
});
|
||||
ed.on('init', function () {
|
||||
const editorBody = ed.getBody();
|
||||
// 创建 MutationObserver 监听内容变化
|
||||
const observer = new MutationObserver(() => {
|
||||
const hasHorizontalScrollbar = editorBody.scrollWidth > editorBody.clientWidth;
|
||||
if (hasHorizontalScrollbar) {
|
||||
console.log('TinyMCE 出现横向滚动条');
|
||||
} else {
|
||||
console.log('没有横向滚动条');
|
||||
}
|
||||
});
|
||||
|
||||
// 监听子节点和内容的变化
|
||||
observer.observe(editorBody, { childList: true, subtree: true, characterData: true });
|
||||
});
|
||||
// 定义自定义按钮
|
||||
ed.ui.registry.addButton('customButton', {
|
||||
text: 'Empty',
|
||||
onAction: () => {
|
||||
// 插入自定义表格到编辑器中
|
||||
ed.setContent('');
|
||||
}
|
||||
});
|
||||
// 定义自定义按钮
|
||||
ed.ui.registry.addButton('customButtonExportWord', {
|
||||
text: _this.$t('commonTable.exportWord'),
|
||||
onAction: () => {
|
||||
// 插入自定义表格到编辑器中
|
||||
let content = ed.getContent(); // 获取内容
|
||||
content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
|
||||
content = content.replace(/<em>/g, '<i>').replace(/<\/strong>/g, '</i>');
|
||||
_this.export('table', content);
|
||||
}
|
||||
});
|
||||
// 定义自定义按钮
|
||||
ed.ui.registry.addButton('customButtonExportImg', {
|
||||
text: _this.$t('commonTable.exportImg'),
|
||||
onAction: () => {
|
||||
// 插入自定义表格到编辑器中
|
||||
_this.export('image', ed.getContent());
|
||||
}
|
||||
});
|
||||
ed.ui.registry.addContextToolbar('spacer', {
|
||||
predicate: () => false, // 保持静态
|
||||
items: '',
|
||||
scope: 'node'
|
||||
});
|
||||
ed.on('paste', (event) => {});
|
||||
ed.on('SetContent', function (e) {
|
||||
e.content = e.content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
|
||||
e.content = e.content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>');
|
||||
});
|
||||
ed.on('GetContent', function (e) {
|
||||
e.content = e.content.replace(/<b>/g, '<strong>').replace(/<\/b>/g, '</strong>');
|
||||
e.content = e.content.replace(/<i>/g, '<em>').replace(/<\/i>/g, '</em>');
|
||||
});
|
||||
},
|
||||
init_instance_callback: (editor) => {
|
||||
if (_this.value) {
|
||||
editor.setContent(_this.value);
|
||||
}
|
||||
_this.hasInit = true;
|
||||
editor.on('NodeChange Change KeyUp SetContent', () => {
|
||||
this.hasChange = true;
|
||||
this.$emit('input', editor.getContent());
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
replaceNegativeSign(node) {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
// 如果是文本节点，替换负号
|
||||
node.nodeValue = node.nodeValue.replace(/^-(?=\d)/, '−');
|
||||
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
// 如果是元素节点，递归处理子节点
|
||||
node.childNodes.forEach(this.replaceNegativeSign);
|
||||
}
|
||||
},
|
||||
capitalizeFirstLetter(node) {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
// 如果是文本节点，只处理第一个非空字符
|
||||
node.nodeValue = node.nodeValue.replace(/^\s*([a-zA-Z])/, (match, firstLetter) => {
|
||||
return firstLetter.toUpperCase();
|
||||
});
|
||||
} else if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
// 递归处理子节点
|
||||
node.childNodes.forEach(this.capitalizeFirstLetter);
|
||||
}
|
||||
},
|
||||
updateTableStyles(container) {
|
||||
var _this = this;
|
||||
// 更新表格样式
|
||||
const tables = container.querySelectorAll('table');
|
||||
tables.forEach((table) => {
|
||||
table.setAttribute(
|
||||
'style',
|
||||
`width: ${
|
||||
this.typesettingType == 1 ? '171.5mm' : '258.6mm'
|
||||
};border: none; margin: 0 auto !important;border-collapse: collapse; `
|
||||
);
|
||||
const cells = table.querySelectorAll('td');
|
||||
cells.forEach((td) => {
|
||||
if (/^-?\d+(\.\d+)?$/.test(td.textContent.trim())) {
|
||||
_this.replaceNegativeSign(td);
|
||||
}
|
||||
const hasSupOrSub = _this.containsSupOrSub(td); // 检查当前 td 是否包含上下标
|
||||
if (!hasSupOrSub) {
|
||||
// 递归处理单元格内的所有子节点
|
||||
td.childNodes.forEach(_this.capitalizeFirstLetter);
|
||||
// 替换 <a> 标签为其内部文本
|
||||
td.querySelectorAll('a').forEach((a) => {
|
||||
const textNode = document.createTextNode(a.textContent); // 创建文本节点
|
||||
a.replaceWith(textNode); // 用文本节点替换 <a> 标签
|
||||
});
|
||||
}
|
||||
|
||||
// 获取 td 元素中的所有子元素
|
||||
const childElements = td.querySelectorAll('*');
|
||||
|
||||
// 遍历每个子元素
|
||||
childElements.forEach((element) => {
|
||||
// 如果元素的文本内容匹配正则表达式
|
||||
if (/\[\d+(?:,\d+)*\]/g.test(element.textContent)) {
|
||||
console.log('匹配到带有数字的方括号内容');
|
||||
// 为匹配的元素添加样式类
|
||||
element.classList.add('color-highlight');
|
||||
}
|
||||
});
|
||||
});
|
||||
const firstRowTdElements = container.querySelectorAll('tr:first-child td'); // 获取第一个 <tr> 中的所有 <td> 元素
|
||||
// 遍历所有 <td> 元素，添加上下边框样式
|
||||
firstRowTdElements.forEach((td) => {
|
||||
const currentStyle = td.getAttribute('style');
|
||||
if (currentStyle) {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle +
|
||||
';border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
'border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
}
|
||||
});
|
||||
const firstRowTdElementsLast = container.querySelectorAll('tr:last-of-type td');
|
||||
// 遍历所有 <td> 元素，添加上下边框样式
|
||||
firstRowTdElementsLast.forEach((td) => {
|
||||
// 获取当前的 style 属性（如果有）
|
||||
const currentStyle = td.getAttribute('style');
|
||||
// 如果已有 style 属性，则追加边框样式；如果没有 style 属性，则设置新的 style
|
||||
if (currentStyle) {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle +
|
||||
';border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
'border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
//销毁富文本
|
||||
destroyTinymce() {
|
||||
if (window.tinymce.get(this.tinymceId)) {
|
||||
window.tinymce.get(this.tinymceId).destroy();
|
||||
}
|
||||
},
|
||||
//设置内容
|
||||
setContent(value) {
|
||||
window.tinymce.get(this.tinymceId).setContent(value);
|
||||
},
|
||||
//获取内容
|
||||
getContent(type) {
|
||||
this.$emit('getContent', type, window.tinymce.get(this.tinymceId).getContent());
|
||||
},
|
||||
|
||||
export(type, data) {
|
||||
if (type == 'table') {
|
||||
var tableHtml = `<html xmlns:w="urn:schemas-microsoft-com:office:word">
|
||||
<head>
|
||||
<style>
|
||||
@page {
|
||||
size: A4; /* 或者 A3, Letter 等纸张大小 */
|
||||
margin: 20mm;
|
||||
}
|
||||
${tableStyle}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${data}
|
||||
</body>
|
||||
</html>`;
|
||||
console.log('tableHtml at line 438:', tableHtml);
|
||||
const converted = htmlDocx.asBlob(tableHtml); // 将 HTML 转换为 Word Blob
|
||||
// 触发文件下载
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(converted);
|
||||
link.download = 'table.docx';
|
||||
link.click();
|
||||
} else if (type == 'image') {
|
||||
const hiddenContainer = document.createElement('div');
|
||||
hiddenContainer.style.position = 'absolute';
|
||||
hiddenContainer.style.left = '-9999ppx';
|
||||
hiddenContainer.style.top = '0';
|
||||
hiddenContainer.innerHTML = data;
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `${tableStyle}`;
|
||||
document.head.appendChild(style);
|
||||
document.body.appendChild(hiddenContainer);
|
||||
// 使用 html2canvas 捕获表格内容
|
||||
const table = hiddenContainer.querySelector('table'); // 找到表格
|
||||
table.style.border = 'none';
|
||||
// 使用 html2canvas 将内容转为图片
|
||||
html2canvas(hiddenContainer, {
|
||||
scale: 2, // 提高图片的分辨率，默认为1，设置为2可以使图片更清晰
|
||||
logging: false, // 禁用日志输出
|
||||
useCORS: true, // 允许跨域图像
|
||||
allowTaint: true // 允许污染 canvas，解决图片链接不可用问题
|
||||
})
|
||||
// 清空现有内容，显示图片
|
||||
.then((canvas) => {
|
||||
const imgData = canvas.toDataURL('image/png'); // 创建一个图片对象
|
||||
const link = document.createElement('a'); // 创建一个链接并下载图片
|
||||
link.href = imgData;
|
||||
link.download = 'image.png';
|
||||
link.click();
|
||||
});
|
||||
}
|
||||
},
|
||||
inlineStyles(element) {
|
||||
const styles = window.getComputedStyle(element);
|
||||
for (let style in styles) {
|
||||
if (styles.hasOwnProperty(style)) {
|
||||
element.style[style] = styles[style];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//获取上传图片后的地址，并设置图片样式
|
||||
tableSuccessCBK(arr) {
|
||||
console.log(arr, '222');
|
||||
const _this = this;
|
||||
window.tinymce.get(_this.tinymceId).insertContent(arr);
|
||||
},
|
||||
containsSupOrSub(element) {
|
||||
// 如果当前节点是元素节点
|
||||
if (element.nodeType === 1) {
|
||||
// 如果是 <sup> 或 <sub> 标签，返回 true
|
||||
if (element.tagName === 'SUP' || element.tagName === 'SUB') {
|
||||
return true;
|
||||
}
|
||||
// 否则，递归检查子节点
|
||||
return Array.from(element.childNodes).some((child) => this.containsSupOrSub(child));
|
||||
}
|
||||
// 如果不是元素节点（如文本节点），返回 false
|
||||
return false;
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.destroyTinymce();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .tox-tinymce-aux {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
::v-deep .tox .tox-menu {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
</style>
|
||||
BIN
src/components/page/components/table/charissil.ttf
Normal file
BIN
src/components/page/components/table/charissil.ttf
Normal file
Binary file not shown.
26
src/components/page/components/table/document (4).mhtml
Normal file
26
src/components/page/components/table/document (4).mhtml
Normal file
File diff suppressed because one or more lines are too long
432
src/components/page/components/table/table copy 2.vue
Normal file
432
src/components/page/components/table/table copy 2.vue
Normal file
@@ -0,0 +1,432 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-select v-model="typesettingType">
|
||||
<el-option v-for="item in typesettingTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
<span>请在下面区域粘贴 Word 表格</span>
|
||||
</div>
|
||||
|
||||
<div class="controls" style="overflow: hidden">
|
||||
请在此区域粘贴 Word 表格（typesettingType 为页面方向 1为竖向 <span> </span>
|
||||
<div
|
||||
|
||||
style="margin: 0 auto; box-sizing: border-box"
|
||||
class="paste-area"
|
||||
:style="`width: ${typesettingType == 1 ? 210 : 297}mm !important;
|
||||
padding:25.4mm 19.1mm`"
|
||||
contenteditable="true"
|
||||
id="content"
|
||||
ref="content"
|
||||
@paste="handlePaste"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
|
||||
<el-button @click="exportToWord">导出为 Word</el-button>
|
||||
<el-button @click="downloadImage">导出为 图片</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import htmlDocx from 'html-docx-js/dist/html-docx.js';
|
||||
import html2canvas from 'html2canvas';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
updatedHtml: '',
|
||||
typesettingType: 1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.typesettingType = 1;
|
||||
},
|
||||
methods: {
|
||||
downloadImage() {
|
||||
|
||||
},
|
||||
|
||||
handlePaste(event) {
|
||||
setTimeout(() => {
|
||||
content= this.$refs.content
|
||||
|
||||
|
||||
if (content) {
|
||||
const updatedHtml = this.setHtmlWord(content.innerHTML);
|
||||
|
||||
this.updatedHtml = updatedHtml.match(/<table[\s\S]*?<\/table>/i)[0];
|
||||
console.log('updatedHtml at line 114:', this.updatedHtml);
|
||||
}
|
||||
|
||||
}, 50);
|
||||
},
|
||||
//判断内容是否有上下标
|
||||
containsSupOrSub(element) {
|
||||
// 如果当前节点是元素节点
|
||||
if (element.nodeType === 1) {
|
||||
// 如果是 <sup> 或 <sub> 标签，返回 true
|
||||
if (element.tagName === 'SUP' || element.tagName === 'SUB') {
|
||||
return true;
|
||||
}
|
||||
// 否则，递归检查子节点
|
||||
return Array.from(element.childNodes).some((child) => this.containsSupOrSub(child));
|
||||
}
|
||||
// 如果不是元素节点（如文本节点），返回 false
|
||||
return false;
|
||||
},
|
||||
setHtmlWord(setHtmlWord) {
|
||||
if (setHtmlWord.includes('<table')) {
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
const html = setHtmlWord
|
||||
.replace(
|
||||
/<(table)([^>]*style="([^"]*)")/g, // 匹配有 style 属性的 <table>
|
||||
(match, p1, p2, p3) => {
|
||||
const existingStyle = p3;
|
||||
|
||||
// 如果现有样式不为空，则在原样式后追加新的样式
|
||||
const updatedStyle = existingStyle
|
||||
? existingStyle +
|
||||
`; width: ${
|
||||
this.typesettingType == 1 ? '488' : '736'
|
||||
}pt !important; mso-padding-alt: 0.7500pt 0.7500pt 0.7500pt 0.7500pt;`
|
||||
: `width: ${
|
||||
this.typesettingType == 1 ? '488' : '736'
|
||||
}pt !important; mso-padding-alt: 0.7500pt 0.7500pt 0.7500pt 0.7500pt;`;
|
||||
var str = `<table${p2.replace(`style="${existingStyle}"`, `style="${updatedStyle}"`)}`;
|
||||
return str;
|
||||
}
|
||||
)
|
||||
.replace(/style="style=;/g, 'style="')
|
||||
.replace(/;;/g, ';')
|
||||
.replace(/\n/g, '<br>');
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = html;
|
||||
const AllTd = container.querySelectorAll('table td'); // 获取 <tr> 中的所有 <td> 元素
|
||||
const firstRowTdElementsAll = container.querySelectorAll('*'); // 获取第一个 <tr> 中的所有 <td> 元素
|
||||
|
||||
// 遍历所有 <td> 元素，添加上下边框样式
|
||||
firstRowTdElementsAll.forEach((td) => {
|
||||
let htmlContent = td.innerHTML;
|
||||
const currentStyle = td.getAttribute('style');
|
||||
if (currentStyle) {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle +
|
||||
";text-align:left;font-family:'Charis SIL' !important; font-size: 7.5000pt !important; mso-font-kerning: 1.0000pt !important; line-height: 10pt !important;mos-line-height: 10pt !important;"
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
"text-align:left;font-family:'Charis SIL' !important; font-size: 7.5000pt !important; mso-font-kerning: 1.0000pt !important; line-height: 10pt !important;mos-line-height: 10pt !important;mso-line-height-rule: exactly !important;"
|
||||
);
|
||||
}
|
||||
});
|
||||
// 遍历所有 <td> 元素，添加上下边框样式
|
||||
AllTd.forEach((td) => {
|
||||
if (/^-?\d+(\.\d+)?$/.test(td.textContent)) {
|
||||
// 如果是纯数字（包括负数），替换负号为双负号
|
||||
td.textContent = td.textContent.replace(/^-(?=\d)/, '−'); // 替换负号为 "--"
|
||||
}
|
||||
|
||||
const hasSupOrSub = this.containsSupOrSub(td); // 检查当前 td 是否包含上下标
|
||||
if (!hasSupOrSub) {
|
||||
td.textContent = td.textContent.replace(/(^|\s)(\w)/g, (match, space, firstLetter) => {
|
||||
// 将首字母大写，并保持原始空格或其他字符
|
||||
return space + firstLetter.toUpperCase();
|
||||
});
|
||||
td.textContent = td.textContent.replace(/<a\b[^>]*>(.*?)<\/a>/gi, (match, innerText) => {
|
||||
return innerText; // 保留链接内部的内容
|
||||
});
|
||||
}
|
||||
|
||||
const currentStyle = td.getAttribute('style');
|
||||
if (currentStyle) {
|
||||
const regex = /\[\d+(?:,\d+)*\]/g;
|
||||
if (regex.test(td.innerHTML)) {
|
||||
// 如果匹配到，则对该 <td> 应用样式，比如改变文本颜色
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle +
|
||||
';color:rgb(0,130,170) !important;border-left:none !important;mso-border-left-alt:none !important;border-right:none !important;mso-border-right-alt:none !important;border-top:none;mso-border-top-alt:none !important;border-bottom:none !important;mso-border-bottom-alt:none !important;'
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle +
|
||||
';color:#000000 !important;border-left:none !important;mso-border-left-alt:none !important;border-right:none !important;mso-border-right-alt:none !important;border-top:none;mso-border-top-alt:none !important;border-bottom:none !important;mso-border-bottom-alt:none !important;'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if (regex.test(td.innerHTML)) {
|
||||
// 如果匹配到，则对该 <td> 应用样式，比如改变文本颜色
|
||||
td.setAttribute(
|
||||
'style',
|
||||
'color:rgb(0,130,170) !important;border-left:none !important;mso-border-left-alt:none !important;border-right:none !important;mso-border-right-alt:none !important;border-top:none;mso-border-top-alt:none !important;border-bottom:none !important;mso-border-bottom-alt:none !important;'
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
'color:#000000 !important;border-left:none !important;mso-border-left-alt:none !important;border-right:none !important;mso-border-right-alt:none !important;border-top:none;mso-border-top-alt:none !important;border-bottom:none !important;mso-border-bottom-alt:none !important;'
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
const firstRowTdElements = container.querySelectorAll('tr:first-child td'); // 获取第一个 <tr> 中的所有 <td> 元素
|
||||
|
||||
// 遍历所有 <td> 元素，添加上下边框样式
|
||||
firstRowTdElements.forEach((td) => {
|
||||
const currentStyle = td.getAttribute('style');
|
||||
if (currentStyle) {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle +
|
||||
';color:#000000 !important; border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
'color:#000000 !important;border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
}
|
||||
});
|
||||
const firstRowTdElementsLast = container.querySelectorAll('tr:last-of-type td');
|
||||
|
||||
// 遍历所有 <td> 元素，添加上下边框样式
|
||||
firstRowTdElementsLast.forEach((td) => {
|
||||
// 获取当前的 style 属性（如果有）
|
||||
const currentStyle = td.getAttribute('style');
|
||||
|
||||
// 如果已有 style 属性，则追加边框样式；如果没有 style 属性，则设置新的 style
|
||||
if (currentStyle) {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle + ';border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
'border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// 获取修改后的 HTML 内容
|
||||
const updatedHtml = container.innerHTML;
|
||||
|
||||
this.$forceUpdate();
|
||||
// 输出修改后的 HTML
|
||||
|
||||
return updatedHtml;
|
||||
},
|
||||
getContent(type, data) {
|
||||
if (type == 'table') {
|
||||
var tableHtml = `<html xmlns:w="urn:schemas-microsoft-com:office:word">
|
||||
<head>
|
||||
<style>
|
||||
@page {
|
||||
size: A4 !important;
|
||||
margin: 1in;
|
||||
size: landscape; /* 强制页面方向为横向 */
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #000;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
p,th, td,tr,table {
|
||||
font-size: 7.5000pt; /* 字体大小 */
|
||||
|
||||
margin-top: 0pt; /* 段前间距 */
|
||||
margin-bottom: 0pt; /* 段后间距 */
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${data}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
`;
|
||||
console.log('tableHtml at line 150:', tableHtml);
|
||||
const converted = htmlDocx.asBlob(tableHtml); // 将 HTML 转换为 Word Blob
|
||||
|
||||
// 触发文件下载
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(converted);
|
||||
link.download = 'table.docx';
|
||||
link.click();
|
||||
} else if (type == 'image') {
|
||||
// tinymce
|
||||
|
||||
// 显示内容的容器
|
||||
const container = this.$refs.output;
|
||||
console.log('outputDiv at line 358:', container);
|
||||
const outputDiv = container.querySelector('table');
|
||||
console.log('outputDiv at line 360:', outputDiv);
|
||||
|
||||
// 使用 html2canvas 将内容转为图片
|
||||
html2canvas(outputDiv, {
|
||||
scale: 3, // 提高图片的分辨率，默认为1，设置为2可以使图片更清晰
|
||||
logging: false, // 禁用日志输出
|
||||
useCORS: true, // 允许跨域图像
|
||||
allowTaint: true // 允许污染 canvas，解决图片链接不可用问题
|
||||
})
|
||||
// 清空现有内容，显示图片
|
||||
.then((canvas) => {
|
||||
// 创建一个图片对象
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
|
||||
// 创建一个链接并下载图片
|
||||
const link = document.createElement('a');
|
||||
link.href = imgData;
|
||||
link.download = 'image.png';
|
||||
link.click();
|
||||
});
|
||||
}
|
||||
},
|
||||
exportToWord() {
|
||||
|
||||
// 获取 HTML 内容
|
||||
|
||||
// console.log('html at line 118:', updatedHtml);
|
||||
|
||||
const tableHtml = `
|
||||
<html xmlns:w="urn:schemas-microsoft-com:office:word">
|
||||
<head>
|
||||
<style>
|
||||
@page {
|
||||
size: A4 !important;
|
||||
margin: 1in;
|
||||
size: landscape; /* 强制页面方向为横向 */
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #000;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
p,th, td,tr,table {
|
||||
font-size: 7.5000pt; /* 字体大小 */
|
||||
margin-top: 0pt; /* 段前间距 */
|
||||
margin-bottom: 0pt; /* 段后间距 */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div align="center">
|
||||
${this.$refs.content.innerHTML}
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
console.log('tableHtml at line 150:', tableHtml);
|
||||
const converted = htmlDocx.asBlob(tableHtml); // 将 HTML 转换为 Word Blob
|
||||
// 触发文件下载
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(converted);
|
||||
link.download = 'table.docx';
|
||||
link.click();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px dashed #dcdfe6;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
table {
|
||||
border-top: 2px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
th {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
th input,
|
||||
td input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
}
|
||||
th input,
|
||||
td input ::placeholder {
|
||||
color: #aaa !important;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: move;
|
||||
}
|
||||
::v-deep .paste-area {
|
||||
height: auto; /* A4纸高度 */
|
||||
background: white; /* 纸张背景 */
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影模拟纸张浮起 */
|
||||
border: 1px solid #ddd; /* 模拟纸张边框 */
|
||||
/* padding: 25.4mm 19.1mm; //内边距 */
|
||||
box-sizing: border-box; /* 确保内边距不会影响整体尺寸 */
|
||||
transform-origin: top left;
|
||||
}
|
||||
::v-deep .paste-area table {
|
||||
/* border-top: 2px solid #000 !important; */
|
||||
/* border-bottom: 1px solid #000 !important; */
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
::v-deep .paste-area table td {
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
border: 1px dashed #dcdfe6 !important;
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
}
|
||||
::v-deep .paste-area table td p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .paste-area table .MsoNormal {
|
||||
max-width: 200px !important; /* 限制容器宽度 */
|
||||
|
||||
word-wrap: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
.text-container {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
657
src/components/page/components/table/table copy 3.vue
Normal file
657
src/components/page/components/table/table copy 3.vue
Normal file
@@ -0,0 +1,657 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-select v-model="typesettingType">
|
||||
<el-option v-for="item in typesettingTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
<span>请在下面区域粘贴 Word 表格</span>
|
||||
</div>
|
||||
|
||||
<tinymce
|
||||
|
||||
ref="tinymceChild"
|
||||
:value="updatedHtml"
|
||||
:typesettingType="typesettingType"
|
||||
class="paste-area text-container"
|
||||
@handlePaste="handlePaste"
|
||||
@getContent="getContent"
|
||||
:style="`width: ${typesettingType == 1 ? 210 : 297}mm !important;
|
||||
padding:2mm`"
|
||||
style="
|
||||
white-space: pre-line;
|
||||
line-height: 12px;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
font-size: 7.5pt; /* 字体大小 */
|
||||
|
||||
margin-top: 0pt; /* 段前间距 */
|
||||
margin-bottom: 0pt; /* 段后间距 */
|
||||
"
|
||||
></tinymce>
|
||||
<div class="controls" style="overflow: hidden">
|
||||
请在此区域粘贴 Word 表格<span> </span>
|
||||
<div
|
||||
v-show="!updatedHtml"
|
||||
style="margin: 0 auto; box-sizing: border-box"
|
||||
class="paste-area"
|
||||
:style="`width: ${typesettingType == 1 ? 210 : 297}mm !important;
|
||||
padding:25.4mm 19.1mm`"
|
||||
contenteditable="true"
|
||||
id="content"
|
||||
ref="content"
|
||||
@paste="handlePaste"
|
||||
></div>
|
||||
</div>
|
||||
<!-- <div id="output" ref="output" v-html="updatedHtml"></div> -->
|
||||
<!-- 要导出的内容 -->
|
||||
|
||||
<el-button @click="exportToWord">导出为 Word</el-button>
|
||||
<el-button @click="downloadImage">导出为 图片</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import htmlDocx from 'html-docx-js/dist/html-docx.js';
|
||||
|
||||
import html2canvas from 'html2canvas';
|
||||
import Tinymce from '@/components/page/components/Tinymce';
|
||||
export default {
|
||||
props: ['lineStyle'],
|
||||
components: {
|
||||
Tinymce
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showToolbar: false, // 是否显示工具栏
|
||||
toolbarStyle: {
|
||||
top: '0px',
|
||||
left: '0px'
|
||||
}, // 工具栏的样式
|
||||
selectionRange: null, // 保存选区范围
|
||||
updatedHtml: '',
|
||||
imgHtml: '',
|
||||
typesettingTypeOptions: [
|
||||
{ label: this.$t('commonTable.typesettingType1'), value: 1, pageWidth: 210 },
|
||||
{ label: this.$t('commonTable.typesettingType2'), value: 2, pageWidth: 297 }
|
||||
],
|
||||
transform: null,
|
||||
typesettingType: 1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.typesettingType = 1;
|
||||
},
|
||||
methods: {
|
||||
handleTextSelection() {
|
||||
// 获取用户的文本选区
|
||||
const selection = window.getSelection();
|
||||
if (selection && selection.rangeCount > 0) {
|
||||
const range = selection.getRangeAt(0);
|
||||
const selectedText = selection.toString();
|
||||
|
||||
if (selectedText.trim()) {
|
||||
// 保存选区
|
||||
this.selectionRange = range;
|
||||
|
||||
// 获取选区的边界矩形
|
||||
const rect = range.getBoundingClientRect();
|
||||
|
||||
this.toolbarStyle = {
|
||||
top: `${rect.top}px`,
|
||||
left: `${rect.right}px`
|
||||
};
|
||||
|
||||
// 显示工具栏
|
||||
this.showToolbar = true;
|
||||
} else {
|
||||
// 如果没有选中文字，隐藏工具栏
|
||||
this.showToolbar = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
applyFormat(format, value) {
|
||||
if (!this.selectionRange) return;
|
||||
|
||||
const wrapper = document.createElement('span');
|
||||
switch (format) {
|
||||
case 'bold':
|
||||
wrapper.style.fontWeight = 'bold';
|
||||
break;
|
||||
case 'italic':
|
||||
wrapper.style.fontStyle = 'italic';
|
||||
break;
|
||||
case 'color':
|
||||
wrapper.style.color = value;
|
||||
break;
|
||||
}
|
||||
|
||||
// 用选区的内容替换为格式化后的内容
|
||||
wrapper.appendChild(this.selectionRange.extractContents());
|
||||
this.selectionRange.insertNode(wrapper);
|
||||
|
||||
// 清除选区
|
||||
window.getSelection().removeAllRanges();
|
||||
this.showToolbar = false;
|
||||
},
|
||||
|
||||
downloadImage() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tinymceChild.getContent('image');
|
||||
return;
|
||||
});
|
||||
},
|
||||
|
||||
handlePaste(event) {
|
||||
setTimeout(() => {
|
||||
// 解析内容并替换表格
|
||||
console.log('event.currentTarget.innerHTML at line 146:', event)
|
||||
let replacedContent = this.setHtmlWord(event);
|
||||
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tinymceChild.tableSuccessCBK(replacedContent);
|
||||
});
|
||||
|
||||
// 将新的内容插入到可编辑区域
|
||||
|
||||
// if (container && content) {
|
||||
// const containerWidth = container.offsetWidth;
|
||||
// const containerHeight = container.offsetHeight;
|
||||
|
||||
// const contentWidth = content.offsetWidth;
|
||||
|
||||
// const contentHeight = content.offsetHeight;
|
||||
|
||||
// // 计算缩放比例，保持等比例缩放
|
||||
// const scale = Math.min(containerWidth / contentWidth, containerHeight / contentHeight);
|
||||
// console.log('scale at line 60:', scale);
|
||||
|
||||
// // 应用缩放比例
|
||||
// // content.style.transform = `scale(${scale})`;
|
||||
// // content.style.transformOrigin = 'top left'; // 缩放基点
|
||||
// if (content) {
|
||||
// const updatedHtml = this.setHtmlWord();
|
||||
|
||||
// this.updatedHtml = updatedHtml.match(/<table[\s\S]*?<\/table>/i)[0];
|
||||
// console.log('updatedHtml at line 114:', this.updatedHtml);
|
||||
// }
|
||||
// }
|
||||
}, 50);
|
||||
},
|
||||
// 处理 td 点击事件
|
||||
handleTdClick(index, content) {
|
||||
alert(`Clicked TD ${index + 1}: ${content}`);
|
||||
},
|
||||
containsSupOrSub(element) {
|
||||
// 如果当前节点是元素节点
|
||||
if (element.nodeType === 1) {
|
||||
// 如果是 <sup> 或 <sub> 标签，返回 true
|
||||
if (element.tagName === 'SUP' || element.tagName === 'SUB') {
|
||||
return true;
|
||||
}
|
||||
// 否则，递归检查子节点
|
||||
return Array.from(element.childNodes).some((child) => this.containsSupOrSub(child));
|
||||
}
|
||||
// 如果不是元素节点（如文本节点），返回 false
|
||||
return false;
|
||||
},
|
||||
setHtmlWord(setHtmlWord) {
|
||||
// if (setHtmlWord.includes('<table')) {
|
||||
// } else {
|
||||
// return false;
|
||||
// }
|
||||
const html = setHtmlWord
|
||||
.replace(
|
||||
/<(table)([^>]*style="([^"]*)")/g, // 匹配有 style 属性的 <table>
|
||||
(match, p1, p2, p3) => {
|
||||
const existingStyle = p3;
|
||||
|
||||
// 如果现有样式不为空，则在原样式后追加新的样式
|
||||
const updatedStyle = existingStyle
|
||||
? existingStyle +
|
||||
`; width: ${
|
||||
this.typesettingType == 1 ? '488' : '736'
|
||||
}pt !important; mso-padding-alt: 0.7500pt 0.7500pt 0.7500pt 0.7500pt;`
|
||||
: `width: ${
|
||||
this.typesettingType == 1 ? '488' : '736'
|
||||
}pt !important; mso-padding-alt: 0.7500pt 0.7500pt 0.7500pt 0.7500pt;`;
|
||||
var str = `<table${p2.replace(`style="${existingStyle}"`, `style="${updatedStyle}"`)}`;
|
||||
return str;
|
||||
}
|
||||
)
|
||||
.replace(/style="style=;/g, 'style="')
|
||||
.replace(/;;/g, ';')
|
||||
.replace(/\n/g, '<br>');
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.innerHTML = html;
|
||||
|
||||
const AllTd = container.querySelectorAll('table td'); // 获取 <tr> 中的所有 <td> 元素
|
||||
const firstRowTdElementsAll = container.querySelectorAll('*'); // 获取第一个 <tr> 中的所有 <td> 元素
|
||||
|
||||
// 遍历所有 <td> 元素，添加上下边框样式
|
||||
firstRowTdElementsAll.forEach((td) => {
|
||||
let htmlContent = td.innerHTML;
|
||||
|
||||
const currentStyle = td.getAttribute('style');
|
||||
if (currentStyle) {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle +
|
||||
";text-align:left;font-family:'Charis SIL' !important; font-size: 7.5000pt !important; mso-font-kerning: 1.0000pt !important; line-height: 10pt !important;mos-line-height: 10pt !important;"
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
"text-align:left;font-family:'Charis SIL' !important; font-size: 7.5000pt !important; mso-font-kerning: 1.0000pt !important; line-height: 10pt !important;mos-line-height: 10pt !important;mso-line-height-rule: exactly !important;"
|
||||
);
|
||||
}
|
||||
});
|
||||
// 遍历所有 <td> 元素，添加上下边框样式
|
||||
AllTd.forEach((td) => {
|
||||
// td.textContent = td.textContent.replace(/<a[^>]*>(.*?)<\/a>/g, '$1');
|
||||
// td.textContent = td.textContent.trimEnd();
|
||||
|
||||
if (/^-?\d+(\.\d+)?$/.test(td.textContent)) {
|
||||
// 如果是纯数字（包括负数），替换负号为双负号
|
||||
td.textContent = td.textContent.replace(/^-(?=\d)/, '−'); // 替换负号为 "--"
|
||||
}
|
||||
|
||||
const hasSupOrSub = this.containsSupOrSub(td); // 检查当前 td 是否包含上下标
|
||||
if (!hasSupOrSub) {
|
||||
td.textContent = td.textContent.replace(/(^|\s)(\w)/g, (match, space, firstLetter) => {
|
||||
// 将首字母大写，并保持原始空格或其他字符
|
||||
return space + firstLetter.toUpperCase();
|
||||
});
|
||||
td.textContent = td.textContent.replace(/<a\b[^>]*>(.*?)<\/a>/gi, (match, innerText) => {
|
||||
return innerText; // 保留链接内部的内容
|
||||
});
|
||||
}
|
||||
|
||||
const currentStyle = td.getAttribute('style');
|
||||
if (currentStyle) {
|
||||
const regex = /\[\d+(?:,\d+)*\]/g;
|
||||
if (regex.test(td.innerHTML)) {
|
||||
// 如果匹配到，则对该 <td> 应用样式，比如改变文本颜色
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle +
|
||||
';color:rgb(0,130,170) !important;border-left:none !important;mso-border-left-alt:none !important;border-right:none !important;mso-border-right-alt:none !important;border-top:none;mso-border-top-alt:none !important;border-bottom:none !important;mso-border-bottom-alt:none !important;'
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle +
|
||||
';color:#000000 !important;border-left:none !important;mso-border-left-alt:none !important;border-right:none !important;mso-border-right-alt:none !important;border-top:none;mso-border-top-alt:none !important;border-bottom:none !important;mso-border-bottom-alt:none !important;'
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if (regex.test(td.innerHTML)) {
|
||||
// 如果匹配到，则对该 <td> 应用样式，比如改变文本颜色
|
||||
td.setAttribute(
|
||||
'style',
|
||||
'color:rgb(0,130,170) !important;border-left:none !important;mso-border-left-alt:none !important;border-right:none !important;mso-border-right-alt:none !important;border-top:none;mso-border-top-alt:none !important;border-bottom:none !important;mso-border-bottom-alt:none !important;'
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
'color:#000000 !important;border-left:none !important;mso-border-left-alt:none !important;border-right:none !important;mso-border-right-alt:none !important;border-top:none;mso-border-top-alt:none !important;border-bottom:none !important;mso-border-bottom-alt:none !important;'
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
const firstRowTdElements = container.querySelectorAll('tr:first-child td'); // 获取第一个 <tr> 中的所有 <td> 元素
|
||||
|
||||
// 遍历所有 <td> 元素，添加上下边框样式
|
||||
firstRowTdElements.forEach((td) => {
|
||||
const currentStyle = td.getAttribute('style');
|
||||
if (currentStyle) {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle +
|
||||
';color:#000000 !important; border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
'color:#000000 !important;border-top:1.0000pt solid #000 !important;mso-border-top-alt:0.5000pt solid #000 !important;border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
}
|
||||
});
|
||||
const firstRowTdElementsLast = container.querySelectorAll('tr:last-of-type td');
|
||||
|
||||
// 遍历所有 <td> 元素，添加上下边框样式
|
||||
firstRowTdElementsLast.forEach((td) => {
|
||||
// 获取当前的 style 属性（如果有）
|
||||
const currentStyle = td.getAttribute('style');
|
||||
|
||||
// 如果已有 style 属性，则追加边框样式；如果没有 style 属性，则设置新的 style
|
||||
if (currentStyle) {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
currentStyle + ';border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
} else {
|
||||
td.setAttribute(
|
||||
'style',
|
||||
'border-bottom:1.0000pt solid #000 !important;mso-border-bottom-alt:0.5000pt solid #000 !important;'
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// 获取修改后的 HTML 内容
|
||||
const updatedHtml = container.innerHTML;
|
||||
|
||||
this.$forceUpdate();
|
||||
// 输出修改后的 HTML
|
||||
|
||||
return updatedHtml;
|
||||
},
|
||||
getContent(type, data) {
|
||||
if (type == 'table') {
|
||||
var tableHtml = `<html xmlns:w="urn:schemas-microsoft-com:office:word">
|
||||
<head>
|
||||
<style>
|
||||
@page {
|
||||
size: A4 !important;
|
||||
margin: 1in;
|
||||
size: landscape; /* 强制页面方向为横向 */
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #000;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
p,th, td,tr,table {
|
||||
font-size: 7.5000pt; /* 字体大小 */
|
||||
|
||||
margin-top: 0pt; /* 段前间距 */
|
||||
margin-bottom: 0pt; /* 段后间距 */
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${data}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
`;
|
||||
console.log('tableHtml at line 150:', tableHtml);
|
||||
const converted = htmlDocx.asBlob(tableHtml); // 将 HTML 转换为 Word Blob
|
||||
|
||||
// 触发文件下载
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(converted);
|
||||
link.download = 'table.docx';
|
||||
link.click();
|
||||
} else if (type == 'image') {
|
||||
// tinymce
|
||||
|
||||
// 显示内容的容器
|
||||
const container = this.$refs.output;
|
||||
console.log('outputDiv at line 358:', container);
|
||||
const outputDiv = container.querySelector('table');
|
||||
console.log('outputDiv at line 360:', outputDiv);
|
||||
|
||||
// 使用 html2canvas 将内容转为图片
|
||||
html2canvas(outputDiv, {
|
||||
scale: 3, // 提高图片的分辨率，默认为1，设置为2可以使图片更清晰
|
||||
logging: false, // 禁用日志输出
|
||||
useCORS: true, // 允许跨域图像
|
||||
allowTaint: true // 允许污染 canvas，解决图片链接不可用问题
|
||||
})
|
||||
// 清空现有内容，显示图片
|
||||
.then((canvas) => {
|
||||
// 创建一个图片对象
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
|
||||
// 创建一个链接并下载图片
|
||||
const link = document.createElement('a');
|
||||
link.href = imgData;
|
||||
link.download = 'image.png';
|
||||
link.click();
|
||||
});
|
||||
}
|
||||
},
|
||||
exportToWord() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tinymceChild.getContent('table');
|
||||
return;
|
||||
});
|
||||
|
||||
// 获取 HTML 内容
|
||||
|
||||
// console.log('html at line 118:', updatedHtml);
|
||||
|
||||
const tableHtml = `
|
||||
<html xmlns:w="urn:schemas-microsoft-com:office:word">
|
||||
<head>
|
||||
<style>
|
||||
@page {
|
||||
size: A4 !important;
|
||||
margin: 1in;
|
||||
size: landscape; /* 强制页面方向为横向 */
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #000;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
p,th, td,tr,table {
|
||||
font-size: 7.5000pt; /* 字体大小 */
|
||||
|
||||
margin-top: 0pt; /* 段前间距 */
|
||||
margin-bottom: 0pt; /* 段后间距 */
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div align="center">
|
||||
${
|
||||
this.lineStyle.titleTop
|
||||
? `<p
|
||||
class="MsoNormal"
|
||||
align="center"
|
||||
style="
|
||||
margin-bottom: 0pt;
|
||||
mso-line-break-override: restrictions;
|
||||
punctuation-wrap: simple;
|
||||
text-align: center;
|
||||
mso-outline-level: 1;
|
||||
line-height: 10pt !important;mos-line-height: 10pt !important;
|
||||
mso-line-height-rule: exactly;
|
||||
|
||||
"
|
||||
>
|
||||
<b
|
||||
><span style="font-family: Charis SIL; font-size: 7.5pt"
|
||||
>${this.lineStyle.titleTop}</span
|
||||
></b
|
||||
>
|
||||
</p>`
|
||||
: ``
|
||||
}
|
||||
|
||||
${updatedHtml}
|
||||
|
||||
${
|
||||
this.lineStyle.titleBot
|
||||
? ` <p
|
||||
class="MsoNormal"
|
||||
style="
|
||||
margin-bottom: 0pt;
|
||||
mso-line-break-override: restrictions;
|
||||
punctuation-wrap: simple;
|
||||
mso-outline-level: 1;
|
||||
line-height: 10pt !important;mos-line-height: 10pt !important;
|
||||
mso-line-height-rule: exactly;
|
||||
text-align: justify; /* 使用 CSS 标准的两端对齐 */
|
||||
mso-text-align: justify; /* 确保 Word 中应用两端对齐 */
|
||||
"
|
||||
>
|
||||
<span
|
||||
style="
|
||||
mso-spacerun: 'yes';
|
||||
font-family: 宋体;
|
||||
mso-ascii-font-family: 'Charis SIL';
|
||||
mso-hansi-font-family: 'Charis SIL';
|
||||
mso-bidi-font-family: 'Charis SIL';
|
||||
font-size: 7.5pt;
|
||||
mso-font-kerning: 1pt;
|
||||
"
|
||||
>${this.lineStyle.titleBot}</span
|
||||
>
|
||||
</p>`
|
||||
: ``
|
||||
}
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
console.log('tableHtml at line 150:', tableHtml);
|
||||
const converted = htmlDocx.asBlob(tableHtml); // 将 HTML 转换为 Word Blob
|
||||
|
||||
// 触发文件下载
|
||||
const link = document.createElement('a');
|
||||
link.href = URL.createObjectURL(converted);
|
||||
link.download = 'table.docx';
|
||||
link.click();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px dashed #dcdfe6;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
table {
|
||||
border-top: 2px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
th {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
th input,
|
||||
td input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
}
|
||||
th input,
|
||||
td input ::placeholder {
|
||||
color: #aaa !important;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: move;
|
||||
}
|
||||
::v-deep .paste-area {
|
||||
height: auto; /* A4纸高度 */
|
||||
background: white; /* 纸张背景 */
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影模拟纸张浮起 */
|
||||
border: 1px solid #ddd; /* 模拟纸张边框 */
|
||||
/* padding: 25.4mm 19.1mm; //内边距 */
|
||||
box-sizing: border-box; /* 确保内边距不会影响整体尺寸 */
|
||||
transform-origin: top left;
|
||||
}
|
||||
::v-deep .paste-area table {
|
||||
/* border-top: 2px solid #000 !important; */
|
||||
/* border-bottom: 1px solid #000 !important; */
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
::v-deep .paste-area table td {
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
border: 1px dashed #dcdfe6 !important;
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
}
|
||||
::v-deep .paste-area table td p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .paste-area table .MsoNormal {
|
||||
max-width: 200px !important; /* 限制容器宽度 */
|
||||
|
||||
word-wrap: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
.text-container {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 5px;
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.toolbar button {
|
||||
padding: 5px 10px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.toolbar button:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
::v-deep #output table tr td {
|
||||
border: 1px dashed #dcdfe6 !important;
|
||||
border-left: 1px dashed #dcdfe6 !important;
|
||||
border-right: 1px dashed #dcdfe6 !important;
|
||||
}
|
||||
::v-deep #output table tr td p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.modal {
|
||||
z-index: 1000; /* 保证模态框 z-index 低于颜色选择框 */
|
||||
}
|
||||
</style>
|
||||
251
src/components/page/components/table/table copy.vue
Normal file
251
src/components/page/components/table/table copy.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div
|
||||
class="paste-area"
|
||||
:style="`width: ${210}mm !important;padding: 25.4mm 19.1mm;`"
|
||||
|
||||
|
||||
> <div
|
||||
class="paste-area"
|
||||
:style="`width: 100% !important;`"
|
||||
|
||||
contenteditable="true"
|
||||
id="content"
|
||||
ref="content"
|
||||
@paste="handlePaste"
|
||||
></div></div>
|
||||
<div class="controls" style="overflow: hidden;"> 请在此区域粘贴 Word 表格
|
||||
<div class="paste-area" contenteditable="true" @paste="handlePaste">
|
||||
|
||||
</div>
|
||||
<!-- <p style="float: left;">Add
|
||||
<el-input style="width: 50px;" v-model="rowsNumber"></el-input>
|
||||
<span> {{ $t('commonTable.rows') }} * </span>
|
||||
<el-input style="width: 50px;" v-model="columnsNumber"></el-input>
|
||||
<span> {{ $t('commonTable.columns') }} {{ $t('commonTable.table') }}</span>
|
||||
|
||||
<el-button style="margin-left: 20px;" @click="Generate">Generate</el-button>
|
||||
</p> -->
|
||||
<p style="float: right;">
|
||||
<el-button @click="addRow">增加行</el-button>
|
||||
<el-button @click="addColumn">增加列</el-button>
|
||||
<el-button @click="mergeCells">合并选中单元格</el-button>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<table v-if="tableData.length > 0">
|
||||
<tbody>
|
||||
<tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
|
||||
<td v-for="(cell, colIndex) in row" :key="colIndex" contenteditable="true">
|
||||
{{ cell }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- <table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
v-for="(header, index) in headers"
|
||||
:key="index"
|
||||
draggable="true"
|
||||
@dragstart="startDrag(index)"
|
||||
@dragover.prevent
|
||||
@drop="dropColumn(index)"
|
||||
>
|
||||
<input v-model="headers[index]" :placeholder="$t('commonTable.headerPlaceholder')" />
|
||||
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, rowIndex) in rows" :key="rowIndex">
|
||||
<td
|
||||
v-for="(cell, colIndex) in row"
|
||||
:key="colIndex"
|
||||
@click="selectCell(rowIndex, colIndex)"
|
||||
:colspan="cell.colspan"
|
||||
:rowspan="cell.rowspan"
|
||||
v-if="!cell.merged"
|
||||
>
|
||||
<input v-model="cell.value" placeholder="" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table> -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [], // 表格数据
|
||||
rowsNumber:'',
|
||||
columnsNumber:'',
|
||||
headers: [], // 表头
|
||||
rows: [
|
||||
[
|
||||
{ value: '', rowspan: 1, colspan: 1, merged: false },
|
||||
{ value: '', rowspan: 1, colspan: 1, merged: false },
|
||||
{ value: '', rowspan: 1, colspan: 1, merged: false }
|
||||
]
|
||||
], // 表格数据
|
||||
selectedCells: [], // 存储选中的单元格
|
||||
draggedColumnIndex: null // 拖拽的列索引
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handlePaste(event) {
|
||||
// event.preventDefault(); // 阻止默认粘贴行为
|
||||
|
||||
// 获取剪贴板 HTML 内容
|
||||
// const clipboardData = event.clipboardData || window.clipboardData;
|
||||
// const htmlData = clipboardData.getData("text/html");
|
||||
|
||||
// if (!htmlData) {
|
||||
// alert("未检测到表格内容！");
|
||||
// return;
|
||||
// }
|
||||
|
||||
// // 创建 DOM 元素解析 HTML
|
||||
// const parser = new DOMParser();
|
||||
// const doc = parser.parseFromString(htmlData, "text/html");
|
||||
// const table = doc.querySelector("table");
|
||||
|
||||
// if (!table) {
|
||||
// alert("粘贴内容中没有表格！");
|
||||
// return;
|
||||
// }
|
||||
|
||||
// // 提取表格数据
|
||||
// const rows = Array.from(table.rows).map(row =>
|
||||
// Array.from(row.cells).map(cell => cell.innerText.trim()) // innerText 保留换行符
|
||||
// );
|
||||
|
||||
// this.tableData = rows; // 更新表格数据
|
||||
},
|
||||
|
||||
Generate(){
|
||||
for(let i=0;i<this.columnsNumber;i++){
|
||||
this.headers.push('')
|
||||
}
|
||||
|
||||
},
|
||||
addRow() {
|
||||
const newRow = this.headers.map(() => ({
|
||||
value: '',
|
||||
rowspan: 1,
|
||||
colspan: 1,
|
||||
merged: false
|
||||
}));
|
||||
this.rows.push(newRow);
|
||||
},
|
||||
addColumn() {
|
||||
this.headers.push(`列${this.headers.length + 1}`);
|
||||
this.rows.forEach((row) => {
|
||||
row.push({ value: '', rowspan: 1, colspan: 1, merged: false });
|
||||
});
|
||||
},
|
||||
startDrag(index) {
|
||||
this.draggedColumnIndex = index;
|
||||
},
|
||||
dropColumn(index) {
|
||||
if (this.draggedColumnIndex === null || this.draggedColumnIndex === index) return;
|
||||
const draggedHeader = this.headers.splice(this.draggedColumnIndex, 1)[0];
|
||||
this.headers.splice(index, 0, draggedHeader);
|
||||
this.rows.forEach((row) => {
|
||||
const draggedCell = row.splice(this.draggedColumnIndex, 1)[0];
|
||||
row.splice(index, 0, draggedCell);
|
||||
});
|
||||
this.draggedColumnIndex = null;
|
||||
},
|
||||
selectCell(rowIndex, colIndex) {
|
||||
this.selectedCells.push({ row: rowIndex, col: colIndex });
|
||||
},
|
||||
mergeCells() {
|
||||
if (this.selectedCells.length < 2) return;
|
||||
|
||||
const rows = this.selectedCells.map((cell) => cell.row);
|
||||
const cols = this.selectedCells.map((cell) => cell.col);
|
||||
|
||||
const minRow = Math.min(...rows);
|
||||
const maxRow = Math.max(...rows);
|
||||
const minCol = Math.min(...cols);
|
||||
const maxCol = Math.max(...cols);
|
||||
|
||||
for (let r = minRow; r <= maxRow; r++) {
|
||||
for (let c = minCol; c <= maxCol; c++) {
|
||||
if (r === minRow && c === minCol) {
|
||||
this.rows[r][c].rowspan = maxRow - minRow + 1;
|
||||
this.rows[r][c].colspan = maxCol - minCol + 1;
|
||||
} else {
|
||||
this.rows[r][c].merged = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.selectedCells = [];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px dashed #DCDFE6;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
table{
|
||||
border-top: 2px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
th{
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
th input, td input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
}
|
||||
th input, td input ::placeholder{
|
||||
color:#aaa !important;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin:0 0 20px;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: move;
|
||||
}
|
||||
::v-deep .paste-area {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
::v-deep .paste-area .MsoNormalTable{
|
||||
border-top: 2px solid #000 !important;
|
||||
border-bottom: 1px solid #000 !important;
|
||||
margin-left: 0!important;
|
||||
margin-right: 0!important;
|
||||
margin: 0 auto !important;
|
||||
|
||||
}
|
||||
::v-deep .paste-area .MsoNormalTable td{
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
border: 1px dashed #DCDFE6 !important;
|
||||
}
|
||||
</style>
|
||||
151
src/components/page/components/table/table.vue
Normal file
151
src/components/page/components/table/table.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<!-- <el-select v-model="typesettingType">
|
||||
<el-option v-for="item in typesettingTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select> -->
|
||||
<!-- <span style="margin-left:10px ;">请在下面区域粘贴 Word 表格</span> -->
|
||||
<tinymce
|
||||
|
||||
ref="tinymceChild"
|
||||
:value="updatedHtml"
|
||||
:typesettingType="typesettingType"
|
||||
class="paste-area text-container"
|
||||
|
||||
|
||||
style="
|
||||
white-space: pre-line;
|
||||
line-height: 12px;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
font-size: 7.5pt; /* 字体大小 */
|
||||
|
||||
margin-top: 0pt; /* 段前间距 */
|
||||
margin-bottom: 0pt; /* 段后间距 */
|
||||
"
|
||||
></tinymce>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Tinymce from '@/components/page/components/Tinymce';
|
||||
export default {
|
||||
props: ['lineStyle'],
|
||||
components: {
|
||||
Tinymce
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showToolbar: false, // 是否显示工具栏
|
||||
toolbarStyle: {
|
||||
top: '0px',
|
||||
left: '0px'
|
||||
}, // 工具栏的样式
|
||||
selectionRange: null, // 保存选区范围
|
||||
updatedHtml: '',
|
||||
imgHtml: '',
|
||||
typesettingTypeOptions: [
|
||||
{ label: this.$t('commonTable.typesettingType1'), value: 1, pageWidth: 210 },
|
||||
{ label: this.$t('commonTable.typesettingType2'), value: 2, pageWidth: 297 }
|
||||
],
|
||||
transform: null,
|
||||
typesettingType: 1
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.typesettingType = 1;
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px dashed #dcdfe6;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
table {
|
||||
border-top: 2px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
th {
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
th input,
|
||||
td input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
}
|
||||
th input,
|
||||
td input ::placeholder {
|
||||
color: #aaa !important;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
cursor: move;
|
||||
}
|
||||
::v-deep .paste-area {
|
||||
height: auto; /* A4纸高度 */
|
||||
background: white; /* 纸张背景 */
|
||||
|
||||
/* padding: 25.4mm 19.1mm; //内边距 */
|
||||
box-sizing: border-box; /* 确保内边距不会影响整体尺寸 */
|
||||
transform-origin: top left;
|
||||
}
|
||||
::v-deep .paste-area table {
|
||||
/* border-top: 2px solid #000 !important; */
|
||||
/* border-bottom: 1px solid #000 !important; */
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
::v-deep .paste-area table td {
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
border: 1px dashed #dcdfe6 !important;
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
}
|
||||
::v-deep .paste-area table td p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .paste-area table .MsoNormal {
|
||||
max-width: 200px !important; /* 限制容器宽度 */
|
||||
|
||||
word-wrap: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
}
|
||||
.text-container {
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
3241
src/components/page/components/table/template.txt
Normal file
3241
src/components/page/components/table/template.txt
Normal file
File diff suppressed because it is too large
Load Diff
10
src/main.js
10
src/main.js
@@ -15,6 +15,10 @@ import Common from './components/common/common'
|
||||
Vue.prototype.$validateString = function (str) {
|
||||
return /^[a-zA-Z\s-]+$/.test(str);
|
||||
}
|
||||
import VXETable from 'vxe-table'
|
||||
import 'vxe-table/lib/style.css'
|
||||
|
||||
Vue.use(VXETable)
|
||||
|
||||
// 引入富文本编辑器
|
||||
import VueQuillEditor from 'vue-quill-editor'
|
||||
@@ -62,6 +66,12 @@ Vue.prototype.$echarts = echarts
|
||||
Vue.prototype.$api = api
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
import Editor from "@tinymce/tinymce-vue"; // 默认导入
|
||||
|
||||
Vue.component("Editor", Editor);
|
||||
|
||||
import commonTable from '@/components/page/components/table/table.vue'
|
||||
Vue.component('common-table', commonTable);
|
||||
Vue.use(VueI18n);
|
||||
Vue.use(ElementUI, {
|
||||
size: 'small',
|
||||
|
||||
@@ -942,6 +942,13 @@ export default new Router({
|
||||
title: 'Reference Workflow'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/GenerateCharts', //用户端预收录-引用编辑
|
||||
component: () => import('../components/page/GenerateCharts'),
|
||||
meta: {
|
||||
title: 'Generate Charts'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'PreIngestedEditor',
|
||||
path: '/PreIngestedEditor', // 编辑端 - 预收录编辑页面
|
||||
|
||||
Reference in New Issue
Block a user