mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-05-23 04:04:22 +08:00
update funtion
This commit is contained in:
kamoa457
parent
18efc9a7d9
commit
69ce010b7b
19
db.json
Normal file
19
db.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"books": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "The Brothers Karamazov",
|
||||
"author": "Fyodor Dostoevsky"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "Infinite Jest",
|
||||
"author": "David Foster Wallace"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "Suttree",
|
||||
"author": "Cormac McCarthy"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
"name": "vue-material-kit-2",
|
||||
"version": "2.0.0",
|
||||
"scripts": {
|
||||
"db:serve": " json-server --watch db.json --port=3002",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview --port 4173",
|
||||
@ -10,6 +11,7 @@
|
||||
"dependencies": {
|
||||
"@popperjs/core": "2.11.5",
|
||||
"@trevoreyre/autocomplete-vue": "^2.4.1",
|
||||
"axios": "^1.5.1",
|
||||
"bootstrap": "5.1.3",
|
||||
"pinia": "2.0.14",
|
||||
"prismjs": "1.28.0",
|
||||
@ -18,7 +20,8 @@
|
||||
"vue-clipboard3": "2.0.0",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-prism-editor": "2.0.0-alpha.2",
|
||||
"vue-router": "4.0.15"
|
||||
"vue-router": "4.0.15",
|
||||
"vue-select": "^4.0.0-beta.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "1.1.0",
|
||||
@ -29,6 +32,6 @@
|
||||
"prettier": "2.5.1",
|
||||
"sass": "1.52.3",
|
||||
"sass-loader": "13.0.0",
|
||||
"vite": "2.9.9"
|
||||
"vite": "^2.9.16"
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,8 +14,10 @@ Coded by www.creative-tim.com
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
import { RouterView } from "vue-router";
|
||||
import 'vue-select/dist/vue-select.css';
|
||||
</script>
|
||||
<style>
|
||||
@import "vue-select/dist/vue-select.css";
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<router-view />
|
||||
|
||||
67
src/assets/dataJson/rooms.json
Normal file
67
src/assets/dataJson/rooms.json
Normal file
@ -0,0 +1,67 @@
|
||||
[
|
||||
{
|
||||
"title": "ห้อง 1",
|
||||
"dataIndex": "1",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 2",
|
||||
"dataIndex": "2",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 3",
|
||||
"dataIndex": "3",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 4",
|
||||
"dataIndex": "4",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 5",
|
||||
"dataIndex": "5",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 6",
|
||||
"dataIndex": "6",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 7",
|
||||
"dataIndex": "7",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 8",
|
||||
"dataIndex": "8",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 9",
|
||||
"dataIndex": "9",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 10",
|
||||
"dataIndex": "10",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 11",
|
||||
"dataIndex": "11",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 12",
|
||||
"dataIndex": "12",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"title": "ห้อง 13",
|
||||
"dataIndex": "13",
|
||||
"status": false
|
||||
}
|
||||
]
|
||||
0
src/assets/dataJson/users.json
Normal file
0
src/assets/dataJson/users.json
Normal file
19
src/data.json
Normal file
19
src/data.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"books": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "The Brothers Karamazov",
|
||||
"author": "Fyodor Dostoevsky"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "Infinite Jest",
|
||||
"author": "David Foster Wallace"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "Suttree",
|
||||
"author": "Cormac McCarthy"
|
||||
}
|
||||
]
|
||||
}
|
||||
10
src/main.js
10
src/main.js
@ -9,12 +9,12 @@ import "./assets/css/nucleo-icons.css";
|
||||
import "./assets/css/nucleo-svg.css";
|
||||
|
||||
import materialKit from "./material-kit";
|
||||
import vSelect from 'vue-select'
|
||||
import VueSelect from "vue-select";
|
||||
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
|
||||
app.component('v-select', vSelect)
|
||||
app.component("v-select", VueSelect)
|
||||
app.use(createPinia());
|
||||
app.use(router);
|
||||
app.use(materialKit);
|
||||
app.use(materialKit)
|
||||
app.mount("#app");
|
||||
|
||||
@ -3,10 +3,11 @@ import { onMounted } from "vue";
|
||||
|
||||
//image
|
||||
import image from "@/assets/img/illustrations/illustration-signin.jpg";
|
||||
|
||||
import vueMkHeader from "@/assets/img/bg.jpg";
|
||||
//material components
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
onMounted(() => {
|
||||
@ -101,29 +102,73 @@ const landingColumns = [
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<section>
|
||||
<div class="page-header min-vh-45">
|
||||
<Header>
|
||||
<div
|
||||
class="page-header min-vh-45"
|
||||
:style="`background-image: url(${vueMkHeader})`"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="container">
|
||||
<!-- d-flex justify-content-between -->
|
||||
<h4>รายละเอียดห้อง</h4>
|
||||
<div class="row pt-4">
|
||||
<div class="card mb-3" style="max-width: 540px">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4">
|
||||
<img 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>
|
||||
<p class="card-text">
|
||||
ชือ : มานะ
|
||||
</p>
|
||||
<p class="card-text">
|
||||
นามสกุล : ถือดี
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</p>
|
||||
<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: 'สถานะห้องพัก', route: '/room' },
|
||||
{ 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>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<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>
|
||||
<p class="card-text">ระยะเวลาที่เข้าพัก : 3 เดือน</p>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<p class="card-text">นามสกุล : ถือดี</p>
|
||||
<p class="card-text">สังกัด : กก</p>
|
||||
<p class="card-text">เลขบัตรประชาชน : 123456123456</p>
|
||||
<p class="card-text">เบอร์โทร : 0972534887</p>
|
||||
<p class="card-text">เงินค่าประกัน : 12,000</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <p class="card-text">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
<script>
|
||||
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 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" },
|
||||
@ -94,12 +100,15 @@ export default {
|
||||
components: {
|
||||
MaterialInput,
|
||||
MaterialButton,
|
||||
Breadcrumbs,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
listRoom,
|
||||
NoRoom,
|
||||
landingColumns,
|
||||
vueMkHeader,
|
||||
roomData,
|
||||
};
|
||||
},
|
||||
|
||||
@ -113,147 +122,170 @@ export default {
|
||||
{ label: "Laravel", value: "PHP" },
|
||||
{ label: "Phoenix", value: "Elixir" },
|
||||
],
|
||||
selectedColor: '',
|
||||
selectedColor: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
selectedColor: function (newValue) {
|
||||
// this.updateColor(newValue)
|
||||
console.log(newValue);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
changedLabel(event) {
|
||||
console.log(event);
|
||||
|
||||
// this.selected = event;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section>
|
||||
<div class="page-header min-vh-45">
|
||||
<Header>
|
||||
<div
|
||||
class="page-header min-vh-45"
|
||||
:style="`background-image: url(${vueMkHeader})`"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="container">
|
||||
<!-- d-flex justify-content-between -->
|
||||
<div class="row pt-4">
|
||||
<div class="col-8">
|
||||
<div class="nav-item dropdown dropdown-hover mx-2">
|
||||
<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 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">
|
||||
<!-- d-flex justify-content-between -->
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'สถานะห้องพัก' }]"
|
||||
/>
|
||||
</div>
|
||||
<div class="row pt-4">
|
||||
<div class="col-8">
|
||||
<div class="nav-item dropdown dropdown-hover mx-2">
|
||||
<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>
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<MaterialInput
|
||||
class="input-group-dynamic w-100"
|
||||
icon="search"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
/>
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<MaterialInput
|
||||
class="input-group-dynamic w-100"
|
||||
icon="search"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center pt-4">
|
||||
<div v-for="(item, index) in NoRoom" :key="index">
|
||||
<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
|
||||
>
|
||||
</p>
|
||||
<div class="collapse show" id="collapseExample" aria-expanded="true">
|
||||
<div>
|
||||
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
|
||||
<div class="col" v-for="(item, index) in landingColumns" :key="index">
|
||||
<div
|
||||
class="card mb-2"
|
||||
v-bind:class="{ 'bg-red': item?.status, 'bg-green': !item?.status }"
|
||||
:style="{ width: `110px` }"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div
|
||||
style="
|
||||
text-align: right;
|
||||
margin-top: -10px;
|
||||
margin-right: -10px;
|
||||
"
|
||||
>
|
||||
<a
|
||||
v-if="item?.status"
|
||||
:href="`/room/update/${item?.dataIndex}`"
|
||||
class="card-link"
|
||||
><span
|
||||
<div class="text-center pt-4">
|
||||
<div v-for="(item, index) in NoRoom" :key="index">
|
||||
<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
|
||||
>
|
||||
</p>
|
||||
<div class="collapse show" id="collapseExample" aria-expanded="true">
|
||||
<div>
|
||||
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
|
||||
<div class="col" v-for="(item, index) in roomData" :key="index">
|
||||
<div
|
||||
class="card mb-2"
|
||||
v-bind:class="{
|
||||
'bg-red': item?.status,
|
||||
'bg-green': !item?.status,
|
||||
}"
|
||||
:style="{ width: `110px` }"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div
|
||||
style="
|
||||
text-align: right;
|
||||
margin-top: -10px;
|
||||
margin-right: -10px;
|
||||
"
|
||||
>
|
||||
<a
|
||||
v-if="item?.status"
|
||||
class="material-icons"
|
||||
style="color: #fff"
|
||||
>
|
||||
edit
|
||||
</span>
|
||||
<span
|
||||
:href="`/room/update/${item?.dataIndex}`"
|
||||
class="card-link"
|
||||
><span
|
||||
v-if="item?.status"
|
||||
class="material-icons"
|
||||
style="color: #fff"
|
||||
>
|
||||
edit
|
||||
</span>
|
||||
<span
|
||||
v-if="!item?.status"
|
||||
class="material-icons"
|
||||
style="color: #fff"
|
||||
>
|
||||
add
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
style="cursor: pointer"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#staticBackdrop"
|
||||
v-if="!item?.status"
|
||||
class="material-icons"
|
||||
style="color: #fff"
|
||||
class="card-link"
|
||||
>
|
||||
add
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
style="cursor: pointer"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#staticBackdrop"
|
||||
v-if="!item?.status"
|
||||
class="card-link"
|
||||
>
|
||||
<span
|
||||
v-if="!item?.status"
|
||||
class="material-icons"
|
||||
style="color: #fff"
|
||||
<span
|
||||
v-if="!item?.status"
|
||||
class="material-icons"
|
||||
style="color: #fff"
|
||||
>
|
||||
add
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<p class="card-title">
|
||||
<a
|
||||
:href="`/room/detail/${item?.dataIndex}`"
|
||||
class="text-white"
|
||||
>{{ item?.title }}</a
|
||||
>
|
||||
add
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="card-title">
|
||||
<a
|
||||
:href="`/room/detail/${item?.dataIndex}`"
|
||||
class="text-white"
|
||||
>{{ item?.title }}</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -264,7 +296,6 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
|
||||
@ -3,10 +3,12 @@ import { onMounted } from "vue";
|
||||
|
||||
//image
|
||||
import image from "@/assets/img/illustrations/illustration-signin.jpg";
|
||||
|
||||
import vueMkHeader from "@/assets/img/bg.jpg";
|
||||
//material components
|
||||
import MaterialInput from "@/components/MaterialInput.vue";
|
||||
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
|
||||
|
||||
import MaterialButton from "@/components/MaterialButton.vue";
|
||||
// material-input
|
||||
import setMaterialInput from "@/assets/js/material-input";
|
||||
onMounted(() => {
|
||||
@ -101,96 +103,134 @@ const landingColumns = [
|
||||
];
|
||||
</script>
|
||||
<template>
|
||||
<section>
|
||||
<div class="page-header min-vh-45">
|
||||
<Header>
|
||||
<div
|
||||
class="page-header min-vh-45"
|
||||
:style="`background-image: url(${vueMkHeader})`"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="container">
|
||||
<!-- d-flex justify-content-between -->
|
||||
<h4>แก้รายละเอียดห้อง</h4>
|
||||
<div class="row pt-4">
|
||||
<div class="col-8">
|
||||
<div class="nav-item dropdown dropdown-hover mx-2">
|
||||
<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 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: 'สถานะห้องพัก', route: '/room' },
|
||||
{ label: 'แก้ไขรายละเอียดห้อง' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<!-- d-flex justify-content-between -->
|
||||
<h4>แก้ไขรายละเอียดห้อง</h4>
|
||||
<div class="text-end">
|
||||
<MaterialButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#userBackdrop"
|
||||
>เพิ่มรายละเอียดสัญญา</MaterialButton
|
||||
>
|
||||
</div>
|
||||
<div class="row pt-4">
|
||||
<div class="col-8">
|
||||
<div class="nav-item dropdown dropdown-hover mx-2">
|
||||
<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>
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<MaterialInput
|
||||
class="input-group-dynamic w-100"
|
||||
icon="search"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
/>
|
||||
<div class="col-4">
|
||||
<div>
|
||||
<MaterialInput
|
||||
class="input-group-dynamic w-100"
|
||||
icon="search"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center pt-4">
|
||||
<div v-for="(item, index) in NoRoom" :key="index">
|
||||
<p class="text-start mt-4">
|
||||
<a
|
||||
class="btn btn-primary"
|
||||
data-bs-toggle="collapse"
|
||||
href="#collapseExample"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapseExample"
|
||||
>
|
||||
{{ item?.title }}
|
||||
</a>
|
||||
</p>
|
||||
<div class="collapse show" id="collapseExample" aria-expanded="true">
|
||||
<div>
|
||||
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
|
||||
<div class="col" v-for="(item, index) in landingColumns" :key="index">
|
||||
<div
|
||||
class="card mb-2"
|
||||
v-bind:class="{ 'bg-red': item?.status, 'bg-green': !item?.status }"
|
||||
:style="{ width: `110px` }"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div
|
||||
style="
|
||||
text-align: right;
|
||||
margin-top: -10px;
|
||||
margin-right: -10px;
|
||||
"
|
||||
>
|
||||
<a href="#" class="card-link"
|
||||
><span class="material-icons" style="color: #fff">
|
||||
edit
|
||||
</span></a
|
||||
<div class="text-center pt-4">
|
||||
<div v-for="(item, index) in NoRoom" :key="index">
|
||||
<p class="text-start mt-4">
|
||||
<a
|
||||
class="btn btn-primary"
|
||||
data-bs-toggle="collapse"
|
||||
href="#collapseExample"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="collapseExample"
|
||||
>
|
||||
{{ item?.title }}
|
||||
</a>
|
||||
</p>
|
||||
<div class="collapse show" id="collapseExample" aria-expanded="true">
|
||||
<div>
|
||||
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
|
||||
<div class="col" v-for="(item, index) in landingColumns" :key="index">
|
||||
<div
|
||||
class="card mb-2"
|
||||
v-bind:class="{
|
||||
'bg-red': item?.status,
|
||||
'bg-green': !item?.status,
|
||||
}"
|
||||
:style="{ width: `110px` }"
|
||||
>
|
||||
<div class="card-body">
|
||||
<div
|
||||
style="
|
||||
text-align: right;
|
||||
margin-top: -10px;
|
||||
margin-right: -10px;
|
||||
"
|
||||
>
|
||||
<a href="#" class="card-link"
|
||||
><span class="material-icons" style="color: #fff">
|
||||
edit
|
||||
</span></a
|
||||
>
|
||||
</div>
|
||||
<p class="card-title">{{ item?.title }}</p>
|
||||
</div>
|
||||
<p class="card-title">{{ item?.title }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<script>
|
||||
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";
|
||||
const listRoom = [
|
||||
{ title: "ตึก 1" },
|
||||
{ title: "ตึก 2" },
|
||||
@ -94,12 +95,14 @@ export default {
|
||||
components: {
|
||||
MaterialInput,
|
||||
MaterialButton,
|
||||
Breadcrumbs,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
listRoom,
|
||||
NoRoom,
|
||||
landingColumns,
|
||||
vueMkHeader,
|
||||
};
|
||||
},
|
||||
|
||||
@ -131,38 +134,65 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section>
|
||||
<div class="page-header min-vh-45">
|
||||
<Header>
|
||||
<div
|
||||
class="page-header min-vh-45"
|
||||
:style="`background-image: url(${vueMkHeader})`"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="text-end">
|
||||
<MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
|
||||
<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 class="text-center pt-4">
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">ลำดับ</th>
|
||||
<th scope="col">ชื่อ</th>
|
||||
<th scope="col">สกุล</th>
|
||||
<th scope="col">เพศ</th>
|
||||
<th scope="col">ยศ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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 class="d-flex justify-content-between">
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ผังห้องพัก' }]"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<MaterialButton variant="gradient" color="success"
|
||||
>สร้างผังห้อง</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center pt-4">
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">ลำดับ</th>
|
||||
<th scope="col">ชื่อ</th>
|
||||
<th scope="col">สกุล</th>
|
||||
<th scope="col">เพศ</th>
|
||||
<th scope="col">ยศ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<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" },
|
||||
@ -22,84 +24,39 @@ const NoRoom = [
|
||||
{ title: "ชั้น 7" },
|
||||
];
|
||||
|
||||
const landingColumns = [
|
||||
const userlist = [
|
||||
{
|
||||
title: "ห้อง 1",
|
||||
dataIndex: "1",
|
||||
status: true,
|
||||
firstName: "สมชาย",
|
||||
lastName: "แสงทอง",
|
||||
Affiliation: "บก", //สังกัด
|
||||
rank: "ร้อยตรี", //ยศ
|
||||
idcard: "134044411441122",
|
||||
phone: "0325647846"
|
||||
},
|
||||
{
|
||||
title: "ห้อง 2",
|
||||
dataIndex: "2",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 3",
|
||||
dataIndex: "3",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 4",
|
||||
dataIndex: "4",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 5",
|
||||
dataIndex: "5",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 6",
|
||||
dataIndex: "6",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 7",
|
||||
dataIndex: "7",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 8",
|
||||
dataIndex: "8",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 9",
|
||||
dataIndex: "9",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 10",
|
||||
dataIndex: "10",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 11",
|
||||
dataIndex: "11",
|
||||
status: true,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 12",
|
||||
dataIndex: "12",
|
||||
status: false,
|
||||
},
|
||||
{
|
||||
title: "ห้อง 13",
|
||||
dataIndex: "13",
|
||||
status: false,
|
||||
},
|
||||
firstName: "สมชัย",
|
||||
lastName: "แสงสุข",
|
||||
Affiliation: "กก", //สังกัด
|
||||
rank: "ร้อยตรี", //ยศ
|
||||
idcard: "134044411441178",
|
||||
phone: "0325647845"
|
||||
}
|
||||
];
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MaterialInput,
|
||||
MaterialButton,
|
||||
Breadcrumbs,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
listRoom,
|
||||
NoRoom,
|
||||
landingColumns,
|
||||
userlist,
|
||||
vueMkHeader,
|
||||
};
|
||||
},
|
||||
|
||||
@ -114,6 +71,12 @@ export default {
|
||||
{ label: "Phoenix", value: "Elixir" },
|
||||
],
|
||||
selectedColor: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
Affiliation: "", //สังกัด
|
||||
rank: "", //ยศ
|
||||
idcard: "",
|
||||
phone: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -127,42 +90,192 @@ export default {
|
||||
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>
|
||||
<section>
|
||||
<div class="page-header min-vh-45">
|
||||
<Header>
|
||||
<div
|
||||
class="page-header min-vh-45"
|
||||
:style="`background-image: url(${vueMkHeader})`"
|
||||
loading="lazy"
|
||||
>
|
||||
<div class="container">
|
||||
<div class="text-end">
|
||||
<MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
|
||||
<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 class="text-center pt-4">
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">ลำดับ</th>
|
||||
<th scope="col">ชื่อ</th>
|
||||
<th scope="col">สกุล</th>
|
||||
<th scope="col">เพศ</th>
|
||||
<th scope="col">ยศ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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 class="d-flex justify-content-between">
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<MaterialButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#userBackdrop"
|
||||
>เพิ่มสมาชิก</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center pt-4">
|
||||
<table class="table 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 v-for="(item, index) in userlist" :key="index">
|
||||
<th scope="row">{{ index+1 }}</th>
|
||||
<td>{{ item.firstName }}</td>
|
||||
<td>{{ item.lastName }}</td>
|
||||
<td>{{ item.Affiliation }}</td>
|
||||
<td>{{ item.rank }}</td>
|
||||
<td>{{ item.idcard }}</td>
|
||||
<td>{{ item.phone }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="userBackdrop"
|
||||
data-bs-backdrop="static"
|
||||
data-bs-keyboard="false"
|
||||
tabindex="-1"
|
||||
aria-labelledby="staticBackdropLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLabel">เพิ่มสมาชิก</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
name="firstName"
|
||||
:value="firstName"
|
||||
@input="(event) => (firstName = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ชื่อ"
|
||||
type="text"
|
||||
placeholder="ชื่อ"
|
||||
/>
|
||||
</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">
|
||||
<MaterialInput
|
||||
:value="rank"
|
||||
@input="(event) => (rank = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="ยศ"
|
||||
type="text"
|
||||
placeholder="ยศ"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="idcard"
|
||||
@input="(event) => (idcard = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="เลขบัตรประชาชน"
|
||||
type="number"
|
||||
placeholder="เลขบัตรประชาชน"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<MaterialInput
|
||||
:value="phone"
|
||||
@input="(event) => (phone = event.target.value)"
|
||||
class="input-group-static"
|
||||
label="เบอร์ติดต่อ"
|
||||
type="number"
|
||||
placeholder="เบอร์ติดต่อ"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
||||
ปิดหน้าต่าง
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
@click="submitForm"
|
||||
html-type="submit"
|
||||
|
||||
>
|
||||
บันทึก
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -181,4 +294,13 @@ export default {
|
||||
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>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<script>
|
||||
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";
|
||||
const listRoom = [
|
||||
{ title: "ตึก 1" },
|
||||
{ title: "ตึก 2" },
|
||||
@ -94,12 +95,14 @@ export default {
|
||||
components: {
|
||||
MaterialInput,
|
||||
MaterialButton,
|
||||
Breadcrumbs
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
listRoom,
|
||||
NoRoom,
|
||||
landingColumns,
|
||||
vueMkHeader
|
||||
};
|
||||
},
|
||||
|
||||
@ -131,11 +134,34 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section>
|
||||
<div class="page-header min-vh-45">
|
||||
<Header>
|
||||
<div class="page-header min-vh-45" :style="`background-image: url(${vueMkHeader})`" loading="lazy">
|
||||
<div class="container">
|
||||
<div class="text-end">
|
||||
<MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
|
||||
<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 class="d-flex justify-content-between">
|
||||
<div>
|
||||
<Breadcrumbs
|
||||
:routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<MaterialButton variant="gradient" color="success"
|
||||
>เพิ่มสมาชิก</MaterialButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center pt-4">
|
||||
<table class="table table-striped table-bordered table-hover">
|
||||
@ -166,6 +192,8 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
<style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user