add code

package-lock.json

@@ -13,7 +13,8 @@
         "element-plus": "^2.7.5",
         "vue": "^3.4.21",
         "vue-axios": "^3.5.2",
-        "vue-router": "^4.3.3"
+        "vue-router": "^4.3.3",
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
@@ -1208,6 +1209,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -1313,6 +1319,17 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
     }
   }
 }

package.json

@@ -14,7 +14,8 @@
     "element-plus": "^2.7.5",
     "vue": "^3.4.21",
     "vue-axios": "^3.5.2",
-    "vue-router": "^4.3.3"
+    "vue-router": "^4.3.3",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

src/App.vue

@@ -8,7 +8,7 @@ import TheWelcome from './components/TheWelcome.vue'
 		<div>
 			<div class="menu" editor-component="menu">
 				<el-button @click="getHTMLValuea">文档数据</el-button>
-				<el-button @click="updateWord">更新文档</el-button>
+				<!-- <el-button @click="updateWord">更新文档</el-button> -->
 				<el-button @click="getHTMLValue">保存样式</el-button>
 				<div class="menu-item">
 					<div class="menu-item__undo" @click="executeUndo">
@@ -418,6 +418,12 @@ import TheWelcome from './components/TheWelcome.vue'
 			</div>
 			<div v-if="confShow" class="main_right">
 				<el-form ref="form" label-width="80px">
+					<el-form-item label="表格宽度" style="margin-bottom: 0;">
+						<el-input @input="isUpdate" v-model="tableWidth" size="small"></el-input>
+					</el-form-item>
+					<el-form-item label="表格高度" style="margin-bottom: 0;">
+						<el-input @input="isUpdate" v-model="tableHeight" size="small"></el-input>
+					</el-form-item>
 					<el-form-item label="表格列数" style="margin-bottom: 0;">
 						<el-input @input="isUpdate" v-model="tableCol" size="small"></el-input>
 					</el-form-item>
@@ -435,17 +441,31 @@ import TheWelcome from './components/TheWelcome.vue'
 					</div>
 				</el-form>
 			</div>
-			<div v-if="confShow" class="main_left">
+			<!-- <div v-if="confShow" class="main_left">
 				<el-form ref="form" label-width="80px">
 					<div v-for="(value, key, index) in field">
 						<el-form-item :label="field[key]" style="margin-bottom: 0;">
-
 							<el-checkbox @change="isUpdate" name="type" v-model="showObj[key]">
 								是否展示
 							</el-checkbox>
 						</el-form-item>
 					</div>
 				</el-form>
+			</div> -->
+			<div v-if="confShow" class="main_left">
+				<div>拖拽此列调整位置</div>
+				<el-form ref="form" label-width="80px">
+					<draggable :list="fieldArr" ghost-class="ghost" item-key="id" :sort="true" chosen-class="chosenClass" animation="300"
+						@start="onStart" @end="onEnd">
+						<template #item="{ element }" >
+							<el-form-item :label="element.name"  style="margin-bottom: 0;">
+								<el-checkbox @change="isUpdate" name="type" v-model="showObj[element.field]">
+									是否展示
+								</el-checkbox>
+							</el-form-item>
+						</template>
+					</draggable>
+				</el-form>
 			</div>
 			<!--<div class="canvas-editor" style="height:1000px;width:1000px;margin:0 auto"></div>-->
 		</div>
@@ -468,9 +488,11 @@ import Editor, {
 	TitleLevel
 } from '@hufe921/canvas-editor'
 import axios from 'axios'
+import draggable from "vuedraggable"
 export default {
 	data() {
 		return {
+			fieldArr: [],
 			confShow: true,
 			tableCol: 4,
 			isShow: false,
@@ -485,13 +507,24 @@ export default {
 			updateStatus: false,
 			orderList: [],
 			showObj: {},
-			config: {}
+			config: {},
+			tableHeight:42,
+			tableWidth:556
 		}
 	},
 	mounted() {
 		this.login()
 	},
 	methods: {
+		onStart() {
+			console.log("开始拖拽")
+		},
+		onEnd() {
+			//console.log(this.fieldArr)
+			console.log("结束拖拽")
+			this.updateStatus = true
+			this.updateDoc(this.orderList)
+		},
 		isUpdate() {
 			if (this.tableCol == '' || this.tableCol == '0') {
 				return false
@@ -534,6 +567,7 @@ export default {
 				this.nameField = nameField
 				this.showObj = showObj
 				this.field = fieldObj
+				this.fieldArr = fieldArr
 				this.getApiData()
 			})
 		},
@@ -548,17 +582,35 @@ export default {
 				this.orderList = data.data.orderExt.productList
 				let orderData = data.data.orderExt.productList
 				let data2 = response2.data
+				
 				if (data2.code == 1) {
 					this.config = data2.data
-					for(let key in this.showObj) {
+					for (let key in this.showObj) {
-						if(!this.config.hasOwnProperty(key)) {
+						if (!this.config.hasOwnProperty(key)) {
 							this.showObj[key] = false
 						}
 					}
+					this.sortData(data2.data)
 				}
 				this.updateDoc(orderData)
 			}))
 		},
+		sortData(styleData) {
+			let tempObj = {}
+			for(let i = 0; i < this.fieldArr.length; i++) {
+				tempObj[this.fieldArr[i].field] = this.fieldArr[i]
+			}
+			let tempArr = [];
+			for(let key in tempObj) {
+				if(!styleData.hasOwnProperty(key)) {
+					tempArr.push(tempObj[key])
+				}
+			}
+			for(let styleKey in styleData) {
+				tempArr.push(tempObj[styleKey])
+			}
+			this.fieldArr = tempArr
+		},
 		getTest(data) {
 			let nArr = data.split('\n')
 			let saveData = {}
@@ -583,17 +635,18 @@ export default {
 		},
 		updateDoc(orderData) {
 			let _this = this
-			let width = 553 / this.tableCol
+			//let width = 553 / this.tableCol
-			let showData = []//[{ value: '订单详情', font: '宋体', size: '18', rowFlex: RowFlex.CENTER, bold: 'bolder' }, { value: '\n', font: '宋体', size: '18' }]
+			let width = _this.tableWidth / _this.tableCol
+			let showData = []
 			let cols = []
-			for (let c = 0; c < this.tableCol; c++) {
+			for (let c = 0; c < _this.tableCol; c++) {
 				let widthItem = { "width": width }
 				cols.push(widthItem)
 			}
-			let table = { "value": "", "type": "table", "trList": [], "width": 553, "height": 126, "colgroup": [{ "width": 92 }, { "width": 92 }, { "width": 92 }, { "width": 92 }, { "width": 92 }, { "width": 92 }] }
+			let tableHeight = parseInt(_this.tableHeight)
+			let table = { "value": "", "type": "table", rowFlex: 'center', "trList": [], "width": _this.tableWidth, "height": 126, "colgroup": [] }
 			table.colgroup = cols
-			let trList = [{ "height": 42, "minHeight": 42, "tdList": [{ 'verticalAlign': 'bottom', "colspan": this.tableCol, "rowspan": 1, "value": [{ "value": "订单详情", "size": 18, 'rowFlex': RowFlex.CENTER, bold: 'bolder' }] }] }]
+			let trList = [{ "minHeight": tableHeight, "height": tableHeight, "tdList": [{ 'verticalAlign': 'middle', "colspan": _this.tableCol, "rowspan": 1, "value": [{ "value": "订单详情", "size": 18, 'rowFlex': 'center', bold: 'bolder' }] }] }]
-			//table.trList.push(trListItem)
 
 			let tdList = []
 			let ind = 1
@@ -611,38 +664,40 @@ export default {
 					ind += temLen
 				}
 
-				let proTitle = { "height": 42, "minHeight": 42, "tdList": [{ 'verticalAlign': 'bottom', "colspan": _this.tableCol, "rowspan": 1, "value": [{ "value": "产品名称: " + item['product_name'], "size": 16, bold: 'bolder' }] }] }
+				let proTitle = { "minHeight": tableHeight, "height": tableHeight, "tdList": [{ 'verticalAlign': 'middle', "colspan": _this.tableCol, "rowspan": 1, "value": [{ "value": "产品名称: " + item['product_name'], "size": 16, bold: 'bolder' }] }] }
 				trList.push(proTitle)
-				for (let key in _this.field) {
+				//for (let key in _this.field) {
+				for(let j = 0; j < _this.fieldArr.length; j++){
+					let key = _this.fieldArr[j].field
 					if (!_this.showObj[key]) continue
 
 					let value = {}
 					let temValue = {}
 					if (_this.config.hasOwnProperty(key)) {//
 						let field_style = JSON.parse(JSON.stringify(_this.config[key]['field_style']))
-						let title = _this.field[key]
+						//let title = _this.fieldArr[j].name//_this.field[key]
-						field_style.value = title
+						field_style.value = _this.fieldArr[j].name
-						
+
-						value = { "colspan": 1, "rowspan": 1, "value": [field_style] }
+						value = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [field_style] }
 						let value_style = JSON.parse(JSON.stringify(_this.config[key]['value_style']))
-						let field_value = item[key]
+						//let field_value = item[key]
-						value_style.value = field_value
+						value_style.value = item[key]
-						
+
-						temValue = { "colspan": 1, "rowspan": 1, "value": [value_style] }
+						temValue = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [value_style] }
 					} else {
-						value = { "colspan": 1, "rowspan": 1, "value": [{ "value": _this.field[key], "size": 16, 'rowFlex': RowFlex.CENTER }] }
+						value = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [{ "value": _this.fieldArr[j].name, "size": 16, 'rowFlex': RowFlex.CENTER }] }
-						temValue = { "colspan": 1, "rowspan": 1, "value": [{ "value": item[key], "size": 14, 'rowFlex': RowFlex.CENTER }] }
+						temValue = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [{ "value": item[key], "size": 14, 'rowFlex': RowFlex.CENTER }] }
 					}
-					
+
 					tdList.push(value)
 					temList.push(temValue)
 					if (ind % len == 0) {
-						let trListItem = { "minHeight": 42, "height": 42, "tdList": [] }
+						let trListItem = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
 						trListItem.tdList = tdList
 						trList.push(trListItem)
 						tdList = []
 
-						trListItem = { "minHeight": 42, "height": 42, "tdList": [] }
+						trListItem = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
 						for (let index = 0; index < temList.length; index++) {
 							tdList.push(temList[index])
 						}
@@ -663,42 +718,22 @@ export default {
 			}
 			table.trList = trList
 			showData.push(table)
-			/**let item = {}
-			let i = 0
-			for (let k = 0; k < orderData.length; k++) {
-				for (let key in this.field) {
-					if (orderData[k].hasOwnProperty(key) && this.field.hasOwnProperty(key) && this.showObj[key]) { // 确保是对象自有属性，不是原型链上的属性
-						let value = this.field[key] + ':' + orderData[k][key]
-						if (i % 2 == 0) {
-							let len = this.getLen(value)
-							for (let j = 0; j < 40 - len; j++) {
-								value += " "
-							}
-							item = { value: value, font: '宋体', size: '14' }
-							showData.push(item)
-						} else {
-							item = { value: value + '\n', font: '宋体', size: '14' }
-							showData.push(item)
-						}
-						i++
-					}
-				}
-			}*/
 			this.init(showData)
 		},
 
 		fillBlank(len, tdList, temList) {
 			let temLen = len - tdList.length
+			let tableHeight = parseInt(this.tableHeight)
 			for (let g = 0; g < temLen; g++) {
 				let value = { "colspan": 1, "rowspan": 1, "value": [{ "value": "", "size": 16 }] }
 				tdList.push(value)
 			}
-			let trListItem1 = { "minHeight": 42, "height": 42, "tdList": [] }
+			let trListItem1 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
 			trListItem1.tdList = tdList
 			//trList.push(trListItem)
 
 			tdList = []
-			let trListItem2 = { "minHeight": 42, "height": 42, "tdList": [] }
+			let trListItem2 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
 			for (let index = 0; index < temList.length; index++) {
 				tdList.push(temList[index])
 			}
@@ -706,7 +741,7 @@ export default {
 				let value = { "colspan": 1, "rowspan": 1, "value": [{ "value": "", "size": 16 }] }
 				tdList.push(value)
 			}
-			trListItem2 = { "minHeight": 42, "height": 42, "tdList": [] }
+			trListItem2 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
 			trListItem2.tdList = tdList
 			return { trListItem1: trListItem1, trListItem2: trListItem2 }
 		},
@@ -733,7 +768,7 @@ export default {
 			//const aaa = this.instance.command.getHTML()
 			//const bbb = this.instance.command.getText()
 			const ccc = this.instance.command.getValue()
-			//console.log(aaa)
+			//console.log(ccc)
 			//console.log(this.nameField)
 			let data = ccc.data.main[0].trList
 			let flag = 1
@@ -766,12 +801,12 @@ export default {
 					}
 					for (let j = 0; j < data[i].tdList.length; j++) {
 						let fieldKey = tempFile[j]
-						if(typeof fieldKey === 'undefined') continue
+						if (typeof fieldKey === 'undefined') continue
 						let style = data[i].tdList[j].value[0]
 						delete style.value
 						tempData[fieldKey]['value_style'] = style
 					}
-				
+
 					tempFile = []
 					flag++
 				}
@@ -779,12 +814,13 @@ export default {
 			for (let key in tempData) {
 				saveData.push(tempData[key])
 			}
-		
+			console.log(saveData)
+			//return false
 			let api = '/api/Administrator/OrderFieldStyle/save'
 			axios.post(api, saveData).then((res) => {
 
 			})
-			
+
 		},
 		getLen(value) {
 			let arr = value.split('')
@@ -807,7 +843,6 @@ export default {
 
 		},
 		init(showData) {
-
 			if (this.updateStatus) {
 				this.instance.destroy()
 			}
@@ -826,10 +861,6 @@ export default {
 				},
 				{}
 			)
-
-			this.instance.listener.rangeStyleChange = function (payload) {
-				//console.log(payload)
-			}
 		},
 
 		executeUndo() {//撤销

src/assets/style.css

@@ -1074,5 +1074,5 @@ ul {
 .main_left {
   position: absolute;
   right: 300px;
-  top: 155px;
+  top: 200px;
 }