酒店订房与订房记录改动

src/views/content/bookingRecord/index.vue

@@ -25,32 +25,40 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
+    <!-- 状态分类 Tab -->
+    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+      <el-tab-pane label="全部" name="all" />
+      <el-tab-pane label="预约成功" name="0" />
+      <el-tab-pane label="待支付" name="1" />
+      <el-tab-pane label="退订房间" name="2" />
+    </el-tabs>
+
     <!-- 表格 -->
     <el-table v-loading="loading" border :data="dataList">
-      <el-table-column label="序号" align="center" width="60">
+      <el-table-column label="序号" align="center" width="55">
         <template #default="scope">
           {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
         </template>
       </el-table-column>
-      <el-table-column label="下单用户ID" align="center" prop="userId" min-width="100" show-overflow-tooltip />
-      <el-table-column label="下单人姓名" align="center" prop="contactName" min-width="100" show-overflow-tooltip>
+      <el-table-column label="下单用户ID" align="center" prop="userId" min-width="90" show-overflow-tooltip />
+      <el-table-column label="下单人姓名" align="center" prop="contactName" min-width="90" show-overflow-tooltip>
         <template #default="scope">
           {{ scope.row.contactName || '-' }}
         </template>
       </el-table-column>
-      <el-table-column label="入住人姓名" align="center" prop="guestName" min-width="100" show-overflow-tooltip>
+      <el-table-column label="入住人姓名" align="center" prop="guestName" min-width="90" show-overflow-tooltip>
         <template #default="scope">
           {{ scope.row.guestName || '-' }}
         </template>
       </el-table-column>
-      <el-table-column label="入住人手机号码" align="center" prop="guestPhone" min-width="120" show-overflow-tooltip>
+      <el-table-column label="入住人手机号码" align="center" prop="guestPhone" min-width="115" show-overflow-tooltip>
         <template #default="scope">
           {{ scope.row.guestPhone || '-' }}
         </template>
       </el-table-column>
-      <el-table-column label="选择酒店" align="center" prop="hotelName" min-width="120" show-overflow-tooltip />
-      <el-table-column label="房型" align="center" prop="roomName" min-width="100" show-overflow-tooltip />
-      <el-table-column label="房型时间段" align="center" min-width="200">
+      <el-table-column label="选择酒店" align="center" prop="hotelName" min-width="90" show-overflow-tooltip />
+      <el-table-column label="房型" align="center" prop="roomName" min-width="80" show-overflow-tooltip />
+      <el-table-column label="房型时间段" align="center" min-width="165">
         <template #default="scope">
           <span v-if="scope.row.startDate && scope.row.endDate">
             {{ scope.row.startDate }}-{{ scope.row.endDate }}（{{ stayDays(scope.row) }}天）
@@ -58,7 +66,7 @@
           <span v-else>-</span>
         </template>
       </el-table-column>
-      <el-table-column label="是否补差" align="center" min-width="120">
+      <el-table-column label="是否补差" align="center" min-width="95">
         <template #default="scope">
           <span v-if="scope.row.isExtraPay === '1'"
             >是 <span class="cell-extra-amount">金额：{{ scope.row.extraAmount || 0 }}</span></span
@@ -66,39 +74,46 @@
           <span v-else>否</span>
         </template>
       </el-table-column>
-      <el-table-column label="订房时间" align="center" prop="bookingTime" min-width="160" show-overflow-tooltip />
-      <el-table-column label="状态" align="center" prop="status" width="100">
+      <el-table-column label="订房时间" align="center" prop="bookingTime" min-width="150" show-overflow-tooltip />
+      <el-table-column label="状态" align="center" prop="status" width="85">
         <template #default="scope">
           <el-tag :type="statusTagType[scope.row.status] || 'info'">{{ statusMap[scope.row.status] || '未知' }}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="操作人" align="center" prop="operatorName" min-width="100" show-overflow-tooltip>
+      <el-table-column label="操作人" align="center" prop="operatorName" min-width="90" show-overflow-tooltip>
         <template #default="scope">{{ scope.row.operatorName || '-' }}</template>
       </el-table-column>
-      <el-table-column label="操作时间" align="center" prop="operatorTime" min-width="160" show-overflow-tooltip>
+      <el-table-column label="操作时间" align="center" prop="operatorTime" min-width="150" show-overflow-tooltip>
         <template #default="scope">{{ scope.row.operatorTime || '-' }}</template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="150" fixed="right">
+      <el-table-column label="操作" align="center" width="90" fixed="right">
         <template #default="scope">
-          <el-button
-            v-if="scope.row.status === '0' || scope.row.status === '1'"
-            v-hasPermi="['content:bookingRecord:cancel']"
-            link
-            type="danger"
-            @click="handleForceCancel(scope.row)"
-          >
-            手动退房
-          </el-button>
-          <el-button
-            v-if="scope.row.isExtraPay === '1' && scope.row.refundFlag !== '1'"
-            v-hasPermi="['content:bookingRecord:refund']"
-            link
-            type="warning"
-            @click="handleRefundExtra(scope.row)"
-          >
-            差价退回
-          </el-button>
-          <span v-if="scope.row.isExtraPay === '1' && scope.row.refundFlag === '1'" class="cell-refunded">差价已退回</span>
+          <div class="cell-actions">
+            <el-button
+              v-if="scope.row.status === '0' || scope.row.status === '1'"
+              v-hasPermi="['content:bookingRecord:cancel']"
+              link
+              type="danger"
+              @click="handleForceCancel(scope.row)"
+            >
+              手动退房
+            </el-button>
+            <el-button
+              v-if="scope.row.isExtraPay === '1' && scope.row.refundFlag !== '1'"
+              v-hasPermi="['content:bookingRecord:refund']"
+              link
+              type="warning"
+              @click="handleRefundExtra(scope.row)"
+            >
+              差价退回
+            </el-button>
+            <span v-if="scope.row.isExtraPay === '1' && scope.row.refundFlag === '1'" class="cell-refunded">差价已退回</span>
+            <span
+              v-if="scope.row.status !== '0' && scope.row.status !== '1' && scope.row.isExtraPay !== '1'"
+              class="cell-empty"
+              >—</span
+            >
+          </div>
         </template>
       </el-table-column>
     </el-table>
@@ -118,15 +133,25 @@ const showSearch = ref(true);
 const total = ref(0);
 const dataList = ref([]);
 
+const activeTab = ref('all');
+
 const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
+  status: null,
   contactName: null,
   contactPhone: null,
   hotelName: null
 });
 const queryRef = ref(null);
 
+// Tab 切换：按状态过滤（全部不传 status，预约成功=0，退订房间=2）
+function handleTabChange(name) {
+  queryParams.status = name === 'all' ? null : name;
+  queryParams.pageNum = 1;
+  getList();
+}
+
 const statusMap = { 0: '预约成功', 1: '待支付', 2: '退订房间' };
 const statusTagType = { 0: 'success', 1: 'warning', 2: 'info' };
 
@@ -213,4 +238,21 @@ getList();
   font-size: 12px;
   color: #909399;
 }
+
+/* 操作列：按钮上下堆叠，节省横向空间 */
+.cell-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  line-height: 1.4;
+}
+
+.cell-actions :deep(.el-button + .el-button) {
+  margin-left: 0;
+}
+
+.cell-empty {
+  color: #c0c4cc;
+}
 </style>