yxt_product
/
yxt-yyth-ui-admin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2023-12-7

master
guoxing 2 years ago
parent
9d4a3dada7
commit
6932d13ac3
4 changed files with 403 additions and 345 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .env.development
  2. 1
      .env.production
  3. 370
      src/views/print/index - 副本.vue
  4. 376
      src/views/print/index.vue

1
.env.development
View File

@ -9,4 +9,5 @@ VUE_APP_BASE_API = '/api'
VUE_APP_URL = "http://192.168.2.106:7201"
VUE_APP_REPORT_URL = "http://192.168.2.106:7202"
##VUE_APP_URL = "http://8.130.39.13:8112"

1
.env.production
View File

@ -6,3 +6,4 @@ VUE_APP_BASE_API = '/lpkapi'
## 配置 正式接口地址
VUE_APP_URL = "http://120.46.131.15:8111"
VUE_APP_REPORT_URL = "https://supervise.yxtsoft.com"

370
src/views/print/index - 副本.vue
View File

@ -0,0 +1,370 @@
<template>
<div id="container">
<el-row :gutter="12">
<el-col :offset="8" :span="8">
<el-card shadow="always">
<div slot="header" class="clearfix">
<span>简单实例</span>
</div>
<div>
<el-form label-width="80px">
<el-form-item label="菜名">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="条形码">
<el-input v-model="formData.code"></el-input>
</el-form-item>
<el-form-item label="页数">
<el-input-number v-model="formData.number" controls-position="right" :min="1" :max="10">
</el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="print">生成打印文件</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import PrintTemplate from 'print-template'
export default {
name: 'SupplierBankInfoIndex',
data() {
return {
template: null,
formData: {
number: 1,
name: '泡菜肉丝',
code: 'PCRS11886622'
}
}
},
created() {
this.initPrintTemplate()
},
methods: {
initPrintTemplate() {
this.template = new PrintTemplate()
this.template.push({
name: 'printTemplate',
size: [210, 297], // a4 或 [221,291]
fixed: [
{
type: 'text',
fontWeight: 400,
x: 88,
y: 3,
default: '汇融惠享礼包卡',
fontSize: '5', // 字体大小
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑'
fontWeight: null, // 字体宽度
fontStyle: 'normal', // 字体样式 normal / 斜体
maxWidth: null, // 最大换行宽度
orientation: 'l', // 方向 默认 l 横向 / p 竖向
color: 'red' // 字体颜色 (1.2.8版本新增)
},
// 1号
{
type: 'line',
x: 10,
y: 12,
length: 90,
color: 'blue', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 10,
y: 12,
length: 40,
color: 'red', // 线段颜色 (1.2.8版本新增)
orientation: 'p', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 10,
y: 52,
length: 90,
color: 'blue', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 100,
y: 12,
length: 40,
color: 'red', // 线段颜色 (1.2.8版本新增)
orientation: 'p', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 10,
y: 20,
length: 90,
color: 'blue', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 32,
y: 20,
length: 14,
color: 'blue', // 线段颜色 (1.2.8版本新增)
orientation: 'p', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 10,
y: 34,
length: 90,
color: 'blue', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'text', // 类型 文本 line / text / image / barcode / qrcode
// default: '家庭菜窖-白菜券', // 默认值 \n 换行 或设置maxWidth大小
x: 30, // x
y: 14, // y
fontSize: '5', // 字体大小
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑'
fontWeight: null, // 字体宽度
fontStyle: 'normal', // 字体样式 normal / 斜体
maxWidth: null, // 最大换行宽度
orientation: 'l', // 方向 默认 l 横向 / p 竖向
color: 'red' // 字体颜色 (1.2.8版本新增)
},
{
type: 'text', // 类型 文本 line / text / image / barcode / qrcode
default: '手机提货:\n扫描下方\n 二维码', // 默认值 \n 换行 或设置maxWidth大小
x: 14, // x
y: 23, // y
fontSize: '3', // 字体大小
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑'
fontWeight: null, // 字体宽度
fontStyle: 'normal', // 字体样式 normal / 斜体
maxWidth: null, // 最大换行宽度
orientation: 'l', // 方向 默认 l 横向 / p 竖向
color: 'red' // 字体颜色 (1.2.8版本新增)
},
{
type: 'text', // 类型 文本 line / text / image / barcode / qrcode
default: '提货券使用说明:\n· 本券概不挂失,不兑换现金\n· 本券提货编码和提货密码为兑换的唯一凭证\n· 手机扫描二维码可查询券卡状态', // 默认值 \n 换行 或设置maxWidth大小
x: 35, // x
y: 21, // y
fontSize: '3', // 字体大小
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑'
fontWeight: null, // 字体宽度
fontStyle: 'normal', // 字体样式 normal / 斜体
maxWidth: null, // 最大换行宽度
orientation: 'l', // 方向 默认 l 横向 / p 竖向
color: 'red' // 字体颜色 (1.2.8版本新增)
},
{
type: 'text', // 类型 文本 line / text / image / barcode / qrcode
default: '提货编码', // 默认值 \n 换行 或设置maxWidth大小
x: 12, // x
y: 37, // y
fontSize: '3', // 字体大小
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑'
fontWeight: null, // 字体宽度
fontStyle: 'normal', // 字体样式 normal / 斜体
maxWidth: null, // 最大换行宽度
orientation: 'p', // 方向 默认 l 横向 / p 竖向
color: 'red' // 字体颜色 (1.2.8版本新增)
},
// 2号
{
type: 'line',
x: 110,
y: 12,
length: 90,
color: 'green', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 110,
y: 12,
length: 40,
color: 'orange', // 线段颜色 (1.2.8版本新增)
orientation: 'p', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 110,
y: 52,
length: 90,
color: 'green', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 200,
y: 12,
length: 40,
color: 'orange', // 线段颜色 (1.2.8版本新增)
orientation: 'p', // 方向 默认 l 横向 / p 竖向
},
// {
// type: 'line',
// x: 2,
// y: 12,
// orientation: 'p', // l 横向 / p 竖向
// length: 110
// },
// {
// type: 'line',
// x: 74,
// y: 12,
// orientation: 'p',
// length: 110
// },
// {
// type: 'text',
// x: 10,
// y: 30,
// fontSize: 3,
// default: '菜名'
// },
// {
// type: 'line',
// x: 25,
// y: 27,
// orientation: 'p',
// length: 8
// },
// {
// type: 'line',
// x: 2,
// y: 35,
// length: 72
// },
// {
// type: 'line',
// x: 2,
// y: 27,
// length: 72
// },
// {
// type: 'text',
// x: 10,
// y: 50,
// fontSize: 3,
// default: '二维码'
// },
// {
// type: 'line',
// x: 25,
// y: 35,
// orientation: 'p',
// length: 30
// },
// {
// type: 'line',
// x: 2,
// y: 65,
// length: 72
// },
// {
// type: 'line',
// x: 2,
// y: 122,
// length: 72
// },
// {
// type: 'text',
// fontSize: 3.8,
// fontWeight: 700,
// x: 33,
// y: 5,
// default: '标题'
// },
// {
// type: 'qrcode',
// x: 30,
// y: 38,
// width: 18,
// default: 'https://supervise.yxtsoft.com/lpkapi?code=20231130110815671089'
// }
],
data: {
name: {
type: 'text',
x: 30, // x
y: 14, // y
fontSize: '5', // 字体大小
},
name2: {
type: 'text',
x: 17, // x
y: 48, // y
fontSize: '3', // 字体大小
},
code: {
x: 16,
y: 35,
type: 'qrcode',
default: 'https://supervise.yxtsoft.com/lpkapi?code=20231130110815671089',
width: 13
}
}
})
},
print() {
let printData = []
let printUrl = null
for (let index = 0; index < this.formData.number; index++) {
printData.push({
code: " ",
name: "家庭菜窖-白菜券",
name2: "222222"
})
}
this.template.print('printTemplate', printData).then(printPdf => {
if (printPdf) {
this.$message.success('生成成功')
printUrl = printPdf.output('bloburi', {
filename: '打印文件'
})
window.open(printUrl, '_blank')
} else {
this.$message.warring('生成失败')
}
})
}
}
}
</script>
<style scoped>
#container {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

376
src/views/print/index.vue
View File

@ -1,370 +1,56 @@
<template>
<div id="container">
<el-row :gutter="12">
<el-col :offset="8" :span="8">
<el-card shadow="always">
<div slot="header" class="clearfix">
<span>简单实例</span>
</div>
<div class="main-content">
<!-- <div class="container">
<div class="tab-header">
<el-form :inline="true" :model="page.params" class="demo-form-inline">
<el-row :gutter="20">
<el-col :span="21">
<el-form-item label="起始序列号">
<el-input v-model="page.params.startnum" placeholder="" clearable />
<div>
<el-form label-width="80px">
<el-form-item label="菜名">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="条形码">
<el-input v-model="formData.code"></el-input>
</el-form-item>
<el-form-item label="页数">
<el-input-number v-model="formData.number" controls-position="right" :min="1" :max="10">
</el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="print">生成打印文件</el-button>
</el-form-item>
</el-form>
</div>
<el-form-item label="结束序列号">
<el-input v-model="page.params.endnum" placeholder="" clearable />
</el-card>
</el-col>
</el-row>
</el-form-item>
<el-button type="primary" @click="getPageList()">预 览</el-button>
</el-col>
</el-row>
</el-form>
</div>
-->
<div style="margin-top: 20px; width: 100%;height: 100%;">
<iframe :src="spUrl" id="ysOpenDevice" width="100%" height="100%" allowfullscreen>
</iframe>
</div>
</div>
</div>
</template>
<script>
import PrintTemplate from 'print-template'
export default {
name: 'SupplierBankInfoIndex',
data() {
return {
template: null,
formData: {
number: 1,
name: '泡菜肉丝',
code: 'PCRS11886622'
}
page:{
params:{
startnum:"",
endnum:""
}
},
spUrl:process.env.VUE_APP_REPORT_URL+ "/jmreport/view/892282842138808320",
}
},
created() {
this.initPrintTemplate()
console.log("aaaaaa",process.env.VUE_APP_REPORT_URL)
},
methods: {
initPrintTemplate() {
this.template = new PrintTemplate()
this.template.push({
name: 'printTemplate',
size: [210, 297], // a4 或 [221,291]
fixed: [
{
type: 'text',
fontWeight: 400,
x: 88,
y: 3,
default: '汇融惠享礼包卡',
fontSize: '5', // 字体大小
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑'
fontWeight: null, // 字体宽度
fontStyle: 'normal', // 字体样式 normal / 斜体
maxWidth: null, // 最大换行宽度
orientation: 'l', // 方向 默认 l 横向 / p 竖向
color: 'red' // 字体颜色 (1.2.8版本新增)
},
// 1号
{
type: 'line',
x: 10,
y: 12,
length: 90,
color: 'blue', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 10,
y: 12,
length: 40,
color: 'red', // 线段颜色 (1.2.8版本新增)
orientation: 'p', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 10,
y: 52,
length: 90,
color: 'blue', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 100,
y: 12,
length: 40,
color: 'red', // 线段颜色 (1.2.8版本新增)
orientation: 'p', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 10,
y: 20,
length: 90,
color: 'blue', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 32,
y: 20,
length: 14,
color: 'blue', // 线段颜色 (1.2.8版本新增)
orientation: 'p', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 10,
y: 34,
length: 90,
color: 'blue', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'text', // 类型 文本 line / text / image / barcode / qrcode
// default: '家庭菜窖-白菜券', // 默认值 \n 换行 或设置maxWidth大小
x: 30, // x
y: 14, // y
fontSize: '5', // 字体大小
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑'
fontWeight: null, // 字体宽度
fontStyle: 'normal', // 字体样式 normal / 斜体
maxWidth: null, // 最大换行宽度
orientation: 'l', // 方向 默认 l 横向 / p 竖向
color: 'red' // 字体颜色 (1.2.8版本新增)
},
{
type: 'text', // 类型 文本 line / text / image / barcode / qrcode
default: '手机提货:\n扫描下方\n 二维码', // 默认值 \n 换行 或设置maxWidth大小
x: 14, // x
y: 23, // y
fontSize: '3', // 字体大小
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑'
fontWeight: null, // 字体宽度
fontStyle: 'normal', // 字体样式 normal / 斜体
maxWidth: null, // 最大换行宽度
orientation: 'l', // 方向 默认 l 横向 / p 竖向
color: 'red' // 字体颜色 (1.2.8版本新增)
},
{
type: 'text', // 类型 文本 line / text / image / barcode / qrcode
default: '提货券使用说明:\n· 本券概不挂失,不兑换现金\n· 本券提货编码和提货密码为兑换的唯一凭证\n· 手机扫描二维码可查询券卡状态', // 默认值 \n 换行 或设置maxWidth大小
x: 35, // x
y: 21, // y
fontSize: '3', // 字体大小
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑'
fontWeight: null, // 字体宽度
fontStyle: 'normal', // 字体样式 normal / 斜体
maxWidth: null, // 最大换行宽度
orientation: 'l', // 方向 默认 l 横向 / p 竖向
color: 'red' // 字体颜色 (1.2.8版本新增)
},
{
type: 'text', // 类型 文本 line / text / image / barcode / qrcode
default: '提货编码', // 默认值 \n 换行 或设置maxWidth大小
x: 12, // x
y: 37, // y
fontSize: '3', // 字体大小
fontFamily: '微软雅黑', // 字体类型 默认 '微软雅黑'
fontWeight: null, // 字体宽度
fontStyle: 'normal', // 字体样式 normal / 斜体
maxWidth: null, // 最大换行宽度
orientation: 'p', // 方向 默认 l 横向 / p 竖向
color: 'red' // 字体颜色 (1.2.8版本新增)
},
// 2号
{
type: 'line',
x: 110,
y: 12,
length: 90,
color: 'green', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 110,
y: 12,
length: 40,
color: 'orange', // 线段颜色 (1.2.8版本新增)
orientation: 'p', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 110,
y: 52,
length: 90,
color: 'green', // 线段颜色 (1.2.8版本新增)
orientation: 'l', // 方向 默认 l 横向 / p 竖向
},
{
type: 'line',
x: 200,
y: 12,
length: 40,
color: 'orange', // 线段颜色 (1.2.8版本新增)
orientation: 'p', // 方向 默认 l 横向 / p 竖向
},
// {
// type: 'line',
// x: 2,
// y: 12,
// orientation: 'p', // l 横向 / p 竖向
// length: 110
// },
// {
// type: 'line',
// x: 74,
// y: 12,
// orientation: 'p',
// length: 110
// },
// {
// type: 'text',
// x: 10,
// y: 30,
// fontSize: 3,
// default: '菜名'
// },
// {
// type: 'line',
// x: 25,
// y: 27,
// orientation: 'p',
// length: 8
// },
// {
// type: 'line',
// x: 2,
// y: 35,
// length: 72
// },
// {
// type: 'line',
// x: 2,
// y: 27,
// length: 72
// },
// {
// type: 'text',
// x: 10,
// y: 50,
// fontSize: 3,
// default: '二维码'
// },
// {
// type: 'line',
// x: 25,
// y: 35,
// orientation: 'p',
// length: 30
// },
// {
// type: 'line',
// x: 2,
// y: 65,
// length: 72
// },
// {
// type: 'line',
// x: 2,
// y: 122,
// length: 72
// },
// {
// type: 'text',
// fontSize: 3.8,
// fontWeight: 700,
// x: 33,
// y: 5,
// default: '标题'
// },
// {
// type: 'qrcode',
// x: 30,
// y: 38,
// width: 18,
// default: 'https://supervise.yxtsoft.com/lpkapi?code=20231130110815671089'
// }
],
data: {
name: {
type: 'text',
x: 30, // x
y: 14, // y
fontSize: '5', // 字体大小
},
name2: {
type: 'text',
x: 17, // x
y: 48, // y
fontSize: '3', // 字体大小
},
code: {
x: 16,
y: 35,
type: 'qrcode',
default: 'https://supervise.yxtsoft.com/lpkapi?code=20231130110815671089',
width: 13
}
}
})
},
print() {
let printData = []
let printUrl = null
for (let index = 0; index < this.formData.number; index++) {
printData.push({
code: " ",
name: "家庭菜窖-白菜券",
name2: "222222"
})
}
this.template.print('printTemplate', printData).then(printPdf => {
if (printPdf) {
this.$message.success('生成成功')
printUrl = printPdf.output('bloburi', {
filename: '打印文件'
})
window.open(printUrl, '_blank')
} else {
this.$message.warring('生成失败')
}
})
}
}
}
</script>
<style scoped>
#container {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Write Preview
Loading…
Cancel
Save