|
|
@@ -1,37 +1,6 @@
|
|
|
<!-- @desc:打印模板 @auth:洪旭东 @time:2022-05-20 14:31 -->
|
|
|
<template>
|
|
|
<div class="print-template" style="height: 100%;background: #f2f2f2;" onselectstart="return false">
|
|
|
- <div class="header">
|
|
|
- <img style="height: 60%;" src="http://www.dongkesoft.com/public/static/dongke/img/0logo.png"/>
|
|
|
- <div style="display:flex;">
|
|
|
-<!-- <SelectPop v-model="templateType" style="width:200px;" :multiple="false"-->
|
|
|
-<!-- :placeholder="$t('selectWords', { 'search-name': $t('templateType') })"-->
|
|
|
-<!-- @on-select="changeTemplateType" :disabled="!(!(editRow))" label-key="label" value-key="value"-->
|
|
|
-<!-- :options="templateTypeList" :clearable="false"-->
|
|
|
-<!-- />-->
|
|
|
-<!-- <InputPop name="templateName" v-model="templateName" style="width: 200px;margin-left: 10px;"/>-->
|
|
|
- <SelectPop v-model="paperDirection" style="width:200px;margin-left: 10px;" :multiple="false"
|
|
|
- @on-select="changePaperDirection" label-key="label" value-key="value"
|
|
|
- :options="paperDirectionList"
|
|
|
- :placeholder="$t('selectWords', { 'search-name': $t('paperDirection') })"
|
|
|
- />
|
|
|
- <SelectPop v-model="paperType" style="width:200px;margin-left: 10px;" :multiple="false"
|
|
|
- @on-select="paperTypeChange" label-key="label" value-key="value"
|
|
|
- :options="paperTypeList" :placeholder="$t('selectWords', { 'search-name': $t('paperType') })"
|
|
|
- />
|
|
|
- <div style="color: white;line-height: 33px;margin-left: 10px;" v-if="paperType==0">宽度</div>
|
|
|
- <InputNumberPop v-model="customWidth" style="width: 200px;margin-left: 10px;" :digits="1"
|
|
|
- @on-blur="(val)=> paperTypeList[0].width = val" v-if="paperType==0"/>
|
|
|
- <div style="color: white;line-height: 33px;margin-left: 10px;" v-if="paperType==0">高度</div>
|
|
|
- <InputNumberPop v-model="customHeight" style="width: 200px;margin-left: 10px;" :digits="1"
|
|
|
- @on-blur="(val)=> paperTypeList[0].height = val" v-if="paperType==0"/>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
-<!-- <Button type="primary" @click="close" style="margin-right: 10px;">取消</Button>-->
|
|
|
- <Button @click="save">保存</Button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
<div class="print-content" v-if="templateType">
|
|
|
<!-- 左侧部分 -->
|
|
|
<div class="center">
|
|
|
@@ -166,15 +135,65 @@
|
|
|
:y="item.top"
|
|
|
:x="item.left">
|
|
|
<img :src="item.path" style="width: 100%;height: 100%;" v-if="item.name != '$scanCode' && item.name != '$barCode'"/>
|
|
|
- <img :src="scanCode" style="width: 100%;height: 100%;" v-if="item.name == '$scanCode'"/>
|
|
|
- <img :src="scanCode" style="width: 100%;height: 100%;" v-if="item.name == '$barCode'"/>
|
|
|
+ <div v-if="item.name == '$scanCode'">
|
|
|
+ <img :src="scanCode" style="width: 100%;height: 100%;"/>
|
|
|
+ {{dataSource.main.filter(f=>f.key==item.dataSourceKey)[0].value}}
|
|
|
+ </div>
|
|
|
+ <div v-if="item.name == '$barCode'">
|
|
|
+ <img :src="scanCode" style="width: 100%;height: 100%;"/>
|
|
|
+ {{dataSource.main.filter(f=>f.key==item.dataSourceKey)[0].value}}
|
|
|
+ </div>
|
|
|
</vue-drag-resize>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 右侧部分 -->
|
|
|
<div class="right" @mousedown.stop>
|
|
|
- <Tabs value="name1" style="height: 100%;">
|
|
|
+ <div class="header">
|
|
|
+ <div>
|
|
|
+ <DkForm :col-count="1">
|
|
|
+ <DkFormItem :label="$t('paperDirection')">
|
|
|
+ <SelectPop v-model="paperDirection" style="width:200px;margin-left: 10px;" :multiple="false"
|
|
|
+ @on-select="changePaperDirection" label-key="label" value-key="value"
|
|
|
+ :options="paperDirectionList"
|
|
|
+ :placeholder="$t('selectWords', { 'search-name': $t('paperDirection') })"
|
|
|
+ />
|
|
|
+ </DkFormItem>
|
|
|
+ <DkFormItem :label="$t('paperType')">
|
|
|
+ <SelectPop v-model="paperType" style="width:200px;margin-left: 10px;" :multiple="false"
|
|
|
+ @on-select="paperTypeChange" label-key="label" value-key="value"
|
|
|
+ :options="paperTypeList" :placeholder="$t('selectWords', { 'search-name': $t('paperType') })"
|
|
|
+ />
|
|
|
+ </DkFormItem>
|
|
|
+ <DkFormItem label="宽度">
|
|
|
+<!-- <div style="color: white;line-height: 33px;margin-left: 10px;" v-if="paperType==0">宽度</div>-->
|
|
|
+ <InputNumberPop v-model="customWidth" style="width: 200px;margin-left: 10px;" :digits="1"
|
|
|
+ @on-blur="(val)=> paperTypeList[0].width = val" v-if="paperType==0"/>
|
|
|
+ </DkFormItem>
|
|
|
+ <DkFormItem label="高度">
|
|
|
+<!-- <div style="color: white;line-height: 33px;margin-left: 10px;" v-if="paperType==0">高度</div>-->
|
|
|
+ <InputNumberPop v-model="customHeight" style="width: 200px;margin-left: 10px;" :digits="1"
|
|
|
+ @on-blur="(val)=> paperTypeList[0].height = val" v-if="paperType==0"/>
|
|
|
+ </DkFormItem>
|
|
|
+ </DkForm>
|
|
|
+ <!-- <SelectPop v-model="templateType" style="width:200px;" :multiple="false"-->
|
|
|
+ <!-- :placeholder="$t('selectWords', { 'search-name': $t('templateType') })"-->
|
|
|
+ <!-- @on-select="changeTemplateType" :disabled="!(!(editRow))" label-key="label" value-key="value"-->
|
|
|
+ <!-- :options="templateTypeList" :clearable="false"-->
|
|
|
+ <!-- />-->
|
|
|
+ <!-- <InputPop name="templateName" v-model="templateName" style="width: 200px;margin-left: 10px;"/>-->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+<!-- <Button type="primary" @click="close" style="margin-right: 10px;">取消</Button>-->
|
|
|
+<!-- <Button @click="save">保存</Button>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Tabs value="name1">
|
|
|
<TabPane label="控件" name="name1" style="height: 100%;">
|
|
|
<div class="left-item" draggable="true" @dragend="dragend($event,'text')"
|
|
|
@click="drop({offsetY:0,offsetX:0},'text')">
|
|
|
@@ -237,11 +256,9 @@
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
|
|
|
<div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
|
|
|
<span>数</span><span>据</span><span>源</span></div>
|
|
|
- <Select style="width: 75%;" filterable clearable v-model="moveList[currentIndex].dataSourceKey">
|
|
|
- <Option value="name" v-for="(item,index) in dataSource.main" :key="index" :value="item.key">
|
|
|
- {{ item.title }}
|
|
|
- </Option>
|
|
|
- </Select>
|
|
|
+ <SelectPop v-model="moveList[currentIndex].dataSourceKey" style="width:75%;" :multiple="false" clearable
|
|
|
+ label-key="title" value-key="key"
|
|
|
+ :options="dataSource.main"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 当前选中为表格 -->
|
|
|
@@ -255,11 +272,9 @@
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
|
|
|
<div style="width: 20%;display: flex;justify-content: space-between;align-items: center;"><span>数</span><span>据</span><span>源</span>
|
|
|
</div>
|
|
|
- <Select style="width: 75%;" clearable v-model="tableCol[getCurrentColIndexReal(currentColIndex)].key">
|
|
|
- <Option value="name" v-for="(item,index) in dataSource.detail" :key="index" :value="item.key">
|
|
|
- {{ item.title }}
|
|
|
- </Option>
|
|
|
- </Select>
|
|
|
+ <SelectPop v-model="tableCol[getCurrentColIndexReal(currentColIndex)].key" style="width:75%;" :multiple="false" clearable
|
|
|
+ label-key="title" value-key="key"
|
|
|
+ :options="dataSource.detail"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 当前选择为图片 -->
|
|
|
@@ -295,11 +310,9 @@
|
|
|
<div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;">
|
|
|
<div style="width: 20%;display: flex;justify-content: space-between;align-items: center;">
|
|
|
<span>数</span><span>据</span><span>源</span></div>
|
|
|
- <Select style="width: 75%;" filterable clearable v-model="imgList[currentImgIndex].dataSourceKey">
|
|
|
- <Option value="name" v-for="(item,index) in dataSource.main" :key="index" :value="item.key">
|
|
|
- {{ item.title }}
|
|
|
- </Option>
|
|
|
- </Select>
|
|
|
+ <SelectPop v-model="imgList[currentImgIndex].dataSourceKey" style="width:75%;" :multiple="false" clearable
|
|
|
+ label-key="title" value-key="key"
|
|
|
+ :options="dataSource.main.copy()"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -725,7 +738,6 @@ export default {
|
|
|
* @date : 2022-5-25 20:01
|
|
|
*/
|
|
|
importSuccess(event) {
|
|
|
- console.log('event', event)
|
|
|
// if (event.code == 200 && event.data && event.data.uuidName) {
|
|
|
// this.imgList[this.currentImgIndex].path = this.$config.imgUrl + '/' + event.data.uuidName
|
|
|
//阿里OSS
|
|
|
@@ -743,7 +755,6 @@ export default {
|
|
|
importSuccessBackground(response, file, fileList) {
|
|
|
//如果多次上传,要把上一次图片的替换掉
|
|
|
if (fileList.length > 1) {
|
|
|
- console.log('this.$refs.backgroundImg', this.$refs.backgroundImg)
|
|
|
this.$refs.backgroundImg.fileList.splice(0, 1)
|
|
|
}
|
|
|
if (response.code == 200 && response.data && response.data.relativePath) {
|
|
|
@@ -767,7 +778,6 @@ export default {
|
|
|
* @date : 2022-5-25 19:20
|
|
|
*/
|
|
|
beforeUpload(file) {
|
|
|
- console.log('beforeUpload', file.size / 1024, this.maxSize)
|
|
|
if (!this.acceptFile.split(',').includes(file.type)) {
|
|
|
this.$Message.warning('图片格式不在允许的范围内')
|
|
|
return false
|
|
|
@@ -793,7 +803,6 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
checkItemInPaper(paper) {
|
|
|
- console.log('paper', paper)
|
|
|
let div = document.createElement('div')
|
|
|
div.id = 'cm'
|
|
|
div.style.width = paper.width + 'cm'
|
|
|
@@ -806,7 +815,6 @@ export default {
|
|
|
let heightPx = this.paperDirection === 'portrait' ? cm.height : cm.width
|
|
|
div.remove()
|
|
|
|
|
|
- console.log('切换之后宽:' + widthPx + ',高:' + heightPx)
|
|
|
|
|
|
return new Promise(resolve => {
|
|
|
let flag = true
|
|
|
@@ -832,18 +840,15 @@ export default {
|
|
|
this.checkItemInPaper(this.paperTypeList[index]).then(flag => {
|
|
|
if (flag) {
|
|
|
let paperEl = document.getElementById('paper')
|
|
|
- console.log('offsetHeight', paperEl.offsetHeight)
|
|
|
this.parentH = paperEl.clientHeight
|
|
|
this.parentW = paperEl.clientWidth
|
|
|
/* 重新打乱 */
|
|
|
this.$nextTick(() => {
|
|
|
// debugger
|
|
|
- console.log(this.paperTypeList[this.paperType].label)
|
|
|
let maxWidth = 0
|
|
|
let currentRowIndex = 0
|
|
|
/* 计算一下最多能摆多少个 */
|
|
|
let rowCount = Math.floor(document.getElementById('paper').offsetHeight / 20)
|
|
|
- console.log('rowCount', rowCount)
|
|
|
let moveListIndex = 0
|
|
|
setTimeout(() => {
|
|
|
this.moveList.forEach(it => {
|
|
|
@@ -871,11 +876,9 @@ export default {
|
|
|
|
|
|
},
|
|
|
visibleChange(val) {
|
|
|
- console.log('visibleChange')
|
|
|
this.$emit('input', val)
|
|
|
if (val) {
|
|
|
if (this.editRow) {
|
|
|
- console.log('visibleChange-editRow', this.editRow)
|
|
|
this.lastTemplateType = this.editRow.docCode
|
|
|
this.templateType = this.editRow.docCode
|
|
|
this.templateName = this.editRow.tmName
|
|
|
@@ -889,7 +892,7 @@ export default {
|
|
|
this.paperDirection = this.editRow.templateData.paperDirection
|
|
|
this.organization = this.editRow.orgId
|
|
|
this.backgroundConfig = this.editRow.templateData.backgroundConfig
|
|
|
- this.paperType = this.paperTypeList.map(it => it.label).indexOf(this.editRow.templateData.paperInfo.label)
|
|
|
+ this.paperType = this.paperTypeList.map(it => it.label).indexOf(this.editRow.templateData.paperInfo.label).toString()
|
|
|
this.paperTypeList[0].width = this.editRow.templateData.paperInfo.width
|
|
|
this.customWidth = this.editRow.templateData.paperInfo.width
|
|
|
this.paperTypeList[0].height = this.editRow.templateData.paperInfo.height
|
|
|
@@ -898,7 +901,6 @@ export default {
|
|
|
this.lastPaperDirection = this.paperDirection
|
|
|
//通过这种方式去渲染,避免双向绑定冲突问题
|
|
|
this.$nextTick(() => {
|
|
|
- console.log('this.tableCol', this.tableCol)
|
|
|
let table = this.$refs.printTemplateTable
|
|
|
/* 过滤一下 2022年8月30日14:51:25 */
|
|
|
this.tableCol.filter(it => it.checked).forEach((it, index) => {
|
|
|
@@ -1156,7 +1158,6 @@ export default {
|
|
|
},
|
|
|
on: {
|
|
|
click: () => {
|
|
|
- console.log('del text', data)
|
|
|
event.stopPropagation()
|
|
|
switch (data.type) {
|
|
|
case 'text':
|
|
|
@@ -1176,7 +1177,6 @@ export default {
|
|
|
},
|
|
|
on: {
|
|
|
'on-change': (flag) => {
|
|
|
- console.log('change Checkbox', data)
|
|
|
event.stopPropagation()
|
|
|
switch (data.type) {
|
|
|
case 'text':
|
|
|
@@ -1188,7 +1188,6 @@ export default {
|
|
|
return index !== data.index
|
|
|
})
|
|
|
let qy = willDelWidth % this.tableCol.length
|
|
|
- console.log(qy)
|
|
|
if (qy === 0) {
|
|
|
this.tableCol.forEach(it => {
|
|
|
it.width += willDelWidth / this.tableCol.length
|
|
|
@@ -1305,7 +1304,6 @@ export default {
|
|
|
event.stopPropagation()
|
|
|
switch (data.type) {
|
|
|
case 'col':
|
|
|
- console.log(flag)
|
|
|
/* 添加明细 */
|
|
|
if (flag) {
|
|
|
let width = 10 /* 默认新加的列宽度就是10 */
|
|
|
@@ -1347,7 +1345,6 @@ export default {
|
|
|
* @date : 2022-5-12 11:39
|
|
|
*/
|
|
|
onSelectChange(current) {
|
|
|
- console.log('current', current)
|
|
|
if (current.length <= 0 || !current[0].type) {
|
|
|
return
|
|
|
}
|
|
|
@@ -1355,7 +1352,6 @@ export default {
|
|
|
if (current[0].type === 'text') {
|
|
|
this.moveList[current[0].index].currentFlag = true
|
|
|
this.currentIndex = current[0].index
|
|
|
- console.log(this.moveList)
|
|
|
}
|
|
|
|
|
|
if (current[0].type === 'col') {
|
|
|
@@ -1438,7 +1434,6 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
this.tableCol[this.currentColIndex - 1].width = 100 - withoutBeforeWidth
|
|
|
- console.log('该行前行宽度' + (100 - withoutBeforeWidth))
|
|
|
} else {
|
|
|
let withoutAfterWidth = 0
|
|
|
this.tableCol.forEach((it, index) => {
|
|
|
@@ -1447,7 +1442,6 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
this.tableCol[this.currentColIndex + 1].width = 100 - withoutAfterWidth
|
|
|
- console.log('该行后行宽度' + (100 - withoutAfterWidth))
|
|
|
}
|
|
|
},
|
|
|
getItemTemplate(e) {
|
|
|
@@ -1456,12 +1450,9 @@ export default {
|
|
|
temp.left = e.offsetX - 30 <= 0 ? 0 : e.offsetX - 30
|
|
|
temp.checked = true
|
|
|
temp.deleteFlag = true
|
|
|
- console.log('temp', temp)
|
|
|
return temp
|
|
|
},
|
|
|
dragend(e, type) {
|
|
|
- console.log('e', e)
|
|
|
- // console.log(document.getElementById('paper'))
|
|
|
let tempE = { offsetX: e.clientX - 365, offsetY: e.clientY - 113 }
|
|
|
this.drop(tempE, type)
|
|
|
},
|
|
|
@@ -1471,7 +1462,6 @@ export default {
|
|
|
* @date : 2022-5-12 11:47
|
|
|
*/
|
|
|
drop(e, type) {
|
|
|
- console.log('drop')
|
|
|
switch (type) {
|
|
|
case 'page':
|
|
|
let data = this.getItemTemplate(e)
|
|
|
@@ -1647,7 +1637,6 @@ export default {
|
|
|
this.tableInfo.left = newRect.left
|
|
|
},
|
|
|
selectDragImg(index) {
|
|
|
- console.log(index)
|
|
|
this.clearAllSelect()
|
|
|
this.imgList.forEach((it, i) => {
|
|
|
if (index === i) {
|
|
|
@@ -1699,14 +1688,11 @@ export default {
|
|
|
|
|
|
// 提交时 重新处理一下width
|
|
|
let table = document.getElementById('printTemplateTable')
|
|
|
- console.log('tableCol', this.tableCol)
|
|
|
if (table) {
|
|
|
for (let j = 0; j < table.rows[0].cells.length; j++) {
|
|
|
- console.log('offsetWidth', table.rows[0].cells[j].getAttribute('data-key'))
|
|
|
let width = table.rows[0].cells[j].offsetWidth
|
|
|
this.tableCol.forEach(tcIt => {
|
|
|
if (tcIt.key === table.rows[0].cells[j].getAttribute('data-key')) {
|
|
|
- console.log(tcIt.key, width)
|
|
|
tcIt.width = parseInt(width)
|
|
|
}
|
|
|
})
|
|
|
@@ -1760,7 +1746,6 @@ export default {
|
|
|
return uuid
|
|
|
},
|
|
|
changeTemplateType(val) {
|
|
|
- console.log('changeTemplateType', this.moveList, this.tableInfo, this.imgList)
|
|
|
if (this.moveList.length > 0 || this.tableInfo || this.imgList.length > 0) {
|
|
|
this.$Modal.confirm({
|
|
|
title: '提示',
|
|
|
@@ -1790,17 +1775,14 @@ export default {
|
|
|
return ctx.measureText(str).width
|
|
|
},
|
|
|
changeFunc(val) {
|
|
|
- console.log('changeFunc', val)
|
|
|
if (!val) {
|
|
|
return
|
|
|
}
|
|
|
let templateObj = this.templateTypeList.filter(it => {
|
|
|
return it.value === val
|
|
|
})[0]
|
|
|
- console.log('templateObj', templateObj)
|
|
|
/* 这块得改一下 因为元素太多会超出纸张范围 沈博 2022年6月30日13:43:01*/
|
|
|
this.$nextTick(() => {
|
|
|
- console.log('paperDirection', this.paperDirection, this.paperTypeList[this.paperType], document.getElementById('paper').offsetHeight)
|
|
|
|
|
|
let paperHeight = document.getElementById('paper').offsetHeight
|
|
|
let paperWidth = document.getElementById('paper').offsetWidth
|
|
|
@@ -1911,7 +1893,6 @@ export default {
|
|
|
* @date : 2022-5-13 14:40
|
|
|
*/
|
|
|
moveDom(way) {
|
|
|
- console.log('this.currentIndex', this.currentIndex, 'this.currentImgIndex', this.currentImgIndex, this.currentColIndex)
|
|
|
if (this.currentIndex >= 0) {
|
|
|
switch (way) {
|
|
|
case 'left':
|
|
|
@@ -1980,7 +1961,6 @@ export default {
|
|
|
let nextElement = null
|
|
|
let nextWidth = 0
|
|
|
|
|
|
- // console.log('table', table)
|
|
|
for (let j = 0; j < table.rows[0].cells.length; j++) {
|
|
|
table.rows[0].cells[j].onmousedown = function (e) {
|
|
|
//记录单元格
|