wui-components-v2 1.1.69 → 1.1.70

package/components/fold-card/fold-card.vue

@@ -1,171 +1,171 @@
-<script lang="ts" setup>
-import { computed, defineOptions, defineProps, ref } from 'vue'
-import type { Columns, Entities, Enums, FoldCardModel, Groups } from '../../type'
-import { formatItemData } from '../../utils'
-import LabelValue from '../label-value/label-value.vue'
-import { useManualTheme } from '../../composables/useManualTheme'
-
-defineOptions({
-  name: 'FoldCard',
-})
-
-const props = defineProps<{
-  columns: Columns[]
-  collapseNum?: number
-  primaryColumn?: Columns
-  secondColumn?: Columns
-  labelColumn?: Columns
-  data: Entities
-  model: FoldCardModel
-  sourceId: string
-  groups: Groups
-  enumColumn?: Enums
-  index: number
-}>()
-const contentRef = ref<any>()
-const { currentThemeColor } = useManualTheme()
-// 展示内容
-const exhibitData = computed(() => {
-  const { collapseNum } = props
-  const num = collapseNum || 2
-  const columns = props.columns.length >= num ? props.columns.slice(0, num) : props.columns
-  return columns.filter(item => item.title !== '操作')
-})
-
-// 是否展示折叠按钮
-const showCollapse = computed(() => {
-  const { collapseNum } = props
-  const num = collapseNum || 2
-  return props.columns.length > num
-})
-
-// 折叠内容
-const collapseData = ref<Columns[]>([])
-
-// 标签字段
-const labelColumns = computed(() => {
-  if (props.labelColumn && props.enumColumn) {
-    return props.enumColumn[props.labelColumn.mstrucId]
-  } else {
-    return []
-  }
-})
-
-// 折叠图标
-const collapseIcon = ref('arrow-down')
-// 切换折叠内容
-function toggleCollapse(contentId: string) {
-  console.log(contentId)
-  if (collapseIcon.value === 'arrow-down') {
-    const { collapseNum } = props
-    const num = collapseNum || 2
-    const columns = props.columns.length >= num ? props.columns.slice(num) : []
-    collapseData.value = columns.filter(item => item.title !== '操作')
-    // 展开
-    // content.classList.remove('max-h-0')
-    // content.classList.add('max-h-[500px]')
-    collapseIcon.value = 'arrow-up'
-  } else {
-    collapseData.value = []
-    // 折叠
-    // content?.classList.add('max-h-0')
-    // content?.classList.remove('max-h-[500px]')
-    collapseIcon.value = 'arrow-down'
-  }
-}
-</script>
-
-<template>
-  <!-- 订单卡片容器 -->
-  <view class="mx-auto max-w-md space-y-4">
-    <!-- 订单卡片2 -->
-    <view class="ma-2 overflow-hidden rounded-xl bg-white shadow-sm dark:bg-[var(--wot-dark-background2)]">
-      <!-- 订单头部 -->
-      <view v-if="props.primaryColumn" class="flex items-center justify-between border-b border-gray-100 p-4">
-        <view class="flex items-center gap-4 text-base text-gray-800 font-medium dark:text-white">
-          <view class="flex items-center gap-1">
-            <slot name="select" />
-            <view class="mr-1 h-4 w-1 rounded-2xl" :style="{ backgroundColor: currentThemeColor.primary }" />
-          </view>
-          <view>
-            <view class="flex items-center gap-2">
-              <view class="overflow-hidden text-ellipsis font-700">
-                {{
-                  formatItemData(
-                    data.fieldMap[props.primaryColumn.sourceId],
-                    props.primaryColumn.extControlType || props.primaryColumn.controlType
-                  )
-                }}
-              </view>
-              <slot name="addressInfo" />
-            </view>
-            <slot name="detailAddress" />
-          </view>
-        </view>
-        <view
-          v-if="props.labelColumn"
-          class="whitespace-nowrap rounded px-1 py-1 text-sm text-white font-700"
-          :style="{
-            color: labelColumns?.find(
-              item => props.labelColumn && item.value === data.fieldMap[props.labelColumn.sourceId]
-            )?.css?.color,
-          }"
-        >
-          {{
-            formatItemData(
-              data.fieldMap[props.labelColumn.sourceId],
-              props.labelColumn.extControlType || props.labelColumn.controlType
-            )
-          }}
-        </view>
-      </view>
-
-      <!-- 订单内容 -->
-      <view v-if="props.model === 'complex'" class="p-4 pt-0">
-        <!-- 商品列表 -->
-        <view class="mb-3">
-          <!-- 订单信息 -->
-          <view class="text-sm space-y-3">
-            <LabelValue :exhibit-data="exhibitData" :data="data" :index="index" />
-
-            <!-- 可折叠内容 -->
-            <view :id="`${data.code}`" ref="contentRef">
-              <view class="space-y-3">
-                <LabelValue :exhibit-data="collapseData" :data="data" :index="index" />
-              </view>
-            </view>
-          </view>
-        </view>
-
-        <!-- 订单底部 -->
-        <view class="flex items-center justify-between border-t border-gray-100">
-          <!-- 折叠按钮 -->
-          <view>
-            <wd-icon
-              v-if="showCollapse"
-              id="toggle-btn-2"
-              name="down"
-              size="24px"
-              :icon="collapseIcon"
-              class="mr-auto flex items-center px-3 py-2 text-sm text-[#6b7280] !py-1"
-              @click.stop="toggleCollapse(data.code)"
-            />
-          </view>
-
-          <view class="flex items-center gap-1">
-            <slot name="buttons" />
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style>
-:deep(.wd-collapse-item__body) {
-  background-color: #f9f9f9 !important;
-}
-:deep(.wot-theme-dark .wd-collapse-item__body) {
-  background-color: #1b1b1e !important;
-}
-</style>
+<script lang="ts" setup>
+import { computed, defineOptions, defineProps, ref } from 'vue'
+import type { Columns, Entities, Enums, FoldCardModel, Groups } from '../../type'
+import { formatItemData } from '../../utils'
+import LabelValue from '../label-value/label-value.vue'
+import { useManualTheme } from '../../composables/useManualTheme'
+
+defineOptions({
+  name: 'FoldCard',
+})
+
+const props = defineProps<{
+  columns: Columns[]
+  collapseNum?: number
+  primaryColumn?: Columns
+  secondColumn?: Columns
+  labelColumn?: Columns
+  data: Entities
+  model: FoldCardModel
+  sourceId: string
+  groups: Groups
+  enumColumn?: Enums
+  index: number
+}>()
+const contentRef = ref<any>()
+const { currentThemeColor } = useManualTheme()
+// 展示内容
+const exhibitData = computed(() => {
+  const { collapseNum } = props
+  const num = collapseNum || 2
+  const columns = props.columns.length >= num ? props.columns.slice(0, num) : props.columns
+  return columns.filter(item => item.title !== '操作')
+})
+
+// 是否展示折叠按钮
+const showCollapse = computed(() => {
+  const { collapseNum } = props
+  const num = collapseNum || 2
+  return props.columns.length > num
+})
+
+// 折叠内容
+const collapseData = ref<Columns[]>([])
+
+// 标签字段
+const labelColumns = computed(() => {
+  if (props.labelColumn && props.enumColumn) {
+    return props.enumColumn[props.labelColumn.mstrucId]
+  } else {
+    return []
+  }
+})
+
+// 折叠图标
+const collapseIcon = ref('arrow-down')
+// 切换折叠内容
+function toggleCollapse(contentId: string) {
+  console.log(contentId)
+  if (collapseIcon.value === 'arrow-down') {
+    const { collapseNum } = props
+    const num = collapseNum || 2
+    const columns = props.columns.length >= num ? props.columns.slice(num) : []
+    collapseData.value = columns.filter(item => item.title !== '操作')
+    // 展开
+    // content.classList.remove('max-h-0')
+    // content.classList.add('max-h-[500px]')
+    collapseIcon.value = 'arrow-up'
+  } else {
+    collapseData.value = []
+    // 折叠
+    // content?.classList.add('max-h-0')
+    // content?.classList.remove('max-h-[500px]')
+    collapseIcon.value = 'arrow-down'
+  }
+}
+</script>
+
+<template>
+  <!-- 订单卡片容器 -->
+  <view class="mx-auto max-w-md space-y-4">
+    <!-- 订单卡片2 -->
+    <view class="ma-2 overflow-hidden rounded-xl bg-white shadow-sm dark:bg-[var(--wot-dark-background2)]">
+      <!-- 订单头部 -->
+      <view v-if="props.primaryColumn" class="flex items-center justify-between border-b border-gray-100 p-4">
+        <view class="flex items-center gap-4 text-base text-gray-800 font-medium dark:text-white">
+          <view class="flex items-center gap-1">
+            <slot name="select" />
+            <view class="mr-1 h-4 w-1 rounded-2xl" :style="{ backgroundColor: currentThemeColor.primary }" />
+          </view>
+          <view>
+            <view class="flex items-center gap-2">
+              <view class="overflow-hidden text-ellipsis font-700">
+                {{
+                  formatItemData(
+                    data.fieldMap[props.primaryColumn.sourceId],
+                    props.primaryColumn.extControlType || props.primaryColumn.controlType
+                  )
+                }}
+              </view>
+              <slot name="addressInfo" />
+            </view>
+            <slot name="detailAddress" />
+          </view>
+        </view>
+        <view
+          v-if="props.labelColumn"
+          class="whitespace-nowrap rounded px-1 py-1 text-sm text-white font-700"
+          :style="{
+            color: labelColumns?.find(
+              item => props.labelColumn && item.value === data.fieldMap[props.labelColumn.sourceId]
+            )?.css?.color,
+          }"
+        >
+          {{
+            formatItemData(
+              data.fieldMap[props.labelColumn.sourceId],
+              props.labelColumn.extControlType || props.labelColumn.controlType
+            )
+          }}
+        </view>
+      </view>
+
+      <!-- 订单内容 -->
+      <view v-if="props.model === 'complex'" class="p-4 pt-0">
+        <!-- 商品列表 -->
+        <view class="mb-3">
+          <!-- 订单信息 -->
+          <view class="text-sm space-y-3">
+            <LabelValue :exhibit-data="exhibitData" :data="data" :index="index" />
+
+            <!-- 可折叠内容 -->
+            <view :id="`${data.code}`" ref="contentRef">
+              <view class="space-y-3">
+                <LabelValue :exhibit-data="collapseData" :data="data" :index="index" />
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 订单底部 -->
+        <view class="flex items-center justify-between border-t border-gray-100">
+          <!-- 折叠按钮 -->
+          <view>
+            <wd-icon
+              v-if="showCollapse"
+              id="toggle-btn-2"
+              name="down"
+              size="24px"
+              :icon="collapseIcon"
+              class="mr-auto flex items-center px-3 py-2 text-sm text-[#6b7280] !py-1"
+              @click.stop="toggleCollapse(data.code)"
+            />
+          </view>
+
+          <view class="flex items-center gap-1">
+            <slot name="buttons" />
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style>
+:deep(.wd-collapse-item__body) {
+  background-color: #f9f9f9 !important;
+}
+:deep(.wot-theme-dark .wd-collapse-item__body) {
+  background-color: #1b1b1e !important;
+}
+</style>