uniapp/vue如何实现一个子表单及子表单作用

简介: uniapp/vue如何实现一个子表单及子表单作用

子表单是一个辅助表单或一个表,它允许在主表单中添加多个行式项目,以处理与主记录相关联的多个辅助项目或数据。子表单在多种应用场景中发挥着重要作用,特别是在需要处理一对多关系的数据时。

以下是对子表单的详细解析:


定义与特点

  • 定义:子表单是一个插入到主表单中的表单,用于在主表单中显示与主记录相关联的多个辅助记录或数据项。
  • 特点:
  • 提高表单的灵活性和信息的详细程度。
  • 适用于1:N(一对多)的数据场景。
  • 可以包含多种字段类型,如文本框、日期时间、单选框等。


应用场景

  1. 销售部门:
  • 子表单可用于使联系人详细信息与客户相关联。
  • 在销售订单中,子表单可以记录与主产品相关联的配件信息,如配件名称、价格、数量等。
  1. 人力资源管理:
  • 子表单可用于管理员工的多个联系人信息、工作经历、培训历史等。
  • 在员工信息表单中,子表单可以记录员工的工作经历、培训记录、证书等详细信息。
  1. 财务管理:
  • 在报销表单中,子表单可以详细记录每次报销包含的多个报销项目信息。
  1. 库存管理:
  • 出库单、入库单中的商品明细可以用子表单记录,根据实际需要录入的数据新增条数。


功能与优势

  • 数据录入:支持多种字段类型,方便用户录入复杂数据。
  • 数据管理:可以有效地处理复杂的数据关系,提高数据录入的准确性和效率。
  • 数据联动:当其他表单字段与子表单字段相关时,可以设置联动,实现数据的自动填充。
  • 批量操作:支持子表信息的批量导入和导出,提高数据处理效率。


创建与配置

子表单的创建和配置通常依赖于具体的软件或平台。以下是一些通用的步骤:

选择主表单

首先确定主表单,往主表单拖入相关表单输入字段并设置其属性,如字段类型、名称、是否必填等。


添加子表单

往主表单中添加子表单组件,并设置其属性,如字段类型、名称、是否必填等。

配置子表单

在子表单字段中配置需要显示的辅助记录或数据项,如配件名称、价格、数量等。


扩展样式设置

对整个子表单进行外边距设置、边框、圆角等设置

导出源码

点击保存源码至本地,本地可以快速进行调试子表单效果。


本地开发运行效果

保存源码至本地后,会生成uniapp、vue相关子表单源码,此时我们可以快速看见效果.

操作按钮位置设置

自定义操作按钮

支持自定义扩展按钮,可以根据生成上面点击事件拷贝出来,然后自定义操作按钮事件。

子表单代码生成器举例

<template>
  <view class="container container21094">
    <u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24">
      <u-form-item class="diygw-col-24" label="标题" prop="input">
        <u-input :focus="formData.inputFocus" placeholder="请输入提示信息" v-model="form.input"></u-input>
      </u-form-item>
      <u-form-item class="diygw-col-24" label="标题" prop="input1">
        <u-input :focus="formData.input1Focus" placeholder="请输入提示信息" v-model="form.input1"></u-input>
      </u-form-item>
      <view class="flex flex-wrap diygw-col-24 subform-clz">
        <view class="diygw-col-24" v-for="(subformItem, subformIndex) in form.subform" :key="subformIndex">
          <u-form class="diygw-col-24" :model="form.subform[subformIndex]" :errorType="['message', 'toast']" ref="subformRef" :rules="subformItemRules">
            <text class="diygw-col-24 text-clz"> 子表单 </text>
            <u-form-item class="diygw-col-24" label="标题" prop="input3">
              <u-input :focus="formData.subformItemDatas[subformIndex].input3Focus" placeholder="请输入提示信息" v-model="subformItem.input3"></u-input>
            </u-form-item>
          </u-form>
          <view class="formsubformtools flex justify-end">
            <button @tap="upSubformItem" :data-index="subformIndex" class="diygw-btn flex-sub radius margin-xs">
              <text class="button-icon diy-icon-fold"></text>
            </button>
            <button @tap="downSubformItem" :data-index="subformIndex" class="diygw-btn flex-sub radius margin-xs">
              <text class="button-icon diy-icon-unfold"></text>
            </button>
            <button @tap="addSubformItem" :data-index="subformIndex" class="diygw-btn flex-sub radius margin-xs">
              <text class="button-icon diy-icon-add"></text>
            </button>
            <button @tap="delSubformItem" :data-index="subformIndex" class="diygw-btn flex-sub radius margin-xs">
              <text class="button-icon diy-icon-close"></text>
            </button>
          </view>
        </view>
        <view class="padding-xs diygw-col-24">
          <button @tap="addSubformItem" class="diygw-btn diygw-col-24 radius" style="background: #07c160; color: #fff">新增</button>
        </view>
      </view>
    </u-form>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: { logintype: '0', agree: '0' },
        subformItemData: {
          input3Focus: false
        },
        subformItem: {
          input3: ''
        },
        form: {
          input: '',
          input1: '',
          subform: []
        },
        formRules: {},
        subformItemRules: {},
        formData: {
          inputFocus: false,
          input1Focus: false,
          subformItemDatas: []
        }
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    onReady() {
      this.$refs.formRef?.setRules(this.formRules);
      this.initSubformData();
    },
    methods: {
      async init() {
        await this.initResetform();
      }, //初始化显示子表单数据条数
      initSubformData() {
        for (let i = 0; i < 1; i++) {
          this.form.subform.push(JSON.parse(JSON.stringify(this.subformItem)));
          this.formData.subformItemDatas.push(JSON.parse(JSON.stringify(this.subformItemData)));
        }
        this.initSubformValid();
      },
      //子表单验证
      initSubformValid() {
        this.$nextTick(() => {
          this.$refs['subformRef']?.forEach((subform) => {
            subform.setRules(this.subformItemRules);
          });
        });
      },
      //上移子表单
      upSubformItem(evt) {
        let { index } = evt.currentTarget.dataset;
        if (index == 0) {
          this.navigateTo({
            type: 'tip',
            tip: '已经是第一个'
          });
          return false;
        }
        this.form.subform[index] = this.form.subform.splice(index - 1, 1, this.form.subform[index])[0];
        this.formData.subformItemDatas[index] = this.formData.subformItemDatas.splice(index - 1, 1, this.formData.subformItemDatas[index])[0];
        this.initSubformValid();
      },
      //下移子表单
      downSubformItem(evt) {
        let { index } = evt.currentTarget.dataset;
        if (index == this.form.subform.length - 1) {
          this.navigateTo({
            type: 'tip',
            tip: '已经是最后一个'
          });
          return false;
        }
        this.form.subform[index] = this.form.subform.splice(index + 1, 1, this.form.subform[index])[0];
        this.formData.subformItemDatas[index] = this.formData.subformItemDatas.splice(index + 1, 1, this.formData.subformItemDatas[index])[0];
        this.initSubformValid();
      },
      //删除子表单
      delSubformItem(evt) {
        let { index } = evt.currentTarget.dataset;
        this.form.subform.splice(index, 1);
        this.formData.subformItemDatas.splice(index, 1);
        this.initSubformValid();
      },
      //增加子表单
      addSubformItem() {
        this.form.subform.push(JSON.parse(JSON.stringify(this.subformItem)));
        this.formData.subformItemDatas.push(JSON.parse(JSON.stringify(this.subformItemData)));
        this.initSubformValid();
      },
      //验证所有的子表单
      checkSubformValid() {
        let flag = true;
        this.$refs['subformRef']?.forEach((subform) => {
          subform.validate((valid) => {
            if (!valid) {
              flag = false;
              return false;
            }
          });
        });
        return flag;
      },
      initResetform() {
        this.initform = JSON.stringify(this.form);
      },
      resetForm() {
        this.form = JSON.parse(this.initform);
      },
 
      async submitForm(e) {
        this.$refs.formRef?.setRules(this.formRules);
 
        this.initSubformValid();
        this.$nextTick(async () => {
          let subformvalid = await this.checkSubformValid();
          let valid = await this.$refs.formRef.validate();
          if (valid && subformvalid) {
            //保存数据
            let param = this.form;
            let header = {
              'Content-Type': 'application/json'
            };
            let url = '';
            if (!url) {
              this.showToast('请先配置表单提交地址', 'none');
              return false;
            }
 
            let res = await this.$http.post(url, param, header, 'json');
 
            if (res.code == 200) {
              this.showToast(res.msg, 'success');
            } else {
              this.showModal(res.msg, '提示', false);
            }
          } else {
            console.log('验证失败');
          }
        });
      }
    }
  };
</script>
 
<style lang="scss" scoped>
  .subform-clz {
    margin-left: 10rpx;
    border: 2rpx solid #ac0a0a;
    border-bottom-left-radius: 12rpx;
    overflow: hidden;
    width: calc(100% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-top-right-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
  }
  .formsubformtools {
    position: absolute;
    z-index: 1;
    right: 0rpx;
    top: 0rpx;
  }
  .formsubformtools .diygw-btn {
    padding: 5px;
    height: auto;
    flex: inherit;
    border-radius: 20px;
  }
  .text-clz {
    margin-left: 10rpx;
    padding-top: 10rpx;
    padding-left: 10rpx;
    width: calc(100% - 10rpx - 10rpx) !important;
    padding-bottom: 10rpx;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    margin-right: 10rpx;
    padding-right: 10rpx;
  }
  .container21094 {
  }
</style>

注意事项

在使用子表单时,需要注意数据的完整性和准确性,避免出现数据冗余或错误。

根据实际需求合理配置子表单的字段和关联关系,以提高数据处理的效率和准确性。

在进行批量操作时,如批量导入和导出,需要注意数据的格式和顺序,确保数据的正确性和完整性。

综上所述,子表单是一种重要的数据管理工具,能够有效地处理复杂的数据关系和提高数据处理的效率。在实际应用中,需要根据具体需求合理配置和使用子表单。

目录
相关文章
|
24天前
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
|
2月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
109 5
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
132 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
4月前
|
设计模式 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
基于SqlSugar的开发框架循序渐进介绍(20)-- 在基于UniApp+Vue的移动端实现多条件查询的处理
|
4月前
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
67 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
87 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
117 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
120 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)