电子联单bug 修复，导出联单，打印联单

2c2c2c
1 parent 53c536e2
Showing 5 changed files with 295 additions and 151 deletions
trash-garbage/src/main/java/com/trash/garbage/pojo/domain/GarOrderMatchAsk.java
trash-garbage/src/main/java/com/trash/garbage/service/impl/GarOrderServiceImpl.java
trash-ui/package.json
trash-ui/src/App.vue
trash-ui/src/views/ask/ask/index.vue
@@ -9,6 +9,7 @@ import java.util.Date;
  
 import com.fasterxml.jackson.annotation.JsonFormat;
 import com.trash.common.annotation.Excel;
+import com.trash.common.core.domain.BaseEntity;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
 import lombok.ToString;
@@ -21,7 +22,7 @@ import org.springframework.format.annotation.DateTimeFormat;
 @TableName(value ="gar_order_match_ask")
 @EqualsAndHashCode
 @ToString
-public class GarOrderMatchAsk implements Serializable {
+public class GarOrderMatchAsk extends BaseEntity implements Serializable {
     /**
      * 
      */
@@ -31,12 +32,38 @@ public class GarOrderMatchAsk implements Serializable {
     /**
      * 订单 id
      */
-    @Excel(name = "订单 ID")
     private String garOrderId;
  
     /**
+     * 订单编号
+     */
+    @Excel(name = "订单编号")
+    private String garOrderNumber;
+
+    /**
+     * 订单时间
+     */
+    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
+    @Excel(name = "运输开始时间",dateFormat = "yyyy-MM-dd HH:mm:ss")
+    private Date garOrderTime;
+
+    /**
+     * 订单下单手机号
+     */
+    @Excel(name = "下单手机号")
+    private String garOrderPhone;
+
+    /**
+     * 订单下单用户名称
+     */
+    @Excel(name = "下单用户名称")
+    private String garOrderName;
+
+    /**
          * 运输驾驶员手机号
      */
+    @Excel(name = "运输驾驶员手机号")
     private String garOrderHandlerTel;
     /**
      * 订单载重
@@ -44,15 +71,18 @@ public class GarOrderMatchAsk implements Serializable {
     private Double garCarryingWeight;
  
     /**
-     * 接收量
-     */
-    private Double garReceptionQuantity;
-    /**
      * 运输驾驶员
      */
+    @Excel(name = "运输驾驶员")
     private String garOrderHandlerName;
  
     /**
+     * 车次
+     */
+    @Excel(name = "车次")
+    private int dropCarNum;
+
+    /**
      * 公司 id
      */
     private String garOrderHandlerCompanyId;
@@ -64,6 +94,7 @@ public class GarOrderMatchAsk implements Serializable {
     /**
      * 公司名称
      */
+    @Excel(name = "公司名称")
     private String garOrderHandlerCompanyName;
  
     /**
@@ -77,19 +108,19 @@ public class GarOrderMatchAsk implements Serializable {
     private String garOrderHandlerId;
  
     /**
-     * 
+     * 运输开始时间
      */
-    @TableField(fill = FieldFill.INSERT)
     @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
+    @Excel(name = "运输开始时间",dateFormat = "yyyy-MM-dd HH:mm:ss")
     private Date garCreateTime;
  
     /**
-     * 
+     * 接收时间
      */
-    @TableField(fill = FieldFill.INSERT_UPDATE)
     @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
+    @Excel(name = "接收时间",dateFormat = "yyyy-MM-dd HH:mm:ss")
     private Date garUpdateTime;
  
     /**
@@ -107,9 +138,16 @@ public class GarOrderMatchAsk implements Serializable {
     /**
      * 备注
      */
+    @Excel(name = "备注")
     private String garRemark;
  
     /**
+     * 趟次类型0=正常趟次,1=异常趟次
+     */
+    @Excel(name = "趟次类型",readConverterExp = "0=正常趟次,1=异常趟次")
+    private String garOrderType;
+
+    /**
      * 投放点 id
      */
     private int dropPointId;
@@ -117,12 +155,21 @@ public class GarOrderMatchAsk implements Serializable {
     /**
      * 投放点名称
      */
+    @Excel(name = "投放点名称")
     private String dropPointName;
  
     /**
-     * 趟次类型0=正常趟次,1=异常趟次
+     * 投放点管理员联系方式
      */
-    private String garOrderType;
+    @Excel(name = "投放点管理员联系方式")
+    private String dropCustodianPhone;
+
+    /**
+     * 投放点地址
+     */
+    @Excel(name = "投放点地址")
+    private String dropAddress;
+
  
     /**
      * 处置场所 id
@@ -132,22 +179,61 @@ public class GarOrderMatchAsk implements Serializable {
     /**
      * 处置场所
      */
+    @Excel(name = "处置场所")
     private String disposalSiteName;
  
-    /**
-     * 订单编号
-     */
-    private String garOrderNumber;
  
     /**
-     * 订单下单手机号
+     * 到达处置场所车牌号
      */
-    private String garOrderPhone;
+    @Excel(name = "到达处置场所车牌号")
+    private String garHandlerCarCodeEnd;
  
     /**
-     * 订单下单用户名称
+     * 接收量
      */
-    private String garOrderName;
+    @Excel(name = "接收量")
+    private Double garReceptionQuantity;
+
+    public Date getGarOrderTime() {
+        return garOrderTime;
+    }
+
+    public void setGarOrderTime(Date garOrderTime) {
+        this.garOrderTime = garOrderTime;
+    }
+
+    public String getDropCustodianPhone() {
+        return dropCustodianPhone;
+    }
+
+    public void setDropCustodianPhone(String dropCustodianPhone) {
+        this.dropCustodianPhone = dropCustodianPhone;
+    }
+
+    public String getDropAddress() {
+        return dropAddress;
+    }
+
+    public void setDropAddress(String dropAddress) {
+        this.dropAddress = dropAddress;
+    }
+
+    public int getDropCarNum() {
+        return dropCarNum;
+    }
+
+    public void setDropCarNum(int dropCarNum) {
+        this.dropCarNum = dropCarNum;
+    }
+
+    public String getGarHandlerCarCodeEnd() {
+        return garHandlerCarCodeEnd;
+    }
+
+    public void setGarHandlerCarCodeEnd(String garHandlerCarCodeEnd) {
+        this.garHandlerCarCodeEnd = garHandlerCarCodeEnd;
+    }
  
     @TableField(exist = false)
     private static final long serialVersionUID = 1L;
@@ -632,8 +632,9 @@ public class GarOrderServiceImpl extends ServiceImpl&lt;GarOrderMapper, GarOrder&gt;
                     garOrderMatchAsk.setGarOrderPhone(orderDetailVo.getGarOrderContactTel());
                     garOrderMatchAsk.setGarOrderName(orderDetailVo.getGarOrderContactName());
                     garOrderMatchAsk.setGarOrderNumber(generateAssociationNumber(order.getGarOrderAddress()));
-                    garOrderMatchAsk.setGarCreateTime(new Date());
                     garOrderMatchAsk.setGarOrderId(dto.getGarOrderId());
+                    garOrderMatchAsk.setGarOrderTime(order.getGarCreateTime());
+                    garOrderMatchAsk.setDropCarNum(order.getGarRealCarCount());
  
                     //获取处置场所
                     List<GarOrderMatchDisposal> disposalList = garOrderMatchDisposalService.queryObjByOrderId(dto.getGarOrderId());
@@ -647,6 +648,7 @@ public class GarOrderServiceImpl extends ServiceImpl&lt;GarOrderMapper, GarOrder&gt;
                         garOrderMatchAsk.setDropPointId(Integer.parseInt(dropPointInfoList.get(0).getId().toString()));
                         garOrderMatchAsk.setDropPointName(dropPointInfoList.get(0).getDropPointName());
                     }
+                    garOrderMatchAsk.setDropAddress(order.getGarOrderAddress()+order.getGarOrderAddressDetails());
                     garOrderMatchAsk.setGarCreateBy(dto.getDriver());
                     askService.save(garOrderMatchAsk);
                 }
@@ -660,9 +662,12 @@ public class GarOrderServiceImpl extends ServiceImpl&lt;GarOrderMapper, GarOrder&gt;
                 if(garOrderMatchAsk.getGarOrderType()==null){
                     //判断车辆上传装车图片时是否在投放点区域内
                     garOrderAssociationServiceAsync.isWithinDropPointCoordinates(dto.getCarPlate(), garOrderMatchAsk, dto);
+                    garOrderMatchAsk.setGarCreateTime(new Date());
+                    askService.updateById(garOrderMatchAsk);
                     break;
                 }
             }
+
         }
  
 //        //上传装车图片生成订单关联台账,卸车图片结束订单关联台账
@@ -1479,6 +1484,7 @@ public class GarOrderServiceImpl extends ServiceImpl&lt;GarOrderMapper, GarOrder&gt;
                 BeanUtils.copyProperties(dto, garOrderMatchAsk);
                 garOrderMatchAsk.setGarUpdateBy(dto.getGarOrderHandlerName());
                 garOrderMatchAsk.setGarUpdateTime(new Date());
+                garOrderMatchAsk.setGarHandlerCarCodeEnd(dto.getGarHandlerCarCode());
                 garOrderAssociationServiceAsync.isWithinDisposal(dto.getGarHandlerCarCode(), garOrderMatchAsk, dto);
                 askService.updateById(garOrderMatchAsk);
                 // 保存图片url
@@ -50,6 +50,7 @@
     "file-saver": "2.0.1",
     "fuse.js": "3.4.4",
     "gcoord": "^1.0.5",
+    "html2pdf.js": "^0.10.3",
     "husky": "^8.0.3",
     "js-beautify": "1.10.2",
     "js-cookie": "2.2.0",
@@ -9,3 +9,23 @@ export default  {
   name:  'App'
 }
 </script>
+<style lang="scss" scoped>
+/* 隐藏所有 Element UI 的 overlay、按钮、背景等 */
+@media print {
+  body * {
+    visibility: hidden;
+  }
+  /* 只显示我们的 printArea 里内容 */
+  [ref="printArea"], [ref="printArea"] * {
+    visibility: visible;
+  }
+  /* 把它们拉到页面顶端 */
+  [ref="printArea"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+}
+
+</style>
@@ -128,7 +128,12 @@
         </template>
       </el-table-column>
       <el-table-column label="接收量(吨)" align="center" prop="garReceptionQuantity" />
-      <el-table-column label="趟次类型" align="center" prop="garOrderType" />
+      <el-table-column label="趟次类型" align="center" prop="garOrderType" >
+        <template slot-scope="scope">
+          <span v-if="scope.row.garOrderType == 0">正常趟次</span>
+          <span v-if="scope.row.garOrderType == 1">异常趟次</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -149,142 +154,107 @@
     />
  
     <!-- 添加或修改趟次关联台账对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="订单 id" prop="garOrderId">
-              <el-input v-model="form.garOrderId" placeholder="请输入订单 id" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="订单编号" prop="garOrderNumber">
-              <el-input v-model="form.garOrderNumber" placeholder="请输入订单编号" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="运输驾驶员手机号" prop="garOrderHandlerTel">
-              <el-input v-model="form.garOrderHandlerTel" placeholder="请输入运输驾驶员手机号" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="运输驾驶员" prop="garOrderHandlerName">
-              <el-input v-model="form.garOrderHandlerName" placeholder="请输入运输驾驶员" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="车辆类型" prop="garOrderContainerVolume">
-              <el-input v-model="form.garOrderContainerVolume" placeholder="请输入车辆类型" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="车牌号" prop="garHandlerCarCode">
-              <el-input v-model="form.garHandlerCarCode" placeholder="请输入车牌号" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="公司名称" prop="garOrderHandlerCompanyName">
-              <el-input v-model="form.garOrderHandlerCompanyName" placeholder="请输入公司名称" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="生成时间" prop="garCreateTime">
-              <el-date-picker clearable size="small" style="width: 100%"
-                              v-model="form.garCreateTime"
-                              type="date"
-                              value-format="yyyy-MM-dd HH:mm:ss"
-                              placeholder="选择公司名称">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="接收时间" prop="garUpdateTime">
-              <el-date-picker clearable size="small" style="width: 100%"
-                              v-model="form.garUpdateTime"
-                              type="date"
-                              value-format="yyyy-MM-dd HH:mm:ss"
-                              placeholder="选择公司名称">
-              </el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="重量" prop="garCarryingWeight">
-              <el-input v-model="form.garCarryingWeight" placeholder="请输入重量" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="接收量" prop="garReceptionQuantity">
-              <el-input v-model="form.garReceptionQuantity" placeholder="请输入接收量" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="投放点" prop="dropPointName">
-              <el-input v-model="form.dropPointName" placeholder="请输入投放点" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="趟次类型" prop="garOrderType">
-              <el-select v-model="form.garOrderType" placeholder="请选择趟次类型0=正常趟次,1=异常趟次" style="width: 100%">
-                <el-option label="正常趟次" value="0" />
-                <el-option label="异常趟次" value="1" />
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="处理场所" prop="disposalSiteName">
-              <el-input v-model="form.disposalSiteName" placeholder="请输入处理场所" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="800px"
+      ref="myDialog"
+      :show-close="false"
+      append-to-body
+    >
+
+      <div style="overflow-x:auto;" ref="printArea">
+        <h1 style="text-align:center;">装修垃圾收运处电子联单</h1>
+        <div style="margin-bottom: 10px; font-size: 18px">
+          <span>联单编号：<span style="color:red;">{{ form.garOrderNumber }}</span></span>
+        </div>
+        <table
+          border="1"
+          cellspacing="0"
+          cellpadding="8"
+          style="width: 100%; border-collapse: collapse; font-size: 16px; text-align: left;"
+        >
+          <!-- 投放端信息 分隔 -->
+          <tr>
+            <td colspan="4" style="background:#f5f7fa; font-weight:600;">
+              投放端信息
+            </td>
+          </tr>
+          <tr>
+            <td style="width:20%;">投放人名称</td>
+            <td style="width:30%;">{{ form.garOrderName || '-' }}</td>
+            <td style="width:20%;">订单时间</td>
+            <td style="width:30%;">{{ form.garOrderTime || '-' }}</td>
+          </tr>
+          <tr>
+            <td>联系电话</td>
+            <td>{{ form.garOrderPhone || '-' }}</td>
+            <td>车次</td>
+            <td>{{ form.dropCarNum || '-' }}</td>
+          </tr>
+          <tr>
+            <td>投放地址</td>
+            <td colspan="3">{{ form.dropAddress || '-' }}</td>
+          </tr>
+
+          <!-- 运输端信息 分隔 -->
+          <tr>
+            <td colspan="4" style="background:#f5f7fa; font-weight:600;">
+              运输端信息
+            </td>
+          </tr>
+          <tr>
+            <td>运输单位</td>
+            <td>{{ form.garOrderHandlerCompanyName || '-' }}</td>
+            <td>运输时间</td>
+            <td>{{ form.garCreateTime || '-' }}</td>
+          </tr>
+          <tr>
+            <td>车牌号</td>
+            <td>{{ form.garHandlerCarCode || '-' }}</td>
+            <td>驾驶员</td>
+            <td>{{ form.garOrderHandlerName || '-' }}</td>
+          </tr>
  
-          </el-col>
-          <el-col :span="12">
+          <!-- 处置端信息 分隔 -->
+          <tr>
+            <td colspan="4" style="background:#f5f7fa; font-weight:600;">
+              处置端信息
+            </td>
+          </tr>
+          <tr>
+            <td>处置场名称</td>
+            <td>{{ form.disposalSiteName || '-' }}</td>
+            <td>接收时间</td>
+            <td>{{ form.garUpdateTime || '-' }}</td>
+          </tr>
+          <tr>
+            <td>接收车牌</td>
+            <td>{{ form.garHandlerCarCodeEnd || '-' }}</td>
+            <td>接收量(吨)</td>
+            <td>{{ form.garReceptionQuantity || '-' }}</td>
+          </tr>
  
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="下单手机号" prop="garOrderPhone">
-              <el-input v-model="form.garOrderPhone" placeholder="请输入下单手机号" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="下单人" prop="garOrderName">
-              <el-input v-model="form.garOrderName" placeholder="请输入下单人" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col>
-            <el-form-item label="备注" prop="garRemark">
-              <el-input v-model="form.garRemark" placeholder="请输入备注" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancel">取 消</el-button>
+          <!-- 备注 -->
+          <tr>
+            <td>备注</td>
+            <td colspan="3">{{ form.garRemark || '-' }}</td>
+          </tr>
+        </table>
       </div>
+
+      <template #footer>
+        <el-button type="primary" @click="handlePrint" v-show="isPrint">打印</el-button>
+        <el-button type="primary" @click="exportToPDF" v-show="isPrint">导出</el-button>
+        <el-button @click="cancel" v-show="isPrint">取 消</el-button>
+      </template>
     </el-dialog>
   </div>
 </template>
  
 <script>
 import { listAsk, getAsk, delAsk, addAsk, updateAsk, exportAsk } from "@/api/ask/ask";
+import html2pdf from 'html2pdf.js'
  
 export default {
   name: "Ask",
@@ -340,13 +310,44 @@ export default {
       form: {},
       // 表单校验
       rules: {
-      }
+      },
+      isPrint: false
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    exportToPDF() {
+      const element = this.$refs.printArea;
+
+      const opt = {
+        margin:       [0.4, 0.2],        // 上下、左右 页边距（单位：inch）
+        filename:     `装修垃圾收运处电子联单_${this.form.garOrderNumber}.pdf`,
+        image:        { type: 'jpeg', quality: 0.98 },
+        html2canvas:  { scale: 2, useCORS: true },
+        jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
+      };
+
+      // 调用 html2pdf，自动生成并下载
+      html2pdf()
+        .set(opt)
+        .from(element)
+        .save()
+        .catch(err => {
+          console.error('导出 PDF 失败：', err);
+        });
+    },
+    handlePrint() {
+      // 先关闭 el-dialog 的 modal 遮罩，防止遮罩也一起打印
+      this.$refs.myDialog.hide();
+      this.isPrint = false;
+      // 等 Vue 更新完后再调用
+      this.$nextTick(() => {
+        window.print();
+        this.isPrint = true;
+      });
+    },
     /** 查询趟次关联台账列表 */
     getList() {
       this.loading = true;
@@ -414,7 +415,8 @@ export default {
       getAsk(garId).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "修改趟次关联台账";
+        this.isPrint = true;
+        this.title = "";
       });
     },
     /** 导出按钮操作 */
@@ -433,3 +435,32 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped>
+.table-container {
+  overflow-x: auto;
+  padding: 16px;
+  background: #fff;
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    th, td {
+      border: 1px solid #333;
+      padding: 8px;
+      vertical-align: middle;
+      font-size: 14px;
+    }
+    th {
+      background: #f0f0f0;
+      font-weight: 600;
+    }
+    tr:nth-of-type(3),
+    tr:nth-of-type(6),
+    tr:nth-of-type(9) {
+      td {
+        background: #fafafa;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>