更新记录

1.0.8（2024-10-21） 下载此版本

bug修复

1.0.7（2024-08-19） 下载此版本

getValidateReslut bug 修复 文档

1.0.6（2024-08-19） 下载此版本

getValidateReslut 暴露核验方法

平台兼容性

hn-form-page

props

export interface THideItem {
    isHide ?: ((...args : Array<any>) => boolean) | boolean,
    slotName ?: string,
    prop : string,
    type ?: string,
    label ?: string,
    item ?: ICom,
    children ?:IChildren,
    [key : string] : any
}

export type IChildren = ((...arg:any[])=>IOption[]) | IOption[]

export type IOption = ICom & IAny

export type THideList = THideItem[]

export interface ICom {
    events ?: {
        [key : string] : (...args : Array<any>) => any
    },
    props ?: {
        [key : string] : any
    }
}

export interface IAny {
    [key : string] : any
}

export type IInputItem = THideItem & ICom

export interface IFormAttrs  {
    form ?: ICom,
    isRow ?: boolean,
    onlyRead ?: boolean,
    hideReset ?: boolean,
    hideSubmit ?: boolean,
    resetLabel ?: string,
    submitLabel ?: string,
    next ?: (...arg:any[])=>boolean, //true 放行 提交 submit
    submit ?: (...arg:any[])=>any,
    resetAfter ?:(...arg:any[])=>any,
    inputs : Array<IInputItem>
}

slots

暴露的方法

reset,
submit,
getValidateReslut

暴露的属性

formRef

通过数据驱动生成表单页

<template>
    <formPage  v-model="form" :attrs="config"></formPage>
</template>

<script setup lang="ts">
    import { ref } from "vue";
    import formPage from '@/uni_modules/hn-form-page/components/form-page/form-page.vue'
    import { IFormAttrs } from '@/uni_modules/form-page/types/index'

    uni.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: '#f6faff'
    })

    const config = ref<IFormAttrs>({
        isRow: true,
        form: {
            props: {
                labelWidth: '180rpx',
            }
        },
        submit: async (data, back) => {
            await back({
                title:"", //弹窗提示
                duration:"", // 弹窗时间
                back:()=>{} //不填写默认返回上一级页面
            }) 
        },
        inputs: [
            {
                label: "物品照片",
                type: 'image', // 图片列表
                prop: "photos"
            },
            {
                label: "物品照片",
                type: 'takePhoto', //人像
                prop: "photo"
            },
            {
                label: "商品描述",
                type: 'textarea',
                prop: "remark"
            },
            {
                label: "价格",
                type: 'input',
                prop: "num"
            },
            {
                label: "联系人",
                type: 'input',
                prop: "name"
            },
            {
                label: "联系电话",
                type: 'input',
                prop: "tel"
            },
            {
                label: "联系电话",
                type: 'input',
                prop: "tel"
            },
        ]
    })
    const form = ref<any>({

    })
</script>

<style lang="scss" scoped>

</style>

demo2

<template>
    <view>
        <formPage ref="formRef" v-model="form" :attrs="config"></formPage>
        <WCompress ref="WCompressRef"></WCompress>
    </view>
</template>

<script setup lang="ts">
    import { computed, ref } from "vue";
    import formPage from '@/uni_modules/hn-form-page/components/hn-form-page/hn-form-page.vue';
    import { IFormAttrs } from '@/uni_modules/hn-form-page/types/index';
    import lodash from "lodash";
    import { add, edit, getEmployeePhoto, getOneById } from '@/api/requests/person';
    import { onLoad } from '@dcloudio/uni-app';
    import { zipImgToBase64 } from "../../utils/common/photosZip";  //压缩照片工具
    import WCompress from '@/components/w-compress/w-compress.vue';
    import { bid } from "../../api/requests/bid";

    const WCompressRef = ref()

    const config = ref<IFormAttrs>({
        isRow: false,
        submitLabel:"通过",
        resetLabel: '拒绝',
        resetAfter: lodash.debounce(() => {
            uni.navigateBack()
        }, 300),
        form: {
            props: {
                labelWidth: '180rpx',
            }
        },
        submit: async (data, back) => {
            if (!data.photo?.includes('base64')) {
                data.photo = await zipImgToBase64(WCompressRef, data.photo, true)
            }
            if (!form.value.id) {
                const res = await bid(data) as any
                data.sign = res.sign
                await add(data)
            } else {
                await edit(data)
            }
            await back({
                title: '已提交！',
                back: () => {
                    uni.$emit('change')
                    uni.navigateBack()
                }
            })
        },
        inputs: [
            {
                label: "受访者手机号",
                type: 'input',
                prop: "intervieweeTel",
                required: true,
                props:{
                    disabled:true
                }
            },
            {
                label: "拜访者姓名",
                type: 'input',
                prop: "name",
                required: true,
                props:{
                    disabled:true
                }
            },
            {
                label: "拜访者身份证",
                type: 'input',
                prop: "idcard",
                required: true,
                props: {
                    disabled: true
                }
            },
            {
                label: "拜访者手机号",
                type: 'input',
                prop: "tel",
                required: true,
                props:{
                    disabled:true
                }
            },
            {
                label: "拜访者单位",
                type: 'input',
                prop: "org",
                required: true,
                props:{
                    disabled:true
                }
            },
            {
                label: "拜访者照片",
                type: 'takePhoto',
                prop: "photo",
                required: true,
                props:{
                    disabled:true
                }
            },
            {
                type: "date",
                prop: "rangeTime",
                label: "希望拜访时段（不填默认当天）",
                props: {
                    type: "datetimerange",
                    disabled:true
                },
            },
            {
                label: "理由",
                type: 'textarea',
                prop: "remark",
                props:{
                    disabled:true
                }
            }
        ]
    })

    const form = ref<any>({

    })

    onLoad(async (options : any) => {
        if (options.id) {
            form.value = await getOneById({
                id: options.id
            })
            form.value.photo = await getEmployeePhoto({
                key: form.value.photo,
            })
        }
    })
</script>

<style lang="scss" scoped>

</style>