three-trees-ui 1.0.17 → 1.0.18
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/lib/three-trees-ui.common.js +1054 -422
- package/lib/three-trees-ui.css +1 -1
- package/lib/three-trees-ui.umd.js +1054 -422
- package/lib/three-trees-ui.umd.min.js +1 -1
- package/package.json +1 -1
- package/packages/CustomDialog/src/customDialog.vue +488 -165
- package/packages/CustomDialog/src/customMobileDialog.vue +466 -155
- package/packages/CustomDialog/src/main.vue +203 -11
- package/packages/DimensionSelector/src/main.vue +2 -0
- package/packages/Global/src/GlobalQuery.vue +0 -1
- package/packages/Tree/src/main.vue +7 -2
|
@@ -25,10 +25,15 @@
|
|
|
25
25
|
<span
|
|
26
26
|
v-for="(item, index) in inputVal"
|
|
27
27
|
:key="item.value"
|
|
28
|
-
class="el-tag el-tag--info el-tag--small"
|
|
29
|
-
@click="
|
|
28
|
+
class="el-tag el-tag--info el-tag--small no-background"
|
|
29
|
+
@click.stop="jumpUrl(item)"
|
|
30
30
|
>
|
|
31
|
-
<span
|
|
31
|
+
<span
|
|
32
|
+
class="el-select__tags-text"
|
|
33
|
+
:class="{ 'src-color': isSrcColor }"
|
|
34
|
+
>
|
|
35
|
+
{{ item.value }}
|
|
36
|
+
</span>
|
|
32
37
|
<i
|
|
33
38
|
class="el-tag__close el-icon-close"
|
|
34
39
|
@click.stop="removeSelectOrg(index)"
|
|
@@ -92,15 +97,17 @@
|
|
|
92
97
|
</div>
|
|
93
98
|
</div>
|
|
94
99
|
</el-tooltip>
|
|
95
|
-
<span v-if="!inputWriteable">
|
|
100
|
+
<span v-if="!inputWriteable" class="dialog-readonly">
|
|
96
101
|
<span
|
|
97
102
|
v-for="item in inputVal"
|
|
98
103
|
:key="item.value"
|
|
99
|
-
class="el-tag el-tag--info el-tag--small"
|
|
104
|
+
class="el-tag el-tag--info el-tag--small no-background"
|
|
100
105
|
style="margin-right: 8px"
|
|
101
|
-
@click.stop
|
|
106
|
+
@click.stop="jumpUrl(item)"
|
|
102
107
|
>
|
|
103
|
-
<span class="el-select__tags-text"
|
|
108
|
+
<span class="el-select__tags-text" :class="{ 'src-color': isSrcColor }">
|
|
109
|
+
{{ item.value }}
|
|
110
|
+
</span>
|
|
104
111
|
</span>
|
|
105
112
|
</span>
|
|
106
113
|
<custom-mobile-dialog
|
|
@@ -112,6 +119,8 @@
|
|
|
112
119
|
:sun-index="sunIndex"
|
|
113
120
|
:sub-path="subPath"
|
|
114
121
|
:current-sub-data="currentSubData"
|
|
122
|
+
:dialog-config="dialogConfig"
|
|
123
|
+
:dialog-type="dialogType"
|
|
115
124
|
@calacInputSuffixHeight="calacInputSuffixHeight"
|
|
116
125
|
@updateInput="updateInput"
|
|
117
126
|
></custom-mobile-dialog>
|
|
@@ -126,6 +135,8 @@
|
|
|
126
135
|
:sub-path="subPath"
|
|
127
136
|
:current-sub-data="currentSubData"
|
|
128
137
|
:is-read-only="!inputWriteable"
|
|
138
|
+
:dialog-config="dialogConfig"
|
|
139
|
+
:dialog-type="dialogType"
|
|
129
140
|
@calacInputSuffixHeight="calacInputSuffixHeight"
|
|
130
141
|
@updateInput="updateInput"
|
|
131
142
|
></custom-dialog>
|
|
@@ -133,6 +144,29 @@
|
|
|
133
144
|
<slot name="labeldesc">{{ inputName }}</slot>
|
|
134
145
|
</span>
|
|
135
146
|
<ht-field-tail :field-name="inputName" :input-value="value" />
|
|
147
|
+
<el-dialog
|
|
148
|
+
title="表单详情"
|
|
149
|
+
:visible.sync="isDialogFormShow"
|
|
150
|
+
v-if="isDialogFormShow"
|
|
151
|
+
width="100%"
|
|
152
|
+
custom-class="custom-dialog-form"
|
|
153
|
+
fullscreen
|
|
154
|
+
append-to-body
|
|
155
|
+
>
|
|
156
|
+
<div class="iframe-box">
|
|
157
|
+
<iframe
|
|
158
|
+
:src="mobileSrc"
|
|
159
|
+
width="100%"
|
|
160
|
+
frameborder="0"
|
|
161
|
+
style="height: 100%;"
|
|
162
|
+
></iframe>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="custom-dialog-form_footer">
|
|
165
|
+
<el-button size="smal" @click="isDialogFormShow = false">
|
|
166
|
+
关闭
|
|
167
|
+
</el-button>
|
|
168
|
+
</div>
|
|
169
|
+
</el-dialog>
|
|
136
170
|
</div>
|
|
137
171
|
</template>
|
|
138
172
|
<script>
|
|
@@ -163,9 +197,17 @@
|
|
|
163
197
|
sunIndex: Number,
|
|
164
198
|
subPath: String,
|
|
165
199
|
currentSubData: Array,
|
|
200
|
+
dialogType: {
|
|
201
|
+
// search表示在查询条件使用 form表示在表单中使用
|
|
202
|
+
type: String,
|
|
203
|
+
default: 'form',
|
|
204
|
+
},
|
|
166
205
|
},
|
|
167
206
|
data() {
|
|
168
207
|
return {
|
|
208
|
+
mobileSrc: '',
|
|
209
|
+
isDialogFormShow: false,
|
|
210
|
+
dialogConfig: null, // 对话框配置信息
|
|
169
211
|
isEditInputShow: false,
|
|
170
212
|
customValue: '',
|
|
171
213
|
defualtTooltipplacement: 'bottom',
|
|
@@ -205,7 +247,25 @@
|
|
|
205
247
|
}
|
|
206
248
|
let result = []
|
|
207
249
|
nameAry.forEach((m) => {
|
|
208
|
-
|
|
250
|
+
// 带url跳转参数的 使用上横杆区分参数 值格式为 名称¯跳转key:跳转value
|
|
251
|
+
// 上横向保存数据库后 有可能被改变此处兼容写了一种上横线
|
|
252
|
+
let n = {}
|
|
253
|
+
if (
|
|
254
|
+
(m.includes('¯') && m.split('¯')[1]) ||
|
|
255
|
+
(m.includes('ˉ') && m.split('ˉ')[1])
|
|
256
|
+
) {
|
|
257
|
+
let val1 = m.includes('¯') ? m.split('¯')[0] : m.split('ˉ')[0]
|
|
258
|
+
let val2 = m.includes('¯') ? m.split('¯')[1] : m.split('ˉ')[1]
|
|
259
|
+
n.value = val1
|
|
260
|
+
let jumpParamStr = val2
|
|
261
|
+
if (jumpParamStr) {
|
|
262
|
+
let jumpParam = jumpParamStr.split(':')
|
|
263
|
+
n.jumpParamKey = jumpParam[0]
|
|
264
|
+
n.jumpParamValue = jumpParam[1]
|
|
265
|
+
}
|
|
266
|
+
} else {
|
|
267
|
+
n = { value: m }
|
|
268
|
+
}
|
|
209
269
|
result.push(n)
|
|
210
270
|
})
|
|
211
271
|
return result
|
|
@@ -214,6 +274,19 @@
|
|
|
214
274
|
isAllowCustom() {
|
|
215
275
|
return this.custdialog && this.custdialog.allowInput
|
|
216
276
|
},
|
|
277
|
+
// 是否展示可跳转颜色
|
|
278
|
+
isSrcColor() {
|
|
279
|
+
return (
|
|
280
|
+
this.dialogConfig &&
|
|
281
|
+
this.dialogType !== 'search' &&
|
|
282
|
+
((this.isMobile && this.dialogConfig.mobileUrl) ||
|
|
283
|
+
(!this.isMobile && this.dialogConfig.pcUrl))
|
|
284
|
+
)
|
|
285
|
+
},
|
|
286
|
+
},
|
|
287
|
+
created() {
|
|
288
|
+
// 获取对话框配置,看是否有配置url跳转
|
|
289
|
+
this.getDialogConfig()
|
|
217
290
|
},
|
|
218
291
|
mounted() {
|
|
219
292
|
setTimeout(() => {
|
|
@@ -237,9 +310,86 @@
|
|
|
237
310
|
}
|
|
238
311
|
//获取对话框按钮名称宽度
|
|
239
312
|
this.calacInputSuffixWidth()
|
|
313
|
+
if (this.value && this.inputWriteable) {
|
|
314
|
+
this.calacInputSuffixHeight()
|
|
315
|
+
}
|
|
240
316
|
}, 50)
|
|
241
317
|
},
|
|
242
318
|
methods: {
|
|
319
|
+
// 跳转url页面
|
|
320
|
+
jumpUrl(item) {
|
|
321
|
+
if (!this.isSrcColor) {
|
|
322
|
+
if (this.inputWriteable) {
|
|
323
|
+
this.showEditInput()
|
|
324
|
+
}
|
|
325
|
+
return
|
|
326
|
+
}
|
|
327
|
+
let url = this.isMobile
|
|
328
|
+
? this.dialogConfig.mobileUrl
|
|
329
|
+
: this.dialogConfig.pcUrl
|
|
330
|
+
// 获取通用token 和 url翻译
|
|
331
|
+
Promise.all([
|
|
332
|
+
this.$requestConfig.getThreeTreeToken(),
|
|
333
|
+
this.transformUrl(url),
|
|
334
|
+
]).then((res) => {
|
|
335
|
+
if (res[0] && res[0].code == 200) {
|
|
336
|
+
let token = res[0].value
|
|
337
|
+
let endUrl = res[1]
|
|
338
|
+
// 拼接参数 token和参数
|
|
339
|
+
if (endUrl.indexOf('?') == -1) {
|
|
340
|
+
endUrl += `?bnsToken=${token}&${item.jumpParamKey}=${item.jumpParamValue}`
|
|
341
|
+
} else {
|
|
342
|
+
endUrl += `&bnsToken=${token}&${item.jumpParamKey}=${item.jumpParamValue}`
|
|
343
|
+
}
|
|
344
|
+
if (this.isMobile) {
|
|
345
|
+
this.mobileSrc = endUrl
|
|
346
|
+
this.isDialogFormShow = true
|
|
347
|
+
} else {
|
|
348
|
+
window.open(endUrl)
|
|
349
|
+
}
|
|
350
|
+
} else {
|
|
351
|
+
this.$message.info(res.message || '获取token失败!')
|
|
352
|
+
}
|
|
353
|
+
})
|
|
354
|
+
},
|
|
355
|
+
// 替换url中域名通配符 需要发送接口
|
|
356
|
+
transformUrl(url) {
|
|
357
|
+
return new Promise((resolve) => {
|
|
358
|
+
var reg = /(\$\{(\w+)\})/
|
|
359
|
+
var match = reg.exec(url)
|
|
360
|
+
if (match) {
|
|
361
|
+
let alias = match[2]
|
|
362
|
+
if (alias) {
|
|
363
|
+
this.$requestConfig.getHostByAlias(alias).then((res) => {
|
|
364
|
+
if (res && res.value && res.value.rootAddress) {
|
|
365
|
+
resolve(url.replace(match[1], res.value.rootAddress))
|
|
366
|
+
} else {
|
|
367
|
+
resolve(url)
|
|
368
|
+
}
|
|
369
|
+
})
|
|
370
|
+
} else {
|
|
371
|
+
resolve(url)
|
|
372
|
+
}
|
|
373
|
+
} else {
|
|
374
|
+
resolve(url)
|
|
375
|
+
}
|
|
376
|
+
})
|
|
377
|
+
},
|
|
378
|
+
// 获取对话框配置
|
|
379
|
+
getDialogConfig() {
|
|
380
|
+
if (
|
|
381
|
+
this.custdialog &&
|
|
382
|
+
this.custdialog.custDialog &&
|
|
383
|
+
this.custdialog.custDialog.alias
|
|
384
|
+
)
|
|
385
|
+
this.$requestConfig
|
|
386
|
+
.getCustomDialogByAlias(this.custdialog.custDialog.alias)
|
|
387
|
+
.then((response) => {
|
|
388
|
+
if (response) {
|
|
389
|
+
this.dialogConfig = response
|
|
390
|
+
}
|
|
391
|
+
})
|
|
392
|
+
},
|
|
243
393
|
editInputBlur() {
|
|
244
394
|
this.$emit('input', this.customValue)
|
|
245
395
|
this.isEditInputShow = false
|
|
@@ -364,7 +514,7 @@
|
|
|
364
514
|
overflow-y: auto;
|
|
365
515
|
}
|
|
366
516
|
@media (max-width: 1280px) {
|
|
367
|
-
.el-dialog {
|
|
517
|
+
.el-dialog:not(.custom-dialog-form) {
|
|
368
518
|
width: 96% !important;
|
|
369
519
|
margin-top: 2vh !important;
|
|
370
520
|
}
|
|
@@ -377,8 +527,8 @@
|
|
|
377
527
|
}
|
|
378
528
|
}
|
|
379
529
|
|
|
380
|
-
.el-dialog {
|
|
381
|
-
height:
|
|
530
|
+
.el-dialog:not(.custom-dialog-form) {
|
|
531
|
+
height: 86%;
|
|
382
532
|
min-height: 400px;
|
|
383
533
|
}
|
|
384
534
|
@media (max-height: 960px) {
|
|
@@ -489,4 +639,46 @@
|
|
|
489
639
|
display: block;
|
|
490
640
|
margin: 8px 0;
|
|
491
641
|
}
|
|
642
|
+
.src-color {
|
|
643
|
+
cursor: pointer;
|
|
644
|
+
color: #409eff !important;
|
|
645
|
+
}
|
|
646
|
+
.el-tag.el-tag--info.no-background {
|
|
647
|
+
background: none;
|
|
648
|
+
border: none;
|
|
649
|
+
}
|
|
650
|
+
.dialog-readonly {
|
|
651
|
+
& > .el-tag {
|
|
652
|
+
&::after {
|
|
653
|
+
display: inline;
|
|
654
|
+
content: ',';
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
& > .el-tag:last-child {
|
|
658
|
+
&::after {
|
|
659
|
+
display: none;
|
|
660
|
+
content: '';
|
|
661
|
+
}
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
::v-deep .custom-dialog-form {
|
|
665
|
+
.el-dialog__header {
|
|
666
|
+
display: none;
|
|
667
|
+
}
|
|
668
|
+
.el-dialog__body {
|
|
669
|
+
height: 100%;
|
|
670
|
+
display: flex;
|
|
671
|
+
flex-direction: column;
|
|
672
|
+
.iframe-box {
|
|
673
|
+
width: 100%;
|
|
674
|
+
flex: 1;
|
|
675
|
+
overflow: hidden;
|
|
676
|
+
}
|
|
677
|
+
.custom-dialog-form_footer {
|
|
678
|
+
text-align: center;
|
|
679
|
+
margin-top: 10px;
|
|
680
|
+
padding-bottom: 10px;
|
|
681
|
+
}
|
|
682
|
+
}
|
|
683
|
+
}
|
|
492
684
|
</style>
|
|
@@ -267,13 +267,18 @@
|
|
|
267
267
|
return (
|
|
268
268
|
this.data &&
|
|
269
269
|
this.data.length < 1 &&
|
|
270
|
-
this.treeData &&
|
|
270
|
+
this.treeData &&
|
|
271
|
+
this.treeData.length < 1
|
|
271
272
|
)
|
|
272
273
|
},
|
|
273
274
|
},
|
|
274
275
|
watch: {
|
|
275
276
|
filterText(val) {
|
|
276
|
-
this
|
|
277
|
+
if (this.lazy) {
|
|
278
|
+
this.$emit('loadALL', val)
|
|
279
|
+
} else {
|
|
280
|
+
this.$refs.elTree.filter(val)
|
|
281
|
+
}
|
|
277
282
|
},
|
|
278
283
|
defaultCheckedKeys(val) {
|
|
279
284
|
this.$refs.elTree.setCheckedKeys(val)
|