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

update funtion

Browse Source
This commit is contained in:
kamoa457 2023-11-05 17:26:55 +07:00
parent ae09ca0754
commit c6dae715b4
9 changed files with 157 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/Expenses/ExpensesView.vue
View File

@ -196,6 +196,7 @@ export default {
<thead class="border border-2 border-success border-bottom"> <thead class="border border-2 border-success border-bottom">
<tr> <tr>
<th scope="col">ลำดับ</th> <th scope="col">ลำดับ</th>
<th>ชื่อ-สกุล</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>
@ -217,6 +218,7 @@ export default {
<tbody> <tbody>
<tr> <tr>
<th scope="row">1</th> <th scope="row">1</th>
<td>ส.ต.ต.โชคดี มีชัย</td>
<td>อาคารแฟลต 1/11</td> <td>อาคารแฟลต 1/11</td>
<td>2</td> <td>2</td>
<td>202</td> <td>202</td>
@ -275,6 +277,9 @@ export default {
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div> <div>
<div class="mb-1">
<label style="font-size:large">ส.ต.ต.โชคดี มีชัย</label>
</div>
<div class="mb-3"> <div class="mb-3">
<label>อาคาร</label> <label>อาคาร</label>
<v-select <v-select
@ -290,17 +295,7 @@ export default {
<label>เลขที่ห้อง</label> <label>เลขที่ห้อง</label>
<v-select :options="optionsRoom" v-model="selectedRoom"></v-select> <v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
</div> </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"> <div class="mb-3">
<MaterialInput <MaterialInput
:value="Waterbill" :value="Waterbill"
@ -361,6 +356,46 @@ export default {
placeholder="เลขหลัง" placeholder="เลขหลัง"
/> />
</div> </div>
<div
class="mb-3"
style="
display: flex;
justify-content: flex-start;
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 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 style=" 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> </div>
<div class="modal-footer"> <div class="modal-footer">
@ -469,7 +504,7 @@ export default {
</template> </template>
<style> <style>
.bg-green { .bg-green {
border: 2px solid #567b57 !important; border: 2px solid #86d388 !important;
color: #000; color: #000;
} }
.bg-red { .bg-red {

2
src/views/Queue/QueueView.vue
View File

@ -258,7 +258,7 @@ export default {
</template> </template>
<style> <style>
.bg-green { .bg-green {
border: 2px solid #567b57 !important; border: 2px solid #86d388 !important;
color: #000; color: #000;
} }
.bg-red { .bg-red {

2
src/views/Reports/ReportlistView.vue
View File

@ -762,7 +762,7 @@ export default {
</template> </template>
<style> <style>
.bg-green { .bg-green {
border: 2px solid #567b57 !important; border: 2px solid #86d388 !important;
color: #000; color: #000;
} }
.bg-red { .bg-red {

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

@ -187,7 +187,6 @@ export default {
<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> </tr>
</thead> </thead>
<tbody> <tbody>
@ -209,17 +208,6 @@ export default {
>เพิ่มผู้เช่าห้องพัก</MaterialButton >เพิ่มผู้เช่าห้องพัก</MaterialButton
> >
</td> </td>
<td>
<MaterialButton
style="margin-left: 20px"
variant="gradient"
color="success"
data-bs-toggle="modal"
data-bs-target="#addBookBackdrop"
>เพิ่มเลขลงรับหนังสือ</MaterialButton
>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -305,6 +293,17 @@ export default {
placeholder="จำนวนงวดเงินค่าประกัน" placeholder="จำนวนงวดเงินค่าประกัน"
/> />
</div> </div>
<div class="mb-3">
<label style="margin-left:-5px">กรอกเลขลงรับหนังสือ</label>
<textarea
:value="booknumber"
@input="(event) => (booknumber = event.target.value)"
class="form-control"
id="exampleFormControlTextarea1"
rows="3"
placeholder="ตัวอย่าง : 11244"
></textarea>
</div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
@ -545,7 +544,7 @@ export default {
</template> </template>
<style> <style>
.bg-green { .bg-green {
border: 2px solid #567b57 !important; border: 2px solid #86d388 !important;
color: #000; color: #000;
} }
.bg-red { .bg-red {

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

@ -194,9 +194,9 @@ export default {
<div class="col-8"> <div class="col-8">
<div class="d-flex justify-content-end align-items-baseline"> <div class="d-flex justify-content-end align-items-baseline">
<div class="d-flex"> <div class="d-flex">
<MaterialCheckbox id="terms5" checked> <!-- <MaterialCheckbox id="terms5" checked>
<a href="javascript:;" class="font-weight-bolder"> รายตึก</a> <a href="javascript:;" class="font-weight-bolder"> รายตึก</a>
</MaterialCheckbox> </MaterialCheckbox> -->
<MaterialCheckbox id="terms6"> <MaterialCheckbox id="terms6">
<a href="javascript:;" class="font-weight-bolder"> ตึกทั้งหมด</a> <a href="javascript:;" class="font-weight-bolder"> ตึกทั้งหมด</a>
</MaterialCheckbox> </MaterialCheckbox>
@ -226,7 +226,9 @@ export default {
<div class="d-flex justify-content-between align-items-baseline p-2"> <div class="d-flex justify-content-between align-items-baseline p-2">
<div class="text-start"> <div class="text-start">
<p class="d-flex align-items-baseline p-2"> <p class="d-flex align-items-baseline p-2">
<span>คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span> <span style="font-weight: bold; text-decoration: underline">
คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span
>
<a data-bs-toggle="modal" data-bs-target="#Edituser" <a data-bs-toggle="modal" data-bs-target="#Edituser"
><i ><i
class="material-icons" class="material-icons"
@ -297,101 +299,84 @@ export default {
aria-controls="collapseExample" aria-controls="collapseExample"
>{{ item?.title }}</MaterialButton >{{ item?.title }}</MaterialButton
> >
<!-- item?.title -->
</p> </p>
<div class="collapse show" id="collapseExample" aria-expanded="true"> <div class="collapse show" id="collapseExample" aria-expanded="true">
<div> <div class="flex-container">
<div <div v-for="(item, index) in roomData" :key="index">
class="row row-cols-auto" <div
:style="{ '--bs-gutter-x': '0.5rem' }" class="card mb-2"
> :class="{
<div class="col" v-for="(item, index) in roomData" :key="index"> 'bg-red': item?.status == 'unavailable',
<div 'bg-green': item?.status == 'free',
class="card mb-2" 'bg-warning2': item?.status == 'waiting',
:class="{ 'bg-return': item?.status == 'return',
'bg-red': item?.status == 'unavailable', 'bgg-red': item?.status == 'special',
'bg-green': item?.status == 'free', }"
'bg-warning2': item?.status == 'waiting', :style="{ width: `220px`, height: `170px` }"
'bg-return': item?.status == 'return', >
'bg-special': item?.status == 'special', <div class="card-body p-1">
}" <a
:style="{ width: `220px`, height: `170px` }" style="cursor: pointer"
> @click="gotodetail(item?.dataIndex, item?.status)"
<div class="card-body p-1"> >
<a <p
style="cursor: pointer" class="card-title"
@click="gotodetail(item?.dataIndex, item?.status)" style="
color: #000;
border: 2px solid #f7f4f0 !important;
border-radius: 10px;
background: white;
"
> >
<p <a style="font-size: medium">{{ item?.title }}</a>
class="card-title" </p>
style=" <p
color: #000; v-if="item?.status == 'free'"
border: 2px solid #f7f4f0 !important; class="card-title bgg-green"
border-radius: 10px; style="font-size: 16px"
background: white; >
" {{ "ว่าง" }}
> </p>
<a style="font-size: medium">{{ item?.title }}</a> <p
</p> v-if="item?.status == 'unavailable'"
<p class="card-title bgg-red"
v-if="item?.status == 'free'" style="font-size: 16px"
class="card-title bgg-green" >
style="font-size: 16px" {{ "ไม่ว่าง" }}
> </p>
{{ "ว่าง" }} <p
</p> v-if="item?.status == 'waiting'"
<p class="card-title bgg-warning2"
v-if="item?.status == 'unavailable'" style="font-size: 16px"
class="card-title bgg-red" >
style="font-size: 16px" {{ "ชำรุด" }}
> </p>
{{ "ไม่ว่าง" }} <p
</p> v-if="item?.status == 'return'"
<p class="card-title bgg-return"
v-if="item?.status == 'waiting'" style="font-size: 16px"
class="card-title bgg-warning2" >
style="font-size: 16px" {{ "ผ่อนผัน" }}
> </p>
{{ "ชำรุด" }} <p class="card-title "
</p> style="font-size: 14px"
<p >
v-if="item?.status == 'return'" {{ item?.ranks }} {{ item?.firstName }}
class="card-title bgg-return" {{ item?.laststName }}
style="font-size: 16px" </p>
> <div>
{{ "ผ่อนผัน" }} <span
</p>
<p
v-if="item?.status !== 'special'" v-if="item?.status !== 'special'"
class="card-title" style="text-align: right; font-size: small"
style="font-size: 14px" >{{ item?.Affiliation }}</span
> >
{{ item?.ranks }} {{ item?.firstName }} <span
{{ item?.laststName }}
</p>
<p
v-if="item?.status == 'special'" v-if="item?.status == 'special'"
class="card-title text-red mt-1" style="text-align: right; font-size: 16px"
style="font-size: 14px" >{{ "กรณีพิเศษ" }}</span
> >
{{ item?.ranks }} {{ item?.firstName }} </div>
{{ item?.laststName }} </a>
</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: 16px"
>{{ "กรณีพิเศษ" }}</span
>
</div>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -484,8 +469,22 @@ export default {
</section> </section>
</template> </template>
<style> <style>
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-container > div {
background-color: #f1f1f1;
width: 220px;
height: 170px;
margin: 12px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.bg-green { .bg-green {
background-color: #567b57 !important; background-color: #86d388 !important;
color: #fff; color: #fff;
} }
.bg-red { .bg-red {
@ -505,7 +504,7 @@ export default {
color: #fff !important; color: #fff !important;
} }
.bgg-green { .bgg-green {
background-color: #567b57 !important; background-color: #86d388 !important;
color: #fff !important; color: #fff !important;
} }
.bgg-red { .bgg-red {

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

@ -1003,7 +1003,7 @@ export default {
</template> </template>
<style> <style>
.bg-green { .bg-green {
border: 2px solid #567b57 !important; border: 2px solid #86d388 !important;
color: #000; color: #000;
} }
.bg-red { .bg-red {

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

@ -316,7 +316,7 @@ export default {
</template> </template>
<style> <style>
.bg-green { .bg-green {
border: 2px solid #567b57 !important; border: 2px solid #86d388 !important;
color: #000; color: #000;
} }
.bg-red { .bg-red {

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

@ -460,7 +460,7 @@ export default {
</template> </template>
<style> <style>
.bg-green { .bg-green {
border: 2px solid #567b57 !important; border: 2px solid #86d388 !important;
color: #000; color: #000;
} }
.bg-red { .bg-red {

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

@ -787,7 +787,7 @@ export default {
</template> </template>
<style> <style>
.bg-green { .bg-green {
border: 2px solid #567b57 !important; border: 2px solid #86d388 !important;
color: #000; color: #000;
} }
.bg-red { .bg-red {