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

Merge branch 'develop' of frappet.github.com:Frappet/bma-ehr-frontend into oat_dev

Browse source
This commit is contained in:
oat_dev 2024-04-18 16:20:22 +07:00
commit 8ccfb61c3e
13 changed files with 1250 additions and 674 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/api/15_development/api.development.ts
View file

@ -7,9 +7,12 @@ const devStrategy = `${env.API_URI}/development/strategy`;
export default {
development,
/** history */
developmentHistoryList: (type: string) => `${development}/history/${type}/`,
developmentHistoryList: (type: string) =>
`${development}/history/${type}/filter`,
developmentHistoryAdd: (type: string) => `${development}/history/${type}`,
developmentProjectSearch: () => `${development}/main/search`,
developmentHistoryListOrg: (type: string, year: number) =>
`${development}/history/${type}/org/${year}`,
/** history employee */
developmentProjectSearchEmployee: () => `${developmentOrg}/profile-employee/`,

134
src/modules/14_KPI/components/competency/04ListCriteria.vue
View file

@ -1,5 +1,135 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
const fieldLabels = {
score5: "5",
score4: "4",
score3: "3",
score2: "2",
score1: "1",
};
const formScore = reactive<any>({
score5: "",
score4: "",
score3: "",
score2: "",
score1: "",
});
interface FormScore {
score5: string;
score4: string;
score3: string;
score2: string;
score1: string;
[key:string]:any
}
function onSubmit() {
const array = ref<any>([])
for (const key in formScore) {
if (formScore.hasOwnProperty(key)) {
if (key in formScore) {
const scoreObj: Partial<FormScore> = {}; // กำหนด scoreObj ให้เป็น Partial<FormScore>
scoreObj[key] = formScore[key];
array.value.push(scoreObj)
}
}
}
const body = {
formScore: array.value ,
};
console.log(body);
}
</script>
<template>
<div>หลักเกณฑ์</div>
<q-card flat bordered>
<q-form greedy @submit.prevent @validation-success="onSubmit">
<q-card-section class="bg-grey-3 q-pa-sm">
<div class="row text-dark text-body2 text-weight-medium">
<div class="text-center col-8">เกณฑ์การประเมิน</div>
<div class="text-center col-4">ระดับคะแนน</div>
</div>
</q-card-section>
<q-card-section class="q-pa-none">
<div
v-for="(field, index) in Object.keys(fieldLabels)"
:key="index + 1"
>
<div class="row q-pa-sm">
<div class="col-8 text-left">
<q-field
class="q_field_p_none"
ref="fieldRef"
v-model="formScore[field]"
label-slot
borderless
:rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
hide-bottom-space
>
<template #control>
<q-editor
class="full-width"
v-model="formScore[field]"
:dense="$q.screen.lt.md"
min-height="5rem"
:toolbar="[
[
'bold',
'italic',
'strike',
'underline',
'subscript',
'superscript',
],
['unordered', 'ordered'],
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana',
}"
/>
</template>
</q-field>
<!-- <q-input
v-model="formScore[field]"
dense
outlined
class="inputgreen"
label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
:rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
hide-bottom-space
/> -->
</div>
<div
class="col-4 text-center text-body1 text-weight-bold self-center"
>
{{ fieldLabels[field as keyof typeof fieldLabels] }}
</div>
</div>
<div
class="col-12"
v-if="index !== Object.keys(fieldLabels).length - 1"
>
<q-separator />
</div>
</div>
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</template>

171
src/modules/14_KPI/components/indicatorByRole/DetailView.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, onMounted,watch } from "vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
@ -15,7 +15,16 @@ const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const id = ref<string>(route.params.id ? route.params.id.toLocaleString():'');
const filter = ref<string>("");
const node = ref<any>([]);
const expanded = ref<any>([]);
const ticked = ref<any>([]);
const orgName = ref<string>("");
const nodeId = ref<string>("");
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่มีข้อมูล");
const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
const {
dialogConfirm,
showLoader,
@ -40,6 +49,10 @@ const form = reactive<FormDataRole>({
weight: "", //น้ำหนัก
meaning: "", //นิยามหรือความหมาย
formula: "", //สูตรคำนวณ
node: null,
nodeId: null,
orgRevisionId: null,
});
const fieldLabels = {
@ -120,7 +133,7 @@ function onSubmit() {
// const url = id.value ? config.API.???:config.API.???
}
function getDetail(){
function getDetail() {
// showLoader()
// http
// .get(config.API.???)
@ -144,12 +157,58 @@ function getDetail(){
// })
}
function fetchActive() {
showLoader();
http
.get(config.API.activeOrganization)
.then((res) => {
const data = res.data.result;
fetchTree(data.activeId);
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
}
async function fetchTree(id: string) {
showLoader();
http
.get(config.API.orgByid(id.toString()))
.then((res) => {
const data = res.data.result;
node.value = data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function updateTicked(val: any) {
console.log(expanded.value);
ticked.value = [];
ticked.value.push(val[val.length - 1]);
}
function updateSelected(data: any) {
console.log(data)
nodeId.value = data.orgTreeId;
orgName.value = data.orgTreeName;
form.node = data.orgLevel;
form.nodeId = data.orgTreeId;
form.orgRevisionId = data.orgRevisionId;
}
onMounted(() => {
fetchActive();
getOptions();
if(id.value !== ''){
console.log('edit')
getDetail()
if (id.value !== "") {
console.log("edit");
getDetail();
}
});
</script>
@ -252,20 +311,6 @@ onMounted(() => {
hide-bottom-space
/>
</div>
<div class="col-4">
<q-input
dense
outlined
class="inputgreen"
v-model="form.org"
inputgreen
label="หน่วยงาน/ส่วนราชการ"
lazy-rules
:rules="[(val:string) => !!val || `${'กรุณาเลือกหน่วยงาน/ส่วนราชการ'}`,]"
hide-bottom-space
@click="selectAgency"
/>
</div>
<div class="col-2">
<q-input
label="รหัสตัวชี้วัด"
@ -278,7 +323,7 @@ onMounted(() => {
hide-bottom-space
/>
</div>
<div class="col-6">
<div class="col-4">
<q-input
label="ชื่อตัวชี้วัด"
v-model="form.includingName"
@ -326,9 +371,77 @@ onMounted(() => {
hide-bottom-space
/>
</div>
<div class="col-12">
<div class="col-8" style="height: 340px">
<q-card flat bordered>
<q-card-section class="bg-grey-4 q-pa-sm">
<q-card-section class="bg-grey-3 q-pa-sm">
<div class="text-dark text-body2 text-weight-medium">
หน่วยงาน/ส่วนราชการ
</div>
</q-card-section>
<q-card-section class="q-pa-sm">
<q-input
dense
outlined
v-model="filter"
label="ค้นหา"
class="inputgreen"
>
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon v-else name="search" color="grey-5" />
</template>
</q-input>
<q-scroll-area visible style="height: 223px; margin-top: 5px">
<q-tree
dense
:nodes="node"
node-key="orgTreeName"
label-key="orgTreeName"
v-model:expanded="expanded"
:filter="filter"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
>
<template v-slot:default-header="prop">
<q-item
clickable
@click.stop="updateSelected(prop.node)"
:active="form.nodeId === prop.node.orgTreeId"
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
<div class="text-weight-light text-grey-8">
{{
prop.node.orgCode == null
? null
: prop.node.orgCode
}}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
</div>
</q-item>
</template>
</q-tree>
</q-scroll-area>
</q-card-section>
</q-card>
</div>
<div class="col-4" style="height: 340px">
<q-card flat bordered>
<q-card-section class="bg-grey-3 q-pa-sm">
<div class="row text-dark text-body2 text-weight-medium">
<div class="text-center col-4">ระดับคะแนน</div>
<div class="col-8">อ้างอิง</div>
@ -435,7 +548,7 @@ onMounted(() => {
</div>
</div>
</q-card-section>
<q-separator/>
<q-separator />
<q-card-actions align="right">
<q-btn color="public" label="บันทึก" type="submit" unelevated>
<q-tooltip>บันทึกข้อมูล</q-tooltip>
@ -450,4 +563,12 @@ onMounted(() => {
/>
</template>
<style scoped></style>
<style scoped>
.my-list-link {
color: rgb(118, 168, 222);
border-radius: 5px;
background: #a3d3fb48 !important;
font-weight: 600;
border: 1px solid rgba(175, 185, 196, 0.217);
}
</style>

3
src/modules/14_KPI/interface/request/Main.ts
View file

@ -35,6 +35,9 @@ interface FormDataRole {
weight: string;
meaning: string;
formula: string;
node: number | null;
nodeId: string | null;
orgRevisionId: string | null;
}
export type { FormQueryRound, FormRound, FormCompetency, FormDataRole };

128
src/modules/15_development/components/BasicInfo.vue
View file

@ -40,7 +40,6 @@ const formData = reactive<FormBasicinfo>({
const orgName = ref<string>("");
const node = ref<any>([]);
const nodeId = ref<string>("");
const filter = ref<string>("");
const expanded = ref<any>([]);
@ -56,15 +55,18 @@ async function fetchData(id: string) {
formData.objective = data.objective;
formData.nodeId = data.nodeId;
const test = await searchAndReplace(node.value, formData?.nodeId);
console.log(test);
const parts = test.orgName.split("/");
for (let i = 0; i < parts.length; i++) {
const arrangedParts = parts[i];
expanded.value.push(arrangedParts);
if (node.value && formData?.nodeId) {
const nodeTree = await searchAndReplace(node.value, formData?.nodeId);
if (nodeTree) {
expanded.value = [];
const parts = nodeTree?.orgName.split("/");
for (let i = 0; i < parts.length; i++) {
const arrangedParts = parts[i - 1];
expanded.value.push(arrangedParts);
}
updateSelected(nodeTree);
}
}
updateSelected(test);
})
.catch((err) => {
messageError($q, err);
@ -129,9 +131,6 @@ async function fetchTree(id: string) {
}
function updateSelected(data: any) {
console.log(expanded.value);
nodeId.value = data.orgTreeId;
orgName.value = data.orgTreeName;
formData.node = data.orgLevel;
formData.nodeId = data.orgTreeId;
@ -163,60 +162,54 @@ onMounted(async () => {
<q-form greedy @submit.prevent @validation-success="onSubmit">
<q-card bordered class="col-12 row caedNone">
<div class="col-xs-12 col-sm-3 row">
<div class="col-12 row no-wrap bg-grey-1">
<div class="col-12 q-py-sm q-px-sm">
<q-card-section
class="q-pt-none q-pa-sm scroll"
style="max-height: 65vh"
<div class="col-12 row no-wrap">
<div class="col-12 q-py-sm q-px-sm q-gutter-sm">
<q-input dense outlined v-model="filter" label="ค้นหา">
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon v-else name="search" color="grey-5" />
</template>
</q-input>
<q-tree
class="tree-container"
dense
:nodes="node"
node-key="orgTreeName"
label-key="labelName"
v-model:expanded="expanded"
:filter="filter"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
>
<q-input dense outlined v-model="filter" label="ค้นหา">
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon v-else name="search" color="grey-5" />
</template>
</q-input>
<q-tree
dense
:nodes="node"
node-key="orgTreeName"
label-key="orgTreeName"
v-model:expanded="expanded"
:filter="filter"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
>
<template v-slot:default-header="prop">
<q-item
clickable
@click.stop="updateSelected(prop.node)"
:active="formData.nodeId === prop.node.orgTreeId"
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
<div class="text-weight-light text-grey-8">
{{
prop.node.orgCode == null ? null : prop.node.orgCode
}}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
<template v-slot:default-header="prop">
<q-item
clickable
@click.stop="updateSelected(prop.node)"
:active="formData.nodeId === prop.node.orgTreeId"
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
</q-item>
</template>
</q-tree>
</q-card-section>
<div class="text-weight-light text-grey-8">
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
</div>
</q-item>
</template>
</q-tree>
</div>
<div class="col-12 row">
@ -344,6 +337,13 @@ onMounted(async () => {
</template>
<style scoped>
.tree-container {
overflow: auto;
height: 70vh;
border: 1px solid #e6e6e7;
border-radius: 10px;
}
.my-list-link {
color: rgb(118, 168, 222);
border-radius: 5px;

8
src/modules/15_development/components/Record.vue
View file

@ -111,11 +111,11 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "startDate",
name: "dateStart",
align: "left",
label: "วันที่เริ่มต้น",
sortable: true,
field: "startDate",
field: "dateStart",
format: (v) => date2Thai(v),
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -123,11 +123,11 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "endDate",
name: "dateEnd",
align: "left",
label: "วันที่สิ้นสุด",
sortable: true,
field: "endDate",
field: "dateEnd",
format: (v) => date2Thai(v),
headerStyle: "font-size: 14px",
style: "font-size: 14px",

95
src/modules/15_development/components/history/DialogGov.vue
View file

@ -1,7 +1,11 @@
<script setup lang="ts">
import { ref, watch, computed,reactive } from "vue";
import { ref, watch, computed, reactive } from "vue";
import Header from "@/components/DialogHeader.vue";
import type { DataOption,FormFilter,NewPagination } from "@/modules/15_development/interface/index/Main";
import type {
DataOption,
FormFilter,
NewPagination,
} from "@/modules/15_development/interface/index/Main";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
@ -9,8 +13,7 @@ import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const rows = ref<any[]>([])
const rows = ref<any[]>([]);
const props = defineProps({
upDate: { type: Function },
});
@ -138,27 +141,30 @@ function onSubmit() {
if (selected.value?.length == 0) {
dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
} else {
const data = selected.value[0];
const body = {
id:data.id,
name:data.name,
prefix:data.prefix,
rank:data.rank,
firstName:data.firstName,
lastName:data.lastName,
citizenId:data.citizenId,
level:data.level,
type:data.type,
posLevelId:data.posLevelId,
posTypeId:data.posTypeId,
position:data.position,
positionSide:data.positionSide,
posNo:data.posNo,
};
props.upDate?.(body)
closeDialog();
const data = selected.value[0];
const body = {
id: data.id,
name: data.name,
prefix: data.prefix,
rank: data.rank,
firstName: data.firstName,
lastName: data.lastName,
citizenId: data.citizenId,
level: data.level,
type: data.type,
posLevelId: data.posLevelId,
posTypeId: data.posTypeId,
position: data.position,
positionSide: data.positionSide,
posNo: data.posNo,
org: data.org,
rootId: data.rootId,
root: data.root,
orgRootShortName: data.orgRootShortName,
orgRevisionId: data.orgRevisionId,
};
props.upDate?.(body);
closeDialog();
}
}
@ -167,7 +173,7 @@ function closeDialog() {
modal.value = false;
rows.value = [];
selected.value = [];
inputSearch.value = ''
inputSearch.value = "";
}
/** class */
@ -186,20 +192,27 @@ function searchFilter() {
const data = res.data.result.data;
maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
rows.value = data.map((item: any) => ({
id:item.id ? item.id : null,
name: item.firstName ? `${item.prefix}${item.firstName} ${item.lastName}` : null,
prefix:item.prefix ? item.prefix : null,
rank:item.rank ? item.rank : null,
firstName:item.firstName ? item.firstName : null,
lastName:item.lastName ? item.lastName : null,
citizenId:item.citizenId ? item.citizenId : null,
level:item.posLevel ? item.posLevel : null,
type:item.posType ? item.posType : null,
posLevelId:item.posLevelId ? item.posLevelId : null,
posTypeId:item.posTypeId ? item.posTypeId : null,
position:item.position ? item.position : null,
positionSide:item.posExecutive ? item.posExecutive : null,
posNo:item.posNo ? item.posNo : null,
id: item.id ? item.id : null,
name: item.firstName
? `${item.prefix}${item.firstName} ${item.lastName}`
: null,
prefix: item.prefix ? item.prefix : null,
rank: item.rank ? item.rank : null,
firstName: item.firstName ? item.firstName : null,
lastName: item.lastName ? item.lastName : null,
citizenId: item.citizenId ? item.citizenId : null,
level: item.posLevel ? item.posLevel : null,
type: item.posType ? item.posType : null,
posLevelId: item.posLevelId ? item.posLevelId : null,
posTypeId: item.posTypeId ? item.posTypeId : null,
position: item.position ? item.position : null,
positionSide: item.posExecutive ? item.posExecutive : null,
posNo: item.posNo ? item.posNo : null,
org: item.org ? item.org : null,
rootId: item.rootId ? item.rootId : null,
root: item.root ? item.root : null,
orgRootShortName: item.orgRootShortName ? item.orgRootShortName : null,
orgRevisionId: item.orgRevisionId ? item.orgRevisionId : null,
}));
})
.catch((e) => {
@ -210,7 +223,7 @@ function searchFilter() {
});
}
function updatePage(val:number){
function updatePage(val: number) {
formFilter.page = val;
searchFilter();
}

661
src/modules/15_development/components/scholarship/DetailView.vue
View file

@ -106,6 +106,11 @@ const formBody = reactive<FormsSholarship>({
posExecutive: "", //ชื่อตำแหน่งทางการบริหาร
posLevelId: null, //ไอดีระดับตำแหน่ง
posTypeId: null, //ไอดีประเภทตำแหน่ง
org: "",
rootId: null,
root: "",
orgRootShortName: "",
orgRevisionId: null,
guarantorRank: "", //ยศ(ผู้ค้ำ)
guarantorPrefix: "", //คำนำหน้าชื่อ(ผู้ค้ำ)
guarantorFirstName: "", //ชื่อ(ผู้ค้ำ)
@ -218,11 +223,12 @@ function fetchDataDetail(id: string) {
dataPerson.type = data.posTypeName ? data.posTypeName : "-";
dataPerson.level = data.posLevelName ? data.posLevelName : "-";
dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
dataPerson.org = data.org ? data.org : "-";
dataGuarantor.citizenId = data.guarantorCitizenId
? data.guarantorCitizenId
: "-";
dataGuarantor.name = `${data.guarantorPrefix} ${data.guarantorFirstName} ${data.guarantorLastName}`;
dataGuarantor.name = `${data.guarantorPrefix}${data.guarantorFirstName} ${data.guarantorLastName}`;
dataGuarantor.position = data.position ? data.position : "-";
dataGuarantor.type = data.posTypeguarantorName
? data.posTypeguarantorName
@ -252,6 +258,17 @@ function onSubmit() {
typeof formBody.budgetApprove === "string"
? Number(formBody.budgetApprove.replace(/,/g, ""))
: formBody.budgetApprove;
if (formBody.scholarshipType === "RESEARCH") {
formBody.planType = "";
formBody.fundType = "";
formBody.budgetSource = "";
formBody.useOfficialTime = false;
formBody.reportBackNo = "";
formBody.reportBackNoDate = null;
formBody.reportBackDate = null;
formBody.changeDetail = "";
}
try {
const url = scholarshipId.value
? config.API.devScholarshipByid(scholarshipId.value)
@ -363,7 +380,6 @@ function onSelectGov(isGov: boolean) {
function upDate(data: DataPerson) {
if (isSelectGov.value) {
console.log(data);
formBody.profileId = data.id;
formBody.rank = data.rank;
formBody.prefix = data.prefix;
@ -374,6 +390,11 @@ function upDate(data: DataPerson) {
formBody.posTypeId = data.posTypeId;
formBody.posLevelId = data.posLevelId;
formBody.posExecutive = data.positionSide;
formBody.org = data.org;
formBody.rootId = data.rootId;
formBody.root = data.root;
formBody.orgRootShortName = data.orgRootShortName;
formBody.orgRevisionId = data.orgRevisionId;
dataPerson.id = data.id ? data.id : "-";
dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
@ -382,6 +403,7 @@ function upDate(data: DataPerson) {
dataPerson.type = data.type ? data.type : "-";
dataPerson.level = data.level ? data.level : "-";
dataPerson.positionSide = data.positionSide ? data.positionSide : "-";
dataPerson.org = data.org ? data.org : "-";
isGov.value = true;
} else {
formBody.guarantorRank = data.rank;
@ -484,18 +506,18 @@ onMounted(() => {
<q-btn
unelevated
color="green"
label="สำเร็จการศึกษา"
label="เรียนจบ"
@click="onClickUpdateStatus('GRADUATE')"
/>
<q-btn
unelevated
color="red"
label="ไม่จบการศึกษา"
label="เรียนไม่จบ"
@click="onClickUpdateStatus('NOTGRADUATE')"
/>
</div>
<div :class="isStatus === 'GRADUATE' ? 'text-green' : 'text-red'" v-else>
{{ isStatus === "GRADUATE" ? "สำเร็จการศึกษา" : "ไม่จบการศึกษา" }}
{{ isStatus === "GRADUATE" ? "เรียนจบ" : "เรียนไม่จบ" }}
</div>
</div>
</div>
@ -533,7 +555,7 @@ onMounted(() => {
<div class="col-8 text-weight-medium">
{{ dataPerson.position }}
</div>
<div class="col-4 text-grey">ประเภท</div>
<div class="col-4 text-grey">ประเภทตำแหน่ง</div>
<div class="col-8 text-weight-medium">
{{ dataPerson.type }}
</div>
@ -587,7 +609,8 @@ onMounted(() => {
class="col-3"
v-if="
formBody.scholarshipType !== '' &&
formBody.scholarshipType !== 'EXECUTIVE'
formBody.scholarshipType !== 'EXECUTIVE' &&
formBody.scholarshipType !== 'RESEARCH'
"
>
<q-select
@ -610,7 +633,7 @@ onMounted(() => {
/>
</div>
<div class="col-12">
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
<q-radio
v-model="formBody.planType"
checked-icon="task_alt"
@ -629,193 +652,208 @@ onMounted(() => {
class="q-pl-sm"
/>
</div>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.scholarshipYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.scholarshipYear
? Number(formBody.scholarshipYear) + 543
: null
"
:label="`${'ปีงบประมาณที่ได้รับทุน'}`"
hide-bottom-space
:rules="[
<div class="row col-12 q-col-gutter-md">
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.scholarshipYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.scholarshipYear
? Number(formBody.scholarshipYear) + 543
: null
"
:label="`${
formBody.scholarshipType === 'RESEARCH'
? 'ปีงบประมาณที่ได้รับอนุมัติ '
: 'ปีงบประมาณที่ได้รับทุน'
}`"
hide-bottom-space
:rules="[
(val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-3">
<q-select
dense
outlined
class="inputgreen"
label="แหล่งงบประมาณ"
hide-bottom-space
v-model="formBody.budgetSource"
:options="budgetSourceOp"
option-label="name"
option-value="id"
emit-value
map-options
: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>
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
<q-select
dense
outlined
class="inputgreen"
label="แหล่งงบประมาณ"
hide-bottom-space
v-model="formBody.budgetSource"
:options="budgetSourceOp"
option-label="name"
option-value="id"
emit-value
map-options
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
]"
/>
/>
</div>
<div class="col-3">
<q-input
dense
outlined
hide-bottom-space
class="inputgreen"
v-model="formBody.budgetApprove"
label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
mask="###,###,###,###,###,###"
reverse-fill-mask
:rules="[
(val: any) => {
if (!val && !formBody.isNoUseBudget) {
return 'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร';
}
return true;
},
]"
/>
</div>
<div class="col-3">
<q-checkbox
keep-color
color="primary"
v-model="formBody.isNoUseBudget"
label="ไม่ใช้งบประมาณ"
/>
</div>
</div>
<div class="col-3">
<q-input
dense
outlined
hide-bottom-space
class="inputgreen"
v-model="formBody.budgetApprove"
label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
mask="###,###,###,###,###,###"
reverse-fill-mask
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
]"
/>
</div>
<div class="col-3">
<q-checkbox
keep-color
color="primary"
v-model="formBody.isNoUseBudget"
label="ไม่ใช้งบประมาณ"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
class="inputgreen"
v-model="formBody.bookNo"
label="เลขที่หนังสืออนุมัติ"
hide-bottom-space
:rules="[
<div class="row col-12 q-col-gutter-md">
<div class="col-3">
<q-input
dense
outlined
class="inputgreen"
v-model="formBody.bookNo"
label="เลขที่หนังสืออนุมัติ"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกเลขที่หนังสืออนุมัติ'}`,
]"
/>
</div>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.bookNoDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.bookNoDate ? date2Thai(formBody.bookNoDate) : null
"
:label="`${'ลงวันที่'}`"
hide-bottom-space
:rules="[
/>
</div>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.bookNoDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.bookNoDate ? date2Thai(formBody.bookNoDate) : null
"
:label="`${'ลงวันที่'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.bookApproveDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.bookApproveDate
? date2Thai(formBody.bookApproveDate)
: null
"
:label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
hide-bottom-space
: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>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.bookApproveDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.bookApproveDate
? date2Thai(formBody.bookApproveDate)
: null
"
:label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
<q-checkbox
keep-color
color="primary"
v-model="formBody.useOfficialTime"
label="ใช้เวลาราชการ"
/>
</div>
</div>
<div class="col-3">
<q-checkbox
keep-color
color="primary"
v-model="formBody.useOfficialTime"
label="ใช้เวลาราชการ"
/>
</div>
<div class="col-12">
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
<q-input
outlined
dense
@ -832,13 +870,7 @@ onMounted(() => {
/>
</div>
<div
class="col-12"
v-if="
formBody.scholarshipType !== '' &&
formBody.scholarshipType !== 'EXECUTIVE'
"
>
<div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
<div class="row col-12 q-col-gutter-md">
<div class="col-3">
<q-input
@ -895,7 +927,7 @@ onMounted(() => {
</template>
</datepicker>
</div>
<div class="col-3">
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
<q-input
dense
outlined
@ -909,7 +941,7 @@ onMounted(() => {
]"
/>
</div>
<div class="col-2">
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
<datepicker
menu-class-name="modalfix"
v-model="formBody.reportBackNoDate"
@ -950,7 +982,7 @@ onMounted(() => {
</template>
</datepicker>
</div>
<div class="col-2">
<div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
<datepicker
menu-class-name="modalfix"
v-model="formBody.reportBackDate"
@ -1888,12 +1920,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="สถานที่ไปศึกษาดูงาน"
label="สถานที่ไปศึกษาดูงานในประเทศ"
class="inputgreen"
v-model="formBody.studyPlace"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงานในประเทศ'}`,
]"
/>
</div>
@ -1903,12 +1935,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="หัวข้อการไปศึกษาดูงาน"
label="หัวข้อการไปศึกษาดูงานในประเทศ"
class="inputgreen"
v-model="formBody.studyTopic"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานในประเทศ'}`,
]"
/>
</div>
@ -1936,11 +1968,11 @@ onMounted(() => {
? date2Thai(formBody.studyStartDate)
: null
"
:label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
:label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
!!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานในประเทศ'}`,
]"
>
<template v-slot:prepend>
@ -1986,11 +2018,11 @@ onMounted(() => {
? date2Thai(formBody.studyEndDate)
: null
"
:label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
:label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
!!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงานในประเทศ'}`,
]"
>
<template v-slot:prepend>
@ -2012,12 +2044,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="ประเทศที่ไปศึกษาดูงาน"
label="ประเทศที่เดินทางไปศึกษาดูงาน"
class="inputgreen"
v-model="formBody.studyCountry"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอประเทศที่ไปศึกษาดูงาน'}`,
!!val || `${'กรุณากรอกประเทศที่เดินทางไปศึกษาดูงาน'}`,
]"
/>
</div>
@ -2147,6 +2179,217 @@ onMounted(() => {
</div>
</div>
</div>
<!-- เลือกทุน 5 -->
<div
class="col-12"
v-else-if="formBody.scholarshipType === 'RESEARCH'"
>
<div class="row q-col-gutter-md">
<div class="col-3">
<q-select
dense
outlined
lazy-rules
hide-bottom-space
class="inputgreen"
label="ประเภทการพัฒนา"
v-model="formBody.studyTopic"
:options="[
'ศึกษา',
'ฝึกอบรม',
'ประชุม',
'ดูงาน',
'ปฏิบัติการวิจัย',
]"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกประเภทการพัฒนา'}`,
]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
label="ระดับปริญญา"
class="inputgreen"
v-model="formBody.degreeLevel"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกระดับปริญญา'}`,
]"
/>
</div>
<div class="col-6">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
class="inputgreen"
label="หลักสูตรการฝึกอบรม"
v-model="formBody.course"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกหลักสูตรการฝึกอบรม'}`,
]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
label="สาขาวิชา"
class="inputgreen"
v-model="formBody.field"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกสาขาวิชา'}`,
]"
/>
</div>
<div class="col-3">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
label="คณะ"
class="inputgreen"
v-model="formBody.faculty"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกคณะ'}`,
]"
/>
</div>
<div class="col-6">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
label="สถาบันการศึกษา/หน่วยงานผู้จัด"
class="inputgreen"
v-model="formBody.studyPlace"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกสถาบันการศึกษา/หน่วยงานผู้จัด'}`,
]"
/>
</div>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.startDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
@update:model-value="changeStartDate('startDate')"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.startDate
? date2Thai(formBody.startDate)
: null
"
:label="`${'วันเริ่มต้นการฝึกอบรม'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันเริ่มต้นการฝึกอบรม'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formBody.endDate"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
:min-date="formBody.startDate"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
outlined
class="inputgreen"
:model-value="
formBody.endDate ? date2Thai(formBody.endDate) : null
"
:label="`${'วันสิ้นสุดการฝึกอบรม'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการฝึกอบรม'}`,
]"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-6">
<q-input
dense
outlined
lazy-rules
hide-bottom-space
label="ประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย"
class="inputgreen"
v-model="formBody.studyCountry"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย'}`,
]"
/>
</div>
</div>
</div>
</div>
</div>
@ -2276,12 +2519,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="สถานที่ไปศึกษาดูงาน"
label="สถานที่ไปศึกษาดูงานในประเทศ"
class="inputgreen"
v-model="formBody.studyPlace"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงาน'}`,
!!val || `${'กรุณากรอกสถานที่ไปศึกษาดูงานในประเทศ'}`,
]"
/>
</div>
@ -2291,12 +2534,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="หัวข้อการไปศึกษาดูงาน"
label="หัวข้อการไปศึกษาดูงานในประเทศ"
class="inputgreen"
v-model="formBody.studyTopic"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงาน'}`,
!!val || `${'กรุณากรอกหัวข้อการไปศึกษาดูงานในประเทศ'}`,
]"
/>
</div>
@ -2324,11 +2567,11 @@ onMounted(() => {
? date2Thai(formBody.studyStartDate)
: null
"
:label="`${'วันเริ่มต้นการศึกษาดูงาน'}`"
:label="`${'วันเริ่มต้นการศึกษาดูงานในประเทศ'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงาน'}`,
!!val || `${'กรุณาเลือกวันเริ่มต้นการศึกษาดูงานในประเทศ'}`,
]"
>
<template v-slot:prepend>
@ -2373,11 +2616,11 @@ onMounted(() => {
? date2Thai(formBody.studyEndDate)
: null
"
:label="`${'วันสิ้นสุดการศึกษาดูงาน'}`"
:label="`${'วันสิ้นสุดการศึกษาดูงานในประเทศ'}`"
hide-bottom-space
:rules="[
(val: string) =>
!!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงาน'}`,
!!val || `${'กรุณาเลือกวันที่วันสิ้นสุดการศึกษาดูงานในประเทศ'}`,
]"
>
<template v-slot:prepend>
@ -2521,12 +2764,12 @@ onMounted(() => {
outlined
lazy-rules
hide-bottom-space
label="รวมระยะเวลาในการศึกษา"
label="รวมระยะเวลาในการฝึกอบรม "
class="inputgreen"
v-model="formBody.totalPeriod"
:rules="[
(val: string) =>
!!val || `${'กรุณากรอกรวมระยะเวลาในการศึกษา'}`,
!!val || `${'กรุณากรอกรวมระยะเวลาในการฝึกอบรม '}`,
]"
/>
</div>

11
src/modules/15_development/interface/request/Main.ts
View file

@ -5,6 +5,8 @@ interface FormQueryListProject {
org: string;
keyword: string;
status: string;
node: number | null;
nodeId: string | null;
}
interface FormBasicinfo {
@ -230,6 +232,14 @@ interface PlannedGoals {
amount: number | null;
}
interface FormProject {
year: number | null;
projectName: "";
node: number | null;
nodeId: string | null;
orgRevisionId: string | null;
}
export type {
FormQueryListProject,
FormAddProject,
@ -242,4 +252,5 @@ export type {
FormAddHistoryProject,
FormAddHistoryEmployee,
FormGroupTargetPlannedGoal,
FormProject,
};

5
src/modules/15_development/interface/request/Scholarship.ts
View file

@ -9,6 +9,11 @@ interface FormsSholarship {
posExecutive: string; //ชื่อตำแหน่งทางการบริหาร
posLevelId: string | null; //ไอดีระดับตำแหน่ง
posTypeId: string | null; //ไอดีประเภทตำแหน่ง
org: string;
rootId: string | null;
root: string;
orgRootShortName: string;
orgRevisionId: string | null;
guarantorRank: string; //ยศ(ผู้ค้ำ)
guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)

1
src/modules/15_development/interface/response/Scholarship.ts
View file

@ -20,6 +20,7 @@ interface DataSholarship {
posTypeId: string; //ไอดีประเภทตำแหน่ง
posTypeName: string; //ไอดีระดับตำแหน่ง
posLevelName: string; //ไอดีประเภทตำแหน่ง
org: string;
guarantorRank: string; //ยศ(ผู้ค้ำ)
guarantorPrefix: string; //คำนำหน้าชื่อ(ผู้ค้ำ)
guarantorFirstName: string; //ชื่อ(ผู้ค้ำ)

118
src/modules/15_development/views/History.vue
View file

@ -1,40 +1,28 @@
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useRouter } from "vue-router";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type {
DataOption,
FormFilter,
} from "@/modules/15_development/interface/index/Main";
import genReportXLSX from "@/plugins/genreportxlsx";
/** importStore*/
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
import genReportXLSX from "@/plugins/genreportxlsx";
const maxPage = ref<number>(1);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const formFilter = reactive<FormFilter>({
const formFilter = reactive({
root: "",
page: 1,
pageSize: 20,
keyword: "",
year: new Date().getFullYear(),
type: "",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: null,
isProbation: null,
});
const maxPage = ref<number>(1);
/** use*/
const router = useRouter();
@ -43,21 +31,6 @@ const $q = useQuasar();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const rows = ref<any>([]);
const agency = ref<string>("");
const agencyOp = ref<DataOption[]>([
{
id: "id1",
name: "name1",
},
{
id: "id2",
name: "name2",
},
{
id: "id3",
name: "name3",
},
]);
const visibleColumns = ref<string[]>([
"citizenId",
@ -136,50 +109,27 @@ const columns = ref<QTableProps["columns"]>([
},
]);
// function onAdd() {
// store.statusEdit = false;
// router.push(`/development/history/add`);
// }
function onDownload() {
const agencyOp = ref<[]>([]);
function fetchListOrg() {
showLoader();
http
.post(config.API.developmentReportHistory(), {
year: formFilter.year,
root: agency.value,
})
.get(config.API.developmentHistoryListOrg("officer", formFilter.year))
.then((res) => {
const dataList = res.data.result;
genReportXLSX(
dataList,
"รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ"
);
formFilter.root = "";
agencyOp.value = res.data.result;
})
.catch((e) => {
messageError($q, e);
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
function onEdit(id: string) {
store.statusEdit = true;
router.push(`/development/history/${id}`);
}
function getData() {
let queryParams: any = {
page: formFilter.page,
pageSize: formFilter.pageSize,
keyword: formFilter.keyword,
year: formFilter.year,
root: agency.value,
};
showLoader();
http
.get(config.API.developmentHistoryList("officer"), { params: queryParams })
.post(config.API.developmentHistoryList("officer"), formFilter)
.then((res) => {
console.log(res.data.result.data);
const data = res.data.result.data;
@ -202,12 +152,35 @@ function getData() {
});
}
function yearAll() {
formFilter.year = 0;
getData();
function onDownload() {
showLoader();
http
.post(config.API.developmentReportHistory(), {
year: formFilter.year,
root: formFilter.root,
})
.then((res) => {
const dataList = res.data.result;
genReportXLSX(
dataList,
"รายการประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ"
);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function onEdit(id: string) {
store.statusEdit = true;
router.push(`/development/history/${id}`);
}
onMounted(() => {
getData();
fetchListOrg();
});
</script>
@ -226,7 +199,7 @@ onMounted(() => {
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="getData()"
@update:model-value="fetchListOrg()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
@ -238,14 +211,16 @@ onMounted(() => {
lazy-rules
outlined
:model-value="
formFilter.year === 0 ? null : Number(formFilter.year) + 543
formFilter.year === 0
? 'ทั้งหมด'
: Number(formFilter.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="formFilter.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="yearAll"
@click.stop.prevent="(formFilter.year = 0), fetchListOrg()"
class="cursor-pointer"
/>
</template>
@ -267,10 +242,11 @@ onMounted(() => {
dense
outlined
label="หน่วยงาน"
v-model="agency"
v-model="formFilter.root"
:options="agencyOp"
option-value="id"
option-label="name"
@update:model-value="(formFilter.page = 1), getData()"
/>
</div>

584
src/modules/15_development/views/MainPage.vue
View file

@ -2,19 +2,21 @@
import { ref, onMounted, reactive, watch } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import { useRouter } from "vue-router";
import genReportXLSX from "@/plugins/genreportxlsx";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogHeader from "@/components/DialogHeader.vue";
import genReportXLSX from "@/plugins/genreportxlsx";
import DialogHeader from "@/components/DialogHeader.vue";
/**importType*/
import type {
DataOption,
ItemsMenu,
NewPagination,
} from "@/modules/15_development/interface/index/Main";
import type { FormQueryListProject } from "@/modules/15_development/interface/request/Main";
import type {
FormQueryListProject,
FormProject,
} from "@/modules/15_development/interface/request/Main";
import type { ResListProject } from "@/modules/15_development/interface/response/Main";
/** importStore*/
@ -23,11 +25,14 @@ import { useCounterMixin } from "@/stores/mixin";
/** use*/
const $q = useQuasar();
const router = useRouter();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const { showLoader, hideLoader, messageError, dialogMessageNotify } =
useCounterMixin();
const ticked = ref<any>([]);
const node = ref<any>([]);
const expanded = ref<any>([]);
const filter = ref<string>("");
const filterMain = ref<string>("");
const splitterModel = ref<number>(60);
const modal = ref<boolean>(false);
const projectName = ref<string>("");
@ -68,28 +73,6 @@ const columns = ref<QTableProps["columns"]>([
]);
const visibleColumns = ref<string[]>(["year", "projectName", "org"]);
/** เมนูดาวน์โหลด*/
const itemDownload = ref<ItemsMenu[]>([
{
label: "Excel",
value: "EXCEL",
icon: "mdi-file-pdf-box",
color: "green",
},
{
label: "ดาวน์โหลด 2",
value: "PDF",
icon: "mdi-file-table",
color: "red",
},
{
label: "ดาวน์โหลด 3",
value: "WORD",
icon: "mdi-file-word",
color: "blue",
},
]);
const statusOpt = ref<DataOption[]>([
{ id: "ONGOING", name: "กำลังดำเนินการ" },
{ id: "FINISH", name: "เสร็จสิ้นโครงการ" },
@ -102,8 +85,9 @@ const formQuery = reactive<FormQueryListProject>({
org: "1",
keyword: "",
status: "ONGOING",
node: null,
nodeId: null,
});
const orgOp = ref<DataOption[]>([{ id: "1", name: "หน่วยงาน 1" }]);
const totalList = ref<number>(1); //จำนวนข้อมูลรายการ
@ -113,7 +97,7 @@ function fetchListProject() {
http
.get(
config.API.developmentMain +
`?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}`
`?page=${formQuery.page}&pageSize=${formQuery.pageSize}&keyword=${formQuery.keyword}&year=${formQuery.year}&status=${formQuery.status}&node=${formQuery.node}&nodeId=${formQuery.nodeId}`
)
.then((res) => {
const data = res.data.result.data;
@ -188,28 +172,30 @@ function closeDialog() {
projectName.value = "";
}
const formProject = reactive<FormProject>({
year: null,
projectName: "",
node: null,
nodeId: null,
orgRevisionId: null,
});
/** dialog submit */
function onSubmit() {
http
.post(config.API.developmentMain,{
year:year.value,
projectName:projectName.value
})
.then((res) => {
closeDialog();
router.push(`/development/${res.data.result}`);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
}
function updateTicked(val: any) {
console.log(expanded.value);
ticked.value = [];
ticked.value.push(val[val.length - 1]);
if (formProject.nodeId) {
http
.post(config.API.developmentMain, formProject)
.then((res) => {
closeDialog();
router.push(`/development/${res.data.result}`);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {});
} else {
dialogMessageNotify($q, "กรุณาเลือกหน่วยงานที่รับผิดชอบ");
}
}
function fetchActive() {
@ -242,6 +228,24 @@ async function fetchTree(id: string) {
});
}
function updateSelected(data: any) {
formProject.node = data.orgLevel;
formProject.nodeId = data.orgTreeId;
formProject.orgRevisionId = data.orgRevisionId;
}
function updateSelectedTreeMain(data: any) {
if (formQuery.node === data.orgLevel && formQuery.nodeId === data.orgTreeId) {
formQuery.node = null;
formQuery.nodeId = null;
} else {
formQuery.node = data.orgLevel;
formQuery.nodeId = data.orgTreeId;
}
fetchListProjectNew();
}
onMounted(() => {
fetchActive();
fetchListProject();
@ -252,218 +256,251 @@ onMounted(() => {
<div class="toptitle text-dark col-12 row items-center">
รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
</div>
<q-card flat bordered class="q-pa-md">
<q-toolbar style="padding: 0">
<div class="row q-gutter-sm">
<datepicker
menu-class-name="modalfix"
v-model="formQuery.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
style="width: 150px"
@update:model-value="fetchListProjectNew"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
:model-value="
formQuery.year === 0 ? 'ทั้งหมด' : Number(formQuery.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="formQuery.year" v-slot:append>
<q-card bordered class="col-12 row caedNone">
<div class="col-xs-12 col-sm-3 row">
<div class="col-12 row no-wrap">
<div class="col-12 q-py-sm q-px-sm">
<div class="q-gutter-sm">
<q-input dense outlined v-model="filterMain" label="ค้นหา">
<template v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(formQuery.year = 0), fetchListProjectNew()
"
v-if="filterMain !== ''"
name="clear"
class="cursor-pointer"
@click="filterMain = ''"
/>
</template>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
<q-icon v-else name="search" color="grey-5" />
</template>
</q-input>
</template>
</datepicker>
<q-select
dense
outlined
v-model="formQuery.status"
:options="statusOpt"
label="สถานะโครงการ"
option-label="name"
option-value="id"
emit-value
map-options
@update:model-value="fetchListProjectNew"
/>
<q-select
dense
outlined
v-model="formQuery.org"
:options="orgOp"
label="หน่วยงาน"
option-label="name"
option-value="id"
emit-value
map-options
@update:model-value="fetchListProjectNew"
/>
<q-toolbar-title>
<q-btn flat round dense icon="add" color="primary" @click="onAdd()">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</q-toolbar-title>
</div>
<q-space />
<div class="row q-gutter-sm">
<div>
<q-btn
flat
round
dense
icon="mdi-arrow-down-bold-circle-outline"
color="blue"
@click="onDownload"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
<!-- <q-btn
flat
round
color="blue"
icon="mdi-arrow-down-bold-circle-outline"
>
<q-menu>
<q-list style="min-width: 100px" dense>
<q-tree
class="tree-container"
dense
:nodes="node"
node-key="orgTreeName"
label-key="labelName"
v-model:expanded="expanded"
:filter="filterMain"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
v-model:selected="formQuery.nodeId"
>
<template v-slot:default-header="prop">
<q-item
clickable
v-close-popup
v-for="items in itemDownload"
:key="items.value"
@click="onDownload(items.value)"
@click.stop="updateSelectedTreeMain(prop.node)"
:active="formQuery.nodeId === prop.node.orgTreeId"
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
>
<q-item-section avatar>
<q-icon :color="items.color" :name="items.icon" />
</q-item-section>
<q-item-section :class="`text-${items.color}`">{{
items.label
}}</q-item-section>
<div>
<div class="text-weight-medium">
{{ prop.node.orgTreeName }}
</div>
<div class="text-weight-light text-grey-8">
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
{{
prop.node.orgTreeShortName == null
? null
: prop.node.orgTreeShortName
}}
</div>
</div>
</q-item>
</q-list>
</q-menu>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn> -->
</template>
</q-tree>
</div>
</div>
<div>
<q-input
standout
dense
v-model="formQuery.keyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
@keyup.enter="fetchListProjectNew"
>
<template v-slot:append>
<q-icon v-if="formQuery.keyword == ''" name="search" />
<q-icon
v-if="formQuery.keyword !== ''"
name="clear"
class="cursor-pointer"
@click="
(formQuery.keyword = ''),
fetchListProject(),
(formQuery.page = 1)
"
/>
</template>
</q-input>
</div>
<div>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
/>
<div class="col-12 row">
<q-separator :vertical="!$q.screen.lt.md" />
</div>
</div>
</q-toolbar>
<div class="col-12">
<d-table
for="table"
ref="table"
:columns="columns"
:rows="rows"
row-key="id"
flat
bordered
dense
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<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"
@click="onClickAddOrView(true, props.row.id)"
</div>
<div class="col-xs-12 col-sm-9 q-pa-md row">
<div class="col-12">
<q-toolbar style="padding: 0">
<div class="row q-gutter-sm">
<datepicker
menu-class-name="modalfix"
v-model="formQuery.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
style="width: 150px"
@update:model-value="fetchListProjectNew"
>
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="formQuery.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchListProject"
></q-pagination>
</template>
</d-table>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
:model-value="
formQuery.year === 0
? 'ทั้งหมด'
: Number(formQuery.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="formQuery.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="
(formQuery.year = 0), fetchListProjectNew()
"
class="cursor-pointer"
/>
</template>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-select
dense
outlined
v-model="formQuery.status"
:options="statusOpt"
label="สถานะโครงการ"
option-label="name"
option-value="id"
emit-value
map-options
@update:model-value="fetchListProjectNew"
/>
<q-toolbar-title>
<q-btn
flat
round
dense
icon="add"
color="primary"
@click="onAdd()"
>
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</q-toolbar-title>
</div>
<q-space />
<div class="row q-gutter-sm">
<div>
<q-btn
flat
round
dense
icon="mdi-arrow-down-bold-circle-outline"
color="blue"
@click="onDownload"
>
<q-tooltip>ดาวน์โหลด</q-tooltip>
</q-btn>
</div>
<div>
<q-input
standout
dense
v-model="formQuery.keyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
@keyup.enter="fetchListProjectNew"
>
<template v-slot:append>
<q-icon v-if="formQuery.keyword == ''" name="search" />
<q-icon
v-if="formQuery.keyword !== ''"
name="clear"
class="cursor-pointer"
@click="
(formQuery.keyword = ''),
fetchListProject(),
(formQuery.page = 1)
"
/>
</template>
</q-input>
</div>
<div>
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
/>
</div>
</div>
</q-toolbar>
<div class="col-12">
<d-table
for="table"
ref="table"
:columns="columns"
:rows="rows"
row-key="id"
flat
bordered
dense
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
:visible-columns="visibleColumns"
@update:pagination="updatePagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<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"
@click="onClickAddOrView(true, props.row.id)"
>
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="formQuery.page"
active-color="primary"
color="dark"
:max="Number(totalList)"
size="sm"
boundary-links
direction-links
:max-pages="5"
@update:model-value="fetchListProject"
></q-pagination>
</template>
</d-table>
</div>
</div>
</div>
</q-card>
@ -479,20 +516,34 @@ onMounted(() => {
<q-splitter v-model="splitterModel" disable>
<template v-slot:before>
<q-scroll-area visible style="height: 60vh">
<div class="q-pa-md">
<q-input dense outlined v-model="filter" label="ค้นหา">
<template v-slot:append>
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
<q-icon v-else name="search" color="grey-5" />
</template>
</q-input>
</div>
<q-tree
class="q-pa-sm"
dense
:nodes="node"
node-key="orgName"
node-key="orgTreeName"
label-key="labelName"
v-model:expanded="expanded"
tick-strategy="strict"
v-model:ticked="ticked"
@update:ticked="updateTicked"
:filter="filter"
no-results-label="ไม่พบข้อมูลที่ค้นหา"
no-nodes-label="ไม่มีข้อมูล"
>
<template v-slot:default-header="prop">
<q-item
clickable
@click.stop="updateSelected(prop.node)"
:active="formProject.nodeId === prop.node.orgTreeId"
active-class="my-list-link text-primary text-weight-medium"
class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
>
@ -522,7 +573,7 @@ onMounted(() => {
<div class="col-12">
<datepicker
menu-class-name="modalfix"
v-model="year"
v-model="formProject.year"
:locale="'th'"
autoApply
year-picker
@ -538,13 +589,17 @@ onMounted(() => {
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
outlined
:model-value="year === 0 ? null : Number(year) + 543"
:model-value="
formProject.year === null
? null
: Number(formProject.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="year" v-slot:append>
<template v-if="formProject.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="year = 0"
@click.stop.prevent="formProject.year = null"
class="cursor-pointer"
/>
</template>
@ -562,7 +617,7 @@ onMounted(() => {
</div>
<div class="col-12">
<q-input
v-model="projectName"
v-model="formProject.projectName"
label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
dense
outlined
@ -591,4 +646,19 @@ onMounted(() => {
overflow: hidden;
text-overflow: ellipsis;
}
.tree-container {
overflow: auto;
height: 80vh;
border: 1px solid #e6e6e7;
border-radius: 10px;
}
.my-list-link {
color: rgb(118, 168, 222);
border-radius: 5px;
background: #a3d3fb48 !important;
font-weight: 600;
border: 1px solid rgba(175, 185, 196, 0.217);
}
</style>