eta_mini_crm_front/src/components/AllUserForDepart.vue

<script setup>
import {apiSystemUser} from '@/api/system'

const model=defineModel()
const props=defineProps({
  props:{},
  clearable:{
    type:Boolean,
    default:false
  },
  filterable:{
    type:Boolean,
    default:true
  },
  placeholder:{
    type:String,
    default:'营业部/销售'
  },
  onlySelectUser:{//是否只能选择销售用户
    type:Boolean,
    default:false
  }
})
const emits=defineEmits(['change'])

const options=ref([])
function formatData(arr){
  arr.forEach(item => {
    item.label=item.SysUserId?item.SysRealName:item.SysDepartmentName
    item.value=item.SysUserId?item.SysUserId:item.SysDepartmentId
    if(props.onlySelectUser){//如果只能选择销售用户则将最后一级为部门的禁用
      item.disabled=!item.SysUserId&&!item.ChildrenList?true:false
    }
    
    if(item.ChildrenList){
      formatData(item.ChildrenList)
    }
  });
  return arr
}

async function getData(){
  const res=await apiSystemUser.allUserForDepart({AllEnabled:false})//true显示所有销售（包含被禁用的）false表示仅显示启用的用户，默认false
  if(res.Ret!=200) return
  const arr=res.Data.List||[]
  options.value=formatData(arr)
}
getData()

function handleChange(){
  emits('change')
}

</script>
<template>
  <el-cascader
    :options="options"
    :props="{
      value: 'value',
      label: 'label',
      children: 'ChildrenList',
      ...props.props
    }"
    v-model="model"
    :placeholder="props.placeholder"
    collapse-tags
    :clearable="clearable"
    :filterable="filterable"
    @change="handleChange"
  />
</template>