| | |
| | | <template> |
| | | <div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid"> |
| | | |
| | | <el-alert |
| | | class="alert" |
| | | :closable="false" |
| | | v-if="isError" |
| | | title="自定义组件配置信息错误!" |
| | | type="error" |
| | | show-icon |
| | | description="这个自定义页面的地址格式不正确。推荐使用“组件name?param=xxx”(自定义组件)或者“?type=xxx&context=yyy&pparam=zzz”(UI引擎)这2种形式"> |
| | | </el-alert> |
| | | <component v-else :is="currentComponent" |
| | | :btmType="btmType" |
| | | :context="context" |
| | | :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' |
| | | import {validatenull} from "@/util/validate"; |
| | | 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: { |
| | | //所在区域是否已显示,针对tab和collapse |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | }, |
| | | data() { |
| | | return {} |
| | | return { |
| | | btmType: '', |
| | | context: '', |
| | | urlParams: {}, |
| | | height: '300px', |
| | | customClass: '', //?type=xxx&context=yyy¶m=zzz 或者 组件name?type=xxx&context=yyy¶m=zzz |
| | | isError: false, //路径解析失败 |
| | | currentComponent: 'UI',//组件name |
| | | } |
| | | }, |
| | | watch: { |
| | | sourceData: { |
| | | handler(newval) { |
| | | //源数据有变化时变更当前区域数据 |
| | | console.log(this.areasName); |
| | | console.log(newval); |
| | | } |
| | | } |
| | | }, |
| | | computed: {}, |
| | | created() { |
| | | |
| | | }, |
| | | mounted() { |
| | | this.componentVO.customClass.split(';').forEach(item=>{ |
| | | if(item.indexOf('web=')==0){ |
| | | this.customClass=item.split('web=')[1]; |
| | | } |
| | | }) |
| | | // 如果路径中存在 '?',则取问号前面部分给 parts |
| | | if (this.customClass.includes('?')) { |
| | | this.currentComponent = this.customClass.split("?")[0]; |
| | | } else { |
| | | this.currentComponent = this.customClass; // 不存在 '?' 整条路径就是 parts |
| | | } |
| | | if(validatenull(this.currentComponent)){ |
| | | this.currentComponent='UI'; |
| | | } |
| | | if (['UI', 'ui'].includes(this.currentComponent) && (this.customClass.indexOf("type=") < 0 || this.customClass.indexOf("context=") < 0)) { |
| | | 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.getHeight(this.$parent); |
| | | }, |
| | | methods: { |
| | | getHeight(el) { |
| | | if (el.$el.clientHeight > 50) { |
| | | this.height = el.$el.clientHeight + 'px'; |
| | | } else { |
| | | this.getHeight(el.$parent); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | <style scoped lang="scss"> |
| | | |
| | | </style> |