wui-components-v2 1.0.33 → 1.0.35
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts" setup>
|
|
2
|
-
import { computed, defineOptions, defineProps, ref } from 'vue'
|
|
2
|
+
import { computed, defineOptions, defineProps, onBeforeMount, ref } from 'vue'
|
|
3
3
|
import { useManualTheme } from '../../composables/useManualTheme'
|
|
4
4
|
import type { Columns, Entities, Enums, FoldCardModel, Groups } from '../../type'
|
|
5
5
|
import { formatItemData } from '../../utils'
|
|
@@ -21,7 +21,7 @@ const props = defineProps<{
|
|
|
21
21
|
groups: Groups
|
|
22
22
|
enumColumn: Enums
|
|
23
23
|
}>()
|
|
24
|
-
|
|
24
|
+
const contentRef = ref<any>()
|
|
25
25
|
// 展示内容
|
|
26
26
|
const exhibitData = computed(() => {
|
|
27
27
|
const { collapseNum } = props
|
|
@@ -30,12 +30,7 @@ const exhibitData = computed(() => {
|
|
|
30
30
|
return columns.filter(item => item.title !== '操作')
|
|
31
31
|
})
|
|
32
32
|
// 折叠内容
|
|
33
|
-
const collapseData =
|
|
34
|
-
const { collapseNum } = props
|
|
35
|
-
const num = collapseNum || 2
|
|
36
|
-
const columns = props.columns.length >= num ? props.columns.slice(num) : []
|
|
37
|
-
return columns.filter(item => item.title !== '操作')
|
|
38
|
-
})
|
|
33
|
+
const collapseData = ref<Columns[]>([])
|
|
39
34
|
|
|
40
35
|
// 标签字段
|
|
41
36
|
const labelColumns = computed(() => {
|
|
@@ -51,17 +46,23 @@ const labelColumns = computed(() => {
|
|
|
51
46
|
const collapseIcon = ref('arrow-down')
|
|
52
47
|
// 切换折叠内容
|
|
53
48
|
function toggleCollapse(contentId: string) {
|
|
54
|
-
const content =
|
|
55
|
-
|
|
49
|
+
const content = contentRef.value
|
|
50
|
+
console.log(contentId, content.textContent)
|
|
51
|
+
if (collapseIcon.value === 'arrow-down') {
|
|
52
|
+
const { collapseNum } = props
|
|
53
|
+
const num = collapseNum || 2
|
|
54
|
+
const columns = props.columns.length >= num ? props.columns.slice(num) : []
|
|
55
|
+
collapseData.value = columns.filter(item => item.title !== '操作')
|
|
56
56
|
// 展开
|
|
57
|
-
content.classList.remove('max-h-0')
|
|
58
|
-
content.classList.add('max-h-[500px]')
|
|
57
|
+
// content.classList.remove('max-h-0')
|
|
58
|
+
// content.classList.add('max-h-[500px]')
|
|
59
59
|
collapseIcon.value = 'arrow-up'
|
|
60
60
|
}
|
|
61
61
|
else {
|
|
62
|
+
collapseData.value = []
|
|
62
63
|
// 折叠
|
|
63
|
-
content?.classList.add('max-h-0')
|
|
64
|
-
content?.classList.remove('max-h-[500px]')
|
|
64
|
+
// content?.classList.add('max-h-0')
|
|
65
|
+
// content?.classList.remove('max-h-[500px]')
|
|
65
66
|
collapseIcon.value = 'arrow-down'
|
|
66
67
|
}
|
|
67
68
|
}
|
|
@@ -102,7 +103,7 @@ function toggleCollapse(contentId: string) {
|
|
|
102
103
|
<LabelValue :exhibit-data="exhibitData" :data="data" />
|
|
103
104
|
|
|
104
105
|
<!-- 可折叠内容 -->
|
|
105
|
-
<view :id="`${data.code}`"
|
|
106
|
+
<view :id="`${data.code}`" ref="contentRef">
|
|
106
107
|
<view class="pt-3 space-y-3">
|
|
107
108
|
<LabelValue :exhibit-data="collapseData" :data="data" />
|
|
108
109
|
</view>
|
|
@@ -114,7 +115,7 @@ function toggleCollapse(contentId: string) {
|
|
|
114
115
|
<view class="flex items-center justify-between border-t border-gray-100">
|
|
115
116
|
<view>
|
|
116
117
|
<wd-button
|
|
117
|
-
|
|
118
|
+
|
|
118
119
|
id="toggle-btn-2"
|
|
119
120
|
type="icon"
|
|
120
121
|
:icon="collapseIcon"
|
package/components/list/list.vue
CHANGED
|
@@ -155,6 +155,7 @@ function submitSearch(data: any) {
|
|
|
155
155
|
</template>
|
|
156
156
|
<foldCard v-for="item in datas" :key="item.code" :enum-column="enumColumn" :collapse-num="5" :source-id="sourceId" :groups="config" :data="item" :columns="config.columns" :primary-column="config.primaryColumn" :second-column="config.secondColumn" :label-column="config.labelColumn" model="complex">
|
|
157
157
|
<template #buttons>
|
|
158
|
+
<slot name="cardBotomButtons" :data="item" />
|
|
158
159
|
<CardBotomButtons :source-id="sourceId" :item="config" :code="item.code" :page-type="pageType" :data="item" />
|
|
159
160
|
</template>
|
|
160
161
|
</foldCard>
|