czg_team/cashier_desktop
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

对接订单打印小票

Browse Source
This commit is contained in:
gyq
2025-03-05 09:35:34 +08:00
parent 573dd88b24
commit db3fc1f6dc
22 changed files with 838 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/views/order/index.vue
View File

@@ -1,12 +1,25 @@
<template>
<div class="container">
<div class="query_wrap">
<el-input v-model="queryForm.orderNo" placeholder="请输入订单编号" style="width: 240px;"></el-input>
<el-input
v-model="queryForm.orderNo"
placeholder="请输入订单编号"
style="width: 240px"
></el-input>
<!-- <el-input v-model="queryForm.productName" placeholder="请输入商品名称" style="width: 200px;"></el-input> -->
<el-select v-model="queryForm.status" placeholder="订单状态" style="width: 140px;" @change="queryFormHandle">
<el-select
v-model="queryForm.status"
placeholder="订单状态"
style="width: 140px"
@change="queryFormHandle"
>
<el-option label="全部" value=""></el-option>
<el-option :label="item.label" :value="item.type" v-for="item in globalStore.orderStatus"
:key="item.type"></el-option>
<el-option
:label="item.label"
:value="item.type"
v-for="item in globalStore.orderStatus"
:key="item.type"
></el-option>
</el-select>
<DateRange ref="DateRangeRef" @success="dateSucess" />
<div class="flex">
@@ -16,15 +29,33 @@
</div>
<div class="table_wrap">
<div class="table">
<el-table :data="tableData.list" v-loading="tableData.loading" border strip height="100%">
<el-table-column label="台桌" prop="tableName" width="80"></el-table-column>
<el-table
:data="tableData.list"
v-loading="tableData.loading"
border
strip
height="100%"
>
<el-table-column
label="台桌"
prop="tableName"
width="80"
></el-table-column>
<el-table-column label="订单信息" width="240">
<template v-slot="scope">
<div class="column">
<div class="row">订单号：{{ scope.row.orderNo }}</div>
<div class="row">订单类型：{{ filterLable('orderType', scope.row.orderType) }}</div>
<div class="row">平台类型：{{ filterLable('platformType', scope.row.platformType) }}</div>
<div class="row">用餐模式：{{ filterLable('dineMode', scope.row.dineMode) }}</div>
<div class="row">
订单类型：{{ filterLable("orderType", scope.row.orderType) }}
</div>
<div class="row">
平台类型：{{
filterLable("platformType", scope.row.platformType)
}}
</div>
<div class="row">
用餐模式：{{ filterLable("dineMode", scope.row.dineMode) }}
</div>
<div class="row">订单备注：{{ scope.row.remark }}</div>
</div>
</template>
@@ -32,12 +63,18 @@
<el-table-column label="支付信息" width="280">
<template v-slot="scope">
<div class="column">
<div class="row">支付类型：{{ filterLable('payType', scope.row.payType) }}</div>
<div class="row">
支付类型：{{ filterLable("payType", scope.row.payType) }}
</div>
<div class="row">支付单号：{{ scope.row.payOrderNo }}</div>
<div class="row">支付金额：￥{{ scope.row.payAmount }}</div>
<div class="row">支付时间：{{ scope.row.paidTime }}</div>
<div class="row">订单金额（含折扣）：￥{{ scope.row.orderAmount }}</div>
<div class="row">订单原金额（含折扣）：￥{{ scope.row.originAmount }}</div>
<div class="row">
订单金额（含折扣）：￥{{ scope.row.orderAmount }}
</div>
<div class="row">
订单原金额（含折扣）：￥{{ scope.row.originAmount }}
</div>
</div>
</template>
</el-table-column>
@@ -48,17 +85,31 @@
</el-table-column>
<el-table-column label="状态" width="100">
<template v-slot="scope">
{{ filterLable('orderStatus', scope.row.status) }}
{{ filterLable("orderStatus", scope.row.status) }}
</template>
</el-table-column>
<el-table-column label="操作" width="150" align="center" fixed="right">
<el-table-column
label="操作"
width="150"
align="center"
fixed="right"
>
<template v-slot="scope">
<div class="column">
<div class="row">
<el-button type="primary" @click="RefundDrawerRef.show(scope.row)">订单退款</el-button>
<el-button
type="primary"
@click="RefundDrawerRef.show(scope.row)"
>订单退款</el-button
>
</div>
<div class="row" style="margin-top: 10px;">
<el-button type="success">订单打印</el-button>
<div class="row" style="margin-top: 10px">
<el-button
type="success"
@click="PrintDrawerRef.show(scope.row)"
>
订单打印
</el-button>
</div>
</div>
</template>
@@ -66,104 +117,115 @@
</el-table>
</div>
<div class="pagination">
<el-pagination background v-model:current-page="queryForm.page" v-model:page-size="queryForm.size"
:page-sizes="[10, 30, 50, 100]" layout="sizes, pager, jumper, total" :total="tableData.total"
@size-change="orderListAjax" @current-change="orderListAjax"></el-pagination>
<el-pagination
background
v-model:current-page="queryForm.page"
v-model:page-size="queryForm.size"
:page-sizes="[10, 30, 50, 100]"
layout="sizes, pager, jumper, total"
:total="tableData.total"
@size-change="orderListAjax"
@current-change="orderListAjax"
></el-pagination>
</div>
</div>
</div>
<!-- 退款操作 -->
<RefundDrawer ref="RefundDrawerRef" @success="queryFormHandle" />
<!-- 打印操作 -->
<PrintDrawer ref="PrintDrawerRef" />
</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import { orderList } from '@/api/order.js'
import { useGlobal } from '@/store/global.js'
import DateRange from './components/dateRange.vue'
import RefundDrawer from './components/refundDrawer.vue'
import { onMounted, ref, reactive } from "vue";
import { orderList } from "@/api/order.js";
import { useGlobal } from "@/store/global.js";
import DateRange from "./components/dateRange.vue";
import RefundDrawer from "./components/refundDrawer.vue";
import PrintDrawer from "./components/printDrawer.vue";
const RefundDrawerRef = ref(null)
const DateRangeRef = ref(null)
const globalStore = useGlobal()
const RefundDrawerRef = ref(null);
const PrintDrawerRef = ref(null);
const DateRangeRef = ref(null);
const globalStore = useGlobal();
const queryForm = ref({
orderNo: '', // 订单编号
userId: '', // 用户Id
tableCode: '', // 台桌台桌编号
tableName: '', // 台桌名称
orderType: '', // 订单类型-cash收银-miniapp小程序-offline线下
platformType: '', // 平台类型
sendType: '', // 发货类型post快递，takeaway外卖,takeself,自提table---堂食
payType: '', // 支付类型
status: '', // 状态: unpaid-待支付;in-production 制作中;wait-out 待取餐;;done-订单完成;refunding-申请退单;refund-退单;part-refund 部分退单;cancelled-取消订单
orderNo: "", // 订单编号
userId: "", // 用户Id
tableCode: "", // 台桌台桌编号
tableName: "", // 台桌名称
orderType: "", // 订单类型-cash收银-miniapp小程序-offline线下
platformType: "", // 平台类型
sendType: "", // 发货类型post快递，takeaway外卖,takeself,自提table---堂食
payType: "", // 支付类型
status: "", // 状态: unpaid-待支付;in-production 制作中;wait-out 待取餐;;done-订单完成;refunding-申请退单;refund-退单;part-refund 部分退单;cancelled-取消订单
isDel: 0, // 是否回收站 0-否，1回收站 默认查未删除,
productName: '', // 查询包含该商品的 所有订单
startTime: '',
endTime: '',
productName: "", // 查询包含该商品的 所有订单
startTime: "",
endTime: "",
page: 1,
size: 10,
})
});
const resetQueryForm = ref('')
const resetQueryForm = ref("");
// 重置筛选条件
function resetHandle() {
queryForm.value = { ...resetQueryForm.value }
DateRangeRef.value.reset()
orderListAjax()
queryForm.value = { ...resetQueryForm.value };
DateRangeRef.value.reset();
orderListAjax();
}
function queryFormHandle() {
queryForm.value.page = 1
orderListAjax()
queryForm.value.page = 1;
orderListAjax();
}
const tableData = reactive({
total: 0,
loading: false,
list: []
})
list: [],
});
// 筛选类型
function filterLable(key, type) {
let item = globalStore[key].find(item => item.type == type)
let item = globalStore[key].find((item) => item.type == type);
if (item && item.type) {
return item.label
return item.label;
} else {
return type
return type;
}
}
// 获取订单列表
async function orderListAjax() {
try {
tableData.loading = true
const res = await orderList(queryForm.value)
tableData.list = []
tableData.list = res.records
tableData.total = +res.totalRow
tableData.loading = true;
const res = await orderList(queryForm.value);
tableData.list = [];
tableData.list = res.records;
tableData.total = +res.totalRow;
} catch (error) {
console.log(error);
}
tableData.loading = false
tableData.loading = false;
}
// 时间筛选
function dateSucess(e) {
queryForm.value.startTime = e[0]
queryForm.value.endTime = e[1]
queryFormHandle()
queryForm.value.startTime = e[0];
queryForm.value.endTime = e[1];
queryFormHandle();
}
// 精简订单商品名字
function goodsNameFilter(goods) {
return goods.map(item => item.productName).join('、')
return goods.map((item) => item.productName).join("、");
}
onMounted(() => {
resetQueryForm.value = { ...queryForm.value }
queryFormHandle()
})
resetQueryForm.value = { ...queryForm.value };
queryFormHandle();
});
</script>
<style scoped lang="scss">
@@ -211,4 +273,4 @@ onMounted(() => {
justify-content: flex-end;
padding-top: var(--el-font-size-base);
}
</style>
</style>