网站建设2017国内排行,百度蜘蛛对视频网站的抓取,郑州集团网站建设,网店美工毕业设计论文前置 目前的应用场景是#xff1a;检查项目是树结构#xff0c;有的项目还需要动态显示对应的子集 项目用的是uniappvue3tsvite生成的app tsx模版
统一渲染入口
script langtsimport uniForms from dcloudio/uni-ui/lib/uni-forms/uni-forms.vueimport…前置 目前的应用场景是检查项目是树结构有的项目还需要动态显示对应的子集 项目用的是uniappvue3tsvite生成的app tsx模版
统一渲染入口
script langtsimport uniForms from dcloudio/uni-ui/lib/uni-forms/uni-forms.vueimport uniFormsItem from dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vueimport uniDataCheckbox from dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vueimport 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 langscss 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 langtsximport uniDataCheckbox from dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vueimport { 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(definePropsRenderType(),{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 classtheme theme-flex sele-inptext{ ss.name }/textuniEasyinput 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 classrenderForm 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
})
/scripttemplatejsxRender :paramsformDate :renderrenderFn /
/templatestyle langscss scoped
.jsx-render {color: #41B883;
}
// .sele-inp{
// gap: 20px;
// }
/style
案例
使用
templateview classre-boxview v-for(item ,index) in props.tagListsview classbox-topuni-section classmb-10 :titleitem.typeName typeline titleFontSize20px/uni-section/viewReanderTemplate :temListitem.items refreanderTemplateRef :keyindex/!-- uni-forms-item label医生建议 uni-easyinput typetextarea v-modelexpandParamMap[item.type ][docAdvice] placeholder请输入医生建议 //uni-forms-item --view stylepadding: 10px;box-sizing: border-box;padding-top: 0;uni-forms-item label医生建议uni-easyinput typetextarea v-modelexpandParamMap[item.type][docAdvice] placeholder请输入医生建议 //uni-forms-item/view/viewview stylepadding: 10px;box-sizing: border-box;padding-top: 0;uni-forms-item label签名view classsignature v-ifsignatureUrlimage classsignatureImg :src imgUrlPreFix signatureUrl //viewwd-button plain hairline v-else click$tab.navigateTo(/pages/signature/index)点击签名/wd-button/uni-forms-item /view/view
/templatescript setup langts nameRenderBoximport { getCurrentInstance, ref } from vueimport { useToast } from wot-design-uniimport useUpload from /hooks/uploadimport { upload } from /api/system/uploadServiceimport ReanderTemplate from /components/reanderTemplate/index.vueimport { examineFinish } from /api/app/speExamineTypeServiceimport { onLoad } from dcloudio/uni-appconst 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 defineEmitsEmitType()const itemAll inject(itemAll)const expandParamMap refany({})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 i0; 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() .jpglet 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})
/scriptstyle langscss 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数据结构及案例效果图
整理完后后面贴
