修改

src/views/newUserManagement/index.vue

@@ -2,8 +2,8 @@
   <div class="newUserManagement">
     <div class="newUserManagement-head manageTitle">用户管理</div>
     <div class="flex-wrap newUserManagement-content">
-      <div class="newUserManagement-content-left">
-        <div class="head flex">
+      <div class="newUserManagement-content-left" style="padding: 0;">
+        <!-- <div class="head flex">
           <div class="title">账号组列表</div>
           <el-button @click="handleAdd" class="serButton" type="primary" plain size="small">新增</el-button>
         </div>
@@ -18,6 +18,35 @@
               </span>
             </el-tree>
           </el-scrollbar>
+        </div> -->
+        <div class="newService-content-left-top">
+          <div class="flex head">
+            <div class="title">账号组列表</div>
+            <el-button @click="handleAdd" class="serButton" size="small">新增</el-button>
+          </div>
+          <!-- <div class="search">
+            <el-input size="small" placeholder="请输入内容" clearable prefix-icon="el-icon-search" v-model="search">
+            </el-input>
+          </div> -->
+        </div>
+        <div class="newService-content-left-bottom">
+          <template v-if="dataList.length">
+            <el-scrollbar ref="scroll" style="height: 100%">
+              <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
+                <div v-for="(item,index) in dataList" :key="index" @click.stop="handleNodeClick(item,index)" :class="index == activeIndex ? 'active':''" class="contents flex">
+                  <div class="left">
+                    <span class="txt">{{ item.user_group_name }}</span>
+                  </div>
+                  <div v-show="activeIndex == index" class="right">
+                    <span @click.stop="handleRemove(item)" class="error">删除</span>
+                  </div>
+                </div>
+              </div>
+            </el-scrollbar>
+          </template>
+          <template v-else>
+            <el-empty description="暂无数据"></el-empty>
+          </template>
         </div>
       </div>
       <div class="newUserManagement-content-right flex1">
@@ -174,10 +203,13 @@ export default {
           user_group_id: 0,
           user_group_name: '全部账号组',
           user_group_status: true,
-          children: [],
-          disabled: true
+          children: []
         }
       ],
+      search: '',
+      activeIndex: null,
+      loading: false,
+      dataList: [],
       treeCheckId: '',
       formInline: {
         user_group_name: '',
@@ -235,8 +267,9 @@ export default {
     async getTreeData () {
       const result = await this.getQueryList(this.queryId)
       if (result && result.length) {
-        this.options = result
-        this.data[0].children = result
+        this.dataList = result
+        // this.options = result
+        // this.data[0].children = result
       }
     },
     handleAdd () {
@@ -245,7 +278,8 @@ export default {
       this.tableData = []
       this.clearForm()
     },
-    async handleNodeClick (data) {
+    async handleNodeClick (data,index) {
+      this.activeIndex = index
       if (data.user_group_id !== 0) {
         this.treeCheckId = data.user_group_id
         this.formInline = _.cloneDeep(data)
@@ -286,7 +320,7 @@ export default {
       this.ruleForm.user_pwd = '123!@#QWEqwe'
     },
     //树删除
-    handleRemove (node, data) {
+    handleRemove ( data) {
       this.rmTitle = data.user_group_name
       this.rmFlag = true
       this.rmObj = data
@@ -341,11 +375,13 @@ export default {
       })
     },
     handleTableAdd () {
-      this.tableFlag = true
-      this.dataType = 'add'
-      this.dataTitle = '新增账号'
-      this.clearTableForm()
-      this.ruleForm.user_group_id = this.treeCheckId
+      if (this.treeCheckId !=0) {
+        this.tableFlag = true
+        this.dataType = 'add'
+        this.dataTitle = '新增账号'
+        this.clearTableForm()
+        this.ruleForm.user_group_id = this.treeCheckId
+      }
     },
     handleTableEdit (row) {
       this.tableFlag = true
@@ -452,6 +488,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../newRole/css/index.scss";
 .newUserManagement {
   padding: 24px;
   height: calc(100vh - 80px);
@@ -473,7 +510,7 @@ export default {
       margin-right: 16px;
       padding: 24px;
       .contents {
-        margin-top: 24px;
+        // margin-top: 24px;
         height: calc(100% - 56px);
         .custom-tree-node {
           flex: 1;