vue2-client 1.14.37 → 1.14.39
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/AmapMarker/index.js +3 -3
- package/src/base-client/components/common/XDescriptions/XDescriptions.vue +174 -174
- package/src/base-client/components/common/XDescriptions/XDescriptionsGroup.vue +314 -314
- package/src/base-client/components/common/XDetailsView/index.js +3 -3
- package/src/base-client/components/common/XFormGroupDetails/index.js +3 -3
- package/src/base-client/components/common/XReport/XReport.vue +1 -1
- package/src/base-client/components/common/XSimpleDescriptions/XSimpleDescriptions.vue +166 -166
- package/src/base-client/components/layout/XPageView/XPageView.vue +155 -155
- package/src/config/CreateQueryConfig.js +325 -325
- package/src/pages/WorkflowDetail/WorkFlowDemo.vue +1 -1
- package/src/pages/XTreeOneProExample/index.vue +67 -67
- package/src/pages/userInfoDetailManage/FillCardRecordQuery/index.vue +12 -6
- package/src/pages/userInfoDetailManage/FillGasRecordQuery/index.vue +12 -6
- package/src/pages/userInfoDetailManage/MachineRecordQuery/index.vue +11 -5
- package/src/pages/userInfoDetailManage/OtherChargeRecordQuery/index.vue +12 -6
- package/src/pages/userInfoDetailManage/UserChargeRecordQuery/index.vue +12 -7
- package/src/pages/userInfoDetailManage/UserHandRecordQuery/index.vue +6 -5
- package/src/pages/userInfoDetailManage/UserRecordQuery/index.vue +11 -5
- package/src/pages/userInfoDetailManage/index.vue +3 -3
|
@@ -1,166 +1,166 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div>
|
|
3
|
-
<a-row type="flex" justfy="space-around">
|
|
4
|
-
<template v-for="(item, index) in config">
|
|
5
|
-
<!-- 展示项 -->
|
|
6
|
-
<a-col :key="'col' + index" :span="Math.floor(24 / config.length)">
|
|
7
|
-
<div class="item">
|
|
8
|
-
<!-- 标题 -->
|
|
9
|
-
<p class="label">{{ item.label }}</p>
|
|
10
|
-
<!-- 内容 - 进度条 -->
|
|
11
|
-
<template v-if="item.type === 'percent'">
|
|
12
|
-
<p class="value" :style="'color: ' + determineColor(data[item.key])">{{ data[item.key] }}%</p>
|
|
13
|
-
</template>
|
|
14
|
-
<!-- 内容 - 非进度条 -->
|
|
15
|
-
<template v-else>
|
|
16
|
-
<p class="value" :style="item.style ? item.style : ''">{{ data[item.key] }}</p>
|
|
17
|
-
</template>
|
|
18
|
-
</div>
|
|
19
|
-
</a-col>
|
|
20
|
-
<!-- 分割线 -->
|
|
21
|
-
<a-col :key="'col' + index + 'after'" :span="1" v-if="index !== config.length - 1" class="divider-col">
|
|
22
|
-
<a-divider type="vertical" class="divider"/>
|
|
23
|
-
</a-col>
|
|
24
|
-
</template>
|
|
25
|
-
</a-row>
|
|
26
|
-
</div>
|
|
27
|
-
</template>
|
|
28
|
-
|
|
29
|
-
<script>
|
|
30
|
-
|
|
31
|
-
import { getConfigByName } from '@vue2-client/services/api/common'
|
|
32
|
-
|
|
33
|
-
export default {
|
|
34
|
-
name: 'XSimpleDescriptions',
|
|
35
|
-
props: {
|
|
36
|
-
// 配置
|
|
37
|
-
dataConfig: {
|
|
38
|
-
type: Array,
|
|
39
|
-
default: undefined
|
|
40
|
-
},
|
|
41
|
-
// 数据
|
|
42
|
-
dataContent: {
|
|
43
|
-
type: Object,
|
|
44
|
-
default: undefined
|
|
45
|
-
},
|
|
46
|
-
// 配置名
|
|
47
|
-
dataConfigName: {
|
|
48
|
-
type: String,
|
|
49
|
-
default: undefined
|
|
50
|
-
},
|
|
51
|
-
// 服务名
|
|
52
|
-
serviceName: {
|
|
53
|
-
type: String,
|
|
54
|
-
default: process.env.VUE_APP_SYSTEM_NAME
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
data () {
|
|
58
|
-
return {
|
|
59
|
-
// 配置
|
|
60
|
-
config: [],
|
|
61
|
-
// 数据
|
|
62
|
-
data: {},
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
mounted () {
|
|
66
|
-
// 初始化配置
|
|
67
|
-
if (this.dataConfig) {
|
|
68
|
-
this.config = this.dataConfig
|
|
69
|
-
} else if (this.dataConfigName) {
|
|
70
|
-
getConfigByName(this.dataConfigName, this.serviceName, (res) => {
|
|
71
|
-
this.config = res.config
|
|
72
|
-
})
|
|
73
|
-
} else {
|
|
74
|
-
this.config = [
|
|
75
|
-
{
|
|
76
|
-
label: '未能正确获取配置',
|
|
77
|
-
key: 'totalUser'
|
|
78
|
-
},
|
|
79
|
-
{
|
|
80
|
-
label: '未能正确获取配置',
|
|
81
|
-
key: 'totalResidentArea'
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
label: '未能正确获取配置',
|
|
85
|
-
key: 'doneNum'
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
label: '未能正确获取配置',
|
|
89
|
-
key: 'todoNum'
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
label: '未能正确获取配置',
|
|
93
|
-
key: 'ratio',
|
|
94
|
-
type: 'percent'
|
|
95
|
-
}
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
// 初始化数据
|
|
100
|
-
if (this.dataContent) {
|
|
101
|
-
this.data = this.dataContent
|
|
102
|
-
} else {
|
|
103
|
-
this.data = {
|
|
104
|
-
totalUser: 0,
|
|
105
|
-
totalResidentArea: 0,
|
|
106
|
-
doneNum: 0,
|
|
107
|
-
todoNum: 0,
|
|
108
|
-
ratio: 20
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
},
|
|
112
|
-
methods: {
|
|
113
|
-
// 根据完成率决定颜色
|
|
114
|
-
determineColor (ratio) {
|
|
115
|
-
let result
|
|
116
|
-
if (ratio >= 90) {
|
|
117
|
-
result = 'rgb( 1,245, 38 )'
|
|
118
|
-
} else if (ratio >= 75) {
|
|
119
|
-
result = 'rgb( 139,245, 0)'
|
|
120
|
-
} else if (ratio >= 40) {
|
|
121
|
-
result = 'rgb(245,163, 0)'
|
|
122
|
-
} else if (ratio >= 20) {
|
|
123
|
-
result = 'rgb(244, 96, 0)'
|
|
124
|
-
} else {
|
|
125
|
-
result = 'rgb(255, 0, 0)'
|
|
126
|
-
}
|
|
127
|
-
return result
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
watch: {
|
|
131
|
-
dataContent: {
|
|
132
|
-
handler (newValue) {
|
|
133
|
-
this.data = newValue
|
|
134
|
-
},
|
|
135
|
-
deep: true
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
</script>
|
|
140
|
-
|
|
141
|
-
<style lang="less" scoped>
|
|
142
|
-
.item {
|
|
143
|
-
padding: 5%;
|
|
144
|
-
|
|
145
|
-
.label {
|
|
146
|
-
color: rgba(117, 117, 117, 0.8);
|
|
147
|
-
text-align: center;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.value {
|
|
151
|
-
color: rgb( 51,157,255 );
|
|
152
|
-
font-size: 1.6em;
|
|
153
|
-
text-align: center;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.divider-col {
|
|
158
|
-
display: flex;
|
|
159
|
-
justify-content: center;
|
|
160
|
-
|
|
161
|
-
.divider {
|
|
162
|
-
margin-top: 35%;
|
|
163
|
-
height: 40px;
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<a-row type="flex" justfy="space-around">
|
|
4
|
+
<template v-for="(item, index) in config">
|
|
5
|
+
<!-- 展示项 -->
|
|
6
|
+
<a-col :key="'col' + index" :span="Math.floor(24 / config.length)">
|
|
7
|
+
<div class="item">
|
|
8
|
+
<!-- 标题 -->
|
|
9
|
+
<p class="label">{{ item.label }}</p>
|
|
10
|
+
<!-- 内容 - 进度条 -->
|
|
11
|
+
<template v-if="item.type === 'percent'">
|
|
12
|
+
<p class="value" :style="'color: ' + determineColor(data[item.key])">{{ data[item.key] }}%</p>
|
|
13
|
+
</template>
|
|
14
|
+
<!-- 内容 - 非进度条 -->
|
|
15
|
+
<template v-else>
|
|
16
|
+
<p class="value" :style="item.style ? item.style : ''">{{ data[item.key] }}</p>
|
|
17
|
+
</template>
|
|
18
|
+
</div>
|
|
19
|
+
</a-col>
|
|
20
|
+
<!-- 分割线 -->
|
|
21
|
+
<a-col :key="'col' + index + 'after'" :span="1" v-if="index !== config.length - 1" class="divider-col">
|
|
22
|
+
<a-divider type="vertical" class="divider"/>
|
|
23
|
+
</a-col>
|
|
24
|
+
</template>
|
|
25
|
+
</a-row>
|
|
26
|
+
</div>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script>
|
|
30
|
+
|
|
31
|
+
import { getConfigByName } from '@vue2-client/services/api/common'
|
|
32
|
+
|
|
33
|
+
export default {
|
|
34
|
+
name: 'XSimpleDescriptions',
|
|
35
|
+
props: {
|
|
36
|
+
// 配置
|
|
37
|
+
dataConfig: {
|
|
38
|
+
type: Array,
|
|
39
|
+
default: undefined
|
|
40
|
+
},
|
|
41
|
+
// 数据
|
|
42
|
+
dataContent: {
|
|
43
|
+
type: Object,
|
|
44
|
+
default: undefined
|
|
45
|
+
},
|
|
46
|
+
// 配置名
|
|
47
|
+
dataConfigName: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: undefined
|
|
50
|
+
},
|
|
51
|
+
// 服务名
|
|
52
|
+
serviceName: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: process.env.VUE_APP_SYSTEM_NAME
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
data () {
|
|
58
|
+
return {
|
|
59
|
+
// 配置
|
|
60
|
+
config: [],
|
|
61
|
+
// 数据
|
|
62
|
+
data: {},
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
mounted () {
|
|
66
|
+
// 初始化配置
|
|
67
|
+
if (this.dataConfig) {
|
|
68
|
+
this.config = this.dataConfig
|
|
69
|
+
} else if (this.dataConfigName) {
|
|
70
|
+
getConfigByName(this.dataConfigName, this.serviceName, (res) => {
|
|
71
|
+
this.config = res.config
|
|
72
|
+
})
|
|
73
|
+
} else {
|
|
74
|
+
this.config = [
|
|
75
|
+
{
|
|
76
|
+
label: '未能正确获取配置',
|
|
77
|
+
key: 'totalUser'
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
label: '未能正确获取配置',
|
|
81
|
+
key: 'totalResidentArea'
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
label: '未能正确获取配置',
|
|
85
|
+
key: 'doneNum'
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
label: '未能正确获取配置',
|
|
89
|
+
key: 'todoNum'
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
label: '未能正确获取配置',
|
|
93
|
+
key: 'ratio',
|
|
94
|
+
type: 'percent'
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// 初始化数据
|
|
100
|
+
if (this.dataContent) {
|
|
101
|
+
this.data = this.dataContent
|
|
102
|
+
} else {
|
|
103
|
+
this.data = {
|
|
104
|
+
totalUser: 0,
|
|
105
|
+
totalResidentArea: 0,
|
|
106
|
+
doneNum: 0,
|
|
107
|
+
todoNum: 0,
|
|
108
|
+
ratio: 20
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
methods: {
|
|
113
|
+
// 根据完成率决定颜色
|
|
114
|
+
determineColor (ratio) {
|
|
115
|
+
let result
|
|
116
|
+
if (ratio >= 90) {
|
|
117
|
+
result = 'rgb( 1,245, 38 )'
|
|
118
|
+
} else if (ratio >= 75) {
|
|
119
|
+
result = 'rgb( 139,245, 0)'
|
|
120
|
+
} else if (ratio >= 40) {
|
|
121
|
+
result = 'rgb(245,163, 0)'
|
|
122
|
+
} else if (ratio >= 20) {
|
|
123
|
+
result = 'rgb(244, 96, 0)'
|
|
124
|
+
} else {
|
|
125
|
+
result = 'rgb(255, 0, 0)'
|
|
126
|
+
}
|
|
127
|
+
return result
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
watch: {
|
|
131
|
+
dataContent: {
|
|
132
|
+
handler (newValue) {
|
|
133
|
+
this.data = newValue
|
|
134
|
+
},
|
|
135
|
+
deep: true
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
</script>
|
|
140
|
+
|
|
141
|
+
<style lang="less" scoped>
|
|
142
|
+
.item {
|
|
143
|
+
padding: 5%;
|
|
144
|
+
|
|
145
|
+
.label {
|
|
146
|
+
color: rgba(117, 117, 117, 0.8);
|
|
147
|
+
text-align: center;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.value {
|
|
151
|
+
color: rgb( 51,157,255 );
|
|
152
|
+
font-size: 1.6em;
|
|
153
|
+
text-align: center;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.divider-col {
|
|
158
|
+
display: flex;
|
|
159
|
+
justify-content: center;
|
|
160
|
+
|
|
161
|
+
.divider {
|
|
162
|
+
margin-top: 35%;
|
|
163
|
+
height: 40px;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
</style>
|
|
@@ -1,155 +1,155 @@
|
|
|
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 Exp500 from '@vue2-client/pages/exception/500.vue'
|
|
6
|
-
|
|
7
|
-
const layout = ref(null)
|
|
8
|
-
|
|
9
|
-
// 加载状态,0:加载中,1:已加载,2:出现错误
|
|
10
|
-
const loaded = ref(0)
|
|
11
|
-
|
|
12
|
-
// 声明组件总数
|
|
13
|
-
const componentTotal = ref(0)
|
|
14
|
-
|
|
15
|
-
// 注册组件总数
|
|
16
|
-
const registerComponentTotal = ref(0)
|
|
17
|
-
|
|
18
|
-
// 组件注册集
|
|
19
|
-
const componentRefMap = reactive({})
|
|
20
|
-
|
|
21
|
-
// 通用参数
|
|
22
|
-
const data = {
|
|
23
|
-
comps: componentRefMap,
|
|
24
|
-
func: {
|
|
25
|
-
getConfigByName: getConfigByName
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* 初始化构建页面组件
|
|
31
|
-
* @param params
|
|
32
|
-
*/
|
|
33
|
-
function init (params) {
|
|
34
|
-
const {
|
|
35
|
-
configName,
|
|
36
|
-
configValue,
|
|
37
|
-
serviceName
|
|
38
|
-
} = params
|
|
39
|
-
loaded.value = 0
|
|
40
|
-
const getConfigAfter = (res) => {
|
|
41
|
-
if (res == null) {
|
|
42
|
-
loaded.value = 2
|
|
43
|
-
return
|
|
44
|
-
}
|
|
45
|
-
layout.value = res
|
|
46
|
-
// 设置组件总量
|
|
47
|
-
setComponentTotal(layout.value.children)
|
|
48
|
-
loaded.value = 1
|
|
49
|
-
}
|
|
50
|
-
if (configName) {
|
|
51
|
-
getConfigByName(configName, serviceName, getConfigAfter)
|
|
52
|
-
} else {
|
|
53
|
-
getConfigAfter(JSON.parse(configValue))
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* 注册组件
|
|
59
|
-
* @param name 组件名称
|
|
60
|
-
* @param vm 组件实例
|
|
61
|
-
*/
|
|
62
|
-
function registerComponent (name, vm) {
|
|
63
|
-
componentRefMap[name] = vm
|
|
64
|
-
registerComponentTotal.value = registerComponentTotal.value + 1
|
|
65
|
-
console.info(`总组件数量:${componentTotal.value},已注册数量:${registerComponentTotal.value}`)
|
|
66
|
-
// 初始化页面
|
|
67
|
-
initPage()
|
|
68
|
-
if (registerComponentTotal.value >= componentTotal.value) {
|
|
69
|
-
// 注册事件
|
|
70
|
-
registerEvents(layout.value.children)
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
provide('registerComponent', registerComponent)
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* 初始化页面
|
|
77
|
-
*/
|
|
78
|
-
function initPage () {
|
|
79
|
-
if (layout.value.onMounted) {
|
|
80
|
-
// eslint-disable-next-line no-eval
|
|
81
|
-
const onMountedFun = eval('(' + layout.value.onMounted + ')')
|
|
82
|
-
onMountedFun(data)
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* 设置需要注册的组件总数
|
|
88
|
-
* @param children 组件集合
|
|
89
|
-
*/
|
|
90
|
-
function setComponentTotal (children) {
|
|
91
|
-
children.forEach((child) => {
|
|
92
|
-
// 如果不是row类型,追加组件数量
|
|
93
|
-
if (child.type !== 'row') {
|
|
94
|
-
componentTotal.value = componentTotal.value + 1
|
|
95
|
-
}
|
|
96
|
-
// 递归追加子组件数量
|
|
97
|
-
if (child.children) {
|
|
98
|
-
setComponentTotal(child.children)
|
|
99
|
-
}
|
|
100
|
-
})
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* 注册组件事件
|
|
105
|
-
* @param children 组件集合
|
|
106
|
-
*/
|
|
107
|
-
function registerEvents (children) {
|
|
108
|
-
children.forEach((child) => {
|
|
109
|
-
// 如果有事件,注册它们
|
|
110
|
-
if (child.event) {
|
|
111
|
-
Object.entries(child.event).forEach(([eventName, handler]) => {
|
|
112
|
-
// eslint-disable-next-line no-eval
|
|
113
|
-
const eventHandler = eval('(' + handler + ')')
|
|
114
|
-
const componentInstance = componentRefMap[child.id]
|
|
115
|
-
if (componentInstance) {
|
|
116
|
-
// 创建一个包装函数以传递额外参数
|
|
117
|
-
const wrappedHandler = function (...args) {
|
|
118
|
-
// 这里可以传递额外的参数,例如:
|
|
119
|
-
eventHandler.call(componentInstance, ...args, data)
|
|
120
|
-
}
|
|
121
|
-
componentInstance.$on(eventName, wrappedHandler)
|
|
122
|
-
}
|
|
123
|
-
})
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
// 递归注册子组件的事件
|
|
127
|
-
if (child.children) {
|
|
128
|
-
registerEvents(child.children)
|
|
129
|
-
}
|
|
130
|
-
})
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
defineExpose({
|
|
134
|
-
init
|
|
135
|
-
})
|
|
136
|
-
|
|
137
|
-
</script>
|
|
138
|
-
|
|
139
|
-
<template>
|
|
140
|
-
<div class="liuli_page">
|
|
141
|
-
<div class="liuli_page_main" v-if="loaded === 1">
|
|
142
|
-
<render-row
|
|
143
|
-
v-for="row in layout.children"
|
|
144
|
-
:key="row.id"
|
|
145
|
-
:row="row"
|
|
146
|
-
/>
|
|
147
|
-
</div>
|
|
148
|
-
<div class="liuli_page_error" v-else-if="loaded === 2">
|
|
149
|
-
<exp500></exp500>
|
|
150
|
-
</div>
|
|
151
|
-
</div>
|
|
152
|
-
</template>
|
|
153
|
-
|
|
154
|
-
<style scoped lang="less">
|
|
155
|
-
</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 Exp500 from '@vue2-client/pages/exception/500.vue'
|
|
6
|
+
|
|
7
|
+
const layout = ref(null)
|
|
8
|
+
|
|
9
|
+
// 加载状态,0:加载中,1:已加载,2:出现错误
|
|
10
|
+
const loaded = ref(0)
|
|
11
|
+
|
|
12
|
+
// 声明组件总数
|
|
13
|
+
const componentTotal = ref(0)
|
|
14
|
+
|
|
15
|
+
// 注册组件总数
|
|
16
|
+
const registerComponentTotal = ref(0)
|
|
17
|
+
|
|
18
|
+
// 组件注册集
|
|
19
|
+
const componentRefMap = reactive({})
|
|
20
|
+
|
|
21
|
+
// 通用参数
|
|
22
|
+
const data = {
|
|
23
|
+
comps: componentRefMap,
|
|
24
|
+
func: {
|
|
25
|
+
getConfigByName: getConfigByName
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* 初始化构建页面组件
|
|
31
|
+
* @param params
|
|
32
|
+
*/
|
|
33
|
+
function init (params) {
|
|
34
|
+
const {
|
|
35
|
+
configName,
|
|
36
|
+
configValue,
|
|
37
|
+
serviceName
|
|
38
|
+
} = params
|
|
39
|
+
loaded.value = 0
|
|
40
|
+
const getConfigAfter = (res) => {
|
|
41
|
+
if (res == null) {
|
|
42
|
+
loaded.value = 2
|
|
43
|
+
return
|
|
44
|
+
}
|
|
45
|
+
layout.value = res
|
|
46
|
+
// 设置组件总量
|
|
47
|
+
setComponentTotal(layout.value.children)
|
|
48
|
+
loaded.value = 1
|
|
49
|
+
}
|
|
50
|
+
if (configName) {
|
|
51
|
+
getConfigByName(configName, serviceName, getConfigAfter)
|
|
52
|
+
} else {
|
|
53
|
+
getConfigAfter(JSON.parse(configValue))
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* 注册组件
|
|
59
|
+
* @param name 组件名称
|
|
60
|
+
* @param vm 组件实例
|
|
61
|
+
*/
|
|
62
|
+
function registerComponent (name, vm) {
|
|
63
|
+
componentRefMap[name] = vm
|
|
64
|
+
registerComponentTotal.value = registerComponentTotal.value + 1
|
|
65
|
+
console.info(`总组件数量:${componentTotal.value},已注册数量:${registerComponentTotal.value}`)
|
|
66
|
+
// 初始化页面
|
|
67
|
+
initPage()
|
|
68
|
+
if (registerComponentTotal.value >= componentTotal.value) {
|
|
69
|
+
// 注册事件
|
|
70
|
+
registerEvents(layout.value.children)
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
provide('registerComponent', registerComponent)
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* 初始化页面
|
|
77
|
+
*/
|
|
78
|
+
function initPage () {
|
|
79
|
+
if (layout.value.onMounted) {
|
|
80
|
+
// eslint-disable-next-line no-eval
|
|
81
|
+
const onMountedFun = eval('(' + layout.value.onMounted + ')')
|
|
82
|
+
onMountedFun(data)
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* 设置需要注册的组件总数
|
|
88
|
+
* @param children 组件集合
|
|
89
|
+
*/
|
|
90
|
+
function setComponentTotal (children) {
|
|
91
|
+
children.forEach((child) => {
|
|
92
|
+
// 如果不是row类型,追加组件数量
|
|
93
|
+
if (child.type !== 'row') {
|
|
94
|
+
componentTotal.value = componentTotal.value + 1
|
|
95
|
+
}
|
|
96
|
+
// 递归追加子组件数量
|
|
97
|
+
if (child.children) {
|
|
98
|
+
setComponentTotal(child.children)
|
|
99
|
+
}
|
|
100
|
+
})
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* 注册组件事件
|
|
105
|
+
* @param children 组件集合
|
|
106
|
+
*/
|
|
107
|
+
function registerEvents (children) {
|
|
108
|
+
children.forEach((child) => {
|
|
109
|
+
// 如果有事件,注册它们
|
|
110
|
+
if (child.event) {
|
|
111
|
+
Object.entries(child.event).forEach(([eventName, handler]) => {
|
|
112
|
+
// eslint-disable-next-line no-eval
|
|
113
|
+
const eventHandler = eval('(' + handler + ')')
|
|
114
|
+
const componentInstance = componentRefMap[child.id]
|
|
115
|
+
if (componentInstance) {
|
|
116
|
+
// 创建一个包装函数以传递额外参数
|
|
117
|
+
const wrappedHandler = function (...args) {
|
|
118
|
+
// 这里可以传递额外的参数,例如:
|
|
119
|
+
eventHandler.call(componentInstance, ...args, data)
|
|
120
|
+
}
|
|
121
|
+
componentInstance.$on(eventName, wrappedHandler)
|
|
122
|
+
}
|
|
123
|
+
})
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// 递归注册子组件的事件
|
|
127
|
+
if (child.children) {
|
|
128
|
+
registerEvents(child.children)
|
|
129
|
+
}
|
|
130
|
+
})
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
defineExpose({
|
|
134
|
+
init
|
|
135
|
+
})
|
|
136
|
+
|
|
137
|
+
</script>
|
|
138
|
+
|
|
139
|
+
<template>
|
|
140
|
+
<div class="liuli_page">
|
|
141
|
+
<div class="liuli_page_main" v-if="loaded === 1">
|
|
142
|
+
<render-row
|
|
143
|
+
v-for="row in layout.children"
|
|
144
|
+
:key="row.id"
|
|
145
|
+
:row="row"
|
|
146
|
+
/>
|
|
147
|
+
</div>
|
|
148
|
+
<div class="liuli_page_error" v-else-if="loaded === 2">
|
|
149
|
+
<exp500></exp500>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</template>
|
|
153
|
+
|
|
154
|
+
<style scoped lang="less">
|
|
155
|
+
</style>
|