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">
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 route = useRoute();
const paramsId = route.params.id;
function clickSave() {
dialogConfirm($q, () => saveData());
}
function saveData() {
console.log("save");
}
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
@ -43,40 +55,63 @@ const paramsId = route.params.id;
>
</div>
</div>
<q-card flat bordered class="col-12 q-mt-sm ">
<div class="col-12 row q-py-md q-pl-md ">
<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 q-col-gutter-md">
<div class="row 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="col-xs-12 col-sm-5 row items-center q-my-xs">
<div class="col-12 row">
<div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
<div class="col text-primary">ลาป่วย</div>
</div>
<div class="col-12 row">
<div class="col-xs-5 col-sm-3 text-grey-8">ชื่อ - นามสกุล</div>
<div class="col text-weight-medium">{{ paramsId }}</div>
<div class="col-12 row">
<div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
<div class="col text-primary">ลาป่วย</div>
</div>
<div class="col-12 row">
<div class="col-xs-5 col-sm-3 text-grey-8">
ชื่อ - นามสกุล
</div>
<div class="col text-weight-medium">{{ paramsId }}</div>
</div>
</div>
<div class="col-xs-12 col-sm-7 row">
<div class="row col-12 q-gutter-md">
<div class="col row">
<q-card bordered 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
bordered
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>
</div>
<div class="col">
<q-card bordered 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
bordered
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>
</div>
<div class="col">
<q-card bordered 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
bordered
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>
</div>
</div>
@ -139,7 +174,7 @@ const paramsId = route.params.id;
</div>
<div class="row">
<div class="col text-grey-8">เอกสารแบบ</div>
<div class="col ">ไม่พบเอกสาร</div>
<div class="col">ไม่พบเอกสาร</div>
</div>
</div>
</q-card-section>
@ -153,7 +188,7 @@ const paramsId = route.params.id;
<q-btn unelevated color="orange-5" label="ไม่อนุมัติ"
><q-tooltip>ไม่อนุมัติ</q-tooltip>
</q-btn>
<q-btn unelevated color="primary" label="อนุมัติ"
<q-btn unelevated color="primary" label="อนุมัติ" @click="clickSave"
><q-tooltip>อนุมัติ</q-tooltip>
</q-btn>
</div>

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

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

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

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

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

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