vue3+antd 使用 form-create 的 生成自定义表单组件 （树形下拉框）

简介： 项目中有一些效果，form-create中的组件达不到效果，所以需要使用自定义表单组件

 form-create  api:生成自定义表单组件 | form-create

 1.RankList.vue 部分代码 使用rankFormRule规则

<template>
    <form-create :rule="rankFormRule" v-model="fApi" :option="options"/>
</template>
<script lang="ts" setup>
import { rankFormOption } from './rankForm';
const rankFormRule= computed(() => rankFormOption(rankList.value, regionalBlurValidator));
const rankList = ref([
  {
    children: [
      {
        children: [
          {
            description: '经理描述',
            key: '111-1-1',
            name: '经理',
            originData: '111-1-1',
            parentKey: '111-1',
          },
        ],
        description: '部门主管描述',
        key: '111-1',
        name: '部门主管',
        originData: '111-1',
        parentKey: '111',
      },
    ],
    description: '项目经理',
    key: '111',
    name: '项目经理',
    originData: '1111',
    parentKey: '',
  },
]);
//职级名称验证是否重复
const regionalBlurValidator = () => {
      //todo 机构角色组名称验证 返回Promise
  return Promise.resolve('');
};
</script>

2.rankForm.ts  引用自定义表单组件TreeSelect

import TreeSelect from './TreeSelect.vue';
export function rankFormOption(treeDate: org.Tree<string>[], regionalBlurValidator: any) {
  return [
    {    //自定义树形下拉框
      type: 'select',
      field: 'parentKey',
      title: '上级职级',
      component: TreeSelect, //挂载自定义组件
      props: {
        treeData: treeDate, //传递绑定的数据
        fieldNames: { children: 'children', label: 'name', value: 'key' },//处理显示的值
      },
    },
    {
      type: 'input',
      field: 'name',
      title: '职级名称',
      info: '',
      props: {
        type: 'text',
        clearable: true,
        placeholder: '请输入部门名称',
      },
      _fc_drag_tag: 'input',
      hidden: false,
      display: true,
      $required: '请输入部门名称',
      validate: [
        {
          trigger: 'change',
          mode: 'required',
          message: '请输入部门名称',
          required: true,
          type: 'string',
        },
        {
          trigger: 'change',
          mode: 'pattern',
          message: '支持中英文数字及常用特殊字符(特殊字符还没弄)',
          pattern: '^[\\u4e00-\\u9fa5_a-zA-Z0-9]+$',
          type: 'string',
        },
        {
          trigger: 'blur',
          validator: regionalBlurValidator, //验证名字是否重复
        },
      ],
    },
  ];
}

3.TreeSelect.vue 自定义表单组件

<template>
  <a-tree-select
    v-model:searchValue="searchValue"
    :value="modelValue"
    style="width: 100%"
    tree-default-expand-all
    :field-names="fieldNames"
    :height="300"
    :tree-data="tree"
    allow-clear
    tree-line
    :disabled="disabled"
    show-search
    placeholder="请选择"
    @change="onChange"
  ></a-tree-select>
</template>
<script lang="ts" setup>
import { utils } from '@/utils'; //树的搜索自定义方法
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  disabled: { type: Boolean, default: false },
  treeData: {
    type: Array,
    default: () => {
      return [];
    },
  },
  fieldNames: {
    type: Object as () => { children?: string; label?: string; value?: string },
    default: () => {
      return { children: 'children', label: 'title', value: 'value' };
    },
  },
});
const emit = defineEmits(['update:modelValue']);
const searchValue = ref('');
//树的搜索
const tree = computed(() => {
  let nameValue = props.fieldNames.label ? props.fieldNames.label : 'title'; //默认搜索查询字段为title
  return utils.treeUtils.treeFilter(props.treeData, item =>
    item[nameValue].includes(searchValue.value),
  );
});
//选中值
const onChange = (value: string) => {
  console.log('val', value);
  emit('update:modelValue', value);
};
</script>

<style lang="less" scoped></style>