รอบการขึ้นเงินเดือน
This commit is contained in:
setthawutttty
parent
ed15f2edde
commit
05d4ea4b0b
2 changed files with 142 additions and 78 deletions
|
|
@ -15,8 +15,11 @@ const $q = useQuasar();
|
||||||
const isActive = ref<boolean>(false);
|
const isActive = ref<boolean>(false);
|
||||||
const period = ref<string>("");
|
const period = ref<string>("");
|
||||||
const modal = defineModel<boolean>("modal", { required: true });
|
const modal = defineModel<boolean>("modal", { required: true });
|
||||||
const effective = defineModel<Date|null|string>("effective", { required: true });
|
const effective = defineModel<Date | null | string>("effective", {
|
||||||
const year = defineModel<number|null|string>("year");
|
required: true,
|
||||||
|
});
|
||||||
|
const isRead = defineModel<boolean>("isRead", { required: true });
|
||||||
|
const year = defineModel<number | null | string>("year");
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { dialogConfirm, date2Thai, messageError } = mixin;
|
const { dialogConfirm, date2Thai, messageError } = mixin;
|
||||||
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
|
||||||
|
|
@ -43,6 +46,7 @@ const props = defineProps({
|
||||||
period: String,
|
period: String,
|
||||||
effectiveDate: Date,
|
effectiveDate: Date,
|
||||||
isActive: Boolean,
|
isActive: Boolean,
|
||||||
|
isRead: Boolean,
|
||||||
});
|
});
|
||||||
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
|
||||||
function validateForm() {
|
function validateForm() {
|
||||||
|
|
@ -58,9 +62,9 @@ function validateForm() {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (hasError.every((result) => result === true)) {
|
if (hasError.every((result) => result === true)) {
|
||||||
if(props.edit == true){
|
if (props.edit == true) {
|
||||||
editSummit();
|
editSummit();
|
||||||
}else{
|
} else {
|
||||||
onSubmit();
|
onSubmit();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -71,7 +75,8 @@ function clearForm() {
|
||||||
isActive.value = false;
|
isActive.value = false;
|
||||||
period.value = "";
|
period.value = "";
|
||||||
effective.value = null;
|
effective.value = null;
|
||||||
year.value = 0
|
year.value = 0;
|
||||||
|
isRead.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
|
|
@ -79,7 +84,7 @@ function close() {
|
||||||
clearForm();
|
clearForm();
|
||||||
}
|
}
|
||||||
|
|
||||||
function editSummit(){
|
function editSummit() {
|
||||||
dialogConfirm($q, () => {
|
dialogConfirm($q, () => {
|
||||||
const body = {
|
const body = {
|
||||||
period: period.value,
|
period: period.value,
|
||||||
|
|
@ -88,7 +93,7 @@ function editSummit(){
|
||||||
year: year.value,
|
year: year.value,
|
||||||
};
|
};
|
||||||
http
|
http
|
||||||
.put(config.API.salaryPeriod()+`/${props.idRound}`, body)
|
.put(config.API.salaryPeriod() + `/${props.idRound}`, body)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
modal.value = false;
|
modal.value = false;
|
||||||
clearForm();
|
clearForm();
|
||||||
|
|
@ -133,16 +138,16 @@ function inputEdit(val: boolean) {
|
||||||
watch(
|
watch(
|
||||||
() => modal.value,
|
() => modal.value,
|
||||||
() => {
|
() => {
|
||||||
console.log(props.edit)
|
console.log(props.edit);
|
||||||
if (props.edit == true) {
|
if (props.edit == true) {
|
||||||
period.value = props.period ? props.period :'';
|
period.value = props.period ? props.period : "";
|
||||||
effectiveDate.value = props.effectiveDate ? props.effectiveDate:null;
|
effectiveDate.value = props.effectiveDate ? props.effectiveDate : null;
|
||||||
isActive.value = props.isActive;
|
isActive.value = props.isActive;
|
||||||
}else{
|
} else {
|
||||||
year.value = 0
|
year.value = 0;
|
||||||
effective.value = null
|
effective.value = null;
|
||||||
period.value = ''
|
period.value = "";
|
||||||
isActive.value = false
|
isActive.value = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
@ -161,47 +166,46 @@ watch(
|
||||||
|
|
||||||
<q-card-section class="scroll" style="max-height: 70vh">
|
<q-card-section class="scroll" style="max-height: 70vh">
|
||||||
<div class="q-gutter-y-sm">
|
<div class="q-gutter-y-sm">
|
||||||
|
<datepicker
|
||||||
<datepicker
|
:readonly="isRead"
|
||||||
|
menu-class-name="modalfix"
|
||||||
menu-class-name="modalfix"
|
v-model="year"
|
||||||
v-model="year"
|
class="col-2"
|
||||||
class="col-2"
|
:locale="'th'"
|
||||||
:locale="'th'"
|
autoApply
|
||||||
autoApply
|
year-picker
|
||||||
year-picker
|
:enableTimePicker="false"
|
||||||
:enableTimePicker="false"
|
>
|
||||||
>
|
<template #year="{ year }">{{ year + 543 }}</template>
|
||||||
<template #year="{ year }">{{ year + 543 }}</template>
|
<template #year-overlay-value="{ value }">{{
|
||||||
<template #year-overlay-value="{ value }">{{
|
parseInt(value + 543)
|
||||||
parseInt(value + 543)
|
}}</template>
|
||||||
}}</template>
|
<template #trigger>
|
||||||
<template #trigger>
|
<q-input
|
||||||
<q-input
|
:readonly="isRead"
|
||||||
ref="yearRef"
|
ref="yearRef"
|
||||||
dense
|
dense
|
||||||
:class="inputEdit(isReadonly)"
|
:class="inputEdit(isReadonly)"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
outlined
|
outlined
|
||||||
:model-value="year === 0 ? null : Number(year) + 543"
|
:model-value="year === 0 ? null : Number(year) + 543"
|
||||||
:label="`${'ปีงบประมาณ'}`"
|
:label="`${'ปีงบประมาณ'}`"
|
||||||
:rules="[
|
:rules="[(val) => !!val || `${'กรุณาเลือกเลือกปีงบประมาณ'}`]"
|
||||||
(val) => !!val || `${'กรุณาเลือกเลือกปีงบประมาณ'}`,
|
>
|
||||||
]"
|
<template v-slot:prepend>
|
||||||
>
|
<q-icon
|
||||||
<template v-slot:prepend>
|
name="event"
|
||||||
<q-icon
|
class="cursor-pointer"
|
||||||
name="event"
|
style="color: var(--q-primary)"
|
||||||
class="cursor-pointer"
|
>
|
||||||
style="color: var(--q-primary)"
|
</q-icon>
|
||||||
>
|
</template>
|
||||||
</q-icon>
|
</q-input>
|
||||||
</template>
|
</template>
|
||||||
</q-input>
|
</datepicker>
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
|
|
||||||
<q-select
|
<q-select
|
||||||
|
:readonly="isRead"
|
||||||
ref="periodRef"
|
ref="periodRef"
|
||||||
:class="inputEdit(isReadonly)"
|
:class="inputEdit(isReadonly)"
|
||||||
v-model="period"
|
v-model="period"
|
||||||
|
|
@ -218,12 +222,12 @@ watch(
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
/>
|
/>
|
||||||
<datepicker
|
<datepicker
|
||||||
|
:readonly="isRead"
|
||||||
menu-class-name="modalfix"
|
menu-class-name="modalfix"
|
||||||
v-model="effective"
|
v-model="effective"
|
||||||
:locale="'th'"
|
:locale="'th'"
|
||||||
autoApply
|
autoApply
|
||||||
borderless
|
borderless
|
||||||
:readonly="isReadonly"
|
|
||||||
:enableTimePicker="false"
|
:enableTimePicker="false"
|
||||||
week-start="0"
|
week-start="0"
|
||||||
>
|
>
|
||||||
|
|
@ -240,7 +244,7 @@ watch(
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
:class="inputEdit(isReadonly)"
|
:class="inputEdit(isReadonly)"
|
||||||
:readonly="isReadonly"
|
:readonly="isRead"
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:model-value="
|
:model-value="
|
||||||
effective != null ? date2Thai(effective as Date) : null
|
effective != null ? date2Thai(effective as Date) : null
|
||||||
|
|
@ -264,16 +268,16 @@ watch(
|
||||||
<div class="col q-pa-sm bg-white border_custom text-weight-medium">
|
<div class="col q-pa-sm bg-white border_custom text-weight-medium">
|
||||||
<div class="row items-center q-my-sm justify-between">
|
<div class="row items-center q-my-sm justify-between">
|
||||||
<p class="q-ma-none">สถานะการใช้งาน</p>
|
<p class="q-ma-none">สถานะการใช้งาน</p>
|
||||||
<label class="toggle-control">
|
<label :class="isRead == true ? 'toggle-control noClick':'toggle-control'">
|
||||||
<input type="checkbox" v-model="isActive" />
|
<input type="checkbox" v-model="isActive" :readonly="isRead"/>
|
||||||
<span class="control"></span>
|
<span class="control"></span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
<q-separator />
|
<q-separator v-if="!isRead"/>
|
||||||
<form @submit.prevent="validateForm">
|
<form @submit.prevent="validateForm" v-if="!isRead">
|
||||||
<q-card-actions align="right" class="bg-white text-teal">
|
<q-card-actions align="right" class="bg-white text-teal">
|
||||||
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
<!-- <q-btn flat label="OK" v-close-popup /> -->
|
||||||
<q-btn
|
<q-btn
|
||||||
|
|
@ -360,4 +364,7 @@ $toggle-control-size: $toggle-height - ($toggle-gutter * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.noClick {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,15 @@ import { useQuasar } from "quasar";
|
||||||
const idRound = ref<string>("");
|
const idRound = ref<string>("");
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const mixin = useCounterMixin();
|
const mixin = useCounterMixin();
|
||||||
const { dialogRemove, showLoader, hideLoader, messageError,date2Thai } = mixin;
|
const {
|
||||||
|
dialogRemove,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
messageError,
|
||||||
|
date2Thai,
|
||||||
|
dateToISO,
|
||||||
|
dialogConfirm,
|
||||||
|
} = mixin;
|
||||||
const dataStore = useSalaryDataStore();
|
const dataStore = useSalaryDataStore();
|
||||||
const year = ref<number>(0);
|
const year = ref<number>(0);
|
||||||
const filterKeyword = ref<string>("");
|
const filterKeyword = ref<string>("");
|
||||||
|
|
@ -23,9 +31,10 @@ const editCheck = ref<boolean>(false);
|
||||||
const dialog = ref<boolean>(false);
|
const dialog = ref<boolean>(false);
|
||||||
const period = ref<string>("");
|
const period = ref<string>("");
|
||||||
const isActive = ref<boolean>(false);
|
const isActive = ref<boolean>(false);
|
||||||
|
const isRead = ref<boolean>(false);
|
||||||
const effectiveDate = ref<Date | null>(null);
|
const effectiveDate = ref<Date | null>(null);
|
||||||
|
|
||||||
const yearData = ref<number|null>(0)
|
const yearData = ref<number | null>(0);
|
||||||
const maxPage = ref<number>(1);
|
const maxPage = ref<number>(1);
|
||||||
const currentPage = ref<number>(1);
|
const currentPage = ref<number>(1);
|
||||||
const page = ref<number>(1);
|
const page = ref<number>(1);
|
||||||
|
|
@ -95,7 +104,7 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
|
|
||||||
function clickAdd() {
|
function clickAdd() {
|
||||||
dialog.value = true;
|
dialog.value = true;
|
||||||
editCheck.value = false
|
editCheck.value = false;
|
||||||
}
|
}
|
||||||
/** ดึงข้อมูลเริ่มต้น */
|
/** ดึงข้อมูลเริ่มต้น */
|
||||||
function getData() {
|
function getData() {
|
||||||
|
|
@ -151,17 +160,39 @@ function deleteData(id: string) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function editPopup(data:RowList) {
|
function editPopup(data: RowList, status: string) {
|
||||||
console.log(data)
|
console.log(data);
|
||||||
|
if (status == "read") {
|
||||||
|
isRead.value = true;
|
||||||
|
}
|
||||||
editCheck.value = true;
|
editCheck.value = true;
|
||||||
dialog.value = true;
|
dialog.value = true;
|
||||||
console.log(dialog.value)
|
console.log(dialog.value);
|
||||||
idRound.value = data.id;
|
idRound.value = data.id;
|
||||||
period.value = data.period ? data.period:'';
|
period.value = data.period ? data.period : "";
|
||||||
yearData.value = data.year ? data.year:0;
|
yearData.value = data.year ? data.year : 0;
|
||||||
effectiveDate.value = data.effectiveDate as Date;
|
effectiveDate.value = data.effectiveDate as Date;
|
||||||
isActive.value = data.isActive ? data.isActive:false;
|
isActive.value = data.isActive ? data.isActive : false;
|
||||||
}
|
}
|
||||||
|
/** ปิดรอบ */
|
||||||
|
function dialogClose(id: string) {
|
||||||
|
dialogConfirm(
|
||||||
|
$q,
|
||||||
|
() => {
|
||||||
|
// http
|
||||||
|
// .put(config.API)
|
||||||
|
// .then((res) => {})
|
||||||
|
// .catch((e) => {
|
||||||
|
// messageError($q, e);
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
"ยืนยันการปิดรอบ",
|
||||||
|
"หากปิดรอบแล้วจะไม่สามารถแก้ไขรายการเงินเดือนของรอบนี้ได้ ต้องการยืนยันการปิดรอบนี้ใช่หรือไม่?"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
year.value = new Date().getFullYear();
|
year.value = new Date().getFullYear();
|
||||||
getData();
|
getData();
|
||||||
|
|
@ -324,13 +355,13 @@ onMounted(async () => {
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="col.name == 'effectiveDate'">
|
<div v-if="col.name == 'effectiveDate'">
|
||||||
{{ date2Thai(props.row.effectiveDate)}}
|
{{ date2Thai(props.row.effectiveDate) }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'year'">
|
<div v-else-if="col.name == 'year'">
|
||||||
{{ props.row.year ? props.row.year + 543:'-'}}
|
{{ props.row.year ? props.row.year + 543 : "-" }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name == 'period'">
|
<div v-else-if="col.name == 'period'">
|
||||||
{{ dataStore.statusTothai(props.row.period)}}
|
{{ dataStore.statusTothai(props.row.period) }}
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="col.name === 'isActive'">
|
<div v-else-if="col.name === 'isActive'">
|
||||||
<q-icon
|
<q-icon
|
||||||
|
|
@ -358,11 +389,23 @@ onMounted(async () => {
|
||||||
round
|
round
|
||||||
class="q-mr-xs"
|
class="q-mr-xs"
|
||||||
size="12px"
|
size="12px"
|
||||||
icon="edit"
|
:icon="
|
||||||
|
dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
|
||||||
|
? 'mdi-eye-outline'
|
||||||
|
: 'edit'
|
||||||
|
"
|
||||||
clickable
|
clickable
|
||||||
@click="editPopup(props.row)"
|
@click="
|
||||||
|
dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
|
||||||
|
? editPopup(props.row, 'read')
|
||||||
|
: editPopup(props.row, 'edit')
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
<q-tooltip>{{
|
||||||
|
dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
|
||||||
|
? "ดูข้อมูล"
|
||||||
|
: "แก้ไขข้อมูล"
|
||||||
|
}}</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
<q-btn
|
<q-btn
|
||||||
color="red"
|
color="red"
|
||||||
|
|
@ -370,14 +413,27 @@ onMounted(async () => {
|
||||||
dense
|
dense
|
||||||
round
|
round
|
||||||
size="12px"
|
size="12px"
|
||||||
icon="mdi-delete"
|
:icon="
|
||||||
|
dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
|
||||||
|
? 'mdi-close-box'
|
||||||
|
: 'mdi-delete'
|
||||||
|
"
|
||||||
clickable
|
clickable
|
||||||
@click.stop="
|
@click.stop="
|
||||||
dialogRemove($q, async () => await deleteData(props.row.id))
|
dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
|
||||||
|
? dialogClose(props.row.id)
|
||||||
|
: dialogRemove(
|
||||||
|
$q,
|
||||||
|
async () => await deleteData(props.row.id)
|
||||||
|
)
|
||||||
"
|
"
|
||||||
v-close-popup
|
v-close-popup
|
||||||
>
|
>
|
||||||
<q-tooltip>ลบข้อมูล</q-tooltip>
|
<q-tooltip>{{
|
||||||
|
dateToISO(new Date()) >= dateToISO(props.row.effectiveDate)
|
||||||
|
? "ปิดรอบ"
|
||||||
|
: "ลบข้อมูล"
|
||||||
|
}}</q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
</q-td>
|
</q-td>
|
||||||
</q-tr>
|
</q-tr>
|
||||||
|
|
@ -394,6 +450,7 @@ onMounted(async () => {
|
||||||
:period="period"
|
:period="period"
|
||||||
v-model:effective="effectiveDate"
|
v-model:effective="effectiveDate"
|
||||||
:isActive="isActive"
|
:isActive="isActive"
|
||||||
|
v-model:is-read="isRead"
|
||||||
v-model:year="yearData"
|
v-model:year="yearData"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue