优化完成投诉建议功能

wuxw
1 parent 0a06b2d1
Showing 5 changed files with 180 additions and 4 deletions
src/api/room/roomApi.js
src/components/room/roomTree.vue
src/views/oa/addComplaintList.vue
src/views/oa/complaintList.vue
src/views/room/roomLang.js
 import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
  
 // 查询房屋列表
 export function queryRooms(params) {
@@ -87,4 +88,24 @@ export function queryRoomsWithOutSell(params) {
       reject(error)
     })
   })
+}
+
+// 查询房间树形数据
+export function queryRoomsTree(params) {
+  return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
+    request({
+      url: '/room.queryRoomsTree',
+      method: 'get',
+      params: {
+        ...params,
+        communityId
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
 }
 \ No newline at end of file
+<template>
+    <div class="room-tree-container">
+        <el-dialog :visible.sync="dialogVisible" :title="$t('roomList.selectRoom')" width="280px"
+            custom-class="right-dialog" :modal="false">
+            <el-tree ref="roomTree" :data="treeData" :props="defaultProps" node-key="id" highlight-current
+                :expand-on-click-node="false" @node-click="handleNodeClick">
+                <span slot-scope="{ node, data }" class="custom-tree-node">
+                    <img :src="data.icon" class="tree-icon" v-if="data.icon">
+                    <span>{{ node.label }}</span>
+                </span>
+            </el-tree>
+        </el-dialog>
+    </div>
+</template>
+  
+<script>
+import { getUnits, queryRoomsTree } from '@/api/room/roomApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+    name: 'RoomTreeList',
+    data() {
+        return {
+            dialogVisible: false,
+            callName: '',
+            treeData: [],
+            defaultProps: {
+                children: 'children',
+                label: 'text'
+            }
+        }
+    },
+    methods: {
+        open(callName) {
+            this.callName = callName
+            this.dialogVisible = true
+            this.loadRoomTreeFloorAndUnits()
+        },
+        async loadRoomTreeFloorAndUnits() {
+            try {
+                const communityId = getCommunityId()
+                const data = await getUnits({ communityId })
+                this.treeData = this.formatTreeData(data)
+            } catch (error) {
+                this.$message.error(this.$t('roomTree.loadError'))
+            }
+        },
+        formatTreeData(units) {
+            const floorMap = {}
+
+            units.forEach(unit => {
+                if (!floorMap[unit.floorId]) {
+                    floorMap[unit.floorId] = {
+                        id: `f_${unit.floorId}`,
+                        floorId: unit.floorId,
+                        floorNum: unit.floorNum,
+                        icon: "/img/floor.png",
+                        text: `${unit.floorNum}${this.$t('room.floorUnitTree.building')}`,
+                        children: []
+                    }
+                }
+
+                const unitNode = {
+                    id: `u_${unit.unitId}`,
+                    unitId: unit.unitId,
+                    text: `${unit.unitNum}${this.$t('room.floorUnitTree.unit')}`,
+                    icon: "/img/unit.png",
+                    children: []
+                }
+
+                floorMap[unit.floorId].children.push(unitNode)
+            })
+
+            return Object.values(floorMap)
+        },
+        async handleNodeClick(data, node) {
+            if (data.id.startsWith('u_')) {
+                if (!node.expanded) {
+                    await this.loadRooms(data.unitId, node)
+                }
+            } else if (data.id.startsWith('r_')) {
+                this.dialogVisible = false
+                this.$emit('selectRoom', {
+                    roomName: data.roomName,
+                    roomId: data.roomId
+                })
+            }
+        },
+        async loadRooms(unitId, node) {
+            try {
+                const communityId = getCommunityId()
+                const { rooms } = await queryRoomsTree({
+                    unitId,
+                    communityId,
+                    page: 1,
+                    row: 1000
+                })
+                console.log(rooms);
+
+                if (rooms && rooms.length > 0) {
+                    const roomDatas = rooms.map(room => ({
+                        id: `r_${room.roomId}`,
+                        roomId: room.roomId,
+                        roomName: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+                        text: room.ownerName ? `${room.roomNum}(${room.ownerName})` : room.roomNum,
+                        icon: "/img/room.png"
+                    }))
+
+                    this.$set(node.data, 'children', roomDatas)
+                }
+            } catch (error) {
+                console.error(this.$t('roomTree.loadRoomError'), error)
+                this.$message.error(this.$t('roomTree.loadRoomError'))
+            }
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+/* 删除 scoped 改为全局样式 */
+.room-tree-container ::v-deep .right-dialog {
+  position: fixed !important;
+  right: 0 !important;
+  top: 0 !important;
+  margin: 0 !important;
+  height: 100vh !important;
+  
+  .el-dialog {
+    margin: 0 !important;
+    height: 100% !important;
+    border-radius: 0 !important;
+  }
+  
+  .el-dialog__header {
+    padding: 20px !important;
+    border-bottom: 1px solid #eee;
+  }
+  
+  .el-dialog__body {
+    padding: 10px 20px !important;
+    height: calc(100% - 61px) !important; /* 减去header高度 */
+    overflow-y: auto;
+  }
+}
+</style>
 \ No newline at end of file
@@ -19,8 +19,8 @@
  
         <el-row :gutter="20">
           <el-col :span="24">
-            <el-form-item :label="$t('addComplaint.room')" prop="roomName">
-              <el-input v-model="addComplaintInfo.roomName" :placeholder="$t('addComplaint.roomPlaceholder')" disabled />
+            <el-form-item :label="$t('addComplaint.room')" class="text-left" prop="roomName">
+              <el-input v-model="addComplaintInfo.roomName" style="width: 80%;" :placeholder="$t('addComplaint.roomPlaceholder')" disabled />
               <el-button type="primary" @click="selectComplaintRoom" style="margin-left:10px">
                 {{ $t('addComplaint.register') }}
               </el-button>
@@ -58,12 +58,15 @@
         </el-row>
       </el-form>
     </el-card>
+    <room-tree ref="roomTree" @selectRoom="selectRoom" />
+
   </div>
 </template>
  
 <script>
 import { listComplaintTypes, saveComplaint } from '@/api/oa/addComplaintApi'
 import { getCommunityId } from '@/api/community/communityApi'
+import roomTree from '@/components/room/roomTree'
  
 export default {
   name: 'AddComplaintList',
@@ -98,6 +101,7 @@ export default {
       }
     }
   },
+  components: { roomTree },
   created() {
     this.communityId = getCommunityId()
     this.listComplaintTypes()
@@ -117,7 +121,11 @@ export default {
       }
     },
     selectComplaintRoom() {
-      this.$emit('selectRoom')
+      this.$refs.roomTree.open()
+    },
+    selectRoom(room) {
+      this.addComplaintInfo.roomId = room.roomId
+      this.addComplaintInfo.roomName = room.roomName
     },
     async saveComplaint() {
       await this.$refs.form.validate()
@@ -121,7 +121,7 @@ export default {
     ViewImage,
     EditComplaint,
     DeleteComplaint,
-    ComplaintDetail
+    ComplaintDetail,
   },
   data() {
     return {
@@ -4,6 +4,7 @@ export const messages = {
       addBuilding: 'Add Building',
       editBuilding: 'Edit Building',
       deleteBuilding: 'Delete Building',
+      selectRoom: 'Select Room',
       addUnit: 'Add Unit',
       editUnit: 'Edit Unit',
       deleteUnit: 'Delete Unit',
@@ -384,6 +385,7 @@ export const messages = {
       addBuilding: '添加楼栋',
       editBuilding: '修改楼栋',
       deleteBuilding: '删除楼栋',
+      selectRoom: '选择房屋',
       addUnit: '添加单元',
       editUnit: '修改单元',
       deleteUnit: '删除单元',