更新记录

1.0.0（2025-02-14） 下载此版本

• 1、动态表单组件v1.0.0发布
• 2、基于uni-ui -> uni-forms开发
• 3、加入自定义组件
• 4、集成【单行文本、文本域、数字、小数、身份证、手机号、日期、单选框、复选框、下拉选项、弹出单选、弹出多选、级联选择器、图片上传、视频上传、附件上传】组件
• 5、专注于配置信息，无需关注前端表单元素
• 6、后端开发程序猿-懒人福利

平台兼容性

ziqirj-dynamic-form 动态表单组件

• 组件名：ziqirj-dynamic-form
• 代码块： ziqirj-dynamic-form
• 关联组件：scss/sass

插件说明

• 1、动态表单组件v1.0.0发布
• 2、基于uni-ui -> uni-forms开发
• 3、加入自定义组件
• 4、集成【单行文本、文本域、数字、小数、身份证、手机号、日期、单选框、复选框、下拉选项、弹出单选、弹出多选、级联选择器、图片上传、视频上传、附件上传】组件
• 5、专注于配置信息，无需关注前端表单元素
• 6、后端开发程序猿-懒人福利

使用说明

组件参数Props

formList 数据格式

formType可选值，及其config参数

回调函数

可用方法

使用示例

<template>
    <view style="padding: 0 15px;">

        <view style="display: flex; flex-wrap: wrap; justify-content: flex-start;">
            <button @click="setFormData">设置表单值</button>
            <button @click="disabledItem">{{ this.disabled?'禁用': '启用' }}部分表单</button>
            <button @click="clearForm">重置表单</button>
        </view>

        <ziqirj-dynamic-form ref="dynamicFormRef" :form-id="formId" :form-list="formList"
            :dynamic-form="form" label-width="90px" @cancel="back" @confirm="confirm" />

        <view style="height: 30px;"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                formId: 'dynamicFormId',
                formList: [
                    { formName: 'text', formTitle: '单行文本', formType: 'text', required: true, placeholder: '请输入单行文本', requiredTip: '单行文本不能为空', forbidden: false },
                    { formName: 'textarea', formTitle: '文本域', formType: 'textarea', required: false, placeholder: '请输入文本域', requiredTip: '文本域不能为空', forbidden: false,
                        config: {maxlength: 200}},
                    { formName: 'number', formTitle: '数字', formType: 'number', required: true, placeholder: '请输入数字', requiredTip: '数字不能为空', forbidden: false },
                    { formName: 'digit', formTitle: '小数', formType: 'digit', required: false, placeholder: '请输入小数', requiredTip: '数字不能为空', forbidden: false },
                    { formName: 'idcard', formTitle: '身份证', formType: 'idcard', required: true, placeholder: '请输入身份证', requiredTip: '身份证不能为空', forbidden: false },
                    { formName: 'phonenumber', formTitle: '手机号', formType: 'phonenumber', required: false, placeholder: '请输入手机号', requiredTip: '手机号不能为空', forbidden: false },
                    { formName: 'datetime', formTitle: '日期', formType: 'datetime', required: true, placeholder: '请选择日期', requiredTip: '请选择日期', forbidden: false,
                        config: {}},
                    { formName: 'radio', formTitle: '单选框', formType: 'radio', required: true, requiredTip: '请选择选项', 
                        options: [{value: 1, text: '选项一', selected: false}, {value: 2, text: '选项二', selected: false}], forbidden: false },
                    { formName: 'checkbox', formTitle: '复选框', formType: 'checkbox', required: false, requiredTip: '请选择选项', forbidden: false, 
                        options: [{value: 1, text: '选项一', selected: false}, {value: 2, text: '选项二', selected: false}, {value: 3, text: '选项三', selected: false}, {value: 4, text: '选项四', selected: false}, {value: 5, text: '选项五', selected: false}] },
                    { formName: 'select', formTitle: '下拉选项', formType: 'select', required: true, requiredTip: '请选择选项', placeholder: '请选择选项', forbidden: false,
                        options: [{value: 1, text: '选项一', selected: false}, {value: 2, text: '选项二', selected: false}, {value: 3, text: '选项三', selected: false}, {value: 4, text: '选项四', selected: false}, {value: 5, text: '选项五', selected: false}] },
                    { formName: 'popupSelectRadio', formTitle: '弹出单选', formType: 'popupSelect', required: true, requiredTip: '请选择选项', placeholder: '请选择选项', forbidden: false,
                        options: [{value: 1, text: '选项一', selected: false}, {value: 2, text: '选项二', selected: false}, {value: 3, text: '选项三', selected: false}, {value: 4, text: '选项四', selected: false}, {value: 5, text: '选项五', selected: false}],
                        config: {multiple: false} },
                    { formName: 'popupSelect', formTitle: '弹出多选', formType: 'popupSelect', required: true, requiredTip: '请选择选项', placeholder: '请选择选项', forbidden: false,
                        options: [{value: 1, text: '选项一', selected: false}, {value: 2, text: '选项二', selected: false}, {value: 3, text: '选项三', selected: false}, {value: 4, text: '选项四', selected: false}, {value: 5, text: '选项五', selected: false}] },
                    { formName: 'dataPicker', formTitle: '级联选择器', formType: 'dataPicker', required: true, placeholder: '请选择选项', requiredTip: '请选择选项', forbidden: false,
                        options: [{"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"}],
                        config: {} },
                    { formName: 'uploadImage', formTitle: '图片', formType: 'uploadImage', required: true, placeholder: '请上传图片', requiredTip: '请上传图片', forbidden: false,
                        config: {limit: 5, url: 'http://localhost:9002/common/upload', config: {name: 'originalFilename', url: 'url'}} },
                    { formName: 'uploadVideo', formTitle: '视频', formType: 'uploadVideo', required: true, placeholder: '请上传视频', requiredTip: '请上传视频', forbidden: false,
                        config: {url: 'http://localhost:9002/common/upload', config: {name: 'originalFilename', url: 'url'}} },
                    { formName: 'uploadAffix', formTitle: '附件', formType: 'uploadAffix', required: true, placeholder: '请上传附件', requiredTip: '请上传附件', forbidden: false,
                        config: {url: 'http://localhost:9002/common/upload', config: {name: 'originalFilename', url: 'url'}} }
                ],
                form: {},
                formRules: [],
                disabled: true
            }
        },
        methods: {
            setFormData() {
                this.form = {
                    text: 'set单行文本',
                    textarea: 'set文本域',
                    number: 123,
                    digit: 12.3,
                    idcard: '5322251',
                    phonenumber: '',
                    datetime: '2025-02-13',
                    radio: 1,
                    checkbox: [1, 3],
                    select: 2,
                    popupSelectRadio: [4],
                    popupSelect: [2, 4],
                    dataPicker: [{value: '1-0', text: '一年级'}, {value: '1-1', text: '1.1班'}],
                    uploadImage: [{name: 'logo.png', url: 'https://icon.jjzqkj.cn/logo.png'}],
                    uploadVideo: [{name: 'uni-app.mp4', url: 'https://icon.jjzqkj.cn/uni-app.mp4'}],
                    uploadAffix: [{name: 'RuoYi-Vue-master3.8.7.zip', url: 'https://icon.jjzqkj.cn/RuoYi-Vue-master3.8.7.zip'}]
                }
            },
            disabledItem() {
                this.formList[0].forbidden = this.disabled
                this.formList[2].forbidden = this.disabled
                this.formList[4].forbidden = this.disabled
                this.formList[8].forbidden = this.disabled
                this.formList[10].forbidden = this.disabled
                this.formList[this.formList.length - 3].forbidden = this.disabled
                this.formList[this.formList.length - 1].forbidden = this.disabled

                this.disabled = !this.disabled
            },
            clearForm() {
                this.$refs.dynamicFormRef.clearForm()
            },
            back() {
                uni.navigateBack({delta: 1})
            },
            confirm(e) {
                console.log("confirm form", e)
            }
        }
    }
</script>

<style>

</style>

依赖组件

scss/sass

uni-data-checkbox

uni-datetime-picker

uni-data-select

uni-data-picker

uni-easyinput

uni-forms

uni-icons

ziqirj-file-upload

ziqirj-media-upload

ziqirj-popup-select

如使用过程中有任何问题，或者您对组件有一些好的建议，欢迎留言

Email：zhangji_59@qq.com

紫琪程序猿

ziqiui示例