改为暗色风格主题

klp-ui/src/assets/styles/btn.scss

@@ -97,3 +97,17 @@
   font-size: 14px;
   border-radius: 2px;
 }
+
+
+.el-table__cell {
+  padding: 0 !important;
+}
+
+.el-table__cell .el-button {
+  padding: 0 !important;
+}
+
+.el-table__cell  + .el-button {
+  margin-left: 4px !important;
+  padding: 0;
+}

klp-ui/src/assets/styles/sidebar.scss

@@ -1,10 +1,16 @@
 #app {
+  // 文本颜色调整为偏黑色系（直接写死值，确保清晰）
+  --text-primary: #1a1a1a;
+  --text-regular: #333333;
+  --text-secondary: #555555;
+  --text-placeholder: #777777;
 
   .main-container {
     height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left .28s, box-shadow .3s ease;
     margin-left: $base-sidebar-width;
     position: relative;
+    background: #1E2227; // 金属浅色渐变
   }
 
   .sidebarHide {
@@ -12,10 +18,11 @@
   }
 
   .sidebar-container {
-    -webkit-transition: width .28s;
+    -webkit-transition: width .28s, background .3s ease;
-    transition: width 0.28s;
+    transition: width 0.28s, background .3s ease;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
+    background: #1E2227; // 金属深色渐变
+    border-right: 1px solid #8d939b;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -24,8 +31,7 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -38,6 +44,12 @@
 
     .el-scrollbar__bar.is-vertical {
       right: 0px;
+      background: rgba(0, 0, 0, 0.05);
+    }
+
+    .el-scrollbar__thumb {
+      background: #1E2227;
+      border-radius: 3px;
     }
 
     .el-scrollbar {
@@ -58,52 +70,84 @@
       display: inline-block;
       width: 100%;
       overflow: hidden;
+      color: var(--text-regular); // 链接文本偏黑
+      text-decoration: none;
     }
 
     .svg-icon {
       margin-right: 16px;
+      color: var(--text-secondary); // 图标颜色稍浅
     }
 
     .el-menu {
       border: none;
       height: 100%;
       width: 100% !important;
+      background: transparent;
     }
 
     .el-menu-item, .el-submenu__title {
+      // 明确默认状态样式（关键修复）
+      background: transparent !important;
+      box-shadow: none !important;
+
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      color: var(--text-regular); // 菜单项文本偏黑
+      border-radius: 4px;
+      margin: 0 6px;
+      transition: all 0.2s ease;
     }
 
-    // menu hover
+    // menu hover - 仅在hover时生效
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background: rgba(255, 255, 255, 0.1) !important;
+        color: var(--text-primary) !important; // hover时文本更深
+        box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
+        inset -1px -1px 2px rgba(255, 255, 255, 0.05);
       }
     }
 
+    // 深色主题下子菜单选中高亮
     & .theme-dark .is-active > .el-submenu__title {
-      color: $base-menu-color-active !important;
+      color: #fff !important; // 选中时文字纯白
-      // border-right: 3px solid $base-menu-color-active !important;
+      // background-color: rgba(95, 123, 160, 0.25) !important; // 工业蓝浅高亮
+      // border-left: 3px solid #5F7BA0; // 左边高亮条
     }
 
-    & .nest-menu .el-submenu>.el-submenu__title,
+    // & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
+      // 子菜单默认样式
+      background: transparent !important;
+      box-shadow: none !important;
+
       min-width: $base-sidebar-width !important;
+      margin: 0 4px;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background: rgba(255, 255, 255, 0.1) !important;
+        color: var(--text-primary) !important;
       }
     }
 
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+    // & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+      background: transparent !important;
+      color: var(--text-regular);
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        background: rgba(255, 255, 255, 0.1) !important;
+        color: var(--text-primary) !important;
+      }
+
+      &.is-active {
+        background: rgba(95, 123, 160, 0.28) !important; // 激活背景
+        color: #fff !important; // 激活文字白色
+        font-weight: 600;
+        border-left: 3px solid #5F7BA0; // 左边高亮条
       }
     }
   }
@@ -139,7 +183,6 @@
         .svg-icon {
           margin-left: 20px;
         }
-
       }
     }
 
@@ -169,8 +212,9 @@
     }
 
     .sidebar-container {
-      transition: transform .28s;
+      transition: transform .28s, box-shadow .3s ease;
       width: $base-sidebar-width !important;
+      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
     }
 
     &.hideSidebar {
@@ -183,7 +227,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -196,14 +239,34 @@
   &>.el-menu {
     .svg-icon {
       margin-right: 16px;
+      color: var(--text-secondary);
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item .nest-menu {
-  .el-menu-item {
+    // 默认样式重置
+    background: transparent !important;
+    box-shadow: none !important;
+
     &:hover {
-      // you can use $subMenuHover
+      background: rgba(255, 255, 255, 0.1) !important;
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      color: var(--text-primary) !important;
+      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.05);
+    }
+
+    ::v-deep &.is-active {
+      background: rgba(95, 123, 160, 0.28) !important; // 工业蓝背景
+      color: #ffffff !important; // 激活文字白色
+      font-weight: 600;
+      border-left: 3px solid #5F7BA0;
+      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.15),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.08);
+    }
+
+    ::v-deep .el-menu-item.is-active span,
+    ::v-deep .el-submenu__title.is-active span {
+      color: #ffffff !important; // 激活文字白色
     }
   }
 
@@ -211,9 +274,12 @@
   >.el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
+    background: linear-gradient(145deg, #b0b5bb, #999ea6);
+    border: 1px solid #8d939b;
+    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
 
     &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
+      background: rgba(0, 0, 0, 0.05);
     }
 
     &::-webkit-scrollbar {
@@ -221,12 +287,13 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
+      background: #8d939b;
-      border-radius: 20px;
+      border-radius: 3px; 
     }
   }
 }
 
-.el-menu-item.is-active {
+#app .sidebar-container .el-menu-item, 
-  border-left: 4px solid !important;
+#app .sidebar-container .el-submenu__title {
+  margin: 0;
 }

klp-ui/src/components/KLPUI/KLPList/index.vue

@@ -257,7 +257,7 @@ export default {
 .klp-list-item {
   padding: 6px 8px;
   margin-bottom: 6px;
-  border-bottom: 1px solid #e6e6e6;
+  border-bottom: 1px solid #111;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
@@ -269,8 +269,8 @@ export default {
 
 /* 列表项选中状态（左侧高亮边框+背景色） */
 .klp-list-item.active {
-  border-left: 3px solid #409eff;
+  border-left: 3px solid #2bf;
-  background-color: #f5f7fa;
+  background-color: #222;
 }
 
 /* 列表标题区域（占满中间空间，让操作按钮靠右） */
@@ -284,7 +284,7 @@ export default {
 
 /* 标题前置标签样式 */
 .klp-list-title .title-label {
-  color: #606266;
+  color: #ddd;
   margin-right: 6px;
   font-size: 13px;
   white-space: nowrap; /* 标签不换行 */
@@ -293,7 +293,7 @@ export default {
 
 /* 标题内容样式（溢出省略） */
 .klp-list-title .title-value {
-  color: #303133;
+  color: #ddd;
   font-weight: 500;
   font-size: 14px;
   white-space: nowrap; /* 禁止换行 */

klp-ui/src/components/KLPUI/KLPTable/ColumnRender.vue

@@ -0,0 +1,23 @@
+<script>
+  export default {
+    name: 'ColumnRender',
+    functional: true,
+    props: {
+      column: {
+        type: Object,
+        required: true
+      },
+      render: {
+        type: Function,
+        required: true
+      },
+      data: {
+        type: Object,
+        required: true
+      }
+    },
+    render(h, { props }) {
+      return props.render(h, props.data);
+    }
+  }
+</script>

klp-ui/src/components/KLPUI/KLPTable/index.vue

@@ -39,6 +39,39 @@
 
       <!-- 3. 透传“自定义列”插槽（业务层直接用 <el-table-column> 嵌套的情况） -->
       <slot v-bind:tableRef="tableRef"></slot>
+
+      <el-table-column
+        v-if="selectionColumn"
+        type="selection"
+        width="55"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        v-if="indexColumn"
+        type="index"
+        width="55"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        v-for="(column, index) in customColumns"
+        v-bind="column"
+        :width="column.width"
+        :prop="column.prop"
+        :align="column.align"
+        :label="column.label"
+        :min-width="column.minWidth"
+        :fixed="column.fixed"
+        :show-overflow-tooltip="column.showOverflowTooltip"
+        :sortable="column.sortable"
+      >
+          <template v-slot="scope">
+            <ColumnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
+            <Eclipse v-else-if="column.eclipse" :text="scope.row[column.prop]"></Eclipse>
+            <span v-else>{{ scope.row[column.prop] }}</span>
+        </template>
+      </el-table-column>
     </el-table>
 
     <!-- 扩展层：可后续统一添加分页（如与 MyPagination 组件联动） -->
@@ -47,8 +80,15 @@
 </template>
 
 <script>
+import ColumnRender from './ColumnRender.vue';  
+import Eclipse from './renderer/eclipse.vue';
+
 export default {
   name: "KLPTable", // 组件名，便于调试和文档生成 
+  components: {
+    ColumnRender,
+    Eclipse
+  },
   props: {
     // 1. 扩展 props：新增原生 Table 没有的属性（如加载状态）
     loading: {
@@ -63,6 +103,18 @@ export default {
     customClass: {
       type: String,
       default: ""
+    },
+    customColumns: {
+      type: Array,
+      default: () => []
+    },
+    selectionColumn: {
+      type: Boolean,
+      default: false
+    },
+    indexColumn: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -71,6 +123,31 @@ export default {
     };
   },
   methods: {
+    // 核心方法：净化scope，移除可能导致循环引用的属性
+    sanitizeScope(scope) {
+      if (!scope) return {};
+      // 只保留安全的属性（根据实际需求调整）
+      const { row, column, $index, store } = scope;
+      // 深拷贝避免引用传递，同时过滤循环引用
+      return this.deepClone({ row, column, $index, store });
+    },
+    // 安全的深拷贝方法（避免JSON.parse/stringify无法处理的类型）
+    deepClone(obj) {
+      if (obj === null || typeof obj !== "object") return obj;
+      if (obj instanceof Date) return new Date(obj);
+      if (obj instanceof RegExp) return new RegExp(obj);
+      
+      // 避免处理Vue实例（通常带有循环引用）
+      if (obj._isVue) return { _isVue: true };
+
+      const clone = Array.isArray(obj) ? [] : {};
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          clone[key] = this.deepClone(obj[key]);
+        }
+      }
+      return clone;
+    },
     // 3. 透传原生 Table 实例方法（如 clearSelection、doLayout 等）
     // 业务层可通过 this.$refs.myTable.xxx() 调用原生方法
     getTableInstance() {

klp-ui/src/components/KLPUI/KLPTable/renderer/eclipse.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="eclipse-container">
+    <el-tooltip :content="text" placement="top" :disabled="text.length < 10">
+      <span class="eclipse">{{ text }}</span>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Eclipse',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+  }
+}
+</script>
+
+<style>
+.eclipse-container {
+  position: relative; /* 为tooltip提供定位参考 */
+  display: inline-block; /* 确保容器只占内容宽度 */
+}
+
+.eclipse {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block; /* 确保元素有明确的尺寸 */
+  max-width: 100%; /* 限制最大宽度，确保溢出效果生效 */
+}
+</style>

klp-ui/src/layout/components/Navbar.vue

@@ -106,24 +106,32 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  // 金属质感渐变背景
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  background: #454c51;
+  border-bottom: 1px solid #8d939b;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 
+              0 1px 1px rgba(255, 255, 255, 0.08) inset;
 
   .hamburger-container {
     line-height: 46px;
     height: 100%;
     float: left;
     cursor: pointer;
-    transition: background .3s;
+    transition: all .3s ease;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
+    padding: 0 15px;
+    border-right: 1px solid rgba(0, 0, 0, 0.05);
 
     &:hover {
-      background: rgba(0, 0, 0, .025)
+      background: rgba(0, 0, 0, 0.05);
+      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
+                  inset -1px -1px 2px rgba(255, 255, 255, 0.05);
     }
   }
 
   .breadcrumb-container {
     float: left;
+    padding-left: 15px;
   }
 
   .topmenu-container {
@@ -147,24 +155,29 @@ export default {
 
     .right-menu-item {
       display: inline-block;
-      padding: 0 8px;
+      padding: 0 12px;
       height: 100%;
       font-size: 18px;
-      color: #5a5e66;
+      // 金属风格文字色
+      color: #ddd;
       vertical-align: text-bottom;
+      transition: all 0.2s ease;
 
       &.hover-effect {
         cursor: pointer;
-        transition: background .3s;
+        position: relative;
 
         &:hover {
-          background: rgba(0, 0, 0, .025)
+          background: rgba(0, 0, 0, 0.05);
+          box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
+                      inset -1px -1px 2px rgba(255, 255, 255, 0.05);
+          color: #333;
         }
       }
     }
 
     .avatar-container {
-      margin-right: 30px;
+      margin-right: 15px;
 
       .avatar-wrapper {
         margin-top: 5px;
@@ -174,15 +187,19 @@ export default {
           cursor: pointer;
           width: 40px;
           height: 40px;
-          border-radius: 10px;
+          border-radius: 8px;
+          // 头像金属边框
+          border: 1px solid #a0a6ad;
+          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
         }
 
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;
-          right: -20px;
+          right: -15px;
           top: 25px;
           font-size: 12px;
+          color: #666;
         }
       }
     }

klp-ui/src/layout/components/TagsView/index.vue

@@ -241,9 +241,11 @@ export default {
 .tags-view-container {
   height: 34px;
   width: 100%;
-  background: #fff;
+  // 金属浅色渐变背景（直接写死渐变值）
-  border-bottom: 1px solid #d8dce5;
+  background: #454c51;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  border-bottom: 1px solid #a0a6ad;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
+  
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -251,39 +253,61 @@ export default {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid #d8dce5;
+      border: 1px solid #a0a6ad;
-      color: #495060;
+      color: #ddd;
-      background: #fff;
+      // 标签金属渐变背景
+      background: #454c51;
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
+      border-radius: 4px;
+      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), 
+                 -1px -1px 2px rgba(255, 255, 255, 0.05);
+      transition: all 0.2s ease;
+      
       &:first-of-type {
         margin-left: 15px;
       }
+      
       &:last-of-type {
         margin-right: 15px;
       }
+      
+      &:hover {
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), 
+                   -1px -1px 2px rgba(255, 255, 255, 0.08);
+        border-color: #8d939b;
+      }
+      
       &.active {
-        background-color: #42b983;
+        // 激活状态主色调渐变
+        background: linear-gradient(145deg, #6b809d, #637994);
         color: #fff;
-        border-color: #42b983;
+        border-color: #5a6d86;
+        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), 
+                   -1px -1px 2px rgba(255, 255, 255, 0.1) inset;
+        
         &::before {
           content: '';
-          background: #fff;
+          background: rgba(255, 255, 255, 0.8);
           display: inline-block;
           width: 8px;
           height: 8px;
           border-radius: 50%;
           position: relative;
           margin-right: 2px;
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
         }
       }
     }
   }
+  
   .contextmenu {
     margin: 0;
-    background: #fff;
+    // 右键菜单金属背景
+    background: #454c51;
+    border: 1px solid #a0a6ad;
     z-index: 3000;
     position: absolute;
     list-style-type: none;
@@ -291,14 +315,19 @@ export default {
     border-radius: 4px;
     font-size: 12px;
     font-weight: 400;
-    color: #333;
+    color: #606266;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15), 
+               -2px -2px 5px rgba(255, 255, 255, 0.08);
+    
     li {
       margin: 0;
       padding: 7px 16px;
       cursor: pointer;
+      transition: all 0.2s ease;
+      
       &:hover {
-        background: #eee;
+        background: rgba(99, 121, 148, 0.15);
+        color: #637994;
       }
     }
   }
@@ -306,9 +335,10 @@ export default {
 </style>
 
 <style lang="scss">
-//reset element css of el-icon-close
+// 重置关闭图标样式
 .tags-view-wrapper {
   .tags-view-item {
+    color: #ddd;
     .el-icon-close {
       width: 16px;
       height: 16px;
@@ -317,13 +347,25 @@ export default {
       text-align: center;
       transition: all .3s cubic-bezier(.645, .045, .355, 1);
       transform-origin: 100% 50%;
+      margin-left: 4px;
+      
       &:before {
         transform: scale(.6);
         display: inline-block;
         vertical-align: -3px;
       }
+      
       &:hover {
-        background-color: #b4bccc;
+        background-color: rgba(0, 0, 0, 0.15);
+        color: #ddd;
+        box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1),
+                    inset -1px -1px 2px rgba(255, 255, 255, 0.05);
+      }
+    }
+    
+    &.active {
+      .el-icon-close:hover {
+        background-color: rgba(255, 255, 255, 0.2);
         color: #fff;
       }
     }

klp-ui/src/views/index.vue

@@ -33,7 +33,6 @@
 </template>
 
 <script>
-import * as echarts from 'echarts';
 import AllApplications from '@/views/components/AllApplications.vue';
 import OrderDashboard from '@/views/components/OrderDashboard.vue';
 import FlowTable from '@/views/components/FlowTable.vue';

klp-ui/src/views/wms/order/customer.vue

@@ -75,9 +75,9 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <KLPTable v-loading="loading" :data="customerList" @selection-change="handleSelectionChange">
+    <KLPTable v-loading="loading" :data="customerList" @selection-change="handleSelectionChange" :customColumns="customColumns">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="编号，主键自增" align="center" prop="customerId" v-if="false"/>
+      <!-- <el-table-column label="编号，主键自增" align="center" prop="customerId" v-if="false"/>
       <el-table-column label="客户名称" align="center" prop="name" />
       <el-table-column label="手机" align="center" prop="mobile" />
       <el-table-column label="电话" align="center" prop="telephone" />
@@ -108,7 +108,7 @@
             @click="handleDelete(scope.row)"
           >删除</el-button>
         </template>
-      </el-table-column>
+      </el-table-column> -->
     </KLPTable>
 
     <pagination
@@ -183,6 +183,64 @@ export default {
   },
   data() {
     return {
+      customColumns: [
+        {
+          label: '客户名称',
+          prop: 'name'
+        },
+        {
+          label: '手机',
+          prop: 'mobile'
+        },
+        {
+          label: '电话',
+          prop: 'telephone'
+        },
+        {
+          label: 'QQ',
+          prop: 'qq'
+        },
+        {
+          label: '微信',
+          prop: 'wechat'
+        },
+        {
+          label: '邮箱',
+          prop: 'email'
+        },
+        {
+          label: '地区编号',
+          prop: 'areaId'
+        },
+        {
+          label: '详细地址',
+          prop: 'detailAddress',
+          eclipse: true
+        },
+        {
+          label: '客户等级',
+          prop: 'level'
+        },
+        {
+          label: '客户来源',
+          prop: 'source'
+        },
+        {
+          label: '备注',
+          prop: 'remark'
+        },
+        {
+          label: '操作',
+          width: 150,
+          fixed: 'right',
+          render: (h, row) => {
+            const actions = [];
+            actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
+            return actions;
+          }
+        }
+      ],
       // 按钮loading
       buttonLoading: false,
       // 遮罩层

klp-ui/src/views/wms/rxgood/detail.vue

@@ -91,55 +91,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <KLPTable v-loading="loading" :data="reportDetailList" @selection-change="handleSelectionChange">
+    <KLPTable v-loading="loading" :data="reportDetailList" @selection-change="handleSelectionChange" :selectionColumn="true" :indexColumn="true" :customColumns="customColumns" />
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" align="center" type="index" v-if="true"/>
-      <!-- <el-table-column label="关联汇报概述ID" align="center" prop="summaryId" /> -->
-      <el-table-column label="货物编号" align="center" prop="deviceCode" />
-      <el-table-column label="货物类别" align="center" prop="category" />
-      <el-table-column label="货物说明" align="center" prop="deviceDescription" />
-      <el-table-column label="收发货详情" align="center" prop="reportDetail" />
-      <el-table-column label="图片概况" align="center" prop="ossIds" width="100">
-        <template slot-scope="scope">
-          <image-preview :src="scope.row.images" :width="50" :height="50"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handleImageDetail(scope.row)"
-          >图片详情</el-button>
-
-
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleAddExpress(scope.row)"
-          >发货</el-button>
-
-
-
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </KLPTable>
 
     <pagination
       v-show="total>0"
@@ -253,6 +205,60 @@ export default {
   components: {UserSelect},
   data() {
     return {
+      customColumns: [
+        {
+          label: '关联汇报概述ID',
+          prop: 'summaryId',
+          width: 180,
+        },
+        {
+          label: '货物编号',
+          prop: 'deviceCode',
+          width: 180,
+        },
+        {
+          label: '货物类别',
+          prop: 'category',
+          width: 180,
+        },
+        {
+          label: '货物说明',
+          prop: 'deviceDescription',
+          width: 180,
+        },        
+        {
+          label: '收发货详情',
+          prop: 'reportDetail',
+          width: 180,
+        },
+        {
+          label: '图片概况',
+          prop: 'ossIds',
+          width: 100,
+          render: (h, row) => {
+            return <image-preview src={row.images} width={50} height={50} />
+          }
+        },
+        {
+          label: '备注',
+          prop: 'remark',
+          width: 180,
+          eclipse: true
+        },
+        {
+          label: '操作',
+          width: 150,
+          fixed: 'right',
+          render: (h, row) => {
+            const actions = [];
+            actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-view" onClick={() => this.handleImageDetail(row)}>图片详情</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleAddExpress(row)}>发货</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
+            return actions;
+          }
+        }
+      ],
       // 按钮loading
       buttonLoading: false,
       expressOpen:false,

klp-ui/src/views/wms/rxgood/index.vue

@@ -85,44 +85,7 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <KLPTable v-loading="loading" :data="reportSummaryList" @selection-change="handleSelectionChange">
+    <KLPTable v-loading="loading" :data="reportSummaryList" @selection-change="handleSelectionChange" :selectionColumn="true" :indexColumn="true" :customColumns="customColumns" />
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="序号" align="center" type="index" v-if="true"/>
-      <el-table-column label="收发货标题" align="center" prop="reportTitle">
-        <template slot-scope="scope">
-          <router-link class="link-type" :to="'/exp/rx/detail/' + scope.row.summaryId">{{ scope.row.reportTitle }}</router-link>
-        </template>
-      </el-table-column>
-      <el-table-column label="最近汇报时间" align="center" prop="lastUpdateTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.lastUpdateTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="收发货日期" align="center" prop="reportDate" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.reportDate, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="经办人" align="center" prop="reporter" />
-<!--      <el-table-column label="涉及项目" align="center" prop="projectName" />-->
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </KLPTable>
 
     <pagination
       v-show="total>0"
@@ -182,6 +145,53 @@ export default {
   name: "ReportSummary",
   data() {
     return {
+      customColumns: [
+        {
+          label: '收发货标题',
+          prop: 'reportTitle',
+          render: (h, row) => {
+            return <router-link class="link-type" to={'/exp/rx/detail/' + row.summaryId}>{row.reportTitle}</router-link>
+          }
+        },
+        {
+          label: '最近汇报时间',
+          prop: 'lastUpdateTime',
+          width: 180,
+          render: (h, row) => {
+            return <span>{this.parseTime(row.lastUpdateTime, '{y}-{m}-{d}')}</span>
+          }
+        },
+        {
+          label: '收发货日期',
+          prop: 'reportDate',
+          width: 180,
+          render: (h, row) => {
+            return <span>{this.parseTime(row.reportDate, '{y}-{m}-{d}')}</span>
+          }
+        },
+        {
+          label: '经办人',
+          prop: 'reporter',
+          width: 180,
+        },
+        {
+          label: '备注',
+          prop: 'remark',
+          width: 180,
+          eclipse: true
+        },
+        {
+          label: '操作',
+          width: 150,
+          fixed: 'right',
+          render: (h, row) => {
+            const actions = [];
+            actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
+            return actions;
+          }
+        }
+      ],
       // projectList: [],
       // 按钮loading
       buttonLoading: false,