arms-app 1.0.68 → 1.0.70

package/package.json

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

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

@@ -5,7 +5,7 @@
     <h1>列拖拽表格</h1>
     <p class="desc">通过拖拽表头，使用 sortablejs 实现列换位。</p>
 
-    <!-- 表格：通过 columns 数组驱动可拖拽列配置，rows 负责行数据 -->
+    <!-- 表格：通过 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 数组驱动 -->
+      <!-- 所有列（包含序号列/业务列/操作列）均由 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"
@@ -42,6 +39,9 @@
             <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>
@@ -93,14 +93,15 @@ 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" },
-        { prop: "__operation__", label: "操作", width: 180, align: "center", headerAlign: "center", isOperation: true },
+        { 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 实例引用，用于在组件销毁或重建时手动销毁，避免内存泄露
       headerSortable: null,
@@ -154,12 +155,9 @@ export default {
         onEnd: (evt) => {
           const { oldIndex, newIndex } = evt;
           if (oldIndex == null || newIndex == null) return;
-
-          // 第 0 列是 index 序号列，从第 1 列开始才对应 columns[0]
-          if (oldIndex === 0 || newIndex === 0) return;
-          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 中两列的位置，实现“换列”
@@ -180,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/{4.vue → index2.vue}

@@ -15,28 +15,21 @@
       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">
+      <el-table-column
+        v-for="col in columns"
+        :key="col.key || col.prop || col.type || col.label"
+        :type="col.type"
+        :prop="col.prop"
+        :label="col.label"
+        :width="col.width"
+        :min-width="col.minWidth"
+        :align="col.align"
+        :header-align="col.headerAlign"
+      >
+        <template v-if="col.slot === 'sex'" slot-scope="scope">
           {{ formatSex(scope.row.sex) }}
         </template>
-      </el-table-column>
-      <el-table-column prop="postName" label="岗位" min-width="80" align="center" header-align="center" />
-      <el-table-column prop="happenPerio" label="入行日期" min-width="110" align="center" header-align="center" />
-      <el-table-column prop="telNo" label="联系方式" min-width="130" align="center" header-align="center" />
-      <el-table-column prop="dtlAddr" label="现居住地" min-width="120" align="center" header-align="center" />
-      <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="最高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">
+        <template v-else-if="col.slot === 'operation'" slot-scope="scope">
           <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="onRemove(scope.row)">删除</el-button>
@@ -250,6 +243,22 @@ export default {
           delFlag: "0",
         },
       ],
+      columns: [
+        { key: "index", type: "index", label: "序号", width: 60, align: "center", headerAlign: "center" },
+        { key: "name", prop: "name", label: "人员姓名", minWidth: 100, align: "center", headerAlign: "center" },
+        { key: "sex", label: "性别", width: 80, align: "center", headerAlign: "center", slot: "sex" },
+        { key: "postName", prop: "postName", label: "岗位", minWidth: 80, align: "center", headerAlign: "center" },
+        { key: "happenPerio", prop: "happenPerio", label: "入行日期", minWidth: 110, align: "center", headerAlign: "center" },
+        { key: "telNo", prop: "telNo", label: "联系方式", minWidth: 130, align: "center", headerAlign: "center" },
+        { key: "dtlAddr", prop: "dtlAddr", label: "现居住地", minWidth: 120, align: "center", headerAlign: "center" },
+        { key: "emergContactPersonName", prop: "emergContactPersonName", label: "紧急联系人", minWidth: 100, align: "center", headerAlign: "center" },
+        { key: "emergContactPhoneNo", prop: "emergContactPhoneNo", label: "紧急联系方式", minWidth: 130, align: "center", headerAlign: "center" },
+        { key: "birthDt", prop: "birthDt", label: "出生日期", minWidth: 110, align: "center", headerAlign: "center" },
+        { key: "highestEduDegreeDesc", prop: "highestEduDegreeDesc", label: "最高学历", minWidth: 90, align: "center", headerAlign: "center" },
+        { key: "createTm", prop: "createTm", label: "创建日期", minWidth: 110, align: "center", headerAlign: "center" },
+        { key: "rmk", prop: "rmk", label: "备注", minWidth: 120, align: "center", headerAlign: "center" },
+        { key: "operation", label: "操作", width: 200, align: "center", headerAlign: "center", slot: "operation" },
+      ],
       // 弹窗显隐状态
       dialogVisible: false,
       // 弹窗模式：add 新增 / edit 编辑 / view 查看

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>