Org 组织选择

使用指南

用于选择部门或者人员的组件。

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      h3-org-selector 组件
    </p>
    <div class="org-selector-demo">
      <h3-org-selector
        v-model="selectedDataA"
        :data="orgA"
        :searchData="searchDataA"
        :realTimeSearch="true"
        mode="all"
        @confirm="handleConfirm"
        @search="onSearch($event, 'A')"
        @subordinate="onSubordinate($event, 'A')"
        @breadcrumb="onBreadcrumb($event, 'A')"
      />
    </div>
    <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">
      单选部门
    </p>
    <h3-button
      type="primary"
      @click="
        org1 = currentorg;
        orgVisiable1 = true;
      "
    >
      单选部门
    </h3-button>
    <h3-org
      v-model="orgVisiable1"
      :data="org1"
      :searchData="searchData1"
      :selectedData="selectedData1"
      :realTimeSearch="true"
      :mulpitle="false"
      mode="org"
      @confirm="handleConfirm"
      @search="onSearch($event, '1')"
      @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"
      :selectedData="selectedData2"
      :realTimeSearch="true"
      mode="org"
      @confirm="handleConfirm"
      @search="onSearch($event, '2')"
      @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"
      :selectedData="selectedData3"
      :realTimeSearch="true"
      :mulpitle="false"
      mode="user"
      @confirm="handleConfirm"
      @search="onSearch($event, '3')"
      @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"
      :selectedData="selectedData4"
      :realTimeSearch="true"
      mode="user"
      @confirm="handleConfirm"
      @search="onSearch($event, '4')"
      @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"
      :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">
      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 orgList = [
  {
    id: 'CCs1',
    name: '奥哲',
    orglist: '奥哲',
    type: 'company',
  },
  {
    id: 'sC1',
    name: 'name1',
    orglist: '部门一/部门二',
    type: 'org',
  },
  {
    id: 's2CC',
    name: 'name2',
    orglist: '部门一/部门二',
    type: 'user',
    avatar: 'https://cn.vuejs.org/images/logo.png',
  },
  {
    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 = [
  {
    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: 'https://cn.vuejs.org/images/logo.png',
  },
  {
    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: 'https://cn.vuejs.org/images/logo.png',
        },
      ],
      selectedData0: [
        {
          id: 'sC1',
          name: 'name1',
          orglist: '部门一/部门二',
          type: 'org',
        },
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: 'https://cn.vuejs.org/images/logo.png',
        },
      ],
      selectedData: [
        {
          id: 'sC1',
          name: 'name1',
          orglist: '部门一/部门二',
          type: 'org',
        },
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: 'https://cn.vuejs.org/images/logo.png',
        },
      ],
      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: 'https://cn.vuejs.org/images/logo.png',
        },
      ],
      selectedData4: [
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: 'https://cn.vuejs.org/images/logo.png',
        },
      ],
      selectedData5: [
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: 'https://cn.vuejs.org/images/logo.png',
        },
      ],
      selectedData6: [
        {
          id: 's2CC',
          name: 'name2',
          orglist: '部门一/部门二',
          type: 'user',
          avatar: 'https://cn.vuejs.org/images/logo.png',
        },
      ],
      orgA: orgList2,
      org0: [],
      org: [],
      org1: [],
      org2: [],
      org3: [],
      org4: [],
      org5: [],
      org6: [],
      currentorg: orgList,
      showModel: false,
      searchTimer: null,
    };
  },
  mounted () {},
  methods: {
    onSearch (pars, suffix) {
      console.log(pars);
      clearTimeout(this.searchTimer);
      if (!pars) {
        return;
      }

      this.searchTimer = setTimeout(() => {
        clearTimeout(this.searchTimer);
        if (pars.length > 5) {
          this[`searchData${suffix}`] = [];
          return;
        }
        this[`searchData${suffix}`] = [
          {
            id: 'sC1',
            name: 'name1',
            orglist: '部门一/部门二',
            type: 'org',
          },
          {
            id: 'O3',
            name: '组织3',
            type: 'org',
            orglist: '部门一/部门二',
            hasChild: true,
          },
          {
            name: `人员V-${pars}`,
            type: 'user',
            id: `132-${pars}`,
          },
          {
            name: `人员W-${pars}`,
            type: 'user',
            id: `133-${pars}`,
          },
        ];
      }, 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>

与h3-mobile-vue组件的区别以及迁移

旧组件库org组件与list及field组件过于耦合，因此新组件单独做成一个纯粹的弹窗式的组件。

同时也提取出一个单独的h3-org-selector组件便于业务集成

若要做迁移请参考

1. 弃用的props：prefixCls prefixStyle selectStyle useDefaultIcon hasExtra showSelect showModel title placeholder orgName selectPlaceholder value selectUser selectOrg beforeConfirm

2. 替换的props：

   • org => data
   • isMulpitle => mulpitle
   • showModel => visible

3. 新增的props：mode cancel control limit auto

API

Prop H3Org

参数	说明	类型	默认值
visible	手动展示或关闭选人控件，v-model绑定值	boolean	false
mask	是否显示遮罩	boolean	true
safeAreaInsetTop	上方的安全高度	String|Number	0
cancelable	是否允许取消	boolean	false
control	是否自主控制显示隐藏，若为true，则需要在 evnet:confirm evnet:cancel 事件中控制 visible 的值为false	boolean	false
mode	all org user，控件选择类型	string	all
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	选择

• 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	all org user，控件选择类型	string	all
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

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>)