ui เปลี่ยนแปลงรอบการปฏิบัติของผู้ใช้งาน
This commit is contained in:
setthawutttty
parent
d2a50125a5
commit
f44399919c
7 changed files with 739 additions and 2 deletions
|
|
@ -384,18 +384,24 @@ const menuList = readonly<any[]>([
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 9.2,
|
key: 9.2,
|
||||||
|
label: "แก้ไขรอบการปฎิบัติงานผู้ใช้งาน",
|
||||||
|
path: "/change-round",
|
||||||
|
role: "leave",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 9.3,
|
||||||
label: "รายการลงเวลาปฏิบัติงาน",
|
label: "รายการลงเวลาปฏิบัติงาน",
|
||||||
path: "/work-list",
|
path: "/work-list",
|
||||||
role: "leave",
|
role: "leave",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 9.3,
|
key: 9.4,
|
||||||
label: "รายการลา",
|
label: "รายการลา",
|
||||||
path: "/leave-list",
|
path: "/leave-list",
|
||||||
role: "leave",
|
role: "leave",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 9.4,
|
key: 9.5,
|
||||||
label: "รายงานสถิติ",
|
label: "รายงานสถิติ",
|
||||||
path: "/statistics-report",
|
path: "/statistics-report",
|
||||||
role: "leave",
|
role: "leave",
|
||||||
|
|
|
||||||
273
src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
Normal file
273
src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
Normal 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
21
src/modules/09_leave/interface/request/changeRound.ts
Normal 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
38
src/modules/09_leave/interface/response/changeRound.ts
Normal 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
|
||||||
|
}
|
||||||
|
|
@ -4,6 +4,7 @@ const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
|
||||||
const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
|
const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue")
|
||||||
const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
|
const leaveDetail = () => import("@/modules//09_leave/components/2_Leave/DetailLeave.vue")
|
||||||
const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue")
|
const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue")
|
||||||
|
const ChangeRoundMain = () => import("@/modules/09_leave/views/ChangeRoundMain.vue")
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
|
|
@ -16,6 +17,16 @@ export default [
|
||||||
Role: "coin",
|
Role: "coin",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/change-round",
|
||||||
|
name: "/change-round",
|
||||||
|
component: ChangeRoundMain,
|
||||||
|
meta: {
|
||||||
|
Auth: true,
|
||||||
|
Key: [9],
|
||||||
|
Role: "coin",
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/work-list",
|
path: "/work-list",
|
||||||
name: "/work-list",
|
name: "/work-list",
|
||||||
|
|
|
||||||
187
src/modules/09_leave/stores/ChangeRoundStore.ts
Normal file
187
src/modules/09_leave/stores/ChangeRoundStore.ts
Normal 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
201
src/modules/09_leave/views/ChangeRoundMain.vue
Normal 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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue