订单状态新增未确认状态，新增控制订单和结算状态的方法

src/utils/orderStatus.js

@@ -0,0 +1,91 @@
+// 订单状态映射
+const orderStatusMap = {
+  0: "未进行",
+  1: "进行中",
+  2: "已完成",
+  3: "已取消",
+  4: "待确认"
+};
+
+// 结算状态映射 - 用于载物订单和生成订单
+const settlementStatusMap = {
+  0: "未结算",
+  1: "结算中",
+  2: "结算完成"
+};
+
+// 结算状态映射 - 用于订单详情
+const settlementDetailStatusMap = {
+  0: "结算中",
+  1: "已确认",
+  2: "结算完成",
+  3: "已取消"
+};
+
+// 状态颜色样式映射
+const statusColorMap = {
+  default: 'status-default',    // 默认状态
+  pending: 'status-pending',    // 未进行/未结算
+  processing: 'status-processing', // 进行中/结算中
+  success: 'status-success',    // 已完成/已结算
+  warning: 'status-warning',    // 待确认
+  danger: 'status-danger'       // 已取消
+};
+
+/**
+ * 获取订单状态文本
+ * @param {number} status 订单状态码
+ * @returns {string} 状态文本
+ */
+export function getOrderStatusText(status) {
+  return orderStatusMap[status] || "未知状态";
+}
+
+/**
+ * 获取结算状态文本
+ * @param {number} status 结算状态码
+ * @param {boolean} isDetail 是否为详情页面
+ * @returns {string} 状态文本
+ */
+export function getSettlementStatusText(status, isDetail = false) {
+  const statusMap = isDetail ? settlementDetailStatusMap : settlementStatusMap;
+  return statusMap[status] || "未知状态";
+}
+
+/**
+ * 获取订单状态样式类
+ * @param {number} status 订单状态码
+ * @returns {Object} 状态样式类
+ */
+export function getOrderStatusClass(status) {
+  return {
+    [statusColorMap.pending]: status === 0,    // 未进行
+    [statusColorMap.processing]: status === 1,  // 进行中
+    [statusColorMap.success]: status === 2,     // 已完成
+    [statusColorMap.danger]: status === 3,      // 已取消
+    [statusColorMap.warning]: status === 4      // 待确认
+  };
+}
+
+/**
+ * 获取结算状态样式类
+ * @param {number} status 结算状态码
+ * @param {boolean} isDetail 是否为详情页面
+ * @returns {Object} 状态样式类
+ */
+export function getSettlementStatusClass(status, isDetail = false) {
+  if (isDetail) {
+    return {
+      [statusColorMap.processing]: status === 0,  // 结算中
+      [statusColorMap.warning]: status === 1,     // 已确认
+      [statusColorMap.success]: status === 2,     // 结算完成
+      [statusColorMap.danger]: status === 3       // 已取消
+    };
+  } else {
+    return {
+      [statusColorMap.pending]: status === 0,     // 未结算
+      [statusColorMap.processing]: status === 1,   // 结算中
+      [statusColorMap.success]: status === 2      // 结算完成
+    };
+  }
+}

src/views/order/loadOrder/index.vue

@@ -75,25 +75,15 @@
       <el-table-column prop="type" label="订单类型" align="center" />
       <el-table-column prop="status" label="订单状态" align="center">
         <template slot-scope="scope">
-          <span
+          <span :class="getOrderStatusClass(scope.row.mainOrderStatus)">
-            :class="[
+            {{ getOrderStatusText(scope.row.mainOrderStatus) }}
-              'status-text',
-              scope.row.status === '已完成' ? 'success' : '',
-            ]"
-          >
-            {{ scope.row.status }}
           </span>
         </template>
       </el-table-column>
       <el-table-column prop="settlementStatus" label="结算状态" align="center">
         <template slot-scope="scope">
-          <span
+          <span :class="getSettlementStatusClass(scope.row.settlementStatus)">
-            :class="[
+            {{ getSettlementStatusText(scope.row.settlementStatus) }}
-              'status-text',
-              scope.row.settlementStatus === '已结算' ? 'success' : '',
-            ]"
-          >
-            {{ scope.row.settlementStatus }}
           </span>
         </template>
       </el-table-column>
@@ -135,6 +125,7 @@ import { allCustomer } from "@/api/system/customer";
 import { getList } from "@/api/system/pilot";
 import { getOrderDetail } from "@/api/order";
 import { getUser } from "@/api/system/user";
+import { getOrderStatusText, getSettlementStatusText, getOrderStatusClass, getSettlementStatusClass } from "@/utils/orderStatus";
 import store from "@/store";
 
 export default {
@@ -168,6 +159,10 @@ export default {
     };
   },
   methods: {
+    getOrderStatusText,
+    getSettlementStatusText,
+    getOrderStatusClass,
+    getSettlementStatusClass,
     getList() {
       this.loading = true;
       const params = {
@@ -200,10 +195,8 @@ export default {
               route: record.routeName,
               initiator: initiator ? initiator.name : "未知发起人",
               type: record.orderType === 1 ? "载物飞行" : "载人飞行",
-              status: this.getOrderStatus(record.mainOrderStatus),
+              mainOrderStatus: record.mainOrderStatus,
-              settlementStatus: this.getSettlementStatus(
+              settlementStatus: record.settlementStatus,
-                record.settlementStatus
-              ),
               id: record.id,
             };
           });
@@ -298,25 +291,6 @@ export default {
         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.page.current = 1;
       this.getList();
@@ -372,12 +346,12 @@ export default {
 //   padding: 2px 25px;
 // }
 
-.status-text {
+.status-default { color: #909399; }
-  color: #f56c6c;
+.status-pending { color: #909399; }
-  &.success {
+.status-processing { color: #409EFF; }
-    color: #67c23a;
+.status-success { color: #67c23a; }
-  }
+.status-warning { color: #e6a23c; }
-}
+.status-danger { color: #f56c6c; }
 
 .el-button--text {
   color: #409eff;

src/views/order/loadOrder/loadOrderDetail/index.vue

@@ -97,7 +97,7 @@
           </el-col>
           <el-col :span="8">
             <el-form-item label="订单确认人">
-              <el-input v-model="form.confirmer" disabled />
+              <el-input v-model="form.customerName" disabled />
             </el-form-item>
           </el-col>
           <el-col :span="8">
@@ -123,7 +123,13 @@
           </template>
         </el-table-column>
         <el-table-column prop="weight" label="载货重量" />
-        <el-table-column prop="status" label="任务状态" />
+        <el-table-column prop="status" label="任务状态">
+          <template slot-scope="scope">
+            <span :class="getTaskStatusClass(scope.row.status)">
+              {{ scope.row.status }}
+            </span>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" align="center">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="handleVideoView(scope.row)">查看视频</el-button>
@@ -249,6 +255,15 @@ export default {
         this.taskPage.page = 1
       })
     },
+    getTaskStatusClass(status) {
+      return {
+        'status-pending': status === '未进行',
+        'status-processing': status === '进行中',
+        'status-success': status === '已完成',
+        'status-warning': status === '待确认',
+        'status-danger': status === '已取消'
+      }
+    },
     handlePreview(url) {
       this.previewUrl = url
       this.previewVisible = true
@@ -356,4 +371,11 @@ export default {
     }
   }
 }
+
+.status-default { color: #909399; }
+.status-pending { color: #909399; }
+.status-processing { color: #409EFF; }
+.status-success { color: #67c23a; }
+.status-warning { color: #e6a23c; }
+.status-danger { color: #f56c6c; }
 </style>

src/views/order/settlementOrder/generateOrder/index.vue

@@ -69,15 +69,15 @@
         <el-table-column prop="orderType" label="订单类型" align="center" />
         <el-table-column prop="orderStatus" label="订单状态" align="center">
           <template slot-scope="scope">
-            <span :class="['status-text', scope.row.orderStatus === '已完成' ? 'success' : '']">
+            <span :class="getOrderStatusClass(scope.row.mainOrderStatus)">
-              {{ scope.row.orderStatus }}
+              {{ getOrderStatusText(scope.row.mainOrderStatus) }}
             </span>
           </template>
         </el-table-column>
         <el-table-column prop="settlementStatus" label="结算状态" align="center">
           <template slot-scope="scope">
-            <span :class="['status-text', scope.row.settlementStatus === '已结算' ? 'success' : '']">
+            <span :class="getSettlementStatusClass(scope.row.settlementStatus)">
-              {{ scope.row.settlementStatus }}
+              {{ getSettlementStatusText(scope.row.settlementStatus) }}
             </span>
           </template>
         </el-table-column>
@@ -137,6 +137,7 @@ 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 { getOrderStatusText, getSettlementStatusText, getOrderStatusClass, getSettlementStatusClass } from "@/utils/orderStatus";
 import store from "@/store";
 
 export default {
@@ -173,6 +174,10 @@ export default {
     }
   },
   methods: {
+    getOrderStatusText,
+    getSettlementStatusText,
+    getOrderStatusClass,
+    getSettlementStatusClass,
     getList() {
       this.loading = true;
       const params = {
@@ -205,8 +210,8 @@ export default {
               route: record.routeName,
               initiator: initiator ? initiator.name : "未知发起人",
               orderType: record.orderType === 1 ? "载物飞行" : "载人飞行",
-              orderStatus: this.getOrderStatus(record.mainOrderStatus),
+              mainOrderStatus: record.mainOrderStatus,
-              settlementStatus: this.getSettlementStatus(record.settlementStatus),
+              settlementStatus: record.settlementStatus,
             };
           });
           this.page.total = Number(response.total) || 0;
@@ -271,25 +276,6 @@ export default {
       }
     },
 
-    getOrderStatus(status) {
-      const statusMap = {
-        0: "未进行",
-        1: "进行中",
-        2: "已完成",
-        3: "已取消"
-      };
-      return statusMap[status] || "未知状态";
-    },
-
-    getSettlementStatus(status) {
-      const statusMap = {
-        0: "未结算",
-        1: "结算中",
-        2: "结算完成"
-      };
-      return statusMap[status] || "未知状态";
-    },
-
     handleSearch() {
       this.page.current = 1;
       this.getList();
@@ -384,13 +370,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.status-text {
-  color: #f56c6c;
-  &.success {
-    color: #67c23a;
-  }
-}
-
 .app-container {
   padding: 20px;
 }
@@ -434,7 +413,12 @@ export default {
   }
 }
 
-
+.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;
@@ -468,22 +452,35 @@ export default {
   gap: 10px;
 }
 
+::v-deep .el-card__body {
+  padding: 10px 20px;
+}
+
+::v-deep .el-dialog__body {
+  padding: 10px;
+}
+
 .settlement-card {
-  flex: 0 0 auto;
-  width: calc(33.33% - 7px);
-  min-width: 200px;
   margin: 0;
+  width: 100%;
 
   .settlement-item {
-    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
 
     h3 {
-      margin: 0 0 8px 0;
+      margin-right: 10px;
       color: #303133;
       font-size: 14px;
     }
 
     .settlement-info {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+
       p {
         margin: 4px 0;
         color: #606266;

src/views/order/settlementOrder/index.vue

@@ -41,7 +41,9 @@
       <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>
+          <span :class="getSettlementStatusClass(scope.row.rawSettlementStatus, true)">
+            {{ getSettlementStatusText(scope.row.rawSettlementStatus, true) }}
+          </span>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="200" align="center">
@@ -83,6 +85,7 @@
 import { getSettleOrderList } from '@/api/order'
 import { getUserNameValue } from '@/api/dropdown'
 import SettlementPdf from './orderDetail/settlementPdf.vue'
+import { getSettlementStatusText, getSettlementStatusClass } from "@/utils/orderStatus";
 
 export default {
   components: {
@@ -121,11 +124,13 @@ export default {
     this.fetchData()
   },
   methods: {
+    getSettlementStatusText,
+    getSettlementStatusClass,
     async fetchData() {
       this.loading = true
       try {
         const response = await getSettleOrderList(this.query)
-        const operatorList = await getUserNameValue(0); // 只请求一次，避免每条都请求
+        const operatorList = await getUserNameValue(0);
 
         const operatorMap = new Map();
         operatorList.forEach(item => {
@@ -133,10 +138,9 @@ export default {
         });
         response.records = response.records.map(record => ({
           ...record,
-          settlementStatus: this.getSettlementStatus(record.settlementStatus),
+          rawSettlementStatus: 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) {
@@ -146,41 +150,24 @@ export default {
       }
     },
     getSettlementStatus(status) {
-      const statusMap = {
+      return getSettlementStatusText(status, true);
-        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() {
-      // 实现搜索逻辑
+      this.page.current = 1
-      console.log('搜索条件:', this.query)
+      this.fetchData()
     },
     handleSelectionChange(val) {
       this.selection = val
     },
     handleSizeChange(val) {
       this.page.size = val
-      // 重新加载数据
+      this.fetchData()
     },
     handleCurrentChange(val) {
       this.page.current = val
-      // 重新加载数据
+      this.fetchData()
     },
     handleDetail(row) {
-      // 查看详情
-      console.log('查看详情:', row)
-      // 跳转到订单详情页
       this.$router.push({
         path: '/order/orderDetail',
         query: { orderId: row.id.toString() }
@@ -190,7 +177,6 @@ export default {
       if (row.id) {
         this.currentSettlementId = row.id.toString()
         try {
-          // 等待vue渲染
           await this.$nextTick()
           await this.$refs.settlementPdf.generatePDF()
         } catch (error) {
@@ -238,23 +224,25 @@ export default {
 //   padding: 2px 25px;
 // }
 
+.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;
   }
 }
-
-.el-table {
-  margin-top: 20px;
-  ::v-deep .el-table__body-wrapper {
-    overflow-x: auto;
-  }
-}
 </style>

src/views/order/settlementOrder/orderDetail/index.vue

@@ -89,8 +89,8 @@
           align="center"
         >
           <template slot-scope="scope">
-            <span :class="getSettlementStatusClass(scope.row.mainOrderStatus)">
+            <span :class="getOrderStatusClass(scope.row.mainOrderStatus)">
-              {{ getOrderStatus(scope.row.mainOrderStatus) }}
+              {{ getOrderStatusText(scope.row.mainOrderStatus) }}
             </span>
           </template>
         </el-table-column>
@@ -100,8 +100,8 @@
           align="center"
         >
           <template slot-scope="scope">
-            <span :class="getSettlementStatusClass(scope.row.settlementStatus)">
+            <span :class="getSettlementStatusClass(scope.row.settlementStatus, true)">
-              {{ getSettlementStatusText(scope.row.settlementStatus) }}
+              {{ getSettlementStatusText(scope.row.settlementStatus, true) }}
             </span>
           </template>
         </el-table-column>
@@ -158,6 +158,7 @@
 </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'
@@ -241,6 +242,10 @@ export default {
     }
   },
   methods: {
+    getOrderStatusText,
+    getSettlementStatusText,
+    getOrderStatusClass,
+    getSettlementStatusClass,
     handleSearch() {
       this.loading = true
       try {
@@ -283,31 +288,6 @@ export default {
         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': [0, 3].includes(status),
-        'status-green': status === 2,
-        'status-orange': status === 1
-      };
-    },
     async handleCancelSettlement() {
       try {
         await updateSettleOrderStatus(this.$route.query.orderId, 3)
@@ -408,15 +388,12 @@ export default {
   }
 }
 
-.status-red {
+.status-default { color: #909399; }
-  color: #f56c6c;
+.status-pending { color: #909399; }
-}
+.status-processing { color: #409EFF; }
-.status-green {
+.status-success { color: #67c23a; }
-  color: #67c23a;
+.status-warning { color: #e6a23c; }
-}
+.status-danger { color: #f56c6c; }
-.status-orange {
-  color: #e6a23c;
-}
 
 .el-table {
   margin-bottom: 70px;

src/views/order/settlementOrder/orderDetail/settlementPdf.vue

@@ -7,7 +7,7 @@
       <div class="info-row">
         <div class="info-item">
           <span class="label">结算单号:</span>
-          <span class="value">{{ data.statementId }}</span>
+          <span class="value">{{ data.batchNo }}</span>
         </div>
         <div class="info-item">
           <span class="label">结算时间:</span>
@@ -20,7 +20,7 @@
           <span class="value">{{ data.customer }}</span>
         </div>
         <div class="info-item">
-          <span class="label">数量:</span>
+          <span class="label">重量:</span>
           <span class="value">{{ data.quantity }}</span>
         </div>
       </div>
@@ -39,7 +39,7 @@
         <thead>
           <tr>
             <th style="width: 20%;">订单号</th>
-            <th style="width: 25%;">执行时间</th>
+            <th style="width: 25%;">订单创建时间</th>
             <th style="width: 15%;">重量</th>
             <th style="width: 20%;">金额</th>
             <th style="width: 20%;">确认人</th>
@@ -102,14 +102,14 @@ export default {
   methods: {
     async formatData(data) {
       if (!data) {
-        console.warn('No data provided')
+        console.warn('暂无此数据')
         return
       }
-
       // 格式化数据以适应PDF模板
       this.data = {
         statementId: this.settlementOrderId || '',
         date: data.settlementTimeScope || '',
+        batchNo: data.batchNo || '',
         customer: data.clientName || '',
         quantity: data.cargoWeight ? `${data.cargoWeight}KG` : '0KG',
         amount: data.totalAmount ? `${data.totalAmount}元` : '0元',