xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 12:14:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update type

Browse Source
This commit is contained in:
kamoa457 2023-11-03 13:48:48 +07:00
parent 8f3d03cb9c
commit ae09ca0754
2 changed files with 86 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/assets/dataJson/rooms.json
View File

@ -6,6 +6,7 @@
"firstName": "", "firstName": "",
"laststName": "", "laststName": "",
"Affiliation": "", "Affiliation": "",
"typeRoom": "ช1",
"status": "free" "status": "free"
}, },
{ {
@ -15,6 +16,7 @@
"firstName": "ปิติ2", "firstName": "ปิติ2",
"laststName": "มีดี", "laststName": "มีดี",
"Affiliation": "ฝอ. 2", "Affiliation": "ฝอ. 2",
"typeRoom": "ช1",
"status": "unavailable" "status": "unavailable"
}, },
{ {
@ -24,6 +26,7 @@
"firstName": "", "firstName": "",
"laststName": "", "laststName": "",
"Affiliation": "", "Affiliation": "",
"typeRoom": "ช1",
"status": "free" "status": "free"
}, },
{ {
@ -33,6 +36,7 @@
"firstName": "ปิติ2", "firstName": "ปิติ2",
"laststName": "มีดี", "laststName": "มีดี",
"Affiliation": "ฝอ. 1", "Affiliation": "ฝอ. 1",
"typeRoom": "ช2",
"status": "return" "status": "return"
}, },
{ {
@ -42,6 +46,7 @@
"firstName": "ปิติ3", "firstName": "ปิติ3",
"laststName": "มีดี", "laststName": "มีดี",
"Affiliation": "ฝอ. 1", "Affiliation": "ฝอ. 1",
"typeRoom": "ช2",
"status": "unavailable" "status": "unavailable"
}, },
{ {
@ -51,6 +56,7 @@
"firstName": "ปิติ4", "firstName": "ปิติ4",
"laststName": "มีดี", "laststName": "มีดี",
"Affiliation": "ฝอ. 1", "Affiliation": "ฝอ. 1",
"typeRoom": "ช3",
"status": "waiting" "status": "waiting"
}, },
{ {
@ -60,6 +66,7 @@
"firstName": "ปิติ3", "firstName": "ปิติ3",
"laststName": "มีดี", "laststName": "มีดี",
"Affiliation": "ฝอ. 1", "Affiliation": "ฝอ. 1",
"typeRoom": "ช1",
"status": "return" "status": "return"
}, },
{ {
@ -69,6 +76,7 @@
"firstName": "ปิติ9", "firstName": "ปิติ9",
"laststName": "มีดี", "laststName": "มีดี",
"Affiliation": "ฝอ. 1", "Affiliation": "ฝอ. 1",
"typeRoom": "ช3",
"status": "special" "status": "special"
}, },
{ {
@ -78,6 +86,7 @@
"firstName": "ปิติ5", "firstName": "ปิติ5",
"laststName": "มีดี", "laststName": "มีดี",
"Affiliation": "ฝอ. 4", "Affiliation": "ฝอ. 4",
"typeRoom": "ช2",
"status": "unavailable" "status": "unavailable"
}, },
{ {
@ -87,6 +96,7 @@
"firstName": "ปิติ6", "firstName": "ปิติ6",
"laststName": "มีดี", "laststName": "มีดี",
"Affiliation": "ฝอ. 7", "Affiliation": "ฝอ. 7",
"typeRoom": "ช2",
"status": "waiting" "status": "waiting"
}, },
{ {
@ -96,6 +106,7 @@
"firstName": "", "firstName": "",
"laststName": "", "laststName": "",
"Affiliation": "", "Affiliation": "",
"typeRoom": "ช1",
"status": "free" "status": "free"
}, },
{ {
@ -105,6 +116,7 @@
"firstName": "", "firstName": "",
"laststName": "", "laststName": "",
"Affiliation": "", "Affiliation": "",
"typeRoom": "ช2",
"status": "free" "status": "free"
}, },
{ {
@ -114,6 +126,7 @@
"firstName": "ปิติ7", "firstName": "ปิติ7",
"laststName": "มีดี", "laststName": "มีดี",
"Affiliation": "ฝอ. 2", "Affiliation": "ฝอ. 2",
"typeRoom": "ช3",
"status": "special" "status": "special"
} }
] ]

90
src/views/Restroom/RoomView.vue
View File

@ -36,6 +36,7 @@ export default {
{ label: "Phoenix", value: "Elixir" }, { label: "Phoenix", value: "Elixir" },
], ],
typeRoom: [ typeRoom: [
{ label: "ทั้งหมด", value: "ทั้งหมด" },
{ label: "ช1", value: "ช1" }, { label: "ช1", value: "ช1" },
{ label: "ช2", value: "ช2" }, { label: "ช2", value: "ช2" },
{ label: "ช3", value: "ช3" }, { label: "ช3", value: "ช3" },
@ -63,12 +64,42 @@ export default {
statuseunavailable: false, statuseunavailable: false,
statusewaiting: false, statusewaiting: false,
selectedlistRoom: "อาคารแฟลต 1/11 ", selectedlistRoom: "อาคารแฟลต 1/11 ",
selectedStatus: "",
}; };
}, },
created() { created() {
// this.$route.query // this.$route.query
this.oldData = this.roomData;
},
watch: {
selectedtypeRoom: function (newValue) {
this.roomData = this.oldData;
if (newValue !== null) {
if (newValue.value !== "ทั้งหมด") {
const typeRoom = this.roomData.filter(
(tagreturn) => tagreturn.typeRoom === newValue.value
);
this.roomData = typeRoom;
} else {
this.roomData = this.oldData;
}
}
},
selectedStatus: function (newValue) {
console.log(newValue);
this.roomData = this.oldData;
// if (newValue !== null) {
// if (newValue.value !== "ทั้งหมด") {
// const typeRoom = this.roomData.filter(
// (tagreturn) => tagreturn.typeRoom === newValue.value
// );
// this.roomData = typeRoom;
// } else {
// this.roomData = this.oldData;
// }
// }
},
}, },
methods: { methods: {
gotodetail(id, index) { gotodetail(id, index) {
let action; let action;
@ -79,32 +110,41 @@ export default {
if (index == "return") action = "return"; if (index == "return") action = "return";
this.$router.push({ path: `/room/detail/${id}`, query: { mode: action } }); this.$router.push({ path: `/room/detail/${id}`, query: { mode: action } });
}, },
onChangeEvent(e) { onChangeEvent(e, event) {
this.roomData = this.oldData;
if (e == "free") { if (e == "free") {
if (statusfree) { if (event.target.checked) {
const free = this.roomData.filter((tagfree) => tagfree.status === "free"); const free = this.roomData.filter((tagfree) => tagfree.status === "free");
console.log(free); this.roomData = free;
console.log(this.roomData);
} }
} else if (e == "unavailable") { } else if (e == "unavailable") {
if (statuseunavailable) { if (event.target.checked) {
const statuseunavailable = this.roomData.filter( const statuseunavailable = this.roomData.filter(
(tagun) => tagun.status === "unavailable" (tagun) => tagun.status === "unavailable"
); );
console.log(statuseunavailable); this.roomData = statuseunavailable;
} }
} else if (e == "waiting") { } else if (e == "waiting") {
if (statusrewaiting) { if (event.target.checked) {
const waiting = this.roomData.filter( const waiting = this.roomData.filter(
(tagwaiting) => tagwaiting.status === "waiting" (tagwaiting) => tagwaiting.status === "waiting"
); );
console.log(waiting); this.roomData = waiting;
} }
} else if (e == "return") { } else if (e == "return") {
if (statusrewaiting) { if (event.target.checked) {
const returns = this.roomData.filter( const returns = this.roomData.filter(
(tagreturn) => tagreturn.status === "return" (tagreturn) => tagreturn.status === "return"
); );
console.log(returns); this.roomData = returns;
}
} else if (e == "special") {
if (event.target.checked) {
const specials = this.roomData.filter(
(tagreturn) => tagreturn.status === "special"
);
this.roomData = specials;
} }
} }
}, },
@ -185,7 +225,6 @@ export default {
</div> </div>
<div class="d-flex justify-content-between align-items-baseline p-2"> <div class="d-flex justify-content-between align-items-baseline p-2">
<div class="text-start"> <div class="text-start">
<h6>{{ selectedlistRoom?.label }}</h6>
<p class="d-flex align-items-baseline p-2"> <p class="d-flex align-items-baseline p-2">
<span>คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span> <span>คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span>
<a data-bs-toggle="modal" data-bs-target="#Edituser" <a data-bs-toggle="modal" data-bs-target="#Edituser"
@ -197,6 +236,7 @@ export default {
></a ></a
> >
</p> </p>
<h6 class="pt-1">{{ selectedlistRoom?.label || "อาคารแฟลต 1/11" }}</h6>
</div> </div>
<div class="d-flex"> <div class="d-flex">
@ -204,7 +244,8 @@ export default {
id="terms" id="terms"
color="green" color="green"
:checked="statusfree" :checked="statusfree"
@change="onChangeEvent('free')" v-model="selectedStatus"
@change="onChangeEvent('free', $event)"
> >
<a href="javascript:;" class="font-weight-bolder"> ว่าง</a> <a href="javascript:;" class="font-weight-bolder"> ว่าง</a>
</MaterialCheckbox> </MaterialCheckbox>
@ -212,7 +253,7 @@ export default {
id="terms2" id="terms2"
color="red" color="red"
:checked="statuseunavailable" :checked="statuseunavailable"
@change="onChangeEvent('unavailable')" @change="onChangeEvent('unavailable', $event)"
> >
<a href="javascript:;" class="font-weight-bolder"> ไม่ว่าง</a> <a href="javascript:;" class="font-weight-bolder"> ไม่ว่าง</a>
</MaterialCheckbox> </MaterialCheckbox>
@ -220,7 +261,7 @@ export default {
id="terms3" id="terms3"
color="warning2" color="warning2"
:checked="statusewaiting" :checked="statusewaiting"
@change="onChangeEvent('waiting')" @change="onChangeEvent('waiting', $event)"
> >
<a href="javascript:;" class="font-weight-bolder"> ชำรุด</a> <a href="javascript:;" class="font-weight-bolder"> ชำรุด</a>
</MaterialCheckbox> </MaterialCheckbox>
@ -228,10 +269,17 @@ export default {
id="terms4" id="terms4"
color="return" color="return"
:checked="statusreturn" :checked="statusreturn"
@change="onChangeEvent('return')" @change="onChangeEvent('return', $event)"
> >
<a href="javascript:;" class="font-weight-bolder"> ผ่อนผัน</a> <a href="javascript:;" class="font-weight-bolder"> ผ่อนผัน</a>
</MaterialCheckbox> </MaterialCheckbox>
<MaterialCheckbox
id="terms5"
color="special"
@change="onChangeEvent('special', $event)"
>
<a href="javascript:;" class="font-weight-bolder"> กรณีพิเศษ</a>
</MaterialCheckbox>
</div> </div>
</div> </div>
@ -313,11 +361,19 @@ export default {
> >
{{ "ผ่อนผัน" }} {{ "ผ่อนผัน" }}
</p> </p>
<p v-if="item?.status !== 'special'" class="card-title" style="font-size: 14px"> <p
v-if="item?.status !== 'special'"
class="card-title"
style="font-size: 14px"
>
{{ item?.ranks }} {{ item?.firstName }} {{ item?.ranks }} {{ item?.firstName }}
{{ item?.laststName }} {{ item?.laststName }}
</p> </p>
<p v-if="item?.status == 'special'" class="card-title text-red mt-1" style="font-size: 14px"> <p
v-if="item?.status == 'special'"
class="card-title text-red mt-1"
style="font-size: 14px"
>
{{ item?.ranks }} {{ item?.firstName }} {{ item?.ranks }} {{ item?.firstName }}
{{ item?.laststName }} {{ item?.laststName }}
</p> </p>