feat(order): 添加预订单打印功能

- 在预订单详情页面添加打印按钮
- 实现预订单数据获取和打印模板配置
- 集成 hiprint 打印插件
- 调整环境变量以支持局域网访问
This commit is contained in:
mkm 2024-11-03 22:39:01 +08:00
parent 452235e900
commit 30799e63e9
5 changed files with 71 additions and 197 deletions

View File

@ -6,6 +6,6 @@ VITE_NOW_TYPE = 'dist'
# VITE_APP_BASE_URL='http://192.168.1.10:8546' # VITE_APP_BASE_URL='http://192.168.1.10:8546'
# VITE_APP_BASE_URL='https://test-multi-store.lihaink.cn' # VITE_APP_BASE_URL='https://test-multi-store.lihaink.cn'
# VITE_APP_BASE_URL='https://multi-store.lihaink.cn' # VITE_APP_BASE_URL='https://multi-store.lihaink.cn'
VITE_APP_BASE_URL='http://192.168.1.22:8545' VITE_APP_BASE_URL='http://192.168.1.6:8545'
# VITE_APP_BASE_URL='https://ceshi-multi-store.lihaink.cn' # VITE_APP_BASE_URL='https://ceshi-multi-store.lihaink.cn'

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" media="print" href="/print-lock.css">
<title>后台管理系统</title> <title>后台管理系统</title>
<style> <style>
* { * {

View File

@ -1,11 +1,10 @@
import { createApp } from "vue"; import { createApp } from 'vue'
import App from "./App.vue"; import App from './App.vue'
import install from "./install"; import install from './install'
import "./permission"; import './permission'
import "./styles/index.scss"; import './styles/index.scss'
import "virtual:svg-icons-register"; import 'virtual:svg-icons-register'
import "./assets/iconfont/iconfont.js"; import './assets/iconfont/iconfont.js'
const app = createApp(App)
const app = createApp(App); app.use(install).mount('#app')
app.use(install).mount("#app");

View File

@ -73,6 +73,7 @@
<!-- <el-button @click="xlsx(formData.id, 1)"> 打印订单 </el-button> --> <!-- <el-button @click="xlsx(formData.id, 1)"> 打印订单 </el-button> -->
<el-button @click="xlsx2(formData.id)"> 打印商品标签 </el-button> <el-button @click="xlsx2(formData.id)"> 打印商品标签 </el-button>
<el-button @click="generateOrderClick"> 生成商品订单 </el-button> <el-button @click="generateOrderClick"> 生成商品订单 </el-button>
<el-button @click="demos"> demo </el-button>
</div> </div>
<el-button type="primary" @click="dialogShop = true"> 追加 </el-button> <el-button type="primary" @click="dialogShop = true"> 追加 </el-button>
@ -285,6 +286,20 @@ import returnWarehouse from './component/returnWarehouse.vue'
import returnSupplier from './component/returnSupplier.vue' import returnSupplier from './component/returnSupplier.vue'
import { apiUserLists } from '@/api/user' import { apiUserLists } from '@/api/user'
import { apiSystemStoreLists } from '@/api/system_store' import { apiSystemStoreLists } from '@/api/system_store'
import printData from './template-files/template1'
import { hiprint } from 'vue-plugin-hiprint'
const demos = () => {
apiBeforehandOrderCartInfoLists({ bhoid: formData.value.id }).then((res) => {
printData.printData.details = { ...formData.value }
printData.printData.table = res.lists
const hiprintTemplate = new hiprint.PrintTemplate({
template: printData.json
})
console.log(printData)
hiprintTemplate.print(printData, { printer: '', title: 'hiprint测试打印' })
})
}
const generateOrderShow = ref(false) const generateOrderShow = ref(false)

View File

@ -5,30 +5,8 @@ export const link = 'https://ccsimple.gitee.io/vue-plugin-hiprint/'
// url 或者 base64 或者 require('../../../assets/logo.png') // url 或者 base64 或者 require('../../../assets/logo.png')
export const preview = '/static/template8.png' export const preview = '/static/template8.png'
export const printData = { export const printData = {
department: '技术部', table: {},
position: '前端开发工程师', details: {}
form_date: '2024-08-13',
pInfo: {
name: '张伟',
gender: '男',
place_of_birth: '江苏省南京市',
ethnicity: '汉族',
education_level: '本科',
major: '计算机科学与技术',
height: '178cm',
weight: '70kg',
birth_date: '1992-08-15',
political_affiliation: '中共党员',
graduation_year: '2015',
blood_type: 'O型',
address: '北京市海淀区中关村东路10号',
email: 'zhangwei@example.com',
phone: '138-1234-5678',
expected_salary: '20,000元/月',
availability: '2024-09-01',
mandarin_level: '一级甲等',
foreign_language_level: '英语六级'
}
} }
export const json = { export const json = {
panels: [ panels: [
@ -74,7 +52,7 @@ export const json = {
height: 9.75, height: 9.75,
width: 200, width: 200,
title: '收货地址', title: '收货地址',
field: 'address', field: 'printData.details.other_data.address',
testData: '某某区某某镇某某村某某小组某某地名', testData: '某某区某某镇某某村某某小组某某地名',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -97,7 +75,7 @@ export const json = {
height: 9.75, height: 9.75,
width: 90, width: 90,
title: '电话', title: '电话',
field: 'phone', field: 'printData.details.other_data..phone',
testData: '18982406440', testData: '18982406440',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -120,7 +98,7 @@ export const json = {
height: 9.75, height: 9.75,
width: 140, width: 140,
title: '订单号', title: '订单号',
field: 'order_id', field: 'printData.details.order_id',
testData: 'YG1730278258811950', testData: 'YG1730278258811950',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -143,7 +121,7 @@ export const json = {
height: 9.75, height: 9.75,
width: 70, width: 70,
title: '姓名', title: '姓名',
field: 'nickname', field: 'printData.details.other_data.nickname',
testData: '张三', testData: '张三',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -165,7 +143,7 @@ export const json = {
height: 9.75, height: 9.75,
width: 79, width: 79,
title: '采购事由', title: '采购事由',
field: 'purpose', field: 'printData.details.other_data.purpose',
testData: '70寿宴', testData: '70寿宴',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -188,7 +166,7 @@ export const json = {
height: 9.75, height: 9.75,
width: 90, width: 90,
title: '电话', title: '电话',
field: 'chef_phone', field: 'printData.details.other_data.chef_phone',
testData: '18982406440', testData: '18982406440',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -211,7 +189,7 @@ export const json = {
height: 9.75, height: 9.75,
width: 70, width: 70,
title: '厨师', title: '厨师',
field: 'chef', field: 'printData.details.other_data.chef',
testData: '张三', testData: '张三',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -234,7 +212,7 @@ export const json = {
height: 10, height: 10,
width: 45, width: 45,
title: '桌数', title: '桌数',
field: 'tables', field: 'printData.details.other_data.tables',
testData: '70', testData: '70',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -257,7 +235,7 @@ export const json = {
height: 10, height: 10,
width: 60, width: 60,
title: '办事时间', title: '办事时间',
field: 'days', field: 'printData.details.other_data.days',
testData: '3', testData: '3',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -280,7 +258,7 @@ export const json = {
height: 9.75, height: 9.75,
width: 140, width: 140,
title: '到货时间', title: '到货时间',
field: 'arrival_time', field: 'printData.details.other_data.arrival_time',
testData: '2024-10-15 14:30:20', testData: '2024-10-15 14:30:20',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -303,7 +281,7 @@ export const json = {
height: 9.75, height: 9.75,
width: 140, width: 140,
title: '下单时间', title: '下单时间',
field: 'create_time', field: 'printData.details.create_time',
testData: '2024-10-15 14:30:20', testData: '2024-10-15 14:30:20',
coordinateSync: false, coordinateSync: false,
widthHeightSync: false, widthHeightSync: false,
@ -325,39 +303,7 @@ export const json = {
top: 108, top: 108,
height: 54, height: 54,
width: 558, width: 558,
tableFooterRepeat: 'no', field: 'printData.table',
fields: [
{
text: '名称',
field: 'NAME'
},
{
text: '数量',
field: 'SL'
},
{
text: '规格',
field: 'GG'
},
{
text: '条码',
field: 'TM'
},
{
text: '单价',
field: 'DJ'
},
{
text: '金额',
field: 'JE'
}
],
field: 'table',
tableHeaderRepeat: 'first',
footerFormatter:
'function(t,e,n,i){return n&&n["totalCap"]?\'<td style="padding:0 10px" colspan="100">\'.concat("应收金额大写: "+n["totalCap"],"</td>"):\'<td style="padding:0 10px" colspan="100">应收金额大写: </td>\'}',
rowsColumnsMerge:
'function(t,e,n){return 0==n?[1,t.INDEX%2==1?2:1]:n>0&&n<2?[t.INDEX%2==1?0:1,1]:[t.INDEX%2==1?2:0,1]}',
qid: 'table', qid: 'table',
right: 568.75, right: 568.75,
bottom: 161.25, bottom: 161.25,
@ -370,224 +316,137 @@ export const json = {
{ {
width: 28.04091373500173, width: 28.04091373500173,
title: '编号', title: '编号',
field: 'product_id',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 31.50798168980468, width: 31.50798168980468,
title: '类别', title: '类别',
field: 'top_cate_name',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 92.52725057431623, width: 92.52725057431623,
title: '名称', title: '名称',
field: 'store_name',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 32.49120839160852, width: 32.49120839160852,
title: '毛重', title: '毛重',
field: 'gross_weight',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 32.53381779989224, width: 32.53381779989224,
title: '名称', title: '净重',
field: 'NAME', field: 'net_weight',
checked: true, checked: true,
columnId: 'NAME',
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 29.42867753045773, width: 29.42867753045773,
title: '单位', title: '单位',
field: 'unit_name',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 31.50297331923548, width: 31.50297331923548,
title: '单价', title: '单价',
field: 'price',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 28.61867322166049, width: 28.61867322166049,
title: '数量', title: '数量',
field: 'cart_num',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 33.35318875457845, width: 33.35318875457845,
title: '金额', title: '金额',
field: 'total_price',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 29.468112230977603, width: 29.468112230977603,
title: '包装', title: '包装',
field: 'package',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 31.164499506790204, width: 31.164499506790204,
title: '押金', title: '押金',
field: 'deposit',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 50.09380340779709, width: 50.09380340779709,
title: '售后', title: '售后',
field: 'after_sales',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 47.030224080099075, width: 47.030224080099075,
title: '损耗', title: '损耗',
field: 'loss',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 32.08816604575006, width: 32.08816604575006,
title: '产地', title: '产地',
field: 'place_of_production',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
}, },
{ {
width: 28.15050971203051, width: 28.15050971203051,
title: '备注', title: '备注',
field: 'mark',
checked: true, checked: true,
fixed: false, fixed: false,
rowspan: 1, rowspan: 1,
colspan: 1, colspan: 1
tableQRCodeLevel: 0,
tableSummaryTitle: true,
tableSummary: ''
},
{
width: 80,
title: '数量',
field: 'SL',
checked: false,
columnId: 'SL',
fixed: false,
rowspan: 1,
colspan: 1,
align: 'center'
},
{
width: 80,
title: '规格',
field: 'GG',
checked: false,
columnId: 'GG',
fixed: false,
rowspan: 1,
colspan: 1,
align: 'center'
},
{
width: 100,
title: '条码',
field: 'TM',
checked: false,
columnId: 'TM',
fixed: false,
rowspan: 1,
colspan: 1,
align: 'center'
},
{
width: 100,
title: '单价',
field: 'DJ',
checked: false,
columnId: 'DJ',
fixed: false,
rowspan: 1,
colspan: 1,
align: 'center'
},
{
width: 100,
title: '金额',
field: 'JE',
checked: false,
columnId: 'JE',
fixed: false,
rowspan: 1,
colspan: 1,
align: 'center'
} }
] ]
] ]