整理 slot, slotmanager

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

@@ -18,9 +18,23 @@
         </b-card>
       </b-col>
 
+      <b-col md="6">
+        <b-card title="抽獎紀錄" style="height:70vh;">
+          <b-table responsive sticky-header=true :items="recipientsList" bordered :fields="recipientsTableFields"
+            style="max-height: 60vh; overflow: auto;">
+            <template #cell(ICON)="data">
+              <div class="text-center">
+                <feather-icon :icon="data.value" />
+              </div>
+            </template>
+          </b-table>
+        </b-card>
+      </b-col>
+
+      <!--Model Start-->
       <b-modal ref="draw-modal" id="draw-modal" centered title="抽獎" no-stacking hide-footer>
         <label>獎品:</label>
-        <b-form-input v-model="prizeName" :disabled=true />
+        <b-form-input v-model="drawOption.prize_name" :disabled=true />
         <br>
         <label>地區: </label>
         <v-select multiple v-model="drawOption.region" :options="regionOption" />
@@ -92,19 +106,7 @@
           Accept
         </b-button>
       </b-modal>
-
-      <b-col md="6">
-        <b-card title="抽獎紀錄" style="height:70vh;">
-          <b-table responsive sticky-header=true :items="recipientsList" bordered :fields="recipientsTableFields"
-            style="max-height: 60vh; overflow: auto;">
-            <template #cell(ICON)="data">
-              <div class="text-center">
-                <feather-icon :icon="data.value" />
-              </div>
-            </template>
-          </b-table>
-        </b-card>
-      </b-col>
+      <!--Model End-->
     </b-row>
   </div>
 </template>
@@ -146,10 +148,10 @@ export default {
       recipientsTableFields: ['prize_name', 'user_id', 'user_name', 'created_at'],
       regionOption: ['北區', '中區', '南區', '來賓'],
 
-      prizeName: '',
       drawOption: {
         activity_id: this.$route.params.activity_id,
         prize_id: '0',
+        prize_name: '',
         region: ['北區', '中區', '南區', '來賓'],
         draw_one: true,
       },
@@ -185,7 +187,7 @@ export default {
         + ':' + d.getMinutes().toString().padStart(2, '0')
         + ':' + d.getSeconds().toString().padStart(2, '0');
     },
-    counterId(id){
+    counterId(id) {
       return 'counter_' + id;
     },
     showDraw() {
@@ -221,7 +223,7 @@ export default {
     click(params) {
       this.drawList = [];
       if (params.count > 0) {
-        this.prizeName = params.name;
+        this.drawOption.prize_name = params.name;
         this.drawOption.prize_id = params.id;
         this.showDraw();
       } else {

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

@@ -2,7 +2,7 @@
 	<div ref="body">
 
 		<div class="prize">
-			<span class="prize-text">{{ prizeName }}</span>
+			<span class="prize-text">{{ drawOption.prize_name }}</span>
 		</div>
 		<div class="slot counter_0">
 			<b-row>
@@ -37,7 +37,7 @@
 		<!--Model Start-->
 		<b-modal ref="draw-menu" title="獎項列表" centered no-stacking hide-footer>
 			<b-card style="height:75vh;">
-				<b-table responsive hover sticky-header=true :items="getPrizeList(prizeList)" bordered :fields="fields"
+				<b-table responsive hover sticky-header=true :items="prizeList" bordered :fields="prizeTableFields"
 					@row-clicked="click" style="max-height: 57vh; overflow: auto;">
 					<template #cell(ICON)="data">
 						<div class="text-center">
@@ -53,15 +53,17 @@
 		</b-modal>
 		<b-modal ref="draw-modal" id="draw-modal" centered title="抽獎" no-stacking hide-footer>
 			<label>獎品:</label>
-			<b-form-input v-model="prizeName" :disabled=true />
+			<b-form-input v-model="drawOption.prize_name" :disabled=true />
 			<br>
 			<label>地區: </label>
-			<v-select multiple v-model="region" :options="regionOption" />
+			<v-select multiple v-model="drawOption.region" :options="regionOption" />
+			<br>
+
 			<b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-3" variant="outline-secondary" block
 				@click="hideModal">
 				Close
 			</b-button>
-			<b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="primary" block @click="hideModal()">
+			<b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-2" variant="primary" block @click="hideModal">
 				Accept
 			</b-button>
 		</b-modal>
@@ -76,13 +78,13 @@
 		</b-modal>
 		<b-modal ref="add-prize" centered title="加碼" no-stacking hide-footer>
 			<label>獎品:</label>
-			<b-form-input v-model="addPrizeName" />
+			<b-form-input v-model="addPrizeOption.name" />
 			<br>
 			<label>加碼者: </label>
-			<b-form-input v-model="addPrizeUser" />
+			<b-form-input v-model="addPrizeOption.provider" />
 			<br>
 			<label>數量: </label>
-			<b-form-spinbutton v-model="addPrizeNumber" min="1" />
+			<b-form-spinbutton v-model="addPrizeOption.count" min="1" />
 
 			<b-button v-ripple.400="'rgba(255, 255, 255, 0.15)'" class="mt-3" variant="outline-secondary" block
 				@click="hideModal">
@@ -149,8 +151,6 @@ export default {
 			activity: {},
 			userList: [],
 			departmentList: [],
-			prizeList: [],
-			recipientsList: [],
 
 			fields: ['獎項', '數量'],
 			regionOption: ['北區', '中區', '南區', '來賓'],
@@ -170,9 +170,6 @@ export default {
 			notDrawnCount: 0,
 			isDrawn: false,
 
-			addPrizeName: '',
-			addPrizeUser: '',
-			addPrizeNumber: 1,
 			departments: [
 				"行管部庶務科",
 				"人力資源科",
@@ -211,6 +208,25 @@ export default {
 				"來賓"
 			],
 			messages: [],
+			prizeList: [],
+
+			prizeTableFields: ['name', 'provider', 'count'],
+			recipientsTableFields: ['prize_name', 'user_id', 'user_name', 'created_at'],
+			regionOption: ['北區', '中區', '南區', '來賓'],
+
+			drawOption: {
+				activity_id: this.$route.params.activity_id,
+				prize_id: '0',
+				prize_name: '',
+				region: ['北區', '中區', '南區', '來賓'],
+				draw_one: true,
+			},
+			addPrizeOption: {
+				activity_id: this.$route.params.activity_id,
+				name: '',
+				provider: '',
+				count: 1,
+			},
 		}
 	},
 	created() {
@@ -226,18 +242,14 @@ export default {
 			let message = data.message
 			console.log(message);
 
-			
-			if (message == "addPrize") {
+
+			if (message == "updateData") {
 				this.updateDataset()
-			} else if (message && message.id) {
+			} else if (message && message.prize_id) {
 				this.clearResult()
-				this.prizeName = this.getPrizeName(message.id);
-				this.prizeId = message.id;
-				this.drawOne = true;
-				this.drawMax = message["數量"];
+				this.drawOption = message;
 				this.drawList = [];
 			}
-
 		});
 
 		useJwt.postData('/api/activity/show', { activity_id: this.activityId }).then(res => {
@@ -252,14 +264,10 @@ export default {
 			this.userList = res.data;
 		});
 
-		useJwt.postData('/api/prize/index_by_activity', { activity_id: this.activityId }).then(res => {
+		useJwt.postData('/api/prize/index_by_activity', { activity_id: this.$route.params.activity_id }).then(res => {
 			this.prizeList = res.data;
 		});
 
-		useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.activityId }).then(res => {
-			this.recipientsList = res.data;
-		});
-
 		useJwt.postData('/api/department/index').then(res => {
 			this.departmentList = res.data;
 		});
@@ -283,38 +291,9 @@ export default {
 				+ ':' + d.getMinutes().toString().padStart(2, '0')
 				+ ':' + d.getSeconds().toString().padStart(2, '0');
 		},
-		getPrizeList(prizeList) {
-			var output = [];
-			prizeList.forEach(element => {
-				output.push({ id: element.id, '獎項': element.name, '數量': element.count });
-			});
-			return output;
-		},
-		getPrizeName(prizeId) {
-			var output = '';
-			this.prizeList.forEach(element => {
-				if (prizeId == element.id) {
-					output = element.name;
-				}
-			});
-			return output;
-		},
-		getRecipientsList(recipientsList) {
-			var output = [];
-			recipientsList.forEach(element => {
-				output.push({ '獎項': this.getPrizeName(element.prize_id), '獲獎人': this.userList[element.user_id], '時間': this.dateFormat(element.created_at) });
-			});
-			return output;
-		},
 		counterId(id) {
 			return "counter_" + id;
 		},
-		drawNumber() {
-			if (this.drawOne) {
-				return 1;
-			}
-			return this.drawMax;
-		},
 		showDraw() {
 			this.$refs['draw-modal'].show();
 		},
@@ -335,42 +314,30 @@ export default {
 			this.updateDataset();
 		},
 		updateDataset() {
-			useJwt.postData('/api/prize/index_by_activity', { activity_id: this.activityId }).then(res => {
+			useJwt.postData('/api/prize/index_by_activity', { activity_id: this.$route.params.activity_id }).then(res => {
 				this.prizeList = res.data;
 			});
-			useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.activityId }).then(res => {
-				this.recipientsList = res.data;
-			});
 		},
 		click(params) {
-			this.prizeName = this.getPrizeName(params.id);
-			this.prizeId = params.id;
-			this.drawOne = true;
-			this.drawMax = params["數量"];
-			this.drawList = [];
-			if (this.drawMax == 0) {
-				this.showDrawError();
-			} else {
+			if (params.count > 0) {
+				this.drawOption.prize_name = params.name;
+				this.drawOption.prize_id = params.id;
 				this.showDraw();
+			} else {
+				this.showDrawError();
 			}
 		},
 		draw() {
 			if (!this.isDrawn) {
 				this.isDrawn = true;
-				useJwt.postData('/api/draw/draw', {
-					activity_id: this.activityId,
-					prize_id: this.prizeId,
-					region: this.region,
-					number: this.drawNumber()
-				}).then(res => {
+				useJwt.postData('/api/draw/draw', this.drawOption).then(res => {
 					if (res.data) {
 						this.drawList = res.data;
 						if (this.drawList.length == 1) {
-							//this.department_name = this.departmentList[this.drawList[0].department_id];
+							this.department_name = this.drawList[0].department_name;
 							this.user_id = this.drawList[0].user_id;
 							this.user_name = this.drawList[0].user_name;
 						}
-
 						setTimeout(() => {
 							this.animate();
 						}, 500);
@@ -391,12 +358,10 @@ export default {
 				});
 				useJwt.postData('/api/draw/store', {
 					users: idList,
-					prize_id: String(this.prizeId),
-					number: this.drawNumber()
+					prize_id: this.drawOption.prize_id,
 				}).then(res => {
 					if (res.data) {
 						console.log("store success");
-						this.count();
 					} else {
 						console.log("store error");
 					}
@@ -422,19 +387,13 @@ export default {
 			}
 		},
 		addPrize() {
-			useJwt.postData('/api/prize/store', {
-				activity_id: this.activityId,
-				name: this.addPrizeName,
-				provider: this.addPrizeUser,
-				count: this.addPrizeNumber
-			}).then(res => {
+			useJwt.postData('/api/prize/store', this.addPrizeOption).then(res => {
 				if (res.data) {
 					console.log("add prize success");
-					this.hideModal();
 				} else {
 					console.log("add prize error");
 				}
-
+				this.hideModal();
 			});
 		},
 		animate() {
@@ -443,7 +402,7 @@ export default {
 			var string = numbers;
 
 			this.drawList.forEach((element, index) => {
-				var departmentName = this.departmentList[element.department_id];
+				var departmentName = element.department_name;
 				var deps = document.querySelectorAll("div.slot.counter_" + index + " > div > div:nth-child(1) > i")
 				var allCounters = document.querySelectorAll("div.slot.counter_" + index + " > div > div:nth-child(2) > span > i");
 

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

@@ -18,9 +18,23 @@
 				</b-card>
 			</b-col>
 
+			<b-col md="6">
+				<b-card title="抽獎紀錄" style="height:70vh;">
+					<b-table responsive sticky-header=true :items="recipientsList" bordered
+						:fields="recipientsTableFields" style="max-height: 60vh; overflow: auto;">
+						<template #cell(ICON)="data">
+							<div class="text-center">
+								<feather-icon :icon="data.value" />
+							</div>
+						</template>
+					</b-table>
+				</b-card>
+			</b-col>
+
+			<!--Model Start-->
 			<b-modal ref="draw-modal" id="draw-modal" centered title="抽獎" no-stacking hide-footer>
 				<label>獎品:</label>
-				<b-form-input v-model="prizeName" :disabled=true />
+				<b-form-input v-model="drawOption.prize_name" :disabled=true />
 				<br>
 				<label>地區: </label>
 				<v-select multiple v-model="drawOption.region" :options="regionOption" />
@@ -65,19 +79,7 @@
 					Accept
 				</b-button>
 			</b-modal>
-
-			<b-col md="6">
-				<b-card title="抽獎紀錄" style="height:70vh;">
-					<b-table responsive sticky-header=true :items="recipientsList" bordered
-						:fields="recipientsTableFields" style="max-height: 60vh; overflow: auto;">
-						<template #cell(ICON)="data">
-							<div class="text-center">
-								<feather-icon :icon="data.value" />
-							</div>
-						</template>
-					</b-table>
-				</b-card>
-			</b-col>
+			<!--Model End-->
 		</b-row>
 	</div>
 </template>
@@ -120,10 +122,10 @@ export default {
 			recipientsTableFields: ['prize_name', 'user_id', 'user_name', 'created_at'],
 			regionOption: ['北區', '中區', '南區', '來賓'],
 
-			prizeName: '',
 			drawOption: {
 				activity_id: this.$route.params.activity_id,
 				prize_id: '0',
+				prize_name: '',
 				region: ['北區', '中區', '南區', '來賓'],
 				draw_one: true,
 			},
@@ -193,36 +195,36 @@ export default {
 			this.updateDataset();
 		},
 		updateDataset() {
-			useJwt.postData('/api/prize/index_by_activity', { activity_id: this.activityId }).then(res => {
+			useJwt.postData('/api/prize/index_by_activity', { activity_id: this.$route.params.activity_id }).then(res => {
 				this.prizeList = res.data;
 			});
-			useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.activityId }).then(res => {
+			useJwt.postData('/api/recipients/index_by_activity', { activity_id: this.$route.params.activity_id }).then(res => {
 				this.recipientsList = res.data;
 				this.recipientsList.forEach(element => {
 					element.created_at = this.dateFormat(element.created_at);
 				});
 			});
 			useJwt.postData('/api/drawManager', {
-				message: "addPrize"
+				message: "updateData"
 			}).then(res => {
 				// console.log(res);
 			});
 		},
 		click(params) {
 			if (params.count > 0) {
-				this.prizeName = params.name;
+				this.drawOption.prize_name = params.name;
 				this.drawOption.prize_id = params.id;
 				this.showDraw();
-				useJwt.postData('/api/drawManager', {
-					message: params
-				}).then(res => {
-					// console.log(res);
-				});
 			} else {
 				this.showDrawError();
 			}
 		},
 		sendDrawOptions() {
+			useJwt.postData('/api/drawManager', {
+				message: this.drawOption
+			}).then(res => {
+				console.log(res);
+			});
 			this.hideModal();
 		},
 		addPrize() {