469 lines
16 KiB
Vue
469 lines
16 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>
|
||
<router-link to='/workrecord' class="box_top_right">
|
||
交班记录
|
||
</router-link>
|
||
</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.orderNum || 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.amount || 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.returnAmount || 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="360px">
|
||
<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">
|
||
{{ 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.loginOutTime).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.userName || '无' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="is_shop">
|
||
<div class="button">
|
||
<el-checkbox v-model="isPrint" 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 { ipcRenderer } from "electron";
|
||
import { ref, onMounted } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import { ElMessage, dayjs } from 'element-plus'
|
||
import { tglogout } from '@/api/group.js'
|
||
import { shopInfoqueryDuty, loginlogout, handoverData, handoverprint } from '@/api/work/index.js'
|
||
import useStorage from '@/utils/useStorage'
|
||
import { useRouter } from "vue-router";
|
||
import { bySubType } from "@/api/device";
|
||
import { useUser } from "@/store/user.js";
|
||
import { useSocket } from "@/store/socket.js";
|
||
import { formatDecimal } from '@/utils/index.js'
|
||
import { usePrint } from "@/store/print.js";
|
||
const printStore = usePrint();
|
||
|
||
const socket = useSocket();
|
||
|
||
const store = useUser();
|
||
|
||
const router = useRouter();
|
||
|
||
const dialogVisible = ref(false) //交班
|
||
//详情数据
|
||
const infoData = ref({})
|
||
const loading = ref(false);
|
||
|
||
const isPrint = ref(true)
|
||
|
||
|
||
// 开始交班
|
||
const exit = async () => {
|
||
try {
|
||
if (printStore.deviceNoteList.length) {
|
||
loading.value = true;
|
||
let data = {}
|
||
// 获取交班打印小票数据
|
||
data = await handoverData({
|
||
id: infoData.value.id
|
||
})
|
||
|
||
data.printTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||
data.printShop = isPrint.value
|
||
printStore.printWork(data)
|
||
|
||
// return
|
||
await loginlogout({
|
||
status: 1
|
||
})
|
||
|
||
useStorage.del('userInfo')
|
||
useStorage.del('token')
|
||
useStorage.del('douyin')
|
||
useStorage.del('categorysActive')
|
||
|
||
ElMessage.success("交班成功");
|
||
setTimeout(() => {
|
||
router.replace({
|
||
name: "login",
|
||
});
|
||
}, 1000);
|
||
loading.value = false;
|
||
// console.log('本地打印');
|
||
// if (!checkLocalPrint(printList.value[0].config.deviceName)) {
|
||
// loading.value = true;
|
||
// let res = await loginlogout({
|
||
// status: 1
|
||
// })
|
||
// // useStorage.clear()
|
||
// useStorage.del('userInfo')
|
||
// useStorage.del('token')
|
||
// useStorage.del('douyin')
|
||
// useStorage.del('categorysActive')
|
||
// ElMessage.success("交班成功");
|
||
// setTimeout(() => {
|
||
// router.replace({
|
||
// name: "login",
|
||
// });
|
||
// }, 1000);
|
||
// loading.value = false;
|
||
// } else {
|
||
// // 获取交班打印小票数据
|
||
// const data = await handoverData({
|
||
// id: infoData.value.id
|
||
// })
|
||
// data.deviceName = printList.value[0].config.deviceName
|
||
// data.printTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||
// ipcRenderer.send("printerWorkSync", JSON.stringify(data));
|
||
// // return
|
||
// // useStorage.clear()
|
||
// useStorage.del('userInfo')
|
||
// useStorage.del('token')
|
||
// useStorage.del('douyin')
|
||
// useStorage.del('categorysActive')
|
||
// ElMessage.success("交班成功");
|
||
// setTimeout(() => {
|
||
// router.replace({
|
||
// name: "login",
|
||
// });
|
||
// }, 1000);
|
||
// loading.value = false;
|
||
// }
|
||
} else {
|
||
console.log('云打印交班数据');
|
||
loading.value = true;
|
||
|
||
await tglogout()
|
||
|
||
// 退出登录
|
||
await loginlogout({
|
||
status: 1
|
||
})
|
||
|
||
// 打印交班数据
|
||
await handoverprint({
|
||
id: infoData.value.id,
|
||
isprintProduct: isPrint.value
|
||
})
|
||
|
||
// useStorage.clear()
|
||
useStorage.del('userInfo')
|
||
useStorage.del('token')
|
||
useStorage.del('douyin')
|
||
useStorage.del('categorysActive')
|
||
ElMessage.success("交班成功");
|
||
setTimeout(() => {
|
||
router.replace({
|
||
name: "login",
|
||
});
|
||
}, 1000);
|
||
loading.value = false;
|
||
}
|
||
socket.close()
|
||
} catch (error) {
|
||
console.log(error);
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
// 获取交班打印数据前置
|
||
const infoshopInfoqueryDutys = async () => {
|
||
try {
|
||
let res = await shopInfoqueryDuty({
|
||
page: 1,
|
||
pageSize: 10
|
||
})
|
||
infoData.value = res
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
|
||
}
|
||
|
||
function show() {
|
||
dialogVisible.value = true
|
||
infoshopInfoqueryDutys()
|
||
}
|
||
|
||
defineExpose({
|
||
show
|
||
})
|
||
|
||
onMounted(() => {
|
||
// getPrintList()
|
||
// bySubTypeAjax()
|
||
})
|
||
</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: 6px 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> |