流程表单信息部门机构树选择

run.bat

@@ -0,0 +1,2 @@
+title Ç°¶Ë·þÎñ
+npm run dev

src/components/FormCreate/src/components/DeptTreeSelect.vue

@@ -0,0 +1,50 @@
+<template>
+  <el-tree-select
+    v-bind="attrs"
+    :data="deptList"
+    :props="defaultProps"
+    check-strictly
+    node-key="id"
+    placeholder="请选择"
+    :multiple="multiple"
+    :show-checkbox="showCheckbox"
+    :filterable="filterable"
+    :clearable="clearable"
+  />
+</template>
+
+<script lang="ts" setup>
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+
+defineOptions({ name: 'DeptTreeSelect' })
+
+const attrs = useAttrs()
+
+// 接受父组件参数
+interface Props {
+  multiple: boolean, //是否多选
+  showCheckbox: boolean, //是否多选
+  filterable:boolean, //是否允许搜索
+  formCreateInject?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+   multiple: false,
+   showCheckbox: false,
+   filterable:false,
+   clearable:false
+})
+
+ 
+const deptList = ref<Tree[]>([]) // 树形结构
+onMounted(async () => {
+  console.log('Props',props)
+  const data = await DeptApi.getSimpleDeptList()	//1.调用后端接口获取数据
+  if (!data || data.length === 0) {
+    return
+  }
+  deptList.value = handleTree(data)
+})
+
+</script>

src/components/FormCreate/src/config/index.ts

@@ -2,6 +2,7 @@ import { useUploadFileRule } from './useUploadFileRule'
 import { useUploadImgRule } from './useUploadImgRule'
 import { useUploadImgsRule } from './useUploadImgsRule'
 import { useDictSelectRule } from './useDictSelectRule'
+import { useDeptTreeSelectRule } from './useDeptTreeSelectRule'
 import { useEditorRule } from './useEditorRule'
 import { useSelectRule } from './useSelectRule'
 
@@ -10,6 +11,7 @@ export {
   useUploadImgRule,
   useUploadImgsRule,
   useDictSelectRule,
+  useDeptTreeSelectRule,
   useEditorRule,
   useSelectRule
 }

src/components/FormCreate/src/config/useDeptTreeSelectRule.ts

@@ -0,0 +1,36 @@
+import { generateUUID } from '@/utils'
+import { localeProps, makeRequiredRule } from '@/components/FormCreate/src/utils'
+import { selectRule } from '@/components/FormCreate/src/config/selectRule'
+import { cloneDeep } from 'lodash-es'
+
+/**
+ * 部门树选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
+ */
+export const useDeptTreeSelectRule = () => {
+  const label = '部门树选择'
+  const name = 'DeptTreeSelect'
+  const event = ['click','change','visibleChange','clear','blur','focus']
+  const rules = cloneDeep(selectRule)
+  return {
+    icon: 'icon-doc-text',
+    label,
+    name,
+    event: event,
+    rule() {
+      return {
+        type: name,
+        field: generateUUID(),
+        title: label,
+        info: '',
+        $required: false
+      }
+    },
+    props(_, { t }) {
+      return localeProps(t, name + '.props', [
+        makeRequiredRule(),
+        { type: 'switch', field: 'showCheckbox', title: '是否显示复选框' },
+        ...rules
+      ])
+    }
+  }
+}