【新增】打印
This commit is contained in:
yanran200730
@@ -42,7 +42,6 @@
|
||||
</div>
|
||||
<div class="title">
|
||||
<span>素材</span>
|
||||
<el-button type="primary" size="mini" @click="addField">添加</el-button>
|
||||
</div>
|
||||
<div class="left-item__wrapper">
|
||||
<el-popover
|
||||
@@ -55,7 +54,12 @@
|
||||
<div>图片素材</div>
|
||||
</div>
|
||||
<div class="print-images">
|
||||
<img src="../../assets/images/triman1.png" v-for="(item, index) in 20" :key="index" @click="addImage(`https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200`)" />
|
||||
<img
|
||||
:src="item.imgUrl"
|
||||
v-for="(item, index) in images"
|
||||
:key="index"
|
||||
:title="item.remark"
|
||||
@click="addImage(item.imgUrl)" />
|
||||
</div>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
@@ -68,7 +72,12 @@
|
||||
<div>文字素材</div>
|
||||
</div>
|
||||
<div class="print-images">
|
||||
<p v-for="(item, index) in 20" @click="addText(`EVATOST CONSULTING LTD CONSULTING CONSULTING CONSULTING CONSULTING`, false)" :key="index">EVATOST CONSULTING LTD</p>
|
||||
<p
|
||||
@click="addText(item.contents)"
|
||||
v-for="(item, index) in contents"
|
||||
:key="index">
|
||||
{{ item.contents }}
|
||||
</p>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
@@ -82,8 +91,9 @@
|
||||
v-for="(item, index) in dynamicFromList"
|
||||
:key="index"
|
||||
style="cursor: pointer;"
|
||||
@click="addItemToCanvas(item.fieldValue)">
|
||||
<div>{{ item.fieldValue }}</div>
|
||||
@click="addItemToCanvas(item.fieldName)">
|
||||
<div>{{ item.fieldName }}</div>
|
||||
<span class="el-icon-error" @click.stop="removeField(index)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -142,9 +152,9 @@
|
||||
<el-form :model="dynamicFrom" ref="form" label-width="100px">
|
||||
<el-form-item
|
||||
label="数据名称："
|
||||
:prop="`field${dynamicFromList.length}`"
|
||||
:rules="[{ required: true, message: '请再次输入密码', trigger: 'blur' }]">
|
||||
<el-input placeholder="请输入数据名称" type="text" v-model="dynamicFrom[`field${dynamicFromList.length}`]"></el-input>
|
||||
:prop="`field_${dynamicFromList.length > 9 ? dynamicFromList.length + 1 : '0' + (dynamicFromList.length + 1)}`"
|
||||
:rules="[{ required: true, message: '请输入数据名称', trigger: 'blur' }]">
|
||||
<el-input placeholder="请输入数据名称" type="text" v-model="dynamicFrom[`field_${dynamicFromList.length > 9 ? dynamicFromList.length + 1 : '0' + (dynamicFromList.length + 1)}`]"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
@@ -167,6 +177,13 @@
|
||||
}
|
||||
},
|
||||
|
||||
params: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
||||
printData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
@@ -179,20 +196,22 @@
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
"index": 0,
|
||||
"name": 1,
|
||||
"height": 200,
|
||||
"width": 200,
|
||||
"paperHeader": 0,
|
||||
"paperFooter": 547,
|
||||
"printElements": [],
|
||||
"paperNumberLeft": 500,
|
||||
"paperNumberTop": 530,
|
||||
"paperNumberDisabled": true,
|
||||
"paperNumberContinue": true,
|
||||
"fontFamily": "Microsoft YaHei",
|
||||
"scale": 1,
|
||||
"watermarkOptions": {}
|
||||
"panels": [{
|
||||
"index": 0,
|
||||
"name": 1,
|
||||
"height": 200,
|
||||
"width": 200,
|
||||
"paperHeader": 0,
|
||||
"paperFooter": 547,
|
||||
"printElements": [],
|
||||
"paperNumberLeft": 500,
|
||||
"paperNumberTop": 530,
|
||||
"paperNumberDisabled": true,
|
||||
"paperNumberContinue": true,
|
||||
"fontFamily": "Microsoft YaHei",
|
||||
"scale": 1,
|
||||
"watermarkOptions": {}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -244,10 +263,30 @@
|
||||
paperHeight: 200,
|
||||
isShowDynamicForm: false,
|
||||
dynamicFrom: {
|
||||
|
||||
},
|
||||
dynamicFromList: [],
|
||||
panel: null
|
||||
panel: null,
|
||||
contents: [],
|
||||
images: []
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
template: {
|
||||
handler(value) {
|
||||
if (value && this.hiprintTemplate && !this.isPrint) {
|
||||
console.log(value)
|
||||
const config = value.panels[0]
|
||||
this.hiprintTemplate.update(value)
|
||||
this.curPaper = {type: 'other', width: config.width, height: config.height}
|
||||
this.hiprintTemplate.setPaper(config.width, config.height)
|
||||
|
||||
if (this.params) {
|
||||
this.dynamicFromList = this.params
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
@@ -267,31 +306,42 @@
|
||||
},
|
||||
|
||||
mounted() {
|
||||
hiprint.init({
|
||||
providers: [defaultElementTypeProvider(), customProvider({})]
|
||||
})
|
||||
|
||||
if (this.isPrint) {
|
||||
this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
|
||||
template: this.template
|
||||
})
|
||||
this.hiprintTemplate = newHiprintPrintTemplate('temulables')
|
||||
} else {
|
||||
hiprint.init({
|
||||
providers: [defaultElementTypeProvider(), customProvider({})]
|
||||
})
|
||||
this.buildLeftElement()
|
||||
this.buildDesigner()
|
||||
this.getConfig()
|
||||
}
|
||||
|
||||
this.getConfig()
|
||||
},
|
||||
|
||||
methods: {
|
||||
addField() {
|
||||
this.$set(this.dynamicFrom, `field${this.dynamicFromList.length}`, '')
|
||||
const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}`
|
||||
|
||||
if (this.dynamicFromList.length && !this.dynamicFromList.at(-1)[`field_${num}`]) {
|
||||
} else {
|
||||
this.$set(this.dynamicFrom, `field_${num}`, '')
|
||||
}
|
||||
|
||||
this.isShowDynamicForm = true
|
||||
|
||||
console.log(this.dynamicFrom)
|
||||
},
|
||||
|
||||
removeField(index) {
|
||||
this.dynamicFromList.splice(index, 1)
|
||||
},
|
||||
|
||||
getConfig() {
|
||||
this.$http.post(`/api/material/getPage`).then(res => {
|
||||
|
||||
this.$http.post(`/api/material/getPage?page=1&size=-1`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.images = res.data.records.filter(v => v.type === '1')
|
||||
this.contents = res.data.records.filter(v => v.type === '0')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -322,6 +372,7 @@
|
||||
width: 140,
|
||||
height: 20,
|
||||
coordinateSync: true,
|
||||
textContentVerticalAlign: 'middle',
|
||||
widthHeightSync: true,
|
||||
hideTitle: true,
|
||||
fontFamily: 'Microsoft YaHei',
|
||||
@@ -341,11 +392,11 @@
|
||||
onConfirm() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}`
|
||||
this.dynamicFromList.push({
|
||||
fieldName: `field${this.dynamicFromList.length}`,
|
||||
fieldValue: this.dynamicFrom[`field${this.dynamicFromList.length}`]
|
||||
fieldValue: `field_${num}`,
|
||||
fieldName: this.dynamicFrom[`field_${num}`]
|
||||
})
|
||||
|
||||
this.isShowDynamicForm = false
|
||||
}
|
||||
})
|
||||
@@ -566,6 +617,7 @@
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -583,6 +635,15 @@
|
||||
i {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.el-icon-error {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
color: red;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep(ul) {
|
||||
|
||||
Reference in New Issue
Block a user