Org 组织选择

使用指南

适用于人员与部门的选择场景，由多个组件通过不同的组合满足不同的选择场景。

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      h3-org-selector 组件 (测试数据，当搜索值长度超过5时出现空结果)
    </p>
    <div class="org-selector-demo">
      <h3-org-selector
        v-model="selectedDataA"
        :data="orgA"
        :searchData="searchDataA"
        :realTimeSearch="true"
        :showSearchEmpty="true"
        :limit="10"
        :selectable="false"
        placeholder="搜索成员"
        mode="user"
        @confirm="handleConfirm"
        @search="onSearch($event, 'A', 'user')"
        @subordinate="onSubordinate($event, 'A')"
        @breadcrumb="onBreadcrumb($event, 'A')"
        @click="onClick"
      >
        <!-- <template #searchEmpty>
          <div> 自定义搜索空结果</div>
        </template> -->
        <!-- <template #listEmpty>
          <div> 自定义列表空结果</div>
        </template> -->
      </h3-org-selector>
    </div>
    <p class="sub-title">
      单选部门
    </p>
    <h3-button
      type="primary"
      @click="
        org1 = currentorg;
        orgVisiable1 = true;
      "
    >
      单选部门
    </h3-button>
    <h3-org
      v-model="orgVisiable1"
      :data="org1"
      :searchData="searchData1"
      :showSearchEmpty="showSearchEmpty1"
      :selectedData="selectedData1"
      :realTimeSearch="true"
      :mulpitle="false"
      mode="org"
      @confirm="handleConfirm"
      @search="onSearch($event, '1', 'org')"
      @subordinate="onSubordinate($event, '1')"
      @breadcrumb="onBreadcrumb($event, '1')"
    />
    <p class="sub-title">
      多选部门
    </p>
    <h3-button
      type="primary"
      @click="
        org2 = currentorg;
        orgVisiable2 = true;
      "
    >
      多选部门
    </h3-button>
    <h3-org
      v-model="orgVisiable2"
      :data="org2"
      :searchData="searchData2"
      :showSearchEmpty="showSearchEmpty2"
      :selectedData="selectedData2"
      :realTimeSearch="true"
      mode="org"
      @confirm="handleConfirm"
      @search="onSearch($event, '2', 'org')"
      @subordinate="onSubordinate($event, '2')"
      @breadcrumb="onBreadcrumb($event, '2')"
    />
    <p class="sub-title">
      单选人员
    </p>
    <h3-button
      type="primary"
      @click="
        org3 = currentorg;
        orgVisiable3 = true;
      "
    >
      单选人员
    </h3-button>
    <h3-org
      v-model="orgVisiable3"
      :data="org3"
      :searchData="searchData3"
      :showSearchEmpty="showSearchEmpty3"
      :selectedData="selectedData3"
      :realTimeSearch="true"
      :mulpitle="false"
      mode="user"
      @confirm="handleConfirm"
      @search="onSearch($event, '3', 'user')"
      @subordinate="onSubordinate($event, '3')"
      @breadcrumb="onBreadcrumb($event, '3')"
    />
    <p class="sub-title">
      多选人员
    </p>
    <h3-button
      type="primary"
      @click="
        org4 = currentorg;
        orgVisiable4 = true;
      "
    >
      多选人员
    </h3-button>
    <h3-org
      v-model="orgVisiable4"
      :data="org4"
      :searchData="searchData4"
      :showSearchEmpty="showSearchEmpty4"
      :selectedData="selectedData4"
      :realTimeSearch="true"
      mode="user"
      @confirm="handleConfirm"
      @search="onSearch($event, '4', 'user')"
      @subordinate="onSubordinate($event, '4')"
      @breadcrumb="onBreadcrumb($event, '4')"
    />
    <p class="sub-title">
      多选下限制最高数量
    </p>
    <h3-button
      type="primary"
      @click="
        org6 = currentorg;
        orgVisiable6 = true;
      "
    >
      最多选择10个人员
    </h3-button>
    <h3-org
      v-model="orgVisiable6"
      :data="org6"
      :searchData="searchData6"
      :showSearchEmpty="showSearchEmpty6"
      :selectedData="selectedData6"
      :realTimeSearch="true"
      :limit="10"
      mode="user"
      @confirm="handleConfirm"
      @search="onSearch($event, '6')"
      @subordinate="onSubordinate($event, '6')"
      @breadcrumb="onBreadcrumb($event, '6')"
    />
    <!-- <p class="sub-title">
      h3-org 组件
    </p>
    <p class="sub-title">
      全选 控制范围仅限当前数据
    </p>
    <h3-button
      type="primary"
      @click="
        org0 = currentorg;
        orgVisiable0 = true;
      "
    >
      全选
    </h3-button>
    <h3-org
      v-model="orgVisiable0"
      :data="org0"
      :safeAreaInsetTop="57"
      :searchData="searchData0"
      :selectedData="selectedData0"
      :realTimeSearch="true"
      mode="all"
      @confirm="handleConfirm"
      @search="onSearch($event, '0')"
      @subordinate="onSubordinate($event, '0')"
      @breadcrumb="onBreadcrumb($event, '0')"
    />
    <p class="sub-title">
      可取消的
    </p>
    <h3-button
      type="primary"
      @click="
        org = currentorg;
        orgVisiable = true;
      "
    >
      全选
    </h3-button>
    <h3-org
      v-model="orgVisiable"
      :data="org"
      :searchData="searchData"
      :selectedData="selectedData"
      :realTimeSearch="true"
      cancelable
      mode="all"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      @search="onSearch($event, '')"
      @subordinate="onSubordinate($event, '')"
      @breadcrumb="onBreadcrumb($event, '')"
    />

    <p class="sub-title">
      slot footer 配合 control 使用
    </p>
    <h3-button
      type="primary"
      @click="
        org5 = currentorg;
        orgVisiable5 = true;
      "
    >
      转交(自主控制显示隐藏)
    </h3-button>
    <h3-org
      v-model="orgVisiable5"
      :data="org5"
      :searchData="searchData5"
      :selectedData="selectedData5"
      :realTimeSearch="true"
      control
      mode="all"
      @confirm="confirm"
      @search="onSearch($event, '5')"
      @subordinate="onSubordinate($event, '5')"
      @breadcrumb="onBreadcrumb($event, '5')"
    >
      <div v-if="showApproveContent" slot="footer" class="approve-transform">
        <div class="approve-transform-title">
          <span class="approve-transform-title-content">转交给：</span>
          <span>部门名称-人员名称</span>
          <span class="approve-transform-title-cancle" @click="showApproveContent = false">取消</span>
        </div>
        <div>
          <input type="text" />
        </div>
      </div>
    </h3-org> -->
  </div>
</template>
<script>
import H3Button from '@/components/h3-button/';
import H3Org from '@/components/h3-org/';

const avatarImg = `
http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20191031/0884b1f480ee47058c82c2a3cf6f84f6.jpeg`;

const orgList = [
  {
    id: 'CCs1',
    name: '奥哲',
    orglist: '奥哲',
    type: 'company',
  },
  {
    id: 'sC1',
    name: 'name1',
    orglist: '部门一/部门二',
    type: 'org',
  },
  {
    id: 's2CC',
    name: 'name2',
    orglist: '部门一/部门二',
    type: 'user',
    avatar: avatarImg,
  },
  {
    name: '组织1henchang陈很长的组织很长很长的组织很长很长的组织很长很胀的祖师',
    type: 'org',
    id: 'O1',
    hasChild: true,
  },
  {
    name: '组织3',
    type: 'org',
    id: 'O3',
    hasChild: true,
  },
  {
    name: '组织5',
    type: 'org',
    id: 'O5',
    hasChild: true,
  },
  {
    name: '组织7',
    type: 'org',
    id: 'O7',
    hasChild: true,
  },
  {
    name: '组织9',
    type: 'org',
    id: 'z9',
    hasChild: true,
  },
  {
    name: '组织11',
    type: 'org',
    id: 'z11',
    hasChild: true,
  },
  {
    name: '人员1',
    type: 'user',
    id: '8',
  },
  {
    name: '人员2',
    type: 'user',
    id: '9',
  },
  {
    name: '人员A',
    type: 'user',
    id: '10',
  },
  {
    name: '人员B',
    type: 'user',
    id: '111',
  },
  {
    name: '人员C',
    type: 'user',
    id: '112',
  },
  {
    name: '人员D',
    type: 'user',
    id: '113',
  },
  {
    name: '人员F',
    type: 'user',
    id: '114',
  },
  {
    name: '人员很差很难过很长的人员很长很长的人很差Hsia还算健康大使看到擦看见啥会计师d',
    type: 'user',
    id: '115',
  },
  {
    name: '人员E',
    type: 'user',
    id: '116',
  },
  {
    name: '人员很差很难过很长的人员很长很长的人很差Hsia还算健康大使看到擦看见啥会计师d',
    type: 'user',
    id: '117',
  },
  {
    name: '人员G',
    type: 'user',
    id: '118',
  },
  {
    name: '人员H',
    type: 'user',
    id: '119',
  },
  {
    name: '人员I',
    type: 'user',
    id: '120',
  },
  {
    name: '人员J',
    type: 'user',
    id: '121',
  },
  {
    name: '人员K',
    type: 'user',
    id: '122',
  },
  {
    name: '人员L',
    type: 'user',
    id: '123',
  },
  {
    name: '人员M',
    type: 'user',
    id: '124',
  },
  {
    name: '人员O',
    type: 'user',
    id: '125',
  },
  {
    name: '人员P',
    type: 'user',
    id: '126',
  },
  {
    name: '人员Q',
    type: 'user',
    id: '127',
  },
  {
    name: '人员R',
    type: 'user',
    id: '128',
  },
  {
    name: '人员S',
    type: 'user',
    id: '129',
  },
  {
    name: '人员T',
    type: 'user',
    id: '130',
  },
  {
    name: '人员U',
    type: 'user',
    id: '131',
  },
  {
    name: '人员V',
    type: 'user',
    id: '132',
  },
  {
    name: '人员W',
    type: 'user',
    id: '133',
  },
];
// const orgList2 = [];
const orgList2 = [
  {
    id: 'CCs1',
    name: '奥哲',
    orglist: '奥哲',
    type: 'org',
    hasChild: true,
  },
];

const orgList3 = [
  {
    id: 'sC1',
    name: 'name1',
    orglist: '部门一/部门二',
    type: 'org',
  },
  {
    id: 's2CC',
    name: 'name2',
    orglist: '部门一/部门二',
    type: 'user',
    avatar: avatarImg,
  },
  {
    name: '组织1henchang陈很长的组织很长很长的组织很长很长的组织很长很胀的祖师',
    type: 'org',
    id: 'O1',
    hasChild: true,
  },
  {
    name: '组织3',
    type: 'org',
    id: 'O3',
    hasChild: true,
  },
  {
    name: '组织5',
    type: 'org',
    id: 'O5',
    hasChild: true,
  },
  {
    name: '组织7',
    type: 'org',
    id: 'O7',
    hasChild: true,
  },
  {
    name: '组织9',
    type: 'org',
    id: 'z9',
    hasChild: true,
  },
  {
    name: '组织11',
    type: 'org',
    id: 'z11',
    hasChild: true,
  },
  {
    name: '人员1',
    type: 'user',
    id: '8',
  },
  {
    name: '人员2',
    type: 'user',
    id: '9',
  },
  {
    name: '人员A',
    type: 'user',
    id: '10',
  },
  {
    name: '人员B',
    type: 'user',
    id: '111',
  },
  {
    name: '人员C',
    type: 'user',
    id: '112',
  },
  {
    name: '人员D',
    type: 'user',
    id: '113',
  },
  {
    name: '人员F',
    type: 'user',
    id: '114',
  },
  {
    name: '人员很差很难过很长的人员很长很长的人很差Hsia还算健康大使看到擦看见啥会计师d',
    type: 'user',
    id: '115',
  },
  {
    name: '人员E',
    type: 'user',
    id: '116',
  },
  {
    name: '人员很差很难过很长的人员很长很长的人很差Hsia还算健康大使看到擦看见啥会计师d',
    type: 'user',
    id: '117',
  },
  {
    name: '人员G',
    type: 'user',
    id: '118',
  },
  {
    name: '人员H',
    type: 'user',
    id: '119',
  },
  {
    name: '人员I',
    type: 'user',
    id: '120',
  },
  {
    name: '人员J',
    type: 'user',
    id: '121',
  },
  {
    name: '人员K',
    type: 'user',
    id: '122',
  },
  {
    name: '人员L',
    type: 'user',
    id: '123',
  },
  {
    name: '人员M',
    type: 'user',
    id: '124',
  },
  {
    name: '人员O',
    type: 'user',
    id: '125',
  },
  {
    name: '人员P',
    type: 'user',
    id: '126',
  },
  {
    name: '人员Q',
    type: 'user',
    id: '127',
  },
  {
    name: '人员R',
    type: 'user',
    id: '128',
  },
  {
    name: '人员S',
    type: 'user',
    id: '129',
  },
  {
    name: '人员T',
    type: 'user',
    id: '130',
  },
  {
    name: '人员U',
    type: 'user',
    id: '131',
  },
  {
    name: '人员V',
    type: 'user',
    id: '132',
  },
  {
    name: '人员W',
    type: 'user',
    id: '133',
  },
];

export default {
  name: 'H3UserDemo',
  components: {
    H3Org,
    H3OrgSelector: H3Org.Selector,
    H3Button,
  },
  props: {},
  data () {
    return {
      orgVisiable0: false,
      orgVisiable: false,
      orgVisiable1: false,
      orgVisiable2: false,
      orgVisiable3: false,
      orgVisiable4: false,
      orgVisiable5: false,
      orgVisiable6: false,
      showApproveContent: false,
      searchDataA: [],
      searchData0: [],
      searchData: [],
      searchData1: [],
      searchData2: [],
      searchData3: [],
      searchData4: [],
      searchData5: [],
      searchData6: [],
      selectedDataA: [
        // {
        //   id: 'sC1',
        //   name: 'name1',
        //   orglist: '部门一/部门二',
        //   type: 'org',
        // },
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: avatarImg,
        },
      ],
      selectedData0: [
        {
          id: 'sC1',
          name: 'name1',
          orglist: '部门一/部门二',
          type: 'org',
        },
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: avatarImg,
        },
      ],
      selectedData: [
        {
          id: 'sC1',
          name: 'name1',
          orglist: '部门一/部门二',
          type: 'org',
        },
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: avatarImg,
        },
      ],
      selectedData1: [
        {
          id: 'sC1',
          name: 'name1',
          orglist: '部门一/部门二',
          type: 'org',
        },
      ],
      selectedData2: [
        {
          id: 'sC1',
          name: 'name1',
          orglist: '部门一/部门二',
          type: 'org',
        },
      ],
      selectedData3: [
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: avatarImg,
        },
      ],
      selectedData4: [
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: avatarImg,
        },
      ],
      selectedData5: [
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: avatarImg,
        },
      ],
      selectedData6: [
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: avatarImg,
        },
      ],
      orgA: orgList2,
      org0: [],
      org: [],
      org1: [],
      org2: [],
      org3: [],
      org4: [],
      org5: [],
      org6: [],
      currentorg: orgList,
      showModel: false,
      searchTimer: null,

      showSearchEmptyA: false,
      showSearchEmpty1: false,
      showSearchEmpty2: false,
      showSearchEmpty3: false,
      showSearchEmpty4: false,
      showSearchEmpty6: false,
    };
  },
  mounted () {},
  methods: {
    onClick (item) {
      console.log('onClick', item);
    },
    onSearch (pars, suffix, mode) {
      clearTimeout(this.searchTimer);
      if (!pars) {
        return;
      }

      this.searchTimer = setTimeout(() => {
        clearTimeout(this.searchTimer);
        if (pars.length > 5) {
          this[`searchData${suffix}`] = [];
          this[`showSearchEmpty${suffix}`] = true;
          return;
        }
        this[`showSearchEmpty${suffix}`] = false;
        if (mode === 'user') {
          this[`searchData${suffix}`] = [
            {
              name: `人员V-${pars}`,
              type: 'user',
              id: `132-${pars}`,
              orglist: '根目录-一级部门',
            },
            {
              name: `人员W-${pars}`,
              type: 'user',
              id: `133-${pars}`,
              orglist: '根目录-一级部门',
            },
          ];
        }
        if (mode === 'org') {
          this[`searchData${suffix}`] = [
            {
              id: 'sC1',
              name: 'name1',
              orglist: '根目录-一级部门',
              type: 'org',
            },
            {
              id: 'O3',
              name: '组织3',
              type: 'org',
              orglist: '根目录-一级部门',
              hasChild: true,
            },
          ];
        }
      }, 1000);
    },
    updateShow (val) {
      this.showModel = val;
    },
    onSubordinate (params, suffix) {
      console.log('onSubordinate', params);
      if (suffix === 'A') {
        if (params.id === 'CCs1') {
          this[`org${suffix}`] = orgList3;
          return;
        }
      }
      this[`org${suffix}`] = [
        {
          id: 's111',
          name: 'name222SD',
          type: 'user',
        },
        {
          name: '组织21',
          type: 'org',
          id: '21111',
        },
      ];
    },
    onBreadcrumb (params, suffix) {
      if (suffix === 'A') {
        if (params.id === 'ORG_DEFAULT_TOP_NAVIGATION') {
          this[`org${suffix}`] = orgList2;
        } else if (params.id === 'CCs1') {
          this[`org${suffix}`] = orgList3;
        }
        return;
      }
      console.log('onBreadcrumb', params);
      this[`org${suffix}`] = this.currentorg;
    },
    confirm (params) {
      if (!this.showApproveContent) {
        this.showApproveContent = true;
        return;
      }
      this.selectedData = params;
      this.showApproveContent = false;
      this.orgVisiable5 = false;
    },
    handleConfirm (params) {
      console.log(params);
    },
    handleCancel () {
      console.log('取消');
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  // padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
  .org-selector-demo {
    height: 400px;
  }
}

.approve-transform {
  &-title {
    padding: 15px 0;
    font-size: 15px;
    &-content {
      font-weight: bold;
    }
    &-cancle {
      float: right;
      color: #2970ff;
    }
  }
  input {
    width: 100%;
    height: 64px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    border: 1px solid rgba(226, 226, 226, 1);
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的组织选择组件规范修改相关样式

若要做迁移请参考

1. 新增的props：showSearchEmpty
2. 废弃Props mode 为 all 类型

API

Prop H3Org

参数	说明	类型	默认值
visible	手动展示或关闭选人控件，v-model绑定值	boolean	false
mask	是否显示遮罩	boolean	true
safeAreaInsetTop	上方的安全高度	String|Number	0
cancelable	是否允许取消	boolean	true
control	是否自主控制显示隐藏，若为true，则需要在 evnet:confirm evnet:cancel 事件中控制 visible 的值为false	boolean	false
mode	org user，控件选择类型	string	-
data	组织数据源	Array<orgItem>	[]
searchData	搜索结果数据源	Array<orgItem>	[]
selectedData	已选择的数据	Array<orgItem>	[]
realTimeSearch	是否实时搜索	boolean	true
locale	语言包	stringzh or en	zh
mulpitle	是否支持多选	boolean	true
limit	多选下即mulpitle=true，限制选择上限	number
auto	限制上限生效即limit=true，是否自动取消之前选中的一个，勾选当前一个	boolean	false
allowRecursion	是否允许递归 即选择部门后是否允许再点击下级	boolean	true
topNavigation	若数据中没有type: company的类型时，会默认内置一个顶级导航。修改该值来改变默认提示名	string	选择
showSearchEmpty	是否显示搜索空白	boolean	false

• orgItem 配置项

参数	说明	类型	示例
id	唯一标志	string	-
name	名称	string	某某部门
type	人员还是部门,类型 org/user/company company 为特殊类型，所有部门归于该类型下	string	org
hasChild	部门 Item 是否有下级	boolean	false
avatar	人员 Item 头像	string
orglist	搜索结果的部门序列	string	'研发中心/前端研发部'

Event H3Org

事件名称	说明	回调参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	-
hide	关闭时回调	-
search	点击搜索事件	Function(searchKey：string)
confirm	点击确认按钮事件(返回当前被选中序列)	Function(selectedList: Array<orgItem>)
cancel	点击取消按钮事件	Function()
breadcrumb	点击面包屑 Item 返回事件	Function(item: orgItem)
subordinate	点击下级事件	Function(item: orgItem)
outLimit	限制上限生效即limit=true，如果选项超过限制是触发事件	Function(selectedList:Array<orgItem>)

Prop H3OrgSelector

参数	说明	类型	默认值
value	已选择的数据，v-model绑定值	Array<orgItem>	[]
data	组织数据源	Array<orgItem>	[]
mode	org user，控件选择类型	string	-
searchData	搜索结果数据源	Array<orgItem>	[]
realTimeSearch	是否实时搜索	boolean	true
locale	语言包	stringzh or en	zh
mulpitle	是否支持多选	boolean	true
limit	多选下即mulpitle=true，限制选择上限	number
auto	限制上限生效即limit=true，是否自动取消之前选中的一个，勾选当前一个	boolean	false
allowRecursion	是否允许递归 即选择部门后是否允许再点击下级	boolean	true
showSearchEmpty	是否显示搜索空白	boolean	false
selectable	是否支持选择，目前只支持人员	boolean	true
placeholder	搜索框placeholder	string	''

Event H3OrgSelector

事件名称	说明	回调参数
change	选择改变时触发，v-model绑定事件	Function(selectedList: Array<orgItem>)
search	点击搜索事件	Function(searchKey：string)
confirm	点击确认按钮事件(返回当前被选中序列)	Function(selectedList: Array<orgItem>)
cancel	点击取消按钮事件	Function()
breadcrumb	点击面包屑 Item 返回事件	Function(item: orgItem)
subordinate	点击下级事件	Function(item: orgItem)
outLimit	限制上限生效即limit=true，如果选项超过限制是触发事件	Function(selectedList:Array<orgItem>)

Slots H3OrgSelector

参数	说明
searchEmpty	搜索空区域插槽
listEmpty	空列表插槽