youxiw2000 / trash · Files

<template>
  <div class="order-detail-container">
    <div class="header">
      <h1>装修垃圾收运处电子联单</h1>
    </div>

    <div class="order-info">
      <div class="order-number">
        <span>联单编号：<span class="highlight">{{ form.garOrderNumber }}</span></span>
      </div>

      <table class="detail-table">
        <!-- 投放端信息 -->
        <tr>
          <td colspan="4" class="section-header">
            投放端信息
          </td>
        </tr>
        <tr>
          <td class="label">投放点编号</td>
          <td>{{ form.dropPointId || '-' }}</td>
          <td class="label">运距</td>
          <td>{{ form.transportDistance || '-' }}</td>
        </tr>
        <tr>
          <td class="label">投放点名称</td>
          <td>{{ form.garOrderName || '-' }}</td>
          <td class="label">订单时间</td>
          <td>{{ form.garOrderTime || '-' }}</td>
        </tr>
        <tr>
          <td class="label">联系电话</td>
          <td>{{ form.garOrderPhone || '-' }}</td>
          <td class="label">车次</td>
          <td v-if="form.dropCarNum!==0">{{ form.dropCarNum }}/{{ dropCarNum }}</td>
          <td v-else>-</td>
        </tr>
        <tr>
          <td class="label">投放地址</td>
          <td colspan="3">{{ form.dropAddress || '-' }}</td>
        </tr>

        <!-- 运输端信息 -->
        <tr>
          <td colspan="4" class="section-header">
            运输端信息
          </td>
        </tr>
        <tr>
          <td class="label">运输单位</td>
          <td>{{ form.garOrderHandlerCompanyName || '-' }}</td>
          <td class="label">运输时间</td>
          <td>{{ form.garCreateTime || '-' }}</td>
        </tr>
        <tr>
          <td class="label">车牌号</td>
          <td>{{ form.garCarCode || '-' }}</td>
          <td class="label">驾驶员</td>
          <td>{{ form.garOrderHandlerName || '-' }}</td>
        </tr>

        <!-- 处置端信息 -->
        <tr>
          <td colspan="4" class="section-header">
            处置端信息
          </td>
        </tr>
        <tr>
          <td class="label">处置场名称</td>
          <td>{{ form.disposalSiteName || '-' }}</td>
          <td class="label">接收时间</td>
          <td>{{ form.garUpdateTime || '-' }}</td>
        </tr>
        <tr>
          <td class="label">接收车牌</td>
          <td>{{ form.garHandlerCarCode || '-' }}</td>
          <td class="label">载重(吨)</td>
          <td>{{ form.garCarryingWeight || '-' }}</td>
        </tr>

        <!-- 备注 -->
        <tr>
          <td class="label">备注</td>
          <td colspan="3">{{ form.garRemark || '-' }}</td>
        </tr>
      </table>
    </div>

    <div class="actions">
      <el-button type="primary" @click="handlePrint">打印</el-button>
      <el-button type="primary" @click="exportToPDF">导出PDF</el-button>
    </div>
  </div>
</template>

<script>import { getAsk } from "@/api/ask/ask";
import html2pdf from 'html2pdf.js'

export default {
  name: "OrderDetail",
  data() {
    return {
      // 表单参数
      form: {},
      dropCarNum: 0
    };
  },
  created() {
    const orderId = this.$route.params.orderId || this.$route.query.orderId;
    if (orderId) {
      this.getOrderDetail(orderId);
    } else {
      this.$message.error("缺少订单ID参数");
    }
  },
  methods: {
    /** 获取订单详情 */
    getOrderDetail(orderId) {
      getAsk(orderId).then(response => {
        this.form = response.data;
      }).catch(error => {
        this.$message.error("获取订单详情失败: " + error.message);
      });
    },

    /** 导出为PDF */
    exportToPDF() {
      const element = document.querySelector('.order-detail-container');

      const opt = {
        margin:       10,
        filename:     `装修垃圾收运处电子联单_${this.form.garOrderNumber}.pdf`,
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 2 },
        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
      };

      html2pdf().set(opt).from(element).save();
    },

    /** 打印 */
    handlePrint() {
      window.print();
    }
  }
};
</script>

<style lang="scss" scoped>.order-detail-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;

  .header {
    text-align: center;
    margin-bottom: 20px;

    h1 {
      font-size: 24px;
      color: #333;
      margin: 0;
    }
  }

  .order-info {
    .order-number {
      font-size: 18px;
      margin-bottom: 20px;

      .highlight {
        color: red;
        font-weight: bold;
      }
    }

    .detail-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      text-align: left;
      margin-bottom: 20px;

      .section-header {
        background: #f5f7fa;
        font-weight: 600;
        padding: 10px;
      }

      td {
        border: 1px solid #333;
        padding: 10px;

        &.label {
          background-color: #f9f9f9;
          font-weight: 500;
          width: 20%;
        }
      }
    }
  }

  .actions {
    text-align: center;

    .el-button {
      margin: 0 10px;
    }
  }
}

@media print {
  .actions {
    display: none;
  }
}
</style>