mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 04:04:22 +08:00
update ui
This commit is contained in:
kamoa457
parent
f06af90d30
commit
b75d1d815a
@ -9758,7 +9758,7 @@ textarea.form-control-lg {
|
||||
.bg-gray-200 {
|
||||
background-color: #f0f2f5 !important;
|
||||
}
|
||||
|
||||
|
||||
.bg-gray-300 {
|
||||
background-color: #dee2e6 !important;
|
||||
}
|
||||
|
||||
343
src/assets/dataJson/masterData.json
Normal file
343
src/assets/dataJson/masterData.json
Normal file
@ -0,0 +1,343 @@
|
||||
{
|
||||
"ranks": [
|
||||
{
|
||||
"label": "ส.ต.ต.",
|
||||
"value": "ส.ต.ต."
|
||||
},
|
||||
{
|
||||
"label": "ส.ต.ต.หญิง",
|
||||
"value": "ส.ต.ต.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "ส.ต.ท.",
|
||||
"value": "ส.ต.ท."
|
||||
},
|
||||
{
|
||||
"label": "ส.ต.ท.หญิง",
|
||||
"value": "ส.ต.ท.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "ส.ต.อ.",
|
||||
"value": "ส.ต.อ."
|
||||
},
|
||||
{
|
||||
"label": "ส.ต.อ.หญิง",
|
||||
"value": "ส.ต.อ.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "จ.ส.ต.",
|
||||
"value": "จ.ส.ต."
|
||||
},
|
||||
{
|
||||
"label": "จ.ส.ต.หญิง",
|
||||
"value": "จ.ส.ต.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "ด.ต.",
|
||||
"value": "ด.ต."
|
||||
},
|
||||
{
|
||||
"label": "ด.ต.หญิง",
|
||||
"value": "ด.ต.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "ร.ต.ต.",
|
||||
"value": "ร.ต.ต."
|
||||
},
|
||||
{
|
||||
"label": "ร.ต.ต.หญิง",
|
||||
"value": "ร.ต.ต.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "ร.ต.ท.",
|
||||
"value": "ร.ต.ท."
|
||||
},
|
||||
{
|
||||
"label": "ร.ต.ท.หญิง",
|
||||
"value": "ร.ต.ท.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "ร.ต.อ.",
|
||||
"value": "ร.ต.อ."
|
||||
},
|
||||
{
|
||||
"label": "ร.ต.อ.หญิง",
|
||||
"value": "ร.ต.อ.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "พ.ต.ต.",
|
||||
"value": "พ.ต.ต."
|
||||
},
|
||||
{
|
||||
"label": "พ.ต.ต.หญิง",
|
||||
"value": "พ.ต.ต.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "พ.ต.ท.",
|
||||
"value": "พ.ต.ท."
|
||||
},
|
||||
{
|
||||
"label": "พ.ต.ท.หญิง",
|
||||
"value": "พ.ต.ท.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "พ.ต.อ.",
|
||||
"value": "พ.ต.อ."
|
||||
},
|
||||
{
|
||||
"label": "พ.ต.อ.หญิง",
|
||||
"value": "พ.ต.อ.หญิง"
|
||||
},
|
||||
{
|
||||
"label": "พล.ต.ต.",
|
||||
"value": "พล.ต.ต."
|
||||
},
|
||||
{
|
||||
"label": "พล.ต.ท.",
|
||||
"value": "พล.ต.ท."
|
||||
},
|
||||
{
|
||||
"label": "พล.ต.อ.",
|
||||
"value": "พล.ต.อ."
|
||||
}
|
||||
],
|
||||
"position": [
|
||||
{
|
||||
"label": "รอง สว.",
|
||||
"value": "รอง สว."
|
||||
},
|
||||
{
|
||||
"label": "สว.",
|
||||
"value": "สว."
|
||||
},
|
||||
{
|
||||
"label": "รอง ผกก.",
|
||||
"value": "รอง ผกก."
|
||||
},
|
||||
{
|
||||
"label": "ผกก.",
|
||||
"value": "ผกก."
|
||||
},
|
||||
{
|
||||
"label": "รอง ผบก.",
|
||||
"value": "รอง ผบก."
|
||||
},
|
||||
{
|
||||
"label": "ผบก.",
|
||||
"value": "ผบก."
|
||||
},
|
||||
{
|
||||
"label": "รอง ผบช.",
|
||||
"value": "รอง ผบช."
|
||||
},
|
||||
{
|
||||
"label": "ผบช.",
|
||||
"value": "ผบช."
|
||||
},
|
||||
{
|
||||
"label": "ผบ.หมู่",
|
||||
"value": "ผบ.หมู่"
|
||||
}
|
||||
],
|
||||
"Affiliation": [
|
||||
{
|
||||
"label": "บช.ตซด.",
|
||||
"value": "บช.ตซด."
|
||||
},
|
||||
{
|
||||
"label": "บช.อก.",
|
||||
"value": "บช.อก."
|
||||
},
|
||||
{
|
||||
"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"
|
||||
},
|
||||
{
|
||||
"label": "ฝอ.8",
|
||||
"value": "ฝอ.8"
|
||||
},
|
||||
{
|
||||
"label": "บช.สสน.",
|
||||
"value": "บช.สสน."
|
||||
},
|
||||
{
|
||||
"label": "ฝสสน.1",
|
||||
"value": "ฝสสน.1"
|
||||
},
|
||||
{
|
||||
"label": "ฝสสน.1",
|
||||
"value": "ฝสสน.1"
|
||||
},
|
||||
{
|
||||
"label": "ฝสสน.1",
|
||||
"value": "ฝสสน.1"
|
||||
},
|
||||
{
|
||||
"label": "ฝสสน.1",
|
||||
"value": "ฝสสน.1"
|
||||
},
|
||||
{
|
||||
"label": "ฝสสน.5",
|
||||
"value": "ฝสสน.5"
|
||||
}
|
||||
],
|
||||
"building": [
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "อาคารแฟลต 1/11",
|
||||
"room": "24",
|
||||
"floor": "4",
|
||||
"type": "ช.2"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "อาคารแฟลต 1/12",
|
||||
"room": "20",
|
||||
"floor": "4",
|
||||
"type": "ช.2"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "อาคารแฟลต 1/13",
|
||||
"room": "24",
|
||||
"floor": "4",
|
||||
"type": "ช.2"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "อาคารแฟลต 1/14",
|
||||
"room": "18",
|
||||
"floor": "3",
|
||||
"type": "ช.3"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "อาคารแฟลต 1/15",
|
||||
"room": "32",
|
||||
"floor": "4",
|
||||
"type": "ช.2"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "อาคารแฟลต 1/16",
|
||||
"room": "24",
|
||||
"floor": "4",
|
||||
"type": "ช.2"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "อาคารแฟลต 1/17",
|
||||
"room": "32",
|
||||
"floor": "4",
|
||||
"type": "ช.2"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "อาคารแฟลต 1/18",
|
||||
"room": "60",
|
||||
"floor": "5",
|
||||
"type": "-"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "แฟลตลือชา 1",
|
||||
"room": "50",
|
||||
"floor": "5",
|
||||
"type": "-"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "แฟลตลือชา 2",
|
||||
"room": "50",
|
||||
"floor": "5",
|
||||
"type": "-"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "แฟลตลือชา 3",
|
||||
"room": "40",
|
||||
"floor": "5",
|
||||
"type": "ช.2"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "แฟลตบางเขน 1",
|
||||
"room": "50",
|
||||
"floor": "5",
|
||||
"type": "-"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพัก บช. ตชด.",
|
||||
"name": "แฟลตบางเขน 2",
|
||||
"room": "50",
|
||||
"floor": "5",
|
||||
"type": "ช.2"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพักส่วนกลาง",
|
||||
"name": "ลือชา ตร.",
|
||||
"room": "-",
|
||||
"floor": "-",
|
||||
"type": "-"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพักส่วนกลาง",
|
||||
"name": "ทุ่งสองห้อง",
|
||||
"room": "-",
|
||||
"floor": "-",
|
||||
"type": "-"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพักส่วนกลาง",
|
||||
"name": "วิภาวดี",
|
||||
"room": "-",
|
||||
"floor": "-",
|
||||
"type": "-"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพักส่วนกลาง",
|
||||
"name": "ถนอมมิตร",
|
||||
"room": "-",
|
||||
"floor": "-",
|
||||
"type": "-"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพักส่วนกลาง",
|
||||
"name": "อุดมสุข",
|
||||
"room": "-",
|
||||
"floor": "-",
|
||||
"type": "-"
|
||||
},
|
||||
{
|
||||
"buil": "อาคารบ้านพักส่วนกลาง",
|
||||
"name": "เฉลิมลาภ",
|
||||
"room": "-",
|
||||
"floor": "-",
|
||||
"type": "-"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -2,66 +2,105 @@
|
||||
{
|
||||
"title": "ห้อง 1",
|
||||
"dataIndex": "1",
|
||||
"firstName": "",
|
||||
"laststName": "",
|
||||
"Affiliation": "",
|
||||
"status": "free"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 2",
|
||||
"dataIndex": "2",
|
||||
"firstName": "ปิติ2",
|
||||
"laststName": "มีดี",
|
||||
"Affiliation": "ฝอ. 2",
|
||||
"status": "unavailable"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 3",
|
||||
"dataIndex": "3",
|
||||
"firstName": "",
|
||||
"laststName": "",
|
||||
"Affiliation": "",
|
||||
"status": "free"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 4",
|
||||
"dataIndex": "4",
|
||||
"firstName": "ปิติ2",
|
||||
"laststName": "มีดี",
|
||||
"Affiliation": "ฝอ. 1",
|
||||
"status": "return"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 5",
|
||||
"dataIndex": "5",
|
||||
"firstName": "ปิติ3",
|
||||
"laststName": "มีดี",
|
||||
"Affiliation": "ฝอ. 1",
|
||||
"status": "unavailable"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 6",
|
||||
"dataIndex": "6",
|
||||
"firstName": "ปิติ4",
|
||||
"laststName": "มีดี",
|
||||
"Affiliation": "ฝอ. 1",
|
||||
"status": "waiting"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 7",
|
||||
"dataIndex": "7",
|
||||
"firstName": "ปิติ3",
|
||||
"laststName": "มีดี",
|
||||
"Affiliation": "ฝอ. 1",
|
||||
"status": "return"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 8",
|
||||
"dataIndex": "8",
|
||||
"status": "unavailable"
|
||||
"firstName": "ปิติ9",
|
||||
"laststName": "มีดี",
|
||||
"Affiliation": "ฝอ. 1",
|
||||
"status": "special"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 9",
|
||||
"dataIndex": "9",
|
||||
"firstName": "ปิติ5",
|
||||
"laststName": "มีดี",
|
||||
"Affiliation": "ฝอ. 4",
|
||||
"status": "unavailable"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 10",
|
||||
"dataIndex": "10",
|
||||
"firstName": "ปิติ6",
|
||||
"laststName": "มีดี",
|
||||
"Affiliation": "ฝอ. 7",
|
||||
"status": "waiting"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 11",
|
||||
"dataIndex": "11",
|
||||
"firstName": "",
|
||||
"laststName": "",
|
||||
"Affiliation": "",
|
||||
"status": "free"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 12",
|
||||
"dataIndex": "12",
|
||||
"firstName": "",
|
||||
"laststName": "",
|
||||
"Affiliation": "",
|
||||
"status": "free"
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 13",
|
||||
"dataIndex": "13",
|
||||
"status": "waiting"
|
||||
"firstName": "ปิติ7",
|
||||
"laststName": "มีดี",
|
||||
"Affiliation": "ฝอ. 2",
|
||||
"status": "special"
|
||||
}
|
||||
]
|
||||
@ -29,8 +29,8 @@ const userlist = [
|
||||
dataIndex: "1",
|
||||
firstName: "สมชาย",
|
||||
lastName: "แสงทอง",
|
||||
Affiliation: "บก", //สังกัด
|
||||
rank: "ร้อยตรี", //ยศ
|
||||
Affiliation: "ฝอ.2", //สังกัด
|
||||
rank: "ส.ต.ต.", //ยศ
|
||||
old: "32",
|
||||
birthday: "04/03/2534",
|
||||
idcard: "134044411441122",
|
||||
@ -40,8 +40,8 @@ const userlist = [
|
||||
dataIndex: "2",
|
||||
firstName: "สมชัย",
|
||||
lastName: "แสงสุข",
|
||||
Affiliation: "กก", //สังกัด
|
||||
rank: "ร้อยตรี", //ยศ
|
||||
Affiliation: "ฝอ.2", //สังกัด
|
||||
rank: "ส.ต.ต.", //ยศ
|
||||
old: "32",
|
||||
birthday: "14/07/2534",
|
||||
idcard: "134044411441178",
|
||||
@ -68,11 +68,10 @@ export default {
|
||||
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" },
|
||||
{ label: "มานพ", value: "มานพ" },
|
||||
{ label: "วิชัย", value: "วิชัย" },
|
||||
{ label: "ธนาพร", value: "ธนาพร" },
|
||||
{ label: "มนตรี", value: "มนตรี" },
|
||||
],
|
||||
selectedColor: "",
|
||||
firstName: "",
|
||||
@ -154,7 +153,7 @@ export default {
|
||||
>เพิ่มผู้เช่าลงคิว</MaterialButton
|
||||
>
|
||||
</div>
|
||||
<div class="text-center pt-4">
|
||||
<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>
|
||||
@ -237,16 +236,25 @@ export default {
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
border: 2px solid #567b57 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
border: 2px solid #d24c4a !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
.bg-warning {
|
||||
border: 2px solid #fb8c00 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-return {
|
||||
border: 2px solid #ffca28 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-special {
|
||||
border: 2px solid #edc7c7 !important;
|
||||
color: #000;
|
||||
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
|
||||
@ -132,14 +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>
|
||||
<Breadcrumbs
|
||||
:routes="[
|
||||
{ label: 'หน้าหลัก', route: '/' },
|
||||
{ label: 'ระบบเรียกรายงาน' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ระบบเรียกรายงาน' }]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
@ -195,56 +192,91 @@ export default {
|
||||
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 class="d-flex justify-content-between align-items-baseline">
|
||||
<div class="d-flex">
|
||||
<h5>ประจำเดือน ตุลาคม</h5>
|
||||
</div>
|
||||
<div class="d-flex 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>
|
||||
<div class="text-center pt-4">
|
||||
|
||||
<div class="text-center pt-4 table-responsive">
|
||||
<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>
|
||||
<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>
|
||||
<th scope="row">1</th>
|
||||
<td>1</td>
|
||||
<td>2</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>
|
||||
<td>303</td>
|
||||
<td>ส.ต.ต.</td>
|
||||
<td>มีนา บานเย็น</td>
|
||||
<td>325</td>
|
||||
<td>365</td>
|
||||
<td>200</td>
|
||||
<td>80</td>
|
||||
<td>200</td>
|
||||
<td>480</td>
|
||||
<td>/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>แฟลตลือชา 2</td>
|
||||
<td>3</td>
|
||||
<td>303</td>
|
||||
<td>ส.ต.ต.</td>
|
||||
<td>มีนา บานเย็น</td>
|
||||
<td>325</td>
|
||||
<td>365</td>
|
||||
<td>200</td>
|
||||
<td>80</td>
|
||||
<td>200</td>
|
||||
<td>480</td>
|
||||
<td>/</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -256,50 +288,73 @@ export default {
|
||||
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 class="d-flex justify-content-between align-items-baseline">
|
||||
<div class="d-flex">
|
||||
<h5>ประจำเดือน ตุลาคม</h5>
|
||||
</div>
|
||||
<div class="d-flex 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>
|
||||
<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>
|
||||
<th scope="col">รวม</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>1</td>
|
||||
<td>แฟลตลือชา 2</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
<td>20,000</td>
|
||||
<td>8,000</td>
|
||||
<td>203</td>
|
||||
<td>ฝอ.2</td>
|
||||
<td>1,300</td>
|
||||
<td>300</td>
|
||||
<td>1,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>แฟลตลือชา 2</td>
|
||||
<td>1</td>
|
||||
<td>101</td>
|
||||
<td>ฝอ.1</td>
|
||||
<td>1,300</td>
|
||||
<td>300</td>
|
||||
<td>1,600</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -311,46 +366,115 @@ export default {
|
||||
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>
|
||||
<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>
|
||||
<td>ตุลาคม</td>
|
||||
<td>อาคารบ้านพัก บช. ตชด.</td>
|
||||
<td>
|
||||
<MaterialButton
|
||||
size="lg"
|
||||
class="btn-icon"
|
||||
style="margin-right: -0px"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<span style="margin-right: 5px">บันทึก</span>
|
||||
<img
|
||||
src="../../assets/img/pdf.png"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
width="24"
|
||||
/>
|
||||
</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="24"
|
||||
/>
|
||||
</div>
|
||||
</MaterialButton>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>ตุลาคม</td>
|
||||
<td>อาคารบ้านพักส่วนกลาง</td>
|
||||
<td>
|
||||
<MaterialButton
|
||||
size="lg"
|
||||
class="btn-icon"
|
||||
style="margin-right: -0px"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<span style="margin-right: 5px">บันทึก</span>
|
||||
<img
|
||||
src="../../assets/img/pdf.png"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
width="24"
|
||||
/>
|
||||
</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="24"
|
||||
/>
|
||||
</div>
|
||||
</MaterialButton>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>ตุลาคม</td>
|
||||
<td>อาคารบ้านพัก ตร.</td>
|
||||
<td>
|
||||
<MaterialButton
|
||||
size="lg"
|
||||
class="btn-icon"
|
||||
style="margin-right: -0px"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<span style="margin-right: 5px">บันทึก</span>
|
||||
<img
|
||||
src="../../assets/img/pdf.png"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
width="24"
|
||||
/>
|
||||
</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="24"
|
||||
/>
|
||||
</div>
|
||||
</MaterialButton>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -589,16 +713,24 @@ export default {
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
border: 2px solid #567b57 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
border: 2px solid #d24c4a !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
.bg-warning {
|
||||
border: 2px solid #fb8c00 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-return {
|
||||
border: 2px solid #ffca28 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-special {
|
||||
border: 2px solid #edc7c7 !important;
|
||||
color: #000;
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
|
||||
@ -289,17 +289,4 @@ export default {
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -10,8 +10,8 @@ const userlist = [
|
||||
dataIndex: "1",
|
||||
firstName: "สมชาย",
|
||||
lastName: "แสงทอง",
|
||||
Affiliation: "บก", //สังกัด
|
||||
rank: "ร้อยตรี", //ยศ
|
||||
Affiliation: "ฝอ.2", //สังกัด
|
||||
rank: "ส.ต.ต.",
|
||||
idcard: "134044411441122",
|
||||
phone: "0325647846",
|
||||
ContractDate: "12/11/2566", //สังกัด
|
||||
@ -23,8 +23,8 @@ const userlist = [
|
||||
dataIndex: "2",
|
||||
firstName: "สมชัย",
|
||||
lastName: "แสงสุข",
|
||||
Affiliation: "กก", //สังกัด
|
||||
rank: "ร้อยตรี", //ยศ
|
||||
Affiliation: "ฝอ.2", //สังกัด
|
||||
rank: "ส.ต.ต.",
|
||||
idcard: "134044411441178",
|
||||
phone: "0325647845",
|
||||
ContractDate: "12/11/2566", //สังกัด
|
||||
@ -120,32 +120,24 @@ export default {
|
||||
</div>
|
||||
<!-- d-flex justify-content-between -->
|
||||
<div class="d-flex justify-content-between align-items-baseline">
|
||||
<h4>รายละเอียดห้องพัก</h4>
|
||||
<h4>รายละเอียดห้องพัก 101</h4>
|
||||
<div v-if="mode == 'edit'">
|
||||
<MaterialButton variant="gradient" color="success" @click="gotoAction()"
|
||||
>แก้ไขรายละเอียดห้อง</MaterialButton
|
||||
>จัดการห้องพัก</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>
|
||||
<div class="row pt-4">
|
||||
<div class="card mb-3">
|
||||
<div class="row g-0">
|
||||
<!-- <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-10">
|
||||
<div class="card-body">
|
||||
<div class="row" v-if="statusedit == true">
|
||||
@ -153,7 +145,7 @@ export default {
|
||||
<div class="col-5">
|
||||
<p class="card-text">ชือ : มานะ</p>
|
||||
<p class="card-text">สถานะห้อง : ไม่ว่าง</p>
|
||||
<p class="card-text">ยศ : ร้อยตรี</p>
|
||||
<p class="card-text">ยศ : ส.ต.ต.</p>
|
||||
<p class="card-text">วันเกิด : 12/02/2514</p>
|
||||
<p class="card-text">วันทำสัญญา : 12/02/2564</p>
|
||||
<p class="card-text">อายุ : 33 ปี</p>
|
||||
@ -161,7 +153,7 @@ export default {
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<p class="card-text">นามสกุล : ถือดี</p>
|
||||
<p class="card-text">สังกัด : กก</p>
|
||||
<p class="card-text">สังกัด : ฝอ. 1</p>
|
||||
<p class="card-text">เลขบัตรประชาชน : 123456123456</p>
|
||||
<p class="card-text">เบอร์โทร : 0972534887</p>
|
||||
<p class="card-text">เงินค่าประกัน : 12,000</p>
|
||||
@ -174,6 +166,12 @@ export default {
|
||||
<p class="card-text">มิเตอร์น้ำ/ไฟ : 745/546</p>
|
||||
<p class="card-text">สภาพห้อง : ปกติ</p>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<h5 class="card-title pt-2"></h5>
|
||||
<p class="card-text">เลขที่เริ่มใช้ : 3012</p>
|
||||
<p class="card-text">เดื่อนที่เริ่มใช้ : มกราคม</p>
|
||||
<p class="card-text">ปีที่เริ่มใช้ : 2565</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <p class="card-text">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
@ -327,10 +325,10 @@ export default {
|
||||
aria-labelledby="staticBackdropLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-dialog modal-dialog-centered" style="max-width: 740px">
|
||||
<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"
|
||||
@ -340,8 +338,12 @@ export default {
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<div
|
||||
class="mb-3"
|
||||
style="display: flex; justify-content: space-between; align-items: center"
|
||||
>
|
||||
<div class="form-check form-check-inline">
|
||||
<label style="margin-right: 20px">กุญแจห้อง</label>
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
@ -349,7 +351,7 @@ export default {
|
||||
id="inlineRadio1"
|
||||
value="option1"
|
||||
/>
|
||||
<label class="form-check-label" for="inlineRadio1">รอคืนห้อง</label>
|
||||
<label class="form-check-label" for="inlineRadio1">มี</label>
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<input
|
||||
@ -359,29 +361,103 @@ export default {
|
||||
id="inlineRadio2"
|
||||
value="option2"
|
||||
/>
|
||||
<label class="form-check-label" for="inlineRadio2">รอซ่อม</label>
|
||||
<label class="form-check-label" for="inlineRadio2">ไม่มี</label>
|
||||
</div>
|
||||
<div style="width: 360px; margin-bottom: 10px">
|
||||
<MaterialInput
|
||||
name="contract"
|
||||
:value="contract"
|
||||
@input="(event) => (contract = event.target.value)"
|
||||
class="input-group-static"
|
||||
type="text"
|
||||
placeholder="สาเหตุ"
|
||||
/>
|
||||
</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
|
||||
class="mb-3"
|
||||
style="display: flex; justify-content: space-between; align-items: center"
|
||||
>
|
||||
<div class="form-check form-check-inline">
|
||||
<label style="margin-right: 20px">ทะเบียนบ้าน</label>
|
||||
<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 style="width: 360px; margin-bottom: 10px">
|
||||
<MaterialInput
|
||||
name="contract"
|
||||
:value="contract"
|
||||
@input="(event) => (contract = event.target.value)"
|
||||
class="input-group-static"
|
||||
type="text"
|
||||
placeholder="สาเหตุ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Checkintime"
|
||||
@input="(event) => (Checkintime = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="จำนวนงวดที่จ่าย"
|
||||
type="text"
|
||||
placeholder="จำนวนงวดที่จ่าย"
|
||||
/>
|
||||
<div>
|
||||
<label style="padding-left: 30px;">หลักฐานแสดงการชําระค่าไฟเดือนล่าสุด</label>
|
||||
</div>
|
||||
<div
|
||||
class="mb-3"
|
||||
style="margin-left:10px; display: flex; justify-content: space-between; align-items: center"
|
||||
>
|
||||
<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 style="width: 250px; margin-bottom: 10px">
|
||||
<MaterialInput
|
||||
name="contract"
|
||||
:value="contract"
|
||||
@input="(event) => (contract = event.target.value)"
|
||||
class="input-group-static"
|
||||
type="text"
|
||||
placeholder="สาเหตุ"
|
||||
/>
|
||||
</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 style="width: 250px; margin-bottom: 10px">
|
||||
<MaterialInput
|
||||
name="contract"
|
||||
:value="contract"
|
||||
@input="(event) => (contract = event.target.value)"
|
||||
class="input-group-static"
|
||||
type="text"
|
||||
placeholder="สาเหตุ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -404,15 +480,23 @@ export default {
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
border: 2px solid #567b57 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
border: 2px solid #d24c4a !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
.bg-warning {
|
||||
border: 2px solid #fb8c00 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-return {
|
||||
border: 2px solid #ffca28 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-special {
|
||||
border: 2px solid #edc7c7 !important;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -36,20 +36,26 @@ export default {
|
||||
{ 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" },
|
||||
{ label: "อาคารแฟลต 1/11", value: "1" },
|
||||
{ label: "อาคารแฟลต 1/12", value: "2" },
|
||||
{ label: "อาคารแฟลต 1/13", value: "3" },
|
||||
{ label: "อาคารแฟลต 1/14", value: "4" },
|
||||
{ label: "อาคารแฟลต 1/15", value: "5" },
|
||||
{ label: "อาคารแฟลต 1/16", value: "3" },
|
||||
{ label: "อาคารแฟลต 1/17", value: "4" },
|
||||
{ label: "อาคารแฟลต 1/18", value: "5" },
|
||||
{ label: "แฟลตลือชา 1", value: "5" },
|
||||
{ label: "แฟลตลือชา 2", value: "3" },
|
||||
{ label: "แฟลตลือชา 3", value: "4" },
|
||||
{ label: "แฟลตบางเขน 1", value: "5" },
|
||||
{ label: "แฟลตบางเขน 2", value: "5" },
|
||||
],
|
||||
selectedColor: "",
|
||||
statusfree: false,
|
||||
statusreturn: false,
|
||||
statuseunavailable: false,
|
||||
statusewaiting: false,
|
||||
selectedlistRoom: "ตึก 1",
|
||||
selectedlistRoom: "อาคารแฟลต 1/11 ",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -124,27 +130,26 @@ export default {
|
||||
</div>
|
||||
<div class="row pt-4 align-items-baseline">
|
||||
<div class="col-4">
|
||||
<div class=" d-flex justify-content-start align-items-baseline">
|
||||
<label class="w-30" >
|
||||
<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>
|
||||
<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
|
||||
>
|
||||
<a href="javascript:;" class="font-weight-bolder"> รายตึก</a>
|
||||
</MaterialCheckbox>
|
||||
<MaterialCheckbox id="terms6">
|
||||
<a href="javascript:;" class=" font-weight-bolder">
|
||||
ตึกทั้งหมด</a
|
||||
>
|
||||
<a href="javascript:;" class="font-weight-bolder"> ตึกทั้งหมด</a>
|
||||
</MaterialCheckbox>
|
||||
</div>
|
||||
<label style="margin-right: 10px; margin-left: 20px"
|
||||
@ -162,15 +167,29 @@ export default {
|
||||
|
||||
<div class="text-center pt-4">
|
||||
<div class="d-flex justify-content-between align-items-baseline p-2">
|
||||
<h6>ตึก 1</h6>
|
||||
<div class="text-start">
|
||||
<h6>{{ selectedlistRoom }}</h6>
|
||||
<p class="d-flex align-items-baseline p-2">
|
||||
<span>คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span>
|
||||
<a data-bs-toggle="modal" data-bs-target="#Edituser"
|
||||
><i
|
||||
class="material-icons"
|
||||
style="cursor: pointer; margin-left: 10px"
|
||||
aria-hidden="true"
|
||||
>edit</i
|
||||
></a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<MaterialCheckbox
|
||||
id="terms"
|
||||
color="success"
|
||||
color="green"
|
||||
:checked="statusfree"
|
||||
@change="onChangeEvent('free')"
|
||||
>
|
||||
<a href="javascript:;" class=" font-weight-bolder"> ว่าง</a>
|
||||
<a href="javascript:;" class="font-weight-bolder"> ว่าง</a>
|
||||
</MaterialCheckbox>
|
||||
<MaterialCheckbox
|
||||
id="terms2"
|
||||
@ -178,22 +197,15 @@ export default {
|
||||
:checked="statuseunavailable"
|
||||
@change="onChangeEvent('unavailable')"
|
||||
>
|
||||
<a href="javascript:;" class="font-weight-bolder">
|
||||
ไม่ว่าง</a
|
||||
>
|
||||
<a href="javascript:;" class="font-weight-bolder"> ไม่ว่าง</a>
|
||||
</MaterialCheckbox>
|
||||
<MaterialCheckbox
|
||||
id="terms3"
|
||||
color="warning"
|
||||
color="warning2"
|
||||
:checked="statusewaiting"
|
||||
@change="onChangeEvent('waiting')"
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="font-weight-bolder"
|
||||
>
|
||||
รอซ่อม</a
|
||||
>
|
||||
<a href="javascript:;" class="font-weight-bolder"> ชำรุด</a>
|
||||
</MaterialCheckbox>
|
||||
<MaterialCheckbox
|
||||
id="terms4"
|
||||
@ -201,12 +213,7 @@ export default {
|
||||
:checked="statusreturn"
|
||||
@change="onChangeEvent('return')"
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="font-weight-bolder"
|
||||
>
|
||||
รอคืนห้อง</a
|
||||
>
|
||||
<a href="javascript:;" class="font-weight-bolder"> รอคืนห้อง</a>
|
||||
</MaterialCheckbox>
|
||||
</div>
|
||||
</div>
|
||||
@ -215,7 +222,7 @@ export default {
|
||||
<div v-for="(item, index) in NoRoom" :key="index">
|
||||
<div class="card mb-2">
|
||||
<div class="card-body">
|
||||
<p class="text-start mt-4">
|
||||
<p class="text-start">
|
||||
<MaterialButton
|
||||
variant="outline"
|
||||
color="success"
|
||||
@ -239,20 +246,78 @@ export default {
|
||||
:class="{
|
||||
'bg-red': item?.status == 'unavailable',
|
||||
'bg-green': item?.status == 'free',
|
||||
'bg-warning': item?.status == 'waiting',
|
||||
'bg-warning2': item?.status == 'waiting',
|
||||
'bg-return': item?.status == 'return',
|
||||
'bg-special': item?.status == 'special',
|
||||
}"
|
||||
:style="{ width: `110px` }"
|
||||
:style="{ width: `115px`, height: `170px` }"
|
||||
>
|
||||
<div class="card-body">
|
||||
<p class="card-title">
|
||||
<a
|
||||
style="cursor: pointer"
|
||||
@click="gotodetail(item?.dataIndex, item?.status)"
|
||||
class="text-white"
|
||||
>{{ item?.title }}</a
|
||||
<div class="card-body p-1">
|
||||
<a
|
||||
style="cursor: pointer"
|
||||
@click="gotodetail(item?.dataIndex, item?.status)"
|
||||
class="text-drck"
|
||||
>
|
||||
<p
|
||||
class="card-title"
|
||||
:class="{
|
||||
'bg-red': item?.status == 'unavailable',
|
||||
'bg-green': item?.status == 'free',
|
||||
'bg-warning2': item?.status == 'waiting',
|
||||
'bg-return': item?.status == 'return',
|
||||
'bg-special': item?.status == 'special',
|
||||
}"
|
||||
>
|
||||
</p>
|
||||
<a>{{ item?.title }}</a>
|
||||
</p>
|
||||
<p
|
||||
v-if="item?.status == 'free'"
|
||||
class="card-title bgg-green"
|
||||
style="font-size: 16px"
|
||||
>
|
||||
{{ "ว่าง" }}
|
||||
</p>
|
||||
<p
|
||||
v-if="item?.status == 'unavailable'"
|
||||
class="card-title bgg-red"
|
||||
style="font-size: 16px"
|
||||
>
|
||||
{{ "ไม่ว่าง" }}
|
||||
</p>
|
||||
<p
|
||||
v-if="item?.status == 'waiting'"
|
||||
class="card-title bgg-warning2"
|
||||
style="font-size: 16px"
|
||||
>
|
||||
{{ "ชำรุด" }}
|
||||
</p>
|
||||
<p
|
||||
v-if="item?.status == 'return'"
|
||||
class="card-title bgg-return"
|
||||
style="font-size: 16px"
|
||||
>
|
||||
{{ "รอคืนห้อง" }}
|
||||
</p>
|
||||
<p class="card-title" style="font-size: 14px">
|
||||
{{ item?.firstName }}
|
||||
</p>
|
||||
<p class="card-title" style="font-size: 14px">
|
||||
{{ item?.laststName }}
|
||||
</p>
|
||||
<div>
|
||||
<span
|
||||
v-if="item?.status !== 'special'"
|
||||
style="text-align: right; font-size: small"
|
||||
>{{ item?.Affiliation }}</span
|
||||
>
|
||||
<span
|
||||
v-if="item?.status == 'special'"
|
||||
class="text-red"
|
||||
style="text-align: right; font-size: small"
|
||||
>{{ "กรณีพิเศษ" }}</span
|
||||
>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -299,24 +364,95 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="Edituser"
|
||||
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 class="mb-3">
|
||||
<label for="exampleFormControlTextarea1" class="form-label"
|
||||
>ชื่อคณะกรรมการ</label
|
||||
>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="exampleFormControlTextarea1"
|
||||
rows="3"
|
||||
placeholder="กรอกชื่อ"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
ปิดหน้าต่าง
|
||||
</button>
|
||||
<MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
border: 2px solid #567b57 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
border: 2px solid #d24c4a !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-warning {
|
||||
background: #fb8c00 !important;
|
||||
color: #fff;
|
||||
.bg-warning2 {
|
||||
border: 2px solid #fb8c00 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-return {
|
||||
background: #ffca28 !important;
|
||||
color: #fff;
|
||||
border: 2px solid #ffca28 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-special {
|
||||
border: 2px solid #edc7c7 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bgg-green {
|
||||
background-color: #567b57 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.bgg-red {
|
||||
background-color: #d24c4a !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.bgg-warning2 {
|
||||
background-color: #fb8c00 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.bgg-return {
|
||||
background-color: #ffca28 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.bgg-special {
|
||||
background-color: #edc7c7 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.text-red {
|
||||
color: #d24c4a !important;
|
||||
}
|
||||
ol.breadcrumb {
|
||||
padding: 1rem !important;
|
||||
|
||||
@ -101,6 +101,30 @@ const landingColumns = [
|
||||
status: false,
|
||||
},
|
||||
];
|
||||
const userlist = [
|
||||
{
|
||||
dataIndex: "1",
|
||||
firstName: "สมชาย",
|
||||
lastName: "แสงทอง",
|
||||
Affiliation: "ฝอ.2", //สังกัด
|
||||
rank: "ส.ต.ต.", //ยศ
|
||||
old: "32",
|
||||
birthday: "04/03/2534",
|
||||
idcard: "134044411441122",
|
||||
phone: "0325647846",
|
||||
},
|
||||
{
|
||||
dataIndex: "2",
|
||||
firstName: "สมชัย",
|
||||
lastName: "แสงสุข",
|
||||
Affiliation: "ฝอ.2", //สังกัด
|
||||
rank: "ส.ต.ต.", //ยศ
|
||||
old: "32",
|
||||
birthday: "14/07/2534",
|
||||
idcard: "134044411441178",
|
||||
phone: "0325647845",
|
||||
},
|
||||
];
|
||||
export default {
|
||||
components: {
|
||||
MaterialInput,
|
||||
@ -112,6 +136,7 @@ export default {
|
||||
listRoom,
|
||||
NoRoom,
|
||||
vueMkHeader,
|
||||
userlist,
|
||||
};
|
||||
},
|
||||
|
||||
@ -132,11 +157,49 @@ export default {
|
||||
{ label: "พฤศจิกายน", value: "11" },
|
||||
{ label: "ธันวาคม", value: "12" },
|
||||
],
|
||||
optionsUser: [
|
||||
{ label: "มานพ", value: "มานพ" },
|
||||
{ label: "วิชัย", value: "วิชัย" },
|
||||
{ label: "ธนาพร", value: "ธนาพร" },
|
||||
{ label: "มนตรี", value: "มนตรี" },
|
||||
],
|
||||
optionsRoomtype: [
|
||||
{ label: "ช๑", value: "ช๑" },
|
||||
{ label: "ช๒", value: "ช๒" },
|
||||
{ label: "ช๓", value: "ช๓" },
|
||||
],
|
||||
optionsBuilding: [
|
||||
{ label: "อาคารแฟลต 1/11", value: "1" },
|
||||
{ label: "อาคารแฟลต 1/12", value: "2" },
|
||||
{ label: "อาคารแฟลต 1/13", value: "3" },
|
||||
{ label: "อาคารแฟลต 1/14", value: "4" },
|
||||
{ label: "อาคารแฟลต 1/15", value: "5" },
|
||||
{ label: "อาคารแฟลต 1/16", value: "3" },
|
||||
{ label: "อาคารแฟลต 1/17", value: "4" },
|
||||
{ label: "อาคารแฟลต 1/18", value: "5" },
|
||||
{ label: "แฟลตลือชา 1", value: "5" },
|
||||
{ label: "แฟลตลือชา 2", value: "3" },
|
||||
{ label: "แฟลตลือชา 3", value: "4" },
|
||||
{ label: "แฟลตบางเขน 1", value: "5" },
|
||||
{ label: "แฟลตบางเขน 2", value: "5" },
|
||||
],
|
||||
optionsFloor: [
|
||||
{ label: "ชั้น 1", value: "1" },
|
||||
{ label: "ชั้น 2", value: "2" },
|
||||
{ label: "ชั้น 3", value: "3" },
|
||||
{ label: "ชั้น 4", value: "4" },
|
||||
{ label: "ชั้น 5", value: "5" },
|
||||
],
|
||||
optionsRoom: [
|
||||
{ label: "ห้อง 101", value: "1" },
|
||||
{ label: "ห้อง 202", value: "2" },
|
||||
{ label: "ห้อง 303", value: "3" },
|
||||
{ label: "ห้อง 404", value: "4" },
|
||||
{ label: "ห้อง 505", value: "5" },
|
||||
],
|
||||
selectedBuilding: "อาคารแฟลต 1/11",
|
||||
selectedFloor: "ชั้น 1",
|
||||
selectedRoom: "ห้อง 101",
|
||||
selectedMonth: "ตุลาคม",
|
||||
firstName: "สมชาย",
|
||||
lastName: "0237",
|
||||
@ -205,151 +268,790 @@ export default {
|
||||
:routes="[
|
||||
{ label: 'หน้าหลัก', route: '/' },
|
||||
{ label: 'สถานะห้องพัก', route: '/room' },
|
||||
{ label: 'แก้ไขรายละเอียดห้อง' },
|
||||
{ label: 'จัดการห้องพัก' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<!-- d-flex justify-content-between -->
|
||||
<h4>แก้ไขรายละเอียดห้อง</h4>
|
||||
<div class="row pt-4">
|
||||
<div class="card mb-3">
|
||||
<div class="row g-0">
|
||||
<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 class="card-body">
|
||||
<h5 class="card-title">แก้ไขรายละเอียดห้อง</h5>
|
||||
<h4>จัดการห้องพัก</h4>
|
||||
<div class="row pt-4 min-vh-45">
|
||||
<div class="col-lg-3">
|
||||
<div
|
||||
class="nav flex-column nav-pills me-3"
|
||||
id="v-pills-tab"
|
||||
role="tablist"
|
||||
aria-orientation="vertical"
|
||||
>
|
||||
<button
|
||||
class="nav-link active"
|
||||
id="v-pills-home-tab"
|
||||
data-bs-toggle="pill"
|
||||
data-bs-target="#v-pills-home"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-controls="v-pills-home"
|
||||
aria-selected="true"
|
||||
>
|
||||
แก้ไขรายละเอียดห้องพัก
|
||||
</button>
|
||||
<button
|
||||
class="nav-link"
|
||||
id="v-pills-profile-tab"
|
||||
data-bs-toggle="pill"
|
||||
data-bs-target="#v-pills-profile"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-controls="v-pills-profile"
|
||||
aria-selected="false"
|
||||
>
|
||||
จัดการคิว
|
||||
</button>
|
||||
<button
|
||||
class="nav-link"
|
||||
id="v-pills-messages-tab"
|
||||
data-bs-toggle="pill"
|
||||
data-bs-target="#v-pills-messages"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-controls="v-pills-messages"
|
||||
aria-selected="false"
|
||||
>
|
||||
คืนห้องพัก
|
||||
</button>
|
||||
<button
|
||||
class="nav-link"
|
||||
id="v-pills-settings-tab"
|
||||
data-bs-toggle="pill"
|
||||
data-bs-target="#v-pills-settings"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-controls="v-pills-settings"
|
||||
aria-selected="false"
|
||||
>
|
||||
ค่าสาธารณูปโภค
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="tab-content" id="v-pills-tabContent">
|
||||
<div
|
||||
class="tab-pane fade show active"
|
||||
id="v-pills-home"
|
||||
role="tabpanel"
|
||||
aria-labelledby="v-pills-home-tab"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div>
|
||||
<h5>แก้ไขรายละเอียด ห้อง 2</h5>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="lastName"
|
||||
@input="(event) => (lastName = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="มิเตอร์น้ำ"
|
||||
type="text"
|
||||
placeholder="มิเตอร์น้ำ"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Affiliation"
|
||||
@input="(event) => (Affiliation = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="มิเตอร์ไฟ"
|
||||
type="text"
|
||||
placeholder="มิเตอร์ไฟ"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>ประเภทห้องพัก</label>
|
||||
<v-select
|
||||
:options="optionsRoomtype"
|
||||
v-model="selectedRoomtype"
|
||||
></v-select>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="lastName"
|
||||
@input="(event) => (lastName = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="มิเตอร์น้ำ"
|
||||
type="text"
|
||||
placeholder="มิเตอร์น้ำ"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Affiliation"
|
||||
@input="(event) => (Affiliation = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="มิเตอร์ไฟ"
|
||||
type="text"
|
||||
placeholder="มิเตอร์ไฟ"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>ประเภทห้องพัก</label>
|
||||
<v-select
|
||||
:options="optionsRoomtype"
|
||||
v-model="selectedRoomtype"
|
||||
></v-select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Roomconditions"
|
||||
@input="(event) => (Roomconditions = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="สภาพห้อง"
|
||||
type="text"
|
||||
placeholder="สภาพห้อง"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<label style="margin-right: 20px">สภาพห้อง</label>
|
||||
<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="col-4">
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="birthday"
|
||||
@input="(event) => (birthday = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ค่าไฟฟ้าส่วนกลาง"
|
||||
type="text"
|
||||
placeholder="ค่าไฟฟ้าส่วนกลาง"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="old"
|
||||
@input="(event) => (old = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ค่าบำรุงลิฟท์"
|
||||
type="number"
|
||||
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"
|
||||
@input="(event) => (rank = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="สภาพห้อง"
|
||||
type="text"
|
||||
placeholder="สภาพห้อง"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="text-center" style="margin-right: 100px">
|
||||
<div class="text-center">
|
||||
<MaterialButton variant="gradient" color="success"
|
||||
>บันทึก</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="tab-pane fade"
|
||||
id="v-pills-profile"
|
||||
role="tabpanel"
|
||||
aria-labelledby="v-pills-profile-tab"
|
||||
>
|
||||
<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-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>
|
||||
<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
|
||||
class="tab-pane fade"
|
||||
id="v-pills-messages"
|
||||
role="tabpanel"
|
||||
aria-labelledby="v-pills-messages-tab"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="mb-3"
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div class="form-check form-check-inline">
|
||||
<label style="margin-right: 20px">กุญแจห้อง</label>
|
||||
<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 style="width: 360px; margin-bottom: 10px">
|
||||
<MaterialInput
|
||||
name="contract"
|
||||
:value="contract"
|
||||
@input="(event) => (contract = event.target.value)"
|
||||
class="input-group-static"
|
||||
type="text"
|
||||
placeholder="สาเหตุ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mb-3"
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div class="form-check form-check-inline">
|
||||
<label style="margin-right: 20px">ทะเบียนบ้าน</label>
|
||||
<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 style="width: 360px; margin-bottom: 10px">
|
||||
<MaterialInput
|
||||
name="contract"
|
||||
:value="contract"
|
||||
@input="(event) => (contract = event.target.value)"
|
||||
class="input-group-static"
|
||||
type="text"
|
||||
placeholder="สาเหตุ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label style="padding-left: 30px"
|
||||
>หลักฐานแสดงการชําระค่าไฟเดือนล่าสุด</label
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="mb-3"
|
||||
style="
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<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 style="width: 250px; margin-bottom: 10px">
|
||||
<MaterialInput
|
||||
name="contract"
|
||||
:value="contract"
|
||||
@input="(event) => (contract = event.target.value)"
|
||||
class="input-group-static"
|
||||
type="text"
|
||||
placeholder="สาเหตุ"
|
||||
/>
|
||||
</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 style="width: 250px; margin-bottom: 10px">
|
||||
<MaterialInput
|
||||
name="contract"
|
||||
:value="contract"
|
||||
@input="(event) => (contract = event.target.value)"
|
||||
class="input-group-static"
|
||||
type="text"
|
||||
placeholder="สาเหตุ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4 text-end">
|
||||
<MaterialButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
@click="submitForm"
|
||||
html-type="submit"
|
||||
>บันทึก</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="tab-pane fade"
|
||||
id="v-pills-settings"
|
||||
role="tabpanel"
|
||||
aria-labelledby="v-pills-settings-tab"
|
||||
>
|
||||
<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>
|
||||
</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 align-items-baseline pt-4">
|
||||
<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="#staticBackdrop11"
|
||||
>เพิ่มค่าใช้จ่ายบ้านพัก ตร.</MaterialButton
|
||||
>
|
||||
</div>
|
||||
<div class="text-center pt-4 table-responsive">
|
||||
<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>
|
||||
<th scope="col">ค่าประกัน</th>
|
||||
<th scope="col">จำนวนงวดประกัน</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>อาคารแฟลต 1/11</td>
|
||||
<td>2</td>
|
||||
<td>202</td>
|
||||
<td>20,000</td>
|
||||
<td>8,000</td>
|
||||
<td>20,000</td>
|
||||
<td>8,000</td>
|
||||
<td>20,000</td>
|
||||
<td>10,000</td>
|
||||
<td>5</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 align-items-baseline pt-4">
|
||||
<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="#staticBackdrop12"
|
||||
>เพิ่มค่าใช้จ่ายบ้านพัก บช.ตชด.</MaterialButton
|
||||
>
|
||||
</div>
|
||||
<div class="text-center pt-4 table-responsive">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>อาคารแฟลต 1/14</td>
|
||||
<td>2</td>
|
||||
<td>202</td>
|
||||
<td>20,000</td>
|
||||
<td>8,000</td>
|
||||
<td>8</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="optionsUser" 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>
|
||||
<!-- Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="staticBackdrop11"
|
||||
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="optionsBuilding"
|
||||
v-model="selectedBuilding"
|
||||
></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>ชั้น</label>
|
||||
<v-select :options="optionsFloor" v-model="selectedFloor"></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>เลขที่ห้อง</label>
|
||||
<v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
name="fee"
|
||||
:value="fee"
|
||||
@input="(event) => (fee = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ค่าธรรมเนียม"
|
||||
type="text"
|
||||
placeholder="ค่าธรรมเนียม"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Waterbill"
|
||||
@input="(event) => (Waterbill = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ค่าน้ำประปา"
|
||||
type="text"
|
||||
placeholder="ค่าน้ำประปา"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Electricitybill"
|
||||
@input="(event) => (Electricitybill = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ค่าไฟฟ้า"
|
||||
type="text"
|
||||
placeholder="ค่าไฟฟ้า"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Central"
|
||||
@input="(event) => (Central = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ค่าไฟฟ้าส่วนกลาง"
|
||||
type="text"
|
||||
placeholder="ค่าไฟฟ้าส่วนกลาง"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Costs"
|
||||
@input="(event) => (Costs = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ค่าบำรุงลิฟท์"
|
||||
type="text"
|
||||
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">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
ปิดหน้าต่าง
|
||||
</button>
|
||||
<MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="staticBackdrop12"
|
||||
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">
|
||||
<h6 class="modal-title" id="staticBackdropLabel">
|
||||
เพิ่มค่าใช้จ่ายบ้านพัก บช.ตชด. ประจำเดือนตุลาคม
|
||||
</h6>
|
||||
<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="optionsBuilding"
|
||||
v-model="selectedBuilding"
|
||||
></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>ชั้น</label>
|
||||
<v-select :options="optionsFloor" v-model="selectedFloor"></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>เลขที่ห้อง</label>
|
||||
<v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
name="Maintenance"
|
||||
: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) => (Insurance = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ค่าน้ำประปา"
|
||||
type="text"
|
||||
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">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
ปิดหน้าต่าง
|
||||
</button>
|
||||
<MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
border: 2px solid #567b57 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
border: 2px solid #d24c4a !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
.bg-warning {
|
||||
border: 2px solid #fb8c00 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-return {
|
||||
border: 2px solid #ffca28 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-special {
|
||||
border: 2px solid #edc7c7 !important;
|
||||
color: #000;
|
||||
}
|
||||
.vs__actions {
|
||||
cursor: pointer;
|
||||
|
||||
@ -3,6 +3,8 @@ import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
import vueMkHeader from "@/assets/img/bg.jpg";
|
||||
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
|
||||
import masterData from "@/assets/dataJson/masterData.json";
|
||||
|
||||
const listRoom = [
|
||||
{ title: "ตึก 1" },
|
||||
{ title: "ตึก 2" },
|
||||
@ -103,6 +105,7 @@ export default {
|
||||
NoRoom,
|
||||
landingColumns,
|
||||
vueMkHeader,
|
||||
masterData
|
||||
};
|
||||
},
|
||||
|
||||
@ -185,26 +188,26 @@ export default {
|
||||
>สร้างผังห้อง</MaterialButton
|
||||
>
|
||||
</div>
|
||||
<div class="text-center pt-4">
|
||||
<div class="text-center pt-4 table-responsive">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>พื้นที่</td>
|
||||
<td>ตึก1</td>
|
||||
<td>3</td>
|
||||
<td>20</td>
|
||||
<td>ช๑</td>
|
||||
<tr v-for="(item, index) in masterData?.building" :key="index">
|
||||
<th scope="row">{{ index+1 }}</th>
|
||||
<td>{{item?.buil}}</td>
|
||||
<td>{{item?.name}}</td>
|
||||
<td>{{item?.floor}}</td>
|
||||
<td>{{item?.room}}</td>
|
||||
<td>{{item?.type}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -241,9 +244,9 @@ export default {
|
||||
:value="Area"
|
||||
@input="(event) => (Area = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="พื้นที่"
|
||||
label="อาคารบ้านพัก"
|
||||
type="text"
|
||||
placeholder="พื้นที่"
|
||||
placeholder="อาคารบ้านพัก"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
@ -251,9 +254,9 @@ export default {
|
||||
:value="Building"
|
||||
@input="(event) => (Building = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ตึก"
|
||||
label="ชื่ออาคาร"
|
||||
type="text"
|
||||
placeholder="ตึก"
|
||||
placeholder="ชื่ออาคาร"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
@ -299,16 +302,25 @@ export default {
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
border: 2px solid #567b57 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
border: 2px solid #d24c4a !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
.bg-warning {
|
||||
border: 2px solid #fb8c00 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-return {
|
||||
border: 2px solid #ffca28 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-special {
|
||||
border: 2px solid #edc7c7 !important;
|
||||
color: #000;
|
||||
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
|
||||
@ -406,18 +406,7 @@ export default {
|
||||
</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;
|
||||
|
||||
@ -3,6 +3,7 @@ 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";
|
||||
import masterData from "@/assets/dataJson/masterData.json";
|
||||
|
||||
const listRoom = [
|
||||
{ title: "ตึก 1" },
|
||||
@ -29,8 +30,8 @@ const userlist = [
|
||||
dataIndex: "1",
|
||||
firstName: "สมชาย",
|
||||
lastName: "แสงทอง",
|
||||
Affiliation: "บก", //สังกัด
|
||||
rank: "ร้อยตรี", //ยศ
|
||||
Affiliation: "ฝอ.1", //สังกัด
|
||||
rank: "ส.ต.ต.", //ยศ
|
||||
old: "32",
|
||||
birthday: "04/03/2534",
|
||||
idcard: "134044411441122",
|
||||
@ -40,8 +41,8 @@ const userlist = [
|
||||
dataIndex: "2",
|
||||
firstName: "สมชัย",
|
||||
lastName: "แสงสุข",
|
||||
Affiliation: "กก", //สังกัด
|
||||
rank: "ร้อยตรี", //ยศ
|
||||
Affiliation: "ฝอ.2", //สังกัด
|
||||
rank: "ส.ต.ต.", //ยศ
|
||||
old: "32",
|
||||
birthday: "14/07/2534",
|
||||
idcard: "134044411441178",
|
||||
@ -61,6 +62,7 @@ export default {
|
||||
NoRoom,
|
||||
userlist,
|
||||
vueMkHeader,
|
||||
masterData
|
||||
};
|
||||
},
|
||||
|
||||
@ -75,14 +77,20 @@ export default {
|
||||
{ label: "Phoenix", value: "Elixir" },
|
||||
],
|
||||
selectedColor: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
firstName: "สมชัย",
|
||||
lastName: "แสงสุข",
|
||||
Affiliation: "", //สังกัด
|
||||
rank: "", //ยศ
|
||||
idcard: "",
|
||||
phone: "",
|
||||
idcard: "134044411441178",
|
||||
phone: "0325647845",
|
||||
selectedRanks: 'ส.ต.ต.',
|
||||
selectedAffiliation: 'ฝอ.2',
|
||||
birthday: "14/07/2534"
|
||||
};
|
||||
},
|
||||
created(){
|
||||
console.log(this.masterData);
|
||||
},
|
||||
watch: {
|
||||
selectedColor: function (newValue) {
|
||||
// this.updateColor(newValue)
|
||||
@ -154,7 +162,7 @@ export default {
|
||||
>เพิ่มสมาชิก</MaterialButton
|
||||
>
|
||||
</div>
|
||||
<div class="text-center pt-4">
|
||||
<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>
|
||||
@ -254,25 +262,19 @@ export default {
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Affiliation"
|
||||
@input="(event) => (Affiliation = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="สังกัด"
|
||||
type="text"
|
||||
placeholder="สังกัด"
|
||||
/>
|
||||
</div>
|
||||
<label>สังกัด</label>
|
||||
<v-select
|
||||
:options="masterData?.Affiliation"
|
||||
v-model="selectedAffiliation"
|
||||
></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="rank"
|
||||
@input="(event) => (rank = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ยศ"
|
||||
type="text"
|
||||
placeholder="ยศ"
|
||||
/>
|
||||
</div>
|
||||
<label>ยศ</label>
|
||||
<v-select
|
||||
:options="masterData?.ranks"
|
||||
v-model="selectedRanks"
|
||||
></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="idcard"
|
||||
@ -366,25 +368,19 @@ export default {
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="Affiliation"
|
||||
@input="(event) => (Affiliation = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="สังกัด"
|
||||
type="text"
|
||||
placeholder="สังกัด"
|
||||
/>
|
||||
</div>
|
||||
<label>สังกัด</label>
|
||||
<v-select
|
||||
:options="masterData?.Affiliation"
|
||||
v-model="selectedAffiliation"
|
||||
></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="rank"
|
||||
@input="(event) => (rank = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ยศ"
|
||||
type="text"
|
||||
placeholder="ยศ"
|
||||
/>
|
||||
</div>
|
||||
<label>ยศ</label>
|
||||
<v-select
|
||||
:options="masterData?.ranks"
|
||||
v-model="selectedRanks"
|
||||
></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="idcard"
|
||||
@ -426,16 +422,25 @@ export default {
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
border: 2px solid #567b57 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
border: 2px solid #d24c4a !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
.bg-warning {
|
||||
border: 2px solid #fb8c00 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-return {
|
||||
border: 2px solid #ffca28 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-special {
|
||||
border: 2px solid #edc7c7 !important;
|
||||
color: #000;
|
||||
|
||||
}
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
|
||||
@ -110,11 +110,19 @@ export default {
|
||||
return {
|
||||
value: { name: "Vue.js", language: "JavaScript" },
|
||||
optionsBuilding: [
|
||||
{ label: "ตึก 1", value: "1" },
|
||||
{ label: "ตึก 2", value: "2" },
|
||||
{ label: "ตึก 3", value: "3" },
|
||||
{ label: "ตึก 4", value: "4" },
|
||||
{ label: "ตึก 5", value: "5" },
|
||||
{ label: "อาคารแฟลต 1/11", value: "1" },
|
||||
{ label: "อาคารแฟลต 1/12", value: "2" },
|
||||
{ label: "อาคารแฟลต 1/13", value: "3" },
|
||||
{ label: "อาคารแฟลต 1/14", value: "4" },
|
||||
{ label: "อาคารแฟลต 1/15", value: "5" },
|
||||
{ label: "อาคารแฟลต 1/16", value: "3" },
|
||||
{ label: "อาคารแฟลต 1/17", value: "4" },
|
||||
{ label: "อาคารแฟลต 1/18", value: "5" },
|
||||
{ label: "แฟลตลือชา 1", value: "5" },
|
||||
{ label: "แฟลตลือชา 2", value: "3" },
|
||||
{ label: "แฟลตลือชา 3", value: "4" },
|
||||
{ label: "แฟลตบางเขน 1", value: "5" },
|
||||
{ label: "แฟลตบางเขน 2", value: "5" },
|
||||
],
|
||||
optionsFloor: [
|
||||
{ label: "ชั้น 1", value: "1" },
|
||||
@ -124,15 +132,15 @@ export default {
|
||||
{ label: "ชั้น 5", value: "5" },
|
||||
],
|
||||
optionsRoom: [
|
||||
{ label: "ห้อง 1", value: "1" },
|
||||
{ label: "ห้อง 2", value: "2" },
|
||||
{ label: "ห้อง 3", value: "3" },
|
||||
{ label: "ห้อง 4", value: "4" },
|
||||
{ label: "ห้อง 5", value: "5" },
|
||||
{ label: "ห้อง 101", value: "1" },
|
||||
{ label: "ห้อง 202", value: "2" },
|
||||
{ label: "ห้อง 303", value: "3" },
|
||||
{ label: "ห้อง 404", value: "4" },
|
||||
{ label: "ห้อง 505", value: "5" },
|
||||
],
|
||||
selectedBuilding: "ตึก 1",
|
||||
selectedBuilding: "อาคารแฟลต 1/11",
|
||||
selectedFloor: "ชั้น 1",
|
||||
selectedRoom: "ห้อง 1",
|
||||
selectedRoom: "ห้อง 101",
|
||||
fee: "",
|
||||
Waterbill: "",
|
||||
Electricitybill: "",
|
||||
@ -177,11 +185,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>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
@ -254,14 +262,14 @@ export default {
|
||||
>เพิ่มค่าใช้จ่ายบ้านพัก ตร.</MaterialButton
|
||||
>
|
||||
</div>
|
||||
<div class="text-center pt-4">
|
||||
<div class="text-center pt-4 table-responsive">
|
||||
<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>
|
||||
@ -274,9 +282,9 @@ export default {
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>1</td>
|
||||
<td>อาคารแฟลต 1/11</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
<td>202</td>
|
||||
<td>20,000</td>
|
||||
<td>8,000</td>
|
||||
<td>20,000</td>
|
||||
@ -312,14 +320,14 @@ export default {
|
||||
>เพิ่มค่าใช้จ่ายบ้านพัก บช.ตชด.</MaterialButton
|
||||
>
|
||||
</div>
|
||||
<div class="text-center pt-4">
|
||||
<div class="text-center pt-4 table-responsive">
|
||||
<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>
|
||||
@ -328,9 +336,9 @@ export default {
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>1</td>
|
||||
<td>อาคารแฟลต 1/14</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
<td>202</td>
|
||||
<td>20,000</td>
|
||||
<td>8,000</td>
|
||||
<td>8</td>
|
||||
@ -367,17 +375,110 @@ export default {
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
<td>ตุลาคม</td>
|
||||
<td>อาคารบ้านพัก บช. ตชด.</td>
|
||||
<td>
|
||||
<MaterialButton
|
||||
size="lg"
|
||||
class="btn-icon"
|
||||
style="margin-right: -0px"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<span style="margin-right: 5px">บันทึก</span>
|
||||
<img
|
||||
src="../../assets/img/pdf.png"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
width="24"
|
||||
/>
|
||||
</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="24"
|
||||
/>
|
||||
</div>
|
||||
</MaterialButton>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>ตุลาคม</td>
|
||||
<td>อาคารบ้านพักส่วนกลาง</td>
|
||||
<td>
|
||||
<MaterialButton
|
||||
size="lg"
|
||||
class="btn-icon"
|
||||
style="margin-right: -0px"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<span style="margin-right: 5px">บันทึก</span>
|
||||
<img
|
||||
src="../../assets/img/pdf.png"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
width="24"
|
||||
/>
|
||||
</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="24"
|
||||
/>
|
||||
</div>
|
||||
</MaterialButton>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>ตุลาคม</td>
|
||||
<td>อาคารบ้านพัก ตร.</td>
|
||||
<td>
|
||||
<MaterialButton
|
||||
size="lg"
|
||||
class="btn-icon"
|
||||
style="margin-right: -0px"
|
||||
>
|
||||
<div class="d-flex align-items-center">
|
||||
<span style="margin-right: 5px">บันทึก</span>
|
||||
<img
|
||||
src="../../assets/img/pdf.png"
|
||||
alt="title"
|
||||
loading="lazy"
|
||||
width="24"
|
||||
/>
|
||||
</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="24"
|
||||
/>
|
||||
</div>
|
||||
</MaterialButton>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -415,7 +516,7 @@ export default {
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<label>ตึก</label>
|
||||
<label>อาคาร</label>
|
||||
<v-select
|
||||
:options="optionsBuilding"
|
||||
v-model="selectedBuilding"
|
||||
@ -426,7 +527,7 @@ export default {
|
||||
<v-select :options="optionsFloor" v-model="selectedFloor"></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>ห้อง</label>
|
||||
<label>เลขที่ห้อง</label>
|
||||
<v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
@ -538,7 +639,7 @@ export default {
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<label>ตึก</label>
|
||||
<label>อาคาร</label>
|
||||
<v-select
|
||||
:options="optionsBuilding"
|
||||
v-model="selectedBuilding"
|
||||
@ -549,7 +650,7 @@ export default {
|
||||
<v-select :options="optionsFloor" v-model="selectedFloor"></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label>ห้อง</label>
|
||||
<label>เลขที่ห้อง</label>
|
||||
<v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
@ -686,15 +787,23 @@ export default {
|
||||
</template>
|
||||
<style>
|
||||
.bg-green {
|
||||
background: #567b57 !important;
|
||||
color: #fff;
|
||||
border: 2px solid #567b57 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-red {
|
||||
background: #d24c4a !important;
|
||||
color: #fff;
|
||||
border: 2px solid #d24c4a !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-waring {
|
||||
background: #d1d3d5 !important;
|
||||
color: #fff;
|
||||
.bg-warning {
|
||||
border: 2px solid #fb8c00 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-return {
|
||||
border: 2px solid #ffca28 !important;
|
||||
color: #000;
|
||||
}
|
||||
.bg-special {
|
||||
border: 2px solid #edc7c7 !important;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user