ui ขอโอน
This commit is contained in:
setthawutttty
parent
5416bd05b5
commit
0df46c7866
1 changed files with 163 additions and 87 deletions
|
|
@ -1,54 +1,71 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="toptitle text-dark col-12 row items-center">
|
<div class="toptitle text-dark col-12 row items-center">
|
||||||
<q-btn
|
<q-btn
|
||||||
icon="mdi-arrow-left"
|
icon="mdi-arrow-left"
|
||||||
unelevated
|
unelevated
|
||||||
round
|
round
|
||||||
dense
|
dense
|
||||||
flat
|
flat
|
||||||
color="primary"
|
color="primary"
|
||||||
class="q-mr-sm"
|
class="q-mr-sm"
|
||||||
@click="router.go(-1)"
|
@click="router.go(-1)"
|
||||||
/>
|
/>
|
||||||
รายละเอียดการขอโอนของ {{ name }}
|
รายละเอียดการขอโอนของ {{ name }}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<q-card bordered class="row col-12 text-dark">
|
<q-card bordered class="row col-12 text-dark">
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
|
<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" @click="router.push(`/registry/${personId}`)"/>
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="blue"
|
||||||
|
dense
|
||||||
|
icon-right="mdi-open-in-new"
|
||||||
|
class="q-px-sm"
|
||||||
|
label="ดูข้อมูลทะเบียนประวัติ"
|
||||||
|
@click="router.push(`/registry/${personId}`)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12"><q-separator/></div>
|
<div class="col-12"><q-separator /></div>
|
||||||
<div class="row col-12 q-pa-md">
|
<div class="row col-12 q-pa-md">
|
||||||
<div class="col-12 row bg-white q-col-gutter-md">
|
<div class="col-12 row bg-white q-col-gutter-md">
|
||||||
<div class="col-xs-3 col-sm-2 col-md-1 row ">
|
<div class="col-xs-3 col-sm-2 col-md-1 row">
|
||||||
<q-img src="@/assets/avatar_user.jpg" />
|
<q-img src="@/assets/avatar_user.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-3 row items-center">
|
<div class="col-xs-6 col-sm-3 row items-center">
|
||||||
<div class="col-12 q-pl-md">
|
<div class="col-12 q-pl-md">
|
||||||
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
|
<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
|
||||||
<div class="col-12 text-detail">{{position}}</div>
|
<div class="col-12 text-detail">{{ position }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-2 row items-center">
|
<div class="col-xs-6 col-sm-2 row items-center">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="col-12 text-top">ระดับ</div>
|
<div class="col-12 text-top">ระดับ</div>
|
||||||
<div class="col-12 text-detail">{{level}}</div>
|
<div class="col-12 text-detail">{{ level }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-3 row items-center">
|
<div class="col-xs-6 col-sm-3 row items-center">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="col-12 text-top">สังกัด</div>
|
<div class="col-12 text-top">สังกัด</div>
|
||||||
<div class="col-12 text-detail">{{institution}}</div>
|
<div class="col-12 text-detail">{{ institution }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-3 row items-center">
|
<div class="col-xs-6 col-sm-3 row items-center">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="col-12 text-top">สถานะการทดลองงาน</div>
|
<div class="col-12 text-top">สถานะการทดลองงาน</div>
|
||||||
<div class="col-12 text-detail">
|
<div class="col-12 text-detail">
|
||||||
<q-icon size="20px" v-if="status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange" />
|
<q-icon
|
||||||
<q-icon size="20px" v-else-if="status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red" />
|
size="20px"
|
||||||
|
v-if="status == 'อยู่ระหว่างการทดลองงาน'"
|
||||||
|
name="mdi-timer-sand"
|
||||||
|
color="deep-orange"
|
||||||
|
/>
|
||||||
|
<q-icon
|
||||||
|
size="20px"
|
||||||
|
v-else-if="status == 'ไม่ผ่านการทดลอง'"
|
||||||
|
name="mdi-close"
|
||||||
|
color="red"
|
||||||
|
/>
|
||||||
<q-icon size="20px" v-else name="mdi-check" color="teal" />
|
<q-icon size="20px" v-else name="mdi-check" color="teal" />
|
||||||
{{ status }}
|
{{ status }}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -58,56 +75,81 @@
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
|
<div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการขอโอน</div>
|
||||||
<q-space />
|
<q-space />
|
||||||
<q-btn outline color="primary" dense icon-right="arrow_forward" class="q-px-sm" label="ส่งคำร้องไปยัง สกจ." />
|
<q-btn
|
||||||
|
outline
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
icon-right="arrow_forward"
|
||||||
|
class="q-px-sm"
|
||||||
|
label="ส่งคำร้องไปยัง สกจ."
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12"><q-separator/></div>
|
<div class="col-12"><q-separator /></div>
|
||||||
<div class="row col-12 q-pa-md">
|
<div class="row col-12 q-pa-md">
|
||||||
<div class="col-12 row bg-white q-col-gutter-md">
|
<div class="col-12 row bg-white q-col-gutter-md">
|
||||||
<div class="col-xs-6 col-sm-3 row items-center">
|
<div class="col-xs-6 col-sm-3 row items-center">
|
||||||
<div class="col-12 ">
|
<div class="col-12">
|
||||||
<div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
|
<div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
|
||||||
<div class="col-12 text-detail">{{organization}}</div>
|
<div class="col-12 text-detail">{{ organization }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-6 col-sm-3 row items-center">
|
<div class="col-xs-6 col-sm-3 row items-center">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
|
<div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
|
||||||
<div class="col-12 text-detail">{{reason}}</div>
|
<div class="col-12 text-detail">{{ reason }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12"><q-separator/></div>
|
<div class="col-12"><q-separator /></div>
|
||||||
<div class="row col-12 q-pa-md">
|
<div class="col-12">
|
||||||
<div class="col-12 row bg-white q-col-gutter-md">
|
<q-table
|
||||||
<div class="col-xs-6 col-sm-3 row items-center">
|
flat
|
||||||
<div class="col-12 ">
|
bordered
|
||||||
<div class="col-12 text-top">หน่วยงานที่ขอโอนไป</div>
|
:rows="rows"
|
||||||
<div class="col-12 text-detail">{{organization}}</div>
|
:columns="columns"
|
||||||
</div>
|
row-key="name"
|
||||||
</div>
|
hide-header
|
||||||
<div class="col-xs-6 col-sm-3 row items-center">
|
hide-bottom
|
||||||
<div class="col-12">
|
>
|
||||||
<div class="col-12 text-top">เหตุผลที่ลาออกจากราชการ</div>
|
<template v-slot:body="props">
|
||||||
<div class="col-12 text-detail">{{reason}}</div>
|
<q-tr :props="props" class="cursor-pointer">
|
||||||
</div>
|
<q-td key="no" :props="props">
|
||||||
</div>
|
{{ props.rowIndex + 1 }}
|
||||||
|
</q-td>
|
||||||
</div>
|
<q-td key="noteTitle" :props="props">
|
||||||
|
{{ props.row.noteTitle }}
|
||||||
|
</q-td>
|
||||||
|
<q-td key="btnMicrosoft" :props="props">
|
||||||
|
<q-btn flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
color="red"
|
||||||
|
icon="picture_as_pdf">
|
||||||
|
<q-tooltip>ไฟล์ PDF</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
<q-btn flat
|
||||||
|
dense
|
||||||
|
round
|
||||||
|
color="blue"
|
||||||
|
icon="mdi-file-word">
|
||||||
|
<q-tooltip>ไฟล์ WORD</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</q-table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</q-card>
|
</q-card>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
@ -116,60 +158,94 @@ import { ref } from "vue";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const name = ref<string>('นายสมคิด ยอดใจ')
|
const name = ref<string>("นายสมคิด ยอดใจ");
|
||||||
const position = ref<string>('นักจัดการงานทั่วไป')
|
const position = ref<string>("นักจัดการงานทั่วไป");
|
||||||
const level = ref<string>('ชำนาญการพิเศษ')
|
const level = ref<string>("ชำนาญการพิเศษ");
|
||||||
const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
|
const institution = ref<string>("ฝ่ายบริหารงานทั่วไป");
|
||||||
const status = ref<string>('อยู่ระหว่างการทดลองงาน')
|
const status = ref<string>("อยู่ระหว่างการทดลองงาน");
|
||||||
const organization = ref<string>('ก.ก.')
|
const organization = ref<string>("ก.ก.");
|
||||||
const reason = ref<string>('เพราะxxx')
|
const reason = ref<string>("เพราะxxx");
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const personId = route.params.id;
|
const personId = route.params.id;
|
||||||
|
const rows = [
|
||||||
|
{
|
||||||
|
noteTitle: "ชื่อเอกสาร",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
noteTitle: "ชื่อเอกสาร",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
name: "no",
|
||||||
|
align: "left",
|
||||||
|
label: "ลำดับ",
|
||||||
|
sortable: true,
|
||||||
|
field: "no",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "noteTitle",
|
||||||
|
align: "left",
|
||||||
|
label: "ชื่อ-นามสกุล",
|
||||||
|
sortable: true,
|
||||||
|
field: "noteTitle",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "btnMicrosoft",
|
||||||
|
align: "right",
|
||||||
|
label: "ปุ่ม",
|
||||||
|
sortable: true,
|
||||||
|
field: "btnMicrosoft",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scope>
|
<style lang="scss" scope>
|
||||||
.q-img {
|
.q-img {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
}
|
}
|
||||||
.text-top{
|
.text-top {
|
||||||
color: gray;
|
color: gray;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
}
|
}
|
||||||
.text-detail{
|
.text-detail {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
}
|
}
|
||||||
.custom-header-table {
|
.custom-header-table {
|
||||||
max-height: 64vh;
|
max-height: 64vh;
|
||||||
|
|
||||||
.q-table tr:nth-child(odd) td {
|
.q-table tr:nth-child(odd) td {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-table tr:nth-child(even) td {
|
.q-table tr:nth-child(even) td {
|
||||||
background: #f8f8f8;
|
background: #f8f8f8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-table thead tr {
|
.q-table thead tr {
|
||||||
background: #ecebeb;
|
background: #ecebeb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-table thead tr th {
|
.q-table thead tr th {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* this will be the loading indicator */
|
/* this will be the loading indicator */
|
||||||
.q-table thead tr:last-child th {
|
.q-table thead tr:last-child th {
|
||||||
/* height of all previous header rows */
|
/* height of all previous header rows */
|
||||||
top: 48px;
|
top: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.q-table thead tr:first-child th {
|
.q-table thead tr:first-child th {
|
||||||
top: 0;
|
top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
</style>
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue