@hjxz/pharos-organization-pc

• 类钉钉组织架构组件
• 支持选择人员，部门
• 支持多选，单选
• 支持异步加载数据

Useage

install

pnpm i @hjxz/pharos-organization-pc

<script lang="ts" setup>
import { Button } from 'ant-design-vue'
import { ref, unref } from 'vue'
import type { OrganizationItem } from '@hjxz/pharos-organization-pc'
import { PharosOrganizationPc, useOrganization } from '@hjxz/pharos-organization-pc'
import '@hjxz/pharos-organization-pc/dist/style.css'

import { data } from './mockData.json'

async function getData() {
  // 模拟请求
  return await new Promise<Array<any>>((resolve) => {
    setTimeout(() => {
      resolve(data)
    }, 4000)
  })
}
const checkedList = ref<Array<OrganizationItem>>([])
const [register, { open, setCheckedList }] = useOrganization({
  api: getData,
  beforeClose: async () => {
    return await new Promise<boolean>((resolve) => {
      setTimeout(() => {
        resolve(true)
      }, 3000)
    })
  },
})
const handleSuccess = (data: Array<OrganizationItem>) => {
  checkedList.value = data
}

const handleOpen = () => {
  open(() => setCheckedList(unref(checkedList).map(i => i.id)))
}
</script>

<template>
  <PharosOrganizationPc @register="register" @success="handleSuccess">
    <Button @click="handleOpen">
      open
    </Button>
  </PharosOrganizationPc>
</template>

Tips: 接口返回的数据以下字段是必须的

interface Item {
  id: string
  parentId: string
  name: string
  type: 0 | 1
}

当然也可以使用系统内置的节点类型

export interface OrganizationItem {
  id: string
  name: string
  parentId: string
  type: 0 | 1 // 区分时部门还是人员
  avatar?: string
  checked: boolean
  hasChildren: boolean
  searchStr: string
  disabled: boolean
}

props

api

数据源接口

  api: {
    type: Function as PropType<(arg?: any) => Promise<Record<string, any>[]>>,
    default: null,
  },

mode

选择模式

  // mode 选人模式，选部门模式，选人和部门模式。默认选人和部门模式
  mode: {
    type: String as PropType<'user' | 'dept' | 'default'>,
    default: 'default',
  }

checked

传入的已选择的Id数组

  checked: {
    type: Array as PropType<Array<string>>,
    default: () => [],
  },

disabled

禁止的Id 数组

  disabled: {
    type: Array as PropType<Array<string>>,
    default: () => [],
  },

single

是否单选

  // single 是否单选
  single: {
    type: Boolean,
    default: false,
  },

beforeClose

关闭前的钩子函数，返回 false 则不关闭 。用于处理异步接口操作

  beforeClose: {
    type: Function as PropType<() => Promise<boolean>>,
    default: null,
  },

useOrganization hook

const [register,action] = useOrganization(props)

Action

export interface PharosOrganizationPcAction {
  // 打开组织架构
  open: (fn: () => void) => void
  // 清空已选
  clearAllChecked: () => void
  // 获取已选
  getCheckedList: () => Array<OrganizationItem>
  // 设置已选
  setCheckedList: (list: string[]) => void
}