mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 04:04:22 +08:00
update code all
This commit is contained in:
kamoa457
parent
33704afbd9
commit
f06af90d30
@ -9638,7 +9638,7 @@ textarea.form-control-lg {
|
||||
}
|
||||
|
||||
.text-return {
|
||||
color: #ffca28 !important;
|
||||
color: #deb70d !important;
|
||||
}
|
||||
|
||||
|
||||
@ -9730,10 +9730,19 @@ textarea.form-control-lg {
|
||||
background-color: #344767 !important;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
.bg-white {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.bg-return{
|
||||
background-color: #deb70d !important;
|
||||
}
|
||||
|
||||
.bg-red{
|
||||
background-color: #d24c4a !important;
|
||||
}
|
||||
|
||||
|
||||
.bg-body {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
BIN
src/assets/img/queue.png
Normal file
BIN
src/assets/img/queue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@ -32,6 +32,7 @@ import UtilitiesRoom from "../views/UtilitiesRoom/UtilitieView.vue"
|
||||
import addUserRoom from "../views/Restroom/AddRoom.vue"
|
||||
import Reports from "../views/Reports/ReportlistView.vue"
|
||||
import searchFilter from "../views/SearchAll/SearchView.vue"
|
||||
import Queue from "../views/Queue/QueueView.vue"
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
@ -75,6 +76,11 @@ const router = createRouter({
|
||||
name: "searchfilter",
|
||||
component: searchFilter,
|
||||
},
|
||||
{
|
||||
path: "/queue",
|
||||
name: "queue",
|
||||
component: Queue,
|
||||
},
|
||||
{
|
||||
path: '/room/detail/:id',
|
||||
name: 'DetailRoom',
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<p class="card-title" style="font-weight: bold; color: #000">ทะเบียน</p>
|
||||
<img src="../../../assets/img/register.png" alt="title" loading="lazy" class="w-50" />
|
||||
<RouterLink :to="{ name: 'users' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-primary mt-4">ทะเบียน</a>
|
||||
<a href="#" class="btn btn-success mt-4">ทะเบียน</a>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
@ -22,7 +22,7 @@
|
||||
<p class="card-title" style="font-weight: bold; color: #000">สถานะห้องพัก</p>
|
||||
<img src="../../../assets/img/status.png" alt="title" loading="lazy" class="w-50" />
|
||||
<RouterLink :to="{ name: 'room' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-primary mt-4">สถานะห้องพัก</a>
|
||||
<a href="#" class="btn btn-success mt-4">สถานะห้องพัก</a>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,7 +33,7 @@
|
||||
<p class="card-title" style="font-weight: bold; color: #000">ผังห้องพัก</p>
|
||||
<img src="../../../assets/img/layout.png" alt="title" loading="lazy" class="w-50" />
|
||||
<RouterLink :to="{ name: 'layout' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-primary mt-4">ผังห้องพัก</a>
|
||||
<a href="#" class="btn btn-success mt-4">ผังห้องพัก</a>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
@ -44,29 +44,29 @@
|
||||
<p class="card-title" style="font-weight: bold; color: #000">ค่าสาธารณุปโภค</p>
|
||||
<img src="../../../assets/img/utilities.png" alt="title" loading="lazy" class="w-50" />
|
||||
<RouterLink :to="{ name: 'utilities' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-primary mt-4">ค่าสาธารณุปโภค</a>
|
||||
<a href="#" class="btn btn-success mt-4">ค่าสาธารณุปโภค</a>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-sm-2">
|
||||
<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>
|
||||
<img src="../../../assets/img/seo.png" alt="title" loading="lazy" class="w-50" />
|
||||
<RouterLink :to="{ name: 'searchfilter' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-primary mt-4">ระบบค้นหา</a>
|
||||
<p class="card-title" style="font-weight: bold; color: #000">ระบบคิว</p>
|
||||
<img src="../../../assets/img/queue.png" alt="title" loading="lazy" class="w-50" />
|
||||
<RouterLink :to="{ name: 'queue' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-success mt-4">ระบบคิว</a>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</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>
|
||||
<img src="../../../assets/img/result.png" alt="title" loading="lazy" class="w-50" />
|
||||
<RouterLink :to="{ name: 'reports' }" class="dropdown-item border-radius-md">
|
||||
<a href="#" class="btn btn-primary mt-4">ระบบเรียกรายงาน</a>
|
||||
<a href="#" class="btn btn-success mt-4">ระบบเรียกรายงาน</a>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
260
src/views/Queue/QueueView.vue
Normal file
260
src/views/Queue/QueueView.vue
Normal file
@ -0,0 +1,260 @@
|
||||
<script>
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
|
||||
import vueMkHeader from "@/assets/img/bg.jpg";
|
||||
|
||||
const listRoom = [
|
||||
{ title: "ตึก 1" },
|
||||
{ title: "ตึก 2" },
|
||||
{ title: "ตึก 3" },
|
||||
{ title: "ตึก 4" },
|
||||
{ title: "ตึก 5" },
|
||||
{ title: "ตึก 6" },
|
||||
{ title: "ตึก 7" },
|
||||
];
|
||||
|
||||
const NoRoom = [
|
||||
{ title: "ชั้น 1" },
|
||||
{ title: "ชั้น 2" },
|
||||
{ title: "ชั้น 3" },
|
||||
{ title: "ชั้น 4" },
|
||||
{ title: "ชั้น 5" },
|
||||
{ title: "ชั้น 6" },
|
||||
{ title: "ชั้น 7" },
|
||||
];
|
||||
|
||||
const userlist = [
|
||||
{
|
||||
dataIndex: "1",
|
||||
firstName: "สมชาย",
|
||||
lastName: "แสงทอง",
|
||||
Affiliation: "บก", //สังกัด
|
||||
rank: "ร้อยตรี", //ยศ
|
||||
old: "32",
|
||||
birthday: "04/03/2534",
|
||||
idcard: "134044411441122",
|
||||
phone: "0325647846",
|
||||
},
|
||||
{
|
||||
dataIndex: "2",
|
||||
firstName: "สมชัย",
|
||||
lastName: "แสงสุข",
|
||||
Affiliation: "กก", //สังกัด
|
||||
rank: "ร้อยตรี", //ยศ
|
||||
old: "32",
|
||||
birthday: "14/07/2534",
|
||||
idcard: "134044411441178",
|
||||
phone: "0325647845",
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MaterialInput,
|
||||
MaterialButton,
|
||||
Breadcrumbs,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
listRoom,
|
||||
NoRoom,
|
||||
userlist,
|
||||
vueMkHeader,
|
||||
};
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: { name: "Vue.js", language: "JavaScript" },
|
||||
options: [
|
||||
{ label: "Vue.js", value: "JavaScript" },
|
||||
{ label: "Rails", value: "Ruby" },
|
||||
{ label: "Sinatra", value: "Ruby" },
|
||||
{ label: "Laravel", value: "PHP" },
|
||||
{ label: "Phoenix", value: "Elixir" },
|
||||
],
|
||||
selectedColor: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
Affiliation: "", //สังกัด
|
||||
rank: "", //ยศ
|
||||
idcard: "",
|
||||
phone: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selectedColor: function (newValue) {
|
||||
// this.updateColor(newValue)
|
||||
console.log(newValue);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changedLabel(event) {
|
||||
console.log(event);
|
||||
// this.selected = event;
|
||||
},
|
||||
|
||||
submitForm() {
|
||||
let body = {
|
||||
firstName: this.firstName,
|
||||
lastName: this.lastName,
|
||||
Affiliation: this.Affiliation,
|
||||
rank: this.rank,
|
||||
idcard: this.idcard,
|
||||
phone: this.phone,
|
||||
};
|
||||
// let b = []
|
||||
// b.push(body)
|
||||
this.userlist.push(body);
|
||||
console.log(this.userlist);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<Header>
|
||||
<div
|
||||
class="page-header min-vh-45"
|
||||
:style="`background-image: url(${vueMkHeader})`"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-7 text-center mx-auto position-relative">
|
||||
<h1 class="pt-3 mt-n5 me-2 head-text">ระบบคิว</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Header>
|
||||
<section>
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ระบบคิว' }]"
|
||||
/>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end align-items-baseline">
|
||||
<label style="margin-right: 20px">ค้นหาชื่อ </label>
|
||||
<MaterialInput
|
||||
style="margin-right: 20px"
|
||||
class="input-group-dynamic w-30"
|
||||
icon="search"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
/>
|
||||
<MaterialButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#seleteUserBackdrop"
|
||||
>เพิ่มผู้เช่าลงคิว</MaterialButton
|
||||
>
|
||||
</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>
|
||||
</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.birthday }}</td>
|
||||
<td>{{ item.old }}</td>
|
||||
<td>{{ item.Affiliation }}</td>
|
||||
<td>{{ item.rank }}</td>
|
||||
<td>{{ item.idcard }}</td>
|
||||
<td>{{ item.phone }}</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
</section>
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
</style>
|
||||
@ -132,7 +132,6 @@ export default {
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[
|
||||
@ -141,7 +140,6 @@ export default {
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
|
||||
@ -67,6 +67,7 @@ export default {
|
||||
phone: "",
|
||||
old: "",
|
||||
birthday: "",
|
||||
installments: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -105,7 +106,7 @@ export default {
|
||||
</div>
|
||||
</Header>
|
||||
<section>
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6 pt-6">
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div>
|
||||
@ -118,34 +119,34 @@ export default {
|
||||
/>
|
||||
</div>
|
||||
<!-- d-flex justify-content-between -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex justify-content-between align-items-baseline">
|
||||
<h4>รายละเอียดห้องพัก</h4>
|
||||
<div v-if="mode == 'edit'">
|
||||
<MaterialButton variant="gradient" color="success" @click="gotoAction()"
|
||||
>แก้ไขค่าใช้จ่ายประจำเดือน</MaterialButton
|
||||
>แก้ไขรายละเอียดห้อง</MaterialButton
|
||||
>
|
||||
<MaterialButton
|
||||
style="margin-left: 20px; margin-right: 10px"
|
||||
variant="gradient"
|
||||
color="warning"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#Returntheroom"
|
||||
>คืนห้อง</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">
|
||||
<div class="col-md-4">
|
||||
<!-- <div class="col-md-4">
|
||||
<img
|
||||
width="300"
|
||||
src="../../assets/img/team-4.jpg"
|
||||
class="img-fluid rounded-start"
|
||||
alt="..."
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
</div> -->
|
||||
<div class="col-md-10">
|
||||
<div class="card-body">
|
||||
<div class="row" v-if="statusedit == true">
|
||||
<h5 class="card-title">รายละเอียดผู้เช่า</h5>
|
||||
@ -173,13 +174,6 @@ export default {
|
||||
<p class="card-text">มิเตอร์น้ำ/ไฟ : 745/546</p>
|
||||
<p class="card-text">สภาพห้อง : ปกติ</p>
|
||||
</div>
|
||||
<div class="col-7" v-if="statusedit == true">
|
||||
<h5 class="card-title pt-2">รายละเอียดค่าสาธารณุปโภค</h5>
|
||||
<p class="card-text">ค่าน้ำประปา : 120</p>
|
||||
<p class="card-text">ค่าไฟฟ้า : 700</p>
|
||||
<p class="card-text">ค่าไฟฟ้าส่วนกลาง : 100</p>
|
||||
<p class="card-text">ค่าบำรุงลิฟท์ : 200</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <p class="card-text">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
@ -189,16 +183,6 @@ export default {
|
||||
</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">
|
||||
@ -242,50 +226,6 @@ export default {
|
||||
</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"
|
||||
@ -330,16 +270,119 @@ export default {
|
||||
placeholder="ระยะเวลาที่เข้าพัก"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Maintenance"
|
||||
@input="(event) => (Maintenance = 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)"
|
||||
@input="(event) => (insurance = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="เงินค่าประกัน"
|
||||
type="text"
|
||||
placeholder="เงินค่าประกัน"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="installments"
|
||||
@input="(event) => (installments = 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>
|
||||
|
||||
<div
|
||||
class="modal fade"
|
||||
id="Returntheroom"
|
||||
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">
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineRadio1"
|
||||
value="option1"
|
||||
/>
|
||||
<label class="form-check-label" for="inlineRadio1">รอคืนห้อง</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineRadio2"
|
||||
value="option2"
|
||||
/>
|
||||
<label class="form-check-label" for="inlineRadio2">รอซ่อม</label>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
@ -6,28 +6,9 @@ import vueMkHeader from "@/assets/img/bg.jpg";
|
||||
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
|
||||
import roomData from "@/assets/dataJson/rooms.json";
|
||||
// import posts from "../posts.json";
|
||||
|
||||
// import axios from "axios";
|
||||
// const fs = require('fs');
|
||||
const listRoom = [
|
||||
{ title: "ตึก 1" },
|
||||
{ title: "ตึก 2" },
|
||||
{ title: "ตึก 3" },
|
||||
{ title: "ตึก 4" },
|
||||
{ title: "ตึก 5" },
|
||||
{ title: "ตึก 6" },
|
||||
{ title: "ตึก 7" },
|
||||
];
|
||||
|
||||
const NoRoom = [
|
||||
{ title: "ชั้น 1" },
|
||||
{ title: "ชั้น 2" },
|
||||
{ title: "ชั้น 3" },
|
||||
{ title: "ชั้น 4" },
|
||||
{ title: "ชั้น 5" },
|
||||
{ title: "ชั้น 6" },
|
||||
{ title: "ชั้น 7" },
|
||||
];
|
||||
const NoRoom = [{ title: "ชั้น 1" }, { title: "ชั้น 2" }, { title: "ชั้น 3" }];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -38,7 +19,6 @@ export default {
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
listRoom,
|
||||
NoRoom,
|
||||
vueMkHeader,
|
||||
roomData,
|
||||
@ -55,21 +35,64 @@ export default {
|
||||
{ label: "Laravel", value: "PHP" },
|
||||
{ label: "Phoenix", value: "Elixir" },
|
||||
],
|
||||
listRoom: [
|
||||
{ label: "ตึก 1", value: "ตึก 1" },
|
||||
{ label: "ตึก 2", value: "ตึก 2" },
|
||||
{ label: "ตึก 3", value: "ตึก 3" },
|
||||
{ label: "ตึก 4", value: "ตึก 4" },
|
||||
{ label: "ตึก 5", value: "ตึก 5" },
|
||||
{ label: "ตึก 6", value: "ตึก 6" },
|
||||
{ label: "ตึก 7", value: "ตึก 7" },
|
||||
],
|
||||
selectedColor: "",
|
||||
statusfree: false,
|
||||
statusreturn: false,
|
||||
statuseunavailable: false,
|
||||
statusewaiting: false,
|
||||
selectedlistRoom: "ตึก 1",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.$route.query
|
||||
},
|
||||
|
||||
methods: {
|
||||
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 } });
|
||||
},
|
||||
onChangeEvent(e) {
|
||||
if (e == "free") {
|
||||
if (statusfree) {
|
||||
const free = this.roomData.filter((tagfree) => tagfree.status === "free");
|
||||
console.log(free);
|
||||
}
|
||||
} else if (e == "unavailable") {
|
||||
if (statuseunavailable) {
|
||||
const statuseunavailable = this.roomData.filter(
|
||||
(tagun) => tagun.status === "unavailable"
|
||||
);
|
||||
console.log(statuseunavailable);
|
||||
}
|
||||
} else if (e == "waiting") {
|
||||
if (statusrewaiting) {
|
||||
const waiting = this.roomData.filter(
|
||||
(tagwaiting) => tagwaiting.status === "waiting"
|
||||
);
|
||||
console.log(waiting);
|
||||
}
|
||||
} else if (e == "return") {
|
||||
if (statusrewaiting) {
|
||||
const returns = this.roomData.filter(
|
||||
(tagreturn) => tagreturn.status === "return"
|
||||
);
|
||||
console.log(returns);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -90,7 +113,7 @@ export default {
|
||||
</div>
|
||||
</Header>
|
||||
<section>
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6 pt-6">
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<!-- d-flex justify-content-between -->
|
||||
@ -99,46 +122,36 @@ export default {
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'สถานะห้องพัก' }]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row pt-4">
|
||||
<div class="col-8">
|
||||
<div class="nav-item dropdown dropdown-hover mx-2 w-45">
|
||||
<a
|
||||
role="button"
|
||||
class="nav-link ps-2 d-flex cursor-pointer align-items-center"
|
||||
id="dropdownMenuPages"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="material-icons opacity-6 me-2 text-md">home</i>
|
||||
เลือกตึก
|
||||
</a>
|
||||
<div
|
||||
class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
|
||||
aria-labelledby="dropdownMenuPages"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-12 px-4 py-2">
|
||||
<div class="row">
|
||||
<div class="position-relative">
|
||||
<p
|
||||
class="dropdown-item border-radius-md"
|
||||
v-for="(item, index) in listRoom"
|
||||
:key="index"
|
||||
>
|
||||
<span>{{ item?.title }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row pt-4 align-items-baseline">
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<label>ค้นหาผู้เช่า</label>
|
||||
<div class=" d-flex justify-content-start align-items-baseline">
|
||||
<label class="w-30" >
|
||||
<i class="material-icons opacity-6 me-2 text-md">home</i>
|
||||
เลือกตึก</label
|
||||
>
|
||||
<v-select class="w-100" :options="listRoom" v-model="selectedlistRoom"></v-select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="d-flex justify-content-end align-items-baseline">
|
||||
<div class="d-flex">
|
||||
<MaterialCheckbox id="terms5" checked>
|
||||
<a href="javascript:;" class=" font-weight-bolder">
|
||||
รายตึก</a
|
||||
>
|
||||
</MaterialCheckbox>
|
||||
<MaterialCheckbox id="terms6">
|
||||
<a href="javascript:;" class=" font-weight-bolder">
|
||||
ตึกทั้งหมด</a
|
||||
>
|
||||
</MaterialCheckbox>
|
||||
</div>
|
||||
<label style="margin-right: 10px; margin-left: 20px"
|
||||
>ค้นหาชื่อหรือเลขห้อง
|
||||
</label>
|
||||
<MaterialInput
|
||||
class="input-group-dynamic w-100"
|
||||
class="input-group-dynamic w-50"
|
||||
icon="search"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
@ -148,65 +161,100 @@ export default {
|
||||
</div>
|
||||
|
||||
<div class="text-center pt-4">
|
||||
<!-- v-for="(item, index) in NoRoom" :key="index" -->
|
||||
<div>
|
||||
<p class="text-start mt-4">
|
||||
<MaterialButton
|
||||
variant="outline"
|
||||
<div class="d-flex justify-content-between align-items-baseline p-2">
|
||||
<h6>ตึก 1</h6>
|
||||
<div class="d-flex">
|
||||
<MaterialCheckbox
|
||||
id="terms"
|
||||
color="success"
|
||||
data-bs-toggle="collapse"
|
||||
href="#collapseExample"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapseExample"
|
||||
>ตึก1</MaterialButton
|
||||
:checked="statusfree"
|
||||
@change="onChangeEvent('free')"
|
||||
>
|
||||
<!-- item?.title -->
|
||||
</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">
|
||||
<a href="javascript:;" class=" font-weight-bolder"> ว่าง</a>
|
||||
</MaterialCheckbox>
|
||||
<MaterialCheckbox
|
||||
id="terms2"
|
||||
color="red"
|
||||
:checked="statuseunavailable"
|
||||
@change="onChangeEvent('unavailable')"
|
||||
>
|
||||
<a href="javascript:;" class="font-weight-bolder">
|
||||
ไม่ว่าง</a
|
||||
>
|
||||
</MaterialCheckbox>
|
||||
<MaterialCheckbox
|
||||
id="terms3"
|
||||
color="warning"
|
||||
:checked="statusewaiting"
|
||||
@change="onChangeEvent('waiting')"
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="font-weight-bolder"
|
||||
>
|
||||
รอซ่อม</a
|
||||
>
|
||||
</MaterialCheckbox>
|
||||
<MaterialCheckbox
|
||||
id="terms4"
|
||||
color="return"
|
||||
:checked="statusreturn"
|
||||
@change="onChangeEvent('return')"
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="font-weight-bolder"
|
||||
>
|
||||
รอคืนห้อง</a
|
||||
>
|
||||
</MaterialCheckbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- v-for="(item, index) in NoRoom" :key="index" -->
|
||||
<div v-for="(item, index) in NoRoom" :key="index">
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<p class="text-start mt-4">
|
||||
<MaterialButton
|
||||
variant="outline"
|
||||
color="success"
|
||||
data-bs-toggle="collapse"
|
||||
href="#collapseExample"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapseExample"
|
||||
>{{ item?.title }}</MaterialButton
|
||||
>
|
||||
<!-- item?.title -->
|
||||
</p>
|
||||
<div class="collapse show" id="collapseExample" aria-expanded="true">
|
||||
<div>
|
||||
<div
|
||||
class="card mb-2"
|
||||
:class="{
|
||||
'bg-red': item?.status == 'unavailable',
|
||||
'bg-green': item?.status == 'free',
|
||||
'bg-warning': item?.status == 'waiting',
|
||||
'bg-return': item?.status == 'return',
|
||||
}"
|
||||
:style="{ width: `110px` }"
|
||||
class="row row-cols-auto"
|
||||
:style="{ '--bs-gutter-x': '0.5rem' }"
|
||||
>
|
||||
<div class="card-body">
|
||||
<p class="card-title">
|
||||
<a
|
||||
style="cursor: pointer"
|
||||
@click="gotodetail(item?.dataIndex, item?.status)"
|
||||
class="text-white"
|
||||
>{{ item?.title }}</a
|
||||
>
|
||||
</p>
|
||||
<div class="col" v-for="(item, index) in roomData" :key="index">
|
||||
<div
|
||||
class="card mb-2"
|
||||
: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">
|
||||
<p class="card-title">
|
||||
<a
|
||||
style="cursor: pointer"
|
||||
@click="gotodetail(item?.dataIndex, item?.status)"
|
||||
class="text-white"
|
||||
>{{ item?.title }}</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -270,4 +318,7 @@ export default {
|
||||
background: #ffca28 !important;
|
||||
color: #fff;
|
||||
}
|
||||
ol.breadcrumb {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -132,6 +132,11 @@ export default {
|
||||
{ label: "พฤศจิกายน", value: "11" },
|
||||
{ label: "ธันวาคม", value: "12" },
|
||||
],
|
||||
optionsRoomtype: [
|
||||
{ label: "ช๑", value: "ช๑" },
|
||||
{ label: "ช๒", value: "ช๒" },
|
||||
{ label: "ช๓", value: "ช๓" },
|
||||
],
|
||||
selectedMonth: "ตุลาคม",
|
||||
firstName: "สมชาย",
|
||||
lastName: "0237",
|
||||
@ -141,6 +146,9 @@ export default {
|
||||
phone: "1200",
|
||||
old: "100",
|
||||
birthday: "200",
|
||||
Roomtype: "ช๑",
|
||||
Roomconditions: "ปกติ",
|
||||
selectedRoomtype: "ช๑",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -189,7 +197,7 @@ export default {
|
||||
</div>
|
||||
</Header>
|
||||
<section>
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6 pt-6">
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div>
|
||||
@ -197,12 +205,12 @@ export default {
|
||||
:routes="[
|
||||
{ label: 'หน้าหลัก', route: '/' },
|
||||
{ label: 'สถานะห้องพัก', route: '/room' },
|
||||
{ label: 'แก้ไขค่าใช้จ่ายประจำเดือน' },
|
||||
{ label: 'แก้ไขรายละเอียดห้อง' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<!-- d-flex justify-content-between -->
|
||||
<h4>แก้ไขค่าใช้จ่ายประจำเดือน</h4>
|
||||
<h4>แก้ไขรายละเอียดห้อง</h4>
|
||||
<div class="row pt-4">
|
||||
<div class="card mb-3">
|
||||
<div class="row g-0">
|
||||
@ -216,10 +224,10 @@ export default {
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">ค่าใช้จ่ายประจำเดือน ตุลาคม</h5>
|
||||
<h5 class="card-title">แก้ไขรายละเอียดห้อง</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="col-6">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
@ -242,28 +250,26 @@ export default {
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="idcard"
|
||||
@input="(event) => (idcard = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ค่าน้ำประปา"
|
||||
type="number"
|
||||
placeholder="ค่าน้ำประปา"
|
||||
/>
|
||||
<label>ประเภทห้องพัก</label>
|
||||
<v-select
|
||||
:options="optionsRoomtype"
|
||||
v-model="selectedRoomtype"
|
||||
></v-select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="phone"
|
||||
@input="(event) => (phone = event.target.value)"
|
||||
:value="Roomconditions"
|
||||
@input="(event) => (Roomconditions = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ค่าไฟฟ้า"
|
||||
type="number"
|
||||
placeholder="ค่าไฟฟ้า"
|
||||
label="สภาพห้อง"
|
||||
type="text"
|
||||
placeholder="สภาพห้อง"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<!-- <div class="col-4">
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="birthday"
|
||||
@ -284,6 +290,26 @@ export default {
|
||||
placeholder="ค่าบำรุงลิฟท์"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="insurance"
|
||||
@input="(event) => (insurance = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="เงินค่าประกัน"
|
||||
type="text"
|
||||
placeholder="เงินค่าประกัน"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="installments"
|
||||
@input="(event) => (installments = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="งวดเงินค่าประกัน"
|
||||
type="text"
|
||||
placeholder="งวดเงินค่าประกัน"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="rank"
|
||||
@ -294,12 +320,10 @@ export default {
|
||||
placeholder="สภาพห้อง"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <p class="card-text">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</p> -->
|
||||
<div class="text-center">
|
||||
|
||||
<div class="text-center" style="margin-right: 100px">
|
||||
<MaterialButton variant="gradient" color="success"
|
||||
>บันทึก</MaterialButton
|
||||
>
|
||||
@ -327,4 +351,7 @@ export default {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
}
|
||||
.vs__actions {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -116,10 +116,16 @@ export default {
|
||||
{ label: "Laravel", value: "PHP" },
|
||||
{ label: "Phoenix", value: "Elixir" },
|
||||
],
|
||||
optionsRoomtype: [
|
||||
{ label: "ช๑", value: "ช๑" },
|
||||
{ label: "ช๒", value: "ช๒" },
|
||||
{ label: "ช๓", value: "ช๓" },
|
||||
],
|
||||
selectedColor: "",
|
||||
Edifice: "",
|
||||
Building: "",
|
||||
Floors: "",
|
||||
selectedRoomtype: "ช๑",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -156,45 +162,49 @@ export default {
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
style="padding"
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ผังห้องพัก' }]"
|
||||
/>
|
||||
</div>
|
||||
</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 class="d-flex justify-content-end align-items-baseline">
|
||||
<label style="margin-right: 10px">ค้นหาพื้นที่หรือตึก </label>
|
||||
<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 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>พื้นที่</td>
|
||||
<td>ตึก1</td>
|
||||
<td>3</td>
|
||||
<td>20</td>
|
||||
<td>ช๑</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -226,7 +236,16 @@ export default {
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Area"
|
||||
@input="(event) => (Area = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="พื้นที่"
|
||||
type="text"
|
||||
placeholder="พื้นที่"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Building"
|
||||
@ -258,6 +277,13 @@ export default {
|
||||
placeholder="จำนวนห้อง"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>ประเภทห้องพัก</label>
|
||||
<v-select
|
||||
:options="optionsRoomtype"
|
||||
v-model="selectedRoomtype"
|
||||
></v-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
@ -132,13 +132,11 @@ export default {
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ระบบค้นหา' }]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end">
|
||||
<MaterialInput
|
||||
class="input-group-dynamic w-30"
|
||||
|
||||
@ -132,29 +132,28 @@ export default {
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
|
||||
/>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end align-items-baseline">
|
||||
<label style="margin-right: 10px">ค้นหาชื่อหรือเลขห้อง </label>
|
||||
<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 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 class="text-center pt-4">
|
||||
<table class="table border border-2 border-success">
|
||||
<thead class="border border-2 border-success border-bottom">
|
||||
@ -447,4 +446,7 @@ input::-webkit-inner-spin-button {
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.breadcrumb-item a:hover {
|
||||
color: #4caf50 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -140,6 +140,7 @@ export default {
|
||||
Costs: "",
|
||||
Maintenance: "",
|
||||
Insurance: "",
|
||||
Insurancecost: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -176,13 +177,11 @@ export default {
|
||||
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
|
||||
<div class="page-header min-vh-45">
|
||||
<div class="container">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
@ -238,7 +237,8 @@ export default {
|
||||
role="tabpanel"
|
||||
aria-labelledby="home-tab"
|
||||
>
|
||||
<div class="d-flex justify-content-end align-items-center pt-4">
|
||||
<div class="d-flex justify-content-end align-items-baseline pt-4">
|
||||
<label style="margin-right: 10px">ค้นหาชื่อหรือเลขห้อง </label>
|
||||
<MaterialInput
|
||||
class="input-group-dynamic w-30"
|
||||
icon="search"
|
||||
@ -267,6 +267,8 @@ export default {
|
||||
<th scope="col">ค่าไฟฟ้า</th>
|
||||
<th scope="col">ค่าไฟฟ้าส่วนกลาง</th>
|
||||
<th scope="col">ค่าบำรุงลิฟท์</th>
|
||||
<th scope="col">ค่าประกัน</th>
|
||||
<th scope="col">จำนวนงวดประกัน</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -280,6 +282,8 @@ export default {
|
||||
<td>20,000</td>
|
||||
<td>8,000</td>
|
||||
<td>20,000</td>
|
||||
<td>10,000</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -291,7 +295,8 @@ export default {
|
||||
role="tabpanel"
|
||||
aria-labelledby="profile-tab"
|
||||
>
|
||||
<div class="d-flex justify-content-end align-items-center pt-4">
|
||||
<div class="d-flex justify-content-end align-items-baseline pt-4">
|
||||
<label style="margin-right: 10px">ค้นหาชื่อหรือเลขห้อง </label>
|
||||
<MaterialInput
|
||||
class="input-group-dynamic w-30"
|
||||
icon="search"
|
||||
@ -317,6 +322,7 @@ export default {
|
||||
<th scope="col">ห้อง</th>
|
||||
<th scope="col">ค่าบำรุงฯ</th>
|
||||
<th scope="col">ค่าประกัน</th>
|
||||
<th scope="col">จำนวนงวดประกัน</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -327,6 +333,7 @@ export default {
|
||||
<td>3</td>
|
||||
<td>20,000</td>
|
||||
<td>8,000</td>
|
||||
<td>8</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -338,7 +345,8 @@ export default {
|
||||
role="tabpanel"
|
||||
aria-labelledby="contact-tab"
|
||||
>
|
||||
<div class="d-flex justify-content-end align-items-center pt-4">
|
||||
<div class="d-flex justify-content-end align-items-baseline pt-4">
|
||||
<label style="margin-right: 10px">ค้นหาชื่อหรือเลขห้อง </label>
|
||||
<MaterialInput
|
||||
class="input-group-dynamic w-30"
|
||||
icon="search"
|
||||
@ -472,6 +480,26 @@ export default {
|
||||
placeholder="ค่าบำรุงลิฟท์"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Insurancecost"
|
||||
@input="(event) => (Insurancecost = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="เงินค่าประกัน"
|
||||
type="text"
|
||||
placeholder="เงินค่าประกัน"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="installments"
|
||||
@input="(event) => (installments = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="งวดเงินค่าประกัน"
|
||||
type="text"
|
||||
placeholder="งวดเงินค่าประกัน"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@ -545,6 +573,26 @@ export default {
|
||||
placeholder="ค่าน้ำประปา"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Insurancecost"
|
||||
@input="(event) => (Insurancecost = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="เงินค่าประกัน"
|
||||
type="text"
|
||||
placeholder="เงินค่าประกัน"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="installments"
|
||||
@input="(event) => (installments = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="งวดเงินค่าประกัน"
|
||||
type="text"
|
||||
placeholder="งวดเงินค่าประกัน"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@ -570,7 +618,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>
|
||||
<h5 class="modal-title" id="staticBackdropLabel">
|
||||
เพิ่มรายงาน ประจำเดือนตุลาคม
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
@ -601,6 +651,26 @@ export default {
|
||||
placeholder="ค่าน้ำประปา"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Insurancecost"
|
||||
@input="(event) => (Insurancecost = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="เงินค่าประกัน"
|
||||
type="text"
|
||||
placeholder="เงินค่าประกัน"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="installments"
|
||||
@input="(event) => (installments = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="งวดเงินค่าประกัน"
|
||||
type="text"
|
||||
placeholder="งวดเงินค่าประกัน"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user