From d648781ea3f92a0259d9b73a9db68cfc23fa70ea 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 16:14:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=9B=B4=E5=A4=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/work/index.js              |  13 +++
 src/components/leftMenu.vue        |  83 ++++++++++++-
 src/components/more.vue            | 182 +++++++++++++++++++++++++++++
 src/components/screen.vue          | 109 +++++++++++++++++
 src/views/order/components/add.vue |  23 +---
 src/views/order/index.vue          |   7 +-
 src/views/work/index.vue           |  55 ++++++---
 src/views/work/record.vue          |  25 ++--
 8 files changed, 450 insertions(+), 47 deletions(-)
 create mode 100644 src/components/more.vue
 create mode 100644 src/components/screen.vue

diff --git a/src/api/work/index.js b/src/api/work/index.js
index c0c2e42..e26d336 100644
--- a/src/api/work/index.js
+++ b/src/api/work/index.js
@@ -25,3 +25,16 @@ export function shopinfoqueryDutyFlow(params) {
         params
     });
 }
+/**
+ * 登出
+
+ * @param {*} params 
+ * @returns 
+ */
+export function loginlogout(params) {
+    return request({
+        method: "post",
+        url: "login/logout",
+        params
+    });
+}
\ No newline at end of file
diff --git a/src/components/leftMenu.vue b/src/components/leftMenu.vue
index bcefb94..a92e1f3 100644
--- a/src/components/leftMenu.vue
+++ b/src/components/leftMenu.vue
@@ -13,19 +13,23 @@
             </el-icon>
             <el-text class="text">{{ item.label }}</el-text>
         </router-link>
-        <div class="item more">
+        <div class="item more" @click="moreref.show()">
             <el-icon class="icon">
                 <Operation />
             </el-icon>
             <el-text class="text">更多</el-text>
         </div>
     </div>
+    <!-- 更多 -->
+    <more ref="moreref"></more>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
+import more from '@/components/more.vue'
 const route = useRoute()
+const moreref = ref(null)
 console.log(route.path)
 const menus = ref([
     {
@@ -62,6 +66,83 @@ const menus = ref([
 </script>
 
 <style scoped lang="scss">
+.drawerbox {
+    :deep(.el-drawer__body) {
+        background: #1c1d1f !important;
+    }
+
+    .drawerbox_box {
+        color: #fff;
+
+        .drawerbox_bo_top {
+            padding: 20px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #ccc;
+
+            .drawerbox_bo_top_left {
+                display: flex;
+                flex-direction: column;
+            }
+
+            .drawerbox_bo_top_ring {
+                display: flex;
+                align-items: center;
+
+                .drawerbox_bo_top_ring_tb {
+                    display: flex;
+                    flex-direction: column;
+                    border: 1px solid #ccc;
+                    border-radius: 6px;
+                    padding: 6px 10px;
+
+                    span {
+                        width: 80px;
+                        margin-top: 5px;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+
+        .drawerbox_bo_box {
+            width: 100%;
+
+            .drawerbox_bo_box_itemb_felx {
+                display: flex;
+                justify-content: flex-start;
+                padding: 0 20px;
+
+                .drawerbox_bo_box_itembox:nth-child(1) {
+                    margin-left: 0px;
+
+                }
+
+                .drawerbox_bo_box_itembox {
+                    width: 20%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    margin-left: 40px;
+
+                    .drawerbox_bo_box_icon {
+                        border-radius: 6px;
+                        background: #2196f3;
+                        width: 100px;
+                        height: 100px;
+                    }
+
+                    .drawerbox_bo_box_icontext {
+                        margin-top: 10px;
+                    }
+                }
+            }
+
+        }
+    }
+}
+
 .left_menu_wrap {
     height: 100vh;
     width: 90px;
diff --git a/src/components/more.vue b/src/components/more.vue
new file mode 100644
index 0000000..9362acc
--- /dev/null
+++ b/src/components/more.vue
@@ -0,0 +1,182 @@
+<template>
+    <div class="drawerbox">
+        <el-drawer size="50%" :with-header="false" direction="rtl" v-model="dialogVisible" style="padding: 0;">
+            <div class="drawerbox_box">
+                <div class="drawerbox_bo_top">
+                    <div class="drawerbox_bo_top_left">
+                        <div class="drawerbox_bo_top_left_one">
+                            {{ store.userInfo.loginName }}
+                        </div>
+                        <div class="drawerbox_bo_top_left_tow" style="margin-top: 10px;">
+                            收银员：{{ store.userInfo.userCode }} <span style="color: #666;">登录：{{
+            store.userInfo.loginTime }}</span>
+                        </div>
+                    </div>
+                    <!-- <div class="drawerbox_bo_top_ring">
+                        <div class="drawerbox_bo_top_ring_tb">
+                            <el-icon style="margin: 0 auto;" size="20">
+                                <FolderAdd />
+                            </el-icon>
+                            <span>修改密码</span>
+                        </div>
+                        <div class="drawerbox_bo_top_ring_tb" style="margin-left: 10px;">
+                            <el-icon style="margin: 0 auto;" size="20">
+                                <CopyDocument />
+                            </el-icon>
+                            <span>最小化</span>
+                        </div>
+                    </div> -->
+                </div>
+                <div class="drawerbox_bo_box">
+                    <div style="padding:10px;color: #999; font-weight:bold;">系统</div>
+                    <div class="drawerbox_bo_box_itemb_felx">
+                        <div class="drawerbox_bo_box_itembox">
+                            <div class="drawerbox_bo_box_icon">
+                                <el-icon size="40" style="margin:30px;">
+                                    <Setting />
+                                </el-icon>
+                            </div>
+                            <div class="drawerbox_bo_box_icontext">
+                                设置
+                            </div>
+                        </div>
+                        <!-- <div class="drawerbox_bo_box_itembox" @click="screenref.show()">
+                            <div class="drawerbox_bo_box_icon">
+                                <el-icon size="40" style="margin:30px;">
+                                    <Setting />
+                                </el-icon>
+                            </div>
+                            <div class="drawerbox_bo_box_icontext">
+                                锁屏
+                            </div>
+                        </div> -->
+                    </div>
+                </div>
+            </div>
+            <div class="boxabsolute">
+                <div>
+                    银收客-餐饮版20-1
+                </div>
+                <div>
+                    有效期
+                </div>
+            </div>
+        </el-drawer>
+    </div>
+    <!-- <screen ref="screenref"></screen> -->
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useUser } from "@/store/user.js"
+
+const store = useUser()
+const screenref = ref(null)
+
+const dialogVisible = ref(false)
+
+function show() {
+    dialogVisible.value = true
+}
+
+defineExpose({
+    show
+})
+
+
+</script>
+
+<style scoped lang="scss">
+.drawerbox {
+    :deep(.el-drawer__body) {
+        background: #1c1d1f !important;
+        position: relative;
+    }
+
+    .boxabsolute {
+        position: absolute;
+        width: 100%;
+        bottom: 20px;
+
+        div {
+            color: #8c9196;
+            text-align: center;
+        }
+
+        div:nth-child(2) {
+            margin-top: 10px;
+        }
+    }
+
+    .drawerbox_box {
+        color: #fff;
+
+        .drawerbox_bo_top {
+            padding: 20px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #ccc;
+
+            .drawerbox_bo_top_left {
+                display: flex;
+                flex-direction: column;
+            }
+
+            .drawerbox_bo_top_ring {
+                display: flex;
+                align-items: center;
+
+                .drawerbox_bo_top_ring_tb {
+                    display: flex;
+                    flex-direction: column;
+                    border: 1px solid #ccc;
+                    border-radius: 6px;
+                    padding: 6px 10px;
+
+                    span {
+                        width: 80px;
+                        margin-top: 5px;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+
+        .drawerbox_bo_box {
+            width: 100%;
+
+            .drawerbox_bo_box_itemb_felx {
+                display: flex;
+                justify-content: flex-start;
+                padding: 0 20px;
+
+                .drawerbox_bo_box_itembox:nth-child(1) {
+                    margin-left: 0px;
+
+                }
+
+                .drawerbox_bo_box_itembox {
+                    width: 20%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    margin-left: 40px;
+
+                    .drawerbox_bo_box_icon {
+                        border-radius: 6px;
+                        background: #2196f3;
+                        width: 100px;
+                        height: 100px;
+                    }
+
+                    .drawerbox_bo_box_icontext {
+                        margin-top: 10px;
+                    }
+                }
+            }
+
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/screen.vue b/src/components/screen.vue
new file mode 100644
index 0000000..0d88d04
--- /dev/null
+++ b/src/components/screen.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="drawerbox">
+        <el-drawer size="50%" :with-header="false" direction="rtl" v-model="dialogVisible" style="padding: 0;">
+            <div class="drawerbox_box">
+               111
+            </div>
+        </el-drawer>
+    </div>
+
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useUser } from "@/store/user.js"
+
+const store = useUser()
+
+
+const dialogVisible = ref(false)
+
+function show() {
+    dialogVisible.value = true
+}
+
+defineExpose({
+    show
+})
+
+
+</script>
+
+<style scoped lang="scss">
+.drawerbox {
+    :deep(.el-drawer__body) {
+        background: #1c1d1f !important;
+    }
+
+    .drawerbox_box {
+        color: #fff;
+
+        .drawerbox_bo_top {
+            padding: 20px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid #ccc;
+
+            .drawerbox_bo_top_left {
+                display: flex;
+                flex-direction: column;
+            }
+
+            .drawerbox_bo_top_ring {
+                display: flex;
+                align-items: center;
+
+                .drawerbox_bo_top_ring_tb {
+                    display: flex;
+                    flex-direction: column;
+                    border: 1px solid #ccc;
+                    border-radius: 6px;
+                    padding: 6px 10px;
+
+                    span {
+                        width: 80px;
+                        margin-top: 5px;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+
+        .drawerbox_bo_box {
+            width: 100%;
+
+            .drawerbox_bo_box_itemb_felx {
+                display: flex;
+                justify-content: flex-start;
+                padding: 0 20px;
+
+                .drawerbox_bo_box_itembox:nth-child(1) {
+                    margin-left: 0px;
+
+                }
+
+                .drawerbox_bo_box_itembox {
+                    width: 20%;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    margin-left: 40px;
+
+                    .drawerbox_bo_box_icon {
+                        border-radius: 6px;
+                        background: #2196f3;
+                        width: 100px;
+                        height: 100px;
+                    }
+
+                    .drawerbox_bo_box_icontext {
+                        margin-top: 10px;
+                    }
+                }
+            }
+
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/order/components/add.vue b/src/views/order/components/add.vue
index 60dee38..a39bdba 100644
--- a/src/views/order/components/add.vue
+++ b/src/views/order/components/add.vue
@@ -13,11 +13,8 @@
                     </div>
                 </div>
                 <div class="demo_tabs_boxitem_onetow">
-                    <div>
-                        <span style="font-size: var(--el-font-size-base);" v-for="item1 in item.names" :key="item1">{{
-            item1 }}</span>
-                    </div>
-                    <span style="font-size: 16px; color: #757575;">{{ item.orderNo }}</span>
+                    <div style="width: 80%;">{{item.names && item.names.join(',') }}</div>
+                    <div style="font-size: 16px; color: #757575;">{{ item.orderNo }}</div>
                 </div>
             </div>
             <div class="demo_tabs_boxitem_tow">
@@ -69,6 +66,7 @@ const clickitemboxshow = (e) => {
         .demo_tabs_boxitem_one {
             display: flex;
             justify-content: flex-start;
+            flex-shrink: 0;
 
             .demo_tabs_boxitem_oneone {
                 display: flex;
@@ -79,25 +77,14 @@ const clickitemboxshow = (e) => {
             }
 
             .demo_tabs_boxitem_onetow {
-                width: 40%;
-                display: flex;
+                flex: 1;
                 margin-left: 20px;
-                flex-direction: column;
-                height: 70px;
-                justify-content: space-around;
-
-                div {
-                    width: 100%;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                }
             }
         }
     }
 
     .demo_tabs_boxitem_tow {
-        width: 20%;
+        flex-shrink: 0;
         display: flex;
         flex-direction: column;
         height: 70px;
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
index 954b830..7afa054 100644
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -428,7 +428,6 @@ onMounted(() => {
                     .demo_tabs_boxitem_one {
                         display: flex;
                         justify-content: flex-start;
-
                         .demo_tabs_boxitem_oneone {
                             display: flex;
                             margin-left: 20px;
@@ -438,7 +437,7 @@ onMounted(() => {
                         }
 
                         .demo_tabs_boxitem_onetow {
-                            width: 40%;
+                            // width: 40%;
                             display: flex;
                             margin-left: 20px;
                             flex-direction: column;
@@ -446,7 +445,7 @@ onMounted(() => {
                             justify-content: space-around;
 
                             div {
-                                width: 100%;
+                                // width: 100%;
                                 overflow: hidden;
                                 text-overflow: ellipsis;
                                 white-space: nowrap;
@@ -456,7 +455,7 @@ onMounted(() => {
                 }
 
                 .demo_tabs_boxitem_tow {
-                    width: 20%;
+                    // width: 20%;
                     display: flex;
                     flex-direction: column;
                     height: 70px;
diff --git a/src/views/work/index.vue b/src/views/work/index.vue
index 90a303f..18e702c 100644
--- a/src/views/work/index.vue
+++ b/src/views/work/index.vue
@@ -2,13 +2,11 @@
     <el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
         <div class="box">
             <div class="box_top">
-                <router-link to="/">
-                    <div class="box_top_left">
+                <router-link to="/" class="box_top_left">
                         <el-icon size="20">
                             <ArrowLeft />
                         </el-icon>
-                        <div style="margin-left: 10px;"> 交班</div>
-                    </div>
+                        <div style="margin-left: 10px;">返回</div>
                 </router-link>
                 <router-link to='/workrecord' class="box_top_right">
                     交班记录
@@ -110,9 +108,11 @@
                             {{ infoData.userName }}
                         </div>
                     </div>
-                    <div class="box_content_right_tiembutton">
-                        关班/退出
+                    <div class="box_content_right_tiembutton" :loading="loading" @click="exit">
+                        <span v-if="!loading">交班/关班</span>
+                        <span v-else>交班/关班中....</span>
                     </div>
+
                 </div>
             </div>
         </div>
@@ -124,19 +124,46 @@
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, dayjs } from 'element-plus'
-import { shopInfoqueryDuty } from '@/api/work/index.js'
+import { shopInfoqueryDuty, loginlogout } from '@/api/work/index.js'
+import useStorage from '@/utils/useStorage'
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 
 const dialogVisible = ref(true) //交班
 //详情数据
 const infoData = ref({})
+const loading = ref(false);
 
+const exit = async () => {
+    try {
+        loading.value = true;
+        let res = await loginlogout({
+            status:1
+        })
+        useStorage.clear()
+        ElMessage.success("交班成功");
+        setTimeout(() => {
+            router.replace({
+                name: "login",
+            });
+        }, 1000);
+        loading.value = false;
+    } catch (error) {
+        loading.value = false;
+    }
+}
 const infoshopInfoqueryDutys = async () => {
-    let res = await shopInfoqueryDuty({
-        page: 1,
-        pageSize: 10
-    })
-    infoData.value = res
-    console.log(res)
+    try {
+        let res = await shopInfoqueryDuty({
+            page: 1,
+            pageSize: 10
+        })
+        infoData.value = res
+    } catch (error) {
+
+    }
+
 }
 onMounted(() => {
     infoshopInfoqueryDutys()
@@ -163,6 +190,8 @@ onMounted(() => {
             display: flex;
             justify-content: flex-start;
             align-items: center;
+            color: #161718;
+            text-decoration: none;
         }
 
         .box_top_right {
diff --git a/src/views/work/record.vue b/src/views/work/record.vue
index 4641133..7f918e0 100644
--- a/src/views/work/record.vue
+++ b/src/views/work/record.vue
@@ -2,14 +2,14 @@
     <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">
+                <router-link to='/work' class="box_top_left">
                     <el-icon size="20">
                         <ArrowLeft />
                     </el-icon>
-                    <router-link to='/work' class="box_top_right">
+                    <div class="box_top_right">
                         交班记录
-                    </router-link>
-                </div>
+                    </div>
+                </router-link>
             </div>
             <div class="box_content">
                 <div class="box_content_left">
@@ -160,12 +160,14 @@ onMounted(() => {
         background: #fff;
         padding: 6px 10px;
         border-radius: 6px;
-
+            /* 取消下划线效果 */
 
         .box_top_left {
             display: flex;
             justify-content: flex-start;
             align-items: center;
+            text-decoration: none;
+            /* 取消下划线效果 */
         }
 
         .box_top_right {
@@ -214,17 +216,18 @@ onMounted(() => {
                 width: 100%;
                 height: 80%;
                 padding: 0 20px;
-
+                .box_content_left_bouttomox::after {
+                        content: '';
+                        display: inline-block;
+                         width: 32%;
+                    }
                 .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 {
+                    
+                    .box_content_left_bouttom_item {    
                         margin-top: 10px;
                         width: 32%;
                         background: #eeeeee;