vue2server7 7.0.18 → 7.0.20

package/frontEnd/src/pages/TablePage.vue

@@ -11,11 +11,11 @@
           <el-option label="晨夕会" value="MORNING" />
         </el-select>
       </el-form-item>
-      <el-form-item prop="amountRange" label="金额范围">
-        <NumberRange v-model="searchForm.amountRange" min-placeholder="最小金额" max-placeholder="最大金额" :precision="2" />
+      <el-form-item label="金额范围">
+        <NumberRange ref="amountRangeRef" v-model="searchForm.amountRange" min-placeholder="最小金额" max-placeholder="最大金额" :precision="2" error-message="结束金额不能小于起始金额" @validate="onAmountValidate" />
       </el-form-item>
-      <el-form-item prop="ageMax" label="年龄范围" required>
-        <NumberRange v-model:start="searchForm.ageMin" v-model:end="searchForm.ageMax" min-placeholder="最小年龄" max-placeholder="最大年龄" :precision="0" />
+      <el-form-item label="年龄范围">
+        <NumberRange ref="ageRangeRef" v-model:start="searchForm.ageMin" v-model:end="searchForm.ageMax" min-placeholder="最小年龄" max-placeholder="最大年龄" :precision="0" error-message="结束年龄不能小于起始年龄" @validate="onAgeValidate" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSearch">查询</el-button>
@@ -65,7 +65,7 @@
           <template v-else-if="col.type === 'action'">
             <el-button type="text" size="small" @click="onView(row)">详情</el-button>
             <el-button type="text" size="small" @click="onDelete(row)">删除</el-button>
-          </template>
+    x x      </template>
           <template v-else>
             {{ row[col.prop] }}
           </template>
@@ -81,168 +81,234 @@
   </section>
 </template>
 
-<script>
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
 import { get } from '../utils/request'
 import ColumnSettings from '../components/ColumnSettings.vue'
-import NumberRange, { rangeRule, rangeRequired } from '../components/NumberRange.vue'
+import NumberRange from '../components/NumberRange.vue'
 
-export default {
-  name: 'TablePage',
-  data() {
-    return {
-      searchForm: {
-        keyword: '',
-        type: '',
-        amountRange: [null, null],
-        ageMin: null,
-        ageMax: null
-      },
-      searchRules: {
-        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
-        amountRange: [rangeRule('结束金额不能小于起始金额')],
-        ageMax: [
-          rangeRequired('请输入年龄范围', 'ageMin'),
-          rangeRule('结束年龄不能小于起始年龄', 'ageMin')
-        ]
-      },
-      columns: [
-        { key: 'organizationName', prop: 'organizationName', label: '所属机构', minWidth: 160 },
-        { key: 'meetSubj', prop: 'meetSubj', label: '会议主题', minWidth: 240 },
-        { key: 'meetNo', prop: 'meetNo', label: '会议编号', minWidth: 180 },
-        { key: 'displayName', prop: 'displayName', label: '创建人', width: 120 },
-        { key: 'meetTypeCd', prop: 'meetTypeCd', label: '类型', width: 120, align: 'center', type: 'type' },
-        { key: 'createTm', prop: 'createTm', label: '创建日期', width: 160, align: 'center', type: 'date', sortable: 'custom' },
-        { key: 'updateTm', prop: 'updateTm', label: '最近编辑时间', width: 190, align: 'center', type: 'datetime', sortable: 'custom' },
-        { key: 'action', prop: '', label: '操作', width: 140, align: 'center', fixed: 'right', type: 'action' }
-      ],
-      visibleKeys: [],
-      rows: [],
-      total: 0,
-      page: 1,
-      pageSize: 10,
-      sortField: 'createTm',
-      sortOrder: 'descending',
-      tableKey: 0
-    }
-  },
-  components: {
-    ColumnSettings,
-    NumberRange
-  },
-  created() {
-    this.visibleKeys = this.columns.map(c => c.key)
-    this.fetch()
-  },
-  methods: {
-    async fetch() {
-      const { keyword, type, amountRange, ageMin, ageMax } = this.searchForm
-      const params = {
-        page: this.page,
-        pageSize: this.pageSize,
-        sortField: this.sortField,
-        sortOrder: this.sortOrder
-      }
-      if (keyword) params.meetSubj = keyword
-      if (type) params.meetTypeCd = type
-      if (amountRange[0] !== null) params.amountMin = amountRange[0]
-      if (amountRange[1] !== null) params.amountMax = amountRange[1]
-      if (ageMin !== null) params.ageMin = ageMin
-      if (ageMax !== null) params.ageMax = ageMax
-      const res = await get('/meeting/list', params)
-      this.rows = Array.isArray(res.list) ? res.list : []
-      this.total = Number.isFinite(res.total) ? res.total : this.rows.length
-    },
-    onSearch() {
-      this.$refs.searchFormRef.validate((valid) => {
-        if (!valid) return
-        this.page = 1
-        this.fetch()
-      })
-    },
-    onReset() {
-      this.$refs.searchFormRef.resetFields()
-      this.page = 1
-      this.fetch()
-    },
-    onPageChange(p) {
-      this.page = p
-      this.fetch()
-    },
-    onSortChange({ prop, order }) {
-      this.sortField = prop || ''
-      this.sortOrder = order || ''
-      this.page = 1
-      this.fetch()
-    },
-    // 通过改变 key 强制表格重渲染，确保动态列显示/隐藏立即生效
-    bumpTableKey() {
-      this.tableKey += 1
-    },
-    onView(row) {
-      const lines = [
-        `会议主题：${row.meetSubj || ''}`,
-        `内容：${row.plainContent || ''}`,
-        `所属机构：${row.organizationName || ''}`,
-        `会议类型：${this.formatType(row.meetTypeCd)}`,
-        `创建人：${row.displayName || ''}`,
-        `创建日期：${this.formatDate(row.createTm)}`,
-        `最近编辑时间：${this.formatDateTime(row.updateTm)}`
-      ]
-      this.$alert(lines.join('\n'), '会议详情', { confirmButtonText: '确定' })
-    },
-    onDelete(row) {
-      this.$confirm(`确定删除会议「${row.meetSubj || ''}」吗？`, '提示', {
-        type: 'warning',
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
-      })
-        .then(() => {
-          this.rows = this.rows.filter(item => item.id !== row.id)
-          this.$message({ type: 'success', message: '删除成功' })
-        })
-        .catch(() => {})
-    },
-    formatType(code) {
-      if (code === 'TRAINING') return '培训'
-      if (code === 'MORNING') return '晨夕会'
-      return code || ''
-    },
-    getTypeTag(code) {
-      if (code === 'TRAINING') return 'primary'
-      if (code === 'MORNING') return 'warning'
-      return 'info'
-    },
-    formatDate(value) {
-      if (!value) return ''
-      if (value.length === 10) return value
-      const d = new Date(value)
-      if (Number.isNaN(d.getTime())) return ''
-      const yyyy = d.getFullYear()
-      const mm = String(d.getMonth() + 1).padStart(2, '0')
-      const dd = String(d.getDate()).padStart(2, '0')
-      return `${yyyy}-${mm}-${dd}`
-    },
-    formatDateTime(value) {
-      if (!value) return ''
-      if (value.length >= 16 && value.includes(' ')) return value
-      const d = new Date(value)
-      if (Number.isNaN(d.getTime())) return ''
-      const yyyy = d.getFullYear()
-      const mm = String(d.getMonth() + 1).padStart(2, '0')
-      const dd = String(d.getDate()).padStart(2, '0')
-      const hh = String(d.getHours()).padStart(2, '0')
-      const mi = String(d.getMinutes()).padStart(2, '0')
-      const ss = String(d.getSeconds()).padStart(2, '0')
-      return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`
-    }
-  }
-  ,
-  watch: {
-    visibleKeys() {
-      this.bumpTableKey()
-    }
+// 类型定义
+interface SearchForm {
+  keyword: string
+  type: string
+  amountRange: [number | null, number | null]
+  ageMin: number | null
+  ageMax: number | null
+}
+
+interface ColumnConfig {
+  key: string
+  prop: string
+  label: string
+  width?: number
+  minWidth?: number
+  align?: 'left' | 'center' | 'right'
+  headerAlign?: 'left' | 'center' | 'right'
+  sortable?: boolean | 'custom'
+  fixed?: boolean | 'left' | 'right'
+  type?: string
+}
+
+interface MeetingRow {
+  id: string | number
+  organizationName?: string
+  meetSubj?: string
+  meetNo?: string
+  displayName?: string
+  meetTypeCd?: string
+  createTm?: string
+  updateTm?: string
+  plainContent?: string
+  [key: string]: any
+}
+
+interface SortChangeParams {
+  prop?: string
+  order?: 'ascending' | 'descending' | null
+}
+
+// 组件引用
+const searchFormRef = ref<FormInstance>()
+const amountRangeRef = ref<InstanceType<typeof NumberRange>>()
+const ageRangeRef = ref<InstanceType<typeof NumberRange>>()
+
+// 校验状态
+const amountValid = ref(true)
+const ageValid = ref(true)
+
+const onAmountValidate = (valid: boolean) => {
+  amountValid.value = valid
+}
+
+const onAgeValidate = (valid: boolean) => {
+  ageValid.value = valid
+}
+
+// 响应式数据
+const searchForm = reactive<SearchForm>({
+  keyword: '',
+  type: '',
+  amountRange: [null, null],
+  ageMin: null,
+  ageMax: null
+})
+
+const searchRules = {
+  type: [{ required: true, message: '请选择类型', trigger: 'change' }]
+}
+
+const columns: ColumnConfig[] = [
+  { key: 'organizationName', prop: 'organizationName', label: '所属机构', minWidth: 160 },
+  { key: 'meetSubj', prop: 'meetSubj', label: '会议主题', minWidth: 240 },
+  { key: 'meetNo', prop: 'meetNo', label: '会议编号', minWidth: 180 },
+  { key: 'displayName', prop: 'displayName', label: '创建人', width: 120 },
+  { key: 'meetTypeCd', prop: 'meetTypeCd', label: '类型', width: 120, align: 'center', type: 'type' },
+  { key: 'createTm', prop: 'createTm', label: '创建日期', width: 160, align: 'center', type: 'date', sortable: 'custom' },
+  { key: 'updateTm', prop: 'updateTm', label: '最近编辑时间', width: 190, align: 'center', type: 'datetime', sortable: 'custom' },
+  { key: 'action', prop: '', label: '操作', width: 140, align: 'center', fixed: 'right', type: 'action' }
+]
+
+const visibleKeys = ref<string[]>([])
+const rows = ref<MeetingRow[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
+const sortField = ref('createTm')
+const sortOrder = ref<'ascending' | 'descending' | ''>('descending')
+const tableKey = ref(0)
+
+// 方法
+const fetch = async () => {
+  const { keyword, type, amountRange, ageMin, ageMax } = searchForm
+  const params: Record<string, any> = {
+    page: page.value,
+    pageSize: pageSize.value,
+    sortField: sortField.value,
+    sortOrder: sortOrder.value
   }
+  if (keyword) params.meetSubj = keyword
+  if (type) params.meetTypeCd = type
+  if (amountRange[0] !== null) params.amountMin = amountRange[0]
+  if (amountRange[1] !== null) params.amountMax = amountRange[1]
+  if (ageMin !== null) params.ageMin = ageMin
+  if (ageMax !== null) params.ageMax = ageMax
+  const res = await get('/meeting/list', params)
+  rows.value = Array.isArray(res.list) ? res.list : []
+  total.value = Number.isFinite(res.total) ? res.total : rows.value.length
+}
+
+const onSearch = () => {
+  // 校验 NumberRange 组件
+  const isAmountValid = amountRangeRef.value?.validate() ?? true
+  const isAgeValid = ageRangeRef.value?.validate() ?? true
+
+  searchFormRef.value?.validate((valid: boolean) => {
+    if (!valid || !isAmountValid || !isAgeValid) return
+    page.value = 1
+    fetch()
+  })
+}
+
+const onReset = () => {
+  searchFormRef.value?.resetFields()
+  amountRangeRef.value?.reset()
+  ageRangeRef.value?.reset()
+  page.value = 1
+  fetch()
+}
+
+const onPageChange = (p: number) => {
+  page.value = p
+  fetch()
+}
+
+const onSortChange = ({ prop, order }: SortChangeParams) => {
+  sortField.value = prop || ''
+  sortOrder.value = order || ''
+  page.value = 1
+  fetch()
+}
+
+// 通过改变 key 强制表格重渲染，确保动态列显示/隐藏立即生效
+const bumpTableKey = () => {
+  tableKey.value += 1
 }
+
+const onView = (row: MeetingRow) => {
+  const lines = [
+    `会议主题：${row.meetSubj || ''}`,
+    `内容：${row.plainContent || ''}`,
+    `所属机构：${row.organizationName || ''}`,
+    `会议类型：${formatType(row.meetTypeCd)}`,
+    `创建人：${row.displayName || ''}`,
+    `创建日期：${formatDate(row.createTm)}`,
+    `最近编辑时间：${formatDateTime(row.updateTm)}`
+  ]
+  ElMessageBox.alert(lines.join('\n'), '会议详情', { confirmButtonText: '确定' })
+}
+
+const onDelete = (row: MeetingRow) => {
+  ElMessageBox.confirm(`确定删除会议「${row.meetSubj || ''}」吗？`, '提示', {
+    type: 'warning',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消'
+  })
+    .then(() => {
+      rows.value = rows.value.filter(item => item.id !== row.id)
+      ElMessage({ type: 'success', message: '删除成功' })
+    })
+    .catch(() => {})
+}
+
+const formatType = (code?: string): string => {
+  if (code === 'TRAINING') return '培训'
+  if (code === 'MORNING') return '晨夕会'
+  return code || ''
+}
+
+const getTypeTag = (code?: string): string => {
+  if (code === 'TRAINING') return 'primary'
+  if (code === 'MORNING') return 'warning'
+  return 'info'
+}
+
+const formatDate = (value?: string): string => {
+  if (!value) return ''
+  if (value.length === 10) return value
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return ''
+  const yyyy = d.getFullYear()
+  const mm = String(d.getMonth() + 1).padStart(2, '0')
+  const dd = String(d.getDate()).padStart(2, '0')
+  return `${yyyy}-${mm}-${dd}`
+}
+
+const formatDateTime = (value?: string): string => {
+  if (!value) return ''
+  if (value.length >= 16 && value.includes(' ')) return value
+  const d = new Date(value)
+  if (Number.isNaN(d.getTime())) return ''
+  const yyyy = d.getFullYear()
+  const mm = String(d.getMonth() + 1).padStart(2, '0')
+  const dd = String(d.getDate()).padStart(2, '0')
+  const hh = String(d.getHours()).padStart(2, '0')
+  const mi = String(d.getMinutes()).padStart(2, '0')
+  const ss = String(d.getSeconds()).padStart(2, '0')
+  return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`
+}
+
+// 监听器
+watch(visibleKeys, () => {
+  bumpTableKey()
+})
+
+// 生命周期
+onMounted(() => {
+  visibleKeys.value = columns.map(c => c.key)
+  fetch()
+})
 </script>
 
 <style scoped>

package/package.json

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

package/test/777

@@ -0,0 +1,24 @@
+import axios from 'axios'
+
+const downloadFile = async (url: string, filename = 'file.zip') => {
+  const res = await axios.get(url, {
+    responseType: 'blob',
+    onDownloadProgress: (e) => {
+      if (e.total) {
+        const percent = Math.round((e.loaded / e.total) * 100)
+        console.log('下载进度:', percent + '%')
+      } else {
+        console.log('已下载:', e.loaded)
+      }
+    }
+  })
+
+  // 创建下载
+  const blob = new Blob([res.data])
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = filename
+  link.click()
+
+  URL.revokeObjectURL(link.href)
+}

package/test/1/main.ts

@@ -1,52 +0,0 @@
-/**
- * 应用入口文件
- *
- * 职责：
- *   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

@@ -1,38 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,9 +0,0 @@
-// 获取常用时间
-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'),
-];