add code
This commit is contained in:
lq
parent
6253aeafee
commit
69020cd015
19
package-lock.json
generated
19
package-lock.json
generated
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
153
src/App.vue
153
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) {
|
||||
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() {//撤销
|
||||
|
|
|
|||
|
|
@ -1074,5 +1074,5 @@ ul {
|
|||
.main_left {
|
||||
position: absolute;
|
||||
right: 300px;
|
||||
top: 155px;
|
||||
top: 200px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user