vue2server7 7.0.14 → 7.0.16

package/frontEnd/src/pages/PositionReportPage.vue

@@ -257,71 +257,108 @@
   </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 setup lang="ts">
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+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
+  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
+  remark: string
+  register: string
+  useStatus: string
+  currentStatus: string
+  bizRegion: string
+}
+
+const form = reactive<ReportForm>({
+  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: '报关系统'
+})
+
+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' }]
+}
+
+function onFlowLog() {
+  ElMessage.info('查看操作流水')
+}
+
+function onSubmit() {
+  formRef.value?.validate((valid) => {
+    if (!valid) return
+    ElMessage.success('提交成功')
+  })
+}
+
+function onSave() {
+  ElMessage.success('保存成功')
+}
+
+function onClose() {
+  router.back()
 }
 </script>
 

package/package.json

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

package/test/1/main.ts

@@ -0,0 +1,52 @@
+/**
+ * 应用入口文件
+ *
+ * 职责：
+ *   1. 创建 Vue 应用实例
+ *   2. 注册全局插件（UI 库、状态管理、路由、国际化）
+ *   3. 加载全局样式
+ *   4. 挂载到 DOM
+ *   5. 启动版本热更新检测
+ *
+ * 导入顺序说明（eslint simple-import-sort 已禁用）：
+ *   - 框架核心 → 第三方库 → 业务模块 → 样式 → 副作用模块
+ *   此处手动控制顺序以确保 permission 等副作用模块在路由注册之后加载
+ */
+
+/* eslint-disable simple-import-sort/imports */
+import { createApp } from 'vue';
+import TDesign from 'tdesign-vue-next';
+
+import App from './App.vue';
+import router from './router';
+import { store } from './store';
+import i18n from './locales';
+
+/** TDesign 组件库全局样式 */
+import 'tdesign-vue-next/es/style/index.css';
+/** 项目自定义全局样式（变量覆盖、通用布局等） */
+import '@/style/index.less';
+/**
+ * 路由权限守卫（副作用模块）
+ * 导入即执行 router.beforeEach，必须在 router 创建之后引入
+ */
+import './permission';
+
+const app = createApp(App);
+
+app.use(TDesign); // TDesign 组件全局注册（Dialog、Message 等可通过插件式 API 调用）
+app.use(store); // Pinia 状态管理
+app.use(router); // Vue Router
+app.use(i18n); // Vue I18n 国际化
+
+/** 挂载到 public/index.html 中的 #app 节点 */
+app.mount('#app');
+
+/**
+ * 版本热更新检测
+ * 放在 mount 之后执行，确保 DOM 中的 <meta name="app-version"> 已就绪
+ * 详见 @/utils/version-update.ts
+ */
+import { initVersionCheck } from './utils/version-update';
+
+initVersionCheck();

package/test/1/utils/charts.ts

@@ -0,0 +1,38 @@
+import dayjs from 'dayjs';
+
+/**
+ * 获取表头数据
+ *
+ * @export
+ * @param {string[]} dateTime
+ * @param {number} divideNum
+ * @returns {string[]} timeArray
+ */
+export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] {
+  const timeArray: string[] = [];
+  if (dateTime.length > 0) {
+    for (let i = 0; i < divideNum; i++) {
+      const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
+      const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
+      timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
+    }
+  }
+
+  return timeArray;
+}
+
+/**
+ * 获取随机数
+ *
+ * @param {number} [num]
+ * @returns {number} resultNum
+ */
+export function getRandomArray(num = 100): number {
+  let resultNum = Number((Math.random() * num).toFixed(0));
+
+  if (resultNum <= 1) {
+    resultNum = 1;
+  }
+
+  return resultNum;
+}

package/test/1/utils/color.ts

@@ -0,0 +1,110 @@
+import type * as echarts from 'echarts/core';
+import trim from 'lodash/trim';
+import { Color } from 'tvision-color';
+
+import type { TColorToken } from '@/config/color';
+import type { ModeType } from '@/types/interface';
+
+/**
+ * 依据主题类型获取颜色
+ *
+ * @export
+ * @returns {Array<string>} themeColorList
+ */
+export function getColorFromTheme(): Array<string> {
+  const theme = trim(getComputedStyle(document.documentElement).getPropertyValue('--td-brand-color'));
+  const themeColorList = Color.getRandomPalette({
+    color: theme,
+    colorGamut: 'bright',
+    number: 8,
+  });
+
+  return themeColorList;
+}
+
+/** 图表颜色 */
+export function getChartListColor(): Array<string> {
+  return getColorFromTheme();
+}
+
+/**
+ * 更改图表主题颜色
+ *
+ * @export
+ * @param {Array<string>} chartsList
+ */
+export function changeChartsTheme(chartsList: echarts.EChartsType[]): void {
+  if (chartsList && chartsList.length) {
+    const chartChangeColor = getChartListColor();
+
+    for (let index = 0; index < chartsList.length; index++) {
+      const elementChart = chartsList[index];
+
+      if (elementChart) {
+        const optionVal = elementChart.getOption();
+
+        // 更改主题颜色
+        optionVal.color = chartChangeColor;
+
+        elementChart.setOption(optionVal, true);
+      }
+    }
+  }
+}
+
+/**
+ * 根据当前主题色、模式等情景 计算最后生成的色阶
+ */
+export function generateColorMap(theme: string, colorPalette: Array<string>, mode: ModeType, brandColorIdx: number) {
+  const isDarkMode = mode === 'dark';
+
+  if (isDarkMode) {
+    colorPalette.reverse().map((color) => {
+      const [h, s, l] = Color.colorTransform(color, 'hex', 'hsl');
+      return Color.colorTransform([h, Number(s) - 4, l], 'hsl', 'hex');
+    });
+    brandColorIdx = 5;
+    colorPalette[0] = `${colorPalette[brandColorIdx]}20`;
+  }
+
+  const colorMap: TColorToken = {
+    '--td-brand-color': colorPalette[brandColorIdx], // 主题色
+    '--td-brand-color-1': colorPalette[0], // light
+    '--td-brand-color-2': colorPalette[1], // focus
+    '--td-brand-color-3': colorPalette[2], // disabled
+    '--td-brand-color-4': colorPalette[3],
+    '--td-brand-color-5': colorPalette[4],
+    '--td-brand-color-6': colorPalette[5],
+    '--td-brand-color-7': brandColorIdx > 0 ? colorPalette[brandColorIdx - 1] : theme, // hover
+    '--td-brand-color-8': colorPalette[brandColorIdx], // 主题色
+    '--td-brand-color-9': brandColorIdx > 8 ? theme : colorPalette[brandColorIdx + 1], // click
+    '--td-brand-color-10': colorPalette[9],
+  };
+  return colorMap;
+}
+
+/**
+ * 将生成的样式嵌入头部
+ */
+export function insertThemeStylesheet(theme: string, colorMap: TColorToken, mode: ModeType) {
+  const isDarkMode = mode === 'dark';
+  const root = !isDarkMode ? `:root[theme-color='${theme}']` : `:root[theme-color='${theme}'][theme-mode='dark']`;
+
+  const styleSheet = document.createElement('style');
+  styleSheet.type = 'text/css';
+  styleSheet.textContent = `${root}{
+    --td-brand-color: ${colorMap['--td-brand-color']};
+    --td-brand-color-1: ${colorMap['--td-brand-color-1']};
+    --td-brand-color-2: ${colorMap['--td-brand-color-2']};
+    --td-brand-color-3: ${colorMap['--td-brand-color-3']};
+    --td-brand-color-4: ${colorMap['--td-brand-color-4']};
+    --td-brand-color-5: ${colorMap['--td-brand-color-5']};
+    --td-brand-color-6: ${colorMap['--td-brand-color-6']};
+    --td-brand-color-7: ${colorMap['--td-brand-color-7']};
+    --td-brand-color-8: ${colorMap['--td-brand-color-8']};
+    --td-brand-color-9: ${colorMap['--td-brand-color-9']};
+    --td-brand-color-10: ${colorMap['--td-brand-color-10']};
+  }`;
+
+  document.head.appendChild(styleSheet);
+}

package/test/1/utils/date.ts

@@ -0,0 +1,9 @@
+// 获取常用时间
+import dayjs from 'dayjs';
+
+export const LAST_7_DAYS = [dayjs().subtract(6, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
+
+export const LAST_30_DAYS = [
+  dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
+];

package/test/1/utils/request/Axios.ts

@@ -0,0 +1,294 @@
+import type {
+  AxiosError,
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosRequestHeaders,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+} from 'axios';
+import axios from 'axios';
+import cloneDeep from 'lodash/cloneDeep';
+import debounce from 'lodash/debounce';
+import isFunction from 'lodash/isFunction';
+import throttle from 'lodash/throttle';
+import { stringify } from 'qs';
+
+import { ContentTypeEnum } from '@/constants';
+import type { AxiosRequestConfigRetry, RequestOptions, Result } from '@/types/axios';
+
+import { AxiosCanceler } from './AxiosCancel';
+import type { CreateAxiosOptions } from './AxiosTransform';
+
+/**
+ * Axios 模块
+ */
+export class VAxios {
+  /**
+   * Axios实例句柄
+   * @private
+   */
+  private instance: AxiosInstance;
+
+  /**
+   * Axios配置
+   * @private
+   */
+  private readonly options: CreateAxiosOptions;
+
+  constructor(options: CreateAxiosOptions) {
+    this.options = options;
+    this.instance = axios.create(options);
+    this.setupInterceptors();
+  }
+
+  /**
+   * 创建Axios实例
+   * @param config
+   * @private
+   */
+  private createAxios(config: CreateAxiosOptions): void {
+    this.instance = axios.create(config);
+  }
+
+  /**
+   * 获取数据处理类
+   * @private
+   */
+  private getTransform() {
+    const { transform } = this.options;
+    return transform;
+  }
+
+  /**
+   * 获取Axios实例
+   */
+  getAxios(): AxiosInstance {
+    return this.instance;
+  }
+
+  /**
+   * 配置Axios
+   * @param config
+   */
+  configAxios(config: CreateAxiosOptions) {
+    if (!this.instance) return;
+    this.createAxios(config);
+  }
+
+  /**
+   * 设置公共头部信息
+   * @param headers
+   */
+  setHeader(headers: Record<string, string>): void {
+    if (!this.instance) return;
+    Object.assign(this.instance.defaults.headers, headers);
+  }
+
+  /**
+   * 设置拦截器
+   * @private
+   */
+  private setupInterceptors() {
+    const transform = this.getTransform();
+    if (!transform) return;
+
+    const { requestInterceptors, requestInterceptorsCatch, responseInterceptors, responseInterceptorsCatch } =
+      transform;
+    const axiosCanceler = new AxiosCanceler();
+
+    // 请求拦截器
+    this.instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+      // 如果忽略取消令牌，则不会取消重复的请求
+      // @ts-expect-error 请求参数通过嵌套赋值
+      const { ignoreCancelToken } = config.requestOptions;
+      const ignoreCancel = ignoreCancelToken ?? this.options.requestOptions?.ignoreCancelToken;
+      if (!ignoreCancel) axiosCanceler.addPending(config);
+
+      if (requestInterceptors && isFunction(requestInterceptors)) {
+        config = requestInterceptors(config, this.options) as InternalAxiosRequestConfig;
+      }
+
+      return config;
+    }, undefined);
+
+    // 请求错误处理
+    if (requestInterceptorsCatch && isFunction(requestInterceptorsCatch)) {
+      this.instance.interceptors.request.use(undefined, requestInterceptorsCatch);
+    }
+
+    // 响应结果处理
+    this.instance.interceptors.response.use((res: AxiosResponse) => {
+      if (res) axiosCanceler.removePending(res.config);
+      if (responseInterceptors && isFunction(responseInterceptors)) {
+        res = responseInterceptors(res);
+      }
+      return res;
+    }, undefined);
+
+    // 响应错误处理
+    if (responseInterceptorsCatch && isFunction(responseInterceptorsCatch)) {
+      this.instance.interceptors.response.use(undefined, (error) => responseInterceptorsCatch(error, this.instance));
+    }
+  }
+
+  /**
+   * 支持 FormData 请求格式
+   * @param config
+   */
+  supportFormData(config: AxiosRequestConfig) {
+    const headers = config.headers || (this.options.headers as AxiosRequestHeaders);
+    const contentType = headers?.['Content-Type'] || headers?.['content-type'];
+
+    if (
+      contentType !== ContentTypeEnum.FormURLEncoded ||
+      !Reflect.has(config, 'data') ||
+      config.method?.toUpperCase() === 'GET'
+    ) {
+      return config;
+    }
+
+    return {
+      ...config,
+      data: stringify(config.data, { arrayFormat: 'brackets' }),
+    };
+  }
+
+  /**
+   * 支持 params 序列化
+   * @param config
+   */
+  supportParamsStringify(config: AxiosRequestConfig) {
+    const headers = config.headers || this.options.headers;
+    const contentType = headers?.['Content-Type'] || headers?.['content-type'];
+
+    if (contentType === ContentTypeEnum.FormURLEncoded || !Reflect.has(config, 'params')) {
+      return config;
+    }
+
+    return {
+      ...config,
+      paramsSerializer: (params: any) => stringify(params, { arrayFormat: 'brackets' }),
+    };
+  }
+
+  get<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'GET' }, options);
+  }
+
+  post<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'POST' }, options);
+  }
+
+  put<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'PUT' }, options);
+  }
+
+  delete<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'DELETE' }, options);
+  }
+
+  patch<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'PATCH' }, options);
+  }
+
+  /**
+   * 上传文件封装
+   * @param key 文件所属的key
+   * @param file 文件
+   * @param config 请求配置
+   * @param options
+   */
+  upload<T = any>(key: string, file: File, config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    const params: FormData = config.params ?? new FormData();
+    params.append(key, file);
+
+    return this.request(
+      {
+        ...config,
+        method: 'POST',
+        headers: {
+          'Content-Type': ContentTypeEnum.FormData,
+        },
+        params,
+      },
+      options,
+    );
+  }
+
+  /**
+   * 请求封装
+   * @param config
+   * @param options
+   */
+  request<T = any>(config: AxiosRequestConfigRetry, options?: RequestOptions): Promise<T> {
+    const { requestOptions } = this.options;
+
+    if (requestOptions.throttle !== undefined && requestOptions.debounce !== undefined) {
+      throw new Error('throttle and debounce cannot be set at the same time');
+    }
+
+    if (requestOptions.throttle && requestOptions.throttle.delay !== 0) {
+      return new Promise((resolve) => {
+        throttle(() => resolve(this.synthesisRequest(config, options)), requestOptions.throttle.delay);
+      });
+    }
+
+    if (requestOptions.debounce && requestOptions.debounce.delay !== 0) {
+      return new Promise((resolve) => {
+        debounce(() => resolve(this.synthesisRequest(config, options)), requestOptions.debounce.delay);
+      });
+    }
+
+    return this.synthesisRequest(config, options);
+  }
+
+  /**
+   * 请求方法
+   * @private
+   */
+  private async synthesisRequest<T = any>(config: AxiosRequestConfigRetry, options?: RequestOptions): Promise<T> {
+    let conf: CreateAxiosOptions = cloneDeep(config);
+    const transform = this.getTransform();
+
+    const { requestOptions } = this.options;
+
+    const opt: RequestOptions = { ...requestOptions, ...options };
+
+    const { beforeRequestHook, requestCatchHook, transformRequestHook } = transform || {};
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(conf, opt);
+    }
+    conf.requestOptions = opt;
+
+    conf = this.supportFormData(conf);
+    // 支持params数组参数格式化，因axios默认的toFormData即为brackets方式，无需配置paramsSerializer为qs，有需要可解除注释，参数参考qs文档
+    // conf = this.supportParamsStringify(conf);
+
+    return new Promise((resolve, reject) => {
+      this.instance
+        .request<any, AxiosResponse<Result>>(!config.retryCount ? conf : config)
+        .then((res: AxiosResponse<Result>) => {
+          if (transformRequestHook && isFunction(transformRequestHook)) {
+            try {
+              const ret = transformRequestHook(res, opt);
+              resolve(ret);
+            } catch (err) {
+              reject(err || new Error('请求错误!'));
+            }
+            return;
+          }
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error | AxiosError) => {
+          if (requestCatchHook && isFunction(requestCatchHook)) {
+            reject(requestCatchHook(e, opt));
+            return;
+          }
+          if (axios.isAxiosError(e)) {
+            // 在这里重写Axios的错误信息
+          }
+          reject(e);
+        });
+    });
+  }
+}