This commit is contained in:
lq 2024-07-02 09:46:10 +08:00
parent 6253aeafee
commit 69020cd015
4 changed files with 113 additions and 64 deletions

19
package-lock.json generated
View File

@ -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"
}
}
}
}

View File

@ -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",

View File

@ -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) {
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
//let title = _this.fieldArr[j].name//_this.field[key]
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]
value_style.value = field_value
//let field_value = item[key]
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 }] }
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,7 +801,7 @@ 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
@ -779,7 +814,8 @@ 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) => {
@ -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() {//

View File

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