更新记录

1.1.2（2024-12-20） 下载此版本

本次调整： 1、去掉submit事件，但对外暴露了submit函数，可在外部调用 2、去除了组件外部样式，在页面中使用时，自行调整 3、初始化表单数据中，增加属性 disabled: true, // 禁止，可选 false

1.1.1（2024-11-10） 下载此版本

无特殊

1.1.0（2024-09-26） 下载此版本

1、取消array类型表单，不再支持弹窗表单，新增table类型表单，通过提供回调函数、增加按钮的方式实现对列表数据的增加与删除，详见示例。 2、增加autPosition属性，默认为false，当设为true时，在宽屏时表单标题居于左侧并左对齐，在窄屏时表单标题居于顶部。

平台兼容性

piao-form

本次调整： 1、去掉submit事件，但对外暴露了submit函数，可在外部调用 2、去除了组件外部样式，在页面中使用时，自行调整 3、初始化表单数据中，增加属性 disabled: true, // 禁止，可选 false

完整示例

<template>
    <uni-title
        type="h2"
        title="案件信息录入"
        align="center"
        style="margin-top: 40px; margin-bottom: 20px"
    ></uni-title>
    <piao-form
        ref="form"
        :formData="formData"
        :autPosition="true"
    ></piao-form>
</template>

<script setup>
import { post } from '@/common/request.js';

import { ref } from 'vue';
const form = ref();

/**组件提供两个方法来实现给组件指定表单动态赋值
 * 1、setItemValue（key,value）：给主页面表单赋值，key为表单对应的对象属性，例如 "title"
 * 2、setPopupItemValue(key,value)：给弹窗表单赋值，key为对应range（数组）中对应元素的序号，例如 1 
 */
function test(e) {
    form.value.setItemValue('authorizationType', 1);//调用setItemValue方法给指定表单（如：authorizationType）赋值为 1。
}

const formData = ref({
    title: {
        type: 'text',
        rules: [
            {
                required: true,
                errorMessage: '案件名称不能为空'
            },
            {
                minLength: 5,
                errorMessage: '案件名称不能少于5个字符'
            }
        ],
        placeholder: '建议命名规则：原告vs被告', 
        label: '案件名称', 
        isShow: true,
        btn: {
            type: 'primary', // 取值范围：warn、default、primary
            text: '搜索文章',
            callback: test,//注意，这里调用函数名称，不是 test()
            option: 'right' //可选：right、bottom，默认为 bottom
        }
    },
    caseReason: {
        type: 'piao-combox',
        rules: [
            {
                required: true,
                errorMessage: '案由不能为空'
            }
        ],
        placeholder: '请输入或选择案由',  
        label: '案由',  
        range: [
            { value: 0, text: '原告' },
            { value: 1, text: '被告' },
            { value: 2, text: '第三人' }
        ],
        callback: (e) => {
            form.value.setItemValue('authorizationType', 1); //让authorizationType项的值等于1，这里的key是对象的属性名称，与弹窗中调用setPopupItemValue(key,value)中的key有所不同
        },
        btn: {
            type: 'warn', // 取值范围：warn、default、primary
            text: '新增案由',
            callback: (e) => {
                console.log('表单组件按钮被单击', e);
                uni.navigateTo({
                    url: '/pages/Login/Login'
                });
            }
        }
    },
    consignorType: {
        type: 'checkbox',
        label: '委托人类型', 
        value: 0, // 给定初始值
        range: [
            { value: 0, text: '原告' },
            { value: 1, text: '被告' },
            { value: 2, text: '第三人' }
        ],
        multiple: false,
        rules: [
            {
                required: true,
                errorMessage: '请选择委托人类型'
            }
        ],
        callback: (e) => {
            console.log('我是表单回调函数，返回值：', e);
        }
    },
    authorizationType: {
        type: 'checkbox',
        label: '授权类型',
        value: 0, // 给定初始值
        disabled: true, // 禁止
        range: [
            { value: 0, text: '特别授权' },
            { value: 1, text: '一般授权' }
        ],
        multiple: false,
        rules: [
            {
                required: true,
                errorMessage: '请选择授权类型'
            }
        ],
        callback: (e) => {
            console.log('我是表单回调函数，返回值：', e);
        }
    },
    content: {
        type: 'textarea',
        placeholder: '请简要描述案情', 
        label: '案情简述',
        rules: [
            {
                required: true,
                errorMessage: '请简要描述案情'
            }
        ]
    },
    party: {
        type: 'table',
        label: '案件当事人',
        range: {
            name: {
                label: '名称',
                align: 'left',
                width: '150'
            },
            partyType: {
                label: '类型'
            }
        },
        value: [
            {
                name: '张三',
                partyType: {
                    text: '原告', //仅显示text字段
                    value: 0
                },
                id: '5454546464' // 未在range中定义，不会显示在表格中，但会在删除的回调函数中返回
            },
            {
                name: '贵州省人民医院',
                partyType: {
                    text: '被告',
                    value: 1
                },
                id: '5565656565656'
            }
        ],
        btn: {
            type: 'primary', // 取值范围：warn、default、primary
            text: '添加当事人',
            callback: (e) => {
                uni.navigateTo({
                    url: '/pages/case-operate/case-add-reason'
                });
            }
        },
        callback: (e) => {
            //点击删除按钮时的回调函数
            console.log(e);
        }
    },
    chargType: {
        type: 'textarea',
        placeholder: '请写明收费方式及内容', 
        label: '收费条款', 
        rules: [
            {
                required: true,
                errorMessage: '请填写收费条款'
            }
        ]
    },
    undertake: {
        type: 'checkbox',
        label: '承办律师',
        value: [], //当multiple为true时，value的值为数组类型
        range: [
            {
                text: '张律师',
                value: '10000000'
            },
            {
                text: '李律师',
                value: '20000000'
            },
            {
                text: '胡律师',
                value: '30000000'
            }
        ],
        multiple: true
    },
    grade: {
        type: 'picker',
        label: '年级',
        range: [
            //必填
            {
                text: '一年级',
                value: '1-0',
                children: [
                    {
                        text: '1.1班',
                        value: '1-1'
                    },
                    {
                        text: '1.2班',
                        value: '1-2'
                    }
                ]
            },
            {
                text: '二年级',
                value: '2-0'
            },
            {
                text: '三年级',
                value: '3-0'
            }
        ],
        placeholder: '请选择年级'
    },
    avatar: {
        type: 'file',
        label: '图片'
    }
});

async function sub() {
    let res=await form.value.submit()
    console.log(res);
}
</script>

返回值

异步调用submit函数直接返回表单数据