FormDesign

基础用法

View Source

<script setup lang="ts">
import type { Resource } from './types'

import { ref } from 'vue'

import { form } from './resources'
import { SwitchSetter } from './setters'
import { base, groupList as defaultGroupList } from './options'

const option = ref({})

const filesDic = [
  { name: 'createTime', comment: '操作时间' },
  { name: 'createBy', comment: '操作人' },
]

// 扩展基础配置
function baseOption(context: any) {
  const defaultBaseOption = base(context)
  const commonOption = { type: 'select', dicData: filesDic, filterable: true, allowCreate: true, defaultFirstOption: true }
  return [
    // 为字段标识增加可选项
    { ...commonOption, props: { label: 'name', value: 'name', desc: 'comment' } },
    // 为字段标题增加可选项
    { ...commonOption, props: { label: 'comment', value: 'comment', desc: 'name' } },
    // 最后添加一个样式类
    ...Array.from({ length: (defaultBaseOption?.length ?? 0) - 2 })
      .fill({}).concat({ label: '样式类', prop: 'class' }),
  ]
}

// 扩展物料库
const resources: Record<string, Resource> = {
  // 给表单增加一个样式类的配置
  form: {
    settings: Array.from({ length: form.settings?.length ?? 0 })
      .fill({}).concat({ label: '样式类', prop: 'class' }),
  } as Resource,
  // 自定义组件,基于el-text封装(@yusui/components/v-text)
  customText: {
    name: 'customText',
    title: '自定义文本',
    icon: 'el-icon-minus',
    group: '自定义分组',
    props: { label: '自定义文本', component: 'v-text', value: '这是一个自定义文本', type: 'primary' },
    settings: [
      {
        label: '显示内容',
        prop: 'value',
        type: 'textarea',
      },
      {
        label: '显示类型',
        prop: 'type',
        type: 'select',
        dicData: [
          { label: 'primary', value: 'primary' },
          { label: 'success', value: 'success' },
          { label: 'warning', value: 'warning' },
          { label: 'danger', value: 'danger' },
          { label: 'info', value: 'info' },
        ],
      },
      {
        label: '显示省略号',
        prop: 'truncated',
        component: SwitchSetter,
      },
      {
        label: '自定义元素标签',
        prop: 'tag',
        labelWidth: 120,
      },
    ],
  },
  customContainer: {
    name: 'customContainer',
    title: '自定义容器',
    icon: 'el-icon-folder',
    group: '自定义分组',
    isContainer: true,
    props: { label: '自定义容器' },
  },
}

const groupList = ['自定义分组', ...defaultGroupList]
</script>

<template>
  <FormDesign
    v-model="option" :base-option="baseOption" :resources="resources" :group-list="groupList"
    style="height: 800px"
  />
</template>

属性

名称	说明	类型	可选值	默认值
v-model	绑定的值	AvueFormOpition	-	-
groupList	左侧分组,可以用来修改排序或显示状态	string[]	-	-
resources	定义物料库及其可配置项	Record<string,Resource>	-	-
baseOption	定义选中组件时右侧的基础配置	Resource['settings']	-	-
advanceOption	定义选中组件时右侧的高级配置	Resource['settings']	-	-
leftWidth	左侧宽度	string	-	200px
rightWidth	右侧宽度	string	-	200px
adapterIn	输入格式化	(option: AvueFormOption) => ElementTreeNode	-	adapterIn
adapterOut	输出格式化	(tree: ElementTreeNode) => AvueFormOption	-	adapterOut

Resource

名称	说明	类型	可选值	默认值
name	组件定义名称(唯一)	string	-	-
title	组件中文名称	string	-	-
icon	组件图标	string	-	-
description	组件描述	string	-	-
docUrl	文档链接	string	-	-
keywords	组件关键词,用于搜索联想	string	-	-
group	用于描述组件位于组件面板哪个分组	string	-	-
priority	用于描述组件在同一分组中的排序	number	-	-
isContainer	用于描述组件是否为容器(如子表单)	boolean	-	-
designOption	设计面板渲染配置	AvueFormOption | Function	-	-
disabled	禁用组件，将不会出现在组件面板中	boolean	-	-
disabledActions	设计面板中禁用复制、删除等动作	DesignAction[]	-	-
disabledSettings	属性面板中禁用的设置	string[]	-	-
props	配置面板的默认值	boolean	-	-
settings	配置面板	AvueFormColumn[] | Function		-
rules	拖放规则		-	-

类型定义

Details

export * from './design'
export * from './props'
export * from './state'