修改添加编辑子部门，修改样式失败

ybf_admin/src/assets/style/public.scss

@@ -51,3 +51,6 @@ $prefix: d2;
   background-color: #ececec;
   padding: 0 10px;
 }
+.d2-theme-container-main-body {
+  margin: 0 !important;
+}
\ No newline at end of file

ybf_admin/src/assets/style/theme/theme-base.scss

@@ -449,3 +449,15 @@
     }
   }
 }
+.d2-layout-header-aside-content {
+  position: inherit !important;
+}
+.d2-theme-container {
+  height: 100% !important;
+  .d2-theme-container-main {
+    height: 100% !important;
+    .d2-theme-container-main-layer{
+      height: 100% !important;
+    }
+  }
+}
\ No newline at end of file

ybf_admin/src/layout/header-aside/layout.vue

@@ -46,7 +46,7 @@
           <d2-menu-side/>
         </div>-->
         <!--通知栏-->
-        <d2-header-alarm-notify ></d2-header-alarm-notify>
+        <!-- <d2-header-alarm-notify ></d2-header-alarm-notify> -->
         <!-- 主体 -->
         <div class="d2-theme-container-main">
           <!-- 搜索 -->
@@ -94,7 +94,7 @@ import d2HeaderTheme from './components/header-theme'
 import d2HeaderUser from './components/header-user'
 import d2HeaderLog from './components/header-log'
 import d2HeaderColor from './components/header-color'
-import d2HeaderAlarmNotify from './components/header-alarm-notify'
+// import d2HeaderAlarmNotify from './components/header-alarm-notify'
 import { mapState, mapGetters, mapActions } from 'vuex'
 import mixinSearch from './mixins/search'
 export default {
@@ -112,7 +112,7 @@ export default {
     d2HeaderUser,
     // d2HeaderLog,
     // d2HeaderColor,
-    d2HeaderAlarmNotify
+    // d2HeaderAlarmNotify
   },
   data () {
     return {

ybf_admin/src/pages/in/contact/components/addGroup.vue

@@ -44,8 +44,8 @@
           />
         </el-form-item>
         <el-form-item label="设置主管:" prop="clerkId"  >
-          <el-cascader :props="props" v-model="deptId" :disabled="ifDisabled" :options="parentDeptList" :show-all-levels="false"  filterable style="width: 30%;margin-right:15px;" @change="handleParentChange" ></el-cascader>
-          <el-select v-model="clerkId" filterable multiple placeholder="请选择" style="width: 30%;" clearble  @change="handleMemberChange">
+          <el-cascader :props="props" ref="direcRef" v-model="deptId" :disabled="ifDisabled" :options="parentDeptList" :show-all-levels="false"  filterable style="width: 30%;margin-right:15px;" @change="handleParentChange" ></el-cascader>
+          <el-select v-model="clerkId" filterable multiple placeholder="请选择" style="width: 30%;" clearble  @change="handleMemberChange" :loading="optionLoading" loading-text="数据加载中">
             <el-option
               v-for="item in peopleList"
               :key="item.id"
@@ -125,7 +125,8 @@ export default {
         oyStallName: '',
         oyStallMemberId: '',
         oyStallCode: '',
-        clerkId: ''
+        clerkId: '',
+        oydeptId: ''
       },
       detail: 2,
       ifDisabled: false,
@@ -134,6 +135,7 @@ export default {
       parentDeptList: [],
       peopleList: [],
       orgTree: [],
+      optionLoading: false,
       rules: {
         label: [
           { required: true, message: "请输入部门名称", trigger: "blur" },
@@ -202,9 +204,10 @@ export default {
       });
     },
     handleParentChange(val) { 
+      this.addForm.oydeptId = val
+      this.optionLoading = true     
       this.clerkId = []
       this.getGroupMember(val)         
-           
     },
     getDeptList() {
       getWxAllDeptList()
@@ -240,28 +243,31 @@ export default {
         } else {
           return false;
         }
-        });
-      
-      // console.log(addGroup)
-      
+        })    
     },
     // 获取所有人员
     getGroupMember(id) {
       this.ifDisabled = true
       getAllPeopleList({ id }).then(res => {   
         this.peopleList = res.data       
+        this.optionLoading = false
         this.ifDisabled = false
       })
     },
     handleMemberChange(val) {     
-      console.log(val,'..');
-      
       if(val.length == 0) {
         this.addForm.clerkId = ''
       }else {
         this.addForm.clerkId = '验证用'
       }
     }
+  },
+  watch: {
+    deptId() {
+      if (this.$refs.direcRef) {
+        this.$refs.direcRef.dropDownVisible = false; //监听值发生变化就关闭它
+      }
+    }
   }
 };
 </script>

ybf_admin/src/pages/in/contact/components/editGroup.vue

@@ -45,8 +45,8 @@
           />
         </el-form-item>
         <el-form-item label="设置主管:" prop="clerkId" >
-          <el-cascader :props="props" v-model="deptId" :options="parentDeptList" :disabled="ifDisabled" :show-all-levels="false"  filterable style="width: 30%;margin-right:15px;" @change="handleParentChange" ></el-cascader>
-          <el-select v-model="clerkId" filterable multiple placeholder="请选择" style="width: 30%;" clearble @change="handleMemberChange" >
+          <el-cascader :props="props" v-model="deptId" ref="direcRef" :options="parentDeptList" :disabled="ifDisabled" :show-all-levels="false"  filterable style="width: 30%;margin-right:15px;" @change="handleParentChange" ></el-cascader>
+          <el-select v-model="clerkId"  filterable multiple placeholder="请选择" style="width: 30%;" clearble @change="handleMemberChange" :loading="optionLoading" loading-text="数据加载中" >
             <el-option
               v-for="item in peopleList"
               :key="item.id"
@@ -121,6 +121,7 @@ export default {
         code: ""
       },
       checked: false,
+      optionLoading: false,
       ////
       addForm: {
         label: '',
@@ -198,19 +199,17 @@ export default {
       this.formLoading = true
       getDeptDetail({id:this.groupId}).then(res=> {
         console.log(res,"详情")
-        // this.addForm.clerkId = clerkId
         this.addForm = res.data.organization
-
         const clerkId = []
         res.data.supervisors.forEach(item => {
           clerkId.push(item.id)          
         })
         this.clerkId = clerkId 
         this.addForm.clerkId = "验证用"        
-        // this.addForm.clerkId = clerkId
         this.getDeptList()
         const deptId = ''
-        this.deptId = res.data.supervisors[0].departmentId
+        this.addForm.oydeptId = res.data.oydeptId
+        this.deptId = res.data.oydeptId
         this.getGroupMember(this.deptId)   
        
       })
@@ -228,9 +227,10 @@ export default {
       })
     },
     handleParentChange(val) {  
-      this.addForm.clerkId = []
+      this.addForm.oydeptId = val
+      this.optionLoading = true       
+      this.clerkId = []
       this.getGroupMember(val)           
-           
     },
     getDeptList() {
       getWxAllDeptList()
@@ -270,6 +270,8 @@ export default {
       getAllPeopleList({ id }).then(res => {   
         this.peopleList = res.data
         this.ifDisabled = false
+        this.optionLoading = false
+        this.ifDisabled = false
       })
     },
     handleMemberChange(val) {   
@@ -279,6 +281,13 @@ export default {
         this.addForm.clerkId = '验证用'
       }
     } 
+  },
+  watch: {
+    deptId() {
+      if (this.$refs.direcRef) {
+        this.$refs.direcRef.dropDownVisible = false; //监听值发生变化就关闭它
+      }
+    }
   }
 };
 </script>

ybf_admin/src/pages/in/contact/index.vue

 <template>
-  <d2-container class="ct">
+  <!-- <d2-container class="ct"> -->
     <!-- <div class="test">
         <el-menu
           :default-active="index"
@@ -32,7 +32,7 @@
     <div class="content">
       <mail></mail>
     </div>
-  </d2-container>
+  <!-- </d2-container> -->
 </template>
 
 <script>
@@ -63,49 +63,11 @@ export default {
 </script>
 <style></style>
 <style scoped>
-.ct >>> .d2-container-full__body{
-  overflow: visible !important;
-}
-.ct >>> .d2-container-full {
-  padding: 0 !important;
-}
-.d2-theme-container-main {
-  background-color: #f8f8f8;
-}
-.test {
-  width: 13%;
-  min-height: 100%;
-  display: flex;
-  box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
-}
-.content {
-  width: 100%;
-  display: flex;
-}
-.ct >>> .d2-container-full__body {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 !important;
-}
-/* .tac {
-  width: 99%;
-  height: 100%;
-  box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
-} */
-.test >>> .el-menu {
-  border-right: none;
-}
-.test >>> .el-menu-item.is-active{
-  border-left: 2px solid rgba(78,89,199,1);
-}
-.test >>> .el-menu {
-  width: 100%;
-  box-shadow: 0px 2px 4px 0px #ddd;
-} 
 .content {
-  flex: 6;
+  width:100%;
   padding: 16px;
   background-color: #f8f8f8;
+  height: 100%;
 }
 .circle {
   display: inline-block;
@@ -118,10 +80,5 @@ export default {
   text-align: center;
   margin-right: 12px;
 }
-.theme-d2 .el-menu-item svg, .theme-d2 .el-submenu__title svg {
-  margin-right: 0;
-}
-.ct >>> .d2-layout-header-aside-group .d2-layout-header-aside-content .d2-theme-container .d2-theme-container-main .d2-theme-container-main-layer {
-  left: 0 !important;
-}
+
 </style>

ybf_admin/src/pages/in/contact/mail.vue

@@ -468,6 +468,8 @@ export default {
   display: flex;
   width: 100%;
   flex-wrap: nowrap;
+  height: 88%;
+  max-height: 88%;
 }
 .run {
   height: 34px;
@@ -540,14 +542,13 @@ export default {
   min-height: 100%;
 }
 .left {
-  position: relative;
   width: 20%;
+  /*  */
   overflow: auto;
   flex-direction: column;
   justify-content: space-between;
 }
 .right {
-  position: relative;
   padding: 10px;
   margin-left: 10px;
   width: 79%;
@@ -557,7 +558,7 @@ export default {
   display: flex;
   flex-direction: column;
   background-color: #fff;
-  height: 100%;
+  height: inherit;
   box-sizing: border-box;
   box-shadow: 0px 2px 4px 0px #ddd;
 }
@@ -575,7 +576,7 @@ export default {
 .main {
   /* // border: 2px solid orange; */
   width: 100%;
-  height: 100vh;
+  height: 90%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -636,4 +637,7 @@ export default {
     box-sizing: border-box;
     margin-top: 4px;
 }
+.trees >>> .el-tree-node__content {
+  display: block!important;
+}
 </style>