添加更多

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 {

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;