lw-cdp-ui 1.4.52 → 1.4.54

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.
@@ -102,7 +102,7 @@ export default {
102
102
 
103
103
  // 处理处理高度
104
104
  if (!this.height) {
105
- this.cardHeight = 200 + (visibleTables.length - 2) * 10 + 'px'
105
+ this.cardHeight = 200 + (visibleTables.length - 2) * 20 + 'px'
106
106
  } else {
107
107
  this.cardHeight = this.height
108
108
  }
@@ -138,13 +138,13 @@ export default {
138
138
  feature: {
139
139
  saveAsImage: toolbox.feature?.saveAsImage?.show
140
140
  ? {
141
- show: toolbox.feature.saveAsImage.show
142
- }
141
+ show: toolbox.feature.saveAsImage.show
142
+ }
143
143
  : undefined,
144
144
  dataView: toolbox.feature?.dataView?.show
145
145
  ? {
146
- show: toolbox.feature.dataView.show
147
- }
146
+ show: toolbox.feature.dataView.show
147
+ }
148
148
  : undefined
149
149
  }
150
150
  }
@@ -87,7 +87,7 @@
87
87
  </template>
88
88
  <template v-if="typeof objItem.value == 'object'">
89
89
  {{
90
- objItem.value.length > 0
90
+ objItem.value?.length > 0
91
91
  ? dayjs(objItem.value[0]).format(item?.options?.valueFormat || 'YYYY-MM-DD HH:mm:ss') +
92
92
  ' - ' +
93
93
  dayjs(objItem.value[1]).format(item?.options?.valueFormat || 'YYYY-MM-DD HH:mm:ss')
@@ -1,8 +1,11 @@
1
1
  <template>
2
- <el-affix v-if="showMenu" :offset="100" z-index="99" style="width: 100%; height: 45px;">
2
+ <el-affix v-if="showMenu && blackType == 'card'" :offset="83" z-index="99" style="width: 100%; height: 45px">
3
3
  <ul class="affix-body">
4
4
  <template v-for="(item, index) in config.formItems" :key="index">
5
- <a v-if="item.component === 'divider'" class="anchor-link" :class="{ active: affixIndex == item.label }"
5
+ <a
6
+ v-if="item.component === 'divider'"
7
+ class="anchor-link"
8
+ :class="{ active: affixIndex == item.label }"
6
9
  @click="clickAffix(item.label)">
7
10
  {{ item.label }}
8
11
  </a>
@@ -15,44 +18,92 @@
15
18
  <el-radio-button v-for="(card, index) in formItems" :label="card[0].label" :value="index" :key="card[0].label" />
16
19
  </el-radio-group>
17
20
  <div class="btn-list">
18
- <slot :name="formItems[activeIndex][0]?.options?.component"></slot>
21
+ <slot :name="formItems[activeIndex]?.[0]?.options?.component"></slot>
19
22
  </div>
20
23
  </div>
21
24
 
22
25
  <el-skeleton v-if="renderLoading || Object.keys(form).length == 0" animated />
23
26
 
24
- <el-form v-else ref="form" class="lw-form-mini" :model="form" :label-width="config.labelWidth"
25
- :label-position="$i18n.locale == 'en-us' ? 'top' : config.labelPosition" v-loading="loading"
26
- :size="config?.size || 'default'" element-loading-text="Loading...">
27
+ <el-form
28
+ v-else
29
+ ref="form"
30
+ class="lw-form-mini"
31
+ :model="form"
32
+ :label-width="config.labelWidth"
33
+ :label-position="$i18n.locale == 'en-us' ? 'top' : config.labelPosition"
34
+ v-loading="loading"
35
+ :size="config?.size || 'default'"
36
+ element-loading-text="Loading...">
27
37
  <template v-for="(card, index) in formItems">
28
- <div class="lw-form-mini-card" v-if="isAllHide(card, index)" :key="card[0].label">
38
+ <div
39
+ class="lw-form-mini-card"
40
+ :class="{ 'lw-form-mini-tabs': blackType === 'tabs' }"
41
+ v-if="isAllHide(card, index)"
42
+ :key="card[0].label">
29
43
  <el-row v-show="activeIndex == index || blackType === 'card'" :gutter="15">
30
44
  <template v-for="(item, index) in card">
31
- <el-col :span="item.span || 24"
32
- v-if="!hideHandle(item) && !(blackType == 'tabs' && item.component == 'divider')" :key="index">
45
+ <el-col
46
+ :span="item.span || 24"
47
+ v-if="!hideHandle(item) && !(blackType == 'tabs' && item.component == 'divider')"
48
+ :key="index">
33
49
  <ViewItem v-if="isView && !item?.options?.isInput" :item="item" :form="form" :index="index">
34
50
  <!-- 没有组件是component值 就是插槽名称 -->
35
51
  <template
36
- v-if="!['input', 'upload', 'checkbox', 'checkboxGroup', 'switch', 'select', 'treeSelect', 'cascader', 'date', 'number', 'radio', 'color', 'rate', 'slider', 'tags', 'divider'].includes(item.component)"
52
+ v-if="
53
+ ![
54
+ 'input',
55
+ 'upload',
56
+ 'checkbox',
57
+ 'checkboxGroup',
58
+ 'switch',
59
+ 'select',
60
+ 'treeSelect',
61
+ 'cascader',
62
+ 'date',
63
+ 'number',
64
+ 'radio',
65
+ 'color',
66
+ 'rate',
67
+ 'slider',
68
+ 'tags',
69
+ 'divider'
70
+ ].includes(item.component)
71
+ "
37
72
  v-slot:[item.component]>
38
73
  <slot :name="item.component" :itemCur="item" :formCur="form">
39
- <el-tag type="danger">[{{ item.component }}]
40
- 没有这个默认组件也未自定义插槽内容</el-tag>
74
+ <el-tag type="danger">[{{ item.component }}] 没有这个默认组件也未自定义插槽内容</el-tag>
41
75
  </slot>
42
76
  </template>
43
77
  <template v-if="item?.options?.component" v-slot:[item?.options?.component]>
44
78
  <slot :name="item?.options?.component"></slot>
45
79
  </template>
46
-
47
80
  </ViewItem>
48
81
  <FormItem v-else :item="item" :form="form" :index="index">
49
82
  <!-- 没有组件是component值 就是插槽名称 -->
50
83
  <template
51
- v-if="!['input', 'upload', 'checkbox', 'checkboxGroup', 'switch', 'select', 'treeSelect', 'cascader', 'date', 'number', 'radio', 'color', 'rate', 'slider', 'tags', 'divider'].includes(item.component)"
84
+ v-if="
85
+ ![
86
+ 'input',
87
+ 'upload',
88
+ 'checkbox',
89
+ 'checkboxGroup',
90
+ 'switch',
91
+ 'select',
92
+ 'treeSelect',
93
+ 'cascader',
94
+ 'date',
95
+ 'number',
96
+ 'radio',
97
+ 'color',
98
+ 'rate',
99
+ 'slider',
100
+ 'tags',
101
+ 'divider'
102
+ ].includes(item.component)
103
+ "
52
104
  v-slot:[item.component]>
53
105
  <slot :name="item.component" :itemCur="item" :formCur="form">
54
- <el-tag type="danger">[{{ item.component }}]
55
- 没有这个默认组件也未自定义插槽内容</el-tag>
106
+ <el-tag type="danger">[{{ item.component }}] 没有这个默认组件也未自定义插槽内容</el-tag>
56
107
  </slot>
57
108
  </template>
58
109
  <template v-if="item?.options?.component" v-slot:[item?.options?.component]>
@@ -64,7 +115,6 @@
64
115
  </el-row>
65
116
  </div>
66
117
  </template>
67
-
68
118
  </el-form>
69
119
  </template>
70
120
 
@@ -77,7 +127,7 @@ export default {
77
127
  ViewItem
78
128
  },
79
129
  props: {
80
- modelValue: { type: Object, default: () => { } },
130
+ modelValue: { type: Object, default: () => {} },
81
131
  /**
82
132
  * 配置项
83
133
  * {
@@ -110,7 +160,7 @@ export default {
110
160
  * ...
111
161
  * }
112
162
  * **/
113
- config: { type: Object, default: () => { } },
163
+ config: { type: Object, default: () => {} },
114
164
  // 是否显示加载中
115
165
  loading: { type: Boolean, default: false },
116
166
  // 是否是查看模式
@@ -164,7 +214,7 @@ export default {
164
214
  const result = []
165
215
  let currentGroup = []
166
216
 
167
- this.config.formItems.forEach(item => {
217
+ this.config.formItems.forEach((item) => {
168
218
  if (item.component === 'divider') {
169
219
  if (!this.affixIndex) {
170
220
  this.affixIndex = item.label
@@ -203,9 +253,9 @@ export default {
203
253
  render(config = this.config) {
204
254
  function parse(formItems, form) {
205
255
  const result = {}
206
- formItems.forEach(item => {
256
+ formItems.forEach((item) => {
207
257
  if (item.component === 'checkbox' || item.component === 'upload') {
208
- item.options?.items?.forEach(option => {
258
+ item.options?.items?.forEach((option) => {
209
259
  if (!option?.name) {
210
260
  return false
211
261
  }
@@ -338,8 +388,8 @@ export default {
338
388
 
339
389
  // 创建 IntersectionObserver 观察滚动元素
340
390
  const observer = new IntersectionObserver(
341
- entries => {
342
- entries.forEach(entry => {
391
+ (entries) => {
392
+ entries.forEach((entry) => {
343
393
  if (entry.isIntersecting && _this.scrollObserverEnabled) {
344
394
  const dataIndex = entry.target.getAttribute('data-index')
345
395
  _this.affixIndex = dataIndex // 更新 affixIndex
@@ -354,7 +404,7 @@ export default {
354
404
  )
355
405
 
356
406
  // 观察每个 title-name-divider 元素
357
- titleNameDividers.forEach(divider => observer.observe(divider))
407
+ titleNameDividers.forEach((divider) => observer.observe(divider))
358
408
 
359
409
  // 解绑旧的观察者(防止重复监听)
360
410
  if (this.scrollObserver) {
@@ -365,7 +415,7 @@ export default {
365
415
  // 是否全隐藏
366
416
  isAllHide(card, index) {
367
417
  return card.some(
368
- item =>
418
+ (item) =>
369
419
  !this.hideHandle(item) &&
370
420
  (this.activeIndex == index || this.blackType === 'card') &&
371
421
  !(this.blackType == 'tabs' && item.component == 'divider')
@@ -396,7 +446,7 @@ export default {
396
446
  }
397
447
 
398
448
  :deep(.form-item-name-null) {
399
- >.el-form-item__label {
449
+ > .el-form-item__label {
400
450
  display: none !important;
401
451
  }
402
452
  }
@@ -1,61 +1,75 @@
1
1
  <template>
2
- <span class="item-text"
3
- :style="{width: textWidth}">
2
+ <span class="item-text" :style="{ width: textWidth }">
4
3
  <!-- 根据加密状态显示加密或解密后的文本 -->
5
- <span>{{ isEncrypted ? encryptedText : (modelValue || '--') }}</span>
4
+ <el-tooltip effect="dark" :content="isEncrypted ? encryptedText : stringValue || '--'" placement="top">
5
+ <span class="text">{{ isEncrypted ? encryptedText : stringValue || '--' }}</span>
6
+ </el-tooltip>
6
7
  <!-- 切换加密/解密按钮 -->
7
- <el-icon v-if="password"
8
- class="primary"
9
- @click="toggleEncryption"><el-icon-view /></el-icon>
8
+ <el-icon v-if="password" class="primary" @click="toggleEncryption"><el-icon-view /></el-icon>
10
9
  </span>
11
10
  </template>
12
11
 
13
12
  <script>
14
13
  export default {
15
14
  props: {
16
- modelValue: { type: String, default: '' }, // 传入的字符串
15
+ modelValue: { type: [String, Array, Boolean], default: '' }, // 传入的字符串或数组
17
16
  width: { type: String, default: '' },
18
- password: { type: Boolean, default: false }, // 是否需要加密显示
17
+ password: { type: Boolean, default: false } // 是否需要加密显示
19
18
  },
20
19
  data() {
21
20
  return {
22
- isEncrypted: this.password, // 根据传入的 password 值初始化加密状态
23
- };
21
+ isEncrypted: this.password // 根据传入的 password 值初始化加密状态
22
+ }
24
23
  },
25
24
  computed: {
26
25
  encryptedText() {
27
26
  // 将输入字符串加密成 *,长度与原字符串相同
28
- return "*".repeat(this.modelValue.length);
27
+ const value = this.stringValue
28
+ return '*'.repeat(value.length)
29
29
  },
30
30
  textWidth() {
31
- return this?.width ? `calc(100% - ${this.width} - 10px)` : "";
31
+ return this?.width ? `calc(100% - ${this.width} - 10px)` : ''
32
+ },
33
+ stringValue() {
34
+ // 确保 modelValue 是字符串
35
+ if (Array.isArray(this.modelValue)) {
36
+ return this.modelValue.join(', ')
37
+ }
38
+ return this.modelValue ? this.modelValue.toString() : ''
32
39
  }
33
40
  },
34
41
  methods: {
35
42
  toggleEncryption() {
36
43
  // 切换加密和解密状态
37
- this.isEncrypted = !this.isEncrypted;
44
+ this.isEncrypted = !this.isEncrypted
38
45
  // 如果是解密状态,可以更新父组件的值
39
46
  if (!this.isEncrypted) {
40
- this.$emit('update:modelValue', this.modelValue);
47
+ this.$emit('update:modelValue', this.modelValue)
41
48
  }
42
- },
43
- },
44
- };
49
+ }
50
+ }
51
+ }
45
52
  </script>
46
53
  <style lang="scss" scoped>
47
54
  .item-text {
48
55
  display: inline-flex;
49
56
  gap: 10px;
50
57
  align-items: center;
58
+ width: 100%;
51
59
  span {
52
- word-wrap: break-word;
53
- word-break: break-all;
54
- white-space: normal;
60
+ word-wrap: normal;
61
+ word-break: normal;
62
+ white-space: nowrap;
63
+ overflow: hidden;
64
+ text-overflow: ellipsis;
65
+ max-width: 100%;
55
66
  }
56
- .primary{
67
+ .primary {
57
68
  cursor: pointer;
58
69
  color: var(--el-color-primary);
59
70
  }
60
71
  }
61
- </style>
72
+ :deep(.el-tooltip) {
73
+ max-width: 200px; // 设置 tooltip 的最大宽度
74
+ }
75
+ </style>
@@ -1,36 +1,44 @@
1
1
  <template>
2
- <div v-if="navMenus.length<=0" style="padding:20px;">
3
- <el-alert title="无子集菜单" center type="info" :closable="false"></el-alert>
4
- </div>
5
- <template v-for="navMenu in navMenus" v-bind:key="navMenu">
6
- <el-menu-item v-if="!hasChildren(navMenu)" :index="navMenu.path">
7
- <a v-if="navMenu.meta&&navMenu.meta.type=='link'" :href="navMenu.path" target="_blank" @click.stop='()=>{}'></a>
8
- <el-icon v-if="navMenu.meta&&navMenu.meta.icon"><component :is="navMenu.meta.icon || 'el-icon-menu'"/></el-icon>
9
- <template #title>
10
- <span>{{navMenu.meta.title}}</span>
11
- </template>
12
- </el-menu-item>
13
- <el-sub-menu v-else :index="navMenu.path">
14
- <template #title>
15
- <el-icon v-if="navMenu.meta&&navMenu.meta.icon"><component :is="navMenu.meta.icon || 'el-icon-menu'"/></el-icon>
16
- <span>{{navMenu.meta.title}}</span>
17
- </template>
18
- <NavMenu :navMenus="navMenu.children"></NavMenu>
19
- </el-sub-menu>
20
- </template>
2
+ <div v-if="navMenus.length <= 0" style="padding: 20px">
3
+ <el-alert title="无子集菜单" center type="info" :closable="false"></el-alert>
4
+ </div>
5
+ <template v-for="navMenu in navMenus" v-bind:key="navMenu">
6
+ <el-menu-item v-if="!hasChildren(navMenu)" :index="navMenu.path">
7
+ <a
8
+ v-if="navMenu.meta && navMenu.meta.type == 'link'"
9
+ :href="navMenu.path"
10
+ target="_blank"
11
+ @click.stop="() => {}"></a>
12
+ <el-icon v-if="navMenu.meta && navMenu.meta.icon">
13
+ <component :is="navMenu.meta.icon || 'el-icon-menu'" />
14
+ </el-icon>
15
+ <template #title>
16
+ <span>{{ navMenu.meta.title }}</span>
17
+ </template>
18
+ </el-menu-item>
19
+ <el-sub-menu v-else :index="navMenu.path">
20
+ <template #title>
21
+ <el-icon v-if="navMenu.meta && navMenu.meta.icon">
22
+ <component :is="navMenu.meta.icon || 'el-icon-menu'" />
23
+ </el-icon>
24
+ <span>{{ navMenu.meta.title }}</span>
25
+ </template>
26
+ <NavMenu :navMenus="navMenu.children"></NavMenu>
27
+ </el-sub-menu>
28
+ </template>
21
29
  </template>
22
30
 
23
31
  <script>
24
- export default {
25
- name: 'NavMenu',
26
- props: ['navMenus'],
27
- data() {
28
- return {}
29
- },
30
- methods: {
31
- hasChildren(item) {
32
- return item.children && !item.children.every(item => item.meta.hidden)
33
- }
34
- }
35
- }
32
+ export default {
33
+ name: 'NavMenu',
34
+ props: ['navMenus'],
35
+ data() {
36
+ return {}
37
+ },
38
+ methods: {
39
+ hasChildren(item) {
40
+ return item.children && !item.children.every((item) => item.meta.hidden)
41
+ }
42
+ }
43
+ }
36
44
  </script>
@@ -10,7 +10,7 @@
10
10
  class="context-menu-list"
11
11
  ref="tags"
12
12
  itemKey="name">
13
- <template #item="{ element: tag, index }" keyName="tag">
13
+ <template #item="{ element: tag }" keyName="tag">
14
14
  <li
15
15
  v-bind:key="tag"
16
16
  :class="[isActive(tag) ? 'active' : '', tag.meta.affix ? 'affix' : '']"
@@ -358,15 +358,18 @@ export default {
358
358
  },
359
359
  // 显示ID
360
360
  getIdName(tag) {
361
+ let str = tag.meta.title
362
+ if (tag.query?.isView) {
363
+ str = tag.meta.title.replace('编辑', '查看')
364
+ }
361
365
  if (tag.query?.id && this.tagShowID) {
362
- let str = tag.meta.title
363
366
  if (str.includes(':') || str.includes(':')) {
364
- return tag.meta.title
367
+ return str
365
368
  } else {
366
- return `${tag.meta.title}:${tag.query.id}`
369
+ return `${str}:${tag.query.id}`
367
370
  }
368
371
  } else {
369
- return tag.meta.title
372
+ return str
370
373
  }
371
374
  },
372
375
  // 左滚动
@@ -324,6 +324,7 @@ export default {
324
324
  showThis() {
325
325
  this.pmenu = this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb[0] : {}
326
326
  this.nextMenu = this.filterUrl(this.pmenu.children)
327
+
327
328
  this.$nextTick(() => {
328
329
  this.active = this.$route.meta.active || this.$route.fullPath
329
330
  })