vue2-client 1.14.97 → 1.14.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/base-client/components/common/XFormTable/XFormTable.vue +2 -2
- package/src/base-client/components/common/XUploadFilesView/index.vue +485 -485
- package/src/base-client/components/his/XQuestionnaire/XQuestionnaire.vue +10 -16
- package/src/base-client/components/layout/XPageView/RenderRow.vue +88 -88
- package/src/base-client/components/layout/XPageView/XPageView.vue +223 -223
- package/src/base-client/components/layout/XPageView/XTab/XTab.vue +96 -96
- package/src/base-client/components/layout/XPageView/componentTypes.js +22 -22
- package/src/pages/WorkflowDetail/WorkFlowDemo2.vue +70 -1
- package/src/pages/WorkflowDetail/WorkflowPageDetail/LeaveMessage.vue +388 -388
- package/src/pages/XPageViewExample/index.vue +149 -149
- package/src/pages/addressSelect/addressDemo.vue +24 -24
|
@@ -32,8 +32,8 @@ export default {
|
|
|
32
32
|
},
|
|
33
33
|
methods: {
|
|
34
34
|
// 获取配置
|
|
35
|
-
async getData (
|
|
36
|
-
getConfigByName(queryParamsName, 'af-his', res => {
|
|
35
|
+
async getData (conditionData) {
|
|
36
|
+
getConfigByName(this.queryParamsName, 'af-his', res => {
|
|
37
37
|
// 清空旧数据
|
|
38
38
|
this.configs = []
|
|
39
39
|
this.conditionsMap = { ...this.conditionsMap }
|
|
@@ -47,13 +47,14 @@ export default {
|
|
|
47
47
|
})
|
|
48
48
|
})
|
|
49
49
|
},
|
|
50
|
-
customizeEvent (
|
|
50
|
+
customizeEvent (customize, callback) {
|
|
51
51
|
console.log(this.$listeners)
|
|
52
|
-
|
|
52
|
+
console.log(customize)
|
|
53
|
+
if (customize.clickEventName && this.$listeners[customize.clickEventName]) {
|
|
53
54
|
// 交由父级处理
|
|
54
|
-
this.$emit(
|
|
55
|
+
this.$emit(customize.clickEventName, customize, callback)
|
|
55
56
|
} else {
|
|
56
|
-
this.defaultAction(
|
|
57
|
+
this.defaultAction(customize.clickEventName, customize, callback)
|
|
57
58
|
}
|
|
58
59
|
},
|
|
59
60
|
defaultAction (clickEventName, item, callback) {
|
|
@@ -69,17 +70,10 @@ export default {
|
|
|
69
70
|
this.questionnaireItemRefs.delete(config.tmp_key) // 组件卸载时清理
|
|
70
71
|
}
|
|
71
72
|
},
|
|
72
|
-
async init (
|
|
73
|
-
|
|
73
|
+
async init () { // 接收完整条件对象
|
|
74
|
+
this.$emit('init')
|
|
74
75
|
},
|
|
75
|
-
|
|
76
|
-
// this.getData(this.queryParamsName, conditions)
|
|
77
|
-
// // 初始化或更新时
|
|
78
|
-
// this.conditionsMap = {
|
|
79
|
-
// ...this.conditionsMap,
|
|
80
|
-
// [configId]: conditions // 响应式更新
|
|
81
|
-
// }
|
|
82
|
-
// },
|
|
76
|
+
|
|
83
77
|
refreshList (tmpKey, condition) {
|
|
84
78
|
// 更新条件映射
|
|
85
79
|
this.$set(this.conditionsMap, tmpKey, condition)
|
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<a-row
|
|
3
|
-
type="flex"
|
|
4
|
-
:gutter="row.gutter || 0"
|
|
5
|
-
:align="row.align || 'top'"
|
|
6
|
-
:justify="row.justify || 'start'"
|
|
7
|
-
>
|
|
8
|
-
<a-col
|
|
9
|
-
v-for="col in getColumns"
|
|
10
|
-
:key="`page-col-${col.id}`"
|
|
11
|
-
:span="col.span || 24"
|
|
12
|
-
:xs="col.xs"
|
|
13
|
-
:sm="col.sm"
|
|
14
|
-
:md="col.md"
|
|
15
|
-
:lg="col.lg"
|
|
16
|
-
:xl="col.xl"
|
|
17
|
-
:xxl="col.xxl"
|
|
18
|
-
>
|
|
19
|
-
<!-- 行类型，递归渲染子行 -->
|
|
20
|
-
<template v-if="col.type === 'row'">
|
|
21
|
-
<x-page-row-template :template="col.template">
|
|
22
|
-
<render-row
|
|
23
|
-
v-for="(nestedRow, index) in col.children"
|
|
24
|
-
:row="nestedRow"
|
|
25
|
-
:key="`nested-row-${col.id}-${index}`"
|
|
26
|
-
/>
|
|
27
|
-
</x-page-row-template>
|
|
28
|
-
</template>
|
|
29
|
-
|
|
30
|
-
<!-- 组件类型，渲染动态组件 -->
|
|
31
|
-
<template v-else>
|
|
32
|
-
<x-page-row-template :template="col.template">
|
|
33
|
-
<component
|
|
34
|
-
:ref="(el) => registerComponentRef(col.id, el)"
|
|
35
|
-
:is="resolveComponentType(col.type)"
|
|
36
|
-
v-bind="col.props"
|
|
37
|
-
>
|
|
38
|
-
<!-- 如果组件有子组件，递归渲染子行 -->
|
|
39
|
-
<template v-if="col.children && col.children.length">
|
|
40
|
-
<!-- 处理纯文本节点 -->
|
|
41
|
-
<template v-for="(nestedItem, index) in col.children">
|
|
42
|
-
<template v-if="nestedItem.text">{{ nestedItem.text }}</template>
|
|
43
|
-
<render-row
|
|
44
|
-
v-else
|
|
45
|
-
:row="nestedItem"
|
|
46
|
-
:key="`comp-child-${col.id}-${index}`"
|
|
47
|
-
/>
|
|
48
|
-
</template>
|
|
49
|
-
</template>
|
|
50
|
-
</component>
|
|
51
|
-
</x-page-row-template>
|
|
52
|
-
</template>
|
|
53
|
-
</a-col>
|
|
54
|
-
</a-row>
|
|
55
|
-
</template>
|
|
56
|
-
|
|
57
|
-
<script setup>
|
|
58
|
-
import { defineProps, inject, computed } from 'vue'
|
|
59
|
-
import XPageRowTemplate from './XPageRowTemplate.vue'
|
|
60
|
-
|
|
61
|
-
import { resolveComponentType } from './componentTypes'
|
|
62
|
-
|
|
63
|
-
// 注入注册组件方法
|
|
64
|
-
const registerComponent = inject('registerComponent')
|
|
65
|
-
|
|
66
|
-
// 定义属性
|
|
67
|
-
const props = defineProps({
|
|
68
|
-
row: {
|
|
69
|
-
type: Object,
|
|
70
|
-
required: true
|
|
71
|
-
}
|
|
72
|
-
})
|
|
73
|
-
|
|
74
|
-
// 获取列数组
|
|
75
|
-
const getColumns = computed(() => {
|
|
76
|
-
return props.row.type === 'row' ? props.row.children : [props.row]
|
|
77
|
-
})
|
|
78
|
-
|
|
79
|
-
// 注册组件引用
|
|
80
|
-
const registerComponentRef = (id, el) => {
|
|
81
|
-
if (el) {
|
|
82
|
-
registerComponent(id, el)
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
</script>
|
|
86
|
-
|
|
87
|
-
<style scoped lang="less">
|
|
88
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<a-row
|
|
3
|
+
type="flex"
|
|
4
|
+
:gutter="row.gutter || 0"
|
|
5
|
+
:align="row.align || 'top'"
|
|
6
|
+
:justify="row.justify || 'start'"
|
|
7
|
+
>
|
|
8
|
+
<a-col
|
|
9
|
+
v-for="col in getColumns"
|
|
10
|
+
:key="`page-col-${col.id}`"
|
|
11
|
+
:span="col.span || 24"
|
|
12
|
+
:xs="col.xs"
|
|
13
|
+
:sm="col.sm"
|
|
14
|
+
:md="col.md"
|
|
15
|
+
:lg="col.lg"
|
|
16
|
+
:xl="col.xl"
|
|
17
|
+
:xxl="col.xxl"
|
|
18
|
+
>
|
|
19
|
+
<!-- 行类型，递归渲染子行 -->
|
|
20
|
+
<template v-if="col.type === 'row'">
|
|
21
|
+
<x-page-row-template :template="col.template">
|
|
22
|
+
<render-row
|
|
23
|
+
v-for="(nestedRow, index) in col.children"
|
|
24
|
+
:row="nestedRow"
|
|
25
|
+
:key="`nested-row-${col.id}-${index}`"
|
|
26
|
+
/>
|
|
27
|
+
</x-page-row-template>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<!-- 组件类型，渲染动态组件 -->
|
|
31
|
+
<template v-else>
|
|
32
|
+
<x-page-row-template :template="col.template">
|
|
33
|
+
<component
|
|
34
|
+
:ref="(el) => registerComponentRef(col.id, el)"
|
|
35
|
+
:is="resolveComponentType(col.type)"
|
|
36
|
+
v-bind="col.props"
|
|
37
|
+
>
|
|
38
|
+
<!-- 如果组件有子组件，递归渲染子行 -->
|
|
39
|
+
<template v-if="col.children && col.children.length">
|
|
40
|
+
<!-- 处理纯文本节点 -->
|
|
41
|
+
<template v-for="(nestedItem, index) in col.children">
|
|
42
|
+
<template v-if="nestedItem.text">{{ nestedItem.text }}</template>
|
|
43
|
+
<render-row
|
|
44
|
+
v-else
|
|
45
|
+
:row="nestedItem"
|
|
46
|
+
:key="`comp-child-${col.id}-${index}`"
|
|
47
|
+
/>
|
|
48
|
+
</template>
|
|
49
|
+
</template>
|
|
50
|
+
</component>
|
|
51
|
+
</x-page-row-template>
|
|
52
|
+
</template>
|
|
53
|
+
</a-col>
|
|
54
|
+
</a-row>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<script setup>
|
|
58
|
+
import { defineProps, inject, computed } from 'vue'
|
|
59
|
+
import XPageRowTemplate from './XPageRowTemplate.vue'
|
|
60
|
+
|
|
61
|
+
import { resolveComponentType } from './componentTypes'
|
|
62
|
+
|
|
63
|
+
// 注入注册组件方法
|
|
64
|
+
const registerComponent = inject('registerComponent')
|
|
65
|
+
|
|
66
|
+
// 定义属性
|
|
67
|
+
const props = defineProps({
|
|
68
|
+
row: {
|
|
69
|
+
type: Object,
|
|
70
|
+
required: true
|
|
71
|
+
}
|
|
72
|
+
})
|
|
73
|
+
|
|
74
|
+
// 获取列数组
|
|
75
|
+
const getColumns = computed(() => {
|
|
76
|
+
return props.row.type === 'row' ? props.row.children : [props.row]
|
|
77
|
+
})
|
|
78
|
+
|
|
79
|
+
// 注册组件引用
|
|
80
|
+
const registerComponentRef = (id, el) => {
|
|
81
|
+
if (el) {
|
|
82
|
+
registerComponent(id, el)
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<style scoped lang="less">
|
|
88
|
+
</style>
|
|
@@ -1,223 +1,223 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
import { getConfigByName } from '@vue2-client/services/api/common'
|
|
3
|
-
import { reactive, ref, provide } from 'vue'
|
|
4
|
-
import RenderRow from './RenderRow'
|
|
5
|
-
import XErrorView from '@vue2-client/base-client/components/layout/XPageView/XErrorView.vue'
|
|
6
|
-
|
|
7
|
-
// 页面布局配置
|
|
8
|
-
const layout = ref(null)
|
|
9
|
-
|
|
10
|
-
// 加载状态：0-加载中，1-已加载，2-出现错误
|
|
11
|
-
const loadingStatus = {
|
|
12
|
-
LOADING: 0,
|
|
13
|
-
LOADED: 1,
|
|
14
|
-
ERROR: 2
|
|
15
|
-
}
|
|
16
|
-
const loaded = ref(loadingStatus.LOADING)
|
|
17
|
-
|
|
18
|
-
// 组件计数
|
|
19
|
-
const componentTotal = ref(0)
|
|
20
|
-
const registerComponentTotal = ref(0)
|
|
21
|
-
|
|
22
|
-
// 组件注册集合
|
|
23
|
-
const componentRefMap = reactive({})
|
|
24
|
-
|
|
25
|
-
// 数据上下文
|
|
26
|
-
const dataContext = reactive({
|
|
27
|
-
comps: componentRefMap,
|
|
28
|
-
func: {
|
|
29
|
-
getConfigByName
|
|
30
|
-
},
|
|
31
|
-
data: {}
|
|
32
|
-
})
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* 初始化构建页面组件
|
|
36
|
-
*/
|
|
37
|
-
const init = (params) => {
|
|
38
|
-
const { configName, configValue, serviceName } = params
|
|
39
|
-
|
|
40
|
-
// 重置状态
|
|
41
|
-
loaded.value = loadingStatus.LOADING
|
|
42
|
-
componentTotal.value = 0
|
|
43
|
-
registerComponentTotal.value = 0
|
|
44
|
-
Object.keys(componentRefMap).forEach(key => delete componentRefMap[key])
|
|
45
|
-
|
|
46
|
-
const processConfig = (config) => {
|
|
47
|
-
if (!config) {
|
|
48
|
-
loaded.value = loadingStatus.ERROR
|
|
49
|
-
return
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
layout.value = config
|
|
53
|
-
setComponentTotal(layout.value.children)
|
|
54
|
-
loaded.value = loadingStatus.LOADED
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
if (configName) {
|
|
58
|
-
getConfigByName(configName, serviceName, processConfig)
|
|
59
|
-
} else if (configValue) {
|
|
60
|
-
try {
|
|
61
|
-
const config = typeof configValue === 'string' ? JSON.parse(configValue) : configValue
|
|
62
|
-
processConfig(config)
|
|
63
|
-
} catch (error) {
|
|
64
|
-
console.error('配置解析错误:', error)
|
|
65
|
-
loaded.value = loadingStatus.ERROR
|
|
66
|
-
}
|
|
67
|
-
} else {
|
|
68
|
-
loaded.value = loadingStatus.ERROR
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* 注册组件
|
|
74
|
-
*/
|
|
75
|
-
const registerComponent = (name, vm) => {
|
|
76
|
-
if (!vm) return
|
|
77
|
-
|
|
78
|
-
componentRefMap[name] = vm
|
|
79
|
-
registerComponentTotal.value++
|
|
80
|
-
console.debug(`总组件数量：${componentTotal.value}，已注册数量：${registerComponentTotal.value}`)
|
|
81
|
-
|
|
82
|
-
// 所有组件都已注册完成
|
|
83
|
-
if (registerComponentTotal.value >= componentTotal.value) {
|
|
84
|
-
registerEvents(layout.value.children)
|
|
85
|
-
// 初始化页面
|
|
86
|
-
initPage()
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
provide('registerComponent', registerComponent)
|
|
90
|
-
// 提供数据上下文给子组件
|
|
91
|
-
provide('dataContext', dataContext)
|
|
92
|
-
|
|
93
|
-
/**
|
|
94
|
-
* 初始化页面
|
|
95
|
-
*/
|
|
96
|
-
const initPage = () => {
|
|
97
|
-
if (!layout.value?.onMounted) return
|
|
98
|
-
|
|
99
|
-
console.info('开始初始化页面')
|
|
100
|
-
try {
|
|
101
|
-
// 使用 Function 构造函数替代 eval
|
|
102
|
-
// eslint-disable-next-line no-new-func
|
|
103
|
-
const onMountedFun = new Function('data', `return (${layout.value.onMounted})(data)`)
|
|
104
|
-
onMountedFun(dataContext)
|
|
105
|
-
} catch (error) {
|
|
106
|
-
console.error('页面初始化错误:', error)
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* 设置需要注册的组件总数
|
|
112
|
-
*/
|
|
113
|
-
const setComponentTotal = (children) => {
|
|
114
|
-
if (!children?.length) return
|
|
115
|
-
|
|
116
|
-
children.forEach((child) => {
|
|
117
|
-
// 如果不是row和text类型，追加组件数量
|
|
118
|
-
if (child.type !== 'row' && child.type !== 'text') {
|
|
119
|
-
componentTotal.value++
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
// 递归追加子组件数量
|
|
123
|
-
if (child.children?.length) {
|
|
124
|
-
setComponentTotal(child.children)
|
|
125
|
-
}
|
|
126
|
-
})
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
/**
|
|
130
|
-
* 注册组件事件
|
|
131
|
-
*/
|
|
132
|
-
const registerEvents = (children) => {
|
|
133
|
-
if (!children?.length) return
|
|
134
|
-
|
|
135
|
-
children.forEach((child) => {
|
|
136
|
-
// 如果有事件，注册它们
|
|
137
|
-
if (child.event) {
|
|
138
|
-
Object.entries(child.event).forEach(([eventName, handler]) => {
|
|
139
|
-
try {
|
|
140
|
-
// 使用 Function 构造函数替代 eval
|
|
141
|
-
// eslint-disable-next-line no-new-func
|
|
142
|
-
const eventHandler = new Function('...args', `return (${handler})(...args)`)
|
|
143
|
-
const componentInstance = componentRefMap[child.id]
|
|
144
|
-
|
|
145
|
-
if (componentInstance) {
|
|
146
|
-
componentInstance.$on(eventName, (...args) => {
|
|
147
|
-
eventHandler.call(componentInstance, ...args, dataContext)
|
|
148
|
-
})
|
|
149
|
-
}
|
|
150
|
-
} catch (error) {
|
|
151
|
-
console.error(`注册事件 ${eventName} 错误:`, error)
|
|
152
|
-
}
|
|
153
|
-
})
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
// 递归注册子组件的事件
|
|
157
|
-
if (child.children?.length) {
|
|
158
|
-
registerEvents(child.children)
|
|
159
|
-
}
|
|
160
|
-
})
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
// 导出组件接口
|
|
164
|
-
defineExpose({ init })
|
|
165
|
-
</script>
|
|
166
|
-
|
|
167
|
-
<template>
|
|
168
|
-
<a-row
|
|
169
|
-
type="flex"
|
|
170
|
-
:gutter="layout?.gutter || 0"
|
|
171
|
-
:align="layout?.align || 'top'"
|
|
172
|
-
:justify="layout?.justify || 'start'"
|
|
173
|
-
class="liuli-page">
|
|
174
|
-
<template v-if="loaded === loadingStatus.LOADED">
|
|
175
|
-
<template v-if="layout.children?.length">
|
|
176
|
-
<a-col v-for="row in layout.children" :key="`page-col-${row.id}`" :span="24">
|
|
177
|
-
<render-row :row="row"/>
|
|
178
|
-
</a-col>
|
|
179
|
-
</template>
|
|
180
|
-
<template v-else>
|
|
181
|
-
<div class="liuli-page__empty">
|
|
182
|
-
<a-empty description="无页面内容" />
|
|
183
|
-
</div>
|
|
184
|
-
</template>
|
|
185
|
-
</template>
|
|
186
|
-
|
|
187
|
-
<template v-else-if="loaded === loadingStatus.LOADING">
|
|
188
|
-
<div class="liuli-page__loading">
|
|
189
|
-
<a-spin tip="页面加载中..." />
|
|
190
|
-
</div>
|
|
191
|
-
</template>
|
|
192
|
-
|
|
193
|
-
<template v-else>
|
|
194
|
-
<div class="liuli-page__error">
|
|
195
|
-
<XErrorView />
|
|
196
|
-
</div>
|
|
197
|
-
</template>
|
|
198
|
-
</a-row>
|
|
199
|
-
</template>
|
|
200
|
-
|
|
201
|
-
<style scoped lang="less">
|
|
202
|
-
.liuli-page {
|
|
203
|
-
position: relative;
|
|
204
|
-
width: 100%;
|
|
205
|
-
height: 100%;
|
|
206
|
-
|
|
207
|
-
&__content {
|
|
208
|
-
min-height: 100px;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
&__loading, &__error, &__empty {
|
|
212
|
-
display: flex;
|
|
213
|
-
width: 100%;
|
|
214
|
-
justify-content: center;
|
|
215
|
-
align-items: center;
|
|
216
|
-
min-height: 200px;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
&__error {
|
|
220
|
-
width: 100%;
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
</style>
|
|
1
|
+
<script setup>
|
|
2
|
+
import { getConfigByName } from '@vue2-client/services/api/common'
|
|
3
|
+
import { reactive, ref, provide } from 'vue'
|
|
4
|
+
import RenderRow from './RenderRow'
|
|
5
|
+
import XErrorView from '@vue2-client/base-client/components/layout/XPageView/XErrorView.vue'
|
|
6
|
+
|
|
7
|
+
// 页面布局配置
|
|
8
|
+
const layout = ref(null)
|
|
9
|
+
|
|
10
|
+
// 加载状态：0-加载中，1-已加载，2-出现错误
|
|
11
|
+
const loadingStatus = {
|
|
12
|
+
LOADING: 0,
|
|
13
|
+
LOADED: 1,
|
|
14
|
+
ERROR: 2
|
|
15
|
+
}
|
|
16
|
+
const loaded = ref(loadingStatus.LOADING)
|
|
17
|
+
|
|
18
|
+
// 组件计数
|
|
19
|
+
const componentTotal = ref(0)
|
|
20
|
+
const registerComponentTotal = ref(0)
|
|
21
|
+
|
|
22
|
+
// 组件注册集合
|
|
23
|
+
const componentRefMap = reactive({})
|
|
24
|
+
|
|
25
|
+
// 数据上下文
|
|
26
|
+
const dataContext = reactive({
|
|
27
|
+
comps: componentRefMap,
|
|
28
|
+
func: {
|
|
29
|
+
getConfigByName
|
|
30
|
+
},
|
|
31
|
+
data: {}
|
|
32
|
+
})
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* 初始化构建页面组件
|
|
36
|
+
*/
|
|
37
|
+
const init = (params) => {
|
|
38
|
+
const { configName, configValue, serviceName } = params
|
|
39
|
+
|
|
40
|
+
// 重置状态
|
|
41
|
+
loaded.value = loadingStatus.LOADING
|
|
42
|
+
componentTotal.value = 0
|
|
43
|
+
registerComponentTotal.value = 0
|
|
44
|
+
Object.keys(componentRefMap).forEach(key => delete componentRefMap[key])
|
|
45
|
+
|
|
46
|
+
const processConfig = (config) => {
|
|
47
|
+
if (!config) {
|
|
48
|
+
loaded.value = loadingStatus.ERROR
|
|
49
|
+
return
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
layout.value = config
|
|
53
|
+
setComponentTotal(layout.value.children)
|
|
54
|
+
loaded.value = loadingStatus.LOADED
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
if (configName) {
|
|
58
|
+
getConfigByName(configName, serviceName, processConfig)
|
|
59
|
+
} else if (configValue) {
|
|
60
|
+
try {
|
|
61
|
+
const config = typeof configValue === 'string' ? JSON.parse(configValue) : configValue
|
|
62
|
+
processConfig(config)
|
|
63
|
+
} catch (error) {
|
|
64
|
+
console.error('配置解析错误:', error)
|
|
65
|
+
loaded.value = loadingStatus.ERROR
|
|
66
|
+
}
|
|
67
|
+
} else {
|
|
68
|
+
loaded.value = loadingStatus.ERROR
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* 注册组件
|
|
74
|
+
*/
|
|
75
|
+
const registerComponent = (name, vm) => {
|
|
76
|
+
if (!vm) return
|
|
77
|
+
|
|
78
|
+
componentRefMap[name] = vm
|
|
79
|
+
registerComponentTotal.value++
|
|
80
|
+
console.debug(`总组件数量：${componentTotal.value}，已注册数量：${registerComponentTotal.value}`)
|
|
81
|
+
|
|
82
|
+
// 所有组件都已注册完成
|
|
83
|
+
if (registerComponentTotal.value >= componentTotal.value) {
|
|
84
|
+
registerEvents(layout.value.children)
|
|
85
|
+
// 初始化页面
|
|
86
|
+
initPage()
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
provide('registerComponent', registerComponent)
|
|
90
|
+
// 提供数据上下文给子组件
|
|
91
|
+
provide('dataContext', dataContext)
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* 初始化页面
|
|
95
|
+
*/
|
|
96
|
+
const initPage = () => {
|
|
97
|
+
if (!layout.value?.onMounted) return
|
|
98
|
+
|
|
99
|
+
console.info('开始初始化页面')
|
|
100
|
+
try {
|
|
101
|
+
// 使用 Function 构造函数替代 eval
|
|
102
|
+
// eslint-disable-next-line no-new-func
|
|
103
|
+
const onMountedFun = new Function('data', `return (${layout.value.onMounted})(data)`)
|
|
104
|
+
onMountedFun(dataContext)
|
|
105
|
+
} catch (error) {
|
|
106
|
+
console.error('页面初始化错误:', error)
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* 设置需要注册的组件总数
|
|
112
|
+
*/
|
|
113
|
+
const setComponentTotal = (children) => {
|
|
114
|
+
if (!children?.length) return
|
|
115
|
+
|
|
116
|
+
children.forEach((child) => {
|
|
117
|
+
// 如果不是row和text类型，追加组件数量
|
|
118
|
+
if (child.type !== 'row' && child.type !== 'text') {
|
|
119
|
+
componentTotal.value++
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// 递归追加子组件数量
|
|
123
|
+
if (child.children?.length) {
|
|
124
|
+
setComponentTotal(child.children)
|
|
125
|
+
}
|
|
126
|
+
})
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* 注册组件事件
|
|
131
|
+
*/
|
|
132
|
+
const registerEvents = (children) => {
|
|
133
|
+
if (!children?.length) return
|
|
134
|
+
|
|
135
|
+
children.forEach((child) => {
|
|
136
|
+
// 如果有事件，注册它们
|
|
137
|
+
if (child.event) {
|
|
138
|
+
Object.entries(child.event).forEach(([eventName, handler]) => {
|
|
139
|
+
try {
|
|
140
|
+
// 使用 Function 构造函数替代 eval
|
|
141
|
+
// eslint-disable-next-line no-new-func
|
|
142
|
+
const eventHandler = new Function('...args', `return (${handler})(...args)`)
|
|
143
|
+
const componentInstance = componentRefMap[child.id]
|
|
144
|
+
|
|
145
|
+
if (componentInstance) {
|
|
146
|
+
componentInstance.$on(eventName, (...args) => {
|
|
147
|
+
eventHandler.call(componentInstance, ...args, dataContext)
|
|
148
|
+
})
|
|
149
|
+
}
|
|
150
|
+
} catch (error) {
|
|
151
|
+
console.error(`注册事件 ${eventName} 错误:`, error)
|
|
152
|
+
}
|
|
153
|
+
})
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
// 递归注册子组件的事件
|
|
157
|
+
if (child.children?.length) {
|
|
158
|
+
registerEvents(child.children)
|
|
159
|
+
}
|
|
160
|
+
})
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// 导出组件接口
|
|
164
|
+
defineExpose({ init })
|
|
165
|
+
</script>
|
|
166
|
+
|
|
167
|
+
<template>
|
|
168
|
+
<a-row
|
|
169
|
+
type="flex"
|
|
170
|
+
:gutter="layout?.gutter || 0"
|
|
171
|
+
:align="layout?.align || 'top'"
|
|
172
|
+
:justify="layout?.justify || 'start'"
|
|
173
|
+
class="liuli-page">
|
|
174
|
+
<template v-if="loaded === loadingStatus.LOADED">
|
|
175
|
+
<template v-if="layout.children?.length">
|
|
176
|
+
<a-col v-for="row in layout.children" :key="`page-col-${row.id}`" :span="24">
|
|
177
|
+
<render-row :row="row"/>
|
|
178
|
+
</a-col>
|
|
179
|
+
</template>
|
|
180
|
+
<template v-else>
|
|
181
|
+
<div class="liuli-page__empty">
|
|
182
|
+
<a-empty description="无页面内容" />
|
|
183
|
+
</div>
|
|
184
|
+
</template>
|
|
185
|
+
</template>
|
|
186
|
+
|
|
187
|
+
<template v-else-if="loaded === loadingStatus.LOADING">
|
|
188
|
+
<div class="liuli-page__loading">
|
|
189
|
+
<a-spin tip="页面加载中..." />
|
|
190
|
+
</div>
|
|
191
|
+
</template>
|
|
192
|
+
|
|
193
|
+
<template v-else>
|
|
194
|
+
<div class="liuli-page__error">
|
|
195
|
+
<XErrorView />
|
|
196
|
+
</div>
|
|
197
|
+
</template>
|
|
198
|
+
</a-row>
|
|
199
|
+
</template>
|
|
200
|
+
|
|
201
|
+
<style scoped lang="less">
|
|
202
|
+
.liuli-page {
|
|
203
|
+
position: relative;
|
|
204
|
+
width: 100%;
|
|
205
|
+
height: 100%;
|
|
206
|
+
|
|
207
|
+
&__content {
|
|
208
|
+
min-height: 100px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
&__loading, &__error, &__empty {
|
|
212
|
+
display: flex;
|
|
213
|
+
width: 100%;
|
|
214
|
+
justify-content: center;
|
|
215
|
+
align-items: center;
|
|
216
|
+
min-height: 200px;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
&__error {
|
|
220
|
+
width: 100%;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
</style>
|