修改打印样式

src/containers/management/publicCar/publicCar.vue

@@ -370,7 +370,10 @@ export default {
     },
     showPrintDialog(data) {
       let categoryName = JSON.parse(data.row.categoryName).map(
-        item => (item.checked ? `☑ ${item.name}` : `▢ ${item.name}`)
+        (item, index) =>
+          item.checked
+            ? `☑ ${index + 1}、${item.name}`
+            : `▢ ${index + 1}、${item.name}`
       );
       this.selected = {
         id: data.row.id,

src/containers/print/publicCar.vue

@@ -18,7 +18,7 @@
         <div :span="4" class="tableCell tabelCol-4">
           <span>用车类型<br>（勾选）</span>
         </div>
-        <div :span="20" class="tableCell tabelCol-20 tal">{{selected.categoryName}}</div>
+        <div :span="20" class="tableCell tabelCol-20 tal mtel">{{selected.categoryName}}</div>
       </div>
       <div class="tableRow">
         <div :span="4" class="tableCell tabelCol-4">用车起始时间</div>
@@ -28,21 +28,26 @@
         <div :span="4" class="tableCell tabelCol-4">
           <span>用车详细路线</span>
         </div>
-        <div :span="20" class="tableCell tabelCol-20 tal">{{selected.lineDescription}}</div>
+        <div :span="20" class="tableCell tabelCol-20 tal mtel">{{selected.lineDescription}}</div>
       </div>
       <div class="tableRow">
         <div :span="4" class="tableCell tabelCol-4">部门负责人<br>签字（盖章）</div>
-        <div :span="20" class="tableCell tabelCol-20"></div>
-      </div>
-      <div class="tableRow">
-        <div :span="4" class="tableCell tabelCol-4">
+        <div :span="4" class="tableCell tabelCol-4"></div>
+        <div :span="4" class="tableCell tabelCol-4 directCol">
           <div>派车人</div>
-        </div>
-        <div :span="6" class="tableCell tabelCol-6">{{selected.dealName}}</div>
-        <div :span="4" class="tableCell tabelCol-4">
           <div>派车车牌</div>
         </div>
-        <div :span="10" class="tableCell tabelCol-10">{{selected.carPlate}}</div>
+        <div :span="4" class="tableCell tabelCol-12 directCol">
+          <span class="carPlate">
+            {{selected.dealName}}
+          </span>
+          <div class="carPlate">
+            <template v-for="(rowIndex) in carPlateArrRow">
+              <div :key="rowIndex">{{carPlateArr.slice((rowIndex-1) * 3, 3 * rowIndex).join(',')}}</div>
+            </template>
+          </div>
+        </div>
+
       </div>
       <div class="tableRow">
         <div :span="4" class="tableCell tabelCol-4">出车公里数</div>
@@ -102,6 +107,13 @@ export default {
 
       return sed;
     },
+    carPlateArr() {
+      return this.selected.carPlate.split(',');
+    },
+    carPlateArrRow() {
+      const length = this.carPlateArr.length;
+      return Math.ceil(length / 3);
+    },
   },
   created() {
     window.vmPrint = this.printHandle;
@@ -124,7 +136,7 @@ export default {
   height: 978px;
   text-align: center;
   margin: 0 auto;
-  line-height: 45px;
+  line-height: 48px;
   .tableTitle {
     font-size: 20px;
     line-height: 80px;
@@ -150,11 +162,22 @@ export default {
       border-bottom: none;
     }
     .tal {
-      text-indent: 20px;
+      text-indent: 10px;
       text-align: left;
       justify-content: flex-start;
       align-items: flex-start;
     }
+    .mtel {
+      text-indent: 0;
+      line-height: 30px;
+      padding: 15px 10px;
+    }
+    .carPlate {
+      width: 100%;
+      padding: 0 20px;
+      text-align: left;
+      line-height: 30px;
+    }
     .directCol {
       flex-direction: column;
       line-height: 36px;