恢复用户列表功能

src/views/booking/order/components/orderEdit.vue

@@ -1,11 +1,11 @@
 <!-- 编辑弹窗 -->
 <template>
   <ele-modal
-    :width="800"
+    :width="1000"
     :visible="visible"
     :maskClosable="false"
     :maxable="maxable"
-    :title="isUpdate ? '编辑预约订单' : '添加预约订单'"
+    :title="isUpdate ? '编辑订单' : '添加订单'"
     :body-style="{ paddingBottom: '28px' }"
     @update:visible="updateVisible"
     @ok="save"
@@ -23,40 +23,38 @@
         <a-input
           allow-clear
           placeholder="请输入订单编号"
+          :disabled="true"
           v-model:value="form.orderNo"
         />
       </a-form-item>
-      <a-form-item label="微信支付订单号" name="wechatOrder">
+      <a-form-item label="微信支付订单号" name="transactionId">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入微信支付订单号"
-          v-model:value="form.wechatOrder"
+          v-model:value="form.transactionId"
         />
       </a-form-item>
       <a-form-item label="微信退款订单号" name="refundOrder">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入微信退款订单号"
           v-model:value="form.refundOrder"
         />
       </a-form-item>
-      <a-form-item label="场馆id用于权限判断" name="merchantId">
+      <a-form-item label="商户ID" name="merchantId">
         <a-input
           allow-clear
-          placeholder="请输入场馆id用于权限判断"
+          :disabled="true"
+          placeholder="请输入商户ID"
           v-model:value="form.merchantId"
         />
       </a-form-item>
-      <a-form-item label="用户id" name="userId">
-        <a-input
-          allow-clear
-          placeholder="请输入用户id"
-          v-model:value="form.userId"
-        />
-      </a-form-item>
       <a-form-item label="使用的优惠券id" name="couponId">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入使用的优惠券id"
           v-model:value="form.couponId"
         />
@@ -64,41 +62,31 @@
       <a-form-item label="使用的会员卡id" name="cardId">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入使用的会员卡id"
           v-model:value="form.cardId"
         />
       </a-form-item>
-      <a-form-item label="关联管理员id" name="aid">
-        <a-input
-          allow-clear
-          placeholder="请输入关联管理员id"
-          v-model:value="form.aid"
-        />
-      </a-form-item>
-      <a-form-item label="核销管理员id" name="adminId">
-        <a-input
-          allow-clear
-          placeholder="请输入核销管理员id"
-          v-model:value="form.adminId"
-        />
-      </a-form-item>
-      <a-form-item label="IC卡号" name="code">
+      <a-form-item label="IC卡号" name="icCard">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入IC卡号"
-          v-model:value="form.code"
+          v-model:value="form.icCard"
         />
       </a-form-item>
-      <a-form-item label="真实姓名" name="name">
+      <a-form-item label="真实姓名" name="realName">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入真实姓名"
-          v-model:value="form.name"
+          v-model:value="form.realName"
         />
       </a-form-item>
       <a-form-item label="手机号码" name="phone">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入手机号码"
           v-model:value="form.phone"
         />
@@ -106,16 +94,15 @@
       <a-form-item label="订单总额" name="totalPrice">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入订单总额"
           v-model:value="form.totalPrice"
         />
       </a-form-item>
-      <a-form-item
-        label="减少的金额，使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格"
-        name="reducePrice"
-      >
+      <a-form-item label="减少的金额" name="reducePrice">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入减少的金额，使用VIP会员折扣、优惠券抵扣、优惠券折扣后减去的价格"
           v-model:value="form.reducePrice"
         />
@@ -123,147 +110,139 @@
       <a-form-item label="实际付款" name="payPrice">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入实际付款"
           v-model:value="form.payPrice"
         />
       </a-form-item>
-      <a-form-item label="用于统计" name="price">
-        <a-input
-          allow-clear
-          placeholder="请输入用于统计"
-          v-model:value="form.price"
-        />
-      </a-form-item>
-      <a-form-item label="价钱，用于积分赠送" name="money">
-        <a-input
-          allow-clear
-          placeholder="请输入价钱，用于积分赠送"
-          v-model:value="form.money"
-        />
-      </a-form-item>
-      <a-form-item label="退款金额" name="refundMoney">
+      <!--      <a-form-item label="用于统计" name="price">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入用于统计"-->
+      <!--          v-model:value="form.price"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="价钱，用于积分赠送" name="money">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入价钱，用于积分赠送"-->
+      <!--          v-model:value="form.money"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <a-form-item label="退款金额" name="refundMoney" v-if="form.refundMoney">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入退款金额"
           v-model:value="form.refundMoney"
         />
       </a-form-item>
-      <a-form-item label="教练价格" name="coachPrice">
+      <!--      <a-form-item label="教练价格" name="coachPrice">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入教练价格"-->
+      <!--          v-model:value="form.coachPrice"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="教练id" name="coachId">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入教练id"-->
+      <!--          v-model:value="form.coachId"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <a-form-item label="支付方式" name="payType">
         <a-input
           allow-clear
-          placeholder="请输入教练价格"
-          v-model:value="form.coachPrice"
-        />
-      </a-form-item>
-      <a-form-item label="教练id" name="coachId">
-        <a-input
-          allow-clear
-          placeholder="请输入教练id"
-          v-model:value="form.coachId"
-        />
-      </a-form-item>
-      <a-form-item
-        label="1微信支付，2积分，3支付宝，4现金，5POS机，6VIP月卡，7VIP年卡，8VIP次卡，9IC月卡，10IC年卡，11IC次卡，12免费，13VIP充值卡，14IC充值卡，15积分支付，16VIP季卡，17IC季卡"
-        name="payType"
-      >
-        <a-input
-          allow-clear
-          placeholder="请输入1微信支付，2积分，3支付宝，4现金，5POS机，6VIP月卡，7VIP年卡，8VIP次卡，9IC月卡，10IC年卡，11IC次卡，12免费，13VIP充值卡，14IC充值卡，15积分支付，16VIP季卡，17IC季卡"
+          :disabled="true"
+          placeholder="请输入支付方式 0余额支付, 1微信支付，2积分，3支付宝，4现金，5POS机，6VIP月卡，7VIP年卡，8VIP次卡，9IC月卡，10IC年卡，11IC次卡，12免费，13VIP充值卡，14IC充值卡，15积分支付，16VIP季卡，17IC季卡"
           v-model:value="form.payType"
         />
       </a-form-item>
-      <a-form-item label="1已付款，2未付款" name="payStatus">
+      <a-form-item label="支付状态" name="payStatus">
         <a-input
           allow-clear
-          placeholder="请输入1已付款，2未付款"
+          :disabled="true"
+          placeholder="请输入0未付款，1已付款"
           v-model:value="form.payStatus"
         />
       </a-form-item>
-      <a-form-item
-        label="1已完成，2未使用，3已取消，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款"
-        name="orderStatus"
-      >
+      <a-form-item label="订单状态" name="orderStatus">
         <a-input
           allow-clear
-          placeholder="请输入1已完成，2未使用，3已取消，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款"
+          :disabled="true"
+          placeholder="请输入0未使用，1已完成，2已取消，3取消中，4退款申请中，5退款被拒绝，6退款成功，7客户端申请退款"
           v-model:value="form.orderStatus"
         />
       </a-form-item>
-      <a-form-item
-        label="优惠类型：0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡，5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡"
-        name="type"
-      >
+      <a-form-item label="优惠类型" name="couponType">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入优惠类型：0无、1抵扣优惠券、2折扣优惠券、3、VIP月卡、4VIP年卡，5VIP次卡、6VIP会员卡、7IC月卡、8IC年卡、9IC次卡、10IC会员卡、11免费订单、12VIP充值卡、13IC充值卡、14VIP季卡、15IC季卡"
-          v-model:value="form.type"
+          v-model:value="form.couponType"
         />
       </a-form-item>
-      <a-form-item
-        label="二维码地址，保存订单号，支付成功后才生成"
-        name="qrcode"
-      >
-        <a-input
-          allow-clear
-          placeholder="请输入二维码地址，保存订单号，支付成功后才生成"
-          v-model:value="form.qrcode"
-        />
-      </a-form-item>
-      <a-form-item label="优惠说明" name="desc">
+      <a-form-item label="优惠说明" name="couponDesc">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入优惠说明"
-          v-model:value="form.desc"
-        />
-      </a-form-item>
-      <a-form-item label="vip月卡年卡、ic月卡年卡回退次数" name="returnNum">
-        <a-input
-          allow-clear
-          placeholder="请输入vip月卡年卡、ic月卡年卡回退次数"
-          v-model:value="form.returnNum"
-        />
-      </a-form-item>
-      <a-form-item label="vip充值回退金额" name="returnMoney">
-        <a-input
-          allow-clear
-          placeholder="请输入vip充值回退金额"
-          v-model:value="form.returnMoney"
+          v-model:value="form.couponDesc"
         />
       </a-form-item>
+      <!--      <a-form-item-->
+      <!--        label="二维码地址，保存订单号，支付成功后才生成"-->
+      <!--        name="qrcode"-->
+      <!--      >-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入二维码地址，保存订单号，支付成功后才生成"-->
+      <!--          v-model:value="form.qrcode"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="vip月卡年卡、ic月卡年卡回退次数" name="returnNum">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入vip月卡年卡、ic月卡年卡回退次数"-->
+      <!--          v-model:value="form.returnNum"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
+      <!--      <a-form-item label="vip充值回退金额" name="returnMoney">-->
+      <!--        <a-input-->
+      <!--          allow-clear-->
+      <!--          placeholder="请输入vip充值回退金额"-->
+      <!--          v-model:value="form.returnMoney"-->
+      <!--        />-->
+      <!--      </a-form-item>-->
       <a-form-item label="预约详情开始时间数组" name="startTime">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入预约详情开始时间数组"
           v-model:value="form.startTime"
         />
       </a-form-item>
-      <a-form-item
-        label="是否已开具发票：1已开发票，2未开发票，3不能开具发票"
-        name="isInvoice"
-      >
+      <a-form-item label="是否已开具发票" name="isInvoice">
         <a-input
           allow-clear
-          placeholder="请输入是否已开具发票：1已开发票，2未开发票，3不能开具发票"
+          :disabled="true"
+          placeholder="请输入是否已开具发票：0未开发票，1已开发票，2不能开具发票"
           v-model:value="form.isInvoice"
         />
       </a-form-item>
-      <a-form-item label="" name="updateTime">
+      <a-form-item label="支付时间" name="payTime">
         <a-input
           allow-clear
-          placeholder="请输入"
-          v-model:value="form.updateTime"
-        />
-      </a-form-item>
-      <a-form-item label="付款时间" name="payTime">
-        <a-input
-          allow-clear
-          placeholder="请输入付款时间"
+          :disabled="true"
+          placeholder="请输入支付时间"
           v-model:value="form.payTime"
         />
       </a-form-item>
       <a-form-item label="退款时间" name="refundTime">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入退款时间"
           v-model:value="form.refundTime"
         />
@@ -271,35 +250,36 @@
       <a-form-item label="申请退款时间" name="refundApplyTime">
         <a-input
           allow-clear
+          :disabled="true"
           placeholder="请输入申请退款时间"
           v-model:value="form.refundApplyTime"
         />
       </a-form-item>
-      <a-form-item
-        label="对账情况：1=已对账；2=未对账；3=已对账，金额对不上；4=未查询到该订单"
-        name="checkBill"
-      >
+      <a-form-item label="对账情况" name="checkBill">
         <a-input
           allow-clear
-          placeholder="请输入对账情况：1=已对账；2=未对账；3=已对账，金额对不上；4=未查询到该订单"
+          :disabled="true"
+          placeholder="请输入对账情况：0=未对账；1=已对账；3=已对账，金额对不上；4=未查询到该订单"
           v-model:value="form.checkBill"
         />
       </a-form-item>
+      <a-form-item label="订单是否已结算" name="isSettled">
+        <a-input
+          allow-clear
+          :disabled="true"
+          placeholder="请输入订单是否已结算(0未结算 1已结算)"
+          v-model:value="form.isSettled"
+        />
+      </a-form-item>
       <a-form-item label="备注" name="comments">
         <a-textarea
           :rows="4"
           :maxlength="200"
+          :disabled="true"
           placeholder="请输入描述"
           v-model:value="form.comments"
         />
       </a-form-item>
-      <a-form-item label="是否删除, 0否, 1是" name="deleted">
-        <a-input
-          allow-clear
-          placeholder="请输入是否删除, 0否, 1是"
-          v-model:value="form.deleted"
-        />
-      </a-form-item>
     </a-form>
   </ele-modal>
 </template>
@@ -347,16 +327,15 @@
   const form = reactive<Order>({
     orderId: undefined,
     orderNo: undefined,
-    wechatOrder: undefined,
+    transactionId: undefined,
     refundOrder: undefined,
     merchantId: undefined,
-    userId: undefined,
     couponId: undefined,
     cardId: undefined,
-    aid: undefined,
     adminId: undefined,
-    code: undefined,
-    name: undefined,
+    confirmId: undefined,
+    icCard: undefined,
+    realName: undefined,
     phone: undefined,
     totalPrice: undefined,
     reducePrice: undefined,
@@ -369,22 +348,27 @@
     payType: undefined,
     payStatus: undefined,
     orderStatus: undefined,
-    type: undefined,
+    couponType: undefined,
+    couponDesc: undefined,
     qrcode: undefined,
-    desc: undefined,
     returnNum: undefined,
     returnMoney: undefined,
     startTime: undefined,
     isInvoice: undefined,
-    createTime: undefined,
-    updateTime: undefined,
     payTime: undefined,
     refundTime: undefined,
     refundApplyTime: undefined,
     checkBill: undefined,
+    isSettled: undefined,
+    version: undefined,
+    userId: undefined,
     deleted: undefined,
     tenantId: undefined,
-    comments: ''
+    updateTime: undefined,
+    createTime: undefined,
+    status: 0,
+    comments: '',
+    sortNumber: 100
   });
 
   /* 更新visible */
@@ -398,7 +382,7 @@
       {
         required: true,
         type: 'string',
-        message: '请填写预约订单名称',
+        message: '请填写订单名称',
         trigger: 'blur'
       }
     ]

src/views/booking/order/components/orderInfo.vue

@@ -0,0 +1,417 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="`80%`"
+    :visible="visible"
+    :confirm-loading="loading"
+    :maxable="maxAble"
+    :title="isUpdate ? '编辑订单' : '订单详情'"
+    :body-style="{ paddingBottom: '8px', background: '#f3f3f3' }"
+    @update:visible="updateVisible"
+    :maskClosable="false"
+    :footer="null"
+    @ok="save"
+  >
+    <a-card class="order-card" :bordered="false">
+      <a-descriptions title="基本信息" :column="3">
+        <a-descriptions-item
+          label="订单号"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.orderId }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="订单编号"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.orderNo }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="订单状态"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <a-tag v-if="form.orderStatus == 0">未使用</a-tag>
+          <a-tag v-if="form.orderStatus == 1">已付款</a-tag>
+          <a-tag v-if="form.orderStatus == 3">已取消</a-tag>
+          <a-tag v-if="form.orderStatus == 4">退款申请中</a-tag>
+          <a-tag v-if="form.orderStatus == 5">退款被拒绝</a-tag>
+          <a-tag v-if="form.orderStatus == 6">退款成功</a-tag>
+          <a-tag v-if="form.orderStatus == 7">客户端申请退款</a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="买家信息"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.realName }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="手机号码"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.phone }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="交易流水号"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.transactionId }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="订单总金额"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          ￥{{ form.totalPrice }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="实付金额"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          ￥{{ form.payPrice }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="减少金额"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          ￥{{ form.reducePrice }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="支付方式"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <template v-if="form.payStatus == 1">
+            <a-tag v-if="form.payType == 1">微信支付</a-tag>
+            <a-tag v-if="form.payType == 2">积分</a-tag>
+            <a-tag v-if="form.payType == 3">支付宝</a-tag>
+            <a-tag v-if="form.payType == 4">现金</a-tag>
+            <a-tag v-if="form.payType == 5">POS机</a-tag>
+            <a-tag v-if="form.payType == 6">VIP月卡</a-tag>
+            <a-tag v-if="form.payType == 7">formVIP年卡</a-tag>
+            <a-tag v-if="form.payType == 8">formVIP次卡</a-tag>
+            <a-tag v-if="form.payType == 9">formIC月卡</a-tag>
+            <a-tag v-if="form.payType == 10">formIC年卡</a-tag>
+            <a-tag v-if="form.payType == 11">formIC次卡</a-tag>
+            <a-tag v-if="form.payType == 12">form免费</a-tag>
+            <a-tag v-if="form.payType == 13">formVIP充值卡</a-tag>
+            <a-tag v-if="form.payType == 14">formIC充值卡</a-tag>
+            <a-tag v-if="form.payType == 15">form积分支付</a-tag>
+            <a-tag v-if="form.payType == 16">formVIP季卡</a-tag>
+            <a-tag v-if="form.payType == 17">formIC季卡</a-tag>
+          </template>
+          <template v-else>
+            <span></span>
+          </template>
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="支付状态"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          <a-tag v-if="form.payStatus == 1" color="green"
+            ><CheckOutlined class="tag-icon" />已付款</a-tag
+          >
+          <a-tag v-if="form.payStatus == 0" color="error"
+            ><CloseOutlined class="tag-icon" />未付款</a-tag
+          >
+          <a-tag v-if="form.payStatus == 3" color="cyan"
+            ><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag
+          >
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="付款时间"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.payTime }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="下单时间"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.createTime }}
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="信息备注"
+          :labelStyle="{ width: '90px', color: '#808080' }"
+        >
+          {{ form.comments }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-card>
+    <a-card class="order-card" :bordered="false">
+      <a-spin :spinning="loading">
+        <a-table
+          :data-source="form.orderInfoList"
+          :columns="columns"
+          :pagination="false"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'goodsName'">
+              <div class="order-info">
+                <a-image
+                  v-if="record.imageUrl"
+                  :src="record.imageUrl"
+                  :preview="false"
+                  :width="50"
+                />
+                <div class="info">
+                  <div>{{ record.goodsName }}</div>
+                  <div class="ele-text-placeholder" v-if="record.gear === 10">
+                    食堂档口
+                  </div>
+                  <div class="ele-text-placeholder" v-if="record.gear === 20">
+                    物品档口
+                  </div>
+                </div>
+              </div>
+            </template>
+          </template>
+        </a-table>
+      </a-spin>
+    </a-card>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import { Order } from '@/api/shop/order/model';
+  import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
+  import {
+    CheckOutlined,
+    CloseOutlined,
+    CoffeeOutlined
+  } from '@ant-design/icons-vue';
+
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Order | null;
+  }>();
+
+  export interface step {
+    title?: String | undefined;
+    subTitle?: String | undefined;
+    description?: String | undefined;
+  }
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否显示最大化切换按钮
+  const maxAble = ref(true);
+
+  // 步骤条
+  const steps = ref<step[]>([
+    {
+      title: '报餐',
+      description: undefined
+    },
+    {
+      title: '付款',
+      description: undefined
+    },
+    {
+      title: '发餐',
+      description: undefined
+    },
+    {
+      title: '取餐',
+      description: undefined
+    },
+    {
+      title: '完成',
+      description: undefined
+    }
+  ]);
+  const active = ref(2);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 订单信息
+  const form = reactive<Order>({
+    orderId: undefined,
+    orderNo: undefined,
+    transactionId: undefined,
+    refundOrder: undefined,
+    merchantId: undefined,
+    couponId: undefined,
+    cardId: undefined,
+    adminId: undefined,
+    confirmId: undefined,
+    icCard: undefined,
+    realName: undefined,
+    phone: undefined,
+    totalPrice: undefined,
+    reducePrice: undefined,
+    payPrice: undefined,
+    price: undefined,
+    money: undefined,
+    refundMoney: undefined,
+    coachPrice: undefined,
+    coachId: undefined,
+    payType: undefined,
+    payStatus: undefined,
+    orderStatus: undefined,
+    couponType: undefined,
+    couponDesc: undefined,
+    qrcode: undefined,
+    returnNum: undefined,
+    returnMoney: undefined,
+    startTime: undefined,
+    isInvoice: undefined,
+    payTime: undefined,
+    refundTime: undefined,
+    refundApplyTime: undefined,
+    checkBill: undefined,
+    isSettled: undefined,
+    version: undefined,
+    userId: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    updateTime: undefined,
+    createTime: undefined,
+    status: 0,
+    comments: '',
+    sortNumber: 100,
+    orderInfoList: []
+  });
+
+  // 请求状态
+  const loading = ref(true);
+
+  const { resetFields } = useForm(form);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '场馆名称',
+      dataIndex: 'merchantName',
+      key: 'merchantName'
+    },
+    {
+      title: '场地',
+      dataIndex: 'fieldName'
+    },
+    {
+      title: '预定信息',
+      dataIndex: 'comments',
+      key: 'comments'
+    },
+    {
+      title: '金额',
+      dataIndex: 'price',
+      customRender: ({ text }) => '￥' + text
+    }
+  ]);
+
+  /* 制作步骤条 */
+  const loadSteps = (order) => {
+    steps.value = [];
+    steps.value.push({
+      title: '下单'
+    });
+    steps.value.push({
+      title: '付款'
+    });
+    steps.value.push({
+      title: '发货'
+    });
+    steps.value.push({
+      title: '收货'
+    });
+    steps.value.push({
+      title: '完成'
+    });
+
+    // 下单
+    if (order.payStatus == 10) {
+      active.value = 0;
+      steps.value[0].description = order.createTime;
+    }
+    // 付款
+    if (order.payStatus == 20) {
+      active.value = 1;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+    }
+    // 发货
+    if (order.payStatus == 20 && order.deliveryStatus == 20) {
+      active.value = 2;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+      steps.value[2].description = order.deliveryTime;
+    }
+    // 收货
+    if (order.payStatus == 20 && order.receiptStatus == 20) {
+      active.value = 3;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+      steps.value[2].description = order.deliveryTime;
+      steps.value[3].description = order.receiptTime;
+    }
+    // 完成
+    if (order.payStatus == 20 && order.orderStatus == 30) {
+      active.value = 4;
+      steps.value[0].description = order.createTime;
+      steps.value[1].description = order.payTime;
+      steps.value[2].description = order.deliveryTime;
+      steps.value[3].description = order.receiptTime;
+    }
+    // 已取消
+    if (order.orderStatus == 20) {
+      active.value = 4;
+    }
+  };
+
+  // const getOrderInfo = () => {
+  //   const orderId = props.data?.orderId;
+  //   listOrderInfo({ orderId }).then((data) => {
+  //     orderInfo.value = data.filter((d) => d.totalNum > 0);
+  //   });
+  // };
+
+  /* 保存编辑 */
+  const save = () => {};
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          loading.value = false;
+          assignObject(form, props.data);
+          loadSteps(props.data);
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
+<style lang="less" scoped>
+  .order-card {
+    margin-bottom: 20px;
+  }
+  .ant-form-item {
+    margin-bottom: 5px;
+  }
+  .order-info {
+    display: flex;
+    .info {
+      padding-left: 5px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  .tag-icon {
+    padding-right: 6px;
+  }
+</style>

src/views/booking/order/components/search.vue

@@ -1,6 +1,12 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
+    <SelectMerchantDown
+      :placeholder="`选择场馆`"
+      class="input-item"
+      v-model:value="where.merchantCode"
+      @change="search"
+    />
     <a-input-search
       allow-clear
       v-model:value="where.keywords"
@@ -9,6 +15,7 @@
       @pressEnter="search"
     />
     <a-button @click="getCode">生成支付二维码</a-button>
+    <a-button @click="reset">重置</a-button>
   </a-space>
   <ele-modal
     :width="500"
@@ -48,7 +55,7 @@
   }>();
 
   // 表单数据
-  const { where } = useSearch<OrderParam>({
+  const { where, resetFields } = useSearch<OrderParam>({
     keywords: ''
   });
 
@@ -57,6 +64,12 @@
     emit('search', where);
   };
 
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
   // 二维码内容
   const text = ref('');
   const showQrcode = ref(false);

src/views/booking/order/index.vue

@@ -26,101 +26,106 @@
               <a-image :src="record.image" :width="50" />
             </template>
             <template v-if="column.key === 'payType'">
-              <a-tag v-if="record.payType == 1" color="green"
-                ><WechatOutlined class="tag-icon" />微信支付</a-tag
-              >
-              <a-tag v-if="record.payType == 2" color="green">积分</a-tag>
-              <a-tag v-if="record.payType == 3" color="green"
-                ><AlipayCircleOutlined class="tag-icon" />支付宝</a-tag
-              >
-              <a-tag v-if="record.payType == 4" color="green"
-                ><IdcardOutlined class="tag-icon" />现金</a-tag
-              >
-              <a-tag v-if="record.payType == 5" color="green"
-                ><IdcardOutlined class="tag-icon" />POS机</a-tag
-              >
-              <a-tag v-if="record.payType == 6" color="green"
-                ><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
-              >
-              <a-tag v-if="record.payType == 7" color="green"
-                ><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
-              >
-              <a-tag v-if="record.payType == 8" color="green"
-                ><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
-              >
-              <a-tag v-if="record.payType == 9" color="green"
-                ><IdcardOutlined class="tag-icon" />IC月卡</a-tag
-              >
-              <a-tag v-if="record.payType == 10" color="green"
-                ><IdcardOutlined class="tag-icon" />IC年卡</a-tag
-              >
-              <a-tag v-if="record.payType == 11" color="green"
-                ><IdcardOutlined class="tag-icon" />IC次卡</a-tag
-              >
-              <a-tag v-if="record.payType == 12" color="green"
-                ><IdcardOutlined class="tag-icon" />免费</a-tag
-              >
-              <a-tag v-if="record.payType == 13" color="green"
-                ><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
-              >
-              <a-tag v-if="record.payType == 14" color="green"
-                ><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
-              >
-              <a-tag v-if="record.payType == 15" color="green"
-                ><IdcardOutlined class="tag-icon" />积分支付</a-tag
-              >
-              <a-tag v-if="record.payType == 16" color="green"
-                ><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
-              >
-              <a-tag v-if="record.payType == 17" color="green"
-                ><IdcardOutlined class="tag-icon" />IC季卡</a-tag
-              >
+              <template v-if="record.payStatus == 1">
+                <a-tag v-if="record.payType == 1"
+                  ><WechatOutlined class="tag-icon" />微信支付</a-tag
+                >
+                <a-tag v-if="record.payType == 2">积分</a-tag>
+                <a-tag v-if="record.payType == 3"
+                  ><AlipayCircleOutlined class="tag-icon" />支付宝</a-tag
+                >
+                <a-tag v-if="record.payType == 4"
+                  ><IdcardOutlined class="tag-icon" />现金</a-tag
+                >
+                <a-tag v-if="record.payType == 5"
+                  ><IdcardOutlined class="tag-icon" />POS机</a-tag
+                >
+                <a-tag v-if="record.payType == 6"
+                  ><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
+                >
+                <a-tag v-if="record.payType == 7"
+                  ><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
+                >
+                <a-tag v-if="record.payType == 8"
+                  ><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
+                >
+                <a-tag v-if="record.payType == 9"
+                  ><IdcardOutlined class="tag-icon" />IC月卡</a-tag
+                >
+                <a-tag v-if="record.payType == 10"
+                  ><IdcardOutlined class="tag-icon" />IC年卡</a-tag
+                >
+                <a-tag v-if="record.payType == 11"
+                  ><IdcardOutlined class="tag-icon" />IC次卡</a-tag
+                >
+                <a-tag v-if="record.payType == 12"
+                  ><IdcardOutlined class="tag-icon" />免费</a-tag
+                >
+                <a-tag v-if="record.payType == 13"
+                  ><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
+                >
+                <a-tag v-if="record.payType == 14"
+                  ><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
+                >
+                <a-tag v-if="record.payType == 15"
+                  ><IdcardOutlined class="tag-icon" />积分支付</a-tag
+                >
+                <a-tag v-if="record.payType == 16"
+                  ><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
+                >
+                <a-tag v-if="record.payType == 17"
+                  ><IdcardOutlined class="tag-icon" />IC季卡</a-tag
+                >
+              </template>
+              <template v-else>
+                <span></span>
+              </template>
             </template>
-            <template v-if="column.key === 'type'">
-              <a-tag v-if="record.type == 0">无</a-tag>
-              <a-tag v-if="record.type == 1" color="blue"
+            <template v-if="column.key === 'couponType'">
+              <a-tag v-if="record.couponType == 0">无</a-tag>
+              <a-tag v-if="record.couponType == 1" color="blue"
                 ><IdcardOutlined class="tag-icon" />抵扣优惠券</a-tag
               >
-              <a-tag v-if="record.type == 2" color="blue"
+              <a-tag v-if="record.couponType == 2" color="blue"
                 ><IdcardOutlined class="tag-icon" />折扣优惠券</a-tag
               >
-              <a-tag v-if="record.type == 3" color="blue"
+              <a-tag v-if="record.couponType == 3" color="blue"
                 ><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
               >
-              <a-tag v-if="record.type == 4" color="blue"
+              <a-tag v-if="record.couponType == 4" color="blue"
                 ><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
               >
-              <a-tag v-if="record.type == 5" color="blue"
+              <a-tag v-if="record.couponType == 5" color="blue"
                 ><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
               >
-              <a-tag v-if="record.type == 6" color="blue"
+              <a-tag v-if="record.couponType == 6" color="blue"
                 ><IdcardOutlined class="tag-icon" />VIP会员卡</a-tag
               >
-              <a-tag v-if="record.type == 7" color="blue"
+              <a-tag v-if="record.couponType == 7" color="blue"
                 ><IdcardOutlined class="tag-icon" />IC月卡</a-tag
               >
-              <a-tag v-if="record.type == 8" color="blue"
+              <a-tag v-if="record.couponType == 8" color="blue"
                 ><IdcardOutlined class="tag-icon" />IC年卡</a-tag
               >
-              <a-tag v-if="record.type == 9" color="blue"
+              <a-tag v-if="record.couponType == 9" color="blue"
                 ><IdcardOutlined class="tag-icon" />IC次卡</a-tag
               >
-              <a-tag v-if="record.type == 10" color="blue"
+              <a-tag v-if="record.couponType == 10" color="blue"
                 ><IdcardOutlined class="tag-icon" />IC会员卡</a-tag
               >
-              <a-tag v-if="record.type == 11" color="blue"
+              <a-tag v-if="record.couponType == 11" color="blue"
                 ><IdcardOutlined class="tag-icon" />免费订单</a-tag
               >
-              <a-tag v-if="record.type == 12" color="blue"
+              <a-tag v-if="record.couponType == 12" color="blue"
                 ><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
               >
-              <a-tag v-if="record.type == 13" color="blue"
+              <a-tag v-if="record.couponType == 13" color="blue"
                 ><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
               >
-              <a-tag v-if="record.type == 14" color="blue"
+              <a-tag v-if="record.couponType == 14" color="blue"
                 ><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
               >
-              <a-tag v-if="record.type == 15" color="blue"
+              <a-tag v-if="record.couponType == 15" color="blue"
                 ><IdcardOutlined class="tag-icon" />IC季卡</a-tag
               >
             </template>
@@ -128,40 +133,35 @@
               <a-tag v-if="record.payStatus == 1" color="green"
                 ><CheckOutlined class="tag-icon" />已付款</a-tag
               >
-              <a-tag v-if="record.payStatus == 2" color="error"
+              <a-tag v-if="record.payStatus == 0" color="error"
                 ><CloseOutlined class="tag-icon" />未付款</a-tag
               >
               <a-tag v-if="record.payStatus == 3" color="cyan"
                 ><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag
               >
             </template>
+            <template v-if="column.key === 'orderInfo'">
+              {{ record.orderInfoList }}
+            </template>
             <template v-if="column.key === 'orderStatus'">
-              <a-tag v-if="record.orderStatus == 1" color="green"
-                ><CheckOutlined class="tag-icon" />已付款</a-tag
+              <span v-if="record.orderStatus == 0"
+                ><ClockCircleOutlined class="tag-icon" />未使用</span
               >
-              <a-tag v-if="record.orderStatus == 2" color="blue"
-                ><ClockCircleOutlined class="tag-icon" />未使用</a-tag
+              <span v-if="record.orderStatus == 1"
+                ><CheckOutlined class="tag-icon" />已付款</span
               >
-              <a-tag v-if="record.orderStatus == 3" color="error"
-                ><CloseOutlined class="tag-icon" />已取消</a-tag
-              >
-              <a-tag v-if="record.orderStatus == 4" color="error"
-                >退款申请中</a-tag
-              >
-              <a-tag v-if="record.orderStatus == 5" color="error"
-                >退款被拒绝</a-tag
-              >
-              <a-tag v-if="record.orderStatus == 6" color="green"
-                >退款成功</a-tag
-              >
-              <a-tag v-if="record.orderStatus == 7" color="green"
-                >客户端申请退款</a-tag
+              <span v-if="record.orderStatus == 3"
+                ><CloseOutlined class="tag-icon" />已取消</span
               >
+              <span v-if="record.orderStatus == 4">退款申请中</span>
+              <span v-if="record.orderStatus == 5">退款被拒绝</span>
+              <span v-if="record.orderStatus == 6">退款成功</span>
+              <span v-if="record.orderStatus == 7">客户端申请退款</span>
             </template>
             <template v-if="column.key === 'isInvoice'">
+              <a-tag v-if="record.isInvoice == 0">未开</a-tag>
               <a-tag v-if="record.isInvoice == 1" color="green">已开</a-tag>
-              <a-tag v-if="record.isInvoice == 2" color="green">未开</a-tag>
-              <a-tag v-if="record.isInvoice == 1" color="green">不能开</a-tag>
+              <a-tag v-if="record.isInvoice == 2">不能开</a-tag>
             </template>
             <template v-if="column.key === 'status'">
               <a-tag v-if="record.status === 0" color="green">显示</a-tag>
@@ -170,14 +170,15 @@
             <template v-if="column.key === 'action'">
               <a-space>
                 <a @click="openEdit(record)">详情</a>
+                <a-divider type="vertical" />
+                <a @click="openEdit(record)">编辑</a>
               </a-space>
             </template>
           </template>
         </ele-pro-table>
       </a-card>
-
       <!-- 编辑弹窗 -->
-      <OrderEdit v-model:visible="showEdit" :data="current" @done="reload" />
+      <OrderInfo v-model:visible="showEdit" :data="current" @done="reload" />
     </div>
   </div>
 </template>
@@ -189,7 +190,6 @@
     ExclamationCircleOutlined,
     CheckOutlined,
     CloseOutlined,
-    RestOutlined,
     ClockCircleOutlined,
     IdcardOutlined,
     WechatOutlined,
@@ -202,9 +202,14 @@
     ColumnItem
   } from 'ele-admin-pro/es/ele-pro-table/types';
   import Search from './components/search.vue';
-  import OrderEdit from './components/orderEdit.vue';
-  import { pageOrder, removeOrder, removeBatchOrder } from '@/api/shop/order';
-  import type { Order, OrderParam } from '@/api/shop/order/model';
+  import OrderInfo from './components/orderInfo.vue';
+  import {
+    pageOrder,
+    removeOrder,
+    removeBatchOrder
+  } from '@/api/booking/order';
+  import type { Order, OrderParam } from '@/api/booking/order/model';
+  import { formatNumber } from 'ele-admin-pro/es';
 
   // 表格实例
   const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -249,8 +254,8 @@
     },
     {
       title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'realName',
+      key: 'realName',
       align: 'center'
     },
     {
@@ -264,19 +269,22 @@
       title: '总额',
       dataIndex: 'totalPrice',
       key: 'totalPrice',
-      align: 'center'
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
     },
     {
       title: '减少金额',
       dataIndex: 'reducePrice',
       key: 'reducePrice',
-      align: 'center'
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
     },
     {
       title: '实付金额',
       dataIndex: 'payPrice',
       key: 'payPrice',
-      align: 'center'
+      align: 'center',
+      customRender: ({ text }) => `￥${formatNumber(text)}`
     },
     {
       title: '支付方式',
@@ -298,8 +306,8 @@
     },
     {
       title: '优惠类型',
-      dataIndex: 'type',
-      key: 'type',
+      dataIndex: 'couponType',
+      key: 'couponType',
       align: 'center'
     },
     {
@@ -427,5 +435,7 @@
 <style lang="less" scoped>
   .tag-icon {
     padding-right: 6px;
+    background-image: linear-gradient(#9fcdec, rgb(0, 118, 199));
+    color: rgba(21, 154, 203, 0.5);
   }
 </style>