vue3使用tsx渲染复杂逻辑的表单

前置

目前的应用场景是：检查项目是树结构，有的项目还需要动态显示对应的子集
项目用的是uniapp+vue3+ts+vite生成的app

tsx模版

统一渲染入口

<script lang="ts">import uniForms from '@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue'import uniFormsItem from '@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue'import uniDataCheckbox from '@dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'import uniEasyinput from '@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue'
export default {components:{uniForms, uniFormsItem,uniEasyinput,uniDataCheckbox},props: {params: {type: Object,},render: {type: Function,},},render() {return this.render(this.params)},
}
</script>
<style lang="scss" scope>// .sele-inp{// 	gap: 20px;// }.cus-column{flex-direction: column;:deep(.checklist-group){gap: 20upx;flex-direction: column!important;}}.renderForm{background: #fff;padding: 20upx;box-sizing: border-box;// margin-top: 40upx;}:deep(.uni-forms-item__label){color: rgba(0, 0, 0, 0.85);}
</style>

动态解析tsx

tsx中用到的组件需要再，统一入口去引入，名字需要保持一致，目前渲染的表单类型，之有两个，input和redio，可根据自己的业务自行扩展

<script setup lang="tsx">import uniDataCheckbox from '@dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'import { h, resolveComponent } from 'vue'// import uniForms from '@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue'// import uniFormsItem from '@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue'// import uniEasyinput from '@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue'
type RenderType = {temList?: any[]
}const defalutItem = {itemType: '', itemTypeName: '', itemId: '',parentId: '', 
itemName: '', itemCode: '', itemRes: '',itemResLabel: ''
}
// 属性
const props = withDefaults(defineProps<RenderType>(),{temList: () => []
})// 表单值
const formDate = reactive({
})// 类型暂无用处
const options = {input: "uniEasyinput",radio: "uniDataCheckbox"
}
const setLabel = (val, id,key,parentItem) => {formDate[id][key] = val.detail.data.textlet item = val.detail.data.dataif(item && item.children && item.children.length > 0){formDate[parentItem.code] ? formDate[parentItem.code] : formDate[parentItem.code] = {}formDate[parentItem.code]['itemType'] = item.typeformDate[parentItem.code]['itemTypeName'] = item.typeNameformDate[parentItem.code]['itemId'] = item.idformDate[parentItem.code]['parentId'] = item.parentIdformDate[parentItem.code]['itemName'] = item.nameformDate[parentItem.code]['itemCode'] = item.code// formDate[parentItem.code]['itemResLabel']  ? formDate[parentItem.code]['itemResLabel'] : ''// formDate[parentItem.code]['itemRes'] ? '' : formDate[parentItem.code]['itemRes'] = ''}else {delete formDate[parentItem.code]}
}
const renderFormRef = ref()
const initDefaultItemForm = (item) => {formDate[item.id] ? formDate[item.id] : formDate[item.id] = {}formDate[item.id]['itemType'] = item.typeformDate[item.id]['itemTypeName'] = item.typeNameformDate[item.id]['itemId'] = item.idformDate[item.id]['parentId'] = item.parentIdformDate[item.id]['itemName'] = item.nameformDate[item.id]['itemCode'] = item.codeformDate[item.id]['itemResLabel']  ? formDate[item.id]['itemResLabel'] : ''formDate[item.id]['itemRes'] ? '' : formDate[item.id]['itemRes'] = ''console.log('initDefaultItemForm')
}
// <view class=""> {formDate[item.id] === ss.parentId ? <view class="theme theme-flex sele-inp"><text>{ ss.name }</text><uniEasyinput v-model={formDate[ss.id]}></uniEasyinput> </view>: '' }</view> 
const typeProcessor = (type?: string, item?: any, node?: any[]) => {if(type === 'input'){return <uniFormsItem  label={item.name} name={"[" + item.id + ", itemRes ]"}><uniEasyinput v-model={formDate[item.id]['itemRes']} placeholder={'请输入'+item.name}></uniEasyinput></uniFormsItem>}else if(type === 'radio'){const list = [] as any[]// let node = []if(item.children && item.children.length > 0){item.children.forEach((it:any) => {list.push({text: it.name, value: it.code, 'data': it})if(it.children && it.children.length > 0){it.children.forEach((ss:any) => {// 删除对应的值// delete formDate[ss.id]node!.push(ss)})}})}console.log('list',list)return [<view class={node && node.length > 0 ? '' : ''}><uniFormsItem  label={item.name} name={"[" + item.id + ", itemRes ]"}><uniDataCheckbox class={item.children.length > 3 ? '' : ''} v-model={formDate[item.id]['itemRes']} localdata={list} placeholder={'请选择'+item.name} onChange={(val) => setLabel(val, item.id, 'itemResLabel',item)}></uniDataCheckbox></uniFormsItem>{node!.map(no => {let parent_code  = nulltry{// 匹配父级codelet codes = no.code.split('_');codes = [...codes.slice(0, -1)]parent_code = codes.join('_')}catch(e){}formDate[item.id]['itemRes'] === parent_code ? (initDefaultItemForm(no)) : delete formDate[no.id]return [formDate[item.id]['itemRes'] === parent_code ?<uniFormsItem  label={no.name} name={"[" + no.id + ", itemRes ]"}><uniEasyinput v-model={formDate[no.id]['itemRes']} placeholder={'请输入'+ no.name}></uniEasyinput> </uniFormsItem>: '']})}</view>]}
}const renderFn = (formDate: any) => {console.log('formDate', formDate)return [<uniForms class="renderForm" label-width={100} modelValue={formDate} ref={renderFormRef}>{props.temList.map((item) => {initDefaultItemForm(item)let node = [] as any[]return  [<view>{typeProcessor(item.renderType, item, node)}</view>]})}</uniForms>]
}
const submit = () => {// reanderTemplateRefconsole.log(formDate)console.log(renderFormRef.value)
}
defineExpose({submit,formDate
})
</script><template><jsxRender :params="formDate" :render="renderFn" />
</template><style lang="scss" scoped>
.jsx-render {color: #41B883;
}
// .sele-inp{
// 	gap: 20px;
// }
</style>

案例

使用

<template><view class="re-box"><view v-for="(item ,index) in props.tagLists"><view class="box-top"><uni-section class="mb-10" :title="item.typeName" type="line" titleFontSize="20px"></uni-section></view><ReanderTemplate :temList="item.items"  ref="reanderTemplateRef" :key="index"/><!-- 	<uni-forms-item label="医生建议" ><uni-easyinput type="textarea" v-model="'expandParamMap['+item.type +'][docAdvice]'" placeholder="请输入医生建议" /></uni-forms-item> --><view style="padding: 10px;box-sizing: border-box;padding-top: 0;"><uni-forms-item label="医生建议"><uni-easyinput type="textarea"  v-model="expandParamMap[item.type]['docAdvice']"  placeholder="请输入医生建议" /></uni-forms-item></view></view><view style="padding: 10px;box-sizing: border-box;padding-top: 0;"><uni-forms-item label="签名"><view class="signature" v-if="signatureUrl"><image class="signatureImg" :src=" imgUrlPreFix + signatureUrl" /></view><wd-button plain hairline v-else @click="$tab.navigateTo(`/pages/signature/index`)">点击签名</wd-button></uni-forms-item> </view></view>
</template><script setup lang="ts" name="RenderBox">import { getCurrentInstance, ref } from 'vue'import { useToast } from 'wot-design-uni'import useUpload from '@/hooks/upload'import { upload } from '@/api/system/uploadService'import ReanderTemplate from '@/components/reanderTemplate/index.vue'import { examineFinish } from '@/api/app/speExamineTypeService'import { onLoad } from '@dcloudio/uni-app'const imgUrlPreFix = import.meta.env.VITE_APP_GATEWAY + '/file';const proxy = getCurrentInstance().proxytype EmitType = {(e: 'saveFallback') :void}const signatureUrl = ref()const toast = useToast()const reanderTemplateRef = ref()const emits = defineEmits<EmitType>()const itemAll = inject('itemAll')const expandParamMap = ref<any>({})const props = withDefaults(defineProps<{tagLists?: any[], formDataObj?: any[]}>(),{tagLists: () => [],formDataObj: () => []})watchEffect(() => {props.tagLists.forEach((item) => {expandParamMap.value[item.type]  = {itemType: item.type, passed: true, docAdvice: ''}})if(props.formDataObj && props.formDataObj.length > 0){nextTick(() => {for(let i=0; i < reanderTemplateRef.value.length; i++){let item = reanderTemplateRef.value[i]Object.assign(item.formDate,props.formDataObj[i])console.log('item.formDate',item.formDate)}})}})const submit = (params: any, url: string) => {proxy.$pop.showConfirm('','确认保存数据吗',true).then((res: any) => {console.log(res)if(res.confirm){submitFun(params, url)}})}const submitFun = (params: any) => {let itemResList = [] as ExamineTypeParams[]reanderTemplateRef.value.forEach((item: any) => {console.log('item.formDate',item.formDate)itemResList = itemResList.concat(Object.values(item.formDate) as ExamineTypeParams[])})let saveData = {signUrl: signatureUrl.value,expandParamMap: expandParamMap.value,infoId: params.infoId as string,itemResList: itemResList,itemAll: itemAll.value as SpeExamineInfoDocScanCodeDto[]}console.log('saveData',saveData)uni.showLoading({mask: true,title: '保存中...'});examineFinish(saveData).then(res => {console.log(res)proxy?.$pop.toast("保存成功")emits('saveFallback')}).finally(() => (uni.hideLoading()))}const signatureFun = (val: string) => {uni.showLoading({mask: true,title: '签名上传中...'})let ss =new Date().getTime() + '.jpg'let pa = {fileName: ss, localPath: val}useUpload(pa).then((res:any)=>{signatureUrl.value = res.data.fileUrlPath}).finally(() => (uni.hideLoading()))}onLoad(() => {uni.$on('signature', signatureFun)})onUnmounted(() => {uni.$off('signature', signatureFun)})defineExpose({submit})
</script><style lang="scss" scoped>.re-box{margin-top: 20upx;background-color: #fff;}.box-top{// padding: 20upx;font-size: 30upx;background: #fff;}.signature{width: 100px;height: 100px;.signatureImg{display: block;width: 100%;height: 100%;}}
</style>

数据结构及案例效果图

整理完后，后面贴