党员积分明细

project/sanjianxi/apps/AppPartyScore/psList.vue

@@ -3,35 +3,16 @@
     <ai-list>
       <ai-title slot="title" title="党员积分" isShowBottomBorder/>
       <template #left>
-        <div class="patyCode-left">
-          <div class="patyCode-left__title">
-            <h2>组织目录</h2>
-          </div>
-          <div class="organization-left__list">
-            <div class="organization-left__list--title">
-              <el-input
-                  class="organization-left__list--search"
-                  size="mini"
-                  clearable
-                  placeholder="请输入组织名称"
-                  v-model="organizationName"
-                  suffix-icon="iconfont iconSearch">
-              </el-input>
-            </div>
-            <el-tree
-                :filter-node-method="filterNode"
-                ref="tree"
-                :props="defaultProps"
-                node-key="id"
-                :data="organizationTree"
-                highlight-current
-                :current-node-key="search.organizationName"
-                :default-expanded-keys="defaultExpanded"
-                :default-checked-keys="defaultChecked"
-                @current-change="onTreeChange">
-            </el-tree>
-          </div>
-        </div>
+
+        <ai-tree-menu title="组织目录" searchPlaceholder="请输入党组织名称" @search="onSearch">
+          <ai-party-tree
+              :filter-node-method="filterNode"
+              ref="tree"
+              :instance="instance"
+              :root="user.info.organizationId"
+              :current-node-key="user.info.id"
+              @select="onTreeChange"/>
+        </ai-tree-menu>
       </template>
       <template #content>
         <ai-search-bar>
@@ -70,7 +51,7 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "psList",
@@ -140,38 +121,9 @@ export default {
         }
       })
     },
-    getTree() {
-      this.instance.post(`/admin/area/queryAllArea?id=${this.user.info.areaId}`).then(res => {
-        if (res.code === 0) {
-          let parent = res.data.map(v => {
-            v.label = v.name
-            v.children = []
-
-            return v
-          }).filter(e => !e.parentid)[0]
-          this.defaultExpanded = [parent.id]
-          this.defaultChecked = [parent.id]
-          this.search.areaId = parent.id
-          this.addChild(parent, res.data)
-          this.organizationTree = [parent]
-
-          this.$nextTick(() => {
-            this.$refs.tree.setCurrentKey(parent.id)
-          })
-        }
-      })
-    },
-
-    addChild(parent, list) {
-      for (let i = 0; i < list.length; i++) {
-        if (list[i].parentId === parent.id) {
-          parent.children.push(list[i])
-        }
-      }
-
-      if (list.length > 0) {
-        parent['children'].map(v => this.addChild(v, list))
-      }
+    
+    onSearch(v) {
+      this.orgTree.filter(v)
     },
 
     onTreeChange(e) {
@@ -212,7 +164,6 @@ export default {
   },
   created() {
     this.getTableData()
-    // this.getTree()
   }
 }
 </script>
@@ -221,165 +172,6 @@ export default {
 .psList {
   height: 100%;
 
-  .organization-left__list {
-    height: calc(100% - 40px);
-    padding: 8px 8px;
-    overflow: auto;
-
-    .organization-left__tags--item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 40px;
-      padding: 0 8px 0 16px;
-      color: #222222;
-
-      &.organization-left__tags--item-active, &:hover {
-        background: #E8EFFF;
-        color: #2266FF;
-
-        i, span {
-          color: #2266FF;
-        }
-      }
-
-      span {
-        font-size: 14px;
-      }
-
-      i {
-        cursor: pointer;
-        color: #8e9ebf;
-        font-size: 16px;
-      }
-    }
-
-    .organization-left__list--title {
-      display: flex;
-      align-items: center;
-      margin-bottom: 8px;
-
-      .organization-left__list--search {
-        flex: 1;
-
-        ::v-deep input {
-          width: 100%;
-        }
-      }
-
-      .el-button {
-        width: 84px;
-        flex-shrink: 1;
-        margin-right: 8px;
-      }
-    }
-
-    span {
-      color: #222222;
-      font-size: 14px;
-    }
-
-    ::v-deep .el-tree {
-      background: transparent;
-
-      .el-tree-node__expand-icon.is-leaf {
-        color: transparent !important;
-      }
-
-      .el-tree-node__content > .el-tree-node__expand-icon {
-        padding: 4px;
-      }
-
-      .el-tree-node__content {
-        height: 32px;
-      }
-
-      .el-tree__empty-text {
-        color: #222;
-        font-size: 14px;
-      }
-
-      .el-tree-node__children .el-tree-node__content {
-        height: 32px;
-      }
-
-      .el-tree-node__content:hover {
-        background: #E8EFFF;
-        color: #222222;
-        border-radius: 2px;
-      }
-
-      .is-current > .el-tree-node__content {
-        &:hover {
-          background: #2266FF;
-          color: #fff;
-        }
-
-        background: #2266FF;
-
-        span {
-          color: #fff;
-        }
-      }
-    }
-  }
-
-  ::v-deep .ai-list__content--left {
-    margin-right: 2px;
-  }
-
-  .patyCode-left {
-    width: 100%;
-    height: auto;
-    background: #FAFAFB;
-
-    .patyCode-left__title {
-      display: flex;
-      align-items: center;
-      height: 40px;
-      padding: 0 16px;
-      background: #fff;
-
-      h2 {
-        color: #222;
-        font-size: 14px;
-      }
-    }
-
-    .patyCode-left__list {
-      height: calc(100% - 40px);
-      padding: 8px 0;
-      overflow: auto;
-
-      span {
-        display: block;
-        height: 40px;
-        line-height: 40px;
-        padding: 0 24px;
-        color: #222222;
-        font-size: 14px;
-        cursor: pointer;
-        border-right: 2px solid transparent;
-        background: transparent;
-
-        &:hover {
-          color: #2266FF;
-          background: #E8EFFF;
-        }
-
-        &.left-active {
-          color: #2266FF;
-          border-color: #2266FF;
-          background: #E8EFFF;
-        }
-      }
-    }
-  }
-
-  ::v-deep .ai-list__content--right {
-    .ai-list__content--right-wrapper {
-      min-height: 100%;
-    }
-  }
+  
 }
 </style>