hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix:load skeleton

Browse source
This commit is contained in:
setthawutttty 2025-08-14 16:15:04 +07:00
parent 7cdff8d853
commit cacb84bb48
20 changed files with 894 additions and 309 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
View file

@ -36,6 +36,8 @@ const search = ref<string>("");
const listCheckID = ref<string | null>(null);
const listTarget = ref<any>([]);
const isLoad = ref<boolean>(false);
const isLoadList = ref<boolean>(false);
const formFilter = reactive<any>({
isAll: false,
keyword: "",
@ -91,20 +93,20 @@ function fetchListPlan() {
: store.dataProfile.nodeDnaId;
formFilter.node = formFilter.isAll ? 0 : store.dataProfile.node;
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
showLoader();
isLoadList.value = true;
http
.post(config.API.kpiPlan + `/search`, formFilter)
.then((res) => {
listTarget.value = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
totalList.value = res.data.result.total;
isLoadList.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoadList.value = false;
});
}
@ -113,7 +115,7 @@ function fetchListPlan() {
* @param id id
*/
function fetchListPlanByid(id: string) {
showLoader();
isLoad.value = true;
http
.get(config.API.kpiAchievement("planned") + `/${id}`)
.then((res) => {
@ -138,12 +140,13 @@ function fetchListPlanByid(id: string) {
formDetail.endDate = data.endDate;
listCheckID.value = data.kpiPlanId;
isLoad.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
@ -154,24 +157,25 @@ function fetchListRole() {
formFilter.node = formFilter.isAll ? 0 : store.dataProfile.node;
formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
formFilter.position = store.dataProfile.position;
isLoadList.value = true;
http
.post(config.API.kpiRole + `/search`, formFilter)
.then((res) => {
listTarget.value = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
totalList.value = res.data.result.total;
isLoadList.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoadList.value = false;
});
}
function fetchRoleByid(id: string) {
showLoader();
isLoad.value = true;
http
.get(config.API.kpiAchievement("role") + `/${id}`)
.then((res) => {
@ -193,12 +197,13 @@ function fetchRoleByid(id: string) {
formDetail.includingName = data.includingName;
formDetail.including = data.including;
listCheckID.value = data.kpiRoleId;
isLoad.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
@ -212,25 +217,25 @@ function fetchListSpecial() {
pageSize: formFilter.pageSize,
page: formFilter.page,
};
showLoader();
isLoadList.value = true;
http
.post(config.API.kpiSpecial + `/search`, body)
.then((res) => {
listTarget.value = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
totalList.value = res.data.result.total;
isLoadList.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoadList.value = false;
});
}
function fetchspecialByid(id: string) {
showLoader();
isLoad.value = true;
http
.get(config.API.kpiAchievement("special") + `/${id}`)
.then((res) => {
@ -252,18 +257,19 @@ function fetchspecialByid(id: string) {
formDetail.endDate = data.endDate;
listCheckID.value = data.kpiSpecialId;
isLoad.value = false;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
function clickList(id: string, isData: boolean = false) {
if (!checkDetail.value) {
showLoader();
isLoad.value=true
const url =
numpage.value === 1
? config.API.kpiPlan
@ -301,12 +307,13 @@ function clickList(id: string, isData: boolean = false) {
formDetail.strategyId = data.strategyId;
formDetail.strategyName = data.strategyName;
formDetail.documentInfoEvidence = data.documentInfoEvidence;
isLoad.value=false
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
isLoad.value=false
});
}
}
@ -595,7 +602,7 @@ const title = computed(() => {
<q-separator />
<q-card-section class="q-pa-none">
<q-list separator>
<q-list separator v-if="!isLoadList">
<q-item
dense
v-for="(item, index) in listTarget"
@ -622,6 +629,25 @@ const title = computed(() => {
</q-item-section>
</q-item>
</q-list>
<q-list v-else separator>
<q-item dense v-for="item in 2">
<q-item-section class="q-pa-none">
<div
class="row items-center"
style="min-height: 50px"
>
<div class="col-5">
<q-skeleton type="text" width="50px" />
</div>
<div class="col-7">
<q-skeleton type="text" />
</div>
</div>
</q-item-section>
</q-item>
</q-list>
<q-separator />
<div
class="q-pa-lg flex justify-end"
@ -662,18 +688,33 @@ const title = computed(() => {
<div class="q-pa-sm q-col-gutter-lg">
<div class="col-12 row" v-if="numpage !== 3">
<div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
<div class="col-8">{{ formDetail.nodeName }}</div>
<div v-if="!isLoad" class="col-8">
{{ formDetail.nodeName }}
</div>
<div class="col-8" v-else>
<q-skeleton type="text" />
</div>
</div>
<div class="col-12 row" v-if="numpage === 1">
<div class="col-4 text-grey-6">ยุทธศาสตร์ / แผน</div>
<div class="col-8">{{ formDetail.strategyName }}</div>
<div v-if="!isLoad" class="col-8">
{{ formDetail.strategyName }}
</div>
<div class="col-8" v-else>
<q-skeleton type="text" />
</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">ลำดับ/รหัสตัวชี้วัด</div>
<div class="col-8">
<q-skeleton
v-if="isLoad"
type="QInput"
height="40px"
/>
<q-input
v-if="numpage === 3"
v-else-if="numpage === 3"
outlined
:readonly="checkDetail"
v-model="formDetail.including"
@ -694,8 +735,13 @@ const title = computed(() => {
<div class="col-12 row">
<div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
<div class="col-8">
<q-skeleton
v-if="isLoad"
type="QInput"
height="40px"
/>
<q-input
v-if="numpage === 3"
v-else-if="numpage === 3"
outlined
:readonly="checkDetail"
v-model="formDetail.includingName"
@ -715,6 +761,7 @@ const title = computed(() => {
<div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
<div class="col-8">
<q-input
v-if="!isLoad"
outlined
v-model="formDetail.target"
bg-color="white"
@ -727,12 +774,14 @@ const title = computed(() => {
hide-bottom-space
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">หน่วยนับ</div>
<div class="col-8">
<q-input
v-if="!isLoad"
outlined
v-model="formDetail.unit"
bg-color="white"
@ -746,12 +795,14 @@ const title = computed(() => {
hide-bottom-space
reverse-fill-mask
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<div class="col-12 row">
<div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
<div class="col-8">
<q-input
v-if="!isLoad"
outlined
v-model="formDetail.weight"
bg-color="white"
@ -766,6 +817,7 @@ const title = computed(() => {
lazy-rules
mask="###"
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</div>
@ -784,6 +836,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">5</div>
<div class="col-6">
<q-input
v-if="!isLoad"
v-model="formDetail.achievement5"
outlined
dense
@ -793,6 +846,7 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -800,6 +854,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">4</div>
<div class="col-6 text-center text-primary">
<q-input
v-if="!isLoad"
v-model="formDetail.achievement4"
outlined
:readonly="checkDetail"
@ -809,6 +864,7 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -816,6 +872,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">3</div>
<div class="col-6 text-center text-primary">
<q-input
v-if="!isLoad"
v-model="formDetail.achievement3"
outlined
:readonly="checkDetail"
@ -825,6 +882,7 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -832,6 +890,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">2</div>
<div class="col-6 text-center text-primary">
<q-input
v-if="!isLoad"
v-model="formDetail.achievement2"
outlined
:readonly="checkDetail"
@ -841,6 +900,7 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -848,6 +908,7 @@ const title = computed(() => {
<div class="col-6 text-center text-body2">1</div>
<div class="col-6 text-center text-primary">
<q-input
v-if="!isLoad"
v-model="formDetail.achievement1"
outlined
:readonly="checkDetail"
@ -857,12 +918,14 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</q-card>
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="formDetail.meaning"
label="นิยามหรือความหมายของตัวชี้วัด"
type="textarea"
@ -874,10 +937,12 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="formDetail.formula"
label="สูตรคำนวณ"
:readonly="checkDetail"
@ -889,10 +954,12 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="formDetail.documentInfoEvidence"
label="ข้อมูลเอกสารหลักฐาน"
type="textarea"
@ -904,9 +971,11 @@ const title = computed(() => {
class="inputgreen"
lazy-rules
/>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-3">
<datepicker
v-if="!isLoad"
v-model="formDetail.startDate"
:locale="'th'"
:readonly="checkDetail"
@ -952,9 +1021,11 @@ const title = computed(() => {
</q-input>
</template>
</datepicker>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-3">
<datepicker
v-if="!isLoad"
v-model="formDetail.endDate"
:locale="'th'"
:readonly="checkDetail"
@ -1000,6 +1071,7 @@ const title = computed(() => {
</q-input>
</template>
</datepicker>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</div>

56
src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
View file

@ -13,6 +13,8 @@ import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
import DialogHeader from "@/components/DialogHeader.vue";
import SkeletonTable from '@/components/SkeletonTable.vue'
const dataListCapacityDetails = ref<ListCapacity[]>([]);
const route = useRoute();
const idParam = ref<string>(route.params.id as string);
@ -195,9 +197,10 @@ function onSubmit() {
}
}
const isLoadCapacity = ref<boolean>(false);
/** ดึงข้อมูล สมรรถนะ */
function getData() {
showLoader();
isLoadCapacity.value = true;
http
.get(config.API.KpiCapacity + `?type=${type.value}&pageSize=100`)
.then((res) => {
@ -213,7 +216,7 @@ function getData() {
}
})
.finally(() => {
hideLoader();
isLoadCapacity.value = false;
});
}
@ -228,7 +231,9 @@ function filterTxt(val: any) {
}
/** ดึงข้อมูลตามไอดี */
const isLoadById = ref<boolean>(false);
function getDataById() {
isLoadById.value = true;
http
.get(config.API.kpiUserCapacity + `/${idProps.value}`)
.then((res) => {
@ -252,6 +257,7 @@ function getDataById() {
formDetail.definition = target.description;
dataListCapacityDetails.value = dataListCriteria;
isLoadById.value = false;
})
.catch((e) => {})
.finally(() => {});
@ -262,8 +268,10 @@ watch(
() => {
if (modal.value) {
type.value = competencyType.value;
getData();
if (idProps.value) {
isLoadById.value = true;
setTimeout(() => {
getDataById();
}, 500);
@ -407,18 +415,32 @@ watch(
}}
</div>
<div class="col-8">
<span v-if="field == 'type'">{{
formDetail[field]
? store.convertCompetencyType(formDetail[field])
: "-"
}}</span>
<span
v-else-if="field == 'definition'"
v-html="formDetail[field]"
></span>
<span v-else>{{
formDetail[field] ? formDetail[field] : "-"
}}</span>
<span v-if="field == 'type'">
<div v-if="!isLoadById">
{{
formDetail[field]
? store.convertCompetencyType(
formDetail[field]
)
: "-"
}}
</div>
<q-skeleton v-else type="text" />
</span>
<span v-else-if="field == 'definition'">
<div
v-if="!isLoadById"
v-html="formDetail[field]"
></div>
<q-skeleton v-else type="text" />
</span>
<span v-else>
<div v-if="!isLoadById">
{{ formDetail[field] ? formDetail[field] : "-" }}
</div>
<q-skeleton v-else type="text"
/></span>
</div>
</div>
</div>
@ -426,6 +448,7 @@ watch(
<div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
<div class="col-8">
<q-input
v-if="!isLoadById"
readonly
v-model="weight"
dense
@ -436,10 +459,12 @@ watch(
class="inputgreen"
mask="###"
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-4 text-grey-6">ระดับที่คาดหวัง</div>
<div class="col-8">
<q-select
v-if="!isLoadById"
:readonly="type == 'HEAD' || type == 'GROUP'"
v-model="expectedLevel"
:options="expectedLevelOp"
@ -451,12 +476,14 @@ watch(
hide-bottom-space
class="inputgreen"
/>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</q-card>
</div>
<div class="col-xs-12 col-md-7">
<d-table
v-if="!isLoadById"
flat
bordered
dense
@ -531,6 +558,7 @@ watch(
</div>
</template>
</d-table>
<SkeletonTable v-else :columns="columns"/>
</div>
</div>
</div>

55
src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
View file

@ -60,7 +60,9 @@ let count = ref<number>(0);
* @param index id หัวข้อ
* @param data ข้อมูล
*/
const isLoadDetail = ref<boolean>(false);
function clickList(index: string, data: any) {
isLoadDetail.value = true;
listCheck.value = index as string;
formDataView.id = data.id;
@ -76,13 +78,13 @@ function clickList(index: string, data: any) {
reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
if (count.value >= 1) {
reasonEvaluatorRef.value.reset();
reasonCommanderRef.value.reset();
reasonCommanderHighRef.value.reset();
reasonEvaluatorRef.value && reasonEvaluatorRef.value.reset();
reasonCommanderRef.value && reasonCommanderRef.value.reset();
reasonCommanderHighRef.value && reasonCommanderHighRef.value.reset();
}
showLoader();
count.value++;
setTimeout(() => {
hideLoader();
isLoadDetail.value = false;
}, 100);
}
@ -157,8 +159,9 @@ function closeAdd() {
getList();
}
const isLoad = ref<boolean>(false);
function getList() {
showLoader();
isLoad.value = true;
http
.get(
config.API.kpiCommentP(
@ -171,13 +174,13 @@ function getList() {
.then((res) => {
const data = res.data.result;
listTarget.value = data;
isLoad.value = false;
})
.catch((e) => {
messageError($q, e);
isLoad.value = false;
})
.finally(() => {
hideLoader();
});
.finally(() => {});
}
/**
@ -288,7 +291,19 @@ watch(
<q-separator />
<q-card-section class="q-pa-none">
<div v-if="listTarget.length > 0">
<q-list v-if="isLoad" separator>
<q-item dense v-for="item in 2">
<q-item-section class="q-pa-none">
<div class="row items-center" style="min-height: 50px">
<div class="col-12">
<q-skeleton type="text" />
</div>
</div>
</q-item-section>
</q-item>
</q-list>
<div v-else-if="listTarget.length > 0">
<q-list separator dense>
<q-item
v-for="(item, index) in listTarget"
@ -348,11 +363,21 @@ watch(
<div class="row q-pa-md q-col-gutter-sm">
<div class="row col-12 text-weight-medium">
<div class="col-4 text-grey-6">หัวข้อปัญหา</div>
<div class="col-8">{{ formDataView.topic }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">
{{ formDataView.topic }}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div class="row col-12 text-weight-medium">
<div class="col-4 text-grey-6">รายละเอียดปัญหา</div>
<div class="col-8">{{ formDataView.reason }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">
{{ formDataView.reason }}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div class="col-12">
<q-separator />
@ -375,6 +400,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
:readonly="
@ -390,6 +416,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div
@ -429,6 +456,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
@ -444,6 +472,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div
@ -482,6 +511,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
@ -497,6 +527,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div

67
src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
View file

@ -62,7 +62,10 @@ const formDataView = reactive<FormCommentByRole>({
});
let count = ref<number>(0);
const isLoadDetail = ref<boolean>(false);
function clickList(index: string, data: any) {
isLoadDetail.value = true;
listCheck.value = index as string;
formDataView.id = data.id;
@ -80,14 +83,13 @@ function clickList(index: string, data: any) {
reasonCommanderHigh.value = data.reasonCommanderHigh ?? "";
if (count.value >= 1) {
reasonEvaluatorRef.value.reset();
reasonCommanderRef.value.reset();
reasonCommanderHighRef.value.reset();
reasonEvaluatorRef.value && reasonEvaluatorRef.value.reset();
reasonCommanderRef.value && reasonCommanderRef.value.reset();
reasonCommanderHighRef.value && reasonCommanderHighRef.value.reset();
}
count.value++;
showLoader();
setTimeout(() => {
hideLoader();
isLoadDetail.value = false;
}, 100);
}
@ -147,8 +149,9 @@ function closeAdd() {
numLevel.value = "";
}
const isLoad = ref<boolean>(false);
function getList() {
showLoader();
isLoad.value = true;
http
.get(
config.API.kpiCommentP(
@ -161,13 +164,13 @@ function getList() {
.then((res) => {
const data = res.data.result;
listTarget.value = data;
isLoad.value = false;
})
.catch((e) => {
messageError($q, e);
isLoad.value = false;
})
.finally(() => {
hideLoader();
});
.finally(() => {});
}
function onSubmitComment(role: string) {
@ -313,7 +316,21 @@ watch(
<q-separator />
<q-card-section class="q-pa-none">
<div v-if="listTarget.length > 0">
<q-list v-if="isLoad" separator>
<q-item dense v-for="item in 2">
<q-item-section class="q-pa-none">
<div
class="row items-center"
style="min-height: 50px"
>
<div class="col-12">
<q-skeleton type="text" />
</div>
</div>
</q-item-section>
</q-item>
</q-list>
<div v-else-if="listTarget.length > 0">
<q-list separator dense>
<q-item
v-for="(item, index) in listTarget"
@ -373,7 +390,12 @@ watch(
: "หัวข้อความก้าวหน้า"
}}
</div>
<div class="col-8">{{ formDataView.topic }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">
{{ formDataView.topic }}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div class="row col-12 text-weight-medium">
<div class="col-4 text-grey-6">
@ -383,18 +405,29 @@ watch(
: "รายละเอียดความก้าวหน้า"
}}
</div>
<div class="col-8">{{ formDataView.reason }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">{{ formDataView.reason }}</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div
class="row col-12 text-weight-medium"
v-if="type !== 'capacity' && type !== 'development'"
>
<div class="col-4 text-grey-6">คะแนน</div>
<div class="col-8">{{ formDataView.score }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">{{ formDataView.score }}</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div class="row col-12 text-weight-medium">
<div class="col-4 text-grey-6">ผู้สร้าง</div>
<div class="col-8">{{ formDataView.createdFullName }}</div>
<div class="col-8">
<div v-if="!isLoadDetail">
{{ formDataView.createdFullName }}
</div>
<q-skeleton v-else type="text" />
</div>
</div>
<div
@ -422,6 +455,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
:readonly="
@ -437,6 +471,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div
@ -475,6 +510,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
@ -490,6 +526,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div
@ -527,6 +564,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoadDetail"
outlined
dense
label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
@ -542,6 +580,7 @@ watch(
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div

68
src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
View file

@ -30,6 +30,8 @@ const props = defineProps({
const route = useRoute();
const idKpi = ref<string>(route.params.id.toLocaleString());
const isLoadMain = defineModel<boolean>('isLoadMain',{required:true})
const isLoad = ref<boolean>(false);
const development = ref<string[]>([]); //ตัวแปรเก็บ ตัวเลือกการพัฒนา
const reasonDevelopment70 = ref<string>(""); //อื่นๆ การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
const reasonDevelopment20 = ref<string>(""); //อื่นๆ การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
@ -220,11 +222,11 @@ function onSubmit() {
selectTypeYear: formData.year ? formData.year.toString() : null,
selectTypeId: projectName.value ? projectName.value.id : null,
};
showLoader();
isLoadMain.value = true
http[id.value ? "put" : "post"](url, body)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
close();
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
@ -305,7 +307,7 @@ watch(
() => id.value,
(i) => {
if (i) {
showLoader();
isLoad.value = true;
http
.get(config.API.kpiAchievementDevelop + `/${id.value}`)
.then(async (res) => {
@ -342,13 +344,14 @@ watch(
)
? data.reasonDevelopment10
: "";
isLoad.value = false;
}, 500);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
}
@ -367,6 +370,7 @@ watch(
<div class="row q-col-gutter-sm">
<div class="col-3">
<q-select
v-if="!isLoad"
class="inputgreen"
outlined
dense
@ -379,9 +383,11 @@ watch(
v-model="choice"
>
</q-select>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-3" v-if="choice == 'PROJECT'">
<datepicker
v-if="!isLoad"
menu-class-name="modalfix"
v-model="formData.year"
:locale="'th'"
@ -419,9 +425,11 @@ watch(
</q-input>
</template>
</datepicker>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-3" v-if="choice == 'PROJECT'">
<q-select
v-if="!isLoad"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
@ -446,9 +454,11 @@ watch(
</q-item>
</template>
</q-select>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
v-model="formData.name"
outlined
dense
@ -459,6 +469,7 @@ watch(
label="ชื่อเรื่อง/เนื้อเรื่อง/หัวข้อการพัฒนา"
>
</q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
<div class="col-12">
<span class="text-weight-medium">วิธีการพัฒนา</span>
@ -469,6 +480,7 @@ watch(
>70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)</span
>
<q-option-group
v-if="!isLoad"
class="check_box q-mt-sm"
keep-color
color="primary"
@ -477,16 +489,30 @@ watch(
:options="projectTechniquesOp1"
type="checkbox"
/>
<q-item
v-else
class="q-pa-none"
style="max-width: 300px; height: 30px"
v-for="item in 11"
>
<q-item-section>
<q-skeleton type="text" />
</q-item-section>
</q-item>
<div class="row q-pb-md" v-if="checkOtherBox11">
<div class="offset-4 col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
v-if="!isLoad"
v-model="reasonDevelopment70"
dense
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</div>
@ -496,6 +522,7 @@ watch(
>20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)</span
>
<q-option-group
v-if="!isLoad"
class="check_box q-mt-sm"
keep-color
color="primary"
@ -504,16 +531,28 @@ watch(
:options="projectTechniquesOp2"
type="checkbox"
/>
<q-item
v-else
class="q-pa-none"
style="max-width: 300px; height: 30px"
v-for="item in 5"
>
<q-item-section>
<q-skeleton type="text" />
</q-item-section>
</q-item>
<div class="row q-pb-md" v-if="checkOtherBox12">
<div class="offset-4 col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
v-if="!isLoad"
v-model="reasonDevelopment20"
dense
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</div>
@ -521,6 +560,7 @@ watch(
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<span class="text-weight-medium">10 การฝึกอบรมอื่นๆ</span>
<q-option-group
v-if="!isLoad"
class="check_box q-mt-sm"
keep-color
color="primary"
@ -529,16 +569,28 @@ watch(
:options="projectTechniquesOp3"
type="checkbox"
/>
<q-item
v-else
class="q-pa-none"
style="max-width: 300px; height: 30px"
v-for="item in 7"
>
<q-item-section>
<q-skeleton type="text" />
</q-item-section>
</q-item>
<div class="row q-pb-md" v-if="checkOtherBox13">
<div class="offset-4 col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
v-if="!isLoad"
v-model="reasonDevelopment10"
dense
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</div>
@ -546,6 +598,7 @@ watch(
</div>
<div class="col-12">
<q-input
v-if="!isLoad"
label="เป้าหมายการนำไปพัฒนางาน"
v-model="formData.target"
outlined
@ -556,6 +609,7 @@ watch(
lazy-rules
hide-bottom-space
></q-input>
<q-skeleton v-else type="QInput" height="150px" />
</div>
<div class="col-12">
<q-card bordered>
@ -573,6 +627,7 @@ watch(
</div>
<div class="col-8">
<q-input
v-if="!isLoad"
class="inputgreen"
v-model="formData.achievement10"
outlined
@ -582,6 +637,7 @@ watch(
lazy-rules
hide-bottom-space
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -591,6 +647,7 @@ watch(
</div>
<div class="col-8">
<q-input
v-if="!isLoad"
class="inputgreen"
v-model="formData.achievement5"
outlined
@ -600,6 +657,7 @@ watch(
lazy-rules
hide-bottom-space
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
<q-separator />
@ -609,6 +667,7 @@ watch(
</div>
<div class="col-8">
<q-input
v-if="!isLoad"
class="inputgreen"
v-model="formData.achievement0"
outlined
@ -618,6 +677,7 @@ watch(
lazy-rules
hide-bottom-space
></q-input>
<q-skeleton v-else type="QInput" height="40px" />
</div>
</div>
</q-card>

11
src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
View file

@ -10,6 +10,8 @@ import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
import SkeletonTable from "@/components/SkeletonTable.vue";
const $q = useQuasar();
const store = useKpiDataStore();
const mixin = useCounterMixin();
@ -27,6 +29,8 @@ const modal = defineModel<boolean>("modal", { required: true });
const filterKeyword = ref<string>("");
const rows = ref<any[]>([]);
const isLoad = ref<boolean>(false);
const visibleColumns = ref<string[]>([
"commandName",
"agency",
@ -164,18 +168,19 @@ function close() {
/** ดึงข้อมูล */
function getData() {
showLoader();
isLoad.value = true;
http
.get(config.API.orgAssistance(store.dataEvaluation.profileId))
.then((res) => {
const data = res.data.result;
rows.value = data;
isLoad.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoad.value = false;
});
}
@ -197,6 +202,7 @@ watch(
<div class="row">
<div class="col-12">
<d-table
v-if="!isLoad"
ref="table"
:columns="columns"
:rows="rows"
@ -239,6 +245,7 @@ watch(
</q-tr>
</template>
</d-table>
<SkeletonTable v-else :columns="columns" />
</div>
</div>
</q-card-section>