code

src/App.vue

@@ -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="confShow = !confShow">显示/隐藏</el-button>
-				<el-button size="small" @click="getShow">预览</el-button>
+				<el-button size="small" @click="getShow">预览/配置</el-button>
-				<el-button size="small" @click="changeConfig">切换配置</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">
@@ -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;">
+						<el-form-item :label="searchField[key]" @click="copy(searchField[key])"
-							<span @click.stop="copy('{' + searchField[key] + '}')">{{ '{' + searchField[key] + '}' }}</span>
+							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:{},
+			searchNameField: {},
-			searchList:{},
+			searchList: {},
-			searchField:{},
+			searchField: {},
-			doc:{},
+			doc: {},
 			myDiv: null,
-			orderType:0,
+			orderType: 0,
-			modeIndex:0
+			modeIndex: 0,
+			id: 0
 		}
 	},
 	mounted() {
 		this.login()
 	},
 	methods: {
-		savePdf(){
+		savePdf() {
 			const element = document.getElementsByTagName('canvas')
 			this.htmlToPDF(element[0], 'a11a')
 		},
@@ -540,7 +544,7 @@ 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
@@ -555,13 +559,13 @@ 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');
 
@@ -570,15 +574,15 @@ export default {
 				method: 'POST',
 				body: formData
 			})
-			.then(response => response.json())
+				.then(response => response.json())
-			.then(data => {
+				.then(data => {
-				ElMessage({
+					ElMessage({
-					message: data.msg,
+						message: data.msg,
-					type: data.code == 1 ? 'success' : 'error',
+						type: data.code == 1 ? 'success' : 'error',
-					plain: true,
+						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() {
@@ -659,7 +662,7 @@ 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']}
+					let item = { 'proid': element['pid'], 'prolistid': element['plid'] }
-					proIdData.push(item)
+					//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']
@@ -681,7 +689,7 @@ export default {
 				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))
+			localStorage.setItem('word_data', JSON.stringify(ccc.data))
-			let saveData = {'type':this.orderType, 'field_style':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]
+			let newValue = ''
-			value = value.replace('{'+ fieldKey +'}', 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)
 		},
-	
+		chkTdList(tdList) {
-		fillData(config) {
+			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]))
+				let configItem = JSON.stringify(config[i])//
-				if(configItem.hasOwnProperty('type') && configItem['type'] == 'table') {
+				configItem = JSON.parse(configItem)
-					let trList = configItem.trList
+				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 trListItem = JSON.stringify(trList[j])//
-						let tdList = trListItem.tdList
+						trListItem = JSON.parse(trListItem)
-						let title = tdList[0].value[0].value
+						let tdList = JSON.stringify(trListItem.tdList)
-						if(title.indexOf('{') != -1) {
+						tdList = JSON.parse(tdList)
-							trListItem.tdList = []
+						let chkRes = this.chkTdList(tdList)
-							for (let k = 0; k < this.orderData.length; k++) {
+						if (chkRes == false) {
-								let tempTdList = []
+							temTrList.trList.push(trListItem)
-								let order = this.orderData[k];
+							continue
-								for (let l = 0; l < tdList.length; l++) {
+						}
-									let tdListItem = tdList[l]//JSON.parse(JSON.stringify(tdList[l]))
+						trListItem.tdList = []
-									let tdValue = tdListItem.value[0].value
+						for (let k = 0; k < this.orderData.length; k++) {
-									let newValue = this.getFieldValue(tdValue, order)
+							let tempTdList = []
-
+							let order = this.orderData[k]
-									let item = {
+							let hasMergeTable = false
-										'colspan': tdListItem.colspan,
+							for (let l = 0; l < tdList.length; l++) {
-										'rowspan': tdListItem.rowspan,
+								let tdListItem = JSON.stringify(tdList[l])
-										'value': [
+								tdListItem = JSON.parse(tdListItem)
-											{
+								if (tdListItem.rowspan > 1) {//处理合并的单元格行
-												'value': newValue,
+									hasMergeTable = true
-												'size': tdListItem.value[0].size
+									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)
 									}
-
+									if (k + 1 == this.orderData.length) {//当前合并单元格行数处理完k索引加单元格行数-1 本身循环有++操作
-									tempTdList.push(item)
+										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,
+									'height': trListItem.height,
-									'minHeight':trListItem.minHeight ? trListItem.minHeight : trListItem.height,
+									'tdList': [],
-									'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,9 +1010,10 @@ 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()
 			}
 
@@ -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:first-child').innerText = dateString
-			dateDomOptionDom.querySelector('li:last-child').innerText =dateTimeString
+			dateDomOptionDom.querySelector('li:last-child').innerText = dateTimeString
 
 		},
-		executePageScaleMinus(){
+		executePageScaleMinus() {
 			this.instance.command.executePageScaleMinus()
 		},
 		executePageScaleAdd() {
@@ -1223,7 +1314,7 @@ export default {
 			}
 			this.instance.command.executeSeparator(payload)
 		},
-		selectColor () {
+		selectColor() {
 			const colorControlDom = document.querySelector('#color')
 			const colorDom = document.querySelector('.menu-item__color')
 			colorControlDom.click()
@@ -1233,7 +1324,7 @@ export default {
 				_this.instance.command.executeColor(colorControlDom.value)
 			}
 		},
-		highlight () {
+		highlight() {
 			const highlightControlDom = document.querySelector('#highlight')
 			const highlightDom = document.querySelector('.menu-item__highlight')
 			highlightControlDom?.click()
@@ -1263,13 +1354,13 @@ export default {
 
 
 		},
-		setMenuList(evt){
+		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')
@@ -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,
@@ -1332,12 +1423,12 @@ export default {
 		},
 		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)
@@ -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) {

vite.config.js

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