wui-components-v2 1.1.41 → 1.1.43

package/components/custom-date-picker/custom-date-picker.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import dayjs from 'dayjs/esm/index'
+
+defineOptions({
+  name: 'CustomDatePicker',
+})
+const props = defineProps({
+  modelValue: String,
+  placeholder: String,
+  columns: {
+    type: Array as PropType<SelectOption[]>,
+    default: () => [],
+  },
+  labelKey: { type: String, default: 'label' },
+  valueKey: { type: String, default: 'value' },
+  type: { type: String, default: 'date' },
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+interface SelectOption {
+  label: string
+  value: string | number
+  [key: string]: any
+}
+
+console.log(props.type, 'props.type')
+
+const open = ref(false)
+const currentValue = ref<any>(props.modelValue)
+function clear() {
+  currentValue.value = ''
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    console.log(val, 'val1111')
+    currentValue.value = val
+  },
+)
+
+watch(currentValue, (val) => {
+  emit('update:modelValue', val)
+})
+
+const labelText = computed(() => {
+  const formatMap: {
+    date: string
+    datetime: string
+    [key: string]: string // 索引签名：允许任意字符串作为键
+  } = {
+    date: 'YYYY-MM-DD',
+    datetime: 'YYYY-MM-DD HH:mm',
+  }
+  if (['date', 'datetime'].includes(props.type)) {
+    return currentValue.value ? dayjs(currentValue.value).format(formatMap[props.type] as string) : ''
+  }
+  else {
+    return currentValue.value || ''
+  }
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <wd-input
+      v-model="labelText"
+      readonly
+      :placeholder="placeholder"
+      class="flex-1"
+      @click="open = true"
+    />
+    <wd-icon v-if="labelText" name="close-circle" size="16px" @click="clear" />
+    <wd-icon v-else name="right" size="16px" @click="clear" />
+  </div>
+
+  <wd-calendar
+    v-if="['date', 'datetime'].includes(type)"
+    v-model="currentValue"
+    v-model:visible="open"
+    label-key="label"
+    value-key="value"
+    class="custom-date-picker"
+    :type="type as any"
+  />
+  <wd-datetime-picker
+    v-else
+    v-model="currentValue"
+    v-model:visible="open"
+    label-key="label"
+    value-key="value"
+    class="custom-date-picker"
+    :type="type as any"
+  />
+</template>
+
+<style scoped lang="scss">
+.custom-date-picker {
+  width: 100%;
+  :deep(.wd-calendar__wrapper) {
+  padding : 0 20px;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+:deep(.uni-scroll-view) {
+   scrollbar-width: none;
+}
+}
+</style>

package/components/custom-select-picker/custom-select-picker.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+defineOptions({
+  name: 'CustomSelectPicker',
+})
+const props = defineProps({
+  modelValue: [String, Array],
+  placeholder: String,
+  columns: {
+    type: Array as PropType<SelectOption[]>,
+    default: () => [],
+  },
+  labelKey: { type: String, default: 'label' },
+  valueKey: { type: String, default: 'value' },
+  type: { type: String, default: 'radio' },
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+}>()
+
+interface SelectOption {
+  label: string
+  value: string | number
+  [key: string]: any
+}
+
+const open = ref(false)
+const currentValue = ref<any>(props.modelValue)
+function clear() {
+  currentValue.value = ''
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    console.log('val', val, Array.isArray(val))
+    currentValue.value = val
+  },
+)
+
+watch(currentValue, (val) => {
+  emit('update:modelValue', val)
+})
+
+const labelText = computed(() => {
+  // 多选情况：currentValue 是数组
+  if (Array.isArray(currentValue.value)) {
+    const labels = currentValue.value.map((val) => {
+      const item = props.columns.find(
+        item => item[props.valueKey] === val,
+      )
+      return item ? item[props.labelKey] : ''
+    }).filter(Boolean)
+    return labels.join(', ')
+  }
+  // 单选情况：currentValue 是单个值
+  const item = props.columns.find(
+    item => item[props.valueKey] === currentValue.value,
+  )
+  return item ? item[props.labelKey] : ''
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <wd-input
+      v-model="labelText"
+      readonly
+      :placeholder="placeholder"
+      class="flex-1"
+      @click="open = true"
+    />
+    <wd-icon v-if="labelText" name="close-circle" size="16px" @click="clear" />
+    <wd-icon v-else name="right" size="16px" @click="clear" />
+  </div>
+
+  <wd-select-picker
+    v-model="currentValue"
+    v-model:visible="open"
+    :columns="columns"
+    label-key="label"
+    value-key="value"
+    class="custom-select-picker"
+    :type="type as any"
+  />
+</template>
+
+<style scoped lang="scss">
+.custom-select-picker {
+  width: 100%;
+  :deep(.wd-select-picker__wrapper) {
+  padding : 0 20px;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+:deep(.uni-scroll-view) {
+   scrollbar-width: none;
+}
+}
+</style>

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

@@ -86,12 +86,20 @@ function toggleCollapse(contentId: string) {
     <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-1 text-base text-gray-800 font-medium dark:text-white">
-          <slot name="select" />
-          <view class="mr-1 h-4 w-1 rounded-2xl" :style="{ backgroundColor: currentThemeColor.primary }" />
-          <view class="w-50 overflow-hidden text-ellipsis whitespace-nowrap font-700">
+        <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 whitespace-nowrap 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"
@@ -127,12 +135,11 @@ function toggleCollapse(contentId: string) {
         <view class="flex items-center justify-between border-t border-gray-100">
           <!-- 折叠按钮 -->
           <view>
-            <wd-button
-              v-if="showCollapse"
-              id="toggle-btn-2"
-              type="icon"
+            <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-blue-600"
+              class="mr-auto flex items-center px-3 py-2 text-sm text-[#6b7280] !py-1"
               @click.stop="toggleCollapse(data.code)"
             />
           </view>