VUE+Vant实现H5组织架构选人选公司组件

我就是DaLing呀！

已于 2024-03-21 15:55:47 修改

阅读量384

点赞数 5

文章标签： vue.js 前端 javascript H5 vant 组织架构

于 2024-03-21 15:53:53 首次发布

本文链接：https://blog.csdn.net/weixin_42418774/article/details/136910444

版权

提醒自己：
这是之前的逻辑，或许你重新写会有更好的方法，可以参考逻辑！！！

功能介绍

1.有面包屑点击切换
2.有公司、部门、人员
3.单选、多选实现
4.编辑/回显
5.使用随意切换层级和跳转到指定层级回显等功能

效果图：

在这里插入图片描述
点击跳转到组件主要内容区域：

数据结构

{
"children"：[{}],//子级数据
"type" : 0,  // type:0-主企业,2-子企业，1-部门
"comNo" : "1543782809XXXXX",
"teamNo" : null,
"name" : "XXXXXXXX有限公司",
"id" : "1",
"count" : 0,
"parentId" : "",
"contacts": [ {
	"name" : "刘XXX",
	"icon" : "", // 头像
	"memberNo" : "111111111111111111",
	"phone" : "17XXXXXXXXX",
	"departmentId": [ "1", "62d6591fa965ea000xxxxx"],
	"department" : "[["1"],["1","62d6591fa965ea00012xxxxxxx"]
	"departmentName" : ""
	}
] //人员数据
}

第一级父级：调用UI组件

<basicCompanyInfo @applySubjectData="getApplySubjectData" class="basic-company-info">

js：
// 获取申请公司部门数据
getApplySubjectData(val) {
  let { aCompany, aCompanyName, aDepartment, aDepartmentName, name, memberNo } = val
  this.dataDTO = {
    companyId:aCompany,
    companyName:aCompanyName,
    departmentName:aDepartmentName,
    departmentNo:aDepartment,
    userName: name,
    userId: memberNo
  }
},

第二级需求UI组件：实现交互

<!-- 组织架构选单位/部门/经办人 -->
<template>
  <div class="basic-company-info">
    <van-cell @click="goOrgChoose" :value="applySubjectData.aCompanyName">
      <template #title>
        <div class="required-label">申请单位</div>
      </template>
      <template #right-icon>
        <img src="@/assets/img/icon_right.png" alt="" class="icon_right ml10">
      </template>
    </van-cell>
    <van-cell title="申请部门"
              :value="!dataState && !applySubjectData.aCompanyName ? '' : (applySubjectData.aDepartmentName ? applySubjectData.aDepartmentName : '该人员未分配部门')" @click="(event) => goOrgChoose(event,2)">
      <template #right-icon>
        <img src="@/assets/img/icon_right.png" alt="" class="icon_right ml10">
      </template>
    </van-cell>
    <van-cell :value="applySubjectData.name" @click="(event)=> goOrgChoose(event,3)">
      <template #title>
        <div class="required-label">经办人</div>
      </template>
      <template #right-icon>
        <img src="@/assets/img/icon_right.png" alt="" class="icon_right ml10">
      </template>
    </van-cell>
     <van-cell title="" value="" v-show="$router.path=='/reapply'" />
  </div>
</template>


<script>
import eventBus from "@/utils/eventBus";
import apiOrder from "@/api/apiOrder";


export default {
  name: "basicCompanyInfo",
  data(){
    return{
      dataState:false,
      keyName:1,
      checkData:[],
      applySubjectData:{},
    }
  },
  props:{
    applypropsData:{ // 申请单位/部门/经办人的数据
      type:Object,
      default:()=>({})
    }
  },
  computed:{
    userBaseData(){ // 用户信息
            return this.$store.state.user.userInfo;
    }
  },
  watch:{
    applypropsData:{
      handler(val){
        if(val&&this.$route.query.type==1){
          this.initapply()
        }
      },
      deep:true
    }
  },
  created() {
    eventBus.$off(`corporateDepartment${this.keyName}`)
    eventBus.$on(`corporateDepartment${this.keyName}`, function(data){ // 接收组织架构的数据
      this.setOrderBaseData(data);
    }.bind(this));
  },
  mounted() {
      if (this.$route.query.type==1) {
        this.initapply()
      }else{
        this.getCheckData()
      }
  },
  methods:{
    initapply(){
      this.applySubjectData=this.applypropsData
      this.applySubjectData.name=this.applypropsData.aPersonName
      this.applySubjectData.managerId=this.applypropsData.aPerson
    },
    // 赋值选中的数据
    async getCheckData(){
      if(this.applySubjectData.aCompany){ // 有选中公司部门的情况回显
        this.checkData = [this.applySubjectData];
      }else {// 第一次进来默认登录信息
        let userInfo;
        let res = await apiOrder.findDefaultDept(); // 获取默认部门
        if (res.code == 200) {
          let defaultDept = res.data;
          userInfo = {
            companyId: defaultDept.id,
            departmentName: defaultDept.departmentName,
            departmentNo: defaultDept.departmentNo
          }
        }
        let userBaseData = {...this.userBaseData, ...userInfo};
                this.initBase(userBaseData)
      }
    },
    // 初始化数据-取自state用户信息
    async initBase(data){
      // console.log("初始化数据-取自state用户信息",data)
      let list = {
        aCompany:data.companyInfo?.no, // 用户信息的公司id与组织架构的公司id不一致，所以按组织架构为准：一级公司id：1
        aCompanyName:data.companyInfo?.name,
        aDepartment:data.departmentNo,
        aDepartmentName:data.departmentName,
        memberNo:data.personNo,
        icon:data.icon,
        name:data.realName,
        phone:data.telPhone,
      };
      this.setOrderBaseData([list])
      this.checkData = [list];
    },
    // 去选择组织架构
    goOrgChoose(ev,type){ // 1-企业,2-部门,3-人员
      this.$emit('changeData')
      // return
      this.$store.commit('common/updateOrgStructureSelection', this.checkData); // 改变默认勾选数据
      this.$router.push({ path:'/organizationalStructure', query:{ key:this.keyName,levelType:type }})
    },
    // 公司部门数据获取
    setOrderBaseData(data){
      let val = data && data[0];
      this.dataState = false;
      if(val){
        this.dataState = true;
        this.applySubjectData = {...this.applySubjectData,...val};
        this.$emit('applySubjectData',this.applySubjectData)
      }
    }
  }
}
</script>


<style scoped lang="scss">
// css根据需求自定义
</style>

组件主要全部代码：

<!-- 组织架构选人/选公司/选部门-->
<template>
  <div class="org-structure">
    <div class="org-structure-content topNavPt">
      <!-- 导航部分 -->
      <topNavigation v-if="isShow" :title="breadCrumbsData.length > 0 ? breadCrumbsData[0].name : navTitle"></topNavigation>
      <!-- 面包屑 -->
      <div class="bread-crumbs bag-fff" v-if="breadCrumbsData.length > 0">
        <div class="bread-crumbs-content" v-for="(item,index) in breadCrumbsData" :key="item.id" @click="goBack(item,index)">
          <span :class="index == breadCrumbsData.length - 1 ? 'bread-crumbs-content-company cl969696' : 'bread-crumbs-content-company'">{{ item.name }}</span>
          <img src="../../assets/img/icon_right.png" alt="" class="icon_right">
        </div>
      </div>
      <!-- 公司级别/部门级别 -->
      <div class="pl15 bag-fff">
        <!-- 一级公司 -->
        <div v-if="!chooseFirstOrder" class="company-cell-content" @click="chooseOrgOrDepartment(orgList)">
          <van-checkbox v-model="checkByDefaultData">{{ orgList.name }}</van-checkbox>
          <img src="../../assets/img/icon_right.png" alt="" class="icon_right mr15">
        </div>
        <!-- 二级及以下公司部门 -->
        <div v-else>
          <div v-for="item in chooseOrgList" :key="item.id" @click="chooseOrgOrDepartment(item)" class="company-cell-content">
            <van-checkbox :class="item.children.length === 0 && item.contacts.length === 0 && item.parentId != 1 ? 'disable-orderBaseCss.scss' : ''" v-model="item.checked">{{ item.name }}
              <span>{{ `(${item.count})` }}</span>
            </van-checkbox>
            <img src="../../assets/img/icon_right.png" alt="" class="icon_right mr15">
          </div>
        </div>
      </div>
      <!--  人员级别 -->
      <div v-if="contactsList" class="pl15 bag-fff mt10">
        <!-- 单选/多选 -->
        <div class="company-cell-content company-personnel" v-for="list in contactsList">
          <van-checkbox-group v-model="checkedData" ref="checkboxGroup">
            <van-checkbox :name="list.memberNo" checked-color="#5792FD" @click="(event) => handleChecked(event,list,multipleState)">
              {{ list.name }}</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="bottom-btn-box flex-ai-jc" :style="checkedFinallyData.length > 0 ? '' : 'background: #f9a39c;'" @click="submit">
      <span>提交{{ multipleState && checkedData.length ? `(已选${checkedData.length}人)` : ''}}</span>
    </div>
  </div>
</template>


<script>
import apiOrder from '@/api/apiOrder'
import eventBus from "@/utils/eventBus";
export default {
  name: "organizationalStructure",
  components:{
    topNavigation:() => import('@/views/shopBus/components/topNavigation')
  },
  props:{
    multipleSelection:{ // 多选/单选
      type: Boolean,
      default: false
    },
    navName:{
      type: String,
      default: "请选择经办人"
    },
    isShow:{
      type: Boolean,
      default: true
    },
    returnState:{ // 标记是否父子级反参-true父子
      type: Boolean,
      default: false
    },
    chooseData:{
      type:Array,
      default:()=>[]
    },
    levelType:{
      type:String,
      default:''
    }
  },
  data(){
    return{
      orgList: [],
      chooseOrgList:[],// 组织相关架构
      chooseFirstOrder:false, // 是否有一级
      breadCrumbsData:[], // 面包屑数据
      contactsList:[],// 人员相关数据
      checkedData:[], // 勾选数据
      checkedFinallyData:[],// 最终传参数据
      existData:[],// 之前已存在的值-备份一份
      keyName:null,
      submitState:false
    }
  },
  computed:{
    // 以下数据都是为了区分路由跳转还是父子组件使用
    navTitle(){
      return this.$route.query && this.$route.query.navName ? this.$route.query.navName : this.navName;
    },
    multipleState(){
      return this.$route.query && this.$route.query.multipleSelection ? this.$route.query.multipleSelection : this.multipleSelection;
    },
    checkByDefaultData(){
      return this.returnState ? this.chooseData : this.$store.state.common.orgStructureSelection && JSON.parse(JSON.stringify(this.$store.state.common.orgStructureSelection))
    },
    levelState(){ // 1-企业,2-部门,3-人员 --自己定义的
      return this.$route.query && this.$route.query.levelType || this.levelType
    }
  },
  created() {
    this.keyName = this.$route.query && this.$route.query.key; // 得到唯一key值,便于反参到上一个页面
    this.getOrgList();
  },
  mounted() {
    if(this.checkByDefaultData.length > 0){ // 有勾选值的话需要初始化已有的数据
      this.checkedData = this.checkByDefaultData.map(item => item.memberNo);
      this.existData = this.checkByDefaultData;
    }
  },
  methods:{
    // 组织架构数据
    async getOrgList(){
      let res = await apiOrder.getOrganization();
      if(res.code == 200 ){
        this.orgList = res.data;
        if(this.levelState > 0){ // 有需要跳转到指定层级的情况
          this.levelInitShow(this.levelState)
        }
      }
    },
    // 点击公司或者部门
    chooseOrgOrDepartment(val){
      if(val.id == 1){
        this.chooseFirstOrder = true;
      }
      if(!this.breadCrumbsData.find(i => i.id === val.id) && (val.children && val.children.length > 0 || val.contacts && val.contacts.length > 0)){ // 不是重复点击 && 有部门或者有人员
        this.breadCrumbsData.push({ id:val.id,name:val.name,type:val.type }); // 面包屑数据 type:0-主企业,2-子企业，1-部门
        this.chooseOrgList = [];
        // 下一级有数据情况
        if(val.children.length > 0){
          this.chooseOrgList = val.children; // 组织数据
          if(this.checkByDefaultData && this.checkByDefaultData.length > 0){ // 如果有选中的数据，勾选上
            this.chooseOrgList = this.chooseOrgList.map(item =>{
              let state = this.checkByDefaultData.some(i => (item.type == 2 ? i.aCompany : i.aDepartment) === item.id);
              return state ? {...item,checked:true} : {...item,checked:false}  // 判断是否需要勾选
            })
          }
        }
        // 有人员数据
        if(val.contacts.length > 0){
          this.contactsList = [...val.contacts]; // 人员数据
          if(this.checkByDefaultData && this.checkByDefaultData.length > 0) {  // 如果有选中的数据，勾选上
            this.contactsList.forEach(per => {
              let state = this.checkByDefaultData.some(i => i.memberNo === per.memberNo);
              let perState = this.checkedData.some(id => id === per.memberNo); // 判断是否有此人员
              if(state && !perState){
                this.multipleState ? this.checkedData.push(per.memberNo) : this.checkedData = [per.memberNo];
              }
            })
          }
        }
      }
    },
    // 点击面包屑回退
    goBack(val,inx){
      if(val.id !== this.breadCrumbsData[this.breadCrumbsData.length - 1].id){ // 当前级时不执行筛选
        this.breadCrumbsData.splice(inx); // 首先清除面包屑后面的数据
        let treeData = this.getItemByIdInTree(this.orgList,val.id);
        this.chooseOrgOrDepartment(treeData);
      }
    },
    // 通过某个节点的id，获取该节点的完整信息
    getItemByIdInTree(tree,value){
      if(tree.id === value){
        return tree;
      } else {
        if(tree.children && tree.children.length > 0){
          for(let i = 0; i < tree.children.length; i++){
            let resultD = this.getItemByIdInTree(tree.children[i],value);
            if(resultD){
              return {...resultD};
            }
          }
        }
      }
    },
    // 通过人员id查找相应节点
    getMemberNoInTree(tree,id){
      if(tree.memberNo === id){
        return tree;
      } else {
        if (tree.contacts && tree.contacts.length > 0) {
          for (let i = 0; i < tree.contacts.length; i++) {
            let resultD = this.getMemberNoInTree(tree.contacts[i], id);
            if (resultD) {
              return resultD;
            }
          }
        }
        if (tree.children && tree.children.length > 0) {
          for (let i = 0; i < tree.children.length; i++) {
            let resultD = this.getMemberNoInTree(tree.children[i],id);
            if(resultD){
              return {...resultD};
            }
          }
        }
      }
    },
    // 根据树子节点ID查找所有父节点 - data：要遍历的数据， target：查找目标， result用于装查找结果的数组
    findParent(node, target, result) {
      if(node.id === target.id){
        if( this.levelState == 3 ){ // 到人员的级别
          result.unshift(node);
        }
        return true;
      }
      if (node.children && node.children.length > 0) { // 如果当前节点有子节点，则继续遍历子节点
        for (const childNode of node.children) {
          if (this.findParent(childNode, target, result)) { // 如果在子节点中找到了子节点的父节点，则将当前节点的ID添加到父节点ID数组中，并返回true表示已经找到了子节点
            result.unshift(node);
            return true;
          }
        }
      }
      // for (let i in node) { // 方法二
      //   let item = node[i]
      //   if (item.id === target.id) {
      //     //将查找到的目标数据加入结果数组中
      //     result.unshift(item)
      //     return true
      //   }
      //   if (item.children && item.children.length > 0) {
      //     let ok = this.findParent(item.children, target, result)
      //     if (ok) {
      //       result.unshift(item)
      //       return true
      //     }
      //   }
      // }
      //走到这说明没找到目标
      return false
    },
    // 根据type来指定展示到某个级别-例如部门跳转过来就指定到部门级别
    levelInitShow(type){ // 1-企业,2-部门,3-人员
      let arr = this.checkByDefaultData[0];
      if(arr){
        let target = { // 企业使用公司id，部门使用部门id(如果没有部门默认打开公司)
          id:type == 1 ? arr.aCompany : (arr.aDepartment ? arr.aDepartment : arr.aCompany),
          name:type == 1 ? arr.aCompanyName : (arr.aDepartmentName && arr.aDepartmentName ? arr.aDepartmentName : arr.aCompanyName)
        }
        let result = [];
        this.findParent(this.orgList, target, result,arr);
        result.forEach(item =>{
          this.chooseOrgOrDepartment(item)
        })
        console.log('指定层级展开：',arr,result,target)
      }
    },
    // 选择人员
    handleChecked(ev,val,moreChoose){
      let aDepartment,company,per;
      if(!moreChoose){ // 单选
        this.checkedData = [val.memberNo];
      }
      this.checkedFinallyData = []; // 初始化
      this.checkedData.forEach(user => {
        // 通过面包屑数据确定公司和部门
        company = this.breadCrumbsData.find(item => item.type == 2); // 0 是主企业 2 是子企业 1 部门
        aDepartment = this.breadCrumbsData[this.breadCrumbsData.length - 1];
        if(!company){ // 没有查到子公司则使用主企业
          company = this.breadCrumbsData.find(item => item.type == 0);
        }
        // 人员数据
        per = this.getMemberNoInTree(this.orgList,user);
        let data = {
          aCompany:company.id, // 申请单位NO
          aCompanyName:company.name, // 申请单位名称
          aDepartment:!this.breadCrumbsData.find(item => item.type == 1) ? '' : aDepartment.id,  // 申请部门NO - 多级取最后一个部门/排除第一级公司;都没有部门则为空
          aDepartmentName:!this.breadCrumbsData.find(item => item.type == 1) ? '' : aDepartment.name, // 申请部门名称
          memberNo:per.memberNo,
          icon:per.icon,
          name:per.name,
          phone:per.phone,
          per:per,
        }
        this.checkedFinallyData.push(data);
      })
    },
    // 提交
    submit(){
      if(this.checkedFinallyData.length > 0){
        this.submitState = true; // 是否点击提交
        this.$router.back();
        if(this.returnState){ // 直接父子组件反参
          this.$emit('corporateDepartment',this.checkedFinallyData)
        }
      }
    }
  },
  beforeDestroy(){
    if(!this.returnState && this.submitState){ // 不是父子级反参的情况
      eventBus.$emit(`corporateDepartment${this.keyName}`,this.checkedFinallyData,true)
    }else if(!this.returnState && !this.submitState){ // 不是父子级反参 && 不是点的提交-反参之前的数据
      eventBus.$emit(`corporateDepartment${this.keyName}`,this.existData,false)
    }
  }
}
</script>


<style scoped lang="scss">
// css自定义
</style>