vue2-client 1.8.175 → 1.8.176
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/CitySelect/CitySelect.vue +88 -9
- package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue +19 -5
- package/src/base-client/components/common/XForm/XFormItem.vue +7 -2
- package/src/base-client/components/common/XFormTable/XFormTable.vue +91 -63
- package/src/base-client/components/common/XTree/XTree.vue +206 -17
- package/src/utils/formatter.js +13 -1
- package/vue.config.js +10 -0
package/package.json
CHANGED
|
@@ -50,6 +50,10 @@
|
|
|
50
50
|
</template>
|
|
51
51
|
|
|
52
52
|
<script>
|
|
53
|
+
import { mapState } from 'vuex'
|
|
54
|
+
import { runLogic } from '@vue2-client/services/api/common'
|
|
55
|
+
import { handleTree } from '@vue2-client/utils/util'
|
|
56
|
+
|
|
53
57
|
const viewArr = [
|
|
54
58
|
{
|
|
55
59
|
key: '省/直辖市',
|
|
@@ -99,21 +103,35 @@ export default {
|
|
|
99
103
|
valueView: undefined
|
|
100
104
|
}
|
|
101
105
|
},
|
|
102
|
-
mounted () {
|
|
103
|
-
|
|
104
|
-
|
|
106
|
+
async mounted () {
|
|
107
|
+
await this.$appdata.getDivisionsOhChinaForTree().then(res => {
|
|
108
|
+
if (res) {
|
|
109
|
+
this.tagData.divisionsForTree = res
|
|
110
|
+
if (this.value) {
|
|
111
|
+
this.setValue(this.value, res)
|
|
112
|
+
}
|
|
113
|
+
} else {
|
|
114
|
+
runLogic('getOperatingAreas', 'af-revenue').then(res => {
|
|
115
|
+
this.tagData.divisionsForTree = handleTree(res, 'code', 'parentcode')
|
|
116
|
+
if (this.value) {
|
|
117
|
+
this.setValue(this.value, res)
|
|
118
|
+
}
|
|
119
|
+
})
|
|
120
|
+
}
|
|
105
121
|
})
|
|
106
122
|
},
|
|
107
123
|
model: {
|
|
108
124
|
prop: 'value',
|
|
109
125
|
event: 'onChange'
|
|
110
126
|
},
|
|
111
|
-
computed: {
|
|
127
|
+
computed: {
|
|
128
|
+
...mapState('account', { currUser: 'user' })
|
|
129
|
+
},
|
|
112
130
|
props: {
|
|
113
131
|
// 页面渲染内容 默认 省市区街道 四个 所以是4
|
|
114
132
|
contexts: {
|
|
115
133
|
type: Number,
|
|
116
|
-
default:
|
|
134
|
+
default: 4
|
|
117
135
|
},
|
|
118
136
|
placeholder: {
|
|
119
137
|
type: String,
|
|
@@ -164,14 +182,74 @@ export default {
|
|
|
164
182
|
type: String,
|
|
165
183
|
default: undefined
|
|
166
184
|
},
|
|
185
|
+
// 用于仅用于展示
|
|
186
|
+
defaultValue: {
|
|
187
|
+
type: String,
|
|
188
|
+
default: undefined
|
|
189
|
+
},
|
|
167
190
|
// 用于v-model 绑定 code :最后一级的code address: 所有级拼接的地址
|
|
168
191
|
valueType: {
|
|
169
192
|
type: String,
|
|
170
|
-
default: '
|
|
193
|
+
default: 'code'
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
watch: {
|
|
197
|
+
value () {
|
|
198
|
+
if (!this.value && this.valueView) {
|
|
199
|
+
/// 兼容外层重置方法
|
|
200
|
+
this.model = [
|
|
201
|
+
{ name: '', code: '' },
|
|
202
|
+
{ name: '', code: '' },
|
|
203
|
+
{ name: '', code: '' },
|
|
204
|
+
{ name: '', code: '' }
|
|
205
|
+
]
|
|
206
|
+
this.getResultText(this.contexts)
|
|
207
|
+
}
|
|
171
208
|
}
|
|
172
209
|
},
|
|
173
|
-
watch: {},
|
|
174
210
|
methods: {
|
|
211
|
+
setValue (code, tree) {
|
|
212
|
+
const findNode = (code, tree) => {
|
|
213
|
+
for (let i = 0; i < tree.length; i++) {
|
|
214
|
+
if (tree[i].code === code) {
|
|
215
|
+
return tree[i]
|
|
216
|
+
} else if (tree[i].children && tree[i].children.length > 0) {
|
|
217
|
+
const node = findNode(code, tree[i].children)
|
|
218
|
+
if (node) {
|
|
219
|
+
return node
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
const findParent = (code, tree, parent = null) => {
|
|
226
|
+
for (let i = 0; i < tree.length; i++) {
|
|
227
|
+
if (tree[i].code === code) {
|
|
228
|
+
return parent
|
|
229
|
+
} else if (tree[i].children && tree[i].children.length > 0) {
|
|
230
|
+
const node = findParent(code, tree[i].children, tree[i])
|
|
231
|
+
if (node) {
|
|
232
|
+
return node
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
const node = findNode(code, tree)
|
|
239
|
+
if (node) {
|
|
240
|
+
this.model[this.contexts - 1].name = node.name
|
|
241
|
+
this.model[this.contexts - 1].code = node.code
|
|
242
|
+
let parent = findParent(code, tree)
|
|
243
|
+
for (let i = this.contexts - 2; i >= 0; i--) {
|
|
244
|
+
this.model[i].name = parent ? parent.name : null
|
|
245
|
+
this.model[i].code = parent ? parent.code : null
|
|
246
|
+
if (i < this.contexts - 1 && parent) {
|
|
247
|
+
parent = findParent(parent.code, tree)
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
this.getResultText(this.contexts)
|
|
251
|
+
}
|
|
252
|
+
},
|
|
175
253
|
tagClick (e, item) {
|
|
176
254
|
if (e === '省/直辖市') {
|
|
177
255
|
// 如果是同一个标签
|
|
@@ -230,10 +308,11 @@ export default {
|
|
|
230
308
|
}
|
|
231
309
|
code = this.model[i].code ?? ''
|
|
232
310
|
}
|
|
233
|
-
this.valueView =
|
|
311
|
+
this.valueView = address.length === 0 ? undefined : address.join('')
|
|
234
312
|
if (tag === this.contexts) {
|
|
235
313
|
this.$refs.select.blur()
|
|
236
|
-
this.$emit('onChange', this.valueType === 'address' ? address.join('') : code)
|
|
314
|
+
// this.$emit('onChange', this.valueType === 'address' ? address.join('') : code)
|
|
315
|
+
this.$emit('onChange', code)
|
|
237
316
|
}
|
|
238
317
|
},
|
|
239
318
|
// 失去焦点回调
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
ref="selectForm"
|
|
6
6
|
:zIndex="1001"
|
|
7
7
|
:model="form"
|
|
8
|
-
|
|
9
|
-
:
|
|
8
|
+
v-bind="formItemLayout"
|
|
9
|
+
:layout="layout"
|
|
10
10
|
:rules="rules">
|
|
11
11
|
<a-row :gutter="16">
|
|
12
12
|
<x-form-item
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
:images="images"
|
|
20
20
|
:service-name="serviceName"
|
|
21
21
|
mode="新增/修改"
|
|
22
|
+
:layout="layout"
|
|
22
23
|
:get-data-params="getDataParams"
|
|
23
24
|
:env="env"
|
|
24
25
|
/>
|
|
@@ -118,7 +119,9 @@ export default {
|
|
|
118
119
|
// 待修改的数据集
|
|
119
120
|
modifyModelData: {},
|
|
120
121
|
// 当前环境
|
|
121
|
-
env: 'prod'
|
|
122
|
+
env: 'prod',
|
|
123
|
+
// 表单模式 horizontal | vertical | inline
|
|
124
|
+
layout: 'horizontal'
|
|
122
125
|
}
|
|
123
126
|
},
|
|
124
127
|
computed: {
|
|
@@ -158,6 +161,14 @@ export default {
|
|
|
158
161
|
return item.addOrEdit === 'version'
|
|
159
162
|
})
|
|
160
163
|
},
|
|
164
|
+
formItemLayout () {
|
|
165
|
+
return this.layout === 'horizontal'
|
|
166
|
+
? {
|
|
167
|
+
labelCol: { span: 4 },
|
|
168
|
+
wrapperCol: { span: 15 },
|
|
169
|
+
}
|
|
170
|
+
: {}
|
|
171
|
+
},
|
|
161
172
|
...mapState('account', { currUser: 'user' })
|
|
162
173
|
},
|
|
163
174
|
methods: {
|
|
@@ -166,9 +177,10 @@ export default {
|
|
|
166
177
|
configName, configContent, formItems, viewMode, isHandleFormKey = true,
|
|
167
178
|
showSubmitBtn = true, serviceName, isTableTemp = false, isKeyHandle = true,
|
|
168
179
|
modifyModelData = {}, businessType, title, fixedAddForm = {}, getDataParams = {},
|
|
169
|
-
simpleFormJsonData = {}, env = 'prod'
|
|
180
|
+
simpleFormJsonData = {}, env = 'prod', layout = 'horizontal'
|
|
170
181
|
} = params
|
|
171
182
|
this.loaded = false
|
|
183
|
+
this.layout = layout
|
|
172
184
|
this.configName = configName
|
|
173
185
|
this.configContent = configContent
|
|
174
186
|
if (typeof formItems === 'string') {
|
|
@@ -403,7 +415,9 @@ export default {
|
|
|
403
415
|
businessType: this.businessType,
|
|
404
416
|
serviceName: this.serviceName,
|
|
405
417
|
realForm: realForm,
|
|
406
|
-
currUserName: this.currUser.name
|
|
418
|
+
currUserName: this.currUser.name,
|
|
419
|
+
currUserId: this.currUser.id,
|
|
420
|
+
orgId: this.currUser.orgid
|
|
407
421
|
})
|
|
408
422
|
} else {
|
|
409
423
|
this.defaultSubmit(realForm)
|
|
@@ -277,7 +277,7 @@
|
|
|
277
277
|
v-else-if="attr.type === 'citySelect'"
|
|
278
278
|
:flex="attr.flex">
|
|
279
279
|
<a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.prop ? attr.prop : attr.model">
|
|
280
|
-
<citySelect v-model="form[attr.model]" ></citySelect>
|
|
280
|
+
<citySelect ref="citySelect" v-model="form[attr.model]" :contexts="attr.contexts" :value-type="attr.valueType" :default-value="form[attr.model]"></citySelect>
|
|
281
281
|
</a-form-model-item>
|
|
282
282
|
</x-form-col>
|
|
283
283
|
<!-- 地点搜索框 -->
|
|
@@ -393,6 +393,11 @@ export default {
|
|
|
393
393
|
type: Object,
|
|
394
394
|
default: undefined
|
|
395
395
|
},
|
|
396
|
+
// 布局
|
|
397
|
+
layout: {
|
|
398
|
+
type: String,
|
|
399
|
+
default: 'horizontal'
|
|
400
|
+
},
|
|
396
401
|
// 环境
|
|
397
402
|
env: {
|
|
398
403
|
type: String,
|
|
@@ -425,7 +430,7 @@ export default {
|
|
|
425
430
|
},
|
|
426
431
|
methods: {
|
|
427
432
|
init () {
|
|
428
|
-
if (this.mode === '新增/修改' && !this.attr.flex) {
|
|
433
|
+
if (this.mode === '新增/修改' && !this.attr.flex && this.layout === 'horizontal') {
|
|
429
434
|
this.attr.flex = {
|
|
430
435
|
xs: 24,
|
|
431
436
|
sm: 24,
|
|
@@ -1,70 +1,87 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<a-
|
|
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
|
-
|
|
2
|
+
<a-row type="flex" :gutter="48">
|
|
3
|
+
<a-col :span="6" v-if="xTreeConfigName">
|
|
4
|
+
<x-tree
|
|
5
|
+
:config-name="xTreeConfigName"
|
|
6
|
+
:env="env"
|
|
7
|
+
@action="action"
|
|
8
|
+
@treeOnChecked="treeOnChecked"
|
|
9
|
+
ref="xtree"
|
|
10
|
+
></x-tree>
|
|
11
|
+
</a-col>
|
|
12
|
+
<a-col :span="xTreeConfigName?18:24">
|
|
13
|
+
<a-skeleton :loading="loading" :paragraph="{ rows: 4 }"/>
|
|
14
|
+
<div v-show="!loading">
|
|
15
|
+
<template v-if="!loadError">
|
|
16
|
+
<x-add-form
|
|
17
|
+
ref="xAddForm"
|
|
18
|
+
@afterSubmit="onAddOrEditSubmitAfterSubmit"
|
|
19
|
+
>
|
|
20
|
+
<template slot="groupFormItems" slot-scope="{form, model, rules, modifyModelData}">
|
|
21
|
+
<slot
|
|
22
|
+
name="groupFormItems"
|
|
23
|
+
:form="form"
|
|
24
|
+
:model="model"
|
|
25
|
+
:rules="rules"
|
|
26
|
+
:modifyModelData="modifyModelData"></slot>
|
|
27
|
+
</template>
|
|
28
|
+
</x-add-form>
|
|
29
|
+
<div v-if="crudTitle" class="crud_title">
|
|
30
|
+
{{ crudTitle }}
|
|
31
|
+
</div>
|
|
32
|
+
<x-form
|
|
33
|
+
ref="xForm"
|
|
34
|
+
style="margin-bottom: 14px;"
|
|
35
|
+
@onSubmit="onSearchSubmit">
|
|
36
|
+
<slot name="formBtnExpand"></slot>
|
|
37
|
+
</x-form>
|
|
38
|
+
<x-table
|
|
39
|
+
ref="xTable"
|
|
40
|
+
:fixedQueryForm="fixedQueryForm"
|
|
41
|
+
:queryParamsName="queryParamsName"
|
|
42
|
+
:query-params-json="queryParamsJson"
|
|
43
|
+
:show-pagination="showPagination"
|
|
44
|
+
@add="add"
|
|
45
|
+
@edit="edit"
|
|
46
|
+
@afterDelete="afterDelete"
|
|
47
|
+
@action="action"
|
|
48
|
+
@selectRow="selectRow"
|
|
49
|
+
@afterQuery="afterQuery"
|
|
50
|
+
@tempTableEdit="tempTableEdit">
|
|
51
|
+
<template slot="leftButton" slot-scope="{selectedRowKeys, selectedRows}">
|
|
52
|
+
<slot name="leftButton" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
|
|
53
|
+
</template>
|
|
54
|
+
<template slot="button" slot-scope="{selectedRowKeys, selectedRows}">
|
|
55
|
+
<slot name="button" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
|
|
56
|
+
</template>
|
|
57
|
+
<template slot="rightBtnExpand" slot-scope="{selectedRowKeys, selectedRows}">
|
|
58
|
+
<slot name="rightBtnExpand" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
|
|
59
|
+
<a-tooltip title="收起查询条件">
|
|
60
|
+
<a-button @click="toggleIsFormShow">
|
|
61
|
+
<a-icon :style="iconStyle" type="vertical-align-top"/>
|
|
62
|
+
</a-button>
|
|
63
|
+
</a-tooltip>
|
|
64
|
+
</template>
|
|
65
|
+
<!-- 底部插槽 -->
|
|
66
|
+
<template slot="footer" slot-scope="{selectedRowKeys, selectedRows}">
|
|
67
|
+
<slot name="footer" :selectedRowKeys="selectedRowKeys" :selectedRows="selectedRows"></slot>
|
|
68
|
+
</template>
|
|
69
|
+
</x-table>
|
|
70
|
+
</template>
|
|
71
|
+
<template v-else>
|
|
72
|
+
<a-empty>
|
|
73
|
+
<span slot="description"> 页面配置不存在请联系系统管理员, </span>
|
|
74
|
+
</a-empty>
|
|
75
|
+
</template>
|
|
76
|
+
</div>
|
|
77
|
+
</a-col>
|
|
78
|
+
</a-row>
|
|
63
79
|
</template>
|
|
64
80
|
<script>
|
|
65
81
|
import XForm from '@vue2-client/base-client/components/common/XForm'
|
|
66
82
|
import XAddForm from '@vue2-client/base-client/components/common/XAddForm'
|
|
67
83
|
import XTable from '@vue2-client/base-client/components/common/XTable'
|
|
84
|
+
import XTree from '@vue2-client/base-client/components/common/XTree'
|
|
68
85
|
import XImportExcel from '@vue2-client/base-client/components/common/XImportExcel'
|
|
69
86
|
import { getConfigByName, getConfigByLogic, parseConfig } from '@vue2-client/services/api/common'
|
|
70
87
|
import { mapState } from 'vuex'
|
|
@@ -74,6 +91,7 @@ export default {
|
|
|
74
91
|
components: {
|
|
75
92
|
XTable,
|
|
76
93
|
XForm,
|
|
94
|
+
XTree,
|
|
77
95
|
XAddForm,
|
|
78
96
|
XImportExcel
|
|
79
97
|
},
|
|
@@ -120,6 +138,11 @@ export default {
|
|
|
120
138
|
type: Object,
|
|
121
139
|
default: null
|
|
122
140
|
},
|
|
141
|
+
// xTree 配置
|
|
142
|
+
xTreeConfigName: {
|
|
143
|
+
type: String,
|
|
144
|
+
default: null
|
|
145
|
+
},
|
|
123
146
|
// 业务逻辑名称, 通过logic获取表单表格配置
|
|
124
147
|
logicName: {
|
|
125
148
|
type: String,
|
|
@@ -128,7 +151,8 @@ export default {
|
|
|
128
151
|
// 执行logic传递的参数
|
|
129
152
|
logicParam: {
|
|
130
153
|
type: Object,
|
|
131
|
-
default: () => {
|
|
154
|
+
default: () => {
|
|
155
|
+
}
|
|
132
156
|
},
|
|
133
157
|
// 固定新增表单
|
|
134
158
|
fixedAddForm: {
|
|
@@ -250,7 +274,7 @@ export default {
|
|
|
250
274
|
serviceName: this.serviceName,
|
|
251
275
|
env: this.env,
|
|
252
276
|
form: this.$refs.xForm.form
|
|
253
|
-
|
|
277
|
+
})
|
|
254
278
|
}
|
|
255
279
|
this.loading = false
|
|
256
280
|
},
|
|
@@ -309,10 +333,14 @@ export default {
|
|
|
309
333
|
* @param record 本条数据
|
|
310
334
|
* @param id 数据标识
|
|
311
335
|
* @param actionType 操作类型
|
|
336
|
+
* @param fun 向上级传递的事件
|
|
312
337
|
*/
|
|
313
338
|
action (record, id, actionType, fun = 'action') {
|
|
314
339
|
this.$emit(fun, record, id, actionType)
|
|
315
340
|
},
|
|
341
|
+
treeOnChecked (checkedKeys, deepNodes, deepKeys) {
|
|
342
|
+
this.$emit('treeOnChecked', checkedKeys, deepNodes, deepKeys)
|
|
343
|
+
},
|
|
316
344
|
/**
|
|
317
345
|
* 新增按钮事件
|
|
318
346
|
*/
|
|
@@ -1,75 +1,264 @@
|
|
|
1
1
|
<script setup>
|
|
2
|
+
import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
|
|
3
|
+
import { computed, reactive, ref, watch, defineExpose } from 'vue'
|
|
4
|
+
import executeStrFunction from '@vue2-client/utils/runEvalFunction'
|
|
5
|
+
import store from '@vue2-client/store/modules/account'
|
|
6
|
+
|
|
7
|
+
const config = reactive({})
|
|
8
|
+
// 选中的 key
|
|
9
|
+
const checkedKeys = ref([])
|
|
10
|
+
// 定义 tree 数据
|
|
11
|
+
const _treeData = ref([])
|
|
12
|
+
// 定义最深一层的 数据
|
|
13
|
+
const deepestNodes = ref([])
|
|
14
|
+
// 替换字段
|
|
15
|
+
let _replaceFields = reactive({ children: 'children', title: 'title', key: 'key' })
|
|
16
|
+
// 当前用户信息
|
|
17
|
+
const currentUser = computed(() => store.state.user)
|
|
18
|
+
// 暂存查询信息
|
|
19
|
+
const searchInfo = ref({})
|
|
2
20
|
const props = defineProps({
|
|
3
21
|
// 树数据
|
|
4
22
|
// example: [{ title: '标题', key: '1', children: []}]
|
|
5
23
|
treeData: {
|
|
6
24
|
type: Array,
|
|
7
|
-
required:
|
|
25
|
+
required: false
|
|
26
|
+
},
|
|
27
|
+
configName: {
|
|
28
|
+
type: String,
|
|
29
|
+
required: false
|
|
30
|
+
},
|
|
31
|
+
env: {
|
|
32
|
+
type: String,
|
|
33
|
+
default: 'prod'
|
|
8
34
|
},
|
|
9
35
|
replaceFields: {
|
|
10
36
|
type: Object,
|
|
11
37
|
default: () => ({ children: 'children', title: 'title', key: 'key' })
|
|
12
38
|
}
|
|
13
39
|
})
|
|
40
|
+
// 监听 checkbox 选中 的变化
|
|
41
|
+
watch(checkedKeys, (checkedKeys) => {
|
|
42
|
+
// 筛选出最底层的数据 返回
|
|
43
|
+
const deepNodes = []
|
|
44
|
+
const deepKeys = []
|
|
45
|
+
checkedKeys.forEach(key => {
|
|
46
|
+
const node = deepestNodes.value.find(node => node[_replaceFields.key] === key)
|
|
47
|
+
if (node) {
|
|
48
|
+
deepNodes.push(node)
|
|
49
|
+
deepKeys.push(node[_replaceFields.key])
|
|
50
|
+
}
|
|
51
|
+
})
|
|
52
|
+
emit('treeOnChecked', checkedKeys, deepNodes, deepKeys)
|
|
53
|
+
}, { immediate: true })
|
|
54
|
+
//
|
|
55
|
+
// watch(() => props.replaceFields, (newReplaceFields) => {
|
|
56
|
+
// if (newReplaceFields) {
|
|
57
|
+
// Object.assign(_replaceFields, newReplaceFields)
|
|
58
|
+
// }
|
|
59
|
+
// }, { immediate: true })
|
|
60
|
+
// 如果有configName 要先获取配置
|
|
61
|
+
if (props.treeData && props.treeData.length > 0) {
|
|
62
|
+
_treeData.value = props.treeData
|
|
63
|
+
deepestNodes.value = getDeepestNodes(_treeData.value)
|
|
64
|
+
}
|
|
65
|
+
if (props.replaceFields) {
|
|
66
|
+
_replaceFields = props.replaceFields
|
|
67
|
+
}
|
|
68
|
+
if (props.configName) {
|
|
69
|
+
getConfigByName(props.configName, undefined, (x) => {
|
|
70
|
+
Object.assign(config, x)
|
|
71
|
+
Object.assign(_replaceFields, x.replaceFields)
|
|
72
|
+
if (x.treeData.indexOf('logic@') >= 0) {
|
|
73
|
+
// 如果数据源是 logic
|
|
74
|
+
getData()
|
|
75
|
+
}
|
|
76
|
+
})
|
|
77
|
+
}
|
|
14
78
|
|
|
15
79
|
const emit = defineEmits(['onSelect'])
|
|
16
80
|
|
|
17
81
|
function onSelect (keys, e) {
|
|
18
82
|
emit('onSelect', keys, e)
|
|
19
83
|
}
|
|
84
|
+
|
|
85
|
+
function getData (param = {}) {
|
|
86
|
+
searchInfo.value = Object.assign(param, {
|
|
87
|
+
org_id: currentUser.value.orgid,
|
|
88
|
+
user_id: currentUser.value.id,
|
|
89
|
+
dep_id: currentUser.value.f_department_id
|
|
90
|
+
})
|
|
91
|
+
runLogic(config.treeData.substring(6), searchInfo.value, config.serviceName, props.env === 'dev').then(res => {
|
|
92
|
+
_treeData.value = res
|
|
93
|
+
deepestNodes.value = getDeepestNodes(_treeData.value)
|
|
94
|
+
}).catch(e => {
|
|
95
|
+
console.error('获取数据失败:' + e)
|
|
96
|
+
})
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
function reLoad () {
|
|
100
|
+
getData(searchInfo.value)
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
function onChange () {
|
|
104
|
+
console.log('onChange')
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
function action (record, func) {
|
|
108
|
+
emit('action', record, record[_replaceFields.key], null, func)
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
function getDeepestNodes (treeData) {
|
|
112
|
+
const deepestNodes = []
|
|
113
|
+
|
|
114
|
+
function traverse (node) {
|
|
115
|
+
if (!node[_replaceFields.children] || node[_replaceFields.children].length === 0) {
|
|
116
|
+
deepestNodes.push(node)
|
|
117
|
+
} else {
|
|
118
|
+
node[_replaceFields.children].forEach(child => traverse(child))
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
treeData.forEach(node => traverse(node))
|
|
123
|
+
return deepestNodes
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// 使用 defineExpose 暴露方法
|
|
127
|
+
defineExpose({
|
|
128
|
+
reLoad
|
|
129
|
+
})
|
|
130
|
+
|
|
20
131
|
</script>
|
|
21
132
|
|
|
22
133
|
<template>
|
|
23
|
-
<div
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
134
|
+
<div id="XTreeWarp">
|
|
135
|
+
<div class="tree_title" :style="{height:config.search?'5rem':'3rem'}" v-if="config.title">
|
|
136
|
+
<a-row style="font-size: medium;line-height: 3rem">
|
|
137
|
+
<a-col :offset="2">
|
|
138
|
+
<span>{{ config.title }}</span>
|
|
139
|
+
</a-col>
|
|
140
|
+
</a-row>
|
|
141
|
+
<a-input-search
|
|
142
|
+
v-if="config.search"
|
|
143
|
+
style="margin-bottom: 8px"
|
|
144
|
+
placeholder="请输入搜索关键字"
|
|
145
|
+
@change="onChange"/>
|
|
146
|
+
</div>
|
|
147
|
+
<div
|
|
148
|
+
class="tree_main"
|
|
149
|
+
:style="{
|
|
150
|
+
maxHeight:config.search?'calc(100vh - 200px - 5rem)':'calc(100vh - 200px - 3rem)'
|
|
151
|
+
}">
|
|
152
|
+
<a-tree
|
|
153
|
+
v-model="checkedKeys"
|
|
154
|
+
:tree-data="_treeData"
|
|
155
|
+
:checkable="config.checkable"
|
|
156
|
+
:blockNode="true"
|
|
157
|
+
:replaceFields="_replaceFields"
|
|
158
|
+
:default-selected-keys="_treeData && _treeData.length > 0 ? [_treeData[0][_replaceFields.key]] : null"
|
|
159
|
+
:default-expand-all="true"
|
|
160
|
+
@select="onSelect"
|
|
161
|
+
>
|
|
162
|
+
<template slot="title" slot-scope="item">
|
|
163
|
+
<span>{{
|
|
164
|
+
item.dataRef[replaceFields.children] && item.dataRef[replaceFields.children].length > 0?
|
|
165
|
+
item[_replaceFields.title]
|
|
166
|
+
: config.deepNodeMaxWidth && item[_replaceFields.title].length > config.deepNodeMaxWidth ? item[_replaceFields.title].substring(0, config.deepNodeMaxWidth) + '...' : item[_replaceFields.title]
|
|
167
|
+
}}</span>
|
|
168
|
+
<a-space style="float:right;margin-right: .2rem">
|
|
169
|
+
<a-icon
|
|
170
|
+
v-for="icon in config.btn"
|
|
171
|
+
@click="action(item, icon.func)"
|
|
172
|
+
:key="icon.func"
|
|
173
|
+
v-if="executeStrFunction( icon.customFunction,[item])"
|
|
174
|
+
:type="icon.icon"
|
|
175
|
+
:style="{color:icon.color}"></a-icon>
|
|
176
|
+
</a-space>
|
|
177
|
+
</template>
|
|
178
|
+
</a-tree>
|
|
179
|
+
</div>
|
|
31
180
|
</div>
|
|
32
181
|
</template>
|
|
33
182
|
|
|
34
183
|
<style lang="less" scoped>
|
|
184
|
+
.tree_title {
|
|
185
|
+
background-color: #E0E5EB;
|
|
186
|
+
border-radius: 8px 8px 0 0;
|
|
187
|
+
}
|
|
188
|
+
|
|
35
189
|
.tree_main {
|
|
36
|
-
:
|
|
190
|
+
width: 97%;
|
|
191
|
+
display: inline-block;
|
|
192
|
+
overflow-y: auto;
|
|
193
|
+
|
|
194
|
+
//:deep(.ant-tree-child-tree){
|
|
195
|
+
// .ant-space-item {
|
|
196
|
+
// display: none;
|
|
197
|
+
// }
|
|
198
|
+
//
|
|
199
|
+
// &:hover {
|
|
200
|
+
// .ant-space-item {
|
|
201
|
+
// display: block;
|
|
202
|
+
// }
|
|
203
|
+
// }
|
|
204
|
+
//}
|
|
205
|
+
|
|
206
|
+
:deep(.ant-tree li .ant-tree-node-content-wrapper) {
|
|
37
207
|
color: #000000e0;
|
|
38
208
|
}
|
|
209
|
+
|
|
210
|
+
:deep(.ant-tree-checkbox) {
|
|
211
|
+
top: .5rem !important;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
:deep(.ant-tree-node-content-wrapper ) {
|
|
215
|
+
display: inline;
|
|
216
|
+
}
|
|
217
|
+
|
|
39
218
|
:deep(.ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle) {
|
|
40
219
|
color: #0000004d;
|
|
220
|
+
|
|
41
221
|
i {
|
|
42
222
|
font-size: 16px !important;
|
|
43
223
|
line-height: 40px;
|
|
44
224
|
}
|
|
45
225
|
}
|
|
46
|
-
|
|
226
|
+
|
|
227
|
+
:deep(.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper::before, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper::before) {
|
|
47
228
|
height: 40px;
|
|
48
229
|
border-radius: 6px;
|
|
49
230
|
}
|
|
50
|
-
|
|
231
|
+
|
|
232
|
+
:deep(.ant-tree.ant-tree-directory > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper::before) {
|
|
51
233
|
background: #e6f7ff;
|
|
52
234
|
}
|
|
53
|
-
|
|
235
|
+
|
|
236
|
+
:deep(.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-node-content-wrapper::before) {
|
|
54
237
|
background: #e6f7ff;
|
|
55
238
|
}
|
|
56
|
-
|
|
239
|
+
|
|
240
|
+
:deep(.ant-tree.ant-tree-directory .ant-tree-child-tree > li.ant-tree-treenode-selected > span.ant-tree-switcher) {
|
|
57
241
|
color: #0000004d;
|
|
58
242
|
}
|
|
59
|
-
|
|
243
|
+
|
|
244
|
+
:deep(.ant-tree.ant-tree-directory > li span.ant-tree-node-content-wrapper.ant-tree-node-selected, .ant-tree.ant-tree-directory .ant-tree-child-tree > li span.ant-tree-node-content-wrapper.ant-tree-node-selected) {
|
|
60
245
|
color: #000000e0;
|
|
61
246
|
}
|
|
62
|
-
|
|
247
|
+
|
|
248
|
+
:deep(.ant-tree li .ant-tree-node-content-wrapper) {
|
|
63
249
|
line-height: 40px;
|
|
64
250
|
height: 40px;
|
|
65
251
|
}
|
|
252
|
+
|
|
66
253
|
:deep(.ant-tree li) {
|
|
67
254
|
padding-left: 4px;
|
|
68
255
|
}
|
|
256
|
+
|
|
69
257
|
:deep(.ant-tree ul) {
|
|
70
258
|
padding-left: 10px;
|
|
71
259
|
}
|
|
72
|
-
|
|
260
|
+
|
|
261
|
+
:deep(.ant-tree-icon__customize) {
|
|
73
262
|
display: none;
|
|
74
263
|
}
|
|
75
264
|
}
|
package/src/utils/formatter.js
CHANGED
|
@@ -65,4 +65,16 @@ function formatConfig (obj, dep) {
|
|
|
65
65
|
return `${prefix}${str}${subfix}`
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
|
|
68
|
+
function getRealKeyData (data) {
|
|
69
|
+
const obj = {}
|
|
70
|
+
Object.keys(data).forEach(k => {
|
|
71
|
+
if (k.indexOf('_') >= 0) {
|
|
72
|
+
obj[k.substring(k.indexOf('_') + 1)] = data[k]
|
|
73
|
+
} else {
|
|
74
|
+
obj[k] = data[k]
|
|
75
|
+
}
|
|
76
|
+
})
|
|
77
|
+
return obj
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
module.exports = { formatConfig, getRealKeyData }
|
package/vue.config.js
CHANGED
|
@@ -42,6 +42,16 @@ module.exports = {
|
|
|
42
42
|
// target: testUpload,
|
|
43
43
|
// changeOrigin: true
|
|
44
44
|
// },
|
|
45
|
+
'/api/af-revenue/logic/openapi/': {
|
|
46
|
+
pathRewrite: { '^/api/af-revenue/logic/openapi/': '/logic/' },
|
|
47
|
+
target: 'http://127.0.0.1:9026',
|
|
48
|
+
changeOrigin: true
|
|
49
|
+
},
|
|
50
|
+
'/api/af-revenue': {
|
|
51
|
+
pathRewrite: { '^/api/af-revenue/': '/' },
|
|
52
|
+
target: 'http://127.0.0.1:9026',
|
|
53
|
+
changeOrigin: true
|
|
54
|
+
},
|
|
45
55
|
'/api': {
|
|
46
56
|
// v3用
|
|
47
57
|
// pathRewrite: { '^/api/af-system/': '/rs/', '^/api/af-iot/': '/rs/' },
|