✨ feat: 订单模块优化

gear-ui3/src/views/oms/order/panels/orderPage.vue

@@ -15,17 +15,32 @@
         </el-row>
 
         <!-- klp-list组件 -->
-        <klp-list :list-data="orderList" :model-value="selectedIds" title-field="orderCode" list-key="orderId"
-          title-label="订单编号" :loading="loading" @item-click="handleRowClick">
-          <!-- 自定义操作按钮 -->
+        <klp-list :list-data="orderList" list-key="orderId" :loading="loading" @item-click="handleRowClick"
+          info1-field="orderCode" info1-max-percent="40" info5-field="createTime" info4-field="taxAmount">
+          <template #info4="{ item }">
+            <span class="info-value info-value--primary">
+              {{ item.taxAmount }}元（含税）
+            </span>
+          </template>
+
+          <template #info1="{ item }">
+            <span class="info-value info-value--primary">
+              {{ item.salesManager }}【{{ item.orderCode }}】
+            </span>
+          </template>
+
+          <template #info2="{ item }">
+            <dict-tag :options="order_status" :value="item.orderStatus" />
+          </template>
+
+
           <template #actions="{ item }">
-            <!-- 删除按钮 -->
             <el-button size="small" type="text" style="color: red" icon="Delete"
               @click.stop="handleDelete(item)"></el-button>
           </template>
         </klp-list>
 
-        <!-- 分页组件 -->
+
         <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
           v-model:limit="queryParams.pageSize" @pagination="getList" class="mt-4" layout="total, pager" />
       </el-col>
@@ -90,6 +105,8 @@
                   <el-form-item class="text-right">
                     <el-button type="primary" size="small" :loading="buttonLoading"
                       @click="submitDetailForm">更新订单信息</el-button>
+                    <el-button type="primary" size="small" :loading="buttonLoading"
+                      @click="copyOrderId(form.orderId)">复制订单ID</el-button>
                   </el-form-item>
                 </el-form>
               </el-tab-pane>
@@ -106,6 +123,18 @@
                   <ReturnExchange :orderId="selectedOrderId" />
                 </div>
               </el-tab-pane>
+
+              <el-tab-pane label="应收款" name="receive">
+                <div class="mt-4">
+                  <Receive :orderId="selectedOrderId" />
+                </div>
+              </el-tab-pane>
+
+              <el-tab-pane label="应付款" name="pay">
+                <div class="mt-4">
+                  <Pay :orderId="selectedOrderId" />
+                </div>
+              </el-tab-pane>
             </el-tabs>
           </div>
         </div>
@@ -131,6 +160,14 @@
               <el-input v-model="form.salesManager" style="width: 100%;" placeholder="请输入销售经理" />
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="交易类型" prop="tradeType">
+              <el-select v-model="form.tradeType" placeholder="请选择交易类型">
+                <el-option label="内贸" value="0" />
+                <el-option label="外贸" value="1" />
+              </el-select>
+            </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="请输入含税金额"
@@ -160,16 +197,20 @@
 
 <script>
 import { getOrder, delOrder, addOrder, updateOrder, listOrder } from "@/api/oms/order";
+
 import OrderDetailPanel from './detail.vue';
 import { EOrderStatus } from "@/utils/enums";
 import CustomerSelect from '@/components/CustomerSelect/index.vue';
 import klpList from "@/components/GearList/index.vue";
 import { getCurrentInstance } from "vue";
+
 import ReturnExchange from './return.vue';
+import Pay from './pay.vue';
+import Receive from './receive.vue';
 
 export default {
   name: "Order",
-  components: { OrderDetailPanel, CustomerSelect, klpList, ReturnExchange },
+  components: { OrderDetailPanel, CustomerSelect, klpList, ReturnExchange, Pay, Receive },
   props: {
     tradeType: {
       type: String,
@@ -222,7 +263,8 @@ export default {
         orderCode: undefined,
         customerId: undefined,
         salesManager: undefined,
-        tradeType: this.tradeType
+        // tradeType: this.tradeType
+        taxAmount: undefined,
       },
       // 表单参数
       form: {
@@ -230,7 +272,8 @@ export default {
         orderCode: undefined,
         customerId: undefined,
         salesManager: undefined,
-        tradeType: this.tradeType,
+        // tradeType: this.tradeType,
+        noTaxAmount: undefined,
         remark: undefined,
         delFlag: undefined,
         createTime: undefined,
@@ -261,7 +304,7 @@ export default {
     };
   },
   created() {
-    this.queryParams.orderStatus = this.orderQueryStatus;
+    // this.queryParams.orderStatus = this.orderQueryStatus;
     this.getList();
   },
   methods: {
@@ -327,7 +370,8 @@ export default {
         customerId: undefined,
         salesManager: undefined,
         orderStatus: this.orderQueryStatus,
-        tradeType: this.tradeType,
+        taxAmount: undefined,
+        // tradeType: this.tradeType,
         remark: undefined,
         taxAmount: 0,
         noTaxAmount: 0,