vue2server2 1.0.21

package/frontEnd/src/pages/MeetingListPage.vue

@@ -0,0 +1,493 @@
+<template>
+  <!--
+    会议列表页面
+    功能：
+    1. 顶部查询条件：所属机构、会议主题、会议类型、创建日期范围
+    2. 工具栏：新建按钮（预留后续接入创建弹窗）
+    3. 中间表格：
+       - 支持列拖拽（除操作列外）
+       - 展示会议基本信息
+    4. 底部分页：基于筛选结果做前端分页
+  -->
+  <section class="page meeting-page">
+    <h1 class="meeting-title">会议列表</h1>
+
+    <!-- 查询条件区域：用于筛选会议列表 -->
+    <div class="meeting-search-card">
+      <el-form :inline="true" :model="filters" size="small" class="meeting-search-form">
+        <!-- 所属机构下拉框 -->
+        <el-form-item label="所属机构">
+          <el-select
+            v-model="filters.belOrgNo"
+            placeholder="请选择"
+            clearable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="opt in orgOptions"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- 会议主题输入框（模糊匹配） -->
+        <el-form-item label="会议主题">
+          <el-input
+            v-model="filters.meetSubj"
+            placeholder="请输入"
+            clearable
+            style="width: 220px"
+          />
+        </el-form-item>
+        <!-- 会议类型下拉框 -->
+        <el-form-item label="会议类型">
+          <el-select
+            v-model="filters.meetTypeCd"
+            placeholder="全部"
+            clearable
+            style="width: 160px"
+          >
+            <el-option
+              v-for="opt in typeOptions"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-form-item>
+        <!-- 创建日期范围选择 -->
+        <el-form-item label="创建日期">
+          <el-date-picker
+            v-model="filters.createDateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            unlink-panels
+          />
+        </el-form-item>
+        <!-- 查询 / 重置按钮 -->
+        <el-form-item>
+          <el-button type="primary" size="small" @click="onSearch">
+            查询
+          </el-button>
+          <el-button size="small" @click="onReset">
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <!-- 工具栏：后续可扩展更多操作按钮 -->
+    <div class="meeting-toolbar">
+      <el-button type="primary" size="small" icon="el-icon-plus">
+        新建
+      </el-button>
+    </div>
+
+    <!--
+      主表格：
+      - ref/:key：配合拖拽重建表头
+      - index 列固定在最左侧
+      - 中间列通过 columns 配置，支持拖拽调整顺序
+      - 操作列固定在最右侧且不可拖拽
+    -->
+    <el-table
+      ref="meetingTable"
+      :key="tableKey"
+      :data="rows"
+      border
+      stripe
+      size="small"
+      style="width: 100%"
+      :default-sort="{ prop: 'createTm', order: 'descending' }"
+      @sort-change="onSortChange"
+    >
+      <!-- 序号列：仅显示索引，不参与拖拽 -->
+      <el-table-column
+        type="index"
+        label="序号"
+        width="60"
+        align="center"
+      />
+      <!--
+        中间业务列：
+        由 columns 数组驱动，通过 header 上的 header-draggable 类来实现拖拽
+      -->
+      <el-table-column
+        v-for="col in columns"
+        :key="col.key"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :min-width="col.minWidth"
+        :align="col.align || 'left'"
+        :header-align="col.headerAlign || col.align || 'left'"
+        :sortable="col.sortable"
+        :label-class-name="'meeting-header-' + col.key"
+      >
+        <!-- 表头内容：包一层 div 以作为拖拽的 handle -->
+        <template slot="header">
+          <div class="header-wrapper header-draggable">
+            <span class="header-label">{{ col.label }}</span>
+          </div>
+        </template>
+        <!-- 根据列类型渲染不同的单元格内容 -->
+        <template slot-scope="scope">
+          <span v-if="col.type === 'type'">
+            <el-tag
+              :type="getTypeTagType(scope.row.meetTypeCd)"
+              size="mini"
+            >
+              {{ formatMeetType(scope.row.meetTypeCd) }}
+            </el-tag>
+          </span>
+          <div v-else-if="col.type === 'content'">
+            <div class="meeting-subject">
+              {{ scope.row.meetSubj }}
+            </div>
+            <div
+              v-if="scope.row.plainContent"
+              class="meeting-content"
+            >
+              {{ scope.row.plainContent }}
+            </div>
+          </div>
+          <span v-else-if="col.type === 'createDate'">
+            {{ formatDate(scope.row.createTm) }}
+          </span>
+          <span v-else-if="col.type === 'updateDate'">
+            {{ formatDateTime(scope.row.updateTm) }}
+          </span>
+          <span v-else>
+            {{ scope.row[col.prop] }}
+          </span>
+        </template>
+      </el-table-column>
+      <!-- 操作列：固定在右侧，不参与拖拽（通过 label-class-name 区分） -->
+      <el-table-column
+        label="操作"
+        width="140"
+        align="center"
+        fixed="right"
+        label-class-name="meeting-header-action"
+      >
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="mini"
+            @click="onView(scope.row)"
+          >
+            详情
+          </el-button>
+          <el-button
+            type="text"
+            size="mini"
+            @click="onDelete(scope.row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="meeting-pagination">
+      <el-pagination
+        layout="total, prev, pager, next"
+        :current-page.sync="page"
+        :page-size="pageSize"
+        :total="totalCount"
+        @current-change="onPageChange"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import Sortable from "sortablejs";
+import { get } from "../utils/request";
+
+export default {
+  name: "MeetingListPage",
+  data() {
+    return {
+      // 可拖拽的业务列配置（不包含序号列与操作列）
+      columns: [
+        { key: "type", prop: "meetTypeCd", label: "类型", width: 120, align: "center", type: "type" },
+        { key: "content", prop: "meetSubj", label: "内容", minWidth: 260, type: "content" },
+        { key: "organizationName", prop: "organizationName", label: "所属机构", minWidth: 160 },
+        { key: "displayName", prop: "displayName", label: "创建人", width: 120 },
+        { key: "createDate", prop: "createTm", label: "创建日期", width: 160, align: "center", type: "createDate", sortable: "custom" },
+        { key: "updateDate", prop: "updateTm", label: "最近编辑时间", width: 190, align: "center", type: "updateDate", sortable: "custom" }
+      ],
+      rows: [],
+      totalCount: 0,
+      // 查询条件
+      filters: {
+        belOrgNo: "",
+        meetSubj: "",
+        meetTypeCd: "",
+        createDateRange: []
+      },
+      // 所属机构下拉选项
+      orgOptions: [
+        { label: "全部", value: "" },
+        { label: "上海浦东支行", value: "31021" },
+        { label: "北京西城支行", value: "11001" }
+      ],
+      // 会议类型下拉选项
+      typeOptions: [
+        { label: "培训", value: "TRAINING" },
+        { label: "晨夕会", value: "MORNING" }
+      ],
+      // 当前页码
+      page: 1,
+      // 每页条数
+      pageSize: 10,
+      // 预留：如果后续接接口，可以用来缓存上次查询 key
+      lastSearchKey: "",
+      // 当前远程排序字段（与 el-table-column 的 prop 对应）
+      sortField: "createTm",
+      // 当前远程排序方向：ascending / descending
+      sortOrder: "descending",
+      // 表头拖拽实例
+      headerSortable: null,
+      // 强制刷新表头用的 key（列顺序改变后重建表格）
+      tableKey: 0,
+      // 标记组件是否已销毁，避免销毁后仍操作 DOM
+      isDestroyed: false
+    };
+  },
+  created() {
+    this.fetchData();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initColumnDrag();
+    });
+  },
+  beforeDestroy() {
+    this.isDestroyed = true;
+    if (this.headerSortable && this.headerSortable.destroy) {
+      this.headerSortable.destroy();
+      this.headerSortable = null;
+    }
+  },
+  computed: {},
+  methods: {
+    async fetchData() {
+      const params = {};
+      const { belOrgNo, meetSubj, meetTypeCd, createDateRange } = this.filters;
+      if (belOrgNo) params.belOrgNo = belOrgNo;
+      if (meetSubj) params.meetSubj = meetSubj;
+      if (meetTypeCd) params.meetTypeCd = meetTypeCd;
+      if (Array.isArray(createDateRange) && createDateRange.length === 2) {
+        params.startDate = createDateRange[0];
+        params.endDate = createDateRange[1];
+      }
+      params.page = this.page;
+      params.pageSize = this.pageSize;
+      if (this.sortField && this.sortOrder) {
+        params.sortField = this.sortField;
+        params.sortOrder = this.sortOrder;
+      }
+      try {
+        const res = await get("/meeting/list", params);
+        this.rows = Array.isArray(res.list) ? res.list : [];
+        this.totalCount = Number.isFinite(res.total) ? res.total : this.rows.length;
+      } catch (e) {
+        this.$message.error("获取会议列表失败");
+      }
+    },
+    /**
+     * 初始化表头拖拽
+     * 说明：
+     * - 使用 SortableJS 绑定在 thead 的 tr 元素上
+     * - handle: 仅允许拖拽 header-draggable 区域
+     * - draggable: 排除操作列表头（.meeting-header-action）
+     * - 序号列位于最左，其 th 索引为 0，不在 columns 数组中，因此需要 -1 做映射
+     */
+    initColumnDrag() {
+      if (this.isDestroyed) return;
+      if (this.headerSortable && this.headerSortable.destroy) {
+        this.headerSortable.destroy();
+        this.headerSortable = null;
+      }
+      const table = this.$refs.meetingTable;
+      if (!table || !table.$el) return;
+      const headerRow = table.$el.querySelector(".el-table__header-wrapper thead tr");
+      if (!headerRow) return;
+      this.headerSortable = Sortable.create(headerRow, {
+        animation: 150,
+        handle: ".header-draggable",
+        draggable: "th:not(.meeting-header-action)",
+        onEnd: evt => {
+          const { oldIndex, newIndex } = evt;
+          if (oldIndex == null || newIndex == null) return;
+          // 索引 0 对应序号列，从 1 开始才对应 columns 数组
+          const from = oldIndex - 1;
+          const to = newIndex - 1;
+          if (from < 0 || to < 0 || from >= this.columns.length || to >= this.columns.length) return;
+          const list = this.columns.slice();
+          const moved = list.splice(from, 1)[0];
+          list.splice(to, 0, moved);
+          this.columns = list;
+          this.tableKey += 1;
+          this.$nextTick(() => {
+            this.initColumnDrag();
+          });
+        }
+      });
+    },
+    /**
+     * 处理表格远程排序事件
+     * Element UI 会传入：{ column, prop, order }
+     * - prop：对应列的 prop，如 createTm / updateTm
+     * - order：ascending / descending / null
+     */
+    onSortChange({ prop, order }) {
+      this.sortField = prop || "";
+      this.sortOrder = order || "";
+      this.page = 1;
+      this.fetchData();
+    },
+    // 点击“查询”：重置到第一页并重新请求接口
+    onSearch() {
+      this.page = 1;
+      this.fetchData();
+    },
+    // 点击“重置”：清空所有查询条件、回到第一页并重新请求接口
+    onReset() {
+      this.filters = {
+        belOrgNo: "",
+        meetSubj: "",
+        meetTypeCd: "",
+        createDateRange: []
+      };
+      this.page = 1;
+      this.fetchData();
+    },
+    // 分页器切换页码
+    onPageChange(p) {
+      this.page = p;
+      this.fetchData();
+    },
+    // 将会议类型编码转换为中文文案
+    formatMeetType(code) {
+      if (code === "TRAINING") return "培训";
+      if (code === "MORNING") return "晨夕会";
+      return code || "";
+    },
+    // 根据会议类型返回不同颜色的 Tag 类型
+    getTypeTagType(code) {
+      if (code === "TRAINING") return "primary";
+      if (code === "MORNING") return "warning";
+      return "info";
+    },
+    // 格式化日期为 yyyy-MM-dd
+    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}`;
+    },
+    // 格式化时间为 yyyy-MM-dd HH:mm:ss
+    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() + 0).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}`;
+    },
+    // 点击“详情”：弹出对话框展示会议详细信息
+    onView(row) {
+      const lines = [
+        `会议主题：${row.meetSubj || ""}`,
+        `内容：${row.plainContent || ""}`,
+        `所属机构：${row.organizationName || ""}`,
+        `会议类型：${this.formatMeetType(row.meetTypeCd)}`,
+        `创建人：${row.displayName || ""}`,
+        `创建日期：${this.formatDate(row.createTm)}`,
+        `最近编辑时间：${this.formatDateTime(row.updateTm)}`
+      ];
+      this.$alert(lines.join("\n"), "会议详情", {
+        confirmButtonText: "确定"
+      });
+    },
+    // 点击“删除”：二次确认后从当前 rows 中移除
+    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(() => {});
+    }
+  }
+};
+</script>
+
+<style scoped>
+.meeting-page {
+  padding: 24px;
+}
+.meeting-title {
+  margin-bottom: 16px;
+}
+.meeting-search-card {
+  padding: 12px 16px 4px;
+  background: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  margin-bottom: 12px;
+}
+.meeting-search-form {
+  display: flex;
+  flex-wrap: wrap;
+}
+.meeting-toolbar {
+  margin-bottom: 12px;
+}
+.meeting-subject {
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+.meeting-content {
+  font-size: 12px;
+  color: #909399;
+}
+.meeting-pagination {
+  margin-top: 12px;
+  text-align: right;
+}
+.header-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+.header-draggable {
+  cursor: move;
+}
+.header-label {
+  white-space: nowrap;
+}
+</style>

package/frontEnd/src/pages/NameScrollPage.vue

@@ -0,0 +1,30 @@
+<template>
+  <section class="page name-scroll-page">
+    <h1 class="page-title">名字滚动</h1>
+    <NameScroller ref="scroller" />
+  </section>
+</template>
+
+<script>
+import NameScroller from '../components/NameScroller.vue'
+
+export default {
+  name: 'NameScrollPage',
+  components: { NameScroller },
+  mounted() {
+    if (this.$refs.scroller && this.$refs.scroller.start) {
+      this.$refs.scroller.start()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.page.name-scroll-page {
+  padding: 16px;
+}
+.page-title {
+  font-size: 18px;
+  margin-bottom: 12px;
+}
+</style>

package/frontEnd/src/router/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+import { routes } from './routes'
+
+Vue.use(Router)
+
+export default new Router({
+  mode: 'hash',
+  routes
+})
+

package/frontEnd/src/router/routes.js

@@ -0,0 +1,64 @@
+// 前端路由配置
+// 说明：
+// - 本文件只负责声明路由与菜单元信息，不做权限控制
+// - AppMenu 会根据 meta.showInMenu 渲染左侧菜单
+// - icon 使用 Element UI 内置图标类名
+import LineChartPage from '../pages/LineChartPage.vue'
+import MedalSetting from '../pages/MedalSetting.vue'
+import MeetingListPage from '../pages/MeetingListPage.vue'
+import NameScrollPage from '../pages/NameScrollPage.vue'
+
+// routes 将在 router/index 中被 VueRouter 使用
+export const routes = [
+  // 默认路由：根路径重定向到折线图页面
+  {
+    path: '/',
+    redirect: '/line-chart'
+  },
+  // 折线图页面示例
+  {
+    path: '/line-chart',
+    name: 'LineChart',
+    component: LineChartPage,
+    meta: {
+      // 菜单标题
+      title: '折线图',
+      // 左侧菜单图标
+      icon: 'el-icon-data-line',
+      // 是否在菜单中展示
+      showInMenu: true
+    }
+  },
+  // 勋章设置页面
+  {
+    path: '/medal-setting',
+    name: 'MedalSetting',
+    component: MedalSetting,
+    meta: {
+      title: '勋章设置',
+      icon: 'el-icon-medal',
+      showInMenu: true
+    }
+  },
+  // 会议列表页面
+  {
+    path: '/meeting-list',
+    name: 'MeetingList',
+    component: MeetingListPage,
+    meta: {
+      title: '会议列表',
+      icon: 'el-icon-date',
+      showInMenu: true
+    }
+  },
+  {
+    path: '/name-scroll',
+    name: 'NameScroll',
+    component: NameScrollPage,
+    meta: {
+      title: '名字滚动',
+      icon: 'el-icon-user',
+      showInMenu: true
+    }
+  }
+]

package/frontEnd/src/utils/request.js

@@ -0,0 +1,28 @@
+import axios from 'axios'
+
+const service = axios.create({
+  baseURL: process.env.VUE_APP_API_BASE || 'http://localhost:3000/api',
+  timeout: 15000
+})
+
+service.interceptors.request.use(
+  config => config,
+  error => Promise.reject(error)
+)
+
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    if (res && typeof res === 'object' && 'code' in res) {
+      if (res.code === 0) return res.data
+      return Promise.reject(res)
+    }
+    return res
+  },
+  error => Promise.reject(error)
+)
+
+export const get = (url, params = {}, config = {}) => service.get(url, { params, ...config })
+export const post = (url, data = {}, config = {}) => service.post(url, data, config)
+
+export default service

package/frontEnd/vue.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  devServer: {
+    port: 8080, // 本地开发服务器端口
+    proxy: null // 代理配置，如果需要代理API请求，可以在这里配置
+  },
+  outputDir: 'dist', // 构建输出目录
+  assetsDir: 'static' // 静态资源目录
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "vue2server2",
+  "version": "1.0.21",
+  "description": "",
+  "scripts": {
+    "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",
+    "build": "tsc",
+    "start": "node dist/app.js",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "npm run build && node --test",
+    "front-dev": "cd frontEnd && npm run serve",
+    "front-build": "cd frontEnd && npm run build",
+    "copy-frontend": "rm -rf dist/public && mkdir -p dist/public && cp -R frontEnd/dist/* dist/public/",
+    "build:all": "npm run build && npm run front-build && npm run copy-frontend",
+    "发布": "npm publish",
+    "修订 ": "npm version patch",
+    "次版本": "npm version minor",
+    "主版本": "npm version major",
+    "登录": "npm login ",
+    "一键发布": "npm version patch && npm publish"
+  },
+  "keywords": [
+    "express",
+    "web",
+    "application"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^16.6.1",
+    "express": "^5.2.1",
+    "helmet": "^8.1.0",
+    "morgan": "^1.10.1"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.3",
+    "@types/morgan": "^1.9.9",
+    "@types/node": "^22.10.5",
+    "@typescript-eslint/parser": "^8.19.0",
+    "eslint": "^9.18.0",
+    "ts-node": "^10.9.2",
+    "supertest": "^7.1.4",
+    "typescript": "^5.7.3",
+    "nodemon": "^3.0.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "private": false
+}