调整增加房间

src/views/room/modules/checkIn/SelectRoomForm.vue

@@ -14,7 +14,7 @@
               :labelCol="labelCol"
               :wrapperCol="wrapperCol"
             >
-              <a-checkbox-group @change="onChange" v-model="checkLayoutList">
+              <a-checkbox-group @change="checkChange" v-model="checkLayoutList">
                 <a-row>
                   <a-col
                     :span="6"
@@ -29,19 +29,25 @@
               </a-checkbox-group>
             </a-form-model-item>
           </a-col>
-          <!-- <a-col :span="24">
+          <a-col :span="24">
             <a-form-model-item
               label="房态"
               :labelCol="labelCol"
               :wrapperCol="wrapperCol"
               prop="roomStatus"
             >
-              <a-checkbox-group
-                v-model="model.roomStatus"
+              <!-- <a-checkbox-group
+                v-model="checkedRoomStatusList"
                 :options="roomStatusOptions"
-              />
+                @change="checkChange"
+              /> -->
+              <div style="display:flex;flex-wrap:wrap;">
+                <div v-for="(item, index) in roomStatusOptions" :class="{'check':checkedRoomStatusList.some(ele=> ele==item.value)}" :key="index" class="nocheck room-status" :style="{borderLeft:`2px solid ${item.extend}`}" @click="roomStatusChange(item, index)">
+                  {{item.label}}
+                </div>
+              </div>
             </a-form-model-item>
-          </a-col> -->
+          </a-col>
           <a-col :span="24">
             <a-form-model-item
               label="已选"
@@ -73,10 +79,43 @@
               }"
             >
               <a-tabs
-                default-active-key="room0"
+                default-active-key="room-all"
                 tab-position="left"
                 :style="{ height: '300px' }"
               >
+              <a-tab-pane
+                  tab="全部"
+                  key="room-all"
+                >
+                  <div>
+                    <a-row :gutter="[8, 8]" style="overflow: auto;height:300px;">
+                      <a-col
+                        :span="24"
+                        v-for="(item, index) in (roomList || [])"
+                        :key="index"
+                      >
+                        <div>{{item.buildingName + item.floorName}}</div>
+                        <div style="display:flex;flex-wrap:wrap;">
+                            <div v-for="(r, rIndex) in item.floorRooms" :style="{'border-left-color':filterColor(r.roomStatus)}" @click="checkRoomClick(r)" :key="'floorRooms' + rIndex" :class="[r.check == 1 ? 'check' : 'nocheck', r.kz == 1 ? 'kz' : '',]" class="nocheck room-status">
+                            <!-- <div 
+                            :class="[
+                              r.check == 1 ? 'check' : 'nocheck',
+                              r.kz == 1 ? 'kz' : '',
+                            ]"
+                            style="display:flex;flex-wrap:wrap;"
+                            @click="checkRoomClick(r)"
+                          >
+                            <div class="nocheck room-status">
+                              {{ r.name }}
+                            </div>
+                          </div> -->
+                          {{ r.name }}
+                          </div>
+                        </div>
+                        </a-col>
+                    </a-row>
+                  </div>
+                </a-tab-pane>
                 <a-tab-pane
                   v-for="(room, index) in roomList"
                   :key="'room' + index"
@@ -97,6 +136,7 @@
                             r.check == 1 ? 'check' : 'nocheck',
                             r.kz == 1 ? 'kz' : '',
                           ]"
+                          :style="{'border-left-color':filterColor(r.roomStatus)}"
                           @click="checkRoomClick(r)"
                         >
                           {{ r.name }}
@@ -150,11 +190,13 @@ export default {
     return {
       visible: true,
       roomList: [
-        { key: "1层", child: rooms },
-        { key: "2层", child: rooms2 },
+        // { key: "1层", child: rooms },
+        // { key: "2层", child: rooms2 },
       ],
+      roomStatusList: [],
+      checkedRoomStatusList: [],
       roomTypeOptions: [],
-      roomStatusOptions: ["空净", "空脏"],
+      roomStatusOptions: [],
       model: { roomType: "", rooms: [] },
       labelCol: {
         xs: { span: 24 },
@@ -208,8 +250,103 @@ export default {
         }
       }
     );
+    getAction("/rooms/cesRooms/room-status-color", {}).then((res) => {
+            if (res.success) {
+                // this.roomStatusColorList = res.result;
+                var list = [];
+                res.result.forEach((item) => {
+                    list.push(item);
+                });
+                list = list.filter(item => item.label == '空净' || item.label == '空脏')
+                console.log(list);
+                this.roomStatusOptions = list;
+                this.checkChange('',[this.roomStatusOptions[0].value,this.roomStatusOptions[1].value])
+            }
+        });
   },
   methods: {
+    filterColor(state){
+      var color = '';
+      let arr = this.roomStatusOptions.filter(item => item.value == state);
+      color = arr[0] ? arr[0].extend : '';
+      return color;
+    },
+
+    roomStatusChange(item, index){
+      console.log('roomStatusChange');
+      if (this.checkedRoomStatusList.some(ele=> ele==item.value)) {
+        var index = this.checkedRoomStatusList.findIndex((t) => t == item.value);
+        this.checkedRoomStatusList.splice(index, 1);
+      } else {
+        this.checkedRoomStatusList.push(item.value);        
+      }
+      this.checkChange()
+    },
+
+    checkChange(e,stateList) {
+            console.log("e", e);
+            var list = this.oldroomList;
+            console.log(list);
+            if (this.checkLayoutList.length > 0) {
+                list = this.oldroomList.reduce((acc, curr) => {
+                    const floorRooms = curr.floorRooms.filter((room) =>
+                        this.checkLayoutList.includes(room.layoutId)
+                    );
+                    acc.push({
+                        ...curr,
+                        floorRooms
+                    });
+                    return acc;
+                }, []);
+            }
+            if (this.checkedRoomStatusList.length > 0) {
+                list = list.reduce((acc, curr) => {
+                    const floorRooms = curr.floorRooms.filter((room) =>
+                        this.checkedRoomStatusList.includes(
+                            room.roomStatus.toString()
+                        )
+                    );
+                    acc.push({
+                        ...curr,
+                        floorRooms
+                    });
+                    return acc;
+                }, []);
+            }
+            if (this.checkedRoomStatusList.length == 0) {
+              let arr = []
+              this.roomStatusOptions.forEach(ele=>{
+                arr.push(ele.value)
+              })
+              list = list.reduce((acc, curr) => {
+                  const floorRooms = curr.floorRooms.filter((room) =>
+                      arr.includes(
+                          room.roomStatus.toString()
+                      )
+                  );
+                  acc.push({
+                      ...curr,
+                      floorRooms
+                  });
+                  return acc;
+              }, []);
+            }
+            if (stateList && stateList.length > 0) {
+                list = list.reduce((acc, curr) => {
+                    const floorRooms = curr.floorRooms.filter((room) =>
+                        stateList.includes(room.roomStatus.toString())
+                    );
+                    acc.push({
+                        ...curr,
+                        floorRooms
+                    });
+                    return acc;
+                }, []);              
+            }
+            console.log("list2", list);
+            this.roomList = list;
+        },
+
     checkRoomClick(row) {
       if (row.check === 1) {
         row.check = 0;
@@ -253,6 +390,7 @@ export default {
       // result = this.oldcustomerList.filter((t) => t.name.includes(value));
       console.log("this.oldroomList", this.oldroomList);
       console.log("this.roomList", this.roomList);
+      this.checkChange()
     },
     add(row) {
       console.log("canUserRooms", row);
@@ -314,5 +452,26 @@ export default {
 }
 #components-grid-demo-playground .nocheck {
   border: 1px solid #cccccc;
+  border-left-width: 2px;
+}
+.check {
+  border: 1px solid #00a0e9 !important;
+}
+.nocheck {
+  border: 1px solid #cccccc;
+}
+.room-status{
+  /* height: 100%; */
+  /* line-height: 100%; */
+  font-size: 13px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 5px;
+  margin-right: 10px;
+  border: 1px solid #cccccc;
+  padding: 0px 16px;
+  margin-top: 5px;
+  border-left-width: 2px;
+  border-left-style: solid;
 }
 </style>