aircraft-admin/src/views/order/settlementOrder/orderDetail/index.vue

<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <h2 class="page-title">结算单详情</h2>

    <!-- 查询区域 -->
    <div class="head-container">
      <div class="filter-container">
        <div class="filter-item">
          <span class="label">订单批次号：</span>
          <el-input
            v-model="query.batchNo"
            placeholder="请输入订单批次号"
            style="width: 200px"
            clearable
            @input="handleSearch"
          />
        </div>
        <div class="filter-item">
          <span class="label">景区：</span>
          <el-select
            v-model="query.scenicArea"
            placeholder="请选择景区"
            clearable
            style="width: 200px"
            @change="handleSearch"
          >
            <el-option
              v-for="item in scenicAreaOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="label">日期：</span>
          <el-date-picker
            v-model="query.dateRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            :default-value="defaultDateRange"
            style="width: 350px"
            @change="handleSearch"
          />
        </div>
      </div>
    </div>

    <!-- 订单列表区域 -->
    <div class="order-list-container">
      <div class="list-header">
        <span class="list-title">订单列表：</span>
      </div>

      <!-- 表格 -->
      <el-table
        ref="table"
        v-loading="loading"
        :data="paginatedData"
        style="width: 100%"
      >
        <el-table-column prop="customerName" 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.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="getOrderStatusClass(scope.row.mainOrderStatus)">
              {{ getOrderStatusText(scope.row.mainOrderStatus) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="settlementStatus"
          label="结算状态"
          align="center"
        >
          <template slot-scope="scope">
            <span :class="getSettlementStatusClass(scope.row.settlementStatus, true)">
              {{ getSettlementStatusText(scope.row.settlementStatus, true) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="page.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.size"
          :total="tableData.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button
        :disabled="!(settlementStatus === 0)"
        type="primary"
        @click="handleCancelSettlement"
      >
        取消结算
      </el-button>
      <el-button type="primary" @click="handlePrint">打印结算单</el-button>
      <el-button
        v-if="settlementStatus === 2"
        type="success"
        @click="handleStatusChange(1)"
      >
        确认结算
      </el-button>
      <el-button
        v-if="settlementStatus === 1"
        type="success"
        @click="handleStatusChange(2)"
      >
        完成结算
      </el-button>
    </div>

    <!-- 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 { getOrderStatusText, getSettlementStatusText, getOrderStatusClass, getSettlementStatusClass } from "@/utils/orderStatus";
import { getSettleOrderDetail, updateSettleOrderStatus, printSettleOrderData } 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() {
    return {
      orderId: '',
      loading: false,
      scenicAreaOptions: [],
      settlementStatus: 0,
      currentOrder: null,
      originalData: [], // 存储原始数据，用于筛选
      query: {
        batchNo: "",
        scenicArea: "",
        dateRange: [],
      },
      defaultDateRange: [],
      page: {
        current: 1,
        size: 10
      },
      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
    }))

    // 获取订单详情并处理数据
    this.orderId = this.$route.query.orderId
    if(this.orderId) {
      this.loading = true
      this.getOrderDetail(this.orderId)
    } else {
      this.$message.error('没有提供订单ID')
    }
  },
  methods: {
    getOrderStatusText,
    getSettlementStatusText,
    getOrderStatusClass,
    getSettlementStatusClass,
    async getOrderDetail(orderId) {
      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

          // 获取景区名称
          console.log(this.scenicAreaOptions)
          const scenic = this.scenicAreaOptions.find(s => s.value === item.attractionId)
          item.scenicName = scenic ? scenic.label : ''
        }))
        this.originalData = settleOrderDetail // 保存原始数据
        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
      }
    },
    handleSearch() {
      this.loading = true
      try {
        // 从原始数据中筛选
        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) {
        console.error('Error searching orders:', error)
        this.$message.error('搜索订单失败')
      } finally {
        this.loading = false
      }
    },
    async handleCancelSettlement() {
      try {
        await updateSettleOrderStatus(this.orderId, 3)
        this.settlementStatus = 3
        this.$message.success('取消结算成功')
        this.getOrderDetail(this.orderId) // 刷新数据
      } 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;
    },
    async handlePrint() {
      if (this.orderId) {
        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')
      }
    },
    async handleStatusChange(status) {
      try {
        await updateSettleOrderStatus(this.orderId, status)
        this.settlementStatus = status
        const statusText = status === 1 ? '已确认' : '已完成'
        this.$message.success(`结算单状态已更新为：${statusText}`)
        this.getOrderDetail(this.orderId) // 刷新数据
      } catch (error) {
        console.error('Error updating settlement status:', error)
        this.$message.error('更新结算状态失败')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page-title {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #303133;
}

.filter-container {
  background-color: #fff;
  margin-bottom: 20px;

  .filter-item {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;

    .label {
      color: #606266;
      margin-right: 8px;
    }
  }
}

.order-list-container {
  background-color: #fff;

  .list-header {
    margin-bottom: 20px;

    .list-title {
      font-size: 16px;
      font-weight: bold;
      color: #303133;
    }
  }
}

.action-buttons {
  text-align: center;
  margin: 20px 0;
  padding: 20px 0;

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

.status-default { color: #909399; }
.status-pending { color: #909399; }
.status-processing { color: #409EFF; }
.status-success { color: #67c23a; }
.status-warning { color: #e6a23c; }
.status-danger { color: #f56c6c; }

.el-table {
  margin-bottom: 70px;
  margin-top: 20px;
  ::v-deep .el-table__body-wrapper {
    overflow-x: auto;
  }
}

.el-button--text {
  color: #409eff;
  &:hover {
    color: #66b1ff;
  }
}
</style>