南宁网宿科技
392 lines
10 KiB
Vue
392 lines
10 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">
|
|
<a-col
|
|
v-bind="
|
|
styleResponsive
|
|
? { xl: 8, lg: 12, md: 12, sm: 24, xs: 24 }
|
|
: { span: 8 }
|
|
"
|
|
>
|
|
<a-form-item label="订单号" name="orderId">
|
|
<span>{{ order.orderId }}</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(order.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="orderStatus">
|
|
<a-tag>{{ order.payStatus === 20 ? '已下单' : '' }}</a-tag>
|
|
</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=' + order.userId">
|
|
<span class="ele-text-primary">{{ order.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="deliveryTime">
|
|
{{ toDateString(order.deliveryTime, 'yyyy-MM-dd') }}
|
|
</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">
|
|
{{ order.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="orderNo">
|
|
{{ order.orderNo }}
|
|
</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>{{ order.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>{{ order.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="orderGoodsList"
|
|
:columns="columns"
|
|
:pagination="false"
|
|
>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'goodsName'">
|
|
<div class="goods-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">{{ record.comments }}</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, toDateString } from 'ele-admin-pro';
|
|
import { useThemeStore } from '@/store/modules/theme';
|
|
import { formatNumber } from 'ele-admin-pro/es';
|
|
import { storeToRefs } from 'pinia';
|
|
import { Order } from '@/api/order/model';
|
|
import { ColumnItem } from 'ele-admin-pro/es/ele-pro-table/types';
|
|
import { OrderGoods } from '@/api/order/goods/model';
|
|
import { getOrder } from '@/api/order';
|
|
import { listOrderGoods } from '@/api/order/goods';
|
|
|
|
const useForm = Form.useForm;
|
|
// 是否开启响应式布局
|
|
const themeStore = useThemeStore();
|
|
const { styleResponsive } = storeToRefs(themeStore);
|
|
|
|
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 orderGoodsList = ref<OrderGoods[]>([]);
|
|
|
|
// 步骤条
|
|
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: '',
|
|
nickname: '',
|
|
comments: '',
|
|
createTime: undefined,
|
|
deliveryTime: '',
|
|
payPrice: undefined,
|
|
payStatus: undefined
|
|
});
|
|
|
|
// 请求状态
|
|
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: 'goodsPrice',
|
|
customRender: ({ text }) => '￥' + text
|
|
},
|
|
{
|
|
title: '购买数量',
|
|
dataIndex: 'totalNum',
|
|
key: 'totalNum'
|
|
}
|
|
]);
|
|
|
|
/* 制作步骤条 */
|
|
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 queryOrder = () => {
|
|
var orderId = props.data?.orderId;
|
|
getOrder(orderId).then((res) => {
|
|
assignObject(order, res);
|
|
});
|
|
};
|
|
|
|
const getOrderGoods = () => {
|
|
const orderId = props.data?.orderId;
|
|
listOrderGoods({ orderId }).then((data) => {
|
|
orderGoodsList.value = data;
|
|
});
|
|
};
|
|
|
|
/* 保存编辑 */
|
|
const save = () => {};
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(visible) => {
|
|
if (visible) {
|
|
if (props.data) {
|
|
loading.value = false;
|
|
queryOrder();
|
|
// assignObject(order, props.data);
|
|
loadSteps(props.data);
|
|
getOrderGoods();
|
|
}
|
|
} else {
|
|
resetFields();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.order-card {
|
|
margin-bottom: 20px;
|
|
}
|
|
.ant-form-item {
|
|
margin-bottom: 5px;
|
|
}
|
|
.goods-info {
|
|
display: flex;
|
|
.info {
|
|
padding-left: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|