vue2server7 7.0.25 → 7.0.27

package/frontEnd/src/components/DateRange.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="date-range" :class="{ 'is-disabled': disabled }">
+    <el-date-picker
+      v-model="startVal"
+      class="date-range__picker"
+      :class="{ 'is-error': showError }"
+      :type="pickerType"
+      :placeholder="startPlaceholder"
+      :disabled="disabled"
+      :disabled-date="disabledStartDate"
+      :value-format="valueFormat"
+      :format="displayFormat"
+      clearable
+      @change="onStartChange"
+      @focus="onStartFocus"
+      @blur="onStartBlur"
+    />
+    <span class="date-range__separator">{{ separator }}</span>
+    <el-date-picker
+      v-model="endVal"
+      class="date-range__picker"
+      :class="{ 'is-error': showError }"
+      :type="pickerType"
+      :placeholder="endPlaceholder"
+      :disabled="disabled"
+      :disabled-date="disabledEndDate"
+      :value-format="valueFormat"
+      :format="displayFormat"
+      clearable
+      @change="onEndChange"
+      @focus="onEndFocus"
+      @blur="onEndBlur"
+    />
+    <span v-if="showError" class="date-range__error">{{ activeErrorMessage }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+
+export type DateRangeValue = [string | null, string | null]
+
+export type MaxSpanDaysInput = number | [number]
+
+function resolveMaxSpanDays(v: MaxSpanDaysInput | undefined): number | null {
+  if (v === undefined) return null
+  const n = Array.isArray(v) ? v[0] : v
+  if (typeof n !== 'number' || !Number.isFinite(n) || n <= 0) return null
+  return Math.floor(n)
+}
+
+function startOfLocalDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate())
+}
+
+/** 按自然日计：end 在 start 当天为 0，隔天为 1 … */
+function calendarDayDiff(start: Date, end: Date): number {
+  const s = startOfLocalDay(start).getTime()
+  const e = startOfLocalDay(end).getTime()
+  return Math.round((e - s) / 86400000)
+}
+
+/** 含首尾的自然日个数，如 1 月 1 日～1 月 15 日为 15 */
+function inclusiveDaySpan(start: Date, end: Date): number {
+  return calendarDayDiff(start, end) + 1
+}
+
+const props = withDefaults(defineProps<{
+  /** 数组模式绑定值 [start, end] */
+  modelValue?: DateRangeValue
+  /** 双字段模式 - 起始日期 */
+  start?: string | null
+  /** 双字段模式 - 结束日期 */
+  end?: string | null
+  startPlaceholder?: string
+  endPlaceholder?: string
+  separator?: string
+  /** date-picker 的 type，如 date / datetime / month / year */
+  pickerType?: 'date' | 'datetime' | 'month' | 'year'
+  /** 传给 el-date-picker 的 value-format */
+  valueFormat?: string
+  /** 传给 el-date-picker 的 format（显示格式） */
+  displayFormat?: string
+  disabled?: boolean
+  /** 是否限制结束日期不能早于开始日期（禁用不合法的日期） */
+  linkage?: boolean
+  /**
+   * 最长区间（自然日，含起止当天）。可传数字如 15，或单元素数组 [15]。
+   * 仅对 pickerType 为 date / datetime 生效。
+   */
+  maxSpanDays?: MaxSpanDaysInput
+  errorMessage?: string
+  /** 超出 maxSpanDays 时的提示（默认带天数） */
+  maxSpanErrorMessage?: string
+}>(), {
+  modelValue: undefined,
+  start: undefined,
+  end: undefined,
+  startPlaceholder: '开始日期',
+  endPlaceholder: '结束日期',
+  separator: '至',
+  pickerType: 'date',
+  valueFormat: 'YYYY-MM-DD',
+  displayFormat: undefined,
+  disabled: false,
+  linkage: true,
+  maxSpanDays: undefined,
+  errorMessage: '结束日期不能早于开始日期',
+  maxSpanErrorMessage: undefined
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: DateRangeValue]
+  'update:start': [value: string | null]
+  'update:end': [value: string | null]
+  'validate': [valid: boolean]
+}>()
+
+const isArrayMode = computed(() => props.modelValue !== undefined)
+
+const startVal = ref<string | null>(null)
+const endVal = ref<string | null>(null)
+
+const startFocused = ref(false)
+const endFocused = ref(false)
+const hasBlurred = ref(false)
+
+function toDate(val: string | null | undefined): Date | null {
+  if (!val) return null
+  const d = new Date(val)
+  return Number.isNaN(d.getTime()) ? null : d
+}
+
+const effectiveMaxSpan = computed(() => resolveMaxSpanDays(props.maxSpanDays))
+
+const spanConstraintApplies = computed(
+  () =>
+    effectiveMaxSpan.value !== null &&
+    (props.pickerType === 'date' || props.pickerType === 'datetime')
+)
+
+const orderInvalid = computed(() => {
+  const s = toDate(startVal.value)
+  const e = toDate(endVal.value)
+  return s !== null && e !== null && e < s
+})
+
+const spanInvalid = computed(() => {
+  if (!spanConstraintApplies.value || effectiveMaxSpan.value === null) return false
+  const s = toDate(startVal.value)
+  const e = toDate(endVal.value)
+  if (s === null || e === null || e < s) return false
+  return inclusiveDaySpan(s, e) > effectiveMaxSpan.value
+})
+
+const rangeInvalid = computed(() => orderInvalid.value || spanInvalid.value)
+
+const showError = computed(
+  () => hasBlurred.value && !startFocused.value && !endFocused.value && rangeInvalid.value
+)
+
+const activeErrorMessage = computed(() => {
+  if (!showError.value) return ''
+  if (orderInvalid.value) return props.errorMessage
+  if (spanInvalid.value && effectiveMaxSpan.value !== null) {
+    return (
+      props.maxSpanErrorMessage ??
+      `日期区间最长为 ${effectiveMaxSpan.value} 天（含起止当天）`
+    )
+  }
+  return props.errorMessage
+})
+
+const disabledStartDate = (date: Date): boolean => {
+  if (props.linkage && endVal.value) {
+    const e = toDate(endVal.value)
+    if (e !== null && date.getTime() > e.getTime()) return true
+  }
+  if (
+    spanConstraintApplies.value &&
+    effectiveMaxSpan.value !== null &&
+    endVal.value
+  ) {
+    const e = toDate(endVal.value)
+    if (e !== null) {
+      const maxDiff = effectiveMaxSpan.value - 1
+      if (calendarDayDiff(date, e) > maxDiff) return true
+    }
+  }
+  return false
+}
+
+const disabledEndDate = (date: Date): boolean => {
+  if (props.linkage && startVal.value) {
+    const s = toDate(startVal.value)
+    if (s !== null && date.getTime() < s.getTime()) return true
+  }
+  if (
+    spanConstraintApplies.value &&
+    effectiveMaxSpan.value !== null &&
+    startVal.value
+  ) {
+    const s = toDate(startVal.value)
+    if (s !== null) {
+      const maxDiff = effectiveMaxSpan.value - 1
+      if (calendarDayDiff(s, date) > maxDiff) return true
+    }
+  }
+  return false
+}
+
+function emitValue() {
+  const s = startVal.value || null
+  const e = endVal.value || null
+  if (isArrayMode.value) {
+    emit('update:modelValue', [s, e])
+  } else {
+    emit('update:start', s)
+    emit('update:end', e)
+  }
+  emit('validate', !rangeInvalid.value)
+}
+
+function onStartChange() {
+  emitValue()
+}
+
+function onEndChange() {
+  emitValue()
+}
+
+function onStartFocus() {
+  startFocused.value = true
+  hasBlurred.value = false
+}
+
+function onEndFocus() {
+  endFocused.value = true
+  hasBlurred.value = false
+}
+
+function onStartBlur() {
+  startFocused.value = false
+  emitValue()
+  if (!endFocused.value) hasBlurred.value = true
+}
+
+function onEndBlur() {
+  endFocused.value = false
+  emitValue()
+  if (!startFocused.value) hasBlurred.value = true
+}
+
+function validate(): boolean {
+  hasBlurred.value = true
+  return !rangeInvalid.value
+}
+
+function reset() {
+  startVal.value = null
+  endVal.value = null
+  hasBlurred.value = false
+}
+
+defineExpose({ validate, reset })
+
+watch(
+  () => ({
+    isArr: isArrayMode.value,
+    s: isArrayMode.value ? props.modelValue?.[0] : props.start,
+    e: isArrayMode.value ? props.modelValue?.[1] : props.end
+  }),
+  ({ s, e }) => {
+    const newS = s || null
+    const newE = e || null
+    if (newS !== startVal.value) startVal.value = newS
+    if (newE !== endVal.value) endVal.value = newE
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped>
+.date-range {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.date-range__picker {
+  flex: 1;
+  min-width: 0;
+}
+
+.date-range__separator {
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.date-range.is-disabled .date-range__separator {
+  color: var(--el-text-color-placeholder);
+}
+
+.date-range__picker.is-error :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.date-range__error {
+  width: 100%;
+  color: var(--el-color-danger);
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+}
+</style>

package/frontEnd/src/pages/DateRangePage.vue

@@ -0,0 +1,122 @@
+<template>
+  <section class="page date-range-page">
+    <h1 class="title">日期区间组件</h1>
+    <p class="desc">演示 <code>DateRange</code> 的数组绑定、双字段绑定与不同 <code>pickerType</code>。</p>
+
+    <el-card class="demo-card" shadow="never">
+      <template #header>
+        <span>数组绑定 <code>v-model</code></span>
+      </template>
+      <DateRange v-model="rangeArray" class="demo-control" />
+      <div class="demo-output">
+        当前值：<code>{{ JSON.stringify(rangeArray) }}</code>
+      </div>
+    </el-card>
+
+    <el-card class="demo-card" shadow="never">
+      <template #header>
+        <span>双字段绑定 <code>start</code> / <code>end</code></span>
+      </template>
+      <DateRange
+        v-model:start="startField"
+        v-model:end="endField"
+        class="demo-control"
+      />
+      <div class="demo-output">
+        start：<code>{{ startField ?? 'null' }}</code>，end：<code>{{ endField ?? 'null' }}</code>
+      </div>
+    </el-card>
+
+    <el-card class="demo-card" shadow="never">
+      <template #header>
+        <span>最长区间 <code>max-span-days</code>（如 15 或 <code>[15]</code>，含首尾共 15 个自然日）</span>
+      </template>
+      <DateRange v-model="rangeMaxSpan" :max-span-days="[15]" class="demo-control" />
+      <div class="demo-output">
+        当前值：<code>{{ JSON.stringify(rangeMaxSpan) }}</code>
+      </div>
+    </el-card>
+
+    <el-card class="demo-card" shadow="never">
+      <template #header>
+        <span>日期时间 <code>pickerType="datetime"</code></span>
+      </template>
+      <DateRange
+        v-model="rangeDatetime"
+        picker-type="datetime"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        class="demo-control"
+      />
+      <div class="demo-output">
+        当前值：<code>{{ JSON.stringify(rangeDatetime) }}</code>
+      </div>
+    </el-card>
+
+    <el-card class="demo-card" shadow="never">
+      <template #header>
+        <span>禁用态</span>
+      </template>
+      <DateRange
+        v-model="rangeDisabled"
+        disabled
+        class="demo-control"
+      />
+    </el-card>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import DateRange, { type DateRangeValue } from '../components/DateRange.vue'
+
+const rangeArray = ref<DateRangeValue>([null, null])
+const startField = ref<string | null>(null)
+const endField = ref<string | null>(null)
+const rangeMaxSpan = ref<DateRangeValue>([null, null])
+const rangeDatetime = ref<DateRangeValue>([null, null])
+const rangeDisabled = ref<DateRangeValue>(['2026-01-01', '2026-01-31'])
+</script>
+
+<style scoped>
+.page.date-range-page {
+  padding: 20px 24px;
+  max-width: 720px;
+}
+
+.title {
+  margin: 0 0 8px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.desc {
+  margin: 0 0 20px;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.demo-card {
+  margin-bottom: 16px;
+}
+
+.demo-card:last-child {
+  margin-bottom: 0;
+}
+
+.demo-control {
+  max-width: 560px;
+}
+
+.demo-output {
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--el-text-color-regular);
+}
+
+.demo-output code {
+  font-size: 12px;
+}
+</style>

package/frontEnd/src/router/routes.js

@@ -3,6 +3,7 @@ import CascaderPage from '../pages/CascaderPage.vue'
 import ExportExcelPage from '../pages/ExportExcelPage.vue'
 import ImportTablePage from '../pages/ImportTablePage.vue'
 import PositionReportPage from '../pages/PositionReportPage.vue'
+import DateRangePage from '../pages/DateRangePage.vue'
 
 export const routes = [
   {
@@ -53,5 +54,14 @@ export const routes = [
       title: '头寸报备',
       showInMenu: true
     }
+  },
+  {
+    path: '/date-range',
+    name: 'DateRange',
+    component: DateRangePage,
+    meta: {
+      title: '日期区间',
+      showInMenu: true
+    }
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "7.0.25",
+  "version": "7.0.27",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",

package/test/fun.js

@@ -0,0 +1,15 @@
+function addIdText(list = []) {
+    const stack = [...list]
+
+    while (stack.length) {
+        const node = stack.pop()
+
+        node.idText = `${node.id}-${node.text}`
+
+        if (Array.isArray(node.children) && node.children.length) {
+            stack.push(...node.children)
+        }
+    }
+
+    return list
+}

package/test/11111111.tx

@@ -1,24 +0,0 @@
-import type { App, Component } from 'vue'
-import NumberInput from './NumberInput.vue'
-
-// ✅ 组件列表类型声明
-const components: Component[] = [NumberInput]
-
-// ✅ 插件类型
-const install = (app: App): void => {
-  components.forEach((comp) => {
-    app.component(
-      // @ts-ignore 兼容 name 类型
-      comp.name as string,
-      comp
-    )
-  })
-}
-
-// ✅ 导出（支持 app.use）
-export default {
-  install
-}
-
-// ✅ 也可以单独导出组件（可选）
-export { NumberInput }