编写版本：v1.2.1
适用版本：v1.2.0+
前置条件：使用的工程需在 Webpack5 版本以上，并使用模块联邦（ModuleFederationPlugin）接入 ui-base-core 项目提供的共享组件

共享组件-选择器

一、 效果图

用户选择器：

组织选择器：

角色选择器：

岗位选择器：

二、 组件路径

选择器 baseCore/core-selector.vue
选择器-用户弹窗 baseCore/user-selector-dialog.vue
选择器-角色弹窗 baseCore/role-selector-dialog.vue
选择器-岗位弹窗 baseCore/position-selector-dialog.vue
选择器-组织弹窗 baseCore/org-selector-dialog.vue

源码：ui-base-core/src/components/core-ibps/org/selector/index.vue

三、 使用举例

选择器输入框

template

<template>
    <!-- 用户选择器 -->
    <core-selector
        v-model="userIds"
        :type="'user'"
        :placeholder="'请选择用户'"
        :multiple="true"
        :readonly="false"
        :disabled="false"
    />
    <!-- 角色选择器 -->
    <core-selector
        v-model="roleIds"
        :type="'role'"
        :placeholder="'请选择角色'"
        :multiple="true"
        :readonly="false"
        :disabled="false"
    />
    <!-- 岗位选择器 -->
    <core-selector
        v-model="positionIds"
        :type="'position'"
        :placeholder="'请选择岗位'"
        :multiple="true"
        :readonly="false"
        :disabled="false"
    />
    <!-- 组织选择器 -->
    <core-selector
        v-model="orgIds"
        :type="'org'"
        :placeholder="'请选择组织'"
        :multiple="true"
        :readonly="false"
        :disabled="false"
    />
</template>

script

<script setup>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    CoreSelector: defineAsyncComponent(() => import('baseCore/core-selector.vue'))
  },
  data() {
    return {
      userIds: 'id1,id2',
      roleIds: '',
      position: '',
      orgIds: '',
    }
  }
}
</script>

选择器弹窗

template

<template>
    <!-- 用户选择器 -->
      <UserSelector
        :visible="personSelectorVisible"
        :targetSelectusers="userSelectList"
        @dialog-callback="handleAddData"
        @close="() => personSelectorVisible = false"
      />
      <!-- 角色选择器 -->
      <RoleSelector
        :visible="roleSelectorVisible"
        :targetSelectRole="roleSelectList"
        @dialog-callback="handleAddData"
        @close="roleSelectorVisible = false"
      />
      <!-- 岗位选择器 -->
      <PositionSelector
        :visible="postSelectorVisible"
        :targetSelectPost="positionSelectList"
        @dialog-callback="handleAddData"
        @close="postSelectorVisible = false"
      />
      <!-- 组织选择器 -->
      <OrgSelector
        :visible="orgSelectorVisible"
        :target-select-org="orgSelectList"
        @dialog-callback="handleAddData"
        @close="orgSelectorVisible = false"
      />
</template>

script

<script setup>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    UserSelector: defineAsyncComponent(() => import('baseCore/user-selector-dialog.vue')),
    RoleSelector: defineAsyncComponent(() => import('baseCore/role-selector-dialog.vue')),
    PositionSelector: defineAsyncComponent(() => import('baseCore/position-selector-dialog.vue')),
    OrgSelector: defineAsyncComponent(() => import('baseCore/org-selector-dialog.vue'))
  },
  data() {
    return {
      personSelectorVisible: false,
      roleSelectorVisible: false,
      postSelectorVisible: false,
      orgSelectorVisible: false,
      userSelectList: [],
      roleSelectList: [],
      positionSelectList: [],
      orgSelectList: []
    }
  },
  methods: {
    /**
     * 添加数据
     */
    handleAddData(data) {
        ...
    }
  }
}
</script>

四、 组件API

core-selector

属性

事件

user-selector-dialog

属性

事件

role-selector-dialog

属性

事件

position-selector-dialog

属性

事件

org-selector-dialog

属性

事件