diff --git a/klp-ui/package.json b/klp-ui/package.json
index 4946dbd0..e3a14843 100644
--- a/klp-ui/package.json
+++ b/klp-ui/package.json
@@ -53,6 +53,7 @@
     "js-cookie": "3.0.1",
     "jsbarcode": "^3.12.1",
     "jsencrypt": "3.0.0-rc.1",
+    "konva": "^10.0.2",
     "mqtt": "^5.13.3",
     "nprogress": "0.2.0",
     "print-js": "^1.6.0",
@@ -66,6 +67,7 @@
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-flv-player": "^1.0.3",
+    "vue-konva": "^2.1.7",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
diff --git a/klp-ui/src/api/l2/track.js b/klp-ui/src/api/l2/track.js
new file mode 100644
index 00000000..94cf383c
--- /dev/null
+++ b/klp-ui/src/api/l2/track.js
@@ -0,0 +1,95 @@
+import axios from 'axios'
+
+export default function createFetch(url) {
+  const l2Request = axios.create({
+    baseURL: url,
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    timeout: 10000
+  })
+
+  l2Request.interceptors.response.use(response => {
+    return response.data
+  })
+
+  return {
+    adjustPosition: (data) => l2Request({
+      method: 'put',
+      url: '/api/track/position',
+      data
+    }),
+    operateMat: (data) => l2Request({
+      method: 'put',
+      url: '/api/track/manual/operate/mat',
+      data
+    }),
+    getBackData: (params) => l2Request({
+      method: 'get',
+      url: '/api/track/return/info',
+      params
+    }),
+    getTrackMatPosition: () => l2Request({
+      method: 'get',
+      url: '/api/track/coil/position',
+    })
+  }
+}
+/**
+ * 手动调整钢卷位置
+ * data.targetPos 目标位置 必须
+ * data.currentPos 当前位置 必须
+ */
+export function adjustPosition(data) {
+  return l2Request({
+    method: 'put',
+    url: '/api/track/position',
+    data
+  })
+}
+
+/**
+ * 手动操作钢卷
+ * {
+      "porIdx": 0, // 必须
+      "trIdx": 0, // 必须
+      "planId": "", // 必须
+      "entryMatId": "", // 必须
+      "planNo": "", // 必须
+      "operation": "", // 必须
+      "returnMatId": "", // 必须
+      "returnWeight": 0, // 必须
+      "returnRemark": "", // 必须
+      "coilLength": 0 // 必须
+    }
+ */
+export function operateMat(data) {
+  return l2Request({
+    method: 'put',
+    url: '/api/track/manual/operate/mat',
+    data
+  })
+}
+
+/**
+ * 获取回退数据
+ * params.posIdx 必须
+ */
+export function getBackData(params) {
+  return l2Request({
+    method: 'get',
+    url: '/api/track/return/info',
+    params
+  })
+}
+
+/**
+ * 获取跟踪带钢位置
+ */
+export function getTrackMatPosition() {
+  return l2Request({
+    method: 'get',
+    url: '/api/track/coil/position',
+  })
+}
+
diff --git a/klp-ui/src/components/KLPUI/KLPList/index.vue b/klp-ui/src/components/KLPUI/KLPList/index.vue
index 50dcaa09..74a81b5c 100644
--- a/klp-ui/src/components/KLPUI/KLPList/index.vue
+++ b/klp-ui/src/components/KLPUI/KLPList/index.vue
@@ -1,35 +1,103 @@
 <template>
   <div class="klp-list-container">
-    <!-- 列表加载状态 -->
+    <!-- 列表加载状态（Element UI Vue2 支持 v-loading 指令） -->
     <div v-loading="loading" class="list-loading-wrapper">
-      <!-- 列表项渲染 -->
+      <!-- 列表项渲染（分两行布局） -->
       <div 
         v-for="(item, index) in listData" 
         :key="item[listKey] || index" 
         class="klp-list-item"
-        :class="{ 'active': isSelected(item) }"
-        @click.stop="handleItemClick(item)" 
+        :class="{ 'active': isSelected(item) }" 
+        @click.stop="handleItemClick(item)"
       >
-        <!-- 列表标题区域 - 文字溢出省略+Tooltip -->
-        <div class="klp-list-title">
-          <span class="title-label">{{ titleLabel }}：</span>
-          <el-tooltip 
-            :content="item[titleField]" 
-            placement="top"
-            :disabled="!isContentOverflow(item)"
-            effect="light"
-          >
-            <span class="title-value">{{ item[titleField] }}</span>
-          </el-tooltip>
-        </div>  
+        <!-- 核心内容区：分两行展示6个信息位 -->
+        <div class="klp-list-content">
+          <!-- 第一行：主标题 + 副标题 + 状态（info1~info3） -->
+          <div class="klp-list-row klp-list-row1" :style="{ gap: `${rowGap}px` }">
+            <!-- 信息位1：主标题（保留原Tooltip溢出检测） -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info1', item)">
+              <slot name="info1" :item="item" :isSelected="isSelected(item)">
+                <!-- Vue2 作用域插槽后备内容需用 template + slot-scope 包裹 -->
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info1Label">{{ info1Label }}：</span>
+                  <el-tooltip 
+                    :content="item[info1Field]" 
+                    placement="top" 
+                    :disabled="!isContentOverflow(item, 'info1')"
+                    effect="light"
+                  >
+                    <span class="info-value info-value--primary">{{ item[info1Field] }}</span>
+                  </el-tooltip>
+                </template>
+              </slot>
+            </div>
 
-        <!-- 右侧操作按钮组 -->
+            <!-- 信息位2：副标题 -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info2', item)">
+              <slot name="info2" :item="item" :isSelected="isSelected(item)">
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info2Label">{{ info2Label }}：</span>
+                  <span class="info-value">{{ item[info2Field] }}</span>
+                </template>
+              </slot>
+            </div>
+
+            <!-- 信息位3：状态（常用插槽自定义，如标签） -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info3', item)">
+              <slot name="info3" :item="item" :isSelected="isSelected(item)">
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info3Label">{{ info3Label }}：</span>
+                  <span class="info-value">{{ item[info3Field] }}</span>
+                </template>
+              </slot>
+            </div>
+          </div>
+
+          <!-- 第二行：时间 + 数量 + 备注（info4~info6） -->
+          <div class="klp-list-row klp-list-row2" :style="{ gap: `${rowGap}px`, marginBottom: `${rowMarginBottom}px` }">
+            <!-- 信息位4：时间 -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info4', item)">
+              <slot name="info4" :item="item" :isSelected="isSelected(item)">
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info4Label">{{ info4Label }}：</span>
+                  <span class="info-value">{{ item[info4Field] }}</span>
+                </template>
+              </slot>
+            </div>
+
+            <!-- 信息位5：数量/金额 -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info5', item)">
+              <slot name="info5" :item="item" :isSelected="isSelected(item)">
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info5Label">{{ info5Label }}：</span>
+                  <span class="info-value">{{ item[info5Field] }}</span>
+                </template>
+              </slot>
+            </div>
+
+            <!-- 信息位6：备注 -->
+            <div class="klp-list-info-item" v-if="showInfoItem('info6', item)">
+              <slot name="info6" :item="item" :isSelected="isSelected(item)">
+                <template slot-scope="{ item, isSelected }">
+                  <span class="info-label" v-if="info6Label">{{ info6Label }}：</span>
+                  <span class="info-value">{{ item[info6Field] }}</span>
+                </template>
+              </slot>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧操作按钮组（位置不变） -->
         <div class="klp-list-actions">
-          <slot name="actions" :item="item" :isSelected="isSelected(item)"></slot>
+          <slot name="actions" :item="item" :isSelected="isSelected(item)">
+            <template slot-scope="{ item, isSelected }">
+              <!-- 操作栏后备内容（若父组件未提供则显示空） -->
+            </template>
+          </slot>
         </div>
       </div>
 
-      <!-- 空状态提示 -->
+      <!-- 空状态提示（Vue2 需显式注册 ElEmpty 组件） -->
       <div v-if="listData.length === 0 && !loading" class="klp-list-empty">
         <el-empty description="暂无数据" />
       </div>
@@ -38,37 +106,26 @@
 </template>
 
 <script>
+// Vue2 需显式引入 Element UI 组件
+import { ElTooltip, ElEmpty } from 'element-ui';
+
 export default {
   name: "KLPList",
-  components: {},
+  // 注册引入的 Element 组件
+  components: { ElTooltip, ElEmpty },
   props: {
+    // ---------------------- 原有核心Props（保留） ----------------------
     /** 列表数据源（必传） */
     listData: {
       type: Array,
       required: true,
       default: () => []
     },
-
-    /** 列表项唯一标识字段（必传，如orderId、id） */
+    /** 列表项唯一标识字段（必传） */
     listKey: {
       type: String,
       required: true
     },
-
-    /** 列表标题前置标签（如"订单编号："） */
-    titleLabel: {
-      type: String,
-      required: true,
-      default: "标题"
-    },
-
-    /** 列表项标题对应的字段名（如orderCode、name） */
-    titleField: {
-      type: String,
-      required: true,
-      default: "title"
-    },
-
     /** 列表加载状态 */
     loading: {
       type: Boolean,
@@ -76,67 +133,128 @@ export default {
       default: false
     },
 
-    /** 标题最大宽度占容器的百分比（0-100），控制文字溢出 */
-    titleMaxPercent: {
+    // ---------------------- 新增：6个信息位配置 ----------------------
+    // 信息位1（主标题，兼容原titleField）
+    info1Field: {
+      type: String,
+      required: false,
+      default: "title" // 默认对应原titleField
+    },
+    info1Label: {
+      type: String,
+      required: false,
+      default: "" // 兼容原titleLabel
+    },
+    // 信息位2（副标题）
+    info2Field: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    info2Label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    // 信息位3（状态）
+    info3Field: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    info3Label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    // 信息位4（时间）
+    info4Field: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    info4Label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    // 信息位5（数量/金额）
+    info5Field: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    info5Label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    // 信息位6（备注）
+    info6Field: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    info6Label: {
+      type: String,
+      required: false,
+      default: ""
+    },
+
+    // ---------------------- 新增：样式控制Props ----------------------
+    /** 每行内部信息位的间距（px） */
+    rowGap: {
       type: Number,
       required: false,
-      default: 80 // 默认占容器80%宽度
+      default: 16 // 默认间距16px
+    },
+    /** 两行之间的垂直间距（px） */
+    rowMarginBottom: {
+      type: Number,
+      required: false,
+      default: 4 // 默认4px
+    },
+    /** 主标题最大宽度占内容区的百分比（控制溢出） */
+    info1MaxPercent: {
+      type: Number,
+      required: false,
+      default: 60 // 主标题占比下调，给其他信息位留空间
     }
   },
   data() {
     return {
-      // 内部管理选中状态：存储当前选中项的唯一键值（单选中）
-      selectedKey: null,
-      // 文字溢出检测临时元素（避免重复创建）
-      overflowCheckElements: {},
-      // 容器宽度缓存
-      containerWidth: 0
+      selectedKey: null, // 选中状态（不变）
+      overflowCheckElements: {}, // 溢出检测临时元素（不变）
+      containerWidth: 0 // 容器宽度缓存（不变）
     };
   },
   methods: {
-    /**
-     * 判断当前列表项是否被选中
-     * @param {Object} item - 列表项数据
-     * @returns {Boolean} 选中状态
-     */
+    // ---------------------- 原有核心方法（保留+微调） ----------------------
+    /** 判断列表项是否选中（不变） */
     isSelected(item) {
       const itemKey = item[this.listKey];
       return this.selectedKey === itemKey;
     },
 
-    /**
-     * 列表项点击事件：切换选中状态（单选中逻辑）
-     * @param {Object} item - 点击的列表项数据
-     */
+    /** 列表项点击事件（不变） */
     handleItemClick(item) {
-      const itemKey = item[this.listKey]; 
-      // 单选中逻辑：点击已选中项取消选中，点击未选中项切换选中（取消其他项）
-      // this.selectedKey = this.selectedKey === itemKey ? null : itemKey;
+      const itemKey = item[this.listKey];
       this.selectedKey = itemKey;
-      
-      // 向父组件触发事件：传递当前选中项（null表示无选中）
       const selectedItem = this.selectedKey ? item : null;
       this.$emit("item-click", selectedItem, item);
     },
 
-    /**
-     * 清空选中状态（支持父组件通过ref调用）
-     */
+    /** 清空选中状态（不变） */
     clearSelection() {
       this.selectedKey = null;
-      // 触发清空选中事件
       this.$emit("selection-cleared");
     },
 
-    /**
-     * 主动设置选中项（支持父组件通过ref调用）
-     * @param {String/Number} targetKey - 要选中项的唯一键值
-     */
+    /** 主动设置选中项（不变） */
     setSelection(targetKey) {
       const isExist = this.listData.some(item => item[this.listKey] === targetKey);
       if (isExist) {
         this.selectedKey = targetKey;
-        // 触发选中事件
         const selectedItem = this.listData.find(item => item[this.listKey] === targetKey);
         this.$emit("item-click", selectedItem);
       } else {
@@ -145,31 +263,58 @@ export default {
       }
     },
 
+    // ---------------------- 新增：信息位控制方法（适配Vue2插槽） ----------------------
     /**
-     * 判断文字是否溢出（控制Tooltip显示/隐藏）
+     * 判断信息位是否需要显示（插槽存在 或 字段有值）
+     * @param {String} infoKey - 信息位标识（info1~info6）
      * @param {Object} item - 列表项数据
+     * @returns {Boolean} 是否显示
+     */
+    showInfoItem(infoKey, item) {
+      // 前置容错：避免item为undefined导致报错
+      if (!item) return false;
+
+      // Vue2 作用域插槽判断：$scopedSlots 中插槽以函数形式存在
+      const hasSlot = typeof this.$scopedSlots[infoKey] === 'function';
+      if (hasSlot) return true;
+
+      // 2. 无插槽时，判断字段配置是否存在 + 字段值是否有效
+      const field = this[`${infoKey}Field`];
+      // 容错：字段未配置（如没传info1Field）则不显示
+      if (!field) return false;
+      // 字段值有效判断（排除 undefined/null/空字符串）
+      return item[field] !== undefined && item[field] !== null && item[field] !== "";
+    },
+
+    /**
+     * 信息位1（主标题）溢出检测（适配新字段）
+     * @param {Object} item - 列表项数据
+     * @param {String} infoKey - 信息位标识（仅info1需要）
      * @returns {Boolean} 是否溢出
      */
-    isContentOverflow(item) {
+    isContentOverflow(item, infoKey) {
       const itemKey = item[this.listKey];
-      const content = item[this.titleField] || "";
+      const field = this[`${infoKey}Field`];
+      const content = item[field] || "";
 
-      // 内容为空时不显示Tooltip
-      if (!content) return false;
+      // 内容为空或无字段时不显示Tooltip
+      if (!content || !field) return false;
 
-       // 获取容器宽度并增加存在性检查
-      const container = this.$el.querySelector('.klp-list-container');
-      if (!container) return false; // 容器不存在时直接返回
-      this.containerWidth = container.clientWidth;
-      
-      // 计算标题内容最大可用宽度（减去标签和边距）
-      const labelWidth = this.$el.querySelector('.title-label')?.offsetWidth || 60;
-      const availableWidth = (this.containerWidth * this.titleMaxPercent / 100) - labelWidth - 20;
+      // 获取内容区宽度（原容器宽度改为内容区宽度）
+      // 注意：listData.indexOf(item) 可能因重复项导致索引错误，建议确保listData唯一
+      const itemIndex = this.listData.indexOf(item);
+      const contentEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .klp-list-content`);
+      if (!contentEl) return false;
+      const contentWidth = contentEl.clientWidth;
 
-      // 创建临时元素测量文字实际宽度（复用元素避免性能问题）
+      // 计算信息位1的最大可用宽度（减去标签宽度）
+      const labelEl = this.$el.querySelector(`.klp-list-item:nth-child(${itemIndex + 1}) .info-label`);
+      const labelWidth = labelEl ? labelEl.offsetWidth : 40;
+      const maxWidth = (contentWidth * this.info1MaxPercent) / 100 - labelWidth - 12;
+
+      // 复用临时元素检测宽度（不变）
       if (!this.overflowCheckElements[itemKey]) {
         const tempEl = document.createElement("span");
-        // 复制title-value的样式（确保测量准确）
         tempEl.style.cssText = `
           visibility: hidden;
           position: absolute;
@@ -183,26 +328,21 @@ export default {
         this.overflowCheckElements[itemKey] = tempEl;
       }
 
-      // 比较文字实际宽度与可用宽度
       const tempEl = this.overflowCheckElements[itemKey];
-      return tempEl.offsetWidth > availableWidth;
+      return tempEl.offsetWidth > maxWidth;
     },
 
-    /**
-     * 监听容器宽度变化
-     */
+    /** 窗口 resize 重新计算（不变） */
     handleResize() {
-      // 宽度变化时重新计算溢出状态
       this.$forceUpdate();
     }
   },
   watch: {
-    /** 列表数据变化时，重置选中状态和溢出检测元素 */
+    /** 列表数据变化时清理临时元素（不变） */
     listData: {
       deep: true,
       handler() {
         this.clearSelection();
-        // 清理临时测量元素
         Object.values(this.overflowCheckElements).forEach(el => {
           document.body.removeChild(el);
         });
@@ -210,112 +350,139 @@ export default {
       }
     },
 
-    /** 标题最大百分比变化时，重新计算溢出 */
-    titleMaxPercent() {
+    /** 主标题占比变化时重新计算溢出（适配新prop） */
+    info1MaxPercent() {
       this.$forceUpdate();
     }
   },
   mounted() {
+    // 初始化内容区宽度（适配新结构）
     this.$nextTick(() => {
-    const container = this.$el.querySelector('.klp-list-container');
-      // 增加存在性检查
-      this.containerWidth = container ? container.clientWidth : 0;
+      const contentEl = this.$el.querySelector('.klp-list-content');
+      this.containerWidth = contentEl ? contentEl.clientWidth : 0;
     });
-    
-    // 监听窗口大小变化
     window.addEventListener('resize', this.handleResize);
   },
+  // Vue2 销毁钩子：beforeDestroy（Vue3为onBeforeUnmount）
   beforeDestroy() {
-    // 清理临时元素
+    // 清理临时元素和事件监听（不变）
     Object.values(this.overflowCheckElements).forEach(el => {
       document.body.removeChild(el);
     });
-    
-    // 移除事件监听
     window.removeEventListener('resize', this.handleResize);
   }
 };
 </script>
 
 <style scoped>
-/* 列表容器基础样式 */
+/* 列表容器（不变） */
 .klp-list-container {
   max-height: calc(100vh - 220px);
   overflow-y: auto;
   padding-right: 8px;
   margin-top: 10px;
-  width: 100%; /* 确保容器宽度正确计算 */
+  width: 100%;
   box-sizing: border-box;
 }
 
-/* 加载状态容器（避免加载时容器塌陷） */
+/* 加载容器（不变） */
 .list-loading-wrapper {
   min-height: 100px;
 }
 
-/* 列表项样式 */
+/* 列表项：改为上下两行+右侧操作的布局 */
 .klp-list-item {
-  padding: 6px 8px;
-  margin-bottom: 6px;
-  border-bottom: 1px solid #111;
+  padding: 10px 12px;
+  /* 增加内边距，适配两行 */
+  margin-bottom: 8px;
+  border-bottom: 1px solid #f5f7fa;
+  /* 弱化底边框，突出选中态 */
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
+  align-items: flex-start;
+  /* 顶部对齐，避免操作区下移 */
   justify-content: space-between;
-  align-items: center;
   box-sizing: border-box;
-  width: 100%; /* 确保列表项占满容器宽度 */
+  width: 100%;
+  background-color: #fafafa;
+  /* 未选中时浅背景，区分选中态 */
 }
 
-/* 列表项选中状态（左侧高亮边框+背景色） */
+/* 列表项选中状态（不变） */
 .klp-list-item.active {
   border-left: 3px solid #2bf;
-  /* background-color: #fff; */
+  background-color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  /* 增加轻微阴影，突出选中项 */
 }
 
-/* 列表标题区域（占满中间空间，让操作按钮靠右） */
-.klp-list-title {
+/* 内容区：包裹两行信息位，占满剩余空间 */
+.klp-list-content {
+  flex: 1;
+  min-width: 0;
+  /* 关键：允许内容区缩小，避免溢出 */
+  display: flex;
+  flex-direction: column;
+}
+
+/* 行容器：控制单行信息位布局 */
+.klp-list-row {
   display: flex;
   align-items: center;
-  flex: 1;
-  min-width: 0; /* 关键：允许flex项缩小到内容尺寸以下 */
-  overflow: hidden; /* 确保内容不会超出容器 */
+  flex-wrap: nowrap;
+  /* 禁止换行，溢出省略 */
+  overflow: hidden;
+  /* 隐藏超出行的内容 */
 }
 
-/* 标题前置标签样式 */
-.klp-list-title .title-label {
-  color: #111;
-  margin-right: 6px;
-  font-size: 13px;
-  white-space: nowrap; /* 标签不换行 */
-  flex-shrink: 0; /* 标签不缩小 */
+/* 信息位容器：单个信息的最小单元 */
+.klp-list-info-item {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  /* 禁止信息位内部换行 */
 }
 
-/* 标题内容样式（溢出省略） */
-.klp-list-title .title-value {
-  color: #111;
-  font-weight: 500;
+/* 信息位标签：次要文字，颜色偏浅 */
+.info-label {
+  color: #606266;
+  font-size: 12px;
+  margin-right: 4px;
+  white-space: nowrap;
+}
+
+/* 信息位值：默认样式 */
+.info-value {
+  color: #303133;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* 溢出显示省略号 */
+}
+
+/* 主标题（info1）值：加粗突出 */
+.info-value--primary {
   font-size: 14px;
-  white-space: nowrap; /* 禁止换行 */
-  overflow: hidden; /* 超出部分隐藏 */
-  text-overflow: ellipsis; /* 超出部分显示省略号 */
-  flex: 1; /* 占据剩余空间 */
-  min-width: 0; /* 关键：允许内容区域缩小 */
+  font-weight: 500;
 }
 
-/* 操作按钮组（按钮间距控制） */
+/* 右侧操作区（不变，增加顶部对齐） */
 .klp-list-actions {
   display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0; /* 操作区不缩小 */
-  margin-left: 8px;
+  align-items: flex-start;
+  /* 与内容区顶部对齐 */
+  gap: 6px;
+  flex-shrink: 0;
+  margin-left: 12px;
+  padding-top: 2px;
+  /* 微调垂直位置 */
 }
 
-/* 空状态样式（居中显示） */
+/* 空状态（不变） */
 .klp-list-empty {
   padding: 40px 0;
   text-align: center;
 }
-</style>
-    
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/layout/components/Navbar.vue b/klp-ui/src/layout/components/Navbar.vue
index 65c9bc08..0c95c3a0 100644
--- a/klp-ui/src/layout/components/Navbar.vue
+++ b/klp-ui/src/layout/components/Navbar.vue
@@ -159,7 +159,7 @@ export default {
       height: 100%;
       font-size: 18px;
       // 金属风格文字色
-      color: #ddd;
+      color: #111;
       vertical-align: text-bottom;
       transition: all 0.2s ease;
 
diff --git a/klp-ui/src/main.js b/klp-ui/src/main.js
index 5c8dc618..22397bec 100644
--- a/klp-ui/src/main.js
+++ b/klp-ui/src/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 
 import Cookies from 'js-cookie'
+import VueKonva from 'vue-konva';
 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
@@ -67,6 +68,7 @@ Vue.use(vueFlvPlayer)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(VueKonva);
 DictData.install()
 
 /**
diff --git a/klp-ui/src/views/finance/components/PayTable.vue b/klp-ui/src/views/finance/components/PayTable.vue
new file mode 100644
index 00000000..6c1f7c98
--- /dev/null
+++ b/klp-ui/src/views/finance/components/PayTable.vue
@@ -0,0 +1,394 @@
+<template>
+  <div>
+    <el-form v-if="searchable" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="供应商" prop="supplierId">
+        <VendorSelect v-model="queryParams.supplierId" />
+      </el-form-item>
+      <el-form-item label="订单编号" prop="orderCode">
+        <el-input
+          v-model="queryParams.orderCode"
+          placeholder="请输入订单ID"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="到期日" prop="dueDate">
+        <el-date-picker clearable
+          v-model="queryParams.dueDate"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择到期日">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-if="searchable" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <KLPTable v-loading="loading" :data="payableList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="应付ID" align="center" prop="payableId" v-if="false"/>
+      <el-table-column label="供应商" align="center" prop="supplierName" />
+      <el-table-column label="订单ID" align="center" prop="orderId" />
+      <el-table-column label="到期日" align="center" prop="dueDate" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
+          <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
+          <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="应付金额" align="center" prop="amount" />
+      <el-table-column label="已付金额" align="center" prop="paidAmount" />
+      <el-table-column label="未付金额" align="center" prop="balanceAmount" />
+      <el-table-column label="状态" align="center" prop="status" />
+      <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>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-money"
+            @click="handlePay(scope.row)"
+          >付款</el-button>
+        </template>
+      </el-table-column>
+    </KLPTable>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改应付款管理（宽松版）对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="供应商ID" prop="supplierId">
+          <VendorSelect v-model="form.supplierId" />
+        </el-form-item>
+        <el-form-item label="订单ID" prop="orderId">
+          <el-input v-model="form.orderId" placeholder="请输入订单ID" />
+        </el-form-item>
+        <el-form-item label="到期日" prop="dueDate">
+          <el-date-picker clearable
+            v-model="form.dueDate"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择到期日">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="应付金额" prop="amount">
+          <el-input v-model="form.amount" placeholder="请输入应付金额" />
+        </el-form-item>
+        <el-form-item label="已付金额" prop="paidAmount">
+          <el-input v-model="form.paidAmount" disabled placeholder="请输入已付金额" />
+        </el-form-item>
+        <!-- <el-form-item label="未付金额" prop="balanceAmount">
+          <el-input v-model="form.balanceAmount" placeholder="请输入未付金额" />
+        </el-form-item> -->
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="付款" :visible.sync="payOpen" width="500px" append-to-body>
+      <el-form ref="payForm" :model="payForm" :rules="rules" label-width="80px">
+        <el-form-item label="付款金额" prop="amount">
+          <el-input-number :controls=false controls-position="right" v-model="payForm.amount" :step="1.00" :precision="2" placeholder="请输入付款金额" :min="0" :max="payForm.balanceAmount" style="width: 100%;"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitPayForm">确 定</el-button>
+        <el-button @click="cancelPay">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listPayable, getPayable, delPayable, addPayable, updatePayable, updatePaidAmount } from "@/api/finance/payable";
+import VendorSelect from '@/components/KLPService/VendorSelect/index.vue';
+
+export default {
+  name: "Payable",
+  components: {
+    VendorSelect
+  },
+  props: {
+    searchable: {
+      type: Boolean,
+      default: true
+    },
+    orderId: {
+      type: String,
+      default: undefined
+    }
+  },
+  watch: {
+    orderId: {
+      handler(newVal) {
+        if (newVal) {
+          this.queryParams.orderId = newVal;
+          this.getList();
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 应付款管理（宽松版）表格数据
+      payableList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        supplierId: undefined,
+        orderCode: undefined,
+        dueDate: undefined,
+        amount: undefined,
+        paidAmount: undefined,
+        balanceAmount: undefined,
+        status: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      // 付款表单参数
+      payForm: {},
+      // 是否显示付款弹出层
+      payOpen: false
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询应付款管理（宽松版）列表 */
+    getList() {
+      this.loading = true;
+      listPayable(this.queryParams).then(response => {
+        this.payableList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        payableId: undefined,
+        supplierId: undefined,
+        orderId: this.orderId,
+        dueDate: undefined,
+        amount: undefined,
+        paidAmount: 0,
+        balanceAmount: undefined,
+        status: undefined,
+        delFlag: undefined,
+        remark: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.payableId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加应付款管理（宽松版）";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const payableId = row.payableId || this.ids
+      getPayable(payableId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改应付款管理（宽松版）";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.payableId != null) {
+            const {balanceAmount, ...payload} = this.form;
+            updatePayable(payload).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addPayable(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const payableIds = row.payableId || this.ids;
+      this.$modal.confirm('是否确认删除应付款管理（宽松版）编号为"' + payableIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delPayable(payableIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('klp/payable/export', {
+        ...this.queryParams
+      }, `payable_${new Date().getTime()}.xlsx`)
+    },
+    // 付款按钮操作
+    handlePay(row) {
+      this.payForm = {
+        payableId: row.payableId,
+        amount: row.balanceAmount,
+        balanceAmount: row.balanceAmount
+      };
+      this.payOpen = true;
+    },
+    // 取消付款按钮操作
+    cancelPay() {
+      this.payOpen = false;
+      this.payForm = {};
+    },
+    submitPayForm() {
+      const payload = {
+        payableId: this.payForm.payableId,
+        paidAmount: this.payForm.amount
+      }
+      this.buttonLoading = true;
+      updatePaidAmount(payload).then(response => {
+        this.$modal.msgSuccess("付款成功");
+        this.payOpen = false;
+        this.getList();
+      }).finally(() => {
+        this.buttonLoading = false;
+      });
+    }
+  }
+};
+</script>
diff --git a/klp-ui/src/views/finance/components/ReceiveTable.vue b/klp-ui/src/views/finance/components/ReceiveTable.vue
new file mode 100644
index 00000000..f41cdbb3
--- /dev/null
+++ b/klp-ui/src/views/finance/components/ReceiveTable.vue
@@ -0,0 +1,394 @@
+<template>
+  <div>
+    <el-form v-if="searchable" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="客户名称" prop="customerId">
+        <CustomerSelect v-model="queryParams.customerId" />
+      </el-form-item>
+      <el-form-item label="订单ID" prop="orderCode">
+        <el-input
+          v-model="queryParams.orderCode"
+          placeholder="请输入订单ID"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="到期日" prop="dueDate">
+        <el-date-picker clearable
+          v-model="queryParams.dueDate"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="请选择到期日">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-if="searchable" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <KLPTable v-loading="loading" :data="receivableList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="应收ID" align="center" prop="receivableId" v-if="false"/>
+      <el-table-column label="客户" align="center" prop="customerName" />
+      <el-table-column label="订单ID" align="center" prop="orderId" />
+      <el-table-column label="到期日" align="center" prop="dueDate" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
+          <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
+          <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="应收金额" align="center" prop="amount" />
+      <el-table-column label="已收金额" align="center" prop="paidAmount" />
+      <el-table-column label="未收金额" align="center" prop="balanceAmount" />
+      <el-table-column label="状态" align="center" prop="status" />
+      <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>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-money"
+            @click="handleReceive(scope.row)"
+          >收款</el-button>
+        </template>
+      </el-table-column>
+    </KLPTable>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改应收款管理（宽松版）对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="客户ID" prop="customerId">
+          <CustomerSelect v-model="form.customerId" />
+        </el-form-item>
+        <el-form-item label="订单ID" prop="orderId">
+          <el-input v-model="form.orderId" placeholder="请输入订单ID" />
+        </el-form-item>
+        <el-form-item label="到期日" prop="dueDate">
+          <el-date-picker clearable
+            v-model="form.dueDate"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择到期日">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="应收金额" prop="amount">
+          <el-input v-model="form.amount" placeholder="请输入应收金额" />
+        </el-form-item>
+        <el-form-item label="已收金额" prop="paidAmount">
+          <el-input v-model="form.paidAmount" disabled placeholder="请输入已收金额" />
+        </el-form-item>
+        <!-- <el-form-item label="未收金额" prop="balanceAmount">
+          <el-input v-model="form.balanceAmount" placeholder="请输入未收金额" />
+        </el-form-item> -->
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="收款" :visible.sync="receiveOpen" width="500px" append-to-body>
+      <el-form ref="receiveForm" :model="receiveForm" :rules="rules" label-width="80px">
+        <el-form-item label="收款金额" prop="amount">
+          <el-input-number :controls=false controls-position="right" v-model="receiveForm.amount" :step="1.00" :precision="2" placeholder="请输入收款金额" :min="0" :max="receiveForm.balanceAmount" style="width: 100%;"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitReceiveForm">确 定</el-button>
+        <el-button @click="cancelReceive">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listReceivable, getReceivable, delReceivable, addReceivable, updateReceivable, updatePaidAmount } from "@/api/finance/receivable";
+import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
+
+export default {
+  name: "Receivable",
+  components: {
+    CustomerSelect
+  },
+  props: {
+    searchable: {
+      type: Boolean,
+      default: true
+    },
+    orderId: {
+      type: String,
+      default: undefined
+    }
+  },
+  watch: {
+    orderId: {
+      handler(newVal) {
+        if (newVal) {
+          this.queryParams.orderId = newVal;
+          this.getList();
+        }
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 应收款管理（宽松版）表格数据
+      receivableList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        customerId: undefined,
+        orderCode: undefined,
+        dueDate: undefined,
+        amount: undefined,
+        paidAmount: undefined,
+        balanceAmount: undefined,
+        status: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      // 收款表单参数
+      receiveForm: {},
+      // 是否显示收款弹出层
+      receiveOpen: false
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询应收款管理（宽松版）列表 */
+    getList() {
+      this.loading = true;
+      listReceivable(this.queryParams).then(response => {
+        this.receivableList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        receivableId: undefined,
+        customerId: undefined,
+        orderId: this.orderId,
+        dueDate: undefined,
+        amount: undefined,
+        paidAmount: 0,
+        balanceAmount: undefined,
+        status: undefined,
+        delFlag: undefined,
+        remark: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.receivableId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加应收款管理（宽松版）";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const receivableId = row.receivableId || this.ids
+      getReceivable(receivableId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改应收款管理（宽松版）";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.receivableId != null) {
+            const {balanceAmount, ...payload} = this.form;
+            updateReceivable(payload).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addReceivable(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const receivableIds = row.receivableId || this.ids;
+      this.$modal.confirm('是否确认删除应收款管理（宽松版）编号为"' + receivableIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delReceivable(receivableIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('klp/receivable/export', {
+        ...this.queryParams
+      }, `receivable_${new Date().getTime()}.xlsx`)
+    },
+    // 收款按钮操作
+    handleReceive(row) {
+      this.receiveForm = {
+        receivableId: row.receivableId,
+        amount: row.balanceAmount,
+        balanceAmount: row.balanceAmount
+      };
+      this.receiveOpen = true;
+    },
+    // 取消收款按钮操作
+    cancelReceive() {
+      this.receiveOpen = false;
+      this.receiveForm = {};
+    },
+    submitReceiveForm() {
+      const payload = {
+        receivableId: this.receiveForm.receivableId,
+        paidAmount: this.receiveForm.amount
+      }
+      this.buttonLoading = true;
+      updatePaidAmount(payload).then(response => {
+        this.$modal.msgSuccess("收款成功");
+        this.receiveOpen = false;
+        this.getList();
+      }).finally(() => {
+        this.buttonLoading = false;
+      });
+    }
+  }
+};
+</script>
diff --git a/klp-ui/src/views/finance/order/index.vue b/klp-ui/src/views/finance/order/index.vue
index a1190991..f2e080da 100644
--- a/klp-ui/src/views/finance/order/index.vue
+++ b/klp-ui/src/views/finance/order/index.vue
@@ -4,43 +4,40 @@
       <el-col :span="6">
         <div>
           <el-row>
-            <el-input 
-              v-model="queryParams.orderCode" 
-              placeholder="请输入单据编号" 
-              clearable
-              @keyup.enter.native="handleQuery" 
-            />
+            <el-input v-model="queryParams.orderCode" placeholder="请输入单据编号" clearable
+              @keyup.enter.native="handleQuery" />
           </el-row>
-          
-          <!-- 使用klp-list组件替换el-tree -->
-          <klp-list 
-            v-loading="orderListLoading"
-            :list-data="orderList"
-            list-key="orderId"
-            title-label="订单编号"
-            title-field="orderCode"
-            :title-max-width="180"
-            @item-click="handleItemClick"
-          >
-            <!-- 操作按钮插槽 -->
-            <!-- <template #actions="{ item, isSelected }">
-              <el-button 
-                size="mini" 
-                type="text" 
-                icon="el-icon-view"
-                @click.stop="handleViewDetail(item)"
-                title="查看详情"
-              ></el-button>
-            </template> -->
+
+          <klp-list :list-data="orderList" list-key="orderId" :loading="loading" @item-click="handleItemClick"
+            info1-field="orderCode" info1-max-percent="40" info5-field="createTime" info4-field="taxAmount">
+            <!-- info4 插槽：Vue2 用 slot 指定插槽名，slot-scope 接收作用域变量 -->
+            <template slot="info4" slot-scope="{ item }">
+              <span class="info-value info-value--primary">
+                {{ item.taxAmount }}元（含税）
+              </span>
+            </template>
+
+            <!-- info1 插槽：同理修改插槽语法 -->
+            <template slot="info1" slot-scope="{ item }">
+              <span class="info-value info-value--primary">
+                {{ item.salesManager }}【{{ item.orderCode }}】
+              </span>
+            </template>
+
+            <!-- info2 插槽：dict-tag 若为 Vue2 兼容组件，用法不变 -->
+            <template slot="info2" slot-scope="{ item }">
+              <dict-tag :options="dict.type.order_status" :value="item.orderStatus" />
+            </template>
+
+            <!-- actions 插槽：el-button 为 Element UI Vue2 组件，用法不变 -->
+            <template slot="actions" slot-scope="{ item }">
+              <el-button size="small" type="text" style="color: red" icon="el-icon-delete"
+                @click.stop="handleDelete(item)"></el-button>
+            </template>
           </klp-list>
-          
-          <pagination 
-            :page.sync="queryParams.pageNum" 
-            :limit.sync="queryParams.pageSize" 
-            :total="total"
-            layout="prev, pager, next" 
-            @pagination="getList" 
-          />
+
+          <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :total="total"
+            layout="prev, pager, next" @pagination="getList" />
         </div>
       </el-col>
 
@@ -72,44 +69,14 @@
             <order-detail-list :orderId="currentOrder.orderId" :editable="false" />
           </el-tab-pane>
           <el-tab-pane label="应收明细" name="receivable">
-            <KLPTable v-loading="rightLoading" :data="currentOrder.receivables" empty-text="暂无数据">
-              <el-table-column label="客户" align="center" prop="customerName" />
-              <el-table-column label="订单ID" align="center" prop="orderId" />
-              <el-table-column label="到期日" align="center" prop="dueDate" width="180">
-                <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
-                  <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
-                  <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">
-                    还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天
-                  </el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="应收金额" align="center" prop="amount" />
-              <el-table-column label="已收金额" align="center" prop="paidAmount" />
-              <el-table-column label="未收金额" align="center" prop="balanceAmount" />
-              <el-table-column label="状态" align="center" prop="status" />
-              <el-table-column label="备注" align="center" prop="remark" />
-            </KLPTable>
+            <div style="margin-top: 10px;">
+              <ReceiveTable :order-id="currentOrder.orderId" :searchable="false" />
+            </div>
           </el-tab-pane>
           <el-tab-pane label="应付明细" name="payable">
-            <KLPTable v-loading="rightLoading" :data="currentOrder.payables" empty-text="暂无数据">
-              <el-table-column label="供应商" align="center" prop="supplierName" />
-              <el-table-column label="订单ID" align="center" prop="orderId" />
-              <el-table-column label="到期日" align="center" prop="dueDate" width="180">
-                <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
-                  <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
-                  <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">
-                    还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天
-                  </el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="应付金额" align="center" prop="amount" />
-              <el-table-column label="已付金额" align="center" prop="paidAmount" />
-              <el-table-column label="未付金额" align="center" prop="balanceAmount" />
-              <el-table-column label="状态" align="center" prop="status" />
-              <el-table-column label="备注" align="center" prop="remark" />
-            </KLPTable>
+            <div style="margin-top: 10px;">
+              <PayTable :order-id="currentOrder.orderId" :searchable="false" />
+            </div>
           </el-tab-pane>
           <el-tab-pane label="凭证管理" name="document">
             <KLPTable :data="currentOrder.documents" style="width: 100%" empty-text="暂无数据">
@@ -136,13 +103,18 @@ import { listFinancialDocument } from "@/api/finance/financialDocument";
 
 import OrderDetailList from '@/views/wms/order/panels/detail.vue'
 import klpList from "@/components/KLPUI/KLPList/index.vue"; // 引入klp-list组件
+import ReceiveTable from '../components/ReceiveTable.vue';
+import PayTable from '../components/PayTable.vue';
 
 export default {
   name: "Order",
   components: {
     OrderDetailList,
-    klpList // 注册klp-list组件
+    klpList, // 注册klp-list组件
+    ReceiveTable,
+    PayTable
   },
+  dicts: ['order_status'],
   data() {
     return {
       activeTab: "orderDetail",
@@ -163,7 +135,7 @@ export default {
   },
   methods: {
     handleQuery() {
-      this.queryParams.pageNum = 1; 
+      this.queryParams.pageNum = 1;
       this.getList();
     },
     getList() {
@@ -181,12 +153,12 @@ export default {
         this.currentOrder = null;
         return;
       }
-      
+
       if (this.rightLoading) {
         this.$message.warning('请等待当前订单加载完成');
         return;
       }
-      
+
       this.currentOrder = selectedItem;
       this.fetchData(selectedItem.orderId);
     },
@@ -210,7 +182,7 @@ export default {
           listPayable({ orderId, pageSize: 1000 }),
           listFinancialDocument({ orderId, pageSize: 1000 })
         ]);
-        
+
         this.currentOrder = {
           ...this.currentOrder,
           details: orderDetailRes.rows,
diff --git a/klp-ui/src/views/finance/pay/index.vue b/klp-ui/src/views/finance/pay/index.vue
index 6b936701..b3d0d50c 100644
--- a/klp-ui/src/views/finance/pay/index.vue
+++ b/klp-ui/src/views/finance/pay/index.vue
@@ -1,373 +1,16 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="供应商" prop="supplierId">
-        <VendorSelect v-model="queryParams.supplierId" />
-      </el-form-item>
-      <el-form-item label="订单编号" prop="orderCode">
-        <el-input
-          v-model="queryParams.orderCode"
-          placeholder="请输入订单ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="到期日" prop="dueDate">
-        <el-date-picker clearable
-          v-model="queryParams.dueDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择到期日">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <KLPTable v-loading="loading" :data="payableList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="应付ID" align="center" prop="payableId" v-if="false"/>
-      <el-table-column label="供应商" align="center" prop="supplierName" />
-      <el-table-column label="订单ID" align="center" prop="orderId" />
-      <el-table-column label="到期日" align="center" prop="dueDate" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
-          <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
-          <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="应付金额" align="center" prop="amount" />
-      <el-table-column label="已付金额" align="center" prop="paidAmount" />
-      <el-table-column label="未付金额" align="center" prop="balanceAmount" />
-      <el-table-column label="状态" align="center" prop="status" />
-      <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>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-money"
-            @click="handlePay(scope.row)"
-          >付款</el-button>
-        </template>
-      </el-table-column>
-    </KLPTable>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改应付款管理（宽松版）对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="供应商ID" prop="supplierId">
-          <VendorSelect v-model="form.supplierId" />
-        </el-form-item>
-        <el-form-item label="订单ID" prop="orderId">
-          <el-input v-model="form.orderId" placeholder="请输入订单ID" />
-        </el-form-item>
-        <el-form-item label="到期日" prop="dueDate">
-          <el-date-picker clearable
-            v-model="form.dueDate"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择到期日">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="应付金额" prop="amount">
-          <el-input v-model="form.amount" placeholder="请输入应付金额" />
-        </el-form-item>
-        <el-form-item label="已付金额" prop="paidAmount">
-          <el-input v-model="form.paidAmount" disabled placeholder="请输入已付金额" />
-        </el-form-item>
-        <!-- <el-form-item label="未付金额" prop="balanceAmount">
-          <el-input v-model="form.balanceAmount" placeholder="请输入未付金额" />
-        </el-form-item> -->
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog title="付款" :visible.sync="payOpen" width="500px" append-to-body>
-      <el-form ref="payForm" :model="payForm" :rules="rules" label-width="80px">
-        <el-form-item label="付款金额" prop="amount">
-          <el-input-number :controls=false controls-position="right" v-model="payForm.amount" :step="1.00" :precision="2" placeholder="请输入付款金额" :min="0" :max="payForm.balanceAmount" style="width: 100%;"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitPayForm">确 定</el-button>
-        <el-button @click="cancelPay">取 消</el-button>
-      </div>
-    </el-dialog>
+    <PayTable />
   </div>
 </template>
 
 <script>
-import { listPayable, getPayable, delPayable, addPayable, updatePayable, updatePaidAmount } from "@/api/finance/payable";
-import VendorSelect from '@/components/KLPService/VendorSelect/index.vue';
+import PayTable from '../components/PayTable.vue';
 
 export default {
   name: "Payable",
   components: {
-    VendorSelect
+    PayTable
   },
-  data() {
-    return {
-      // 按钮loading
-      buttonLoading: false,
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 应付款管理（宽松版）表格数据
-      payableList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 20,
-        supplierId: undefined,
-        orderCode: undefined,
-        dueDate: undefined,
-        amount: undefined,
-        paidAmount: undefined,
-        balanceAmount: undefined,
-        status: undefined,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      },
-      // 付款表单参数
-      payForm: {},
-      // 是否显示付款弹出层
-      payOpen: false
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询应付款管理（宽松版）列表 */
-    getList() {
-      this.loading = true;
-      listPayable(this.queryParams).then(response => {
-        this.payableList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        payableId: undefined,
-        supplierId: undefined,
-        orderId: undefined,
-        dueDate: undefined,
-        amount: undefined,
-        paidAmount: 0,
-        balanceAmount: undefined,
-        status: undefined,
-        delFlag: undefined,
-        remark: undefined,
-        createTime: undefined,
-        createBy: undefined,
-        updateTime: undefined,
-        updateBy: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.payableId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加应付款管理（宽松版）";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.loading = true;
-      this.reset();
-      const payableId = row.payableId || this.ids
-      getPayable(payableId).then(response => {
-        this.loading = false;
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改应付款管理（宽松版）";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.buttonLoading = true;
-          if (this.form.payableId != null) {
-            const {balanceAmount, ...payload} = this.form;
-            updatePayable(payload).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          } else {
-            addPayable(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const payableIds = row.payableId || this.ids;
-      this.$modal.confirm('是否确认删除应付款管理（宽松版）编号为"' + payableIds + '"的数据项？').then(() => {
-        this.loading = true;
-        return delPayable(payableIds);
-      }).then(() => {
-        this.loading = false;
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
-      }).finally(() => {
-        this.loading = false;
-      });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('klp/payable/export', {
-        ...this.queryParams
-      }, `payable_${new Date().getTime()}.xlsx`)
-    },
-    // 付款按钮操作
-    handlePay(row) {
-      this.payForm = {
-        payableId: row.payableId,
-        amount: row.balanceAmount,
-        balanceAmount: row.balanceAmount
-      };
-      this.payOpen = true;
-    },
-    // 取消付款按钮操作
-    cancelPay() {
-      this.payOpen = false;
-      this.payForm = {};
-    },
-    submitPayForm() {
-      const payload = {
-        payableId: this.payForm.payableId,
-        paidAmount: this.payForm.amount
-      }
-      this.buttonLoading = true;
-      updatePaidAmount(payload).then(response => {
-        this.$modal.msgSuccess("付款成功");
-        this.payOpen = false;
-        this.getList();
-      }).finally(() => {
-        this.buttonLoading = false;
-      });
-    }
-  }
 };
 </script>
diff --git a/klp-ui/src/views/finance/receive/index.vue b/klp-ui/src/views/finance/receive/index.vue
index 2c10ca72..04697d84 100644
--- a/klp-ui/src/views/finance/receive/index.vue
+++ b/klp-ui/src/views/finance/receive/index.vue
@@ -1,373 +1,16 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="客户名称" prop="customerId">
-        <CustomerSelect v-model="queryParams.customerId" />
-      </el-form-item>
-      <el-form-item label="订单ID" prop="orderCode">
-        <el-input
-          v-model="queryParams.orderCode"
-          placeholder="请输入订单ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="到期日" prop="dueDate">
-        <el-date-picker clearable
-          v-model="queryParams.dueDate"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择到期日">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <KLPTable v-loading="loading" :data="receivableList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="应收ID" align="center" prop="receivableId" v-if="false"/>
-      <el-table-column label="客户" align="center" prop="customerName" />
-      <el-table-column label="订单ID" align="center" prop="orderId" />
-      <el-table-column label="到期日" align="center" prop="dueDate" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
-          <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
-          <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="应收金额" align="center" prop="amount" />
-      <el-table-column label="已收金额" align="center" prop="paidAmount" />
-      <el-table-column label="未收金额" align="center" prop="balanceAmount" />
-      <el-table-column label="状态" align="center" prop="status" />
-      <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>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-money"
-            @click="handleReceive(scope.row)"
-          >收款</el-button>
-        </template>
-      </el-table-column>
-    </KLPTable>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改应收款管理（宽松版）对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="客户ID" prop="customerId">
-          <CustomerSelect v-model="form.customerId" />
-        </el-form-item>
-        <el-form-item label="订单ID" prop="orderId">
-          <el-input v-model="form.orderId" placeholder="请输入订单ID" />
-        </el-form-item>
-        <el-form-item label="到期日" prop="dueDate">
-          <el-date-picker clearable
-            v-model="form.dueDate"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择到期日">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="应收金额" prop="amount">
-          <el-input v-model="form.amount" placeholder="请输入应收金额" />
-        </el-form-item>
-        <el-form-item label="已收金额" prop="paidAmount">
-          <el-input v-model="form.paidAmount" disabled placeholder="请输入已收金额" />
-        </el-form-item>
-        <!-- <el-form-item label="未收金额" prop="balanceAmount">
-          <el-input v-model="form.balanceAmount" placeholder="请输入未收金额" />
-        </el-form-item> -->
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入备注" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog title="收款" :visible.sync="receiveOpen" width="500px" append-to-body>
-      <el-form ref="receiveForm" :model="receiveForm" :rules="rules" label-width="80px">
-        <el-form-item label="收款金额" prop="amount">
-          <el-input-number :controls=false controls-position="right" v-model="receiveForm.amount" :step="1.00" :precision="2" placeholder="请输入收款金额" :min="0" :max="receiveForm.balanceAmount" style="width: 100%;"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button :loading="buttonLoading" type="primary" @click="submitReceiveForm">确 定</el-button>
-        <el-button @click="cancelReceive">取 消</el-button>
-      </div>
-    </el-dialog>
+    <ReceiveTable />
   </div>
 </template>
 
 <script>
-import { listReceivable, getReceivable, delReceivable, addReceivable, updateReceivable, updatePaidAmount } from "@/api/finance/receivable";
-import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
+import ReceiveTable from '../components/ReceiveTable.vue';
 
 export default {
   name: "Receivable",
   components: {
-    CustomerSelect
-  },
-  data() {
-    return {
-      // 按钮loading
-      buttonLoading: false,
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 应收款管理（宽松版）表格数据
-      receivableList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 20,
-        customerId: undefined,
-        orderCode: undefined,
-        dueDate: undefined,
-        amount: undefined,
-        paidAmount: undefined,
-        balanceAmount: undefined,
-        status: undefined,
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-      },
-      // 收款表单参数
-      receiveForm: {},
-      // 是否显示收款弹出层
-      receiveOpen: false
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询应收款管理（宽松版）列表 */
-    getList() {
-      this.loading = true;
-      listReceivable(this.queryParams).then(response => {
-        this.receivableList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        receivableId: undefined,
-        customerId: undefined,
-        orderId: undefined,
-        dueDate: undefined,
-        amount: undefined,
-        paidAmount: 0,
-        balanceAmount: undefined,
-        status: undefined,
-        delFlag: undefined,
-        remark: undefined,
-        createTime: undefined,
-        createBy: undefined,
-        updateTime: undefined,
-        updateBy: undefined
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.receivableId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加应收款管理（宽松版）";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.loading = true;
-      this.reset();
-      const receivableId = row.receivableId || this.ids
-      getReceivable(receivableId).then(response => {
-        this.loading = false;
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改应收款管理（宽松版）";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          this.buttonLoading = true;
-          if (this.form.receivableId != null) {
-            const {balanceAmount, ...payload} = this.form;
-            updateReceivable(payload).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          } else {
-            addReceivable(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            }).finally(() => {
-              this.buttonLoading = false;
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const receivableIds = row.receivableId || this.ids;
-      this.$modal.confirm('是否确认删除应收款管理（宽松版）编号为"' + receivableIds + '"的数据项？').then(() => {
-        this.loading = true;
-        return delReceivable(receivableIds);
-      }).then(() => {
-        this.loading = false;
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
-      }).finally(() => {
-        this.loading = false;
-      });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('klp/receivable/export', {
-        ...this.queryParams
-      }, `receivable_${new Date().getTime()}.xlsx`)
-    },
-    // 收款按钮操作
-    handleReceive(row) {
-      this.receiveForm = {
-        receivableId: row.receivableId,
-        amount: row.balanceAmount,
-        balanceAmount: row.balanceAmount
-      };
-      this.receiveOpen = true;
-    },
-    // 取消收款按钮操作
-    cancelReceive() {
-      this.receiveOpen = false;
-      this.receiveForm = {};
-    },
-    submitReceiveForm() {
-      const payload = {
-        receivableId: this.receiveForm.receivableId,
-        paidAmount: this.receiveForm.amount
-      }
-      this.buttonLoading = true;
-      updatePaidAmount(payload).then(response => {
-        this.$modal.msgSuccess("收款成功");
-        this.receiveOpen = false;
-        this.getList();
-      }).finally(() => {
-        this.buttonLoading = false;
-      });
-    }
+    ReceiveTable
   }
 };
 </script>
diff --git a/klp-ui/src/views/lines/components/knovaStage.vue b/klp-ui/src/views/lines/components/knovaStage.vue
new file mode 100644
index 00000000..cd50a7ea
--- /dev/null
+++ b/klp-ui/src/views/lines/components/knovaStage.vue
@@ -0,0 +1,119 @@
+<template>
+  <v-stage :config="stageSize">
+    <v-layer>
+      <!-- 设备分组：每个分组包含矩形和对应的文字 -->
+      <v-group 
+        v-for="rect in innerRects" 
+        :key="rect.id" 
+        @click="handleRectClick(rect)" 
+        :style="{ cursor: rect.config.cursor || 'default' }"
+      >
+        <!-- 矩形元素：根据选中状态动态设置边框颜色 -->
+        <v-rect 
+          :config="{
+            ...rect.config,
+            // 选中时边框为橘色，未选中时使用默认边框颜色
+            stroke: rect.id === selectedRectId ? '#4874cb' : rect.config.stroke,
+            // 选中时可以增加边框宽度，增强视觉效果
+            strokeWidth: rect.id === selectedRectId ? 3 : rect.config.strokeWidth
+          }" 
+        />
+        
+        <!-- 如果存在meta.rollid，则显示钢卷号 -->
+        <v-text 
+          v-if="rect.meta && rect.meta.matId"
+          :config="{
+            x: rect.config.x + rect.config.width / 4,
+            y: rect.config.y + rect.config.height / 2,
+            text: '[' + rect.meta.matId + ']',
+            fill: 'black',
+            fontSize: 14,
+            textAlign: 'center',
+            textBaseline: 'middle'
+          }" 
+        />
+        <!-- 让x轴方向文字居中 -->
+        <v-text 
+          :config="{
+            x: rect.config.x + rect.config.width / 2 - rect.textConfig.text.length * 5,
+            y: rect.config.y,
+            text: rect.textConfig.text,
+            fill: rect.textConfig.fill || 'black',
+            fontSize: rect.textConfig.fontSize || 14,
+            textAlign: 'center',
+            textBaseline: 'middle'
+          }" 
+        />
+      </v-group>
+
+      <!-- 连接线 -->
+      <v-line 
+        v-for="line in lines" 
+        :key="line.id" 
+        :config="line.config" 
+      />
+    </v-layer>
+  </v-stage>
+</template>
+
+<script>
+export default {
+  name: 'PreciseFlowChart',
+  props: {
+    matMapList: {
+      required: true,
+      type: Array,
+    },
+    rects: {
+      required: true,
+      type: Array,
+    },
+    lines: {
+      required: true,
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      // 舞台配置
+      stageSize: {
+        width: 1000,
+        height: 650,
+        background: 'white'
+      },
+      innerRects: [],
+      // 记录当前选中的矩形ID，初始为null（无选中）
+      selectedRectId: null
+    };
+  },
+  watch: {
+    matMapList: {
+      handler(newVal) {
+        console.log('matMapList', newVal);
+        // 根据matMapList中每一项的positionNameEn字段和rects中的id字段进行匹配
+        this.innerRects = [...this.rects];
+        newVal.forEach(item => {
+          const rect = this.innerRects.find(rect => rect.id === item.positionNameEn);
+          if (rect) {
+            this.$set(rect, 'meta', item);
+          }
+        });
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    // 矩形分组点击事件处理
+    handleRectClick(rect) {
+      // 切换选中状态：如果点击的是当前选中项，则取消选中；否则选中当前项
+      if (this.selectedRectId === rect.id) {
+        this.selectedRectId = null;
+      } else {
+        this.selectedRectId = rect.id;
+      }
+      this.$emit('rectClick', rect.meta);
+    }
+  }
+};
+</script>
diff --git a/klp-ui/src/views/lines/rects.js b/klp-ui/src/views/lines/rects.js
new file mode 100644
index 00000000..ecf8b9d5
--- /dev/null
+++ b/klp-ui/src/views/lines/rects.js
@@ -0,0 +1,356 @@
+export const rects = [
+  // 左侧：开卷机
+  {
+    id: 'POR1',
+    config: {
+      x: 40,
+      y: 110,
+      width: 200,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '1#开卷机[POR1]' }
+  },
+  {
+    id: 'POR2',
+    config: {
+      x: 40,
+      y: 220,
+      width: 200,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '2#开卷机[POR2]' }
+  },
+
+  // 中上部：焊机、入口活套
+  {
+    id: 'WELDER',
+    config: {
+      x: 300,
+      y: 30,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '焊机[WELDER]' }
+  },
+  {
+    id: 'ENL1',
+    config: {
+      x: 300,
+      y: 110,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '入口活套1[ENL1]' }
+  },
+  {
+    id: 'ENL2',
+    config: {
+      x: 300,
+      y: 160,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '入口活套2[ENL2]' }
+  },
+
+  // 中下部：清洗段
+  {
+    id: 'CLEAN',
+    config: {
+      x: 300,
+      y: 240,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '清洗段[CLEAN]' }
+  },
+
+  // 右侧上：退火炉1-4
+  {
+    id: 'FUR1',
+    config: {
+      x: 600,
+      y: 70,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '退火炉[FUR1]' }
+  },
+  {
+    id: 'FUR2',
+    config: {
+      x: 600,
+      y: 120,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '退火炉[FUR2]' }
+  },
+  {
+    id: 'FUR3',
+    config: {
+      x: 600,
+      y: 170,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '退火炉[FUR3]' }
+  },
+  {
+    id: 'FUR4',
+    config: {
+      x: 600,
+      y: 220,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '退火炉[FUR4]' }
+  },
+
+  // 右侧中：光整机
+  {
+    id: 'TM',
+    config: {
+      x: 600,
+      y: 400,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '光整机[TM]' }
+  },
+
+  // 右侧下：拉矫机
+  {
+    id: 'TL',
+    config: {
+      x: 600,
+      y: 480,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '拉矫机[TL]' }
+  },
+
+  // 中下：后处理
+  {
+    id: 'COAT',
+    config: {
+      x: 300,
+      y: 360,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '后处理[COAT]' }
+  },
+
+  // 中下：出口活套
+  {
+    id: 'CXL1',
+    config: {
+      x: 300,
+      y: 440,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '出口活套[CXL1]' }
+  },
+  {
+    id: 'CXL2',
+    config: {
+      x: 300,
+      y: 490,
+      width: 220,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '出口活套[CXL2]' }
+  },
+
+  // 左下：卷取机、称重位
+  {
+    id: 'TR',
+    config: {
+      x: 40,
+      y: 380,
+      width: 200,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '卷取机[TR]' }
+  },
+  {
+    id: 'WEIT',
+    config: {
+      x: 40,
+      y: 460,
+      width: 200,
+      height: 50,
+      fill: '#d3d3d3',
+      stroke: 'black',
+      strokeWidth: 1,
+      cursor: 'pointer'
+    },
+    textConfig: { text: '称重位[WEIT]' }
+  }
+]
+
+export const lines = [
+  // 1#开卷机 → 焊机
+  {
+    id: 'line-por1-welder',
+    config: {
+      points: [
+        40 + 200, 110 + 25, 
+        40 + 200 + 30, 110 + 25,
+        40 + 200 + 30, 30 + 25,
+        300, 30 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  },
+  // 2#开卷机 → 焊机
+  {
+    id: 'line-por2-welder',
+    config: {
+      points: [
+        40 + 200, 220 + 25,
+        40 + 200 + 30, 220 + 25,
+        40 + 200 + 30, 30 + 25,
+        300, 30 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  },
+  // 清洗段 → 退火炉1
+  {
+    id: 'line-clean-fur1',
+    config: {
+      points: [
+        300 + 220, 240 + 25,
+        300 + 220 + 40, 240 + 25,
+        300 + 220 + 40, 70 + 25,
+        600, 70 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  },
+  // 退火炉4 → 光整机
+  {
+    id: 'line-fur4-tm',
+    config: {
+      points: [
+        600 + 220, 220 + 25,
+        600 + 220 + 40, 220 + 25,
+        600 + 220 + 40, 400 + 25,
+        600 + 220, 400 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  },
+  // 拉矫机 → 后处理
+  {
+    id: 'line-tl-coat',
+    config: {
+      points: [
+        600, 480 + 25, 
+        600 - 40, 480 + 25,
+        600 - 40, 360 + 25,
+        600 - 80, 360 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  },
+  // 出口活套2 → 卷取机
+  {
+    id: 'line-cxl2-tr',
+    config: {
+      points: [
+        300, 490 + 25, 
+        300 - 30, 490 + 25,
+        300 - 30, 380 + 25,
+        300 - 60, 380 + 25
+      ],
+      stroke: '#686868',
+      strokeWidth: 2,
+      lineCap: 'round',
+      lineJoin: 'round'
+    }
+  }
+]
\ No newline at end of file
diff --git a/klp-ui/src/views/lines/zine.vue b/klp-ui/src/views/lines/zine.vue
new file mode 100644
index 00000000..3eb3109b
--- /dev/null
+++ b/klp-ui/src/views/lines/zine.vue
@@ -0,0 +1,466 @@
+<template>
+  <div class="graph-container-box">
+    <el-row>
+      <el-col :span="16">
+        <knova-stage @rectClick="selectCard" :matMapList="matMapList" :rects="rects" :lines="lines"></knova-stage>
+      </el-col>
+      <el-col :span="8">
+        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
+          <!-- 调整工具，选择两个位置，两个下拉选，分别双向绑定 -->
+          <el-form :model="adjustForm" ref="adjustForm" label-width="80px">
+            <el-form-item label="当前位置" prop="current">
+              <el-select v-model="adjustForm.current" placeholder="请选择当前位置">
+                <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn" :value="item.positionNameEn"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="目标位置" prop="target">
+              <el-select v-model="adjustForm.target" placeholder="请选择目标位置">
+                <el-option v-for="item in matMapList" :key="item.positionNameEn" :label="item.positionNameCn" :value="item.positionNameEn"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <el-button type="primary" :disabled="!adjustForm.current || !adjustForm.target" @click="handleConfirmAdjust">确认调整</el-button>
+        </div>
+
+        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
+          <el-row v-if="selectedCard">
+            <el-col :span="12">
+              <div class="detail-item">
+                <span class="detail-label">位置名称：</span>
+                <span class="detail-value">{{ selectedCard.positionNameCn || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">位置代号：</span>
+                <span class="detail-value">{{ selectedCard.positionNameEn || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">钢卷号：</span>
+                <span class="detail-value">{{ selectedCard.matId || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">计划ID：</span>
+                <span class="detail-value">{{ selectedCard.planId || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">计划号：</span>
+                <span class="detail-value">{{ selectedCard.planNo || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">开卷机编号：</span>
+                <span class="detail-value">{{ selectedCard.porIdx || '-' }}</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">卷取机编号：</span>
+                <span class="detail-value">{{ selectedCard.trIdx || '-' }}</span>
+              </div>
+            </el-col>
+            <el-col :span="12">
+              <!-- 加载状态 -->
+              <div class="empty-tip" v-if="isLoadingReturn">加载回退信息中...</div>
+
+              <!-- 错误状态 -->
+              <div class="empty-tip" v-else-if="returnError" style="color: #f56c6c;">
+                {{ returnError }}
+              </div>
+
+              <!-- 回退信息内容 -->
+              <div class="detail-list" v-else-if="Object.keys(returnInfo).length > 0">
+                <div class="detail-item">
+                  <span class="detail-label">回退钢卷号：</span>
+                  <span class="detail-value">{{ returnInfo.entryMatId || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">回退计划ID：</span>
+                  <span class="detail-value">{{ returnInfo.planId || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">回退计划号：</span>
+                  <span class="detail-value">{{ returnInfo.planNo || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">回退类型：</span>
+                  <span class="detail-value">{{ returnInfo.returnType || '-' }}</span>
+                </div>
+                <div class="detail-item">
+                  <span class="detail-label">回退重量：</span>
+                  <span class="detail-value">
+                    {{ returnInfo.returnWeight || '-' }}
+                    {{ returnInfo.returnWeight ? 'kg' : '' }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- 无回退信息 -->
+              <div class="empty-tip" v-else>无回退信息</div>
+            </el-col>
+          </el-row>
+          <el-row v-else>
+            <div class="empty-tip">请选择钢卷卡片查看详情</div>
+          </el-row>
+        </div>
+
+        <div style="border: 1px solid #000; padding: 10px; border-radius: 10px; margin-bottom: 10px;">
+          <el-row v-if="selectedCard">
+            <div class="operation-panel">
+              <div class="panel-content">
+                <!-- 非调整模式：显示操作按钮 -->
+                <div class="operation-buttons">
+                  <div class="button-group">
+                    <el-button size="mini" type="primary" @click="handleOperate(selectedCard, 'ONLINE')"
+                      class="btn-block">
+                      钢卷上线
+                    </el-button>
+                    <el-button size="mini" type="warning" @click="handleOperate(selectedCard, 'UNLOAD')"
+                      class="btn-block mt-2">
+                      手动卸卷
+                    </el-button>
+                    <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'ALL_RETURN')"
+                      class="btn-block mt-2">
+                      整卷回退
+                    </el-button>
+                    <el-button size="mini" type="danger" @click="handleOperate(selectedCard, 'HALF_RETURN')"
+                      class="btn-block mt-2">
+                      半卷回退
+                    </el-button>
+                    <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'BLOCK')"
+                      class="btn-block mt-2">
+                      卸卷并封闭
+                    </el-button>
+                    <!-- <el-button size="mini" type="info" @click="handleOperate(selectedCard, 'THROW_TAIL')" class="btn-block mt-2">
+                甩尾
+              </el-button> -->
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-row>
+
+          <el-row v-else>
+            <div class="empty-tip">请选择钢卷卡片进行操作</div>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-dialog :visible.sync="operateMatStatus" :title="getOperateTitle" width="50%">
+      <el-form :model="operateMatForm" :rules="operateRules" ref="operateForm" label-width="120px">
+        <el-form-item label="开卷机编号" prop="porIdx">
+          <el-input v-model="operateMatForm.porIdx"></el-input>
+        </el-form-item>
+        <el-form-item label="卷取机编号" prop="trIdx">
+          <el-input v-model="operateMatForm.trIdx"></el-input>
+        </el-form-item>
+        <el-form-item label="计划id" prop="planId">
+          <el-input v-model="operateMatForm.planId" placeholder="请输入计划ID"></el-input>
+        </el-form-item>
+        <el-form-item label="钢卷号" prop="entryMatId">
+          <el-input v-model="operateMatForm.entryMatId" placeholder="请输入钢卷号"></el-input>
+        </el-form-item>
+        <!-- <el-form-item label="计划号" prop="planNo">
+          <el-input v-model="operateMatForm.planNo" placeholder="请输入计划号"></el-input>
+        </el-form-item> -->
+        <el-form-item label="操作类型" prop="operation">
+          <el-select v-model="operateMatForm.operation" disabled>
+            <el-option label="钢卷上线" value="ONLINE"></el-option>
+            <el-option label="手动卸卷" value="UNLOAD"></el-option>
+            <el-option label="整卷回退" value="ALL_RETURN"></el-option>
+            <el-option label="半卷回退" value="HALF_RETURN"></el-option>
+            <el-option label="卸卷并封闭" value="BLOCK"></el-option>
+            <!-- <el-option label="甩尾" value="THROW_TAIL"></el-option> -->
+          </el-select>
+        </el-form-item>
+
+        <!-- 回退相关字段 -->
+        <template v-if="['ALL_RETURN', 'HALF_RETURN'].includes(operateMatForm.operation)">
+          <el-form-item label="回退卷号" prop="returnMatId">
+            <el-input v-model="operateMatForm.returnMatId" placeholder="请输入回退卷号"></el-input>
+          </el-form-item>
+          <el-form-item label="回退重量" prop="returnWeight">
+            <el-input v-model="operateMatForm.returnWeight" placeholder="请输入回退重量"></el-input>
+          </el-form-item>
+          <el-form-item label="回退备注" prop="returnRemark">
+            <el-input v-model="operateMatForm.returnRemark" rows="3"></el-input>
+          </el-form-item>
+        </template>
+
+        <!-- 产出长度字段 -->
+        <template v-if="['PRODUCING', 'PRODUCT'].includes(operateMatForm.operation)">
+          <el-form-item label="产出钢卷长度" prop="coilLength">
+            <el-input v-model="operateMatForm.coilLength" type="number" placeholder="请输入产出钢卷长度"></el-input>
+          </el-form-item>
+        </template>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="operateMatStatus = false">取消</el-button>
+        <el-button type="primary" @click="submitOperateForm">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import createFetch from '@/api/l2/track'
+import { getConfigKey } from '@/api/system/config'
+import KnovaStage from './components/knovaStage.vue'
+import { rects, lines } from './rects'
+
+export default {
+  components: {
+    KnovaStage
+  },
+  data() {
+    return {
+      fetchApi: undefined,
+      rects,
+      lines,
+      matMapList: [],
+      selectedCard: null, // 非调整模式选中的单个卡片
+      adjustForm: {
+        current: null,
+        target: null
+      }, // 调整模式选中的位置：[当前, 目标]，双向绑定
+      adjustMode: false, // 是否为调整模式
+      deviceMap: {},
+      operateMatForm: {
+        porIdx: null,
+        trIdx: null,
+        planId: '',
+        entryMatId: '',
+        // planNo: '',
+        operation: '',
+        returnMatId: '',
+        returnWeight: null,
+        returnRemark: '',
+        coilLength: null
+      },
+      operateRules: {
+        planId: [{ required: true, message: '请输入计划id', trigger: 'blur' }],
+        entryMatId: [{ required: true, message: '请输入钢卷号', trigger: 'blur' }],
+        operation: [{ required: true, message: '请选择操作类型', trigger: 'change' }],
+        returnMatId: [
+          {
+            required: true,
+            message: '请输入回退卷号',
+            trigger: 'blur',
+            validator: (rule, val, cb) => {
+              if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && !val) {
+                cb(new Error('请输入回退卷号'))
+              } else cb()
+            }
+          }
+        ],
+        returnWeight: [
+          {
+            required: true,
+            message: '请输入回退重量',
+            trigger: 'blur',
+            validator: (rule, val, cb) => {
+              if (['ALL_RETURN', 'HALF_RETURN'].includes(this.operateMatForm.operation) && (val === null || val === '')) {
+                cb(new Error('请输入回退重量'))
+              } else cb()
+            }
+          }
+        ]
+      },
+      operateMatStatus: false, // 操作对话框显示状态
+      returnInfo: {}, // 存储回退接口返回的数据
+      isLoadingReturn: false, // 回退信息加载状态
+      returnError: '' // 回退信息获取失败的提示
+    }
+  },
+  computed: {
+    // 操作对话框标题
+    getOperateTitle() {
+      const titleMap = {
+        'ONLINE': '钢卷上线',
+        'UNLOAD': '手动卸卷',
+        'ALL_RETURN': '整卷回退',
+        'HALF_RETURN': '半卷回退',
+        'BLOCK': '卸卷并封闭',
+        'THROW_TAIL': '甩尾'
+      }
+      return titleMap[this.operateMatForm.operation] || '钢卷操作'
+    }
+  },
+
+  methods: {
+    // 获取钢卷数据
+    fetchData() {
+      this.fetchApi.getTrackMatPosition().then(res => {
+        this.matMapList = res.data.matMapList || []
+        // this.deviceMap = res.data.matMapList || {}
+      }).catch(err => {
+        console.error('获取钢卷数据失败：', err)
+        this.$message.error('获取数据失败，请重试')
+      })
+    },
+
+    /**
+     * 获取回退信息
+     * @param {Number} posIdx - 位置索引（接口必填query参数）
+     */
+    fetchReturnData(posIdx) {
+      // 1. 校验posIdx
+      if (!posIdx && posIdx !== 0) {
+        this.returnInfo = {};
+        this.returnError = '缺少位置索引（posIdx），无法获取回退信息';
+        return;
+      }
+
+      // 2. 加载状态初始化
+      this.isLoadingReturn = true;
+      this.returnError = '';
+
+      // 3. 调用回退接口（posIdx作为query参数传递）
+      this.fetchApi.getBackData({ posIdx })
+        .then(res => {
+          this.isLoadingReturn = false;
+          // 接口成功且有数据
+          if (res.code === 200 && res.data) {
+            this.returnInfo = res.data;
+          } else {
+            this.returnInfo = {};
+            this.returnError = res.msg || '获取回退信息失败';
+          }
+        })
+        .catch(err => {
+          this.isLoadingReturn = false;
+          this.returnInfo = {};
+          this.returnError = '获取回退信息出错，请重试';
+          console.error('回退信息接口异常：', err);
+        });
+    },
+
+    // 选择卡片（区分调整/非调整模式）
+    selectCard(item) {
+      this.selectedCard = this.selectedCard === item ? null : item
+      // 选中卡片时查询回退信息，取消选中时清空
+      if (this.selectedCard) {
+        this.fetchReturnData(this.selectedCard.posIdx);
+        this.adjustForm.current = this.selectedCard.positionNameEn
+      } else {
+        this.returnInfo = {};
+        this.returnError = '';
+        this.adjustForm.current = null
+      }
+    },
+
+    // 确认调整位置
+    handleConfirmAdjust() {
+      const { current, target } = this.adjustForm
+
+      if (!current || !target) {
+        this.$message.warning('请选择当前位置和目标位置')
+        return
+      }
+
+      const params = {
+        currentPos: current,
+        targetPos: target,
+      }
+
+      this.$confirm(`确定将 ${current} 的钢卷调整到 ${target}？`, '确认调整', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.fetchApi.adjustPosition(params).then(() => {
+          this.$message.success('调整成功')
+          this.exitAdjustMode()
+          this.fetchData()
+        }).catch(err => {
+          console.error('调整失败：', err)
+          this.$message.error('调整失败，请重试')
+        })
+      }).catch(() => {
+        this.$message.info('已取消调整')
+      })
+    },
+
+    // 打开操作对话框
+    handleOperate(row, operation) {
+      this.$refs.operateForm?.resetFields()
+      this.operateMatForm = {
+        porIdx: row.posIdx || null,
+        trIdx: row.posIdx || null,
+        planId: row.planId || '',
+        entryMatId: row.matId || '',
+        planNo: row.planNo || '',
+        operation: operation,
+        returnMatId: '',
+        returnWeight: null,
+        returnRemark: '',
+        coilLength: null
+      }
+      this.operateMatStatus = true
+    },
+
+    // 提交操作表单 
+    submitOperateForm() {
+      this.$refs.operateForm.validate(valid => {
+        if (valid) {
+          this.fetchApi.operateMat(this.operateMatForm).then(() => {
+            this.$message.success('操作成功')
+            this.operateMatStatus = false
+            this.fetchData()
+          }).catch(err => {
+            console.error('操作失败：', err)
+            this.$message.error('操作失败，请重试')
+          })
+        } else {
+          this.$message.warning('请完善表单信息')
+        }
+      })
+    }
+  },
+
+  mounted() {
+    getConfigKey('line.zine.baseURL').then(res => {
+      this.fetchApi = createFetch(res.msg)
+      this.fetchData()
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.graph-container-box {
+  width: 100%;
+  box-sizing: border-box;
+  height: calc(100vh - 86px);
+  padding: 20px;
+  // background-color: #c0c0c0;
+  overflow: hidden;
+}
+
+.graph-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  img {
+    width: 1881px;
+    height: 608px;
+  }
+
+  // 图形元素基础样式
+  .graph-list>div {
+    position: absolute;
+  }
+
+  // 文字容器样式
+  .text-wrapper {
+    position: relative;
+    height: 100%;
+  }
+
+  // 文字基础样式（可被配置项覆盖）
+  .text-wrapper span {
+    position: absolute;
+    color: #333;
+    /* 默认文字颜色 */
+    font-size: 14px;
+    /* 默认文字大小 */
+  }
+}
+</style>
diff --git a/klp-ui/src/views/wms/order/panels/detail.vue b/klp-ui/src/views/wms/order/panels/detail.vue
index 72dffadf..850dfff6 100644
--- a/klp-ui/src/views/wms/order/panels/detail.vue
+++ b/klp-ui/src/views/wms/order/panels/detail.vue
@@ -16,20 +16,20 @@
 </el-descriptions-item>
 </el-descriptions> -->
 
-    <el-row :gutter="10" class="mb8" v-if="editable">
-      <el-col :span="1.5">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5" v-if="editable">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" :disabled="!canEdit"
           @click="handleAdd">新增</el-button>
       </el-col>
-      <el-col :span="1.5">
+      <el-col :span="1.5" v-if="editable">
         <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single || !canEdit"
           @click="handleUpdate">修改</el-button>
       </el-col>
-      <el-col :span="1.5">
+      <el-col :span="1.5" v-if="editable">
         <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple || !canEdit"
           @click="handleDelete">删除</el-button>
       </el-col>
-      <el-col :span="1.5">
+      <el-col :span="1.5" v-if="editable">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
       </el-col>
 
@@ -64,7 +64,7 @@
           </ProductInfo>
         </template>
       </el-table-column>
-      <el-table-column label="BOM" align="center">
+      <el-table-column label="SKU" align="center">
         <template slot-scope="scope">
           <BomInfoMini item-type="product" :item-id="scope.row.productId" />
         </template>
@@ -78,7 +78,7 @@
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" :disabled="!canEdit"
             @click="handleUpdate(scope.row)">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-document" @click="handleSpec(scope.row)">产品规范</el-button>
+          <!-- <el-button size="mini" type="text" icon="el-icon-document" @click="handleSpec(scope.row)">产品规范</el-button> -->
           <el-button size="mini" type="text" icon="el-icon-delete" :disabled="!canEdit"
             @click="handleDelete(scope.row)">删除</el-button>
         </template>
@@ -120,7 +120,7 @@
       </div>
     </el-dialog>
 
-    <el-dialog title="产品规范" :visible.sync="specDialogVisible" width="700px" append-to-body>
+    <!-- <el-dialog title="产品规范" :visible.sync="specDialogVisible" width="700px" append-to-body>
       <ProductSpec v-if="form.groupId" :groupId="form.groupId" :readonly="!canEdit" />
       <div v-else-if="canEdit">
         <el-select placeholder="请选择产品规范" @change="handleChangeSpec" style="width: 100%;">
@@ -133,7 +133,7 @@
       <div v-else>
         暂无产品规范
       </div>
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 
diff --git a/klp-ui/src/views/wms/order/panels/orderPage.vue b/klp-ui/src/views/wms/order/panels/orderPage.vue
index de0ca9bc..661522ce 100644
--- a/klp-ui/src/views/wms/order/panels/orderPage.vue
+++ b/klp-ui/src/views/wms/order/panels/orderPage.vue
@@ -9,8 +9,7 @@
           class="mb-4">
           <el-row :gutter="10">
             <el-col :span="16">
-              <el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable
-                @change="handleQuery" />
+              <el-input v-model="queryParams.orderCode" placeholder="请输入订单编号" clearable @change="handleQuery" />
             </el-col>
             <el-col :span="8">
               <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
@@ -20,23 +19,33 @@
         </el-form>
 
         <!-- klp-list组件 -->
-        <klp-list
-          :list-data="orderList"
-          :model-value="selectedIds"
-          title-field="orderCode"
-          list-key="orderId"
-          title-label="订单编号"
-          :loading="loading"
-          @item-click="handleRowClick"
-        >
-          <!-- 自定义操作按钮 -->
-          <template #actions="{ item }">
-            <!-- 预订单确认按钮 -->
+        <klp-list :list-data="orderList" list-key="orderId" :loading="loading" @item-click="handleRowClick"
+          info1-field="orderCode" info1-max-percent="40" info5-field="createTime" info4-field="taxAmount">
+          <!-- info4 插槽：Vue2 用 slot 指定插槽名，slot-scope 接收作用域变量 -->
+          <template slot="info4" slot-scope="{ item }">
+            <span class="info-value info-value--primary">
+              {{ item.taxAmount }}元（含税）
+            </span>
+          </template>
+
+          <!-- info1 插槽：同理修改插槽语法 -->
+          <template slot="info1" slot-scope="{ item }">
+            <span class="info-value info-value--primary">
+              {{ item.salesManager }}【{{ item.orderCode }}】
+            </span>
+          </template>
+
+          <!-- info2 插槽：dict-tag 若为 Vue2 兼容组件，用法不变 -->
+          <template slot="info2" slot-scope="{ item }">
+            <dict-tag :options="dict.type.order_status" :value="item.orderStatus" />
+          </template>
+
+          <!-- actions 插槽：el-button 为 Element UI Vue2 组件，用法不变 -->
+          <template slot="actions" slot-scope="{ item }">
             <el-button size="mini" plain title="预订单确认" type="success" icon="el-icon-check" v-if="isPre"
               @click.stop="handleStartProduction(item)"></el-button>
-
-            <!-- 删除按钮 -->
-            <el-button size="mini" type="text" style="color: red" icon="el-icon-delete" @click.stop="handleDelete(item)"></el-button>
+            <el-button size="small" type="text" style="color: red" icon="el-icon-delete"
+              @click.stop="handleDelete(item)"></el-button>
           </template>
         </klp-list>
 
@@ -66,36 +75,37 @@
                         @click.stop="copyOrderId(form.orderId)"></el-button>
                     </el-input>
                   </el-form-item>
-                  
+
                   <el-form-item label="订单编号" prop="orderCode">
                     <el-input style="width: 60%;" v-model="form.orderCode" placeholder="无" disabled />
                   </el-form-item>
-                  
+
                   <el-form-item label="客户名称" prop="customerId">
                     <customer-select style="width: 60%;" v-model="form.customerId" />
                   </el-form-item>
-                  
+
                   <el-form-item label="销售经理" prop="salesManager">
                     <el-input style="width: 60%;" v-model="form.salesManager" placeholder="无" />
                   </el-form-item>
-                  
+
                   <el-form-item label="含税金额" prop="taxAmount">
-                    <el-input-number style="width: 60%;" :controls="false" v-model="form.taxAmount" placeholder="0.00" precision="2"
-                      :min="0" />
+                    <el-input-number style="width: 60%;" :controls="false" v-model="form.taxAmount" placeholder="0.00"
+                      precision="2" :min="0" />
                   </el-form-item>
-                  
+
                   <el-form-item label="无税金额" prop="noTaxAmount">
-                    <el-input-number style="width: 60%;" :controls="false" v-model="form.noTaxAmount" placeholder="0.00" precision="2"
-                      :min="0" />
+                    <el-input-number style="width: 60%;" :controls="false" v-model="form.noTaxAmount" placeholder="0.00"
+                      precision="2" :min="0" />
                   </el-form-item>
-                  
+
                   <el-form-item label="订单状态" prop="orderStatus" v-if="!isPre">
-                    <el-select style="width: 60%;" v-model="form.orderStatus" @change="handleOrderStatusChange" size="mini">
+                    <el-select style="width: 60%;" v-model="form.orderStatus" @change="handleOrderStatusChange"
+                      size="mini">
                       <el-option v-for="item in dict.type.order_status" :key="item.value" :label="item.label"
                         :value="parseInt(item.value)" />
                     </el-select>
                   </el-form-item>
-                  
+
                   <el-form-item label="备注" prop="remark">
                     <el-input style="width: 60%;" v-model="form.remark" placeholder="无" type="textarea" rows="4" />
                   </el-form-item>
@@ -141,8 +151,8 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="含税金额" prop="taxAmount">
-              <el-input-number :controls="false" style="width: 100%;" v-model="form.taxAmount" placeholder="请输入含税金额" precision="2"
-                :min="0" />
+              <el-input-number :controls="false" style="width: 100%;" v-model="form.taxAmount" placeholder="请输入含税金额"
+                precision="2" :min="0" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
diff --git a/klp-ui/src/views/wms/product/index.vue b/klp-ui/src/views/wms/product/index.vue
index b755068e..86897e89 100644
--- a/klp-ui/src/views/wms/product/index.vue
+++ b/klp-ui/src/views/wms/product/index.vue
@@ -125,7 +125,7 @@
           <dict-tag :options="dict.type.common_swicth" :value="scope.row.isEnabled"/>
         </template>
       </el-table-column>
-      <el-table-column label="BOM" align="center">
+      <el-table-column label="SKU" align="center">
         <template slot-scope="scope">
           <BomInfoMini :bomId="scope.row.bomId" />
         </template>
@@ -155,7 +155,7 @@
             type="text"
             icon="el-icon-data-analysis"
             @click="handleBom(scope.row)"
-          >BOM</el-button>
+          >SKU</el-button>
         </template>
       </el-table-column>
     </KLPTable>
@@ -256,7 +256,7 @@
       </div>
     </el-dialog>
 
-    <el-dialog title="BOM" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
+    <el-dialog title="SKU" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
       <BomPanel :id="bomId" type="product" @addBom="handleAddBom" :itemId="itemId" />
     </el-dialog>
   </div>
diff --git a/klp-ui/src/views/wms/product/semi.vue b/klp-ui/src/views/wms/product/semi.vue
index cf6d61e1..5f1fe54e 100644
--- a/klp-ui/src/views/wms/product/semi.vue
+++ b/klp-ui/src/views/wms/product/semi.vue
@@ -128,7 +128,7 @@
           <dict-tag :options="dict.type.common_swicth" :value="scope.row.isEnabled"/>
         </template>
       </el-table-column> -->
-      <el-table-column label="BOM" align="center">
+      <el-table-column label="SKU" align="center">
         <template slot-scope="scope">
           <BomInfoMini :bomId="scope.row.bomId" />
         </template>
@@ -158,7 +158,7 @@
             type="text"
             icon="el-icon-data-analysis"
             @click="handleBom(scope.row)"
-          >BOM</el-button>
+          >SKU</el-button>
         </template>
       </el-table-column>
     </KLPTable>
@@ -259,7 +259,7 @@
       </div>
     </el-dialog>
 
-    <el-dialog title="BOM" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
+    <el-dialog title="SKU" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
       <BomPanel :id="bomId" type="product" @addBom="handleAddBom" :itemId="itemId" />
     </el-dialog>
   </div>
diff --git a/klp-ui/src/views/wms/purchasePlan/list.vue b/klp-ui/src/views/wms/purchasePlan/list.vue
index 3d05e894..f2ed0aba 100644
--- a/klp-ui/src/views/wms/purchasePlan/list.vue
+++ b/klp-ui/src/views/wms/purchasePlan/list.vue
@@ -59,7 +59,7 @@
           </RawMaterialInfo>
         </template>
       </el-table-column>
-      <el-table-column label="BOM" align="center">
+      <el-table-column label="SKU" align="center">
         <template slot-scope="scope">
           <BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
         </template>
diff --git a/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue b/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
index 25ea518b..4c17de6b 100644
--- a/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
+++ b/klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue
@@ -32,7 +32,7 @@
               <RawMaterialSelect v-model="scope.row.rawMaterialId" placeholder="请选择原材料" />
             </template>
           </el-table-column>
-          <el-table-column label="BOM" align="center">
+          <el-table-column label="SKU" align="center">
             <template #default="scope">
               <BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
             </template>
diff --git a/klp-ui/src/views/wms/purchasePlan/panels/detail.vue b/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
index 6ea26583..cd1e939f 100644
--- a/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
+++ b/klp-ui/src/views/wms/purchasePlan/panels/detail.vue
@@ -65,7 +65,7 @@
           </RawMaterialInfo>
         </template>
       </el-table-column>
-      <el-table-column label="BOM" align="center">
+      <el-table-column label="SKU" align="center">
         <template slot-scope="scope">
           <BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
         </template>
diff --git a/klp-ui/src/views/wms/purchasePlan/panels/stockin.vue b/klp-ui/src/views/wms/purchasePlan/panels/stockin.vue
index 2acc9710..df2e62f6 100644
--- a/klp-ui/src/views/wms/purchasePlan/panels/stockin.vue
+++ b/klp-ui/src/views/wms/purchasePlan/panels/stockin.vue
@@ -64,7 +64,7 @@
             style="width: 100%"
           >
             <el-table-column label="原材料" align="center" prop="rawMaterialName" />
-            <el-table-column label="BOM" align="center">
+            <el-table-column label="SKU" align="center">
               <template slot-scope="scope">
                 <BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
               </template>
diff --git a/klp-ui/src/views/wms/purchasePlan/panels/transfer.vue b/klp-ui/src/views/wms/purchasePlan/panels/transfer.vue
index db11c88d..883e2631 100644
--- a/klp-ui/src/views/wms/purchasePlan/panels/transfer.vue
+++ b/klp-ui/src/views/wms/purchasePlan/panels/transfer.vue
@@ -26,7 +26,7 @@
                 <RawMaterialInfo :materialId="scope.row.rawMaterialId" />
               </template>
             </el-table-column>
-            <el-table-column label="BOM" align="center">
+            <el-table-column label="SKU" align="center">
               <template #default="scope">
                 <BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
               </template>
@@ -70,7 +70,7 @@
               <RawMaterialInfo :materialId="scope.row.rawMaterialId" />
             </template>
           </el-table-column>
-          <el-table-column label="BOM" align="center">
+          <el-table-column label="SKU" align="center">
             <template #default="scope">
               <BomInfoMini item-type="raw_material" :item-id="scope.row.rawMaterialId" />
             </template>
diff --git a/klp-ui/src/views/wms/rawMaterial/index.vue b/klp-ui/src/views/wms/rawMaterial/index.vue
index d0f923d9..f707eacc 100644
--- a/klp-ui/src/views/wms/rawMaterial/index.vue
+++ b/klp-ui/src/views/wms/rawMaterial/index.vue
@@ -131,7 +131,7 @@
           <dict-tag :options="dict.type.common_swicth" :value="scope.row.isEnabled"/>
         </template>
       </el-table-column> -->
-      <el-table-column label="BOM" align="center">
+      <el-table-column label="SKU" align="center">
         <template slot-scope="scope">
           <BomInfoMini :bomId="scope.row.bomId" />
         </template>
@@ -140,7 +140,7 @@
       <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-info" @click="showParamDetail(scope.row)">参数详情</el-button> -->
-          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleBom(scope.row)">BOM</el-button>
+          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleBom(scope.row)">SKU</el-button>
           <el-button
             size="mini"
             type="text"
@@ -290,7 +290,7 @@
       </el-descriptions>
     </el-dialog>
 
-    <el-dialog title="BOM" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
+    <el-dialog title="SKU" @close="bomDialogVisible = false" :visible.sync="bomDialogVisible" width="900px" append-to-body>
       <BomPanel :id="bomId" type="raw_material" @addBom="handleAddBom" :itemId="itemId" />
     </el-dialog>
   </div>
diff --git a/klp-ui/src/views/wms/stock/index.vue b/klp-ui/src/views/wms/stock/index.vue
index e958cca6..51072fac 100644
--- a/klp-ui/src/views/wms/stock/index.vue
+++ b/klp-ui/src/views/wms/stock/index.vue
@@ -47,7 +47,7 @@
             </RawMaterialInfo>
           </template>
         </el-table-column>
-        <el-table-column label="BOM">
+        <el-table-column label="SKU">
           <template slot-scope="scope">
             <BomInfoMini :itemType="scope.row.itemType" :itemId="scope.row.itemId" />
           </template> 
diff --git a/klp-ui/src/views/wms/stockIo/panels/detail.vue b/klp-ui/src/views/wms/stockIo/panels/detail.vue
index 2a62e16e..850a4e12 100644
--- a/klp-ui/src/views/wms/stockIo/panels/detail.vue
+++ b/klp-ui/src/views/wms/stockIo/panels/detail.vue
@@ -124,7 +124,7 @@
                 <span v-else>{{ scope.row.itemId }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="BOM" align="center">
+            <el-table-column label="SKU" align="center">
               <template slot-scope="scope">
                 <BomInfoMini :item-type="scope.row.itemType" :item-id="scope.row.itemId" />
               </template>
diff --git a/klp-ui/src/views/wms/stockIo/panels/returnCreate.vue b/klp-ui/src/views/wms/stockIo/panels/returnCreate.vue
index 9a813268..4cc1fc47 100644
--- a/klp-ui/src/views/wms/stockIo/panels/returnCreate.vue
+++ b/klp-ui/src/views/wms/stockIo/panels/returnCreate.vue
@@ -39,7 +39,7 @@
             <span v-else>{{ scope.row.itemId }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="BOM" align="center">
+        <el-table-column label="SKU" align="center">
           <template slot-scope="scope">
             <BomInfoMini :item-type="scope.row.itemType" :item-id="scope.row.itemId" />
           </template>
diff --git a/klp-ui/src/views/wms/work/schedulePlan/panes/target.vue b/klp-ui/src/views/wms/work/schedulePlan/panes/target.vue
index 085883db..2e9a7038 100644
--- a/klp-ui/src/views/wms/work/schedulePlan/panes/target.vue
+++ b/klp-ui/src/views/wms/work/schedulePlan/panes/target.vue
@@ -15,7 +15,7 @@
           </ProductInfo>
         </template>
       </el-table-column>
-      <el-table-column label="BOM" align="center">
+      <el-table-column label="SKU" align="center">
         <template slot-scope="scope">
           <BomInfoMini item-type="product" :item-id="scope.row.productId" />
         </template>