选择部门/人员组件

使用组件

安装依赖

npm install @moment-design/choose-dp --save

使用组件

<template>
  <div style="margin-bottom: 16px">
    <m-space>
      <m-button type="primary" @click="handleD">选择部门</m-button>
      <m-button type="primary" @click="handleP">选择员工</m-button>
    </m-space>

    <!-- 已选数据 -->
    <div>
      <div style="margin-top: 16px">部门数据：{{ dataD }}</div>
      <div style="margin-top: 16px">员工数据：{{ dataP }}</div>
    </div>

    <!-- 选择部门 -->
    <ChooseDp
      ref="refLChooseDpD"
      :config="configD"
      @check="checkD"
    ></ChooseDp>

    <!-- 选择员工 -->
    <ChooseDp
      ref="refLChooseDpP"
      :config="configP"
      @check="checkP"
    ></ChooseDp>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ChooseDp from '../index.vue';
import { getAccountUserList } from './api';

export default defineComponent({
  name: 'LDemo',
  components: {
    ChooseDp,
  },
  props: {},
  setup() {
    const refLChooseDpD = ref();
    const refLChooseDpP = ref();
    const dataD = ref();
    const dataP = ref();
    const configD = {

    };
    const configP = {
      api: getAccountUserList,
      type: 'p',
      data: [

      ],
      max: 3,
    };

    const handleD = () => refLChooseDpD.value.open();
    const handleP = () => refLChooseDpP.value.open();

    const checkD = (data: any) => (dataD.value = data);
    const checkP = (data: any) => (dataP.value = data);

    return {
      refLChooseDpD,
      refLChooseDpP,
      dataD,
      dataP,
      configD,
      configP,
      checkD,
      checkP,
      handleD,
      handleP,
    };
  },
});
</script>

Interface

export interface IChooseDp {
  api: any;
  type: 'd' | 'p';
  data?: Array<any>;
  max?: number;
}

API

Props

| 参数名 | 描述 | 类型 | 默认值 | | ------ | ------------ | ---------------- | ------ | | api | 接口 | any | - | | type | 选择类型 | d: 部门, p: 员工 | - | | lable | 自定义显示 | string | - | | data | 默认数据 | Array | - | | max | 最大选择数量 | number | - | | strictlyVisible | 级联关系是否显示 | number | true | | checkStrictly | 级联关系是否勾选 | number | true | | resignVisible | 离职人员是否显示 | number | true | | resign | 离职人员是否勾选 | number | false |

Events

| 事件名 | 描述 | 参数 | | ------ | -------- | -------------- | | check | 选中的值 | (datas: any[]) |

Expose

| 事件名 | 描述 | 参数 | | ------ | ------------ | ---- | | open | 主动触发打开 | - |