JSelectDeptPost部门岗位选择 ✔

---

参数定义

参数	类型	是否必填	默认值	说明
value	[String,Array]	否	无	回显值
showButton	Boolean	否	true	是否显示选择按钮
disabled	Boolean	否	false	是否禁用
rowKey	String	否	key	取值字段配置,一般为主键字段
labelKey	String	否	title	显示字段配置
defaultExpandLevel	String	否	1	初始展开层级
checkable	Boolean	否	true	是否显示复选框
startPid	String	否	-	根节点初始值（serverTreeData不开启服务端数据转换时使用）
primaryKey	String	否	id	主键字段
parentKey	String	否	parentId	父ID字段
titleKey	String	否	title	tree节点显示文本字段
serverTreeData	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: 'depart4',
    component: 'JSelectDepartPost',
    label: '选择岗位',
    componentProps: { showButton: false },
    colProps: {
      span: 12,
    },
},

插槽中使用示例

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

单独使用示例

<template>
  <a-button type="primary" preIcon="ant-design:plus-outlined" @click="openHandle">选择</a-button>
  <DeptSelectModal iz-only-select-depart-post modalTitle="部门岗位选择" rowKey="id" @register="registerSelModal" @getSelectResult="onSelectOk"/>
</template>
<script lang="ts" setup>
  import { useModal } from "@/components/Modal";
  import DeptSelectModal from '/@/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) {
    //处理业务逻辑
    console.log(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: 'JSelectDepartPost',
  component: 'JSelectDept',
  componentProps:({formActionType,formModel}) => {
      return {
          titleKey:"departName",
          primaryKey:"id",
          parentKey:"parentId",
          serverTreeData:false
      }
  }
}