From 69d5cbfa7367928632a3dedf8fc248d43f22326d Mon Sep 17 00:00:00 2001
From: b2894lxlx <517289602@qq.com>
Date: Mon, 20 Jan 2025 12:10:22 +0800
Subject: [PATCH] fix bug

---
 .../yunxinwei/order/components/order-info.vue | 993 +++++++++---------
 1 file changed, 496 insertions(+), 497 deletions(-)

diff --git a/src/views/yunxinwei/order/components/order-info.vue b/src/views/yunxinwei/order/components/order-info.vue
index 55f1f29..05b6181 100644
--- a/src/views/yunxinwei/order/components/order-info.vue
+++ b/src/views/yunxinwei/order/components/order-info.vue
@@ -1,27 +1,27 @@
 <!-- 用户编辑弹窗 -->
 <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"
+    :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-steps
-          :current="active"
-          direction="horizontal"
-          :responsive="styleResponsive"
+        :current="active"
+        direction="horizontal"
+        :responsive="styleResponsive"
       >
         <template v-for="(item, index) in steps" :key="index">
           <a-step
-              :title="item.title"
-              :description="timeAgo(item.description)"
+            :title="item.title"
+            :description="timeAgo(item.description)"
           />
         </template>
       </a-steps>
@@ -34,7 +34,7 @@
       </a-space>
       <a-row :gutter="16" style="margin-top: 34px">
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -45,40 +45,42 @@
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
           "
         >
           <a-form-item label="实付款金额" name="payPrice">
-            <span class="ele-text-warning">￥{{ formatNumber(data.payPrice) }}</span>
+            <span class="ele-text-warning"
+              >￥{{ formatNumber(data.payPrice) }}</span
+            >
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
           "
         >
           <a-form-item label="支付方式" name="payMethod">
-            <Tag dict-code="payMethod" v-model:value="data.payMethod"/>
+            <Tag dict-code="payMethod" v-model:value="data.payMethod" />
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
           "
         >
           <a-form-item label="配送方式" name="deliveryType">
-            <Tag dict-code="deliveryType" v-model:value="data.deliveryType"/>
+            <Tag dict-code="deliveryType" v-model:value="data.deliveryType" />
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -89,18 +91,18 @@
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
           "
         >
           <a-form-item label="订单状态" name="orderStatus">
-            <Tag dict-code="orderStatus" v-model:value="data.orderStatus"/>
+            <Tag dict-code="orderStatus" v-model:value="data.orderStatus" />
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -113,7 +115,7 @@
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -124,7 +126,7 @@
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -134,14 +136,14 @@
             <span>
               {{ bindEquipmentCode }}
               <copy-outlined
-                  style="padding-left: 4px"
-                  @click="copyText(bindEquipmentCode)"
+                style="padding-left: 4px"
+                @click="copyText(bindEquipmentCode)"
               />
             </span>
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -152,7 +154,7 @@
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -163,7 +165,7 @@
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -174,7 +176,7 @@
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -189,17 +191,17 @@
     <a-card title="订单商品" class="order-card">
       <a-spin :spinning="loading">
         <a-table
-            :data-source="EquipmentOrderGoodsList"
-            :columns="columns"
-            :pagination="false"
+          :data-source="EquipmentOrderGoodsList"
+          :columns="columns"
+          :pagination="false"
         >
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'goodsName'">
               <a-image
-                  v-if="record.image"
-                  :src="record.image"
-                  :preview="false"
-                  :width="50"
+                v-if="record.image"
+                :src="record.image"
+                :preview="false"
+                :width="50"
               />
               <span>{{ record.goodsName }}</span>
             </template>
@@ -210,25 +212,21 @@
             </template>
             <template v-if="column.key === 'equipmentCategory'">
               <a-tag
-                  v-if="Number(record.equipmentCategory) === 10"
-                  color="success"
-              >销售
-              </a-tag
-              >
+                v-if="Number(record.equipmentCategory) === 10"
+                color="success"
+                >销售
+              </a-tag>
               <a-tag v-if="Number(record.equipmentCategory) === 20" color="red"
-              >分期
-              </a-tag
-              >
+                >分期
+              </a-tag>
               <a-tag
-                  v-if="Number(record.equipmentCategory) === 30"
-                  color="orange"
-              >以租代购
-              </a-tag
-              >
+                v-if="Number(record.equipmentCategory) === 30"
+                color="orange"
+                >以租代购
+              </a-tag>
               <a-tag v-if="Number(record.equipmentCategory) === 40" color="blue"
-              >租赁
-              </a-tag
-              >
+                >租赁
+              </a-tag>
             </template>
             <template v-if="column.key === 'more'">
               <div v-if="record.periodsType > 0">
@@ -258,13 +256,11 @@
     </a-card>
     <a-card title="换电记录" class="order-card">
       <a-spin :spinning="loading">
-
-          <a-table
-            :data-source="EquipmentRecordList"
-            :columns="columns3"
-            :pagination="true"
-          >
-
+        <a-table
+          :data-source="EquipmentRecordList"
+          :columns="columns3"
+          :pagination="true"
+        >
           <template #bodyCell="{ column, record }">
             <template v-if="column.key === 'batteryModel'">
               <div>电池租金：￥{{ record.batteryRent }}</div>
@@ -276,9 +272,8 @@
             </template>
 
             <template v-if="column.key === 'duration'">
-              <span class="ele-text-danger">{{ countDuration (record)}}</span>
+              <span class="ele-text-danger">{{ countDuration(record) }}</span>
             </template>
-
           </template>
         </a-table>
       </a-spin>
@@ -286,16 +281,21 @@
     <a-card title="租期记录" class="order-card">
       <a-spin :spinning="loading">
         <a-table
-            :data-source="renewOrderList"
-            :columns="columns2"
-            ref="tableRef2"
-            :pagination="true"
+          :data-source="renewOrderList"
+          :columns="columns2"
+          ref="tableRef2"
+          :pagination="true"
         >
           <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'orderNo'">
+              <span :class="[record.isAdminRenew === 1 ? 'ele-text-primary' : '']">{{ record.orderNo }}</span>
+            </template>
             <template v-if="column.key === 'batteryModel'">
-              <div>电池租金：￥{{ record.batteryRent }}</div>
-              <div>电池押金：￥{{ record.batteryDeposit }}</div>
-              <div>电池保险：￥{{ record.batteryInsurance }}</div>
+              <div :class="[record.isAdminRenew === 1 ? 'ele-text-primary' : '']">
+                <div>电池租金：￥{{ record.batteryRent }}</div>
+                <div>电池押金：￥{{ record.batteryDeposit }}</div>
+                <div>电池保险：￥{{ record.batteryInsurance }}</div>
+              </div>
             </template>
             <template v-if="column.key === 'expirationTime'">
               <div>{{ record.startTime }}</div>
@@ -306,44 +306,44 @@
             </template>
 
             <template v-if="column.key === 'action'">
-
-              <view >
-                <a-button
-                  @click="openOrderOnline(record)"
-                >续费该设备</a-button>
+              <view>
+                <a-button @click="openOrderOnline(record)"
+                  >续费该设备
+                </a-button>
               </view>
             </template>
 
             <template v-if="column.key === 'currPeriods'">
-              <view v-if="record.orderSource === 10" >
+              <view v-if="record.orderSource === 10">
                 <span>一次性购买</span>
               </view>
-              <view v-else>
+              <view
+                v-else
+                :class="[record.isAdminRenew === 1 ? 'ele-text-primary' : '']"
+              >
                 <span>第{{ record.currPeriods }}期</span>
                 <view v-if="record.isAdminRenew === 1">
                   <span> (后台续费)</span>
                 </view>
               </view>
             </template>
-
           </template>
-
         </a-table>
       </a-spin>
     </a-card>
     <a-card title="订单附件" class="order-card">
       <a-spin :spinning="loading">
         <ele-image-upload
-            v-model:value="files"
-            disabled
-            :item-style="{ width: '150px', height: '99px' }"
+          v-model:value="files"
+          disabled
+          :item-style="{ width: '150px', height: '99px' }"
         />
       </a-spin>
     </a-card>
     <a-card title="买家收货地址" class="order-card">
       <a-row :gutter="16">
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -356,7 +356,7 @@
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -367,7 +367,7 @@
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -378,7 +378,7 @@
           </a-form-item>
         </a-col>
         <a-col
-            v-bind="
+          v-bind="
             styleResponsive
               ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
               : { span: 8 }
@@ -388,9 +388,8 @@
             <span>{{ data.address }}</span>
           </a-form-item>
         </a-col>
-
-        </a-row>
-        <a-row :gutter="16">
+      </a-row>
+      <a-row :gutter="16">
         <a-col
           v-bind="
             styleResponsive
@@ -431,430 +430,430 @@
       :data="current"
       @done="getRenewOrder"
     />
-
   </ele-modal>
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, watch} from 'vue';
-import {Form} from 'ant-design-vue';
-import {assignObject, EleProTable, timeAgo} from 'ele-admin-pro';
-import {useThemeStore} from '@/store/modules/theme';
-import {formatNumber} from 'ele-admin-pro/es';
-import {storeToRefs} from 'pinia';
-import {copyText} from '@/utils/common';
-import {Order} from '@/api/order/model';
-import OrderXufei from '../components/order-xufei.vue';
-import {listEquipmentOrderGoods} from '@/api/apps/equipment/order/goods';
-import {EquipmentOrderGoods} from '@/api/apps/equipment/order/goods/model';
-import * as EquipmentApi from '@/api/apps/equipment';
-import * as EquipmentRecordApi from '@/api/apps/equipment/record';
-import {ColumnItem, DatasourceFunction} from 'ele-admin-pro/es/ele-pro-table/types';
-import {listOrder, listOrderPay} from '@/api/order';
-import {CopyOutlined} from '@ant-design/icons-vue';
-import {EquipmentRecord} from '@/api/apps/equipment/record/model';
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject, EleProTable, timeAgo } from 'ele-admin-pro';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+  import { copyText } from '@/utils/common';
+  import { Order } from '@/api/order/model';
+  import OrderXufei from '../components/order-xufei.vue';
+  import { listEquipmentOrderGoods } from '@/api/apps/equipment/order/goods';
+  import { EquipmentOrderGoods } from '@/api/apps/equipment/order/goods/model';
+  import * as EquipmentApi from '@/api/apps/equipment';
+  import * as EquipmentRecordApi from '@/api/apps/equipment/record';
+  import {
+    ColumnItem,
+    DatasourceFunction
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { listOrder, listOrderPay } from '@/api/order';
+  import { CopyOutlined } from '@ant-design/icons-vue';
+  import { EquipmentRecord } from '@/api/apps/equipment/record/model';
 
-const useForm = Form.useForm;
-// 是否开启响应式布局
-const themeStore = useThemeStore();
-const {styleResponsive} = storeToRefs(themeStore);
-const showOrderXufei = ref(false);
-// 当前编辑数据
-const current = ref<Order | null>(null);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  const showOrderXufei = ref(false);
+  // 当前编辑数据
+  const current = ref<Order | null>(null);
 
-const props = defineProps<{
-  // 弹窗是否打开
-  visible: boolean;
-  // 修改回显的数据
-  data?: Order | null;
-}>();
+  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 EquipmentOrderGoodsList = ref<EquipmentOrderGoods[]>([]);
-const renewOrderList = ref<Order[]>([]);
-const EquipmentRecordList = ref<EquipmentRecord[]>([]);
-const bindEquipmentCode = ref<string>();
-
-const files = ref<any[]>();
-
-// 步骤条
-const steps = ref<step[]>([
-  {
-    title: '下单',
-    description: undefined
-  },
-  {
-    title: '付款',
-    description: undefined
-  },
-  {
-    title: '发货',
-    description: undefined
-  },
-  {
-    title: '收货',
-    description: undefined
-  },
-  {
-    title: '完成',
-    description: undefined
+  export interface step {
+    title?: String | undefined;
+    subTitle?: String | undefined;
+    description?: String | undefined;
   }
-]);
-const active = ref(2);
 
-const emit = defineEmits<{
-  (e: 'done'): void;
-  (e: 'update:visible', visible: boolean): void;
-}>();
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 是否显示最大化切换按钮
+  const maxAble = ref(true);
+  const EquipmentOrderGoodsList = ref<EquipmentOrderGoods[]>([]);
+  const renewOrderList = ref<Order[]>([]);
+  const EquipmentRecordList = ref<EquipmentRecord[]>([]);
+  const bindEquipmentCode = ref<string>();
 
-// 订单信息
-const order = reactive<Order>({
-  orderId: undefined,
-  orderNo: '',
-  userId: undefined,
-  orderSourceData: ''
-});
+  const files = ref<any[]>();
 
-// 请求状态
-const loading = ref(true);
-
-const {resetFields} = useForm(order);
-
-/* 更新visible */
-const updateVisible = (value: boolean) => {
-  emit('update:visible', value);
-};
-
-const columns = ref<ColumnItem[]>([
-  // {
-  //   title: '商品ID',
-  //   dataIndex: 'goodsId'
-  // },
-  {
-    title: '商品信息',
-    dataIndex: 'goodsName',
-    key: 'goodsName'
-  },
-  {
-    title: '下单方式',
-    dataIndex: 'equipmentCategory',
-    key: 'equipmentCategory'
-  },
-  {
-    title: '电池型号',
-    dataIndex: 'batteryModel',
-    key: 'batteryModel'
-  },
-  {
-    title: '电池价格',
-    dataIndex: 'batteryPrice',
-    key: 'batteryPrice',
-    customRender: ({text}) => '￥' + text
-  },
-  {
-    title: '电池租金',
-    dataIndex: 'batteryRent',
-    key: 'batteryRent',
-    customRender: ({text}) => '￥' + text
-  },
-  {
-    title: '分期方案',
-    dataIndex: 'more',
-    key: 'more'
-  },
-  {
-    title: '购买数量',
-    dataIndex: 'num',
-    key: 'num',
-    customRender: ({}) => 1
-  }
-]);
-
-// 表格实例
-const tableRef2 = ref<InstanceType<typeof EleProTable> | null>(null);
-const columns2 = ref<ColumnItem[]>([
-  {
-    title: '当前期数',
-    dataIndex: 'currPeriods',
-    key: 'currPeriods'
-    // customRender: ({currPeriods}) => {
-    //   console.log({...order});
-    //
-    //   if (props.data.orderSource == 20) {
-    //     if (currPeriods == 0) {
-    //       return '首期';
-    //     } else {
-    //       return '第' + currPeriods + '期';
-    //     }
-    //   } else if (props.data.orderSource == 30 || props.data.orderSource == 40) {
-    //     return '第' + (currPeriods + 1) + '期';
-    //   } else if (props.data.orderSource == 10) {
-    //     return '一次性购买';
-    //   }
-    //
-    // }
-  },
-  {
-    title: '订单号',
-    dataIndex: 'orderNo',
-    key: 'orderNo'
-  },
-  {
-    title: '订单金额',
-    dataIndex: 'orderPrice',
-    key: 'orderPrice',
-    customRender: ({text}) => '￥' + text
-  },
-  {
-    title: '设备租金',
-    dataIndex: 'batteryModel',
-    key: 'batteryModel'
-  },
-  {
-    title: '有效期限',
-    dataIndex: 'expirationTime',
-    key: 'expirationTime'
-  },
-  {
-    title: '付款时间',
-    dataIndex: 'payTime',
-    key: 'payTime'
-  },
-  {
-    title: '使用天数',
-    dataIndex: 'expirationDay',
-    key: 'expirationDay'
-  },
-  {
-    title: '操作',
-    key: 'action',
-    width: 100,
-    align: 'center',
-    fixed: 'left',
-    hideInSetting: true
-  },
-]);
-const columns3 = ref<ColumnItem[]>([
-  {
-    title: '设备编号',
-    dataIndex: 'equipmentCode',
-    key: 'equipmentCode'
-  },
-  {
-    title: '所属门店',
-    dataIndex: 'merchantName',
-    key: 'merchantName'
-  },
-  {
-    title: '事件类型',
-    dataIndex: 'eventType',
-    key: 'eventType'
-  },
-  {
-    title: '使用电池',
-    dataIndex: 'duration',
-    key:'duration'
-  },
-  {
-    title: '操作人',
-    dataIndex: 'nickname',
-    key: 'nickname'
-  },
-  {
-    title: '操作时间',
-    dataIndex: 'createTime',
-    key: 'createTime'
-  }
-]);
-
-/* 制作步骤条 */
-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 getEquipmentOrderGoods = () => {
-  const orderId = props.data?.orderId;
-  const goodsId = props.data?.goodsId;
-  listEquipmentOrderGoods({orderId, goodsId}).then((data) => {
-    EquipmentOrderGoodsList.value = data;
-  });
-};
-
-
-/* 线下缴费 */
-const openOrderOnline = (row?: Order) => {
-  current.value = row ?? null;
-  showOrderXufei.value = true;
-};
-
-const getEquipment = () => {
-  EquipmentApi.listEquipment({orderId: order.orderId}).then((data) => {
-    if (data.length > 0) {
-      bindEquipmentCode.value = data[0].equipmentCode;
+  // 步骤条
+  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 order = reactive<Order>({
+    orderId: undefined,
+    orderNo: '',
+    userId: undefined,
+    orderSourceData: ''
   });
-};
 
-const getRenewOrder = () => {
-  loading.value = true;
-  console.log(order);
-  if (order.orderId > 28798) {
-    listOrderPay({
-      rentOrderId: order.orderId,
-      payStatus: 20,
-      sort: ' create_time asc'
-    }).then((data) => {
-      renewOrderList.value = data;
-      loading.value = false;
+  // 请求状态
+  const loading = ref(true);
+
+  const { resetFields } = useForm(order);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const columns = ref<ColumnItem[]>([
+    // {
+    //   title: '商品ID',
+    //   dataIndex: 'goodsId'
+    // },
+    {
+      title: '商品信息',
+      dataIndex: 'goodsName',
+      key: 'goodsName'
+    },
+    {
+      title: '下单方式',
+      dataIndex: 'equipmentCategory',
+      key: 'equipmentCategory'
+    },
+    {
+      title: '电池型号',
+      dataIndex: 'batteryModel',
+      key: 'batteryModel'
+    },
+    {
+      title: '电池价格',
+      dataIndex: 'batteryPrice',
+      key: 'batteryPrice',
+      customRender: ({ text }) => '￥' + text
+    },
+    {
+      title: '电池租金',
+      dataIndex: 'batteryRent',
+      key: 'batteryRent',
+      customRender: ({ text }) => '￥' + text
+    },
+    {
+      title: '分期方案',
+      dataIndex: 'more',
+      key: 'more'
+    },
+    {
+      title: '购买数量',
+      dataIndex: 'num',
+      key: 'num',
+      customRender: ({}) => 1
+    }
+  ]);
+
+  // 表格实例
+  const tableRef2 = ref<InstanceType<typeof EleProTable> | null>(null);
+  const columns2 = ref<ColumnItem[]>([
+    {
+      title: '当前期数',
+      dataIndex: 'currPeriods',
+      key: 'currPeriods'
+      // customRender: ({currPeriods}) => {
+      //   console.log({...order});
+      //
+      //   if (props.data.orderSource == 20) {
+      //     if (currPeriods == 0) {
+      //       return '首期';
+      //     } else {
+      //       return '第' + currPeriods + '期';
+      //     }
+      //   } else if (props.data.orderSource == 30 || props.data.orderSource == 40) {
+      //     return '第' + (currPeriods + 1) + '期';
+      //   } else if (props.data.orderSource == 10) {
+      //     return '一次性购买';
+      //   }
+      //
+      // }
+    },
+    {
+      title: '订单号',
+      dataIndex: 'orderNo',
+      key: 'orderNo'
+    },
+    {
+      title: '订单金额',
+      dataIndex: 'orderPrice',
+      key: 'orderPrice',
+      customRender: ({ text }) => '￥' + text
+    },
+    {
+      title: '设备租金',
+      dataIndex: 'batteryModel',
+      key: 'batteryModel'
+    },
+    {
+      title: '有效期限',
+      dataIndex: 'expirationTime',
+      key: 'expirationTime'
+    },
+    {
+      title: '付款时间',
+      dataIndex: 'payTime',
+      key: 'payTime'
+    },
+    {
+      title: '使用天数',
+      dataIndex: 'expirationDay',
+      key: 'expirationDay'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 100,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true
+    }
+  ]);
+  const columns3 = ref<ColumnItem[]>([
+    {
+      title: '设备编号',
+      dataIndex: 'equipmentCode',
+      key: 'equipmentCode'
+    },
+    {
+      title: '所属门店',
+      dataIndex: 'merchantName',
+      key: 'merchantName'
+    },
+    {
+      title: '事件类型',
+      dataIndex: 'eventType',
+      key: 'eventType'
+    },
+    {
+      title: '使用电池',
+      dataIndex: 'duration',
+      key: 'duration'
+    },
+    {
+      title: '操作人',
+      dataIndex: 'nickname',
+      key: 'nickname'
+    },
+    {
+      title: '操作时间',
+      dataIndex: 'createTime',
+      key: 'createTime'
+    }
+  ]);
+
+  /* 制作步骤条 */
+  const loadSteps = (order) => {
+    steps.value = [];
+    steps.value.push({
+      title: '下单'
     });
-  } else {
-    listOrder({
-      rentOrderId: order.orderId,
-      payStatus: 20,
-      sort: 'create_time asc'
-    }).then((data) => {
-      renewOrderList.value = data;
-      loading.value = false;
+    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 getEquipmentRecordList = () => {
-  EquipmentRecordApi.pageEquipmentRecord({
-    orderId: order.orderId,
-    userId: order.userId
-  }).then((data) => {
-    EquipmentRecordList.value = data.list;
-  });
-};
+  const getEquipmentOrderGoods = () => {
+    const orderId = props.data?.orderId;
+    const goodsId = props.data?.goodsId;
+    listEquipmentOrderGoods({ orderId, goodsId }).then((data) => {
+      EquipmentOrderGoodsList.value = data;
+    });
+  };
 
-// 表格数据源
-//   const datasource3: DatasourceFunction = ({
-//     page,
-//     limit,
-//     where,
-//     orders
-//   }) => {
-//     where.orderId = order.orderId
-//     where.userId = order.userId
-//     return EquipmentRecordApi.pageEquipmentRecord({
-//       ...where,
-//       ...orders,
-//       page,
-//       limit
-//     });
-//   };
+  /* 线下缴费 */
+  const openOrderOnline = (row?: Order) => {
+    current.value = row ?? null;
+    showOrderXufei.value = true;
+  };
 
-const expirationDay = (order) => {
-  const setTime = new Date(order.expirationTime);
-  const nowTime = new Date();
-  const restSec = setTime.getTime() - nowTime.getTime();
-  console.log("计算剩余天数");
-  console.log(restSec);
-  // 剩余天数
-  const day = parseInt(String(restSec / (60 * 60 * 24 * 1000)));
-  if (day < 0) {
-    return '逾期' + Math.abs(day) + '天';
-  }
-};
-
-const countDuration = (equipmentRecord) =>{//计算使用时间
-  if (equipmentRecord.eventType ==="电池解绑"){
-      if (equipmentRecord.duration !== null){
-        return equipmentRecord.duration+'天'
+  const getEquipment = () => {
+    EquipmentApi.listEquipment({ orderId: order.orderId }).then((data) => {
+      if (data.length > 0) {
+        bindEquipmentCode.value = data[0].equipmentCode;
       }
-      return '0天'
-  } else {
-      if (equipmentRecord.duration !== null){
-        return equipmentRecord.duration+'天';
-      }else {
+    });
+  };
+
+  const getRenewOrder = () => {
+    loading.value = true;
+    console.log(order);
+    if (order.orderId > 28798) {
+      listOrderPay({
+        rentOrderId: order.orderId,
+        payStatus: 20,
+        sort: ' create_time asc'
+      }).then((data) => {
+        renewOrderList.value = data;
+        loading.value = false;
+      });
+    } else {
+      listOrder({
+        rentOrderId: order.orderId,
+        payStatus: 20,
+        sort: 'create_time asc'
+      }).then((data) => {
+        renewOrderList.value = data;
+        loading.value = false;
+      });
+    }
+  };
+
+  const getEquipmentRecordList = () => {
+    EquipmentRecordApi.pageEquipmentRecord({
+      orderId: order.orderId,
+      userId: order.userId
+    }).then((data) => {
+      EquipmentRecordList.value = data.list;
+    });
+  };
+
+  // 表格数据源
+  //   const datasource3: DatasourceFunction = ({
+  //     page,
+  //     limit,
+  //     where,
+  //     orders
+  //   }) => {
+  //     where.orderId = order.orderId
+  //     where.userId = order.userId
+  //     return EquipmentRecordApi.pageEquipmentRecord({
+  //       ...where,
+  //       ...orders,
+  //       page,
+  //       limit
+  //     });
+  //   };
+
+  const expirationDay = (order) => {
+    const setTime = new Date(order.expirationTime);
+    const nowTime = new Date();
+    const restSec = setTime.getTime() - nowTime.getTime();
+    console.log('计算剩余天数');
+    console.log(restSec);
+    // 剩余天数
+    const day = parseInt(String(restSec / (60 * 60 * 24 * 1000)));
+    if (day < 0) {
+      return '逾期' + Math.abs(day) + '天';
+    }
+  };
+
+  const countDuration = (equipmentRecord) => {
+    //计算使用时间
+    if (equipmentRecord.eventType === '电池解绑') {
+      if (equipmentRecord.duration !== null) {
+        return equipmentRecord.duration + '天';
+      }
+      return '0天';
+    } else {
+      if (equipmentRecord.duration !== null) {
+        return equipmentRecord.duration + '天';
+      } else {
         return '';
       }
-  }
-}
+    }
+  };
 
-const getFiles = () => {
-  if (order.orderSourceData != '') {
-    const array = JSON.parse(<string>order.orderSourceData);
-    files.value = array.map((url, id) => {
-      return {
-        id: id,
-        url: url,
-        status: 'done'
-      };
-    });
-  }
-};
+  const getFiles = () => {
+    if (order.orderSourceData != '') {
+      const array = JSON.parse(<string>order.orderSourceData);
+      files.value = array.map((url, id) => {
+        return {
+          id: id,
+          url: url,
+          status: 'done'
+        };
+      });
+    }
+  };
 
-/* 保存编辑 */
-const save = () => {
-};
+  /* 保存编辑 */
+  const save = () => {};
 
-watch(
+  watch(
     () => props.visible,
     (visible) => {
       if (visible) {
@@ -872,14 +871,14 @@ watch(
         resetFields();
       }
     }
-);
+  );
 </script>
 <style lang="less" scoped>
-.order-card {
-  margin-bottom: 20px;
-}
+  .order-card {
+    margin-bottom: 20px;
+  }
 
-.ant-form-item {
-  margin-bottom: 5px;
-}
+  .ant-form-item {
+    margin-bottom: 5px;
+  }
 </style>