From a1baf566b166c09cbacb73603090de7b832e0169 Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Wed, 8 Jan 2025 15:38:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=BF=E9=97=B4=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                   |   4 +-
 src/views/system/device/index.vue     |   9 +-
 src/views/system/equipment/index.vue  | 222 ++++------
 src/views/system/order/index.vue      |   3 +-
 src/views/system/room/index.vue       | 204 +++------
 src/views/system/room/room_detail.vue | 578 +++++++++++++++++++++++++-
 src/views/system/rule/index.vue       |  15 +-
 7 files changed, 725 insertions(+), 310 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 3d541e1..0fd3640 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -169,7 +169,7 @@ export const dynamicRoutes = [
     permissions: ['system:room:list'],
     children: [
       {
-        path: 'detail/:roomId(\\d+)',
+        path: 'index/:roomId(\\d+)',
         component: () => import('@/views/system/room/room_detail'),
         name: 'RoomDetail',
         meta: { title: '房间详情', activeMenu: '/system/room' }
@@ -239,7 +239,7 @@ export const dynamicRoutes = [
     permissions: ['system:equipment:query'],
     children: [
       {
-        path: 'detail/:equipmentId(\\d+)',
+        path: 'index/:equipmentId(\\d+)',
         component: () => import('@/views/system/equipment/equipment_detail'),
         name: 'EquipmentDetail',
         meta: { title: '设施详情', activeMenu: '/system/equipment' }
diff --git a/src/views/system/device/index.vue b/src/views/system/device/index.vue
index 31cf880..271c24e 100644
--- a/src/views/system/device/index.vue
+++ b/src/views/system/device/index.vue
@@ -349,7 +349,7 @@ export default {
   mixins: [$showColumns],
   dicts: ['as_online_status', 'as_device_status', 'et_device_lock_status'],
   components: { QrCode },
-  
+
   props: {
     initLng: {
       type: Number,
@@ -363,6 +363,10 @@ export default {
       type: Number,
       default: 0
     },
+    roomId: {
+      type: Number,
+      default: 0
+    },
   },
   data() {
     return {
@@ -624,6 +628,9 @@ export default {
       if(this.storeId && this.storeId != 0){
         this.queryParams.storeId = this.storeId;
       }
+      if(this.roomId && this.roomId != 0){
+        this.queryParams.roomId = this.roomId;
+      }
       listDevice(this.queryParams).then(response => {
         this.deviceList = response.rows;
         this.total = response.total;
diff --git a/src/views/system/equipment/index.vue b/src/views/system/equipment/index.vue
index e4bcdff..e48c3ed 100644
--- a/src/views/system/equipment/index.vue
+++ b/src/views/system/equipment/index.vue
@@ -2,43 +2,29 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="设施名" prop="roomName">
-        <el-input
-          v-model="queryParams.roomName"
-          placeholder="请输入设施名"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.roomName" placeholder="请输入设施名" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="店铺" prop="storeId" v-if="!storeId">
         <el-select v-model="queryParams.storeId" clearable filterable placeholder="请选择">
-          <el-option
-            v-for="item in storeOptions"
-            :key="item.storeId"
-            :label="item.name"
-            :value="item.storeId"
-          />
+          <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.name" :value="item.storeId" />
         </el-select>
       </el-form-item>
       <el-form-item label="类型" prop="equType">
         <el-select v-model="queryParams.equType" placeholder="请选择类型" clearable style="width: 240px">
-          <el-option
-            v-for="dict in dict.type.ss_hall_equ_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+          <el-option v-for="dict in dict.type.ss_hall_equ_type" :key="dict.value" :label="dict.label"
+            :value="dict.value" />
         </el-select>
       </el-form-item>
-<!--      <el-form-item label="状态" prop="status">-->
-<!--        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleQuery">-->
-<!--          <el-option-->
-<!--            v-for="dict in dict.type.ss_room_status"-->
-<!--            :key="dict.value"-->
-<!--            :label="dict.label"-->
-<!--            :value="dict.value"-->
-<!--          />-->
-<!--        </el-select>-->
-<!--      </el-form-item>-->
+      <!--      <el-form-item label="状态" prop="status">-->
+      <!--        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleQuery">-->
+      <!--          <el-option-->
+      <!--            v-for="dict in dict.type.ss_room_status"-->
+      <!--            :key="dict.value"-->
+      <!--            :label="dict.label"-->
+      <!--            :value="dict.value"-->
+      <!--          />-->
+      <!--        </el-select>-->
+      <!--      </el-form-item>-->
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -47,82 +33,54 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:room:add']"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['system:room:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:room:edit']"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['system:room:edit']">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:room:remove']"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['system:room:remove']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:room:export']"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+          v-hasPermi="['system:room:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="roomList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+    <el-table v-loading="loading" :data="roomList" @selection-change="handleSelectionChange" :default-sort="defaultSort"
+      @sort-change="onSortChange">
       <el-table-column type="selection" width="55" align="center" />
       <template v-for="column of showColumns">
-        <el-table-column
-          :key="column.key"
-          :label="column.label"
-          :prop="column.key"
-          :align="column.align"
-          :min-width="column.minWidth"
-          :sort-orders="orderSorts"
-          :sortable="column.sortable"
-          :show-overflow-tooltip="column.overflow"
-          :width="column.width"
-        >
+        <el-table-column :key="column.key" :label="column.label" :prop="column.key" :align="column.align"
+          :min-width="column.minWidth" :sort-orders="orderSorts" :sortable="column.sortable"
+          :show-overflow-tooltip="column.overflow" :width="column.width">
           <template slot-scope="d">
             <template v-if="column.key === 'roomId'">
-              {{d.row[column.key]}}
+              {{ d.row[column.key] }}
             </template>
-            <template v-else-if="column.key === 'roomName'">
-              <router-link :to="`/system/room/detail/${d.row[column.key]}`">{{d.row[column.key]}}</router-link>
+            <template v-else-if="column.key === 'roomName'"> <!-- 注意：这里应该是 equipmentName 而不是 roomName -->
+              <router-link :to="{
+                name: 'EquipmentDetail',
+                params: { equipmentId: d.row.roomId }
+              }" class="link-type">
+                <span>{{ d.row[column.key] }}</span>
+              </router-link>
             </template>
             <template v-else-if="column.key === 'equType'">
-              <dict-tag :options="dict.type.ss_hall_equ_type" :value="d.row[column.key]"/>
+              <dict-tag :options="dict.type.ss_hall_equ_type" :value="d.row[column.key]" />
             </template>
             <template v-else-if="column.key === 'tags'">
-              <dict-tag :options="dict.type.ss_room_tags" :value="d.row[column.key]"/>
+              <dict-tag :options="dict.type.ss_room_tags" :value="d.row[column.key]" />
             </template>
             <template v-else-if="column.key === 'picture'">
-              <image-preview :src="d.row[column.key]" :width="50" :height="50"/>
+              <image-preview :src="d.row[column.key]" :width="50" :height="50" />
             </template>
             <template v-else-if="column.key === 'status'">
-              <dict-tag :options="dict.type.ss_room_status" :value="d.row[column.key]"/>
+              <dict-tag :options="dict.type.ss_room_status" :value="d.row[column.key]" />
             </template>
             <template v-else-if="column.key === 'feeRules'">
               <el-tooltip placement="top" :content="getFeeRulesExplain(d.row[column.key])">
@@ -136,38 +94,23 @@
               <span v-else>{{ d.row[column.key] }}</span>
             </template>
             <template v-else>
-              {{d.row[column.key]}}
+              {{ d.row[column.key] }}
             </template>
           </template>
         </el-table-column>
       </template>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:room:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:room:remove']"
-          >删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:room:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['system:room:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改设施对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -177,40 +120,22 @@
         </el-form-item>
         <el-form-item label="店铺" prop="storeId">
           <el-select v-model="form.storeId" clearable filterable placeholder="请选择">
-            <el-option
-              v-for="item in storeOptions"
-              :key="item.storeId"
-              :label="item.name"
-              :value="item.storeId"
-            />
+            <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.name" :value="item.storeId" />
           </el-select>
         </el-form-item>
         <el-form-item label="类型" prop="type">
           <el-select v-model="form.type" placeholder="请选择类型">
-            <el-option
-              v-for="dict in dict.type.ss_room_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
+            <el-option v-for="dict in dict.type.ss_room_type" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="图片" prop="picture">
-          <image-upload v-model="form.picture"/>
+          <image-upload v-model="form.picture" />
         </el-form-item>
         <el-form-item label="标签" prop="tags">
-          <el-select
-            v-model="form.tags"
-            placeholder="请选择标签"
-            clearable
-            multiple
-            style="width: auto; min-width: 240px">
-            <el-option
-              v-for="dict in dict.type.ss_room_tags"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
+          <el-select v-model="form.tags" placeholder="请选择标签" clearable multiple style="width: auto; min-width: 240px">
+            <el-option v-for="dict in dict.type.ss_room_tags" :key="dict.value" :label="dict.label"
+              :value="dict.value" />
           </el-select>
         </el-form-item>
 
@@ -226,7 +151,7 @@
 <script>
 import { listRoom, getRoom, delRoom, addRoom, updateRoom } from "@/api/system/room";
 import { $showColumns } from '@/utils/mixins';
-import {listStore} from "../../../api/system/store";
+import { listStore } from "../../../api/system/store";
 
 // 默认排序字段
 const defaultSort = {
@@ -237,21 +162,21 @@ const defaultSort = {
 export default {
   name: "Room",
   mixins: [$showColumns],
-  dicts: ['ss_hall_equ_type', 'ss_room_status','ss_room_tags'],
-  props: ['storeId'],
+  dicts: ['ss_hall_equ_type', 'ss_room_status', 'ss_room_tags'],
+  props: ['storeId', 'roomId'],
   data() {
     return {
       // 字段列表
       columns: [
-        {key: 'roomId', visible: true, label: '设施id', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'roomName', visible: true, label: '设施名', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'sn', visible: true, label: 'SN', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'storeName', visible: true, label: '店铺', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'picture', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'equType', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'feeRules', visible: true, label: '套餐', minWidth: null, sortable: false, overflow: true, align: 'center', width: null},
-        {key: 'tags', visible: true, label: '标签', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        { key: 'roomId', visible: true, label: '设施id', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'roomName', visible: true, label: '设施名', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'sn', visible: true, label: 'SN', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'storeName', visible: true, label: '店铺', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'picture', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'equType', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'feeRules', visible: true, label: '套餐', minWidth: null, sortable: false, overflow: true, align: 'center', width: null },
+        { key: 'tags', visible: true, label: '标签', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
       ],
       // 排序方式
       orderSorts: ['ascending', 'descending', null],
@@ -317,7 +242,7 @@ export default {
   },
   methods: {
     getStoreOptions() {
-      listStore({pageNum:1,pageSize:999  }).then(response => {
+      listStore({ pageNum: 1, pageSize: 999 }).then(response => {
         this.storeOptions = response.rows;
       });
     },
@@ -335,9 +260,13 @@ export default {
     /** 查询设施列表 */
     getList() {
       this.loading = true;
-      if(this.storeId){
+      if (this.storeId) {
         this.queryParams.storeId = this.storeId;
       }
+      if (this.roomId) {
+        this.queryParams.roomId = this.roomId;
+        this.queryParams.type2 = null;
+      }
       listRoom(this.queryParams).then(response => {
         this.roomList = response.rows;
         this.total = response.total;
@@ -380,7 +309,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.roomId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -422,12 +351,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const roomIds = row.roomId || this.ids;
-      this.$modal.confirm('是否确认删除设施编号为"' + roomIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除设施编号为"' + roomIds + '"的数据项？').then(function () {
         return delRoom(roomIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -450,6 +379,7 @@ export default {
 .el-select {
   :deep(.el-select__tags) {
     flex-wrap: wrap;
+
     // 标签换行显示
     .el-tag {
       margin: 2px;
@@ -502,7 +432,7 @@ export default {
 .link-type {
   color: #11A983;
   text-decoration: underline;
-  
+
   &:hover {
     color: #11A98330;
     text-decoration: underline;
diff --git a/src/views/system/order/index.vue b/src/views/system/order/index.vue
index 62e821e..c06a2f8 100644
--- a/src/views/system/order/index.vue
+++ b/src/views/system/order/index.vue
@@ -252,7 +252,7 @@ const defaultSort = {
 export default {
   name: "Order",
   mixins: [$showColumns],
-  props: ['storeId'],
+  props: ['storeId', 'roomId'],
   components: { RefundDialog},
   dicts: ['ss_order_status', 'ss_pay_type', 'rl_distribution_mode', 'rl_rental_unit','ss_order_type','et_order_pay_status'],
   data() {
@@ -406,6 +406,7 @@ export default {
     getList() {
       this.loading = true;
       this.queryParams.storeId = this.storeId;
+      this.queryParams.roomId = this.roomId;
       listOrder(this.queryParams).then(response => {
         this.orderList = response.rows;
         this.total = response.total;
diff --git a/src/views/system/room/index.vue b/src/views/system/room/index.vue
index db1095b..28b278d 100644
--- a/src/views/system/room/index.vue
+++ b/src/views/system/room/index.vue
@@ -2,41 +2,22 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="房间名" prop="roomName">
-        <el-input
-          v-model="queryParams.roomName"
-          placeholder="请输入房间名"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.roomName" placeholder="请输入房间名" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="店铺" prop="storeId" v-if="!storeId">
         <el-select v-model="queryParams.storeId" clearable filterable placeholder="请选择">
-          <el-option
-            v-for="item in storeOptions"
-            :key="item.storeId"
-            :label="item.name"
-            :value="item.storeId"
-          />
+          <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.name" :value="item.storeId" />
         </el-select>
       </el-form-item>
       <el-form-item label="类型" prop="type">
         <el-select v-model="queryParams.type" placeholder="请选择类型" clearable style="width: 240px">
-          <el-option
-            v-for="dict in dict.type.ss_room_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+          <el-option v-for="dict in dict.type.ss_room_type" :key="dict.value" :label="dict.label" :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleQuery">
-          <el-option
-            v-for="dict in dict.type.ss_room_status"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+          <el-option v-for="dict in dict.type.ss_room_status" :key="dict.value" :label="dict.label"
+            :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -47,85 +28,55 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:room:add']"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['system:room:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:room:edit']"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['system:room:edit']">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:room:remove']"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['system:room:remove']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:room:export']"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+          v-hasPermi="['system:room:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="roomList" @selection-change="handleSelectionChange" :default-sort="defaultSort"  @sort-change="onSortChange">
+    <el-table v-loading="loading" :data="roomList" @selection-change="handleSelectionChange" :default-sort="defaultSort"
+      @sort-change="onSortChange">
       <el-table-column type="selection" width="55" align="center" />
       <template v-for="column of showColumns">
-        <el-table-column
-            :key="column.key"
-            :label="column.label"
-            :prop="column.key"
-            :align="column.align"
-            :min-width="column.minWidth"
-            :sort-orders="orderSorts"
-            :sortable="column.sortable"
-            :show-overflow-tooltip="column.overflow"
-            :width="column.width"
-        >
+        <el-table-column :key="column.key" :label="column.label" :prop="column.key" :align="column.align"
+          :min-width="column.minWidth" :sort-orders="orderSorts" :sortable="column.sortable"
+          :show-overflow-tooltip="column.overflow" :width="column.width">
           <template slot-scope="d">
             <template v-if="column.key === 'roomId'">
-              {{d.row[column.key]}}
+              {{ d.row[column.key] }}
             </template>
             <template v-else-if="column.key === 'roomName'">
-              <router-link :to="`/system/room/detail/${d.row[column.key]}`">{{d.row[column.key]}}</router-link>
+              <router-link :to="'/system/roomDetail/index/' + d.row.roomId" class="link-type">
+                  <span>{{ d.row[column.key] }}</span>
+                </router-link>
+              <!-- <router-link :to="`/system/roomDetail/index/${d.row[column.key]}`">{{d.row[column.key]}}</router-link> -->
             </template>
             <template v-else-if="column.key === 'type'">
-              <dict-tag :options="dict.type.ss_room_type" :value="d.row[column.key]"/>
+              <dict-tag :options="dict.type.ss_room_type" :value="d.row[column.key]" />
             </template>
             <template v-else-if="column.key === 'type2'">
-              <dict-tag :options="dict.type.ss_room_type2" :value="d.row[column.key]"/>
+              <dict-tag :options="dict.type.ss_room_type2" :value="d.row[column.key]" />
             </template>
             <template v-else-if="column.key === 'tags'">
-              <dict-tag :options="dict.type.ss_room_tags" :value="d.row[column.key]"/>
+              <dict-tag :options="dict.type.ss_room_tags" :value="d.row[column.key]" />
             </template>
             <template v-else-if="column.key === 'picture'">
-              <image-preview :src="d.row[column.key]" :width="50" :height="50"/>
+              <image-preview :src="d.row[column.key]" :width="50" :height="50" />
             </template>
             <template v-else-if="column.key === 'status'">
-              <dict-tag :options="dict.type.ss_room_status" :value="d.row[column.key]"/>
+              <dict-tag :options="dict.type.ss_room_status" :value="d.row[column.key]" />
             </template>
             <template v-else-if="column.key === 'feeRules'">
               <el-tooltip placement="top" :content="getFeeRulesExplain(d.row[column.key])">
@@ -133,38 +84,23 @@
               </el-tooltip>
             </template>
             <template v-else>
-              {{d.row[column.key]}}
+              {{ d.row[column.key] }}
             </template>
           </template>
         </el-table-column>
       </template>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:room:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:room:remove']"
-          >删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:room:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['system:room:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改房间对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -174,40 +110,22 @@
         </el-form-item>
         <el-form-item label="店铺" prop="storeId">
           <el-select v-model="form.storeId" clearable filterable placeholder="请选择">
-            <el-option
-              v-for="item in storeOptions"
-              :key="item.storeId"
-              :label="item.name"
-              :value="item.storeId"
-            />
+            <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.name" :value="item.storeId" />
           </el-select>
         </el-form-item>
         <el-form-item label="类型" prop="type">
           <el-select v-model="form.type" placeholder="请选择类型">
-            <el-option
-              v-for="dict in dict.type.ss_room_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
+            <el-option v-for="dict in dict.type.ss_room_type" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="图片" prop="picture">
-          <image-upload v-model="form.picture"/>
+          <image-upload v-model="form.picture" />
         </el-form-item>
         <el-form-item label="标签" prop="tags">
-          <el-select
-            v-model="form.tags"
-            placeholder="请选择标签"
-            clearable
-            multiple
-            style="width: auto; min-width: 240px">
-            <el-option
-              v-for="dict in dict.type.ss_room_tags"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
+          <el-select v-model="form.tags" placeholder="请选择标签" clearable multiple style="width: auto; min-width: 240px">
+            <el-option v-for="dict in dict.type.ss_room_tags" :key="dict.value" :label="dict.label"
+              :value="dict.value" />
           </el-select>
         </el-form-item>
 
@@ -223,7 +141,7 @@
 <script>
 import { listRoom, getRoom, delRoom, addRoom, updateRoom } from "@/api/system/room";
 import { $showColumns } from '@/utils/mixins';
-import {listStore} from "../../../api/system/store";
+import { listStore } from "../../../api/system/store";
 
 // 默认排序字段
 const defaultSort = {
@@ -234,20 +152,20 @@ const defaultSort = {
 export default {
   name: "Room",
   mixins: [$showColumns],
-  dicts: ['ss_room_type', 'ss_room_status','ss_room_tags'],
+  dicts: ['ss_room_type', 'ss_room_status', 'ss_room_tags'],
   props: ['storeId'],
   data() {
     return {
       // 字段列表
       columns: [
-        {key: 'roomId', visible: true, label: '房间id', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'roomName', visible: true, label: '房间名', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'storeName', visible: true, label: '店铺', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'picture', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'feeRules', visible: true, label: '套餐', minWidth: null, sortable: false, overflow: true, align: 'center', width: null},
-        {key: 'tags', visible: true, label: '标签', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
-        {key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
+        { key: 'roomId', visible: true, label: '房间id', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'roomName', visible: true, label: '房间名', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'storeName', visible: true, label: '店铺', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'picture', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'feeRules', visible: true, label: '套餐', minWidth: null, sortable: false, overflow: true, align: 'center', width: null },
+        { key: 'tags', visible: true, label: '标签', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'status', visible: true, label: '状态', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
       ],
       // 排序方式
       orderSorts: ['ascending', 'descending', null],
@@ -315,7 +233,7 @@ export default {
   },
   methods: {
     getStoreOptions() {
-      listStore({pageNum:1,pageSize:999  }).then(response => {
+      listStore({ pageNum: 1, pageSize: 999 }).then(response => {
         this.storeOptions = response.rows;
       });
     },
@@ -376,7 +294,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.roomId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -418,12 +336,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const roomIds = row.roomId || this.ids;
-      this.$modal.confirm('是否确认删除房间编号为"' + roomIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除房间编号为"' + roomIds + '"的数据项？').then(function () {
         return delRoom(roomIds);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -443,9 +361,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.link-type {
+  color: #11A983;
+  text-decoration: underline;
+}
+
+.link-type:hover {
+  color: #11A98330;
+  text-decoration: underline;
+}
 .el-select {
   :deep(.el-select__tags) {
     flex-wrap: wrap;
+
     // 标签换行显示
     .el-tag {
       margin: 2px;
diff --git a/src/views/system/room/room_detail.vue b/src/views/system/room/room_detail.vue
index b895b88..52a80e1 100644
--- a/src/views/system/room/room_detail.vue
+++ b/src/views/system/room/room_detail.vue
@@ -1,22 +1,566 @@
 <template>
-    <div class="room-detail">
-      <!-- 你的模板内容 -->
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'RoomDetail',
-    data() {
-      return {
-        // 你的数据
+  <div class="app-container">
+    <el-card class="box-card" shadow="hover">
+      <!-- 操作按钮 -->
+      <div class="operation-buttons">
+        <el-button type="primary" icon="el-icon-edit" size="small" @click="handleUpdate"
+          v-hasPermi="['system:room:edit']">修改房间</el-button>
+      </div>
+
+      <!-- 房间基本信息 -->
+      <div class="room-header">
+        <el-row :gutter="40">
+          <el-col :span="8">
+            <div class="image-wrapper">
+              <el-image :src="room.picture" fit="cover" class="room-image">
+                <div slot="error" class="image-slot">
+                  <i class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+            </div>
+          </el-col>
+          <el-col :span="16">
+            <div class="room-title">
+              <h2>{{ room.roomName }}</h2>
+              <el-tag :type="room.status === '1' ? 'success' : 'info'" class="status-tag" effect="dark">
+                {{ room.status === '1' ? '正常' : '停用' }}
+              </el-tag>
+            </div>
+            <div class="room-info">
+              <el-descriptions :column="2" border size="medium">
+                <el-descriptions-item label="所属门店">
+                  <span class="info-text">{{ room.storeName }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item label="商户ID">
+                  <span class="info-text">{{ room.merchantId }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item label="房间ID">
+                  <span class="info-text">{{ room.roomId }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item label="房间类型">
+                  <span class="info-text">{{ getRoomType(room.type) }} / {{ getRoomType2(room.type2) }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item label="基础价格">
+                  <span class="price">￥{{ room.hour }}</span>
+                  <span class="unit">/小时</span>
+                </el-descriptions-item>
+                <el-descriptions-item label="销售数量">
+                  <span class="info-text">{{ room.soldNum || '暂无数据' }}</span>
+                </el-descriptions-item>
+              </el-descriptions>
+
+              <div class="tags-section">
+                <span class="label">房间标签：</span>
+                <div class="tags-wrapper">
+                  <dict-tag v-for="tag in room.tags" :key="tag" :options="dict.type.ss_room_tags" :value="tag"
+                    class="tag-item" />
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+
+
+      <!-- WiFi信息 -->
+      <div v-if="room.wifi" class="section-block">
+        <h3>
+          <i class="el-icon-connection"></i>
+          WiFi信息
+        </h3>
+        <el-descriptions :column="2" border size="medium">
+          <el-descriptions-item label="WiFi名称">
+            <span class="info-text">{{ room.wifi }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="WiFi密码">
+            <span class="info-text">{{ room.wifiPassword }}</span>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+
+      <!-- 系统信息 -->
+      <div class="section-block">
+        <h3>
+          <i class="el-icon-info"></i>
+          系统信息
+        </h3>
+        <el-descriptions :column="3" border size="medium">
+          <el-descriptions-item label="创建人">
+            <span class="info-text">{{ room.createBy || '暂无' }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间">
+            <span class="info-text">{{ room.createTime || '暂无' }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="更新人">
+            <span class="info-text">{{ room.updateBy || '暂无' }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间">
+            <span class="info-text">{{ room.updateTime || '暂无' }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="备注" :span="2">
+            <span class="info-text">{{ room.remark || '暂无' }}</span>
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-card>
+
+    <!-- 修改房间弹窗 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="房间名" prop="roomName">
+          <el-input v-model="form.roomName" placeholder="请输入房间名" />
+        </el-form-item>
+        <el-form-item label="店铺" prop="storeId">
+          <el-select v-model="form.storeId" clearable filterable placeholder="请选择">
+            <el-option v-for="item in storeOptions" :key="item.storeId" :label="item.name" :value="item.storeId" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+          <el-select v-model="form.type" placeholder="请选择类型">
+            <el-option v-for="dict in dict.type.ss_room_type" :key="dict.value" :label="dict.label"
+              :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="图片" prop="picture">
+          <image-upload v-model="form.picture" />
+        </el-form-item>
+        <el-form-item label="标签" prop="tags">
+          <el-select v-model="form.tags" placeholder="请选择标签" clearable multiple style="width: auto; min-width: 240px">
+            <el-option v-for="dict in dict.type.ss_room_tags" :key="dict.value" :label="dict.label"
+              :value="dict.value" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <el-tabs v-model="activeTab" class="detail-tabs">
+
+      <el-tab-pane label="订单列表" name="orders">
+        <order :roomId="room.roomId"></order>
+      </el-tab-pane>
+    
+      <el-tab-pane label="设备列表" name="devices">
+        <device :roomId="room.roomId"></device>
+      </el-tab-pane>
+      <el-tab-pane label="套餐列表" name="rules">
+        <rule :roomId="room.roomId"></rule>
+      </el-tab-pane>
+      <el-tab-pane label="设施列表" name="equipments">
+        <equipment :roomId="room.roomId"></equipment>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { getRoom, updateRoom } from '@/api/system/room'
+import { getDicts } from '@/api/system/dict/data'
+import { listStore } from "@/api/system/store"
+import order from '@/views/system/order/index.vue'
+import device from '@/views/system/device/index.vue'
+import rule from '@/views/system/rule/index.vue'
+import equipment from '@/views/system/equipment/index.vue'
+export default {
+  name: 'RoomDetail',
+  dicts: ['ss_room_type', 'ss_room_tags', 'ss_room_status'],
+  components: { order, device, rule, equipment },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 弹出层标题
+      title: "",
+      room: {},
+      // 房间类型字典
+      roomTypeOptions: [],
+      // 房间类型2字典
+      roomType2Options: [],
+      // 房间标签字典
+      roomTagOptions: [],
+      // 店铺选项
+      storeOptions: [],
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        roomName: [
+          { required: true, message: "房间名不能为空", trigger: "blur" }
+        ],
+        storeId: [
+          { required: true, message: "店铺不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "类型不能为空", trigger: "blur" }
+        ],
+        tags: [
+          { required: true, message: "标签不能为空", trigger: "change" }
+        ],
+      },
+      activeTab: 'orders',
+    }
+  },
+
+  created() {
+    this.getDetail()
+    this.getDictData()
+    this.getStoreOptions()
+  },
+
+  methods: {
+    /** 获取房间详情 */
+    async getDetail() {
+      try {
+        const roomId = this.$route.params.roomId
+        const response = await getRoom(roomId)
+        this.room = response.data
+      } catch (error) {
+        console.error('获取房间详情失败:', error)
+        this.$message.error('获取房间详情失败')
+      }
+    },
+
+    /** 获取字典数据 */
+    async getDictData() {
+      try {
+        const [typeRes, type2Res, tagRes] = await Promise.all([
+          getDicts('room_type'),
+          getDicts('room_type2'),
+          getDicts('room_tag')
+        ])
+        this.roomTypeOptions = typeRes.data
+        this.roomType2Options = type2Res.data
+        this.roomTagOptions = tagRes.data
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+        this.$message.error('获取字典数据失败')
+      }
+    },
+
+    /** 获取店铺选项 */
+    getStoreOptions() {
+      listStore({ pageNum: 1, pageSize: 999 }).then(response => {
+        this.storeOptions = response.rows;
+      });
+    },
+
+    /** 获取房间类型名称 */
+    getRoomType(type) {
+      const found = this.roomTypeOptions.find(item => item.dictValue === type)
+      return found ? found.dictLabel : type
+    },
+
+    /** 获取房间类型2名称 */
+    getRoomType2(type) {
+      const found = this.roomType2Options.find(item => item.dictValue === type)
+      return found ? found.dictLabel : type
+    },
+
+    /** 获取标签名称 */
+    getTagName(tag) {
+      const found = this.roomTagOptions.find(item => item.dictValue === tag)
+      return found ? found.dictLabel : tag
+    },
+
+    /** 修改按钮操作 */
+    handleUpdate() {
+      this.reset();
+      this.form = { ...this.room };
+      this.open = true;
+      this.title = "修改房间";
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+
+    // 表单重置
+    reset() {
+      this.form = {
+        roomId: undefined,
+        roomName: undefined,
+        storeId: undefined,
+        type: undefined,
+        picture: undefined,
+        tags: []
+      };
+      this.resetForm("form");
+    },
+
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateRoom(this.form).then(response => {
+            this.$modal.msgSuccess("修改成功");
+            this.open = false;
+            this.getDetail();
+          });
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .detail-tabs {
+    margin-top: 20px;
+
+    .search-form {
+      margin-bottom: 20px;
+
+      .el-form-item {
+        margin-bottom: 10px;
       }
     }
   }
-  </script>
-  
-  <style scoped>
-  .room-detail {
-    /* 你的样式 */
+.app-container {
+  padding: 24px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 84px);
+}
+
+.operation-buttons {
+  margin-bottom: 20px;
+  text-align: right;
+}
+
+.box-card {
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+}
+
+.box-card:hover {
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
+}
+
+.room-header {
+  margin-bottom: 48px;
+}
+
+.image-wrapper {
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.image-wrapper:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.room-image {
+  width: 100%;
+  height: 320px;
+  border-radius: 12px;
+  object-fit: cover;
+}
+
+.room-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 28px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+.room-title h2 {
+  margin: 0;
+  margin-right: 15px;
+  font-size: 28px;
+  color: #303133;
+  font-weight: 600;
+}
+
+.status-tag {
+  margin-left: auto;
+  padding: 0 16px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 14px;
+}
+
+.room-info {
+  margin-top: 28px;
+}
+
+.info-text {
+  color: #606266;
+  font-size: 14px;
+}
+
+.tags-section {
+  margin-top: 28px;
+  padding: 16px;
+  background: #f9fafc;
+  border-radius: 8px;
+}
+
+.tags-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.label {
+  color: #606266;
+  margin-right: 16px;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.tag-item {
+  margin-right: 10px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  padding: 0 12px;
+  height: 28px;
+  line-height: 26px;
+}
+
+.section-block {
+  margin-top: 48px;
+  padding-top: 32px;
+  border-top: 1px solid #EBEEF5;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 28px;
+}
+
+h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+  display: flex;
+  align-items: center;
+}
+
+h3 i {
+  margin-right: 12px;
+  font-size: 24px;
+  color: #409EFF;
+}
+
+.total-rules {
+  margin-top: 3px;
+}
+
+.price {
+  color: #F56C6C;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.unit {
+  color: #909399;
+  margin-left: 4px;
+  font-size: 14px;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+}
+
+.image-slot i {
+  font-size: 48px;
+  color: #909399;
+}
+
+.custom-table {
+  margin-top: 16px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.el-descriptions) {
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 8px;
+}
+
+:deep(.el-descriptions__label) {
+  font-weight: 500;
+  color: #606266;
+}
+
+:deep(.el-descriptions__content) {
+  padding: 12px 16px;
+}
+
+:deep(.el-table th) {
+  background-color: #f5f7fa !important;
+  font-weight: 500;
+}
+
+:deep(.el-table--border) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+:deep(.el-descriptions__body) {
+  background-color: #fff;
+}
+
+:deep(.el-descriptions-item__label) {
+  background-color: #f5f7fa;
+  font-weight: 500;
+}
+
+// 标签选择器样式
+.el-select {
+  :deep(.el-select__tags) {
+    flex-wrap: wrap;
+
+    .el-tag {
+      margin: 2px;
+      max-width: none;
+    }
   }
-  </style>
\ No newline at end of file
+
+  :deep(.el-input__inner) {
+    height: auto;
+    min-height: 32px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+}
+
+.el-select-dropdown__item {
+  padding: 0 10px;
+  height: 32px;
+  line-height: 32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.el-form-item {
+  margin-bottom: 18px;
+
+  .el-select {
+    width: auto;
+    min-width: 240px;
+    max-width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/system/rule/index.vue b/src/views/system/rule/index.vue
index 4c192ca..5340d0a 100644
--- a/src/views/system/rule/index.vue
+++ b/src/views/system/rule/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="商户" prop="merchantId" v-if="!userId">
+      <el-form-item label="商户" prop="merchantId" v-if="!userId&&!roomId">
         <el-select v-model="queryParams.merchantId" placeholder="请选择商户" clearable @change="handleMerchantChange">
           <el-option
             v-for="item in merchantOptions"
@@ -11,7 +11,7 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="房间" prop="roomId">
+      <el-form-item label="房间" prop="roomId" v-if="!roomId">
         <el-select v-model="queryParams.roomId" placeholder="请选择房间" clearable @change="handleQuery">
           <el-option
             v-for="item in roomOptions"
@@ -205,7 +205,7 @@ export default {
   name: "Rule",
   mixins: [$showColumns],
   dicts: ['ss_fee_rule_mode'],
-  props: ['userId'],
+  props: ['userId', 'roomId'],
   data() {
     return {
       // 字段列表
@@ -275,8 +275,13 @@ export default {
     };
   },
   created() {
-  
+    console.log(this.roomId,'roomId');
+    if(this.roomId && this.roomId != 0){
+      this.queryParams.roomId = this.roomId;
+      this.queryParams.type2 = null;
+    }
     this.getMerchantList();
+    this.getList();
   },
   methods: {
     getMerchantList() {
@@ -296,7 +301,7 @@ export default {
       if(merchant) {
         this.queryParams.merchantId = merchant.userId;
         // 获取该商户的房间列表
-        this.getList();
+        
         this.getRoomList(merchant.userId);
       }
     }