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", "element-plus": "^2.7.5",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-axios": "^3.5.2", "vue-axios": "^3.5.2",
"vue-router": "^4.3.3" "vue-router": "^4.3.3",
"vuedraggable": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",
@ -1208,6 +1209,11 @@
"fsevents": "~2.3.2" "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": { "node_modules/source-map-js": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@ -1313,6 +1319,17 @@
"peerDependencies": { "peerDependencies": {
"vue": "^3.2.0" "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", "element-plus": "^2.7.5",
"vue": "^3.4.21", "vue": "^3.4.21",
"vue-axios": "^3.5.2", "vue-axios": "^3.5.2",
"vue-router": "^4.3.3" "vue-router": "^4.3.3",
"vuedraggable": "^4.1.0"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",

View File

@ -8,7 +8,7 @@ import TheWelcome from './components/TheWelcome.vue'
<div> <div>
<div class="menu" editor-component="menu"> <div class="menu" editor-component="menu">
<el-button @click="getHTMLValuea">文档数据</el-button> <el-button @click="getHTMLValuea">文档数据</el-button>
<el-button @click="updateWord">更新文档</el-button> <!-- <el-button @click="updateWord">更新文档</el-button> -->
<el-button @click="getHTMLValue">保存样式</el-button> <el-button @click="getHTMLValue">保存样式</el-button>
<div class="menu-item"> <div class="menu-item">
<div class="menu-item__undo" @click="executeUndo"> <div class="menu-item__undo" @click="executeUndo">
@ -418,6 +418,12 @@ import TheWelcome from './components/TheWelcome.vue'
</div> </div>
<div v-if="confShow" class="main_right"> <div v-if="confShow" class="main_right">
<el-form ref="form" label-width="80px"> <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-form-item label="表格列数" style="margin-bottom: 0;">
<el-input @input="isUpdate" v-model="tableCol" size="small"></el-input> <el-input @input="isUpdate" v-model="tableCol" size="small"></el-input>
</el-form-item> </el-form-item>
@ -435,17 +441,31 @@ import TheWelcome from './components/TheWelcome.vue'
</div> </div>
</el-form> </el-form>
</div> </div>
<div v-if="confShow" class="main_left"> <!-- <div v-if="confShow" class="main_left">
<el-form ref="form" label-width="80px"> <el-form ref="form" label-width="80px">
<div v-for="(value, key, index) in field"> <div v-for="(value, key, index) in field">
<el-form-item :label="field[key]" style="margin-bottom: 0;"> <el-form-item :label="field[key]" style="margin-bottom: 0;">
<el-checkbox @change="isUpdate" name="type" v-model="showObj[key]"> <el-checkbox @change="isUpdate" name="type" v-model="showObj[key]">
是否展示 是否展示
</el-checkbox> </el-checkbox>
</el-form-item> </el-form-item>
</div> </div>
</el-form> </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>
<!--<div class="canvas-editor" style="height:1000px;width:1000px;margin:0 auto"></div>--> <!--<div class="canvas-editor" style="height:1000px;width:1000px;margin:0 auto"></div>-->
</div> </div>
@ -468,9 +488,11 @@ import Editor, {
TitleLevel TitleLevel
} from '@hufe921/canvas-editor' } from '@hufe921/canvas-editor'
import axios from 'axios' import axios from 'axios'
import draggable from "vuedraggable"
export default { export default {
data() { data() {
return { return {
fieldArr: [],
confShow: true, confShow: true,
tableCol: 4, tableCol: 4,
isShow: false, isShow: false,
@ -485,13 +507,24 @@ export default {
updateStatus: false, updateStatus: false,
orderList: [], orderList: [],
showObj: {}, showObj: {},
config: {} config: {},
tableHeight:42,
tableWidth:556
} }
}, },
mounted() { mounted() {
this.login() this.login()
}, },
methods: { methods: {
onStart() {
console.log("开始拖拽")
},
onEnd() {
//console.log(this.fieldArr)
console.log("结束拖拽")
this.updateStatus = true
this.updateDoc(this.orderList)
},
isUpdate() { isUpdate() {
if (this.tableCol == '' || this.tableCol == '0') { if (this.tableCol == '' || this.tableCol == '0') {
return false return false
@ -534,6 +567,7 @@ export default {
this.nameField = nameField this.nameField = nameField
this.showObj = showObj this.showObj = showObj
this.field = fieldObj this.field = fieldObj
this.fieldArr = fieldArr
this.getApiData() this.getApiData()
}) })
}, },
@ -548,17 +582,35 @@ export default {
this.orderList = data.data.orderExt.productList this.orderList = data.data.orderExt.productList
let orderData = data.data.orderExt.productList let orderData = data.data.orderExt.productList
let data2 = response2.data let data2 = response2.data
if (data2.code == 1) { if (data2.code == 1) {
this.config = data2.data 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.showObj[key] = false
} }
} }
this.sortData(data2.data)
} }
this.updateDoc(orderData) 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) { getTest(data) {
let nArr = data.split('\n') let nArr = data.split('\n')
let saveData = {} let saveData = {}
@ -583,17 +635,18 @@ export default {
}, },
updateDoc(orderData) { updateDoc(orderData) {
let _this = this 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 = [] let cols = []
for (let c = 0; c < this.tableCol; c++) { for (let c = 0; c < _this.tableCol; c++) {
let widthItem = { "width": width } let widthItem = { "width": width }
cols.push(widthItem) 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 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 tdList = []
let ind = 1 let ind = 1
@ -611,38 +664,40 @@ export default {
ind += temLen 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) 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 if (!_this.showObj[key]) continue
let value = {} let value = {}
let temValue = {} let temValue = {}
if (_this.config.hasOwnProperty(key)) {// if (_this.config.hasOwnProperty(key)) {//
let field_style = JSON.parse(JSON.stringify(_this.config[key]['field_style'])) 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 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 { } 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) tdList.push(value)
temList.push(temValue) temList.push(temValue)
if (ind % len == 0) { if (ind % len == 0) {
let trListItem = { "minHeight": 42, "height": 42, "tdList": [] } let trListItem = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
trListItem.tdList = tdList trListItem.tdList = tdList
trList.push(trListItem) trList.push(trListItem)
tdList = [] tdList = []
trListItem = { "minHeight": 42, "height": 42, "tdList": [] } trListItem = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
for (let index = 0; index < temList.length; index++) { for (let index = 0; index < temList.length; index++) {
tdList.push(temList[index]) tdList.push(temList[index])
} }
@ -663,42 +718,22 @@ export default {
} }
table.trList = trList table.trList = trList
showData.push(table) 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) this.init(showData)
}, },
fillBlank(len, tdList, temList) { fillBlank(len, tdList, temList) {
let temLen = len - tdList.length let temLen = len - tdList.length
let tableHeight = parseInt(this.tableHeight)
for (let g = 0; g < temLen; g++) { for (let g = 0; g < temLen; g++) {
let value = { "colspan": 1, "rowspan": 1, "value": [{ "value": "", "size": 16 }] } let value = { "colspan": 1, "rowspan": 1, "value": [{ "value": "", "size": 16 }] }
tdList.push(value) tdList.push(value)
} }
let trListItem1 = { "minHeight": 42, "height": 42, "tdList": [] } let trListItem1 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
trListItem1.tdList = tdList trListItem1.tdList = tdList
//trList.push(trListItem) //trList.push(trListItem)
tdList = [] tdList = []
let trListItem2 = { "minHeight": 42, "height": 42, "tdList": [] } let trListItem2 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
for (let index = 0; index < temList.length; index++) { for (let index = 0; index < temList.length; index++) {
tdList.push(temList[index]) tdList.push(temList[index])
} }
@ -706,7 +741,7 @@ export default {
let value = { "colspan": 1, "rowspan": 1, "value": [{ "value": "", "size": 16 }] } let value = { "colspan": 1, "rowspan": 1, "value": [{ "value": "", "size": 16 }] }
tdList.push(value) tdList.push(value)
} }
trListItem2 = { "minHeight": 42, "height": 42, "tdList": [] } trListItem2 = { "minHeight": tableHeight, "height": tableHeight, "tdList": [] }
trListItem2.tdList = tdList trListItem2.tdList = tdList
return { trListItem1: trListItem1, trListItem2: trListItem2 } return { trListItem1: trListItem1, trListItem2: trListItem2 }
}, },
@ -733,7 +768,7 @@ export default {
//const aaa = this.instance.command.getHTML() //const aaa = this.instance.command.getHTML()
//const bbb = this.instance.command.getText() //const bbb = this.instance.command.getText()
const ccc = this.instance.command.getValue() const ccc = this.instance.command.getValue()
//console.log(aaa) //console.log(ccc)
//console.log(this.nameField) //console.log(this.nameField)
let data = ccc.data.main[0].trList let data = ccc.data.main[0].trList
let flag = 1 let flag = 1
@ -766,12 +801,12 @@ export default {
} }
for (let j = 0; j < data[i].tdList.length; j++) { for (let j = 0; j < data[i].tdList.length; j++) {
let fieldKey = tempFile[j] let fieldKey = tempFile[j]
if(typeof fieldKey === 'undefined') continue if (typeof fieldKey === 'undefined') continue
let style = data[i].tdList[j].value[0] let style = data[i].tdList[j].value[0]
delete style.value delete style.value
tempData[fieldKey]['value_style'] = style tempData[fieldKey]['value_style'] = style
} }
tempFile = [] tempFile = []
flag++ flag++
} }
@ -779,12 +814,13 @@ export default {
for (let key in tempData) { for (let key in tempData) {
saveData.push(tempData[key]) saveData.push(tempData[key])
} }
console.log(saveData)
//return false
let api = '/api/Administrator/OrderFieldStyle/save' let api = '/api/Administrator/OrderFieldStyle/save'
axios.post(api, saveData).then((res) => { axios.post(api, saveData).then((res) => {
}) })
}, },
getLen(value) { getLen(value) {
let arr = value.split('') let arr = value.split('')
@ -807,7 +843,6 @@ export default {
}, },
init(showData) { init(showData) {
if (this.updateStatus) { if (this.updateStatus) {
this.instance.destroy() this.instance.destroy()
} }
@ -826,10 +861,6 @@ export default {
}, },
{} {}
) )
this.instance.listener.rangeStyleChange = function (payload) {
//console.log(payload)
}
}, },
executeUndo() {// executeUndo() {//

View File

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