hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

MainLayout , Dashboard, Transfer

Browse source
This commit is contained in:
Tanyalak 2023-07-07 16:54:53 +07:00
parent ff07547749
commit 3f50b3d075
31 changed files with 14376 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

203
src/modules/01_dashboard/views/Dashboard.vue Normal file
View file

@ -0,0 +1,203 @@
<script setup lang="ts">
import { ref, Static } from "vue";
const link = ref<number>(1);
import { useQuasar } from "quasar";
import router from "@/router";
const $q = useQuasar();
const fullname = ref<string>("ธัญลักษณ์");
const inboxList = ref<any>([
{
no: 1,
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
timereceive: "13/12/2565",
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
ratingModel: 0,
},
{
no: 2,
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
timereceive: "13/12/2565",
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
ratingModel: 1,
},
{
no: 3,
sender: "เจ้าหน้าที่ทะเบียนประวัติ",
subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
timereceive: "13/12/2565",
body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
ratingModel: 0,
},
]);
const items = ref<any>([
{
icon: "mdi-account-group-outline",
title: "แผนผังองค์กร",
sub: "ดูแผนผังองค์กร",
color: "blue-3",
path: "",
active: false,
},
{
icon: "mdi-clipboard-account-outline",
title: "ประเมินผล",
sub: "ข้อมูลการประเมินผลการปฏิบัติราชการ",
color: "lime-4",
path: "",
active: false,
},
{
icon: "mdi-calendar-account-outline",
title: "การลา",
sub:"ดู/ลงเวลา ทำเรื่องลา",
color: "cyan-3",
path: "",
active: false,
},
{
icon: "mdi-folder-account-outline",
title: "ผลงาน",
sub:"ดูผลงาน",
color: "light-green-3",
path: "",
active: false,
},
{
icon: "mdi-account-arrow-right-outline",
title: "ขอโอน",
sub:"ทำเรื่องขอโอนย้าย",
color: "deep-purple-3",
path: "/transfer",
active: false,
},
{
icon: "mdi-account-remove-outline",
title: "ลาออก",
sub:"ทำเรื่องลาออก",
color: "orange-3",
path: "",
active: false,
}
]);
const transferToPage = (path?: string) => {
router.push(`${path}`);
};
</script>
<template>
<div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%;">
<div class="col-12 row" v-if="!$q.screen.gt.xs">
<div class="text-white text-weight-light text-18px">สวัสดี, {{fullname}}</div>
<div
style="color: #ffffff;"
class="text-18px text-weight-medium col-12"
>
ระบบทรัพยากรบุคคล
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-9">
<div class="row justify-start q-col-gutter-md">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3 col-xl-2 row" v-for="(item, j) in items" :key="j">
<q-card
bordered
@click="transferToPage(item.path)"
class="noactive col-12">
<div class="col-12">
<q-avatar
:color="item.color"
text-color="white"
:size="$q.screen.gt.xs ? '55px': '40px'"
>
<q-icon
:name="item.icon"
:size="$q.screen.gt.xs ? '28px': '20px'"
color="black"
/>
</q-avatar>
</div>
<div class="q-pt-md col-12 text-left text-18px" >{{ item.title }}</div>
<div class="col-12 text-left text-grey text-weight-regular gt-xs" style="font-size: 14px;">{{ item.sub }}</div>
</q-card>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 row">
<q-card
flat
bordered
:style="$q.screen.gt.xs ? 'max-height: 80vh' : 'height: auto;'"
class="q-pb-md col-12"
>
<div class="col-12 row q-pa-md">
<div class="text-subtitle1 text-weight-bold text-dark">กล่องข้อความ</div>
<q-space />
<q-btn dense icon="mdi-dots-vertical" color="grey-6" size="11px" flat />
</div>
<q-list v-for="(contact, index) in inboxList" :key="index" class="q-px-md">
<q-item clickable v-ripple class="q-py-md q-mb-sm my-menu" :active="link === contact.no" @click="link = contact.no" active-class="my-menu-link">
<q-item-section>
<q-item-label >{{ contact.sender }}</q-item-label>
<q-item-label caption class="text-grey-6" lines="2">{{ contact.subject }}</q-item-label>
</q-item-section>
<q-item-section side top>
<q-item-label caption>{{ contact.timereceive }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
<q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-if="inboxList.length < 1">
<div class="text-yellow-10">
<q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
ไม่พบข้อความ
</div>
</q-banner>
</q-card>
</div>
</div>
</template>
<style>
.my-menu-link {
color: #1bb19b;
background: #ebf9f7 !important;
font-weight: 600;
border-radius: 10px;
}
.my-menu-link .q-hoverable {
border-radius: 10px;
}
.my-menu{
background: #f1f0f04a ;
border-radius: 10px;
}
.q-card{
border-radius: 12px;
}
.text-18px{
font-size: 1.25em;
}
.noactive {
color: #35473C ;
border-radius: 12px;
padding: 10%;
transition: 0.1s ease;
opacity:1;
cursor: pointer;
}
.noactive:hover{
background: #ebf9f7 ;
color: #1bb19b !important;
font-weight: 600 ;
border: 1px solid #6dbdb142;
}
.disabledcard {
color: rgba(209, 209, 209, 0.733) !important;
border-color: rgba(207, 207, 207, 0.322) !important;
box-shadow: none !important;
border-radius: 12px;
cursor: no-drop !important;
padding: 10%;
}
</style>

27
src/modules/02_transfer/router.ts Normal file
View file

@ -0,0 +1,27 @@
/**
* Router ขอโอน
*/
const TransferMain = () =>
import("@/modules/02_transfer/views/Main.vue");
const AddTransfer = () =>
import("@/modules/02_transfer/views/AddTransfer.vue");
export default [
{
path: "/transfer",
name: "transfer",
component: TransferMain
},
{
path: "/transfer/add",
name: "addTransfer",
component: AddTransfer,
},
{
path: "/transfer/:id",
name: "detailTransfer",
component: AddTransfer,
}
];

87
src/modules/02_transfer/views/AddTransfer.vue Normal file
View file

@ -0,0 +1,87 @@
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
const router = useRouter();
const $q = useQuasar();
const edu = ref('');
const academy = ref('');
const position = ref('');
const noPos = ref('');
const level = ref('');
const salary = ref('');
const positionNew = ref('');
const salaryNew = ref('');
const transfer = ref('');
const note = ref('');
const routeName = router.currentRoute.value.name
</script>
<template>
<div class="col-12 row justify-center" >
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
<div v-if="routeName == 'addTransfer'">
เพิ่มเรื่องขอโอน
</div>
<div v-else>
รายละเอียดเรื่องขอโอน
</div>
</div>
<div class="col-12">
<q-card bordered>
<div class="col-12 row q-col-gutter-md q-pa-md">
<div class="col-xs-12 col-sm-6 row">
<q-card bordered flat>
<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">
ข้อมูลเดิม
</div>
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input class="col-12" dense outlined v-model="edu" label="วุฒิการศึกษา" :readonly="routeName != 'addTransfer'" />
<q-input class="col-12" dense outlined v-model="academy" label="สถานศึกษา" :readonly="routeName != 'addTransfer'"/>
<q-input class="col-xs-12 col-sm-6" dense outlined v-model="position" label="ตำแหน่ง" :readonly="routeName != 'addTransfer'"/>
<q-input class="col-xs-12 col-sm-6" dense outlined v-model="noPos" label="ตำแหน่งเลขที่" :readonly="routeName != 'addTransfer'"/>
<q-input class="col-xs-12 col-sm-6" dense outlined v-model="level" label="อันดับ/ระดับ" :readonly="routeName != 'addTransfer'" />
<q-input class="col-xs-12 col-sm-6" dense outlined v-model="salary" label="เงินเดือน" :readonly="routeName != 'addTransfer'" />
</div>
</q-card>
</div>
<div class="col-xs-12 col-sm-6 row">
<q-card bordered flat>
<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">
ข้อมูลใหม่
</div>
<q-separator />
<div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input class="col-xs-12 col-sm-6" dense outlined v-model="positionNew" label="ตำแหน่ง" :readonly="routeName != 'addTransfer'"/>
<q-input class="col-xs-12 col-sm-6" dense outlined v-model="salaryNew" label="เงินเดือน" :readonly="routeName != 'addTransfer'" />
<q-input class="col-12" dense outlined v-model="transfer" label="โอนไปสังกัด" type="textarea" :readonly="routeName != 'addTransfer'" />
<q-input class="col-12" dense outlined v-model="note" label="หมายเหตุ" :readonly="routeName != 'addTransfer'" />
</div>
</q-card>
</div>
</div>
<q-separator/>
<div class="row col-12 q-pa-sm" v-if="routeName == 'addTransfer'">
<q-space />
<q-btn unelevated dense class="q-px-md" color="primary" label="ยื่นเรื่องขอโอน" @click="router.go(-1)"/>
</div>
</q-card>
</div>
</div>
</div>
</template>

174
src/modules/02_transfer/views/Main.vue Normal file
View file

@ -0,0 +1,174 @@
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
const router = useRouter();
const $q = useQuasar();
import Table from "@/components/Table.vue";
const filter = ref<string>("");
const rows = ref<any>([
{date: '02/02/2566',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/ฝ่ายการคลัง', status: 'รอดำเนินการ'},
{date: '02/02/2565',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร', status: 'เสร็จสิ้น'},
{date: '10/01/2565',position: 'นักจัดการงานทั่วไป',noPos: 'กบห.2',level: 'ปฏิบัติการ',salary: '15920',transfer: 'กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร', status: 'เสร็จสิ้น'},
]);
const initialPagination = ref({
rowsPerPage: 0,
});
const visibleColumns = ref<String[]>([
"no",
"date",
"position",
"noPos",
"level",
"salary",
"transfer",
"status",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:5px;",
},
{
name: "date",
align: "left",
label: "วันที่",
sortable: true,
field: "date",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "noPos",
align: "left",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "noPos",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "level",
align: "left",
label: "อันดับ/ระดับ",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "salary",
align: "left",
label: "เงินเดือน",
sortable: true,
field: "salary",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "transfer",
align: "left",
label: "โอนไปสังกัด",
sortable: true,
field: "transfer",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:10%;",
},
]);
const clickAdd = async () => {
router.push(`/transfer/add`);
};
</script>
<template>
<div class="col-12 row justify-center">
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle text-white col-12 row items-center">
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.go(-1)"
/>
เรื่องขอโอน
</div>
<div class="col-12">
<q-card bordered class="q-pa-md">
<Table
style="max-height: 80vh"
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:pagination="initialPagination"
:inputShow="false"
:add="clickAdd"
:titleText="''"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer" @click="router.push(`/transfer/1`)">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else-if="col.name == 'status'">
<q-icon size="20px" v-if="props.row.status == 'รอดำเนินการ'" name="mdi-timer-sand" color="deep-orange">
<q-tooltip>รอดำเนินการ</q-tooltip>
</q-icon>
<q-icon size="20px" v-else name="mdi-check" color="teal">
<q-tooltip>เสร็จสิ้น</q-tooltip>
</q-icon>
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</Table>
</q-card>
</div>
</div>
</div>
</template>
<style>
</style>