vue2server7 7.0.12 → 7.0.14

package/frontEnd/src/components/NumberRange.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="number-range" :class="{ 'is-disabled': disabled }">
+  <div class="number-range" :class="{ 'is-disabled': disabled, 'is-error': showInternalError }">
     <el-input
       v-model="minDisplay"
       class="number-range__input"
+      :class="{ 'is-error': showInternalError }"
       :placeholder="minPlaceholder"
       :disabled="disabled"
       clearable
@@ -15,6 +16,7 @@
     <el-input
       v-model="maxDisplay"
       class="number-range__input"
+      :class="{ 'is-error': showInternalError }"
       :placeholder="maxPlaceholder"
       :disabled="disabled"
       clearable
@@ -23,22 +25,30 @@
       @blur="onMaxBlur"
       @clear="onMaxClear"
     />
+    <span v-if="showInternalError" class="number-range__error">结束值不能小于起始值</span>
   </div>
 </template>
 
 <script lang="ts">
 import type { FormItemRule } from 'element-plus'
 
-export type RangeValue = [number | null, number | null]
+export type RangeValue = [number | string | null, number | string | null]
 type ValidatorCb = (error?: Error) => void
 
+/** 将字符串/数字统一转为 number，空值返回 null */
+function toNum(val: unknown): number | null {
+  if (val === null || val === undefined || val === '') return null
+  const n = Number(val)
+  return Number.isNaN(n) ? null : n
+}
+
 export interface NumberRangeProps {
-  /** 数组模式绑定值 [min, max]，与 start/end 二选一 */
+  /** 数组模式绑定值 [min, max]，与 start/end 二选一；值可以是 string 或 number */
   modelValue?: RangeValue
-  /** 双字段模式 - 起始值 */
-  start?: number | null
-  /** 双字段模式 - 结束值 */
-  end?: number | null
+  /** 双字段模式 - 起始值（支持 string 类型数字） */
+  start?: number | string | null
+  /** 双字段模式 - 结束值（支持 string 类型数字） */
+  end?: number | string | null
   minPlaceholder?: string
   maxPlaceholder?: string
   /** 两个输入框之间的分隔文字 */
@@ -82,10 +92,10 @@ export function rangeRequired(
     trigger,
     validator: startField
       ? (_r: unknown, _v: unknown, cb: ValidatorCb, source: Record<string, unknown>) =>
-          cb(source[startField] == null || source[startField] === '' ? new Error(message) : undefined)
+          cb(toNum(source[startField]) == null ? new Error(message) : undefined)
       : (_r: unknown, v: unknown, cb: ValidatorCb) => {
           const arr = v as RangeValue | undefined
-          cb(!Array.isArray(arr) || arr[0] == null || arr[1] == null ? new Error(message) : undefined)
+          cb(!Array.isArray(arr) || toNum(arr[0]) == null || toNum(arr[1]) == null ? new Error(message) : undefined)
         }
   }
 }
@@ -99,18 +109,24 @@ export function rangeRule(
   return {
     trigger,
     validator: startField
-      ? (_r: unknown, v: unknown, cb: ValidatorCb, source: Record<string, unknown>) =>
-          cb(source[startField] != null && v != null && (v as number) < (source[startField] as number) ? new Error(message) : undefined)
+      ? (_r: unknown, v: unknown, cb: ValidatorCb, source: Record<string, unknown>) => {
+          const startNum = toNum(source[startField])
+          const endNum = toNum(v)
+          cb(startNum != null && endNum != null && endNum < startNum ? new Error(message) : undefined)
+        }
       : (_r: unknown, v: unknown, cb: ValidatorCb) => {
           const arr = v as RangeValue | undefined
-          cb(arr?.[0] != null && arr?.[1] != null && arr[1] < arr[0] ? new Error(message) : undefined)
+          const minNum = toNum(arr?.[0])
+          const maxNum = toNum(arr?.[1])
+          cb(minNum != null && maxNum != null && maxNum < minNum ? new Error(message) : undefined)
         }
   }
 }
 </script>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
+import { ref, watch, computed, inject } from 'vue'
+import { formItemContextKey } from 'element-plus'
 
 const props = withDefaults(defineProps<NumberRangeProps>(), {
   modelValue: undefined,
@@ -133,18 +149,22 @@ const emit = defineEmits<{
   change: [value: RangeValue]
 }>()
 
+/** 检测是否处于 el-form-item 内，有则交给 form 校验，无则组件内部校验 */
+const formItemContext = inject(formItemContextKey, undefined)
+const useInternalValidation = computed(() => !formItemContext)
+
 /** 根据是否传入 modelValue 自动判断绑定模式 */
 const isArrayMode = computed(() => props.modelValue !== undefined)
 
-function getInitMin(): number | null | undefined {
-  return isArrayMode.value ? props.modelValue?.[0] : props.start
+function getInitMin(): number | null {
+  return toNum(isArrayMode.value ? props.modelValue?.[0] : props.start)
 }
-function getInitMax(): number | null | undefined {
-  return isArrayMode.value ? props.modelValue?.[1] : props.end
+function getInitMax(): number | null {
+  return toNum(isArrayMode.value ? props.modelValue?.[1] : props.end)
 }
 
-function toDisplay(val: number | null | undefined): string {
-  if (val === null || val === undefined) return ''
+function toDisplay(val: number | null): string {
+  if (val === null) return ''
   return String(val)
 }
 
@@ -200,6 +220,12 @@ const rangeInvalid = computed(() => {
 
 const isValid = computed(() => !rangeInvalid.value)
 
+/** 内部校验：仅在无 el-form-item 且两个输入框都失焦后展示 */
+const blurred = ref(false)
+const showInternalError = computed(() =>
+  useInternalValidation.value && blurred.value && rangeInvalid.value
+)
+
 /** 根据绑定模式 emit 对应事件 */
 function emitValue(): void {
   const minVal = formatNum(parseNum(minDisplay.value))
@@ -252,6 +278,7 @@ function onMinBlur(): void {
     minDisplay.value = ''
   }
   emitValue()
+  if (!minFocused.value && !maxFocused.value) blurred.value = true
 }
 
 function onMaxBlur(): void {
@@ -266,9 +293,11 @@ function onMaxBlur(): void {
     maxDisplay.value = ''
   }
   emitValue()
+  if (!minFocused.value && !maxFocused.value) blurred.value = true
 }
 
 function validate(): boolean {
+  blurred.value = true
   return isValid.value
 }
 
@@ -278,13 +307,14 @@ defineExpose({ validate, isValid })
 watch(
   () => isArrayMode.value ? props.modelValue : [props.start, props.end],
   (val) => {
-    const newMin = toDisplay(val?.[0] ?? null)
-    const newMax = toDisplay(val?.[1] ?? null)
+    const newMin = toDisplay(toNum(val?.[0]))
+    const newMax = toDisplay(toNum(val?.[1]))
     if (newMin !== minDisplay.value) minDisplay.value = newMin
     if (newMax !== maxDisplay.value) maxDisplay.value = newMax
-    if ((val?.[0] == null) && (val?.[1] == null)) {
+    if (toNum(val?.[0]) == null && toNum(val?.[1]) == null) {
       minFocused.value = false
       maxFocused.value = false
+      blurred.value = false
     }
   },
   { deep: true }
@@ -293,15 +323,16 @@ watch(
 
 <style scoped>
 .number-range {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 8px;
+  width: 100%;
   flex-wrap: wrap;
-  position: relative;
 }
 
 .number-range__input {
-  width: 140px;
+  flex: 1;
+  min-width: 0;
 }
 
 .number-range__separator {
@@ -313,4 +344,16 @@ watch(
 .number-range.is-disabled .number-range__separator {
   color: var(--el-text-color-placeholder);
 }
+
+.number-range__input.is-error :deep(.el-input__wrapper) {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.number-range__error {
+  width: 100%;
+  color: var(--el-color-danger);
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 2px;
+}
 </style>

package/frontEnd/src/pages/PositionReportPage.vue

@@ -0,0 +1,363 @@
+<template>
+  <section class="page position-report-page">
+    <h1 class="title">头寸报备信息</h1>
+
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="140px"
+      label-suffix="："
+      class="report-form"
+    >
+      <!-- 第一行 -->
+      <el-row :gutter="24">
+        <el-col :span="8">
+          <el-form-item label="头寸报备编号" prop="reportNo">
+            <el-input v-model="form.reportNo" placeholder="系统自动生成" disabled />
+          </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>
+        </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>
+        </el-col>
+      </el-row>
+
+      <!-- 第二行 -->
+      <el-row :gutter="24">
+        <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-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>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="客户名称" prop="customerName">
+            <el-input v-model="form.customerName" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第三行 -->
+      <el-row :gutter="24">
+        <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-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="金额" />
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="汇款起息日" prop="valueDate">
+            <el-date-picker
+              v-model="form.valueDate"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 100%"
+            />
+          </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>
+      </el-row>
+
+      <!-- 第四行 -->
+      <el-row :gutter="24">
+        <el-col :span="8">
+          <el-form-item label="计划汇/收日期" prop="planDate">
+            <el-date-picker
+              v-model="form.planDate"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="预备日期" prop="prepareDate">
+            <el-date-picker
+              v-model="form.prepareDate"
+              type="date"
+              placeholder="请选择日期"
+              format="YYYY-MM-DD"
+              value-format="YYYY-MM-DD"
+              style="width: 100%"
+            />
+          </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>
+        </el-col>
+      </el-row>
+
+      <!-- 第五行 -->
+      <el-row :gutter="24">
+        <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-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>
+        </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>
+        </el-col>
+      </el-row>
+
+      <!-- 第六行 -->
+      <el-row :gutter="24">
+        <el-col :span="8">
+          <el-form-item label="收款银行" prop="receivingBank">
+            <el-input v-model="form.receivingBank" placeholder="请输入" />
+          </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>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="收款银行开户行名" prop="receivingBankName">
+            <el-input v-model="form.receivingBankName" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第七行 -->
+      <el-row :gutter="24">
+        <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-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-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="自贸区标识" prop="ftzFlag">
+            <el-checkbox v-model="form.ftzFlag" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第八行 -->
+      <el-row :gutter="24">
+        <el-col :span="8">
+          <el-form-item label="报备人" prop="reporter">
+            <el-input v-model="form.reporter" placeholder="请输入" />
+          </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>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="报备部门" prop="department">
+            <el-input v-model="form.department" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第九行 -->
+      <el-row :gutter="24">
+        <el-col :span="16">
+          <el-form-item label="报备说明" prop="remark">
+            <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="登记" prop="register">
+            <el-input v-model="form.register" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第十行 -->
+      <el-row :gutter="24">
+        <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-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>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="业务大区" prop="bizRegion">
+            <el-input v-model="form.bizRegion" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <div class="footer">
+      <el-button type="danger" @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>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'PositionReportPage',
+  data() {
+    return {
+      form: {
+        reportNo: '',
+        bizType: '跨境人民币业务(进口)',
+        customerType: '对公',
+        isGroup: '',
+        orgCode: '5903887-5',
+        customerName: '长期应收长期预收客户(5927)',
+        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:利率及外汇业务处',
+        remark: '',
+        register: '登记(后端周四)',
+        useStatus: '未使用',
+        currentStatus: '自行撤区',
+        bizRegion: '报关系统'
+      },
+      rules: {
+        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' }]
+      }
+    }
+  },
+  methods: {
+    onFlowLog() {
+      this.$message.info('查看操作流水')
+    },
+    onSubmit() {
+      this.$refs.formRef.validate((valid) => {
+        if (!valid) return
+        this.$message.success('提交成功')
+      })
+    },
+    onSave() {
+      this.$message.success('保存成功')
+    },
+    onClose() {
+      this.$router.back()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.position-report-page {
+  padding: 20px;
+}
+
+.title {
+  font-size: 18px;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.report-form {
+  max-width: 1400px;
+}
+
+.report-form :deep(.el-form-item__label) {
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid #ebeef5;
+  max-width: 1400px;
+}
+
+.footer-right {
+  display: flex;
+  gap: 8px;
+}
+</style>

package/frontEnd/src/router/routes.js

@@ -2,6 +2,7 @@ import TablePage from '../pages/TablePage.vue'
 import CascaderPage from '../pages/CascaderPage.vue'
 import ExportExcelPage from '../pages/ExportExcelPage.vue'
 import ImportTablePage from '../pages/ImportTablePage.vue'
+import PositionReportPage from '../pages/PositionReportPage.vue'
 
 export const routes = [
   {
@@ -43,5 +44,14 @@ export const routes = [
       title: '导入表格',
       showInMenu: true
     }
+  },
+  {
+    path: '/position-report',
+    name: 'PositionReport',
+    component: PositionReportPage,
+    meta: {
+      title: '头寸报备',
+      showInMenu: true
+    }
   }
 ]

package/package.json

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