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

แก้ UI-แก้ไขรอบการปฎิบัติงานผู้ใช้งาน

Browse source
This commit is contained in:
setthawutttty 2023-11-03 17:54:28 +07:00
parent f62b48e27c
commit bf1b13522f
5 changed files with 155 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/modules/09_leave/components/2_Leave/DetailLeave.vue
View file

@ -1,9 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const paramsId = route.params.id; const paramsId = route.params.id;
function clickSave() {
dialogConfirm($q, () => saveData());
}
function saveData() {
console.log("save");
}
</script> </script>
<template> <template>
<div class="toptitle text-dark col-12 row items-center"> <div class="toptitle text-dark col-12 row items-center">
@ -43,40 +55,63 @@ const paramsId = route.params.id;
> >
</div> </div>
</div> </div>
<q-card flat bordered class="col-12 q-mt-sm "> <q-card flat bordered class="col-12 q-mt-sm">
<div class="col-12 row q-py-md q-pl-md "> <div class="col-12 row q-py-md q-pl-md">
<div class="col-12 q-col-gutter-md"> <div class="col-12 q-col-gutter-md">
<div class="row col-12"> <div class="row col-12">
<q-card bordered class="bg-grey-1 q-pa-md col-12"> <q-card bordered class="bg-grey-1 q-pa-md col-12">
<div class="row q-col-gutter-md col-12"> <div class="row q-col-gutter-md col-12">
<div class="col-xs-12 col-sm-5 row items-center q-my-xs"> <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
<div class="col-12 row"> <div class="col-12 row">
<div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div> <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
<div class="col text-primary">ลาป่วย</div> <div class="col text-primary">ลาป่วย</div>
</div> </div>
<div class="col-12 row"> <div class="col-12 row">
<div class="col-xs-5 col-sm-3 text-grey-8">ชื่อ - นามสกุล</div> <div class="col-xs-5 col-sm-3 text-grey-8">
<div class="col text-weight-medium">{{ paramsId }}</div> ชื่อ - นามสกุล
</div> </div>
<div class="col text-weight-medium">{{ paramsId }}</div>
</div>
</div> </div>
<div class="col-xs-12 col-sm-7 row"> <div class="col-xs-12 col-sm-7 row">
<div class="row col-12 q-gutter-md"> <div class="row col-12 q-gutter-md">
<div class="col row"> <div class="col row">
<q-card bordered class="col-12 items-center row q-px-md q-py-sm"> <q-card
<div class="text-h6 text-weight-bold text-blue-10">10</div> bordered
<div class="col-12 text-subtitle2 text-weight-regular">โควต้า<span class="gt-xs">ลาป่วย</span></div> class="col-12 items-center row q-px-md q-py-sm"
>
<div class="text-h6 text-weight-bold text-blue-10">
10
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
โควต้า<span class="gt-xs">ลาป่วย</span>
</div>
</q-card> </q-card>
</div> </div>
<div class="col"> <div class="col">
<q-card bordered class="col-12 items-center row q-px-md q-py-sm"> <q-card
<div class="text-h6 text-weight-bold text-light-blue-6">8</div> bordered
<div class="col-12 text-subtitle2 text-weight-regular">ลา<span class="gt-xs">ป่วยไป</span>แล้ว</div> class="col-12 items-center row q-px-md q-py-sm"
>
<div class="text-h6 text-weight-bold text-light-blue-6">
8
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
ลา<span class="gt-xs">ป่วยไป</span>แล้ว
</div>
</q-card> </q-card>
</div> </div>
<div class="col"> <div class="col">
<q-card bordered class="col-12 items-center row q-px-md q-py-sm"> <q-card
<div class="text-h6 text-weight-bold text-indigo-7">2</div> bordered
<div class="col-12 text-subtitle2 text-weight-regular">คงเหลือ<span class="gt-xs">โควต้า</span></div> class="col-12 items-center row q-px-md q-py-sm"
>
<div class="text-h6 text-weight-bold text-indigo-7">
2
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
คงเหลือ<span class="gt-xs">โควต้า</span>
</div>
</q-card> </q-card>
</div> </div>
</div> </div>
@ -139,7 +174,7 @@ const paramsId = route.params.id;
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแบบ</div> <div class="col text-grey-8">เอกสารแบบ</div>
<div class="col ">ไม่พบเอกสาร</div> <div class="col">ไม่พบเอกสาร</div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
@ -153,7 +188,7 @@ const paramsId = route.params.id;
<q-btn unelevated color="orange-5" label="ไม่อนุมัติ" <q-btn unelevated color="orange-5" label="ไม่อนุมัติ"
><q-tooltip>ไม่อนุมัติ</q-tooltip> ><q-tooltip>ไม่อนุมัติ</q-tooltip>
</q-btn> </q-btn>
<q-btn unelevated color="primary" label="อนุมัติ" <q-btn unelevated color="primary" label="อนุมัติ" @click="clickSave"
><q-tooltip>อนุมัติ</q-tooltip> ><q-tooltip>อนุมัติ</q-tooltip>
</q-btn> </q-btn>
</div> </div>

9
src/modules/09_leave/interface/request/changeRound.ts
View file

@ -14,8 +14,15 @@ interface MyObjectRoundChangeRef {
effectiveDate: object | null effectiveDate: object | null
[key: string]: any; [key: string]: any;
} }
interface MyObjectRoundChangeMainRef {
cardId:object|null
firstName:object|null
lastName:object|null
[key: string]: any;
}
export type { export type {
dataPost, dataPost,
changeRoundEdit, changeRoundEdit,
MyObjectRoundChangeRef MyObjectRoundChangeRef,
MyObjectRoundChangeMainRef
} }

1
src/modules/09_leave/interface/response/round.ts
View file

@ -9,6 +9,7 @@ interface dataRowRound {
am: string am: string
amOut: string amOut: string
pm: string pm: string
note:string
pmOut: string pmOut: string
status: boolean status: boolean
isDefault: boolean isDefault: boolean

56
src/modules/09_leave/stores/ChangeRoundStore.ts
View file

@ -1,6 +1,7 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
import type { changeShow, dataRowChangeRound, dataRowChangeRoundHistory, historyShow } from "@/modules/09_leave/interface/response/changeRound"; import type { changeShow, dataRowChangeRound, dataRowChangeRoundHistory, historyShow } from "@/modules/09_leave/interface/response/changeRound";
import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
@ -112,15 +113,6 @@ export const useChangeRoundDataStore = defineStore(
roundEnd: "11:00", roundEnd: "11:00",
effectiveDate: new Date("2023-11-01T03:08:43.217"), effectiveDate: new Date("2023-11-01T03:08:43.217"),
}, },
{
cardId: '3514210651232',
prefix: "นางสาว",
firstName: "กัณฐิมา",
lastName: "กาฬสินธุ์",
roundStart: "13:00",
roundEnd: "16:00",
effectiveDate: new Date("2023-11-01T03:08:43.217"),
},
{ {
cardId: '1231231231234', cardId: '1231231231234',
prefix: "นายสาว", prefix: "นายสาว",
@ -148,27 +140,35 @@ export const useChangeRoundDataStore = defineStore(
rowsHistory.value = datalistHistory; rowsHistory.value = datalistHistory;
} }
function fetchDataForCardId(cardId: string, check: string) { function fetchDataForCardId(dataDetail: any, check: string) {
if (cardId.length === 13) { if (dataDetail) {
const data = dataList.filter((e) => e.cardId === cardId); const filteredData = dataList.filter((e) => {
rows.value = data.map((e) => ({ return (!dataDetail.cardId || e.cardId === dataDetail.cardId) &&
cardId: e.cardId, (!dataDetail.firstName || e.firstName === dataDetail.firstName) &&
prefix: e.prefix, (!dataDetail.lastName || e.lastName === dataDetail.lastName);
firstName: e.firstName, });
lastName: e.lastName,
fullName: `${e.prefix}${e.firstName} ${e.lastName}`, if (filteredData.length > 0) {
roundStart: e.roundStart, checkCilck.value = false;
roundEnd: e.roundEnd, rows.value = filteredData.map((e) => ({
currentRound: `${e.roundStart}-${e.roundEnd}`, cardId: e.cardId,
effectiveDate: date2Thai(e.effectiveDate), prefix: e.prefix,
firstName: e.firstName,
lastName: e.lastName,
fullName: `${e.prefix}${e.firstName} ${e.lastName}`,
roundStart: e.roundStart,
roundEnd: e.roundEnd,
currentRound: `${e.roundStart}-${e.roundEnd}`,
effectiveDate: date2Thai(e.effectiveDate),
})); }));
} else if (cardId === 'null') { } else {
rows.value = [] rows.value = [];
checkCilck.value = false console.log(3);
} else if (check === 'click') { checkCilck.value = true;
checkCilck.value = true }
} }
} }
return { return {

89
src/modules/09_leave/views/ChangeRoundMain.vue
View file

@ -6,6 +6,10 @@ import type { dataPost } from "@/modules/09_leave/interface/request/changeRound"
import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore"; import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue"; import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue";
import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue"; import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, date2Thai ,dialogMessageNotify} = mixin;
const dataStore = useChangeRoundDataStore(); const dataStore = useChangeRoundDataStore();
const modal = ref<boolean>(false); const modal = ref<boolean>(false);
const editCheck = ref<string>(""); const editCheck = ref<string>("");
@ -16,10 +20,7 @@ const formData = reactive<dataPost>({
lastName: "", lastName: "",
}); });
function Openmodal(check: string, detail: any) { function Openmodal(check: string, detail: any) {
console.log(detail);
DataRow.value = detail; DataRow.value = detail;
modal.value = true; modal.value = true;
editCheck.value = check; editCheck.value = check;
@ -27,15 +28,47 @@ function Openmodal(check: string, detail: any) {
function closeDialog() { function closeDialog() {
modal.value = false; modal.value = false;
} }
async function searchcardid(){ async function searchcardid(type:string) {
const data = await dataStore.dataList.find((e) => e.cardId === formData.cardId) // if (type === "card") {
if(data){ // // const data = await dataStore.dataList.find(
formData.firstName = data.firstName // // (e) => e.cardId === formData.cardId
formData.lastName = data.lastName // // );
} else if(!data){ // // if (data) {
formData.firstName = '' // // formData.firstName = data.firstName;
formData.lastName = '' // // formData.lastName = data.lastName;
dataStore.fetchDataForCardId('null','notClick') // // } else if (!data) {
// formData.firstName = "";
// formData.lastName = "";
// // }
// } else if (type === "firstName") {
// // const data = await dataStore.dataList.find(
// // (e) => e.firstName === formData.firstName
// // );
// // if (data) {
// // formData.cardId = data.cardId;
// // formData.lastName = data.lastName;
// // } else if (!data) {
// formData.cardId = "";
// formData.lastName = "";
// // }
// } else if (type === "lastName") {
// // const data = await dataStore.dataList.find(
// // (e) => e.lastName === formData.lastName
// // );
// // if (data) {
// // formData.firstName = data.firstName;
// // formData.cardId = data.cardId;
// // } else if (!data) {
// formData.firstName = "";
// formData.cardId = "";
// // }
// }
}
function searchData(){
if(formData.cardId||formData.firstName||formData.lastName){
dataStore.fetchDataForCardId(formData, 'click')
}else{
dialogMessageNotify($q,'กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง')
} }
} }
onMounted(() => { onMounted(() => {
@ -72,44 +105,49 @@ onMounted(() => {
v-model="formData.cardId" v-model="formData.cardId"
outlined outlined
label="เลขบัตรประชาชน" label="เลขบัตรประชาชน"
class="bg-white col-6 col-md-4 inputgreen" class=" col-6 col-md-4 inputgreen"
dense dense
hide-bottom-space
maxlength="13" maxlength="13"
@keyup="searchcardid" @keyup="searchcardid('card')"
/> />
<q-input <q-input
v-model="formData.firstName" v-model="formData.firstName"
outlined outlined
readonly
label="ชื่อ" label="ชื่อ"
class="bg-white col-5 col-md-3 inputgreen" class=" col-5 col-md-3 inputgreen"
dense dense
hide-bottom-space
@keyup="searchcardid('firstName')"
/> />
<q-input <q-input
v-model="formData.lastName" v-model="formData.lastName"
outlined outlined
readonly
label="นามสกุล" label="นามสกุล"
class="bg-white col-6 col-md-3 inputgreen" class=" col-6 col-md-3 inputgreen"
dense dense
hide-bottom-space
@keyup="searchcardid('lastName')"
/> />
<q-btn <q-btn
@click=" @click="searchData"
dataStore.fetchDataForCardId(formData.cardId,'click')
"
for="#search" for="#search"
dense dense
:disabled="!formData.cardId"
unelevated unelevated
color="primary" color="primary"
class="q-px-sm col-5 col-md-1" class="q-px-sm col-5 col-md-1"
>ค้นหา</q-btn style="max-height: 40px;">ค้นหา</q-btn
> >
</div> </div>
</q-card> </q-card>
</div> </div>
<div v-if="formData.cardId && dataStore.checkCilck === true"> <div v-if="dataStore.rows.length === 0 && dataStore.checkCilck === true">
<q-card flat bordered class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold">ไม่พบข้อมูลบัตรประชาชนนี้</q-card> <q-card
flat
bordered
class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold"
>ไม่พบข้อมูล</q-card
>
</div> </div>
<div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl"> <div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
<d-table <d-table
@ -123,7 +161,6 @@ onMounted(() => {
dense dense
class="custom-header-table" class="custom-header-table"
:visible-columns="dataStore.visibleColumns" :visible-columns="dataStore.visibleColumns"
> >
<template v-slot:header="props"> <template v-slot:header="props">
<q-tr :props="props"> <q-tr :props="props">