**JSelectDept部门选择框** ***** [TOC] ## 参数定义 | 参数 | 类型 | 是否必填 | 默认值 | 说明 | | --- | --- | --- | --- | --- | | 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` 是否允许多选 | | ~~params~~ | String | 否 | \- | ~~自定义查询参数，需要传递字符串，如：params:**'{"orgCode":"A01"}'**~~ | | 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 } } } ```