From 6a09cbeb7023ca872cfc6dd1cff9f33c434093e6 Mon Sep 17 00:00:00 2001
From: hr121 <568127468@qq.com>
Date: Sat, 2 Aug 2025 11:56:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BB=93=E7=AE=97=E5=8D=95?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/loadOrder/index.vue           |   6 +-
 .../settlementOrder/generateOrder/index.vue   | 106 +++++++++---------
 src/views/order/settlementOrder/index.vue     |  29 ++++-
 .../settlementOrder/orderDetail/index.vue     |  65 +++++++----
 .../orderDetail/settlementPdf.vue             |  72 +++++++-----
 5 files changed, 173 insertions(+), 105 deletions(-)

diff --git a/src/views/order/loadOrder/index.vue b/src/views/order/loadOrder/index.vue
index c0ffe51..c4480dd 100644
--- a/src/views/order/loadOrder/index.vue
+++ b/src/views/order/loadOrder/index.vue
@@ -63,9 +63,9 @@
         align="center"
       >
         <template slot-scope="scope">
-          <div>基础费用：{{ scope.row.amount.toFixed(2) }}</div>
-          <div>附加费用：{{ scope.row.surchargeAmount.toFixed(4) }}</div>
-          <div>总费用：{{ scope.row.totalAmount.toFixed(4) }}</div>
+          <!-- <div>基础费用：{{ scope.row.amount.toFixed(2) }}</div>
+          <div>附加费用：{{ scope.row.surchargeAmount.toFixed(4) }}</div> -->
+          <div>{{ scope.row.totalAmount.toFixed(4) }}</div>
         </template>
       </el-table-column>
       <el-table-column prop="areaName" label="区域" align="center" />
diff --git a/src/views/order/settlementOrder/generateOrder/index.vue b/src/views/order/settlementOrder/generateOrder/index.vue
index 85e1970..9a58db0 100644
--- a/src/views/order/settlementOrder/generateOrder/index.vue
+++ b/src/views/order/settlementOrder/generateOrder/index.vue
@@ -58,9 +58,9 @@
         <el-table-column prop="orderTime" label="下单时间" align="center" width="180" />
         <el-table-column label="下单费用" width="180" align="center">
           <template slot-scope="scope">
-            <div>基础费用：{{ scope.row.orderAmount.toFixed(2) }}</div>
-            <div>附加费用：{{ scope.row.surchargeAmount.toFixed(4) }}</div>
-            <div>总费用：{{ scope.row.totalAmount.toFixed(4) }}</div>
+            <!-- <div>基础费用：{{ scope.row.orderAmount.toFixed(2) }}</div>
+            <div>附加费用：{{ scope.row.surchargeAmount.toFixed(4) }}</div> -->
+            <div>{{ scope.row.totalAmount.toFixed(4) }}</div>
           </template>
         </el-table-column>
         <el-table-column prop="scenicArea" label="景区" align="center" />
@@ -108,23 +108,17 @@
       :visible.sync="dialogVisible"
       width="50%"
     >
-      <el-table :data="settlementList">
-        <el-table-column prop="scenicArea" label="委托方">
-          <template slot-scope="scope">
-            委托方：{{ scope.row.scenicArea }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="weight" label="重量">
-          <template slot-scope="scope">
-            重量：{{ scope.row.weight }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="amount" label="金额">
-          <template slot-scope="scope">
-            金额：{{ scope.row.amount }}
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="settlement-list">
+        <el-card v-for="item in settlementList" :key="item.attractionId" class="settlement-card">
+          <div class="settlement-item">
+            <h3>委托方：{{ getScenicName(item.attractionId) }}</h3>
+            <div class="settlement-info">
+              <p>重量：{{ item.cargoWeight }} kg</p>
+              <p>金额：{{ item.totalAmount }} 元</p>
+            </div>
+          </div>
+        </el-card>
+      </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleCancel">取消</el-button>
         <el-button type="primary" @click="handleConfirm">确认生成</el-button>
@@ -329,38 +323,13 @@ export default {
         return
       }
 
-      // 按景区分组并生成结算列表
-      const ordersByScenic = {}
-      this.selection.forEach(order => {
-        if (!ordersByScenic[order.scenicArea]) {
-          ordersByScenic[order.scenicArea] = []
-        }
-        ordersByScenic[order.scenicArea].push(order)
-      })
-
-      // 生成结算列表数据
-      this.settlementList = Object.keys(ordersByScenic).map(scenicArea => ({
-        scenicArea: scenicArea,
-        weight: '100kg', // 示例数据，实际应根据订单计算
-        amount: '100元' // 示例数据，实际应根据订单计算
-      }))
-
       // 调用接口获取结算确认列表
       getGenerateSettleOrderConfirmList(this.selection.map(order => order.id))
         .then(response => {
-          if (response.success) {
-            // 成功获取结算确认列表
-            this.settlementList = response.data || []
-            // 获取的数据为attractionId,cargoWeight,totalAmount,需要转换
-            // 通过attractionId获取景区名称
-            this.settlementList = this.settlementList.map(item => {
-              const scenic = this.scenicAreaOptions.find(s => s.id === item.attractionId)
-              return {
-                scenicArea: scenic ? scenic.name : '未知景区',
-                weight: item.cargoWeight,
-                amount: item.totalAmount
-              }
-            })
+          if (response) {
+            // 成功获取结算确认列表，直接使用API返回的数据
+
+            this.settlementList = response || []
             // 如果没有数据，提示用户
             if (this.settlementList.length === 0) {
               this.$message.warning('没有可生成结算单的订单')
@@ -387,7 +356,7 @@ export default {
         this.selection.map(order => order.id)
       )
         .then(response => {
-          if (response.success) {
+          if (response) {
             this.$message.success('结算单生成成功')
             this.dialogVisible = false
             this.$router.push('/order/orderDetail')
@@ -404,6 +373,11 @@ export default {
 
     handleCancel() {
       this.dialogVisible = false
+    },
+
+    getScenicName(attractionId) {
+      const scenic = this.scenicAreaOptions.find(s => s.id === attractionId)
+      return scenic ? scenic.name : '未知景区'
     }
   }
 }
@@ -486,4 +460,36 @@ export default {
   margin: 20px 0;
   padding: 20px 0;
 }
+
+.settlement-list {
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.settlement-card {
+  flex: 0 0 auto;
+  width: calc(33.33% - 7px);
+  min-width: 200px;
+  margin: 0;
+
+  .settlement-item {
+    text-align: center;
+
+    h3 {
+      margin: 0 0 8px 0;
+      color: #303133;
+      font-size: 14px;
+    }
+
+    .settlement-info {
+      p {
+        margin: 4px 0;
+        color: #606266;
+        font-size: 14px;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/order/settlementOrder/index.vue b/src/views/order/settlementOrder/index.vue
index 42658fa..ef93c99 100644
--- a/src/views/order/settlementOrder/index.vue
+++ b/src/views/order/settlementOrder/index.vue
@@ -1,5 +1,12 @@
 <template>
   <div class="app-container">
+    <!-- PDF导出组件 -->
+    <settlement-pdf
+      v-if="currentSettlementId"
+      ref="settlementPdf"
+      :settlement-order-id="currentSettlementId"
+      v-show="false"
+    />
     <!-- 查询及操作区域 -->
     <div class="head-container">
       <div class="filter-container">
@@ -75,8 +82,12 @@
 <script>
 import { getSettleOrderList } from '@/api/order'
 import { getUserNameValue } from '@/api/dropdown'
+import SettlementPdf from './orderDetail/settlementPdf.vue'
 
 export default {
+  components: {
+    SettlementPdf
+  },
   name: 'settlementOrder',
   data() {
     return {
@@ -89,6 +100,7 @@ export default {
         size: 10,
         total: 2
       },
+      currentSettlementId: null,
       tableData: [
         {
           attractionId: 2,
@@ -174,9 +186,20 @@ export default {
         query: { orderId: row.id.toString() }
       })
     },
-    handlePrint(row) {
-      // 打印结算单
-      console.log('打印结算单:', row)
+    async handlePrint(row) {
+      if (row.id) {
+        this.currentSettlementId = row.id.toString()
+        try {
+          // 等待vue渲染
+          await this.$nextTick()
+          await this.$refs.settlementPdf.generatePDF()
+        } catch (error) {
+          console.error('Error generating PDF:', error)
+          this.$message.error('导出PDF失败')
+        }
+      } else {
+        this.$message.warning('没有结算单ID')
+      }
     },
     handleGenerate() {
       this.$router.push('/order/generateOrder')
diff --git a/src/views/order/settlementOrder/orderDetail/index.vue b/src/views/order/settlementOrder/orderDetail/index.vue
index 8b96244..ac94486 100644
--- a/src/views/order/settlementOrder/orderDetail/index.vue
+++ b/src/views/order/settlementOrder/orderDetail/index.vue
@@ -123,15 +123,15 @@
     <!-- 操作按钮 -->
     <div class="action-buttons">
       <el-button
-        v-if="settlementStatus === 0"
+        :disabled="!(settlementStatus === 0)"
         type="primary"
         @click="handleCancelSettlement"
       >
         取消结算
       </el-button>
-      <el-button type="primary" @click="handlePrint">导出结算单</el-button>
+      <el-button type="primary" @click="handlePrint">打印结算单</el-button>
       <el-button
-        v-if="settlementStatus === 0"
+        v-if="settlementStatus === 2"
         type="success"
         @click="handleStatusChange(1)"
       >
@@ -148,15 +148,17 @@
 
     <!-- PDF导出组件 -->
     <settlement-pdf
+      v-if="$route.query.orderId"
       ref="settlementPdf"
       :order-data="currentOrder"
+      :settlement-order-id="$route.query.orderId"
       v-show="false"
     />
   </div>
 </template>
 
 <script>
-import { getSettleOrderDetail, updateSettleOrderStatus } from '@/api/order'
+import { getSettleOrderDetail, updateSettleOrderStatus, printSettleOrderData } from '@/api/order'
 import { getDetail } from "@/api/system/pilot";
 import { getCustomerId } from '@/api/system/customer'
 import { getScenicValue } from '@/api/dropdown'
@@ -175,6 +177,7 @@ export default {
       scenicAreaOptions: [],
       settlementStatus: 0,
       currentOrder: null,
+      originalData: [], // 存储原始数据，用于筛选
       query: {
         batchNo: "",
         scenicArea: "",
@@ -223,6 +226,7 @@ export default {
           const scenic = scenicResponse.find(s => s.key === item.attractionId)
           item.scenicName = scenic ? scenic.value : ''
         }))
+        this.originalData = settleOrderDetail // 保存原始数据
         this.tableData = settleOrderDetail
         if(settleOrderDetail.length > 0) {
           this.currentOrder = settleOrderDetail[0]
@@ -237,23 +241,39 @@ export default {
     }
   },
   methods: {
-    async handleSearch() {
+    handleSearch() {
       this.loading = true
       try {
-        const params = {
-          batchNo: this.query.batchNo,
-          attractionId: this.query.scenicArea,
-          startTime: this.query.dateRange ? this.query.dateRange[0] : null,
-          endTime: this.query.dateRange ? this.query.dateRange[1] : null
-        }
-        const settleOrderDetail = await getSettleOrderDetail(params)
-        await Promise.all(settleOrderDetail.map(async (item) => {
-          const customerResponse = await getCustomerId(item.customerId)
-          item.customerName = customerResponse.name
-          const scenic = this.scenicAreaOptions.find(s => s.value === item.attractionId)
-          item.scenicName = scenic ? scenic.label : ''
-        }))
-        this.tableData = settleOrderDetail
+        // 从原始数据中筛选
+        const filteredData = this.originalData.filter(item => {
+          let matchesBatchNo = true
+          let matchesScenicArea = true
+          let matchesDateRange = true
+
+          // 批次号筛选
+          if (this.query.batchNo) {
+            matchesBatchNo = item.batchNo.toLowerCase().includes(this.query.batchNo.toLowerCase())
+          }
+
+          // 景区筛选
+          if (this.query.scenicArea) {
+            matchesScenicArea = item.attractionId === this.query.scenicArea
+          }
+
+          // 日期范围筛选
+          if (this.query.dateRange && this.query.dateRange.length === 2) {
+            const orderDate = new Date(item.createTime)
+            const startDate = new Date(this.query.dateRange[0])
+            const endDate = new Date(this.query.dateRange[1])
+            startDate.setHours(0, 0, 0, 0)
+            endDate.setHours(23, 59, 59, 999)
+            matchesDateRange = orderDate >= startDate && orderDate <= endDate
+          }
+
+          return matchesBatchNo && matchesScenicArea && matchesDateRange
+        })
+
+        this.tableData = filteredData
         // 重置分页到第一页
         this.page.current = 1
       } catch (error) {
@@ -307,16 +327,17 @@ export default {
       this.page.current = val;
     },
     async handlePrint() {
-      // 调用PDF组件的导出方法
-      if (this.currentOrder) {
+      if (this.$route.query.orderId) {
         try {
+          // Wait for Vue to render the component
+          await this.$nextTick()
           await this.$refs.settlementPdf.generatePDF()
         } catch (error) {
           console.error('Error generating PDF:', error)
           this.$message.error('导出PDF失败')
         }
       } else {
-        this.$message.warning('没有可导出的订单数据')
+        this.$message.warning('没有结算单ID')
       }
     },
     async handleStatusChange(status) {
diff --git a/src/views/order/settlementOrder/orderDetail/settlementPdf.vue b/src/views/order/settlementOrder/orderDetail/settlementPdf.vue
index 8c927d4..4396bc6 100644
--- a/src/views/order/settlementOrder/orderDetail/settlementPdf.vue
+++ b/src/views/order/settlementOrder/orderDetail/settlementPdf.vue
@@ -61,6 +61,7 @@
 
 <script>
 import html2pdf from 'html2pdf.js'
+import { printSettleOrderData } from '@/api/order'
 
 export default {
   name: 'SettlementPdf',
@@ -68,6 +69,10 @@ export default {
     orderData: {
       type: Object,
       default: () => ({})
+    },
+    settlementOrderId: {
+      type: [String, Number],
+      required: true
     }
   },
   data() {
@@ -80,7 +85,8 @@ export default {
         amount: '',
         amountCN: '',
         items: []
-      }
+      },
+      pdfData: null
     }
   },
   watch: {
@@ -94,39 +100,51 @@ export default {
     }
   },
   methods: {
-    formatData(orderData) {
-      if (!orderData) {
-        console.warn('No order data provided')
+    async formatData(data) {
+      if (!data) {
+        console.warn('No data provided')
         return
       }
-      console.log('Formatting order data:', orderData)
+
       // 格式化数据以适应PDF模板
       this.data = {
-        statementId: orderData.orderNo || '',
-        date: orderData.createTime || '',
-        customer: orderData.customerName || '',
-        quantity: orderData.cargoWeight ? `${orderData.cargoWeight}KG` : '0KG',
-        amount: orderData.totalAmount ? `${orderData.totalAmount}元` : '0元',
-        amountCN: this.convertToChinese(orderData.totalAmount || 0),
-        items: [{
-          orderNo: orderData.orderType === 1?'载物飞行':'载人飞行' || orderData.orderNo || '',
-          execTime: orderData.orderFinishTime || '',
-          weight: orderData.cargoWeight ? `${orderData.cargoWeight}KG` : '0KG',
-          amount: orderData.totalAmount ? `${orderData.totalAmount}元` : '0元',
-          confirmer: orderData.createBy || ''
-        }]
+        statementId: this.settlementOrderId || '',
+        date: data.settlementTimeScope || '',
+        customer: data.clientName || '',
+        quantity: data.cargoWeight ? `${data.cargoWeight}KG` : '0KG',
+        amount: data.totalAmount ? `${data.totalAmount}元` : '0元',
+        amountCN: data.totalAmountUpper || '',
+        items: data.settlementDetailList ? data.settlementDetailList.map(item => ({
+          orderNo: item.orderNo || '',
+          execTime: item.orderCreateTime || '',
+          weight: item.cargoWeight ? `${item.cargoWeight}KG` : '0KG',
+          amount: item.totalAmount ? `${item.totalAmount}元` : '0元',
+          confirmer: item.confirmPerson || ''
+        })) : []
       }
     },
-    generatePDF() {
-      const element = this.$refs.pdfContent
-      const opt = {
-        margin: 0.5,
-        filename: `${this.data.statementId}.pdf`,
-        image: { type: 'jpeg', quality: 0.98 },
-        html2canvas: { scale: 2 },
-        jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
+    async generatePDF() {
+      try {
+        // 调用接口获取数据
+        const response = await printSettleOrderData(this.settlementOrderId)
+        this.pdfData = response
+        // 格式化数据
+        await this.formatData(response)
+
+        // 生成PDF
+        const element = this.$refs.pdfContent
+        const opt = {
+          margin: 0.5,
+          filename: `结算单_${this.data.statementId}.pdf`,
+          image: { type: 'jpeg', quality: 0.98 },
+          html2canvas: { scale: 2 },
+          jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
+        }
+        return html2pdf().set(opt).from(element).save()
+      } catch (error) {
+        console.error('Error generating PDF:', error)
+        throw error
       }
-      return html2pdf().set(opt).from(element).save()
     },
     convertToChinese(num) {
       const digitCN = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']