用户关联房间

修改文档其他bug

src/views/markets/modules/agreementUnit/agreementAccount.vue

@@ -1,15 +1,15 @@
 <template>
     <a-card class="container">
         <div class="info">
-            <a-row :gutter="[16,16]">
+            <a-row :gutter="[16, 16]">
                 <a-col :span="4" class="padding_8">
                     <div class="title">
                         协议单位
                     </div>
                     <div class="value">
-                        {{agreementUnitInfo.customerName}}
+                        {{ agreementUnitInfo.customerName }}
                         <a-tag color="cyan">
-                            {{agreementUnitInfo.accountStatus_dictText}}
+                            {{ agreementUnitInfo.accountStatus_dictText }}
                         </a-tag>
                     </div>
                 </a-col>
@@ -18,7 +18,7 @@
                         客户类型
                     </div>
                     <div class="value">
-                        {{agreementUnitInfo.customerType_dictText}}
+                        {{ agreementUnitInfo.customerType_dictText }}
                     </div>
                 </a-col>
                 <a-col :span="3" class="padding_8">
@@ -26,7 +26,7 @@
                         消费
                     </div>
                     <div class="value">
-                        {{accountModel.consume}}
+                        {{ accountModel.consume }}
                     </div>
                 </a-col>
                 <a-col :span="3" class="padding_8">
@@ -34,7 +34,7 @@
                         收款
                     </div>
                     <div class="value">
-                        {{accountModel.payment}}
+                        {{ accountModel.payment }}
                     </div>
                 </a-col>
                 <a-col :span="3" class="padding_8">
@@ -42,7 +42,8 @@
                         记账额度
                     </div>
                     <div class="value">
-                        {{agreementUnitInfo.bookkeeping == null || agreementUnitInfo.bookkeeping == 0?'无限制':agreementUnitInfo.bookkeeping}}
+                        {{ agreementUnitInfo.bookkeeping == null || agreementUnitInfo.bookkeeping ==
+                            0 ? '无限制' : agreementUnitInfo.bookkeeping }}
                     </div>
                 </a-col>
                 <a-col :span="4" class="padding_8">
@@ -50,21 +51,80 @@
                         已用额度
                     </div>
                     <div class="value">
-                        {{accountModel.used}}
+                        {{ accountModel.used }}
                     </div>
                 </a-col>
                 <a-col :span="4" class="bak_red padding_8 border_radius_10">
-                    <div class="title">
+                    <div class="title" style="color: white;">
                         剩余额度
                     </div>
-                    <div class="value">
-                        {{accountModel.surplus}}
+                    <div class="value" style="color: white; font-weight: 600;">
+                        {{ (agreementUnitInfo.bookkeeping == null || agreementUnitInfo.bookkeeping == 0 ? '--.--' :
+                            (agreementUnitInfo.bookkeeping - accountModel.used)) }}
                     </div>
                 </a-col>
             </a-row>
         </div>
         <div class="oper">
-
+            <div class="oper-wrapper">
+                <div class="oper-item">
+                    <a-button>
+                        <a-icon type="file" />
+                        商品消费
+                    </a-button>
+                </div>
+                <div class="oper-item">
+                    <a-button>
+                        <a-icon type="file" />
+                        入账
+                    </a-button>
+                </div>
+                <div class="oper-item">
+                    <a-button>
+                        <a-icon type="file" />
+                        转账
+                    </a-button>
+                </div>
+                <div class="oper-item">
+                    <a-button>
+                        <a-icon type="file" />
+                        结算
+                    </a-button>
+                </div>
+                <div class="oper-item">
+                    <a-button>
+                        <a-icon type="file" />
+                        冲账
+                    </a-button>
+                </div>
+            </div>
+            <div class="kajimi">
+                <a-radio-group button-style="solid" v-model="settleType" @change="onTypeChange">
+                    <a-radio-button :value="0">
+                        全部
+                    </a-radio-button>
+                    <a-radio-button :value="1">
+                        未结算
+                    </a-radio-button>
+                    <a-radio-button :value="2">
+                        已结算
+                    </a-radio-button>
+                </a-radio-group>
+                <span style="display: inline-block; margin-left: 10px;">
+                    <a-range-picker v-model="rangeValue" @change="onRangeChange" :format="dateFormat" />
+                </span>
+                <span style="display: inline-block; margin-left: 10px;">
+                    <a-button>
+                        <a-icon type="search" />
+                        查询
+                    </a-button>
+                </span>
+                <span style="display: block; margin-left: 10px;">
+                    <a-tag color="orange">
+                        <pre style="margin: 0;">消费：￥300    收款：￥0    余额：￥-300</pre>
+                    </a-tag>
+                </span>
+            </div>
         </div>
         <div class="cotent">
 
@@ -73,58 +133,98 @@
 </template>
 
 <script>
-    export default {
-        name: 'agreementAccount',
-        data:{
-            agreementUnitInfo:{},
-            accountModel:{
-                consume:'0',
-                payment:'0',
-                used:'0',
-                surplus:'0'
+import moment from 'moment';
+export default {
+    name: 'agreementAccount',
+    data() {
+        var my_date = new Date();
+        var first_date = new Date(my_date.getFullYear(), my_date.getMonth(), 1);
+        var last_date = new Date(my_date.getFullYear(), my_date.getMonth() + 1, 0);
+        return {
+            settleType: 1,
+            dateFormat: 'YYYY-MM-DD',
+            rangeValue: [moment(first_date), moment(last_date)],
+            defaultRange: [first_date.format('yyyy-MM-dd'), last_date.format('yyyy-MM-dd')],
+            agreementUnitInfo: {},
+            accountModel: {
+                consume: '0',
+                payment: '0',
+                used: '0',
+                surplus: '0'
             }
-        },
-        activated(){
-            console.log(99999)
-            var agreementUnitInfo = JSON.parse(localStorage.getItem("agreementUnitInfo"));
-            this.agreementUnitInfo = Object.assign({}, agreementUnitInfo);
-            this.$forceUpdate()
-        },
-        created() {
-            var agreementUnitInfo = JSON.parse(localStorage.getItem("agreementUnitInfo"));
-            this.agreementUnitInfo = Object.assign({}, agreementUnitInfo);
+        }
+    },
+    activated() {
+        console.log(99999)
+        var agreementUnitInfo = JSON.parse(localStorage.getItem("agreementUnitInfo"));
+        this.agreementUnitInfo = Object.assign({}, agreementUnitInfo);
+        this.$forceUpdate()
+    },
+    created() {
+        var agreementUnitInfo = JSON.parse(localStorage.getItem("agreementUnitInfo"));
+        this.agreementUnitInfo = Object.assign({}, agreementUnitInfo);
 
-            var temp = {
-                consume:'0',
-                payment:'0',
-                used:'0',
-                surplus:'0'
-            }
-            this.accountModel = Object.assign({}, temp);
-            // console.log(agreementUnitInfo.customerName)
+        var temp = {
+            consume: '0',
+            payment: '0',
+            used: '0',
+            surplus: '0'
+        }
+        this.accountModel = Object.assign({}, temp);
+        // console.log(agreementUnitInfo.customerName)
+    },
+    methods: {
+        moment,
+        onRangeChange(e) {
+            console.log(this.rangeValue);
+        },
+        onTypeChange(e) {
+            console.log(e);
         }
     }
+}
 </script>
 
 <style scoped>
-    .info{
-        text-align: center;
-    }
-    .title {
-        font-size: 16px;
-        font-weight: 500;
-    }
-    .value{
-        padding-top: 10px;
-    }
-    .bak_red{
-        background-color: red;
-    }
-    .padding_8{
-        padding: 8px 0;
-        border-radius: 10px;
-    }
-    .border_radius_10{
-        border-radius: 10px;
-    }
+.info {
+    text-align: center;
+}
+
+.title {
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.value {
+    padding-top: 10px;
+}
+
+.bak_red {
+    background-color: red;
+}
+
+.padding_8 {
+    padding: 8px 0;
+    border-radius: 10px;
+}
+
+.border_radius_10 {
+    border-radius: 10px;
+}
+
+.oper-wrapper {
+    display: flex;
+    width: 100%;
+}
+
+.oper-item {
+    margin-right: 10px;
+}
+
+.kajimi {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+}
 </style>
+

src/views/settings/components/roomModules/RoomLayoutPriceModal.vue

@@ -26,7 +26,7 @@ export default {
     data() {
         return {
             tabCurrent: '1',
-            width: '90%',
+            width: '80%',
             visible: false,
             disableSubmit: false,
             raw: null

src/views/settings/components/roomModules/RoomQtfPriceTable.vue

@@ -18,64 +18,50 @@
             </span>
         </a-table>
         <a-form-model layout="inline" ref="form" :model="model" :rules="validatorRules" slot="detail">
-            <a-row>
-                <a-col :span="3">
-                    <a-form-model-item label="价格名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
-                        <a-input v-model="model.name" placeholder="请输入房价名称"></a-input>
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="原价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="oprice">
-                        <a-input-number style="width:100%;" v-model="model.oprice" :min="1" placeholder="请填写原价"
-                            @change="formVipOpriceChange" />
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="现价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">
-                        <a-input-number style="width:100%;" v-model="model.price" :min="1" placeholder="请填写现价" />
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="预付" prop="prepay">
-                        <a-radio-group v-model="model.prepay">
-                            <a-radio-button :value="1">
-                                是
-                            </a-radio-button>
-                            <a-radio-button :value="0">
-                                否
-                            </a-radio-button>
-                        </a-radio-group>
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="积分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="integral">
-                        <a-input-number style="width:100%;" v-model="model.integral" placeholder="请填写积分" />
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="num">
-                        <a-input-number style="width:100%;" v-model="model.num" placeholder="请填写数量" />
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="会员折扣" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isVip">
-                        <a-radio-group v-model="model.isVip" @change="onVipChange">
-                            <a-radio-button :value="1">
-                                是
-                            </a-radio-button>
-                            <a-radio-button :value="0">
-                                否
-                            </a-radio-button>
-                        </a-radio-group>
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="1">
-                    <a-button :disabled="submitLoading" :loading="submitLoading" @click="submitForm" type="primary">保存</a-button>
-                </a-col>
-                <a-col :span="1">
-                    <a-button :disabled="submitLoading" :loading="submitLoading" @click="clearForm" type="primary">清空</a-button>
-                </a-col>
-            </a-row>
+            <a-form-model-item label="价格名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
+                <a-input v-model="model.name" placeholder="请输入房价名称"></a-input>
+            </a-form-model-item>
+            <a-form-model-item label="原价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="oprice">
+                <a-input-number style="width:100%;" v-model="model.oprice" :min="1" placeholder="请填写原价"
+                    @change="formVipOpriceChange" />
+            </a-form-model-item>
+            <a-form-model-item label="现价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">
+                <a-input-number style="width:100%;" v-model="model.price" :min="1" placeholder="请填写现价" />
+            </a-form-model-item>
+            <a-form-model-item label="预付" prop="prepay">
+                <a-radio-group v-model="model.prepay">
+                    <a-radio-button :value="1">
+                        是
+                    </a-radio-button>
+                    <a-radio-button :value="0">
+                        否
+                    </a-radio-button>
+                </a-radio-group>
+            </a-form-model-item>
+            <a-form-model-item label="积分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="integral">
+                <a-input-number style="width:100%;" v-model="model.integral" placeholder="请填写积分" />
+            </a-form-model-item>
+            <a-form-model-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="num">
+                <a-input-number style="width:100%;" v-model="model.num" placeholder="请填写数量" />
+            </a-form-model-item>
+            <a-form-model-item label="会员折扣" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isVip">
+                <a-radio-group v-model="model.isVip" @change="onVipChange">
+                    <a-radio-button :value="1">
+                        是
+                    </a-radio-button>
+                    <a-radio-button :value="0">
+                        否
+                    </a-radio-button>
+                </a-radio-group>
+            </a-form-model-item>
+            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-button :disabled="submitLoading" :loading="submitLoading" @click="submitForm"
+                    type="primary">保存</a-button>
+            </a-form-model-item>
+            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-button :disabled="submitLoading" :loading="submitLoading" @click="clearForm"
+                        type="primary">清空</a-button>
+            </a-form-model-item>
         </a-form-model>
 
         <div class="vip-config" v-if="model.isVip">
@@ -380,7 +366,7 @@ export default {
             })
         },
         doCreate() {
-            
+
             let model = JSON.parse(JSON.stringify(this.model))
             model['hotelId'] = hotelItem.id
             model['layoutId'] = this.layoutId
@@ -409,7 +395,7 @@ export default {
             }).catch(err => {
                 this.$message.error("保存失败")
             }).finally(_ => {
-                
+
                 this.submitLoading = false
             })
         }
@@ -420,7 +406,7 @@ export default {
 
 <style lang="css" scoped>
 .vip-config {
-    width: 30%;
+    width: 50%;
     height: 200px;
     overflow-y: auto;
     margin-top: 20px;

src/views/settings/components/roomModules/RoomZdfPriceTable.vue

@@ -11,9 +11,9 @@
             <span slot="startDate" slot-scope="text, record, index">
                 {{ record.startDate }} ~ {{ record.endDate }}
             </span>
-            
+
             <span slot="sellerId" slot-scope="text, record, index">
-                {{ record.sellerId ? getSellerName(record.sellerId): '' }}
+                {{ record.sellerId ? getSellerName(record.sellerId) : '' }}
             </span>
             <span slot="action" slot-scope="text, record">
                 <a @click="handleEdit(record)">编辑</a>
@@ -25,94 +25,70 @@
             </span>
         </a-table>
         <a-form-model layout="inline" ref="form" :model="model" :rules="validatorRules" slot="detail">
-            <a-row>
-                <a-col :span="3">
-                    <a-form-model-item label="价格名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
-                        <a-input v-model="model.name" placeholder="请输入房价名称"></a-input>
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="原价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="oprice">
-                        <a-input-number style="width:100%;" v-model="model.oprice" :min="1" placeholder="请填写原价"
-                            @change="formVipOpriceChange" />
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="现价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">
-                        <a-input-number style="width:100%;" v-model="model.price" :min="1" placeholder="请填写现价" />
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="预付" prop="prepay">
-                        <a-radio-group v-model="model.prepay">
-                            <a-radio-button :value="1">
-                                是
-                            </a-radio-button>
-                            <a-radio-button :value="0">
-                                否
-                            </a-radio-button>
-                        </a-radio-group>
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="积分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="integral">
-                        <a-input-number style="width:100%;" v-model="model.integral" placeholder="请填写积分" />
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="num">
-                        <a-input-number style="width:100%;" v-model="model.num" placeholder="请填写数量" />
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="会员折扣" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isVip">
-                        <a-radio-group v-model="model.isVip" @change="onVipChange">
-                            <a-radio-button :value="1">
-                                是
-                            </a-radio-button>
-                            <a-radio-button :value="0">
-                                否
-                            </a-radio-button>
-                        </a-radio-group>
-                    </a-form-model-item>
-                </a-col>
-                
-            </a-row>
-            <a-row>
-                <a-col :span="4">
-                    <a-form-model-item label="适用时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startDate">
-                        <a-time-picker :open.sync="open2"  v-model="model.startDate" format="HH:mm" @change="onStartTimeChange">
-                            <a-button slot="addon" size="small" type="primary" @click="open2 = false">
-                              确定
-                            </a-button>
-                          </a-time-picker>
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="3">
-                    <a-form-model-item label="" :labelCol="labelCol1" :wrapperCol="wrapperCol" prop="endDate">
-                        <a-time-picker :open.sync="open" v-model="model.endDate" format="HH:mm">
-                            <a-button slot="addon" size="small" type="primary" @click="open = false">
-                              确定
-                            </a-button>
-                          </a-time-picker>
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="4">
-                    <a-form-model-item label="钟点房方案" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sellerId">
-                        <a-select style="width: 120px" v-model="model.sellerId" placeholder="请选择">
-                            <a-select-option :value="item.id" v-for="item in hourRules">
-                              {{ item.hourRoomName }}
-                            </a-select-option>
-                          </a-select>
-                    </a-form-model-item>
-                </a-col>
-                <a-col :span="2">
-                    <a-button :disabled="submitLoading" :loading="submitLoading" @click="submitForm" type="primary">保存</a-button>
-                </a-col>
-                <a-col :span="1">
-                    <a-button :disabled="submitLoading" :loading="submitLoading" @click="clearForm" type="primary">清空</a-button>
-                </a-col>
-            </a-row>
+            <a-form-model-item label="价格名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
+                <a-input v-model="model.name" placeholder="请输入房价名称"></a-input>
+            </a-form-model-item>
+            <a-form-model-item label="原价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="oprice">
+                <a-input-number style="width:100%;" v-model="model.oprice" :min="1" placeholder="请填写原价"
+                    @change="formVipOpriceChange" />
+            </a-form-model-item>
+            <a-form-model-item label="现价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="price">
+                <a-input-number style="width:100%;" v-model="model.price" :min="1" placeholder="请填写现价" />
+            </a-form-model-item>
+            <a-form-model-item label="预付" prop="prepay">
+                <a-radio-group v-model="model.prepay">
+                    <a-radio-button :value="1">
+                        是
+                    </a-radio-button>
+                    <a-radio-button :value="0">
+                        否
+                    </a-radio-button>
+                </a-radio-group>
+            </a-form-model-item>
+            <a-form-model-item label="积分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="integral">
+                <a-input-number style="width:100%;" v-model="model.integral" placeholder="请填写积分" />
+            </a-form-model-item>
+            <a-form-model-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="num">
+                <a-input-number style="width:100%;" v-model="model.num" placeholder="请填写数量" />
+            </a-form-model-item>
+            <a-form-model-item label="会员折扣" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isVip">
+                <a-radio-group v-model="model.isVip" @change="onVipChange">
+                    <a-radio-button :value="1">
+                        是
+                    </a-radio-button>
+                    <a-radio-button :value="0">
+                        否
+                    </a-radio-button>
+                </a-radio-group>
+            </a-form-model-item>
+            <a-form-model-item label="适用时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startDate">
+                <a-time-picker :open.sync="open2" v-model="model.startDate" format="HH:mm" @change="onStartTimeChange">
+                    <a-button slot="addon" size="small" type="primary" @click="open2 = false">
+                        确定
+                    </a-button>
+                </a-time-picker>
+            </a-form-model-item>
+            <a-form-model-item label="" :labelCol="labelCol1" :wrapperCol="wrapperCol" prop="endDate">
+                <a-time-picker :open.sync="open" v-model="model.endDate" format="HH:mm">
+                    <a-button slot="addon" size="small" type="primary" @click="open = false">
+                        确定
+                    </a-button>
+                </a-time-picker>
+            </a-form-model-item>
+            <a-form-model-item label="钟点房方案" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sellerId">
+                <a-select style="width: 120px" v-model="model.sellerId" placeholder="请选择">
+                    <a-select-option :value="item.id" v-for="item in hourRules" :key="item.id">
+                        {{ item.hourRoomName }}
+                    </a-select-option>
+                </a-select>
+            </a-form-model-item>
+            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-button :disabled="submitLoading" :loading="submitLoading" @click="submitForm"
+                    type="primary">保存</a-button>
+            </a-form-model-item>
+            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol">
+                <a-button :disabled="submitLoading" :loading="submitLoading" @click="clearForm" type="primary">清空</a-button>
+            </a-form-model-item>
         </a-form-model>
 
         <div class="vip-config" v-if="model.isVip">
@@ -143,7 +119,7 @@
 
 <script>
 Date.prototype.Format = function (fmt) {
-        var o = {
+    var o = {
         "M+": this.getMonth() + 1, //月份
         "d+": this.getDate(), //日
         "H+": this.getHours(), //小时
@@ -151,12 +127,12 @@ Date.prototype.Format = function (fmt) {
         "s+": this.getSeconds(), //秒
         "q+": Math.floor((this.getMonth() + 3) / 3), //季度
         "S": this.getMilliseconds() //毫秒
-        };
-        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
-        for (var k in o)
+    };
+    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+    for (var k in o)
         if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
-        return fmt;
-        }
+    return fmt;
+}
 import { list, modify, create, getLayoutpriceLevels, getHourRoomRule } from '@/api/roomLayoutPrice'
 import { httpAction, getAction } from "@/api/manage";
 import * as api from '@/api/api'
@@ -281,14 +257,14 @@ export default {
     },
     methods: {
         onStartTimeChange(e, timeStr) {
-            console.log(e,timeStr,this.model.startDate)
+            console.log(e, timeStr, this.model.startDate)
         },
         onEndTimeChange(e, timeStr) {
             this.model.endDate = timeStr
         },
         getSellerName(id) {
-            let index = this.hourRules.findIndex(s=>s.id == id)
-            if(index > -1) {
+            let index = this.hourRules.findIndex(s => s.id == id)
+            if (index > -1) {
                 return this.hourRules[index].hourRoomName
             }
             return id
@@ -340,7 +316,7 @@ export default {
                 pageNo: 1,
                 pageSize: 999
             }).then(res => {
-                if(res.code == 200) {
+                if (res.code == 200) {
                     this.hourRules = res.result.records
                 } else {
                     this.$message.warning('⚠️没有找到钟点房方案')
@@ -385,8 +361,8 @@ export default {
                 cpData.isVip = record.isVip ? 1 : 0
                 cpData.prepay = record.prepay ? 1 : 0
                 this.model = cpData
-                this.model.startDate = moment(this.model.startDate,"HH:mm")
-                this.model.endDate = moment(this.model.endDate,"HH:mm")
+                this.model.startDate = moment(this.model.startDate, "HH:mm")
+                this.model.endDate = moment(this.model.endDate, "HH:mm")
                 let nowLvs = JSON.parse(JSON.stringify(this.origiVipLevels))
                 if (this.model.oprice) {
                     nowLvs.forEach(s => {
@@ -459,7 +435,7 @@ export default {
             model['type'] = 2
             model.startDate = this.model.startDate
             model.endDate = this.model.endDate
-            model.startDate =model.startDate.utcOffset(8).format("HH:mm")
+            model.startDate = model.startDate.utcOffset(8).format("HH:mm")
             model.endDate = model.endDate.utcOffset(8).format("HH:mm")
             let memberPriceEntities = [];
             if (model.isVip) {
@@ -490,7 +466,7 @@ export default {
             })
         },
         doCreate() {
-            
+
             let model = JSON.parse(JSON.stringify(this.model))
             model['hotelId'] = hotelItem.id
             model['layoutId'] = this.layoutId
@@ -498,10 +474,10 @@ export default {
             // 经过序列化的moment要重新赋值成moment对象
             model.startDate = this.model.startDate
             model.endDate = this.model.endDate
-            model.startDate =model.startDate.utcOffset(8).format("HH:mm")
+            model.startDate = model.startDate.utcOffset(8).format("HH:mm")
             model.endDate = model.endDate.utcOffset(8).format("HH:mm")
             let memberPriceEntities = [];
-            
+
             if (model.isVip) {
                 (this.vipLevels || []).forEach(s => {
                     let item = {
@@ -525,7 +501,7 @@ export default {
             }).catch(err => {
                 this.$message.error("保存失败")
             }).finally(_ => {
-                
+
                 this.submitLoading = false
             })
         }
@@ -536,7 +512,7 @@ export default {
 
 <style lang="css" scoped>
 .vip-config {
-    width: 30%;
+    width: 50%;
     height: 200px;
     overflow-y: auto;
     margin-top: 20px;
@@ -554,8 +530,9 @@ export default {
 .h-title {
     font-weight: 600;
 }
-/deep/
-.ant-select-selection__placeholder, .ant-select-search__field__placeholder{
+
+/deep/ .ant-select-selection__placeholder,
+.ant-select-search__field__placeholder {
     display: inline-block !important;
 }
 </style>

src/views/settings/components/roomModules/moreSet/moreModal.vue

@@ -10,7 +10,7 @@
     cancelText="关闭">
     <bus-market-member-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></bus-market-member-form>
   </j-modal> -->
-<j-modal destroyOnClose title="详细设置" :width="'70%'" :footer="null" :visible="visible" :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @ok="handleOk" @cancel="handleCancel">
+<j-modal destroyOnClose title="详细设置" :width="'50%'" :footer="null" :visible="visible" :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @ok="handleOk" @cancel="handleCancel">
     <a-card style="width:100%" :tab-list="tabListNoTitle" :active-tab-key="noTitleKey" @tabChange="key => onTabChange(key, 'noTitleKey')">
         <BusMarketMemberForm ref="realForm" @ok="submitCallback" :disabled="disableSubmit" v-show="noTitleKey=='commodity'" />
         <GoodImg @saveOk="handleCancel" ref="goodImg" v-show="noTitleKey=='goodImg'" />

src/views/settings/components/roomModules/roomGen.vue

@@ -29,8 +29,11 @@
           </a-select>
         </a-form-model-item>
 
-        <a-form-model-item label="层数最高" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="layoutId">
-          <a-input-number placeholder="输入楼层数" v-model="model.floorCount" :min="1" style="width: 120px" />层
+        <a-form-model-item label="起始层数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="layoutId">
+          <a-input-number placeholder="输入起始层数" v-model="model.floorCount" :min="1" style="width: 120px" />层
+        </a-form-model-item>
+        <a-form-model-item label="最高层数" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="layoutId">
+          <a-input-number placeholder="输入最高层数" v-model="model.floorCountMax" :min="1" style="width: 120px" />层
         </a-form-model-item>
         <a-form-model-item label="每层房间数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="layoutId">
           <a-input-number placeholder="输入每层房间数" v-model="model.roomCount" :min="1" style="width: 120px" />间
@@ -46,8 +49,8 @@
         <a-button type="primary" @click="genRooms"> 批量生成 </a-button>
       </a-form>
     </div>
-    <div style="flex: 7">
-      <div v-if="roomTree.length > 0">
+    <div style="flex: 7;">
+      <div v-if="roomTree.length > 0" style="height: calc(100vh - (52px + 59px + 100px));overflow-y: auto;">
         <div v-for="(item, index) in roomTree" :key="index" style="width: 100%">
           <div style="font-width: 600; font-size: 20px" @click="sele(item)">
             <a-input placeholder="请填写楼层名" v-model="item.name" class="floor-input"></a-input>
@@ -83,38 +86,42 @@
   <div v-else class="room-layout-settings">
 
 
-    <div style="flex:1;height: calc(100vh - 180px);overflow-y: auto;">
-      <div class="wait-select-title">
+    <div style="flex:1;position: relative;">
+      <div class="wait-select-title" style="display: flex; position: absolute;top: 0;width: 98%;">
         <div class="color-title">待配置房间</div>
-      </div>
-      <div v-for="(item, index) in roomTree" :key="index" style="width: 100%; padding-left: 30px">
-        <div style="font-width: 600; font-size: 20px" @click="sele(item)">
-          {{ item.name }}
+        <div class="bottom-sele-btn">
+          <a-popover placement="topRight" v-if="canMove.can">
+            <template slot="content">
+              <a-button type="link" v-for="(item, index) in layouts" :key="item.id" @click="moveTo(index)">
+                {{ item.name }}
+              </a-button>
+            </template>
+            <template slot="title">
+              <span>要移动到的目标房型</span>
+            </template>
+            <a-button :disabled="false" type="primary">移动到房型({{ canMove.count }})</a-button>
+          </a-popover>
+          <a-button v-else :disabled="true" type="primary">移动到房型(0)</a-button>
+          <a-button :disabled="saveLoading" :loading="saveLoading" @click="back" type="primary">取消</a-button>
+          <a-button :disabled="saveLoading" :loading="saveLoading" @click="save" type="primary">保存并查看房间列表</a-button>
+
         </div>
-        <div style="display: flex;justify-content: start;margin: 20px;flex-wrap: wrap;">
-          <div v-for="(room, indexs) in item.children" :key="indexs" class="select-room-item"
-            :class="[room.checked ? 'checked-room' : '']" @click="room.checked = !room.checked"
-            style="width: 80px; margin-top: 10px">
-            {{ room.name }}
+      </div>
+      <div style="flex:1;height: calc(100vh - 180px);overflow-y: auto;">
+        <div style="height: 34px;width: 1px;"></div>
+        <div v-for="(item, index) in roomTree" :key="index" style="width: 100%; padding-left: 30px">
+          <div style="font-width: 600; font-size: 20px" @click="sele(item)">
+            {{ item.name }}
+          </div>
+          <div style="display: flex;justify-content: start;margin: 20px;flex-wrap: wrap;">
+            <div v-for="(room, indexs) in item.children" :key="indexs" class="select-room-item"
+              :class="[room.checked ? 'checked-room' : '']" @click="room.checked = !room.checked"
+              style="width: 80px; margin-top: 10px">
+              {{ room.name }}
+            </div>
           </div>
-        </div>
 
-      </div>
-      <div class="bottom-sele-btn">
-        <a-popover placement="topRight" v-if="canMove.can">
-          <template slot="content">
-            <a-button type="link" v-for="(item, index) in layouts" :key="item.id" @click="moveTo(index)">
-              {{ item.name }}
-            </a-button>
-          </template>
-          <template slot="title">
-            <span>要移动到的目标房型</span>
-          </template>
-          <a-button :disabled="false" type="primary">移动到房型({{ canMove.count }})</a-button>
-        </a-popover>
-        <a-button v-else :disabled="true" type="primary">移动到房型(0)</a-button>
-        <a-button :disabled="saveLoading" :loading="saveLoading" @click="back" type="primary">取消</a-button>
-        <a-button :disabled="saveLoading" :loading="saveLoading" @click="save" type="primary">保存并查看房间列表</a-button>
+        </div>
 
       </div>
     </div>
@@ -176,6 +183,7 @@ export default {
       roomTree: [],
       model: {
         floorCount: 1,
+        floorCountMax: 2,
         roomCount: 10,
         prefix: "",
         isExpectEnd: false,
@@ -398,13 +406,20 @@ export default {
     },
     check() { },
     genRooms() {
+      let model = this.model;
       if (!this.buildingId) {
         this.$message.error("请先选择楼栋")
         return
       }
+      if (model.floorCount > model.floorCountMax) {
+        this.$message.error("最低层数不能大于最高层数")
+        return
+      }
+
       let floors = [];
-      let model = this.model;
-      for (let i = 0; i < model.floorCount; i++) {
+
+
+      for (let i = model.floorCount; i <= model.floorCountMax; i++) {
         let children = [];
         for (let r = 0; r < model.roomCount; r++) {
           let expectEndArr = [];
@@ -419,14 +434,14 @@ export default {
               checked: false,
               floorIndex: i,
               name:
-                (i + 1).toString() +
+                + (i).toString() +
                 "0" +
                 numStr.padStart(this.model.roomCount.toString().length, "0"),
             });
           }
         }
         floors.push({
-          name: `第${i + 1}层`,
+          name: `第${i}层`,
           children: children,
         });
       }
@@ -530,7 +545,7 @@ export default {
 }
 
 .bottom-sele-btn {
-  padding-bottom: 30px;
+  height: 30px;
 }
 
 .layout-room-item {

src/views/settings/components/roomModules/roomNumSettings/roomNumList.vue

@@ -1,70 +1,36 @@
 <template>
   <div>
     <div class="page-wrapper">
-      <div class="left-wrapper">
-        <a-input
-          style="width: 140px; margin-right: 10px"
-          v-model="newBuildingName"
-          placeholder="请填写楼栋名称"
-        ></a-input>
-        <a-button
-          :disabled="saveBtnLoading"
-          :loading="saveBtnLoading"
-          @click="saveNewBuilding"
-          type="primary"
-          >新增楼栋</a-button
-        >
+      <div class="left-wrapper-1">
+        <div>
+          <a-input style="width: 140px; margin-right: 10px" v-model="newBuildingName" placeholder="请填写楼栋名称"></a-input>
+          <a-button :disabled="saveBtnLoading" :loading="saveBtnLoading" @click="saveNewBuilding"
+            type="primary">新增楼栋</a-button>
+        </div>
         <div class="building-tree">
           <div v-if="buildingTree && buildingTree.length > 0">
-            <a-tree
-              class="draggable-tree"
-              :tree-data="buildingTree"
-              :default-expand-all="true"
-              blockNode
-              style="width: 400px"
-              :replaceFields="{
+            <a-tree class="draggable-tree" :tree-data="buildingTree" :default-expand-all="true" blockNode
+              style="width: 100%" :replaceFields="{
                 children: 'children',
                 title: 'name',
                 key: 'id',
-              }"
-            >
-              <div
-                slot="title"
-                slot-scope="item"
-                style="display: flex;align-items: center;height: 100%;overflow: hidden;"
-              >
-                <a-button
-                  style="font-size: 12px"
-                  type="link"
-                  @click="filterSearch(item)"
-                  >{{ item.name }}</a-button
-                >
+              }">
+              <div slot="title" slot-scope="item"
+                style="display: flex;align-items: center;height: 100%;overflow: hidden;">
+                <a-button style="font-size: 12px" type="link" @click="filterSearch(item)">{{ item.name }}</a-button>
                 <div style="flex: 1; height: 1px"></div>
-                <a-button
-                  style="font-size: 12px; padding: 0 5px"
-                  type="link"
-                  v-if="item.parentId == 0"
-                  @click="onAddFlowerClick(item)"
-                  >添加楼层</a-button
-                >
-                <a-button
-                  style="font-size: 12px; padding: 0 5px"
-                  type="link"
-                  @click="onTreeEditClick(item)"
-                  >编辑</a-button
-                >
+                <a-button style="font-size: 12px; padding: 0 5px" type="link" v-if="item.parentId == 0"
+                  @click="onAddFlowerClick(item)">添加楼层</a-button>
+                <a-button style="font-size: 12px; padding: 0 5px" type="link" @click="onTreeEditClick(item)">编辑</a-button>
 
                 <a-popconfirm placement="topLeft" ok-text="是的" cancel-text="取消" @confirm="onTreeDeleteClick(item)">
-                    <template slot="title">
-                      确定删除吗?
-                    </template>
-                    <a-button
-                    style="font-size: 12px; padding: 0 5px"
-                    type="link"
-                    >删除</a-button>
-                  </a-popconfirm>
-               
-                
+                  <template slot="title">
+                    确定删除吗?
+                  </template>
+                  <a-button style="font-size: 12px; padding: 0 5px" type="link">删除</a-button>
+                </a-popconfirm>
+
+
               </div>
             </a-tree>
           </div>
@@ -76,19 +42,9 @@
       </div>
     </div>
     <!-- 添加楼层 -->
-    <a-modal
-      width="300px"
-      title="楼栋楼层编辑"
-      :visible.sync="fVisible"
-      :confirm-loading="fSaveLoading"
-      @ok="saveFlow"
-      @cancel="fVisible = false"
-    >
-      <a-input
-        style="width: 240px; margin-right: 10px"
-        v-model="flowData.name"
-        placeholder="请填写楼层/楼栋名称"
-      ></a-input>
+    <a-modal width="300px" title="楼栋楼层编辑" :visible.sync="fVisible" :confirm-loading="fSaveLoading" @ok="saveFlow"
+      @cancel="fVisible = false">
+      <a-input style="width: 240px; margin-right: 10px" v-model="flowData.name" placeholder="请填写楼层/楼栋名称"></a-input>
     </a-modal>
   </div>
 </template>
@@ -98,12 +54,12 @@
 import { save, buildingTree, modify, remove } from "@/api/roomBuildingApi";
 import roomNumTable from './roomNumTable.vue'
 export default {
-    components: {
-        roomNumTable  
-    },
+  components: {
+    roomNumTable
+  },
   data() {
     return {
-        currentFilterId: null,
+      currentFilterId: null,
       flowData: {
         id: null,
         hotelId: null,
@@ -129,9 +85,9 @@ export default {
   methods: {
     // 点击 触发搜索
     filterSearch(item) {
-        this.currentFilterId = item.id
-        this.$refs.numtable.ipagination.current = 1
-        this.$refs.numtable.searchParam(item.id, item.name, item.parentId == "0")
+      this.currentFilterId = item.id
+      this.$refs.numtable.ipagination.current = 1
+      this.$refs.numtable.searchParam(item.id, item.name, item.parentId == "0")
     },
     // 获取楼栋树
     loadBuildingTreeData() {
@@ -166,24 +122,24 @@ export default {
     },
     // 确定删除楼层/楼栋
     onTreeDeleteClick(item) {
-        remove({
-            id: item.id
-        }).then(res => {
-            if(res.code == 200) {
-                this.$message.success('删除成功')
-                
-                this.loadBuildingTreeData()
-                this.$refs.numtable.ipagination.current = 1
-                this.$refs.numtable.ipagination.pageSize = 10
-                if(this.currentFilterId == item.id ) {
-                    if(item.parentId == "0")
-                        this.$refs.numtable.filters['buildId'] = null
-                    else 
-                        this.$refs.numtable.filters['floorId'] = null
-                }
-                this.$refs.numtable.loadData()
-            }
-        })
+      remove({
+        id: item.id
+      }).then(res => {
+        if (res.code == 200) {
+          this.$message.success('删除成功')
+
+          this.loadBuildingTreeData()
+          this.$refs.numtable.ipagination.current = 1
+          this.$refs.numtable.ipagination.pageSize = 10
+          if (this.currentFilterId == item.id) {
+            if (item.parentId == "0")
+              this.$refs.numtable.filters['buildId'] = null
+            else
+              this.$refs.numtable.filters['floorId'] = null
+          }
+          this.$refs.numtable.loadData()
+        }
+      })
     },
     // 保存楼栋信息
     saveNewBuilding() {
@@ -231,7 +187,7 @@ export default {
             this.fVisible = false;
           }
         }).finally(_ => {
-            this.fSaveLoading = false;
+          this.fSaveLoading = false;
         });
 
         return;
@@ -256,20 +212,26 @@ export default {
 
 
 <style scoped>
-.page-wrapper{
-    display: flex;
+.page-wrapper {
+  display: flex;
 }
-.right-wrapper{
-    flex: 1;
+
+.right-wrapper {
+  flex: 1;
 }
-.left-wrapper {
+
+.left-wrapper-1 {
   width: 30%;
+  display: flex;
+  flex-direction: column;
 }
+
 .building-tree {
   width: 100%;
-  height: 300px;
+  flex: 1;
   overflow-y: auto;
 }
+
 .empty-data {
   height: 100%;
 }

src/views/system/UserList.vue

@@ -131,6 +131,10 @@
             </a>
             <a-menu slot="overlay">
               <a-menu-item>
+                <a href="javascript:;" @click="handleRelation(record.id)">关联房间</a>
+              </a-menu-item>
+
+              <a-menu-item>
                 <a href="javascript:;" @click="handleDetail(record)">详情</a>
               </a-menu-item>
 
@@ -155,7 +159,7 @@
                   <a>解冻</a>
                 </a-popconfirm>
               </a-menu-item>
-
+              
             </a-menu>
           </a-dropdown>
         </span>
@@ -168,17 +172,17 @@
     <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
 
     <password-modal ref="passwordmodal" @ok="passwordModalOk"></password-modal>
-
+    <user-room-relation @ok="saveRelationOk" ref="userroomrelationmodal"></user-room-relation>
     <sys-user-agent-modal ref="sysUserAgentModal"></sys-user-agent-modal>
 
     <!-- 用户回收站 -->
     <user-recycle-bin-modal :visible.sync="recycleBinVisible" @ok="modalFormOk"/>
-
   </a-card>
 </template>
 
 <script>
   import UserModal from './modules/UserModal'
+  import UserRoomRelation from './modules/UserRoomRelationModal.vue'
   import PasswordModal from './modules/PasswordModal'
   import {putAction,getFileAccessHttpUrl} from '@/api/manage';
   import {frozenBatch} from '@/api/api'
@@ -199,6 +203,7 @@
       PasswordModal,
       JInput,
       UserRecycleBinModal,
+      UserRoomRelation,
       JSuperQuery
     },
     data() {
@@ -305,6 +310,9 @@
       }
     },
     methods: {
+      saveRelationOk() {
+        
+      },
       getAvatarView: function (avatar) {
         return getFileAccessHttpUrl(avatar)
       },
@@ -374,6 +382,9 @@
       handleChangePassword(username) {
         this.$refs.passwordmodal.show(username);
       },
+      handleRelation(userId) {
+        this.$refs.userroomrelationmodal.show(userId)
+      },
       passwordModalOk() {
         //TODO 密码修改完成 不需要刷新页面，可以把datasource中的数据更新一下
       },

src/views/system/modules/UserRoomRelationModal.vue

@@ -0,0 +1,155 @@
+<template>
+    <a-modal title="关联房间" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit"
+        @cancel="handleCancel" cancelText="关闭" style="top:20px;">
+        <a-spin :spinning="confirmLoading">
+            <div class="relation-wrapper">
+                <a-row>
+                    <a-col :span="12" style="height: 500px;overflow-y:auto;">
+                        <div class="wrapper-floor" v-for="item in roomTree" :key="item.id">
+                            <div>{{ item.name }}</div>
+                            <div class="wrapper-room">
+                                <div @click="onRoomClick(room)" class="wrapper-room-item"
+                                    :class="[selectedRooms.findIndex(s => s.id == room.id) > -1 ? 'selected-class' : '']"
+                                    v-for="room in item.rooms" :key="room.id">
+                                    {{ room.name }}
+                                </div>
+                            </div>
+                        </div>
+                    </a-col>
+
+                    <a-col :span="12" style="height: 500px;overflow-y:auto;">
+                        <div style="margin:10px;">已关联房间</div>
+                        <div style="display: flex;flex-wrap: wrap;height: max-content;">
+                            <div @click="delSelectedRoom(room)" class="wrapper-room-item-1" v-for="room in selectedRooms"
+                                :key="room.id">
+                                {{ room.name }}
+                            </div>
+                        </div>
+
+                    </a-col>
+                </a-row>
+            </div>
+        </a-spin>
+    </a-modal>
+</template>
+  
+<script>
+import { putAction, getAction, postAction } from '@/api/manage'
+import { min } from 'lodash'
+export default {
+    name: "UserRoomRelation",
+    data() {
+        return {
+            confirmLoading: false,
+            visible: false,
+            roomTree: [],
+            selectedRooms: [],
+            userId: null
+        }
+    },
+    created() {
+
+    },
+
+    methods: {
+        delSelectedRoom(r) {
+            let findIndex = this.selectedRooms.findIndex(s => s.id == r.id)
+            if (findIndex > -1) {
+                this.selectedRooms.splice(findIndex, 1)
+            }
+        },
+        onRoomClick(r) {
+            let findIndex = this.selectedRooms.findIndex(s => s.id == r.id)
+            if (findIndex > -1) {
+                this.selectedRooms.splice(findIndex, 1)
+            } else {
+                this.selectedRooms.push(r)
+            }
+        },
+        show(userId) {
+            this.userId = userId
+
+            getAction(
+                "/business/busRoomBookingOrders/rili-fangtai",
+                { start: '2023-05-19', end: '2023-06-18' }
+            ).then((res) => {
+                if (res.success) {
+                    this.roomTree = res.result.floorRoomVos;
+                    getAction(
+                        "/business/busUserRoomRelation/list",
+                        { userId: userId }
+                    ).then((res1) => {
+                        if (res1.success) {
+                            let seletedRooms = []
+                            let res1Arr = res1.result
+                            this.roomTree.forEach(l => {
+                                l.rooms.forEach(t => {
+                                    if (res1Arr.findIndex(f => f.roomId == t.id) > -1) {
+                                        seletedRooms.push(t)
+                                    }
+                                })
+                            })
+                            this.selectedRooms = seletedRooms
+                        }
+                    });
+                }
+            });
+            this.visible = true;
+        },
+        close() {
+            this.$emit('close');
+            this.visible = false;
+        },
+        handleSubmit() {
+            // 触发表单验证
+            let bodyData = this.selectedRooms.map(s => {
+                return {
+                    roomId: s.id,
+                    userId: this.userId
+                }
+            })
+            postAction("/business/busUserRoomRelation/add?userId=" + this.userId, bodyData).then(res => {
+                if (res.success) {
+                    this.$message.success("保存成功！")
+                    this.visible = false
+                }
+            })
+        },
+        handleCancel() {
+            this.close()
+        },
+    }
+}
+</script>
+<style>
+.wrapper-room {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.wrapper-room-item:hover {
+    border: 1px solid #f00;
+    color: #FFF;
+    background-color: #fF000088;
+}
+
+.selected-class,
+.wrapper-room-item-1 {
+    border: 1px solid #f00 !important;
+    color: #FFF !important;
+    background-color: #fF000088 !important;
+}
+
+.wrapper-room-item,
+.wrapper-room-item-1 {
+    width: fit-content;
+    padding: 5px 8px;
+    border: 1px solid #1890FF;
+    background-color: #1890FF88;
+    margin-left: 10px;
+    margin-top: 5px;
+    color: white;
+    border-radius: 6px;
+    cursor: pointer;
+}
+</style>