product_platform/yxt-yyth-ui-admin
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

2023-12-6

Browse Source
This commit is contained in:
guoxing
2023-12-06 18:09:02 +08:00
parent c2e21e78d8
commit 9d4a3dada7
5 changed files with 398 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -8,5 +8,5 @@ VUE_APP_BASE_API = '/api'
# VUE_APP_URL = "http://jianguan.yyundong.com/shgfapi"
VUE_APP_URL = "http://192.168.2.113:7201"
VUE_APP_URL = "http://192.168.2.106:7201"
##VUE_APP_URL = "http://8.130.39.13:8112"

1
package.json
View File

@@ -26,6 +26,7 @@
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"portfinder": "^1.0.21",
"print-template": "^1.2.8",
"qs": "^6.9.4",
"quill": "^1.3.7",
"sass-resources-loader": "^2.1.1",

10
src/layout/components/Sidebar/index.vue
View File

@@ -141,6 +141,16 @@
name: "/order/index",
path: "/order/index"
},
{
alwaysShow: true,
component: "print",
meta: {
icon: "el-icon-menu",
title: "打印电子卡",
},
name: "/print/index",
path: "/print/index"
}
// {
// alwaysShow: true,
// component: "network",

15
src/router/index.js
View File

@@ -191,6 +191,21 @@ export const constantRoutes = [
}
}]
},
{
path: '/print',
component: Layout,
redirect: '/print/index',
children: [{
path: '/print/index',
component: () =>
import('@/views/print/index.vue'),
name: 'index',
meta: {
title: '打印电子卡'
}
},]
},
// {
// path: '/network',
// component: Layout,

370
src/views/print/index.vue Normal file
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>