【新增】标签目录和打印组件
This commit is contained in:
yanran200830
@@ -22,6 +22,7 @@
|
||||
"vue": "^2.6.14",
|
||||
"vue-cropper": "^0.6.4",
|
||||
"vue-json-excel": "^0.3.0",
|
||||
"vue-plugin-hiprint": "^0.0.56",
|
||||
"vue-qr": "^4.0.9",
|
||||
"vue-router": "^3.2.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 name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -10,6 +10,14 @@
|
||||
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 {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
@@ -486,4 +494,13 @@ img {
|
||||
|
||||
.el-table__fixed-body-wrapper .el-table__body {
|
||||
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;
|
||||
}
|
||||
@@ -28,7 +28,8 @@
|
||||
background: url("../assets/images/empty.svg") no-repeat center;
|
||||
background-size: 120px 120px;
|
||||
height: 120px;
|
||||
margin: 48px auto 0;
|
||||
margin: 0 auto;
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
</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",
|
||||
"128": "icons/128.png"
|
||||
},
|
||||
"action": {
|
||||
},
|
||||
"action": {},
|
||||
"host_permissions": [
|
||||
"*://*.jjcp52.com/",
|
||||
"*://*.kuajingmaihuo.com/",
|
||||
@@ -37,43 +36,53 @@
|
||||
"activeTab"
|
||||
],
|
||||
"declarative_net_request": {
|
||||
"rule_resources": [{
|
||||
"id": "1",
|
||||
"enabled": true,
|
||||
"path": "rules_1.json"
|
||||
},{
|
||||
"id": "3",
|
||||
"enabled": true,
|
||||
"path": "rules_3.json"
|
||||
},{
|
||||
"id": "5",
|
||||
"enabled": true,
|
||||
"path": "rules_5.json"
|
||||
},{
|
||||
"id": "6",
|
||||
"enabled": true,
|
||||
"path": "rules_6.json"
|
||||
},{
|
||||
"id": "7",
|
||||
"enabled": true,
|
||||
"path": "rules_7.json"
|
||||
},{
|
||||
"id": "8",
|
||||
"enabled": true,
|
||||
"path": "rules_8.json"
|
||||
},{
|
||||
"id": "9",
|
||||
"enabled": true,
|
||||
"path": "rules_9.json"
|
||||
},{
|
||||
"id": "10",
|
||||
"enabled": true,
|
||||
"path": "rules_10.json"
|
||||
},{
|
||||
"id": "11",
|
||||
"enabled": true,
|
||||
"path": "rules_11.json"
|
||||
}]
|
||||
"rule_resources": [
|
||||
{
|
||||
"id": "1",
|
||||
"enabled": true,
|
||||
"path": "rules_1.json"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"enabled": true,
|
||||
"path": "rules_3.json"
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
"enabled": true,
|
||||
"path": "rules_5.json"
|
||||
},
|
||||
{
|
||||
"id": "6",
|
||||
"enabled": true,
|
||||
"path": "rules_6.json"
|
||||
},
|
||||
{
|
||||
"id": "7",
|
||||
"enabled": true,
|
||||
"path": "rules_7.json"
|
||||
},
|
||||
{
|
||||
"id": "8",
|
||||
"enabled": true,
|
||||
"path": "rules_8.json"
|
||||
},
|
||||
{
|
||||
"id": "9",
|
||||
"enabled": true,
|
||||
"path": "rules_9.json"
|
||||
},
|
||||
{
|
||||
"id": "10",
|
||||
"enabled": true,
|
||||
"path": "rules_10.json"
|
||||
},
|
||||
{
|
||||
"id": "11",
|
||||
"enabled": true,
|
||||
"path": "rules_11.json"
|
||||
}
|
||||
]
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
@@ -97,12 +106,24 @@
|
||||
],
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": [ "js/download.js","js/jszip.min.js","js/FileSaver.js" ],
|
||||
"matches": [ "*://*.aliexpress.com/*", "*://*.amazon.com/*", "*://*.shein.com/*" ]
|
||||
"resources": [
|
||||
"js/download.js",
|
||||
"js/jszip.min.js",
|
||||
"js/FileSaver.js"
|
||||
],
|
||||
"matches": [
|
||||
"*://*.aliexpress.com/*",
|
||||
"*://*.amazon.com/*",
|
||||
"*://*.shein.com/*"
|
||||
]
|
||||
},
|
||||
{
|
||||
"resources": [ "js/temuSeller.js" ],
|
||||
"matches": [ "*://*.kuajingmaihuo.com/*" ]
|
||||
"resources": [
|
||||
"js/temuSeller.js"
|
||||
],
|
||||
"matches": [
|
||||
"*://*.kuajingmaihuo.com/*"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -11,8 +11,7 @@
|
||||
"48": "icons/48.png",
|
||||
"128": "icons/128.png"
|
||||
},
|
||||
"action": {
|
||||
},
|
||||
"action": {},
|
||||
"host_permissions": [
|
||||
"*://124.71.2.127:8888/",
|
||||
"*://*.kuajingmaihuo.com/",
|
||||
@@ -36,43 +35,53 @@
|
||||
"activeTab"
|
||||
],
|
||||
"declarative_net_request": {
|
||||
"rule_resources": [{
|
||||
"id": "1",
|
||||
"enabled": true,
|
||||
"path": "rules_1.json"
|
||||
},{
|
||||
"id": "3",
|
||||
"enabled": true,
|
||||
"path": "rules_3.json"
|
||||
},{
|
||||
"id": "4",
|
||||
"enabled": true,
|
||||
"path": "rules_4.json"
|
||||
},{
|
||||
"id": "5",
|
||||
"enabled": true,
|
||||
"path": "rules_5.json"
|
||||
},{
|
||||
"id": "6",
|
||||
"enabled": true,
|
||||
"path": "rules_6.json"
|
||||
},{
|
||||
"id": "7",
|
||||
"enabled": true,
|
||||
"path": "rules_7.json"
|
||||
},{
|
||||
"id": "8",
|
||||
"enabled": true,
|
||||
"path": "rules_8.json"
|
||||
},{
|
||||
"id": "9",
|
||||
"enabled": true,
|
||||
"path": "rules_9.json"
|
||||
},{
|
||||
"id": "11",
|
||||
"enabled": true,
|
||||
"path": "rules_11.json"
|
||||
}]
|
||||
"rule_resources": [
|
||||
{
|
||||
"id": "1",
|
||||
"enabled": true,
|
||||
"path": "rules_1.json"
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"enabled": true,
|
||||
"path": "rules_3.json"
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"enabled": true,
|
||||
"path": "rules_4.json"
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
"enabled": true,
|
||||
"path": "rules_5.json"
|
||||
},
|
||||
{
|
||||
"id": "6",
|
||||
"enabled": true,
|
||||
"path": "rules_6.json"
|
||||
},
|
||||
{
|
||||
"id": "7",
|
||||
"enabled": true,
|
||||
"path": "rules_7.json"
|
||||
},
|
||||
{
|
||||
"id": "8",
|
||||
"enabled": true,
|
||||
"path": "rules_8.json"
|
||||
},
|
||||
{
|
||||
"id": "9",
|
||||
"enabled": true,
|
||||
"path": "rules_9.json"
|
||||
},
|
||||
{
|
||||
"id": "11",
|
||||
"enabled": true,
|
||||
"path": "rules_11.json"
|
||||
}
|
||||
]
|
||||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
@@ -96,12 +105,24 @@
|
||||
],
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": [ "js/download.js","js/jszip.min.js","js/FileSaver.js" ],
|
||||
"matches": [ "*://*.aliexpress.com/*", "*://*.amazon.com/*", "*://*.shein.com/*" ]
|
||||
"resources": [
|
||||
"js/download.js",
|
||||
"js/jszip.min.js",
|
||||
"js/FileSaver.js"
|
||||
],
|
||||
"matches": [
|
||||
"*://*.aliexpress.com/*",
|
||||
"*://*.amazon.com/*",
|
||||
"*://*.shein.com/*"
|
||||
]
|
||||
},
|
||||
{
|
||||
"resources": [ "js/temuSeller.js" ],
|
||||
"matches": [ "*://*.kuajingmaihuo.com/*" ]
|
||||
"resources": [
|
||||
"js/temuSeller.js"
|
||||
],
|
||||
"matches": [
|
||||
"*://*.kuajingmaihuo.com/*"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -181,7 +181,7 @@ const router = new VueRouter({
|
||||
name: 'coinFlow',
|
||||
component: () => import('../view/CoinFlow.vue')
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
path: 'costManageTemu',
|
||||
name: 'costManageTemu',
|
||||
@@ -272,7 +272,6 @@ const router = new VueRouter({
|
||||
name: 'purchaseOrderListShein',
|
||||
component: () => import('../view/shein/PurchaseOrderListShein.vue')
|
||||
},
|
||||
|
||||
// {
|
||||
// path: 'statistics',
|
||||
// name: 'statistics',
|
||||
@@ -296,6 +295,24 @@ 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')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
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]
|
||||
}
|
||||
@@ -175,6 +175,14 @@
|
||||
<i class="el-icon-s-data"></i>
|
||||
<span slot="title">数据统计</span>
|
||||
</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-scrollbar>
|
||||
<div class="container">
|
||||
@@ -263,15 +271,25 @@ export default {
|
||||
|
||||
watch: {
|
||||
$route(v) {
|
||||
this.activePath = v.fullPath
|
||||
if (v.meta && v.meta.activeMenu) {
|
||||
this.activePath = v.meta.activeMenu
|
||||
} else {
|
||||
this.activePath = v.fullPath
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
window.eval = () => {
|
||||
}
|
||||
const devVersion = require('../manifest.development.json').version
|
||||
const prodVersion = require('../manifest.production.json').version
|
||||
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()
|
||||
},
|
||||
|
||||
|
||||
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>
|
||||
86
src/view/lables/Template.vue
Normal file
86
src/view/lables/Template.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<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" @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="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: 'Template',
|
||||
|
||||
data () {
|
||||
return {
|
||||
colConfigs: [
|
||||
{ prop: 'name', label: '模板名称', align: 'left' },
|
||||
{ prop: 'createTime', label: '绑定SKU数量', align: 'center' },
|
||||
{ prop: 'createTime', label: '创建时间', align: 'center' },
|
||||
],
|
||||
tableData: [],
|
||||
total: 0,
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
categoryId: ''
|
||||
},
|
||||
cateList: [],
|
||||
isFavorite: 0
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
toAdd () {
|
||||
this.$router.push('/addLabelsTemplate')
|
||||
},
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user