更新记录

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

无特殊

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

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

1.0.9（2024-09-25） 下载此版本

新增组件方法，setItemValue(key,value)和setPopupItemValue(key,value)，实现对表单动态赋值。

平台兼容性

piao-form

完整示例

<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"
        @submit="sub"
        :disable="disable"
    ></piao-form>
</template>

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

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

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: 'select',
        label: '授权类型',
        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(e) {
    console.log(res);
}
</script>

返回值

{
  "value": {
    "title": "sadfs",
    ......
    "avatar": [
      "https://mp-a55cff5c-.....com/cloudstorage/4ce25b1b-9cce-4177-8fe5-1e1bfe58bcf2.jpg",
      "https://mp-a55cff5c-.....com/cloudstorage/ba1b6b21-bb8f-41bc-a3dc-9a8e088e56b2.jpg",
      "https://mp-a55cff5c-.....com/cloudstorage/8ea08f27-c2e6-4944-8d3a-7067bd86f97a.jpg"
    ]
  },
  "message": "success"
}

内置函数

# 重置表单：resetForm()
formData.value = form.value.resetForm(); //重置表单数据，即将formData.value重置为初始值——该初始值从函数resetForm()返回

# 表单赋值：setItemValue(key,value)
/**组件提供方法setItemValue来实现给组件指定表单动态赋值，也可以直接向formData赋值，例如：formData.value.title.value = '1'。
 * setItemValue（key,value）：给主页面表单赋值，key为表单对应的对象属性，例如 "title"
 */

form.value.setItemValue('authorizationType', 1);//调用setItemValue方法给指定表单（如：authorizationType）赋值为 1。