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

2023-12-6

master
guoxing 2 years ago
parent
c2e21e78d8
commit
9d4a3dada7
5 changed files with 398 additions and 2 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. 2
      .env.development
  2. 1
      package.json
  3. 12
      src/layout/components/Sidebar/index.vue
  4. 15
      src/router/index.js
  5. 370
      src/views/print/index.vue

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",

12
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",
@ -161,7 +171,7 @@
// name: "/statisticalReport/index",
// path: "/statisticalReport/index",
// children: [
// {
// alwaysShow: true,
// component: "index",

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
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>
Write Preview
Loading…
Cancel
Save