update print page

This commit is contained in:
lb 2023-10-08 10:18:08 +08:00
parent b9e39dacf1
commit 57960ff8bf
3 changed files with 630 additions and 231 deletions

View File

@ -1,14 +1,16 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" /> <meta name="renderer" content="webkit" />
<meta <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
name="viewport" <link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css">
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= webpackConfig.name %></title> <title>
<%= webpackConfig.name %>
</title>
<!--[if lt IE 11]> <!--[if lt IE 11]>
<script> <script>
window.location.href = 'html/ie.html'; window.location.href = 'html/ie.html';
@ -212,4 +214,5 @@
</div> </div>
</div> </div>
</body> </body>
</html> </html>

339
public/print-lock.css Normal file
View File

@ -0,0 +1,339 @@
@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;
}
.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(:last-child) {
border-right: 1px solid;
}
/*.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;
}

View File

@ -11,14 +11,26 @@
<NavMenu @action="handleAction" :menu="menu" /> <NavMenu @action="handleAction" :menu="menu" />
</section> </section>
<section id="main-panel"> <section id="main-panel">
<section id="left-panel"></section> <section id="left-panel">
<h2>组件</h2>
<div id="components"></div>
</section>
<section id="edit-panel"></section> <section id="edit-panel"></section>
<section id="right-panel"></section> <section id="right-panel">
<h2>设置</h2>
<div id="settings"></div>
</section>
</section> </section>
</div> </div>
</template> </template>
<script> <script>
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
hiprint.init({
providers: [defaultElementTypeProvider()],
});
const NavSelector = { const NavSelector = {
name: 'NavSelector', name: 'NavSelector',
props: ['name', 'options'], props: ['name', 'options'],
@ -29,7 +41,8 @@ const NavSelector = {
}, },
methods: { methods: {
handleOpen() { handleOpen() {
this.$emit('closeOtherMenu', this) // this.$emit('closeOtherMenu', this)
// this.$emit('hover', this)
this.open = !this.open; this.open = !this.open;
}, },
handleClickItem(e) { handleClickItem(e) {
@ -42,7 +55,7 @@ const NavSelector = {
}, },
render: function (h) { render: function (h) {
return ( return (
<li class={'nav-selector__item'} onClick={this.handleOpen}> <li class={'nav-selector__item'} onMouseenter={this.handleOpen} onMouseleave={this.handleOpen}>
<span class={'nav-selector__name'}>{this.name}</span> <span class={'nav-selector__name'}>{this.name}</span>
<ul class={`${this.open ? '' : 'hidden'} nav-selector__submenu-items`}> <ul class={`${this.open ? '' : 'hidden'} nav-selector__submenu-items`}>
{this.options.map((item) => { {this.options.map((item) => {
@ -90,6 +103,7 @@ export default {
props: {}, props: {},
data() { data() {
return { return {
hiprintTemplate: null,
menu: [ menu: [
{ {
name: '菜单', name: '菜单',
@ -103,7 +117,24 @@ export default {
}; };
}, },
computed: {}, computed: {},
mounted() {
this.loadSideBar();
this.loadDesigner();
},
methods: { methods: {
loadDesigner() {
$("#edit-panel").empty();
this.hiprintTemplate = new hiprint.PrintTemplate({
settingContainer: "#settings",
});
this.hiprintTemplate.design("#edit-panel");
},
loadSideBar() {
this.loadProviders();
this.loadSettings();
},
loadProviders() { },
loadSettings() { },
handleAction(name) { handleAction(name) {
console.log('name', name) console.log('name', name)
} }
@ -122,7 +153,7 @@ export default {
height: 1px; height: 1px;
flex: 1; flex: 1;
display: grid; display: grid;
grid-template-columns: 200px 1fr 200px; grid-template-columns: 1fr 3fr 1fr;
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
grid-template-areas: 'left main right'; grid-template-areas: 'left main right';
} }
@ -135,41 +166,66 @@ export default {
>ul { >ul {
// background: #32aa32; // background: #32aa32;
list-style: none;
padding: 6px;
margin: 0;
display: flex;
li {
padding: 0; padding: 0;
} list-style: none;
margin: 0;
margin-left: 10px;
display: flex;
} }
} }
#left-panel { #left-panel {
overflow: auto;
grid-area: left; grid-area: left;
background: #f1f1f1; background: #fff;
h2 {
margin: 0;
font-weight: 400;
padding: 4px 20px;
border-bottom: 1px solid #ccc;
background: #ccc;
}
} }
#edit-panel { #edit-panel {
padding: 20px;
overflow: auto;
grid-area: main; grid-area: main;
background: #e1e1e1; justify-items: center;
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
} }
#right-panel { #right-panel {
overflow: auto;
grid-area: right; grid-area: right;
background: #f1f1f1; background: #fff;
h2 {
margin: 0;
font-weight: 400;
padding: 4px 12px;
border-bottom: 1px solid #ccc;
background: #ccc;
}
} }
</style> </style>
<style lang="scss"> <style lang="scss">
// //
.nav-selector__item { .nav-selector__item {
font-size: 18px;
letter-spacing: 1px;
// font-weight: 600;
padding: 6px 12px;
line-height: 1.25;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
&:not(:last-child) { &:hover {
margin-right: 12px; background: #f1f1f1;
} }
ul { ul {
@ -177,9 +233,9 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
top: 128%; top: 100%;
min-width: 128px; min-width: 128px;
left: -6px; left: 0px;
background: #fff; background: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
// border-radius: 4px; // border-radius: 4px;
@ -188,8 +244,9 @@ export default {
z-index: 100; z-index: 100;
li { li {
padding: 2px 6px; padding: 6px 12px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #f1f1f1; background: #f1f1f1;
} }