Merge branch 'label' of gitee.com:three-make-money/temu-plugin into master
Signed-off-by: juanmao2009 <499672082@qq.com>
This commit is contained in:
juanmao2009
Gitee
@@ -22,6 +22,7 @@
|
|||||||
"vue": "^2.6.14",
|
"vue": "^2.6.14",
|
||||||
"vue-cropper": "^0.6.4",
|
"vue-cropper": "^0.6.4",
|
||||||
"vue-json-excel": "^0.3.0",
|
"vue-json-excel": "^0.3.0",
|
||||||
|
"vue-plugin-hiprint": "^0.0.56",
|
||||||
"vue-qr": "^4.0.9",
|
"vue-qr": "^4.0.9",
|
||||||
"vue-router": "^3.2.0",
|
"vue-router": "^3.2.0",
|
||||||
"vuex": "^3.4.0",
|
"vuex": "^3.4.0",
|
||||||
|
|||||||
349
public/css/print-lock.css
Normal file
349
public/css/print-lock.css
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
@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: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;
|
||||||
|
}
|
||||||
@@ -5,6 +5,7 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>css/print-lock.css">
|
||||||
<title>TEMU助手</title>
|
<title>TEMU助手</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -10,6 +10,14 @@
|
|||||||
url('https://at.alicdn.com/t/font_1995974_ihzpmuv4lpk.svg#iconfont') format('svg');
|
url('https://at.alicdn.com/t/font_1995974_ihzpmuv4lpk.svg#iconfont') format('svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont";
|
||||||
|
src: url('https://at.alicdn.com/t/c/font_4680344_rxl7gevvsys.woff2?t=1725970465332') format('woff2'),
|
||||||
|
url('https://at.alicdn.com/t/c/font_4680344_rxl7gevvsys.woff?t=1725970465332') format('woff'),
|
||||||
|
url('https://at.alicdn.com/t/c/font_4680344_rxl7gevvsys.ttf?t=1725970465332') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
font-family: "iconfont" !important;
|
font-family: "iconfont" !important;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
@@ -393,7 +401,7 @@ img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-pagination {
|
.el-pagination {
|
||||||
margin-top: 40px;
|
margin-top: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -486,4 +494,13 @@ img {
|
|||||||
|
|
||||||
.el-table__fixed-body-wrapper .el-table__body {
|
.el-table__fixed-body-wrapper .el-table__body {
|
||||||
padding-bottom: 6px; // 6px为横向滚动条高度
|
padding-bottom: 6px; // 6px为横向滚动条高度
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hiprint_rul_wrapper {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hiprint-printPanel {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|||||||
349
src/assets/css/print-lock.css
Normal file
349
src/assets/css/print-lock.css
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
@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: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;
|
||||||
|
}
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
<el-dialog custom-class="ai-dialog" v-on="$listeners" v-bind="$attrs" :visible.sync="dialog">
|
<el-dialog custom-class="ai-dialog" v-on="$listeners" v-bind="$attrs" :visible.sync="dialog">
|
||||||
<div class="ai-dialog__header fill" slot="title" v-text="title"/>
|
<div class="ai-dialog__header fill" slot="title" v-text="title"/>
|
||||||
<div class="ai-dialog__content">
|
<div class="ai-dialog__content">
|
||||||
<div class="ai-dialog__content--wrapper pad-r8">
|
<div class="ai-dialog__content--wrapper">
|
||||||
<slot/>
|
<slot/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -69,13 +69,13 @@ export default {
|
|||||||
|
|
||||||
.ai-dialog__content {
|
.ai-dialog__content {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 0px;
|
||||||
max-height: 500px;
|
max-height: 550px;
|
||||||
|
|
||||||
.ai-dialog__content--wrapper {
|
.ai-dialog__content--wrapper {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -28,7 +28,8 @@
|
|||||||
background: url("../assets/images/empty.svg") no-repeat center;
|
background: url("../assets/images/empty.svg") no-repeat center;
|
||||||
background-size: 120px 120px;
|
background-size: 120px 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
margin: 48px auto 0;
|
margin: 0 auto;
|
||||||
|
padding-top: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
498
src/components/print/Print.vue
Normal file
498
src/components/print/Print.vue
Normal file
@@ -0,0 +1,498 @@
|
|||||||
|
<template>
|
||||||
|
<div class="print">
|
||||||
|
<div class="print-wrapper">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-wrapper">
|
||||||
|
<div class="title">基础元素</div>
|
||||||
|
<div class="left-item__wrapper">
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.text">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>文本</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="false" class="ep-draggable-item item" tid="defaultModule.image">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>图片</span>
|
||||||
|
</div>
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.longText">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>长文</span>
|
||||||
|
</div>
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.table">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>表格</span>
|
||||||
|
</div>
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.html">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>html</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title">辅助元素</div>
|
||||||
|
<div class="left-item__wrapper">
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.hline">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>横线</span>
|
||||||
|
</div>
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.vline">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>竖线</span>
|
||||||
|
</div>
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.rect">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>矩形</span>
|
||||||
|
</div>
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.oval">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>圆形</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title">常用元素</div>
|
||||||
|
<div class="left-item__wrapper" id="custom-provider">
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.hline">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>横线</span>
|
||||||
|
</div>
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.vline">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>竖线</span>
|
||||||
|
</div>
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.rect">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>矩形</span>
|
||||||
|
</div>
|
||||||
|
<div class="ep-draggable-item item" tid="defaultModule.oval">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span>圆形</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="center">
|
||||||
|
<div class="center-header">
|
||||||
|
<div class="paper">
|
||||||
|
<el-button-group size="small">
|
||||||
|
<template v-for="(value, type) in paperTypes">
|
||||||
|
<el-button size="small" :type="curPaperType === type ? 'primary' : ''" @click="setPaper(type,value)" :key="type">
|
||||||
|
{{ type }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<el-popover v-model="paperPopVisible" placement="top" :width="260" trigger="click">
|
||||||
|
<div>
|
||||||
|
<div style="font-size: 16px; font-weight: bold">设置纸张宽高(mm)</div>
|
||||||
|
<div style="margin-top: 10px">
|
||||||
|
<el-input size="small" style="margin-bottom: 10px" v-model="paperWidth" type="number" placeholder="宽(mm)" />
|
||||||
|
<el-input size="small" v-model="paperHeight" type="number" placeholder="高(mm)" />
|
||||||
|
</div>
|
||||||
|
<el-button style="margin-top: 12px" size="small" @click.stop="setPaperOther">确定</el-button>
|
||||||
|
</div>
|
||||||
|
<el-button slot="reference" size="small" :type="'other' == curPaperType ? 'primary' : ''">自定义纸张</el-button>
|
||||||
|
</el-popover>
|
||||||
|
</el-button-group>
|
||||||
|
<!-- <div class="scale">
|
||||||
|
<el-button @click="changeScale(false)" size="small">
|
||||||
|
<el-icon size="18"><ZoomOut /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
<div style="margin: 0 4px; width: 40px">{{ (scaleValue * 100).toFixed(0) }}%</div>
|
||||||
|
<el-button @click="changeScale(true)" size="small">
|
||||||
|
<el-icon size="18"><ZoomIn /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="center-wrapper">
|
||||||
|
<div id="hiprint-printTemplate"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div id="PrintElementOptionSetting"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ai-dialog :visible.sync="isShowPreview" title="预览" width="1200" customFooter>
|
||||||
|
<div class="print-viewer" v-html="html"></div>
|
||||||
|
<div class="dialog-footer" slot="footer">
|
||||||
|
<el-button @click="isShowPreview = false">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</ai-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { hiprint, defaultElementTypeProvider, disAutoConnect } from 'vue-plugin-hiprint'
|
||||||
|
import { newHiprintPrintTemplate } from '@/utils/template-helper'
|
||||||
|
import template from './template'
|
||||||
|
import printData from './printData'
|
||||||
|
import { customProvider } from './customProvider'
|
||||||
|
|
||||||
|
disAutoConnect()
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
html: '',
|
||||||
|
isShowPreview: false,
|
||||||
|
hiprintTemplate: null,
|
||||||
|
curPaper: {
|
||||||
|
type: 'other',
|
||||||
|
width: 200,
|
||||||
|
height: 200
|
||||||
|
},
|
||||||
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
paperPopVisible: false,
|
||||||
|
paperWidth: '80',
|
||||||
|
paperHeight: '60'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
curPaperType() {
|
||||||
|
let type = 'other'
|
||||||
|
let types = this.paperTypes
|
||||||
|
for (const key in types) {
|
||||||
|
let item = types[key]
|
||||||
|
let {width, height} = this.curPaper
|
||||||
|
if (item.width === width && item.height === height) {
|
||||||
|
type = key
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return type
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
hiprint.init({
|
||||||
|
providers: [defaultElementTypeProvider(), customProvider({})]
|
||||||
|
})
|
||||||
|
|
||||||
|
this.buildLeftElement()
|
||||||
|
this.buildDesigner()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
buildLeftElement() {
|
||||||
|
hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'))
|
||||||
|
$('#custom-provider').empty()
|
||||||
|
hiprint.PrintElementTypeManager.build($('#custom-provider'), 'customProvider')
|
||||||
|
},
|
||||||
|
|
||||||
|
buildDesigner() {
|
||||||
|
$('#hiprint-printTemplate').empty()
|
||||||
|
console.log(template)
|
||||||
|
this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
|
||||||
|
template: template,
|
||||||
|
settingContainer: '#PrintElementOptionSetting',
|
||||||
|
onImageChooseClick: (target) => {
|
||||||
|
let input = document.createElement('input')
|
||||||
|
input.setAttribute('type', 'file')
|
||||||
|
input.click()
|
||||||
|
input.onchange = function () {
|
||||||
|
var file = this.files[0]
|
||||||
|
var reader = new FileReader()
|
||||||
|
if (file) {
|
||||||
|
var reader = new FileReader()
|
||||||
|
reader.readAsDataURL(file)
|
||||||
|
reader.onloadend = function () {
|
||||||
|
target.refresh(reader.result)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input.remove()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.hiprintTemplate.design('#hiprint-printTemplate', {
|
||||||
|
grid: true
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
setPaperOther () {
|
||||||
|
let value = {}
|
||||||
|
value.width = this.paperWidth
|
||||||
|
value.height = this.paperHeight
|
||||||
|
this.setPaper('other', value)
|
||||||
|
this.paperPopVisible = false
|
||||||
|
},
|
||||||
|
|
||||||
|
setPaper(type, value) {
|
||||||
|
try {
|
||||||
|
if (Object.keys(this.paperTypes).includes(type)) {
|
||||||
|
this.curPaper = {type: type, width: value.width, height: value.height}
|
||||||
|
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}`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
print() {
|
||||||
|
let options = { leftOffset: 0, topOffset: 0 }
|
||||||
|
let ext = {
|
||||||
|
callback: () => {
|
||||||
|
console.log('浏览器打印窗口已打开')
|
||||||
|
},
|
||||||
|
|
||||||
|
styleHandler: () => {
|
||||||
|
return '<style></style>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const list = this.labels
|
||||||
|
this.hiprintTemplate.print(list)
|
||||||
|
},
|
||||||
|
|
||||||
|
elementToString(el) {
|
||||||
|
const node = document.createElement('div')
|
||||||
|
node.appendChild(el)
|
||||||
|
|
||||||
|
return node.innerHTML
|
||||||
|
},
|
||||||
|
|
||||||
|
savePdf() {
|
||||||
|
const list = this.labels
|
||||||
|
this.hiprintTemplate.toPdf(printData, '测试导出pdf')
|
||||||
|
},
|
||||||
|
|
||||||
|
getHtml() {
|
||||||
|
const list = this.labels
|
||||||
|
this.html = this.elementToString(this.hiprintTemplate.getHtml(list)[0])
|
||||||
|
|
||||||
|
console.log(this.html)
|
||||||
|
|
||||||
|
this.isShowPreview = true
|
||||||
|
},
|
||||||
|
|
||||||
|
clearPaper() {
|
||||||
|
this.hiprintTemplate.clear()
|
||||||
|
},
|
||||||
|
|
||||||
|
exportJson() {
|
||||||
|
return this.hiprintTemplate.getJson()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.print {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.print-wrapper {
|
||||||
|
display: flex;
|
||||||
|
height: calc(100vh - 180px);
|
||||||
|
|
||||||
|
::v-deep(.prop-tab-items) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
.prop-tab-item {
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
.tab-title {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.hiprint-option-items .hiprint-option-item-label) {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.hiprint-printPanel) {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
// margin: 0 auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.minicolors) {
|
||||||
|
flex: 1;
|
||||||
|
width: inherit;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.hiprint-option-item-field) {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.hiprint-option-item-row) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.prop-tab-items) {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.hiprint-option-items),
|
||||||
|
::v-deep(.prop-tabs) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 350px;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 14px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-item__wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
padding: 10px 0;
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:nth-of-type(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(ul) {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:nth-of-type(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 10px;
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
.center-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px 20px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-header {
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
.paper {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scale {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.print-viewer {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
66
src/components/print/customProvider.js
Normal file
66
src/components/print/customProvider.js
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import { hiprint } from 'vue-plugin-hiprint'
|
||||||
|
export const customProvider = function (options) {
|
||||||
|
var addElementTypes = function (context) {
|
||||||
|
context.removePrintElementTypes('customProvider')
|
||||||
|
context.addPrintElementTypes('customProvider', [
|
||||||
|
new hiprint.PrintElementTypeGroup('', [
|
||||||
|
{
|
||||||
|
tid: 'providerModule1.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',
|
||||||
|
hideTitle: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tid: 'providerModule1.barcode',
|
||||||
|
title: '条形码',
|
||||||
|
data: 'XS888888888',
|
||||||
|
type: 'text',
|
||||||
|
options: {
|
||||||
|
field: 'barcode',
|
||||||
|
testData: 'XS888888888',
|
||||||
|
height: 32,
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 18,
|
||||||
|
textAlign: 'left',
|
||||||
|
textType: 'barcode',
|
||||||
|
hideTitle: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tid: 'providerModule1.qrcode',
|
||||||
|
title: '二维码',
|
||||||
|
data: 'XS888888888',
|
||||||
|
type: 'text',
|
||||||
|
options: {
|
||||||
|
field: '',
|
||||||
|
testData: '',
|
||||||
|
height: 32,
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: 18,
|
||||||
|
textType: 'qrcode',
|
||||||
|
hideTitle: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
tid: 'providerModule1.image',
|
||||||
|
title: 'Logo',
|
||||||
|
data: 'https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200',
|
||||||
|
type: 'image'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
])
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
addElementTypes: addElementTypes
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/components/print/printData.js
Normal file
10
src/components/print/printData.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
export default {
|
||||||
|
name: '黄磊',
|
||||||
|
password: '12346',
|
||||||
|
barcode: 'XS888888888',
|
||||||
|
table: [
|
||||||
|
{ id: '1', name: '王小可', gender: '男', count: '120', amount: '9089元' },
|
||||||
|
{ id: '2', name: '梦之遥', gender: '女', count: '20', amount: '89元' },
|
||||||
|
{ id: '3', name: '梦之遥', gender: '女', count: '720', amount: '29089元' }
|
||||||
|
]
|
||||||
|
}
|
||||||
1200
src/components/print/template.js
Normal file
1200
src/components/print/template.js
Normal file
File diff suppressed because one or more lines are too long
@@ -11,8 +11,7 @@
|
|||||||
"48": "icons/48.png",
|
"48": "icons/48.png",
|
||||||
"128": "icons/128.png"
|
"128": "icons/128.png"
|
||||||
},
|
},
|
||||||
"action": {
|
"action": {},
|
||||||
},
|
|
||||||
"host_permissions": [
|
"host_permissions": [
|
||||||
"*://*.jjcp52.com/",
|
"*://*.jjcp52.com/",
|
||||||
"*://*.kuajingmaihuo.com/",
|
"*://*.kuajingmaihuo.com/",
|
||||||
@@ -38,43 +37,53 @@
|
|||||||
"fileSystemProvider"
|
"fileSystemProvider"
|
||||||
],
|
],
|
||||||
"declarative_net_request": {
|
"declarative_net_request": {
|
||||||
"rule_resources": [{
|
"rule_resources": [
|
||||||
"id": "1",
|
{
|
||||||
"enabled": true,
|
"id": "1",
|
||||||
"path": "rules_1.json"
|
"enabled": true,
|
||||||
},{
|
"path": "rules_1.json"
|
||||||
"id": "3",
|
},
|
||||||
"enabled": true,
|
{
|
||||||
"path": "rules_3.json"
|
"id": "3",
|
||||||
},{
|
"enabled": true,
|
||||||
"id": "5",
|
"path": "rules_3.json"
|
||||||
"enabled": true,
|
},
|
||||||
"path": "rules_5.json"
|
{
|
||||||
},{
|
"id": "5",
|
||||||
"id": "6",
|
"enabled": true,
|
||||||
"enabled": true,
|
"path": "rules_5.json"
|
||||||
"path": "rules_6.json"
|
},
|
||||||
},{
|
{
|
||||||
"id": "7",
|
"id": "6",
|
||||||
"enabled": true,
|
"enabled": true,
|
||||||
"path": "rules_7.json"
|
"path": "rules_6.json"
|
||||||
},{
|
},
|
||||||
"id": "8",
|
{
|
||||||
"enabled": true,
|
"id": "7",
|
||||||
"path": "rules_8.json"
|
"enabled": true,
|
||||||
},{
|
"path": "rules_7.json"
|
||||||
"id": "9",
|
},
|
||||||
"enabled": true,
|
{
|
||||||
"path": "rules_9.json"
|
"id": "8",
|
||||||
},{
|
"enabled": true,
|
||||||
"id": "10",
|
"path": "rules_8.json"
|
||||||
"enabled": true,
|
},
|
||||||
"path": "rules_10.json"
|
{
|
||||||
},{
|
"id": "9",
|
||||||
"id": "11",
|
"enabled": true,
|
||||||
"enabled": true,
|
"path": "rules_9.json"
|
||||||
"path": "rules_11.json"
|
},
|
||||||
}]
|
{
|
||||||
|
"id": "10",
|
||||||
|
"enabled": true,
|
||||||
|
"path": "rules_10.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "11",
|
||||||
|
"enabled": true,
|
||||||
|
"path": "rules_11.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"content_scripts": [
|
"content_scripts": [
|
||||||
{
|
{
|
||||||
@@ -98,12 +107,24 @@
|
|||||||
],
|
],
|
||||||
"web_accessible_resources": [
|
"web_accessible_resources": [
|
||||||
{
|
{
|
||||||
"resources": [ "js/download.js","js/jszip.min.js","js/FileSaver.js" ],
|
"resources": [
|
||||||
"matches": [ "*://*.aliexpress.com/*", "*://*.amazon.com/*", "*://*.shein.com/*" ]
|
"js/download.js",
|
||||||
|
"js/jszip.min.js",
|
||||||
|
"js/FileSaver.js"
|
||||||
|
],
|
||||||
|
"matches": [
|
||||||
|
"*://*.aliexpress.com/*",
|
||||||
|
"*://*.amazon.com/*",
|
||||||
|
"*://*.shein.com/*"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"resources": [ "js/temuSeller.js" ],
|
"resources": [
|
||||||
"matches": [ "*://*.kuajingmaihuo.com/*" ]
|
"js/temuSeller.js"
|
||||||
|
],
|
||||||
|
"matches": [
|
||||||
|
"*://*.kuajingmaihuo.com/*"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,8 +11,7 @@
|
|||||||
"48": "icons/48.png",
|
"48": "icons/48.png",
|
||||||
"128": "icons/128.png"
|
"128": "icons/128.png"
|
||||||
},
|
},
|
||||||
"action": {
|
"action": {},
|
||||||
},
|
|
||||||
"host_permissions": [
|
"host_permissions": [
|
||||||
"*://124.71.2.127:8888/",
|
"*://124.71.2.127:8888/",
|
||||||
"*://*.kuajingmaihuo.com/",
|
"*://*.kuajingmaihuo.com/",
|
||||||
@@ -37,43 +36,53 @@
|
|||||||
"fileSystemProvider"
|
"fileSystemProvider"
|
||||||
],
|
],
|
||||||
"declarative_net_request": {
|
"declarative_net_request": {
|
||||||
"rule_resources": [{
|
"rule_resources": [
|
||||||
"id": "1",
|
{
|
||||||
"enabled": true,
|
"id": "1",
|
||||||
"path": "rules_1.json"
|
"enabled": true,
|
||||||
},{
|
"path": "rules_1.json"
|
||||||
"id": "3",
|
},
|
||||||
"enabled": true,
|
{
|
||||||
"path": "rules_3.json"
|
"id": "3",
|
||||||
},{
|
"enabled": true,
|
||||||
"id": "4",
|
"path": "rules_3.json"
|
||||||
"enabled": true,
|
},
|
||||||
"path": "rules_4.json"
|
{
|
||||||
},{
|
"id": "4",
|
||||||
"id": "5",
|
"enabled": true,
|
||||||
"enabled": true,
|
"path": "rules_4.json"
|
||||||
"path": "rules_5.json"
|
},
|
||||||
},{
|
{
|
||||||
"id": "6",
|
"id": "5",
|
||||||
"enabled": true,
|
"enabled": true,
|
||||||
"path": "rules_6.json"
|
"path": "rules_5.json"
|
||||||
},{
|
},
|
||||||
"id": "7",
|
{
|
||||||
"enabled": true,
|
"id": "6",
|
||||||
"path": "rules_7.json"
|
"enabled": true,
|
||||||
},{
|
"path": "rules_6.json"
|
||||||
"id": "8",
|
},
|
||||||
"enabled": true,
|
{
|
||||||
"path": "rules_8.json"
|
"id": "7",
|
||||||
},{
|
"enabled": true,
|
||||||
"id": "9",
|
"path": "rules_7.json"
|
||||||
"enabled": true,
|
},
|
||||||
"path": "rules_9.json"
|
{
|
||||||
},{
|
"id": "8",
|
||||||
"id": "11",
|
"enabled": true,
|
||||||
"enabled": true,
|
"path": "rules_8.json"
|
||||||
"path": "rules_11.json"
|
},
|
||||||
}]
|
{
|
||||||
|
"id": "9",
|
||||||
|
"enabled": true,
|
||||||
|
"path": "rules_9.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "11",
|
||||||
|
"enabled": true,
|
||||||
|
"path": "rules_11.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"content_scripts": [
|
"content_scripts": [
|
||||||
{
|
{
|
||||||
@@ -97,12 +106,24 @@
|
|||||||
],
|
],
|
||||||
"web_accessible_resources": [
|
"web_accessible_resources": [
|
||||||
{
|
{
|
||||||
"resources": [ "js/download.js","js/jszip.min.js","js/FileSaver.js" ],
|
"resources": [
|
||||||
"matches": [ "*://*.aliexpress.com/*", "*://*.amazon.com/*", "*://*.shein.com/*" ]
|
"js/download.js",
|
||||||
|
"js/jszip.min.js",
|
||||||
|
"js/FileSaver.js"
|
||||||
|
],
|
||||||
|
"matches": [
|
||||||
|
"*://*.aliexpress.com/*",
|
||||||
|
"*://*.amazon.com/*",
|
||||||
|
"*://*.shein.com/*"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"resources": [ "js/temuSeller.js" ],
|
"resources": [
|
||||||
"matches": [ "*://*.kuajingmaihuo.com/*" ]
|
"js/temuSeller.js"
|
||||||
|
],
|
||||||
|
"matches": [
|
||||||
|
"*://*.kuajingmaihuo.com/*"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -186,7 +186,7 @@ const router = new VueRouter({
|
|||||||
name: 'coinFlow',
|
name: 'coinFlow',
|
||||||
component: () => import('../view/CoinFlow.vue')
|
component: () => import('../view/CoinFlow.vue')
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
path: 'costManageTemu',
|
path: 'costManageTemu',
|
||||||
name: 'costManageTemu',
|
name: 'costManageTemu',
|
||||||
@@ -311,6 +311,32 @@ const router = new VueRouter({
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'labelsTemplate',
|
||||||
|
name: 'labelsTemplate',
|
||||||
|
component: () => import('../view/lables/Template.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'addLabelsTemplate',
|
||||||
|
name: 'addLabelsTemplate',
|
||||||
|
component: () => import('../view/lables/AddTemplate.vue'),
|
||||||
|
meta: {
|
||||||
|
activeMenu:'/labelsTemplate'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'labelsPrint',
|
||||||
|
name: 'labelsPrint',
|
||||||
|
component: () => import('../view/lables/Print.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'skuManage',
|
||||||
|
name: 'skuManage',
|
||||||
|
component: () => import('../view/lables/SkuManage.vue'),
|
||||||
|
meta: {
|
||||||
|
activeMenu:'/labelsTemplate'
|
||||||
|
}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
13
src/utils/template-helper.js
Normal file
13
src/utils/template-helper.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { hiprint } from 'vue-plugin-hiprint'
|
||||||
|
|
||||||
|
const templateMap = {}
|
||||||
|
|
||||||
|
export function newHiprintPrintTemplate(key, options) {
|
||||||
|
let template = new hiprint.PrintTemplate(options)
|
||||||
|
templateMap[key] = template
|
||||||
|
return template
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getHiprintPrintTemplate(key) {
|
||||||
|
return templateMap[key]
|
||||||
|
}
|
||||||
@@ -185,6 +185,14 @@
|
|||||||
<i class="el-icon-s-data"></i>
|
<i class="el-icon-s-data"></i>
|
||||||
<span slot="title">数据统计</span>
|
<span slot="title">数据统计</span>
|
||||||
</el-menu-item> -->
|
</el-menu-item> -->
|
||||||
|
<el-submenu index="/labelsTemplate">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-s-goods"></i>
|
||||||
|
<span slot="title">标签管理</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="/labelsTemplate">模板管理</el-menu-item>
|
||||||
|
<el-menu-item index="/labelsPrint">标签打印</el-menu-item>
|
||||||
|
</el-submenu>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@@ -273,15 +281,25 @@ export default {
|
|||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
$route(v) {
|
$route(v) {
|
||||||
this.activePath = v.fullPath
|
if (v.meta && v.meta.activeMenu) {
|
||||||
|
this.activePath = v.meta.activeMenu
|
||||||
|
} else {
|
||||||
|
this.activePath = v.fullPath
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
|
window.eval = () => {
|
||||||
|
}
|
||||||
const devVersion = require('../manifest.development.json').version
|
const devVersion = require('../manifest.development.json').version
|
||||||
const prodVersion = require('../manifest.production.json').version
|
const prodVersion = require('../manifest.production.json').version
|
||||||
this.version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
|
this.version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
|
||||||
this.activePath = this.$route.fullPath
|
if (this.$route.meta && this.$route.meta.activeMenu) {
|
||||||
|
this.activePath = this.$route.meta.activeMenu
|
||||||
|
} else {
|
||||||
|
this.activePath = this.$route.fullPath
|
||||||
|
}
|
||||||
// this.testGoodcang()
|
// this.testGoodcang()
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
95
src/view/lables/AddTemplate.vue
Normal file
95
src/view/lables/AddTemplate.vue
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<template>
|
||||||
|
<AiDetail class="add-label">
|
||||||
|
<template #title>
|
||||||
|
<ai-title title="添加标签" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
|
||||||
|
<template #rightBtn>
|
||||||
|
<el-button @click="preview" size="small" type="danger">预览</el-button>
|
||||||
|
<el-button @click="savePdf" size="small" type="primary">下载pdf</el-button>
|
||||||
|
<el-button @click="saveTemplate" size="small" type="primary">保存</el-button>
|
||||||
|
<el-button @click="print" size="small">打印</el-button>
|
||||||
|
<el-button @click="clearPaper" size="small" type="danger">清空纸张</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-title>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<ai-card title="标签模板" class="card" :hideTitle="true">
|
||||||
|
<template #content>
|
||||||
|
<div class="add-label__wrapper">
|
||||||
|
<Print ref="printRef" :labels="labels"></Print>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</template>
|
||||||
|
</AiDetail>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Print from '@/components/print/Print'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Print
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
labels: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
cancel() {
|
||||||
|
this.$router.go(-1)
|
||||||
|
},
|
||||||
|
|
||||||
|
preview () {
|
||||||
|
this.$refs.printRef.getHtml()
|
||||||
|
},
|
||||||
|
|
||||||
|
savePdf () {
|
||||||
|
this.$refs.printRef.savePdf()
|
||||||
|
},
|
||||||
|
|
||||||
|
rotatePaper () {
|
||||||
|
this.$refs.printRef.rotatePaper()
|
||||||
|
},
|
||||||
|
|
||||||
|
saveTemplate () {
|
||||||
|
const json = this.$refs.printRef.exportJson()
|
||||||
|
console.log(json)
|
||||||
|
},
|
||||||
|
|
||||||
|
print () {
|
||||||
|
this.$refs.printRef.print()
|
||||||
|
},
|
||||||
|
|
||||||
|
clearPaper () {
|
||||||
|
this.$refs.printRef.clearPaper()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.add-label {
|
||||||
|
::v-deep(.ai-detail__content--wrapper) {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
::v-deep(.ai-card__body) {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-label__wrapper {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
135
src/view/lables/Print.vue
Normal file
135
src/view/lables/Print.vue
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list class="Learning">
|
||||||
|
<ai-title
|
||||||
|
slot="title"
|
||||||
|
title="新手园地"
|
||||||
|
isShowBottomBorder>
|
||||||
|
</ai-title>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-search-bar>
|
||||||
|
<template #left>
|
||||||
|
<el-radio-group v-model="search.categoryId" @change="onChange">
|
||||||
|
<el-radio-button label="">全部</el-radio-button>
|
||||||
|
<el-radio-button label="isFavorite">我的收藏</el-radio-button>
|
||||||
|
<el-radio-button :label="item.id" :key="item.id" v-for="item in cateList">{{ item.name }}</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table
|
||||||
|
:tableData="tableData"
|
||||||
|
:col-configs="colConfigs"
|
||||||
|
:total="total"
|
||||||
|
:current.sync="search.current"
|
||||||
|
:size.sync="search.size"
|
||||||
|
style="margin-top: 8px;"
|
||||||
|
@getList="getList">
|
||||||
|
<el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
<div class="table-options">
|
||||||
|
<el-button type="text" @click="collection(row.id, row.isFavorite)">{{ row.isFavorite === '0' ? '收藏' : '取消收藏' }}</el-button>
|
||||||
|
<el-button type="text" @click="toDetail(row.url)">详情</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Learning',
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
colConfigs: [
|
||||||
|
{ prop: 'title', label: '标题', align: 'left' },
|
||||||
|
{ prop: 'createTime', label: '发布时间', align: 'center' },
|
||||||
|
],
|
||||||
|
tableData: [],
|
||||||
|
total: 0,
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
categoryId: ''
|
||||||
|
},
|
||||||
|
cateList: [],
|
||||||
|
isFavorite: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
this.$store.dispatch('getUserInfo').then(e => {
|
||||||
|
console.log(e)
|
||||||
|
})
|
||||||
|
this.getCateList()
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
toDetail (url) {
|
||||||
|
window.open(url)
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange (e) {
|
||||||
|
if (e === 'isFavorite') {
|
||||||
|
this.$http.post('/api/learning/favoritePage', null, {
|
||||||
|
params: {
|
||||||
|
...this.search
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.search.current = 1
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
collection (id, isFavorite) {
|
||||||
|
this.$confirm(isFavorite === '0' ? '确定收藏该文章?' : '确定取消收藏？', '温馨提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
callback: action => {
|
||||||
|
if (action === 'confirm') {
|
||||||
|
this.$http.post(isFavorite === '0' ? `/api/learning/addFavorite?id=${id}` : `/api/learning/delFavorite?id=${id}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.$message.success(isFavorite === '0' ? '收藏成功' : '取消成功')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getCateList () {
|
||||||
|
this.$http.post('/api/learningCategory/page?size=50').then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.cateList = res.data.records
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getList () {
|
||||||
|
this.$http.post('/api/learning/pluginPage', null, {
|
||||||
|
params: {
|
||||||
|
...this.search
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
238
src/view/lables/SkuManage.vue
Normal file
238
src/view/lables/SkuManage.vue
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list class="Template">
|
||||||
|
<ai-title
|
||||||
|
slot="title"
|
||||||
|
title="管理SKU"
|
||||||
|
isShowBack
|
||||||
|
isShowBottomBorder
|
||||||
|
@onBackClick="$router.go(-1)">
|
||||||
|
</ai-title>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-search-bar>
|
||||||
|
<template #left>
|
||||||
|
<el-button type="primary" size="small" @click="isShow = true">添加</el-button>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table
|
||||||
|
:tableData="tableData"
|
||||||
|
:col-configs="colConfigs"
|
||||||
|
:total="total"
|
||||||
|
:current.sync="search.current"
|
||||||
|
:size.sync="search.size"
|
||||||
|
style="margin-top: 8px;"
|
||||||
|
@getList="getList">
|
||||||
|
<el-table-column slot="productName" width="300px" :show-overflow-tooltip='true' label="商品名称" fixed="left">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div>
|
||||||
|
<el-image :src="scope.row.mainImageUrl" style="width: 40px; height: 40px" class="image" :preview-src-list="[scope.row.mainImageUrl]" />
|
||||||
|
{{ scope.row.productName }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
<div class="table-options">
|
||||||
|
<el-button type="text" @click="toAdd(row.url)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="toDetail(row.url)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
<ai-dialog
|
||||||
|
:visible.sync="isShow"
|
||||||
|
title="添加SKU"
|
||||||
|
width="1400px"
|
||||||
|
@confirm="onConfirm">
|
||||||
|
<ai-search-bar>
|
||||||
|
<template #left>
|
||||||
|
<el-select v-model="skuSearch.mallId" placeholder="请选择店铺" size="small" @change="onMallChange">
|
||||||
|
<el-option
|
||||||
|
v-for="item in $store.state.mallList"
|
||||||
|
:key="item.mallId"
|
||||||
|
:label="item.mallName"
|
||||||
|
:value="item.mallId">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table
|
||||||
|
height="400"
|
||||||
|
:tableData="skuList"
|
||||||
|
:col-configs="colConfigs"
|
||||||
|
:total="skuTotal"
|
||||||
|
:current.sync="skuSearch.current"
|
||||||
|
:size.sync="skuSearch.size"
|
||||||
|
style="margin-top: 8px;"
|
||||||
|
@getList="getSkuList"
|
||||||
|
:pageSizes="[10, 20, 50, 100, 500, 1000]"
|
||||||
|
v-loading="isLoading">
|
||||||
|
<el-table-column slot="productName" width="300px" :show-overflow-tooltip="true" label="商品名称" fixed="left">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div>
|
||||||
|
<el-image :src="scope.row.mainImageUrl" style="width: 40px; height: 40px" class="image" :preview-src-list="[scope.row.mainImageUrl]" />
|
||||||
|
{{ scope.row.productName }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</ai-dialog>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { sendChromeAPIMessage } from '@/api/chromeApi'
|
||||||
|
export default {
|
||||||
|
name: 'Template',
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
colConfigs: [
|
||||||
|
// { slot: 'productName', label: '商品名称', width: '300px', align: 'left', fixed: 'left' },
|
||||||
|
// { prop: 'category', label: '分类', width: '140px', align: 'left', fixed: 'left' },
|
||||||
|
{ prop: 'mallName', label: '店铺名称', align: 'left' },
|
||||||
|
{ prop: 'labelCode', label: '条码编码', align: 'center' },
|
||||||
|
// { prop: 'productSkcId', label: 'SKC', align: 'left' },
|
||||||
|
{ prop: 'productSkuId', label: 'SKU', align: 'center' },
|
||||||
|
// { prop: 'extCode', label: 'SKC货号', align: 'left' },
|
||||||
|
{ prop: 'skuExtCode', label: 'SKU货号', align: 'center' },
|
||||||
|
{ prop: 'skuSpecName', label: '次销售属性', align: 'center' }
|
||||||
|
],
|
||||||
|
tableData: [],
|
||||||
|
total: 0,
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
size: 100
|
||||||
|
},
|
||||||
|
skuSearch: {
|
||||||
|
current: 1,
|
||||||
|
size: 100,
|
||||||
|
mallId: ''
|
||||||
|
},
|
||||||
|
skuTotal: 0,
|
||||||
|
skuList: [],
|
||||||
|
isShow: false,
|
||||||
|
skuReqParams: {
|
||||||
|
page: 1,
|
||||||
|
pageSize: 100
|
||||||
|
},
|
||||||
|
isLoading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
currMall () {
|
||||||
|
if (!this.$store.state.mallList.length) {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.$store.state.mallList.filter(v => v.mallId === this.skuSearch.mallId)[0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
toAdd () {
|
||||||
|
this.$router.push('/addLabelsTemplate')
|
||||||
|
},
|
||||||
|
|
||||||
|
requestSKUList () {
|
||||||
|
sendChromeAPIMessage({
|
||||||
|
url: 'bg-visage-mms/labelcode/pageQuery',
|
||||||
|
needMallId: true,
|
||||||
|
mallId: this.skuSearch.mallId,
|
||||||
|
anti: true,
|
||||||
|
data: {
|
||||||
|
page: this.skuSearch.size > 100 ? this.skuReqParams.page : this.skuSearch.current,
|
||||||
|
pageSize: this.skuSearch.size > 100 ? 100 : this.skuSearch.size
|
||||||
|
}
|
||||||
|
}).then(async (res) => {
|
||||||
|
if (res.errorCode == 1000000) {
|
||||||
|
const list = res.result.pageItems.map(v => {
|
||||||
|
return {
|
||||||
|
mallName: this.currMall.mallName,
|
||||||
|
productName: v.productName,
|
||||||
|
productSkuId: v.labelCodeVO.productSkuId,
|
||||||
|
labelCode: v.labelCodeVO.labelCode,
|
||||||
|
skuExtCode: v.labelCodeVO.skuExtCode,
|
||||||
|
skuSpecName: v.productSkuSpecList.map(item => {
|
||||||
|
return item.specName
|
||||||
|
}).join(',')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.skuTotal = res.result.total
|
||||||
|
this.skuList.push(...list)
|
||||||
|
|
||||||
|
if (this.skuSearch.size > 100 && (res.result.total > this.skuList.length)) {
|
||||||
|
this.skuReqParams.page++
|
||||||
|
await this.$sleepSync(5000)
|
||||||
|
this.requestSKUList()
|
||||||
|
} else {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onMallChange (e) {
|
||||||
|
if (!e) {
|
||||||
|
this.skuList = []
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$userCheck(this.skuSearch.mallId).then(() => {
|
||||||
|
this.skuList = []
|
||||||
|
this.skuReqParams.page = 1
|
||||||
|
this.isLoading = true
|
||||||
|
this.requestSKUList()
|
||||||
|
}).catch(() => {
|
||||||
|
this.skuSearch.mallId = ''
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getSkuList () {
|
||||||
|
if (!this.skuSearch.mallId) {
|
||||||
|
return this.$message.error('请选择店铺')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$userCheck(this.skuSearch.mallId).then(() => {
|
||||||
|
this.skuList = []
|
||||||
|
this.skuReqParams.page = 1
|
||||||
|
this.isLoading = true
|
||||||
|
|
||||||
|
this.requestSKUList()
|
||||||
|
}).catch(() => {
|
||||||
|
this.skuSearch.mallId = ''
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getList () {
|
||||||
|
this.$http.post('/api/learning/pluginPage', null, {
|
||||||
|
params: {
|
||||||
|
...this.search
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm () {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
98
src/view/lables/Template.vue
Normal file
98
src/view/lables/Template.vue
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list class="Template">
|
||||||
|
<ai-title
|
||||||
|
slot="title"
|
||||||
|
title="模板管理"
|
||||||
|
isShowBottomBorder>
|
||||||
|
</ai-title>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-search-bar>
|
||||||
|
<template #left>
|
||||||
|
<el-button type="primary" size="small" @click="toAdd">添加</el-button>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table
|
||||||
|
:tableData="tableData"
|
||||||
|
:col-configs="colConfigs"
|
||||||
|
:total="total"
|
||||||
|
:current.sync="search.current"
|
||||||
|
:size.sync="search.size"
|
||||||
|
style="margin-top: 8px;"
|
||||||
|
@getList="getList">
|
||||||
|
<el-table-column slot="options" label="操作" align="center" fixed="right" width="220px">
|
||||||
|
<template v-slot="{ row }">
|
||||||
|
<div class="table-options">
|
||||||
|
<el-button type="text" @click="toAddSku(row.url)">添加SKU</el-button>
|
||||||
|
<el-button type="text" @click="toAdd(row.url)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="toDetail(row.url)">删除</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Template',
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
colConfigs: [
|
||||||
|
{ prop: 'name', label: '模板名称', align: 'left' },
|
||||||
|
{ prop: 'count', label: '绑定SKU数量', align: 'center' },
|
||||||
|
{ prop: 'createTime', label: '创建时间', align: 'center' },
|
||||||
|
],
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
name: '电池',
|
||||||
|
count: 2
|
||||||
|
}
|
||||||
|
],
|
||||||
|
total: 0,
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
size: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
// this.getList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
toAdd () {
|
||||||
|
this.$router.push('/addLabelsTemplate')
|
||||||
|
},
|
||||||
|
|
||||||
|
toAddSku () {
|
||||||
|
this.$router.push('/skuManage')
|
||||||
|
},
|
||||||
|
|
||||||
|
getList () {
|
||||||
|
console.log(this.tableData)
|
||||||
|
this.$http.post('/api/learning/pluginPage', null, {
|
||||||
|
params: {
|
||||||
|
...this.search
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
// this.tableData = res.data.records
|
||||||
|
// this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm () {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user