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

package/index.js

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

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@sy-common/organize-select-help",
+  "version": "1.0.0-beta.3",
+  "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"
+  },
+  "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/src/index.vue

@@ -0,0 +1,532 @@
+<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="name">
+              <TabPane label="选择组织节点" name="name1">
+                <div class="tab">
+                  <Input v-model="orgSearch" placeholder="搜索组织节点"/>
+                  <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>
+                  </div>
+                  <div class="tree">
+                    <organizeTree @handleChange="getOrgList" ref="organizeTree"></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="name2">
+                <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">
+                    <Input v-model="orgSearch" placeholder="搜索组织节点"/>
+                    <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>
+                    </div>
+                    <div class="tree">
+                      <organizeTree @handleChange="getPostList" ref="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="name3">
+                <div class="tab">
+                  <Input v-model="staffSearch" @on-blur="queryAllStaffList"	 placeholder="搜索组织节点"/>
+                  <div class="tree staff-content">
+                    <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>
+                  </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">(1)</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 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 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 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 organizeTree from './organize-tree.vue'
+import { deepCopy } from '@lambo-design/core/src/utils/assist'
+import ajax from '@lambo-design/shared/utils/ajax'
+export default {
+  components: { organizeTree },
+  props: {
+    value:{
+      type: Boolean,
+      default: false
+    }
+  },
+  data(){
+    return {
+      modal:false,
+      name:'name1',
+      dialogOpen:false,
+      orgSearch:'',
+      //组织--right-form
+      proOrgList:[],
+      includeLevelOrg:[],
+      orgList:[],
+      //岗位--form
+      proPostList:[],
+      postList:[],
+      includeLevelPost:[],
+      positiontList:[],
+      //直接人员
+      staffSearch:'',
+      staffAllList:[],
+      staffList:[],
+      tagList:[{
+        v:'所选市公司所有部门',
+        on:false,
+        key:'07'
+      },{
+        v:'所有市公司',
+        on:false,
+        key:'08'
+      }],
+    }
+  },
+  mounted() {
+    this.queryPositionList()
+    this.queryAllStaffList()
+  },
+  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
+        }
+      })
+    },
+    queryAllStaffList(){
+      ajax.get('/pub-manage-server/pub/personHelpBox/q/queryAllStaffList?search='+this.staffSearch).then((res)=>{
+        if(res.data.code === 1){
+          let staffAllList = res.data.data && res.data.data.rows || []
+          staffAllList.map((item)=>item.checked=false)
+          this.staffAllList = staffAllList
+        }
+      })
+    },
+    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 = `${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.organizeTree.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(){
+      this.$emit('confirm',{
+        orgList:this.orgList,
+        postList:this.postList,
+        staffList:this.staffList
+      })
+    },
+    visibleChange(val){
+      this.$emit('input',val);
+    },
+  },
+  computed:{
+    getCheckedStaff(){
+      return this.staffAllList.filter((item)=>item.checked===true).length
+    }
+  },
+  watch:{
+    value(val){
+      this.modal = val
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.modal-tree{
+  .header-text{
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+  .icon-tip{
+    width: 16px;
+    height: 16px;
+    background: #145DFF;
+    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;
+        &.active{
+          background: #145DFF;
+          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:#145DFF;
+          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;
+        }
+        .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;
+    }
+  }
+/deep/.ivu-modal-body-no-scrollbar-width :not([class^="ivu-table"])::-webkit-scrollbar{
+}
+}
+</style>

package/src/organize-tree.vue

@@ -0,0 +1,158 @@
+<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 ajax from '@lambo-design/shared/utils/ajax'
+export default {
+  props:{
+    disabled:{
+      type: Boolean,
+      default: false
+    }
+  },
+  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;
+          }
+        })
+        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)
+    }
+  },
+}
+</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>