arms-app 1.0.65 → 1.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arms-app",
-  "version": "1.0.65",
+  "version": "1.0.67",
   "description": "一个基于 Express 的 Web 应用1",
   "main": "index.js",
   "scripts": {

package/view/4.vue

@@ -1,9 +1,13 @@
 <template>
+  <!-- 人员信息表页面 -->
   <section class="person-table-page">
+    <!-- 页面标题 -->
     <h1>人员信息表</h1>
+    <!-- 工具栏：新增按钮 -->
     <div class="toolbar">
       <el-button type="primary" size="mini" @click="onOpenAdd">新增</el-button>
     </div>
+    <!-- 人员信息表格 -->
     <el-table
       :data="rows"
       border
@@ -11,7 +15,9 @@
       size="small"
       style="width: 100%"
     >
+      <!-- 序号列 -->
       <el-table-column type="index" label="序号" width="60" align="center" header-align="center" />
+      <!-- 基础信息列 -->
       <el-table-column prop="name" label="人员姓名" min-width="100" align="center" header-align="center" />
       <el-table-column label="性别" width="80" align="center" header-align="center">
         <template slot-scope="scope">
@@ -25,9 +31,10 @@
       <el-table-column prop="emergContactPersonName" label="紧急联系人" min-width="100" align="center" header-align="center" />
       <el-table-column prop="emergContactPhoneNo" label="紧急联系方式" min-width="130" align="center" header-align="center" />
       <el-table-column prop="birthDt" label="出生日期" min-width="110" align="center" header-align="center" />
-      <el-table-column prop="highestEduDegreeDesc" label="最高学历" min-width="90" align="center" header-align="center" />
+      <el-table-column prop="最高EduDegreeDesc" label="最高学历" min-width="90" align="center" header-align="center" />
       <el-table-column prop="createTm" label="创建日期" min-width="110" align="center" header-align="center" />
       <el-table-column prop="rmk" label="备注" min-width="120" align="center" header-align="center" />
+      <!-- 操作列：详情、编辑、删除 -->
       <el-table-column label="操作" width="200" align="center" header-align="center">
         <template slot-scope="scope">
           <el-button type="text" size="mini" @click="onView(scope.row)">详情</el-button>
@@ -37,11 +44,13 @@
       </el-table-column>
     </el-table>
 
+    <!-- 新增/编辑/查看 弹窗 -->
     <el-dialog
       :title="dialogTitle"
       :visible.sync="dialogVisible"
       width="720px"
     >
+      <!-- 人员信息表单 -->
       <el-form
         ref="addForm"
         :model="form"
@@ -49,6 +58,7 @@
         label-width="90px"
         size="small"
       >
+        <!-- 第一行：姓名、岗位 -->
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="人员姓名" prop="name">
@@ -68,6 +78,7 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <!-- 第二行：入行日期、性别 -->
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="入行日期" prop="happenPerio">
@@ -90,6 +101,7 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <!-- 第三行：联系方式、出生日期 -->
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="联系方式" prop="telNo">
@@ -109,6 +121,7 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <!-- 第四行：家庭住址 -->
         <el-row :gutter="16">
           <el-col :span="24">
             <el-form-item label="家庭住址" prop="dtlAddr">
@@ -116,6 +129,7 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <!-- 第五行：紧急联系人及联系方式 -->
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="紧急联系人" prop="emergContactPersonName">
@@ -128,6 +142,7 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <!-- 第六行：最高学历、备注 -->
         <el-row :gutter="16">
           <el-col :span="12">
             <el-form-item label="最高学历" prop="highestEduDegreeDesc">
@@ -155,6 +170,7 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <!-- 第七行：附件上传 -->
         <el-row :gutter="16">
           <el-col :span="24">
             <el-form-item label="选择文件">
@@ -177,6 +193,7 @@
           </el-col>
         </el-row>
       </el-form>
+      <!-- 弹窗底部按钮 -->
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取消</el-button>
         <el-button
@@ -196,42 +213,75 @@ export default {
   name: "PersonTableView",
   data() {
     return {
+      // 表格数据源：人员列表
       rows: [
         {
+          // 唯一标识
           id: 3286648151643648,
+          // 人员姓名
           name: "李白",
+          // 性别：1-男，2-女
           sex: "1",
+          // 岗位名称
           postName: "保洁",
+          // 入行日期（yyyy-MM-dd）
           happenPerio: "2002-02-02",
+          // 联系电话
           telNo: "18966541247",
+          // 现居住地
           dtlAddr: "北京",
+          // 紧急联系人姓名
           emergContactPersonName: "王安石",
+          // 紧急联系人电话
           emergContactPhoneNo: "15466257489",
+          // 出生日期（yyyy-MM-dd）
           birthDt: "2000-02-02",
+          // 最高学历说明
           highestEduDegreeDesc: "硕士",
+          // 创建日期（yyyy-MM-dd）
           createTm: "2025-12-25",
+          // 备注信息
           rmk: "好人",
+          // 所属机构号
           beloOrgNO: "000291",
+          // 创建人工号
           creatorNo: "022171",
+          // 删除标识：0-正常 1-删除
           delFlag: "0",
         },
       ],
+      // 弹窗显隐状态
       dialogVisible: false,
+      // 弹窗模式：add 新增 / edit 编辑 / view 查看
       dialogMode: "add",
+      // 当前编辑或查看的人员ID
       editingId: null,
+      // 表单数据模型
       form: {
+        // 人员姓名
         name: "",
+        // 性别：1-男，2-女
         sex: "",
+        // 岗位名称
         postName: "",
+        // 入行日期
         happenPerio: "",
+        // 联系电话
         telNo: "",
+        // 家庭住址
         dtlAddr: "",
+        // 紧急联系人姓名
         emergContactPersonName: "",
+        // 紧急联系人电话
         emergContactPhoneNo: "",
+        // 出生日期
         birthDt: "",
+        // 最高学历说明
         highestEduDegreeDesc: "",
+        // 备注信息
         rmk: "",
       },
+      // 表单校验规则
       rules: {
         name: [{ required: true, message: "请输入人员姓名", trigger: "blur" }],
         postName: [{ required: true, message: "请选择岗位", trigger: "change" }],
@@ -241,33 +291,41 @@ export default {
         emergContactPersonName: [{ required: true, message: "请输入紧急联系人", trigger: "blur" }],
         emergContactPhoneNo: [{ required: true, message: "请输入紧急联系方式", trigger: "blur" }],
       },
+      // 岗位下拉选项
       postOptions: ["保洁", "柜员", "客户经理", "运营专员"],
+      // 学历下拉选项
       eduOptions: ["大专", "本科", "硕士", "博士"],
+      // 上传的附件列表
       fileList: [],
     };
   },
   computed: {
+    // 弹窗标题文案
     dialogTitle() {
       if (this.dialogMode === "edit") return "编辑";
       if (this.dialogMode === "view") return "详情";
       return "新增";
     },
+    // 是否为只读查看模式
     isView() {
       return this.dialogMode === "view";
     },
   },
   methods: {
+    // 性别字段格式化显示
     formatSex(v) {
       if (v === "1" || v === 1) return "男";
       if (v === "2" || v === 2) return "女";
       return "";
     },
+    // 打开新增弹窗
     onOpenAdd() {
       this.dialogVisible = true;
        this.dialogMode = "add";
        this.editingId = null;
       this.resetForm();
     },
+    // 打开编辑弹窗并回显数据
     onEdit(row) {
       this.dialogMode = "edit";
       this.editingId = row.id;
@@ -291,6 +349,7 @@ export default {
         this.$refs.addForm.clearValidate();
       }
     },
+    // 打开详情弹窗（只读）
     onView(row) {
       this.dialogMode = "view";
       this.editingId = row.id;
@@ -314,6 +373,7 @@ export default {
         this.$refs.addForm.clearValidate();
       }
     },
+    // 重置表单数据及校验
     resetForm() {
       this.form = {
         name: "",
@@ -333,12 +393,15 @@ export default {
         this.$refs.addForm.clearValidate();
       }
     },
+    // 文件选择变更回调
     onFileChange(file, fileList) {
       this.fileList = fileList.slice();
     },
+    // 文件移除回调
     onFileRemove(file, fileList) {
       this.fileList = fileList.slice();
     },
+    // 保存（新增或编辑）人员信息
     onSave() {
       if (!this.$refs.addForm) return;
       this.$refs.addForm.validate((valid) => {
@@ -367,18 +430,21 @@ export default {
           delFlag: "0",
         };
         if (this.dialogMode === "edit" && this.editingId) {
+          // 编辑模式：更新原有记录
           this.rows = this.rows.map((r) =>
             r.id === this.editingId
               ? Object.assign({}, r, base, { id: r.id })
-              : r
+          : r
           );
         } else {
+          // 新增模式：追加新记录
           const row = Object.assign({}, base, { id: Date.now() });
           this.rows = this.rows.concat(row);
         }
         this.dialogVisible = false;
       });
     },
+    // 删除人员信息
     onRemove(row) {
       if (!row || !row.id) return;
       this.$confirm("确认删除该人员吗？", "提示", { type: "warning" })

package/view/555.vue

@@ -0,0 +1,196 @@
+<template>
+  <!-- 列拖拽示例页面 -->
+  <section class="draggable-columns-table-page">
+    <!-- 标题与说明 -->
+    <h1>列拖拽表格</h1>
+    <p class="desc">通过拖拽表头，使用 sortablejs 实现列换位。</p>
+
+    <!-- 表格：通过 columns 数组驱动列配置 -->
+    <el-table
+      ref="draggableTable"
+      :key="tableKey"
+      :data="rows"
+      border
+      stripe
+      style="width: 100%"
+      height="420"
+    >
+      <!-- 固定的序号列，不参与拖拽换位 -->
+      <el-table-column type="index" label="#" width="60" />
+
+      <!-- 动态业务列：所有可拖拽的列 -->
+      <el-table-column
+        v-for="col in columns"
+        :key="col.prop"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :min-width="col.minWidth"
+        :align="col.align || 'left'"
+        :header-align="col.headerAlign || col.align || 'left'"
+      >
+        <!-- 表头插槽：添加拖拽手柄，作为 sortablejs 的 handle -->
+        <template slot="header">
+          <div class="header-draggable">
+            <span class="header-label">{{ col.label }}</span>
+          </div>
+        </template>
+        <!-- 单元格内容：根据列配置动态渲染字段 -->
+        <template slot-scope="scope">
+          <span>{{ scope.row[col.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<script>
+import Sortable from "sortablejs";
+
+export default {
+  name: "DraggableColumnsTableView",
+  data() {
+    return {
+      // 表格行数据：示例客户信息
+      rows: [
+        {
+          id: 1,
+          name: "王小虎",
+          customerTag: "重点客户",
+          manager: "张三",
+          contribution: 12000,
+          pass1: 98,
+          pass2: 87,
+          pass3: 93,
+        },
+        {
+          id: 2,
+          name: "李小虎",
+          customerTag: "潜在客户",
+          manager: "李四",
+          contribution: 8600,
+          pass1: 88,
+          pass2: 90,
+          pass3: 85,
+        },
+        {
+          id: 3,
+          name: "赵六",
+          customerTag: "普通客户",
+          manager: "王五",
+          contribution: 5400,
+          pass1: 76,
+          pass2: 80,
+          pass3: 79,
+        },
+      ],
+      // 列配置：用于驱动 el-table-column 渲染，同时作为拖拽排序的数据源
+      columns: [
+        { prop: "name", label: "姓名", width: 160, align: "center" },
+        { prop: "customerTag", label: "客户标签", width: 120, align: "center" },
+        { prop: "manager", label: "客户人", width: 160, align: "center" },
+        { prop: "contribution", label: "贡献积分", width: 120, align: "right", headerAlign: "center" },
+        { prop: "pass1", label: "通关1", width: 100, align: "center" },
+        { prop: "pass2", label: "通关2", width: 100, align: "center" },
+        { prop: "pass3", label: "通关3", width: 100, align: "center" },
+      ],
+      // sortablejs 实例，用于在组件销毁时释放
+      headerSortable: null,
+      // 用于强制重建 el-table，确保列顺序与数据完全同步
+      tableKey: 0,
+      isDestroyed: false,
+    };
+  },
+  mounted() {
+    // 表格渲染完成后，初始化表头拖拽能力
+    this.$nextTick(() => {
+      this.initColumnDrag();
+    });
+  },
+  beforeDestroy() {
+    // 组件销毁前销毁 sortable 实例，避免内存泄露
+    this.isDestroyed = true;
+    if (this.headerSortable && this.headerSortable.destroy) {
+      this.headerSortable.destroy();
+      this.headerSortable = null;
+    }
+  },
+  methods: {
+    // 初始化列拖拽：绑定在 ElementUI 表格头部行上
+    initColumnDrag() {
+      if (this.isDestroyed) return;
+      // 已存在实例时先销毁，避免重复绑定和内存泄漏
+      if (this.headerSortable && this.headerSortable.destroy) {
+        this.headerSortable.destroy();
+        this.headerSortable = null;
+      }
+
+      const table = this.$refs.draggableTable;
+      if (!table || !table.$el) return;
+
+      // ElementUI 表头 DOM：thead 里的第一行 tr
+      const headerRow = table.$el.querySelector(".el-table__header-wrapper thead tr");
+      if (!headerRow) return;
+
+      this.headerSortable = Sortable.create(headerRow, {
+        // 拖拽动画时长（毫秒）
+        animation: 150,
+        // 只允许拖拽 header-draggable 区域作为手柄
+        handle: ".header-draggable",
+        // 可被拖动的元素类型：表头单元格 th
+        draggable: "th",
+        // 拖拽结束时回调：根据新旧索引更新 columns 顺序
+        onEnd: (evt) => {
+          const { oldIndex, newIndex } = evt;
+          if (oldIndex == null || newIndex == null) return;
+
+          // 第 0 列是 index 序号列，从第 1 列开始才对应 columns[0]
+          const from = oldIndex - 1;
+          const to = newIndex - 1;
+          if (from < 0 || to < 0 || from >= this.columns.length || to >= this.columns.length) return;
+
+          // 交换 columns 中两列的位置，实现“换列”
+          const list = this.columns.slice();
+          [list[from], list[to]] = [list[to], list[from]];
+          this.columns = list;
+
+          // 强制重建表格组件，避免 ElementUI 内部列状态与 DOM 拖拽产生偏差，
+          // 重建后在下一个 tick 重新绑定 sortable
+          this.tableKey += 1;
+          this.$nextTick(() => {
+            this.initColumnDrag();
+          });
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.draggable-columns-table-page {
+  padding: 24px;
+}
+h1 {
+  margin: 0 0 12px;
+  font-size: 20px;
+}
+.desc {
+  margin: 0 0 16px;
+  color: #666;
+}
+.header-draggable {
+  display: inline-flex;
+  align-items: center;
+  cursor: move;
+  user-select: none;
+}
+.drag-icon {
+  margin-right: 4px;
+  font-size: 14px;
+  color: #999;
+}
+.header-label {
+  white-space: nowrap;
+}
+</style>