修改退款审核、订单详情等页面显示

2024-01-26 15:33:03 +08:00
parent c3413fd1a0
commit 8f6567e57e
24 changed files with 677 additions and 178 deletions
--- a/src/views/yunxinwei/order/components/battery-change.vue
+++ b/src/views/yunxinwei/order/components/battery-change.vue
@@ -0,0 +1,132 @@
+<!-- 服务编辑弹窗 -->
+<template >
+  <ele-modal
+    :width="400"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="'更换电池'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+    <a-form-item label="新电池编号">
+      <a-input
+        allow-clear
+        :maxlength="32"
+        placeholder="请输入新电池编号"
+        v-model:value="equipmentCode"
+      />
+      </a-form-item>
+
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import type { Order } from '@/api/order/model';
+  import { Equipment } from "@/api/apps/equipment/model";
+  import { batteryChange } from '@/api/order';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Order | null;
+
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<Equipment>({
+    orderId: props.data?.orderId,
+    equipmentCode: ''
+  });
+
+  const equipmentCode = ref('')
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    equipmentCode: [
+      {
+        required: true,
+        message: '请输入新电池编号',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 保存编辑 */
+  const save = () => {
+    const app = this
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value.validate()
+      .then(() => {
+        loading.value = true
+        batteryChange({
+          orderId:form.orderId,
+          equipmentCode: equipmentCode.value
+        })
+          .then((msg) => {
+            loading.value = false
+            message.success("更换电池成功！");
+            updateVisible(false);
+            emit('done');
+            loading.value = false;
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error("更换电池失败！" + e);
+          });
+      })
+      .catch(() => {});
+  };
+
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
--- a/src/views/yunxinwei/order/components/delivery.vue
+++ b/src/views/yunxinwei/order/components/delivery.vue
@@ -94,7 +94,7 @@ import { Order } from "@/api/order/model";
  // 是否显示最大化切换按钮
  const maxable = ref(true);

-  // 用户信息
+  // 表单数据
  const form = reactive<Equipment>({
    equipmentCode: '',
    orderId: undefined
--- a/src/views/yunxinwei/order/components/equipment-records.vue
+++ b/src/views/yunxinwei/order/components/equipment-records.vue
@@ -0,0 +1,90 @@
+<template>
+  <a-card :bordered="false" :body-style="{ padding: '10px 20px' }">
+    <ele-pro-table
+      ref="tableRef"
+      size="small"
+      title="换电记录"
+      row-key="id"
+      :columns="columns"
+      :datasource="datasource"
+      :scroll="{ x: 800 }"
+    />
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { toDateString } from 'ele-admin-pro/es';
+  import { pageUsers } from '@/api/system/user';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '用户账号',
+      dataIndex: 'username',
+      sorter: true,
+      ellipsis: true,
+      defaultSortOrder: 'ascend'
+    },
+    {
+      title: '用户名',
+      dataIndex: 'nickname',
+      sorter: true,
+      ellipsis: true
+    },
+    {
+      title: '性别',
+      dataIndex: 'sexName',
+      width: 140,
+      align: 'center',
+      sorter: true,
+      filters: [
+        {
+          text: '男',
+          value: '男'
+        },
+        {
+          text: '女',
+          value: '女'
+        }
+      ],
+      filterMultiple: false,
+      defaultFilteredValue: ['男']
+    },
+    {
+      title: '手机号',
+      dataIndex: 'phone',
+      sorter: true,
+      ellipsis: true
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text),
+      width: 180
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, orders, filters }) => {
+    return pageUsers({ ...orders, ...filters, page, limit });
+  };
+</script>
--- a/src/views/yunxinwei/order/components/order-info.vue
+++ b/src/views/yunxinwei/order/components/order-info.vue
@@ -254,15 +254,17 @@
    </a-card>
    <a-card title="换电记录" class="order-card">
      <a-spin :spinning="loading">
-        <a-table
-          :data-source="equipmentRecordList"
+        <ele-pro-table
+          :datasource="equipmentRecordList"
          :columns="columns3"
+          row-key="id"
          ref="tableRef3"
-          :pagination="false"
+          size="small"
+          :toolkit="[]"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'batteryModel'">
-              <div>电池租金：￥{{ record.batteryDeposit }}</div>
+              <div>电池租金：￥{{ record.batteryRent }}</div>
              <div>电池押金：￥{{ record.batteryDeposit }}</div>
              <div>电池保险：￥{{ record.batteryInsurance }}</div>
            </template>
@@ -270,7 +272,7 @@
              <span class="ele-text-danger">{{ expirationDay(record) }}</span>
            </template>
          </template>
-        </a-table>
+        </ele-pro-table>
      </a-spin>
    </a-card>
    <a-card title="缴费记录" class="order-card">
@@ -283,7 +285,7 @@
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'batteryModel'">
-              <div>电池租金：￥{{ record.batteryDeposit }}</div>
+              <div>电池租金：￥{{ record.batteryRent }}</div>
              <div>电池押金：￥{{ record.batteryDeposit }}</div>
              <div>电池保险：￥{{ record.batteryInsurance }}</div>
            </template>
@@ -302,6 +304,7 @@
      <a-spin :spinning="loading">
        <ele-image-upload
          v-model:value="files"
+          da
          disabled
          :item-style="{ width: '150px', height: '99px' }"
        />
@@ -329,7 +332,22 @@
              : { span: 8 }
          "
        >
-          <a-form-item label="联系电话" name="payPrice" />
+          <a-form-item label="联系电话" name="receiptPhone">
+            <span>{{ data.receiptPhone }}</span>
+          </a-form-item>
+        </a-col>
+        </a-row>
+        <a-row :gutter="16">
+        <a-col
+          v-bind="
+            styleResponsive
+              ? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
+              : { span: 8 }
+          "
+        >
+          <a-form-item label="紧急联系人" name="emergentUser">
+            <span>{{ data.emergentUser }}</span>
+          </a-form-item>
        </a-col>
        <a-col
          v-bind="
@@ -338,7 +356,9 @@
              : { span: 8 }
          "
        >
-          <a-form-item label="所在地区" name="payMethod" />
+          <a-form-item label="单位地址" name="officeAddress">
+            <span>{{ data.officeAddress }}</span>
+          </a-form-item>
        </a-col>
        <a-col
          v-bind="
@@ -347,7 +367,9 @@
              : { span: 8 }
          "
        >
-          <a-form-item label="详细地址" name="payMethod" />
+          <a-form-item label="家庭地址" name="homeAddress">
+            <span>{{ data.homeAddress }}</span>
+          </a-form-item>
        </a-col>
      </a-row>
    </a-card>
@@ -363,11 +385,14 @@
  import { storeToRefs } from 'pinia';
  import { copyText } from '@/utils/common';
  import { Order } from '@/api/order/model';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
  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 } 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';
@@ -396,7 +421,7 @@
  const maxAble = ref(true);
  const EquipmentOrderGoodsList = ref<EquipmentOrderGoods[]>([]);
  const renewOrderList = ref<Order[]>([]);
-  const equipmentRecordList = ref<EquipmentRecord[]>([]);
+  // const equipmentRecordList = ref<EquipmentRecord[]>([]);
  const bindEquipmentCode = ref<string>();
  const files = ref<any[]>();

@@ -490,6 +515,26 @@
      dataIndex: 'num',
      key: 'num',
      customRender: ({}) => 1
+    },
+    {
+      title: '收货人手机号',
+      key: 'receiptPhone',
+      dataIndex: 'receiptPhone'
+    },
+    {
+      title: '紧急联系人',
+      key: 'emergentUser',
+      dataIndex: 'emergentUser'
+    },
+    {
+      title: '单位地址',
+      key: 'officeAddress',
+      dataIndex: 'officeAddress'
+    },
+    {
+      title: '家庭地址',
+      key: 'homeAddress',
+      dataIndex: 'homeAddress'
    }
  ]);

@@ -529,7 +574,7 @@
      customRender: ({ text }) => '￥' + text
    },
    {
-      title: '设备租金',
+      title: '设备型号',
      dataIndex: 'batteryModel',
      key: 'batteryModel'
    },
@@ -543,6 +588,21 @@
      dataIndex: 'payTime',
      key: 'payTime'
    },
+    {
+      title: '电池租金',
+      dataIndex: 'batteryRent',
+      key: 'batteryRent'
+    },
+    {
+      title: '电池押金',
+      dataIndex: 'batteryDeposit',
+      key: 'batteryDeposit'
+    },
+    {
+      title: '电池保险',
+      dataIndex: 'batteryInsurance',
+      key: 'batteryInsurance'
+    },
    {
      title: '逾期状态',
      dataIndex: 'expirationDay',
@@ -680,21 +740,34 @@

  };

-  const getEquipmentRecordList = () => {
-    EquipmentRecordApi.listEquipmentRecord({
+  /* const getEquipmentRecordList: DatasourceFunction = () => {
+    return EquipmentRecordApi.pageEquipmentRecord({
      orderId: order.orderId,
-      userId: order.userId
-    }).then((data) => {
-      equipmentRecordList.value = data;
+      userId: order.userId,
+      limit: 5
    });
+  }; */
+
+// 表格实例
+  const tableRef3 = ref<InstanceType<typeof EleProTable> | null>(null);
+  const equipmentRecordList: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    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);
+    // console.log("计算剩余天数");
+    // console.log(restSec);
    // 剩余天数
    const day = parseInt(String(restSec / (60 * 60 * 24 * 1000)));
    if (day < 0) {
@@ -730,7 +803,7 @@
          getEquipmentOrderGoods();
          getRenewOrder();
          getEquipment();
-          getEquipmentRecordList();
+          // getEquipmentRecordList();
        }
      } else {
        resetFields();
--- a/src/views/yunxinwei/order/components/search.vue
+++ b/src/views/yunxinwei/order/components/search.vue
@@ -3,29 +3,25 @@
  <a-space :size="10" style="flex-wrap: wrap">
    <a-radio-group v-model:value="listType" @change="handleTabs">
      <a-radio-button :value="0">全部订单</a-radio-button>
-      <a-radio-button :value="1">待发货</a-radio-button>
+      <!-- <a-radio-button :value="1">待发货</a-radio-button> -->
      <a-radio-button :value="2">待收货</a-radio-button>
      <a-radio-button :value="3">待付款</a-radio-button>
-      <a-radio-button :value="4">已完成</a-radio-button>
-      <a-radio-button :value="5">已取消</a-radio-button>
+      <!-- <a-radio-button :value="4">已完成</a-radio-button> -->
+      <a-radio-button :value="4">进行中</a-radio-button>
+      <!-- <a-radio-button :value="5">已取消</a-radio-button> -->
+      <a-radio-button :value="5">已退租</a-radio-button>
    </a-radio-group>
-    <a-button
-      danger
-      type="primary"
-      class="ele-btn-icon"
-      :disabled="selection.length === 0"
-      @click="removeBatch"
-    >
-      <template #icon>
-        <delete-outlined />
-      </template>
-      <span>批量删除</span>
-    </a-button>
    <a-range-picker
      v-model:value="dateRange"
      value-format="YYYY-MM-DD"
      class="ele-fluid"
    />
+    <a-select v-model:value="expire" style="width: 100px; " @change="search">
+      <a-select-option value="0">到期时间</a-select-option>
+      <a-select-option value="1">7天</a-select-option>
+      <a-select-option value="2">3天</a-select-option>
+      <a-select-option value="3">已逾期</a-select-option>
+    </a-select>
    <a-input-search
      allow-clear
      placeholder="请输入关键词"
@@ -42,6 +38,19 @@
        </a-select>
      </template>
    </a-input-search>
+
+    <a-button
+      danger
+      type="primary"
+      class="ele-btn-icon"
+      :disabled="selection.length === 0"
+      @click="removeBatch"
+    >
+      <template #icon>
+        <delete-outlined />
+      </template>
+      <span>批量删除</span>
+    </a-button>
  </a-space>
 </template>

@@ -77,6 +86,7 @@
  const type = ref('keywords');
  // 搜索内容
  const searchText = ref('');
+  const expire = ref('0');
  // 日期范围选择
  const dateRange = ref<[string, string]>(['', '']);
  const listType = ref<number>(0);
@@ -84,20 +94,35 @@
  /* 搜索 */
  const search = () => {
    const [d1, d2] = dateRange.value ?? [];
-    if (type.value == 'orderNo') {
-      where.orderNo = searchText.value;
-      where.userId = undefined;
-    }
-    if (type.value == 'userId') {
-      where.userId = searchText.value;
-      where.orderNo = undefined;
-    }
-    if (type.value == 'merchantCode') {
-      where.merchantCode = searchText.value;
-      where.orderNo = undefined;
-    }
-    if (type.value == 'keywords') {
-      where.keywords = searchText.value;
+
+    if(expire.value == '1'){
+      where.expireDay = 7
+      where.isExpire = -1
+    } else if(expire.value == '2'){
+      where.expireDay = 3
+      where.isExpire = -1
+    } else if(expire.value == '3'){
+      where.isExpire = 1
+      where.expireDay = 0
+    } else {
+      where.isExpire = -1
+      where.expireDay = 0
+
+      if (type.value == 'orderNo') {
+        where.orderNo = searchText.value;
+        where.userId = undefined;
+      }
+      if (type.value == 'userId') {
+        where.userId = searchText.value;
+        where.orderNo = undefined;
+      }
+      if (type.value == 'merchantCode') {
+        where.merchantCode = searchText.value;
+        where.orderNo = undefined;
+      }
+      if (type.value == 'keywords') {
+        where.keywords = searchText.value;
+      }
    }
    emit('search', {
      ...where,
@@ -116,36 +141,39 @@
    const listType = Number(e.target.value);
    // 全部订单
    if (listType == 0) {
-      console.log('全部订单');
+      // console.log('全部订单');
+    } else {
+      where.isExpire = -1
+      where.expireDay = 0
    }
    // 待发货
-    if (listType == 1) {
-      console.log('待发货');
-      where.payStatus = 20;
-      where.deliveryStatus = 10;
-    }
+    // if (listType == 1) {
+    //   console.log('待发货');
+    //   where.payStatus = 20;
+    //   where.deliveryStatus = 10;
+    // }
    // 待收货
    if (listType == 2) {
-      console.log('待发货');
+      // console.log('待发货');
      where.payStatus = 20;
-      where.deliveryStatus = 20;
+      where.deliveryStatus <= 20;
      where.receiptStatus = 10;
    }
    // 待付款
    if (listType == 3) {
-      console.log('待付款');
+      // console.log('待付款');
      where.payStatus = 10;
    }
    // 已完成
    if (listType == 4) {
-      console.log('已完成');
+      // console.log('已完成');
      where.payStatus = 20;
      where.orderStatus = 30;
    }
    // 已取消
    if (listType == 5) {
-      console.log('已取消');
-      where.orderStatus = 20;
+      // console.log('已取消');
+      where.receiptStatus = 30;
    }
    emit('search', {
      ...where
--- a/src/views/yunxinwei/order/index.vue
+++ b/src/views/yunxinwei/order/index.vue
@@ -23,6 +23,11 @@
            />
          </template>
          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'restDay'">
+                <strong v-if="record.restDay < 0" :style="{ color: 'red' }">{{ record.restDay }}</strong>
+                <span v-else-if="record.restDay >= 0">{{ record.restDay }}</span>
+                <span> 天</span>
+            </template>
            <template v-if="column.key === 'merchantName'">
              <div style="display: flex; flex-direction: column">
                <span>{{ record.merchantName }}</span>
@@ -84,34 +89,23 @@
              <div class="ele-text-placeholder">
                <!--                发货状态：-->
                <a-tag v-if="record.deliveryStatus === 10">未发货</a-tag>
-                <a-tag v-if="record.deliveryStatus === 20" color="success"
-                  >已发货</a-tag
-                >
+                <a-tag v-else-if="record.deliveryStatus === 20" color="success"
+                  >已发货</a-tag>
              </div>
              <div class="ele-text-placeholder">
                <!--                收货状态：-->
                <a-tag v-if="record.receiptStatus === 10">未收货</a-tag>
-                <a-tag v-if="record.receiptStatus === 20" color="success"
-                  >已收货</a-tag
-                >
-                <a-tag v-if="record.receiptStatus === 21" color="purple"
-                  >退租中</a-tag
-                >
-                <a-tag v-if="record.receiptStatus === 30" color="error"
-                  >已退租</a-tag
-                >
+                <a-tag v-else-if="record.receiptStatus === 20" color="success">已收货</a-tag>
+                <a-tag v-else-if="record.receiptStatus === 21" color="purple">退租中</a-tag>
+                <a-tag v-else-if="record.receiptStatus === 30" color="error">已退租</a-tag>
              </div>
              <div class="ele-text-placeholder" v-if="record.orderSource != 10">
                <!--                分期状态：-->
                <a-tag v-if="record.fenqiStatus == 1" color="success"
                  >已完成</a-tag
                >
-                <a-tag v-else-if="record.expirationDay < 0" color="error"
-                  >逾期{{ record.expirationDay }}天</a-tag
-                >
-                <a-tag v-else-if="record.expirationDay >= 0" color="warning"
-                  >剩余{{ record.expirationDay }}天</a-tag
-                >
+                <!-- <a-tag v-else-if="record.expirationDay < 0" color="error">逾期{{ record.expirationDay }}天</a-tag> -->
+                <!-- <a-tag v-else-if="record.expirationDay >= 0" color="warning">剩余{{ record.expirationDay }}天</a-tag> -->
              </div>
            </template>
            <template v-if="column.key === 'comments'">
@@ -175,13 +169,19 @@
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
-                <a-button @click="openInfo(record)">详情</a-button>
+                <a-button class="ele-text-primary" @click="openInfo(record)">详情</a-button>
              </a-space>
+              <view v-if="record.deliveryStatus == 40">
+                <a-divider type="vertical" />
+                <a-button class="ele-text-danger" @click="openChange(record)">换电</a-button>
+              </view>
+
            </template>
          </template>
        </ele-pro-table>
      </a-card>
    </div>
+    <battery-change v-model:visible="showChange" :data="current" @done="reload"/>
    <!-- 编辑弹窗 -->
    <Delivery v-model:visible="deliveryEdit" :data="current" @done="reload" />
    <Markdown
@@ -227,10 +227,12 @@
  import Markdown from './components/markdown.vue';
  import Field from './components/field.vue';
  import OrderInfo from './components/order-info.vue';
+  import BatteryChange from './components/battery-change.vue';
  import { pageOrder, removeOrder, removeBatchOrder } from '@/api/order';
  import { alipayQuery } from '@/api/system/payment';
  import type { Order, OrderParam } from '@/api/order/model';
  import { getDictionaryOptions } from '@/utils/common';
+  import { Equipment } from "@/api/apps/equipment/model";

  // 当前用户信息
  // const userStore = useUserStore();
@@ -307,11 +309,11 @@
      sorter: true
    },
    {
-      title: '逾期天数',
-      dataIndex: 'expirationDay',
-      key: 'expirationDay',
+      title: '剩余天数',
+      dataIndex: 'restDay',
+      key: 'restDay',
      align: 'center',
-      sorter: true
+      sorter: false
    },
    {
      title: '买家',
@@ -360,6 +362,32 @@
    //   dataIndex: 'orderSourceData',
    //   key: 'orderSourceData'
    // },
+    {
+      title: '推荐人手机号',
+      key: 'dealerPhone',
+      dataIndex: 'dealerPhone',
+      ellipsis: true
+    },
+    {
+      title: '收货人手机号',
+      key: 'receiptPhone',
+      dataIndex: 'receiptPhone'
+    },
+    {
+      title: '紧急联系人',
+      key: 'emergentUser',
+      dataIndex: 'emergentUser'
+    },
+    {
+      title: '单位地址',
+      key: 'officeAddress',
+      dataIndex: 'officeAddress'
+    },
+    {
+      title: '家庭地址',
+      key: 'homeAddress',
+      dataIndex: 'homeAddress'
+    },
    {
      title: '配送方式',
      key: 'deliveryType',
@@ -377,6 +405,7 @@
      ],
      filterMultiple: false
    },
+    
    {
      title: '创建时间',
      dataIndex: 'createTime',
@@ -412,6 +441,8 @@
  const showInfo = ref(false);
  // 是否显示编辑弹窗
  const showEdit = ref(false);
+  // 是否显示换电弹窗
+  const showChange = ref(false);
  const markdown = ref('请输入备注内容');
  const content = ref('请输入要修改的内容');
  const showMarkdown = ref(false);
@@ -490,6 +521,12 @@
    showInfo.value = true;
  };

+  /* 打开换电弹窗 */
+  const openChange = (row?: Order) => {
+    current.value = row ?? null;
+    showChange.value = true;
+  };
+
  /* 打开高级搜索 */
  const openAdvanced = () => {
    showAdvancedSearch.value = !showAdvancedSearch.value;