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.
@@ -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="showEditInput"
28
+ class="el-tag el-tag--info el-tag--small no-background"
29
+ @click.stop="jumpUrl(item)"
30
30
  >
31
- <span class="el-select__tags-text">{{ item.value }}</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">{{ item.value }}</span>
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
- let n = { value: m }
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: 90%;
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>
@@ -269,6 +269,8 @@
269
269
  demNameAry.join(',')
270
270
  )
271
271
  }
272
+ } else {
273
+ this.$emit('change', newVal)
272
274
  }
273
275
  // 通过valueChange事件发布值变更消息
274
276
  this.$emit('valueChange', ary.join(','), newVal)
@@ -31,7 +31,6 @@
31
31
  if (this.formInst.isView === true) {
32
32
  return
33
33
  }
34
-
35
34
  if (this.queryJson.length > 0) {
36
35
  let _this = this
37
36
  this.queryJson.forEach((item) => {
@@ -267,13 +267,18 @@
267
267
  return (
268
268
  this.data &&
269
269
  this.data.length < 1 &&
270
- this.treeData && this.treeData.length < 1
270
+ this.treeData &&
271
+ this.treeData.length < 1
271
272
  )
272
273
  },
273
274
  },
274
275
  watch: {
275
276
  filterText(val) {
276
- this.$refs.elTree.filter(val)
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)