JSelectUserByDeptPost 根据部门岗位选择用户 ✔

参数定义

参数	类型	是否可选	默认值	说明
value	[String,Array]	否	无	回显值
showButton	Boolean	否	true	是否显示选择按钮
disabled	Boolean	否	false	是否禁用
rowKey	String	否	username	取值字段配置,一般为主键字段
labelKey	String	否	realname	显示字段配置
modalTitle	String	否	用户选择	选择框标题

事件定义

事件名	说明
onChange	选中的值改变的时候触发

效果展示

使用示例

1.选择框在BaseForm中使用示例：

  {
    field: 'userPost1',
    component: 'JSelectUserByDeptPost',
    label: '部门岗位选择用户',
    componentProps: {
      labelKey: 'realname',
      rowKey: 'username',
    },
    colProps: {
      span: 12,
    },
  },

2.选择框在插槽中使用示例

<template #JSelectUserByDeptPost="{ model, field }">
  <JSelectUserByDeptPost v-model:value="model[field]"/>
</template>

3.选择框单独使用示例

<template>
  <a-button type="primary" preIcon="ant-design:plus-outlined" @click="openHandle">选择</a-button>
  <UserSelectByDepPostModal rowKey="id" @register="registerUserDeptModal" @getSelectResult="onSelectOk"/>
</template>
<script lang="ts" setup>
  import UserSelectByDepPostModal from '/@/components/Form/src/jeecg/components/modal/UserSelectByDepPostModal.vue'
  import { useModal } from "@/components/Modal";

  // 注册用户选择框
  const [registerUserDeptModal, { openModal }] = useModal()

  // 打开用户选择框
  function openHandle() {
    openModal(true, {
      isUpdate: false,
    });
  }
  // 选择用户成功
  function onSelectOk(selectRows, selectKeys) {
    //处理业务逻辑
    console.log("selectRows:::",selectRows);
    console.log("selectKeys:::",selectKeys);
  }
</script>