JSelectDept部门选择 ✔

---

参数定义

参数	类型	是否必填	默认值	说明
value	[String,Array]	否	无	回显值
showButton	Boolean	否	true	是否显示选择按钮
disabled	Boolean	否	false	是否禁用
rowKey	String	否	key	取值字段配置,一般为主键字段
labelKey	String	否	title	显示字段配置
defaultExpandLevel	String	否	0	初始展开层级
checkStrictly	Boolean	否	false	父子节点选中状态不再关联
checkable	Boolean	否	true	是否显示复选框
startPid	String	否	-	根节点初始值（serverTreeData不开启服务端数据转换时使用）
primaryKey	String	否	id	主键字段
parentKey	String	否	parentId	父ID字段
titleKey	String	否	title	tree节点显示文本字段
serverTreeData	Boolean	否	true	是否开启服务端数据转换
sync	Boolean	否	true	是否开启异步加载数据
multiple	Boolean		true	v1.1.0 是否允许多选
modalTitle	String	否	部门选择	选择框标题

事件定义

事件名	参数	说明
getSelectResult	options, values	确认选择回调，单独使用选择框中使用该事件获取选中值

tree要求的数据格式

[{
        "key": "1",
        "title": "节点1",
        "children":[
             {
                   key:"1-1",
                   title:"子节点",
                   children:[]
             }
        ]
    },{
        "key": "2",
        "departName": "节点2",
       "children":[]    
    }
]

使用示例

BaseForm中使用示例

{
    field: 'user2',
    component: 'JSelectDept',
    label: '选择示例',
    helpMessage: ['component模式'],
    componentProps:{
        labelKey:'departName',
        rowKey:'orgCode'
    }
}

插槽中使用示例

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

单独使用示例

<template>
<a-button type="primary" preIcon="ant-design:plus-outlined" @click="openHandle">选择</a-button>
<DeptSelectModal rowKey="id" @register="registerSelModal" @getSelectResult="onSelectOk"/>
</template>
<script lang="ts" setup>
    import DeptSelectModalfrom '/@/components/Form/src/jeecg/components/modal/DeptSelectModal.vue'
     // 注册选择框
    const [registerSelModal, {openModal}] = useModal()
    let selectValues = reactive<Recordable>({
     //附值value
      value: [],
    });
    //下发 selectValues
    provide('selectValues', selectValues);
    // 打开选择框
    function openHandle() {
        openModal()；
    }
    // 选择确认事件
    function onSelectOk(selectRows, selectKeys) {
      //处理业务逻辑
   }
</script>

前端转换tree数据结构

如下数据所示，后台返回的数据结构不是树形的但是必须的含有parentId，此时需要设置serverTreeData=false，开启前端转换为tree结构数据，并指定titleKey为departName,primaryKey为deptId，parentKey为parentId

[{
        "deptId": "1",
        "parentId": "",
        "departName": "节点1",
    },{
        "deptId": "2",
        "parentId": "",
        "departName": "节点2",
    }
]

代码示例

{
  label: '所属部门',
  field: 'selecteddeparts',
  component: 'JSelectDept',
  componentProps:({formActionType,formModel}) => {
      return {
          titleKey:"departName",
          primaryKey:"id",
          parentKey:"parentId",
          serverTreeData:false
      }
  }
}

开启异步加载

当数据量过大时，我们希望tree是异步加载，此时可设置sync:true开启异步加载，如果数据结构不符合需要开启前端转换tree结构数据 代码示例

{
  label: '所属部门',
  field: 'selecteddeparts',
  component: 'JSelectDept',
  componentProps:({formActionType,formModel}) => {
      return {
          sync:true
      }
  }
}