vue2server7 7.0.26 → 7.0.28

package/frontEnd/src/components/DateRange.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="date-range" :class="{ 'is-disabled': disabled }">
+    <div class="date-range__row">
+      <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"
+      />
+    </div>
+    <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;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.date-range__row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.date-range__picker {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* class 往往挂在 .el-date-editor 根上，用行容器做 :deep 更稳 */
+.date-range__row :deep(.el-date-editor) {
+  width: 100%;
+  max-width: 100%;
+}
+
+.date-range__row :deep(.el-date-editor .el-input__wrapper) {
+  width: 100%;
+}
+
+.date-range__separator {
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.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 {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  color: var(--el-color-danger);
+  font-size: 12px;
+  line-height: 1.4;
+  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/pages/PositionReportPage.vue

@@ -1,71 +1,80 @@
 <template>
   <section class="page position-report-page">
-    <h1 class="title">头寸报备信息</h1>
+    <header class="page-header">
+      <h1 class="title">头寸报备信息</h1>
+      <span class="header-badge" aria-hidden="true" />
+    </header>
 
     <el-form
       ref="formRef"
       :model="form"
       :rules="rules"
-      label-width="140px"
+      label-width="168px"
       label-suffix="："
       class="report-form"
     >
-      <!-- 第一行 -->
-      <el-row :gutter="24">
+      <!-- 按截图三列对齐 -->
+      <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="头寸报备编号" prop="reportNo">
-            <el-input v-model="form.reportNo" placeholder="系统自动生成" disabled />
+          <el-form-item label="头寸报备编号" prop="id">
+            <el-input v-model="form.id" placeholder="" clearable />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="业务类型" prop="bizType">
-            <el-input v-model="form.bizType" disabled />
+          <el-form-item label="业务类型" prop="forecastType">
+            <el-select v-model="form.forecastType" placeholder="请选择" style="width: 100%">
+              <el-option
+                v-for="o in forecastTypeOptions"
+                :key="o.value"
+                :label="o.label"
+                :value="o.value"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="客户分类" prop="customerType">
-            <el-select v-model="form.customerType" placeholder="请选择" style="width: 100%">
-              <el-option label="对公" value="对公" />
-              <el-option label="对私" value="对私" />
-            </el-select>
+          <el-form-item label="客户分类" prop="clientType">
+            <el-input v-model="clientTypeLabel" disabled />
           </el-form-item>
         </el-col>
       </el-row>
 
-      <!-- 第二行 -->
-      <el-row :gutter="24">
+      <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="是否集团" prop="isGroup">
-            <el-select v-model="form.isGroup" placeholder="请选择" style="width: 100%">
-              <el-option label="是" value="是" />
-              <el-option label="否" value="否" />
+          <el-form-item label="证件类型" prop="priIdCardType">
+            <el-select v-model="form.priIdCardType" placeholder="请选择" style="width: 100%">
+              <el-option
+                v-for="o in priIdCardTypeOptions"
+                :key="o.value"
+                :label="o.label"
+                :value="o.value"
+              />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="对公组织架构代码" prop="orgCode">
-            <el-input v-model="form.orgCode" placeholder="请输入" />
+          <el-form-item label="对公组织机构代码" prop="pubOrgCode">
+            <el-input v-model="form.pubOrgCode" clearable />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="客户名称" prop="customerName">
-            <el-input v-model="form.customerName" placeholder="请输入" />
+          <el-form-item label="客户名称" prop="custName">
+            <el-input v-model="form.custName" disabled />
           </el-form-item>
         </el-col>
       </el-row>
 
-      <!-- 第三行 -->
-      <el-row :gutter="24">
+      <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="投付款币种金额" prop="currency">
-            <div style="display: flex; gap: 8px; width: 100%">
-              <el-select v-model="form.currency" placeholder="币种" style="width: 140px; flex-shrink: 0">
+          <el-form-item label="拟付款币种/金额" prop="currency">
+            <div class="currency-amt">
+              <el-select v-model="form.currency" placeholder="币种" class="currency-amt__cur">
                 <el-option label="CNY - 人民币" value="CNY" />
                 <el-option label="USD - 美元" value="USD" />
                 <el-option label="EUR - 欧元" value="EUR" />
                 <el-option label="HKD - 港币" value="HKD" />
               </el-select>
-              <el-input v-model="form.amount" placeholder="金额" />
+              <el-input v-model="form.forecastAmt" class="currency-amt__amt" clearable />
             </div>
           </el-form-item>
         </el-col>
@@ -81,17 +90,14 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="8">
-          <el-form-item label="账户名称" prop="accountName">
-            <el-input v-model="form.accountName" placeholder="请输入" />
-          </el-form-item>
+        <el-col :span="8" class="form-col--spacer">
+          <div class="form-col-placeholder" aria-hidden="true" />
         </el-col>
       </el-row>
 
-      <!-- 第四行 -->
-      <el-row :gutter="24">
+      <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="计划汇/收日期" prop="planDate">
+          <el-form-item label="计划汇款日期" prop="planDate">
             <el-date-picker
               v-model="form.planDate"
               type="date"
@@ -103,9 +109,9 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="预备日期" prop="prepareDate">
+          <el-form-item label="报备日期" prop="bigForDate">
             <el-date-picker
-              v-model="form.prepareDate"
+              v-model="form.bigForDate"
               type="date"
               placeholder="请选择日期"
               format="YYYY-MM-DD"
@@ -115,150 +121,244 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="报备创号" prop="createNo">
-            <el-input v-model="form.createNo" placeholder="请输入" />
+          <el-form-item label="报备时间" prop="bigForTime">
+            <el-input v-model="form.bigForTime" placeholder="HHmmss" clearable />
           </el-form-item>
         </el-col>
       </el-row>
 
-      <!-- 第五行 -->
-      <el-row :gutter="24">
+      <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="是否议叙" prop="isNegotiate">
-            <el-select v-model="form.isNegotiate" placeholder="请选择" style="width: 100%">
-              <el-option label="是" value="是" />
-              <el-option label="否" value="否" />
+          <el-form-item label="是否退汇" prop="rtnFlag">
+            <el-select v-model="form.rtnFlag" placeholder="请选择" style="width: 100%">
+              <el-option label="否" value="01" />
+              <el-option label="是" value="02" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="原银行业务编号" prop="origBizNo">
-            <el-input v-model="form.origBizNo" placeholder="请输入" />
+          <el-form-item label="原银行业务编号" prop="oriInnerRefNo">
+            <el-input
+              v-model="form.oriInnerRefNo"
+              maxlength="16"
+              show-word-limit
+              placeholder="退汇为「是」时必填，16 位"
+              clearable
+            />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="联户行" prop="linkedBank">
-            <el-select v-model="form.linkedBank" placeholder="请选择" filterable style="width: 100%">
-              <el-option label="CIPSCNSHXXX" value="CIPSCNSHXXX" />
-              <el-option label="BKCHCNBJXXX" value="BKCHCNBJXXX" />
-            </el-select>
+          <el-form-item label="账户行" prop="nostro">
+            <el-input v-model="form.nostro" clearable />
           </el-form-item>
         </el-col>
       </el-row>
 
-      <!-- 第六行 -->
-      <el-row :gutter="24">
+      <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="收款银行" prop="receivingBank">
-            <el-input v-model="form.receivingBank" placeholder="请输入" />
+          <el-form-item label="收款银行" prop="swiftCode">
+            <el-input v-model="form.swiftCode" placeholder="最终收款行 SWIFT" clearable />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="收款银行开户行" prop="receivingBankCode">
-            <el-input v-model="form.receivingBankCode" placeholder="请输入" />
+          <el-form-item label="收款银行开户行" prop="pyeAcctBicSCode">
+            <el-input v-model="form.pyeAcctBicSCode" clearable />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="收款银行开户行名" prop="receivingBankName">
-            <el-input v-model="form.receivingBankName" placeholder="请输入" />
+          <el-form-item label="收款银行开户行名称" prop="pyeAcctBicName">
+            <el-input v-model="form.pyeAcctBicName" disabled />
           </el-form-item>
         </el-col>
       </el-row>
 
-      <!-- 第七行 -->
-      <el-row :gutter="24">
+      <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="邮件通知覆盖产品" prop="emailProduct">
-            <el-select v-model="form.emailProduct" placeholder="请选择" style="width: 100%">
-              <el-option label="产品A" value="A" />
-              <el-option label="产品B" value="B" />
+          <el-form-item label="邮件通知服务产品" prop="mailFlag">
+            <el-select v-model="form.mailFlag" placeholder="请选择" style="width: 100%">
+              <el-option label="否" value="0" />
+              <el-option label="是" value="1" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="多币种汇款产品" prop="multiCurrencyProduct">
-            <el-select v-model="form.multiCurrencyProduct" placeholder="请选择" style="width: 100%">
-              <el-option label="产品A" value="A" />
-              <el-option label="产品B" value="B" />
+          <el-form-item label="多币种汇款产品" prop="mulCurFlag">
+            <el-select v-model="form.mulCurFlag" placeholder="请选择" style="width: 100%">
+              <el-option label="否" value="0" />
+              <el-option label="是" value="1" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="自贸区标识" prop="ftzFlag">
-            <el-checkbox v-model="form.ftzFlag" />
+            <el-select v-model="form.ftzFlag" placeholder="请选择" style="width: 100%">
+              <el-option label="否" value="0" />
+              <el-option label="是" value="1" />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
 
-      <!-- 第八行 -->
-      <el-row :gutter="24">
+      <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="报备人" prop="reporter">
-            <el-input v-model="form.reporter" placeholder="请输入" />
+          <el-form-item label="报备人" prop="linkMan">
+            <el-input v-model="form.linkMan" clearable />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="联系电话" prop="phone">
-            <el-input v-model="form.phone" placeholder="请输入" />
+          <el-form-item label="联系电话" prop="linkWay">
+            <el-input v-model="form.linkWay" clearable />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="报备部门" prop="department">
-            <el-input v-model="form.department" placeholder="请输入" />
+          <el-form-item label="报备机构" prop="orgId">
+            <el-select
+              v-model="form.orgId"
+              filterable
+              allow-create
+              default-first-option
+              placeholder="请选择或输入"
+              style="width: 100%"
+            >
+              <el-option label="00301-和平里支行营业部" value="00301" />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
 
-      <!-- 第九行 -->
-      <el-row :gutter="24">
-        <el-col :span="16">
+      <el-row :gutter="20">
+        <el-col :span="8">
           <el-form-item label="报备说明" prop="remark">
-            <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入" />
+            <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="" />
           </el-form-item>
         </el-col>
+        <el-col :span="8" class="form-col--spacer">
+          <div class="form-col-placeholder" aria-hidden="true" />
+        </el-col>
         <el-col :span="8">
-          <el-form-item label="登记" prop="register">
-            <el-input v-model="form.register" placeholder="请输入" />
+          <el-form-item label="备注(拒绝原因)" prop="rejectRemark">
+            <el-input v-model="form.rejectRemark" clearable />
           </el-form-item>
         </el-col>
       </el-row>
 
-      <!-- 第十行 -->
-      <el-row :gutter="24">
+      <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="使用状态" prop="useStatus">
-            <el-select v-model="form.useStatus" placeholder="请选择" style="width: 100%">
-              <el-option label="未使用" value="未使用" />
-              <el-option label="已使用" value="已使用" />
+          <el-form-item label="使用状态" prop="isUsedFlg">
+            <el-select v-model="form.isUsedFlg" placeholder="请选择" style="width: 100%">
+              <el-option label="未使用" value="0" />
+              <el-option label="已使用" value="1" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="当前状态" prop="currentStatus">
-            <el-input v-model="form.currentStatus" placeholder="请输入" disabled />
+          <el-form-item label="当前队列" prop="forecastStatus">
+            <el-select v-model="form.forecastStatus" placeholder="请选择" style="width: 100%">
+              <el-option
+                v-for="o in forecastStatusOptions"
+                :key="o.value"
+                :label="o.label"
+                :value="o.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="业务渠道" prop="businessChannel">
+            <el-input v-model="form.businessChannel" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-divider content-position="left">授权 / 复核及其他</el-divider>
+
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="授权人" prop="author">
+            <el-input v-model="form.author" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="授权日期" prop="authorDate">
+            <el-input v-model="form.authorDate" placeholder="YYYY-MM-DD" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="授权时间" prop="authorTime">
+            <el-input v-model="form.authorTime" placeholder="HHmmss" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="复核人" prop="supervisor">
+            <el-input v-model="form.supervisor" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="复核日期" prop="checkDate">
+            <el-input v-model="form.checkDate" placeholder="YYYY-MM-DD" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="复核时间" prop="checkTime">
+            <el-input v-model="form.checkTime" placeholder="HHmmss" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="大额授权码" prop="posForecastNo">
+            <el-input v-model="form.posForecastNo" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="中间行 SWIFT" prop="interBk">
+            <el-input v-model="form.interBk" clearable />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="业务大区" prop="bizRegion">
-            <el-input v-model="form.bizRegion" placeholder="请输入" />
+          <el-form-item label="收款人名称" prop="pyeName">
+            <el-input v-model="form.pyeName" clearable />
           </el-form-item>
         </el-col>
       </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <el-form-item label="实际付款金额" prop="usedAmt">
+            <el-input v-model="form.usedAmt" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="可操作标志" prop="isOperateFlag">
+            <el-select v-model="form.isOperateFlag" placeholder="请选择" style="width: 100%">
+              <el-option label="不可操作" value="0" />
+              <el-option label="可以操作" value="1" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" class="form-col--spacer">
+          <div class="form-col-placeholder" aria-hidden="true" />
+        </el-col>
+      </el-row>
     </el-form>
 
     <div class="footer">
-      <el-button type="danger" @click="onFlowLog">操作流水</el-button>
+      <el-button type="danger" plain @click="onFlowLog">操作流水</el-button>
       <div class="footer-right">
-        <el-button type="danger" @click="onSubmit">提交</el-button>
-        <el-button type="danger" @click="onSave">保存</el-button>
-        <el-button type="danger" @click="onClose">关闭</el-button>
+        <el-button type="danger" @click="onPass">通过</el-button>
+        <el-button type="danger" plain @click="onReject">驳回</el-button>
+        <el-button type="danger" plain @click="onBack">返回</el-button>
       </div>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
@@ -266,135 +366,232 @@ import type { FormInstance, FormRules } from 'element-plus'
 const router = useRouter()
 const formRef = ref<FormInstance>()
 
-interface ReportForm {
-  reportNo: string
-  bizType: string
-  customerType: string
-  isGroup: string
-  orgCode: string
-  customerName: string
+/** 与接口字典一致的表单模型（均为 string，便于直接提交 JSON） */
+interface PositionForecastForm {
+  id: string
+  author: string
+  authorDate: string
+  authorTime: string
+  bigForDate: string
+  bigForTime: string
+  checkDate: string
+  checkTime: string
+  clientType: string
   currency: string
-  amount: string
-  valueDate: string
-  accountName: string
-  planDate: string
-  prepareDate: string
-  createNo: string
-  isNegotiate: string
-  origBizNo: string
-  linkedBank: string
-  receivingBank: string
-  receivingBankCode: string
-  receivingBankName: string
-  emailProduct: string
-  multiCurrencyProduct: string
-  ftzFlag: boolean
-  reporter: string
-  phone: string
-  department: string
+  custName: string
   remark: string
-  register: string
-  useStatus: string
-  currentStatus: string
-  bizRegion: string
+  forecastAmt: string
+  forecastStatus: string
+  forecastType: string
+  interBk: string
+  isOperateFlag: string
+  isUsedFlg: string
+  linkMan: string
+  linkWay: string
+  mailFlag: string
+  mulCurFlag: string
+  nostro: string
+  orgId: string
+  oriInnerRefNo: string
+  planDate: string
+  posForecastNo: string
+  priIdCardType: string
+  pubOrgCode: string
+  pyeAcctBicName: string
+  pyeAcctBicSCode: string
+  pyeName: string
+  rtnFlag: string
+  supervisor: string
+  swiftCode: string
+  usedAmt: string
+  valueDate: string
+  /** 界面专用：驳回说明（若后端与 remark 共用，可在提交时合并） */
+  rejectRemark: string
+  /** 界面专用：自贸区，字典未给码表时 0/1 */
+  ftzFlag: string
+  businessChannel: string
 }
 
-const form = reactive<ReportForm>({
-  reportNo: '',
-  bizType: '跨境人民币业务(进口)',
-  customerType: '对公',
-  isGroup: '',
-  orgCode: '5903887-5',
-  customerName: '长期应收长期预收客户(5927)',
+const priIdCardTypeOptions = [
+  { value: '0', label: '无证件' },
+  { value: '1', label: '居民身份证' },
+  { value: '2', label: '户口簿' },
+  { value: '3', label: '护照/永久居留证' },
+  { value: '4', label: '军人证' },
+  { value: '5', label: '港澳台通行证' },
+  { value: '6', label: '武警身份证' },
+  { value: '7', label: '边民出入境通行证' }
+]
+
+const forecastTypeOptions = [
+  { value: '10', label: '跨境人民币直参（客户）' },
+  { value: '11', label: '跨境人民币直参（同业）' }
+]
+
+const forecastStatusOptions = [
+  { value: '00', label: '已授权' },
+  { value: '01', label: '待修改' },
+  { value: '02', label: '待授权' },
+  { value: '05', label: '已核销' },
+  { value: '06', label: '待复核' },
+  { value: '07', label: '总行授权' },
+  { value: '98', label: '已失效' },
+  { value: '99', label: '已删除' }
+]
+
+const clientTypeLabels: Record<string, string> = {
+  '01': '对公',
+  '02': '对私居民',
+  '03': '对私非居民'
+}
+
+const form = reactive<PositionForecastForm>({
+  id: '',
+  author: '',
+  authorDate: '',
+  authorTime: '',
+  bigForDate: '2026-03-23',
+  bigForTime: '100053',
+  checkDate: '',
+  checkTime: '',
+  clientType: '01',
   currency: 'CNY',
-  amount: '100,000,000.00',
-  valueDate: '',
-  accountName: '',
-  planDate: '2026-03-23',
-  prepareDate: '2026-03-23',
-  createNo: '183423',
-  isNegotiate: '否',
-  origBizNo: '',
-  linkedBank: 'CIPSCNSHXXX',
-  receivingBank: '',
-  receivingBankCode: 'BKCHCNBJXXX',
-  receivingBankName: '中国银行国际金融有限公司',
-  emailProduct: '',
-  multiCurrencyProduct: '',
-  ftzFlag: false,
-  reporter: '0601bx',
-  phone: '13051636/66',
-  department: 'HGS1:利率及外汇业务处',
+  custName: '北京广联顺和科技有限公司SFD(脱敏)',
   remark: '',
-  register: '登记(后端周四)',
-  useStatus: '未使用',
-  currentStatus: '自行撤区',
-  bizRegion: '报关系统'
+  forecastAmt: '200,000,000.00',
+  forecastStatus: '07',
+  forecastType: '10',
+  interBk: '',
+  isOperateFlag: '1',
+  isUsedFlg: '0',
+  linkMan: '0001tx',
+  linkWay: '15631312',
+  mailFlag: '',
+  mulCurFlag: '',
+  nostro: 'CIPSCNSHXXX',
+  orgId: '00301',
+  oriInnerRefNo: '',
+  planDate: '2026-03-23',
+  posForecastNo: '',
+  priIdCardType: '',
+  pubOrgCode: '20489952-1',
+  pyeAcctBicName: '中国银行股份有限公司',
+  pyeAcctBicSCode: 'BKCHCNBJXXX',
+  pyeName: '',
+  rtnFlag: '01',
+  supervisor: '',
+  swiftCode: '',
+  usedAmt: '',
+  valueDate: '',
+  rejectRemark: '',
+  ftzFlag: '0',
+  businessChannel: '柜面系统'
 })
 
-const rules: FormRules<ReportForm> = {
-  customerType: [{ required: true, message: '请选择客户分类', trigger: 'change' }],
-  orgCode: [{ required: true, message: '请输入对公组织架构代码', trigger: 'blur' }],
-  customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
-  currency: [{ required: true, message: '请选择币种', trigger: 'change' }],
-  planDate: [{ required: true, message: '请选择计划日期', trigger: 'change' }],
-  reporter: [{ required: true, message: '请输入报备人', trigger: 'blur' }],
-  phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
+const clientTypeLabel = computed(() => clientTypeLabels[form.clientType] ?? form.clientType)
+
+const rules: FormRules<PositionForecastForm> = {
+  valueDate: [{ required: true, message: '起息日不能为空', trigger: 'change' }]
 }
 
 function onFlowLog() {
-  ElMessage.info('查看操作流水')
+  ElMessage.info('操作流水（可对接流水查询）')
 }
 
-function onSubmit() {
+function onPass() {
   formRef.value?.validate((valid) => {
     if (!valid) return
-    ElMessage.success('提交成功')
+    ElMessage.success('通过')
   })
 }
 
-function onSave() {
-  ElMessage.success('保存成功')
+function onReject() {
+  ElMessage.warning('驳回：可将「备注(拒绝原因)」写入接口后提交')
 }
 
-function onClose() {
+function onBack() {
   router.back()
 }
 </script>
 
 <style scoped>
 .position-report-page {
-  padding: 20px;
+  padding: 20px 24px 32px;
+  background: #fff;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e4e7ed;
 }
 
 .title {
+  margin: 0;
   font-size: 18px;
-  margin-bottom: 20px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #ebeef5;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-badge {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #c00;
+  flex-shrink: 0;
 }
 
 .report-form {
-  max-width: 1400px;
+  max-width: 1440px;
+  margin-top: 8px;
 }
 
 .report-form :deep(.el-form-item__label) {
   font-weight: normal;
-  white-space: nowrap;
+  color: #606266;
+}
+
+.currency-amt {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+
+.currency-amt__cur {
+  width: 150px;
+  flex-shrink: 0;
+}
+
+.currency-amt__amt {
+  flex: 1;
+  min-width: 0;
+}
+
+/* 第三行第三列：空白占位，撑开与同行表单项相近高度 */
+.form-col--spacer {
+  min-height: 51px;
+}
+
+.form-col-placeholder {
+  width: 100%;
+  min-height: 32px;
 }
 
 .footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 24px;
+  margin-top: 28px;
   padding-top: 16px;
-  border-top: 1px solid #ebeef5;
-  max-width: 1400px;
+  border-top: 1px solid #e4e7ed;
+  max-width: 1440px;
 }
 
 .footer-right {
   display: flex;
-  gap: 8px;
+  gap: 10px;
 }
 </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 = [
   {
@@ -50,7 +51,16 @@ export const routes = [
     name: 'PositionReport',
     component: PositionReportPage,
     meta: {
-      title: '头寸报备',
+      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.26",
+  "version": "7.0.28",
   "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
+}