@sy-common/organize-select-help 1.0.0-beta.10

package/index.js

@@ -0,0 +1,3 @@
+import organizeTreeHelp from './src/index.vue'
+export default organizeTreeHelp
+export { organizeTreeHelp }

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@sy-common/organize-select-help",
+  "version": "1.0.0-beta.10",
+  "description": "",
+  "main": "index.js",
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@lambo-design/core": "^4.7.1-beta.140",
+    "@sy-common/core": "^1.0.0-beta.35"
+  },
+  "scripts": {
+    "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
+}

package/readme.md

@@ -0,0 +1,26 @@
+data:{
+    //组织节点
+    orgList:{
+        includeLevel:true/false,//是否包含下级组织节点
+        orgUnitId：id,  //组织id
+        orgNodeName:''//组织名称
+    },
+    //岗位节点
+    postList:{
+        includeLevel:true/false,//是否包含下级组织节点
+        orgUnitId：id,  //组织id
+        orgNodeName:''//组织名称
+        positionId：''//岗位
+        positionName：''//岗位名称
+    },
+    人员节点
+    staffList:{
+        name：'名称’//名称
+        orgNodeName：‘’//
+        id:''//id
+    }
+
+}
+
+
+v-model双向绑定是否显示帮助框

package/src/index.vue

@@ -0,0 +1,797 @@
+<template>
+  <Modal
+    title=""
+    v-model="modal"
+    @on-ok="confirm"
+    @on-visible-change="visibleChange	"
+    width="1180"
+    :mask-closable="false"
+    class="modal-tree"
+  >
+    <div slot="header" class="header-text"><Icon type="md-information" class="icon-tip" />人员选择</div>
+    <div class="content-container">
+      <div class="tree-orig">
+        <div class="tab-content">
+          <Tabs :value="tabName">
+            <TabPane label="选择组织节点" name="org">
+              <div class="tab">
+                <Select v-model="orgSearch" filterable :remote-method="getOrgListBySearch" @on-change="getOrgOption" :loading="loadingOrg" placeholder="选择组织节点" clearable>
+                    <Option v-for="(option, index) in orgSearchList" :value="option.orgUnitId" :key="index">{{option.name}}</Option>
+                </Select>
+                <div class="tag-content">
+                  <span>快捷选择：</span>
+                  <div class="tag-list">
+                    <span :class="['tag', item.checked && 'active']" v-for="item in tagList" :key="item.key" @click="fastChedkOrg(item)">{{item.v}}</span>
+                  </div>
+                  <Poptip content="content" placement="right-end">
+                    <div slot="content" class="pop-content">
+                      <span :class="['tag', item.checked && 'active']" v-for="item in tagList" :key="item.key" @click="fastChedkOrg(item)">{{item.v}}</span>
+                    </div>
+                        <Icon type="ios-arrow-down" />
+                  </Poptip>
+                </div>
+                <div class="tree">
+                  <organizeTree @handleChange="getOrgList" ref="orgTree" :treeList="orgTree"></organizeTree>
+                </div>
+                <div class="bottom-select">
+                  <CheckboxGroup v-model="includeLevelOrg">
+                    <Checkbox label="01">
+                      <span>包含下级组织节点</span>
+                    </Checkbox>
+                  </CheckboxGroup>
+                  <Button type="primary" icon="md-add" @click="addOrgList">添加节点</Button>
+                </div>
+              </div>
+            </TabPane>
+            <TabPane label="选择岗位" name="post">
+              <div class="tab post">
+                <div class="left">
+                  <div v-for="item in positiontList" :class="[item.checked&&'active']" :key="item.positionId" @click="getPosionId(item)">{{ item.positionName }}</div>
+                </div>
+                <div class="right">
+                  <Select v-model="postSearch" filterable :remote-method="getPostListBySearch" @on-change="getPostOption" placeholder="选择组织节点" :loading="loadingPost" clearable>
+                      <Option v-for="(option, index) in postSearchList" :value="option.orgUnitId" :key="index">{{option.name}}</Option>
+                  </Select>
+                  <div class="tag-content">
+                    <span>快捷选择：</span>
+                    <div class="tag-list">
+                      <span class="tag" v-for="item in tagList" :key="item.key">{{item.v}}</span>
+                    </div>
+                    <Poptip title="Title" content="content">
+                        <Icon type="ios-arrow-down" />
+                    </Poptip>
+                  </div>
+                  <div class="tree">
+                    <organizeTree @handleChange="getPostList" ref="postTree" :treeList="postTree"></organizeTree>
+                  </div>
+                  <div class="bottom-select">
+                    <CheckboxGroup v-model="includeLevelPost">
+                      <Checkbox label="01">
+                        <span>包含下级组织节点</span>
+                      </Checkbox>
+                    </CheckboxGroup>
+                    <Button type="primary" icon="md-add" @click="addPostList">添加节点</Button>
+                  </div>
+                </div>
+              </div>
+            </TabPane>
+            <TabPane label="选择人员" name="staff">
+              <div class="tab">
+                <Input v-model="staffSearch"	 @on-enter="searchStaff" @on-search="searchStaff"	search	placeholder="搜索人员"/>
+                <div style="position:relative;">
+                  <div class="tree staff-content" @scroll="handleScroll">
+                    <div :class="['gust-item',item.checked && 'staff-active']" v-for="item in staffAllList" :key="item.id"  @click="handlestaff(item)">
+                      <div class="left-panel">{{item.name && item.name.slice(0,1) || ''}}</div>
+                      <div class="right-panel">
+                        <p>{{item.name}}</p>
+                        <p>{{item.orgNodeName}}</p>
+                      </div>
+                      <div class="checked-icon" v-show="item.checked">✔</div>
+                    </div>
+                    <p v-if="staffEnding" style="color:#CCCCCC;text-align: center">---我也是有底线的---</p>
+                  </div>
+                  <Spin v-if="loadingStaff" size="large" fix />
+                </div>
+                <div class="bottom-select">
+                  <div>当前已选择 <span class="num">{{getCheckedStaff}}</span>人</div>
+                  <Button type="primary" icon="md-add" @click="addStaffList">添加人员</Button>
+                </div>
+              </div>
+            </TabPane>
+          </Tabs>
+        </div>
+        <div class="form-content">
+          <p>已选择条件 <span class="num">（{{getCheckTypenum}}）</span></p>
+          <div class="node-list">
+            <!--              组织节点条件：-->
+            <div>
+              <div class="group-box flex-r-bt">
+                <div>组织节点条件：</div>
+                <div class="clear-btn" @click="clearGroup">清除全部</div>
+              </div>
+              <div class="group-list-content">
+                <p class="list-item flex-r-bt" v-for="(item,index) in orgList" :ket="index">
+                  <span>{{ item.title }}</span>
+                  <img class="clear-icon" src="./assets/delete.png" alt="" @click="clearOrgByIndex(index)">
+                </p>
+                <p style="color:#CCCCCC" class="list-item" v-if="!orgList.length">未选择组织节点</p>
+              </div>
+            </div>
+            <!--              组织节点+岗位条件：//-->
+            <div>
+              <div class="group-box flex-r-bt">
+                <div>岗位条件+组织节点：</div>
+                <div class="clear-btn" @click="clearPost">清除全部</div>
+              </div>
+              <div class="group-list-content">
+                <p class="list-item flex-r-bt" v-for="(item,index) in postList">
+                  <span>{{item.positionName}}-{{item.title}}</span>
+                  <img class="clear-icon" src="./assets/delete.png" alt="" @click="clearPostByIndex(index)">
+                </p>
+                <p style="color:#CCCCCC" class="list-item" v-if="!postList.length">未选择岗位条件+组织节点</p>
+              </div>
+            </div>
+            <!--              直接选择人员：-->
+            <div>
+              <div class="group-box flex-r-bt">
+                <div>直接选择人员：</div>
+                <div class="clear-btn" @click="clearStaff">清除全部</div>
+              </div>
+              <div class="group-list-content">
+                <p class="list-item flex-r-bt" v-for="(item,index) in staffList" :key="item.id">
+                  <span>{{item.name}}</span>
+                  <img class="clear-icon" src="./assets/delete.png" alt="" @click="clearStaffByIndex(index)">
+                </p>
+                <p style="color:#CCCCCC" class="list-item" v-if="!staffList.length">未选择直接选择人员</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
+<script>
+import { Icon } from '@lambo-design/core'
+import organizeTree from './organize-tree.vue'
+import { deepCopy } from '@lambo-design/core/src/utils/assist'
+import ajax from '@lambo-design/shared/utils/ajax'
+import { debounce } from '@sy-common/core/src/utils/assits'
+export default {
+  components: { organizeTree },
+  props: {
+    value:{
+      type: Boolean,
+      default: false
+    },
+    data:{
+      type:Object,
+      default:{}
+    },
+    name:{
+      value:String,
+      default:"org"
+    }
+  },
+  data(){
+    return {
+      tabName:this.name,
+      modal:false,
+      dialogOpen:false,
+      orgSearch:'',
+      //组织--right-form
+      proOrgList:[],
+      includeLevelOrg:[],
+      orgList:[],
+      loadingOrg:false,
+      orgSearchList:[],
+      orgTree:[],
+      //岗位--form
+      postSearch:'',
+      proPostList:[],
+      postList:[],
+      loadingPost:false,
+      postSearchList:[],
+      includeLevelPost:[],
+      positiontList:[],
+      postTree:[],
+      //直接人员
+      staffSearch:'',
+      staffAllList:[],
+      staffList:[],
+      loadingStaff:false,
+      lastLoadingTime:0,
+      offset:0,
+      staffEnding:false,
+      tagList:[{
+        v:'所选市公司所有部门',
+        checked:false,
+        key:'07'
+      },{
+        v:'所有市公司',
+        checked:false,
+        key:'08'
+      },{
+        v:'所有市公司',
+        checked:false,
+        key:'9'
+      },{
+        v:'所有市公司',
+        checked:false,
+        key:'10'
+      },{
+        v:'所有市公司',
+        checked:false,
+        key:'11'
+      },{
+        v:'所有市公司',
+        checked:false,
+        key:'12'
+      }],
+    }
+  },
+  mounted() {
+    this.queryPositionList()
+    this.loadMore()
+  },
+  methods:{
+    queryPositionList(){
+      ajax.get('/pub-manage-server/pub/personHelpBox/q/queryPositionList').then((res)=>{
+        if(res.data.code === 1){
+          let positiontList = res.data.data || []
+          positiontList.map((item)=>item.checked = false)
+          this.positiontList = positiontList
+        }
+      })
+    },
+    getOrgListBySearch(query){
+      if (query !== '') {
+        this.loadingOrg = true;
+        this.getOrgUnitBySearchTerm(query,(res)=>{
+            this.loadingOrg = false
+            if(res.data.code === 1){
+              let resp = res.data.data?.items??[]
+              this.orgSearchList = resp
+            }else{
+              this.orgSearchList = []
+              this.$Message.error("获取组织节点列表失败！")
+            }
+        })
+      }else{
+        this.orgSearchList = [];
+      }
+    },
+    getPostListBySearch(query){
+      if (query !== '') {
+        this.loadingPost = true;
+        this.getOrgUnitBySearchTerm(query,(res)=>{
+            this.loadingPost = false
+            if(res.data.code === 1){
+              let resp = res.data.data?.items??[]
+              this.postSearchList = resp
+            }else{
+              this.postSearchList = []
+              this.$Message.error("获取组织节点列表失败！")
+            }
+        })
+      }else{
+        this.$refs.postTree.initData()
+        this.postSearchList = [];
+      }
+    },
+    getOrgUnitBySearchTerm(query,callback){
+        ajax.get('/pub-manage-server/pub/personHelpBox/q/getOrgUnitBySearchTerm?searchTerm='+query).then((res)=>{callback(res)})
+    },
+    async getOrgOption(val){
+      if(!val) return this.$refs.orgTree.initData();
+      let item = this.orgSearchList.filter((item)=> {return item.orgUnitId === val}).shift();
+      const leafNode = await this.judgeNodeLeafe(item.orgUnitId);
+      const ftem = {...item,orgNodeName:item.name,parentOrgUnitId:item.parentId,leafNode:leafNode}
+      try{
+        let parentsList = await this.getParentOrgNodesByOrgUnitId(val)
+        let tree = this.buildTree([...parentsList,ftem])
+        this.orgTree = tree
+      }catch(e){
+        this.$Message.error("获取组织节点列表失败！")
+      }
+    },
+    async getPostOption(val){
+      if(!val) return this.$refs.postTree.initData();
+      let item = this.postSearchList.filter((item)=> {return item.orgUnitId === val}).shift();
+      const leafNode = await this.judgeNodeLeafe(item.orgUnitId);
+      const ftem = {...item,orgNodeName:item.name,parentOrgUnitId:item.parentId,leafNode:leafNode}
+      try{
+        let parentsList = await this.getParentOrgNodesByOrgUnitId(val)
+        let tree = this.buildTree([...parentsList,ftem])
+        this.postTree = tree
+      }catch(e){
+        this.$Message.error("获取组织节点列表失败！")
+      }
+    },
+    getParentOrgNodesByOrgUnitId(val){
+      return new Promise((resolve,reject)=>{
+        ajax.get('/pub-manage-server/pub/personHelpBox/q/getParentOrgNodesByOrgUnitId?orgUnitId='+val).then((res)=>{
+          if(res.data.code === 1){
+            let parentsList = res.data?.data?.items??[]
+            resolve(parentsList)
+          }else{
+            reject(false)
+          }
+        })
+      })
+    },
+    judgeNodeLeafe(orgUnitId){
+      return new Promise((resolve,reject)=>{
+        ajax.get('/pub-manage-server/pub/personHelpBox/q/getOrgUnitList', { params:{
+            containsCurLevel:true,
+            orgUnitId:orgUnitId,
+          }
+        }).then((res)=>{
+          if(res.data.code === 1){
+            let treeList = res.data.data
+            if(treeList && treeList.length){
+              resolve(false)
+            }else{
+              resolve(true)
+            }
+          }else{
+            resolve(false)
+          }
+        })
+      })
+    },
+    buildTree(items) {
+      // 创建一个映射表，用于快速查找节点
+      const map = {};
+      const roots = [];
+      
+      // 初始化所有节点，添加children属性
+      items.forEach(item => {
+        map[item.orgUnitId] = { ...item, orgChildrenList: [] };
+      });
+      
+      // 构建树形结构
+      items.forEach(item => {
+        const node = map[item.orgUnitId];
+        if (item.parentOrgUnitId === null) {
+          // 根节点
+          roots.push(node);
+        } else {
+          // 子节点，找到父节点并添加到其children中
+          const parent = map[item.parentOrgUnitId];
+          if (parent) {
+            parent.orgChildrenList.push(node);
+          }
+        }
+      });
+      return roots;
+    },
+
+    searchStaff(){
+      this.staffEnding = false;
+      this.offset = 0
+      this.staffAllList = []
+      this.loadMore()
+    },
+    queryAllStaffList(){
+      return new Promise((resolve,reject)=>{
+          ajax.get('/pub-manage-server/pub/personHelpBox/q/queryAllStaffList',{
+            params:{
+              search:this.staffSearch,
+              offset:this.offset,
+              limit:10,
+            }
+          }).then((res)=>{
+            if(res.data.code === 1){
+              let resp = res.data.data
+              resolve(resp)
+            }else{
+              reject(false)
+            }
+          })
+      })
+    },
+    handleScroll(e){
+      const { scrollTop, clientHeight, scrollHeight } = e.target;
+      if (scrollHeight - (scrollTop + clientHeight) < 50) {
+        this.loadMore();
+      }
+    },
+    async loadMore(){
+      let nowTime = Date.now()
+      if (this.loadingStaff || this.staffEnding || (nowTime - this.lastLoadingTime < 1000)) return
+      this.loadingStaff = true
+      try {
+        console.log("--触底加载---")
+        let res = await this.queryAllStaffList()
+        let list = res.rows;
+        list.map((item)=>item.checked=false)
+        this.staffAllList = this.staffAllList.concat(list)
+        this.offset += 10;
+        this.loadingStaff = false
+        this.lastLoadingTime = Date.now()
+        if(res.total===this.staffAllList.length){
+          this.staffEnding = true
+        }
+      }catch (e){
+        this.loadingStaff = false
+        this.lastLoadingTime = Date.now()
+        console.log(e)
+      }
+    },
+    getOrgList(data){
+      this.proOrgList = data
+    },
+    getPostList(data){
+      this.proPostList = data
+    },
+    addOrgList(){
+      if(!this.proOrgList.length) return this.$Message.error("请先选择组织节点！")
+      let proOrgList = deepCopy(this.proOrgList)
+      proOrgList.forEach(item=>{
+        item.title = this.includeLevelOrg.includes('01')?`${item.orgNodeName}（包含下级组织节点）`:item.orgNodeName
+        item.id = this.includeLevelOrg.includes('01')?('01'+'-' + item.orgUnitId):('00'+'-'+item.orgUnitId)
+        item.includeLevel = this.includeLevelOrg.includes('01')
+      })
+      let list = this.orgList.concat(proOrgList)
+      let uniqueArray = list.filter((item, index, self) =>
+          index === self.findIndex(t => (
+            t.id === item.id // 基于id属性去重
+          ))
+      );
+      this.orgList = uniqueArray
+      this.$refs.orgTree.upDataTree()
+      this.proOrgList = []
+    },
+    clearGroup(){
+      this.orgList = []
+    },
+    clearOrgByIndex(index){
+      this.orgList.splice(index,1)
+    },
+    //岗位
+    getPosionId(item){
+      item.checked = !item.checked;
+    },
+    addPostList(){
+      if(!this.proPostList.length) return this.$Message.error("请选择组织节点！")
+      let proPostList = deepCopy(this.proPostList)
+      let checkedPosition = this.positiontList.filter((item)=>item.checked === true)
+      if(!checkedPosition.length){return this.$Message.error("请选择岗位！！")}
+      //summary data
+      let totalList = []
+      for(let it of checkedPosition){
+        proPostList.forEach(item=>{
+          totalList.push({
+            ...item,
+            ...it,
+            title:`${this.includeLevelPost.length?(item.orgNodeName+'（包含下级组织节点）'):item.orgNodeName}`,
+            includeLevel:this.includeLevelPost.includes('01'),
+            id:this.includeLevelPost.includes('01')?('01'+'-'+it.positionId + '-' + item.orgUnitId):('00'+'-'+it.positionId + '-' + item.orgUnitId),
+          })
+        })
+      }
+      let list = this.postList.concat(totalList)
+      let uniqueArray = list.filter((item, index, self) =>
+          index === self.findIndex(t => (
+            t.id === item.id // 基于id属性去重
+          ))
+      );
+      this.postList = uniqueArray
+      this.$refs.postTree.upDataTree()
+      this.proPostList = []
+      this.positiontList.map((item)=>{item.checked=false})
+    },
+    clearPost(){
+      this.postList= []
+    },
+    clearPostByIndex(index){
+      this.postList.splice(index,1)
+    },
+    //staff
+    addStaffList(){
+      let staffList = this.staffAllList.filter((item)=>item.checked===true)
+      let list = this.staffList.concat(staffList)
+      let uniqueArray = list.filter((item, index, self) =>
+          index === self.findIndex(t => (
+            t.id === item.id // 基于id属性去重
+          ))
+      );
+      this.staffList = uniqueArray
+      this.staffAllList.map((item)=>item.checked=false)
+    },
+    handlestaff(item){
+      item.checked=!item.checked
+    },
+    clearStaff(){
+      this.staffList = []
+    },
+    clearStaffByIndex(index){
+      this.staffList.splice(index,1)
+    },
+    confirm(){
+      const v = {
+        orgList:this.orgList,
+        postList:this.postList,
+        staffList:this.staffList
+      }
+      this.$emit('confirm',deepCopy(v))
+    },
+    visibleChange(val){
+      this.$emit('input',val);
+    },
+    fastChedkOrg(item){
+      item.checked = !item.checked
+    },
+  },
+  computed:{
+    getCheckedStaff(){
+      return this.staffAllList.filter((item)=>item.checked===true).length
+    },
+    getCheckTypenum(){
+      let l1 = this.orgList.length?1:0;
+      let l2 = this.postList.length?1:0;
+      let l3 = this.staffList.length?1:0;
+      return l1+l2+l3
+    }
+  },
+  watch:{
+    value(val){
+      this.modal = val
+    },
+    data:{
+      handler(val){
+        let map = deepCopy(val)
+        let orgList = map.orgList || []
+        orgList.forEach(item=>{
+          item.title = item.includeLevel?`${item.orgNodeName}（包含下级组织节点）`:item.orgNodeName
+          item.id = item.includeLevel?('01'+'-' + item.orgUnitId):('00'+'-'+item.orgUnitId)
+        })
+        this.orgList = orgList
+        let postList = map.postList || []
+        postList.forEach(item=>{
+          item.title=`${item.includeLevel?(item.orgNodeName+'（包含下级组织节点）'):item.orgNodeName}`
+          item.id=item.includeLevel?('01'+'-'+item.positionId + '-' + item.orgUnitId):('00'+'-'+item.positionId + '-' + item.orgUnitId)
+        })
+        this.postList = postList
+        this.staffList = map.staffList || []
+      },
+      deep: true,
+      immediate: true,
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.modal-tree{
+  .header-text{
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+  .icon-tip{
+    width: 16px;
+    height: 16px;
+    background: var(--primary-color);
+    border-radius: 50%;
+    color: #fff;
+    line-height: 16px;
+  }
+  .content-container{
+  }
+  .tree-orig{
+    width:100%;
+    display: flex;
+    height: 700px;
+    background: #fff;
+    /deep/.ivu-tabs-nav{
+      font-weight: bold;
+      font-size: 16px;
+    }
+    /deep/.ivu-tabs-nav{
+      width: 100%;
+      display: flex;
+    }
+    /deep/.ivu-tabs-nav .ivu-tabs-tab{
+      flex:1;
+      text-align: center;
+    }
+    .tab-content{
+      width: 720px;
+      border-radius: 8px;
+      border: 1px solid #EAECF0;
+      .tab{
+        padding:20px;
+        .tag-content{
+          margin-top:20px;
+          height:37px;
+          display:flex;
+          align-items: center;
+        }
+        .tree{
+          height:450px;
+          margin-top:20px;
+        }
+        .staff-content{
+          overflow:auto;
+        }
+        .bottom-select{
+          display:flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-top:20px;
+          .num{
+            color:var(--primary-color);
+          }
+        }
+      }
+      .tag-list{
+        flex:1;
+        display:inline-block;
+        height:100%;
+        overflow:hidden;
+      }
+      .tag{
+        display: inline-block;
+        padding:7px 13px;
+        background: #F4F6FA;
+        border-radius: 4px;
+        border: 1px solid #EAECF0;
+        margin-left:10px;
+        font-weight: bold;
+        cursor: pointer;
+        &.active{
+          background: var(--primary-color);
+          border-radius: 4px;
+          color: #fff;
+        }
+      }
+      .pop-content{
+        display: flex;
+        flex-wrap: wrap;
+        width:500px;
+        .tag{
+          margin-top: 10px;
+          &.active{
+          background: var(--primary-color);
+          border-radius: 4px;
+          color: #fff;
+        }
+        }
+      }
+      .post{
+        display: flex;
+        height: 100%;
+        .left{
+          width:200px;
+          overflow: auto;
+          >div{
+            background: #FFFFFF;
+            border-radius: 4px;
+            border: 1px solid #EAECF0;
+            margin-top:10px;
+            padding:10px 20px;
+            font-weight: 400;
+            font-size: 14px;
+            color: #333333;
+            cursor: pointer;
+          }
+          .active{
+            background: #F2F8FF;
+            font-weight: bold;
+            color:var(--primary-color);
+          }
+        }
+        .right{
+          margin-left:20px;
+          flex: 1;
+        }
+      }
+      .gust-item{
+        display:flex;
+        align-items: center;
+        width: 100%;
+        padding: 15px 10px;
+        margin-top:10px;
+        cursor: pointer;
+        .left-panel{
+          background:url("./assets/name-bg.png") no-repeat;
+          width:30px;
+          height:30px;
+          border-radius: 50%;
+          font-weight: bold;
+          font-size: 16px;
+          color: #FFFFFF;
+          line-height:30px;
+          text-align:center;
+        }
+        .right-panel{
+          margin-left:10px;
+          flex:1;
+          >p:first-child{
+            color: #333333;
+          }
+          >p:last-child{
+            color: #AFAFAF;
+          }
+        }
+        .checked-icon{
+          margin-left:auto;
+          color:var(--primary-color);
+          font-size:18px;
+        }
+      }
+      .staff-active{
+        background:#E9F4FF;
+        >p:first-child{
+          color: var(--primary-color);
+        }
+      }
+    }
+    .form-content{
+      flex:1;
+      overflow: hidden;
+      border-radius: 8px;
+      border: 1px solid #EAECF0;
+      margin-left:20px;
+      padding:10px 20px;
+      >p{
+        font-weight: 500;
+        font-size: 16px;
+        color: #333333;
+        .num{
+          color:var(--primary-color);
+        }
+      }
+      .node-list{
+        display: flex;
+        flex-direction: column;
+        height: calc(100% - 26px);
+        >div{
+          flex: 1;
+          overflow: hidden;
+        }
+        .group-box{
+          margin-top:20px;
+          color:#666666;
+          .clear-btn{
+            color:#CCCCCC;
+            cursor: pointer;
+            &:hover{
+              color:var(--error-color);
+            }
+          }
+        }
+        .group-list-content {
+          height: calc(100% - 26px);
+          overflow: auto;
+          .clear-icon{
+            cursor:pointer;
+          }
+        }
+        .list-item{
+          background:#F4F6FA;
+          border-radius: 4px;
+          padding:10px;
+          margin-top:10px;
+          color: #333333;
+          white-space: nowrap;
+          >span{
+            flex:1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          &:last-child{
+            margin-bottom:10px;
+          }
+        }
+      }
+    }
+    .flex-r-bt{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

package/src/organize-tree.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="content">
+    <Spin fix v-if="loading"></Spin>
+    <Tree :data="data" ref="tree" :load-data="loadData" :render="renderContent" check-directly
+          @on-select-change	="handleChange" multiple></Tree>
+  </div>
+</template>
+<script>
+import { deepCopy } from '@lambo-design/core/src/utils/assist';
+import ajax from '@lambo-design/shared/utils/ajax'
+export default {
+  props:{
+    disabled:{
+      type: Boolean,
+      default: false
+    },
+    treeList:{
+      type: Array,
+      default: () => []
+    }
+  },
+  data(){
+    return {
+      data:[],
+      manageUnitId:'',
+      loading:true
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods:{
+    async initData(){
+      let data = await this.getOrgChildren()
+      this.loading = false
+      this.data = data;
+    },
+    handleChange(data){
+      this.$emit('handleChange',data)
+    },
+    async loadData(item, callback){
+      // 模拟异步获取数据
+      let children = await this.getOrgChildren(item.orgUnitId)
+      callback(children); // 调用callback传入子节点数据
+    },
+    checkNode(data){
+      // console.log(data,'data')
+    },
+    getOrgChildren(orgUnitId=''){
+      return new Promise((resolve,reject)=>{
+        ajax.get('/pub-manage-server/pub/personHelpBox/q/getOrgUnitList', { params:{
+            containsCurLevel:true,
+            orgUnitId:orgUnitId,
+          }
+        }).then((res)=>{
+          if(res.data.code === 1){
+            let treeList = res.data.data
+            this.initTree(treeList)
+            resolve(treeList)
+          }else{
+            resolve([])
+          }
+        }).catch(err=>{
+          console.log(err)
+        })
+      })
+    },
+    initTree(treeList){
+      const defineTree = function(list){
+        if(!list)return
+        list.forEach((item) => {
+          item.title=item.orgNodeName;
+          item.loading = false;
+          item.children = [];
+          item.expand = false;
+          item.checked = false;
+          if(item.leafNode){
+            delete item.loading;
+            delete item.children;
+          }
+          if(item.orgChildrenList && item.orgChildrenList.length){
+            item.children = defineTree(item.orgChildrenList);
+            item.expand = true;
+          }
+        })
+        return list
+      }
+      treeList.forEach(item=>{
+        item.title=item.orgNodeName;
+        item.loading = false;
+        item.children = [];
+        item.expand = false;
+        item.checked = false;
+        if(item.orgChildrenList && item.orgChildrenList.length){
+          item.children = defineTree(item.orgChildrenList);
+          item.expand = true;
+        }
+        if(this.disabled){
+          item.disabled = true;
+        }
+        if(item.leafNode){
+          delete item.loading;
+          delete item.children;
+        }
+      })
+    },
+    renderContent(h, { root, node, data }){
+      return h('div', {
+        style: {
+          width: '100%',
+          overflow:'hidden',
+          display:'flex',
+          alignItems: 'center',
+        }
+      }, [
+          h('img', {
+            attrs: {
+              src: require('./assets/icon.png'),
+            },
+            style: {
+              marginRight: '8px',
+              width:'14px',
+              height:'14px',
+            }
+          }),
+          h('span',{
+            style: {
+              overflow: 'hidden',
+              textOverflow:'ellipsis',
+              flex:1
+            },
+            on:{
+              click:()=>{
+                this.checkNode(data)
+              }
+            }
+          }, data.title)
+      ]);
+    },
+    upDataTree(){
+      const unCheck = (list)=>{
+        list.forEach((item)=>{
+          this.$set(item, 'selected', false);
+          if(item.children && item.children.length){
+            unCheck(item.children)
+          }
+        })
+      }
+      unCheck(this.data)
+    }
+  },
+  watch:{
+    'treeList':{
+      handler:function(val,oldVal){
+        let tree = deepCopy(val)
+        this.initTree(tree)
+        this.data = tree
+      },
+      deep:true
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.content{
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+/deep/.ivu-tree ul li{
+  overflow: hidden;
+}
+/deep/.ivu-tree-title{
+  width: calc(100% - 20px);
+}
+
+</style>