root/word
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code

Browse Source
This commit is contained in:
lq 2024-07-12 13:32:34 +08:00
parent 9085e68d8c
commit c934a84f24
2 changed files with 239 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

373
src/App.vue
View File

@ -9,9 +9,9 @@ import TheWelcome from './components/TheWelcome.vue'
<div class="menu" editor-component="menu">
<el-button size="small" @click="getHTMLValuea">保存配置</el-button>
<el-button size="small" @click="savePdf">保存pdf并上传</el-button>
<el-button size="small" @click="confShow = !confShow">隐藏配置</el-button>
<el-button size="small" @click="getShow">预览</el-button>
<el-button size="small" @click="changeConfig">切换配置</el-button>
<el-button size="small" @click="confShow = !confShow">显示/隐藏</el-button>
<el-button size="small" @click="getShow">预览/配置</el-button>
<!-- <el-button size="small" @click="changeConfig">切换配置</el-button> -->
<!-- <el-button @click="getHTMLValue">保存样式</el-button> -->
<div class="menu-item">
<div class="menu-item__undo" @click="executeUndo">
@ -319,7 +319,7 @@ import TheWelcome from './components/TheWelcome.vue'
</div>
<div class="menu-divider"></div>
<div class="menu-item">
<!-- <div class="menu-item__search" data-menu="search">
<!-- <div class="menu-item__search" data-menu="search">
<i></i>
</div>
<div class="menu-item__search__collapse" data-menu="search">
@ -342,7 +342,7 @@ import TheWelcome from './components/TheWelcome.vue'
<div class="menu-item__print" @click="executePrint" data-menu="print">
<i></i>
</div>
</div>
</div>
</div>
<!-- <div class="catalog" editor-component="catalog">
<div class="catalog__header">
@ -378,7 +378,8 @@ import TheWelcome from './components/TheWelcome.vue'
<div class="page-scale-minus" title="缩小(Ctrl+-)" @click="executePageScaleMinus">
<i></i>
</div>
<span class="page-scale-percentage" title="显示比例(点击可复原Ctrl+0)" @click="executePageScaleRecovery">100%</span>
<span class="page-scale-percentage" title="显示比例(点击可复原Ctrl+0)"
@click="executePageScaleRecovery">100%</span>
<div class="page-scale-add" title="放大(Ctrl+=)" @click="executePageScaleAdd">
<i></i>
</div>
@ -403,7 +404,8 @@ import TheWelcome from './components/TheWelcome.vue'
<i title="纸张方向"></i>
<div class="options">
<ul>
<li data-paper-direction="vertical" class="active" @click="executePaperDirection">纵向</li>
<li data-paper-direction="vertical" class="active" @click="executePaperDirection">纵向
</li>
<li data-paper-direction="horizontal" @click="executePaperDirection">横向</li>
</ul>
</div>
@ -428,7 +430,6 @@ import TheWelcome from './components/TheWelcome.vue'
<el-form-item :label="field[key]" style="margin-bottom: 0;">
<el-input @input="isUpdate" v-model="item[key]" size="small"></el-input>
</el-form-item>
</div>
</div>
<hr>
@ -465,8 +466,10 @@ import TheWelcome from './components/TheWelcome.vue'
单击即复制成功
</el-form-item>
<div v-for="(value, key, index) in searchField">
<el-form-item :label="searchField[key]" @click="copy(searchField[key])" style="margin-bottom: 0;">
<span @click.stop="copy('{' + searchField[key] + '}')">{{ '{' + searchField[key] + '}' }}</span>
<el-form-item :label="searchField[key]" @click="copy(searchField[key])"
style="margin-bottom: 0;">
<span @click.stop="copy('{' + searchField[key] + '}')">{{ '{' + searchField[key] + '}'
}}</span>
</el-form-item>
</div>
</el-form>
@ -512,26 +515,27 @@ export default {
field: {},
nameField: {},
saveData: {},
updateStatus: false,
updateStatus: true,
showObj: {},
config: {},
tableHeight: 42,
tableWidth: 556,
aRow: {},
searchNameField:{},
searchList:{},
searchField:{},
doc:{},
searchNameField: {},
searchList: {},
searchField: {},
doc: {},
myDiv: null,
orderType:0,
modeIndex:0
orderType: 0,
modeIndex: 0,
id: 0
}
},
mounted() {
this.login()
},
methods: {
savePdf(){
savePdf() {
const element = document.getElementsByTagName('canvas')
this.htmlToPDF(element[0], 'a11a')
},
@ -540,12 +544,12 @@ export default {
// 将Canvas转换为图片
const imgData = canvas.toDataURL('image/png')
// 计算图片尺寸以适应PDF
const imgProps= pdf.getImageProperties(imgData)
const imgProps = pdf.getImageProperties(imgData)
const pdfWidth = pdf.internal.pageSize.getWidth()
const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width
const imgWidth = pdfWidth
const imgHeight = pdfHeight
// 将图片添加到PDF中
const x = 0;
const y = 0;
@ -555,30 +559,30 @@ export default {
}
pdf.addImage(imgData, 'PNG', x, y, options.width, options.height)
// 保存生成的PDF
pdf.save(pdfName + '.pdf')
const blob = pdf.output("blob")
this.uoloadFile(blob)
this.uploadFile(blob)
pdf.save(pdfName + '.pdf')
},
uoloadFile(blob) {
uploadFile(blob) {
const formData = new FormData()
formData.append('file', blob, 'myPDF.pdf')
//formData.append('file', blob, 'myPDF.pdf')
let api = '/api/Administrator/file/upload'
formData.append('files', blob, 'myPDF.pdf');
// 使用fetch API上传文件到服务器
fetch(api, {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
ElMessage({
message: data.msg,
type: data.code == 1 ? 'success' : 'error',
plain: true,
.then(response => response.json())
.then(data => {
ElMessage({
message: data.msg,
type: data.code == 1 ? 'success' : 'error',
plain: true,
})
})
})
.catch(error => console.error(error))
.catch(error => console.error(error))
},
handleGenerate(idName, name) {
// 采集二维码：路径
@ -604,7 +608,6 @@ export default {
console.log(value);
},
getShow() {
this.updateStatus = true
this.init()
},
isUpdate() {
@ -658,8 +661,8 @@ export default {
},
getApiData() {
let api = '/api/Administrator/InquiryOrder/getOrderInfo?order_id=E2024060509560254698592'
let api3 ='/api/Administrator/InquirySearchConfig/getUserConfig'
let api3 = '/api/Administrator/InquirySearchConfig/getUserConfig'
const request1 = axios.get(api)
//const request2 = axios.get(api2)
const request3 = axios.get(api3)
@ -670,9 +673,14 @@ export default {
let proIdData = [];
for (let k = 0; k < orderList.length; k++) {
const element = orderList[k]
let item = {'proid': element['pid'], 'prolistid': element['plid']}
proIdData.push(item)
let item = { 'proid': element['pid'], 'prolistid': element['plid'] }
//proIdData.push(item)
this.getGongXu(item, k)
}
/* for (let l = 0; l < proIdData.length; l++) {
const element = proIdData[l];
this.getGongXu(element, l)
}*/
this.searchList = data.data.searchExt
let order_id = data.data.searchExt['order_id']
this.orderType = data.data.searchExt['order_type_id']
@ -680,8 +688,8 @@ export default {
let orderData = data.data.orderExt.productList
let data3 = response3.data
this.orderData = orderData
if(data3.code == 1) {
if (data3.code == 1) {
this.searchConfig = data3.data
let searchNameField = {}
let searchField = {}
@ -695,17 +703,14 @@ export default {
this.searchNameField = searchNameField
this.searchField = searchField
}
for (let l = 0; l < proIdData.length; l++) {
const element = proIdData[l];
this.getGongXu(element, l)
}
this.init()
}))
},
async getGongXu(data, i){
async getGongXu(data, i) {
let api = '/api/Administrator/FnProList/getCustomField'
const resData = await axios.post(api, data)
for(let key in resData.data.data.data) {
for (let key in resData.data.data.data) {
this.orderData[i][key] = resData.data.data.data[key]
}
let field = resData.data.data.field
@ -714,10 +719,19 @@ export default {
this.nameField = Object.assign({}, this.nameField, nameField)
},
getHTMLValuea() {
//const aaa = this.instance.command.getHTML()
const aaa = this.instance.command.getText()
if (aaa.main.indexOf('{') == -1) {
ElMessage({
message: '预览模式不可保存设置',
type: 'error',
plain: true,
})
return false
}
const ccc = this.instance.command.getValue()
//localStorage.setItem('word_data', JSON.stringify(ccc.data))
let saveData = {'type':this.orderType, 'field_style':ccc.data}
localStorage.setItem('word_data', JSON.stringify(ccc.data))
//return false
let saveData = { 'id': this.id, 'type': this.orderType, 'field_style': ccc.data }
let api = '/api/Administrator/OrderFieldStyle/save'
axios.post(api, saveData).then((res) => {
ElMessage({
@ -787,32 +801,77 @@ export default {
})
},
getImage(ele){
getImage(ele) {
const imgElement = document.querySelector(`#${ele} img`)
const srcValue = imgElement.src
return srcValue
},
getFieldValues(field) {
let value = ''
for (let i = 0; i < this.orderData.length; i++) {
const element = this.orderData[i]
if (value == '') {
value = element[field]
} else {
value += ',' + element[field]
}
}
return value
},
replaceData(value) {
///console.log('value', value)
let start = value.indexOf('{')
if(start == -1) {
if (start == -1) {
return value
}
let end = value.indexOf('}')
let fieldKey = value.substring(start + 1, end)
let field = this.searchNameField[fieldKey]
let newValue = this.searchList[field]
value = value.replace('{'+ fieldKey +'}', newValue)
let newValue = ''
if (field == undefined) {
field = this.nameField[fieldKey]
newValue = this.getFieldValues(field)
} else {
newValue = this.searchList[field]
}
value = value.replace('{' + fieldKey + '}', newValue)
return this.replaceData(value)
},
fillData(config) {
chkTdList(tdList) {
for (let i = 0; i < tdList.length; i++) {
const element = tdList[i];
if (element.value.length == 0) {
continue
}
let value = element.value[0].value
if (value.indexOf("{") != -1) {
return true //需要循环数据
}
}
return false //不需要循环数据
},
handlerMergeTable(list, order) {
let trList = JSON.parse(JSON.stringify(list))
for (let i = 0; i < trList.tdList.length; i++) {
let tdListItem = trList.tdList[i];
if (tdListItem.value.length == 0) {
continue
}
let tdValue = tdListItem.value[0].value
tdListItem.value[0].value = this.getFieldValue(tdValue, order)
}
return trList
},
fillData(data) {
let config = JSON.parse(data)
let res = []
let code = this.getImage('imgCode')
for (let i = 0; i < config.length; i++) {
let configItem = config[i]//JSON.parse(JSON.stringify(config[i]))
if(configItem.hasOwnProperty('type') && configItem['type'] == 'table') {
let trList = configItem.trList
let configItem = JSON.stringify(config[i])//
configItem = JSON.parse(configItem)
if (configItem.hasOwnProperty('type') && configItem['type'] == 'table') {
let trList = JSON.stringify(configItem.trList)
trList = JSON.parse(trList)
let temTrList = {
'colgroup': configItem.colgroup,
'height': configItem.height,
@ -822,91 +881,122 @@ export default {
'trList': []
}
for (let j = 0; j < trList.length; j++) {
let trListItem = trList[j]//JSON.parse(JSON.stringify(trList[j]))
let tdList = trListItem.tdList
let title = tdList[0].value[0].value
if(title.indexOf('{') != -1) {
trListItem.tdList = []
for (let k = 0; k < this.orderData.length; k++) {
let tempTdList = []
let order = this.orderData[k];
for (let l = 0; l < tdList.length; l++) {
let tdListItem = tdList[l]//JSON.parse(JSON.stringify(tdList[l]))
let tdValue = tdListItem.value[0].value
let newValue = this.getFieldValue(tdValue, order)
let item = {
'colspan': tdListItem.colspan,
'rowspan': tdListItem.rowspan,
'value': [
{
'value': newValue,
'size': tdListItem.value[0].size
}
]
let trListItem = JSON.stringify(trList[j])//
trListItem = JSON.parse(trListItem)
let tdList = JSON.stringify(trListItem.tdList)
tdList = JSON.parse(tdList)
let chkRes = this.chkTdList(tdList)
if (chkRes == false) {
temTrList.trList.push(trListItem)
continue
}
trListItem.tdList = []
for (let k = 0; k < this.orderData.length; k++) {
let tempTdList = []
let order = this.orderData[k]
let hasMergeTable = false
for (let l = 0; l < tdList.length; l++) {
let tdListItem = JSON.stringify(tdList[l])
tdListItem = JSON.parse(tdListItem)
if (tdListItem.rowspan > 1) {//处理合并的单元格行
hasMergeTable = true
let tempTrList = trList.slice(j, j + tdListItem.rowspan)
for (let g = 0; g < tempTrList.length; g++) {
const element = tempTrList[g]
let packeTrItem = this.handlerMergeTable(element, order)
temTrList.trList.push(packeTrItem)
}
tempTdList.push(item)
if (k + 1 == this.orderData.length) {//当前合并单元格行数处理完k索引加单元格行数-1 本身循环有++操作
j += tdListItem.rowspan - 1
}
break
}
let item = {
'colspan': tdListItem.colspan,
'rowspan': tdListItem.rowspan,
'value': []
}
if(tdListItem.slashTypes != undefined) {
item.slashTypes = tdListItem.slashTypes
}
if (tdListItem.value.length == 0) {
tempTdList.push(item)
continue
}
let tdValue = tdListItem.value[0].value
let newValue = this.getFieldValue(tdValue, order)
let tempItem = { 'value': newValue, 'size': tdListItem.value[0].size }
item.value.push(tempItem)
tempTdList.push(item)
}
if (hasMergeTable == false) {//不是合并单元格
let tempTr = {
'height':trListItem.height,
'minHeight':trListItem.minHeight ? trListItem.minHeight : trListItem.height,
'tdList':[]
'height': trListItem.height,
'tdList': [],
'minHeight': trListItem.minHeight ? trListItem.minHeight : trListItem.height
}
tempTr.tdList = tempTdList
temTrList.trList.push(tempTr)
}
}else{
temTrList.trList.push(trListItem)
continue
}
}
res.push(temTrList)
}else if(configItem.hasOwnProperty('type') && configItem['type'] == 'image'){
} else if (configItem.hasOwnProperty('type') && configItem['type'] == 'image') {
configItem.value = code
res.push(configItem)
}else{
} else {
let value = configItem.value
configItem.value = this.replaceData(value)
res.push(configItem)
}
}
//.log('config', config)
//console.log('res',res)
return res
},
getFieldValue(value, orderData) {
if(value == '') return ''
if (value == '') return ''
let start = value.indexOf('{')
if (start != -1) {
let end = value.indexOf('}')
let keyStr = value.substring(start + 1, end)
let fieldKey = this.nameField[keyStr]
return value.replace('{'+ keyStr +'}', orderData[fieldKey])
value = value.replace('{' + keyStr + '}', orderData[fieldKey])
return this.getFieldValue(value, orderData)
}
return value
},
init() {
//console.log('doc',JSON.parse(JSON.stringify(this.doc)))
if (Object.keys(this.doc).length > 0) {
let tempDoc = JSON.stringify(this.doc)
tempDoc = JSON.parse(tempDoc)
this.initDoc(tempDoc)
return false
}
let _this = this
let api = '/api/Administrator/OrderFieldStyle/getUserConfig?type=' + this.orderType
axios.get(api).then((res) => {
res = JSON.parse(JSON.stringify(res))
//console.log(res)
let doc = {}
if(res.data.code == 1) {
if (res.data.code == 1) {
doc = res.data.data.field_style
_this.doc = doc
let tempDoc = JSON.stringify(doc)
tempDoc = JSON.parse(tempDoc)
_this.doc = tempDoc
_this.id = res.data.data.id
}
_this.initDoc(doc)
})
},
initDoc(showData) {
this.updateStatus = !this.updateStatus
//showData = localStorage.getItem('word_data')
//showData = JSON.parse(showData)
//console.log(showData.main)
if (Object.keys(showData).length === 0) {
showData = {
header: [],
@ -920,21 +1010,22 @@ export default {
}
}
if (this.updateStatus) {
showData.main = this.fillData(showData.main)
let data = JSON.stringify(showData.main)
showData.main = this.fillData(data)
}
if(this.instance != null) {
if (this.instance != null) {
this.instance.destroy()
}
this.instance = new Editor(
document.querySelector('.editor'),
document.querySelector('.editor'),
showData,
{}
)
this.handleContentChange()
this.editorLisener()
},
getSelectImage() {
const imageFileDom = document.querySelector('#image')
imageFileDom.click()
@ -959,7 +1050,7 @@ export default {
})
imageFileDom.value = ''
}
}
}
},
executeInsertElementList() {
this.instance.command.executeInsertElementList([
@ -1172,7 +1263,7 @@ export default {
}
])
},
executeDate(){
executeDate() {
const dateDom = document.querySelector('.menu-item__date')
const dateDomOptionDom = dateDom.querySelector('.options')
dateDomOptionDom.classList.toggle('visible')
@ -1196,11 +1287,11 @@ export default {
const second = date.getSeconds().toString().padStart(2, '0')
const dateString = `${year}-${month}-${day}`
const dateTimeString = `${dateString} ${hour}:${minute}:${second}`
dateDomOptionDom.querySelector('li:first-child').innerText =dateString
dateDomOptionDom.querySelector('li:last-child').innerText =dateTimeString
dateDomOptionDom.querySelector('li:first-child').innerText = dateString
dateDomOptionDom.querySelector('li:last-child').innerText = dateTimeString
},
executePageScaleMinus(){
executePageScaleMinus() {
this.instance.command.executePageScaleMinus()
},
executePageScaleAdd() {
@ -1209,7 +1300,7 @@ export default {
separatorDom() {
const separatorDom = document.querySelector('.menu-item__separator')
const separatorOptionDom = separatorDom.querySelector('.options')
separatorOptionDom.classList.toggle('visible')
separatorOptionDom.classList.toggle('visible')
},
insertSeparator(evt) {
let payload = []
@ -1223,21 +1314,21 @@ export default {
}
this.instance.command.executeSeparator(payload)
},
selectColor () {
selectColor() {
const colorControlDom = document.querySelector('#color')
const colorDom = document.querySelector('.menu-item__color')
colorControlDom.click()
let _this = this
colorControlDom.oninput = function () {
_this.instance.command.executeColor(colorControlDom.value)
}
},
highlight () {
highlight() {
const highlightControlDom = document.querySelector('#highlight')
const highlightDom = document.querySelector('.menu-item__highlight')
highlightControlDom?.click()
let _this = this
highlightControlDom.oninput = function () {
_this.instance.command.executeHighlight(highlightControlDom.value)
@ -1248,7 +1339,7 @@ export default {
const rowMarginDom = document.querySelector('.menu-item__row-margin')
const rowOptionDom = rowMarginDom.querySelector('.options')
rowOptionDom.classList.toggle('visible')
},
setRowMargin(evt) {
const li = evt.target
@ -1260,20 +1351,20 @@ export default {
listDom.title = `列表(Ctrl+Shift+U)`
const listOptionDom = listDom.querySelector('.options')
listOptionDom.classList.toggle('visible')
},
setMenuList(evt){
const li = evt.target
setMenuList(evt) {
const li = evt.target
const listType = li.dataset.listType || null
const listStyle = (li.dataset.listStyle)
this.instance.command.executeList(listType, listStyle)
},
waterMark () {
waterMark() {
const watermarkDom = document.querySelector('.menu-item__watermark')
const watermarkOptionDom = watermarkDom.querySelector('.options')
watermarkOptionDom.classList.toggle('visible')
},
setWaterMark(evt) {
const watermarkDom = document.querySelector('.menu-item__watermark')
@ -1314,7 +1405,7 @@ export default {
const watermark = payload.reduce((pre, cur) => {
pre[cur.name] = cur.value
return pre
},{})
}, {})
_this.instance.command.executeAddWatermark({
data: watermark.data,
color: watermark.color,
@ -1325,19 +1416,19 @@ export default {
} else {
this.instance.command.executeDeleteWatermark()
}
},
executePageScaleRecovery() {
this.instance.command.executePageScaleRecovery()
},
paperSizeDomOptionsShow() {
const paperSizeDom = document.querySelector('.paper-size')
const paperSizeDomOptionsDom =paperSizeDom.querySelector('.options')
const paperSizeDomOptionsDom = paperSizeDom.querySelector('.options')
paperSizeDomOptionsDom.classList.toggle('visible')
},
executePaperSize(evt) {
const paperSizeDom = document.querySelector('.paper-size')
const paperSizeDomOptionsDom =paperSizeDom.querySelector('.options')
const paperSizeDomOptionsDom = paperSizeDom.querySelector('.options')
const li = evt.target
const paperType = li.dataset.paperSize
const [width, height] = paperType.split('*').map(Number)
@ -1347,14 +1438,14 @@ export default {
.forEach(child => child.classList.remove('active'))
li.classList.add('active')
},
paperDirectionDomOptionsDomShow(){
paperDirectionDomOptionsDomShow() {
const paperDirectionDom = document.querySelector('.paper-direction')
const paperDirectionDomOptionsDom =paperDirectionDom.querySelector('.options')
const paperDirectionDomOptionsDom = paperDirectionDom.querySelector('.options')
paperDirectionDomOptionsDom.classList.toggle('visible')
},
executePaperDirection(evt) {
const paperDirectionDom = document.querySelector('.paper-direction')
const paperDirectionDomOptionsDom =paperDirectionDom.querySelector('.options')
const paperDirectionDomOptionsDom = paperDirectionDom.querySelector('.options')
const li = evt.target
const paperDirection = li.dataset.paperDirection
this.instance.command.executePaperDirection(paperDirection)
@ -1420,7 +1511,7 @@ export default {
])
}
})
},
fullscreen() {
this.toggleFullscreen()
@ -1434,7 +1525,7 @@ export default {
document.exitFullscreen()
}
},
executeMode(){
executeMode() {
const modeList = [
{
mode: EditorMode.EDIT,
@ -1490,14 +1581,24 @@ export default {
},
pageModeDomShow() {
const pageModeDom = document.querySelector('.page-mode')
const pageModeOptionsDom =pageModeDom.querySelector('.options')
const pageModeOptionsDom = pageModeDom.querySelector('.options')
pageModeOptionsDom.classList.toggle('visible')
},
executePageMode (evt) {
executePageMode(evt) {
const li = evt.target
this.instance.command.executePageMode(li.dataset.pageMode)
},
editorLisener(){
editorLisener() {
this.instance.listener.visiblePageNoListChange = function (payload) {
const text = payload.map(i => i + 1).join('、')
document.querySelector('.page-no-list').innerText = text
}
this.instance.listener.intersectionPageNoChange = function (payload) {
document.querySelector('.page-no').innerText = `${payload + 1}`
}
this.instance.listener.pageSizeChange = function (payload) {
document.querySelector('.page-size').innerText = `${payload}`
}
this.instance.listener.contentChange = debounce(this.handleContentChange, 200)
this.instance.listener.pageScaleChange = function (payload) {
@ -1631,7 +1732,7 @@ export default {
this.instance.command.executeInsertTable(this.rowIndex, this.colIndex)
this.recoveryTable()
},
}
}
</script>

4
vite.config.js
View File

@ -18,8 +18,8 @@ export default defineConfig({
// 在此处编写代理规则
'/api': {
secure: false,
target: 'https://test.yqt.com',
//target: 'https://c.apxly.com',
//target: 'https://test.yqt.com',
target: 'https://c.apxly.com',
changeOrigin: true,
rewrite: (path) => {
return path.replace(/\/api/, '')