vben userform表单 表单及增加表单位置设置

最新推荐文章于 2024-06-04 17:35:21 发布
最新推荐文章于 2024-06-04 17:35:21 发布
阅读量1.9k 收藏 24
点赞数 47
文章标签： 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muitoprazer/article/details/138123846
版权

最近接手vben后台管理模块，上手体验了一下，官方文档比较复杂及网上vben内容发布较少，个人也是研究了不少时间，发布文章也是希望大家有思路快速脱离问题的坑。

1.基础表单设置

代码如下（示例）：

    const [
      register,
      {
        validateFields,
        resetFields,
        setFieldsValue,
        appendSchemaByField,
        updateSchema,
        removeSchemaByFiled,
      },
    ] = useForm({
      labelWidth: 120,
      schemas: [
        {
          field: 'id',
          label: 'id',
          required: true,
          defaultValue: 0,
          component: 'InputNumber',
          show: false,
        },
        {
          field: 'code',
          label: 'code',
          required: true,
          defaultValue: 0,
          component: 'InputNumber',
          show: false,
        },
        {
          field: 'divider-api-select',
          component: 'Divider',
          label: '每日打卡奖励',
        },
        {
          field: 'integral_start',
          component: 'Input',
          label: '积分范围起始值',
          colProps: {
            span: 12,
          },
          componentProps: {
            placeholder: '请输入积分',
          },
          required: true,
        },
        {
          field: 'integral_end',
          component: 'Input',
          label: '积分范围终止值',
          colProps: {
            span: 12,
          },
          componentProps: {
            placeholder: '请输入积分',
          },
          required: true,
        },
        {
          field: `type`,
          component: 'Select',
          label: '额外奖励类型',
          colProps: {
            span: 8,
          },
          componentProps: {
            options: [],
            placeholder: '请选择类型',
          },
          required: true,
        },
        {
          field: 'product_id',
          component: 'Input',
          label: '奖品ID',
          colProps: {
            span: 8,
          },
          componentProps: {
            placeholder: '请输入奖品ID',
          },
          required: true,
        },
        {
          field: 'probability',
          component: 'Input',
          label: '获得概率（%）',
          colProps: {
            span: 8,
          },
          componentProps: {
            placeholder: '请输入获得概率，不低于0.0001',
          },
          required: true,
        },
        {
          field: 'continuity-select',
          component: 'Divider',
          label: '连续签到奖励',
        },
      ],
      // submitButtonOptions: { text: '提交' },
      showActionButtonGroup: false,
    });  

    // 获取后端返回数据
    getPunchInInfo({
      id: params.id,
    }).then((res: any) => {
       //处理字段‘type’的数据
      let type_list = Object.keys(res.type_list).map(item => ({ label: res.type_list[item], value: String(item) }));
      updateSchema({
        field: 'type',
        componentProps: { options: type_list },
      });
      setFieldsValue(res);
      test.value = res;
      setFormValues(res.continuity_list);
    });

表单内容如下：

 表单里边‘filed’填写的是后端返回对象的字段

2.增加表单及位置设置

代码如下（示例）：

// 动态表单设置 函数
    const setDynamicForms = (i) => {
      appendSchemaByField(
        {
          field: `continuity_day_${i}`,
          component: 'Input',
          label: '天数',
          colProps: {
            span: 6,
          },
          required: true,
        },
        '',
      );
      appendSchemaByField(
        {
          field: `continuity_type_${i}`,
          component: 'Select',
          label: '奖品类型',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [],
            placeholder: '请选择类型',
          },
          required: true,
        },
        '',
      );
      appendSchemaByField(
        {
          field: `continuity_product_id_${i}`,
          component: 'Input',
          label: '奖品ID',
          colProps: {
            span: 6,
          },
          required: true,
        },
        '',
      );
      appendSchemaByField(
        {
          field: `${i}`,
          component: 'Input',
          label: ' ',
          colProps: {
            span: 6,
          },
          slot: 'add',
        },
        '',
      );
      let type_list = Object.keys(test.value.type_list).map(item => ({ label: test.value.type_list[item], value: Number(item) }));
      updateSchema({
        field: `continuity_type_${i}`,
        componentProps: { options: type_list },
      });
    };
    // 设置
    const setFormValues = (product_id_rule) => {
      let defaultRule = [
        {type: '', day: '', product_id: ''},
      ];
      if (product_id_rule.length > 0) {
        defaultRule = product_id_rule;
      }
      const obj = {};
      // 动态 n 递增赋值
      n.value = defaultRule.length;
      for (let i = 0; i < defaultRule.length; i++) {
        // 组装渲染表单数据源
        const {type, day, product_id} = defaultRule[i];
        obj[`continuity_type_${i}`] = type
        obj[`continuity_day_${i}`] = day;
        obj[`continuity_product_id_${i}`] = product_id;
        // 组装表单 Element
        setDynamicForms(i);
      }
      setFieldsValue({
        ...obj,
      });
    };

 新表单如下：

  appendSchemaByField方法默认在表单的最后面增加此表单元素，可在appendSchemaByField方法中的‘’,这里面添加filed的字段名，则会在填写的字段名后面增加此元素

如：appendSchemaByField(
        {
          field: `${i}`,
          component: 'Input',
          label: ' ',
          colProps: {
            span: 6,
          },
          slot: 'add',
        },
        'title',
      );

 3.全部代码如下

<template>
  <PageWrapper>
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;
        margin-bottom: 6px;
      "
    >
      <a-button @click="resetFields">重置</a-button>
      <a-button type="primary" @click="validateForm">提交</a-button>
    </div>
    <CollapseContainer title="基础信息" class="mb-6">
      <BasicForm @register="register">
        <template #add="{ field }">
          <Button v-if="Number(field) === 0" @click="add">+</Button>
          <Button v-if="field > 0" @click="del(field)">-</Button>
        </template>
      </BasicForm>
    </CollapseContainer>
  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent, unref, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useGo } from '/@/hooks/web/usePage';
import { PageWrapper } from '/@/components/Page';
import { CollapseContainer } from '/@/components/Container';
import { BasicForm, useForm } from '/@/components/Form/index';
import { Button } from '/@/components/Button';
import { useMessage } from '/@/hooks/web/useMessage';
import { Tinymce } from '/@/components/Tinymce/index';
import { getPunchInInfo, postPunchInInfo } from '/@/api/punchIn/index';

export default defineComponent({
  components: {
    PageWrapper,
    CollapseContainer,
    BasicForm,
    Button,
    Tinymce,
  },
  setup() {
    const go = useGo();
    const { currentRoute } = useRouter();
    const test = ref();
    // 动态
    const n = ref(0);
    const params = unref(currentRoute).params;
    const { createMessage } = useMessage();
    const [
      register,
      {
        validateFields,
        resetFields,
        setFieldsValue,
        appendSchemaByField,
        updateSchema,
        removeSchemaByFiled,
      },
    ] = useForm({
      labelWidth: 120,
      schemas: [
        {
          field: 'id',
          label: 'id',
          required: true,
          defaultValue: 0,
          component: 'InputNumber',
          show: false,
        },
        {
          field: 'code',
          label: 'code',
          required: true,
          defaultValue: 0,
          component: 'InputNumber',
          show: false,
        },
        {
          field: 'divider-api-select',
          component: 'Divider',
          label: '每日打卡奖励',
        },
        {
          field: 'integral_start',
          component: 'Input',
          label: '积分范围起始值',
          colProps: {
            span: 12,
          },
          componentProps: {
            placeholder: '请输入积分',
          },
          required: true,
        },
        {
          field: 'integral_end',
          component: 'Input',
          label: '积分范围终止值',
          colProps: {
            span: 12,
          },
          componentProps: {
            placeholder: '请输入积分',
          },
          required: true,
        },
        {
          field: `type`,
          component: 'Select',
          label: '额外奖励类型',
          colProps: {
            span: 8,
          },
          componentProps: {
            options: [],
            placeholder: '请选择类型',
          },
          required: true,
        },
        {
          field: 'product_id',
          component: 'Input',
          label: '奖品ID',
          colProps: {
            span: 8,
          },
          componentProps: {
            placeholder: '请输入奖品ID',
          },
          required: true,
        },
        {
          field: 'probability',
          component: 'Input',
          label: '获得概率（%）',
          colProps: {
            span: 8,
          },
          componentProps: {
            placeholder: '请输入获得概率，不低于0.0001',
          },
          required: true,
        },
        {
          field: 'continuity-select',
          component: 'Divider',
          label: '连续签到奖励',
        },
      ],
      // submitButtonOptions: { text: '提交' },
      showActionButtonGroup: false,
    });

    // 动态表单设置 函数
    const setDynamicForms = (i) => {
      appendSchemaByField(
        {
          field: `continuity_day_${i}`,
          component: 'Input',
          label: '天数',
          colProps: {
            span: 6,
          },
          required: true,
        },
        '',
      );
      appendSchemaByField(
        {
          field: `continuity_type_${i}`,
          component: 'Select',
          label: '奖品类型',
          colProps: {
            span: 6,
          },
          componentProps: {
            options: [],
            placeholder: '请选择类型',
          },
          required: true,
        },
        '',
      );
      appendSchemaByField(
        {
          field: `continuity_product_id_${i}`,
          component: 'Input',
          label: '奖品ID',
          colProps: {
            span: 6,
          },
          required: true,
        },
        '',
      );
      appendSchemaByField(
        {
          field: `${i}`,
          component: 'Input',
          label: ' ',
          colProps: {
            span: 6,
          },
          slot: 'add',
        },
        '',
      );
      let type_list = Object.keys(test.value.type_list).map(item => ({ label: test.value.type_list[item], value: Number(item) }));
      updateSchema({
        field: `continuity_type_${i}`,
        componentProps: { options: type_list },
      });
    };
    // 设置
    const setFormValues = (product_id_rule) => {
      let defaultRule = [
        {type: '', day: '', product_id: ''},
      ];
      if (product_id_rule.length > 0) {
        defaultRule = product_id_rule;
      }
      const obj = {};
      // 动态 n 递增赋值
      n.value = defaultRule.length;
      for (let i = 0; i < defaultRule.length; i++) {
        // 组装渲染表单数据源
        const {type, day, product_id} = defaultRule[i];
        obj[`continuity_type_${i}`] = type
        obj[`continuity_day_${i}`] = day;
        obj[`continuity_product_id_${i}`] = product_id;
        // 组装表单 Element
        setDynamicForms(i);
      }
      setFieldsValue({
        ...obj,
      });
    };

    // 获取数据
    getPunchInInfo({
      id: params.id,
    }).then((res: any) => {
      let type_list = Object.keys(res.type_list).map(item => ({ label: res.type_list[item], value: String(item) }));
      updateSchema({
        field: 'type',
        componentProps: { options: type_list },
      });
      setFieldsValue(res);
      test.value = res;
      setFormValues(res.continuity_list);
    });

    // 提交
    const validateForm = async () => {
      try {
        const values = await validateFields();
        const continuity_list = Object.keys(values)
          .filter((f: any) => f.startsWith('continuity_type_'))
          .map((m: any, m_i: number) => ({
            type: values[m],
            day: values[`continuity_day_${m_i}`],
            product_id: values[`continuity_product_id_${m_i}`],
          }));
        postPunchInInfo({
          ...values,
          continuity_list: continuity_list,
        }).then((res: any) => {
          createMessage.success('提交成功');
          go(`/punchIn/index`);
        });
      } catch (error) {
        createMessage.error('系统错误，请稍后重试');
      }
    };
    const handleChange = (value: string) => {
      console.log(value);
    };
    const add = () => {
      setDynamicForms(n.value);
      n.value++;
    };
    const del = (field) => {
      removeSchemaByFiled([
        `continuity_type_${field}`,
        `continuity_day_${field}`,
        `continuity_product_id_${field}`,
        `${field}`,
      ]);
      n.value--;
    };
    return {
      register,
      resetFields,
      validateForm,
      setFormValues,
      handleChange,
      add,
      del,
    };
  },
});
</script>
 

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了userform的使用，更多方便快捷vben的userform的使用还需要更加深入了解，如有什么问题欢迎私信我。

muitoprazer
关注
  • 47
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
二、Vben框架自定义BasicTable的form组件
张先森的博客
08-18 5359
Vben框架自定义BasicTable的form组件
Vben Admin BasicForm如何设置选项默认值，修改rules
期待变成大神的博客
10-17 931
Vben Admin BasicForm如何设置选项默认值，修改某个字段的rules，字段联动
vben BasicTable里面表格插槽自定义以及自定义默认分页
最新发布
2302_76925238的博客
06-04 469
表格插槽使用BasicTable 里面用 默认分页直接加上面
vue3 vben table form 使用
weixin_45924208的博客
10-19 454
【代码】vue3 vben的使用。
C#_winform中Form在屏幕上的位置设置
科昂的博客
09-01 3584
winform中Form位置设置单屏来讲，不会有太大顾虑，若采用双屏，产生的位置如何去设置呢，如何设置在指定的屏幕上，指定的位置呢？
vben admin / ant design 的 Form表单获取/设置/清空某个表单项的值 , 使用 setFieldsValue 设置某个字段的时候,表单被清空的解决方案
YZRHANYU的博客
03-10 5842
vben admin / ant design 的 Form表单获取/设置/清空某个表单项的值 , 使用 setFieldsValue 设置某个字段的时候,表单被清空的解决方案
vben表单动态校验
weixin_54858833的博客
03-30 2803
记录下，下次直接用。 需求 证件类型选择身份证时，校验身份证号码，限制为18位 代码 FormSchema 配置 { field: 'certificate_type', label: '证件类型', component: 'Select', componentProps: { placeholder: '请选择证件类型', options: DictData.getDictById('IdCardType'),
vben admin form 表单 常见问题
lyinshaofeng的博客
12-07 2085
vben admin form 表单 常见问题
动态创建表单+删除表单
qq_38233172的博客
05-01 271
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态创建表单</title> <style> #box table { border-collapse: collapse; } &...
动态表单：VUE动态表单
08-13
基于vue+Iview实现动态表单组件，通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示，动态表格弹窗式维护。
async-form-antd:定义formSchema表单解构，根据此来渲染表单，目前主要是满足公司需求，希望各位大佬可以不吝拓展
05-14
API formSchema: object { "title": "normal", "description": "desc", "fields": [ { "field": "username", "name": "用户名", }, { "field": "password", "name": "密码", }, ] } formDate: object { "username": "ivliu", "password": "123456" } callback: (val: any) => void 回调函数，其中val参数是要提交的值 submitTxt: string 提交按钮的文案 说明 下面介绍每个字段的意义以及取值。 title (string)
VbenAdmin框架当FormSchema在单独ts文件中时调用表单的自带方法及表单项的组件方法
qq_44367273的博客
12-29 2942
VbenAdmin框架当FormSchema在单独ts文件中时调用表单的自带方法及表单项的组件方法
八、Vben框架动态生成可编辑Table
张先森的博客
02-27 1057
Vben框架动态生成可编辑Table
Form Schema 定义详解
quanxiangcloud的博客
10-08 3391
背景 上期分享了基于 Formily 的表单设计器实现原理，JSON Schema 是表单设计器和表单渲染组件之间沟通的语言。为了更深入理解表单设计器的核心，本期为大家详细解读表单 Schema 详细格式及快速入门实践。 Formily 提供了 JSON Schema、JSX Schema、纯 JSX 三种开发模式。由于 JSON 可以序列化保存到数据库中，所以 JSON Schema 的方式非常适合后端动态渲染表单，前端完全不需要维护 schema，只需利用 Formliy 提供的 SchemaForm
Vben useform基础用法
muitoprazer的博客
04-28 791
Vben中的useform基础用法
form表单多维对象赋值
BLUESKYHOST的博客
11-21 1156
原数据 let obj = { 'a.b.c':111, // 'c':2, 'a.b.d':3, 'date.name':'ceso' } 目标数据 { a: { b: { c: 111, d: 3 } }, date: { name: 'ceso' } } 案例 let obj = { 'a.b.c':111, // 'c':2, 'a.b.d':3, 'date.name':'ceso' } var deepExtend = r
Vben-admin带搜索框的表格
qq_42404842的博客
07-16 6926
1.index.vue 页面： <template> <BasicTable @register="register"> </BasicTable> </template> 2.注册表格部分： const [register, { reload }] = useTable({ api: getList, // api接口，返回的数据时数组能正确渲染成功 columns, // 数据源，表格头和数据
第十二节：Vben Admin实战-系统管理之用户管理
cui_win的专栏
04-04 384
前三节，我们完成了角色管理的增删改查的实现，本节我们完成用户管理的增删改查的功能。用户管理主要涉及下面的接口：用户管理的增删改查已经都实现了，下一步要实现的是权限管理（菜单管理），希望大家多多支持关注。
vben admin 表单自定义按钮
06-09
如果你想在vben admin的表单中添加自定义按钮，可以使用vben admin提供的 `Action` 组件。你可以通过以下步骤来实现： 1. 在表单页面引入 `Action` 组件。 ``` import { defineComponent } from 'vue'; import { ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值