✨ feat: l2过程跟踪

klp-ui/src/views/finance/order/index.vue

@@ -4,43 +4,40 @@
       <el-col :span="6">
         <div>
           <el-row>
-            <el-input 
-              v-model="queryParams.orderCode" 
-              placeholder="请输入单据编号" 
-              clearable
-              @keyup.enter.native="handleQuery" 
-            />
+            <el-input v-model="queryParams.orderCode" placeholder="请输入单据编号" clearable
+              @keyup.enter.native="handleQuery" />
           </el-row>
-          
-          <!-- 使用klp-list组件替换el-tree -->
-          <klp-list 
-            v-loading="orderListLoading"
-            :list-data="orderList"
-            list-key="orderId"
-            title-label="订单编号"
-            title-field="orderCode"
-            :title-max-width="180"
-            @item-click="handleItemClick"
-          >
-            <!-- 操作按钮插槽 -->
-            <!-- <template #actions="{ item, isSelected }">
-              <el-button 
-                size="mini" 
-                type="text" 
-                icon="el-icon-view"
-                @click.stop="handleViewDetail(item)"
-                title="查看详情"
-              ></el-button>
-            </template> -->
+
+          <klp-list :list-data="orderList" list-key="orderId" :loading="loading" @item-click="handleItemClick"
+            info1-field="orderCode" info1-max-percent="40" info5-field="createTime" info4-field="taxAmount">
+            <!-- info4 插槽：Vue2 用 slot 指定插槽名，slot-scope 接收作用域变量 -->
+            <template slot="info4" slot-scope="{ item }">
+              <span class="info-value info-value--primary">
+                {{ item.taxAmount }}元（含税）
+              </span>
+            </template>
+
+            <!-- info1 插槽：同理修改插槽语法 -->
+            <template slot="info1" slot-scope="{ item }">
+              <span class="info-value info-value--primary">
+                {{ item.salesManager }}【{{ item.orderCode }}】
+              </span>
+            </template>
+
+            <!-- info2 插槽：dict-tag 若为 Vue2 兼容组件，用法不变 -->
+            <template slot="info2" slot-scope="{ item }">
+              <dict-tag :options="dict.type.order_status" :value="item.orderStatus" />
+            </template>
+
+            <!-- actions 插槽：el-button 为 Element UI Vue2 组件，用法不变 -->
+            <template slot="actions" slot-scope="{ item }">
+              <el-button size="small" type="text" style="color: red" icon="el-icon-delete"
+                @click.stop="handleDelete(item)"></el-button>
+            </template>
           </klp-list>
-          
-          <pagination 
-            :page.sync="queryParams.pageNum" 
-            :limit.sync="queryParams.pageSize" 
-            :total="total"
-            layout="prev, pager, next" 
-            @pagination="getList" 
-          />
+
+          <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :total="total"
+            layout="prev, pager, next" @pagination="getList" />
         </div>
       </el-col>
 
@@ -72,44 +69,14 @@
             <order-detail-list :orderId="currentOrder.orderId" :editable="false" />
           </el-tab-pane>
           <el-tab-pane label="应收明细" name="receivable">
-            <KLPTable v-loading="rightLoading" :data="currentOrder.receivables" empty-text="暂无数据">
-              <el-table-column label="客户" align="center" prop="customerName" />
-              <el-table-column label="订单ID" align="center" prop="orderId" />
-              <el-table-column label="到期日" align="center" prop="dueDate" width="180">
-                <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
-                  <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
-                  <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">
-                    还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天
-                  </el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="应收金额" align="center" prop="amount" />
-              <el-table-column label="已收金额" align="center" prop="paidAmount" />
-              <el-table-column label="未收金额" align="center" prop="balanceAmount" />
-              <el-table-column label="状态" align="center" prop="status" />
-              <el-table-column label="备注" align="center" prop="remark" />
-            </KLPTable>
+            <div style="margin-top: 10px;">
+              <ReceiveTable :order-id="currentOrder.orderId" :searchable="false" />
+            </div>
           </el-tab-pane>
           <el-tab-pane label="应付明细" name="payable">
-            <KLPTable v-loading="rightLoading" :data="currentOrder.payables" empty-text="暂无数据">
-              <el-table-column label="供应商" align="center" prop="supplierName" />
-              <el-table-column label="订单ID" align="center" prop="orderId" />
-              <el-table-column label="到期日" align="center" prop="dueDate" width="180">
-                <template slot-scope="scope">
-                  <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
-                  <el-tag v-if="new Date(scope.row.dueDate) < new Date()" type="danger">过期</el-tag>
-                  <el-tag v-else-if="new Date(scope.row.dueDate) > new Date()" type="success">
-                    还剩{{ parseInt((new Date(scope.row.dueDate) - new Date()) / (1000 * 60 * 60 * 24)) }}天
-                  </el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="应付金额" align="center" prop="amount" />
-              <el-table-column label="已付金额" align="center" prop="paidAmount" />
-              <el-table-column label="未付金额" align="center" prop="balanceAmount" />
-              <el-table-column label="状态" align="center" prop="status" />
-              <el-table-column label="备注" align="center" prop="remark" />
-            </KLPTable>
+            <div style="margin-top: 10px;">
+              <PayTable :order-id="currentOrder.orderId" :searchable="false" />
+            </div>
           </el-tab-pane>
           <el-tab-pane label="凭证管理" name="document">
             <KLPTable :data="currentOrder.documents" style="width: 100%" empty-text="暂无数据">
@@ -136,13 +103,18 @@ import { listFinancialDocument } from "@/api/finance/financialDocument";
 
 import OrderDetailList from '@/views/wms/order/panels/detail.vue'
 import klpList from "@/components/KLPUI/KLPList/index.vue"; // 引入klp-list组件
+import ReceiveTable from '../components/ReceiveTable.vue';
+import PayTable from '../components/PayTable.vue';
 
 export default {
   name: "Order",
   components: {
     OrderDetailList,
-    klpList // 注册klp-list组件
+    klpList, // 注册klp-list组件
+    ReceiveTable,
+    PayTable
   },
+  dicts: ['order_status'],
   data() {
     return {
       activeTab: "orderDetail",
@@ -163,7 +135,7 @@ export default {
   },
   methods: {
     handleQuery() {
-      this.queryParams.pageNum = 1; 
+      this.queryParams.pageNum = 1;
       this.getList();
     },
     getList() {
@@ -181,12 +153,12 @@ export default {
         this.currentOrder = null;
         return;
       }
-      
+
       if (this.rightLoading) {
         this.$message.warning('请等待当前订单加载完成');
         return;
       }
-      
+
       this.currentOrder = selectedItem;
       this.fetchData(selectedItem.orderId);
     },
@@ -210,7 +182,7 @@ export default {
           listPayable({ orderId, pageSize: 1000 }),
           listFinancialDocument({ orderId, pageSize: 1000 })
         ]);
-        
+
         this.currentOrder = {
           ...this.currentOrder,
           details: orderDetailRes.rows,