fix bug calendar

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-04-30 10:59:11 +07:00
parent 2737810c6c
commit 6f5f1f90c9
111 changed files with 2002 additions and 1866 deletions

View file

@ -1,4 +1,3 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";
@ -14,7 +13,7 @@ import type { QForm } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
const modalPersonal = ref<boolean>(false);
const personId = ref<string>("");
const $q = useQuasar();
@ -68,8 +67,9 @@ const fecthappointmentByid = async () => {
const data = res.data.result;
appointment.value = data;
profileId.value = data.profileId;
title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${data.lastname ?? "-"
}`;
title.value.fullname = `${data.prefix}${data.firstname ?? "-"} ${
data.lastname ?? "-"
}`;
title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
title.value.positionLevelOld = data.positionLevelOld ?? "-";
title.value.positionTypeOld = data.positionTypeOld ?? "-";
@ -164,8 +164,16 @@ onMounted(async () => {
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
@click="router.push(`/appoint-employee`)" />
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="router.push(`/appoint-employee`)"
/>
รายละเอยดการปรบระดบชนงานลกจาง {{ title.fullname }}
</div>
<q-card bordered class="row col-12 text-dark">
@ -174,8 +182,15 @@ onMounted(async () => {
{{ title.fullname }}
</div>
<q-space />
<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ"
@click="onclickViewinfo(profileId)" />
<q-btn
outline
color="blue"
dense
icon-right="mdi-open-in-new"
class="q-px-sm"
label="ดูข้อมูลทะเบียนประวัติ"
@click="onclickViewinfo(profileId)"
/>
</div>
<div class="col-12"><q-separator /></div>
<div class="row col-12 q-pa-md">
@ -220,12 +235,36 @@ onMounted(async () => {
<q-space />
<div v-if="status !== 'DONE' && status !== 'REPORT'">
<div class="q-gutter-sm" v-if="!edit">
<q-btn outline color="primary" dense icon-right="mdi-file-edit-outline" class="q-px-sm" label="แก้ไข"
style="width: 80px" @click="edit = !edit" />
<q-btn
outline
color="primary"
dense
icon-right="mdi-file-edit-outline"
class="q-px-sm"
label="แก้ไข"
style="width: 80px"
@click="edit = !edit"
/>
</div>
<div class="q-gutter-sm" v-else>
<q-btn outline color="public" dense class="q-px-sm" label="บันทึก" style="width: 80px" @click="clickSave" />
<q-btn outline color="red" dense class="q-px-sm" label="ยกเลิก" style="width: 80px" @click="cancel()" />
<q-btn
outline
color="public"
dense
class="q-px-sm"
label="บันทึก"
style="width: 80px"
@click="clickSave"
/>
<q-btn
outline
color="red"
dense
class="q-px-sm"
label="ยกเลิก"
style="width: 80px"
@click="cancel()"
/>
</div>
</div>
</div>
@ -236,9 +275,19 @@ onMounted(async () => {
<div class="text-weight-bold">การศกษา</div>
</div>
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
v-model="educationOld" :rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]" hide-bottom-space
:label="`${'วุฒิการศึกษา'}`" type="text" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="educationOld"
:rules="[(val) => !!val || `${'กรุณากรอกวุฒิการศึกษา'}`]"
hide-bottom-space
:label="`${'วุฒิการศึกษา'}`"
type="text"
/>
</div>
</div>
<div class="row col-12 q-pa-md">
@ -249,58 +298,119 @@ onMounted(async () => {
</div>
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
v-model="organizationPositionOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space :label="`${'ตำแหน่ง/สังกัด'}`" type="textarea" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organizationPositionOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space
:label="`${'ตำแหน่ง/สังกัด'}`"
type="textarea"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
v-model="positionTypeOld" :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]" hide-bottom-space
:label="`${'ตำแหน่งประเภท'}`" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionTypeOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
hide-bottom-space
:label="`${'ตำแหน่งประเภท'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
v-model="positionLevelOld" :rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]" hide-bottom-space
:label="`${'ระดับ'}`" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionLevelOld"
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
hide-bottom-space
:label="`${'ระดับ'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
v-model="posNo" :rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]" hide-bottom-space
:label="`${'เลขที่'}`" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="posNo"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
hide-bottom-space
:label="`${'เลขที่'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row">
<div class="col-12">
<CurrencyInput v-model="salary" label="เงินเดือน" :edit="edit"
:rules="[(val: number) => !!val || `${'กรุณากรอกเงินเดือน'}`]" lazy-rules />
<CurrencyInput
v-model="salary"
label="เงินเดือน"
:edit="edit"
:rules="[(val: number) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
lazy-rules
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<datepicker menu-class-name="modalfix" :readonly="!edit" v-model="date" :locale="'th'" autoApply
:enableTimePicker="false" week-start="0">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :borderless="!edit" :readonly="!edit"
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
:borderless="!edit"
:readonly="!edit"
:model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]" hide-bottom-space
:label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`">
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
hide-bottom-space
:label="`${'ดำรงตำแหน่งในระดับปัจจุบันเมื่อ'}`"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" :style="edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
">
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
@ -309,8 +419,18 @@ onMounted(async () => {
</div>
</div>
<div class="col-12">
<q-input :class="getClass(edit)" :outlined="edit" dense lazy-rules :readonly="!edit" :borderless="!edit"
v-model="reason" hide-bottom-space :label="`${'หมายเหตุ '}`" type="textarea" />
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"
/>
</div>
</div>
</div>

View file

@ -9,7 +9,14 @@ import config from "@/app.config";
const $q = useQuasar();
const mixin = useCounterMixin(); //
const { date2Thai, hideLoader, messageError, showLoader, success, dialogConfirm } = mixin; //
const {
date2Thai,
hideLoader,
messageError,
showLoader,
success,
dialogConfirm,
} = mixin; //
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่พบข้อมูลผังโครงสร้าง");
@ -115,15 +122,18 @@ const myFilterMethod = (node: any, filter: string) => {
(node.organizationName && node.organizationName.indexOf(filt) > -1) ||
(node.positionNum && node.positionNum.indexOf(filt) > -1) ||
(node.positionName && node.positionName.indexOf(filt) > -1) ||
(node.governmentCode && node.governmentCode.toString().indexOf(filt) > -1) ||
(node.governmentCode &&
node.governmentCode.toString().indexOf(filt) > -1) ||
(node.agency && node.agency.indexOf(filt) > -1) ||
(node.government && node.government.indexOf(filt) > -1) ||
(node.department && node.department.indexOf(filt) > -1) ||
(node.pile && node.pile.indexOf(filt) > -1) ||
(node.organizationShortName && node.organizationShortName.indexOf(filt) > -1) ||
(node.organizationShortName &&
node.organizationShortName.indexOf(filt) > -1) ||
(node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
(node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
(node.executivePositionSide && node.executivePositionSide.indexOf(filt) > -1) ||
(node.executivePositionSide &&
node.executivePositionSide.indexOf(filt) > -1) ||
(node.positionLevel && node.positionLevel.indexOf(filt) > -1)
);
};
@ -242,7 +252,6 @@ const positionLevelOptions = ref<Object[]>([
const selectedPosition = async (data: any) => {
if (data.name == null && selected.value != data.keyId) {
editDataStatus.value = true;
selected.value = data.keyId;
@ -330,7 +339,6 @@ const checkPosition = (val: string) => {
return num;
};
watch(props, () => {
expanded.value = [];
const dataPersonal = props.personal;
@ -352,7 +360,6 @@ watch(props, () => {
}
}
});
}
});
@ -389,24 +396,46 @@ function findByPerson(element: any): any {
<div class="col-xs-12 col-sm-7 row">
<q-card flat bordered class="fit q-pa-sm">
<q-scroll-area visible style="height: 70vh">
<q-input outlined dense ref="filterRef" v-model="search" placeholder="ค้นหา" class="q-mb-sm">
<q-input
outlined
dense
ref="filterRef"
v-model="search"
placeholder="ค้นหา"
class="q-mb-sm"
>
<template v-slot:append>
<q-icon name="mdi-magnify" />
</template>
</q-input>
<div class="q-pa-sm q-gutter-sm">
<q-tree no-transition dense :nodes="treeData" node-key="keyId" :filter="search"
:no-results-label="notFound" :no-nodes-label="noData" :filter-method="myFilterMethod"
v-model:expanded="expanded">
<q-tree
no-transition
dense
:nodes="treeData"
node-key="keyId"
:filter="search"
:no-results-label="notFound"
:no-nodes-label="noData"
:filter-method="myFilterMethod"
v-model:expanded="expanded"
>
<template v-slot:header-organization="prop">
<div class="col">
<div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
<div
class="row items-center q-px-xs q-pt-xs q-gutter-sm"
>
<!--แสดงชอแผนก มพวหนา คลกแลวกาง/ Tree-->
<div class="text-weight-medium">
{{ prop.node.organizationName }}
</div>
<q-badge v-if="prop.node.totalPositionVacant > 0" rounded color="red" outline
:label="prop.node.totalPositionVacant" />
<q-badge
v-if="prop.node.totalPositionVacant > 0"
rounded
color="red"
outline
:label="prop.node.totalPositionVacant"
/>
<q-space />
</div>
@ -420,31 +449,53 @@ function findByPerson(element: any): any {
</template>
<template v-slot:header-person="prop">
<q-item clickable :active="selected == prop.node.keyId" @click="selectedPosition(prop.node)"
:disable="prop.node.name != null ||
<q-item
clickable
:active="selected == prop.node.keyId"
@click="selectedPosition(prop.node)"
:disable="
prop.node.name != null ||
checkPosition(prop.node.positionNumId) != -1
" active-class="my-list-link text-primary text-weight-medium"
class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list">
<img v-if="prop.node.avatar == '' ||
prop.node.avatar ==
'https://cdn.quasar.dev/img/boy-avatar.png'
" src="@/assets/avatar_user.jpg" class="col-xs-1 col-sm-2" style="
"
active-class="my-list-link text-primary text-weight-medium"
class="row items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
>
<img
v-if="
prop.node.avatar == '' ||
prop.node.avatar ==
'https://cdn.quasar.dev/img/boy-avatar.png'
"
src="@/assets/avatar_user.jpg"
class="col-xs-1 col-sm-2"
style="
width: 28px;
height: 28px;
border-radius: 50%;
" />
<img v-else :src="prop.node.avatar" class="col-xs-1 col-sm-2" style="
"
/>
<img
v-else
:src="prop.node.avatar"
class="col-xs-1 col-sm-2"
style="
width: 28px;
height: 28px;
border-radius: 50%;
" />
"
/>
<!--=====ตำแหนงวาง แดง=====-->
<div v-if="prop.node.name == null" class="q-px-sm text-weight-medium text-red">
<div
v-if="prop.node.name == null"
class="q-px-sm text-weight-medium text-red"
>
าง
</div>
<!--=====วหน เขยว=====-->
<div v-else-if="prop.node.positionLeaderFlag">
<div class="q-px-sm text-weight-medium text-primary">
<div
class="q-px-sm text-weight-medium text-primary"
>
{{ prop.node.name }}
</div>
</div>
@ -464,8 +515,13 @@ function findByPerson(element: any): any {
<div class="q-pr-sm">
{{ prop.node.positionLevel }}
</div>
<q-icon v-if="prop.node.positionLeaderFlag" class="q-mr-sm" size="15px" color="primary"
name="mdi-bookmark"></q-icon>
<q-icon
v-if="prop.node.positionLeaderFlag"
class="q-mr-sm"
size="15px"
color="primary"
name="mdi-bookmark"
></q-icon>
<q-space />
</q-item>
@ -481,18 +537,36 @@ function findByPerson(element: any): any {
<div class="row col-12 q-col-gutter-xs">
<div class="col-xs-12 col-sm-12 col-md-12"></div>
<div class="col-xs-12 col-sm-12 col-md-12">
<datepicker menu-class-name="modalfix" v-model="dataForm.containDate" :locale="'th'" autoApply
:enableTimePicker="false" week-start="0">
<datepicker
menu-class-name="modalfix"
v-model="dataForm.containDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input class="full-width inputgreen cursor-pointer" outlined dense lazy-rules :model-value="date2Thai(new Date(dataForm.containDate))
" :rules="[(val: string) => !!val || `${'วันที่รายงานตัว'}`]"
:label="`${'วันที่รายงานตัว'}`" hide-bottom-space>
<q-input
class="full-width inputgreen cursor-pointer"
outlined
dense
:model-value="
date2Thai(new Date(dataForm.containDate))
"
:rules="[(val: string) => !!val || `${'วันที่รายงานตัว'}`]"
:label="`${'วันที่รายงานตัว'}`"
hide-bottom-space
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
@ -501,36 +575,92 @@ function findByPerson(element: any): any {
</div>
<q-space />
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select class="full-width inputgreen cursor-pointer custom-input" outlined standout dense
hide-bottom-space lazy-rules :options="posNoOptions" v-model="dataForm.posNoId"
:label="`${'ตำแหน่งเลขที่'}`" map-options />
<q-select
class="full-width inputgreen cursor-pointer custom-input"
outlined
standout
dense
hide-bottom-space
lazy-rules
:options="posNoOptions"
v-model="dataForm.posNoId"
:label="`${'ตำแหน่งเลขที่'}`"
map-options
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
hide-bottom-space lazy-rules :options="positionOptions" v-model="dataForm.positionId"
:label="`${'ตำแหน่ง'}`" map-options />
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
hide-bottom-space
lazy-rules
:options="positionOptions"
v-model="dataForm.positionId"
:label="`${'ตำแหน่ง'}`"
map-options
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
hide-bottom-space lazy-rules emit-value :options="positionPathSideOptions"
v-model="dataForm.positionPathSideId" :label="`${'ด้าน/สาขา'}`" map-options />
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
hide-bottom-space
lazy-rules
emit-value
:options="positionPathSideOptions"
v-model="dataForm.positionPathSideId"
:label="`${'ด้าน/สาขา'}`"
map-options
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
hide-bottom-space lazy-rules :options="positionTypeOptions" v-model="dataForm.positionTypeId"
:label="`${'ประเภทตำแหน่ง'}`" map-options />
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
hide-bottom-space
lazy-rules
:options="positionTypeOptions"
v-model="dataForm.positionTypeId"
:label="`${'ประเภทตำแหน่ง'}`"
map-options
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
hide-bottom-space lazy-rules :options="positionLineOptions" v-model="dataForm.positionLineId"
:label="`${'สายงาน'}`" map-options />
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
hide-bottom-space
lazy-rules
:options="positionLineOptions"
v-model="dataForm.positionLineId"
:label="`${'สายงาน'}`"
map-options
/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<q-select outlined class="full-width inputgreen cursor-pointer custom-input" standout dense
lazy-rules :options="positionLevelOptions" v-model="dataForm.positionLevelId"
:label="`${'ระดับ'}`" hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]" emit-value map-options />
<q-select
outlined
class="full-width inputgreen cursor-pointer custom-input"
standout
dense
lazy-rules
:options="positionLevelOptions"
v-model="dataForm.positionLevelId"
:label="`${'ระดับ'}`"
hide-bottom-space
:rules="[(val: string) => !!val || `${'กรุณาเลือกระดับ'}`]"
emit-value
map-options
/>
</div>
</div>
</q-scroll-area>
@ -540,8 +670,12 @@ function findByPerson(element: any): any {
</q-card-section>
<q-separator />
<DialogFooter :editvisible="true" :validate="validateData" :save="saveAppoint"
v-model:modalEdit="editDataStatus" />
<DialogFooter
:editvisible="true"
:validate="validateData"
:save="saveAppoint"
v-model:modalEdit="editDataStatus"
/>
</q-form>
</q-card>
</q-dialog>