406 lines
14 KiB
Vue
406 lines
14 KiB
Vue
<template>
|
||
<el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
|
||
<div class="box">
|
||
<div class="box_top">
|
||
<div class="box_top_left" @click="dialogVisible = false">
|
||
<el-icon size="20">
|
||
<ArrowLeft />
|
||
</el-icon>
|
||
<div style="margin-left: 4px;">返回</div>
|
||
</div>
|
||
<div class="box_top_right" @click="checkRecord">
|
||
交班记录
|
||
</div>
|
||
</div>
|
||
<div class="box_content">
|
||
<div class="box_content_left">
|
||
<div class="box_content_left_top">
|
||
<div class="box_content_left_top_item">
|
||
<div class="box_content_left_top_item_top">
|
||
<div style="color:#ff5252; font-size: 30px;">
|
||
{{ infoData.orderCount || 0 }}
|
||
</div>
|
||
<div style="margin-top: 6px; color: #666;">
|
||
总订单
|
||
</div>
|
||
</div>
|
||
<div class="box_content_left_top_item_top">
|
||
<div style="color:#ff5252; font-size: 30px;">
|
||
￥{{ formatDecimal(infoData.handAmount || 0) }}
|
||
</div>
|
||
<div style="margin-top: 6px; color: #666;">
|
||
营业额
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_content_left_top_item">
|
||
<div class="box_content_left_top_item_botton">
|
||
<div style=" font-size: 20px;">
|
||
￥{{ formatDecimal(infoData.cashAmount || 0) }}
|
||
</div>
|
||
<div style="margin-top: 6px;">
|
||
现金支付
|
||
</div>
|
||
<!-- <div style="margin-top: 6px;font-size: 14px;">
|
||
查看详情
|
||
</div> -->
|
||
</div>
|
||
<div class="box_content_left_top_item_botton">
|
||
<div style=" font-size: 20px;">
|
||
￥{{ formatDecimal(infoData.refundAmount || 0) }}
|
||
</div>
|
||
<div style="margin-top: 6px;">
|
||
退款金额
|
||
</div>
|
||
<!-- <div style="margin-top: 6px;font-size: 14px;">
|
||
查看详情
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_content_left_bottom">
|
||
<el-table :data="infoData.detailList" border style="width: 100%;" height="382px">
|
||
<el-table-column prop="productName" label="商品名称" />
|
||
<el-table-column prop="skuName" label="规格名称" />
|
||
<el-table-column prop="num" label="商品数量" />
|
||
<el-table-column prop="amount" label="商品金额">
|
||
<template v-slot="scope">
|
||
￥{{ formatDecimal(scope.row.amount || 0) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="box_content_right">
|
||
<div class="top">
|
||
<div class="box_content_right_tiem">
|
||
<div class="box_content_right_tiemleft">
|
||
店铺：
|
||
</div>
|
||
<div class="box_content_right_tiemright">
|
||
{{ infoData.shopName }}
|
||
</div>
|
||
</div>
|
||
<div class="box_content_right_tiem">
|
||
<div class="box_content_right_tiemleft">
|
||
上岗时间：
|
||
</div>
|
||
<div class="box_content_right_tiemright">
|
||
{{ dayjs(infoData.loginTime).format("YYYY-MM-DD HH:mm:ss") }}
|
||
</div>
|
||
</div>
|
||
<div class="box_content_right_tiem">
|
||
<div class="box_content_right_tiemleft">
|
||
交班时间：
|
||
</div>
|
||
<div class="box_content_right_tiemright">
|
||
{{ dayjs(infoData.handoverTime).format("YYYY-MM-DD HH:mm:ss") }}
|
||
</div>
|
||
</div>
|
||
<!-- <div class="box_content_right_tiem">
|
||
<div class="box_content_right_tiemleft">
|
||
终端名称：
|
||
</div>
|
||
<div class="box_content_right_tiemright">
|
||
{{ infoData.equipment || '无' }}
|
||
</div>
|
||
</div> -->
|
||
<!-- <div class="box_content_right_tiem">
|
||
<div class="box_content_right_tiemleft">
|
||
备用金：
|
||
</div>
|
||
<div class="box_content_right_tiemright">
|
||
{{ infoData.pettyCash || '无' }}
|
||
</div>
|
||
</div> -->
|
||
<div class="box_content_right_tiem">
|
||
<div class="box_content_right_tiemleft">
|
||
收营员：
|
||
</div>
|
||
<div class="box_content_right_tiemright">
|
||
{{ infoData.staffName || '无' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="is_shop">
|
||
<div class="button">
|
||
<el-checkbox v-model="isPrint" :true-value="1" :false-value="0" border
|
||
label="是否打印商品销售数据" style="width: 100%" />
|
||
</div>
|
||
</div>
|
||
<div class="box_content_right_tiembutton" :loading="loading" @click="exit">
|
||
<span v-if="!loading">交班/关班</span>
|
||
<span v-else>交班/关班中....</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-drawer>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { ElMessage, dayjs } from 'element-plus'
|
||
import { handoverTotal, handover, handoverData, handoverNetworkPrint } from '@/api/account.js'
|
||
import { useRouter } from "vue-router";
|
||
import { useUser } from "@/store/user.js";
|
||
import { formatDecimal } from '@/utils/index.js'
|
||
import { usePrint } from "@/store/print.js";
|
||
import { useGoods } from "@/store/goods.js";
|
||
import { staffPermission } from '@/api/user.js'
|
||
|
||
const goodsStore = useGoods();
|
||
const printStore = usePrint();
|
||
const store = useUser();
|
||
const router = useRouter();
|
||
const dialogVisible = ref(false) //交班
|
||
//详情数据
|
||
const infoData = ref({})
|
||
const loading = ref(false);
|
||
|
||
const isPrint = ref(1)
|
||
|
||
// 查看交班记录
|
||
async function checkRecord() {
|
||
try {
|
||
// await staffPermission('yun_xu_cha_kan_suo_you_jiao_ban_ji_lu')
|
||
router.push('/workrecord')
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 开始交班
|
||
const exit = async () => {
|
||
try {
|
||
if (loading.value) return
|
||
loading.value = true;
|
||
// await staffPermission('yun_xu_jiao_ban')
|
||
const res = await handover(isPrint.value)
|
||
const data = await handoverData(res)
|
||
if (printStore.deviceNoteList.length) {
|
||
// 使用本地打印机 打印交班数据
|
||
data.printTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||
data.printShop = isPrint.value
|
||
printStore.printWork(data)
|
||
} else {
|
||
// 使用云打印机 打印交班数据
|
||
await handoverNetworkPrint(data.id)
|
||
}
|
||
logoutHandle()
|
||
} catch (error) {
|
||
loading.value = false;
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 退出登录
|
||
async function logoutHandle() {
|
||
try {
|
||
loading.value = true;
|
||
await store.logout()
|
||
goodsStore.clearAllGoods()
|
||
ElMessage.success("交班成功");
|
||
setTimeout(() => {
|
||
router.replace({
|
||
name: "login",
|
||
});
|
||
}, 1000);
|
||
} catch (error) {
|
||
loading.value = false;
|
||
console.log('退出失败');
|
||
}
|
||
}
|
||
|
||
// 获取交班打印数据前置
|
||
const infoshopInfoqueryDutys = async () => {
|
||
try {
|
||
let res = await handoverTotal()
|
||
infoData.value = res
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
|
||
}
|
||
|
||
defineExpose({
|
||
show
|
||
})
|
||
|
||
function show() {
|
||
dialogVisible.value = true
|
||
infoshopInfoqueryDutys()
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.box {
|
||
padding: 16px 0;
|
||
height: 100%;
|
||
|
||
.box_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #fff;
|
||
padding: 10px;
|
||
border-radius: 6px;
|
||
color: #161718;
|
||
text-decoration: none;
|
||
/* 取消下划线效果 */
|
||
|
||
.box_top_left {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
color: #161718;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.box_top_right {
|
||
color: #161718;
|
||
text-decoration: none;
|
||
/* 取消下划线效果 */
|
||
}
|
||
}
|
||
|
||
.box_content {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
height: 92%;
|
||
display: flex;
|
||
|
||
.box_content_left {
|
||
background: #fff;
|
||
width: 70%;
|
||
height: 100%;
|
||
border-radius: 6px;
|
||
padding: 30px 20px;
|
||
|
||
.box_content_left_top {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 20px;
|
||
|
||
.box_content_left_top_item {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.box_content_left_top_item_top {
|
||
margin-left: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.box_content_left_top_item_botton:nth-child(1) {
|
||
margin-left: 0;
|
||
|
||
}
|
||
|
||
.box_content_left_top_item_botton {
|
||
position: relative;
|
||
margin-left: 10px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 200px;
|
||
padding: 20px 0;
|
||
background: #e0e0e0;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.box_content_left_top_item_botton::after {
|
||
position: absolute;
|
||
top: 0;
|
||
content: '';
|
||
display: inline-block;
|
||
width: 200px;
|
||
height: 8px;
|
||
background: #ff5252;
|
||
border-radius: 10px 10px 0 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.box_content_right {
|
||
width: 30%;
|
||
height: 100%;
|
||
margin-left: 10px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
|
||
.box_content_right_tiem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px;
|
||
|
||
.box_content_right_tiemleft {
|
||
color: #9e9e9e;
|
||
}
|
||
|
||
}
|
||
|
||
.box_content_right_tiembutton {
|
||
background: #ba5050;
|
||
border-radius: 5px;
|
||
color: #fff;
|
||
text-align: center;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.top {
|
||
flex: 1;
|
||
background-color: #fff;
|
||
padding: 10px 0;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.footer {
|
||
padding: 10px;
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.is_shop {
|
||
.button {
|
||
flex: 1;
|
||
margin-bottom: 10px;
|
||
|
||
:deep(.el-checkbox.el-checkbox--large) {
|
||
height: var(--el-component-size-large);
|
||
background-color: #fff;
|
||
}
|
||
|
||
:deep(.el-checkbox__inner) {
|
||
width: 20px;
|
||
height: 20px;
|
||
|
||
&::after {
|
||
border-width: 2px;
|
||
top: 0;
|
||
left: 4px;
|
||
}
|
||
}
|
||
|
||
:deep(.el-checkbox__label) {
|
||
font-size: var(--el-font-size-base) !important;
|
||
}
|
||
}
|
||
}
|
||
</style> |