CondorLayerForm

CondorLayerForm 弹窗表单组件，集成了栅格布局、表单验证、动态表单字段等功能。该组件通过弹窗形式展示表单，支持拖拽、自定义布局和表单验证。

组件 Props

参数名	类型	默认值	说明
isDraggable	boolean	true	弹窗是否可拖拽
width	string / number	'800px'	弹窗宽度
cancelText	string	$t('common.cancel')	取消按钮文本（支持国际化）
subBtuText	string	$t('common.confirm')	提交按钮文本（支持国际化）
columns	any[]	-	必需 表单字段配置数组
formLabelWidth	string / number	'100px'	表单标签宽度
colSpan	number	24	栅格默认列数
urls	any	-	必需 表单提交的URL配置

组件事件

事件名	说明	参数
onOk	点击确定按钮时触发	-
onClose	弹窗关闭时触发	-

暴露的方法

组件通过 defineExpose 暴露以下方法：

方法名	说明	参数
open	打开弹窗并设置表单初始值	value: any - 表单初始数据
setForm	设置表单数据	data: any - 要设置的表单数据

插槽

插槽名	说明	作用域参数
form	自定义整个表单内容	-
form-$	针对每个字段的自定义渲染插槽	{ form } - 当前表单数据

表单字段配置 (columns)

columns 数组中的每个对象代表一个表单字段，支持以下配置：

属性名	类型	说明
key	string	必需 字段键名
title	string / Function	字段标签，可以是字符串或函数（接收form参数）
span	number	栅格列数，默认使用colSpan
tips	string / Function	字段提示信息
condition	Function	显示条件函数，返回布尔值决定是否显示该字段
type	string	字段类型，用于CondorFormItem组件
...其他(Naive UI)	-	其他传递给CondorFormItem的配置

基础用法

1. 基本表单弹窗

<template>
  <div>
    <NButton @click="openForm">添加用户</NButton>
    <CondorLayerForm
      ref="formRef"
      :columns="formColumns"
      :urls="formUrls"
      @onOk="handleFormSuccess"
      @onClose="handleFormClose"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const formRef = ref();

const formColumns = [
  {
    key: 'name',
    title: '姓名',
    component: {
      name: 'n-input',
    },
     rules: [
      {
        required: true,
        message() {
          return $t('system.config.key_required');
        }
      }
    ]
  },
  {
    key: 'age',
    title: '年龄',
  },
  {
    key: 'gender',
    title: '性别',
    value: 'male',
    component: {
        name: 'n-select',
        props: {
          options:[
            { label: '男', value: 'male' },
            { label: '女', value: 'female' }
          ]
        }
    }
  }
];

const formUrls = {
  add: '/api/user/add',
  edit: '/api/user/edit'
};

const openForm = () => {
  formRef.value.open({ title: '添加用户', type: 'add' });
};

const handleFormSuccess = () => {
  console.log('表单提交成功');
  // 刷新列表等操作
};

const handleFormClose = () => {
  console.log('表单已关闭');
};
</script>