From 69020cd01503547859f038358afa1c5c541c4115 Mon Sep 17 00:00:00 2001 From: lq <13849061902@qq.com> Date: Tue, 2 Jul 2024 09:46:10 +0800 Subject: [PATCH] add code --- package-lock.json | 19 +++++- package.json | 3 +- src/App.vue | 153 ++++++++++++++++++++++++++----------------- src/assets/style.css | 2 +- 4 files changed, 113 insertions(+), 64 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0c34553..020c8db 100644 --- a/package-lock.json +++ b/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" + } } } } diff --git a/package.json b/package.json index 394965f..50542e5 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index 3927d67..b75a9ea 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,7 +8,7 @@ import TheWelcome from './components/TheWelcome.vue'
文档数据 - 更新文档 + 保存样式
@@ -418,6 +418,12 @@ import TheWelcome from './components/TheWelcome.vue'
+ + + + + + @@ -435,17 +441,31 @@ import TheWelcome from './components/TheWelcome.vue'
-
+ +
+
拖拽此列调整位置
+ + + + +
@@ -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) { - if(!this.config.hasOwnProperty(key)) { + for (let key in this.showObj) { + 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 showData = []//[{ value: '订单详情', font: '宋体', size: '18', rowFlex: RowFlex.CENTER, bold: 'bolder' }, { value: '\n', font: '宋体', size: '18' }] + //let width = 553 / this.tableCol + 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' }] }] }] - //table.trList.push(trListItem) + let trList = [{ "minHeight": tableHeight, "height": tableHeight, "tdList": [{ 'verticalAlign': 'middle', "colspan": _this.tableCol, "rowspan": 1, "value": [{ "value": "订单详情", "size": 18, 'rowFlex': 'center', bold: 'bolder' }] }] }] 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] - field_style.value = title - - value = { "colspan": 1, "rowspan": 1, "value": [field_style] } + //let title = _this.fieldArr[j].name//_this.field[key] + field_style.value = _this.fieldArr[j].name + + 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] - value_style.value = field_value - - temValue = { "colspan": 1, "rowspan": 1, "value": [value_style] } + //let field_value = item[key] + value_style.value = item[key] + + 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 }] } - temValue = { "colspan": 1, "rowspan": 1, "value": [{ "value": item[key], "size": 14, 'rowFlex': RowFlex.CENTER }] } + value = { 'verticalAlign': 'middle', "colspan": 1, "rowspan": 1, "value": [{ "value": _this.fieldArr[j].name, "size": 16, '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() {//撤销 diff --git a/src/assets/style.css b/src/assets/style.css index 896c91f..7f4e650 100644 --- a/src/assets/style.css +++ b/src/assets/style.css @@ -1074,5 +1074,5 @@ ul { .main_left { position: absolute; right: 300px; - top: 155px; + top: 200px; } \ No newline at end of file