代码上传

package.json

@@ -11,6 +11,7 @@
     "@antv/g2": "^4.1.46",
     "@antv/g2plot": "^2.4.8",
     "@riophae/vue-treeselect": "^0.4.0",
+    "@sv-print/vue": "^0.1.4",
     "@wangeditor/editor": "^5.1.1",
     "@wangeditor/editor-for-vue": "^1.0.1",
     "axios": "^0.26.0",

src/components/normal-basic-layout/details/index.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="flex-align-center">
           <cpEdit v-if="tool.checkAuth($route.name,'update')" :formPath="formPath" :oldFormPath="oldFormPath" :data="editData" btnType="default" @onAddSuccess="onSuccess"></cpEdit>
-          <el-button v-if="tool.checkAuth($route.name,'delete')" class="inline-16" size="mini" :disabled="checkDisabled()" @click="deleteData">删 除</el-button>
+          <el-button v-if="tool.checkAuth($route.name,'delete') && delApiId" class="inline-16" size="mini" :disabled="checkDisabled()" @click="deleteData">删 除</el-button>
           <div>
             <slot name="customOperation"></slot>
           </div>

src/components/normal-basic-layout/modules/cpAdd.vue

@@ -13,6 +13,7 @@ export default {
   },
   computed:{
 		formComponent(){
+      console.log(this.oldFormPath)
       if (this.oldFormPath) {
         return ()=>import(`@/${this.oldFormPath.add}/add.vue`)
       } else {

src/hiprint/css/hiprint.css

@@ -0,0 +1,943 @@
+/* 拖拽时元素辅助线 */
+.toplineOfPosition, .bottomlineOfPosition {
+  border: 0;
+  border-top: 1px dashed  rgb(169, 169, 169);
+}
+.leftlineOfPosition, .rightlineOfPosition {
+  border: 0;
+  border-left: 1px dashed  rgb(169, 169, 169);
+}
+
+/* 拖拽时的坐标位置 */
+.topPosition {
+  background: red;
+  color: white;
+  border-radius: 20rem;
+  min-width: 10px;
+  padding: 0 2px;
+  font-size: 12px;
+  line-height: normal;
+  z-index: 9;
+}
+.topPosition-lineMode {
+  color: red;
+  background: unset;
+  line-height: normal;
+  z-index: 9;
+}
+.leftPosition {
+  background: red;
+  color: white;
+  border-radius: 20rem;
+  min-width: 10px;
+  padding: 0 2px;
+  font-size: 12px;
+  line-height: normal;
+  z-index: 9;
+}
+.leftPosition-lineMode {
+  color: red;
+  background: unset;
+  line-height: normal;
+  z-index: 9;
+}
+
+/* 元素始终隐藏 */
+.alwaysHide {
+  background-color: gray !important;
+}
+
+/* 元素宽高 */
+.resize-panel .size-box {
+  border: 1px solid;
+  padding: 0px 4px;
+  background: red;
+  color: white;
+  font-size: 12px;
+  border-radius: 6px 6px 0 0;
+  white-space: nowrap;
+  line-height: normal;
+  font-family: unset;
+  letter-spacing: normal;
+  z-index: 9;
+}
+.resize-panel .size-box .hide {
+  display: none;
+}
+
+/* 参数tab */
+.prop-tabs {
+  background-color: #FFF;
+  border-style: none;
+  box-shadow: none;
+  border-color: #e6e6e6;
+}
+.prop-tabs .prop-tab-items {
+  height: 31px;
+  line-height: 31px;
+  padding: 2px 0 1px 2px;
+  list-style: none;
+  outline: 0;
+  border: 0;
+  text-decoration: none;
+  font-size: 100%;
+  margin: 0;
+  border-bottom: 1px solid #ddd;
+  /*box-shadow: 0 1px 3px rgba(26, 26, 26, .1);*/
+  box-sizing: content-box;
+}
+.prop-tabs .prop-tab-items .prop-tab-item {
+  background-color: #FFF;
+  border-radius: 0;
+  padding: 0;
+  margin: 0 -1px 0 0;
+  display: inline-block;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.prop-tabs .prop-tab-items .prop-tab-item .tab-title {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.prop-tabs .prop-tab-items li.active {
+  border: none;
+  border-bottom: 2px solid #2196f3;
+  color: #2196f3;
+  height: 31px;
+  line-height: 30px;
+}
+
+.prop-tabs .hiprint-option-items.active {
+  display: flex;
+}
+
+.prop-tabs .hiprint-option-items {
+  display: none;
+  margin-top: 1px;
+  border: none;
+  background-color: #FFF;
+  overflow: auto;
+  /*height: calc(100vh - 150px);*/
+  padding: 0;
+}
+/* 元素双击编辑 */
+.design .editing {
+  border: 1px solid red !important;
+}
+
+/* hiprint-pagination */
+.hiprint-pagination {
+    display: inline-block;
+    padding-left: 0;
+}
+    .hiprint-pagination > li {
+        border: 1px solid #bdc3c7;
+        -moz-border-radius: 2px;
+        -webkit-border-radius: 2px;
+        display: block;
+        float: left;
+        padding: 5px;
+        text-decoration: none;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        font-family: helvetica;
+        font-size: 13px;
+        cursor: pointer
+    }
+
+        .hiprint-pagination > li > span {
+            padding: 0 10px 0 10px;
+        }
+
+        .hiprint-pagination > li > a {
+            color: #bdc3c7;
+            font-weight: bold;
+            text-decoration: none;
+            font-size: 11px;
+            padding: 3px;
+        }
+
+            .hiprint-pagination > li > a:hover {
+                color: red;
+            }
+
+
+
+.hiprint-pagination-sm > li > a {
+    padding: 5px 10px;
+    font-size: 12px;
+    line-height: 1.5;
+}
+/*rect-printElement-type hiprint-printElement-type */
+.rect-printElement-types .hiprint-printElement-type {
+    display: block;
+}
+
+.rect-printElement-types .hiprint-printElement-type {
+    padding: 0 0 0 0;
+    list-style: none;
+}
+
+    .rect-printElement-types .hiprint-printElement-type > li > .title {
+        display: block;
+        padding: 4px 0px;
+        clear: both;
+    }
+
+    .rect-printElement-types .hiprint-printElement-type > li > ul {
+        padding: 0 0 0 0;
+        display: block;
+        list-style: none;
+    }
+
+        .rect-printElement-types .hiprint-printElement-type > li > ul > li {
+            display: block;
+            width: 50%;
+            float: left;
+            max-width: 100px;
+        }
+
+            .rect-printElement-types .hiprint-printElement-type > li > ul > li > a {
+                height: 92px;
+                padding: 12px 6px;
+                margin-left: -1px;
+                line-height: 1.42857143;
+                color: #337ab7;
+                text-decoration: none;
+                background-color: #fff;
+                border: 1px solid #ddd;
+                margin-right: 5px;
+                width: 95%;
+                max-width: 100px;
+                display: inline-block;
+                text-align: center;
+                margin-bottom: 7px;
+                box-sizing: border-box;
+                color: #b9a5a6;
+                border: 1px solid rgba(0,0,0,0.2);
+                border-radius: 3px;
+                box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
+            }
+
+
+/*small-printElement-type hiprint-printElement-type */
+.small-printElement-types .hiprint-printElement-type {
+    display: block;
+}
+
+.small-printElement-types .hiprint-printElement-type {
+    padding: 0 0 0 0;
+    list-style: none;
+}
+
+    .small-printElement-types .hiprint-printElement-type > li > .title {
+        display: block;
+        padding: 4px 0px;
+        clear: both;
+    }
+
+    .small-printElement-types .hiprint-printElement-type > li > ul {
+        padding: 0 0 0 0;
+        display: block;
+        list-style: none;
+        width: 100%;
+    }
+
+        .small-printElement-types .hiprint-printElement-type > li > ul > li {
+            display: block;
+            width: 50%;
+            float: left;
+            padding: 0 4px;
+        }
+
+            .small-printElement-types .hiprint-printElement-type > li > ul > li > a {
+                height: 22px;
+                /* padding: 12px 6px; */
+                /* margin-left: -1px; */
+                line-height: 20px;
+                color: #337ab7;
+                text-decoration: none;
+                background-color: #fff;
+                border: 1px solid #ddd;
+                margin-right: 5px;
+                width: 100%;
+                display: block;
+                text-align: center;
+                margin-bottom: 7px;
+                box-sizing: border-box;
+                color: #b9a5a6;
+                border: 1px solid rgba(0,0,0,0.2);
+                border-radius: 3px;
+                box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
+            }
+
+
+/* hiprint-toolbar*/
+
+.hiprint-toolbar {
+}
+
+    .hiprint-toolbar > ul {
+        padding: 0px;
+        margin-bottom: 5px;
+    }
+
+        .hiprint-toolbar > ul > li {
+            display: inline-block;
+        }
+
+            .hiprint-toolbar > ul > li > a {
+                position: relative;
+                float: left;
+                padding: 3px 10px;
+                margin-left: -1px;
+                line-height: 1.42857143;
+                color: #337ab7;
+                text-decoration: none;
+                background-color: #fff;
+                border: 1px solid #ddd;
+                margin-right: 4px;
+                cursor: pointer;
+            }
+
+
+.hiprint-printElement-type .glyphicon-class {
+    display: block;
+    text-align: center;
+    word-wrap: break-word;
+    /*font-size: 0.65rem;
+font-weight: normal;*/
+    font-family: Helvetica, sans-serif;
+}
+
+.hiprint-printElement-type .glyphicon {
+    margin-top: 5px;
+    margin-bottom: 10px;
+    font-size: 37px;
+}
+
+
+/*
+
+
+*/
+
+/*option css*/
+/*option css*/
+.hiprint-option-items {
+    font-size: .75rem;
+    padding: 10px 5px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+    .hiprint-option-items .hiprint-option-item {
+        box-sizing: border-box;
+        float: left;
+        width: 50%;
+        margin-bottom: 5px;
+        padding: 0 5px;
+    }
+
+    .hiprint-option-items .hiprint-option-item-row {
+        width: 100%;
+    }
+
+.hiprint-option-item-label {
+    margin: 5px 5px 3px 0;
+}
+
+.hiprint-option-items .hiprint-option-item-field input, .hiprint-option-items .hiprint-option-item-field select, .hiprint-option-items .hiprint-option-item-field textarea {
+    color: inherit;
+    background-color: transparent;
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+    padding: 3px;
+    z-index: 1;
+    border: 1px solid rgb(169, 169, 169);
+    height: 19pt;
+}
+
+.hiprint-option-item-settingBtn {
+    height: 19pt;
+    line-height: 19pt;
+    font-size: 12px;
+    padding: 0 24px;
+    background: #00c1de;
+    border-color: transparent;
+    color: #fff;
+    display: inline-block;
+    margin: 5px;
+    font-weight: 400;
+    border: 1px solid transparent;
+    font-family: PingFangSC, helvetica neue, hiragino sans gb, arial, microsoft yahei ui, microsoft yahei, simsun, "sans-serif";
+    vertical-align: middle;
+    transition: .3s cubic-bezier(.4, 0, .2, 1);
+    transform: translateZ(0);
+}
+
+.hiprint-option-item-deleteBtn {
+    background: red;
+}
+
+.hiprint-option-items .minicolors {
+    position: relative;
+}
+
+.hiprint-option-items .minicolors-sprite {
+    background-image: url(./image/jquery.minicolors.png);
+}
+
+.hiprint-option-items .minicolors-swatch {
+    position: absolute;
+    vertical-align: middle;
+    background-position: -80px 0;
+    cursor: text;
+    padding: 0;
+    margin: 0;
+    display: inline-block;
+}
+
+.hiprint-option-items .minicolors-swatch-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.hiprint-option-items .minicolors input[type=hidden] + .minicolors-swatch {
+    width: 28px;
+    position: static;
+    cursor: pointer;
+}
+
+.hiprint-option-items .minicolors input[type=hidden][disabled] + .minicolors-swatch {
+    cursor: default;
+}
+
+/* Panel */
+.hiprint-option-items .minicolors-panel {
+    position: absolute;
+    width: 173px;
+    background: white;
+    border: solid 1px #CCC;
+    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
+    z-index: 99999;
+    box-sizing: content-box;
+    display: none;
+}
+
+    .hiprint-option-items .minicolors-panel.minicolors-visible {
+        display: block;
+    }
+
+/* Panel positioning */
+.hiprint-option-items .minicolors-position-top .minicolors-panel {
+    top: -154px;
+}
+
+.hiprint-option-items .minicolors-position-right .minicolors-panel {
+    right: 0;
+}
+
+.hiprint-option-items .minicolors-position-bottom .minicolors-panel {
+    top: auto;
+}
+
+.hiprint-option-items .minicolors-position-left .minicolors-panel {
+    left: 0;
+}
+
+.hiprint-option-items .minicolors-with-opacity .minicolors-panel {
+    width: 194px;
+}
+
+.hiprint-option-items .minicolors .minicolors-grid {
+    position: relative;
+    top: 1px;
+    left: 1px; /* LTR */
+    width: 150px;
+    height: 150px;
+    margin-bottom: 2px;
+    background-position: -120px 0;
+    cursor: crosshair;
+}
+
+.hiprint-option-items .minicolors .minicolors-grid-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 150px;
+    height: 150px;
+}
+
+.hiprint-option-items .minicolors-slider-saturation .minicolors-grid {
+    background-position: -420px 0;
+}
+
+.hiprint-option-items .minicolors-slider-saturation .minicolors-grid-inner {
+    background-position: -270px 0;
+    background-image: inherit;
+}
+
+.hiprint-option-items .minicolors-slider-brightness .minicolors-grid {
+    background-position: -570px 0;
+}
+
+.hiprint-option-items .minicolors-slider-brightness .minicolors-grid-inner {
+    background-color: black;
+}
+
+.hiprint-option-items .minicolors-slider-wheel .minicolors-grid {
+    background-position: -720px 0;
+}
+
+.hiprint-option-items .minicolors-slider,
+.hiprint-option-items .minicolors-opacity-slider {
+    position: absolute;
+    top: 1px;
+    left: 152px; /* LTR */
+    width: 20px;
+    height: 150px;
+    background-color: white;
+    background-position: 0 0;
+    cursor: row-resize;
+}
+
+.hiprint-option-items .minicolors-slider-saturation .minicolors-slider {
+    background-position: -60px 0;
+}
+
+.hiprint-option-items .minicolors-slider-brightness .minicolors-slider {
+    background-position: -20px 0;
+}
+
+.hiprint-option-items .minicolors-slider-wheel .minicolors-slider {
+    background-position: -20px 0;
+}
+
+.hiprint-option-items .minicolors-opacity-slider {
+    left: 173px; /* LTR */
+    background-position: -40px 0;
+    display: none;
+}
+
+
+.hiprint-option-items .minicolors-with-opacity .minicolors-opacity-slider {
+    display: block;
+}
+
+/* Pickers */
+.hiprint-option-items .minicolors-grid .minicolors-picker {
+    position: absolute;
+    top: 70px;
+    left: 70px;
+    width: 12px;
+    height: 12px;
+    border: solid 1px black;
+    border-radius: 10px;
+    margin-top: -6px;
+    margin-left: -6px;
+    background: none;
+}
+
+    .hiprint-option-items .minicolors-grid .minicolors-picker > div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 8px;
+        height: 8px;
+        border-radius: 8px;
+        border: solid 2px white;
+        box-sizing: content-box;
+    }
+
+.hiprint-option-items .minicolors-picker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 18px;
+    height: 2px;
+    background: white;
+    border: solid 1px black;
+    margin-top: -2px;
+    box-sizing: content-box;
+}
+
+/* Swatches */
+.hiprint-option-items .minicolors-swatches,
+.hiprint-option-items .minicolors-swatches li {
+    margin: 5px 0 3px 5px; /* LTR */
+    padding: 0;
+    list-style: none;
+    overflow: hidden;
+}
+
+    .hiprint-option-items .minicolors-swatches .minicolors-swatch {
+        position: relative;
+        float: left; /* LTR */
+        cursor: pointer;
+        margin: 0 4px 0 0; /* LTR */
+    }
+
+
+.hiprint-option-items .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
+    margin-right: 7px; /* LTR */
+}
+
+
+.hiprint-option-items .minicolors-swatch.selected {
+    border-color: #000;
+}
+
+/* Inline controls */
+.hiprint-option-items .minicolors-inline {
+    display: inline-block;
+}
+
+    .hiprint-option-items .minicolors-inline .minicolors-input {
+        display: none !important;
+    }
+
+    .hiprint-option-items .minicolors-inline .minicolors-panel {
+        position: relative;
+        top: auto;
+        left: auto; /* LTR */
+        box-shadow: none;
+        z-index: auto;
+        display: inline-block;
+    }
+
+
+
+/* Bootstrap theme */
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatch {
+    z-index: 2;
+    top: 3px;
+    left: 3px;
+    width: 17px;
+    height: 17px;
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
+    margin-bottom: 2px;
+    top: 0;
+    left: 0; /* LTR */
+    width: 20px;
+    height: 20px;
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-swatch-color {
+    border-radius: inherit;
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
+    left: auto; /* LTR */
+    right: 3px; /* LTR */
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input {
+    float: none;
+    padding-left: 23px; /* LTR */
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
+    padding-right: 44px; /* LTR */
+    padding-left: 12px; /* LTR */
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
+    top: 4px;
+    left: 4px; /* LTR */
+    width: 37px;
+    height: 37px;
+    border-radius: 5px;
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
+    width: 24px;
+    height: 24px;
+}
+
+.hiprint-option-items .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
+    width: 18px;
+    height: 18px;
+}
+
+.hiprint-option-items .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
+    border-top-left-radius: 0; /* LTR */
+    border-bottom-left-radius: 0; /* LTR */
+}
+
+
+
+/*hitable reizer*/
+.hitable {
+}
+
+
+
+    .hitable .selected {
+        background: #3e66ad;
+    }
+
+
+    /*resizer*/
+    .hitable tr.resizerRow,
+    .hitable .resizerRow td {
+        border: 0pt dashed;
+        height: 0pt;
+        background: #fff;
+    }
+
+        .hitable tr.resizerRow + tr,
+        .hitable tr.resizerRow + tr td {
+            border-top: 0px !important;
+        }
+
+    .hitable td.resizerColumn {
+        border: 0pt dashed;
+        width: 0.000001px !important;
+        background: #fff;
+    }
+
+
+        .hitable td.resizerColumn + td {
+            border-left: 0px !important;
+        }
+
+
+/*GRIP*/
+
+.columngrips {
+    height: 0px;
+    position: absolute;
+}
+
+.columngrip {
+    margin-left: -5px;
+    position: absolute;
+    z-index: 5;
+    width: 10px;
+}
+
+    .columngrip .gripResizer {
+        position: absolute;
+        filter: alpha(opacity=1);
+        opacity: 0;
+        width: 10px;
+        height: 100%;
+        cursor: col-resize;
+        top: 0px;
+    }
+
+.columngripDraging {
+    border-left: 1px dotted black;
+}
+
+.rowgrips {
+    height: 0px;
+    width: 0px;
+    position: absolute;
+}
+
+.rowgrip {
+    margin-top: -5px;
+    position: absolute;
+    z-index: 5;
+    height: 10px;
+}
+
+    .rowgrip .gripResizer {
+        position: absolute;
+        filter: alpha(opacity=1);
+        opacity: 0;
+        height: 10px;
+        width: 100%;
+        cursor: row-resize;
+        left: 0px;
+    }
+
+.rowgripDraging {
+    border-top: 1px dotted black;
+}
+
+.hitable .hitable-editor-text {
+    border: 1px solid;
+    width: 95%;
+    height: 80%;
+}
+
+
+
+
+.hipanel-disable {
+    height: 0px;
+    display: block !important;
+    top: 8500px;
+    width: 0px;
+    overflow: hidden;
+    position: absolute;
+}
+
+.hiprint_rul_wrapper {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    pointer-events: none;
+    border: 0;
+    border-top: 1px solid rgb(201, 190, 190);
+    border-left: 1px solid rgb(201, 190, 190);
+    padding-left: 15px;
+	padding-top:15px;
+    margin: -16px;
+	box-sizing: content-box!important;
+}
+
+    .hiprint_rul_wrapper .h_img {
+        position: absolute;
+        top: 0px;
+        left: 15px;
+        width: 400mm;
+        height: 15px;
+    }
+
+    .hiprint_rul_wrapper .v_img {
+        width: 400mm;
+        transform: rotate(90deg);
+        transform-origin: 0 100%;
+        height: 15px;
+        position: absolute;
+        top: -2px;
+        left: 0px;
+    }
+
+/*hiprint-option-table*/
+
+.hiprint-option-table-selected-columns {
+    color: inherit;
+    background-color: transparent;
+    box-sizing: border-box;
+    width: 100%;
+    position: relative;
+    padding: 0px;
+    list-style: none;
+}
+
+    .hiprint-option-table-selected-columns .hiprint-option-table-selected-item {
+        color: inherit;
+        background-color: transparent;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 0 3px;
+        border: 1px solid rgb(169, 169, 169);
+        line-height: 19pt;
+        margin: 3px 0;
+    }
+    .hiprint-option-table-selected-columns .hiprint-option-table-selected-item .column-title {
+      display: inline-block;
+      min-width: calc(100% - 26px);
+    }
+/*hi-pretty */
+.hi-pretty * {
+    box-sizing: border-box;
+}
+
+.hi-pretty input:not([type='checkbox']):not([type='radio']) {
+    display: none;
+}
+
+.hi-pretty {
+    position: relative;
+    display: inline-block;
+    margin-right: 1em;
+    white-space: nowrap;
+    line-height: 1;
+}
+
+    .hi-pretty input {
+        position: absolute;
+        left: 0;
+        top: 0;
+        min-width: 1em;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+        opacity: 0;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+    }
+
+    .hi-pretty .state label {
+        position: initial;
+        display: inline-block;
+        font-weight: normal;
+        margin: 0;
+        text-indent: 1.5em;
+        min-width: calc(1em + 2px);
+    }
+
+        .hi-pretty .state label:before,
+        .hi-pretty .state label:after {
+            content: '';
+            width: calc(1em + 2px);
+            height: calc(1em + 2px);
+            display: block;
+            box-sizing: border-box;
+            border-radius: 0;
+            border: 1px solid transparent;
+            z-index: 0;
+            position: absolute;
+            left: 0;
+            top: 0;
+            background-color: transparent;
+        }
+
+        .hi-pretty .state label:before {
+            border-color: #bdc3c7;
+        }
+
+    .hi-pretty .state.p-is-hover,
+    .hi-pretty .state.p-is-indeterminate {
+        display: none;
+    }
+
+
+    .hi-pretty.p-default.p-fill .state label:after {
+        -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+        transform: scale(1);
+    }
+
+    .hi-pretty.p-default .state label:after {
+        -webkit-transform: scale(0.6);
+        -ms-transform: scale(0.6);
+        transform: scale(0.6);
+    }
+
+    .hi-pretty.p-default input:checked ~ .state label:after {
+        background-color: #bdc3c7 !important;
+    }
+
+    .hi-pretty.p-default.p-thick .state label:before,
+    .hi-pretty.p-default.p-thick .state label:after {
+        border-width: calc(1em / 7);
+    }
+
+    .hi-pretty.p-default.p-thick .state label:after {
+        -webkit-transform: scale(0.4) !important;
+        -ms-transform: scale(0.4) !important;
+        transform: scale(0.4) !important;
+    }

src/hiprint/css/print-lock.css

@@ -0,0 +1,282 @@
+
+@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 */
+    image-rendering: -webkit-optimize-contrast; /* 让图片/标尺稍微清楚一点 */
+}
+
+    .hiprint-printPaper *:focus {
+        outline: -webkit-focus-ring-color auto 0px;
+    }
+
+
+.hiprint-page-break-avoid {
+    page-break-after: avoid;
+}
+.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;
+    }
+.hiprint-printPaper.design {
+    overflow: visible;
+}
+
+
+
+.hiprint-printTemplate .hiprint-printPanel {
+    page-break-after: always;
+}
+
+.hiprint-printPaper, hiprint-printPanel {
+    box-sizing: border-box;
+    border: 0px;
+}
+
+.hiprint-printPanel .hiprint-printPaper:last-child {
+    page-break-after: avoid;
+}
+
+.hiprint-printTemplate .hiprint-printPanel:last-child {
+    page-break-after: avoid;
+}
+
+.hiprint-printPaper .hideheaderLinetarget {
+    border-top: 0px dashed rgb(201, 190, 190) !important;
+}
+
+.hiprint-printPaper .hidefooterLinetarget {
+    border-top: 0px dashed rgb(201, 190, 190) !important;
+}
+
+.hiprint-printPaper.design {
+    border: 1px dashed rgba(170,170,170,0.7);
+}
+
+.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content {
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+.design .resize-panel {
+    box-sizing: border-box;
+    border: 1px dotted;
+}
+
+.hiprint-printElement-text {
+    background-color: transparent;
+    background-repeat: repeat;
+    padding: 0 0 0 0;
+    border: 0.75pt none rgb(0,0,0);
+    direction: ltr;
+    font-family: 'SimSun';
+    font-size: 9pt;
+    font-style: normal;
+    font-weight: normal;
+    padding-bottom: 0pt;
+    padding-left: 0pt;
+    padding-right: 0pt;
+    padding-top: 0pt;
+    text-align: left;
+    text-decoration: none;
+    line-height: 9.75pt;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
+.design .hiprint-printElement-text-content {
+    border: 1px dashed rgb(206, 188, 188);
+    box-sizing: border-box;
+}
+
+.hiprint-printElement-longText {
+    background-color: transparent;
+    background-repeat: repeat;
+    border: 0.75pt none rgb(0,0,0);
+    direction: ltr;
+    font-family: 'SimSun';
+    font-size: 9pt;
+    font-style: normal;
+    font-weight: normal;
+    padding-bottom: 0pt;
+    padding-left: 0pt;
+    padding-right: 0pt;
+    padding-top: 0pt;
+    text-align: left;
+    text-decoration: none;
+    line-height: 9.75pt;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    word-break: break-all;
+    /*white-space: pre-wrap*/
+}
+
+
+
+.hiprint-printElement-table {
+    background-color: transparent;
+    background-repeat: repeat;
+    color: rgb(0,0,0);
+    border-color: rgb(0,0,0);
+    border-style: none;
+    direction: ltr;
+    font-family: 'SimSun';
+    font-size: 9pt;
+    font-style: normal;
+    font-weight: normal;
+    padding-bottom: 0pt;
+    padding-left: 0pt;
+    padding-right: 0pt;
+    padding-top: 0pt;
+    text-align: left;
+    text-decoration: none;
+    padding: 0 0 0 0;
+    box-sizing: border-box;
+    line-height: 9.75pt;
+}
+
+    .hiprint-printElement-table thead {
+        background: #e8e8e8;
+        font-weight: 700;
+    }
+
+.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td {
+    border-color: rgb(0,0,0);
+    border-style: none;
+    /*border: 1px solid rgb(0,0,0);*/
+    font-weight: normal;
+    direction: ltr;
+    padding-bottom: 0pt;
+    padding-left: 4pt;
+    padding-right: 4pt;
+    padding-top: 0pt;
+    text-decoration: none;
+    vertical-align: middle;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    word-break: break-all;
+    /*line-height: 9.75pt;
+    font-size: 9pt;*/
+}
+
+    /*.hiprint-printElement-tableTarget tr,*/
+    .hiprint-printElement-tableTarget td {
+        height: 18pt;
+    }
+
+.hiprint-printPaper .hiprint-paperNumber {
+    font-size: 9pt;
+}
+
+.design .hiprint-printElement-table-handle {
+    position: absolute;
+    height: 12pt;
+    width: 12pt;
+    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 {
+    display:table;
+}
+.hiprint-text-content-middle>div {
+    display: table-cell;
+    vertical-align:middle
+}
+
+.hiprint-text-content-bottom {
+    display: table;
+}
+
+    .hiprint-text-content-bottom > div {
+        display: table-cell;
+        vertical-align: bottom
+    }
+
+/*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;
+}

src/hiprint/etypes/default-etyps-provider.js

@@ -0,0 +1,124 @@
+export default function (hiprint) {
+  return function (options) {
+    var addElementTypes = function (context) {
+      context.removePrintElementTypes("defaultModule");
+      context.addPrintElementTypes("defaultModule", [
+        new hiprint.PrintElementTypeGroup("常规", [
+          {
+            tid: "defaultModule.text",
+            title: "文本",
+            data: "",
+            type: "text"
+          },
+          {
+            tid: "defaultModule.image",
+            title: "图片",
+            data: "",
+            type: "image"
+          },
+          {
+            tid: "defaultModule.longText",
+            title: "长文",
+            data: "155123456789",
+            type: "longText"
+          },
+          {
+            tid: "defaultModule.table",
+            field: "table",
+            title: "表格",
+            type: "table",
+            groupFields: ["name"],
+            groupFooterFormatter: function (group, option) {
+              return "这里自定义统计脚信息";
+            },
+            columns: [
+              [
+                {
+                  title: "行号",
+                  fixed: true,
+                  rowspan: 2,
+                  field: "id",
+                  width: 70
+                },
+                {title: "人员信息", colspan: 2},
+                {title: "销售统计", colspan: 2}
+              ],
+              [
+                {
+                  title: "姓名",
+                  align: "left",
+                  field: "name",
+                  width: 100
+                },
+                {title: "性别", field: "gender", width: 100},
+                {
+                  title: "销售数量",
+                  field: "count",
+                  width: 100
+                },
+                {
+                  title: "销售金额",
+                  field: "amount",
+                  width: 100
+                }
+              ]
+            ],
+            editable: true,
+            columnDisplayEditable: true,//列显示是否能编辑
+            columnDisplayIndexEditable: true,//列顺序显示是否能编辑
+            columnTitleEditable: true,//列标题是否能编辑
+            columnResizable: true, //列宽是否能调整
+            columnAlignEditable: true,//列对齐是否调整
+            isEnableEditField: true, //编辑字段
+            isEnableContextMenu: true, //开启右键菜单 默认true
+            isEnableInsertRow: true, //插入行
+            isEnableDeleteRow: true, //删除行
+            isEnableInsertColumn: true, //插入列
+            isEnableDeleteColumn: true, //删除列
+            isEnableMergeCell: true, //合并单元格
+          },
+          {
+            tid: "defaultModule.html",
+            title: "html",
+            formatter: function (data, options) {
+              return '<div style="height:50pt;width:50pt;background:red;border-radius: 50%;"></div>';
+            },
+            type: "html"
+          },
+          {
+            tid: "defaultModule.customText",
+            title: "自定义文本",
+            customText: "自定义文本",
+            custom: true,
+            type: "text"
+          }
+        ]),
+        new hiprint.PrintElementTypeGroup("辅助", [
+          {
+            tid: "defaultModule.hline",
+            title: "横线",
+            type: "hline"
+          },
+          {
+            tid: "defaultModule.vline",
+            title: "竖线",
+            type: "vline"
+          },
+          {
+            tid: "defaultModule.rect",
+            title: "矩形",
+            type: "rect"
+          },
+          {
+            tid: "defaultModule.oval",
+            title: "椭圆",
+            type: "oval"
+          }
+        ])
+      ]);
+    };
+    return {
+      addElementTypes: addElementTypes
+    };
+  };
+};

src/hiprint/hiprint.config.js

@@ -0,0 +1,1720 @@
+(function () {
+  window.HIPRINT_CONFIG = {
+    //optionItems: [hiprintCustomOptionItem],//自定义选项
+    movingDistance: 1.5, //鼠标拖动一次移动的距离,默认1.5pt
+    paperHeightTrim: 1, //纸张html 的高度等于真实高度-1
+    showPosition: true, //显示坐标位置
+    positionLineMode: false, //坐标显示在线上的
+    positionUnit: true, //显示坐标单位
+    showSizeBox: true, //显示宽高box
+    panel: {
+      supportOptions: [
+        {
+          name: 'panelPaperRule',
+          hidden: false
+        },
+        {
+          name: 'panelPageRule',
+          hidden: false
+        },
+        {
+          name: 'firstPaperFooter',
+          hidden: false
+        },
+        {
+          name: 'evenPaperFooter',
+          hidden: false
+        },
+        {
+          name: 'oddPaperFooter',
+          hidden: false
+        },
+        {
+          name: 'lastPaperFooter',
+          hidden: false
+        },
+        {
+          name: 'leftOffset',
+          hidden: false
+        },
+        {
+          name: 'topOffset',
+          hidden: false
+        },
+        {
+          name: 'fontFamily',
+          hidden: false
+        },
+        {
+          name: 'orient',
+          hidden: false
+        },
+        {
+          name: 'paperNumberDisabled',
+          hidden: false
+        },
+        {
+          name: 'paperNumberFormat',
+          hidden: false
+        },
+      ],
+      default: {}
+    },
+    text: {
+      tabs: [
+        {
+          name: '基础', options: [
+            {
+              name: 'title',
+              hidden: false
+            },
+            {
+              name: 'field',
+              hidden: false
+            },
+            {
+              name: 'testData',
+              hidden: false
+            },
+            {
+              name: 'coordinate',
+              hidden: false
+            },
+            {
+              name: 'widthHeight',
+              hidden: false
+            },
+            {
+              name: 'hideTitle',
+              hidden: false
+            },
+            {
+              name: 'fixed',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '样式', options: [
+            {
+              name: 'dataType',
+              hidden: false
+            },
+            {
+              name: 'fontFamily',
+              hidden: false
+            },
+            {
+              name: 'fontSize',
+              hidden: false
+            },
+            {
+              name: 'fontWeight',
+              hidden: false
+            },
+            {
+              name: 'letterSpacing',
+              hidden: false
+            },
+            {
+              name: 'color',
+              hidden: false
+            },
+            {
+              name: 'backgroundColor',
+              hidden: false
+            },
+            {
+              name: 'textDecoration',
+              hidden: false
+            },
+            {
+              name: 'textAlign',
+              hidden: false
+            },
+            {
+              name: 'textContentVerticalAlign',
+              hidden: false
+            },
+            {
+              name: 'lineHeight',
+              hidden: false
+            },
+            {
+              name: 'transform',
+              hidden: false
+            },
+            {
+              name: 'zIndex',
+              hidden: false
+            }
+          ]
+        },
+        {
+          name: '边框', options: [
+            {
+              name: 'optionsGroup',
+              hidden: false
+            },
+            {
+              name: 'borderLeft',
+              hidden: false
+            },
+            {
+              name: 'borderTop',
+              hidden: false
+            },
+            {
+              name: 'borderRight',
+              hidden: false
+            },
+            {
+              name: 'borderBottom',
+              hidden: false
+            },
+            {
+              name: 'borderWidth',
+              hidden: false
+            },
+            {
+              name: 'borderColor',
+              hidden: false
+            },
+            {
+              name: 'contentPaddingLeft',
+              hidden: false
+            },
+            {
+              name: 'contentPaddingTop',
+              hidden: false
+            },
+            {
+              name: 'contentPaddingRight',
+              hidden: false
+            },
+            {
+              name: 'contentPaddingBottom',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '高级', options: [
+            {
+              name: 'textType',
+              hidden: false
+            },
+            {
+              name: 'barcodeMode',
+              hidden: false
+            },
+            {
+              name: 'qrCodeLevel',
+              hidden: false
+            },
+            {
+              name: 'pageBreak',
+              hidden: false
+            },
+            {
+              name: 'showInPage',
+              hidden: false
+            },
+            {
+              name: 'unShowInPage',
+              hidden: false
+            },
+            {
+              name: 'axis',
+              hidden: false
+            },
+            {
+              name: 'formatter',
+              hidden: false
+            },
+            {
+              name: 'styler',
+              hidden: false
+            }
+          ]
+        },
+      ],
+      supportOptions: [
+        {
+          name: 'title',
+          hidden: false
+        },
+        {
+          name: 'field',
+          hidden: false
+        },
+        {
+          name: 'testData',
+          hidden: false
+        },
+        {
+          name: 'coordinate',
+          hidden: false
+        },
+        {
+          name: 'widthHeight',
+          hidden: false
+        },
+        {
+          name: 'dataType',
+          hidden: false
+        },
+        {
+          name: 'fontFamily',
+          hidden: false
+        },
+        {
+          name: 'fontSize',
+          hidden: false
+        },
+        {
+          name: 'fontWeight',
+          hidden: false
+        },
+        {
+          name: 'letterSpacing',
+          hidden: false
+        },
+        {
+          name: 'color',
+          hidden: false
+        },
+        {
+          name: 'textDecoration',
+          hidden: false
+        },
+        {
+          name: 'textAlign',
+          hidden: false
+        },
+        {
+          name: 'textContentVerticalAlign',
+          hidden: false
+        },
+        {
+          name: 'lineHeight',
+          hidden: false
+        },
+        {
+          name: 'textType',
+          hidden: false
+        },
+        {
+          name: 'barcodeMode',
+          hidden: false
+        },
+        {
+          name: "qrCodeLevel",
+          hidden: false
+        },
+        {
+          name: 'hideTitle',
+          hidden: false
+        },
+        {
+          name: 'pageBreak',
+          hidden: false
+        },
+        {
+          name: 'showInPage',
+          hidden: false
+        },
+        {
+          name: 'unShowInPage',
+          hidden: false
+        },
+        {
+          name: 'fixed',
+          hidden: false
+        },
+        {
+          name: 'axis',
+          hidden: false
+        },
+        {
+          name: 'transform',
+          hidden: false
+        },
+        {
+          name: 'zIndex',
+          hidden: false
+        },
+        {
+          name: 'optionsGroup',
+          hidden: false
+        },
+        {
+          name: 'borderLeft',
+          hidden: false
+        },
+        {
+          name: 'borderTop',
+          hidden: false
+        },
+        {
+          name: 'borderRight',
+          hidden: false
+        },
+        {
+          name: 'borderBottom',
+          hidden: false
+        },
+        {
+          name: 'borderWidth',
+          hidden: false
+        },
+        {
+          name: 'borderColor',
+          hidden: false
+        },
+        {
+          name: 'contentPaddingLeft',
+          hidden: false
+        },
+        {
+          name: 'contentPaddingTop',
+          hidden: false
+        },
+        {
+          name: 'contentPaddingRight',
+          hidden: false
+        },
+        {
+          name: 'contentPaddingBottom',
+          hidden: false
+        },
+        {
+          name: 'backgroundColor',
+          hidden: false
+        },
+        {
+          name: 'formatter',
+          hidden: false
+        },
+        {
+          name: 'styler',
+          hidden: false
+        }
+      ],
+      default: {
+        width: 120,
+        height: 9.75,
+      }
+    },
+    image: {
+      tabs: [
+        {
+          name: '基础', options: [
+            {
+              name: 'field',
+              hidden: false
+            },
+            {
+              name: 'src',
+              hidden: false
+            },
+            {
+              name: 'fit',
+              hidden: false
+            },
+            {
+              name: 'coordinate',
+              hidden: false
+            },
+            {
+              name: 'widthHeight',
+              hidden: false
+            },
+            {
+              name: 'showInPage',
+              hidden: false
+            },
+            {
+              name: 'fixed',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '样式', options: [
+            {
+              name: 'transform',
+              hidden: false
+            },
+            {
+              name: 'zIndex',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '高级', options: [
+            {
+              name: 'pageBreak',
+              hidden: false
+            },
+            {
+              name: 'axis',
+              hidden: false
+            },
+            {
+              name: 'formatter',
+              hidden: false
+            },
+            {
+              name: 'styler',
+              hidden: false
+            }
+          ]
+        },
+      ],
+      supportOptions: [
+        {
+          name: 'field',
+          hidden: false
+        },
+        {
+          name: 'src',
+          hidden: false
+        },
+        {
+          name: 'fit',
+          hidden: false
+        },
+        {
+          name: 'coordinate',
+          hidden: false
+        },
+        {
+          name: 'widthHeight',
+          hidden: false
+        },
+        {
+          name: 'showInPage',
+          hidden: false
+        },
+        {
+          name: 'fixed',
+          hidden: false
+        },
+        {
+          name: 'pageBreak',
+          hidden: false
+        },
+        {
+          name: 'axis',
+          hidden: false
+        },
+        {
+          name: 'transform',
+          hidden: false
+        },
+        {
+          name: 'zIndex',
+          hidden: false
+        },
+        {
+          name: 'formatter',
+          hidden: false
+        },
+        {
+          name: 'styler',
+          hidden: false
+        }
+      ],
+      default: {}
+    },
+    longText: {
+      tabs: [
+        {
+          name: '基础', options: [
+            {
+              name: 'title',
+              hidden: false
+            },
+            {
+              name: 'field',
+              hidden: false
+            },
+            {
+              name: 'testData',
+              hidden: false
+            },
+            {
+              name: 'coordinate',
+              hidden: false
+            },
+            {
+              name: 'widthHeight',
+              hidden: false
+            },
+            {
+              name: 'hideTitle',
+              hidden: false
+            },
+            {
+              name: 'fixed',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '样式', options: [
+            {
+              name: 'fontFamily',
+              hidden: false
+            },
+            {
+              name: 'fontSize',
+              hidden: false
+            },
+            {
+              name: 'fontWeight',
+              hidden: false
+            },
+            {
+              name: 'letterSpacing',
+              hidden: false
+            },
+            {
+              name: 'textAlign',
+              hidden: false
+            },
+            {
+              name: 'lineHeight',
+              hidden: false
+            },
+            {
+              name: 'color',
+              hidden: false
+            },
+            {
+              name: 'longTextIndent',
+              hidden: false
+            },
+            {
+              name: 'leftSpaceRemoved',
+              hidden: false
+            },
+            {
+              name: 'lHeight',
+              hidden: false
+            },
+            {
+              name: 'transform',
+              hidden: false
+            },
+            {
+              name: 'zIndex',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '高级', options: [
+            {
+              name: 'pageBreak',
+              hidden: false
+            },
+            {
+              name: 'showInPage',
+              hidden: false
+            },
+            {
+              name: 'unShowInPage',
+              hidden: false
+            },
+            {
+              name: 'axis',
+              hidden: false
+            },
+            {
+              name: 'formatter',
+              hidden: false
+            },
+            {
+              name: 'styler',
+              hidden: false
+            }
+          ]
+        },
+      ],
+      supportOptions: [
+        {
+          name: 'title',
+          hidden: false
+        },
+        {
+          name: 'field',
+          hidden: false
+        },
+        {
+          name: 'testData',
+          hidden: false
+        },
+        {
+          name: 'coordinate',
+          hidden: false
+        },
+        {
+          name: 'widthHeight',
+          hidden: false
+        },
+        {
+          name: 'fontFamily',
+          hidden: false
+        },
+        {
+          name: 'fontSize',
+          hidden: false
+        },
+        {
+          name: 'fontWeight',
+          hidden: false
+        },
+        {
+          name: 'letterSpacing',
+          hidden: false
+        },
+        {
+          name: 'textAlign',
+          hidden: false
+        },
+        {
+          name: 'lineHeight',
+          hidden: false
+        },
+        {
+          name: 'color',
+          hidden: false
+        },
+        {
+          name: 'hideTitle',
+          hidden: false
+        },
+        {
+          name: 'longTextIndent',
+          hidden: false
+        },
+        {
+          name: 'leftSpaceRemoved',
+          hidden: false
+        },
+        {
+          name: 'pageBreak',
+          hidden: false
+        },
+        {
+          name: 'showInPage',
+          hidden: false
+        },
+        {
+          name: 'unShowInPage',
+          hidden: false
+        },
+        {
+          name: 'fixed',
+          hidden: false
+        },
+        {
+          name: 'axis',
+          hidden: false
+        },
+        {
+          name: 'lHeight',
+          hidden: false
+        },
+        {
+          name: 'transform',
+          hidden: false
+        },
+        {
+          name: 'zIndex',
+          hidden: false
+        },
+        {
+          name: 'optionsGroup',
+          hidden: false
+        },
+        {
+          name: 'borderLeft',
+          hidden: false
+        },
+        {
+          name: 'borderTop',
+          hidden: false
+        },
+        {
+          name: 'borderRight',
+          hidden: false
+        },
+        {
+          name: 'borderBottom',
+          hidden: false
+        },
+        {
+          name: 'borderWidth',
+          hidden: false
+        },
+        {
+          name: 'borderColor',
+          hidden: false
+        },
+        {
+          name: 'contentPaddingLeft',
+          hidden: false
+        },
+        {
+          name: 'contentPaddingTop',
+          hidden: false
+        },
+        {
+          name: 'contentPaddingRight',
+          hidden: false
+        },
+        {
+          name: 'contentPaddingBottom',
+          hidden: false
+        },
+        {
+          name: 'backgroundColor',
+          hidden: false
+        },
+        {
+          name: 'formatter',
+          hidden: false
+        },
+        {
+          name: 'styler',
+          hidden: false
+        }
+      ],
+      default: {
+        height: 42,
+        width: 550
+      }
+    },
+    table: {
+      tabs: [
+        {
+          name: '基础', options: [
+            {
+              name: 'field',
+              hidden: false
+            },
+            {
+              name: 'coordinate',
+              hidden: false
+            },
+            {
+              name: 'widthHeight',
+              hidden: false
+            },
+            {
+              name: 'tableHeaderRepeat',
+              hidden: false
+            },
+            {
+              name: 'tableFooterRepeat',
+              hidden: false
+            },
+            {
+              name: 'autoCompletion',
+              hidden: false
+            },
+            {
+              name: 'columns',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '样式', options: [
+            {
+              name: 'fontFamily',
+              hidden: false
+            },
+            {
+              name: 'fontSize',
+              hidden: false
+            },
+            {
+              name: 'lineHeight',
+              hidden: false
+            },
+            {
+              name: 'textAlign',
+              hidden: false
+            },
+            {
+              name: 'gridColumns',
+              hidden: false
+            },
+            {
+              name: 'gridColumnsGutter',
+              hidden: false
+            },
+            {
+              name: 'tableBorder',
+              hidden: false
+            },
+            {
+              name: 'tableHeaderBorder',
+              hidden: false
+            },
+            {
+              name: 'tableHeaderCellBorder',
+              hidden: false
+            },
+            {
+              name: 'tableHeaderRowHeight',
+              hidden: false
+            },
+            {
+              name: 'tableHeaderBackground',
+              hidden: false
+            },
+            {
+              name: 'tableHeaderFontSize',
+              hidden: false
+            },
+            {
+              name: 'tableHeaderFontWeight',
+              hidden: false
+            },
+            {
+              name: 'tableBodyRowHeight',
+              hidden: false
+            },
+            {
+              name: 'tableBodyRowBorder',
+              hidden: false
+            },
+            {
+              name: 'tableBodyCellBorder',
+              hidden: false
+            },
+            {
+              name: 'tableFooterBorder',
+              hidden: false
+            },
+            {
+              name: 'tableFooterCellBorder',
+              hidden: false
+            },
+            {
+              name: 'lHeight',
+              hidden: false
+            },
+          ]
+        },
+        // 留空即显示 表格 列 属性
+        {
+          name: '列', options: [
+
+          ]
+        },
+        {
+          name: '高级', options: [
+            {
+              name: 'axis',
+              hidden: false
+            },
+            {
+              name: 'styler',
+              hidden: false
+            },
+            {
+              name: 'rowStyler',
+              hidden: false
+            },
+            {
+              name: 'footerFormatter',
+              hidden: false
+            },
+            {
+              name: 'rowsColumnsMerge',
+              hidden: false
+            },
+            {
+              name: 'gridColumnsFooterFormatter',
+              hidden: false
+            }
+          ]
+        },
+      ],
+      supportOptions: [
+        {
+          name: 'field',
+          hidden: false
+        },
+        {
+          name: 'coordinate',
+          hidden: false
+        },
+        {
+          name: 'widthHeight',
+          hidden: false
+        },
+        {
+          name: 'fontFamily',
+          hidden: false
+        },
+        {
+          name: 'fontSize',
+          hidden: false
+        },
+        {
+          name: 'lineHeight',
+          hidden: false
+        },
+        {
+          name: 'textAlign',
+          hidden: false
+        },
+        {
+          name: 'gridColumns',
+          hidden: false
+        },
+        {
+          name: 'gridColumnsGutter',
+          hidden: false
+        },
+        {
+          name: 'tableHeaderRepeat',
+          hidden: false
+        },
+        {
+          name: 'tableBorder',
+          hidden: false
+        },
+        {
+          name: 'tableHeaderBorder',
+          hidden: false
+        },
+        {
+          name: 'tableHeaderCellBorder',
+          hidden: false
+        },
+        {
+          name: 'tableHeaderRowHeight',
+          hidden: false
+        },
+        {
+          name: 'tableHeaderBackground',
+          hidden: false
+        },
+        {
+          name: 'tableHeaderFontSize',
+          hidden: false
+        },
+        {
+          name: 'tableHeaderFontWeight',
+          hidden: false
+        },
+        {
+          name: 'tableBodyRowHeight',
+          hidden: false
+        },
+        {
+          name: 'tableBodyRowBorder',
+          hidden: false
+        },
+        {
+          name: 'tableBodyCellBorder',
+          hidden: false
+        },
+        {
+          name: 'tableFooterBorder',
+          hidden: false
+        },
+        {
+          name: 'tableFooterCellBorder',
+          hidden: false
+        },
+        {
+          name: 'axis',
+          hidden: false
+        },
+        {
+          name: 'lHeight',
+          hidden: false
+        },
+        {
+          name: 'autoCompletion',
+          hidden: false
+        },
+        {
+          name: 'columns',
+          hidden: false
+        },
+        {
+          name: 'styler',
+          hidden: false
+        },
+        {
+          name: 'rowStyler',
+          hidden: false
+        },
+        {
+          name: 'tableFooterRepeat',
+          hidden: false
+        },
+        {
+          name: 'footerFormatter',
+          hidden: false
+        },
+        {
+          name: 'rowsColumnsMerge',
+          hidden: false
+        },
+        {
+          name: 'gridColumnsFooterFormatter',
+          hidden: false
+        }
+      ],
+      default: {
+        width: 550
+      }
+    },
+    hline: {
+      tabs: [
+        {
+          name: '基础', options: [
+            {
+              name: 'coordinate',
+              hidden: false
+            },
+            {
+              name: 'widthHeight',
+              hidden: false
+            },
+            {
+              name: 'showInPage',
+              hidden: false
+            },
+            {
+              name: 'fixed',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '样式', options: [
+            {
+              name: 'borderWidth',
+              hidden: false
+            },
+            {
+              name: 'borderStyle',
+              hidden: false
+            },
+            {
+              name: 'borderColor',
+              hidden: false
+            },
+            {
+              name: 'transform',
+              hidden: false
+            },
+            {
+              name: 'zIndex',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '高级', options: [
+            {
+              name: 'pageBreak',
+              hidden: false
+            },
+            {
+              name: 'axis',
+              hidden: false
+            },
+          ]
+        },
+      ],
+      supportOptions: [
+        {
+          name: 'coordinate',
+          hidden: false
+        },
+        {
+          name: 'widthHeight',
+          hidden: false
+        },
+        {
+          name: 'borderWidth',
+          hidden: false
+        },
+        {
+          name: 'borderStyle',
+          hidden: false
+        },
+        {
+          name: 'borderColor',
+          hidden: false
+        },
+        {
+          name: 'pageBreak',
+          hidden: false
+        },
+        {
+          name: 'showInPage',
+          hidden: false
+        },
+        {
+          name: 'fixed',
+          hidden: false
+        },
+        {
+          name: 'axis',
+          hidden: false
+        },
+        {
+          name: 'transform',
+          hidden: false
+        },
+        {
+          name: 'zIndex',
+          hidden: false
+        },
+      ],
+      default: {
+        borderWidth: 0.75,
+        height: 9,
+        width: 90
+      }
+    },
+    vline: {
+      tabs: [
+        {
+          name: '基础', options: [
+            {
+              name: 'coordinate',
+              hidden: false
+            },
+            {
+              name: 'widthHeight',
+              hidden: false
+            },
+            {
+              name: 'showInPage',
+              hidden: false
+            },
+            {
+              name: 'fixed',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '样式', options: [
+            {
+              name: 'borderWidth',
+              hidden: false
+            },
+            {
+              name: 'borderStyle',
+              hidden: false
+            },
+            {
+              name: 'borderColor',
+              hidden: false
+            },
+            {
+              name: 'transform',
+              hidden: false
+            },
+            {
+              name: 'zIndex',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '高级', options: [
+            {
+              name: 'pageBreak',
+              hidden: false
+            },
+            {
+              name: 'axis',
+              hidden: false
+            },
+          ]
+        },
+      ],
+      supportOptions: [
+        {
+          name: 'coordinate',
+          hidden: false
+        },
+        {
+          name: 'widthHeight',
+          hidden: false
+        },
+        {
+          name: 'borderWidth',
+          hidden: false
+        },
+        {
+          name: 'borderStyle',
+          hidden: false
+        },
+        {
+          name: 'borderColor',
+          hidden: false
+        },
+        {
+          name: 'pageBreak',
+          hidden: false
+        },
+        {
+          name: 'showInPage',
+          hidden: false
+        },
+        {
+          name: 'fixed',
+          hidden: false
+        },
+        {
+          name: 'axis',
+          hidden: false
+        },
+        {
+          name: 'transform',
+          hidden: false
+        },
+        {
+          name: 'zIndex',
+          hidden: false
+        },
+      ],
+      default: {
+        borderWidth: undefined,
+        height: 90,
+        width: 9
+      }
+    },
+    rect: {
+      tabs: [
+        {
+          name: '基础', options: [
+            {
+              name: 'coordinate',
+              hidden: false
+            },
+            {
+              name: 'widthHeight',
+              hidden: false
+            },
+            {
+              name: 'showInPage',
+              hidden: false
+            },
+            {
+              name: 'fixed',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '样式', options: [
+            {
+              name: 'borderWidth',
+              hidden: false
+            },
+            {
+              name: 'borderStyle',
+              hidden: false
+            },
+            {
+              name: 'borderColor',
+              hidden: false
+            },
+            {
+              name: 'backgroundColor',
+              hidden: false
+            },
+            {
+              name: 'transform',
+              hidden: false
+            },
+            {
+              name: 'zIndex',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '高级', options: [
+            {
+              name: 'pageBreak',
+              hidden: false
+            },
+            {
+              name: 'axis',
+              hidden: false
+            },
+          ]
+        },
+      ],
+      supportOptions: [
+        {
+          name: 'coordinate',
+          hidden: false
+        },
+        {
+          name: 'widthHeight',
+          hidden: false
+        },
+        {
+          name: 'borderWidth',
+          hidden: false
+        },
+        {
+          name: 'borderStyle',
+          hidden: false
+        },
+        {
+          name: 'borderColor',
+          hidden: false
+        },
+        {
+          name: 'backgroundColor',
+          hidden: false
+        },
+        {
+          name: 'pageBreak',
+          hidden: false
+        },
+        {
+          name: 'showInPage',
+          hidden: false
+        },
+        {
+          name: 'fixed',
+          hidden: false
+        },
+        {
+          name: 'axis',
+          hidden: false
+        },
+        {
+          name: 'transform',
+          hidden: false
+        },
+        {
+          name: 'zIndex',
+          hidden: false
+        },
+      ],
+      default: {
+        borderWidth: undefined,
+        height: 90,
+        width: 90
+      }
+    },
+    oval: {
+      tabs: [
+        {
+          name: '基础', options: [
+            {
+              name: 'coordinate',
+              hidden: false
+            },
+            {
+              name: 'widthHeight',
+              hidden: false
+            },
+            {
+              name: 'showInPage',
+              hidden: false
+            },
+            {
+              name: 'fixed',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '样式', options: [
+            {
+              name: 'borderWidth',
+              hidden: false
+            },
+            {
+              name: 'borderStyle',
+              hidden: false
+            },
+            {
+              name: 'borderColor',
+              hidden: false
+            },
+            {
+              name: 'backgroundColor',
+              hidden: false
+            },
+            {
+              name: 'transform',
+              hidden: false
+            },
+            {
+              name: 'zIndex',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '高级', options: [
+            {
+              name: 'pageBreak',
+              hidden: false
+            },
+            {
+              name: 'axis',
+              hidden: false
+            },
+          ]
+        },
+      ],
+      supportOptions: [
+        {
+          name: 'coordinate',
+          hidden: false
+        },
+        {
+          name: 'widthHeight',
+          hidden: false
+        },
+        {
+          name: 'borderWidth',
+          hidden: false
+        },
+        {
+          name: 'borderStyle',
+          hidden: false
+        },
+        {
+          name: 'borderColor',
+          hidden: false
+        },
+        {
+          name: 'backgroundColor',
+          hidden: false
+        },
+        {
+          name: 'pageBreak',
+          hidden: false
+        },
+        {
+          name: 'showInPage',
+          hidden: false
+        },
+        {
+          name: 'fixed',
+          hidden: false
+        },
+        {
+          name: 'axis',
+          hidden: false
+        },
+        {
+          name: 'transform',
+          hidden: false
+        },
+        {
+          name: 'zIndex',
+          hidden: false
+        }
+      ],
+      default: {
+        borderWidth: undefined,
+        height: 90,
+        width: 90
+      }
+    },
+    html: {
+      tabs: [
+        {
+          name: '基础', options: [
+            {
+              name: 'coordinate',
+              hidden: false
+            },
+            {
+              name: 'widthHeight',
+              hidden: false
+            },
+            {
+              name: 'showInPage',
+              hidden: false
+            },
+            {
+              name: 'unShowInPage',
+              hidden: false
+            },
+            {
+              name: 'fixed',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '样式', options: [
+            {
+              name: 'transform',
+              hidden: false
+            },
+            {
+              name: 'zIndex',
+              hidden: false
+            },
+          ]
+        },
+        {
+          name: '高级', options: [
+            {
+              name: 'pageBreak',
+              hidden: false
+            },
+            {
+              name: 'axis',
+              hidden: false
+            },
+            {
+              name: 'formatter',
+              hidden: false
+            }
+          ]
+        },
+      ],
+      supportOptions: [
+        {
+          name: 'coordinate',
+          hidden: false
+        },
+        {
+          name: 'widthHeight',
+          hidden: false
+        },
+        {
+          name: 'pageBreak',
+          hidden: false
+        },
+        {
+          name: 'showInPage',
+          hidden: false
+        },
+        {
+          name: 'unShowInPage',
+          hidden: false
+        },
+        {
+          name: 'fixed',
+          hidden: false
+        },
+        {
+          name: 'zIndex',
+          hidden: false
+        },
+        {
+          name: 'axis',
+          hidden: false
+        },
+        {
+          name: 'formatter',
+          hidden: false
+        }
+      ],
+      default: {
+        height: 90,
+        width: 90
+      }
+    },
+    tableColumn: {
+      supportOptions: [
+        {
+          name: 'title',
+          hidden: false
+        },
+        {
+          name: 'align',
+          hidden: false
+        },
+        {
+          name: 'halign',
+          hidden: false
+        },
+        {
+          name: 'vAlign',
+          hidden: false
+        },
+        {
+          name: 'tableTextType',
+          hidden: false
+        },
+        {
+          name: 'tableBarcodeMode',
+          hidden: false
+        },
+        {
+          name: 'tableQRCodeLevel',
+          hidden: false
+        },
+        {
+          name: 'tableColumnHeight',
+          hidden: false
+        },
+        {
+          name: 'paddingLeft',
+          hidden: false
+        },
+        {
+          name: 'paddingRight',
+          hidden: false
+        },
+        {
+          name: 'tableSummaryTitle',
+          hidden: false
+        },
+        {
+          name: 'tableSummaryText',
+          hidden: false
+        },
+        {
+          name: 'tableSummary',
+          hidden: false
+        },
+        {
+          name: 'tableSummaryAlign',
+          hidden: false
+        },
+        {
+          name: 'tableSummaryNumFormat',
+          hidden: false
+        },
+        {
+          name: 'formatter2',
+          hidden: false
+        },
+        {
+          name: 'styler2',
+          hidden: false
+        }
+      ],
+      default: {
+        height: 90,
+        width: 90
+      }
+    }
+  }
+})();

src/hiprint/plugins/jquery.hiwprint.js

@@ -0,0 +1,116 @@
+(function ($) {
+  $.fn.hiwprint = function (options) {
+    var usedFrame = document.getElementById('hiwprint_iframe');
+    if (usedFrame) usedFrame.parentNode.removeChild(usedFrame);
+    var opt = $.extend({}, $.fn.hiwprint.defaults, options);
+    var $element = this;
+    var $iframe = $('<iframe id="hiwprint_iframe"  style="visibility: hidden; height: 0; width: 0; position: absolute;"></iframe>');
+    var css = '';
+    if (opt.importCss) {
+      if (opt.styleHandler) {
+        css += opt.styleHandler()
+      }
+      if ($("link[media=print]").length > 0) {
+        $("link[media=print]").each(function () {
+          if ($(this).attr("href").indexOf('print-lock.css') >= 0) {
+            css += '<link rel="stylesheet" type="text/css" media="print" href="' + $(this).attr("href") + '">';
+            // ↑若加上media="print",仅对浏览器打印时有效 所以查看iframe页面时样式无效
+            css += '<link rel="stylesheet" type="text/css" href="' + $(this).attr("href") + '">';
+          }
+        });
+      }
+    }
+    $iframe[0].srcdoc = '<!DOCTYPE html><html><head><title></title><meta charset="UTF-8">' + css + '</head><body></body></html>';
+
+    $iframe[0].onload = function () {
+      var printDocument = $iframe[0].contentWindow || $iframe[0].contentDocument;
+      if (printDocument.document) printDocument = printDocument.document;
+      if (!$iframe.attr('srcdoc')) {
+        printDocument.write('<!DOCTYPE html><html><head><title></title><meta charset="UTF-8">' + css + '</head><body></body></html>');
+      }
+      if (opt.printContainer) {
+        printDocument.body.innerHTML = $element[0].outerHTML;
+      } else {
+        printDocument.body.innerHTML = $element.html();
+      }
+      loadAllImages(printDocument, function () {
+
+        performPrint($iframe[0], opt);
+      });
+
+    };
+
+    $iframe.appendTo("body");
+
+  };
+
+  $.fn.hiwprint.defaults = {
+    importCss: true,
+    printContainer: true,
+    callback: null,
+    styleHandler: null,
+  };
+
+  function performPrint(iframeElement, opt) {
+    try {
+      iframeElement.focus();
+      if (isEdge() || isIE()) {
+        try {
+          iframeElement.contentWindow.document.execCommand('print', false, null);
+        } catch (e) {
+          iframeElement.contentWindow.print();
+        }
+      } else {
+        // Other browsers
+        iframeElement.contentWindow.print();
+      }
+      if (opt.callback) {
+        opt.callback()
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+
+  function isIE() {
+    return navigator.userAgent.indexOf('MSIE') !== -1 || !!document.documentMode;
+  }
+
+  // Edge 20+
+  function isEdge() {
+    return !isIE() && !!window.StyleMedia;
+  }
+
+
+  function loadAllImages(printDocument, callback, time) {
+
+    if (time === undefined) {
+      time = 0;
+    }
+    var images = printDocument.getElementsByTagName('img');
+    var allLoaded = true;
+    for (var i = 0; i < images.length; i++) {
+      var image = images[i];
+      if (image.src && image.src !== window.location.href && image.src.indexOf('base64') == -1) {
+
+        if (!image || typeof image.naturalWidth === 'undefined' || image.naturalWidth === 0 || !image.complete) {
+          if (!image.complete) {
+            allLoaded = false;
+          }
+        }
+      }
+    }
+    time++;
+    if (!allLoaded && time < 10) {
+
+      setTimeout(function () {
+        loadAllImages(printDocument, callback, time);
+      }, 500);
+    } else {
+      callback();
+    }
+  }
+
+
+})(jQuery);

src/index.js

@@ -0,0 +1,84 @@
+import {hiprint, defaultElementTypeProvider} from './hiprint/hiprint.bundle.js'
+// 调用浏览器打印js
+import "./hiprint/plugins/jquery.hiwprint.js";
+// 默认配置
+import "./hiprint/hiprint.config";
+// 样式
+import "./hiprint/css/hiprint.css"
+import "./hiprint/css/print-lock.css"
+
+/**
+ * 自动连接 / 连接
+ * cb: 连接回调， (status, msg) {
+ *   // status: true/false
+ *   // msg: status == true 时 返回socket.connect回调 e
+ * }
+ */
+let autoConnect = function(cb) {
+  console.log('autoConnect');
+  window.autoConnect = true;
+  window.hiwebSocket && window.hiwebSocket.hasIo() && window.hiwebSocket.start(cb);
+};
+
+/**
+ * 取消自动连接 / 断开连接
+ */
+let disAutoConnect = function() {
+  console.log('disAutoConnect');
+  window.autoConnect = false;
+  window.hiwebSocket && window.hiwebSocket.hasIo() && window.hiwebSocket.stop();
+};
+
+let hiPrintPlugin = {
+  disAutoConnect,
+  install: function (Vue, name = '$hiPrint', autoConnect = true) {
+    if (!autoConnect) {
+      disAutoConnect();
+    }
+    let globalVue = Vue.prototype || Vue.config.globalProperties;
+    globalVue[name] = hiprint;
+    /**
+   * 预览打印，调起系统打印预览
+	 * provider 左侧拖拽元素
+	 * template 模版json字符串
+	 * args 打印数据data, options,
+	 */
+	 globalVue.$print = function (provider = defaultElementTypeProvider, template, ...args) {
+		 hiprint.init({
+			providers: [new provider()]
+		});
+		var hiprintTemplate = new hiprint.PrintTemplate({
+			template: template,
+		});
+		hiprintTemplate.print(...args);
+		return hiprintTemplate;
+	 }
+	 /**
+    * 单模版直接打印， 需客户端支持
+	  * provider 左侧拖拽项对象
+	  * template 模版json字符串
+	  * args 打印数据data, options,
+	  */
+	 globalVue.$print2 = function (provider = defaultElementTypeProvider, template, ...args) {
+		 hiprint.init({
+			providers: [new provider()]
+		});
+		var hiprintTemplate = new hiprint.PrintTemplate({
+			template: template,
+		});
+		hiprintTemplate.print2(...args);
+		return hiprintTemplate;
+	 }
+  }
+}
+
+window.hiprint = hiprint;
+export {
+  autoConnect,
+  disAutoConnect,
+  hiprint,
+  hiPrintPlugin,
+  defaultElementTypeProvider,
+}
+
+

src/main.js

@@ -2,9 +2,8 @@ import './public-path'
 
 import Vue from 'vue';
 import axios from "axios";
-
+// import "sv-print/dist/style.css";
 import ElementUI from 'element-ui';
-// import 'element-ui/lib/theme-chalk/index.css';
 import App from './App.vue';
 import router from './router';
 import store from './store';
@@ -14,6 +13,7 @@ import basicData from './utils/basic-data'
 
 import FileType from './utils/matchingFeilType'
 import upload from './api/upload'
+
 import './style/style.css'
 import './style/theme/index.css'
 import tableLayout from './components/dynamic-table'
@@ -26,6 +26,8 @@ import tagPanl from '@/components/tagPanl/tagPanl'
 
 import sort from './components/sort'
 import '@/style/theme/font-icon/iconfont.css'
+import {hiPrintPlugin} from './index'
+Vue.use(hiPrintPlugin)
 
 Vue.prototype.$api = api
 

src/router/index.js

@@ -60,6 +60,14 @@ let routes = [
           ast_nav:true
         },
         component: () => import(/* webpackChunkName: "about" */ '@/views/mediaStatistics/index.vue')
+      },{
+        path: '/printmodel',
+        name: 'printmodel',
+        meta: {
+          title: '打印模板',
+          ast_nav:true
+        },
+        component: () => import(/* webpackChunkName: "about" */ '@/views/printmodel/index.vue')
       }]
   }
 ];

src/views/printmodel/design/index.vue

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <el-drawer append-to-body fullscreen title="模板设计" :visible.sync="dialogFormVisible" size="100%" :close-on-press-escape="true" @close="onClose">
+      <Designer v-if="show" ref="des" :template="template" @onDesigned="onDesigned" />
+      <div v-drag class="preview" v-show="show">
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="绑定数据字段" name="first"></el-tab-pane>
+        <el-tab-pane label="数据集" name="second"></el-tab-pane>
+      </el-tabs>
+      <div v-if="activeName === 'first'">
+        <div v-for="(item,idx) in panels" :key="idx" class="mt-10">
+          <div v-if="item.printElementType.type === 'text'">
+            <p class="preview__item">{{item.options.title}}</p>
+            <el-select size="mini" v-model="item.options.sys_printdatasetid" placeholder="请选择" @click.native="act_DataBaseID = idx" @change="queryDataBaseDetail">
+              <el-option
+                v-for="i in databastlist"
+                :key="i.sys_printdatasetid"
+                :label="i.datasetname"
+                :value="i.sys_printdatasetid">
+              </el-option>
+            </el-select>&nbsp;
+            <el-select size="mini" v-model="item.options.field" :disabled="idx !== act_DataBaseID" placeholder="请选择" @change="onChange">
+              <el-option
+                v-for="i in sys_printdataset"
+                :key="i.sys_printdataset_columnsid"
+                :label="i.column_name"
+                :value="i.column_name"
+                @visible-change="visibleChange">
+              </el-option>
+            </el-select>
+          </div>
+          <div v-if="item.printElementType.type === 'table'">
+            <p style="font-size:12px">表格数据</p>
+            <div>
+              <div v-for="td in item.options.columns[0]" :key="td.index">
+                <p class="preview__item">{{td.title}}</p>
+                <el-select size="mini" v-model="item.options.sys_printdatasetid" placeholder="请选择" @click.native="act_DataBaseID = idx" @change="queryDataBaseDetail">
+                  <el-option
+                    v-for="i in databastlist"
+                    :key="i.sys_printdatasetid"
+                    :label="i.datasetname"
+                    :value="i.sys_printdatasetid">
+                  </el-option>
+                </el-select>&nbsp;
+                <el-select size="mini" v-model="item.options.field" :disabled="idx !== act_DataBaseID" placeholder="请选择" @change="onChange">
+                  <el-option
+                    v-for="i in sys_printdataset"
+                    :key="i.sys_printdataset_columnsid"
+                    :label="i.column_name"
+                    :value="i.column_name"
+                    @visible-change="visibleChange">
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <el-button type="primary" size="mini" @click="saveJson">保 存</el-button>
+      </div>
+      <div v-else>
+        <div v-for="item in databastlist" :key="item.index" @click="queryDataBaseDetail(item.sys_printdatasetid)">{{item.datasetname}}</div>
+        <div>
+          <el-input style="margin-bottom:10px" size="small" v-model="database.datasetname" placeholder="请输入数据集名称"></el-input>
+          <el-input size="small" type="textarea" v-model="database.sqlstr" placeholder="请输入sql语句" :autosize="{ minRows: 3, maxRows: 6 }"></el-input>
+        </div>
+        <el-button type="primary" size="small" @click="saveDatabase">保存</el-button>
+      </div>
+    </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+
+import { Designer } from "@sv-print/vue";
+// import '@/style/sv-print.css'
+export default {
+  components:{
+    Designer
+  },
+  computed:{
+    formComponent(){
+      if (this.dialogFormVisible) {
+        return ()=>import(`@/style/sv-print.css`)
+      } else {
+        return
+      }
+    }
+  },
+  data () {
+    return {
+      activeName:'first',
+      show:false,
+      dialogFormVisible:false,
+      template:{},
+      panels:{},
+      databastlist:[],
+      sys_printdataset:[],
+      databastlist:[],
+      act_DataBaseID:null,
+      modeData:{},
+      database:{}
+    }
+  },
+  methods:{
+    onDesigned () {},
+    async queryMode (id) {
+      this.show = false
+        const res = await this.$api.requested({
+          "id": 20221121155901,
+          "content": { 
+            "sys_printmodelid":id
+          }
+        })
+        this.modeData = res.data
+        this.panels = JSON.parse(res.data.modeljson).panels[0].printElements
+        this.template = JSON.parse(res.data.modeljson)
+        this.show = true
+    }, 
+    async saveJson () {
+      const res = await this.$api.requested({
+        "id": 20221121160001,
+        "content": { 
+          "sys_printmodelid": this.modeData.sys_printmodelid,
+          "systemappid":this.modeData.systemappid,
+          "modelname":this.modeData.modelname,
+          "modeljson":this.template,
+          "isused":this.modeData.isused
+        }
+      })
+    },
+    async saveDatabase () {
+      this.database.sys_printmodelid = this.modeData.sys_printmodelid
+      const res = await this.$api.requested({
+        "id": 20221121160301,
+        "content": this.database,
+      })
+    },
+    queryDataBaseDetail () {},
+    onChange () {},
+    onClose () {
+      this.$emit('onClose')
+    },
+  },
+  mounted () {
+    var _this = this;
+    document.onkeydown = function(e) {
+      let key = window.event.keyCode;
+      if (key == 83 && event.ctrlKey) {
+       _this.template = JSON.parse(localStorage.getItem('sv-print-preferences'))['default-template']
+       _this.panels =  _this.template.panels[0].printElements
+       _this.saveJson()
+      }
+    };
+  },
+  directives: {
+    drag: {
+      // 指令的定义
+      bind: function (el) {
+          let odiv = el;   //获取当前元素
+          el.onmousedown = (e) => {
+              //算出鼠标相对元素的位置
+              let disX = e.clientX - odiv.offsetLeft;
+              let disY = e.clientY - odiv.offsetTop;
+              let left = '';
+              let top = '';
+              document.onmousemove = (e)=>{
+                  //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
+                  left = e.clientX - disX;
+                  top = e.clientY - disY;
+                  var docWidth = document.body.clientWidth//网页可见宽
+                  var docHeight = document.body.clientHeight//网页可见高
+                  if(top>docHeight-210){//超下边界(键盘DIV长宽分别为 295px、210px)
+                    top = docHeight-210
+                  }
+                  if(top<0){//超上边界
+                    top=0
+                  }
+                  if(left>docWidth-295){//超右边界
+                    left = docWidth-295
+                  }
+                  if(left<0){//超左边界
+                    left=0
+                  }
+                  //绑定元素位置到positionX和positionY上面
+                  //移动当前元素
+                  odiv.style.left = left + 'px';
+                  odiv.style.top = top + 'px';
+              };
+              document.onmouseup = (e) => {
+                  document.onmousemove = null;
+                  document.onmouseup = null;
+              };
+          };
+      }
+    }
+  },
+  watch:{
+    dialogFormVisible (val) {
+      console.log(val)
+      if (!val) {
+        location.reload(true);
+      }
+    }
+  }
+}
+
+</script>
+<style>
+#SVPrint{
+  width:100% !important;
+  overflow: hidden;
+}
+#options{
+  transform: none !important;
+}
+.preview{
+  position: fixed;
+  min-height: 600px;
+  width: 550px;
+  top:10px;
+  right:30px;
+  z-index: 99;
+  background: #fff;
+  box-shadow: 0 2px 4px #0000004d;
+  padding: 10px;
+}
+.preview__item{
+  position: relative;
+  font-size: 12px;
+  line-height: 30px;
+}
+.preview__item__table{
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.preview__item__table p{
+  flex: 1;
+  width:80px ;
+  border: 1px solid #f1f2f3;
+  font-size: 12px;
+  text-align: center;
+  line-height: 30px;
+  margin-left: -1px;
+}
+
+</style>

src/views/printmodel/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div v-if="show">
+    <basicLayout 
+      
+      ref="basicLayout" 
+      :oldFormPath="{
+        add:'views/printmodel/modules'
+      }"
+      tableName="printmodelTable" 
+      idName="sys_printmodelid" 
+      :apiId="{query:20221121155801,del:20221121160101}"
+      :options="options">
+      <div slot="custom"></div>
+      <template v-slot:tbList="scope">
+        <div>
+          {{scope.data.column.data[[scope.data.column.columnname]]}}
+        </div>
+      </template>
+       <template v-slot:tbOpreation="scope">
+        <el-button type="text" size="small" @click="showTemp(scope.data.data)">模板设计</el-button>
+      </template>
+    </basicLayout>
+    <designTemp ref="temp" @onClose="onClose"></designTemp>
+  </div>
+</template>
+
+<script>
+/**
+ * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
+ * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
+ * @param {string} tableName 开发端配置的表格名称
+ * @param {String} idName 数据主id名称
+ * @param {object} apiId:{query:查询的接口id,del:删除的接口id} 
+ * @param {Array} options:{label:描述,value:值} 
+ */
+import designTemp from './design/index.vue'
+export default {
+  data () {
+    return {
+      options:[],
+      show:true
+    }
+  },
+  components:{
+    designTemp
+  },
+  methods:{
+    showTemp (row) {
+      this.$refs['temp'].dialogFormVisible = true
+      this.$refs['temp'].queryMode(row.sys_printmodelid)
+      this.$refs['temp'].formComponent()
+    },
+    onClose () {
+      // this.show = false
+      // setTimeout(() => {
+      //   this.show = true
+      // }, 1000);
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/printmodel/modules/add.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <el-button size="small" type="primary" @click="dialogFormVisible = true">创建打印模板</el-button>
+    <el-dialog title="创建模板" :visible.sync="dialogFormVisible" width="400px" append-to-body>
+      <el-form size="small" :inline="false" :model="param" class="demo-form-inline" label-position="left" label-width="80px">
+        <el-form-item label="模板名称">
+          <el-input v-model="param.modelname" placeholder="输入模板名称"></el-input>
+        </el-form-item>
+        <el-form-item label="应用ID">
+          <el-input v-model="param.systemappid" placeholder="应用ID"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
+        <el-button type="primary" @click="addMode(dialogFormVisible = false)" size="small">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+ 
+<script>
+import panel from './mode'
+export default {
+  data () {
+    return {
+      panel,
+      dialogFormVisible:false,
+      param:{
+        "sys_printmodelid": 0,
+        "systemappid":'',
+        "modelname":"",
+        "modeljson":"json",
+        "isused":1
+      }
+    }
+  },
+  methods:{
+    async addMode () {
+      this.panel.panels[0].printElements[0].options.title = this.param.modelname
+      this.param.modeljson = this.panel
+      const res = await this.$api.requested({
+        "id": 20221121160001,
+        "content": this.param
+      })
+      this.tool.showMessage(res,()=>{
+        this.$emit('onSuccess')
+      })
+    }
+  }
+}
+
+</script>
+<style>
+</style>

src/views/printmodel/modules/mode.js

@@ -0,0 +1,38 @@
+const panel = {
+  "panels": [
+    {
+      "index": 0,
+      "paperType": "A4",
+      "height": 297,
+      "width": 210,
+      "paperHeader": 0,
+      "paperFooter": 841.8897637795277,
+      "printElements": [
+        {
+          "options": {
+            "left": 231,
+            "top": 21,
+            "height": 9.75,
+            "width": 120,
+            "title": "经销项目协议",
+            "coordinateSync": false,
+            "widthHeightSync": false,
+            "fontSize": 18,
+            "qrCodeLevel": 0,
+            "right": 350.25,
+            "bottom": 30,
+            "vCenter": 290.25,
+            "hCenter": 25.125
+          },
+          "printElementType": {
+            "title": "文本",
+            "type": "text"
+          }
+        }
+      ],
+      "topOffset": 30
+    }
+  ]
+}
+export default panel
+