From 8be3182372eb774dce8f9c97a0b51c03bda165c7 Mon Sep 17 00:00:00 2001 From: wangting <675591594@qq.com> Date: 星期一, 08 四月 2024 15:33:11 +0800 Subject: [PATCH] UI展示 --- Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue | 109 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 95 insertions(+), 14 deletions(-) diff --git a/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue b/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue index 804a731..9d7d32f 100644 --- a/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue +++ b/Source/ProjectWeb/src/components/dynamic-components/dynamic-custom.vue @@ -1,35 +1,116 @@ <template> - <div></div> + <div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid"> + <div v-if="isError" style="color: #F56C6C">杩欎釜鑷畾涔夐〉闈㈢殑鍦板潃鏍煎紡涓嶆纭�傛帹鑽愪娇鐢╞s=缁勪欢name?type=xxx&context=yyy&pparam=zzz杩欑褰㈠紡</div> + <component v-else :is="currentComponent" + :btmType="btmType" + :content="content" + :inDialog="true" + :key="areasName+'customCom-'+componentVO.oid" + :componentVO="componentVO" + :sourceData="sourceData" + :dataStore="dataStore" + :areasName="areasName" + :paramVOS="urlParams"></component> + </div> </template> <script> +import {queryStringToObject} from '@/util/util' export default { name: "dynamic-custom", - props:{ - componentVO:{ - type:Object, + components: { + 'UI': () => import('@/views/base/UIContentViewerInDialog'), + 'test': () => import('@/views/custom-ui/test'), + 'test2': () => import('@/views/custom-ui/test2'), + }, + props: { + componentVO: { + type: Object, default: {} }, inDialog: { type: Boolean, default: false }, - areasName:{ - type:String, - default:'' + areasName: { + type: String, + default: '' }, - sourceData:{ - //鑿滃崟婧愭暟鎹垨鑰呭脊绐楁椂鎸夐挳鎵�灞炲尯鍩熺殑涓婁竴鍖哄煙閫変腑鏁版嵁 - type:Object, + sourceData: { + //鎵�灞炲尯鍩熺殑涓婁竴鍖哄煙閫変腑鏁版嵁 + type: Object, default: {} }, - paramVOS:{ - type:Object, + dataStore: { + //寮圭獥鏃舵寜閽墍灞炲尯鍩熼�変腑鏁版嵁 + type: Array, + default: [] + }, + paramVOS: { + type: Object, default: {} - } + }, + isShow: { + //鎵�鍦ㄥ尯鍩熸槸鍚﹀凡鏄剧ず锛岄拡瀵箃ab鍜宑ollapse + type: Boolean, + default: true + }, }, data() { - return {} + return { + btmType: '', + content: '', + urlParams: {}, + height: '300px', + customClass: this.componentVO.customClass, //bs=?type=xxx&context=yyy¶m=zzz 鎴栬�� bs=缁勪欢name?type=xxx&context=yyy¶m=zzz + isError: false, //璺緞瑙f瀽澶辫触 + currentComponent: 'UI',//缁勪欢name + } + }, + watch: { + sourceData: { + handler(newval) { + //婧愭暟鎹湁鍙樺寲鏃跺彉鏇村綋鍓嶅尯鍩熸暟鎹� + console.log(this.areasName); + console.log(newval); + } + } + }, + computed: {}, + created() { + + }, + mounted() { + if (this.customClass.indexOf("bs=") < 0) { + this.isError = true; + return; + } + this.customClass = this.componentVO.customClass.split("bs=")[1]; + if (this.customClass.indexOf("?") < 0 || this.customClass.indexOf("type=") < 0 || this.customClass.indexOf("context=") < 0) { + this.isError = true; + return; + } + if (this.customClass.split('?')[0] != '' && this.customClass.split('?')[0] != 'UI' && this.customClass.split('?')[0] != 'ui') { + this.currentComponent = this.customClass.split('?')[0]; + } + let urlParams = queryStringToObject(this.customClass); + let btmType = urlParams.type; + let content = urlParams.context; + + this.btmType = btmType; + this.content = content; + this.urlParams = Object.assign(this.paramVOS, urlParams) + + //this.getHeight(this.$parent); + }, + methods: { + getHeight(el) { + if (el.$el.clientHeight > 50) { + this.height = el.$el.clientHeight + 'px'; + } else { + this.getHeight(el.$parent); + } + } } } </script> -- Gitblit v1.9.3