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-02 17:32:57 +07:00
parent d2a50125a5
commit f44399919c
7 changed files with 739 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/interface/request/main/main.ts
View file

@ -384,18 +384,24 @@ const menuList = readonly<any[]>([
},
{
key: 9.2,
label: "แก้ไขรอบการปฎิบัติงานผู้ใช้งาน",
path: "/change-round",
role: "leave",
},
{
key: 9.3,
label: "รายการลงเวลาปฏิบัติงาน",
path: "/work-list",
role: "leave",
},
{
key: 9.3,
key: 9.4,
label: "รายการลา",
path: "/leave-list",
role: "leave",
},
{
key: 9.4,
key: 9.5,
label: "รายงานสถิติ",
path: "/statistics-report",
role: "leave",

273
src/modules/09_leave/components/4_ChangeRound/DialogForm.vue Normal file
View file

@ -0,0 +1,273 @@
<script setup lang="ts">
import { ref, reactive, watchEffect, watch } from "vue";
import type {
changeRoundEdit,
MyObjectRoundChangeRef,
} from "@/modules/09_leave/interface/request/changeRound";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
const dataStore = useChangeRoundDataStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm, date2Thai } = mixin;
const roundRef = ref<Object | null>(null);
const resonRef = ref<Object | null>(null);
const effectiveDateRef = ref<Object | null>(null);
const formData = reactive<changeRoundEdit>({
round: "",
date: "",
reson: "",
effectiveDate: null,
});
const roundOp = ref([
{
id: "1",
name: "รอบ 1",
},
{
id: "2",
name: "รอบ 2",
},
]);
const objectRoundChange: MyObjectRoundChangeRef = {
round: roundRef,
effectiveDate: effectiveDateRef,
};
function validateForm() {
const hasError = [];
for (const key in objectRoundChange) {
if (Object.prototype.hasOwnProperty.call(objectRoundChange, key)) {
const property = objectRoundChange[key];
if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate();
hasError.push(isValid);
}
}
}
if (hasError.every((result) => result === true)) {
onSubmit();
} else {
console.log(hasError);
}
}
function onSubmit() {
dialogConfirm(
$q,
async () => {
props.closeDialog?.();
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
);
}
const props = defineProps({
modal: Boolean,
closeDialog: Function,
editCheck: String,
DataRow: Object,
});
function close() {
if (props.closeDialog) {
props.closeDialog();
}
}
watch(
() => props.modal,
(newDetailData, oldDetailData) => {
if (props.editCheck === "edit") {
formData.round = "";
formData.reson = "";
formData.effectiveDate = null;
}
}
);
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="min-width: 800px">
<form @submit.prevent="validateForm">
<q-toolbar>
<q-toolbar-title
v-if="props.editCheck === 'edit'"
class="text-subtitle1 text-bold"
>เปลี่ยนรอบการลาของ
<span class="text-teal-6">{{
props.DataRow ? props.DataRow.fullName : ""
}}</span></q-toolbar-title
>
<q-toolbar-title
v-if="props.editCheck === 'history'"
class="text-subtitle1 text-bold"
>ประวัติการเปลี่ยนรอบการลงเวลา
</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="close"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<div v-if="props.editCheck === 'edit'">
<q-separator color="grey-4" />
<q-card-section style="max-height: 50vh" class="scroll q-pa-none">
<div class="q-pa-md">
<div class="row">
<q-icon
name="mdi-label-variant"
class="cursor-pointer self-center"
color="blue"
size="md"
>
</q-icon>
<span class="self-center text-bold text-blue text-subtitle1"
>รอบปัจจุบัน</span
>
<span class="self-center text-subtitle1 q-ml-sm">{{
props.DataRow ? `${props.DataRow.currentRound} น.` : ""
}}</span>
</div>
<div class="row q-mt-sm justify-between">
<q-select
v-model="formData.round"
label="รอบที่ต้องการเปลี่ยน"
dense
ref="roundRef"
:rules="[(val) => !!val || 'กรุณาเลือกรอบที่ต้องการเปลี่ยน']"
emit-value
map-options
option-label="name"
:options="roundOp"
option-value="id"
lazy-rules
hide-bottom-space
:borderless="true"
outlined
style="width: 23.5rem"
/>
<datepicker
menu-class-name="modalfix"
v-model="formData.effectiveDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
for="inputDatereceive"
outlined
ref="effectiveDateRef"
dense
style="width: 23.5rem"
class="datepicker "
:model-value="
formData.effectiveDate != null
? date2Thai(formData.effectiveDate)
: null
"
label="วันที่ให้มีผล"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ให้มีผล'}`,
]"
lazy-rules
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<q-input
class="col-12 bg-white"
outlined
stack-label
v-model="formData.reson"
label="เหตุผล"
hide-bottom-space
type="textarea"
></q-input>
</div>
</q-card-section>
</div>
<q-separator color="grey-4" />
<div class="q-pa-xs">
<div class="row justify-end q-mr-sm q-py-sm">
<q-btn
v-if="props.editCheck === 'edit'"
id="onSubmit"
type="submit"
unelevated
label="บันทึก"
class="q-px-md items-center"
color="secondary"
/>
</div>
</div>
</form>
<div v-if="props.editCheck === 'history'">
<div class="q-pa-md">
<d-table
ref="table"
:columns="dataStore.columnsHistory"
:rows="dataStore.rowsHistory"
row-key="id"
flat
bordered
:paging="false"
dense
class="custom-header-table"
:visible-columns="dataStore.visibleColumnsHistory"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'round'">
{{ props.rowIndex + 1 }}
</div>
<div>
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</q-card>
</q-dialog>
</template>

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

@ -0,0 +1,21 @@
interface dataPost {
cardId: string
firstName: string
lastName: string
}
interface changeRoundEdit {
round: string
date: string
reson: string
effectiveDate: Date | null
}
interface MyObjectRoundChangeRef {
round: object | null
effectiveDate: object | null
[key: string]: any;
}
export type {
dataPost,
changeRoundEdit,
MyObjectRoundChangeRef
}

38
src/modules/09_leave/interface/response/changeRound.ts Normal file
View file

@ -0,0 +1,38 @@
interface changeShow {
cardId: string
prefix: string
firstName: string
lastName: string
fullName: string
roundStart: string
roundEnd: string
currentRound: string
effectiveDate: string | null
}
interface dataRowChangeRound {
cardId: string
prefix: string
firstName: string
lastName: string
roundStart: string
roundEnd: string
effectiveDate: Date
}
interface dataRowChangeRoundHistory {
id: string
roundStart: string
roundEnd: string
effectiveDate: Date
reson: string | null
}
interface historyShow {
time: string
effectiveDate: string | null
reson: string | null
}
export type {
changeShow,
dataRowChangeRound,
dataRowChangeRoundHistory,
historyShow
}

11
src/modules/09_leave/router.ts
View file

@ -4,6 +4,7 @@ const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue")
const ChangeRoundMain = () => import("@/modules/09_leave/views/ChangeRoundMain.vue")
export default [
{
@ -16,6 +17,16 @@ export default [
Role: "coin",
},
},
{
path: "/change-round",
name: "/change-round",
component: ChangeRoundMain,
meta: {
Auth: true,
Key: [9],
Role: "coin",
},
},
{
path: "/work-list",
name: "/work-list",

187
src/modules/09_leave/stores/ChangeRoundStore.ts Normal file
View file

@ -0,0 +1,187 @@
import { defineStore } from "pinia";
import { ref, reactive } from "vue";
import type { changeShow, dataRowChangeRound, dataRowChangeRoundHistory, historyShow } from "@/modules/09_leave/interface/response/changeRound";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin()
const { date2Thai } = mixin
const checkCilck = ref<boolean>(false)
// store ลา >> รอบการปฏิบัติงาน
export const useChangeRoundDataStore = defineStore(
"changeRoundDataStore",
() => {
//ค้นหา คอลัมน์ คอลัมน์ที่แสดง
const visibleColumns = ref<string[]>([
"cardId",
"fullName",
"currentRound",
"effectiveDate"
]);
const visibleColumnsHistory = ref<string[]>([
"round",
"time",
"effectiveDate",
"reson"
]);
// หัวตาราง
const columns = ref<QTableProps["columns"]>([
{
name: "cardId",
align: "left",
label: "เลขบัตรประชาชน",
sortable: true,
field: "cardId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullName",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "currentRound",
align: "left",
label: "รอบปัจจุบัน",
sortable: true,
field: "currentRound",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "effectiveDate",
align: "left",
label: "วันที่มีผล",
sortable: true,
field: "effectiveDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "round",
align: "left",
label: "ครั้งที่",
sortable: true,
field: "round",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "time",
align: "left",
label: "รอบเวลา",
sortable: true,
field: "time",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "effectiveDate",
align: "left",
label: "วันที่มีผล",
sortable: true,
field: "effectiveDate",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "reson",
align: "left",
label: "เหตุผล",
sortable: true,
field: "reson",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const dataList = [
{
cardId: '3514210651232',
prefix: "นางสาว",
firstName: "กัณฐิมา",
lastName: "กาฬสินธุ์",
roundStart: "07:00",
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: "นายสาว",
firstName: "test",
lastName: "test",
roundStart: "07:00",
roundEnd: "16:00",
effectiveDate: new Date("2023-11-01T03:08:43.217"),
},
]
// ข้อมูลในตาราง
const rows = ref<changeShow[]>([]);
const rowsHistory = ref<historyShow[]>([]);
function fetchDatainHistory(data: dataRowChangeRoundHistory[]) {
let datalistHistory: historyShow[] = data.map((e: dataRowChangeRoundHistory) => {
return {
id: e.id,
time: `${e.roundStart}-${e.roundEnd}`,
effectiveDate: date2Thai(e.effectiveDate),
reson: e.reson ?? '-'
};
});
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),
}));
} else if (cardId === 'null') {
rows.value = []
checkCilck.value = false
} else if (check === 'click') {
checkCilck.value = true
}
}
return {
visibleColumns,
columns,
columnsHistory,
rows,
rowsHistory,
fetchDatainHistory,
visibleColumnsHistory,
dataList,
fetchDataForCardId,
checkCilck
};
}
);

201
src/modules/09_leave/views/ChangeRoundMain.vue Normal file
View file

@ -0,0 +1,201 @@
<script setup lang="ts">
import { ref, useAttrs, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";
// ค้นหาในตาราง
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";
const dataStore = useChangeRoundDataStore();
const modal = ref<boolean>(false);
const editCheck = ref<string>("");
const DataRow = ref<any>();
const formData = reactive<dataPost>({
cardId: "",
firstName: "",
lastName: "",
});
function Openmodal(check: string, detail: any) {
console.log(detail);
DataRow.value = detail;
modal.value = true;
editCheck.value = check;
}
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')
}
}
onMounted(() => {
dataStore.fetchDatainHistory([
{
id: "xxx1",
roundStart: "08:30",
roundEnd: "16:00",
effectiveDate: new Date("2023-11-01T03:08:43.217"),
reson: null,
},
{
id: "xxx2",
roundStart: "08:00",
roundEnd: "16:30",
effectiveDate: new Date("2023-11-01T03:08:43.217"),
reson: null,
},
]);
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
เปลี่ยนแปลงรอบการปฏิบัติของผู้ใช้งาน
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-mb-sm">
<q-card flat bordered class="bg-grey-2 col-12 q-pa-lg">
<span>DataTest #cardId: 3514210651232 / 1231231231234</span>
<div class="text-dark col-12 text-weight-bold text-subtitle1">
ค้นหารายชื่อ
</div>
<div class="row justify-between q-gutter-y-sm">
<q-input
v-model="formData.cardId"
outlined
label="เลขบัตรประชาชน"
class="bg-white col-6 col-md-4 inputgreen"
dense
maxlength="13"
@keyup="searchcardid"
/>
<q-input
v-model="formData.firstName"
outlined
readonly
label="ชื่อ"
class="bg-white col-5 col-md-3 inputgreen"
dense
/>
<q-input
v-model="formData.lastName"
outlined
readonly
label="นามสกุล"
class="bg-white col-6 col-md-3 inputgreen"
dense
/>
<q-btn
@click="
dataStore.fetchDataForCardId(formData.cardId,'click')
"
for="#search"
dense
:disabled="!formData.cardId"
unelevated
color="primary"
class="q-px-sm col-5 col-md-1"
>ค้นหา</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>
<div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
<d-table
ref="table"
:columns="dataStore.columns"
:rows="dataStore.rows"
row-key="interrogated"
flat
bordered
:paging="true"
dense
class="custom-header-table"
:visible-columns="dataStore.visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
style="color: #000000; font-weight: 500"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th style="width: 200px" />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div>
{{ col.value }}
</div>
</q-td>
<q-td style="width: 150px">
<div>
<q-btn
flat
icon="mdi-dots-vertical"
color="grey-8"
for="#cancel"
dense
round
unelevated
>
<q-menu>
<q-list>
<q-item
clickable
v-close-popup
@click="Openmodal('edit', props.row)"
>
<q-item-section>
<q-item-label>เปลี่ยนรอบการลงเวลา</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="Openmodal('history', props.row)"
>
<q-item-section>
<q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card>
<Dialogform
:modal="modal"
:closeDialog="closeDialog"
:editCheck="editCheck"
:DataRow="DataRow"
/>
</template>
<style scoped lang="scss">
.q-table tbody td:before.no-background {
background: none;
}
</style>