xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 21:04:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update funtion

Browse Source
This commit is contained in:
kamoa457 2023-10-19 02:38:44 +07:00
parent 18efc9a7d9
commit 69ce010b7b
13 changed files with 762 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
db.json Normal file
View 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"
}
]
}

7
package.json
View File

@ -2,6 +2,7 @@
"name": "vue-material-kit-2", "name": "vue-material-kit-2",
"version": "2.0.0", "version": "2.0.0",
"scripts": { "scripts": {
"db:serve": " json-server --watch db.json --port=3002",
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview --port 4173", "preview": "vite preview --port 4173",
@ -10,6 +11,7 @@
"dependencies": { "dependencies": {
"@popperjs/core": "2.11.5", "@popperjs/core": "2.11.5",
"@trevoreyre/autocomplete-vue": "^2.4.1", "@trevoreyre/autocomplete-vue": "^2.4.1",
"axios": "^1.5.1",
"bootstrap": "5.1.3", "bootstrap": "5.1.3",
"pinia": "2.0.14", "pinia": "2.0.14",
"prismjs": "1.28.0", "prismjs": "1.28.0",
@ -18,7 +20,8 @@
"vue-clipboard3": "2.0.0", "vue-clipboard3": "2.0.0",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-prism-editor": "2.0.0-alpha.2", "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": { "devDependencies": {
"@rushstack/eslint-patch": "1.1.0", "@rushstack/eslint-patch": "1.1.0",
@ -29,6 +32,6 @@
"prettier": "2.5.1", "prettier": "2.5.1",
"sass": "1.52.3", "sass": "1.52.3",
"sass-loader": "13.0.0", "sass-loader": "13.0.0",
"vite": "2.9.9" "vite": "^2.9.16"
} }
} }

4
src/App.vue
View File

@ -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. * 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 { RouterView } from "vue-router";
import 'vue-select/dist/vue-select.css';
</script> </script>
<style>
@import "vue-select/dist/vue-select.css";
</style>
<template> <template>
<router-view /> <router-view />

67
src/assets/dataJson/rooms.json Normal file
View 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
View File

19
src/data.json Normal file
View 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
View File

@ -9,12 +9,12 @@ import "./assets/css/nucleo-icons.css";
import "./assets/css/nucleo-svg.css"; import "./assets/css/nucleo-svg.css";
import materialKit from "./material-kit"; import materialKit from "./material-kit";
import vSelect from 'vue-select' import VueSelect from "vue-select";
const app = createApp(App); const app = createApp(App);
app.component("v-select", VueSelect)
app.component('v-select', vSelect)
app.use(createPinia()); app.use(createPinia());
app.use(router); app.use(router);
app.use(materialKit); app.use(materialKit)
app.mount("#app"); app.mount("#app");

93
src/views/Restroom/DetailRoomPage.vue
View File

@ -3,10 +3,11 @@ import { onMounted } from "vue";
//image //image
import image from "@/assets/img/illustrations/illustration-signin.jpg"; import image from "@/assets/img/illustrations/illustration-signin.jpg";
import vueMkHeader from "@/assets/img/bg.jpg";
//material components //material components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue";
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
// material-input // material-input
import setMaterialInput from "@/assets/js/material-input"; import setMaterialInput from "@/assets/js/material-input";
onMounted(() => { onMounted(() => {
@ -101,29 +102,73 @@ const landingColumns = [
]; ];
</script> </script>
<template> <template>
<section> <Header>
<div class="page-header min-vh-45"> <div
class="page-header min-vh-45"
:style="`background-image: url(${vueMkHeader})`"
loading="lazy"
>
<div class="container"> <div class="container">
<!-- d-flex justify-content-between --> <div class="row">
<h4>รายละเอียดห้อง</h4> <div class="col-lg-7 text-center mx-auto position-relative">
<div class="row pt-4"> <h1 class="pt-3 mt-n5 me-2 head-text">สถานะห้องพัก</h1>
<div class="card mb-3" style="max-width: 540px"> </div>
<div class="row g-0"> </div>
<div class="col-md-4"> </div>
<img src="../../assets/img/team-4.jpg" class="img-fluid rounded-start" alt="..." /> </div>
</div> </Header>
<div class="col-md-8"> <section>
<div class="card-body"> <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
<h5 class="card-title">รายละเอียดเจ้าของห้อง</h5> <div class="page-header min-vh-45">
<p class="card-text"> <div class="container">
ชือ : มานะ <div>
</p> <Breadcrumbs
<p class="card-text"> :routes="[
นามสกุล : ถือดี { label: 'หน้าหลัก', route: '/' },
</p> { label: 'สถานะห้องพัก', route: '/room' },
<p class="card-text"> { label: 'รายละเอียดห้องพัก' },
<small class="text-muted">Last updated 3 mins ago</small> ]"
</p> />
</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> </div>
</div> </div>

265
src/views/Restroom/RoomView.vue
View File

@ -1,7 +1,13 @@
<script> <script>
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.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 = [ const listRoom = [
{ title: "ตึก 1" }, { title: "ตึก 1" },
{ title: "ตึก 2" }, { title: "ตึก 2" },
@ -94,12 +100,15 @@ export default {
components: { components: {
MaterialInput, MaterialInput,
MaterialButton, MaterialButton,
Breadcrumbs,
}, },
setup() { setup() {
return { return {
listRoom, listRoom,
NoRoom, NoRoom,
landingColumns, landingColumns,
vueMkHeader,
roomData,
}; };
}, },
@ -113,147 +122,170 @@ export default {
{ label: "Laravel", value: "PHP" }, { label: "Laravel", value: "PHP" },
{ label: "Phoenix", value: "Elixir" }, { label: "Phoenix", value: "Elixir" },
], ],
selectedColor: '', selectedColor: "",
}; };
}, },
watch: { created() {
selectedColor: function (newValue) {
// this.updateColor(newValue) },
console.log(newValue);
},
},
methods: { methods: {
changedLabel(event) { changedLabel(event) {
console.log(event); console.log(event);
// this.selected = event; // this.selected = event;
} },
}, },
}; };
</script> </script>
<template> <template>
<section> <Header>
<div class="page-header min-vh-45"> <div
class="page-header min-vh-45"
:style="`background-image: url(${vueMkHeader})`"
loading="lazy"
>
<div class="container"> <div class="container">
<!-- d-flex justify-content-between --> <div class="row">
<div class="row pt-4"> <div class="col-lg-7 text-center mx-auto position-relative">
<div class="col-8"> <h1 class="pt-3 mt-n5 me-2 head-text">สถานะห้องพัก</h1>
<div class="nav-item dropdown dropdown-hover mx-2"> </div>
<a </div>
role="button" </div>
class="nav-link ps-2 d-flex cursor-pointer align-items-center" </div>
id="dropdownMenuPages" </Header>
data-bs-toggle="dropdown" <section>
aria-expanded="false" <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
> <div class="page-header min-vh-45">
<i class="material-icons opacity-6 me-2 text-md">home</i> <div class="container">
ตึก <!-- d-flex justify-content-between -->
</a> <div>
<div <Breadcrumbs
class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3" :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'สถานะห้องพัก' }]"
aria-labelledby="dropdownMenuPages" />
> </div>
<div class="row"> <div class="row pt-4">
<div class="col-12 px-4 py-2"> <div class="col-8">
<div class="row"> <div class="nav-item dropdown dropdown-hover mx-2">
<div class="position-relative"> <a
<p role="button"
class="dropdown-item border-radius-md" class="nav-link ps-2 d-flex cursor-pointer align-items-center"
v-for="(item, index) in listRoom" id="dropdownMenuPages"
:key="index" data-bs-toggle="dropdown"
> aria-expanded="false"
<span>{{ item?.title }}</span> >
</p> <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>
</div> </div>
</div> </div>
</div> <div class="col-4">
<div class="col-4"> <div>
<div> <MaterialInput
<MaterialInput class="input-group-dynamic w-100"
class="input-group-dynamic w-100" icon="search"
icon="search" type="text"
type="text" placeholder="Search"
placeholder="Search" />
/> </div>
</div> </div>
</div> </div>
</div>
<div class="text-center pt-4"> <div class="text-center pt-4">
<div v-for="(item, index) in NoRoom" :key="index"> <div v-for="(item, index) in NoRoom" :key="index">
<p class="text-start mt-4"> <p class="text-start mt-4">
<MaterialButton <MaterialButton
variant="outline" variant="outline"
color="success" color="success"
data-bs-toggle="collapse" data-bs-toggle="collapse"
href="#collapseExample" href="#collapseExample"
aria-expanded="false" aria-expanded="false"
aria-controls="collapseExample" aria-controls="collapseExample"
>{{ item?.title }}</MaterialButton >{{ item?.title }}</MaterialButton
> >
</p> </p>
<div class="collapse show" id="collapseExample" aria-expanded="true"> <div class="collapse show" id="collapseExample" aria-expanded="true">
<div> <div>
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }"> <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="col" v-for="(item, index) in roomData" :key="index">
<div <div
class="card mb-2" class="card mb-2"
v-bind:class="{ 'bg-red': item?.status, 'bg-green': !item?.status }" v-bind:class="{
:style="{ width: `110px` }" 'bg-red': item?.status,
> 'bg-green': !item?.status,
<div class="card-body"> }"
<div :style="{ width: `110px` }"
style=" >
text-align: right; <div class="card-body">
margin-top: -10px; <div
margin-right: -10px; style="
" text-align: right;
> margin-top: -10px;
<a margin-right: -10px;
v-if="item?.status" "
:href="`/room/update/${item?.dataIndex}`" >
class="card-link" <a
><span
v-if="item?.status" v-if="item?.status"
class="material-icons" :href="`/room/update/${item?.dataIndex}`"
style="color: #fff" class="card-link"
> ><span
edit v-if="item?.status"
</span> class="material-icons"
<span 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" v-if="!item?.status"
class="material-icons" class="card-link"
style="color: #fff"
> >
add <span
</span> v-if="!item?.status"
</a> class="material-icons"
<a style="color: #fff"
style="cursor: pointer" >
data-bs-toggle="modal" add
data-bs-target="#staticBackdrop" </span>
v-if="!item?.status" </a>
class="card-link" </div>
> <p class="card-title">
<span <a
v-if="!item?.status" :href="`/room/detail/${item?.dataIndex}`"
class="material-icons" class="text-white"
style="color: #fff" >{{ item?.title }}</a
> >
add </p>
</span>
</a>
</div> </div>
<p class="card-title">
<a
:href="`/room/detail/${item?.dataIndex}`"
class="text-white"
>{{ item?.title }}</a
>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -264,7 +296,6 @@ export default {
</div> </div>
</div> </div>
</div> </div>
<!-- Modal --> <!-- Modal -->
<div <div
class="modal fade" class="modal fade"

198
src/views/Restroom/UpdateRoom.vue
View File

@ -3,10 +3,12 @@ import { onMounted } from "vue";
//image //image
import image from "@/assets/img/illustrations/illustration-signin.jpg"; import image from "@/assets/img/illustrations/illustration-signin.jpg";
import vueMkHeader from "@/assets/img/bg.jpg";
//material components //material components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
import MaterialButton from "@/components/MaterialButton.vue";
// material-input // material-input
import setMaterialInput from "@/assets/js/material-input"; import setMaterialInput from "@/assets/js/material-input";
onMounted(() => { onMounted(() => {
@ -101,96 +103,134 @@ const landingColumns = [
]; ];
</script> </script>
<template> <template>
<section> <Header>
<div class="page-header min-vh-45"> <div
class="page-header min-vh-45"
:style="`background-image: url(${vueMkHeader})`"
loading="lazy"
>
<div class="container"> <div class="container">
<!-- d-flex justify-content-between --> <div class="row">
<h4>แก้รายละเอียดห้อง</h4> <div class="col-lg-7 text-center mx-auto position-relative">
<div class="row pt-4"> <h1 class="pt-3 mt-n5 me-2 head-text">สถานะห้องพัก</h1>
<div class="col-8"> </div>
<div class="nav-item dropdown dropdown-hover mx-2"> </div>
<a </div>
role="button" </div>
class="nav-link ps-2 d-flex cursor-pointer align-items-center" </Header>
id="dropdownMenuPages" <section>
data-bs-toggle="dropdown" <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
aria-expanded="false" <div class="page-header min-vh-45">
> <div class="container">
<i class="material-icons opacity-6 me-2 text-md">home</i> <div>
ตึก <Breadcrumbs
</a> :routes="[
<div { label: 'หน้าหลัก', route: '/' },
class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3" { label: 'สถานะห้องพัก', route: '/room' },
aria-labelledby="dropdownMenuPages" { label: 'แก้ไขรายละเอียดห้อง' },
> ]"
<div class="row"> />
<div class="col-12 px-4 py-2"> </div>
<div class="row"> <!-- d-flex justify-content-between -->
<div class="position-relative"> <h4>แก้ไขรายละเอียดห้อง</h4>
<p <div class="text-end">
class="dropdown-item border-radius-md" <MaterialButton
v-for="(item, index) in listRoom" variant="gradient"
:key="index" color="success"
> data-bs-toggle="modal"
<span>{{ item?.title }}</span> data-bs-target="#userBackdrop"
</p> >เพิ่มรายละเอียดสัญญา</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>
</div> </div>
</div> </div>
</div> <div class="col-4">
<div class="col-4"> <div>
<div> <MaterialInput
<MaterialInput class="input-group-dynamic w-100"
class="input-group-dynamic w-100" icon="search"
icon="search" type="text"
type="text" placeholder="Search"
placeholder="Search" />
/> </div>
</div> </div>
</div> </div>
</div>
<div class="text-center pt-4"> <div class="text-center pt-4">
<div v-for="(item, index) in NoRoom" :key="index"> <div v-for="(item, index) in NoRoom" :key="index">
<p class="text-start mt-4"> <p class="text-start mt-4">
<a <a
class="btn btn-primary" class="btn btn-primary"
data-bs-toggle="collapse" data-bs-toggle="collapse"
href="#collapseExample" href="#collapseExample"
role="button" role="button"
aria-expanded="false" aria-expanded="false"
aria-controls="collapseExample" aria-controls="collapseExample"
> >
{{ item?.title }} {{ item?.title }}
</a> </a>
</p> </p>
<div class="collapse show" id="collapseExample" aria-expanded="true"> <div class="collapse show" id="collapseExample" aria-expanded="true">
<div> <div>
<div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }"> <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="col" v-for="(item, index) in landingColumns" :key="index">
<div <div
class="card mb-2" class="card mb-2"
v-bind:class="{ 'bg-red': item?.status, 'bg-green': !item?.status }" v-bind:class="{
:style="{ width: `110px` }" 'bg-red': item?.status,
> 'bg-green': !item?.status,
<div class="card-body"> }"
<div :style="{ width: `110px` }"
style=" >
text-align: right; <div class="card-body">
margin-top: -10px; <div
margin-right: -10px; style="
" text-align: right;
> margin-top: -10px;
<a href="#" class="card-link" margin-right: -10px;
><span class="material-icons" style="color: #fff"> "
edit
</span></a
> >
<a href="#" class="card-link"
><span class="material-icons" style="color: #fff">
edit
</span></a
>
</div>
<p class="card-title">{{ item?.title }}</p>
</div> </div>
<p class="card-title">{{ item?.title }}</p>
</div> </div>
</div> </div>
</div> </div>

92
src/views/RoomLayout/RoomLayoutView.vue
View File

@ -1,7 +1,8 @@
<script> <script>
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
import vueMkHeader from "@/assets/img/bg.jpg";
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
const listRoom = [ const listRoom = [
{ title: "ตึก 1" }, { title: "ตึก 1" },
{ title: "ตึก 2" }, { title: "ตึก 2" },
@ -94,12 +95,14 @@ export default {
components: { components: {
MaterialInput, MaterialInput,
MaterialButton, MaterialButton,
Breadcrumbs,
}, },
setup() { setup() {
return { return {
listRoom, listRoom,
NoRoom, NoRoom,
landingColumns, landingColumns,
vueMkHeader,
}; };
}, },
@ -131,38 +134,65 @@ export default {
}; };
</script> </script>
<template> <template>
<section> <Header>
<div class="page-header min-vh-45"> <div
class="page-header min-vh-45"
:style="`background-image: url(${vueMkHeader})`"
loading="lazy"
>
<div class="container"> <div class="container">
<div class="text-end"> <div class="row">
<MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton> <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 class="text-center pt-4"> </div>
<table class="table table-striped table-bordered table-hover"> </div>
<thead> </Header>
<tr> <section>
<th scope="col">ลำดับ</th> <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
<th scope="col">ชื่อ</th> <div class="page-header min-vh-45">
<th scope="col">สกุล</th> <div class="container">
<th scope="col">เพศ</th> <div class="d-flex justify-content-between">
<th scope="col">ยศ</th> <div>
</tr> <Breadcrumbs
</thead> :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ผังห้องพัก' }]"
<tbody> />
<tr> </div>
<th scope="row">1</th> <div class="text-end">
<td>Mark</td> <MaterialButton variant="gradient" color="success"
<td>Otto</td> >สร้างผังห้อง</MaterialButton
<td>@mdo</td> >
</tr> </div>
<tr> </div>
<th scope="row">2</th>
<td>Jacob</td> <div class="text-center pt-4">
<td>Thornton</td> <table class="table table-striped table-bordered table-hover">
<td>@fat</td> <thead>
</tr> <tr>
</tbody> <th scope="col">ลำดับ</th>
</table> <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> </div>
</div> </div>

306
src/views/Users/UserlistView.vue
View File

@ -1,6 +1,8 @@
<script> <script>
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
import vueMkHeader from "@/assets/img/bg.jpg";
const listRoom = [ const listRoom = [
{ title: "ตึก 1" }, { title: "ตึก 1" },
@ -22,84 +24,39 @@ const NoRoom = [
{ title: "ชั้น 7" }, { title: "ชั้น 7" },
]; ];
const landingColumns = [ const userlist = [
{ {
title: "ห้อง 1",
dataIndex: "1", dataIndex: "1",
status: true, firstName: "สมชาย",
lastName: "แสงทอง",
Affiliation: "บก", //สังกัด
rank: "ร้อยตรี", //ยศ
idcard: "134044411441122",
phone: "0325647846"
}, },
{ {
title: "ห้อง 2",
dataIndex: "2", dataIndex: "2",
status: false, firstName: "สมชัย",
}, lastName: "แสงสุข",
{ Affiliation: "กก", //สังกัด
title: "ห้อง 3", rank: "ร้อยตรี", //ยศ
dataIndex: "3", idcard: "134044411441178",
status: true, phone: "0325647845"
}, }
{
title: "ห้อง 4",
dataIndex: "4",
status: true,
},
{
title: "ห้อง 5",
dataIndex: "5",
status: false,
},
{
title: "ห้อง 6",
dataIndex: "6",
status: false,
},
{
title: "ห้อง 7",
dataIndex: "7",
status: true,
},
{
title: "ห้อง 8",
dataIndex: "8",
status: false,
},
{
title: "ห้อง 9",
dataIndex: "9",
status: false,
},
{
title: "ห้อง 10",
dataIndex: "10",
status: false,
},
{
title: "ห้อง 11",
dataIndex: "11",
status: true,
},
{
title: "ห้อง 12",
dataIndex: "12",
status: false,
},
{
title: "ห้อง 13",
dataIndex: "13",
status: false,
},
]; ];
export default { export default {
components: { components: {
MaterialInput, MaterialInput,
MaterialButton, MaterialButton,
Breadcrumbs,
}, },
setup() { setup() {
return { return {
listRoom, listRoom,
NoRoom, NoRoom,
landingColumns, userlist,
vueMkHeader,
}; };
}, },
@ -114,6 +71,12 @@ export default {
{ label: "Phoenix", value: "Elixir" }, { label: "Phoenix", value: "Elixir" },
], ],
selectedColor: "", selectedColor: "",
firstName: "",
lastName: "",
Affiliation: "", //สังกัด
rank: "", //ยศ
idcard: "",
phone: "",
}; };
}, },
watch: { watch: {
@ -127,42 +90,192 @@ export default {
console.log(event); console.log(event);
// this.selected = 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> </script>
<template> <template>
<section> <Header>
<div class="page-header min-vh-45"> <div
class="page-header min-vh-45"
:style="`background-image: url(${vueMkHeader})`"
loading="lazy"
>
<div class="container"> <div class="container">
<div class="text-end"> <div class="row">
<MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton> <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 class="text-center pt-4"> </div>
<table class="table table-striped table-bordered table-hover"> </div>
<thead> </Header>
<tr> <section>
<th scope="col">ลำดับ</th> <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
<th scope="col">ชื่อ</th> <div class="page-header min-vh-45">
<th scope="col">สกุล</th> <div class="container">
<th scope="col">เพศ</th> <div class="d-flex justify-content-between">
<th scope="col">ยศ</th> <div>
</tr> <Breadcrumbs
</thead> :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
<tbody> />
<tr> </div>
<th scope="row">1</th> <div class="text-end">
<td>Mark</td> <MaterialButton
<td>Otto</td> variant="gradient"
<td>@mdo</td> color="success"
</tr> data-bs-toggle="modal"
<tr> data-bs-target="#userBackdrop"
<th scope="row">2</th> >เพิ่มสมาชิก</MaterialButton
<td>Jacob</td> >
<td>Thornton</td> </div>
<td>@fat</td> </div>
</tr>
</tbody> <div class="text-center pt-4">
</table> <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> </div>
</div> </div>
@ -181,4 +294,13 @@ export default {
background: #d1d3d5 !important; background: #d1d3d5 !important;
color: #fff; color: #fff;
} }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
</style> </style>

38
src/views/UtilitiesRoom/UtilitieView.vue
View File

@ -1,7 +1,8 @@
<script> <script>
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
import vueMkHeader from "@/assets/img/bg.jpg";
import Breadcrumbs from "@/examples/Breadcrumbs.vue";
const listRoom = [ const listRoom = [
{ title: "ตึก 1" }, { title: "ตึก 1" },
{ title: "ตึก 2" }, { title: "ตึก 2" },
@ -94,12 +95,14 @@ export default {
components: { components: {
MaterialInput, MaterialInput,
MaterialButton, MaterialButton,
Breadcrumbs
}, },
setup() { setup() {
return { return {
listRoom, listRoom,
NoRoom, NoRoom,
landingColumns, landingColumns,
vueMkHeader
}; };
}, },
@ -131,11 +134,34 @@ export default {
}; };
</script> </script>
<template> <template>
<section> <Header>
<div class="page-header min-vh-45"> <div class="page-header min-vh-45" :style="`background-image: url(${vueMkHeader})`" loading="lazy">
<div class="container"> <div class="container">
<div class="text-end"> <div class="row">
<MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton> <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>
<div class="text-center pt-4"> <div class="text-center pt-4">
<table class="table table-striped table-bordered table-hover"> <table class="table table-striped table-bordered table-hover">
@ -166,6 +192,8 @@ export default {
</div> </div>
</div> </div>
</div> </div>
</div>
</section> </section>
</template> </template>
<style> <style>