root/WuXiDiKe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 工单打印模板

Browse Source
This commit is contained in:
周俊杰
2024-10-22 14:33:54 +08:00
parent 4a04171237
commit 9b20f34f84
9 changed files with 473 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
acs/nladmin-ui/src/api/acs/order/order.js
View File

@@ -1,34 +1,34 @@
import request from '@/utils/request'
export function add(data) {
return request({
url: 'api/tickets',
method: 'post',
data
})
return request({
url: 'api/tickets',
method: 'post',
data
})
}
export function del(ids) {
return request({
url: 'api/tickets/',
method: 'delete',
data: ids
})
return request({
url: 'api/tickets/',
method: 'delete',
data: ids
})
}
export function edit(data) {
return request({
url: 'api/tickets',
method: 'put',
data
})
return request({
url: 'api/tickets',
method: 'put',
data
})
}
export function query(id) {
return request({
url: 'api/tickets/selectOne?id =' + id,
method: 'get'
})
return request({
url: 'api/tickets/selectOne?id =' + id,
method: 'get'
})
}
export default { add, del, edit, query }
export default { add, del, edit, query }

16
acs/nladmin-ui/src/api/acs/order/template.js
View File

@@ -1,6 +1,6 @@
import request from '@/utils/request'
export function savePdf(data) {
export function create(data) {
return request({
url: 'api/template',
method: 'post',
@@ -22,5 +22,17 @@ export function del(ids) {
data: ids
})
}
export function getTemplateList() {
return request({
url: 'api/template/getTemplateList',
method: 'get',
})
}
export function getTicketList() {
return request({
url: 'api/template/getTicketList',
method: 'get',
})
}
export default { savePdf, see }
export default { create, see, del, getTemplateList, getTicketList }

1
acs/nladmin-ui/src/views/acs/order/app.vue
View File

@@ -151,6 +151,7 @@ export default {
template.see(id).then((data) => {
console.log('====================', data.printElements)
this.printElements = JSON.parse(data.printElements)
console.log(this.printElements)
// 确保 data 对象中的 printElements 是数组
if (Array.isArray(this.printElements)) {
this.isModalVisible = true

595
acs/nladmin-ui/src/views/acs/order/template.vue
View File

@@ -1,77 +1,236 @@
<template>
<div class="flex-col">
<div class="flex-row justify-center" style="margin-bottom: 10px">
<button class="secondary circle-10" @click.stop="print">
<i class="iconfont sv-printer" />
浏览器打印
</button>
<!-- <button class="secondary circle-10 ml-10" @click.stop="getHtml">
<i class="iconfont sv-preview" />
预览
</button> -->
<el-button type="primary" @click="PreviewData"> 导出 </el-button>
<el-button type="primary" @click="addTable"> 保存 </el-button>
<div>
<el-radio-group v-model="radio1" @input="setPaper">
<el-radio-button
v-for="(value,type) in paperTypes"
:key="type"
:label="type"
name="name"
/>
</el-radio-group>
<el-popover
placement="right"
width="400"
title="置纸张宽高(mm)"
trigger="click"
>
<el-input-number
v-model="paperWidth"
:controls="false"
:min="1"
:max="10000"
label="描述文字"
@change="otherPaper"
/>
<el-input-number
v-model="paperHeight"
:controls="false"
:min="1"
:max="10000"
label="描述文字"
@change="otherPaper"
/>
<el-button slot="reference">自定义纸张1</el-button>
</el-popover>
<!--
<el-select
v-model="templateId"
filterable
remote
reserve-keyword
placeholder="模板名称"
:remote-method="getTemplateList"
@change="getTemplateById"
>
<el-option
v-for="item in templateList"
:key="item.templateId"
:label="item.templateName"
:value="item.templateId"
/>
</el-select> -->
<el-select
v-model="templateId"
filterable
placeholder="请选择模板"
style="width: 150px;"
@change="getTemplateById"
>
<el-option
v-for="item in templateList"
:key="item.template_name"
:label="item.template_name"
:value="item.template_id"
/>
</el-select>
<el-select
v-model="ticketId"
filterable
placeholder="请选择模板需要关联的工单"
style="width: 200px;"
@change="getTemplateList"
>
<el-option
v-for="item in ticketList"
:key="item.ticket_code"
:label="item.ticket_code"
:value="item.ticket_code"
/>
</el-select>
</div>
<el-button type="primary" icon="el-icon-printer" @click="print"> 浏览器打印</el-button>
<el-button type="primary" @click="preview"> 预览</el-button>
<el-button type="primary" @click="PreviewData"> 导出</el-button>
<el-button type="primary" @click="addTable"> 保存</el-button>
<el-button type="primary" @click="clear"> 清空</el-button>
<!-- <button class="warning circle-10 ml-10" @click.stop="print2">
直接打印(需要连接客户端)
<i class="iconfont sv-printer" />
</button> -->
</div>
<div class="flex-row" style="height: 87vh">
<div class="flex-2 left">
<div class="flex-row justify-center flex-wrap">
<div class="title">基础元素</div>
<div class="ep-draggable-item item" tid="defaultModule.text">
<i class="iconfont sv-text" />
<span>文本</span>
</div>
<div class="ep-draggable-item item" tid="defaultModule.image">
<i class="iconfont sv-image" />
<span>图片</span>
</div>
<div class="ep-draggable-item item" tid="defaultModule.longText">
<i class="iconfont sv-longText" />
<span>长文</span>
</div>
<div class="ep-draggable-item item" tid="defaultModule.table">
<i class="iconfont sv-table" />
<span>表格</span>
</div>
<div class="ep-draggable-item item" tid="defaultModule.qrcode">
<i class="iconfont sv-qrcode" />
<span>html</span>
</div>
<div class="ep-draggable-item item" tid="defaultModule.barcode">
<i class="iconfont sv-barcode" />
<span>自定义</span>
</div>
<div class="title">辅助元素</div>
<div class="ep-draggable-item item" tid="defaultModule.hline">
<i class="iconfont sv-hline" />
<span>横线</span>
</div>
<div class="ep-draggable-item item" tid="defaultModule.vline">
<i class="iconfont sv-vline" />
<span>竖线</span>
</div>
<div class="ep-draggable-item item" tid="defaultModule.rect">
<i class="iconfont sv-rect" />
<span>矩形</span>
</div>
<div class="ep-draggable-item item" tid="defaultModule.oval">
<i class="iconfont sv-oval" />
<span>圆形</span>
</div>
<el-row :gutter="5">
<el-col :span="4">
<div>
<div class="title" style="font-weight: bold;">基础元素</div>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.text">
<i class="iconfont sv-text" />
<span>文本</span>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.image">
<i class="iconfont sv-image" />
<span>图片</span>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.longText">
<i class="iconfont sv-longText" />
<span>长文</span>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.table">
<i class="iconfont sv-table" />
<span>表格</span>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.emptyTable">
<i class="iconfont sv-table" />
<span>空白表格</span>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.customText">
<i class="iconfont sv-text" />
<span>自定义</span>
</div>
</div>
</el-col>
</el-row>
<div class="title" style="font-weight: bold;">辅助元素</div>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.hline">
<i class="iconfont sv-hline" />
<span>横线</span>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.vline">
<i class="iconfont sv-vline" />
<span>竖线</span>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.rect">
<i class="iconfont sv-rect" />
<span>矩形</span>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.oval">
<i class="iconfont sv-oval" />
<span>圆形</span>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.barcode">
<i class="iconfont sv-barcode" />
<span>条形码</span>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple">
<div class="ep-draggable-item item" tid="defaultModule.qrcode">
<i class="iconfont sv-qrcode" />
<span>二维码</span>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="flex-5 center">
</el-col>
<el-col :span="16" style="margin-top: 15px;">
<!-- 设计器的 容器 -->
<div id="hiprint-printTemplate" />
</div>
<div class="flex-2 right">
</el-col>
<el-col :span="4">
<!-- 元素参数的 容器 -->
<div id="PrintElementOptionSetting" />
</div>
</div>
</el-col>
</el-row>
<div>
<el-dialog :close-on-click-modal="false" :visible.sync="formDias" title="模板" width="550px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px">
@@ -89,10 +248,13 @@
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="formDias=false">{{ $t('task.select.Cancel') }}</el-button>
<el-button :disabled="isDisabled" type="primary" @click="editBtn">{{ $t('task.select.Confirm') }}</el-button>
<el-button :disabled="isDisabled" type="primary" @click="create">{{ $t('task.select.Confirm') }}</el-button>
</div>
</el-dialog>
</div>
<Preview ref="preView" :preview-show.sync="previewShow" />
</div>
</template>
@@ -100,6 +262,7 @@
import $ from 'jquery'
import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
import template from '@/api/acs/order/template'
import Preview from '@/views/acs/order/preview.vue'
// 初始化 provider
hiprint.init({
@@ -107,12 +270,56 @@ hiprint.init({
})
export default {
name: 'Hrprint',
components: { Preview },
data() {
return {
previewShow: false,
radio1:null,
ticketList: [],
templateList: [],
ticketId: null,
templateId: null,
templateLoading: false,
curPaper: {
type: 'A4',
width: 210,
height: 296.6
},
paperTypes: {
'A3': {
width: 420,
height: 296.6
},
'A4': {
width: 210,
height: 296.6
},
'A5': {
width: 210,
height: 147.6
},
'B3': {
width: 500,
height: 352.6
},
'B4': {
width: 250,
height: 352.6
},
'B5': {
width: 250,
height: 175.6
}
},
formDias: false,
hiprintTemplate: null, // 声明 hiprintTemplate 以便在 buildDesigner 中使用
printResults: [],
isDisabled: false,
paperWidth: 220,
paperHeight: 80,
form: {
template_name: '',
template_status: '',
@@ -133,11 +340,35 @@ export default {
this.buildDesigner()
})
},
created() {
template.getTemplateList().then(data => {
this.templateList = data
})
template.getTicketList().then(data => {
this.ticketList = data
})
},
methods: {
addTable() {
this.formDias = true
this.isDisabled = false
},
clear() {
this.hiprintTemplate.clear()
},
preview() {
this.previewShow = true
/* const str = '{ "panels": [{ "index": 0, "height": 30, "width": 50, "paperHeader": 0, "paperFooter": 82.5, "printElements": [{ "options": { "left": 7.5, "top": 9, "height": 15, "width": 127.5, "field": "product", "testData": "加多老吉茶 100889", "hideTitle": true }, "printElementType": { "title": "文本", "type": "text" } }, { "options": { "left": 120, "top": 27, "height": 33, "width": 13.5, "field": "ptype", "testData": "酒水222", "hideTitle": true }, "printElementType": { "title": "文本", "type": "text" } }, { "options": { "left": 7.5, "top": 28.5, "height": 30, "width": 105, "field": "code", "testData": "100889", "textAlign": "center", "textType": "barcode" }, "printElementType": { "title": "文本", "type": "text" } }], "paperNumberLeft": 111, "paperNumberTop": 63, "paperNumberDisabled": true }] }'
const hiprintTemplate = new hiprint.PrintTemplate({
template: JSON.parse(str)
})
hiprintTemplate.design('#hiprint-printTemplate')
const printData = { product: '测试数量', ptype: '测试酒水', code: '100889' }*/
const printData = { dd: '测试数量' }
this.$refs.preView.show(this.hiprintTemplate, printData)
},
/**
* 构建左侧可拖拽元素
* 注意: 可拖拽元素必须在 hiprint.init() 之后调用
@@ -161,13 +392,48 @@ export default {
this.hiprintTemplate = new hiprint.PrintTemplate({
settingContainer: '#PrintElementOptionSetting' // 元素参数容器
})
this.hiprintTemplate.addPrintPanel({ width: 200, height: 300, paperFooter: 340, paperHeader: 10 });
// 构建 并填充到 容器中
this.hiprintTemplate.design('#hiprint-printTemplate')
//
this.hiprintTemplate_.add
}
},
// 根据搜索获取模板列表
getTemplateById() {
// if (hiprintTemplate) {
template.see(this.templateId).then(res => {
try {
this.hiprintTemplate.update(JSON.parse(res.template))
} catch (e) {
this.$message.error(`更新失败: ${e}`)
}
})
// }
},
otherPaper() {
this.hiprintTemplate.setPaper(this.paperWidth, this.paperHeight)
},
/**
* 设置纸张大小
* @param type [A3, A4, A5, B3, B4, B5, other]
* @param value {width,height} mm
*/
setPaper(type) {
try {
// debugger
if (Object.keys(this.paperTypes).includes(type)) {
// this.curPaper = {type: type, width: value.width, height: value.height}
const value = this.paperTypes[type]
this.hiprintTemplate.setPaper(value.width, value.height)
} else {
this.curPaper = { type: 'other', width: value.width, height: value.height }
this.hiprintTemplate.setPaper(value.width, value.height)
}
} catch (error) {
this.$message.error(`操作失败: ${error}`)
}
},
/**
* 浏览器打印
*/
@@ -189,6 +455,7 @@ export default {
// 调用浏览器打印
if (this.hiprintTemplate) {
console.log('准备打印，参数：', { printData, options, ext })
debugger
this.hiprintTemplate.print(printData, options, ext)
}
},
@@ -228,14 +495,15 @@ export default {
console.error('PDF 生成失败:', error)
})
},
editBtn() {
create() {
// console.log('保存数据', this.hiprintTemplate.getJson())
this.isDisabled = true
// debugger
this.form = {
...this.form, // 保留原有属性
...this.hiprintTemplate.getJson() // 赋值新属性
}
template.savePdf(this.form).then((data) => {
template.create(JSON.stringify(this.form)).then((data) => {
this.formDias = false
// 设置定时器，等待一定时间后再次允许请求
setTimeout(() => {
@@ -247,39 +515,36 @@ export default {
}
</script>
<style scoped>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 字体样式 */
@import "../../../assets/css/iconfont.css";
/* 定义全局样式 */
/* 在 main.js 入库文件引入 */
body {
margin: 0;
}
/* scrollbar */
::-webkit-scrollbar {
height: 4px;
width: 4px;
}
::-webkit-scrollbar-corner {
height: 4px;
width: 4px;
}
::-webkit-scrollbar-thumb {
/*::-webkit-scrollbar-thumb {
background: purple;
border-radius: 2px;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
}*/
::-webkit-scrollbar-thumb:hover {
background: purple;
}
@@ -288,146 +553,25 @@ body {
.flex-row {
display: flex;
}
.flex-col {
display: flex;
-ms-flex-direction: column; /* 旧版 IE */
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.align-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.flex-1 {
-ms-flex: 1;
flex: 1;
}
.flex-2 {
-ms-flex: 2;
flex: 2;
}
.flex-3 {
-ms-flex: 3;
flex: 3;
}
.flex-4 {
-ms-flex: 4;
flex: 4;
}
.flex-5 {
-ms-flex: 5;
flex: 5;
}
.ml-10 {
margin-left: 10px;
}
.mr-10 {
margin-right: 10px;
}
.mt-10 {
margin-top: 10px;
}
.mb-10 {
margin-bottom: 10px;
}
/* button 样式 为了好看点 */
button {
padding: 10px;
min-width: 40px;
color: white;
opacity: 0.9;
cursor: pointer;
border-width: 0;
border: 1px solid #d9d9d9;
}
button:hover {
opacity: 1;
}
button i {
font-size: 16px !important;
}
.circle,
.circle-4 {
border-radius: 4px !important;
}
.circle-10 {
border-radius: 10px !important;
}
/* 按钮颜色 */
.primary {
background: purple;
}
.info {
color: #000;
background: none;
}
.info:hover {
color: purple;
border-color: purple;
}
.secondary {
background: #1976d2;
}
.warning {
background: #d32f2f;
}
/* modal */
.modal {
padding: 0;
margin: 0;
}
.modal .mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
height: 100%;
background-color: #00000073;
}
.modal .wrap {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
background-color: #00000073;
outline: 0;
}
.modal .wrap .box {
position: relative;
margin: 10% auto;
width: 40%;
background: #fff;
border-radius: 4px;
z-index: 1001;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.modal-box__header {
padding: 10px 14px;
border-bottom: 1px solid #e9e9e9;
}
.modal-box__footer {
text-align: end;
}
.modal-box__footer button {
min-width: 100px;
}
.modal-box__footer button:not(:last-child) {
margin-right: 10px;
}
/* 重写全局 hiprint 样式 */
.hiprint-headerLine,
.hiprint-footerLine {
@@ -458,32 +602,7 @@ button i {
top: -14px;
font-size: 12px;
}
/* 区域 */
.left {
background: white;
border-radius: 4px;
border: 1px solid #d9d9d9;
padding: 10px 0;
box-shadow: 2px 2px 2px 0px rgba(181, 16, 181, 0.2);
overflow: auto;
}
.center {
margin: 0 10px;
background: white;
border-radius: 4px;
border: 1px solid #d9d9d9;
padding: 20px;
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
overflow: auto;
}
.right {
background: white;
border-radius: 4px;
border: 1px solid #d9d9d9;
padding: 10px 0;
box-shadow: 2px 2px 2px 0px rgb(128 0 128 / 20%);
overflow: auto;
}
/* 左侧拖拽元素样式 */
.title {
font-size: 16px;
@@ -491,6 +610,7 @@ button i {
width: 100%;
margin: 10px 0 0 24px;
}
.item {
display: flex;
flex-direction: column;
@@ -498,15 +618,18 @@ button i {
background: white;
padding: 4px 10px;
margin: 10px 8px 4px 8px;
width: 38%;
/*width: 38%;*/
min-height: 60px;
border-radius: 4px;
box-shadow: 2px 2px 2px 2px rgba(171, 171, 171, 0.2);
}
.item .iconfont {
font-size: 1.5rem;
}
.item span {
font-size: 14px;
}
</style>