From dc2d7124d00d6ad8c29913b5c67176a8015492fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AD=8F=E5=95=BE?= <1144797966@qq.com>
Date: Thu, 7 Mar 2024 09:47:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=A4=E7=8F=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/work/index.js              |  27 +++
 src/router/index.js                |  16 ++
 src/views/order/components/add.vue |   4 +-
 src/views/order/index.vue          |   8 +-
 src/views/work/index.vue           | 271 ++++++++++++++++++++++++-
 src/views/work/record.vue          | 313 +++++++++++++++++++++++++++++
 6 files changed, 629 insertions(+), 10 deletions(-)
 create mode 100644 src/api/work/index.js
 create mode 100644 src/views/work/record.vue

diff --git a/src/api/work/index.js b/src/api/work/index.js
new file mode 100644
index 0000000..c0c2e42
--- /dev/null
+++ b/src/api/work/index.js
@@ -0,0 +1,27 @@
+import request from "@/utils/request.js"
+
+/**
+ * 当前用户交班详情
+ * @param {*} params 
+ * @returns 
+ */
+export function shopInfoqueryDuty(params) {
+    return request({
+        method: "get",
+        url: "shopInfo/queryDuty",
+        params
+    });
+}
+
+/**
+ * 交班记录
+ * @param {*} params 
+ * @returns 
+ */
+export function shopinfoqueryDutyFlow(params) {
+    return request({
+        method: "get",
+        url: "shopInfo/queryDutyFlow",
+        params
+    });
+}
diff --git a/src/router/index.js b/src/router/index.js
index 08a3128..d807a13 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -47,6 +47,22 @@ const routes = [
       index: 1,
     },
     component: () => import("@/views/member/index.vue"),
+  },
+  {
+    path: "/work",
+    name: "work",
+    meta: {
+      index: 1,
+    },
+    component: () => import("@/views/work/index.vue"),
+  },
+  {
+    path: "/workrecord",
+    name: "workrecord",
+    meta: {
+      index: 1,
+    },
+    component: () => import("@/views/work/record.vue"),
   }
 ];
 
diff --git a/src/views/order/components/add.vue b/src/views/order/components/add.vue
index eb2b1b1..60dee38 100644
--- a/src/views/order/components/add.vue
+++ b/src/views/order/components/add.vue
@@ -6,7 +6,7 @@
                 <el-image style="width: 100px; height: 70px;border-radius: 10px;" :src="item.imgUrl" fit="scale-down" />
                 <div class="demo_tabs_boxitem_oneone">
                     <div>
-                        {{ dayjs(item.createAt).format(" hh:mm:ss") }}
+                        {{ dayjs(item.createAt).format(" HH:mm:ss") }}
                     </div>
                     <div style="color: #757575;">
                         {{ dayjs(item.createAt).format("YYYY-MM-DD") }}
@@ -22,7 +22,7 @@
             </div>
             <div class="demo_tabs_boxitem_tow">
                 <div>
-                    ￥{{ item.productNum }}
+                    ￥{{ item.orderAmount }}
                 </div>
                 <div style="color:#ff9e01;">
                     <span v-if="item.status == 'pending'">挂单</span>
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
index 80a141d..954b830 100644
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -2,7 +2,7 @@
     <div class="orderbox">
         <div class="orderbox_left">
             <el-tabs v-model="ordereData.status" class="demo-tabs" @tab-click="handleClick">
-                <el-tab-pane label="全部" name="closed">
+                <el-tab-pane label="全部" name="">
                     <div class="demo_tabs_div">
                         <el-input v-model="ordereData.orderNo" placeholder="请输入订单号查询" @input="inputChange" clearable />
                         <!-- <el-button style="margin-left: 10px;" type="primary" @click="onSubmit">搜索</el-button> -->
@@ -14,14 +14,14 @@
                         style="margin-top: 20px;" :total="Number(ordereData.total)"
                         @current-change="handleCurrentChange" />
                 </el-tab-pane>
-                <el-tab-pane label="销售" name=" refund">
+                <el-tab-pane label="销售" name="closed">
                     <add :ordereData="ordereData" v-if="ordereData.list.length"></add>
                     <div v-else style="width: 100%; text-align: center; margin: 30px 0;">暂无数据</div>
                     <el-pagination v-if="ordereData.list.length" layout="prev, pager, next, jumper"
                         style="margin-top: 20px;" :total="Number(ordereData.total)"
                         @current-change="handleCurrentChange" />
                 </el-tab-pane>
-                <el-tab-pane label="退单" name="pending">
+                <el-tab-pane label="退单" name="refund">
                     <add :ordereData="ordereData" v-if="ordereData.list.length"></add>
                     <div v-else style="width: 100%; text-align: center; margin: 30px 0;">暂无数据</div>
                     <el-pagination v-if="ordereData.list.length" layout="prev, pager, next, jumper"
@@ -315,7 +315,7 @@ const ordereData = reactive({//表格数据
     }],
     size: 10,
     page: 1,
-    status: 'closed',
+    status: '',
     total: '',
     orderNo: '',
 })
diff --git a/src/views/work/index.vue b/src/views/work/index.vue
index cae140c..90a303f 100644
--- a/src/views/work/index.vue
+++ b/src/views/work/index.vue
@@ -1,16 +1,279 @@
 <template>
     <el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
-        <div class="drawer_wrap">
+        <div class="box">
+            <div class="box_top">
+                <router-link to="/">
+                    <div class="box_top_left">
+                        <el-icon size="20">
+                            <ArrowLeft />
+                        </el-icon>
+                        <div style="margin-left: 10px;"> 交班</div>
+                    </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 }}
+                                </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 }}
+                                </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 }}
+                                </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 }}
+                                </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="商品名称" width="200" />
+                            <el-table-column prop="skuName" label="规格名称" width="200" />
+                            <el-table-column prop="amount" label="商品数量" width="200" />
+                            <el-table-column prop="num" 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") }}
+                        </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">
+                        关班/退出
+                    </div>
+                </div>
+            </div>
         </div>
     </el-drawer>
+
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-const dialogVisible = ref(false)
+import { ElMessage, dayjs } from 'element-plus'
+import { shopInfoqueryDuty } from '@/api/work/index.js'
 
+const dialogVisible = ref(true) //交班
+//详情数据
+const infoData = ref({})
 
+const infoshopInfoqueryDutys = async () => {
+    let res = await shopInfoqueryDuty({
+        page: 1,
+        pageSize: 10
+    })
+    infoData.value = res
+    console.log(res)
+}
+onMounted(() => {
+    infoshopInfoqueryDutys()
+})
 </script>
 
-<style scoped lang="scss"></style>
\ No newline at end of file
+<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;
+        }
+
+        .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>
\ No newline at end of file
diff --git a/src/views/work/record.vue b/src/views/work/record.vue
new file mode 100644
index 0000000..4641133
--- /dev/null
+++ b/src/views/work/record.vue
@@ -0,0 +1,313 @@
+<template>
+    <el-drawer size="100%" :with-header="false" direction="btt" v-model="record">
+        <div class="box">
+            <div class="box_top" @click="clickrecord">
+                <div class="box_top_left">
+                    <el-icon size="20">
+                        <ArrowLeft />
+                    </el-icon>
+                    <router-link to='/work' class="box_top_right">
+                        交班记录
+                    </router-link>
+                </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>
+                                    {{ infoData.total }}
+                                </div>
+                                <div>
+                                    交班数
+                                </div>
+                            </div>
+                            <div class="box_content_left_top_item_top">
+                                <div>
+                                    {{ infoData.amount }}
+                                </div>
+                                <div>
+                                    总收款
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box_content_left_bouttom">
+                        <div class="box_content_left_bouttomox">
+                            <div class="box_content_left_bouttom_item" v-for="(item, index) in infoData.pageInfo.list"
+                                :key="index">
+                                <div class="wbox_content_left_bouttom_item_top">
+                                    <div>
+                                        {{ dayjs(item.loginTime).format("YYYY-MM-DD HH:mm:ss") }}
+                                    </div>
+                                    <div>
+                                        ￥{{ item.amount }}
+                                    </div>
+                                </div>
+                                <div class="wbox_content_left_bouttom_item_topone">
+                                    <div style="display: flex;">
+                                        <span>收营员：</span>
+                                        <span style="font-weight: bold;">{{ item.userName }}</span>
+                                    </div>
+                                    <div style="display: flex;">
+                                        <span>总订单数：</span>
+                                        <span style="font-weight: bold;">{{ item.orderNum }}</span>
+                                    </div>
+                                </div>
+                                <div class="wbox_content_left_bouttom_item_topone">
+                                    <div style="display: flex;">
+                                        <span>起止时间：</span>
+                                        <span style="font-weight: bold;"> {{ dayjs(item.loginTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
+                                    </div>
+                                    <div style="display: flex;">
+                                        <span>备用金：</span>
+                                        <span style="font-weight: bold;">{{ item.pettyCash }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </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">
+                            2024-03-05-19:33
+                        </div>
+                    </div>
+                    <div class="box_content_right_tiem">
+                        <div class="box_content_right_tiemleft">
+                            交班时间：
+                        </div>
+                        <div class="box_content_right_tiemright">
+                            2024-03-05-19:33
+                        </div>
+                    </div>
+                    <div class="box_content_right_tiem">
+                        <div class="box_content_right_tiemleft">
+                            终端名称：
+                        </div>
+                        <div class="box_content_right_tiemright">
+                            POS-1
+                        </div>
+                    </div>
+                    <div class="box_content_right_tiem">
+                        <div class="box_content_right_tiemleft">
+                            备用金：
+                        </div>
+                        <div class="box_content_right_tiemright">
+                            0.00
+                        </div>
+                    </div>
+                    <div class="box_content_right_tiem">
+                        <div class="box_content_right_tiemleft">
+                            收营员：
+                        </div>
+                        <div class="box_content_right_tiemright">
+                            测试
+                        </div>
+                    </div>
+                    <div class="box_content_right_tiembutton">
+                        关班/退出
+                    </div>
+                </div> -->
+            </div>
+        </div>
+    </el-drawer>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { shopinfoqueryDutyFlow } from '@/api/work/index.js'
+import { useUser } from "@/store/user.js"
+import { ElMessage, dayjs } from 'element-plus'
+
+const store = useUser()
+const record = ref(true)//交班记录
+//详情数据
+const infoData = ref({
+    pageInfo: {
+        list: []
+    }
+})
+
+const infoshopInfoqueryDuty = async () => {
+    let res = await shopinfoqueryDutyFlow({
+        shopId: store.userInfo.shopId,
+        page: 1,
+        pageSize: 10
+    })
+    infoData.value = res
+    console.log(infoData.value)
+}
+onMounted(() => {
+    infoshopInfoqueryDuty()
+})
+</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;
+
+
+        .box_top_left {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+        }
+
+        .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: 100%;
+            height: 100%;
+            border-radius: 6px;
+            // padding: 30px 20px;
+
+            .box_content_left_top {
+                display: flex;
+                flex-direction: column;
+                border-bottom: 1px solid #ccc;
+                padding: 20px 0;
+                border-radius: 6px 6px 0 0;
+                background: #187ead;
+
+                .box_content_left_top_item {
+                    display: flex;
+                    align-items: center;
+
+                    .box_content_left_top_item_top {
+                        color: #fff;
+                        width: 50%;
+                        display: flex;
+                        align-items: center;
+                        flex-direction: column;
+                    }
+                }
+            }
+
+            .box_content_left_bouttom {
+                width: 100%;
+                height: 80%;
+                padding: 0 20px;
+
+                .box_content_left_bouttomox {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    .box_content_left_bouttom_item::after {
+                        content: '';
+                        width: 32%;
+                    }
+                    .box_content_left_bouttom_item {
+                        margin-top: 10px;
+                        width: 32%;
+                        background: #eeeeee;
+                        padding: 12px 14px;
+                        border-radius: 10px;
+
+                        .wbox_content_left_bouttom_item_top {
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            padding-bottom: 10px;
+                            border-bottom: 1px solid #ccc;
+
+                            div:nth-child(1) {
+                                font-weight: bold;
+                            }
+
+                            div:nth-child(2) {
+                                color: #ff5252;
+                            }
+                        }
+
+                        .wbox_content_left_bouttom_item_topone {
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            padding-top: 10px;
+
+                            div:nth-child(1) {
+                                font-size: 14px;
+                            }
+
+                            div:nth-child(2) {
+                                font-size: 14px;
+
+                            }
+                        }
+                    }
+                }
+
+
+            }
+        }
+
+        .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>
\ No newline at end of file