arms-app 1.0.67 → 1.0.69

package/package.json

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

package/view/{555.vue → index.vue}

@@ -1,11 +1,11 @@
 <template>
-  <!-- 列拖拽示例页面 -->
+  <!-- 列拖拽示例页面：支持通过拖拽表头调整列顺序 -->
   <section class="draggable-columns-table-page">
-    <!-- 标题与说明 -->
+    <!-- 标题与说明文案 -->
     <h1>列拖拽表格</h1>
     <p class="desc">通过拖拽表头，使用 sortablejs 实现列换位。</p>
 
-    <!-- 表格：通过 columns 数组驱动列配置 -->
+    <!-- 表格：通过 columns 数组驱动所有可拖拽列（含序号/操作列），rows 负责行数据 -->
     <el-table
       ref="draggableTable"
       :key="tableKey"
@@ -15,13 +15,10 @@
       style="width: 100%"
       height="420"
     >
-      <!-- 固定的序号列，不参与拖拽换位 -->
-      <el-table-column type="index" label="#" width="60" />
-
-      <!-- 动态业务列：所有可拖拽的列 -->
+      <!-- 所有列（包含序号列/业务列/操作列）均由 columns 数组统一驱动，可参与拖拽 -->
       <el-table-column
         v-for="col in columns"
-        :key="col.prop"
+        :key="col.key || col.prop"
         :prop="col.prop"
         :label="col.label"
         :width="col.width"
@@ -29,15 +26,25 @@
         :align="col.align || 'left'"
         :header-align="col.headerAlign || col.align || 'left'"
       >
-        <!-- 表头插槽：添加拖拽手柄，作为 sortablejs 的 handle -->
+        <!-- 表头插槽：渲染拖拽手柄（handle），供 sortablejs 使用 -->
         <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 v-if="col.isOperation">
+            <el-button type="text" size="mini" @click="onView(scope.row)">查看</el-button>
+            <el-button type="text" size="mini" @click="onEdit(scope.row)">编辑</el-button>
+            <el-button type="text" size="mini" @click="onDelete(scope.row)">删除</el-button>
+          </template>
+          <template v-else-if="col.isIndex">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+          <template v-else>
+            <span>{{ scope.row[col.prop] }}</span>
+          </template>
         </template>
       </el-table-column>
     </el-table>
@@ -51,7 +58,7 @@ export default {
   name: "DraggableColumnsTableView",
   data() {
     return {
-      // 表格行数据：示例客户信息
+      // 表格行数据：示例客户信息（实际项目中可从接口或 Vuex 获取）
       rows: [
         {
           id: 1,
@@ -86,29 +93,32 @@ export default {
       ],
       // 列配置：用于驱动 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" },
+        { key: "index", label: "#", width: 60, align: "center", isIndex: true },
+        { key: "name", prop: "name", label: "姓名", width: 160, align: "center" },
+        { key: "customerTag", prop: "customerTag", label: "客户标签", width: 120, align: "center" },
+        { key: "manager", prop: "manager", label: "客户人", width: 160, align: "center" },
+        { key: "contribution", prop: "contribution", label: "贡献积分", width: 120, align: "right", headerAlign: "center" },
+        { key: "pass1", prop: "pass1", label: "通关1", width: 100, align: "center" },
+        { key: "pass2", prop: "pass2", label: "通关2", width: 100, align: "center" },
+        { key: "pass3", prop: "pass3", label: "通关3", width: 100, align: "center" },
+        { key: "operation", prop: "__operation__", label: "操作", width: 180, align: "center", headerAlign: "center", isOperation: true },
       ],
-      // sortablejs 实例，用于在组件销毁时释放
+      // sortablejs 实例引用，用于在组件销毁或重建时手动销毁，避免内存泄露
       headerSortable: null,
-      // 用于强制重建 el-table，确保列顺序与数据完全同步
+      // 用于强制重建 el-table（修改 key），确保列顺序变更后 ElementUI 内部状态与 DOM 同步
       tableKey: 0,
+      // 标识组件是否已经进入销毁流程，避免销毁后仍然去访问 DOM 或创建 sortable 实例
       isDestroyed: false,
     };
   },
   mounted() {
-    // 表格渲染完成后，初始化表头拖拽能力
+    // 组件挂载后，在下一个渲染周期中初始化表头拖拽能力
     this.$nextTick(() => {
       this.initColumnDrag();
     });
   },
   beforeDestroy() {
-    // 组件销毁前销毁 sortable 实例，避免内存泄露
+    // 组件销毁前：设置销毁标记并清理 sortable 实例，避免内存泄露
     this.isDestroyed = true;
     if (this.headerSortable && this.headerSortable.destroy) {
       this.headerSortable.destroy();
@@ -116,37 +126,38 @@ export default {
     }
   },
   methods: {
-    // 初始化列拖拽：绑定在 ElementUI 表格头部行上
+    // 初始化列拖拽：在 ElementUI 表格头部行（thead > tr）上绑定 sortable 实例
     initColumnDrag() {
+      // 若组件已处于销毁阶段，直接返回，避免无意义的 DOM 访问
       if (this.isDestroyed) return;
-      // 已存在实例时先销毁，避免重复绑定和内存泄漏
+      // 若已存在 sortable 实例，先销毁，避免重复绑定导致的事件堆积与内存泄露
       if (this.headerSortable && this.headerSortable.destroy) {
         this.headerSortable.destroy();
         this.headerSortable = null;
       }
 
+      // 通过 ref 获取 ElementUI 表格实例，再访问内部根元素
       const table = this.$refs.draggableTable;
       if (!table || !table.$el) return;
 
-      // ElementUI 表头 DOM：thead 里的第一行 tr
+      // ElementUI 表头 DOM：thead 里的第一行 tr，作为 sortable 容器
       const headerRow = table.$el.querySelector(".el-table__header-wrapper thead tr");
       if (!headerRow) return;
 
       this.headerSortable = Sortable.create(headerRow, {
         // 拖拽动画时长（毫秒）
         animation: 150,
-        // 只允许拖拽 header-draggable 区域作为手柄
+        // 只允许拖拽 header-draggable 区域作为手柄，避免误拖整个表头
         handle: ".header-draggable",
-        // 可被拖动的元素类型：表头单元格 th
+        // 可被拖动的元素：表头单元格 th（索引列因没有 handle 实际不可拖拽）
         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 (oldIndex === newIndex) return;
+          const from = oldIndex;
+          const to = newIndex;
           if (from < 0 || to < 0 || from >= this.columns.length || to >= this.columns.length) return;
 
           // 交换 columns 中两列的位置，实现“换列”
@@ -167,30 +178,3 @@ export default {
 };
 </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>

package/view/1.js

@@ -1,23 +0,0 @@
-// vue.config.js
-const { merge } = require('webpack-merge');
-const baseConfig = require('./build/webpack.base.config');
-const baseProxy = require('./build/base.proxy');
-const persionProxy = require('./build/persio n.proxy');
-
-module.exports = merge(baseConfig, {
-    devServer: {
-        historyApiFallback: true,
-        port: 8081,
-        proxy: {
-            ...baseProxy,
-            ...persionProxy,
-        },
-    },
-    // 新增：sourcemap 配置
-    configureWebpack: {
-        // 根据环境自动切换 sourcemap
-        devtool: process.env.NODE_ENV === 'development'
-            ? 'cheap-module-source-map' // 开发环境
-            : false // 生产环境
-    }
-});

package/view/1.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="page">
-    <h3>悬停停自动，手动仍可滚（无缝）</h3>
-
-    <vue-seamless-scroll
-      ref="ss"
-      class="warp"
-      :data="list"
-      :class-option="option"
-      @mouseenter.native="hovering = true"
-      @mouseleave.native="hovering = false"
-      @mousewheel.native.prevent="onWheel"
-      @touchstart.native.passive="onTouchStart"
-      @touchmove.native.prevent="onTouchMove"
-    >
-      <div class="list">
-        <div class="item" v-for="(item, index) in list" :key="index">
-          {{ item }}
-        </div>
-      </div>
-    </vue-seamless-scroll>
-  </div>
-</template>
-
-<script>
-import VueSeamlessScroll from "vue-seamless-scroll";
-
-export default {
-  name: "SeamlessHoverManualView",
-  components: {
-    VueSeamlessScroll,
-  },
-  data() {
-    return {
-      list: [],
-      lastTouchY: 0,
-      hovering: false,
-      autoStep: 0.3,
-    };
-  },
-  computed: {
-    option() {
-      return {
-        step: this.hovering ? 0 : this.autoStep,
-        direction: 1,
-        hoverStop: false,
-        limitMoveNum: 1,
-        openWatch: true,
-      };
-    },
-  },
-  mounted() {
-    this.fetchData();
-  },
-  methods: {
-    async fetchData() {
-      // 模拟接口请求
-      console.log('开始获取数据...');
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      const data = Array.from({ length: 5000 }, (_, i) => `列表项 ${i + 1}`);
-      // 使用 Object.freeze 冻结数据，避免 Vue 深度监听，显著提升大数据量下的渲染性能
-      this.list = Object.freeze(data);
-      console.log('数据获取完成，共', this.list.length, '条');
-      this.$nextTick(() => {
-        if (this.$refs.ss && this.$refs.ss.reset) this.$refs.ss.reset();
-      });
-    },
-    onWheel(e) {
-      const ss = this.$refs.ss;
-      if (!ss) return;
-
-      ss.yPos -= e.deltaY;
-
-      if (ss.yPos > 0) ss.yPos = 0;
-
-      if (ss.realBoxHeight && Math.abs(ss.yPos) > ss.realBoxHeight / 2) {
-        ss.yPos = 0;
-      }
-    },
-    onTouchStart(e) {
-      this.lastTouchY = e.touches[0].clientY;
-    },
-    onTouchMove(e) {
-      const y = e.touches[0].clientY;
-      const delta = this.lastTouchY - y;
-      this.lastTouchY = y;
-      this.onWheel({ deltaY: delta });
-    },
-  },
-};
-</script>
-
-<style scoped>
-.page {
-  padding: 20px;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.warp {
-  height: 260px;
-  overflow: hidden;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-.list {
-  padding: 0 12px;
-}
-
-.item {
-  height: 40px;
-  line-height: 40px;
-  border-bottom: 1px dashed #ddd;
-  box-sizing: border-box;
-}
-</style>
-

package/view/111.js

@@ -1,35 +0,0 @@
-function deepEqual(a, b, seen = new WeakMap()) {
-  if (Object.is(a, b)) return true
-
-  if (
-    typeof a !== 'object' ||
-    typeof b !== 'object' ||
-    a === null ||
-    b === null
-  ) return false
-
-  if (seen.get(a) === b) return true
-  seen.set(a, b)
-
-  if (a.constructor !== b.constructor) return false
-
-  if (a instanceof Date) {
-    return a.getTime() === b.getTime()
-  }
-
-  if (a instanceof RegExp) {
-    return a.source === b.source && a.flags === b.flags
-  }
-
-  const keysA = Reflect.ownKeys(a)
-  const keysB = Reflect.ownKeys(b)
-
-  if (keysA.length !== keysB.length) return false
-
-  for (const key of keysA) {
-    if (!keysB.includes(key)) return false
-    if (!deepEqual(a[key], b[key], seen)) return false
-  }
-
-  return true
-}

package/view/2.js

@@ -1,90 +0,0 @@
-function traverseChildren(arr) {
-    if (!Array.isArray(arr)) return;
-
-    for (let i = 0; i < arr.length; i++) {
-        const item = arr[i];
-
-        // 处理当前节点
-        console.log('当前节点:', item.name || item.id);
-
-        // 如果有children，递归遍历
-        if (item.children && Array.isArray(item.children) && item.children.length > 0) {
-            console.log(`进入 ${item.name} 的子节点:`);
-            traverseChildren(item.children);
-            console.log(`离开 ${item.name} 的子节点`);
-        }
-    }
-}
-function getAllNodes(arr) {
-    let result = [];
-
-    function traverse(nodes) {
-        if (!Array.isArray(nodes)) return;
-
-        for (let i = 0; i < nodes.length; i++) {
-            const node = nodes[i];
-
-            // 将当前节点添加到结果数组
-            result.push(node);
-
-            // 递归处理子节点
-            if (node.children && Array.isArray(node.children)) {
-                traverse(node.children);
-            }
-        }
-    }
-
-    traverse(arr);
-    return result;
-}
-
-function flattenIterative(arr, childrenKey = 'children') {
-    const result = [];
-    const stack = [...arr]; // 使用栈来模拟递归
-
-    while (stack.length > 0) {
-        const node = stack.pop();
-
-        if (!node) continue;
-
-        // 添加当前节点
-        result.push(node);
-
-        // 将子节点逆序压入栈中（保持原顺序）
-        const children = node[childrenKey];
-        if (Array.isArray(children) && children.length > 0) {
-            // 从后往前压栈，这样前面出来的顺序是正确的
-            for (let i = children.length - 1; i >= 0; i--) {
-                stack.push(children[i]);
-            }
-        }
-    }
-
-    return result;
-}
-
-
-
-//
-function getAllOrgIds(arr) {
-    let result = [];
-
-    function traverse(nodes) {
-        if (!Array.isArray(nodes)) return;
-
-        for (let node of nodes) {
-            // 如果当前节点有 orgid，添加到结果中
-            if (node.orgid !== undefined && node.orgid !== null) {
-                result.push(node.orgid);
-            }
-
-            // 如果当前节点有 children，递归遍历
-            if (node.children && Array.isArray(node.children) && node.children.length > 0) {
-                traverse(node.children);
-            }
-        }
-    }
-
-    traverse(arr);
-    return result;
-}

package/view/2.vue

@@ -1,129 +0,0 @@
-<template>
-  <el-dialog
-    :visible.sync="visibleInner"
-    title="列表"
-    width="800px"
-    :close-on-click-modal="false"
-    @open="onOpen"
-    @closed="onClosed"
-  >
-    <!-- 表格只渲染当前页 rows（10条） -->
-    <el-table
-      :data="rows"
-      height="400"
-      border
-      row-key="id"
-    >
-      <el-table-column prop="id" label="ID" width="120" />
-      <el-table-column prop="name" label="名称" />
-      <el-table-column prop="status" label="状态" width="120" />
-    </el-table>
-
-    <div style="margin-top: 12px; text-align: right;">
-      <el-pagination
-        background
-        layout="total, prev, pager, next, sizes"
-        :total="total"
-        :current-page.sync="page"
-        :page-size.sync="pageSize"
-        :page-sizes="[10, 20, 50, 100]"
-        @current-change="refreshPage"
-        @size-change="onSizeChange"
-      />
-    </div>
-
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="close">关闭</el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  name: "ChildDialog",
-  props: {
-    // 只控制显隐，不要用 props 传 5000 条
-    visible: { type: Boolean, default: false }
-  },
-  data() {
-    return {
-      // 内部 visible（避免直接改 props）
-      visibleInner: false,
-
-      // 只存 UI 需要的（轻量）
-      page: 1,
-      pageSize: 10,
-      total: 0,
-      rows: []
-    };
-  },
-
-  watch: {
-    // 父组件控制打开/关闭
-    visible: {
-      immediate: true,
-      handler(v) {
-        this.visibleInner = v;
-      }
-    },
-    // 同步回父组件（:visible.sync）
-    visibleInner(v) {
-      this.$emit("update:visible", v);
-    }
-  },
-
-  created() {
-    // 非响应式大数据容器（不要放 data 里）
-    this._rawList = [];
-    this._hasData = false;
-  },
-
-  methods: {
-    /** 父组件 open 后调用：this.$refs.dlg.setData(bigList) */
-    setData(list) {
-      // 关键：不放 data，不做深拷贝，不 deep watch
-      this._rawList = Array.isArray(list) ? list : [];
-      this._hasData = true;
-
-      // 初始化分页
-      this.page = 1;
-      this.total = this._rawList.length;
-
-      // 如果 dialog 已经打开，立刻刷新；否则等 onOpen 再刷
-      if (this.visibleInner) this.refreshPage();
-    },
-
-    onOpen() {
-      // dialog 打开后，如果数据已设置，刷新一次（渲染10条）
-      if (this._hasData) this.refreshPage();
-    },
-
-    onClosed() {
-      // 关闭时只清理轻量状态，避免销毁/重建造成卡顿
-      this.rows = [];
-      this.page = 1;
-      // 如果你希望下次打开仍复用数据，就别清 _rawList
-      // this._rawList = [];
-      // this._hasData = false;
-    },
-
-    refreshPage() {
-      const start = (this.page - 1) * this.pageSize;
-      const end = start + this.pageSize;
-
-      // 只 slice 当前页，rows 才是响应式的
-      this.rows = this._rawList.slice(start, end);
-      this.total = this._rawList.length;
-    },
-
-    onSizeChange() {
-      this.page = 1;
-      this.refreshPage();
-    },
-
-    close() {
-      this.visibleInner = false;
-    }
-  }
-};
-</script>