調整報到排版

app/Http/Controllers/API/UserController.php

@@ -53,7 +53,7 @@ class UserController extends Controller
     {
         $user = User::where('user_id', '=', $request->id)->get()[0];
         $department = Department::where('department_id','=',$user->department_id)->get()[0];
-        $use->department = $department;
+        $user->department = $department->department_name;
         $response = [
             'user' => $user,
         ];

database/MAA_department.json

@@ -1,182 +1,182 @@
 [
   {
     "department_id": "a00",
-    "departmen_name": "行政管理部",
+    "department_name": "行政管理部",
     "manager": "a00"
   },
   {
     "department_id": "a21",
-    "departmen_name": "行政管理部庶務科",
+    "department_name": "行政管理部庶務科",
     "manager": "a21"
   },
   {
     "department_id": "a22",
-    "departmen_name": "人力資源科",
+    "department_name": "人力資源科",
     "manager": "a22"
   },
   {
     "department_id": "a24",
-    "departmen_name": "行政管理部文書科",
+    "department_name": "行政管理部文書科",
     "manager": "a24"
   },
   {
     "department_id": "b00",
-    "departmen_name": "南區辦事處",
+    "department_name": "南區辦事處",
     "manager": "b00"
   },
   {
     "department_id": "b10",
-    "departmen_name": "中區辦事處",
+    "department_name": "中區辦事處",
     "manager": "b10"
   },
   {
     "department_id": "c00",
-    "departmen_name": "工程管理一部",
+    "department_name": "工程管理一部",
     "manager": "c00"
   },
   {
     "department_id": "c10",
-    "departmen_name": "工程管理二部",
+    "department_name": "工程管理二部",
     "manager": "c10"
   },
   {
     "department_id": "d00",
-    "departmen_name": "發展與企畫部",
+    "department_name": "發展與企畫部",
     "manager": "d00"
   },
   {
     "department_id": "e10",
-    "departmen_name": "工程製圖科",
+    "department_name": "工程製圖科",
     "manager": "e10"
   },
   {
     "department_id": "f10",
-    "departmen_name": "工務部",
+    "department_name": "工務部",
     "manager": "f10"
   },
   {
     "department_id": "g00",
-    "departmen_name": "大地工程部",
+    "department_name": "大地工程部",
     "manager": "g00"
   },
   {
     "department_id": "i00",
-    "departmen_name": "財務部",
+    "department_name": "財務部",
     "manager": "i00"
   },
   {
     "department_id": "j00",
-    "departmen_name": "運輸及土木工程部",
+    "department_name": "運輸及土木工程部",
     "manager": "j00"
   },
   {
     "department_id": "j10",
-    "departmen_name": "城鄉發展部",
+    "department_name": "城鄉發展部",
     "manager": "j10"
   },
   {
     "department_id": "j20",
-    "departmen_name": "軌道工程部",
+    "department_name": "軌道工程部",
     "manager": "j20"
   },
   {
     "department_id": "l00",
-    "departmen_name": "董事長室",
+    "department_name": "董事長室",
     "manager": "l00"
   },
   {
     "department_id": "l10",
-    "departmen_name": "總經理室",
+    "department_name": "總經理室",
     "manager": "l10"
   },
   {
     "department_id": "l40",
-    "departmen_name": "企業發展中心",
+    "department_name": "企業發展中心",
     "manager": "l40"
   },
   {
     "department_id": "l60",
-    "departmen_name": "成本中心",
+    "department_name": "成本中心",
     "manager": "l60"
   },
   {
     "department_id": "m00",
-    "departmen_name": "資訊中心",
+    "department_name": "資訊中心",
     "manager": "m00"
   },
   {
     "department_id": "p00",
-    "departmen_name": "環境及水資源工程部",
+    "department_name": "環境及水資源工程部",
     "manager": "p00"
   },
   {
     "department_id": "p10",
-    "departmen_name": "環境水務部",
+    "department_name": "環境水務部",
     "manager": "p10"
   },
   {
     "department_id": "p20",
-    "departmen_name": "環境永續部",
+    "department_name": "環境永續部",
     "manager": "p20"
   },
   {
     "department_id": "r00",
-    "departmen_name": "機電系統工程部",
+    "department_name": "機電系統工程部",
     "manager": "r00"
   },
   {
     "department_id": "s00",
-    "departmen_name": "結構工程部",
+    "department_name": "結構工程部",
     "manager": "s00"
   },
   {
     "department_id": "u20",
-    "departmen_name": "工程設計群",
+    "department_name": "工程設計群",
     "manager": "u20"
   },
   {
     "department_id": "u30",
-    "departmen_name": "工程監理群",
+    "department_name": "工程監理群",
     "manager": "u30"
   },
   {
     "department_id": "u40",
-    "departmen_name": "總管理處",
+    "department_name": "總管理處",
     "manager": "u40"
   },
   {
     "department_id": "u50",
-    "departmen_name": "建築及設施群",
+    "department_name": "建築及設施群",
     "manager": "u50"
   },
   {
     "department_id": "x05",
-    "departmen_name": "數位工程發展部",
+    "department_name": "數位工程發展部",
     "manager": "x05"
   },
   {
     "department_id": "x06",
-    "departmen_name": "淡海輕軌計畫監造專案",
+    "department_name": "淡海輕軌計畫監造專案",
     "manager": "x06"
   },
   {
     "department_id": "x08",
-    "departmen_name": "安坑輕軌計畫監造專案",
+    "department_name": "安坑輕軌計畫監造專案",
     "manager": "x08"
   },
   {
     "department_id": "x09",
-    "departmen_name": "先進技術中心",
+    "department_name": "先進技術中心",
     "manager": "x09"
   },
   {
     "department_id": "x10",
-    "departmen_name": "塭仔圳市地重劃公共工程專案管理與監造專案",
+    "department_name": "塭仔圳市地重劃公共工程專案管理與監造專案",
     "manager": "x10"
   },
   {
     "department_id": "x12",
-    "departmen_name": "萬大果菜市場專案",
+    "department_name": "萬大果菜市場專案",
     "manager": "x12"
   }
 ]

resources/js/src/views/lottery/CheckIn.vue

@@ -1,57 +1,69 @@
 <template>
-  <div>
-    <b-card title="報到人員">
-      <b-media no-body>
-        <b-media-aside>
-          <b-img
-            :src="'/images/profile-picture/' + user.user_id + '.jpg'"
-            blank-color="#ccc"
-            fluid
-            alt="placeholder"
-            style="width:300px;"
-            onerror="this.src='/images/error.png'" />
-        </b-media-aside>
-
-        <b-media-body class="ml-1">
-          <h5 class="mt-0">
-            姓名
-          </h5>
-          <b-card-text>
-            {{ user.name }}
-          </b-card-text>
-          <h5 class="mt-0">
-            工號
-          </h5>
-          <b-card-text>
-            {{ user.user_id }}
-          </b-card-text>
-          <h5 class="mt-0">
-            部門
-          </h5>
-          <b-card-text>
-            {{ user.department_id }}
-          </b-card-text>
-
-        </b-media-body>
-      </b-media>
-
-    </b-card>
-    <b-card title="報到人員">
-      <b-form-input v-model="input" @keydown.native="test_keydown_handler"></b-form-input>
-    </b-card>
-
-  </div>
+  <b-row>
+    <b-col md="6">
+      <b-card title="報到人員" style="height: 65vh;">
+        <b-media no-body>
+          <b-media-aside>
+            <b-img
+              :src="'/images/profile-picture/' + user.user_id + '.jpg'"
+              blank-color="#ccc"
+              fluid
+              alt="placeholder"
+              style="width:42vh;"
+              onerror="this.src='/images/error.png'" />
+          </b-media-aside>
+
+          <b-media-body class="ml-1" style="font-size: 2rem;">
+            <h2 class="mt-1">
+              姓名
+            </h2>
+            <b-card-text>
+              {{ user.name }}
+            </b-card-text>
+            <h2 class="mt-0">
+              工號
+            </h2>
+            <b-card-text>
+              {{ user.user_id }}
+            </b-card-text>
+            <h2 class="mt-0">
+              部門
+            </h2>
+            <b-card-text>
+              {{ user.department }}
+            </b-card-text>
+          </b-media-body>
+
+        </b-media>
+
+      </b-card>
+    </b-col>
+    <b-col md="6">
+      <b-card title="報到輸入" style="height: 65vh;">
+        <b-form-input v-model="input" @keydown.native="test_keydown_handler"></b-form-input>
+        <br>
+        <b-button
+              v-ripple.400="'rgba(113, 102, 240, 0.15)'"
+              variant="outline-primary"
+              @click="showMsgBoxTwo">
+              報到
+            </b-button>
+      </b-card>
+      
+    </b-col>
+  </b-row>
 </template>
 <script>
-import { BCard, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody } from 'bootstrap-vue'
+import { BRow, BCol, BCard, BCardText, BButton, BMedia, BFormInput, BImg, BMediaAside, BMediaBody } from 'bootstrap-vue'
+import Ripple from 'vue-ripple-directive'
 import Pusher from 'pusher-js';
 import useJwt from '@/auth/jwt/useJwt'
-import { Html5QrcodeScanner } from "html5-qrcode"
-import { Html5Qrcode } from "html5-qrcode"
 
 export default {
   name: "websocket",
   components: {
+    BRow,
+    BCol,
     BCard,
     BCardText,
     BButton,
@@ -61,9 +73,13 @@ export default {
     BMediaAside,
     BMediaBody,
   },
+  directives: {
+    Ripple,
+  },
   data() {
     return {
-      user: {},
+      boxTwo: '',
+      user: {name:"　",user_id:"　",department:"　"},
       scannerText: "",
       input: "",
     }
@@ -98,19 +114,38 @@ export default {
         // The key pressed was the enter key
 
         console.log(this.input)
-        
+
         useJwt.postData('/api/user/show', { 'id': this.input }).then(response => {
           this.user = response.data.user;
           this.input = "";
         }).catch(error => {
           console.log(error)
-          this.user = {};
+          this.user = {name:"查無此人",user_id:"　",department:"　"};
+          this.input = "";
         });
       }
-    }
+    },
+    showMsgBoxTwo() {
+      this.boxTwo = ''
+      this.$bvModal
+        .msgBoxConfirm('請確認此人員為本人', {
+          title: '請確認',
+          size: 'sm',
+          okVariant: 'primary',
+          okTitle: '報到',
+          cancelTitle: '取消',
+          cancelVariant: 'outline-secondary',
+          hideHeaderClose: false,
+          centered: true,
+        })
+        .then(value => {
+          this.boxTwo = value
+        })
+    },
+
   },
   watch: {
-    
+
   },
   mounted() {