优化订单退款

src/views/order/index.vue

@@ -17,11 +17,17 @@
     <div class="table_wrap">
       <div class="table">
         <el-table :data="tableData.list" v-loading="tableData.loading" border strip height="100%">
-          <el-table-column label="台桌" prop="tableName" width="80"></el-table-column>
-          <el-table-column label="订单信息" width="240">
+          <el-table-column label="台桌" prop="tableName" width="80" align="center">
+            <template v-slot="scope">
+              <span v-if="scope.row.tableName">{{ scope.row.tableName }}</span>
+              <span v-else>无</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="订单信息" width="340">
             <template v-slot="scope">
               <div class="column">
                 <div class="row">订单号：{{ scope.row.orderNo }}</div>
+                <div class="row">下单时间：{{ scope.row.createTime }}</div>
                 <div class="row">
                   订单类型：{{ filterLable("orderType", scope.row.orderType) }}
                 </div>
@@ -69,9 +75,14 @@
             <template v-slot="scope">
               <div class="column">
                 <div class="row">
-                  <el-button type="primary" @click="RefundDrawerRef.show(scope.row)">订单退款</el-button>
+                  <el-button type="warning" :disabled="scope.row.status != 'unpaid'" :loading="scope.row.payLoading"
+                    @click="orderDoneHandle(scope.row)">结算订单</el-button>
                 </div>
-                <div class="row" style="margin-top: 10px">
+                <div class="row">
+                  <el-button type="primary" :disabled="refundState(scope.row.status)"
+                    @click="RefundDrawerRef.show(scope.row)">订单退款</el-button>
+                </div>
+                <div class="row">
                   <el-button type="success" @click="PrintDrawerRef.show(scope.row)">
                     订单打印
                   </el-button>
@@ -92,19 +103,26 @@
   <RefundDrawer ref="RefundDrawerRef" @success="queryFormHandle" />
   <!-- 打印操作 -->
   <PrintDrawer ref="PrintDrawerRef" />
+  <!-- 结算订单 -->
+  <SettleAccount ref="SettleAccountRef" @success="orderListAjax" />
 </template>
 
 <script setup>
 import { onMounted, ref, reactive } from "vue";
 import { orderList } from "@/api/order.js";
 import { useGlobal } from "@/store/global.js";
+import { useGoods } from '@/store/goods.js'
 import DateRange from "./components/dateRange.vue";
 import RefundDrawer from "./components/refundDrawer.vue";
 import PrintDrawer from "./components/printDrawer.vue";
+import SettleAccount from '@/views/home/components/settleAccount.vue'
 
 const RefundDrawerRef = ref(null);
 const PrintDrawerRef = ref(null);
 const DateRangeRef = ref(null);
+const SettleAccountRef = ref(null)
+
+const goodsStore = useGoods()
 const globalStore = useGlobal();
 
 const queryForm = ref({
@@ -154,11 +172,51 @@ function filterLable(key, type) {
   }
 }
 
+// 过滤退款条件
+function refundState(state) {
+  switch (state) {
+    case 'unpaid':
+      return true;
+    case 'in-production':
+      return false;
+    case 'wait-out':
+      return false;
+    case 'done':
+      return false;
+    case 'refunding':
+      return false;
+    case 'refund':
+      return true;
+    case 'part-refund':
+      return false;
+    case 'cancelled':
+      return true;
+    default:
+      break;
+  }
+}
+
+// 结算订单
+async function orderDoneHandle(row) {
+  try {
+    row.payLoading = true
+    await goodsStore.historyOrderAjax('', row.id)
+    row.payLoading = false
+    goodsStore.calcCartInfo()
+    SettleAccountRef.value.show()
+  } catch (error) {
+    console.log(error);
+  }
+}
+
 // 获取订单列表
 async function orderListAjax() {
   try {
     tableData.loading = true;
     const res = await orderList(queryForm.value);
+    res.records.map(item => {
+      item.payLoading = false
+    })
     tableData.list = [];
     tableData.list = res.records;
     tableData.total = +res.totalRow;
@@ -218,7 +276,7 @@ onMounted(() => {
 .column {
   display: flex;
   flex-direction: column;
-  padding: 10px 0;
+  gap: 10px;
 
   .row {
     width: 100%;