表单业务组件

基础用法

根据配置生成表单

<template>
  <su-form 
    class="vp-raw" 
    :formList="formData"
    :formParam="formParam"
    @cancel="handleCancel"
    @submit="handleSubmit"
  ></su-form>
</template>

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

const formData: any = reactive([
    {
        name: 'switch',
        title: '开关',
        key: 'switch',
        value: true,
        wrapperCol: { span: 1 },
    },
    {
        name: 'radio',
        title: '单选框',
        key: 'radio',
        enum: [
            { label: 'Apple', value: 'Apple' },
            { label: 'Pear', value: 'Pear' },
            { label: 'Orange', value: 'Orange' },
        ],
    },
    {
        name: 'checkbox',
        title: '多选框',
        key: 'checkbox',
        enum: ['Apple', 'Pear', 'Orange'],
    },
    {
        name: 'select',
        title: '选择框',
        key: 'select1',
        value: '',
        enum: [
            {
                value: '前端',
                label: '前端',
            },
            {
                value: '后端',
                label: '后端',
            },
        ],
    },
    {
        name: 'timePicker',
        title: '时间1',
        key: 'timePicker1',
        value: '',
        format: 'HH:mm:ss',
    },
    {
        name: 'timeRangePicker',
        title: '时间2',
        key: 'timeRangePicker',
    },
    {
        name: 'datePicker',
        title: '时间3',
        key: 'datePicker',
    },
    {
        name: 'dateRangePicker',
        title: '时间4',
        key: 'dateRangePicker',
    },
    {
        name: 'cascader',
        title: '地址',
        key: 'cascader',
        value: ['zhejiang'],
        enum: [
            {
                value: 'zhejiang',
                label: 'zhejiang',
                children: [
                    {
                        value: 'hangzhou',
                        label: 'Hangzhou',
                        children: [
                            {
                                value: 'xihu',
                                label: 'West Lake',
                            },
                        ],
                    },
                ],
            },
        ],
    },
]);

// 初始化搜索值
let formParam: any = reactive({});
const initSearch = () => {
    formData.forEach((item: any) => {
        formParam[item.key] = item.value;
    });
};
initSearch();

const handleCancel = () => {
    initSearch();
};

const handleSubmit = () => {
    console.log('submit', formParam);
};

</script>

动态获取下拉数据

动态获取

动态设置表单的下拉数据

<template>
  <su-form 
    class="vp-raw"
    :formList="formData"
    :formParam="formParam"
    @cancel="handleCancel"
    @submit="handleSubmit"
  ></su-form>
</template>

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

// 模拟请求数据
const getSelectData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        code: 200,
        data: [
          {
            label: "在线",
            value: 1
          },
          {
            label: "离线",
            value: 0
          }
        ]
      })
    },500)
  })
}

const formData: any = reactive([
    {
        name: 'radio',
        title: '单选框',
        key: 'radio',
        api: getSelectData,
    },
    {
        name: 'checkbox',
        title: '多选框',
        key: 'checkbox',
        api: getSelectData,
    },
    {
        name: 'select',
        title: '选择框',
        key: 'select1',
        value: '',
        api: getSelectData,
    },
]);

// 初始化搜索值
let formParam: any = reactive({});
const initSearch = () => {
    formData.forEach((item: any) => {
        formParam[item.key] = item.value;
    });
};
initSearch();

const handleCancel = () => {
    initSearch();
};

const handleSubmit = () => {
    console.log('submit', formParam);
};

</script>

校验表单

根据rule设置表单校验规则

<template>
  <su-form 
    class="vp-raw"
    :formList="formData"
    :formParam="formParam"
    @cancel="handleCancel"
    @submit="handleSubmit"
  ></su-form>
</template>

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

const formData: any = reactive([
    {
        name: 'radio',
        title: '单选框',
        key: 'radio',
        enum: [
            { label: 'Apple', value: 'Apple' },
            { label: 'Pear', value: 'Pear' },
            { label: 'Orange', value: 'Orange' },
        ],
        rules: [
            {
                required: true,
                message: '请选择单选框'
            },
        ],
    },
    {
        name: 'checkbox',
        title: '多选框',
        key: 'checkbox',
        enum: ['Apple', 'Pear', 'Orange'],
        rules: [
            {
                required: true,
                message: '请至少选择一个多选框'
            },
        ],
    },
    {
        name: 'select',
        title: '选择框',
        key: 'select1',
        value: '',
        enum: [
            {
                value: '前端',
                label: '前端',
            },
            {
                value: '后端',
                label: '后端',
            },
        ],
        rules: [
            {
                required: true,
                message: '请选择'
            },
        ],
    },
    {
        name: 'timePicker',
        title: '时间',
        key: 'timePicker1',
        value: '',
        format: 'HH:mm:ss',
        rules: [
            {
                required: true,
                message: '请选择时间'
            },
        ],
    },
]);

// 初始化搜索值
let formParam: any = reactive({});
const initSearch = () => {
    formData.forEach((item: any) => {
        formParam[item.key] = item.value;
    });
};
initSearch();

const handleCancel = () => {
    initSearch();
};

const handleSubmit = () => {
    console.log('submit', formParam);
};

</script>

使用插槽

定义插槽使用自定义组件

<template>
  <su-form
    class="vp-raw"
    :formList="formData"
    :formParam="formParam"
    @cancel="handleCancel"
    @submit="handleSubmit"
  >
    <template #hhh>
        <input :value="formParam.slotkey" />
    </template>
  </su-form>
</template>

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

const formData: any = reactive([
    {
        name: 'slot',
        slotName: 'hhh',
        title: '插槽',
        key: 'slotkey',
        value: '插槽的使用',
    }
]);

// 初始化搜索值
let formParam: any = reactive({});
const initSearch = () => {
    formData.forEach((item: any) => {
        formParam[item.key] = item.value;
    });
};
initSearch();

const handleCancel = () => {
    initSearch();
};

const handleSubmit = () => {
    console.log('submit', formParam);
};
</script>

动态变更表单项

定义插槽使用自定义组件

<template>
  <div>
    <div>
      <a-button style="margin-right: 24px" @click="addInput">添加一个输入框</a-button>
      <a-button @click="delInput" :disabled="formData.length === 1">减少一个输入框</a-button>
    </div>
    <su-form
      class="vp-raw"
      ref="changeFormRef"
      :formList="formData"
      :formParam="formParam"
      @cancel="handleCancel"
      @submit="handleSubmit"
    ></su-form>
  </div>
</template>

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

let formData: any = reactive([
  {
    name: "input",
    title: "输入框1",
    key: "input1",
  },
]);

// 初始化搜索值
let formParam: any = reactive({});
const initSearch = () => {
  formData.forEach((item: any) => {
    formParam[item.key] = item.value || '';
  });
};
initSearch();

let changeFormRef = ref();

const addInput = () => {
  let index =
    formData.filter((v: { name: string }) => v.name === "input").length + 1;
  formData.push({
    name: "input",
    title: `输入框${index}`,
    key: `input${index}`,
  });
  initSearch()
  changeFormRef.value.updateForm();
};

const delInput = () => {
  formData.splice(formData.length - 1, 1)
  formParam = {}
  initSearch()
  changeFormRef.value.updateForm();
};

const handleCancel = () => {
  initSearch();
};

const handleSubmit = () => {
  console.log("submit", formParam);
};
</script>

表单组件参数配置

参数	说明	类型	默认值
formList	表单配置	itemType[]	配置请查看下方FormList表单配置
formParam	表单数据	string、number、string[]、number[]、boolean	数值需要根据formList去生成,请查看下方FormParam生成方法
bottomBtnWrapper	底部按钮的右侧宽度	number	--
bottomBtnLabel	底部按钮的左侧宽度	number	--
submitText	提交按钮文案	string	'创建'
cancelText	取消按钮文案	string	'取消'
showBtns	是否显示底部按钮	boolean	true
subLoading	确认按钮的加载状态	boolean	false

表单回调方法

参数	说明	类型	示例
submit	点击提交的按钮	function	--
cancel	点击取消的按钮	function	--
itemChange	组件值改变时触发的回调	function	--

表单单项配置

参数	说明	类型	示例
key	表单组件键值	string	唯一的key值
name	表单组件类别	string	input 、InputNumber 、select 、timePicker 、 timeRangePicker 、datePicker 、dateRangePicker 、cascader、switch、radio、checkbox、slot
slotName	自定义组件	--	当name值为slot时可使用
value	表单组件初始值	--	string、number、string[]、number[]、boolean
enum	select组件搜索项	array	下拉列表数据，默认取value、label
labelName	自定义枚举文字	string	更改下拉数据取值
valueName	自定义枚举值	string	更改下拉数据取值
api	动态枚举	function	获取接口返回的下拉数据
params	动态获取枚举的参数	object	{}
style	组件左侧文字样式	string	设置文字行内样式
format	时间类选项输出的格式	string	使用dayjs格式化时间格式：'YYYY MM DD hh:mm:ss'
optionType	组合式radio	string	沿用自antd Table组件
width	表格列宽度	number	沿用自antd Table组件
min	inputNumber组件最小值	number	沿用自antd InputNumber组件
max	inputNumber组件最大值	number	沿用自antd InputNumber组件
placeholder	组件无值时显示的文字	string	沿用自antd InputNumber组件
labelCol	组件左侧文件宽度	string	沿用自antd InputNumber组件
labelAlign	组件左侧文件定位	string	沿用自antd InputNumber组件
wrapperCol	组件宽度	string	沿用自antd InputNumber组件
picker	日期选项样式	string	沿用自antd InputNumber组件
rules	数据校验	object[]	沿用自antd Form组件

FormParam生成方法

let formParam: any = reactive({});
// 初始化搜索值
const initSearch = () => {
  formData.forEach((item: itemType) => {
    formParam[item.key] = item.value || '';
  });
};
initSearch();

表单业务组件 ​

基础用法 ​

动态获取下拉数据 ​

校验表单 ​

使用插槽 ​

动态变更表单项 ​

表单组件参数配置 ​

表单回调方法 ​

表单单项配置 ​

FormParam生成方法 ​

表单业务组件

基础用法

动态获取下拉数据

校验表单

使用插槽

动态变更表单项

表单组件参数配置

表单回调方法

表单单项配置

FormParam生成方法