| | |
| | | import {validatenull} from "@/util/validate"; |
| | | export default { |
| | | name: "dynamic-custom", |
| | | components: { |
| | | 'UI': () => import('@/views/base/UIContentViewerInDialog'), |
| | | 'test': () => import('@/views/custom-ui/test'), |
| | | 'test2': () => import('@/views/custom-ui/test2'), |
| | | }, |
| | | props: { |
| | | //ui上下文的业务类型(或链接类型) |
| | | uiBtmType: { |
| | |
| | | height: '300px', |
| | | customClass: '', //?type=xxx&context=yyy¶m=zzz 或者 组件name?type=xxx&context=yyy¶m=zzz |
| | | isError: false, //路径解析失败 |
| | | currentComponent: 'UI',//组件name |
| | | ComponentUrl:'base/UIContentViewerInDialog', |
| | | currentComponent: null |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | }, |
| | | computed: {}, |
| | | created() { |
| | | |
| | | }, |
| | | mounted() { |
| | | this.customClass=this.componentVO.customClass; |
| | | this.componentVO.customClass.split(';').forEach(item=>{ |
| | | if(item.indexOf('web=')==0){ |
| | | this.customClass=item.split('web=')[1]; |
| | | } |
| | | }) |
| | | let urlParams = {}; |
| | | // 如果路径中存在 '?',则取问号前面部分给 parts |
| | | if (this.customClass.includes('?')) { |
| | | this.currentComponent = this.customClass.split("?")[0]; |
| | | this.ComponentUrl = this.customClass.split("?")[0]; |
| | | urlParams = queryStringToObject(this.customClass); |
| | | } else { |
| | | this.currentComponent = this.customClass; // 不存在 '?' 整条路径就是 parts |
| | | this.ComponentUrl = this.customClass; // 不存在 '?' 整条路径就是 parts |
| | | } |
| | | if(validatenull(this.currentComponent)){ |
| | | this.currentComponent='UI'; |
| | | if(validatenull(this.ComponentUrl) || ['UI', 'ui'].includes(this.ComponentUrl)){ |
| | | this.ComponentUrl='base/UIContentViewerInDialog'; |
| | | }else { |
| | | this.ComponentUrl='custom-ui/'+this.ComponentUrl; |
| | | } |
| | | if (['UI', 'ui'].includes(this.currentComponent) && (this.customClass.indexOf("type=") < 0 || this.customClass.indexOf("context=") < 0)) { |
| | | if (this.ComponentUrl=='base/UIContentViewerInDialog' && (!urlParams.type || !urlParams.context)) { |
| | | this.isError = true; |
| | | return; |
| | | } |
| | | let urlParams = {}; |
| | | if(this.customClass.includes('?')) { |
| | | urlParams = queryStringToObject(this.customClass); |
| | | } |
| | | |
| | | this.btmType = urlParams.type; |
| | | this.context = urlParams.context; |
| | | this.urlParams = Object.assign(this.paramVOS, urlParams) |
| | | |
| | | this.urlParams = Object.assign({},this.paramVOS, urlParams) |
| | | this.loadCompoent(); |
| | | }, |
| | | mounted() { |
| | | //this.getHeight(this.$parent); |
| | | }, |
| | | methods: { |
| | | loadCompoent(){ |
| | | // 动态导入组件 |
| | | import(`@/views/${this.ComponentUrl}.vue`).then((module) => { |
| | | // 成功导入后,将组件注册到Vue实例中 |
| | | this.currentComponent = module.default; |
| | | }).catch((error) => { |
| | | // 处理导入失败的情况 |
| | | console.error('组件加载失败:', error); |
| | | }); |
| | | }, |
| | | getHeight(el) { |
| | | if (el.$el.clientHeight > 50) { |
| | | this.height = el.$el.clientHeight + 'px'; |