402 lines
13 KiB
Vue
402 lines
13 KiB
Vue
<template>
|
||
<el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
|
||
<div class="box">
|
||
<div class="box_top">
|
||
<router-link to="/" class="box_top_left">
|
||
<el-icon size="20">
|
||
<ArrowLeft />
|
||
</el-icon>
|
||
<div style="margin-left: 10px;">返回</div>
|
||
</router-link>
|
||
<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;">
|
||
{{ 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;">
|
||
{{ 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;">
|
||
{{ 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" style="width: 100%;" height="400px">
|
||
<el-table-column prop="productName" label="商品名称" />
|
||
<el-table-column prop="skuName" label="规格名称" />
|
||
<el-table-column prop="num" label="商品数量" />
|
||
<el-table-column prop="amount" label="商品金额" />
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="box_content_right">
|
||
<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 class="box_content_right_tiembutton" :loading="loading" @click="exit">
|
||
<span v-if="!loading">交班/关班</span>
|
||
<span v-else>交班/关班中....</span>
|
||
</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 { shopInfoqueryDuty, loginlogout, handoverData } 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";
|
||
const socket = useSocket();
|
||
|
||
const store = useUser();
|
||
|
||
const router = useRouter();
|
||
|
||
const dialogVisible = ref(true) //交班
|
||
//详情数据
|
||
const infoData = ref({})
|
||
const loading = ref(false);
|
||
|
||
const printList = ref([]);
|
||
const localPrintList = ref([])
|
||
|
||
// 获取打印机状态
|
||
async function bySubTypeAjax() {
|
||
try {
|
||
const res = await bySubType({
|
||
shopId: store.userInfo.shopId,
|
||
contentType: "local",
|
||
subType: "cash",
|
||
});
|
||
printList.value = res;
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 获取本地打印机列表
|
||
function getPrintList() {
|
||
ipcRenderer.send("getPrintList");
|
||
ipcRenderer.on("printList", (event, arg) => {
|
||
localPrintList.value = arg;
|
||
// console.log(localPrintList.value);
|
||
});
|
||
}
|
||
|
||
// 检查本地打印机是否能正常使用
|
||
function checkLocalPrint(deviceName) {
|
||
let print = ''
|
||
for (let item of localPrintList.value) {
|
||
if (item.name == deviceName) {
|
||
print = item
|
||
}
|
||
}
|
||
|
||
if (!print.name) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}
|
||
|
||
const exit = async () => {
|
||
try {
|
||
if (printList.value.length) {
|
||
if (!checkLocalPrint(printList.value[0].config.deviceName)) {
|
||
loading.value = true;
|
||
let res = await loginlogout({
|
||
status: 1
|
||
})
|
||
// useStorage.clear()
|
||
useStorage.del('userInfo')
|
||
useStorage.del('token')
|
||
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')
|
||
ElMessage.success("交班成功");
|
||
setTimeout(() => {
|
||
router.replace({
|
||
name: "login",
|
||
});
|
||
}, 1000);
|
||
loading.value = false;
|
||
}
|
||
} else {
|
||
loading.value = true;
|
||
let res = await loginlogout({
|
||
status: 1
|
||
})
|
||
// useStorage.clear()
|
||
useStorage.del('userInfo')
|
||
useStorage.del('token')
|
||
ElMessage.success("交班成功");
|
||
setTimeout(() => {
|
||
router.replace({
|
||
name: "login",
|
||
});
|
||
}, 1000);
|
||
loading.value = false;
|
||
}
|
||
socket.close()
|
||
} catch (error) {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
const infoshopInfoqueryDutys = async () => {
|
||
try {
|
||
let res = await shopInfoqueryDuty({
|
||
page: 1,
|
||
pageSize: 10
|
||
})
|
||
infoData.value = res
|
||
} catch (error) {
|
||
|
||
}
|
||
|
||
}
|
||
onMounted(() => {
|
||
getPrintList()
|
||
bySubTypeAjax()
|
||
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: 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;
|
||
border-bottom: 1px solid #ccc;
|
||
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%;
|
||
background: #fff;
|
||
margin-left: 10px;
|
||
border-radius: 6px;
|
||
padding: 10px 12px;
|
||
position: relative;
|
||
|
||
.box_content_right_tiem:nth-child(1) {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.box_content_right_tiem {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.box_content_right_tiemleft {
|
||
color: #9e9e9e;
|
||
}
|
||
|
||
}
|
||
|
||
.box_content_right_tiembutton {
|
||
position: absolute;
|
||
bottom: 10px;
|
||
left: 5%;
|
||
background: #ba5050;
|
||
width: 90%;
|
||
border-radius: 5px;
|
||
color: #fff;
|
||
text-align: center;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style> |