赵忠林
72194db479
- 修改开发和生产环境配置文件中的API和WebSocket地址 - 添加updateOrderPay API方法用于更新订单支付信息 - 在订单信息组件中添加日期选择器用于修改开始和过期时间 - 实现订单过期天数计算逻辑的改进 - 添加数据保存成功提示消息 - 更新头像文件存储地址配置
928 lines
26 KiB
Vue
928 lines
26 KiB
Vue
<!-- 用户编辑弹窗 -->
|
|
<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-steps
|
|
:current="active"
|
|
direction="horizontal"
|
|
:responsive="styleResponsive"
|
|
>
|
|
<template v-for="(item, index) in steps" :key="index">
|
|
<a-step
|
|
:title="item.title"
|
|
:description="timeAgo(item.description)"
|
|
/>
|
|
</template>
|
|
</a-steps>
|
|
</a-card>
|
|
<a-card title="订单操作" class="order-card">
|
|
<a-space>
|
|
<a-button>发货</a-button>
|
|
<a-button>商家备注</a-button>
|
|
<a-button>打印小票</a-button>
|
|
</a-space>
|
|
<a-row :gutter="16" style="margin-top: 34px">
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="订单编号" name="orderNo">
|
|
<span>{{ data.orderNo }}</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
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
|
|
>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
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" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
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" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="运费金额" name="deliveryType">
|
|
<span>￥{{ formatNumber(data.expressPrice) }}</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
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" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="买家信息" name="deliveryType">
|
|
<router-link :to="'/system/user/details?id=' + data.userId">
|
|
<span class="ele-text-primary">{{ data.nickname }}</span>
|
|
</router-link>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="第三方交易号" name="tradeId">
|
|
<span>{{ data.tradeId }}</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="设备编号" name="equipmentCode">
|
|
<span>
|
|
{{ bindEquipmentCode }}
|
|
<copy-outlined
|
|
style="padding-left: 4px"
|
|
@click="copyText(bindEquipmentCode)"
|
|
/>
|
|
</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="下单时间" name="createTime">
|
|
{{ data.createTime }}
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="到期时间" name="expirationTime">
|
|
{{ data.expirationTime }}
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="买家留言" name="buyerRemark">
|
|
<span>{{ data.buyerRemark }}</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="订单备注" name="comments">
|
|
<span>{{ data.comments }}</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
<a-card title="订单商品" class="order-card">
|
|
<a-spin :spinning="loading">
|
|
<a-table
|
|
: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"
|
|
/>
|
|
<span>{{ record.goodsName }}</span>
|
|
</template>
|
|
<template v-if="column.key === 'batteryRent'">
|
|
<div>电池租金：￥{{ record.batteryRent }}</div>
|
|
<div>电池押金：￥{{ record.batteryDeposit }}</div>
|
|
<div>电池保险：￥{{ record.batteryInsurance }}</div>
|
|
</template>
|
|
<template v-if="column.key === 'equipmentCategory'">
|
|
<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
|
|
v-if="Number(record.equipmentCategory) === 30"
|
|
color="orange"
|
|
>以租代购
|
|
</a-tag>
|
|
<a-tag v-if="Number(record.equipmentCategory) === 40" color="blue"
|
|
>租赁
|
|
</a-tag>
|
|
</template>
|
|
<template v-if="column.key === 'more'">
|
|
<div v-if="record.periodsType > 0">
|
|
<span class="ele-text-placeholder">分期方式：</span>
|
|
{{ record.periodsType === 0 ? '周' : '月' }}
|
|
</div>
|
|
<div v-if="record.periods > 0">
|
|
<span class="ele-text-placeholder">分期期数：</span>
|
|
{{ record.periods }}
|
|
</div>
|
|
<div v-if="record.downPayment">
|
|
<span class="ele-text-placeholder">首付款：</span>
|
|
{{ record.downPayment }}
|
|
</div>
|
|
<div v-if="record.repayment > 0">
|
|
<span class="ele-text-placeholder">每期还款：</span>
|
|
{{ record.repayment }}
|
|
</div>
|
|
<div v-if="record.serviceCharges > 0">
|
|
<span class="ele-text-placeholder">手续费：</span>
|
|
{{ record.serviceCharges }}
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</a-spin>
|
|
</a-card>
|
|
<a-card title="换电记录" class="order-card">
|
|
<a-spin :spinning="loading">
|
|
<a-table
|
|
:data-source="EquipmentRecordList"
|
|
:columns="columns3"
|
|
:pagination="true"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'batteryModel'">
|
|
<div>电池租金：￥{{ record.batteryRent }}</div>
|
|
<div>电池押金：￥{{ record.batteryDeposit }}</div>
|
|
<div>电池保险：￥{{ record.batteryInsurance }}</div>
|
|
</template>
|
|
|
|
<template v-if="column.key === 'duration'">
|
|
<span class="ele-text-danger">{{ countDuration(record) }}</span>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</a-spin>
|
|
</a-card>
|
|
<a-card title="缴费记录" class="order-card">
|
|
<a-spin :spinning="loading">
|
|
<a-table
|
|
:data-source="renewOrderList"
|
|
:columns="columns2"
|
|
ref="tableRef2"
|
|
:pagination="true"
|
|
>
|
|
<template #bodyCell="{ column, record, index }">
|
|
<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
|
|
: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>
|
|
<a-date-picker
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
@change="changeData(record, 'startTime')"
|
|
class="ele-fluid"
|
|
placeholder="请选择时间"
|
|
v-model:value="record.startTime"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<a-date-picker
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
@change="changeData(record, 'expirationTime')"
|
|
class="ele-fluid"
|
|
placeholder="请选择时间"
|
|
v-model:value="record.expirationTime"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<template v-if="column.key === 'expirationDay'">
|
|
<span
|
|
class="ele-text-danger"
|
|
v-if="expirationDay(record, index).includes('逾期')"
|
|
>{{ expirationDay(record, index) }}</span
|
|
>
|
|
<span class="ele-text-success" v-else>{{
|
|
expirationDay(record, index)
|
|
}}</span>
|
|
</template>
|
|
|
|
<template v-if="column.key === 'action'">
|
|
<view>
|
|
<a-button @click="openOrderOnline(record)"
|
|
>续费该设备
|
|
</a-button>
|
|
</view>
|
|
</template>
|
|
|
|
<template v-if="column.key === 'currPeriods'">
|
|
<view v-if="record.orderSource === 10">
|
|
<span>一次性购买</span>
|
|
</view>
|
|
<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' }"
|
|
/>
|
|
</a-spin>
|
|
</a-card>
|
|
<a-card title="买家收货地址" class="order-card">
|
|
<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="orderNo">
|
|
<router-link :to="'/system/user/details?id=' + data.userId">
|
|
<span class="ele-text-primary">{{ data.realName }}</span>
|
|
</router-link>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="联系电话" name="receiptPhone">
|
|
<span>{{ data.receiptPhone }}</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="身份证号" name="idCode">
|
|
<span>{{ data.idCode }}</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="详细地址" name="address">
|
|
<span>{{ data.address }}</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="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="收货地址" name="officeAddress">
|
|
<span>{{ data.officeAddress }}</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="家庭地址" name="homeAddress">
|
|
<span>{{ data.homeAddress }}</span>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
<order-xufei
|
|
v-model:visible="showOrderXufei"
|
|
:data="current"
|
|
@done="getRenewOrder"
|
|
/>
|
|
</ele-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { Form, message } 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, OrderPay } 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, updateOrderPay } from '@/api/order';
|
|
import { CopyOutlined } from '@ant-design/icons-vue';
|
|
import { EquipmentRecord } from '@/api/apps/equipment/record/model';
|
|
import dayjs from 'dayjs';
|
|
|
|
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;
|
|
}>();
|
|
|
|
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
|
|
}
|
|
]);
|
|
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 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 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,
|
|
limit: 100
|
|
}).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, index) => {
|
|
if (dayjs(order.expirationTime).isBefore(dayjs())) {
|
|
if (index === 0) {
|
|
const useDay = dayjs().diff(dayjs(order.expirationTime), 'd');
|
|
return `逾期${useDay}天`;
|
|
} else {
|
|
const useDay = dayjs(order.expirationTime).diff(
|
|
dayjs(props?.data?.payTime),
|
|
'd'
|
|
);
|
|
return `使用${useDay}天`;
|
|
}
|
|
} else {
|
|
const day = dayjs(order.expirationTime).diff(dayjs(order.payTime), 'd');
|
|
if (day < 0) {
|
|
return '逾期' + Math.abs(day) + '天';
|
|
} else {
|
|
const useDay = dayjs().diff(dayjs(props?.data?.payTime), 'd');
|
|
return `使用${useDay}天`;
|
|
}
|
|
}
|
|
};
|
|
|
|
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 changeData = async (data: OrderPay) => {
|
|
await updateOrderPay(data);
|
|
message.success('保存成功');
|
|
};
|
|
|
|
/* 保存编辑 */
|
|
const save = () => {};
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(visible) => {
|
|
if (visible) {
|
|
if (props.data) {
|
|
loading.value = false;
|
|
assignObject(order, props.data);
|
|
loadSteps(props.data);
|
|
getFiles();
|
|
getEquipmentOrderGoods();
|
|
getRenewOrder();
|
|
getEquipment();
|
|
getEquipmentRecordList();
|
|
}
|
|
} else {
|
|
resetFields();
|
|
emit('done')
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.order-card {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ant-form-item {
|
|
margin-bottom: 5px;
|
|
}
|
|
</style>
|