From 6e8793b290870a0f7763a7547615d3da68e0d82a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Tue, 2 Sep 2025 15:03:34 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/resources/application-prod.yml   |   2 +-
 gear-ui3/src/api/finance/journal.js           |  44 ++
 gear-ui3/src/api/finance/payable.js           |  53 ++
 gear-ui3/src/api/finance/receivable.js        |  53 ++
 gear-ui3/src/api/oa/bom.js                    |  10 +-
 gear-ui3/src/api/oa/bomItem.js                |  10 +-
 gear-ui3/src/api/oa/product.js                |  10 +-
 gear-ui3/src/api/wms/order.js                 |  60 +++
 gear-ui3/src/api/wms/orderDetail.js           |  44 ++
 .../src/components/CustomerSelect/index.vue   |  48 ++
 gear-ui3/src/components/GearList/index.vue    | 321 ++++++++++++
 .../src/components/GearTable/ColumnRender.vue |  23 +
 .../GearTable/TableActionToolbar.vue          | 179 +++++++
 gear-ui3/src/components/GearTable/index.vue   | 263 ++++++++++
 .../components/GearTable/renderer/eclipse.vue |  34 ++
 .../ProductSelect/BomPanel/BomItem.vue        | 254 +++++++++
 .../ProductSelect/BomPanel/index.vue          | 236 +++++++++
 .../src/components/ProductSelect/index.vue    | 196 +++++++
 gear-ui3/src/utils/enums.js                   |  11 +-
 gear-ui3/src/views/oms/customer/index.vue     | 417 +++++++++++++++
 gear-ui3/src/views/oms/jounery/index.vue      | 294 +++++++++++
 gear-ui3/src/views/oms/order/index.vue        |  16 +
 .../src/views/oms/order/panels/detail.vue     | 299 +++++++++++
 .../src/views/oms/order/panels/orderPage.vue  | 484 ++++++++++++++++++
 gear-ui3/src/views/oms/order/trade.vue        |  16 +
 gear-ui3/src/views/oms/pay/index.vue          | 373 ++++++++++++++
 gear-ui3/src/views/oms/receive/index.vue      | 373 ++++++++++++++
 gear-ui3/src/views/product/info/index.vue     |   9 +-
 gear-ui3/src/views/purchase/shop/index.vue    |   2 +-
 29 files changed, 4110 insertions(+), 24 deletions(-)
 create mode 100644 gear-ui3/src/api/finance/journal.js
 create mode 100644 gear-ui3/src/api/finance/payable.js
 create mode 100644 gear-ui3/src/api/finance/receivable.js
 create mode 100644 gear-ui3/src/api/wms/order.js
 create mode 100644 gear-ui3/src/api/wms/orderDetail.js
 create mode 100644 gear-ui3/src/components/CustomerSelect/index.vue
 create mode 100644 gear-ui3/src/components/GearList/index.vue
 create mode 100644 gear-ui3/src/components/GearTable/ColumnRender.vue
 create mode 100644 gear-ui3/src/components/GearTable/TableActionToolbar.vue
 create mode 100644 gear-ui3/src/components/GearTable/index.vue
 create mode 100644 gear-ui3/src/components/GearTable/renderer/eclipse.vue
 create mode 100644 gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue
 create mode 100644 gear-ui3/src/components/ProductSelect/BomPanel/index.vue
 create mode 100644 gear-ui3/src/components/ProductSelect/index.vue
 create mode 100644 gear-ui3/src/views/oms/customer/index.vue
 create mode 100644 gear-ui3/src/views/oms/jounery/index.vue
 create mode 100644 gear-ui3/src/views/oms/order/index.vue
 create mode 100644 gear-ui3/src/views/oms/order/panels/detail.vue
 create mode 100644 gear-ui3/src/views/oms/order/panels/orderPage.vue
 create mode 100644 gear-ui3/src/views/oms/order/trade.vue
 create mode 100644 gear-ui3/src/views/oms/pay/index.vue
 create mode 100644 gear-ui3/src/views/oms/receive/index.vue

diff --git a/gear-admin/src/main/resources/application-prod.yml b/gear-admin/src/main/resources/application-prod.yml
index 86275f9..c143e16 100644
--- a/gear-admin/src/main/resources/application-prod.yml
+++ b/gear-admin/src/main/resources/application-prod.yml
@@ -52,7 +52,7 @@ spring:
           driverClassName: com.mysql.cj.jdbc.Driver
           # jdbc 所有参数配置参考 https://lionli.blog.csdn.net/article/details/122018562
           # rewriteBatchedStatements=true 批处理优化 大幅提升批量插入更新删除性能(对数据库有性能损耗 使用批量操作应考虑性能问题)
-          url: jdbc:mysql://47.117.71.33:11293/gear?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&autoReconnect=true&rewriteBatchedStatements=true
+          url: jdbc:mysql://49.232.154.205:10080/gear?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8&autoReconnect=true&rewriteBatchedStatements=true
           username: root
           password: Fuande@666
         # 从库数据源
diff --git a/gear-ui3/src/api/finance/journal.js b/gear-ui3/src/api/finance/journal.js
new file mode 100644
index 0000000..4c760af
--- /dev/null
+++ b/gear-ui3/src/api/finance/journal.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询资金日记账列表
+export function listJournal(query) {
+  return request({
+    url: '/oa/journal/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询资金日记账详细
+export function getJournal(journalId) {
+  return request({
+    url: '/oa/journal/' + journalId,
+    method: 'get'
+  })
+}
+
+// 新增资金日记账
+export function addJournal(data) {
+  return request({
+    url: '/oa/journal',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改资金日记账
+export function updateJournal(data) {
+  return request({
+    url: '/oa/journal',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除资金日记账
+export function delJournal(journalId) {
+  return request({
+    url: '/oa/journal/' + journalId,
+    method: 'delete'
+  })
+}
diff --git a/gear-ui3/src/api/finance/payable.js b/gear-ui3/src/api/finance/payable.js
new file mode 100644
index 0000000..2335a73
--- /dev/null
+++ b/gear-ui3/src/api/finance/payable.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询应付款管理（宽松版）列表
+export function listPayable(query) {
+  return request({
+    url: '/oa/payable/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询应付款管理（宽松版）详细
+export function getPayable(payableId) {
+  return request({
+    url: '/oa/payable/' + payableId,
+    method: 'get'
+  })
+}
+
+// 新增应付款管理（宽松版）
+export function addPayable(data) {
+  return request({
+    url: '/oa/payable',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改应付款管理（宽松版）
+export function updatePayable(data) {
+  return request({
+    url: '/oa/payable',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除应付款管理（宽松版）
+export function delPayable(payableId) {
+  return request({
+    url: '/oa/payable/' + payableId,
+    method: 'delete'
+  })
+}
+
+// 付款
+export function updatePaidAmount(data) {
+  return request({
+    url: '/oa/payable/updatePaidAmount',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file
diff --git a/gear-ui3/src/api/finance/receivable.js b/gear-ui3/src/api/finance/receivable.js
new file mode 100644
index 0000000..d765f34
--- /dev/null
+++ b/gear-ui3/src/api/finance/receivable.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询应收款管理（宽松版）列表
+export function listReceivable(query) {
+  return request({
+    url: '/oa/receivable/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询应收款管理（宽松版）详细
+export function getReceivable(receivableId) {
+  return request({
+    url: '/oa/receivable/' + receivableId,
+    method: 'get'
+  })
+}
+
+// 新增应收款管理（宽松版）
+export function addReceivable(data) {
+  return request({
+    url: '/oa/receivable',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改应收款管理（宽松版）
+export function updateReceivable(data) {
+  return request({
+    url: '/oa/receivable',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除应收款管理（宽松版）
+export function delReceivable(receivableId) {
+  return request({
+    url: '/oa/receivable/' + receivableId,
+    method: 'delete'
+  })
+}
+
+// 收款
+export function updatePaidAmount(data) {
+  return request({
+    url: '/oa/receivable/updatePaidAmount',
+    method: 'post',
+    data: data
+  })
+}
diff --git a/gear-ui3/src/api/oa/bom.js b/gear-ui3/src/api/oa/bom.js
index f179312..c953eac 100644
--- a/gear-ui3/src/api/oa/bom.js
+++ b/gear-ui3/src/api/oa/bom.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询BOM 头，关联产品或原材料列表
 export function listBom(query) {
   return request({
-    url: '/klp/bom/list',
+    url: '/oa/bom/list',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function listBom(query) {
 // 查询BOM 头，关联产品或原材料详细
 export function getBom(bomId) {
   return request({
-    url: '/klp/bom/' + bomId,
+    url: '/oa/bom/' + bomId,
     method: 'get'
   })
 }
@@ -20,7 +20,7 @@ export function getBom(bomId) {
 // 新增BOM 头，关联产品或原材料
 export function addBom(data) {
   return request({
-    url: '/klp/bom',
+    url: '/oa/bom',
     method: 'post',
     data: data
   })
@@ -29,7 +29,7 @@ export function addBom(data) {
 // 修改BOM 头，关联产品或原材料
 export function updateBom(data) {
   return request({
-    url: '/klp/bom',
+    url: '/oa/bom',
     method: 'put',
     data: data
   })
@@ -38,7 +38,7 @@ export function updateBom(data) {
 // 删除BOM 头，关联产品或原材料
 export function delBom(bomId) {
   return request({
-    url: '/klp/bom/' + bomId,
+    url: '/oa/bom/' + bomId,
     method: 'delete'
   })
 }
diff --git a/gear-ui3/src/api/oa/bomItem.js b/gear-ui3/src/api/oa/bomItem.js
index f5a5c5a..a71ac79 100644
--- a/gear-ui3/src/api/oa/bomItem.js
+++ b/gear-ui3/src/api/oa/bomItem.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询BOM 明细，存放属性–值列表
 export function listBomItem(query) {
   return request({
-    url: '/wms/bomItem/list',
+    url: '/oa/bomItem/list',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function listBomItem(query) {
 // 查询BOM 明细，存放属性–值详细
 export function getBomItem(itemId) {
   return request({
-    url: '/wms/bomItem/' + itemId,
+    url: '/oa/bomItem/' + itemId,
     method: 'get'
   })
 }
@@ -20,7 +20,7 @@ export function getBomItem(itemId) {
 // 新增BOM 明细，存放属性–值
 export function addBomItem(data) {
   return request({
-    url: '/wms/bomItem',
+    url: '/oa/bomItem',
     method: 'post',
     data: data
   })
@@ -29,7 +29,7 @@ export function addBomItem(data) {
 // 修改BOM 明细，存放属性–值
 export function updateBomItem(data) {
   return request({
-    url: '/wms/bomItem',
+    url: '/oa/bomItem',
     method: 'put',
     data: data
   })
@@ -38,7 +38,7 @@ export function updateBomItem(data) {
 // 删除BOM 明细，存放属性–值
 export function delBomItem(itemId) {
   return request({
-    url: '/wms/bomItem/' + itemId,
+    url: '/oa/bomItem/' + itemId,
     method: 'delete'
   })
 }
diff --git a/gear-ui3/src/api/oa/product.js b/gear-ui3/src/api/oa/product.js
index da91a7c..e39ec06 100644
--- a/gear-ui3/src/api/oa/product.js
+++ b/gear-ui3/src/api/oa/product.js
@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 查询产品列表
 export function listProduct(query) {
   return request({
-    url: '/wms/product/list',
+    url: '/oa/product/list',
     method: 'get',
     params: query
   })
@@ -12,7 +12,7 @@ export function listProduct(query) {
 // 查询产品详细
 export function getProduct(productId) {
   return request({
-    url: '/wms/product/' + productId,
+    url: '/oa/product/' + productId,
     method: 'get'
   })
 }
@@ -20,7 +20,7 @@ export function getProduct(productId) {
 // 新增产品
 export function addProduct(data) {
   return request({
-    url: '/wms/product',
+    url: '/oa/product',
     method: 'post',
     data: data
   })
@@ -29,7 +29,7 @@ export function addProduct(data) {
 // 修改产品
 export function updateProduct(data) {
   return request({
-    url: '/wms/product',
+    url: '/oa/product',
     method: 'put',
     data: data
   })
@@ -38,7 +38,7 @@ export function updateProduct(data) {
 // 删除产品
 export function delProduct(productId) {
   return request({
-    url: '/wms/product/' + productId,
+    url: '/oa/product/' + productId,
     method: 'delete'
   })
 }
diff --git a/gear-ui3/src/api/wms/order.js b/gear-ui3/src/api/wms/order.js
new file mode 100644
index 0000000..ab5f23a
--- /dev/null
+++ b/gear-ui3/src/api/wms/order.js
@@ -0,0 +1,60 @@
+import request from '@/utils/request'
+
+// 查询订单主列表
+export function listOrder(query) {
+  return request({
+    url: '/oa/order/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询订单主详细
+export function getOrder(orderId) {
+  return request({
+    url: '/oa/order/' + orderId,
+    method: 'get'
+  })
+}
+
+// 新增订单主
+export function addOrder(data) {
+  return request({
+    url: '/oa/order',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改订单主
+export function updateOrder(data) {
+  return request({
+    url: '/oa/order',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除订单主
+export function delOrder(orderId) {
+  return request({
+    url: '/oa/order/' + orderId,
+    method: 'delete'
+  })
+}
+
+// dashboard 
+export function getDashboardData() {
+  return request({
+    url: '/oa/product/dashboard/overview',
+    method: 'get'
+  })
+}
+
+export function listByStatus(params) {
+  return request({
+    url: '/oa/order/listByStatus',
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file
diff --git a/gear-ui3/src/api/wms/orderDetail.js b/gear-ui3/src/api/wms/orderDetail.js
new file mode 100644
index 0000000..97fb164
--- /dev/null
+++ b/gear-ui3/src/api/wms/orderDetail.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询订单明细列表
+export function listOrderDetail(query) {
+  return request({
+    url: '/oa/orderDetail/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询订单明细详细
+export function getOrderDetail(detailId) {
+  return request({
+    url: '/oa/orderDetail/' + detailId,
+    method: 'get'
+  })
+}
+
+// 新增订单明细
+export function addOrderDetail(data) {
+  return request({
+    url: '/oa/orderDetail',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改订单明细
+export function updateOrderDetail(data) {
+  return request({
+    url: '/oa/orderDetail',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除订单明细
+export function delOrderDetail(detailId) {
+  return request({
+    url: '/oa/orderDetail/' + detailId,
+    method: 'delete'
+  })
+}
diff --git a/gear-ui3/src/components/CustomerSelect/index.vue b/gear-ui3/src/components/CustomerSelect/index.vue
new file mode 100644
index 0000000..0609f0d
--- /dev/null
+++ b/gear-ui3/src/components/CustomerSelect/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-select filterable v-model="_customerId" remote :remote-method="remoteSearchCustomer" :loading="customerLoading" placeholder="请选择客户">
+    <el-option v-for="item in customerList" :key="item.supplierId" :label="item.name" :value="item.supplierId" />
+  </el-select>
+</template>
+
+<script>
+  import { listSupplier } from '@/api/oa/supplier';
+
+  export default {
+    name: 'CustomerSelect',
+    props: {
+      value: {
+        type: String,
+        default: ''
+      }
+    },
+    computed: {
+      _customerId: {
+        get() {
+          return this.value;
+        },
+        set(value) {
+          this.$emit('input', value);
+        }
+      }
+    },
+    data() {
+      return {
+        customerList: [],
+        customerLoading: false
+      }
+    },
+    mounted() {
+      this.remoteSearchCustomer('');
+    },
+    methods: {
+      remoteSearchCustomer(query) {
+        this.customerLoading = true;
+        listSupplier({ name: query, pageNum: 1, pageSize: 10 }).then(response => {
+          this.customerList = response.rows;
+        }).finally(() => {
+          this.customerLoading = false;
+        });
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/gear-ui3/src/components/GearList/index.vue b/gear-ui3/src/components/GearList/index.vue
new file mode 100644
index 0000000..d7dba9e
--- /dev/null
+++ b/gear-ui3/src/components/GearList/index.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="klp-list-container">
+    <!-- 列表加载状态 -->
+    <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)" 
+      >
+        <!-- 列表标题区域 - 文字溢出省略+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>  
+
+        <!-- 右侧操作按钮组 -->
+        <div class="klp-list-actions">
+          <slot name="actions" :item="item" :isSelected="isSelected(item)"></slot>
+        </div>
+      </div>
+
+      <!-- 空状态提示 -->
+      <div v-if="listData.length === 0 && !loading" class="klp-list-empty">
+        <el-empty description="暂无数据" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "KLPList",
+  components: {},
+  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,
+      required: false,
+      default: false
+    },
+
+    /** 标题最大宽度占容器的百分比（0-100），控制文字溢出 */
+    titleMaxPercent: {
+      type: Number,
+      required: false,
+      default: 80 // 默认占容器80%宽度
+    }
+  },
+  data() {
+    return {
+      // 内部管理选中状态：存储当前选中项的唯一键值（单选中）
+      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;
+      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 {
+        this.selectedKey = null;
+        console.warn(`列表中不存在key为${targetKey}的项`);
+      }
+    },
+
+    /**
+     * 判断文字是否溢出（控制Tooltip显示/隐藏）
+     * @param {Object} item - 列表项数据
+     * @returns {Boolean} 是否溢出
+     */
+    isContentOverflow(item) {
+      const itemKey = item[this.listKey];
+      const content = item[this.titleField] || "";
+
+      // 内容为空时不显示Tooltip
+      if (!content) 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;
+
+      // 创建临时元素测量文字实际宽度（复用元素避免性能问题）
+      if (!this.overflowCheckElements[itemKey]) {
+        const tempEl = document.createElement("span");
+        // 复制title-value的样式（确保测量准确）
+        tempEl.style.cssText = `
+          visibility: hidden;
+          position: absolute;
+          white-space: nowrap;
+          font-size: 14px;
+          font-weight: 500;
+          color: #303133;
+        `;
+        tempEl.textContent = content;
+        document.body.appendChild(tempEl);
+        this.overflowCheckElements[itemKey] = tempEl;
+      }
+
+      // 比较文字实际宽度与可用宽度
+      const tempEl = this.overflowCheckElements[itemKey];
+      return tempEl.offsetWidth > availableWidth;
+    },
+
+    /**
+     * 监听容器宽度变化
+     */
+    handleResize() {
+      // 宽度变化时重新计算溢出状态
+      this.$forceUpdate();
+    }
+  },
+  watch: {
+    /** 列表数据变化时，重置选中状态和溢出检测元素 */
+    listData: {
+      deep: true,
+      handler() {
+        this.clearSelection();
+        // 清理临时测量元素
+        Object.values(this.overflowCheckElements).forEach(el => {
+          document.body.removeChild(el);
+        });
+        this.overflowCheckElements = {};
+      }
+    },
+
+    /** 标题最大百分比变化时，重新计算溢出 */
+    titleMaxPercent() {
+      this.$forceUpdate();
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+    const container = this.$el.querySelector('.klp-list-container');
+      // 增加存在性检查
+      this.containerWidth = container ? container.clientWidth : 0;
+    });
+    
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.handleResize);
+  },
+  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%; /* 确保容器宽度正确计算 */
+  box-sizing: border-box;
+}
+
+/* 加载状态容器（避免加载时容器塌陷） */
+.list-loading-wrapper {
+  min-height: 100px;
+}
+
+/* 列表项样式 */
+.klp-list-item {
+  padding: 6px 8px;
+  margin-bottom: 6px;
+  border-bottom: 1px solid #111;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%; /* 确保列表项占满容器宽度 */
+}
+
+/* 列表项选中状态（左侧高亮边框+背景色） */
+.klp-list-item.active {
+  border-left: 3px solid #2bf;
+  background-color: #222;
+}
+
+/* 列表标题区域（占满中间空间，让操作按钮靠右） */
+.klp-list-title {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0; /* 关键：允许flex项缩小到内容尺寸以下 */
+  overflow: hidden; /* 确保内容不会超出容器 */
+}
+
+/* 标题前置标签样式 */
+.klp-list-title .title-label {
+  color: #ddd;
+  margin-right: 6px;
+  font-size: 13px;
+  white-space: nowrap; /* 标签不换行 */
+  flex-shrink: 0; /* 标签不缩小 */
+}
+
+/* 标题内容样式（溢出省略） */
+.klp-list-title .title-value {
+  color: #ddd;
+  font-weight: 500;
+  font-size: 14px;
+  white-space: nowrap; /* 禁止换行 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+  flex: 1; /* 占据剩余空间 */
+  min-width: 0; /* 关键：允许内容区域缩小 */
+}
+
+/* 操作按钮组（按钮间距控制） */
+.klp-list-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0; /* 操作区不缩小 */
+  margin-left: 8px;
+}
+
+/* 空状态样式（居中显示） */
+.klp-list-empty {
+  padding: 40px 0;
+  text-align: center;
+}
+</style>
+    
\ No newline at end of file
diff --git a/gear-ui3/src/components/GearTable/ColumnRender.vue b/gear-ui3/src/components/GearTable/ColumnRender.vue
new file mode 100644
index 0000000..4de2b80
--- /dev/null
+++ b/gear-ui3/src/components/GearTable/ColumnRender.vue
@@ -0,0 +1,23 @@
+<script>
+  export default {
+    name: 'ColumnRender',
+    functional: true,
+    props: {
+      column: {
+        type: Object,
+        required: true
+      },
+      render: {
+        type: Function,
+        required: true
+      },
+      data: {
+        type: Object,
+        required: true
+      }
+    },
+    render(h, { props }) {
+      return props.render(h, props.data);
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/gear-ui3/src/components/GearTable/TableActionToolbar.vue b/gear-ui3/src/components/GearTable/TableActionToolbar.vue
new file mode 100644
index 0000000..c662ef9
--- /dev/null
+++ b/gear-ui3/src/components/GearTable/TableActionToolbar.vue
@@ -0,0 +1,179 @@
+<template>
+  <el-col :span="12" class="table-action-toolbar">
+    <el-button v-if="tools.includes('fullScreen')" size="mini" icon="el-icon-full-screen" circle
+      @click="handleFullScreen"></el-button>
+    <el-button v-if="tools.includes('refresh')" size="mini" icon="el-icon-refresh" circle
+      @click="handleRefresh"></el-button>
+    <el-button v-if="tools.includes('export')" size="mini" icon="el-icon-download" circle
+      @click="handleExport"></el-button>
+    <el-button v-if="tools.includes('print')" size="mini" icon="el-icon-printer" circle
+      @click="handlePrint"></el-button>
+
+    <!-- 设置按钮和弹出框 -->
+    <el-dropdown v-if="tools.includes('setting')" trigger="click" :hide-on-click="false" style="margin-left: 10px;">
+      <el-tooltip class="item" effect="dark" content="显隐列" placement="top">
+        <el-button size="mini" circle icon="el-icon-menu" />
+      </el-tooltip>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item v-for="column in columns" :key="column.prop">
+          <el-checkbox v-model="column.show">{{ column.label }}</el-checkbox>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-col>
+</template>
+
+<script>
+import XLSX from 'xlsx';
+import { saveAs } from 'file-saver';
+
+export default {
+  name: 'TableActionToolbar',
+  props: {
+    // 控制显示哪些工具按钮
+    tools: {
+      type: Array,
+      required: true
+    },
+    // 表格整体ref，用于获取DOM
+    tableRef: {
+      type: Object,
+      default: null
+    },
+    // 表格数据，用于导出
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    // 表格列定义，用于导出和设置
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // 导出文件名
+    exportFileName: {
+      type: String,
+      default: '表格数据'
+    }
+  },
+  computed: {
+    _columns: {
+      get() {
+        console.log(this.columns);
+        return this.columns.filter(col => col.show);
+      },
+      set(value) {
+        this.$emit('columnChange', value);
+      }
+    }
+  },
+  methods: {
+    // 全屏处理
+    handleFullScreen() {
+      const tableEl = this.tableRef?.$el;
+      if (!tableEl) {
+        this.$emit('fullScreen');
+        return;
+      }
+
+      if (!document.fullscreenElement) {
+        tableEl.requestFullscreen().catch(err => {
+          this.$message.error(`全屏请求失败: ${err.message}`);
+        });
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        }
+      }
+    },
+
+    // 刷新处理
+    handleRefresh() {
+      this.$emit('refresh');
+    },
+
+    // 导出Excel处理
+    handleExport() {
+      if (this.tableData.length === 0) {
+        this.$message.warning('没有数据可导出');
+        return;
+      }
+
+      // 准备导出数据 - 只包含列定义中指定的字段
+      const exportData = this.tableData.map(row => {
+        const formattedRow = {};
+        this.columns.forEach(col => {
+          if (col.prop && !col.hidden) {
+            // 使用列的label作为表头，prop对应的数据作为值
+            formattedRow[col.label || col.prop] = row[col.prop];
+          }
+        });
+        return formattedRow;
+      });
+
+      // 创建工作簿和工作表
+      const worksheet = XLSX.utils.json_to_sheet(exportData);
+      const workbook = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
+
+      // 生成Excel文件并下载
+      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+      this.saveExcelFile(excelBuffer, this.exportFileName);
+    },
+
+    // 保存Excel文件
+    saveExcelFile(buffer, fileName) {
+      const blob = new Blob([buffer], { type: 'application/octet-stream' });
+      saveAs(blob, `${fileName}_${new Date().toLocaleDateString()}.xlsx`);
+    },
+
+    // 打印处理
+    handlePrint() {
+      this.$emit('print');
+    },
+
+    // 列显示状态变化处理
+    handleColumnChange(checked) {
+      // 找出所有列的显示状态变化
+      const columnChanges = this.visibleColumns.map(col => ({
+        prop: col.prop,
+        hidden: !checked.includes(col.prop)
+      }));
+
+      // 触发事件通知父组件更新列显示状态
+      this.$emit('columnChange', columnChanges);
+
+      // 刷新表格布局
+      if (this.tableRef && this.tableRef.doLayout) {
+        this.tableRef.doLayout();
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.table-action-toolbar {
+  text-align: left;
+  display: flex;
+  gap: 4px;
+}
+
+/* 按钮间距 */
+::v-deep .el-button {
+  margin-left: 4px;
+}
+
+.column-setting {
+  padding: 5px 0;
+}
+
+::v-deep .el-checkbox {
+  display: block;
+  margin-bottom: 8px;
+}
+
+::v-deep .el-checkbox:last-child {
+  margin-bottom: 0;
+}
+</style>
diff --git a/gear-ui3/src/components/GearTable/index.vue b/gear-ui3/src/components/GearTable/index.vue
new file mode 100644
index 0000000..1e8ff8d
--- /dev/null
+++ b/gear-ui3/src/components/GearTable/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="my-table-container">
+    <!-- 扩展层：加载动画 -->
+    <div v-if="loading" class="table-loading">
+      <el-loading-spinner></el-loading-spinner>
+      <p class="loading-text">{{ loadingText || "加载中..." }}</p>
+    </div>
+
+    <el-row>
+      <!-- 自定义操作按钮，左对齐 -->
+      <el-col :span="12">
+        <slot name='actionRow'>
+          <!-- 分页 -->
+          <span style="color: #ccc;"></span>
+        </slot>
+      </el-col>
+      
+      <!-- 通用操作工具栏 -->
+      <TableActionToolbar 
+        :tools="actionTool"
+        :table-ref="getTableInstance()"
+        :table-data="tableData"
+        :columns="columns"
+        :export-file-name="exportFileName"
+        @fullScreen="handleFullScreen"
+        @refresh="handleRefresh"
+        @export="handleExport"
+        @print="handlePrint"
+        @columnChange="updateColumnsVisibility"
+      />
+    </el-row>
+
+    <!-- 原生 Table 核心 -->
+    <el-table
+      :ref="tableRef"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :class="['my-table', customClass]"
+      :data="tableData"
+    >
+      <!-- 透传列定义插槽 -->
+      <template
+        v-for="(column, index) in $attrs.columns || []"
+        v-slot:[`header-${column.prop}`]="scope"
+      >
+        <slot :name="`header-${column.prop}`" v-bind="scope"></slot>
+      </template>
+      <template
+        v-for="(column, index) in $attrs.columns || []"
+        v-slot:[column.prop]="scope"
+      >
+        <slot :name="column.prop" v-bind="scope"></slot>
+      </template>
+
+      <!-- 透传原生内置插槽 -->
+      <template v-slot:empty="scope">
+        <slot name="empty" v-bind="scope"></slot>
+      </template>
+      <template v-slot:append="scope">
+        <slot name="append" v-bind="scope"></slot>
+      </template>
+
+      <!-- 透传自定义列插槽 -->
+      <slot v-bind:tableRef="tableRef"></slot>
+
+      <el-table-column
+        v-if="selectionColumn"
+        type="selection"
+        width="55"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        v-if="indexColumn"
+        type="index"
+        width="55"
+        align="center"
+      ></el-table-column>
+
+      <el-table-column
+        v-for="(column, index) in _columns"
+        v-bind="column"
+        :width="column.width"
+        :prop="column.prop"
+        :align="column.align"
+        :label="column.label"
+        :min-width="column.minWidth"
+        :fixed="column.fixed"
+        :show-overflow-tooltip="column.showOverflowTooltip"
+        :sortable="column.sortable"
+      >
+          <template v-slot="scope">
+            <ColumnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
+            <Eclipse v-else-if="column.eclipse" :text="scope.row[column.prop]"></Eclipse>
+            <span v-else>{{ scope.row[column.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页插槽 -->
+    <slot name="pagination"></slot>
+  </div>
+</template>
+
+<script>
+import ColumnRender from './ColumnRender.vue';  
+import Eclipse from './renderer/eclipse.vue';
+import TableActionToolbar from './TableActionToolbar.vue';
+
+export default {
+  name: "KLPTable",
+  components: {
+    ColumnRender,
+    Eclipse,
+    TableActionToolbar
+  },
+  props: {
+    // 基础扩展属性
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    loadingText: {
+      type: String,
+      default: "加载中..."
+    },
+    customClass: {
+      type: String,
+      default: ""
+    },
+    // 表格数据
+    tableData: {
+      type: Array,
+      default: () => []
+    },
+    // 列定义
+    customColumns: {
+      type: Array,
+      default: () => []
+    },
+    // 选择列
+    selectionColumn: {
+      type: Boolean,
+      default: false
+    },
+    // 索引列
+    indexColumn: {
+      type: Boolean,
+      default: false
+    },
+    // 操作工具
+    actionTool: {
+      type: Array,
+      default: () => ['fullScreen', 'export', 'setting']
+    },
+    // 导出文件名
+    exportFileName: {
+      type: String,
+      default: '表格数据'
+    }
+  },
+  data() {
+    return {
+      tableRef: "myTableRef",
+      columns: []
+    };
+  },
+  computed: {
+    _columns() {
+      return this.columns.filter(col => col.show);
+    },
+  },
+  watch: {
+    customColumns: {
+      handler(newVal) {
+        console.log(newVal, this.customColumns, '自定义列');
+        this.columns = newVal.map(col => ({...col, show: true}));
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    // 获取表格实例
+    getTableInstance() {
+      return this.$refs[this.tableRef];
+    },
+    // 透传原生方法
+    clearSelection() {
+      const table = this.getTableInstance();
+      if (table && table.clearSelection) {
+        table.clearSelection();
+      }
+    },
+    toggleRowSelection(row, selected) {
+      const table = this.getTableInstance();
+      if (table && table.toggleRowSelection) {
+        table.toggleRowSelection(row, selected);
+      }
+    },
+    // 操作处理方法（可被覆盖或扩展）
+    handleFullScreen() {
+      this.$emit('fullScreen');
+    },
+    handleRefresh() {
+      this.$emit('refresh');
+    },
+    handleExport() {
+      this.$emit('export');
+    },
+    handlePrint() {
+      this.$emit('print');
+    },
+    // handleSetting() {
+    //   this.$emit('setting');
+    // },
+    updateColumnsVisibility(changes) {
+      // 更新列的hidden属性
+      changes.forEach(change => {
+        const column = this.columns.find(col => col.prop === change.prop);
+        if (column) {
+          column.show = !column.show;
+        }
+      });
+    }
+  },
+  mounted() {
+    console.log("KLPTable 初始化完成，原生实例：", this.getTableInstance());
+  }
+};
+</script>
+
+<style scoped>
+.my-table-container {
+  width: 100%;
+  position: relative;
+}
+
+.table-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+
+.loading-text {
+  margin-top: 12px;
+  color: #666;
+  font-size: 14px;
+}
+
+.my-table {
+  width: 100%;
+}
+</style>
+    
\ No newline at end of file
diff --git a/gear-ui3/src/components/GearTable/renderer/eclipse.vue b/gear-ui3/src/components/GearTable/renderer/eclipse.vue
new file mode 100644
index 0000000..e28282b
--- /dev/null
+++ b/gear-ui3/src/components/GearTable/renderer/eclipse.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="eclipse-container">
+    <el-tooltip :content="text" placement="top" :disabled="text.length < 10">
+      <span class="eclipse">{{ text }}</span>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Eclipse',
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+  }
+}
+</script>
+
+<style>
+.eclipse-container {
+  position: relative; /* 为tooltip提供定位参考 */
+  display: inline-block; /* 确保容器只占内容宽度 */
+}
+
+.eclipse {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block; /* 确保元素有明确的尺寸 */
+  max-width: 100%; /* 限制最大宽度，确保溢出效果生效 */
+}
+</style>
diff --git a/gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue b/gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue
new file mode 100644
index 0000000..82c18a4
--- /dev/null
+++ b/gear-ui3/src/components/ProductSelect/BomPanel/BomItem.vue
@@ -0,0 +1,254 @@
+<template>
+  <div class="app-container">
+    <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-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="bomItemList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="属性名称" align="center" prop="attrKey" />
+      <el-table-column label="属性值" align="center" prop="attrValue" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改BOM 明细，存放属性–值对话框 -->
+    <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="属性名称" prop="attrKey">
+          <el-input v-model="form.attrKey" placeholder="请输入属性名称" />
+        </el-form-item>
+        <el-form-item label="属性值" prop="attrValue">
+          <el-input v-model="form.attrValue" 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>
+  </div>
+</template>
+
+<script>
+import { listBomItem, getBomItem, delBomItem, addBomItem, updateBomItem } from "@/api/oa/bomItem";
+
+export default {
+  name: "BomItem",
+  props: {
+    bomId: [String, Number],
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // BOM 明细，存放属性–值表格数据
+      bomItemList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        bomId: this.bomId,
+        attrKey: undefined,
+        attrValue: undefined,
+        isEnabled: undefined,
+      },
+      // 表单参数
+      form: {
+        bomId: this.bomId,
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询BOM 明细，存放属性–值列表 */
+    getList() {
+      this.loading = true;
+      listBomItem(this.queryParams).then(response => {
+        this.bomItemList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        itemId: undefined,
+        bomId: this.bomId,
+        attrKey: undefined,
+        attrValue: undefined,
+        remark: 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.itemId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加BOM 明细，存放属性–值";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const itemId = row.itemId || this.ids
+      getBomItem(itemId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改BOM 明细，存放属性–值";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.itemId != null) {
+            updateBomItem(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addBomItem(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const itemIds = row.itemId || this.ids;
+      this.$modal.confirm('是否确认删除BOM 明细，存放属性–值编号为"' + itemIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delBomItem(itemIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+        this.$store.dispatch('category/getBomMap');
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('wms/bomItem/export', {
+        ...this.queryParams
+      }, `bomItem_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
diff --git a/gear-ui3/src/components/ProductSelect/BomPanel/index.vue b/gear-ui3/src/components/ProductSelect/BomPanel/index.vue
new file mode 100644
index 0000000..3d6a563
--- /dev/null
+++ b/gear-ui3/src/components/ProductSelect/BomPanel/index.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="bom-container">
+    <!-- 当没有传入id时显示创建按钮 -->
+    <div v-if="!id" class="create-bom">
+      <el-button type="primary" :loading="createLoading" :disabled="createLoading" @click="handleCreate"
+        class="create-button">
+        <template v-if="!createLoading">
+          <i class="el-icon-plus"></i> 创建BOM
+        </template>
+        <template v-else>
+          创建中...
+        </template>
+      </el-button>
+    </div>
+
+    <!-- 当传入id时显示数据区域 -->
+    <div v-else class="bom-details">
+      <div v-if="loading" class="loading-indicator">
+        加载中...
+        <div class="spinner"></div>
+      </div>
+
+      <div v-if="error" class="error-message">
+        加载失败: {{ error }}
+        <button @click="fetchData" class="retry-button">重试</button>
+      </div>
+
+      <div v-if="data && !loading">
+        <el-form label-width="100px">
+          <el-form-item label="BOM名称">
+            <el-input v-model="info.bomName" @blur="handleUpdateBom" />
+          </el-form-item>
+          <el-form-item label="BOM编码">
+            <el-input v-model="info.bomCode" @blur="handleUpdateBom" />
+          </el-form-item>
+        </el-form>
+        <BomItem :bomId="id" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addBom, updateBom, getBom } from '@/api/oa/bom';
+import { listBomItem } from '@/api/oa/bomItem';
+import { updateProduct } from '@/api/oa/product';
+
+import BomItem from './BomItem.vue';
+
+export default {
+  props: {
+    id: [String, Number],   // 支持字符串或数字类型的ID
+    itemId: [String, Number],
+    type: String            // 可选类型参数
+  },
+  components: {
+    BomItem
+  },
+  data() {
+    return {
+      loading: false,
+      error: null,
+      data: null,
+      info: {},
+      createLoading: false,
+    };
+  },
+  watch: {
+    id: {
+      immediate: true, // 组件创建时立即执行
+      handler(newVal) {
+        if (newVal) {
+          console.log('侦听到变化')
+          this.fetchBomDetails();
+        } else {
+          // 没有ID时重置数据
+          this.data = null;
+          this.error = null;
+        }
+      }
+    }
+  },
+  methods: {
+    async fetchBomDetails() {
+      try {
+        this.loading = true;
+        this.error = null;
+
+        // 实际项目中替换为真实API调用
+        const response = await listBomItem({
+          bomId: this.id
+        })
+        this.data = response.rows;
+
+        const response2 = await getBom(this.id)
+        this.info = response2.data;
+      } catch (err) {
+        this.error = err.message || '请求失败，请重试';
+        console.error('获取BOM详情失败:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async handleCreate() {
+      // 防止重复点击
+      if (this.createLoading) return;
+
+      try {
+        this.createLoading = true;
+        // 添加一个semi类型
+        const bomName = (this.type == 'product' ? '产品BOM' : (this.type == 'raw_material' ? '原材料BOM' : '半成品BOM')) + new Date().getTime();
+        const bomCode = (this.type == 'product' ? 'P' : (this.type == 'raw_material' ? 'R' : 'S')) + new Date().getTime();
+        const bomResponse = await addBom({
+          bomName,
+          bomCode
+        });
+
+        this.$message.success('创建BOM成功');
+        const bomData = bomResponse.data;
+
+        // 根据类型更新产品/原材料
+
+        await updateProduct({
+          productId: this.itemId,
+          bomId: bomData.bomId
+        });
+        this.$store.dispatch('category/getBomMap');
+
+        // 触发事件
+        this.$emit('addBom', bomData);
+      } catch (error) {
+        console.error('创建失败:', error);
+        this.$message.error(`创建失败: ${error.message || '未知错误'}`);
+      } finally {
+        this.createLoading = false;
+      }
+    },
+
+    handleUpdateBom() {
+      this.$message.warning('正在更新BOM...');
+      updateBom({
+        bomId: this.id,
+        bomName: this.info.bomName,
+        bomCode: this.info.bomCode
+      }).then(_ => {
+        this.$message.success('更新BOM成功');
+        this.$store.dispatch('category/getBomMap');
+      })
+    },
+
+    fetchData() {
+      // 重试获取数据
+      if (this.id) this.fetchBomDetails();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.create-bom {
+  text-align: center;
+  padding: 40px 0;
+}
+
+.create-button {
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  font-size: 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.create-button:hover {
+  background-color: #388E3C;
+}
+
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px;
+  color: #666;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  border-top-color: #3498db;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.error-message {
+  padding: 20px;
+  background-color: #ffebee;
+  color: #d32f2f;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.retry-button {
+  padding: 8px 16px;
+  background-color: #f44336;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  width: 120px;
+}
+
+.bom-info {
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  border-left: 4px solid #2196F3;
+}
+
+.bom-info p {
+  margin: 10px 0;
+}
+</style>
\ No newline at end of file
diff --git a/gear-ui3/src/components/ProductSelect/index.vue b/gear-ui3/src/components/ProductSelect/index.vue
new file mode 100644
index 0000000..9e1c82b
--- /dev/null
+++ b/gear-ui3/src/components/ProductSelect/index.vue
@@ -0,0 +1,196 @@
+<template>
+  <span>
+    <el-select v-model="selected" :placeholder="placeholder" :disabled="disabled" filterable clearable
+      @change="onChange" :value-key="'productId'">
+      <template #empty>
+        <el-button v-if="canAdd" @click="add" icon="el-icon-plus">未搜索到产品，点击添加</el-button>
+        <div v-else style="padding: 10px;">未搜索到产品</div>
+      </template>
+      <el-option v-for="item in productOptions" :key="item.productId"
+        :label="`${item.productName}（${item.productCode}）`" :value="item.productId">
+        <div class="option-label">
+          <span class="product-name">{{ item.productName }}</span>
+          <span class="product-code">{{ item.productCode }}</span>
+        </div>
+      </el-option>
+    </el-select>
+
+    <el-dialog v-if="canAdd" :visible.sync="addDialogVisible" title="添加产品" width="700px" append-to-body>
+      <el-steps align-center :active="activeStep" finish-status="success">
+        <!-- 新增产品的步骤 -->
+        <el-step title="创建产品"></el-step>
+        <!-- 创建BOM的步骤 -->
+        <el-step title="填写BOM信息"></el-step>
+      </el-steps>
+
+      <el-form ref="form" v-if="activeStep === 0" :model="addForm" :rules="rules" label-width="120px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="产品编号" prop="productCode">
+              <el-input v-model="addForm.productCode" placeholder="请输入产品编号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="产品名称" prop="productName">
+              <el-input v-model="addForm.productName" placeholder="请输入产品名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="负责人" prop="owner">
+              <el-input v-model="addForm.owner" :multiple="false" placeholder="请填写负责人" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="计量单位" prop="unit">
+              <el-input v-model="addForm.unit" placeholder="请输入计量单位" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div v-if="activeStep === 0" slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">创建产品</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+
+      <BomPanel v-if="activeStep === 1" :id="bomId" :itemId="itemId" :type="addForm.type" @addBom="handleBom" />
+    </el-dialog>
+  </span>
+</template>
+
+<script>
+import { listProduct, addProduct } from '@/api/oa/product';
+import BomPanel from './BomPanel/index.vue';
+
+export default {
+  name: 'ProductSelect',
+  props: {
+    value: [String, null],
+    disabled: Boolean,
+    placeholder: {
+      type: String,
+      default: '请选择产品'
+    },
+    canAdd: {
+      default: false,
+      type: Boolean
+    },
+  },
+  components: {
+    BomPanel
+  },
+  data() {
+    return {
+      productOptions: [],
+      selected: this.value,
+      addForm: {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'product'
+      },
+      addDialogVisible: false,
+      rules: {
+        productCode: [
+          { required: true, message: "产品编号不能为空", trigger: "blur" }
+        ],
+        productName: [
+          { required: true, message: "产品名称不能为空", trigger: "blur" }
+        ],
+        owner: [
+          { required: true, message: "负责人不能为空", trigger: "blur" }
+        ],
+      },
+      buttonLoading: false,
+      itemId: undefined,
+      activeStep: 0,
+      bomId: undefined,
+    };
+  },
+  watch: {
+    value(val) {
+      this.selected = val;
+    },
+    selected(val) {
+      this.$emit('input', val);
+    }
+  },
+  created() {
+    this.getProductOptions();
+  },
+  methods: {
+    getProductOptions() {
+      listProduct({ pageNum: 1, pageSize: 1000, type: 'product' }).then(res => {
+        this.productOptions = res.rows || [];
+      });
+    },
+    onChange(val) {
+      // 通过val找到item
+      const product = this.productOptions.find(p => p.productId === val);
+      this.$emit('change', product);
+    },
+    add() {
+      this.addDialogVisible = true;
+      this.addForm = {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'product'
+      };
+      this.bomId = undefined;
+      this.itemId = undefined;
+    },
+    handleBom(bom) {
+      this.bomId = bom.bomId;
+    },
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          // console.log(this.addForm);
+          addProduct(this.addForm).then(res => {
+            this.$modal && this.$modal.msgSuccess("创建产品成功");
+            this.getProductOptions();
+            console.log(res);
+            this.itemId = res.productId;
+            this.$emit('input', res.productId);
+            this.activeStep = 1;
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      });
+    },
+    cancel() {
+      this.addDialogVisible = false;
+      this.addForm = {
+        productCode: undefined,
+        productName: undefined,
+        owner: undefined,
+        unit: undefined,
+        type: 'product'
+      };
+    }
+  }
+};
+</script>
+
+<style scoped>
+.option-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.product-name {
+  font-size: 14px;
+  color: #333;
+}
+
+.product-code {
+  font-size: 12px;
+  color: #999;
+  margin-left: 10px;
+}
+</style>
diff --git a/gear-ui3/src/utils/enums.js b/gear-ui3/src/utils/enums.js
index 5e7e70a..e374d77 100644
--- a/gear-ui3/src/utils/enums.js
+++ b/gear-ui3/src/utils/enums.js
@@ -3,4 +3,13 @@ export const EExpressType = {
   ZTO: "ZTO",
   BEST: "Best",
   STO: "STO",
-}
\ No newline at end of file
+}
+
+// 订单状态
+export const EOrderStatus = {
+  NEW: 0,
+  PRODUCTIONING: 1,
+  FINISH: 2,
+  CANCEL: 3
+}
+
diff --git a/gear-ui3/src/views/oms/customer/index.vue b/gear-ui3/src/views/oms/customer/index.vue
new file mode 100644
index 0000000..2ef10f9
--- /dev/null
+++ b/gear-ui3/src/views/oms/customer/index.vue
@@ -0,0 +1,417 @@
+<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="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入客户名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="客户等级" prop="level">
+        <el-input
+          v-model="queryParams.level"
+          placeholder="请输入客户等级"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="客户来源" prop="source">
+        <el-select v-model="queryParams.source" placeholder="请选择客户来源" clearable>
+          <el-option
+            v-for="dict in dict.type.customer_from"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </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="customerList" @selection-change="handleSelectionChange" :customColumns="customColumns">
+      <el-table-column type="selection" width="55" align="center" />
+      <!-- <el-table-column label="编号，主键自增" align="center" prop="customerId" v-if="false"/>
+      <el-table-column label="客户名称" align="center" prop="name" />
+      <el-table-column label="手机" align="center" prop="mobile" />
+      <el-table-column label="电话" align="center" prop="telephone" />
+      <el-table-column label="QQ" align="center" prop="qq" />
+      <el-table-column label="微信" align="center" prop="wechat" />
+      <el-table-column label="邮箱" align="center" prop="email" />
+      <el-table-column label="地区编号" align="center" prop="areaId" />
+      <el-table-column label="详细地址" align="center" prop="detailAddress" />
+      <el-table-column label="客户等级" align="center" prop="level" />
+      <el-table-column label="客户来源" align="center" prop="source">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.customer_from" :value="scope.row.source"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column> -->
+    </KLPTable>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改CRM 客户对话框 -->
+    <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="客户名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入客户名称" />
+        </el-form-item>
+        <el-form-item label="手机" prop="mobile">
+          <el-input v-model="form.mobile" placeholder="请输入手机" />
+        </el-form-item>
+        <el-form-item label="电话" prop="telephone">
+          <el-input v-model="form.telephone" placeholder="请输入电话" />
+        </el-form-item>
+        <el-form-item label="QQ" prop="qq">
+          <el-input v-model="form.qq" placeholder="请输入QQ" />
+        </el-form-item>
+        <el-form-item label="微信" prop="wechat">
+          <el-input v-model="form.wechat" placeholder="请输入微信" />
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="form.email" placeholder="请输入邮箱" />
+        </el-form-item>
+        <el-form-item label="地区编号" prop="areaId">
+          <el-input v-model="form.areaId" placeholder="请输入地区编号" />
+        </el-form-item>
+        <el-form-item label="详细地址" prop="detailAddress">
+          <el-input v-model="form.detailAddress" placeholder="请输入详细地址" />
+        </el-form-item>
+        <el-form-item label="客户等级" prop="level">
+          <el-input v-model="form.level" placeholder="请输入客户等级" />
+        </el-form-item>
+        <el-form-item label="客户来源" prop="source">
+          <el-select v-model="form.source" placeholder="请选择客户来源">
+            <el-option
+              v-for="dict in dict.type.customer_from"
+              :key="dict.value"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" 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>
+  </div>
+</template>
+
+<script>
+import { listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/wms/customer";
+import KLPTable from '@/components/KLPUI/KLPTable/index.vue';
+
+export default {
+  name: "Customer",
+  dicts: ['customer_from'],
+  components: {
+    KLPTable
+  },
+  data() {
+    return {
+      customColumns: [
+        {
+          label: '客户名称',
+          prop: 'name'
+        },
+        {
+          label: '手机',
+          prop: 'mobile'
+        },
+        {
+          label: '电话',
+          prop: 'telephone'
+        },
+        {
+          label: 'QQ',
+          prop: 'qq'
+        },
+        {
+          label: '微信',
+          prop: 'wechat'
+        },
+        {
+          label: '邮箱',
+          prop: 'email'
+        },
+        {
+          label: '地区编号',
+          prop: 'areaId'
+        },
+        {
+          label: '详细地址',
+          prop: 'detailAddress',
+          eclipse: true
+        },
+        {
+          label: '客户等级',
+          prop: 'level'
+        },
+        {
+          label: '客户来源',
+          prop: 'source'
+        },
+        {
+          label: '备注',
+          prop: 'remark'
+        },
+        {
+          label: '操作',
+          width: 150,
+          fixed: 'right',
+          render: (h, row) => {
+            const actions = [];
+            actions.push(<el-button type="text" size="mini" icon="el-icon-edit" onClick={() => this.handleUpdate(row)}>修改</el-button>)
+            actions.push(<el-button type="text" size="mini" icon="el-icon-delete" onClick={() => this.handleDelete(row)}>删除</el-button>)
+            return actions;
+          }
+        }
+      ],
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // CRM 客户表格数据
+      customerList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        name: undefined,
+        mobile: undefined,
+        telephone: undefined,
+        qq: undefined,
+        wechat: undefined,
+        email: undefined,
+        areaId: undefined,
+        detailAddress: undefined,
+        level: undefined,
+        source: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询CRM 客户列表 */
+    getList() {
+      this.loading = true;
+      listCustomer(this.queryParams).then(response => {
+        this.customerList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        customerId: undefined,
+        name: undefined,
+        followUpStatus: undefined,
+        contactLastTime: undefined,
+        contactLastContent: undefined,
+        contactNextTime: undefined,
+        ownerUserId: undefined,
+        ownerTime: undefined,
+        dealStatus: undefined,
+        mobile: undefined,
+        telephone: undefined,
+        qq: undefined,
+        wechat: undefined,
+        email: undefined,
+        areaId: undefined,
+        detailAddress: undefined,
+        industryId: undefined,
+        level: undefined,
+        source: undefined,
+        remark: undefined,
+        createBy: undefined,
+        createTime: undefined,
+        updateBy: undefined,
+        updateTime: undefined,
+        delFlag: 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.customerId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加CRM 客户";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const customerId = row.customerId || this.ids
+      getCustomer(customerId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改CRM 客户";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.customerId != null) {
+            updateCustomer(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addCustomer(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const customerIds = row.customerId || this.ids;
+      this.$modal.confirm('是否确认删除CRM 客户编号为"' + customerIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delCustomer(customerIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('wms/customer/export', {
+        ...this.queryParams
+      }, `customer_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
diff --git a/gear-ui3/src/views/oms/jounery/index.vue b/gear-ui3/src/views/oms/jounery/index.vue
new file mode 100644
index 0000000..1bfe29b
--- /dev/null
+++ b/gear-ui3/src/views/oms/jounery/index.vue
@@ -0,0 +1,294 @@
+<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="journalDate">
+        <el-date-picker clearable v-model="queryParams.journalDate" type="date" value-format="yyyy-MM-dd"
+          placeholder="请选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="摘要" prop="summary">
+        <el-input v-model="queryParams.summary" placeholder="请输入摘要" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="收支类型" prop="transType">
+        <el-input v-model="queryParams.transType" placeholder="请输入收支类型" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="对方户名" prop="counterpart">
+        <el-input v-model="queryParams.counterpart" placeholder="请输入对方户名" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="收入金额" prop="incomeAmount">
+        <el-input v-model="queryParams.incomeAmount" placeholder="请输入收入金额" clearable
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="支出金额" prop="expenseAmount">
+        <el-input v-model="queryParams.expenseAmount" placeholder="请输入支出金额" clearable
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="余额" prop="balanceAmount">
+        <el-input v-model="queryParams.balanceAmount" placeholder="请输入余额" clearable @keyup.enter.native="handleQuery" />
+      </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="journalList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键ID" align="center" prop="journalId" v-if="false" />
+      <el-table-column label="日期" align="center" prop="journalDate" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.journalDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="摘要" align="center" prop="summary" />
+      <el-table-column label="收支类型" align="center" prop="transType" />
+      <el-table-column label="对方户名" align="center" prop="counterpart" />
+      <el-table-column label="收入金额" align="center" prop="incomeAmount">
+        <!-- 如果不是0用绿字展示，否则用正常颜色 -->
+        <template slot-scope="scope">
+          <span :style="Number(scope.row.incomeAmount) !== 0 ? { color: '#28a745' } : {}">
+            {{ scope.row.incomeAmount }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="支出金额" align="center" prop="expenseAmount">
+        <!-- 如果不是0用红字展示，否则用正常颜色 -->
+        <template slot-scope="scope">
+          <span :style="Number(scope.row.expenseAmount) !== 0 ? { color: '#dc3545' } : {}">
+            {{ scope.row.expenseAmount }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="余额" align="center" prop="balanceAmount" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </KLPTable>
+
+    <pagination v-show="total > 0" :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="日期" prop="journalDate">
+          <el-date-picker clearable v-model="form.journalDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="请选择日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="摘要" prop="summary">
+          <el-input v-model="form.summary" placeholder="请输入摘要" />
+        </el-form-item>
+        <el-form-item label="收支类型" prop="transType">
+          <el-input v-model="form.transType" placeholder="请输入收支类型" />
+        </el-form-item>
+        <el-form-item label="对方户名" prop="counterpart">
+          <el-input v-model="form.counterpart" placeholder="请输入对方户名" />
+        </el-form-item>
+        <el-form-item label="收入金额" prop="incomeAmount">
+          <el-input v-model="form.incomeAmount" :disabled="form.journalId" placeholder="请输入收入金额" />
+        </el-form-item>
+        <el-form-item label="支出金额" prop="expenseAmount">
+          <el-input v-model="form.expenseAmount" :disabled="form.journalId" 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>
+  </div>
+</template>
+
+<script>
+import { listJournal, getJournal, delJournal, addJournal, updateJournal } from "@/api/finance/journal";
+
+export default {
+  name: "Journal",
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 资金日记账表格数据
+      journalList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        journalDate: undefined,
+        summary: undefined,
+        transType: undefined,
+        counterpart: undefined,
+        incomeAmount: undefined,
+        expenseAmount: undefined,
+        balanceAmount: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询资金日记账列表 */
+    getList() {
+      this.loading = true;
+      listJournal(this.queryParams).then(response => {
+        this.journalList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        journalId: undefined,
+        journalDate: undefined,
+        summary: undefined,
+        transType: undefined,
+        counterpart: undefined,
+        incomeAmount: undefined,
+        expenseAmount: undefined,
+        balanceAmount: undefined,
+        remark: undefined,
+        createBy: undefined,
+        createTime: undefined,
+        updateBy: undefined,
+        updateTime: undefined,
+        delFlag: 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.journalId)
+      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 journalId = row.journalId || this.ids
+      getJournal(journalId).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.journalId != null) {
+            updateJournal(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addJournal(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const journalIds = row.journalId || this.ids;
+      this.$modal.confirm('是否确认删除资金日记账编号为"' + journalIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delJournal(journalIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('klp/journal/export', {
+        ...this.queryParams
+      }, `journal_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
diff --git a/gear-ui3/src/views/oms/order/index.vue b/gear-ui3/src/views/oms/order/index.vue
new file mode 100644
index 0000000..e4ede99
--- /dev/null
+++ b/gear-ui3/src/views/oms/order/index.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <OrderPage :isPre="false" />  
+  </div>
+</template>
+
+<script>
+import OrderPage from './panels/orderPage.vue';
+
+export default {
+  name: 'Order',
+  components: {
+    OrderPage
+  }
+}
+</script>
\ No newline at end of file
diff --git a/gear-ui3/src/views/oms/order/panels/detail.vue b/gear-ui3/src/views/oms/order/panels/detail.vue
new file mode 100644
index 0000000..b60a5ec
--- /dev/null
+++ b/gear-ui3/src/views/oms/order/panels/detail.vue
@@ -0,0 +1,299 @@
+<template>
+  <div>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="Plus" size="mini" :disabled="!canEdit"
+          @click="handleAdd">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="Edit" size="mini" :disabled="single || !canEdit"
+          @click="handleUpdate">修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="Delete" size="mini" :disabled="multiple || !canEdit"
+          @click="handleDelete">删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="Download" size="mini" @click="handleExport">导出</el-button>
+      </el-col>
+    </el-row>
+
+    <KLPTable v-loading="loading" :data="orderDetailList">
+      <el-table-column label="产品" align="center">
+        <template slot-scope="scope">
+          <ProductInfo :product-id="scope.row.productId">
+            <template #default="{ product }">
+              {{ product.productName }}<span v-if="product.productCode">({{ product.productCode }})</span>
+            </template>
+          </ProductInfo>
+        </template>
+      </el-table-column>
+      <el-table-column label="BOM" align="center">
+        <template slot-scope="scope">
+          <BomInfoMini item-type="product" :item-id="scope.row.productId" />
+        </template>
+      </el-table-column>
+      <el-table-column label="产品数量" align="center" prop="quantity" />
+      <el-table-column label="单位" align="center" prop="unit" />
+      <el-table-column label="含税单价" align="center" prop="taxPrice" />
+      <el-table-column label="无税单价" align="center" prop="noTaxPrice" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="Edit"
+            @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button size="mini" type="text" icon="Delete"
+            @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </KLPTable>
+
+    <!-- 添加或修改订单明细对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="产品" prop="productId">
+          <ProductSelect :can-add="true" v-model="form.productId" placeholder="请选择产品" @change="onProductChange" />
+        </el-form-item>
+        <el-form-item label="产品数量" prop="quantity">
+          <el-input v-model="form.quantity" placeholder="请输入产品数量" />
+        </el-form-item>
+        <el-form-item label="单位" prop="unit">
+          <el-input v-model="form.unit" placeholder="单位" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="含税单价" prop="taxPrice">
+          <el-input-number :controls=false controls-position="right" v-model="form.taxPrice" placeholder="请输入含税单价" />
+        </el-form-item>
+        <el-form-item label="无税单价" prop="noTaxPrice">
+          <el-input-number :controls=false controls-position="right" v-model="form.noTaxPrice" placeholder="请输入无税单价"
+            :min="0" :max="form.taxPrice" />
+        </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>
+  </div>
+</template>
+
+<script>
+import { listOrderDetail, getOrderDetail, delOrderDetail, addOrderDetail, updateOrderDetail } from "@/api/wms/orderDetail";
+import { getOrder } from "@/api/wms/order";
+import ProductSelect from '@/components/Selector/ProductSelect';
+import { EOrderStatus } from "@/utils/enums";
+import ProductInfo from '@/components/Renderer/ProductInfo.vue';
+import BomInfoMini from '@/components/Renderer/BomInfoMini.vue';
+import KLPTable from '@/components/GearTable/index.vue';
+
+export default {
+  name: "OrderDetailPanel",
+  dicts: ['order_status'],
+  props: {
+    orderId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  components: {
+    ProductSelect,
+    ProductInfo,
+    BomInfoMini,
+    KLPTable
+  },
+  data() {
+    return {
+      buttonLoading: false,
+      loading: true,
+      ids: [],
+      single: true,
+      multiple: true,
+      total: 0,
+      orderDetailList: [],
+      orderInfo: null, // 订单信息
+      title: "",
+      open: false,
+      // 订单状态枚举
+      EOrderStatus,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 100,
+        orderId: this.orderId,
+        productId: undefined,
+        quantity: undefined,
+        unit: undefined,
+      },
+      form: {
+        orderId: this.orderId
+      },
+      rules: {
+        orderId: [
+          { required: true, message: "订单ID不能为空", trigger: "blur" }
+        ],
+        productId: [
+          { required: true, message: "产品ID不能为空", trigger: "blur" }
+        ],
+        quantity: [
+          { required: true, message: "产品数量不能为空", trigger: "blur" },
+          { pattern: /^[1-9]\d*$/, message: "产品数量必须为正整数", trigger: "blur" }
+        ],
+        unit: [
+          { required: true, message: "单位不能为空", trigger: "blur" }
+        ],
+      },
+    };
+  },
+  computed: {
+    // 是否可以编辑（订单状态为新建时才能编辑）
+    canEdit() {
+      return this.orderInfo && this.orderInfo.orderStatus === EOrderStatus.NEW;
+    }
+  },
+  watch: {
+    orderId(newVal) {
+      this.queryParams.orderId = newVal;
+      this.form.orderId = newVal;
+      this.getOrderInfo();
+      this.getList();
+    }
+  },
+  created() {
+    this.getOrderInfo();
+    this.getList();
+  },
+  methods: {
+    // 获取订单信息
+    getOrderInfo() {
+      if (this.orderId) {
+        getOrder(this.orderId).then(response => {
+          this.orderInfo = response.data;
+        }).catch(() => {
+          this.orderInfo = null;
+        });
+      }
+    },
+    getList() {
+      this.loading = true;
+      listOrderDetail(this.queryParams).then(response => {
+        this.orderDetailList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    reset() {
+      this.form = {
+        detailId: undefined,
+        orderId: this.orderId,
+        productId: undefined,
+        quantity: undefined,
+        taxPrice: undefined,
+        noTaxPrice: undefined,
+        unit: undefined,
+        remark: undefined,
+        delFlag: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined,
+      };
+      this.resetForm && this.resetForm("form");
+    },
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.detailId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    handleAdd() {
+      if (!this.canEdit) {
+        this.$modal && this.$modal.msgError("当前订单状态不允许新增明细");
+        return;
+      }
+      this.reset();
+      this.open = true;
+      this.title = "添加订单明细";
+    },
+    handleUpdate(row) {
+      if (!this.canEdit) {
+        this.$modal && this.$modal.msgError("当前订单状态不允许修改明细");
+        return;
+      }
+      this.loading = true;
+      this.reset();
+      const detailId = row.detailId || this.ids
+      getOrderDetail(detailId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改订单明细";
+      });
+    },
+    onProductChange(product) {
+      if (product) {
+        this.form.unit = product.unit;
+      } else {
+        this.form.unit = undefined;
+      }
+    },
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.detailId != null) {
+            updateOrderDetail(this.form).then(response => {
+              this.$modal && this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addOrderDetail(this.form).then(response => {
+              this.$modal && this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    handleDelete(row) {
+      if (!this.canEdit) {
+        this.$modal && this.$modal.msgError("当前订单状态不允许删除明细");
+        return;
+      }
+      const detailIds = row.detailId || this.ids;
+      this.$modal && this.$modal.confirm('是否确认删除订单明细编号为"' + detailIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delOrderDetail(detailIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal && this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    handleExport() {
+      this.download && this.download('oa/orderDetail/export', {
+        ...this.queryParams
+      }, `orderDetail_${new Date().getTime()}.xlsx`)
+    },
+  },
+};
+</script>
+
+<style scoped>
+.el-button--text {
+  margin: 0 4px;
+  padding: 0;
+}
+</style>
diff --git a/gear-ui3/src/views/oms/order/panels/orderPage.vue b/gear-ui3/src/views/oms/order/panels/orderPage.vue
new file mode 100644
index 0000000..b67cafc
--- /dev/null
+++ b/gear-ui3/src/views/oms/order/panels/orderPage.vue
@@ -0,0 +1,484 @@
+<template>
+  <div class="app-container">
+    <!-- 左右布局容器 -->
+    <el-row :gutter="20">
+      <!-- 左侧：使用klp-list组件（占6列） -->
+      <el-col :span="6" style="display: table-cell;">
+        <!-- 搜索表单 - 精简搜索项 -->
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"
+          class="mb-4">
+          <el-row :gutter="10">
+            <el-col :span="16">
+              <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"
+                class="w-full">新增订单</el-button>
+            </el-col>
+          </el-row>
+        </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 }">
+            <!-- 删除按钮 -->
+            <el-button size="mini" type="text" style="color: red" icon="el-icon-delete" @click.stop="handleDelete(item)"></el-button>
+          </template>
+        </klp-list>
+
+        <!-- 分页组件 -->
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" class="mt-4" />
+      </el-col>
+
+      <!-- 右侧：详情区（占18列） -->
+      <el-col :span="18">
+        <div>
+          <!-- 未选中行时显示提示 -->
+          <div v-if="!selectedOrderId" class="empty-tip">
+            <el-empty description="请从左侧选择一个订单查看详情" />
+          </div>
+
+          <!-- 选中行时显示Tab详情 -->
+          <div v-else>
+            <!-- Tab容器 -->
+            <el-tabs v-loading="loading" v-model="activeTab" type="border-card" class="mt-2">
+              <!-- 订单信息Tab -->
+              <el-tab-pane label="订单信息" name="orderInfo">
+                <el-form ref="detailForm" :model="form" :rules="rules" label-width="80px" size="small" class="mt-4">
+                  <el-form-item label="订单ID" prop="orderId">
+                    <el-input style="width: 60%;" v-model="form.orderId" placeholder="无" disabled>
+                      <el-button style="padding: -1;" slot="append" size="mini" type="text" icon="el-icon-document-copy"
+                        @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-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-form-item>
+                  
+                  <el-form-item label="订单状态" prop="orderStatus">
+                    <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>
+
+                  <!-- 更新按钮 -->
+                  <el-form-item class="text-right">
+                    <el-button type="primary" size="mini" :loading="buttonLoading"
+                      @click="submitDetailForm">更新订单信息</el-button>
+                  </el-form-item>
+                </el-form>
+              </el-tab-pane>
+
+              <!-- 订单详情Tab -->
+              <el-tab-pane label="订单详情" name="orderDetail">
+                <div class="mt-4">
+                  <OrderDetailPanel :orderId="selectedOrderId" />
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 新增订单弹窗 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="addForm" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="订单编号" prop="orderCode">
+              <el-input v-model="form.orderCode" placeholder="请输入订单编号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="客户名称" prop="customerId">
+              <customer-select v-model="form.customerId" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="销售经理" prop="salesManager">
+              <el-input v-model="form.salesManager" style="width: 100%;" placeholder="请输入销售经理" />
+            </el-form-item>
+          </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-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="无税金额" prop="noTaxAmount">
+              <el-input-number :controls="false" v-model="form.noTaxAmount" placeholder="请输入无税金额" precision="2"
+                :min="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" rows="3" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitAddForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getOrder, delOrder, addOrder, updateOrder, listByStatus } from "@/api/wms/order";
+import OrderDetailPanel from './detail.vue';
+import { EOrderStatus } from "@/utils/enums";
+import CustomerSelect from '@/components/KLPService/CustomerSelect/index.vue';
+import klpList from "@/components/KLPUI/KLPList/index.vue";
+
+export default {
+  name: "Order",
+  components: { OrderDetailPanel, CustomerSelect, klpList },
+  dicts: ['order_status'],
+  props: {
+    tradeType: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    orderQueryStatus() {
+      return 0
+    }
+  },
+  data() {
+    return {
+      // 订单状态枚举
+      EOrderStatus,
+      // 按钮loading
+      buttonLoading: false,
+      // 列表加载遮罩
+      loading: true,
+      // 选中的订单ID集合
+      selectedIds: {},
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 订单列表数据
+      orderList: [],
+      // 新增弹窗标题
+      title: "",
+      // 新增弹窗显示状态
+      open: false,
+      // 当前选中的订单ID（控制右侧详情显示）
+      selectedOrderId: null,
+      // 右侧激活的Tab
+      activeTab: "orderDetail",
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        orderCode: undefined,
+        customerId: undefined,
+        salesManager: undefined,
+        orderStatus: undefined,
+        tradeType: this.tradeType
+      },
+      // 表单参数
+      form: {
+        orderId: undefined,
+        orderCode: undefined,
+        customerId: undefined,
+        salesManager: undefined,
+        orderStatus: undefined,
+        tradeType: this.tradeType,
+        remark: undefined,
+        delFlag: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined,
+        taxAmount: 0,
+        noTaxAmount: 0,
+      },
+      // 表单校验规则
+      rules: {
+        orderCode: [
+          { required: true, message: "请输入订单编号", trigger: "blur" }
+        ],
+        customerId: [
+          { required: true, message: "请选择客户名称", trigger: "change" }
+        ],
+        salesManager: [
+          { required: true, message: "请输入销售经理", trigger: "blur" }
+        ],
+        taxAmount: [
+          { required: true, message: "请输入含税金额", trigger: "blur" }
+        ],
+        noTaxAmount: [
+          { required: true, message: "请输入无税金额", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.queryParams.orderStatus = this.orderQueryStatus;
+    this.getList();
+  },
+  methods: {
+    /** 查询订单列表 */
+    getList() {
+      this.loading = true;
+      listByStatus(this.queryParams).then(response => {
+        this.orderList = response.rows;
+        this.total = response.total;
+
+        // 重置选中状态
+        this.selectedIds = {};
+
+        // 如果之前选中的订单不在列表中了，清空选中状态
+        if (this.selectedOrderId && !this.orderList.some(item => item.orderId === this.selectedOrderId)) {
+          this.selectedOrderId = null;
+        }
+
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+
+    /** 点击列表项加载详情 */
+    handleRowClick(item) {
+      this.selectedOrderId = item.orderId;
+      this.loadOrderDetail(item.orderId);
+    }, 
+
+    /** 加载订单详情 */
+    loadOrderDetail(orderId) {
+      this.buttonLoading = true;
+      getOrder(orderId).then(response => {
+        this.form = { ...response.data };
+        this.form.taxAmount = this.form.taxAmount || 0;
+        this.form.noTaxAmount = this.form.noTaxAmount || 0;
+      }).catch(() => {
+        this.$modal.msgError("加载订单详情失败");
+      }).finally(() => {
+        this.buttonLoading = false;
+      });
+    },
+
+    /** 订单状态变更 */
+    handleOrderStatusChange() {
+      updateOrder(this.form).then(response => {
+        this.$modal.msgSuccess("修改成功");
+        this.getList();
+      }).catch(() => {
+        this.$modal.msgError("修改失败");
+        this.loadOrderDetail(this.selectedOrderId); // 失败后重新加载原数据
+      });
+    },
+
+    /** 取消新增 */
+    cancel() {
+      this.open = false;
+      this.resetForm("addForm");
+      this.form = {
+        orderId: undefined,
+        orderCode: undefined,
+        customerId: undefined,
+        salesManager: undefined,
+        orderStatus: this.orderQueryStatus,
+        tradeType: this.tradeType,
+        remark: undefined,
+        taxAmount: 0,
+        noTaxAmount: 0,
+      };
+    },
+
+    /** 搜索 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    /** 重置搜索 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.orderStatus = this.orderQueryStatus;
+      this.handleQuery();
+    },
+
+    /** 重置表单 */
+    resetForm(formRef) {
+      if (this.$refs[formRef]) {
+        this.$refs[formRef].resetFields();
+      }
+    },
+
+    /** 复制订单ID */
+    copyOrderId(orderId) {
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(orderId).then(() => {
+          this.$modal.msgSuccess("复制成功");
+        }).catch(() => {
+          this.$modal.msgError("复制失败，请手动复制");
+        });
+      } else {
+        this.$modal.msgError("浏览器不支持复制功能");
+      }
+    },
+
+    /** 新增订单 */
+    handleAdd() {
+      this.resetForm("addForm");
+      this.form = {
+        orderId: undefined,
+        orderCode: undefined,
+        customerId: undefined,
+        salesManager: undefined,
+        orderStatus: this.orderQueryStatus,
+        remark: undefined,
+        taxAmount: 0,
+        noTaxAmount: 0,
+      };
+      this.open = true;
+      this.title = "添加订单";
+    },
+
+    /** 提交新增表单 */
+    submitAddForm() {
+      this.$refs["addForm"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          addOrder(this.form).then(response => {
+            this.$modal.msgSuccess("新增成功");
+            this.open = false;
+            this.getList();
+          }).catch(() => {
+            this.$modal.msgError("新增失败");
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      });
+    },
+
+    /** 提交详情更新表单 */
+    submitDetailForm() {
+      this.$refs["detailForm"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          updateOrder(this.form).then(response => {
+            this.$modal.msgSuccess("更新成功");
+            this.getList();
+          }).catch(() => {
+            this.$modal.msgError("更新失败");
+          }).finally(() => {
+            this.buttonLoading = false;
+          });
+        }
+      });
+    },
+
+    /** 删除订单 */
+    handleDelete(row) {
+      this.$modal.confirm(`是否确认删除订单"${row.orderCode}"？`).then(() => {
+        this.loading = true;
+        return delOrder([row.orderId]);
+      }).then(() => {
+        this.$modal.msgSuccess("删除成功");
+        // 如果删除的是当前选中的订单，清空详情
+        if (this.selectedOrderId === row.orderId) {
+          this.selectedOrderId = null;
+        }
+        this.getList();
+      }).catch(() => {
+        this.$modal.msgError("删除失败");
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+
+    /** 预订单确认 */
+    handleStartProduction(row) {
+      this.$modal.confirm(`是否确认将订单"${row.orderCode}"转为正式订单？`).then(() => {
+        return updateOrder({
+          orderId: row.orderId,
+          orderStatus: 1
+        });
+      }).then(response => {
+        this.$modal.msgSuccess("已转化为正式订单");
+        if (this.selectedOrderId === row.orderId) {
+          this.selectedOrderId = null;
+        }
+        this.getList();
+      }).catch(() => {
+        this.$modal.msgError("转化失败");
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* 页面容器样式 */
+.page-container {
+  height: 100%;
+  padding: 16px;
+}
+
+/* 空提示样式 */
+.empty-tip {
+  height: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 表单样式调整 */
+.el-form-item {
+  margin-bottom: 16px;
+}
+
+::v-deep .el-input-group__append,
+::v-deep .el-input-group__prepend {
+  width: 20px !important;
+  box-sizing: border-box !important;
+  padding: 0 10px !important;
+  text-align: center !important;
+}
+</style>
diff --git a/gear-ui3/src/views/oms/order/trade.vue b/gear-ui3/src/views/oms/order/trade.vue
new file mode 100644
index 0000000..e4ede99
--- /dev/null
+++ b/gear-ui3/src/views/oms/order/trade.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <OrderPage :isPre="false" />  
+  </div>
+</template>
+
+<script>
+import OrderPage from './panels/orderPage.vue';
+
+export default {
+  name: 'Order',
+  components: {
+    OrderPage
+  }
+}
+</script>
\ No newline at end of file
diff --git a/gear-ui3/src/views/oms/pay/index.vue b/gear-ui3/src/views/oms/pay/index.vue
new file mode 100644
index 0000000..6b93670
--- /dev/null
+++ b/gear-ui3/src/views/oms/pay/index.vue
@@ -0,0 +1,373 @@
+<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>
+  </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
+  },
+  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/gear-ui3/src/views/oms/receive/index.vue b/gear-ui3/src/views/oms/receive/index.vue
new file mode 100644
index 0000000..2c10ca7
--- /dev/null
+++ b/gear-ui3/src/views/oms/receive/index.vue
@@ -0,0 +1,373 @@
+<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>
+  </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
+  },
+  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;
+      });
+    }
+  }
+};
+</script>
diff --git a/gear-ui3/src/views/product/info/index.vue b/gear-ui3/src/views/product/info/index.vue
index 7caeb15..bae4e06 100644
--- a/gear-ui3/src/views/product/info/index.vue
+++ b/gear-ui3/src/views/product/info/index.vue
@@ -58,12 +58,6 @@
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
           <el-button size="mini" type="text" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
-          <!-- <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-document"
-            @click="goLedger(scope.row)"
-          >台账</el-button> -->
           <el-button size="mini" type="text" icon="Document"
             @click="handleInstallManual(scope.row)">安装说明书</el-button>
           <el-button size="mini" type="text" icon="DataAnalysis" @click="handleBom(scope.row)">BOM</el-button>
@@ -83,6 +77,9 @@
         <el-form-item label="产品名称" prop="productName">
           <el-input v-model="form.productName" placeholder="请输入产品名称" />
         </el-form-item>
+        <el-form-item label="产品分类" prop="categoryId">
+          <el-input v-model="form.categoryId" placeholder="请输入产品分类" />
+        </el-form-item>
         <el-form-item label="负责人" prop="owner">
           <el-input v-model="form.owner" :multiple="false" placeholder="请填写负责人" />
         </el-form-item>
diff --git a/gear-ui3/src/views/purchase/shop/index.vue b/gear-ui3/src/views/purchase/shop/index.vue
index 3c6cd54..c08cb7a 100644
--- a/gear-ui3/src/views/purchase/shop/index.vue
+++ b/gear-ui3/src/views/purchase/shop/index.vue
@@ -115,7 +115,7 @@
         </el-form-item>
         <el-form-item label="供应商" prop="supplierId">
           <el-select v-model="form.supplierId" filterable clearable placeholder="请选择供应商">
-            <el-option 
+            <el-option
               v-for="value in supplierList"
               :value="value.supplierId"
               :label="value.name"