23 changed files with 2734 additions and 5138 deletions
@ -0,0 +1,352 @@ |
|||
@media print { |
|||
body { |
|||
margin: 0px; |
|||
padding: 0px; |
|||
} |
|||
} |
|||
|
|||
@page { |
|||
margin: 0; |
|||
} |
|||
|
|||
.hiprint-printPaper * { |
|||
box-sizing: border-box; |
|||
-moz-box-sizing: border-box; /* Firefox */ |
|||
-webkit-box-sizing: border-box; /* Safari */ |
|||
} |
|||
|
|||
.hiprint-printPaper *:focus { |
|||
outline: -webkit-focus-ring-color auto 0px; |
|||
} |
|||
|
|||
.hiprint-printPaper { |
|||
position: relative; |
|||
padding: 0 0 0 0; |
|||
page-break-after: always; |
|||
-webkit-user-select: none; /* Chrome/Safari/Opera */ |
|||
-moz-user-select: none; /* Firefox */ |
|||
user-select: none; |
|||
overflow-x: hidden; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.hiprint-printPaper .hiprint-printPaper-content { |
|||
position: relative; |
|||
} |
|||
|
|||
/* 火狐浏览器打印 第一页过后 重叠问题 */ |
|||
@-moz-document url-prefix() { |
|||
.hiprint-printPaper .hiprint-printPaper-content { |
|||
position: relative; |
|||
margin-top: 20px; |
|||
top: -20px |
|||
} |
|||
} |
|||
|
|||
.hiprint-printPaper.design { |
|||
overflow: visible; |
|||
} |
|||
|
|||
|
|||
.hiprint-printTemplate .hiprint-printPanel { |
|||
page-break-after: always; |
|||
} |
|||
|
|||
.hiprint-printPaper, hiprint-printPanel { |
|||
box-sizing: border-box; |
|||
border: 0px; |
|||
} |
|||
|
|||
.hiprint-printPanel .hiprint-printPaper:last-child { |
|||
page-break-after: avoid; |
|||
} |
|||
|
|||
.hiprint-printTemplate .hiprint-printPanel:last-child { |
|||
page-break-after: avoid; |
|||
} |
|||
|
|||
.hiprint-printPaper .hideheaderLinetarget { |
|||
border-top: 0px dashed rgb(201, 190, 190) !important; |
|||
} |
|||
|
|||
.hiprint-printPaper .hidefooterLinetarget { |
|||
border-top: 0px dashed rgb(201, 190, 190) !important; |
|||
} |
|||
|
|||
.hiprint-printPaper.design { |
|||
border: 1px dashed rgba(170, 170, 170, 0.7); |
|||
} |
|||
|
|||
.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content { |
|||
overflow: hidden; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.design .resize-panel { |
|||
box-sizing: border-box; |
|||
border: 1px dotted; |
|||
} |
|||
|
|||
.hiprint-printElement-text { |
|||
background-color: transparent; |
|||
background-repeat: repeat; |
|||
padding: 0 0 0 0; |
|||
border: 0.75pt none rgb(0, 0, 0); |
|||
direction: ltr; |
|||
font-family: 'SimSun'; |
|||
font-size: 9pt; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
padding-bottom: 0pt; |
|||
padding-left: 0pt; |
|||
padding-right: 0pt; |
|||
padding-top: 0pt; |
|||
text-align: left; |
|||
text-decoration: none; |
|||
line-height: 9.75pt; |
|||
box-sizing: border-box; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.design .hiprint-printElement-text-content { |
|||
border: 1px dashed rgb(206, 188, 188); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.hiprint-printElement-longText { |
|||
background-color: transparent; |
|||
background-repeat: repeat; |
|||
border: 0.75pt none rgb(0, 0, 0); |
|||
direction: ltr; |
|||
font-family: 'SimSun'; |
|||
font-size: 9pt; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
padding-bottom: 0pt; |
|||
padding-left: 0pt; |
|||
padding-right: 0pt; |
|||
padding-top: 0pt; |
|||
text-align: left; |
|||
text-decoration: none; |
|||
line-height: 9.75pt; |
|||
box-sizing: border-box; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
/*white-space: pre-wrap*/ |
|||
} |
|||
|
|||
|
|||
.hiprint-printElement-table { |
|||
background-color: transparent; |
|||
background-repeat: repeat; |
|||
color: rgb(0, 0, 0); |
|||
border-color: rgb(0, 0, 0); |
|||
border-style: none; |
|||
direction: ltr; |
|||
font-family: 'SimSun'; |
|||
font-size: 9pt; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
padding-bottom: 0pt; |
|||
padding-left: 0pt; |
|||
padding-right: 0pt; |
|||
padding-top: 0pt; |
|||
text-align: left; |
|||
text-decoration: none; |
|||
padding: 0 0 0 0; |
|||
box-sizing: border-box; |
|||
line-height: 9.75pt; |
|||
} |
|||
|
|||
.hiprint-printElement-table thead { |
|||
background: #e8e8e8; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
table.hiprint-printElement-tableTarget { |
|||
width: 100%; |
|||
} |
|||
|
|||
.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td { |
|||
border-color: rgb(0, 0, 0); |
|||
/*border-style: none;*/ |
|||
/*border: 1px solid rgb(0, 0, 0);*/ |
|||
font-weight: normal; |
|||
direction: ltr; |
|||
padding-bottom: 0pt; |
|||
padding-left: 4pt; |
|||
padding-right: 4pt; |
|||
padding-top: 0pt; |
|||
text-decoration: none; |
|||
vertical-align: middle; |
|||
box-sizing: border-box; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
/*line-height: 9.75pt; |
|||
font-size: 9pt;*/ |
|||
} |
|||
|
|||
.hiprint-printElement-tableTarget-border-all { |
|||
border: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-none { |
|||
border: 0px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-lr { |
|||
border-left: 1px solid; |
|||
border-right: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-left { |
|||
border-left: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-right { |
|||
border-right: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-tb { |
|||
border-top: 1px solid; |
|||
border-bottom: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-top { |
|||
border-top: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-bottom { |
|||
border-bottom: 1px solid; |
|||
} |
|||
|
|||
.hiprint-printElement-tableTarget-border-td-none td { |
|||
border: 0px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-td-all td:not(:nth-last-child(-n+2)) { |
|||
border-right: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-td-all td:not(last-child) { |
|||
border-right: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-td-all td:last-child { |
|||
border-left: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-td-all td:last-child:first-child { |
|||
border-left: none; |
|||
} |
|||
|
|||
/*.hiprint-printElement-tableTarget tr,*/ |
|||
.hiprint-printElement-tableTarget td { |
|||
height: 18pt; |
|||
} |
|||
|
|||
.hiprint-printPaper .hiprint-paperNumber { |
|||
font-size: 9pt; |
|||
} |
|||
|
|||
.design .hiprint-printElement-table-handle { |
|||
position: absolute; |
|||
height: 21pt; |
|||
width: 21pt; |
|||
background: red; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.hiprint-printPaper .hiprint-paperNumber-disabled { |
|||
float: right !important; |
|||
right: 0 !important; |
|||
color: gainsboro !important; |
|||
} |
|||
|
|||
.hiprint-printElement-vline, .hiprint-printElement-hline { |
|||
border: 0px none rgb(0, 0, 0); |
|||
|
|||
} |
|||
|
|||
.hiprint-printElement-vline { |
|||
border-left: 0.75pt solid #000; |
|||
border-right: 0px none rgb(0, 0, 0) !important; |
|||
border-bottom: 0px none rgb(0, 0, 0) !important; |
|||
border-top: 0px none rgb(0, 0, 0) !important; |
|||
} |
|||
|
|||
.hiprint-printElement-hline { |
|||
border-top: 0.75pt solid #000; |
|||
border-right: 0px none rgb(0, 0, 0) !important; |
|||
border-bottom: 0px none rgb(0, 0, 0) !important; |
|||
border-left: 0px none rgb(0, 0, 0) !important; |
|||
} |
|||
|
|||
.hiprint-printElement-oval, .hiprint-printElement-rect { |
|||
border: 0.75pt solid #000; |
|||
} |
|||
|
|||
.hiprint-text-content-middle { |
|||
} |
|||
|
|||
.hiprint-text-content-middle > div { |
|||
display: grid; |
|||
align-items: center; |
|||
} |
|||
|
|||
.hiprint-text-content-bottom { |
|||
} |
|||
|
|||
.hiprint-text-content-bottom > div { |
|||
display: grid; |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.hiprint-text-content-wrap { |
|||
} |
|||
|
|||
.hiprint-text-content-wrap .hiprint-text-content-wrap-nowrap { |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.hiprint-text-content-wrap .hiprint-text-content-wrap-clip { |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: clip; |
|||
} |
|||
|
|||
.hiprint-text-content-wrap .hiprint-text-content-wrap-ellipsis { |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
/*hi-grid-row */ |
|||
.hi-grid-row { |
|||
position: relative; |
|||
height: auto; |
|||
margin-right: 0; |
|||
margin-left: 0; |
|||
zoom: 1; |
|||
display: block; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.hi-grid-row::after, .hi-grid-row::before { |
|||
display: table; |
|||
content: ''; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.hi-grid-col { |
|||
display: block; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
float: left; |
|||
flex: 0 0 auto; |
|||
} |
|||
|
|||
.table-grid-row { |
|||
margin-left: -0pt; |
|||
margin-right: -0pt; |
|||
} |
|||
|
|||
.tableGridColumnsGutterRow { |
|||
padding-left: 0pt; |
|||
padding-right: 0pt; |
|||
} |
|||
|
|||
.hiprint-gridColumnsFooter { |
|||
text-align: left; |
|||
clear: both; |
|||
} |
|||
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,352 @@ |
|||
@media print { |
|||
body { |
|||
margin: 0px; |
|||
padding: 0px; |
|||
} |
|||
} |
|||
|
|||
@page { |
|||
margin: 0; |
|||
} |
|||
|
|||
.hiprint-printPaper * { |
|||
box-sizing: border-box; |
|||
-moz-box-sizing: border-box; /* Firefox */ |
|||
-webkit-box-sizing: border-box; /* Safari */ |
|||
} |
|||
|
|||
.hiprint-printPaper *:focus { |
|||
outline: -webkit-focus-ring-color auto 0px; |
|||
} |
|||
|
|||
.hiprint-printPaper { |
|||
position: relative; |
|||
padding: 0 0 0 0; |
|||
page-break-after: always; |
|||
-webkit-user-select: none; /* Chrome/Safari/Opera */ |
|||
-moz-user-select: none; /* Firefox */ |
|||
user-select: none; |
|||
overflow-x: hidden; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.hiprint-printPaper .hiprint-printPaper-content { |
|||
position: relative; |
|||
} |
|||
|
|||
/* 火狐浏览器打印 第一页过后 重叠问题 */ |
|||
@-moz-document url-prefix() { |
|||
.hiprint-printPaper .hiprint-printPaper-content { |
|||
position: relative; |
|||
margin-top: 20px; |
|||
top: -20px |
|||
} |
|||
} |
|||
|
|||
.hiprint-printPaper.design { |
|||
overflow: visible; |
|||
} |
|||
|
|||
|
|||
.hiprint-printTemplate .hiprint-printPanel { |
|||
page-break-after: always; |
|||
} |
|||
|
|||
.hiprint-printPaper, hiprint-printPanel { |
|||
box-sizing: border-box; |
|||
border: 0px; |
|||
} |
|||
|
|||
.hiprint-printPanel .hiprint-printPaper:last-child { |
|||
page-break-after: avoid; |
|||
} |
|||
|
|||
.hiprint-printTemplate .hiprint-printPanel:last-child { |
|||
page-break-after: avoid; |
|||
} |
|||
|
|||
.hiprint-printPaper .hideheaderLinetarget { |
|||
border-top: 0px dashed rgb(201, 190, 190) !important; |
|||
} |
|||
|
|||
.hiprint-printPaper .hidefooterLinetarget { |
|||
border-top: 0px dashed rgb(201, 190, 190) !important; |
|||
} |
|||
|
|||
.hiprint-printPaper.design { |
|||
border: 1px dashed rgba(170, 170, 170, 0.7); |
|||
} |
|||
|
|||
.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content { |
|||
overflow: hidden; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.design .resize-panel { |
|||
box-sizing: border-box; |
|||
border: 1px dotted; |
|||
} |
|||
|
|||
.hiprint-printElement-text { |
|||
background-color: transparent; |
|||
background-repeat: repeat; |
|||
padding: 0 0 0 0; |
|||
border: 0.75pt none rgb(0, 0, 0); |
|||
direction: ltr; |
|||
font-family: 'SimSun'; |
|||
font-size: 9pt; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
padding-bottom: 0pt; |
|||
padding-left: 0pt; |
|||
padding-right: 0pt; |
|||
padding-top: 0pt; |
|||
text-align: left; |
|||
text-decoration: none; |
|||
line-height: 9.75pt; |
|||
box-sizing: border-box; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.design .hiprint-printElement-text-content { |
|||
border: 1px dashed rgb(206, 188, 188); |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.hiprint-printElement-longText { |
|||
background-color: transparent; |
|||
background-repeat: repeat; |
|||
border: 0.75pt none rgb(0, 0, 0); |
|||
direction: ltr; |
|||
font-family: 'SimSun'; |
|||
font-size: 9pt; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
padding-bottom: 0pt; |
|||
padding-left: 0pt; |
|||
padding-right: 0pt; |
|||
padding-top: 0pt; |
|||
text-align: left; |
|||
text-decoration: none; |
|||
line-height: 9.75pt; |
|||
box-sizing: border-box; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
/*white-space: pre-wrap*/ |
|||
} |
|||
|
|||
|
|||
.hiprint-printElement-table { |
|||
background-color: transparent; |
|||
background-repeat: repeat; |
|||
color: rgb(0, 0, 0); |
|||
border-color: rgb(0, 0, 0); |
|||
border-style: none; |
|||
direction: ltr; |
|||
font-family: 'SimSun'; |
|||
font-size: 9pt; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
padding-bottom: 0pt; |
|||
padding-left: 0pt; |
|||
padding-right: 0pt; |
|||
padding-top: 0pt; |
|||
text-align: left; |
|||
text-decoration: none; |
|||
padding: 0 0 0 0; |
|||
box-sizing: border-box; |
|||
line-height: 9.75pt; |
|||
} |
|||
|
|||
.hiprint-printElement-table thead { |
|||
background: #e8e8e8; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
table.hiprint-printElement-tableTarget { |
|||
width: 100%; |
|||
} |
|||
|
|||
.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td { |
|||
border-color: rgb(0, 0, 0); |
|||
/*border-style: none;*/ |
|||
/*border: 1px solid rgb(0, 0, 0);*/ |
|||
font-weight: normal; |
|||
direction: ltr; |
|||
padding-bottom: 0pt; |
|||
padding-left: 4pt; |
|||
padding-right: 4pt; |
|||
padding-top: 0pt; |
|||
text-decoration: none; |
|||
vertical-align: middle; |
|||
box-sizing: border-box; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
/*line-height: 9.75pt; |
|||
font-size: 9pt;*/ |
|||
} |
|||
|
|||
.hiprint-printElement-tableTarget-border-all { |
|||
border: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-none { |
|||
border: 0px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-lr { |
|||
border-left: 1px solid; |
|||
border-right: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-left { |
|||
border-left: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-right { |
|||
border-right: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-tb { |
|||
border-top: 1px solid; |
|||
border-bottom: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-top { |
|||
border-top: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-bottom { |
|||
border-bottom: 1px solid; |
|||
} |
|||
|
|||
.hiprint-printElement-tableTarget-border-td-none td { |
|||
border: 0px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-td-all td:not(:nth-last-child(-n+2)) { |
|||
border-right: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-td-all td:not(last-child) { |
|||
border-right: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-td-all td:last-child { |
|||
border-left: 1px solid; |
|||
} |
|||
.hiprint-printElement-tableTarget-border-td-all td:last-child:first-child { |
|||
border-left: none; |
|||
} |
|||
|
|||
/*.hiprint-printElement-tableTarget tr,*/ |
|||
.hiprint-printElement-tableTarget td { |
|||
height: 18pt; |
|||
} |
|||
|
|||
.hiprint-printPaper .hiprint-paperNumber { |
|||
font-size: 9pt; |
|||
} |
|||
|
|||
.design .hiprint-printElement-table-handle { |
|||
position: absolute; |
|||
height: 21pt; |
|||
width: 21pt; |
|||
background: red; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.hiprint-printPaper .hiprint-paperNumber-disabled { |
|||
float: right !important; |
|||
right: 0 !important; |
|||
color: gainsboro !important; |
|||
} |
|||
|
|||
.hiprint-printElement-vline, .hiprint-printElement-hline { |
|||
border: 0px none rgb(0, 0, 0); |
|||
|
|||
} |
|||
|
|||
.hiprint-printElement-vline { |
|||
border-left: 0.75pt solid #000; |
|||
border-right: 0px none rgb(0, 0, 0) !important; |
|||
border-bottom: 0px none rgb(0, 0, 0) !important; |
|||
border-top: 0px none rgb(0, 0, 0) !important; |
|||
} |
|||
|
|||
.hiprint-printElement-hline { |
|||
border-top: 0.75pt solid #000; |
|||
border-right: 0px none rgb(0, 0, 0) !important; |
|||
border-bottom: 0px none rgb(0, 0, 0) !important; |
|||
border-left: 0px none rgb(0, 0, 0) !important; |
|||
} |
|||
|
|||
.hiprint-printElement-oval, .hiprint-printElement-rect { |
|||
border: 0.75pt solid #000; |
|||
} |
|||
|
|||
.hiprint-text-content-middle { |
|||
} |
|||
|
|||
.hiprint-text-content-middle > div { |
|||
display: grid; |
|||
align-items: center; |
|||
} |
|||
|
|||
.hiprint-text-content-bottom { |
|||
} |
|||
|
|||
.hiprint-text-content-bottom > div { |
|||
display: grid; |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.hiprint-text-content-wrap { |
|||
} |
|||
|
|||
.hiprint-text-content-wrap .hiprint-text-content-wrap-nowrap { |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.hiprint-text-content-wrap .hiprint-text-content-wrap-clip { |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: clip; |
|||
} |
|||
|
|||
.hiprint-text-content-wrap .hiprint-text-content-wrap-ellipsis { |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
/*hi-grid-row */ |
|||
.hi-grid-row { |
|||
position: relative; |
|||
height: auto; |
|||
margin-right: 0; |
|||
margin-left: 0; |
|||
zoom: 1; |
|||
display: block; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.hi-grid-row::after, .hi-grid-row::before { |
|||
display: table; |
|||
content: ''; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.hi-grid-col { |
|||
display: block; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
float: left; |
|||
flex: 0 0 auto; |
|||
} |
|||
|
|||
.table-grid-row { |
|||
margin-left: -0pt; |
|||
margin-right: -0pt; |
|||
} |
|||
|
|||
.tableGridColumnsGutterRow { |
|||
padding-left: 0pt; |
|||
padding-right: 0pt; |
|||
} |
|||
|
|||
.hiprint-gridColumnsFooter { |
|||
text-align: left; |
|||
clear: both; |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,323 @@ |
|||
<script lang="ts" setup> |
|||
import QRCode from 'qrcode'; |
|||
import logourl from "@/assets/logo_text.png"; |
|||
import { useUserStore } from '@/store/modules/user'; |
|||
|
|||
export interface fieldTree{ |
|||
field?:string; |
|||
name?:string; |
|||
type:string; |
|||
checked?:number; |
|||
data?:[]; |
|||
child?:fieldTree[] |
|||
} |
|||
|
|||
export interface PageConfig{ |
|||
width:string; |
|||
height:string; |
|||
horizontal:string;//横向 |
|||
pagesize:string; |
|||
|
|||
//页脚页眉 |
|||
pagebrow:string[]; |
|||
founder:string; |
|||
founderTime:string; |
|||
deptOrg:string; |
|||
serialNumber:string; |
|||
qrcode:boolean; |
|||
} |
|||
|
|||
const props = withDefaults(defineProps<{ |
|||
name:string, |
|||
pageConfig:PageConfig, |
|||
fieldTree:fieldTree[], |
|||
qrcode?:string, |
|||
}>(),{}) |
|||
|
|||
const qrdata=ref("") |
|||
const userName=useUserStore().nickname; |
|||
|
|||
function parseDataPicker(val:string){ |
|||
if(val==""|| val.match(/[a-z]/) ) return val; |
|||
let str=new Date(parseInt(val)).toISOString() |
|||
return str.slice(0,10)+" "+str.slice(11,16) |
|||
} |
|||
|
|||
const generateQrCode= ()=>{ |
|||
var opts = { |
|||
errorCorrectionLevel: 'M', |
|||
type: 'image/png', |
|||
quality: 0.3, |
|||
margin: 1, |
|||
color: { |
|||
dark:"#000", |
|||
light:"#fff" |
|||
} |
|||
} |
|||
|
|||
QRCode.toDataURL(props.qrcode, opts, function (err, url) { |
|||
if (err) throw err |
|||
qrdata.value=url |
|||
}) |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<template> |
|||
<div class="page_brow" > |
|||
<img height="50px" :src="logourl" /> |
|||
<span v-if="props.pageConfig.pagebrow.includes('serialNumber')">表单编号:{{ props.pageConfig.serialNumber }}</span> |
|||
</div> |
|||
<div id="printContainer" :style="{width: props.pageConfig.width}" > |
|||
<h3>{{props.name}}</h3> |
|||
<div style="display: flex;justify-content: space-between; margin-bottom: 10px;"> |
|||
<span v-if="props.pageConfig.pagebrow.includes('founder')">创建人:{{ props.pageConfig.founder }}</span> |
|||
<span v-if="props.pageConfig.pagebrow.includes('founderTime')">创建时间:{{ props.pageConfig.founderTime }}</span> |
|||
<span v-if="props.pageConfig.pagebrow.includes('deptOrg')">所属部门:{{ props.pageConfig.deptOrg }}</span> |
|||
</div> |
|||
<div v-for="group in props.fieldTree"> |
|||
<div v-if="Array.isArray(group) && group.length>0" class="auto_table"> |
|||
<template v-for="item in group" > |
|||
<div v-if="item.checked!=2" class="cell_box"> |
|||
<span class="box_name"> |
|||
{{item.name}} |
|||
</span> |
|||
<span v-if="item.type !=='datePicker'" class="content">{{item.field}}</span> |
|||
<span v-else class="content">{{parseDataPicker(item.field)}}</span> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
<div v-else-if="group.type=='divider'" class="title" v-if="group.checked!=2">{{ group.name }}</div> |
|||
<div v-else-if="group.type=='textarea'" class="section" v-if="group.checked!=2"> |
|||
<h5>{{ group.name }}</h5> |
|||
<div class="text_area">{{ group.field }}</div> |
|||
</div> |
|||
<div v-else-if="group.type=='table'" class="section_table" v-if="group.checked!=2"> |
|||
<h5>{{ group.name }}</h5> |
|||
<div class="bder_table" > |
|||
<el-table class="table" :data="group.data" border > |
|||
<template v-for="child in group.child"> |
|||
<el-table-column :prop="child.field" :label="child.name" v-if="child.checked!=2" /> |
|||
</template> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
<div v-else-if="group.type=='tabs'" class="section_tabs" v-if="group.checked!=2"> |
|||
<h5>{{ group.name }}</h5> |
|||
<div v-for="tabs in group.child" class="tabs_item"> |
|||
<div v-if="Array.isArray(tabs)" class="auto_table"> |
|||
<template v-for="item in tabs" > |
|||
<div v-if="item.checked!=2" class="tabs_cell_box" style="width: auto;"> |
|||
<span class="box_name"> |
|||
{{item.name}} |
|||
</span> |
|||
<span v-if="item.type !=='datePicker'" class="content">{{item.field}}</span> |
|||
<span v-else class="content">{{parseDataPicker(item.field)}}</span> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
<div v-else-if="tabs.type=='divider'" class="title" v-if="tabs.checked!=2" |
|||
style="font-size: 12px; margin-top: 20px;">{{ tabs.name }}</div> |
|||
<div v-else-if="tabs.type=='textarea'" class="section" v-if="tabs.checked!=2"> |
|||
<h5>{{ tabs.name }}</h5> |
|||
<div class="text_area">{{ tabs.field }}</div> |
|||
</div> |
|||
<div v-else-if="tabs.type=='table'" class="section" v-if="tabs.checked!=2"> |
|||
<h5>{{ tabs.name }}</h5> |
|||
<div class="bder_table" > |
|||
<el-table class="table" border > |
|||
<template v-for="child in tabs.child"> |
|||
<el-table-column :prop="child.field" :label="child.name" v-if="child.checked!=2" /> |
|||
</template> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
<div v-else class="tabs_cell_box" v-if="tabs.checked!=2"> |
|||
<span class="box_name"> |
|||
{{tabs.name}} |
|||
</span> |
|||
<span v-if="tabs.type !=='datePicker'" class="content">{{tabs.field}}</span> |
|||
<span v-else class="content">{{parseDataPicker(tabs.field??'')}}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<div v-else v-if="group.checked!=2">{{ group }}</div> |
|||
|
|||
</div> |
|||
<div v-if="props.pageConfig.qrcode" style="display: flex; justify-content: space-between; "> |
|||
{{ generateQrCode() }} |
|||
<div style="display: inherit; align-items: center;"> |
|||
<img id="qrcode" width="100px" :src="qrdata"/> |
|||
<div style="text-align: left;padding-left: 5px;">使用手机企业微信<br>扫一扫</div> |
|||
</div> |
|||
<div style="display: flex;flex-direction: column;text-align: left;justify-content: center;"> |
|||
<p>打印日期：{{ new Date().toLocaleString() }}</p> |
|||
<p>打印人： {{userName}}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
#printContainer{ |
|||
padding: 0px 57px 30px 57px; |
|||
text-align: center; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow-y: scroll; |
|||
scrollbar-width: none; |
|||
} |
|||
//没有元素时，隐藏 |
|||
div:empty { |
|||
display: none; |
|||
} |
|||
.page_brow{ |
|||
padding: 24px 57px 0 57px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.auto_table{ |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
border: 1px solid rgb(226, 226, 226); |
|||
} |
|||
h3{ |
|||
width: 100%; |
|||
font-size: 25px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
h5{ |
|||
font-weight: bold; |
|||
width: 100%; |
|||
margin: 5px; |
|||
} |
|||
|
|||
.title{ |
|||
margin-left:10px; |
|||
text-align: left; |
|||
font-size: 15px; |
|||
font-weight: bold; |
|||
} |
|||
.el-descriptions { |
|||
margin-top: 20px; |
|||
} |
|||
.cell-item { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.margin-top { |
|||
margin: 10px; |
|||
} |
|||
|
|||
.section_title{ |
|||
width:100% |
|||
} |
|||
|
|||
.normal_cell,.normal_cell_field{ |
|||
width: 23%; |
|||
height: 20px; |
|||
} |
|||
|
|||
|
|||
.section{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.section_tabs{ |
|||
margin: 10px 0; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.text_area{ |
|||
border: 1px solid rgb(182, 181, 181); |
|||
border-radius: 3px; |
|||
min-height: 40px; |
|||
margin: 5px 0px 10px 0px; |
|||
} |
|||
//////////////自动伸缩 |
|||
.tabs_item { |
|||
display: inline-flex; |
|||
min-height: 40px; |
|||
min-width: 50%; /* 默认最小宽度 */ |
|||
margin-right: -1px;/* 解决边框重合问题*/ |
|||
/* 默认情况：没有 title/section 时宽度 50% */ |
|||
width: 50%; |
|||
.section{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
/* 当直接子元素包含 title 或 section 时，宽度变为 100% */ |
|||
.tabs_item:has(> .title), |
|||
.tabs_item:has(> .section) { |
|||
width: 100%; |
|||
} |
|||
|
|||
.bder_table{ |
|||
border: 1px solid rgb(182, 181, 181); |
|||
margin:5px 0px 10px 0px; |
|||
width: 100% !important; /* 确保表格不超出父容器 */ |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
/* 原有样式（稍作优化） */ |
|||
.cell_box, .tabs_cell_box { |
|||
border: 1px solid rgb(182, 181, 181); |
|||
margin-right: -1px; /* 水平排列时用右负margin */ |
|||
margin-bottom: -1px; /* 垂直排列时用下负margin */ |
|||
display: inline-flex; |
|||
|
|||
.box_name { |
|||
padding: 8px 2px; |
|||
width: 30%; |
|||
text-wrap: wrap; |
|||
max-height: 80px; |
|||
overflow: hidden; /* 配合 ellipsis 需要 */ |
|||
} |
|||
|
|||
.content { |
|||
padding: 8px 2px; |
|||
width: 70%; |
|||
text-wrap: wrap; |
|||
word-break: break-all; |
|||
border-left: 1px solid rgb(182, 181, 181); |
|||
} |
|||
} |
|||
.tabs_cell_box{ |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
#printContainer table{ |
|||
display: block; |
|||
border: 0px solid; |
|||
border-spacing: 1px; |
|||
border-collapse: collapse; |
|||
} |
|||
#printContainer .el-table th.el-table__cell{ |
|||
background: none !important; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
#printContainer .el-table .cell{ |
|||
padding: 0 5px; |
|||
text-align: center; |
|||
max-width: max-content; |
|||
} |
|||
|
|||
#printContainer table th{ |
|||
font-weight: normal; |
|||
border-right: 1px solid rgb(182, 181, 181); |
|||
text-align: center; |
|||
} |
|||
#printContainer table td{ |
|||
border: 1px solid rgb(182, 181, 181); |
|||
} |
|||
|
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,277 @@ |
|||
export default { |
|||
"panels": [{ |
|||
"index": 0, |
|||
"height": 297, |
|||
"width": 210, |
|||
"paperHeader": 49.5, |
|||
"paperFooter": 780, |
|||
"printElements": [{ |
|||
"options": { |
|||
"left": 175.5, |
|||
"top": 10.5, |
|||
"height": 27, |
|||
"width": 259, |
|||
"title": "HiPrint自定义模块打印插件", |
|||
"fontSize": 19, |
|||
"fontWeight": "600", |
|||
"textAlign": "center", |
|||
"lineHeight": 26 |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": {"left": 60, "top": 27, "height": 13, "width": 52, "title": "页眉线", "textAlign": "center"}, |
|||
"printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": {"left": 25.5, "top": 57, "height": 705, "width": 9, "fixed": true, "borderStyle": "dotted"}, |
|||
"printElementType": {"type": "vline"} |
|||
}, { |
|||
"options": {"left": 60, "top": 61.5, "height": 48, "width": 87, "src": ""}, |
|||
"printElementType": {"title": "图片", "type": "image"} |
|||
}, { |
|||
"options": { |
|||
"left": 153, |
|||
"top": 64.5, |
|||
"height": 39, |
|||
"width": 276, |
|||
"title": "二维码以及条形码均采用svg格式打印。不同打印机打印不会造成失真。图片打印：不同DPI打印可能会导致失真，", |
|||
"fontFamily": "微软雅黑", |
|||
"textAlign": "center", |
|||
"lineHeight": 18 |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 457.5, |
|||
"top": 79.5, |
|||
"height": 13, |
|||
"width": 120, |
|||
"title": "姓名", |
|||
"field": "name", |
|||
"testData": "古力娜扎", |
|||
"color": "#f00808", |
|||
"textDecoration": "underline", |
|||
"textAlign": "center" |
|||
}, "printElementType": {"title": "文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 483, |
|||
"top": 124.5, |
|||
"height": 43, |
|||
"width": 51, |
|||
"title": "123456789", |
|||
"textType": "qrcode" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 285, |
|||
"top": 130.5, |
|||
"height": 34, |
|||
"width": 175, |
|||
"title": "123456789", |
|||
"fontFamily": "微软雅黑", |
|||
"textAlign": "center", |
|||
"textType": "barcode" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 60, |
|||
"top": 132, |
|||
"height": 19, |
|||
"width": 213, |
|||
"title": "所有打印元素都可已拖拽的方式来改变元素大小", |
|||
"fontFamily": "微软雅黑", |
|||
"textAlign": "center", |
|||
"lineHeight": 18 |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 153, |
|||
"top": 189, |
|||
"height": 13, |
|||
"width": 238, |
|||
"title": "单击元素，右侧可自定义元素属性", |
|||
"textAlign": "center", |
|||
"fontFamily": "微软雅黑" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": {"left": 60, "top": 190.5, "height": 13, "width": 51, "title": "横线", "textAlign": "center"}, |
|||
"printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 415.5, |
|||
"top": 190.5, |
|||
"height": 13, |
|||
"width": 164, |
|||
"title": "可以配置各属性的默认值", |
|||
"textAlign": "center", |
|||
"fontFamily": "微软雅黑" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": {"left": 60, "top": 214.5, "height": 10, "width": 475.5}, |
|||
"printElementType": {"title": "横线", "type": "hline"} |
|||
}, { |
|||
"options": { |
|||
"left": 235.5, |
|||
"top": 220.5, |
|||
"height": 32, |
|||
"width": 342, |
|||
"title": "自定义表格：用户可左键选中表头，右键查看可操作项，操作类似Excel，双击表头单元格可进行编辑。内容：title#field", |
|||
"fontFamily": "微软雅黑", |
|||
"textAlign": "center", |
|||
"lineHeight": 15 |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 156, |
|||
"top": 265.5, |
|||
"height": 13, |
|||
"width": 94, |
|||
"title": "表头列大小可拖动", |
|||
"fontFamily": "微软雅黑", |
|||
"textAlign": "center" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 60, |
|||
"top": 265.5, |
|||
"height": 13, |
|||
"width": 90, |
|||
"title": "红色区域可拖动", |
|||
"fontFamily": "微软雅黑", |
|||
"textAlign": "center" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 60, |
|||
"top": 285, |
|||
"height": 44, |
|||
"width": 511.5, |
|||
"field": "table", |
|||
"fields": [{"text":'id',"field":'id'},{"text":'姓名',"field":'name'},{"text":'性别',"field":'gender'},{"text":'数量',"field":'count'}], |
|||
"columns": [[{"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}, { |
|||
"width": 85.25, |
|||
"colspan": 1, |
|||
"rowspan": 1, |
|||
"checked": true |
|||
}, { |
|||
"title": "姓名", |
|||
"field": "name", |
|||
"width": 85.25, |
|||
"align": "center", |
|||
"colspan": 1, |
|||
"rowspan": 1, |
|||
"checked": true, |
|||
}, {"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}, { |
|||
"width": 85.25, |
|||
"colspan": 1, |
|||
"rowspan": 1, |
|||
"checked": true |
|||
}, {"width": 85.25, "colspan": 1, "rowspan": 1, "checked": true}]] |
|||
}, "printElementType": { |
|||
"title": "表格", "type": "table", |
|||
editable:true, |
|||
columnDisplayEditable: true,//列显示是否能编辑
|
|||
columnDisplayIndexEditable: true,//列顺序显示是否能编辑
|
|||
columnTitleEditable: true,//列标题是否能编辑
|
|||
columnResizable: true, //列宽是否能调整
|
|||
columnAlignEditable: true,//列对齐是否调整
|
|||
} |
|||
}, { |
|||
"options": { |
|||
"left": 21, |
|||
"top": 346.5, |
|||
"height": 61.5, |
|||
"width": 15, |
|||
"title": "装订线", |
|||
"lineHeight": 18, |
|||
"fixed": true, |
|||
"contentPaddingTop": 3.75, |
|||
"backgroundColor": "#ffffff" |
|||
}, "printElementType": {"type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 225, |
|||
"top": 349.5, |
|||
"height": 13, |
|||
"width": 346.5, |
|||
"title": "自定义模块：主要为开发人员设计，能够快速，简单，实现自己功能", |
|||
"textAlign": "center" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": {"left": 60, "top": 370.5, "height": 18, "width": 79, "title": "配置项表格", "textAlign": "center"}, |
|||
"printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 225, |
|||
"top": 385.5, |
|||
"height": 38, |
|||
"width": 346.5, |
|||
"title": "配置模块：主要为客户使用，开发人员可以配置属性，字段，标题等，客户直接使用，配置模块请参考实例2", |
|||
"fontFamily": "微软雅黑", |
|||
"lineHeight": 15, |
|||
"textAlign": "center", |
|||
"color": "#d93838" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 60, |
|||
"top": 487.5, |
|||
"height": 13, |
|||
"width": 123, |
|||
"title": "长文本会自动分页", |
|||
"textAlign": "center" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": {"left": 60, "top": 507, "height": 40, "width": 511.5, "field": "longText"}, |
|||
"printElementType": {"title": "长文", "type": "longText"} |
|||
}, { |
|||
"options": {"left": 475.5, "top": 565.5, "height": 100, "width": 100}, |
|||
"printElementType": {"title": "矩形", "type": "rect"} |
|||
}, { |
|||
"options": {"left": 174, "top": 568.5, "height": 13, "width": 90, "title": "竖线", "textAlign": "center"}, |
|||
"printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": {"left": 60, "top": 574.5, "height": 100, "width": 10}, |
|||
"printElementType": {"title": "竖线", "type": "vline"} |
|||
}, { |
|||
"options": {"left": 210, "top": 604.5, "height": 13, "width": 120, "title": "横线", "textAlign": "center"}, |
|||
"printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": {"left": 130.5, "top": 625.5, "height": 10, "width": 277}, |
|||
"printElementType": {"title": "横线", "type": "hline"} |
|||
}, { |
|||
"options": { |
|||
"left": 364.5, |
|||
"top": 649.5, |
|||
"height": 13, |
|||
"width": 101, |
|||
"title": "矩形", |
|||
"textAlign": "center" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": {"left": 525, "top": 784.5, "height": 13, "width": 63, "title": "页尾线", "textAlign": "center"}, |
|||
"printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": {"left": 12, "top": 786, "height": 49, "width": 49}, |
|||
"printElementType": {"title": "html", "type": "html"} |
|||
}, { |
|||
"options": { |
|||
"left": 75, |
|||
"top": 790.5, |
|||
"height": 13, |
|||
"width": 137, |
|||
"title": "红色原型是自动定义的Html", |
|||
"textAlign": "center" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}, { |
|||
"options": { |
|||
"left": 334.5, |
|||
"top": 810, |
|||
"height": 13, |
|||
"width": 205, |
|||
"title": "页眉线已上。页尾下以下每页都会重复打印", |
|||
"textAlign": "center" |
|||
}, "printElementType": {"title": "自定义文本", "type": "text"} |
|||
}], |
|||
"paperNumberLeft": 565.5, |
|||
"paperNumberTop": 819 |
|||
}] |
|||
} |
|||
@ -0,0 +1,73 @@ |
|||
export function printElement(elementId) { |
|||
const element = document.getElementById(elementId); |
|||
if (!element) { |
|||
console.error('元素未找到'); |
|||
return; |
|||
} |
|||
|
|||
// 克隆元素，避免影响原页面
|
|||
const printContent = element.cloneNode(true); |
|||
|
|||
// 创建隐藏iframe
|
|||
const iframe = document.createElement('iframe'); |
|||
iframe.style.display = 'none'; |
|||
document.body.appendChild(iframe); |
|||
|
|||
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; |
|||
|
|||
// 写入样式和内容
|
|||
iframeDoc.open(); |
|||
iframeDoc.write(` |
|||
<html> |
|||
<head> |
|||
<title>打印</title> |
|||
<style> |
|||
/* 打印优化样式 */ |
|||
body { margin: 20px; font-size: 14px; } |
|||
@media print { |
|||
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } |
|||
} |
|||
|
|||
#printContainer table{ |
|||
display: block; |
|||
border: 0px solid; |
|||
border-spacing: 1px; |
|||
border-collapse: collapse; |
|||
} |
|||
#printContainer .el-table th.el-table__cell{ |
|||
background: none !important; |
|||
} |
|||
|
|||
#printContainer table th{ |
|||
border-right: 1px solid; |
|||
} |
|||
#printContainer table td{ |
|||
border: 1px solid; |
|||
} |
|||
|
|||
/* 复制原页面样式 */ |
|||
${Array.from(document.styleSheets) |
|||
.map(sheet => { |
|||
try { |
|||
return Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n'); |
|||
} catch (e) { |
|||
return ''; |
|||
} |
|||
}) |
|||
.join('\n')} |
|||
</style> |
|||
</head> |
|||
<body style="background:white !important;"> |
|||
${printContent.outerHTML} |
|||
</body> |
|||
</html> |
|||
`);
|
|||
iframeDoc.close(); |
|||
|
|||
// 触发打印
|
|||
iframe.onload = function() { |
|||
iframe.contentWindow.print(); |
|||
// 延迟移除iframe
|
|||
setTimeout(() => document.body.removeChild(iframe), 1000); |
|||
}; |
|||
} |
|||
@ -0,0 +1,424 @@ |
|||
<!-- |
|||
@ 作者: han2015 |
|||
@ 时间: 2025-03-24 15:32:40 |
|||
@ 备注: 打印模版设计 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted,toRaw} from 'vue'; |
|||
import {getPrintTemplate,savePrintTemplate} from '@/api/DesignForm/requestapi' |
|||
import printHtmlRender from '@/components/DesignForm/printHtmlRender.vue' |
|||
import { fieldTree,PageConfig} from '@/components/DesignForm/printHtmlRender.vue' |
|||
|
|||
interface fieldTreeEx extends fieldTree{ |
|||
unitName?:string; |
|||
list?:fieldTreeEx[]; |
|||
columns?:fieldTreeEx[]; |
|||
} |
|||
|
|||
const printMode=ref("") |
|||
const tabPosition = ref<TabsInstance['tabPosition']>('left') |
|||
const fieldTreeData=ref<fieldTree[]>([]) |
|||
const htmlRenderData=ref<any[]>([]) |
|||
let defaultCheckList:string[]=[] |
|||
const treeLoaded=ref(false) //处理树首次渲染时，数据未加载的情况 |
|||
const fieldTreeRef=ref() |
|||
const objPageConfig = ref<Record<string, any>>({width:'210mm',height:'297mm',horizontal:"vtal",pagesize:"A4", pagebrow:[],qrcode:false}) |
|||
const pageSize=ref('A4') |
|||
const pageDret=ref('vtal') |
|||
|
|||
//定义页眉页脚的数据，取自pageConfig的字段 |
|||
const systemType:string[]=["founder","founderTime","deptOrg","serialNumber"] |
|||
|
|||
|
|||
const props = defineProps({ |
|||
appCont: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
formKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
groupKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
menuId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
appPageKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
formVersion: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
state: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
function safeStringify(obj, space = 2) { |
|||
return JSON.stringify(obj, (key, value) => { |
|||
// 核心：对每个值都执行 toRaw，如果是 Proxy 就返回原始对象 |
|||
return toRaw(value) ?? value; // 如果不是 Proxy，toRaw 返回 undefined，用 ?? 兜底 |
|||
}, space); |
|||
} |
|||
|
|||
const updatePageConfig=(cmd:string)=>{ |
|||
switch(cmd){ |
|||
case "A4": |
|||
objPageConfig.value.pagesize="A4" |
|||
objPageConfig.value.width="210mm" |
|||
objPageConfig.value.height="297mm" |
|||
break |
|||
case "A5": |
|||
objPageConfig.value.pagesize="A5" |
|||
objPageConfig.value.width="148mm" |
|||
objPageConfig.value.height="210mm" |
|||
break |
|||
case "htal": |
|||
objPageConfig.value.horizontal="htal" |
|||
break |
|||
default: |
|||
objPageConfig.value.horizontal="vtal" |
|||
} |
|||
|
|||
if(objPageConfig.value.horizontal=="htal"){ |
|||
if(objPageConfig.value.width<objPageConfig.value.height){ |
|||
let a=objPageConfig.value.width |
|||
objPageConfig.value.width=objPageConfig.value.height |
|||
objPageConfig.value.height=a |
|||
} |
|||
}else if(objPageConfig.value.width>objPageConfig.value.height){ |
|||
let a=objPageConfig.value.width |
|||
objPageConfig.value.width=objPageConfig.value.height |
|||
objPageConfig.value.height=a |
|||
} |
|||
} |
|||
|
|||
//保存模板 |
|||
const onSaveTreeData=()=>{ |
|||
let str:string=safeStringify(htmlRenderData.value) |
|||
let strtree:string=safeStringify(fieldTreeRef.value.data) |
|||
savePrintTemplate({ |
|||
name:props.state.formOtherData.formName, |
|||
type:"html", |
|||
versionid:props.formVersion, |
|||
formkey:props.formKey, |
|||
formtemplatejson:str, |
|||
treedatajson:strtree, |
|||
pageconfigjson:JSON.stringify(objPageConfig.value), |
|||
nodecheckedlist:JSON.stringify(fieldTreeRef.value.getCheckedKeys()) //包含了半选状态 |
|||
}).then(resp=>{ |
|||
if (resp.code!=200){ |
|||
ElMessage({ |
|||
message: '模板保存失败'+resp.data.error, |
|||
type: 'warning', |
|||
}) |
|||
}else{ |
|||
ElMessage({ |
|||
message: "模板已保存", |
|||
type: 'success', |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
//递归结构字段 |
|||
const deepLoop=(item:fieldTreeEx)=>{ |
|||
let data:fieldTree |
|||
|
|||
switch(item.type){ |
|||
case "grid": |
|||
case "tabs": |
|||
data={ |
|||
field:"", |
|||
type:item.type, |
|||
name: item.unitName, |
|||
child:[], |
|||
} |
|||
break; |
|||
default: |
|||
data={ |
|||
field:item.name?? "", |
|||
type:item.type, |
|||
name:item.item ? item.item.label : "" |
|||
} |
|||
} |
|||
|
|||
if(item.list){ |
|||
item.list.forEach(ele => { |
|||
if(data.child){ |
|||
data.child.push(deepLoop(ele)) |
|||
}else{ |
|||
data.child=[deepLoop(ele)] |
|||
} |
|||
}); |
|||
} |
|||
|
|||
if(item.columns){ |
|||
item.columns.forEach(ele => { |
|||
let column:fieldTree={ |
|||
field:"", |
|||
type:item.type, |
|||
name: ele.label |
|||
} |
|||
if(ele.list){ |
|||
ele.list.forEach(ele2 => { |
|||
if(column.child){ |
|||
column.child.push(deepLoop(ele2)) |
|||
}else{ |
|||
column.child=[deepLoop(ele2)] |
|||
} |
|||
}) |
|||
} |
|||
data.child?.push(column) |
|||
}); |
|||
} |
|||
|
|||
return data |
|||
} |
|||
|
|||
|
|||
const refreshPrintPage=()=>{ |
|||
//如果上面是htmlmode，且已经存编辑过了，后面就不再重新构造模板数据了 |
|||
let section:fieldTree[]=[] |
|||
let keys:string[]=[] |
|||
htmlRenderData.value=[] |
|||
fieldTreeData.value.forEach(item=>{ |
|||
keys.push(item.field!) |
|||
//defaultCheckList.value.push() //默认勾选第一级节点，相当于勾选所有节点 |
|||
switch(item.type){ |
|||
case "divider": |
|||
case "textarea": |
|||
if(section.length>0){ |
|||
htmlRenderData.value.push(section) |
|||
section=[] |
|||
} |
|||
//if(item.checked!=2) keys.push(item.field!) |
|||
htmlRenderData.value.push(item) |
|||
break |
|||
case "table": |
|||
if(section.length>0){ |
|||
htmlRenderData.value.push(section) |
|||
section=[] |
|||
} |
|||
//if(item.checked==0) keys.push(item.field!) |
|||
htmlRenderData.value.push(item) |
|||
break |
|||
case "grid": |
|||
item.child?.forEach(ch=>{ |
|||
if (ch.child) { |
|||
section.push(...ch.child.slice()) |
|||
} |
|||
}) |
|||
// if(item.checked==0) keys.push(item.field!) |
|||
htmlRenderData.value.push(section) |
|||
section=[] |
|||
break |
|||
case "tabs": |
|||
if(section.length>0){ |
|||
htmlRenderData.value.push(section) |
|||
section=[] |
|||
} |
|||
item.child?.forEach(ch=>{ |
|||
//if(ch.checked==0) keys.push(ch.field!) |
|||
htmlRenderData.value.push(ch) |
|||
}) |
|||
|
|||
break |
|||
default: |
|||
//if(item.checked!=2) keys.push(item.field!) |
|||
section.push(item) |
|||
} |
|||
}) |
|||
|
|||
htmlRenderData.value.push(section) |
|||
return keys |
|||
} |
|||
|
|||
onMounted(async ()=>{ |
|||
await getPrintTemplate({ |
|||
"versionid":props.formVersion, |
|||
"formkey":props.formKey |
|||
}).then((resp)=>{ |
|||
printMode.value=resp.data.type |
|||
if(resp.data.formtemplatejson!=""){ |
|||
fieldTreeData.value = JSON.parse(resp.data.treedatajson) |
|||
} |
|||
if(resp.data.nodecheckedlist!=""){ |
|||
defaultCheckList=JSON.parse(resp.data.nodecheckedlist) |
|||
} |
|||
if(resp.data.pageconfigjson!=""){ |
|||
objPageConfig.value = JSON.parse(resp.data.pageconfigjson) |
|||
pageDret.value = objPageConfig.value.horizontal ?? "vtal" |
|||
pageSize.value = objPageConfig.value.pagesize ?? "A4" |
|||
} |
|||
}).catch((err)=>{ |
|||
ElMessage({ |
|||
message: "模板加载失败，使用默认模板"+err, |
|||
type: 'warning', |
|||
}) |
|||
}) |
|||
|
|||
/*********************为解决pageconfig字段的问题**************************/ |
|||
let newForm:boolean; |
|||
if(fieldTreeData.value.length==0){ |
|||
newForm=true; |
|||
} |
|||
props.state.formData.list.forEach((item:fieldTreeEx)=>{ |
|||
if(systemType.includes(item.type)) { |
|||
//需要记录这种type的真实字段 |
|||
objPageConfig.value[item.type as keyof PageConfig]=item.name??"" |
|||
} |
|||
//无论新表单还是已保存过的表单，都要处理objPageConfig字段的问题，但是fieldTreeData只有在新表单的时候需要初始化 |
|||
if(newForm){ |
|||
fieldTreeData.value.push(deepLoop(item)) |
|||
} |
|||
}) |
|||
/********************************************************************/ |
|||
treeLoaded.value=true |
|||
//printMode 没有内容说明是新打印表单，没有定制过模板 |
|||
|
|||
if(printMode.value=="html"){ |
|||
refreshPrintPage() |
|||
}else{ |
|||
printMode.value="html" |
|||
defaultCheckList=refreshPrintPage() |
|||
} |
|||
|
|||
}) |
|||
|
|||
const updateNodeData=(val:fieldTree,val2:boolean,val3:boolean)=>{ |
|||
if(val2 && val3){ |
|||
val.checked=0 |
|||
}else if(val2 || val3){ |
|||
val.checked=1 |
|||
}else{ |
|||
val.checked=2 |
|||
} |
|||
|
|||
refreshPrintPage() |
|||
} |
|||
|
|||
</script> |
|||
<template> |
|||
<el-tabs class="printpage" v-model="printMode" type="border-card" :tab-position="tabPosition" style="height: 100%"> |
|||
<el-tab-pane label="默认" name="html"> |
|||
<div style="display: grid; grid-template-columns: 1fr 4fr;"> |
|||
<div class="hiprintEpContainer" > |
|||
<el-button type="primary" @click="onSaveTreeData">保存模板</el-button> |
|||
<span>系统字段</span> |
|||
<el-checkbox-group v-model="objPageConfig.pagebrow" class="basic_fields"> |
|||
<el-checkbox label="创建人" value="founder" /> |
|||
<el-checkbox label="创建时间" value="founderTime" /> |
|||
<el-checkbox label="所属部门" value="deptOrg" /> |
|||
<el-checkbox label="表单编号" value="serialNumber" /> |
|||
</el-checkbox-group> |
|||
<el-checkbox style="margin-left: 22px;" v-model="objPageConfig.qrcode" label="表单二维码" /> |
|||
<span>业务字段</span> |
|||
<el-tree |
|||
v-if="treeLoaded" |
|||
ref="fieldTreeRef" |
|||
node-key="field" |
|||
:data="fieldTreeData" |
|||
:default-checked-keys="defaultCheckList" |
|||
empty-text="组件" |
|||
style="max-width: 300px" |
|||
:props="{label: 'name',children:'child'}" |
|||
show-checkbox |
|||
@check-change="updateNodeData" |
|||
> |
|||
<template #default="{ node, data }"> |
|||
<span>{{ data.name || '组件' }}</span> |
|||
</template> |
|||
</el-tree> |
|||
</div> |
|||
<div style="border: 1px solid black;margin: 5px;"> |
|||
<div style="display: flex;justify-content:center"> |
|||
<el-radio-group v-model="pageSize" fill="#6cf" @change="(val)=>updatePageConfig(val)"> |
|||
<el-radio-button label="A4" value="A4" /> |
|||
<el-radio-button label="A5" value="A5" /> |
|||
</el-radio-group> |
|||
|
|||
<el-radio-group v-model="pageDret" fill="#6cf" @change="(val)=>updatePageConfig(val)"> |
|||
<el-radio-button label="横向" value="htal" /> |
|||
<el-radio-button label="纵向" value="vtal" /> |
|||
</el-radio-group> |
|||
</div> |
|||
<div style="margin: 5px; border: 1px dashed black;overflow-y: scroll; scrollbar-width: none;" :style="{width: objPageConfig.width,height:objPageConfig.height}"> |
|||
<printHtmlRender :name="props.state.formOtherData.formName" :qrcode="'test'" :pageConfig="objPageConfig" :field-tree="htmlRenderData"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="定制表单" name="custom"> |
|||
<div style="width: 100%;"> |
|||
ssss |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.hiprintEpContainer,dropTable{ |
|||
border: 1px solid black; |
|||
margin: 5px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-wrap: wrap; |
|||
align-content: flex-start; |
|||
width: 300px; |
|||
button{ |
|||
margin-top: 5px; |
|||
margin-left: 10px; |
|||
} |
|||
>span{ |
|||
margin-left: 10px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.defaultContainer{ |
|||
border: 1px solid black; |
|||
margin: 5px; |
|||
text-align: center; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow-y: scroll; |
|||
} |
|||
.basic_fields{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
.el-checkbox{ |
|||
margin-left: 22px; |
|||
} |
|||
} |
|||
.el-tabs--left .el-tabs__header.is-left { |
|||
margin-right: 0; |
|||
} |
|||
</style> |
|||
<style> |
|||
.printpage{ |
|||
.el-tabs__item{ |
|||
width: 30px; |
|||
padding: 0; |
|||
height: 160px; |
|||
text-wrap: auto; |
|||
padding: 7px; |
|||
} |
|||
} |
|||
|
|||
.el-tabs--right .el-tabs__content, |
|||
.el-tabs--left .el-tabs__content { |
|||
height: 100%; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,251 @@ |
|||
<!-- |
|||
@ 作者: han2015 |
|||
@ 时间: 2025-03-24 15:32:40 |
|||
@ 备注: 打印模版设计 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted } from 'vue'; |
|||
import { ElMessage, ElMessageBox } from 'element-plus'; |
|||
import {getPrintTemplate,savePrintTemplate} from '@/api/DesignForm/requestapi' |
|||
import {hiprint,defaultElementTypeProvider} from "vue-plugin-hiprint" |
|||
import {aProvider,bProvider} from "./vue-plugin-provider.js" |
|||
|
|||
|
|||
const props = defineProps({ |
|||
appCont: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
formKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
groupKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
menuId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
appPageKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
formVersion: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
state: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
|
|||
let hiprintTemplate=ref() |
|||
|
|||
|
|||
onMounted(()=>{ |
|||
|
|||
hiprint.init({ |
|||
providers:[aProvider(),new defaultElementTypeProvider()], |
|||
}) |
|||
// 还原配置 |
|||
hiprint.setConfig() |
|||
// 替换配置 |
|||
hiprint.setConfig({ |
|||
movingDistance: 2.5, |
|||
text: { |
|||
supportOptions: [ |
|||
{ |
|||
name: 'styler', |
|||
hidden: true |
|||
}, |
|||
{ |
|||
name: 'formatter', |
|||
hidden: true |
|||
} |
|||
] |
|||
} |
|||
}) |
|||
|
|||
$('.hiprintEpContainer').empty() |
|||
hiprint.PrintElementTypeManager.build('.hiprintEpContainer', "aProviderModule"); //aProviderModule--bProviderModule |
|||
hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item")) |
|||
|
|||
hiprintTemplate.value= new hiprint.PrintTemplate({ |
|||
template: {}, |
|||
settingContainer:"#PrintElementOptionSetting", |
|||
}) |
|||
|
|||
hiprintTemplate.value.design("#hiprint-printTemplate",{grid:true}) |
|||
}) |
|||
|
|||
|
|||
// <div style="width: 100%;">业务组件</div> |
|||
// <div class="businessField" v-for="item in props.state.formData.list"> |
|||
// <a class="ep-draggable-item" tid="defaultModule.text" style> |
|||
// <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span> |
|||
// <p class="glyphicon-class">{{item.item.label}}</p> |
|||
// </a> |
|||
// </div> |
|||
|
|||
|
|||
</script> |
|||
<template> |
|||
<div> |
|||
<div class="hiprintEpContainer" ></div> |
|||
<div class="defaultContainer" > |
|||
<div style="width: 100%;">基础组件</div> |
|||
<div style="width: 100%;display: grid;grid-template-columns:repeat(3, 1fr)"> |
|||
<div class="drag_item_box"> |
|||
<a class="ep-draggable-item" tid="defaultModule.text" style> |
|||
<span class="glyphicon glyphicon-text-width" aria-hidden="true"></span> |
|||
<p class="glyphicon-class">文本</p> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="drag_item_box"> |
|||
<a class="ep-draggable-item" tid="defaultModule.image" style> |
|||
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> |
|||
<p class="glyphicon-class">图片</p> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="drag_item_box"> |
|||
<a class="ep-draggable-item" tid="defaultModule.longText"> |
|||
<span class="glyphicon glyphicon-subscript" aria-hidden="true"></span> |
|||
<p class="glyphicon-class">长文</p> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="drag_item_box"> |
|||
<a class="ep-draggable-item" tid="aProviderModule.table" style> |
|||
<span class="glyphicon glyphicon-th" aria-hidden="true"></span> |
|||
<p class="glyphicon-class">表格</p> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="drag_item_box" > |
|||
<a class="ep-draggable-item" tid="defaultModule.hline" style> |
|||
<span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span> |
|||
<p class="glyphicon-class">横线</p> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="drag_item_box"> |
|||
<a class="ep-draggable-item" tid="defaultModule.vline" style> |
|||
<span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span> |
|||
<p class="glyphicon-class">竖线</p> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="drag_item_box"> |
|||
<a class="ep-draggable-item" tid="defaultModule.rect"> |
|||
<span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> |
|||
<p class="glyphicon-class">矩形</p> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="drag_item_box"> |
|||
<a class="ep-draggable-item" tid="defaultModule.oval"> |
|||
<span class="glyphicon glyphicon-record" aria-hidden="true"></span> |
|||
<p class="glyphicon-class">椭圆</p> |
|||
</a> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin: 13px;"></div> |
|||
|
|||
<div id="PrintElementOptionSetting" class="PrintElementOptionSetting"></div> |
|||
|
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.hiprintEpContainer,dropTable, .PrintElementOptionSetting, .defaultContainer{ |
|||
margin: 5px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-content: flex-start; |
|||
width: 300px; |
|||
} |
|||
|
|||
// 拖拽 |
|||
.drag_item_box { |
|||
border: 1px solid #6f6f70; |
|||
border-radius: 5px; |
|||
height: 46px; |
|||
width: 90px; |
|||
margin: 2px; |
|||
text-align: center; |
|||
align-content: center; |
|||
} |
|||
|
|||
.drag_item_box > div { |
|||
height: 100%; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.drag_item_box > div > a { |
|||
text-align: center; |
|||
text-decoration-line: none; |
|||
} |
|||
|
|||
.drag_item_box > div > a > span { |
|||
font-size: 28px; |
|||
} |
|||
|
|||
.drag_item_box > div > a > p { |
|||
margin: 0; |
|||
} |
|||
|
|||
.drag_item_title { |
|||
font-size: 16px; |
|||
padding: 12px 6px 0 6px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
// 默认图片 |
|||
:deep(.hiprint-printElement-image-content) { |
|||
img { |
|||
content: url("https://docu.hxgk.group/images/2024_07/194a590ff63a017d7a7f55fe6bbb5895.png"); |
|||
} |
|||
} |
|||
|
|||
// 设计容器 |
|||
.card-design { |
|||
overflow: hidden; |
|||
overflow-x: auto; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
<style> |
|||
|
|||
.hiprint-printElement-type ul{ |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
} |
|||
|
|||
.businessField, .hiprint-printElement-type a{ |
|||
display: block; |
|||
height: 40px; |
|||
width: 138px; |
|||
margin: 5px; |
|||
border: 1px solid #6f6f70; |
|||
border-radius: 5px; |
|||
text-align: center; |
|||
align-content: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,424 @@ |
|||
/* eslint-disable */ |
|||
import {hiprint} from 'vue-plugin-hiprint' |
|||
|
|||
|
|||
// 自定义设计元素1
|
|||
export const aProvider = function (ops) { |
|||
var addElementTypes = function (context) { |
|||
context.removePrintElementTypes("aProviderModule"); |
|||
context.addPrintElementTypes( |
|||
"aProviderModule", |
|||
[ |
|||
new hiprint.PrintElementTypeGroup("业务表单", [ |
|||
{ |
|||
tid: 'aProviderModule.header', title: '单据表头', data: '单据表头', type: 'text', |
|||
options: { |
|||
testData: '单据表头', |
|||
height: 17, |
|||
fontSize: 16.5, |
|||
fontWeight: "700", |
|||
textAlign: "center", |
|||
hideTitle: true |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'aProviderModule.type', title: '单据类型', data: '单据类型', type: 'text', |
|||
options: { |
|||
testData: '单据类型', |
|||
height: 16, |
|||
fontSize: 15, |
|||
fontWeight: "700", |
|||
textAlign: "center", |
|||
hideTitle: true |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'aProviderModule.order', title: '订单编号', data: 'XS888888888', type: 'text', |
|||
options: { |
|||
field: 'orderId', |
|||
testData: 'XS888888888', |
|||
height: 16, |
|||
fontSize: 6.75, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'aProviderModule.date', title: '业务日期', data: '2020-01-01', type: 'text', |
|||
options: { |
|||
field: 'date', |
|||
testData: '2020-01-01', |
|||
height: 16, |
|||
fontSize: 6.75, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'aProviderModule.barcode', title: '条形码', data: 'XS888888888', type: 'text', |
|||
options: { |
|||
testData: 'XS888888888', |
|||
height: 32, |
|||
fontSize: 12, |
|||
lineHeight: 18, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle", |
|||
textType: "barcode" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'aProviderModule.qrcode', title: '二维码', data: 'XS888888888', type: 'text', |
|||
options: { |
|||
testData: 'XS888888888', |
|||
height: 32, |
|||
fontSize: 12, |
|||
lineHeight: 18, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle", |
|||
textType: "qrcode" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'aProviderModule.platform', title: '平台名称', data: '平台名称', type: 'text', |
|||
options: { |
|||
testData: '平台名称', |
|||
height: 17, |
|||
fontSize: 16.5, |
|||
fontWeight: "700", |
|||
textAlign: "center", |
|||
hideTitle: true |
|||
} |
|||
}, |
|||
{tid: 'aProviderModule.logo', title: 'Logo', data: '', type: 'image'}, |
|||
{ |
|||
tid: 'aProviderModule.creater', title: '制单人', data: '李四', type: 'text', |
|||
options: { |
|||
field: 'creater', |
|||
testData: '李四', |
|||
height: 16, |
|||
fontSize: 6.75, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'aProviderModule.printDate', title: '打印时间', data: '2022-01-01 09:00', type: 'text', |
|||
options: { |
|||
field: 'printDate', |
|||
testData: '2022-01-01 09:00', |
|||
height: 16, |
|||
fontSize: 6.75, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'aProviderModule.signer', title: '库管签字', data: '', type: 'text', |
|||
options: { |
|||
title: '库管签字：', |
|||
height: 16, |
|||
fontSize: 6.75, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'aProviderModule.table2', title: '定制表格', |
|||
type: 'table', |
|||
options: { |
|||
field: 'table2', |
|||
fields: [ |
|||
{text: '名称', field: 'NAME'}, |
|||
{text: '数量', field: 'SL'}, |
|||
{text: '规格', field: 'GG'}, |
|||
{text: '条码', field: 'TM'}, |
|||
{text: '单价', field: 'DJ'}, |
|||
{text: '金额', field: 'JE'}, |
|||
{text: '备注', field: 'DETAIL'}, |
|||
], |
|||
}, |
|||
editable: true, |
|||
columnDisplayEditable: true,//列显示是否能编辑
|
|||
columnDisplayIndexEditable: true,//列顺序显示是否能编辑
|
|||
columnTitleEditable: true,//列标题是否能编辑
|
|||
columnResizable: true, //列宽是否能调整
|
|||
columnAlignEditable: true,//列对齐是否调整
|
|||
columns: [ |
|||
[ |
|||
{title: '名称', align: 'center', field: 'NAME', width: 100}, |
|||
{title: '数量', align: 'center', field: 'SL', width: 100}, |
|||
{title: '条码', align: 'center', field: 'TM', width: 100,checked: false}, |
|||
{title: '规格', align: 'center', field: 'GG', width: 100}, |
|||
{title: '单价', align: 'center', field: 'DJ', width: 100}, |
|||
{title: '金额', align: 'center', field: 'JE', width: 100}, |
|||
{title: '备注', align: 'center', field: 'DETAIL', width: 100}, |
|||
] |
|||
], |
|||
footerFormatter: function (options, rows, data, currentPageGridRowsData) { |
|||
if (data && data['totalCap']) { |
|||
return `<td style="padding:0 10px" colspan="100">${'应收金额大写: ' + data['totalCap']}</td>` |
|||
} |
|||
return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>' |
|||
}, |
|||
}, |
|||
{ |
|||
tid: 'aProviderModule.table', title: '订单数据', |
|||
type: 'table', |
|||
options: { |
|||
//field: 'table',
|
|||
// tableHeaderRepeat: 'first',
|
|||
// tableFooterRepeat: 'last',
|
|||
// fields: [
|
|||
// {text: '名称'},
|
|||
// {text: '数量'},
|
|||
// {text: '规格'},
|
|||
// {text: '条码'},
|
|||
// {text: '单价'},
|
|||
// {text: '金额'},
|
|||
// ],
|
|||
}, |
|||
editable: true, |
|||
columnDisplayEditable: true,//列显示是否能编辑
|
|||
columnDisplayIndexEditable: true,//列顺序显示是否能编辑
|
|||
columnTitleEditable: true,//列标题是否能编辑
|
|||
columnResizable: true, //列宽是否能调整
|
|||
columnAlignEditable: true,//列对齐是否调整
|
|||
isEnableEditField: true, //编辑字段
|
|||
isEnableContextMenu: true, //开启右键菜单 默认true
|
|||
isEnableInsertRow: true, //插入行
|
|||
isEnableDeleteRow: true, //删除行
|
|||
isEnableInsertColumn: true, //插入列
|
|||
isEnableDeleteColumn: true, //删除列
|
|||
isEnableMergeCell: true, //合并单元格
|
|||
columns: [ |
|||
[ |
|||
{ align: 'center', width: 150}, |
|||
{ align: 'center', width: 80}, |
|||
{ align: 'center', width: 80}, |
|||
{ align: 'center', width: 100}, |
|||
{ align: 'center', width: 100}, |
|||
{ align: 'center', width: 100}, |
|||
], |
|||
] |
|||
}, |
|||
{tid: 'aProviderModule.customText', title: '文本', customText: '自定义文本', custom: true, type: 'text'}, |
|||
{ |
|||
tid: 'aProviderModule.longText', title: '长文本', type: 'longText', options: { |
|||
field: 'test.longText', |
|||
width: 200, |
|||
testData: '长文本分页/不分页测试' |
|||
}, |
|||
} |
|||
]) |
|||
] |
|||
); |
|||
}; |
|||
return { |
|||
addElementTypes: addElementTypes |
|||
}; |
|||
}; |
|||
|
|||
// 自定义设计元素2
|
|||
export const bProvider = function (ops) { |
|||
var addElementTypes = function (context) { |
|||
context.removePrintElementTypes("bProviderModule"); |
|||
context.addPrintElementTypes( |
|||
"bProviderModule", |
|||
[ |
|||
new hiprint.PrintElementTypeGroup("常规", [ |
|||
{ |
|||
tid: 'bProviderModule.header', title: '单据表头', data: '单据表头', type: 'text', |
|||
options: { |
|||
testData: '单据表头', |
|||
height: 17, |
|||
fontSize: 16.5, |
|||
fontWeight: "700", |
|||
textAlign: "center", |
|||
hideTitle: true |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'bProviderModule.type', title: '单据类型', data: '单据类型', type: 'text', |
|||
options: { |
|||
testData: '单据类型', |
|||
height: 16, |
|||
fontSize: 15, |
|||
fontWeight: "700", |
|||
textAlign: "center", |
|||
hideTitle: true |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'bProviderModule.order', title: '订单编号', data: 'XS888888888', type: 'text', |
|||
options: { |
|||
field: 'orderId', |
|||
testData: 'XS888888888', |
|||
height: 16, |
|||
fontSize: 6.75, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'bProviderModule.date', title: '业务日期', data: '2020-01-01', type: 'text', |
|||
options: { |
|||
field: 'date', |
|||
testData: '2020-01-01', |
|||
height: 16, |
|||
fontSize: 6.75, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'bProviderModule.barcode', title: '条形码', data: 'XS888888888', type: 'text', |
|||
options: { |
|||
testData: 'XS888888888', |
|||
height: 32, |
|||
fontSize: 12, |
|||
lineHeight: 18, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle", |
|||
textType: "barcode" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'bProviderModule.qrcode', title: '二维码', data: 'XS888888888', type: 'text', |
|||
options: { |
|||
testData: 'XS888888888', |
|||
height: 32, |
|||
fontSize: 12, |
|||
lineHeight: 18, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle", |
|||
textType: "qrcode" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'bProviderModule.platform', title: '平台名称', data: '平台名称', type: 'text', |
|||
options: { |
|||
testData: '平台名称', |
|||
height: 17, |
|||
fontSize: 16.5, |
|||
fontWeight: "700", |
|||
textAlign: "center", |
|||
hideTitle: true |
|||
} |
|||
}, |
|||
{tid: 'bProviderModule.image', title: 'Logo', data: '', type: 'image'}, |
|||
]), |
|||
new hiprint.PrintElementTypeGroup("客户", [ |
|||
{ |
|||
tid: 'bProviderModule.khname', title: '客户名称', data: '高级客户', type: 'text', |
|||
options: { |
|||
field: 'name', |
|||
testData: '高级客户', |
|||
height: 16, |
|||
fontSize: 6.75, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle" |
|||
} |
|||
}, |
|||
{ |
|||
tid: 'bProviderModule.tel', title: '客户电话', data: '18888888888', type: 'text', |
|||
options: { |
|||
field: 'tel', |
|||
testData: '18888888888', |
|||
height: 16, |
|||
fontSize: 6.75, |
|||
fontWeight: "700", |
|||
textAlign: "left", |
|||
textContentVerticalAlign: "middle" |
|||
} |
|||
}, |
|||
]), |
|||
new hiprint.PrintElementTypeGroup("表格/其他", [ |
|||
{ |
|||
tid: 'bProviderModule.table', title: '订单数据', |
|||
type: 'table', |
|||
options: { |
|||
field: 'table', |
|||
fields: [ |
|||
{text: '名称', field: 'NAME'}, |
|||
{text: '数量', field: 'SL'}, |
|||
{text: '规格', field: 'GG'}, |
|||
{text: '条码', field: 'TM'}, |
|||
{text: '单价', field: 'DJ'}, |
|||
{text: '金额', field: 'JE'}, |
|||
{text: '备注', field: 'DETAIL'}, |
|||
], |
|||
}, |
|||
editable: true, |
|||
columnDisplayEditable: true,//列显示是否能编辑
|
|||
columnDisplayIndexEditable: true,//列顺序显示是否能编辑
|
|||
columnTitleEditable: true,//列标题是否能编辑
|
|||
columnResizable: true, //列宽是否能调整
|
|||
columnAlignEditable: true,//列对齐是否调整
|
|||
columns: [ |
|||
[ |
|||
{title: '名称', align: 'center', field: 'NAME', width: 100}, |
|||
{title: '数量', align: 'center', field: 'SL', width: 100}, |
|||
{title: '条码', align: 'center', field: 'TM', width: 100}, |
|||
{title: '规格', align: 'center', field: 'GG', width: 100}, |
|||
{title: '单价', align: 'center', field: 'DJ', width: 100}, |
|||
{title: '金额', align: 'center', field: 'JE', width: 100}, |
|||
{title: '备注', align: 'center', field: 'DETAIL', width: 100}, |
|||
] |
|||
], |
|||
footerFormatter: function (options, rows, data, currentPageGridRowsData) { |
|||
if (data && data['totalCap']) { |
|||
return `<td style="padding:0 10px" colspan="100">${'应收金额大写: ' + data['totalCap']}</td>` |
|||
} |
|||
return '<td style="padding:0 10px" colspan="100">应收金额大写: </td>' |
|||
}, |
|||
}, |
|||
{tid: 'bProviderModule.customText', title: '文本', customText: '自定义文本', custom: true, type: 'text'}, |
|||
{ |
|||
tid: 'bProviderModule.longText', title: '长文本', type: 'longText', options: { |
|||
field: 'test.longText', |
|||
width: 200, |
|||
testData: '长文本分页/不分页测试' |
|||
}, |
|||
} |
|||
]), |
|||
new hiprint.PrintElementTypeGroup("辅助", [ |
|||
{ |
|||
tid: 'bProviderModule.hline', |
|||
title: '横线', |
|||
type: 'hline' |
|||
}, |
|||
{ |
|||
tid: 'bProviderModule.vline', |
|||
title: '竖线', |
|||
type: 'vline' |
|||
}, |
|||
{ |
|||
tid: 'bProviderModule.rect', |
|||
title: '矩形', |
|||
type: 'rect' |
|||
}, |
|||
{ |
|||
tid: 'bProviderModule.oval', |
|||
title: '椭圆', |
|||
type: 'oval' |
|||
} |
|||
]) |
|||
] |
|||
); |
|||
}; |
|||
return { |
|||
addElementTypes: addElementTypes |
|||
}; |
|||
}; |
|||
Loading…
Reference in new issue