From 79bd6b57dd59b2b9d2557aeaca2bb28f909699a1 Mon Sep 17 00:00:00 2001
From: hr121 <568127468@qq.com>
Date: Thu, 31 Jul 2025 19:07:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=86html2pdf=E5=BA=93,?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E7=BB=93=E7=AE=97=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=8E=A5=E5=85=A5=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/api/dropdown.js                           |   9 +-
 src/api/order.js                              |  16 +-
 src/api/system/customer.js                    |  10 +-
 src/views/aircraft/index.vue                  |   2 +-
 src/views/order/loadOrder/index.vue           |   4 +-
 .../settlementOrder/generateOrder/index.vue   | 245 ++++++++++---
 src/views/order/settlementOrder/index.vue     |  91 +++--
 .../settlementOrder/orderDetail/index.vue     | 331 +++++++++++-------
 .../orderDetail/settlementPdf.vue             | 233 ++++++++++++
 10 files changed, 746 insertions(+), 196 deletions(-)
 create mode 100644 src/views/order/settlementOrder/orderDetail/settlementPdf.vue

diff --git a/package.json b/package.json
index 6a8d6f8..00f0559 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "element-ui": "^2.15.14",
     "file-saver": "1.3.8",
     "fuse.js": "3.4.4",
+    "html2pdf.js": "^0.10.3",
     "js-beautify": "^1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
diff --git a/src/api/dropdown.js b/src/api/dropdown.js
index 4e17e50..6b6a6d5 100644
--- a/src/api/dropdown.js
+++ b/src/api/dropdown.js
@@ -9,4 +9,11 @@ export function getScenicValue (data) {
   })
 }
 
-export default { getScenicValue }
+// 获取用户名称下拉
+export function getUserNameValue (userType) {
+  return request({
+    url: `api/dataDropdown/obtainUserListByType/${userType}`,
+    method: 'get',
+  })
+}
+export default { getScenicValue, getUserNameValue }
diff --git a/src/api/order.js b/src/api/order.js
index b778008..e05a050 100644
--- a/src/api/order.js
+++ b/src/api/order.js
@@ -44,7 +44,13 @@ export function generateSettlementOrder(params) {
 }
 
 // 获取生成结算单确认列表
-// export function get
+export function getGenerateSettleOrderConfirmList(params) {
+  return request({
+    url: '/api/settlementOrder/generateSettlementOrderConfirmList',
+    method: 'post',
+    data: params
+  })
+}
 
 // 更新结算单状态
 export function updateSettleOrderStatus(settlementOrderId, settlementOrderStatus) {
@@ -53,3 +59,11 @@ export function updateSettleOrderStatus(settlementOrderId, settlementOrderStatus
     method: 'put',
   })
 }
+
+// 打印结算单数据
+export function printSettleOrderData(settlementOrderId) {
+  return request({
+    url: `api/settlementOrder/printSettlementOrder/${settlementOrderId}`,
+    method: 'get',
+  })
+}
diff --git a/src/api/system/customer.js b/src/api/system/customer.js
index 0b6809f..ff7c7eb 100644
--- a/src/api/system/customer.js
+++ b/src/api/system/customer.js
@@ -39,4 +39,12 @@ export function allCustomer() {
   })
 }
 
-export default { add, enable, del, edit, allCustomer }
+//  查询单个客户信息
+export function getCustomerId(id) {
+  return request({
+    url: `aerocraftAdminApi/cnCustomer/${id}`,
+    method: 'get'
+  })
+}
+
+export default { add, enable, del, edit, allCustomer, getCustomerId }
diff --git a/src/views/aircraft/index.vue b/src/views/aircraft/index.vue
index d7ae6d1..6e7d753 100644
--- a/src/views/aircraft/index.vue
+++ b/src/views/aircraft/index.vue
@@ -517,7 +517,7 @@ export default {
       if (response) {
         // 确保有total字段
         if (response.total !== undefined) {
-          this.page.total = response.total;
+          this.page.total = Number(response.total);
         }
         // 确保records数组存在且是数组类型
         if (response && Array.isArray(response)) {
diff --git a/src/views/order/loadOrder/index.vue b/src/views/order/loadOrder/index.vue
index 9c78801..c0ffe51 100644
--- a/src/views/order/loadOrder/index.vue
+++ b/src/views/order/loadOrder/index.vue
@@ -144,7 +144,7 @@ export default {
     this.getScenics();
     this.getPilots();
     this.getCustomers();
-    this.getList();
+    // this.getList();
   },
   data() {
     return {
@@ -207,7 +207,7 @@ export default {
               id: record.id,
             };
           });
-          this.page.total = response.total || 0;
+          this.page.total = Number(response.total) || 0;
         })
         .finally(() => {
           this.loading = false;
diff --git a/src/views/order/settlementOrder/generateOrder/index.vue b/src/views/order/settlementOrder/generateOrder/index.vue
index 008722b..739083c 100644
--- a/src/views/order/settlementOrder/generateOrder/index.vue
+++ b/src/views/order/settlementOrder/generateOrder/index.vue
@@ -8,12 +8,12 @@
       <div class="filter-container">
         <div class="filter-item">
           <span class="label">景区：</span>
-          <el-select v-model="query.scenicArea" placeholder="请选择景区" clearable style="width: 200px;">
+          <el-select v-model="query.attractionId" placeholder="请选择景区" clearable style="width: 200px;">
             <el-option
               v-for="item in scenicAreaOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             />
           </el-select>
         </div>
@@ -56,19 +56,29 @@
         <el-table-column prop="customerName" label="客户名称" align="center" />
         <el-table-column prop="phoneNumber" label="手机号码" align="center" />
         <el-table-column prop="orderTime" label="下单时间" align="center" width="180" />
-        <el-table-column prop="orderAmount" label="下单费用" align="center" />
+        <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>
+          </template>
+        </el-table-column>
         <el-table-column prop="scenicArea" label="景区" align="center" />
         <el-table-column prop="route" label="路线" align="center" />
         <el-table-column prop="initiator" label="订单发起人" align="center" />
         <el-table-column prop="orderType" label="订单类型" align="center" />
         <el-table-column prop="orderStatus" label="订单状态" align="center">
           <template slot-scope="scope">
-            <span>{{ scope.row.orderStatus }}</span>
+            <span :class="['status-text', scope.row.orderStatus === '已完成' ? 'success' : '']">
+              {{ scope.row.orderStatus }}
+            </span>
           </template>
         </el-table-column>
         <el-table-column prop="settlementStatus" label="结算状态" align="center">
           <template slot-scope="scope">
-            <span>{{ scope.row.settlementStatus }}</span>
+            <span :class="['status-text', scope.row.settlementStatus === '已结算' ? 'success' : '']">
+              {{ scope.row.settlementStatus }}
+            </span>
           </template>
         </el-table-column>
       </el-table>
@@ -123,9 +133,26 @@
   </div>
 </template>
 
+<!--
+  先调用获取生成结算单确认列表接口,当点击确认生成时调用生成结算单接口
+-->
 <script>
+import { getOrderList, getGenerateSettleOrderConfirmList, generateSettlementOrder } from "@/api/order";
+import { allAreas } from "@/api/system/area";
+import { allScenic } from "@/api/system/scenic";
+import { allCustomer } from "@/api/system/customer";
+import { getList } from "@/api/system/pilot";
+import { getUser } from "@/api/system/user";
+import store from "@/store";
+
 export default {
   name: 'generateOrder',
+  created() {
+    this.getScenics();
+    this.getCustomers();
+    this.getPilots();
+    this.getList();
+  },
   data() {
     const defaultStartDate = new Date('2015-10-02')
     const defaultEndDate = new Date('2015-10-10')
@@ -134,7 +161,8 @@ export default {
       settlementList: [],
       loading: false,
       query: {
-        scenicArea: '',
+        attractionId: undefined,
+        customerId: undefined,
         dateRange: [defaultStartDate, defaultEndDate]
       },
       defaultDateRange: [defaultStartDate, defaultEndDate],
@@ -143,36 +171,134 @@ export default {
         size: 10,
         total: 0
       },
-      scenicAreaOptions: [
-        { value: 'baiYunShan', label: '白云山' },
-        { value: 'huangShan', label: '黄山' },
-        { value: 'taiShan', label: '泰山' }
-      ],
-      tableData: [
-        {
-          customerName: '小明',
-          phoneNumber: '12345678',
-          orderTime: '2024-01-01 00:00:00',
-          orderAmount: '100.00',
-          scenicArea: '白云山',
-          route: 'a-b',
-          initiator: '小红',
-          orderType: '载物飞行',
-          orderStatus: '已完成',
-          settlementStatus: '未结算'
-        }
-      ],
+      scenicAreaOptions: [],
+      customerOptions: [],
+      pilotOptions: [],
+      tableData: [],
       selection: []
     }
   },
   methods: {
+    getList() {
+      this.loading = true;
+      const params = {
+        attractionId: this.query.attractionId,
+        customerId: this.query.customerId,
+        startTime: this.query.dateRange ? this.query.dateRange[0] : null,
+        endTime: this.query.dateRange ? this.query.dateRange[1] : null,
+        current: this.page.current,
+        size: this.page.size,
+        mainOrderStatus: 2, // 只查询已完成的订单
+        settlementStatus: 0 // 只查询未结算的订单
+      };
+      getOrderList(params)
+        .then((response) => {
+          this.tableData = response.records.map((record) => {
+            const customer = this.customerOptions.find(
+              (c) => c.id === record.customerId
+            );
+            const scenic = this.scenicAreaOptions.find(s => s.id === record.attractionId);
+            const initiator = this.pilotOptions.find(p => p.id === record.orderInitiatorId);
+            return {
+              id: record.id,
+              customerName: customer ? customer.name : "未知客户",
+              phoneNumber: record.customerPhone,
+              orderTime: record.orderCreateTime,
+              orderAmount: record.amount,
+              totalAmount: record.totalAmount,
+              surchargeAmount: record.surchargeAmount,
+              scenicArea: scenic ? scenic.name : "未知景区",
+              route: record.routeName,
+              initiator: initiator ? initiator.name : "未知发起人",
+              orderType: record.orderType === 1 ? "载物飞行" : "载人飞行",
+              orderStatus: this.getOrderStatus(record.mainOrderStatus),
+              settlementStatus: this.getSettlementStatus(record.settlementStatus),
+            };
+          });
+          this.page.total = Number(response.total) || 0;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+
+    async getScenics() {
+      try {
+        let res = [];
+        const userRes = await getUser({ id: store.getters.user.id });
+        if (userRes && userRes.content && userRes.content.length > 0) {
+          const userInfo = userRes.content[0];
+          if (userInfo.roles && userInfo.roles.length > 0) {
+            this.userRole = userInfo.roles[0].name;
+            if (this.userRole === "区域负责人") {
+              res = await allScenic({areaId: userInfo.areaId});
+            } else if (this.userRole === "管理员" || this.userRole === "财务") {
+              res = await allScenic();
+            }
+          }
+        }
+        if (res && Array.isArray(res)) {
+          this.scenicAreaOptions = res.map((scenic) => ({
+            id: scenic.id,
+            name: scenic.name
+          }));
+        }
+        this.getList();
+      } catch (error) {
+        console.error("获取景区列表失败:", error);
+      }
+    },
+
+    async getPilots() {
+      try {
+        const res = await getList();
+        if (res) {
+          this.pilotOptions = res.content.map((pilot) => ({
+            id: pilot.id,
+            name: pilot.name,
+          }));
+        }
+      } catch (error) {
+        console.error("获取飞行员列表失败:", error);
+      }
+    },
+
+    async getCustomers() {
+      try {
+        const res = await allCustomer();
+        if (res) {
+          this.customerOptions = res.map((customer) => ({
+            id: customer.id,
+            name: customer.name,
+          }));
+        }
+      } catch (error) {
+        console.error("获取客户列表失败:", error);
+      }
+    },
+
+    getOrderStatus(status) {
+      const statusMap = {
+        0: "未进行",
+        1: "进行中",
+        2: "已完成",
+        3: "已取消"
+      };
+      return statusMap[status] || "未知状态";
+    },
+
+    getSettlementStatus(status) {
+      const statusMap = {
+        0: "未结算",
+        1: "结算中",
+        2: "结算完成"
+      };
+      return statusMap[status] || "未知状态";
+    },
+
     handleSearch() {
-      // 仅显示已完成且未结算的订单
-      this.loading = true
-      // 实际环境中应该调用API
-      setTimeout(() => {
-        this.loading = false
-      }, 500)
+      this.page.current = 1;
+      this.getList();
     },
 
     handleSelectAll() {
@@ -182,14 +308,12 @@ export default {
       this.selection = val
     },
     handleSizeChange(val) {
-      this.page.size = val
-      this.page.total = this.tableData.length // 更新总数
-      // 重新加载数据
+      this.page.size = val;
+      this.getList();
     },
     handleCurrentChange(val) {
-      this.page.current = val
-      this.page.total = this.tableData.length // 更新总数
-      // 重新加载数据
+      this.page.current = val;
+      this.getList();
     },
     handleDetail(row) {
       // 查看详情
@@ -221,14 +345,46 @@ export default {
         amount: '100元' // 示例数据，实际应根据订单计算
       }))
 
+      // 调用接口获取结算确认列表
+      getGenerateSettleOrderConfirmList({
+        orders: this.selection.map(order => order.id)
+      })
+        .then(response => {
+          if (response.success) {
+            // 成功获取结算确认列表
+            this.settlementList = response.data || []
+          } else {
+            this.$message.error('获取结算确认列表失败: ' + response.message)
+          }
+        })
+        .catch(error => {
+          console.error('获取结算确认列表失败:', error)
+          this.$message.error('获取结算确认列表失败，请稍后再试')
+        })
+
       // 显示确认弹窗
       this.dialogVisible = true
     },
 
     handleConfirm() {
+      // 调用生成结算单接口
+      generateSettlementOrder({
+        orders: this.selection.map(order => order.id)
+      })
+        .then(response => {
+          if (response.success) {
+            this.$message.success('结算单生成成功')
+            this.dialogVisible = false
+            this.$router.push('/order/orderDetail')
+          } else {
+            this.$message.error('结算单生成失败: ' + response.message)
+          }
+        })
+        .catch(error => {
+          console.error('生成结算单失败:', error)
+          this.$message.error('生成结算单失败，请稍后再试')
+        })
       this.dialogVisible = false
-      // 跳转到订单详情页
-      this.$router.push('/order/orderDetail')
     },
 
     handleCancel() {
@@ -239,6 +395,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.status-text {
+  color: #f56c6c;
+  &.success {
+    color: #67c23a;
+  }
+}
+
 .app-container {
   padding: 20px;
 }
diff --git a/src/views/order/settlementOrder/index.vue b/src/views/order/settlementOrder/index.vue
index 35bdcec..42658fa 100644
--- a/src/views/order/settlementOrder/index.vue
+++ b/src/views/order/settlementOrder/index.vue
@@ -28,16 +28,11 @@
       style="width: 100%"
       @selection-change="handleSelectionChange"
     >
-      <el-table-column prop="batchNo" label="订单批次号" align="left" />
-      <el-table-column prop="status" label="结算状态" align="left">
-        <template slot-scope="scope">
-          <span>{{ scope.row.status }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="settlementTime" label="结算时间" width="180" align="left" />
-      <el-table-column prop="operator" label="制单人" align="left" />
-      <el-table-column prop="exportTime" label="导出时间" width="180" align="left" />
-      <el-table-column prop="settlementStatus" label="结算状态" align="left">
+      <el-table-column prop="batchNo" label="订单批次号" align="center" />
+      <el-table-column prop="settlementTimeScope" label="结算时间" width="180" align="center" />
+      <el-table-column prop="operator" label="制单人" align="center" />
+      <el-table-column prop="updateTime" label="导出时间" width="180" align="center" />
+      <el-table-column prop="settlementStatus" label="结算状态" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.settlementStatus }}</span>
         </template>
@@ -78,6 +73,9 @@
 </template>
 
 <script>
+import { getSettleOrderList } from '@/api/order'
+import { getUserNameValue } from '@/api/dropdown'
+
 export default {
   name: 'settlementOrder',
   data() {
@@ -93,26 +91,65 @@ export default {
       },
       tableData: [
         {
-          batchNo: 'JS123456789',
-          status: '结算中',
-          settlementTime: '2025-01-01 00:00:00',
-          operator: '小明',
-          exportTime: '2025-01-01 00:00:00',
-          settlementStatus: '结算中'
+          attractionId: 2,
+          batchNo: "JS_2025072600008",
+          createBy: "admin",
+          createTime: "2025-07-26 14:42:38",
+          operatorId: 1,
+          settlementStatus: 2,
+          settlementTimeScope: "2025-07-19 17:00:00~2025-07-19 17:00:00",
+          updateBy: "admin",
+          updateTime: "2025-07-26 14:42:38"
         },
-        {
-          batchNo: 'JS123456789',
-          status: '待付款',
-          settlementTime: '2025-01-01 00:00:00',
-          operator: '小明',
-          exportTime: '2025-01-01 00:00:00',
-          settlementStatus: '已确认'
-        }
       ],
       selection: []
     }
   },
+  created() {
+    this.fetchData()
+  },
   methods: {
+    async fetchData() {
+      this.loading = true
+      try {
+        const response = await getSettleOrderList(this.query)
+        const operatorList = await getUserNameValue(0); // 只请求一次，避免每条都请求
+
+        const operatorMap = new Map();
+        operatorList.forEach(item => {
+          operatorMap.set(item.key, item.value);
+        });
+        response.records = response.records.map(record => ({
+          ...record,
+          settlementStatus: this.getSettlementStatus(record.settlementStatus),
+          operator: record.operatorId ? (operatorMap.get(record.operatorId) || '未知') : '未知',
+        }))
+        console.log('获取结算单列表:', response)
+        this.tableData = response.records || []
+        this.page.total = Number(response.total) || 0
+      } catch (error) {
+        console.error('获取结算单列表失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    getSettlementStatus(status) {
+      const statusMap = {
+        0: "结算中",
+        1: "已确认",
+        2: "结算完成",
+        3: "已取消",
+      };
+      return statusMap[status] || "未知状态";
+    },
+    async getOperatorName(operatorId) {
+      const response = await getUserNameValue(0);
+      if (!response || response.length === 0) {
+        return '未知';
+      }
+      const operatorName = response.find(item => item.key === operatorId);
+      return operatorName.value || '未知';
+    },
     handleSearch() {
       // 实现搜索逻辑
       console.log('搜索条件:', this.query)
@@ -131,6 +168,11 @@ export default {
     handleDetail(row) {
       // 查看详情
       console.log('查看详情:', row)
+      // 跳转到订单详情页
+      this.$router.push({
+        path: '/order/orderDetail',
+        query: { orderId: row.id.toString() }
+      })
     },
     handlePrint(row) {
       // 打印结算单
@@ -151,7 +193,6 @@ export default {
 .filter-container {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
   gap: 10px;
 
   .filter-item {
diff --git a/src/views/order/settlementOrder/orderDetail/index.vue b/src/views/order/settlementOrder/orderDetail/index.vue
index 3a28dab..8b96244 100644
--- a/src/views/order/settlementOrder/orderDetail/index.vue
+++ b/src/views/order/settlementOrder/orderDetail/index.vue
@@ -13,6 +13,7 @@
             placeholder="请输入订单批次号"
             style="width: 200px"
             clearable
+            @input="handleSearch"
           />
         </div>
         <div class="filter-item">
@@ -22,6 +23,7 @@
             placeholder="请选择景区"
             clearable
             style="width: 200px"
+            @change="handleSearch"
           >
             <el-option
               v-for="item in scenicAreaOptions"
@@ -42,6 +44,7 @@
             :default-time="['00:00:00', '23:59:59']"
             :default-value="defaultDateRange"
             style="width: 350px"
+            @change="handleSearch"
           />
         </div>
       </div>
@@ -57,25 +60,38 @@
       <el-table
         ref="table"
         v-loading="loading"
-        :data="tableData"
+        :data="paginatedData"
         style="width: 100%"
       >
         <el-table-column prop="customerName" label="客户名称" align="center" />
-        <el-table-column prop="phoneNumber" label="手机号码" align="center" />
-        <el-table-column
-          prop="orderTime"
-          label="下单时间"
-          align="center"
-          width="180"
-        />
-        <el-table-column prop="orderAmount" label="下单费用" align="center" />
-        <el-table-column prop="scenicArea" label="景区" align="center" />
-        <el-table-column prop="route" label="路线" align="center" />
-        <el-table-column prop="initiator" label="订单发起人" align="center" />
-        <el-table-column prop="orderType" label="订单类型" align="center" />
-        <el-table-column prop="orderStatus" label="订单状态" align="center">
+        <el-table-column prop="phone" label="手机号码" align="center" />
+        <el-table-column prop="createTime" label="下单时间" align="center" width="180" />
+        <el-table-column prop="totalAmount" label="下单费用" align="center">
           <template slot-scope="scope">
-            <span>{{ scope.row.orderStatus }}</span>
+            <span>{{ scope.row.totalAmount.toLocaleString('zh', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="scenicName" label="景区" align="center" />
+        <el-table-column prop="routeIds" label="路线" align="center" />
+        <el-table-column prop="createBy" label="订单发起人" align="center" />
+        <el-table-column
+          prop="orderType"
+          label="订单类型"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.orderType === 1 ? '载物飞行' : '载人飞行' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="mainOrderStatus"
+          label="订单状态"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span :class="getSettlementStatusClass(scope.row.mainOrderStatus)">
+              {{ getOrderStatus(scope.row.mainOrderStatus) }}
+            </span>
           </template>
         </el-table-column>
         <el-table-column
@@ -85,7 +101,7 @@
         >
           <template slot-scope="scope">
             <span :class="getSettlementStatusClass(scope.row.settlementStatus)">
-              {{ scope.row.settlementStatus }}
+              {{ getSettlementStatusText(scope.row.settlementStatus) }}
             </span>
           </template>
         </el-table-column>
@@ -96,7 +112,7 @@
           :current-page.sync="page.current"
           :page-sizes="[10, 20, 50, 100]"
           :page-size="page.size"
-          :total="page.total"
+          :total="tableData.length"
           layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
@@ -107,31 +123,58 @@
     <!-- 操作按钮 -->
     <div class="action-buttons">
       <el-button
+        v-if="settlementStatus === 0"
         type="primary"
         @click="handleCancelSettlement"
-        :disabled="settlementStatus !== '结算中'"
       >
         取消结算
       </el-button>
-      <el-button type="primary" @click="handlePrint"> 打印结算单 </el-button>
+      <el-button type="primary" @click="handlePrint">导出结算单</el-button>
+      <el-button
+        v-if="settlementStatus === 0"
+        type="success"
+        @click="handleStatusChange(1)"
+      >
+        确认结算
+      </el-button>
+      <el-button
+        v-if="settlementStatus === 1"
+        type="success"
+        @click="handleStatusChange(2)"
+      >
+        完成结算
+      </el-button>
     </div>
+
+    <!-- PDF导出组件 -->
+    <settlement-pdf
+      ref="settlementPdf"
+      :order-data="currentOrder"
+      v-show="false"
+    />
   </div>
 </template>
 
 <script>
+import { getSettleOrderDetail, updateSettleOrderStatus } from '@/api/order'
+import { getDetail } from "@/api/system/pilot";
+import { getCustomerId } from '@/api/system/customer'
+import { getScenicValue } from '@/api/dropdown'
+import SettlementPdf from './settlementPdf.vue'
+
 export default {
   name: "orderDetail",
+  components: {
+    SettlementPdf
+  },
   data() {
-    const defaultStartDate = new Date("2015-10-02");
-    const defaultEndDate = new Date("2015-10-10");
+    const defaultStartDate = new Date();
+    const defaultEndDate = new Date();
     return {
       loading: false,
-      settlementStatus: "结算中", // 当前结算单状态
-      scenicAreaOptions: [
-        { value: "baiYunShan", label: "白云山" },
-        { value: "huangShan", label: "黄山" },
-        { value: "taiShan", label: "泰山" },
-      ],
+      scenicAreaOptions: [],
+      settlementStatus: 0,
+      currentOrder: null,
       query: {
         batchNo: "",
         scenicArea: "",
@@ -140,98 +183,152 @@ export default {
       defaultDateRange: [defaultStartDate, defaultEndDate],
       page: {
         current: 1,
-        size: 10,
-        total: 3,
+        size: 10
       },
-      tableData: [
-        {
-          customerName: "小明",
-          phoneNumber: "12345678",
-          orderTime: "2024-01-01 00:00:00",
-          orderAmount: "100.00",
-          scenicArea: "白云山",
-          route: "a-b",
-          initiator: "小红",
-          orderType: "载物飞行",
-          orderStatus: "已完成",
-          settlementStatus: "未结算",
-        },
-        {
-          customerName: "小明",
-          phoneNumber: "12345678",
-          orderTime: "2024-01-01 00:00:00",
-          orderAmount: "100.00",
-          scenicArea: "白云山",
-          route: "a-b",
-          initiator: "小红",
-          orderType: "载物飞行",
-          orderStatus: "进行中",
-          settlementStatus: "结算中",
-        },
-        {
-          customerName: "小明",
-          phoneNumber: "12345678",
-          orderTime: "2024-01-01 00:00:00",
-          orderAmount: "100.00",
-          scenicArea: "白云山",
-          route: "a-b",
-          initiator: "小红",
-          orderType: "载物飞行",
-          orderStatus: "已完成",
-          settlementStatus: "结算完成",
-        },
-      ],
+      tableData: [],
       selection: [],
     };
   },
+  computed: {
+    paginatedData() {
+      const start = (this.page.current - 1) * this.page.size
+      const end = start + this.page.size
+      return this.tableData.slice(start, end)
+    }
+  },
+  async created() {
+    // 获取景区下拉数据
+    const scenicResponse = await getScenicValue()
+    this.scenicAreaOptions = scenicResponse.map(item => ({
+      value: item.key,
+      label: item.value
+    }))
+
+    // 获取订单详情并处理数据
+    const orderId = this.$route.query.orderId
+    if (orderId) {
+      this.loading = true
+      try {
+        const settleOrderDetail = await getSettleOrderDetail(orderId)
+        await Promise.all(settleOrderDetail.map(async (item) => {
+          // 获取客户名称
+          const customerResponse = await getCustomerId(item.customerId)
+          item.customerName = customerResponse.name
+
+          // 获取飞行员信息
+          const pilotResponse = await getDetail(item.orderInitiatorId)
+          item.createBy = pilotResponse.name
+
+          // 获取景区名称
+          const scenic = scenicResponse.find(s => s.key === item.attractionId)
+          item.scenicName = scenic ? scenic.value : ''
+        }))
+        this.tableData = settleOrderDetail
+        if(settleOrderDetail.length > 0) {
+          this.currentOrder = settleOrderDetail[0]
+          this.settlementStatus = settleOrderDetail[0].settlementStatus
+        }
+      } catch (error) {
+        console.error('Error fetching order details:', error)
+        this.$message.error('获取订单详情失败')
+      } finally {
+        this.loading = false
+      }
+    }
+  },
   methods: {
-    handleSearch() {
-      // 实现搜索逻辑
-      console.log("搜索条件:", this.query);
+    async 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
+        // 重置分页到第一页
+        this.page.current = 1
+      } catch (error) {
+        console.error('Error searching orders:', error)
+        this.$message.error('搜索订单失败')
+      } finally {
+        this.loading = false
+      }
+    },
+    getOrderStatus(status) {
+      const statusMap = {
+        0: "未进行",
+        1: "进行中",
+        2: "已完成",
+        3: "已取消"
+      };
+      return statusMap[status] || "未知状态";
+    },
+    getSettlementStatusText(status) {
+      const statusMap = {
+        0: '结算中',
+        1: '已确认',
+        2: '结算完成',
+        3: '已取消'
+      };
+      return statusMap[status] || '未知状态';
     },
     getSettlementStatusClass(status) {
       return {
-        "status-red": ["未结算", "结算中"].includes(status),
+        'status-red': [0, 3].includes(status),
+        'status-green': status === 2,
+        'status-orange': status === 1
       };
     },
-
-    handleCancelSettlement() {
-      if (this.settlementStatus === "结算中") {
-        // 更新所有订单的结算状态为未结算
-        this.tableData.forEach((order) => {
-          order.settlementStatus = "未结算";
-        });
-        this.settlementStatus = "未结算";
-        this.$message.success("已取消结算");
+    async handleCancelSettlement() {
+      try {
+        await updateSettleOrderStatus(this.$route.query.orderId, 3)
+        this.settlementStatus = 3
+        this.$message.success('取消结算成功')
+        this.handleSearch() // 刷新数据
+      } catch (error) {
+        console.error('Error canceling settlement:', error)
+        this.$message.error('取消结算失败')
       }
     },
     handleSizeChange(val) {
       this.page.size = val;
-      // 重新加载数据
+      this.page.current = 1; // 重置到第一页
     },
     handleCurrentChange(val) {
       this.page.current = val;
-      // 重新加载数据
     },
-    handleDetail(row) {
-      // 查看详情
-      console.log("查看详情:", row);
+    async handlePrint() {
+      // 调用PDF组件的导出方法
+      if (this.currentOrder) {
+        try {
+          await this.$refs.settlementPdf.generatePDF()
+        } catch (error) {
+          console.error('Error generating PDF:', error)
+          this.$message.error('导出PDF失败')
+        }
+      } else {
+        this.$message.warning('没有可导出的订单数据')
+      }
     },
-    handlePrint() {
-      // 根据当前状态流转到下一个状态
-      switch (this.settlementStatus) {
-        case "结算中":
-          this.settlementStatus = "已确认";
-          this.$message.success("结算单状态已更新为：已确认");
-          break;
-        case "已确认":
-          this.settlementStatus = "已完成";
-          this.$message.success("结算单状态已更新为：已完成");
-          break;
-        case "已完成":
-          // 执行打印逻辑
-          console.log("打印结算单");
-          break;
+    async handleStatusChange(status) {
+      try {
+        await updateSettleOrderStatus(this.$route.query.orderId, status)
+        this.settlementStatus = status
+        const statusText = status === 1 ? '已确认' : '已完成'
+        this.$message.success(`结算单状态已更新为：${statusText}`)
+        this.handleSearch() // 刷新数据
+      } catch (error) {
+        console.error('Error updating settlement status:', error)
+        this.$message.error('更新结算状态失败')
       }
     }
   }
@@ -293,26 +390,19 @@ export default {
 .status-red {
   color: #f56c6c;
 }
-
-// .pagination-container {
-//   position: fixed;
-//   bottom: 0;
-//   left: 200px;
-//   right: 0;
-//   height: 60px;
-//   background: white;
-//   padding: 10px;
-//   text-align: left;
-//   box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
-//   z-index: 1000;
-// }
-
-// .el-pagination {
-//   padding: 10px 20px;
-// }
+.status-green {
+  color: #67c23a;
+}
+.status-orange {
+  color: #e6a23c;
+}
 
 .el-table {
   margin-bottom: 70px;
+  margin-top: 20px;
+  ::v-deep .el-table__body-wrapper {
+    overflow-x: auto;
+  }
 }
 
 .el-button--text {
@@ -321,11 +411,4 @@ export default {
     color: #66b1ff;
   }
 }
-
-.el-table {
-  margin-top: 20px;
-  ::v-deep .el-table__body-wrapper {
-    overflow-x: auto;
-  }
-}
 </style>
diff --git a/src/views/order/settlementOrder/orderDetail/settlementPdf.vue b/src/views/order/settlementOrder/orderDetail/settlementPdf.vue
new file mode 100644
index 0000000..8c927d4
--- /dev/null
+++ b/src/views/order/settlementOrder/orderDetail/settlementPdf.vue
@@ -0,0 +1,233 @@
+<template>
+  <div>
+    <!-- PDF 可见区域 -->
+    <div id="pdf-content" ref="pdfContent" style="width: 100%; margin: 0 auto; padding: 20px;">
+      <h2 class="pdf-title">爱尚云收款结算单</h2>
+
+      <div class="info-row">
+        <div class="info-item">
+          <span class="label">结算单号:</span>
+          <span class="value">{{ data.statementId }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">结算时间:</span>
+          <span class="value">{{ data.date }}</span>
+        </div>
+      </div>
+      <div class="info-row">
+        <div class="info-item">
+          <span class="label">委托方:</span>
+          <span class="value">{{ data.customer }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">数量:</span>
+          <span class="value">{{ data.quantity }}</span>
+        </div>
+      </div>
+      <div class="info-row">
+        <div class="info-item">
+          <span class="label">金额（RMB）:</span>
+          <span class="value">{{ data.amount }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">大写：</span>
+          <span class="value">{{ data.amountCN }}</span>
+        </div>
+      </div>
+
+      <table border="1" cellspacing="0" cellpadding="5" width="100%">
+        <thead>
+          <tr>
+            <th style="width: 20%;">订单号</th>
+            <th style="width: 25%;">执行时间</th>
+            <th style="width: 15%;">重量</th>
+            <th style="width: 20%;">金额</th>
+            <th style="width: 20%;">确认人</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in data.items" :key="index">
+            <td>{{ item.orderNo }}</td>
+            <td>{{ item.execTime }}</td>
+            <td>{{ item.weight }}</td>
+            <td>{{ item.amount }}</td>
+            <td>{{ item.confirmer }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script>
+import html2pdf from 'html2pdf.js'
+
+export default {
+  name: 'SettlementPdf',
+  props: {
+    orderData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      data: {
+        statementId: '',
+        date: '',
+        customer: '',
+        quantity: '',
+        amount: '',
+        amountCN: '',
+        items: []
+      }
+    }
+  },
+  watch: {
+    orderData: {
+      handler(newVal) {
+        if (newVal) {
+          this.formatData(newVal)
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    formatData(orderData) {
+      if (!orderData) {
+        console.warn('No order 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 || ''
+        }]
+      }
+    },
+    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' }
+      }
+      return html2pdf().set(opt).from(element).save()
+    },
+    convertToChinese(num) {
+      const digitCN = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
+      const unitCN = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿']
+      let str = ''
+
+      // 处理整数部分
+      const intNum = Math.floor(num)
+      const intStr = intNum.toString()
+      for (let i = 0; i < intStr.length; i++) {
+        const digit = parseInt(intStr[i])
+        str += digitCN[digit] + unitCN[intStr.length - 1 - i]
+      }
+
+      // 处理小数部分
+      const decimalNum = Math.round((num - intNum) * 100)
+      if (decimalNum > 0) {
+        str += '元'
+        const decStr = decimalNum.toString().padStart(2, '0')
+        if (decStr[0] !== '0') {
+          str += digitCN[parseInt(decStr[0])] + '角'
+        }
+        if (decStr[1] !== '0') {
+          str += digitCN[parseInt(decStr[1])] + '分'
+        }
+      } else {
+        str += '元整'
+      }
+
+      return str
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pdf-title {
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  font-family: SimSun, "宋体", serif;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-bottom: 5px;
+  line-height: 1.8;
+  font-size: 20px;
+  font-family: SimSun, "宋体", serif;
+}
+
+.info-item {
+  flex: 0 0 45%;
+  margin-bottom: 10px;
+  /* display: flex;
+  flex-wrap: wrap; */
+  word-break: break-word;
+}
+
+.info-item .label {
+  white-space: nowrap;
+  margin-right: 5px;
+}
+
+.info-item .value {
+  box-sizing: border-box;
+  /* 增加下划线与字体距离 */
+  text-decoration: underline;
+  text-underline-offset: 16px;
+  word-break: break-word;
+}
+
+table {
+  border-collapse: collapse;
+  margin-top: 30px;
+  font-size: 16px;
+}
+
+th, td {
+  text-align: center;
+  padding: 12px 8px;
+  word-break: break-word;
+  white-space: normal;
+  line-height: 1.6;
+}
+
+/* 执行时间列的样式 */
+th:nth-child(2),
+td:nth-child(2) {
+  font-family: Calibri, sans-serif;
+}
+
+/* 重量列的样式 */
+td:nth-child(3) {
+  font-weight: bold;
+}
+
+#pdf-content {
+  line-height: 1.6;
+}
+</style>