mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 04:04:22 +08:00
update 55
This commit is contained in:
kamoa457
parent
e4001f6e86
commit
33704afbd9
@ -9637,6 +9637,11 @@ textarea.form-control-lg {
|
||||
color: #fb8c00 !important;
|
||||
}
|
||||
|
||||
.text-return {
|
||||
color: #ffca28 !important;
|
||||
}
|
||||
|
||||
|
||||
.text-danger {
|
||||
color: #F44335 !important;
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
]
|
||||
BIN
src/assets/img/excel.png
Normal file
BIN
src/assets/img/excel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/img/pdf.png
Normal file
BIN
src/assets/img/pdf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user