cloud-web-corejs 1.0.54-dev.57 → 1.0.54-dev.571

package/src/components/hiprint/view/design/index.vue

@@ -1,61 +1,130 @@
 <template>
   <el-card>
-    <div style="display: flex;flex-direction: column" class="print-oper">
+    <div style="display: flex; flex-direction: column" class="print-oper">
       <div>
         <el-button-group>
-          <template v-for="(value,type) in paperTypes">
-            <el-button size="mini" :type="curPaperType === type ? 'primary' : ' '" @click="setPaper(type,value)"
-                       :key="type">
+          <template v-for="(value, type) in paperTypes">
+            <el-button
+              size="mini"
+              :type="curPaperType === type ? 'primary' : ' '"
+              @click="setPaper(type, value)"
+              :key="type"
+            >
               {{ type }}
             </el-button>
           </template>
-          <el-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click" width="256">
-            <base-input-number v-model="paperWidth" style=" width: 100px !important; text-align: center"
-                               placeholder="宽(mm)"/>
-            <el-input style=" width: 30px !important; border-left: 0; pointer-events: none; backgroundColor: #fff"
-                      placeholder="~" disabled/>
-            <base-input-number v-model="paperHeight" style="width: 100px !important; text-align: center; border-left: 0"
-                               placeholder="高(mm)"/>
-            <el-button type="primary" class="button-sty" style="width: 100%;margin-top:8px" @click="otherPaper">确定
+          <el-popover
+            v-model="paperPopVisible"
+            title="设置纸张宽高(mm)"
+            trigger="click"
+            width="256"
+          >
+            <base-input-number
+              v-model="paperWidth"
+              style="width: 100px !important; text-align: center"
+              placeholder="宽(mm)"
+            />
+            <el-input
+              style="
+                width: 30px !important;
+                border-left: 0;
+                pointer-events: none;
+                backgroundcolor: #fff;
+              "
+              placeholder="~"
+              disabled
+            />
+            <base-input-number
+              v-model="paperHeight"
+              style="width: 100px !important; text-align: center; border-left: 0"
+              placeholder="高(mm)"
+            />
+            <el-button
+              type="primary"
+              class="button-sty"
+              style="width: 100%; margin-top: 8px"
+              @click="otherPaper"
+              >确定
             </el-button>
-            <el-button size="mini" :type="'other'==curPaperType?'primary':''" slot="reference" class="button-sty">
+            <el-button
+              size="mini"
+              :type="'other' === curPaperType ? 'primary' : ''"
+              slot="reference"
+              class="button-sty"
+            >
               自定义纸张
             </el-button>
           </el-popover>
         </el-button-group>
-        <el-button class="button-zoom" icon="el-icon-zoom-out" @click="changeScale(false)"></el-button>
+        <el-button
+          class="button-zoom"
+          icon="el-icon-zoom-out"
+          @click="changeScale(false)"
+        ></el-button>
         <el-input-number
           :value="scaleValue"
           :min="scaleMin"
           :max="scaleMax"
           :step="0.1"
           disabled
-          style="width: 70px;"
+          style="width: 70px"
           class="noButton"
-          :formatter="value => `${(value * 100).toFixed(0)}%`"
-          :parser="value => value.replace('%', '')"
+          :formatter="(value) => `${(value * 100).toFixed(0)}%`"
+          :parser="(value) => value.replace('%', '')"
         />
-        <el-button class="button-zoom" icon="el-icon-zoom-in" @click="changeScale(true)"></el-button>
-        <el-button type="primary" class="button-sty" icon="el-icon-refresh-right" @click="rotatePaper()" plain>旋转
+        <el-button
+          class="button-zoom"
+          icon="el-icon-zoom-in"
+          @click="changeScale(true)"
+        ></el-button>
+        <el-button
+          type="primary"
+          class="button-sty"
+          icon="el-icon-refresh-right"
+          @click="rotatePaper()"
+          plain
+          >旋转
         </el-button>
-        <el-button type="warning" class="button-sty" icon="el-icon-view" @click="preView">预览</el-button>
-        <el-popover
-          width="180"
-          v-model="visible"
-          @confirm="clearPaper"
+        <el-button type="warning" class="button-sty" icon="el-icon-view" @click="preView"
+          >预览</el-button
         >
+        <el-popover width="180" v-model="visible" @confirm="clearPaper">
           <p><i class="el-icon-warning-outline f-red"></i> 是否确认清空?？</p>
           <div style="text-align: right; margin: 0">
             <el-button size="mini" type="text" @click="visible = false">取消</el-button>
-            <el-button type="primary" size="mini" @click="clearPaper();visible = false">确定清空</el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              @click="
+                clearPaper();
+                visible = false;
+              "
+              >确定清空</el-button
+            >
           </div>
-          <el-button type="danger" class="button-sty" icon="el-icon-close" slot="reference" style="margin:0 10px;">
+          <el-button
+            type="danger"
+            class="button-sty"
+            icon="el-icon-close"
+            slot="reference"
+            style="margin: 0 10px"
+          >
             清空
           </el-button>
         </el-popover>
-        <el-button type="primary" class="button-sty" icon="el-icon-download" @click="importDefaultTemplate1">导入默认模板1
+        <el-button
+          type="primary"
+          class="button-sty"
+          icon="el-icon-download"
+          @click="importDefaultTemplate1"
+          >导入默认模板1
         </el-button>
-        <el-button type="primary" class="button-sty" icon="el-icon-download" @click="importDefaultTemplate2">导入默认模板2
+        <el-button
+          type="primary"
+          class="button-sty"
+          icon="el-icon-download"
+          @click="importDefaultTemplate2"
+          >导入默认模板2
         </el-button>
         <div class="hiprint-printPagination"></div>
         <!--		<el-radio-group size="mini">
@@ -151,7 +220,10 @@
                 <el-col :span="8" class="drag_item_box">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.text" style>
-                      <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
+                      <span
+                        class="glyphicon glyphicon-text-width"
+                        aria-hidden="true"
+                      ></span>
                       <p class="glyphicon-class">文本</p>
                     </a>
                   </div>
@@ -167,7 +239,10 @@
                 <el-col :span="8" class="drag_item_box">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.longText">
-                      <span class="glyphicon glyphicon-subscript" aria-hidden="true"></span>
+                      <span
+                        class="glyphicon glyphicon-subscript"
+                        aria-hidden="true"
+                      ></span>
                       <p class="glyphicon-class">长文</p>
                     </a>
                   </div>
@@ -199,7 +274,10 @@
                 <el-col :span="8" class="drag_item_box">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.customText" style>
-                      <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
+                      <span
+                        class="glyphicon glyphicon-text-width"
+                        aria-hidden="true"
+                      ></span>
                       <p class="glyphicon-class">自定义</p>
                     </a>
                   </div>
@@ -208,7 +286,10 @@
                 <el-col :span="8" class="drag_item_box">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.barcode" style>
-                      <span class="glyphicon iconfont icon-bar-code-full" aria-hidden="true"></span>
+                      <span
+                        class="glyphicon iconfont icon-bar-code-full"
+                        aria-hidden="true"
+                      ></span>
                       <p class="glyphicon-class">条形码</p>
                     </a>
                   </div>
@@ -216,19 +297,24 @@
                 <el-col :span="8" class="drag_item_box">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.qrcode" style>
-                      <span class="glyphicon iconfont icon-erweima" aria-hidden="true"></span>
+                      <span
+                        class="glyphicon iconfont icon-erweima"
+                        aria-hidden="true"
+                      ></span>
                       <p class="glyphicon-class">二维码</p>
                     </a>
                   </div>
                 </el-col>
-
               </el-row>
               <el-row class="drag_item_title">辅助</el-row>
               <el-row>
                 <el-col :span="8" class="drag_item_box">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.hline" style>
-                      <span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
+                      <span
+                        class="glyphicon glyphicon-resize-horizontal"
+                        aria-hidden="true"
+                      ></span>
                       <p class="glyphicon-class">横线</p>
                     </a>
                   </div>
@@ -236,7 +322,10 @@
                 <el-col :span="8" class="drag_item_box">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.vline" style>
-                      <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
+                      <span
+                        class="glyphicon glyphicon-resize-vertical"
+                        aria-hidden="true"
+                      ></span>
                       <p class="glyphicon-class">竖线</p>
                     </a>
                   </div>
@@ -244,7 +333,10 @@
                 <el-col :span="8" class="drag_item_box">
                   <div>
                     <a class="ep-draggable-item" tid="defaultModule.rect">
-                      <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
+                      <span
+                        class="glyphicon glyphicon-unchecked"
+                        aria-hidden="true"
+                      ></span>
                       <p class="glyphicon-class">矩形</p>
                     </a>
                   </div>
@@ -276,18 +368,19 @@
       </el-col>
     </el-row>
     <!-- 预览 -->
-    <print-preview ref="preView"/>
+    <print-preview ref="preView" />
   </el-card>
 </template>
 
 <script>
-import mixins from './mixins.js';
+import mixins from "./mixins.js";
 export default {
   name: "printDesign",
-  mixins: [mixins]
-}
+  mixins: [mixins],
+};
 </script>
-<style lang="less" scoped>
+<style src="../../css/bootstrap.min.css" scoped></style>
+<style lang="scss" scoped>
 // 拖拽
 .drag_item_box {
   height: 100%;
@@ -304,29 +397,29 @@ export default {
 }
 
 // 默认图片
-/deep/ .hiprint-printElement-image-content {
+::v-deep .hiprint-printElement-image-content {
   img {
     content: url("~@/assets/logo.png");
   }
 }
 
 // 辅助线样式
-/deep/ .toplineOfPosition {
+::v-deep .toplineOfPosition {
   border: 0;
   border-top: 1px dashed purple;
 }
 
-/deep/ .bottomlineOfPosition {
+::v-deep .bottomlineOfPosition {
   border: 0;
   border-top: 1px dashed purple;
 }
 
-/deep/ .leftlineOfPosition {
+::v-deep .leftlineOfPosition {
   border: 0;
   border-left: 1px dashed purple;
 }
 
-/deep/ .rightlineOfPosition {
+::v-deep .rightlineOfPosition {
   border: 0;
   border-left: 1px dashed purple;
 }