更新记录

1.0.2（2024-05-22） 下载此版本

控制整体表单是否禁用

1.0.1（2024-05-21） 下载此版本

重新上传封面

1.0.0（2024-05-21） 下载此版本

初始化组件

平台兼容性

tf-general-forms

1. 组件作用
   • 根据json数据快速生成表单
   • 支持的数据格式有：integer：整数，decimal：小数，money：金额，input：单行文本输入，basicData：基础资料， date：日期，dateTime：日期时间，radio：单选，checkbox：多选，image：图片，textarea：多行文本，money：金额
   • 由于此组件依赖tf-picker-date-time，tf-remark-not-form，tf-img-upload，tf-thousand-input，tf-thousand-money-input，使用此组件时首先导入以上组件以支持对应类型的数据
2. 组件引用例子

<template>
  <view class="content">
    <TfGeneralForms ref="tfGeneralForms" v-model="formData"></TfGeneralForms>
    <view class="subform" @click="sub">提交表单</view>
  </view>
</template>

<script>
import TfGeneralForms from "@/uni_modules/tf-general-forms/components/tf-general-forms/tf-general-forms.vue";
export default {
  components: {
    TfGeneralForms,
  },
  data() {
    return {
      formData: [
        {
          label: "年龄",//表单label，必要属性
          fieldType: "radio",//字段类型，必要属性
          disabled:false,//是否禁用，必要属性
          show: true,//控制是否显示此字段，必要属性
          list: [//单选数据列表，fieldType为radio或checkbox时必要
            {
              value: 1,
              label: "15岁以下"
            },
            {
              value: 2,
              label: "16~20岁"
            }

          ],
          rules: {//校验规则，数据回显涉及的字段
            name: "age",//字段键，必要属性
            value: '', // 字段值，必要属性
            verify: true,//是否必填，必要属性
            errMess: "请选择年龄段",//校验必填失败提示，设置verify为true时必要
            showErrMess:false //校验文字提示
          },
        },
        {
          placeholder: "未选择获客时间",
          label: "获客时间",
          fieldType: "dateTime",
          show: true,
          disabled: false,
          showDate:false,//控制时间弹窗的显示和隐藏，fieldType为date、dateTime时必要
          rules: {
            name: "createTime",
            value: "",
            verify: true,
            errMess: "未选择获客时间",
            showErrMess:false //校验文字提示
          },
        },
        {
          placeholder: "输入整数",
          label: "整数",
          fieldType: "integer",
          show: true,
          disabled: false,
          unit:'吨',//单位，fieldType为integer、decimal、money、input、basicData、date、dateTime、radio、checkbox时有此属性，非必要
          rules: {
            name: "integer",
            value: "520",
            verify: false,
            errMess: "请输入数字小数",
            showErrMess:false //校验文字提示
          },
        },
        {
          placeholder: "输入小数",
          label: "小数",
          fieldType: "decimal",
          show: true,
          disabled: false,
          decimalPlaces:2,//精度，fieldType为decimal时有此属性，默认保留两位小数，非必要
          rules: {
            name: "decimal",
            value: "520",
            verify: true,
            errMess: "请输入",
            showErrMess:false //校验文字提示
          },
        },
        {
          placeholder: "输入金额",
          label: "金额",
          fieldType: "money",
          show: true,
          disabled: false,  
          rules: {
            name: "money",
            value: 52012,
            verify: true,
            errMess: "请输入金额",
            showErrMess:false //校验文字提示
          },
        },
        {
          placeholder: "输入名字",
          label: "姓名",
          fieldType: "input",
          show: true,
          disabled: false,
          rules: {
            name: "name",
            value: "李四",
            verify: true,
            errMess: "姓名未填写",
            regexp: "^李" ,//自定义校验规则（目前只支持正则检验），当且仅当verify为true时生效 非必要属性
            showErrMess:false //校验文字提示
          },
        },
        {
          placeholder: "选择基础资料",
          label: "基础资料",
          fieldType: "basicData",
          show: true, //是否显示
          disabled: false,
          :this.onSelect,//点击选择箭头触发onSelect事件，fieldType为basicData时必要
          rules: {
            name: "basicData",
            value: "基础资料",//基础资料显示的值
            id: "111",//基础资料id
            verify: false,
            errMess: "请选择基础资料",
            showErrMess:false //校验文字提示
          },
        },
        {
          label: "图片",
          fieldType: "image",
          show: true,
          disabled: false,
          formData: { //具体参数根据情况而定，fieldType为image时必要
            bizId: null,
            bizType: 'SETTLEMENT_BILL_FILES',
            fileAcl: 'PUBLIC_READ_WRITE'
         },
         action: 'xxxxxx',//上传照片后端地址，fieldType为image时必要
         header: {//请求头，具体参数根据情况而定，fieldType为image时必要
            Authorization: 'xxxxxx',
            token: "xxx"
         },
         maxCount:9,//最大支持上传数量，默认9张，非必要
          rules: {
            name: "photo",
            fileList: [{url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}], //显示已上传的文件列表，fieldType为image时必要
            verify: true,
            errMess: "请选择图片",
            showErrMess:false //校验文字提示
          },
        },
        {
          placeholder: "请选择兴趣",
          label: "兴趣",
          fieldType: "checkbox",
          show: true,
          disabled:false,
          list: [
            {
              value: 1,
              name: "篮球",
              disabled: false, //是否禁用
              checked: false,
            },
            {
              value: 2,
              name: "足球",
              checked: false,
            }
          ],
          rules: {
            name: "interest",
            value: [],
            verify: true,
            errMess: "请选择兴趣",
            showErrMess:false //校验文字提示
          },
        },
        {
          placeholder: "请输入公司名称",
          label: "公司",
          fieldType: "input",
          show: true,
          disabled:false,
          rightOperation:'查看附近',//附加操作，点击时触发onRightOperation事件，非必要属性
          onRightOperation:this.onRightOperationBasicData,//附加操作事件，设置了rightOperation必要
          rules: {
            name: "company",
            value: "cat公司",
            verify: false,
            errMess: "公司名称不能为空",
            showErrMess:false //校验文字提示
          },
        },
        {
          placeholder: "请输入备注",
          label: "备注",
          fieldType: "textarea",
          show: true,
          disabled: false,
          rules: {
            name: "experience",
            value: "备注回显", 
            verify: true,
            errMess: "请输入备注",
            showErrMess:false //校验文字提示
          },
        },
      ],
    };
  },
  methods: {
    // 提交表单
    sub() {
      this.$refs.tfGeneralForms
        .validate()
        .then(async (form) => {
          console.log("表单对象:", form);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    /**
     * @param {Object} done 基础资料事件
     */
    (){
        //选择基础资料，在此做相应操作，跳转页面或者弹出下拉列表'
        //给this.formData中相应的基础资料字段的rules.value和rules.id赋值
        console.log('选择基础资料')
        // this.formData.forEach(item=>{
        //  if(item.rules.name === 'basicData'){
        //      item.rules.value = 'yayyyy'
        //      item.rules.id = '1'
        //  }
        // })
    },
    onRightOperationBasicData(){
        console.log('附加操作')
    }
  },
};
</script>

<style lang="less">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .subform {
    margin: 30rpx;
    padding: 20rpx 60rpx;
    border-radius: 18rpx;
    background-color: bisque;
  }
}
</style>

3. 组件属性说明

3. 组件方法说明（需要通过ref手动调用）