1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<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: {
    //ui上下文的业务类型（或链接类型）
    uiBtmType: {
      type: String
    },
    //ui上下文
    uiContext:{
      type: String
    },
    componentVO: {
      type: Object,
      default: {}
    },
    inDialog: {
      type: Boolean,
      default: false
    },
    canEdit:{
      //内容是否可编辑
      type:Boolean,
      default:false
    },
    areasName: {
      type: String,
      default: ''
    },
    sourceData: {
      //所属区域的上一区域选中数据
      type: Object,
      default: {}
    },
    dataStore: {
      //弹窗时按钮所属区域选中数据
      type: Array,
      default: []
    },
    paramVOS: {
      type: Object,
      default: {}
    },
    isShow: {
      //所在区域是否已显示，针对tab和collapse
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      btmType: '',
      context: '',
      urlParams: {},
      height: '300px',
      customClass: '', //?type=xxx&context=yyy&param=zzz  或者 组件name?type=xxx&context=yyy&param=zzz
      isError: false, //路径解析失败
      ComponentUrl:'base/UIContentViewerInDialog',
      currentComponent: null
    }
  },
  watch: {
    sourceData: {
      handler(newval) {
        //源数据有变化时变更当前区域数据
        console.log(this.areasName);
        console.log(newval);
      },
      deep: true,
      immediate: true
    }
  },
  computed: {},
  created() {
    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.ComponentUrl = this.customClass.split("?")[0];
      urlParams = queryStringToObject(this.customClass);
    } else {
      this.ComponentUrl = this.customClass; // 不存在 '?' 整条路径就是 parts
    }
    if(validatenull(this.ComponentUrl) || ['ui', 'UI', 'base','bs'].includes(this.ComponentUrl)){
      this.ComponentUrl='views/base/UIContentViewerInDialog';
    }else if(this.ComponentUrl.indexOf('views/')===-1){
      this.ComponentUrl='views/custom-ui/'+this.ComponentUrl;
    }
 
    if (this.ComponentUrl=='base/UIContentViewerInDialog' && (!urlParams.type || !urlParams.context)) {
      this.isError = true;
      return;
    }
 
    this.btmType = urlParams.type;
    this.context = urlParams.context;
    this.urlParams = Object.assign({},this.paramVOS, urlParams)
    this.loadCompoent();
  },
  mounted() {
    //this.getHeight(this.$parent);
  },
  methods: {
    loadCompoent(){
      // 动态导入组件
      import(`@/${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';
      } else {
        this.getHeight(el.$parent);
      }
    }
  }
}
</script>
 
<style scoped lang="scss">
 
</style>