diff --git a/src/assets/css/material-kit-pro.css b/src/assets/css/material-kit-pro.css
index 34bbcab..16aa9a6 100644
--- a/src/assets/css/material-kit-pro.css
+++ b/src/assets/css/material-kit-pro.css
@@ -9637,6 +9637,11 @@ textarea.form-control-lg {
color: #fb8c00 !important;
}
+.text-return {
+ color: #ffca28 !important;
+}
+
+
.text-danger {
color: #F44335 !important;
}
diff --git a/src/assets/dataJson/rooms.json b/src/assets/dataJson/rooms.json
index 9cdd13a..9db3f6d 100644
--- a/src/assets/dataJson/rooms.json
+++ b/src/assets/dataJson/rooms.json
@@ -2,66 +2,66 @@
{
"title": "ห้อง 1",
"dataIndex": "1",
- "status": true
+ "status": "free"
},
{
"title": "ห้อง 2",
"dataIndex": "2",
- "status": false
+ "status": "unavailable"
},
{
"title": "ห้อง 3",
"dataIndex": "3",
- "status": true
+ "status": "free"
},
{
"title": "ห้อง 4",
"dataIndex": "4",
- "status": true
+ "status": "return"
},
{
"title": "ห้อง 5",
"dataIndex": "5",
- "status": false
+ "status": "unavailable"
},
{
"title": "ห้อง 6",
"dataIndex": "6",
- "status": false
+ "status": "waiting"
},
{
"title": "ห้อง 7",
"dataIndex": "7",
- "status": true
+ "status": "return"
},
{
"title": "ห้อง 8",
"dataIndex": "8",
- "status": false
+ "status": "unavailable"
},
{
"title": "ห้อง 9",
"dataIndex": "9",
- "status": false
+ "status": "unavailable"
},
{
"title": "ห้อง 10",
"dataIndex": "10",
- "status": false
+ "status": "waiting"
},
{
"title": "ห้อง 11",
"dataIndex": "11",
- "status": true
+ "status": "free"
},
{
"title": "ห้อง 12",
"dataIndex": "12",
- "status": false
+ "status": "free"
},
{
"title": "ห้อง 13",
"dataIndex": "13",
- "status": false
+ "status": "waiting"
}
]
\ No newline at end of file
diff --git a/src/assets/img/excel.png b/src/assets/img/excel.png
new file mode 100644
index 0000000..ac17948
Binary files /dev/null and b/src/assets/img/excel.png differ
diff --git a/src/assets/img/pdf.png b/src/assets/img/pdf.png
new file mode 100644
index 0000000..e9fbafd
Binary files /dev/null and b/src/assets/img/pdf.png differ
diff --git a/src/views/Presentation/Sections/PresentationInformation.vue b/src/views/Presentation/Sections/PresentationInformation.vue
index cc708c8..de836e5 100644
--- a/src/views/Presentation/Sections/PresentationInformation.vue
+++ b/src/views/Presentation/Sections/PresentationInformation.vue
@@ -4,7 +4,7 @@
<section class="my-4 py-4">
<div class="container">
<div class="row">
- <div class="col-sm-2">
+ <div class="col-sm-3">
<div class="card">
<div class="card-body text-center">
<p class="card-title" style="font-weight: bold; color: #000">ทะเบียน</p>
@@ -16,7 +16,7 @@
</div>
</div>
</div>
- <div class="col-sm-2 mb-3 mb-sm-0">
+ <div class="col-sm-3 mb-3 mb-sm-0">
<div class="card">
<div class="card-body text-center">
<p class="card-title" style="font-weight: bold; color: #000">สถานะห้องพัก</p>
@@ -27,7 +27,7 @@
</div>
</div>
</div>
- <div class="col-sm-2">
+ <div class="col-sm-3">
<div class="card">
<div class="card-body text-center">
<p class="card-title" style="font-weight: bold; color: #000">ผังห้องพัก</p>
@@ -38,7 +38,7 @@
</div>
</div>
</div>
- <div class="col-sm-2">
+ <div class="col-sm-3">
<div class="card">
<div class="card-body text-center">
<p class="card-title" style="font-weight: bold; color: #000">ค่าสาธารณุปโภค</p>
@@ -49,7 +49,7 @@
</div>
</div>
</div>
- <div class="col-sm-2">
+ <!-- <div class="col-sm-2">
<div class="card">
<div class="card-body text-center">
<p class="card-title" style="font-weight: bold; color: #000">ระบบค้นหา</p>
@@ -59,8 +59,8 @@
</RouterLink>
</div>
</div>
- </div>
- <div class="col-sm-2">
+ </div> -->
+ <div class="col-sm-3 mt-4">
<div class="card">
<div class="card-body text-center">
<p class="card-title" style="font-weight: bold; color: #000">ระบบเรียกรายงาน</p>
diff --git a/src/views/Reports/ReportlistView.vue b/src/views/Reports/ReportlistView.vue
index 68011ca..2755307 100644
--- a/src/views/Reports/ReportlistView.vue
+++ b/src/views/Reports/ReportlistView.vue
@@ -135,60 +135,230 @@ export default {
<div class="d-flex justify-content-between">
<div>
<Breadcrumbs
- :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ระบบเรียกรายงาน' }]"
+ :routes="[
+ { label: 'หน้าหลัก', route: '/' },
+ { label: 'ระบบเรียกรายงาน' },
+ ]"
/>
</div>
- <div class="text-end">
- <MaterialButton
- variant="gradient"
- color="success"
- data-bs-toggle="modal"
- data-bs-target="#userBackdrop"
- >เพิ่มรายงาน</MaterialButton
- >
- </div>
</div>
-
- <div class="text-center pt-4">
- <table class="table border border-2 border-success">
- <thead class="border border-2 border-success border-bottom">
- <tr>
- <th scope="col">ลำดับ</th>
- <th scope="col">ชื่อ</th>
- <th scope="col">สกุล</th>
- <th scope="col">วันเกิด</th>
- <th scope="col">อายุ</th>
- <th scope="col">สังกัด</th>
- <th scope="col">ยศ</th>
- <th scope="col">เลขบัตรประชาชน</th>
- <th scope="col">เบอร์ติดต่อ</th>
- <th scope="col"></th>
- </tr>
- </thead>
- <tbody>
- <tr v-for="(item, index) in userlist" :key="index">
- <th scope="row">{{ index + 1 }}</th>
- <td>{{ item.firstName }}</td>
- <td>{{ item.lastName }}</td>
- <td>{{ item.old }}</td>
- <td>{{ item.birthday }}</td>
- <td>{{ item.Affiliation }}</td>
- <td>{{ item.rank }}</td>
- <td>{{ item.idcard }}</td>
- <td>{{ item.phone }}</td>
- <td>
- <a data-bs-toggle="modal" data-bs-target="#EdituserBackdrop"
- ><i
- class="material-icons me-2"
- style="cursor: pointer"
- aria-hidden="true"
- >edit</i
- ></a
- >
- </td>
- </tr>
- </tbody>
- </table>
+ <div>
+ <ul class="nav nav-tabs" id="myTab" role="tablist">
+ <li class="nav-item" role="presentation">
+ <button
+ class="nav-link active"
+ style="color: #57b05b"
+ id="home-tab"
+ data-bs-toggle="tab"
+ data-bs-target="#home"
+ type="button"
+ role="tab"
+ aria-controls="home"
+ aria-selected="true"
+ >
+ บันทึกค่าใช้จ่ายบ้านพัก ตร.
+ </button>
+ </li>
+ <li class="nav-item" role="presentation">
+ <button
+ class="nav-link"
+ style="color: #57b05b"
+ id="profile-tab"
+ data-bs-toggle="tab"
+ data-bs-target="#profile"
+ type="button"
+ role="tab"
+ aria-controls="profile"
+ aria-selected="false"
+ >
+ บันทึกค่าใช้จ่ายบ้านพัก บช.ตชด.
+ </button>
+ </li>
+ <li class="nav-item" role="presentation">
+ <button
+ class="nav-link"
+ style="color: #57b05b"
+ id="contact-tab"
+ data-bs-toggle="tab"
+ data-bs-target="#contact"
+ type="button"
+ role="tab"
+ aria-controls="contact"
+ aria-selected="false"
+ >
+ สรุปรายงานค่าใช้จ่าย
+ </button>
+ </li>
+ </ul>
+ <div class="tab-content" id="myTabContent">
+ <div
+ class="tab-pane fade show active"
+ id="home"
+ role="tabpanel"
+ aria-labelledby="home-tab"
+ >
+ <div class="d-flex justify-content-end pt-4">
+ <MaterialButton size="lg" class="btn-icon" style="margin-right: -30px">
+ <div class="d-flex align-items-center">
+ <span style="margin-right: 5px">บันทึก</span>
+ <img
+ src="../../assets/img/pdf.png"
+ alt="title"
+ loading="lazy"
+ width="40"
+ />
+ </div>
+ </MaterialButton>
+ <MaterialButton size="lg" class="btn-icon">
+ <div class="d-flex align-items-center">
+ <span style="margin-right: 5px">บันทึก</span>
+ <img
+ src="../../assets/img/excel.png"
+ alt="title"
+ loading="lazy"
+ width="40"
+ />
+ </div>
+ </MaterialButton>
+ </div>
+ <div class="text-center pt-4">
+ <table class="table table-hover border border-2 border-success">
+ <thead class="border border-2 border-success border-bottom">
+ <tr>
+ <th scope="col">ลำดับ</th>
+ <th scope="col">ตึก</th>
+ <th scope="col">ชั้น</th>
+ <th scope="col">ห้อง</th>
+ <th scope="col">ค่าธรรมเนียม</th>
+ <th scope="col">ค่าน้ำประปา</th>
+ <th scope="col">ค่าไฟฟ้า</th>
+ <th scope="col">ค่าไฟฟ้าส่วนกลาง</th>
+ <th scope="col">ค่าบำรุงลิฟท์</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>1</td>
+ <td>2</td>
+ <td>3</td>
+ <td>20,000</td>
+ <td>8,000</td>
+ <td>20,000</td>
+ <td>8,000</td>
+ <td>20,000</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div
+ class="tab-pane fade"
+ id="profile"
+ role="tabpanel"
+ aria-labelledby="profile-tab"
+ >
+ <div class="d-flex justify-content-end pt-4">
+ <MaterialButton size="lg" class="btn-icon" style="margin-right: -30px">
+ <div class="d-flex align-items-center">
+ <span style="margin-right: 5px">บันทึก</span>
+ <img
+ src="../../assets/img/pdf.png"
+ alt="title"
+ loading="lazy"
+ width="40"
+ />
+ </div>
+ </MaterialButton>
+ <MaterialButton size="lg" class="btn-icon">
+ <div class="d-flex align-items-center">
+ <span style="margin-right: 5px">บันทึก</span>
+ <img
+ src="../../assets/img/excel.png"
+ alt="title"
+ loading="lazy"
+ width="40"
+ />
+ </div>
+ </MaterialButton>
+ </div>
+ <div class="text-center pt-4">
+ <table class="table table-hover border border-2 border-success">
+ <thead class="border border-2 border-success border-bottom">
+ <tr>
+ <th scope="col">ลำดับ</th>
+ <th scope="col">ตึก</th>
+ <th scope="col">ชั้น</th>
+ <th scope="col">ห้อง</th>
+ <th scope="col">ค่าบำรุงฯ</th>
+ <th scope="col">ค่าประกัน</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>1</td>
+ <td>2</td>
+ <td>3</td>
+ <td>20,000</td>
+ <td>8,000</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div
+ class="tab-pane fade"
+ id="contact"
+ role="tabpanel"
+ aria-labelledby="contact-tab"
+ >
+ <div class="d-flex justify-content-end pt-4">
+ <MaterialButton size="lg" class="btn-icon" style="margin-right: -30px">
+ <div class="d-flex align-items-center">
+ <span style="margin-right: 5px">บันทึก</span>
+ <img
+ src="../../assets/img/pdf.png"
+ alt="title"
+ loading="lazy"
+ width="40"
+ />
+ </div>
+ </MaterialButton>
+ <MaterialButton size="lg" class="btn-icon">
+ <div class="d-flex align-items-center">
+ <span style="margin-right: 5px">บันทึก</span>
+ <img
+ src="../../assets/img/excel.png"
+ alt="title"
+ loading="lazy"
+ width="40"
+ />
+ </div>
+ </MaterialButton>
+ </div>
+ <div class="text-center pt-4">
+ <table class="table table-hover border border-2 border-success">
+ <thead class="border border-2 border-success border-bottom">
+ <tr>
+ <th scope="col">ลำดับ</th>
+ <th scope="col">กก.</th>
+ <th scope="col">บก.</th>
+ <th scope="col">ข้อมูลระดับ บช.</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/src/views/Restroom/DetailRoomPage.vue b/src/views/Restroom/DetailRoomPage.vue
index 0808ccb..a30aaf8 100644
--- a/src/views/Restroom/DetailRoomPage.vue
+++ b/src/views/Restroom/DetailRoomPage.vue
@@ -1,40 +1,92 @@
<script>
-
//image
import vueMkHeader from "@/assets/img/bg.jpg";
//material components
-// import MaterialInput from "@/components/MaterialInput.vue";
-// import MaterialButton from "@/components/MaterialButton.vue";
+import MaterialInput from "@/components/MaterialInput.vue";
+import MaterialButton from "@/components/MaterialButton.vue";
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
-
+const userlist = [
+ {
+ dataIndex: "1",
+ firstName: "สมชาย",
+ lastName: "แสงทอง",
+ Affiliation: "บก", //สังกัด
+ rank: "ร้อยตรี", //ยศ
+ idcard: "134044411441122",
+ phone: "0325647846",
+ ContractDate: "12/11/2566", //สังกัด
+ Lengthofstay: "3 เดือน", //ยศ
+ InsuranceMoney: "10,000",
+ Status: "รอคิว",
+ },
+ {
+ dataIndex: "2",
+ firstName: "สมชัย",
+ lastName: "แสงสุข",
+ Affiliation: "กก", //สังกัด
+ rank: "ร้อยตรี", //ยศ
+ idcard: "134044411441178",
+ phone: "0325647845",
+ ContractDate: "12/11/2566", //สังกัด
+ Lengthofstay: "3 เดือน", //ยศ
+ InsuranceMoney: "10,000",
+ Status: "รอคิว",
+ },
+];
export default {
components: {
- // MaterialInput,
- // MaterialButton,
+ MaterialInput,
+ MaterialButton,
Breadcrumbs,
},
setup() {
return {
vueMkHeader,
+ userlist,
};
},
data() {
return {
selectedColor: "",
- statusedit: false
+ statusedit: false,
+ mode: "",
+ id: "",
+ options: [
+ { label: "มานพ", value: "มานพ" },
+ { label: "วิชัย", value: "วิชัย" },
+ { label: "ธนาพร", value: "ธนาพร" },
+ { label: "มนตรี", value: "มนตรี" },
+ ],
+ selectedColor: "",
+ firstName: "",
+ lastName: "",
+ Affiliation: "", //สังกัด
+ rank: "", //ยศ
+ idcard: "",
+ phone: "",
+ old: "",
+ birthday: "",
};
},
- created(){
- console.log(this.$route.query.mode);
- let mode = this.$route.query.mode
- mode == "add" ? this.statusedit = false : this.statusedit = true
+ created() {
+ this.mode = this.$route.query.mode;
+ if (this.$route.params.id) {
+ this.id = this.$route.params.id;
+ }
+ this.mode == "add" ? (this.statusedit = false) : (this.statusedit = true);
// this.$route.query
},
-
-
+ methods: {
+ gotoAction() {
+ if (this.mode == "edit") {
+ this.$router.push({ path: `/room/update/${this.id}` });
+ } else {
+ this.$router.push({ path: `/addUserRoom` });
+ }
+ },
+ },
};
-
</script>
<template>
<Header>
@@ -66,7 +118,22 @@ export default {
/>
</div>
<!-- d-flex justify-content-between -->
- <h4>รายละเอียดห้องพัก</h4>
+ <div class="d-flex justify-content-between align-items-center">
+ <h4>รายละเอียดห้องพัก</h4>
+ <div v-if="mode == 'edit'">
+ <MaterialButton variant="gradient" color="success" @click="gotoAction()"
+ >แก้ไขค่าใช้จ่ายประจำเดือน</MaterialButton
+ >
+ </div>
+ <!-- <div v-if="mode == 'add'">
+ <MaterialButton
+ variant="gradient"
+ color="success"
+ @click="gotoAction()"
+ >เพิ่มผู้เช่าห้องพัก</MaterialButton
+ >
+ </div> -->
+ </div>
<div class="row pt-4">
<div class="card mb-3">
<div class="row g-0">
@@ -81,7 +148,7 @@ export default {
<div class="col-md-8">
<div class="card-body">
<div class="row" v-if="statusedit == true">
- <h5 class="card-title">รายละเอียดผู้เช่า</h5>
+ <h5 class="card-title">รายละเอียดผู้เช่า</h5>
<div class="col-5">
<p class="card-text">ชือ : มานะ</p>
<p class="card-text">สถานะห้อง : ไม่ว่าง</p>
@@ -100,7 +167,7 @@ export default {
</div>
</div>
<div class="row">
- <div class="col-5" >
+ <div class="col-5">
<h5 class="card-title pt-2">รายละเอียดห้องพัก</h5>
<p class="card-text">ประเภทห้องพัก : ช๓</p>
<p class="card-text">มิเตอร์น้ำ/ไฟ : 745/546</p>
@@ -120,11 +187,176 @@ export default {
</div>
</div>
</div>
+ <div class="row pt-4">
+ <div class="card mb-3" v-if="mode == 'add'">
+ <h5>ลำดับคิว</h5>
+ <div class="text-end">
+ <MaterialButton
+ variant="gradient"
+ color="success"
+ data-bs-toggle="modal"
+ data-bs-target="#seleteUserBackdrop"
+ >เพิ่มผู้เช่าลงคิว</MaterialButton
+ >
+ </div>
+ <div class="text-center pt-4 table-responsive">
+ <table class="table border border-2 border-success">
+ <thead class="border border-2 border-success border-bottom">
+ <tr>
+ <th scope="col">ลำดับ</th>
+ <th scope="col">ชื่อ</th>
+ <th scope="col">สกุล</th>
+ <th scope="col">สังกัด</th>
+ <th scope="col">ยศ</th>
+ <th scope="col">เลขบัตรประชาชน</th>
+ <th scope="col">เบอร์ติดต่อ</th>
+ <th scope="col"></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="(item, index) in userlist" :key="index">
+ <th scope="row">{{ index + 1 }}</th>
+ <td>{{ item.firstName }}</td>
+ <td>{{ item.lastName }}</td>
+ <td>{{ item.Affiliation }}</td>
+ <td>{{ item.rank }}</td>
+ <td>{{ item.idcard }}</td>
+ <td>{{ item.phone }}</td>
+ <td>
+ <MaterialButton
+ variant="gradient"
+ color="success"
+ data-bs-toggle="modal"
+ data-bs-target="#contractBackdrop"
+ >เพิ่มผู้เช่าห้องพัก</MaterialButton
+ >
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
</div>
</div>
+ <!-- modal -->
+ <div
+ class="modal fade"
+ id="seleteUserBackdrop"
+ data-bs-backdrop="static"
+ data-bs-keyboard="false"
+ tabindex="-1"
+ aria-labelledby="staticBackdropLabel"
+ aria-hidden="true"
+ >
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="staticBackdropLabel">เพิ่มผู้เช่าลงคิว</h5>
+ <button
+ type="button"
+ class="btn-close"
+ data-bs-dismiss="modal"
+ aria-label="Close"
+ ></button>
+ </div>
+ <div class="modal-body">
+ <div>
+ <div class="mb-3">
+ <label>ชื่อผู้เช่า</label>
+ <v-select :options="options" v-model="selectedColor"></v-select>
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+ ปิดหน้าต่าง
+ </button>
+ <MaterialButton
+ variant="gradient"
+ color="success"
+ @click="submitForm"
+ html-type="submit"
+ >บันทึก</MaterialButton
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div
+ class="modal fade"
+ id="contractBackdrop"
+ data-bs-backdrop="static"
+ data-bs-keyboard="false"
+ tabindex="-1"
+ aria-labelledby="staticBackdropLabel"
+ aria-hidden="true"
+ >
+ <div class="modal-dialog modal-dialog-centered">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="staticBackdropLabel">เพิ่มรายละเอียดสัญญา</h5>
+ <button
+ type="button"
+ class="btn-close"
+ data-bs-dismiss="modal"
+ aria-label="Close"
+ ></button>
+ </div>
+ <div class="modal-body">
+ <div>
+ <div class="mb-3">
+ <MaterialInput
+ name="contract"
+ :value="contract"
+ @input="(event) => (contract = event.target.value)"
+ class="input-group-static"
+ label="วันทำสัญญา"
+ type="text"
+ placeholder="วันทำสัญญา"
+ />
+ </div>
+ <div class="mb-3">
+ <MaterialInput
+ :value="Checkintime"
+ @input="(event) => (Checkintime = event.target.value)"
+ class="input-group-static"
+ label="ระยะเวลาที่เข้าพัก"
+ type="text"
+ placeholder="ระยะเวลาที่เข้าพัก"
+ />
+ </div>
+ <div class="mb-3">
+ <MaterialInput
+ :value="insurance"
+ @input="(event) => (Affiliation = event.target.value)"
+ class="input-group-static"
+ label="เงินค่าประกัน"
+ type="text"
+ placeholder="เงินค่าประกัน"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+ ปิดหน้าต่าง
+ </button>
+ <MaterialButton
+ variant="gradient"
+ color="success"
+ @click="submitForm"
+ html-type="submit"
+ >บันทึก</MaterialButton
+ >
+ </div>
+ </div>
+ </div>
+ </div>
</section>
</template>
<style>
@@ -141,4 +373,3 @@ export default {
color: #fff;
}
</style>
-
\ No newline at end of file
diff --git a/src/views/Restroom/RoomView.vue b/src/views/Restroom/RoomView.vue
index fa4a317..86c5c0b 100644
--- a/src/views/Restroom/RoomView.vue
+++ b/src/views/Restroom/RoomView.vue
@@ -1,6 +1,7 @@
<script>
import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue";
+import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
import vueMkHeader from "@/assets/img/bg.jpg";
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
import roomData from "@/assets/dataJson/rooms.json";
@@ -28,85 +29,17 @@ const NoRoom = [
{ title: "ชั้น 7" },
];
-const landingColumns = [
- {
- title: "ห้อง 1",
- dataIndex: "1",
- status: true,
- },
- {
- title: "ห้อง 2",
- dataIndex: "2",
- status: false,
- },
- {
- title: "ห้อง 3",
- dataIndex: "3",
- status: true,
- },
- {
- title: "ห้อง 4",
- dataIndex: "4",
- status: true,
- },
- {
- title: "ห้อง 5",
- dataIndex: "5",
- status: false,
- },
- {
- title: "ห้อง 6",
- dataIndex: "6",
- status: false,
- },
- {
- title: "ห้อง 7",
- dataIndex: "7",
- status: true,
- },
- {
- title: "ห้อง 8",
- dataIndex: "8",
- status: false,
- },
- {
- title: "ห้อง 9",
- dataIndex: "9",
- status: false,
- },
- {
- title: "ห้อง 10",
- dataIndex: "10",
- status: false,
- },
- {
- title: "ห้อง 11",
- dataIndex: "11",
- status: true,
- },
- {
- title: "ห้อง 12",
- dataIndex: "12",
- status: false,
- },
- {
- title: "ห้อง 13",
- dataIndex: "13",
- status: false,
- },
-];
-
export default {
components: {
MaterialInput,
MaterialButton,
Breadcrumbs,
+ MaterialCheckbox,
},
setup() {
return {
listRoom,
NoRoom,
- landingColumns,
vueMkHeader,
roomData,
};
@@ -125,15 +58,18 @@ export default {
selectedColor: "",
};
},
- created(){
+ created() {
// this.$route.query
},
methods: {
- gotodetail(id,index){
- let action
- index == true ? action = 'edit' : action = 'add'
+ gotodetail(id, index) {
+ console.log(index);
+ let action;
+ if (index == "unavailable") action = "edit";
+ if (index == "waiting") action = "add";
+ if (index == "free") action = "add";
this.$router.push({ path: `/room/detail/${id}`, query: { mode: action } });
- }
+ },
},
};
</script>
@@ -228,64 +164,45 @@ export default {
</p>
<div class="collapse show" id="collapseExample" aria-expanded="true">
<div>
+ <div class="d-flex justify-content-end">
+ <MaterialCheckbox id="terms" checked>
+ <a href="javascript:;" class="text-success font-weight-bolder">
+ ว่าง</a
+ >
+ </MaterialCheckbox>
+ <MaterialCheckbox id="terms" >
+ <a href="javascript:;" class="text-danger font-weight-bolder">
+ ไม่ว่าง</a
+ >
+ </MaterialCheckbox>
+ <MaterialCheckbox id="terms" >
+ <a href="javascript:;" class=" font-weight-bolder" style="color: #fb8c00">
+ รอซ่อม</a
+ >
+ </MaterialCheckbox>
+ <MaterialCheckbox id="terms" >
+ <a href="javascript:;" class="font-weight-bolder" style="color: #ffca28">
+ รอคืนห้อง</a
+ >
+ </MaterialCheckbox>
+ </div>
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
<div class="col" v-for="(item, index) in roomData" :key="index">
<div
class="card mb-2"
- v-bind:class="{
- 'bg-red': item?.status,
- 'bg-green': !item?.status,
+ :class="{
+ 'bg-red': item?.status == 'unavailable',
+ 'bg-green': item?.status == 'free',
+ 'bg-warning': item?.status == 'waiting',
+ 'bg-return': item?.status == 'return',
}"
:style="{ width: `110px` }"
>
<div class="card-body">
- <div
- style="
- text-align: right;
- margin-top: -10px;
- margin-right: -10px;
- "
- >
- <a
- v-if="item?.status"
- :href="`/room/update/${item?.dataIndex}`"
- class="card-link"
- ><span
- v-if="item?.status"
- class="material-icons"
- style="color: #fff"
- >
- edit
- </span>
- <span
- v-if="!item?.status"
- class="material-icons"
- style="color: #fff"
- >
- add
- </span>
- </a>
- <!-- data-bs-toggle="modal"
- data-bs-target="#staticBackdrop" -->
- <a
- :href="`/addUserRoom`"
- style="cursor: pointer"
- v-if="!item?.status"
- class="card-link"
- >
- <span
- v-if="!item?.status"
- class="material-icons"
- style="color: #fff"
- >
- add
- </span>
- </a>
- </div>
<p class="card-title">
<a
style="cursor: pointer"
- @click="gotodetail(item?.dataIndex,item?.status)"
+ @click="gotodetail(item?.dataIndex, item?.status)"
class="text-white"
>{{ item?.title }}</a
>
@@ -345,8 +262,12 @@ export default {
background: #d24c4a !important;
color: #fff;
}
-.bg-waring {
- background: #d1d3d5 !important;
+.bg-warning {
+ background: #fb8c00 !important;
+ color: #fff;
+}
+.bg-return {
+ background: #ffca28 !important;
color: #fff;
}
</style>
diff --git a/src/views/RoomLayout/RoomLayoutView.vue b/src/views/RoomLayout/RoomLayoutView.vue
index cd4124e..c28e91d 100644
--- a/src/views/RoomLayout/RoomLayoutView.vue
+++ b/src/views/RoomLayout/RoomLayoutView.vue
@@ -162,33 +162,39 @@ export default {
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ผังห้องพัก' }]"
/>
</div>
- <div class="text-end">
- <MaterialButton
+ </div>
+ <div class="d-flex justify-content-end align-items-center">
+ <MaterialInput
+ class="input-group-dynamic w-30 "
+ icon="search"
+ type="text"
+ placeholder="Search"
+ />
+ <MaterialButton
+ style="margin-left: 20px;"
variant="gradient"
color="success"
data-bs-toggle="modal"
data-bs-target="#Addroomplan"
>สร้างผังห้อง</MaterialButton
>
- </div>
- </div>
-
+ </div>
<div class="text-center pt-4">
<table class="table table-hover border border-2 border-success">
<thead class="border border-2 border-success border-bottom">
<tr>
<th scope="col">ลำดับ</th>
- <th scope="col">อาคาร</th>
<th scope="col">ตึก</th>
<th scope="col">จำนวนชั้น</th>
+ <th scope="col">จำนวนห้อง</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
- <td>อาคาร1</td>
<td>ตึก1</td>
<td>3</td>
+ <td>20</td>
</tr>
</tbody>
</table>
@@ -220,17 +226,7 @@ export default {
</div>
<div class="modal-body">
<div>
- <div class="mb-3">
- <MaterialInput
- name="Edifice"
- :value="Edifice"
- @input="(event) => (Edifice = event.target.value)"
- class="input-group-static"
- label="อาคาร"
- type="text"
- placeholder="อาคาร"
- />
- </div>
+
<div class="mb-3">
<MaterialInput
:value="Building"
@@ -251,6 +247,17 @@ export default {
placeholder="จำนวนชั้น"
/>
</div>
+ <div class="mb-3">
+ <MaterialInput
+ name="Edifice"
+ :value="Edifice"
+ @input="(event) => (Edifice = event.target.value)"
+ class="input-group-static"
+ label="จำนวนห้อง"
+ type="text"
+ placeholder="จำนวนห้อง"
+ />
+ </div>
</div>
</div>
<div class="modal-footer">
diff --git a/src/views/Users/UserlistView.vue b/src/views/Users/UserlistView.vue
index f35d9e0..76fd15d 100644
--- a/src/views/Users/UserlistView.vue
+++ b/src/views/Users/UserlistView.vue
@@ -138,17 +138,23 @@ export default {
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
/>
</div>
- <div class="text-end">
- <MaterialButton
+ </div>
+ <div class="d-flex justify-content-end align-items-center">
+ <MaterialInput
+ class="input-group-dynamic w-30 "
+ icon="search"
+ type="text"
+ placeholder="Search"
+ />
+ <MaterialButton
+ style="margin-left: 20px;"
variant="gradient"
color="success"
data-bs-toggle="modal"
data-bs-target="#userBackdrop"
>เพิ่มสมาชิก</MaterialButton
>
- </div>
- </div>
-
+ </div>
<div class="text-center pt-4">
<table class="table border border-2 border-success">
<thead class="border border-2 border-success border-bottom">
@@ -170,8 +176,8 @@ export default {
<th scope="row">{{ index + 1 }}</th>
<td>{{ item.firstName }}</td>
<td>{{ item.lastName }}</td>
- <td>{{ item.old }}</td>
<td>{{ item.birthday }}</td>
+ <td>{{ item.old }}</td>
<td>{{ item.Affiliation }}</td>
<td>{{ item.rank }}</td>
<td>{{ item.idcard }}</td>
diff --git a/src/views/UtilitiesRoom/UtilitieView.vue b/src/views/UtilitiesRoom/UtilitieView.vue
index 2074fc5..ae2914f 100644
--- a/src/views/UtilitiesRoom/UtilitieView.vue
+++ b/src/views/UtilitiesRoom/UtilitieView.vue
@@ -197,7 +197,7 @@ export default {
aria-controls="home"
aria-selected="true"
>
- บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง ตร.
+ บันทึกค่าใช้จ่ายบ้านพัก ตร.
</button>
</li>
<li class="nav-item" role="presentation">
@@ -212,7 +212,7 @@ export default {
aria-controls="profile"
aria-selected="false"
>
- บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.
+ บันทึกค่าใช้จ่ายบ้านพัก บช.ตชด.
</button>
</li>
<li class="nav-item" role="presentation">
@@ -238,13 +238,20 @@ export default {
role="tabpanel"
aria-labelledby="home-tab"
>
- <div class="text-end pt-4">
+ <div class="d-flex justify-content-end align-items-center pt-4">
+ <MaterialInput
+ class="input-group-dynamic w-30"
+ icon="search"
+ type="text"
+ placeholder="Search"
+ />
<MaterialButton
+ style="margin-left: 20px"
variant="gradient"
color="success"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop11"
- >เพิ่มค่าใช้จ่ายบ้านพักส่วนกลาง ตร.</MaterialButton
+ >เพิ่มค่าใช้จ่ายบ้านพัก ตร.</MaterialButton
>
</div>
<div class="text-center pt-4">
@@ -284,13 +291,20 @@ export default {
role="tabpanel"
aria-labelledby="profile-tab"
>
- <div class="text-end pt-4">
+ <div class="d-flex justify-content-end align-items-center pt-4">
+ <MaterialInput
+ class="input-group-dynamic w-30"
+ icon="search"
+ type="text"
+ placeholder="Search"
+ />
<MaterialButton
+ style="margin-left: 20px"
variant="gradient"
color="success"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop12"
- >เพิ่มค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.</MaterialButton
+ >เพิ่มค่าใช้จ่ายบ้านพัก บช.ตชด.</MaterialButton
>
</div>
<div class="text-center pt-4">
@@ -324,8 +338,15 @@ export default {
role="tabpanel"
aria-labelledby="contact-tab"
>
- <div class="text-end pt-4">
+ <div class="d-flex justify-content-end align-items-center pt-4">
+ <MaterialInput
+ class="input-group-dynamic w-30"
+ icon="search"
+ type="text"
+ placeholder="Search"
+ />
<MaterialButton
+ style="margin-left: 20px"
variant="gradient"
color="success"
data-bs-toggle="modal"
@@ -355,7 +376,6 @@ export default {
</div>
</div>
</div>
-
</div>
</div>
</div>
@@ -375,7 +395,7 @@ export default {
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">
- บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง ตร.
+ บันทึกค่าใช้จ่ายบ้านพัก ตร. ประจำเดือนตุลาคม
</h5>
<button
type="button"
@@ -388,7 +408,10 @@ export default {
<div>
<div class="mb-3">
<label>ตึก</label>
- <v-select :options="optionsBuilding" v-model="selectedBuilding"></v-select>
+ <v-select
+ :options="optionsBuilding"
+ v-model="selectedBuilding"
+ ></v-select>
</div>
<div class="mb-3">
<label>ชั้น</label>
@@ -474,9 +497,9 @@ export default {
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
- <h5 class="modal-title" id="staticBackdropLabel">
- เพิ่มค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.
- </h5>
+ <h6 class="modal-title" id="staticBackdropLabel">
+ เพิ่มค่าใช้จ่ายบ้านพัก บช.ตชด. ประจำเดือนตุลาคม
+ </h6>
<button
type="button"
class="btn-close"
@@ -488,7 +511,10 @@ export default {
<div>
<div class="mb-3">
<label>ตึก</label>
- <v-select :options="optionsBuilding" v-model="selectedBuilding"></v-select>
+ <v-select
+ :options="optionsBuilding"
+ v-model="selectedBuilding"
+ ></v-select>
</div>
<div class="mb-3">
<label>ชั้น</label>
@@ -544,7 +570,7 @@ export default {
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
- <h5 class="modal-title" id="staticBackdropLabel">เพิ่มรายงาน</h5>
+ <h5 class="modal-title" id="staticBackdropLabel">เพิ่มรายงาน ประจำเดือนตุลาคม</h5>
<button
type="button"
class="btn-close"