vercerl-express-test 1.0.2 → 1.0.4

package/frontEnd/src/pages/MeetingListPage.vue

@@ -0,0 +1,542 @@
+<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="pagedRows"
+      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="filteredRows.length"
+        @current-change="onPageChange"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import Sortable from "sortablejs";
+
+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: [
+        {
+          id: 33029032315325800,
+          belOrgNo: "31021",
+          organizationName: "上海浦东支行",
+          meetSubj: "安全测试",
+          meetConte: "<p>1231</p>",
+          plainContent: "1231",
+          meetDt: "2026-01-07",
+          meetNo: "ORTHER2026-01-16 17:02:05",
+          meetTypeCd: "TRAINING",
+          displayName: "刘晓鸣",
+          createTm: "2026-01-16",
+          updateTm: "2026-01-16 17:02:05"
+        },
+        {
+          id: 33029032315325801,
+          belOrgNo: "11001",
+          organizationName: "北京西城支行",
+          meetSubj: "二化管理体系例会",
+          meetConte: "<p>1.各部门汇报日常工作以及问题</p><p>2.当前阶段化重点说明</p>",
+          plainContent: "各部门汇报日常工作以及问题；当前阶段化重点说明",
+          meetDt: "2026-01-15",
+          meetNo: "MORNING2026-01-15 19:56:24",
+          meetTypeCd: "MORNING",
+          displayName: "黄丽丽",
+          createTm: "2026-01-15",
+          updateTm: "2026-01-15 19:56:24"
+        }
+      ],
+      // 查询条件
+      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
+    };
+  },
+  mounted() {
+    // 等 DOM 渲染完成后初始化列拖拽
+    this.$nextTick(() => {
+      this.initColumnDrag();
+    });
+  },
+  beforeDestroy() {
+    this.isDestroyed = true;
+    if (this.headerSortable && this.headerSortable.destroy) {
+      this.headerSortable.destroy();
+      this.headerSortable = null;
+    }
+  },
+  computed: {
+    // 根据查询条件得到过滤后的数据列表
+    filteredRows() {
+      const subj = (this.filters.meetSubj || "").trim();
+      const belOrgNo = this.filters.belOrgNo || "";
+      const meetTypeCd = this.filters.meetTypeCd || "";
+      const [start, end] = Array.isArray(this.filters.createDateRange) ? this.filters.createDateRange : [];
+
+      const list = this.rows.filter(row => {
+        if (belOrgNo && row.belOrgNo !== belOrgNo) return false;
+        if (meetTypeCd && row.meetTypeCd !== meetTypeCd) return false;
+        if (subj && !row.meetSubj.includes(subj)) return false;
+        if (start && end) {
+          const d = row.createTm;
+          if (!d || d < start || d > end) return false;
+        }
+        return true;
+      });
+
+      if (this.sortField && this.sortOrder) {
+        const field = this.sortField;
+        const order = this.sortOrder === "ascending" ? 1 : -1;
+        list.sort((a, b) => {
+          const av = this.getTimeValue(a[field]);
+          const bv = this.getTimeValue(b[field]);
+          if (av === bv) return 0;
+          return av > bv ? order : -order;
+        });
+      }
+
+      return list;
+    },
+    // 当前页应显示的数据（在 filteredRows 基础上做前端分页）
+    pagedRows() {
+      const start = (this.page - 1) * this.pageSize;
+      return this.filteredRows.slice(start, start + this.pageSize);
+    }
+  },
+  watch: {
+    // 当过滤后的数据量变化时，自动纠正当前页，避免超出最大页码
+    filteredRows() {
+      const maxPage = Math.max(1, Math.ceil(this.filteredRows.length / this.pageSize) || 1);
+      if (this.page > maxPage) this.page = maxPage;
+    }
+  },
+  methods: {
+    /**
+     * 初始化表头拖拽
+     * 说明：
+     * - 使用 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;
+    },
+    // 点击“查询”：仅重置到第一页，筛选逻辑在 computed 中统一处理
+    onSearch() {
+      this.page = 1;
+    },
+    // 点击“重置”：清空所有查询条件并回到第一页
+    onReset() {
+      this.filters = {
+        belOrgNo: "",
+        meetSubj: "",
+        meetTypeCd: "",
+        createDateRange: []
+      };
+      this.page = 1;
+    },
+    // 分页器切换页码
+    onPageChange(p) {
+      this.page = p;
+    },
+    // 将会议类型编码转换为中文文案
+    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}`;
+    },
+    // 将各种形式的日期值转换为时间戳，用于排序
+    getTimeValue(value) {
+      if (!value) return 0;
+      const d = new Date(value);
+      if (Number.isNaN(d.getTime())) return 0;
+      return d.getTime();
+    },
+    // 点击“详情”：弹出对话框展示会议详细信息
+    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/router/routes.js

@@ -1,5 +1,6 @@
 import LineChartPage from '../pages/LineChartPage.vue'
 import MedalSetting from '../pages/MedalSetting.vue'
+import MeetingListPage from '../pages/MeetingListPage.vue'
 
 export const routes = [
   {
@@ -25,5 +26,15 @@ export const routes = [
       icon: 'el-icon-medal',
       showInMenu: true
     }
+  },
+  {
+    path: '/meeting-list',
+    name: 'MeetingList',
+    component: MeetingListPage,
+    meta: {
+      title: '会议列表',
+      icon: 'el-icon-date',
+      showInMenu: true
+    }
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vercerl-express-test",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",
@@ -9,6 +9,7 @@
     "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",