修改物业管理添加弹框获得焦点事件以及详情显示

operationSupport/src/components/common/treeHouse.vue

@@ -1,18 +1,18 @@
 <template>
-    <div class="organ-tree">
+    <div class="organ-trees">
         <div v-show="showHouseTree">
             <div>
                 <el-input v-model="filterText" v-if="!showCheckboxTree" placeholder="请输入关键字" suffix-icon="el-icon-search"></el-input>
                 <el-input
                     v-model="selectHouse"
                     placeholder="选择的房间"
-                    @focus="inputFocue"
+                    @focus="inputFocue('house')"
                     maxlength="10"
                     suffix-icon="el-icon-search"
                     v-else
                 ></el-input>
             </div>
-            <div class="tree-style-box no-scrollbar" v-if="organList">
+            <div class="tree-style-box no-scrollbar" v-show="inputFocueHouse">
                 <el-tree
                     class="tree-style"
                     :data="organList"
@@ -31,11 +31,21 @@
                     :check-on-click-node="true"
                 >
                 </el-tree>
+                <div class="end-btn" @click="endBtn">
+                    <el-button type="primary">确定</el-button>
+                </div>
             </div>
         </div>
-        <div v-show="!showHouseTree" v-if="dataPeopleList">
-            <el-input v-model="selectPeople" disabled placeholder="选择的人员" maxlength="10" suffix-icon="el-icon-search"></el-input>
-            <div class="tree-style-box no-scrollbar">
+        <div>
+            <el-input
+                v-show="!showHouseTree"
+                v-model="selectPeople"
+                placeholder="选择的人员"
+                maxlength="10"
+                @focus="inputFocue()"
+                suffix-icon="el-icon-search"
+            ></el-input>
+            <div class="tree-style-box no-scrollbar" v-show="inputFocuePeople">
                 <el-tree
                     class="tree-style"
                     :data="dataPeopleList"
@@ -54,6 +64,9 @@
                     :check-on-click-node="true"
                 >
                 </el-tree>
+                <div class="end-btn">
+                    <el-button type="primary" @click="endBtn">确定</el-button>
+                </div>
             </div>
         </div>
     </div>
@@ -107,6 +120,9 @@ export default {
     },
     data() {
         return {
+            //输入框获得焦点
+            inputFocueHouse: false,
+            inputFocuePeople: false,
             filterText: '',
             selectHouse: '',
             selectPeople: '',
@@ -137,7 +153,17 @@ export default {
     computed: {},
     methods: {
         // 输入框获得焦点
-        inputFocue() {},
+        inputFocue(val) {
+            if (val) {
+                this.inputFocueHouse = true;
+            } else {
+                this.inputFocuePeople = true;
+            }
+        },
+        endBtn() {
+            this.inputFocueHouse = false;
+            this.inputFocuePeople = false;
+        },
         // 过滤选中的社区下的房间
         filterhouse(val, datas) {
             let array = datas;
@@ -268,49 +294,6 @@ export default {
             // 选中的人员id
             this.$emit('selectPeople', obj);
         },
-        // filterPeoPle(arr) {
-        //     arr.map((item) => {
-        //         if (item.children) {
-        //             this.filterPeoPle(item.children);
-        //         } else if (item.children == null) {
-        //             item.id.concat(+',' + item.id);
-        //         }
-        //     });
-        // },
-        // dimension(arr) {
-        //     arr.map((item, index) => {
-        //         if (!!item.children) {
-        //             this.dimension(item.children);
-        //             if (item.type == 'unit') {
-        //                 item.name = this.CheckChinese(item.name, '单元');
-        //             } else if (item.type == 'building') {
-        //                 item.name = this.CheckChinese(item.name, '楼栋');
-        //             }
-        //         }
-        //     });
-        // },
-        // CheckChinese(val, name) {
-        //     var reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
-        //     let newVal = val;
-        //     if (!reg.test(val)) {
-        //         newVal = val + name;
-        //     }
-        //     return newVal;
-        // },
-        // getOrgTreeList() {
-        //     this.$http
-        //         .get('/sc-community/assets/tree/community/find', { buildingType: this.buildingType })
-        //         .then(({ status, data, msg }) => {
-        //             if (status === 0 && data) {
-        //                 this.organList = data;
-        //                 this.dimension(data);
-        //                 this.$nextTick().then(() => {
-        //                     const firstNode = document.querySelector('.el-tree-node');
-        //                     firstNode.click();
-        //                 });
-        //             }
-        //         });
-        // },
         filterNode(value, data) {
             if (!value) return true;
             return data.name.indexOf(value) !== -1;
@@ -328,21 +311,28 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.organ-tree {
-    width: 260px;
-    background: #ffffff;
-    padding: 20px;
+.organ-trees {
     box-sizing: border-box;
     float: left;
-    height: 100%;
-    overflow: auto;
+    z-index: 99999;
     &::before {
         clear: both;
     }
     .tree-style-box {
-        margin-top: 20px;
-        max-height: calc(100vh - 200px);
+        // margin-top: 20px;
+        // max-height: calc(100vh - 200px);
+        // overflow: scroll;
+    }
+    .end-btn {
+        position: absolute;
+        right: 30px;
+        top: 10px;
+    }
+    .el-tree {
+        background: #fafcff;
+        max-height: 50vh;
         overflow: scroll;
+        padding: 10px;
     }
 }
 </style>

operationSupport/src/views/propertyManagement/common/previeInform.vue

@@ -4,7 +4,7 @@
             <div class="prev-text" style="margin-top: 0">
                 <span>所属社区: </span><span class="text-right">{{ dataDetail.communityName }}</span>
             </div>
-            <!-- <div class="prev-text detail">
+            <div class="prev-text detail">
                 <div class="prev-obj">
                     发布对象: <span>{{ houseDataNames }}</span>
                 </div>
@@ -44,7 +44,7 @@
                 </div>
 
                 <div @click="clickDetail()" class="click-prev">{{ showTree ? '关闭详情' : '查看详情' }}</div>
-            </div> -->
+            </div>
             <div class="prev-text">
                 <span>通知类型: </span
                 ><span class="text-right">{{ dataDetail.type == 0 ? '物业通知' : dataDetail.type == 1 ? '社区活动' : '其他' }}</span>
@@ -180,7 +180,7 @@ export default {
         }
     }
     .prev-obj {
-        max-width: 50%;
+        max-width: 60%;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;

operationSupport/src/views/propertyManagement/style.scss

@@ -424,7 +424,12 @@ $fontSizeSmall: 14px;
                     .selet-room {
                         display: flex;
                         justify-content: end;
-                        width: 30%;
+                        // width: 30%;
+                        max-height: 50vh;
+                        /deep/ .tree-style-box.no-scrollbar {
+                            position: absolute;
+                            width: 48%;
+                        }
                         /deep/ .el-input__inner {
                             // margin-left: 10px;
                             width: 275px;