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

Refactoring code module 15_development

Browse source
This commit is contained in:
STW_TTTY\stwtt 2024-09-20 14:47:35 +07:00
parent 895bfe98f2
commit 32ff7bdc96
25 changed files with 271 additions and 1440 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,19 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref, onMounted } from "vue"; import { reactive, ref, onMounted } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useStructureTree } from "@/stores/structureTree"; import { useStructureTree } from "@/stores/structureTree";
import { useCounterMixin } from "@/stores/mixin";
/** importType*/ /** importType*/
import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main"; import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
import type { DataTree } from "@/modules/15_development/interface/response/Main"; import type { DataTree } from "@/modules/15_development/interface/response/Main";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
@ -30,23 +28,24 @@ const props = defineProps({
onCheckChangeData: { type: Function, required: true }, onCheckChangeData: { type: Function, required: true },
}); });
const projectId = ref<string>(route.params.id.toLocaleString()); const projectId = ref<string>(route.params.id.toLocaleString()); // เก็บ id
const checkRoutePermission = ref<boolean>( const checkRoutePermission = ref<boolean>(
route.name == "developmentDetailPage" route.name == "developmentDetailPage"
); ); // check ชื่อ route
const formData = reactive<FormBasicinfo>({ const formData = reactive<FormBasicinfo>({
year: new Date().getFullYear(), year: new Date().getFullYear(), //ปี
projectName: "", projectName: "", //ชืื่อ
reason: "", reason: "", //หลักการเเละเหตุผล
objective: "", objective: "", //วัตถุประสงค์
node: null, node: null, //หน่วยงาน/ส่วนราชการ
nodeId: null, nodeId: null, //id หน่วยงาน/ส่วนราชการ
orgRevisionId: null, orgRevisionId: null,
}); });
const orgName = ref<string>(""); const orgName = ref<string>(""); //ชื่อ หน่วยงาน/ส่วนราชการ
const node = ref<any[]>([]); const node = ref<any[]>([]); //โครงสร้าง หน่วยงาน/ส่วนราชการ
const filter = ref<string>(""); const filter = ref<string>(""); //input ค้นหา
const expanded = ref<string[]>([]); const expanded = ref<string[]>([]);
/** /**
@ -107,7 +106,7 @@ function onSubmit() {
} }
/** /**
* * ดึงข้อมูลโครง้ราง
*/ */
async function fetchActive() { async function fetchActive() {
const dataTree = await fetchStructureTree(route.meta.Key as string, true); const dataTree = await fetchStructureTree(route.meta.Key as string, true);
@ -135,19 +134,19 @@ function onNextTab() {
props.nextStep(); props.nextStep();
} }
/**
* ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น
*/
onMounted(async () => {
fetchActive();
});
/** /**
* เรียก function ไปใช่หน้าหลัก * เรียก function ไปใช่หน้าหลัก
*/ */
defineExpose({ defineExpose({
onSubmit, onSubmit,
}); });
/**
* ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น
*/
onMounted(async () => {
fetchActive();
});
</script> </script>
<template> <template>

11
src/modules/15_development/components/Budget.vue
View file

@ -2,8 +2,10 @@
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/** /**
* importType * importType
@ -11,11 +13,6 @@ import config from "@/app.config";
import type { DataOption } from "@/modules/15_development/interface/index/Main"; import type { DataOption } from "@/modules/15_development/interface/index/Main";
import type { FormBudget } from "@/modules/15_development/interface/request/Main"; import type { FormBudget } from "@/modules/15_development/interface/request/Main";
/**
* importstor
*/
import { useCounterMixin } from "@/stores/mixin";
/** /**
* use * use
*/ */
@ -33,11 +30,11 @@ const props = defineProps({
nextStep: { type: Function, required: true }, nextStep: { type: Function, required: true },
onCheckChangeData: { type: Function, required: true }, onCheckChangeData: { type: Function, required: true },
}); });
const projectId = ref<string>(route.params.id.toLocaleString()); const projectId = ref<string>(route.params.id.toLocaleString()); //id route
const checkRoutePermission = ref<boolean>( const checkRoutePermission = ref<boolean>(
route.name == "developmentDetailPage" route.name == "developmentDetailPage"
); ); // check ชื่อ route
const step = ref<string>(""); const step = ref<string>("");
const budgetOp = ref<DataOption[]>([ const budgetOp = ref<DataOption[]>([

43
src/modules/15_development/components/DialogRecordPerson.vue
View file

@ -2,8 +2,10 @@
import { ref, reactive, watch } from "vue"; import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/** /**
* importType * importType
@ -16,7 +18,6 @@ import type { ResPrefix } from "@/modules/15_development/interface/response/Main
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
/** importStore*/ /** importStore*/
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar(); const $q = useQuasar();
const route = useRoute(); const route = useRoute();
@ -33,27 +34,27 @@ const {
/** /**
* props * props
*/ */
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true }); //รับ ตัวแปร popup
const tab = defineModel<string>("tab", { required: true }); const tab = defineModel<string>("tab", { required: true }); //รับข้อมูล tab
const props = defineProps({ const props = defineProps({
fetchData: { type: Function, required: true }, fetchData: { type: Function, required: true },
}); });
const projectId = ref<string>(route.params.id.toString()); const projectId = ref<string>(route.params.id.toString()); // id route
const formData = reactive({ const formData = reactive({
type: "", type: "", //ประเภท
citizenId: "", citizenId: "", // เลข ปชช
prefix: "", prefix: "", //คำนำหน้า
firstName: "", firstName: "", //ชื่อ
lastName: "", lastName: "", //นามสกุล
position: "", position: "", //ตำแหน่ง
org: "", org: "", //หน่วยงาน
dateStart: null, dateStart: null, //วันที่เริ่ม
dateEnd: null, dateEnd: null, //วันที่สิ้นสุด
trainingDays: "", trainingDays: "", //จำนวนวันที่ อบรม
commandNumber: "", commandNumber: "", //เลขที่คำสั่ง
commandDate: null, commandDate: null, //ลงวันที่
}); });
/** Option*/ /** Option*/
@ -67,9 +68,9 @@ const typeOpsMain = ref<DataOption[]>([
name: "ลูกจ้างประจำ", name: "ลูกจ้างประจำ",
}, },
]); ]);
const typeOps = ref<DataOption[]>(typeOpsMain.value); const typeOps = ref<DataOption[]>(typeOpsMain.value); // ตัวเลือกประเภท
const prefixOpsMain = ref<DataOption[]>([]); const prefixOpsMain = ref<DataOption[]>([]); //ตัวเลือกคำนำหน้า หลัก
const prefixOps = ref<DataOption[]>([]); const prefixOps = ref<DataOption[]>([]); //ตัวเลือกคำนำหน้า
/** /**
* function บันทึกข้อมูลการเพิ่มราชชื่อ * function บันทึกข้อมูลการเพิ่มราชชื่อ
@ -100,7 +101,7 @@ function onSubmit() {
* @param update function * @param update function
* @param refData ประเภท * @param refData ประเภท
*/ */
const filterSelector = (val: string, update: Function, refData: string) => { function filterSelector(val: string, update: Function, refData: string) {
switch (refData) { switch (refData) {
case "type": case "type":
update(() => { update(() => {
@ -121,7 +122,7 @@ const filterSelector = (val: string, update: Function, refData: string) => {
default: default:
break; break;
} }
}; }
/** /**
* function ปิด Dialig และเคลียร์ข้อมูลใน formData * function ปิด Dialig และเคลียร์ข้อมูลใน formData

143
src/modules/15_development/components/DialogSelectAgency.vue
View file

@ -1,143 +0,0 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import DialogHeader from "@/components/DialogHeader.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
const $q = useQuasar();
const route = useRoute();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const modal = defineModel<boolean>("modal", { default: false });
const emit = defineEmits(["update:updateAgency"]);
const node = ref<any>([]);
const expanded = ref<any>([]);
const ticked = ref<any>([]);
/** ปิด dialog */
function closeDialog() {
modal.value = false;
ticked.value = [];
expanded.value = [];
}
/** ดึงข้อมูล หน่วยงาน */
function fetchActive() {
showLoader();
http
.get(config.API.activeOrganization)
.then((res) => {
const data = res.data.result;
fetchTree(data.activeId);
})
.catch((err) => {
messageError($q, err);
hideLoader();
});
}
/**
* ดึงข้อมูลหน่วยงาน
* @param id idเเต่ละรายการ
*/
async function fetchTree(id: string) {
showLoader();
http
.get(config.API.orgByIdSystem(id, route.meta.Key as string))
.then((res) => {
const data = res.data.result;
node.value = data;
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
/**
* update ข้อมูลเมื่อเลือกหน่วยงาน
* @param val ข้อมูลหน่วยงาน
*/
function updateTicked(val: any) {
ticked.value = [];
ticked.value.push(val[val.length - 1]);
}
/** บันทึก ส่งข้อมูลกลับไปหน้าหลัก */
function onSubmit() {
emit("update:updateAgency", ticked.value[0]);
closeDialog();
}
watch(
() => modal.value,
() => {
modal.value && fetchActive();
}
);
</script>
<template>
<q-dialog v-model="modal">
<q-card style="width: 600px; max-width: 80vw">
<DialogHeader
:tittle="'เลือกหน่วยงานที่รับผิดชอบ'"
:close="closeDialog"
/>
<q-separator />
<q-card-section class="q-pt-none scroll" style="max-height: 65vh">
<q-tree
class="q-pa-sm q-gutter-sm"
dense
:nodes="node"
node-key="orgName"
label-key="labelName"
v-model:expanded="expanded"
tick-strategy="strict"
v-model:ticked="ticked"
@update:ticked="updateTicked"
>
<template v-slot:default-header="prop">
<q-item
clickable
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-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn dense unelevated label="บันทึก" color="public" @click="onSubmit">
<q-tooltip>บันทึกข้อมูล</q-tooltip>
</q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<style scoped></style>

26
src/modules/15_development/components/FollowResult.vue
View file

@ -55,22 +55,25 @@ const checkRoutePermission = ref<boolean>(
const step = ref<string>(""); const step = ref<string>("");
/***** ตัวชี้วัดความสำเร็จ ******/ /***** ตัวชี้วัดความสำเร็จ ******/
const modalDialog = ref<boolean>(false); const modalDialog = ref<boolean>(false); //popup ตัวชี้วัด
const isEdit = ref<boolean>(false); const isEdit = ref<boolean>(false); // check edit
const indicatorId = ref<string>(""); const indicatorId = ref<string>(""); //id ตัวชี้วัด
const typeAction = ref<string>(""); const typeAction = ref<string>(""); //แยกประเภท ผลการดำเนินการ /แก้ไขตัวชี้วัด /เพิ่มตัวชี้วัด
const formIndicators = reactive<FormIndicators>({ const formIndicators = reactive<FormIndicators>({
indicators: "", indicators: "", //ตัวชี้วัด
target: null, target: null, //เป้าหมาย
metricType: "", metricType: "", //ประเภทตัวชี้วัด
calculation: "", calculation: "", //วิธีการคำนวณ/เครื่องมือ
measuRement: "", measuRement: "", //ระยะเวลาวัดผล
results: "", results: "", //ผลการดำเนิดการ
obstacles: "", obstacles: "",
suggestions: "", suggestions: "",
}); });
/** ข้อมูล Table */ /** ข้อมูล Table */
const rows = ref<DevelopmentEvaluations[]>([]); // ข้อมูลรายการ const rows = ref<DevelopmentEvaluations[]>([]); // ข้อมูลรายการ
const progressTracking = ref<string>(""); //การติดตามความก้าวหน้า
const projectEvaluation = ref<string>(""); // การประเมินผลโครงการ
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "indicators", name: "indicators",
@ -144,9 +147,6 @@ const metricTypeOp = ref<DataOption[]>([
}, },
]); ]);
const progressTracking = ref<string>(""); //การติดตามความก้าวหน้า
const projectEvaluation = ref<string>(""); // การประเมินผลโครงการ
/** /**
* ดึงข้อมูลการติดตามผลและการประเมิน * ดึงข้อมูลการติดตามผลและการประเมิน
*/ */

77
src/modules/15_development/components/MainTab.vue
View file

@ -2,8 +2,11 @@
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
/** importComponents*/ /** importComponents*/
import BasicInfo from "@/modules/15_development/components/BasicInfo.vue"; // ข้อมูลเบื้องต้น import BasicInfo from "@/modules/15_development/components/BasicInfo.vue"; // ข้อมูลเบื้องต้น
@ -13,11 +16,6 @@ import Budget from "@/modules/15_development/components/Budget.vue"; // งบ
import Risk from "@/modules/15_development/components/Risk.vue"; //ความเสี่ยง import Risk from "@/modules/15_development/components/Risk.vue"; //ความเสี่ยง
import FollowResult from "@/modules/15_development/components/FollowResult.vue"; // การติดตามประเมินผล import FollowResult from "@/modules/15_development/components/FollowResult.vue"; // การติดตามประเมินผล
import Other from "@/modules/15_development/components/Other.vue"; // อื่นๆ import Other from "@/modules/15_development/components/Other.vue"; // อื่นๆ
// import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();
@ -31,9 +29,9 @@ const checkRoutePermission = ref<boolean>(
route.name == "developmentDetailPage" route.name == "developmentDetailPage"
); );
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม"); const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
const projectId = ref<string>(route.params.id.toLocaleString()); const projectId = ref<string>(route.params.id.toLocaleString()); //id route
const tab = ref<string>("BasicInfo"); const tab = ref<string>("BasicInfo"); //tab เริ่มต้น
const status = ref<string>("ONGOING"); const status = ref<string>("ONGOING"); //สถานะเริ่มต้น
const step = ref<string[]>([ const step = ref<string[]>([
"BasicInfo", "BasicInfo",
"Target", "Target",
@ -45,12 +43,28 @@ const step = ref<string[]>([
"Result", "Result",
]); ]);
const isChangeData = ref<boolean>(false);
const childBasicInfoRef = ref<InstanceType<typeof BasicInfo> | null>(null);
const childProjectDetailRef = ref<InstanceType<typeof ProjectDetail> | null>(
null
);
const childBudgetRef = ref<InstanceType<typeof Budget> | null>(null);
const childRiskRef = ref<InstanceType<typeof Risk> | null>(null);
const childFollowResultRef = ref<InstanceType<typeof FollowResult> | null>(
null
);
const childOtherRef = ref<InstanceType<typeof Other> | null>(null);
//ย้อนกลับ
function prevStep() { function prevStep() {
const index = step.value.indexOf(tab.value); const index = step.value.indexOf(tab.value);
if (index > 0) { if (index > 0) {
tab.value = step.value[index - 1]; tab.value = step.value[index - 1];
} }
} }
// ไปข้างหน้า
function nextStep() { function nextStep() {
const index = step.value.indexOf(tab.value); const index = step.value.indexOf(tab.value);
if (index < step.value.length - 1) { if (index < step.value.length - 1) {
@ -100,12 +114,6 @@ function onFinish(id: string) {
); );
} }
/** hooklifecycle*/
onMounted(() => {
projectId.value && getStatus(projectId.value);
});
const isChangeData = ref<boolean>(false);
/** /**
* function เช็คการแกไข้ข้อมูล * function เช็คการแกไข้ข้อมูล
*/ */
@ -113,17 +121,6 @@ function onCheckChangeData() {
isChangeData.value = true; isChangeData.value = true;
} }
const childBasicInfoRef = ref<InstanceType<typeof BasicInfo> | null>(null);
const childProjectDetailRef = ref<InstanceType<typeof ProjectDetail> | null>(
null
);
const childBudgetRef = ref<InstanceType<typeof Budget> | null>(null);
const childRiskRef = ref<InstanceType<typeof Risk> | null>(null);
const childFollowResultRef = ref<InstanceType<typeof FollowResult> | null>(
null
);
const childOtherRef = ref<InstanceType<typeof Other> | null>(null);
watch(tab, (newValue, oldValue) => { watch(tab, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`); console.log(`Count changed from ${oldValue} to ${newValue}`);
if (isChangeData.value) { if (isChangeData.value) {
@ -143,6 +140,11 @@ watch(tab, (newValue, oldValue) => {
} }
} }
}); });
/** hooklifecycle*/
onMounted(() => {
projectId.value && getStatus(projectId.value);
});
</script> </script>
<template> <template>
<div class="toptitle text-dark col-12 row items-center"> <div class="toptitle text-dark col-12 row items-center">
@ -209,8 +211,8 @@ watch(tab, (newValue, oldValue) => {
<BasicInfo <BasicInfo
ref="childBasicInfoRef" ref="childBasicInfoRef"
:next-step="nextStep" :next-step="nextStep"
:onCheckChangeData="onCheckChangeData" :on-check-change-data="onCheckChangeData"
v-model:isChangeData.value="isChangeData" v-model:is-change-data.value="isChangeData"
/> />
</q-tab-panel> </q-tab-panel>
@ -225,8 +227,8 @@ watch(tab, (newValue, oldValue) => {
ref="childProjectDetailRef" ref="childProjectDetailRef"
:prev-step="prevStep" :prev-step="prevStep"
:next-step="nextStep" :next-step="nextStep"
:onCheckChangeData="onCheckChangeData" :on-check-change-data="onCheckChangeData"
v-model:isChangeData.value="isChangeData" v-model:is-change-data.value="isChangeData"
/> />
</q-tab-panel> </q-tab-panel>
@ -237,8 +239,8 @@ watch(tab, (newValue, oldValue) => {
:status="status" :status="status"
:prev-step="prevStep" :prev-step="prevStep"
:next-step="nextStep" :next-step="nextStep"
:onCheckChangeData="onCheckChangeData" :on-check-change-data="onCheckChangeData"
v-model:isChangeData.value="isChangeData" v-model:is-change-data.value="isChangeData"
/> />
</q-tab-panel> </q-tab-panel>
@ -248,8 +250,8 @@ watch(tab, (newValue, oldValue) => {
ref="childRiskRef" ref="childRiskRef"
:prev-step="prevStep" :prev-step="prevStep"
:next-step="nextStep" :next-step="nextStep"
:onCheckChangeData="onCheckChangeData" :on-check-change-data="onCheckChangeData"
v-model:isChangeData.value="isChangeData" v-model:is-change-data.value="isChangeData"
/> />
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="FollowResult" style="padding: 0px"> <q-tab-panel name="FollowResult" style="padding: 0px">
@ -258,8 +260,8 @@ watch(tab, (newValue, oldValue) => {
:status="status" :status="status"
:prev-step="prevStep" :prev-step="prevStep"
:next-step="nextStep" :next-step="nextStep"
:onCheckChangeData="onCheckChangeData" :on-check-change-data="onCheckChangeData"
v-model:isChangeData.value="isChangeData" v-model:is-change-data.value="isChangeData"
/> />
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="Other" style="padding: 0px"> <q-tab-panel name="Other" style="padding: 0px">
@ -267,11 +269,10 @@ watch(tab, (newValue, oldValue) => {
ref="childOtherRef" ref="childOtherRef"
:status="status" :status="status"
:prev-step="prevStep" :prev-step="prevStep"
:onCheckChangeData="onCheckChangeData" :on-check-change-data="onCheckChangeData"
v-model:isChangeData.value="isChangeData" v-model:is-change-data.value="isChangeData"
/> />
</q-tab-panel> </q-tab-panel>
<!-- <q-tab-panel name="Record"> <Record /> </q-tab-panel> -->
</q-tab-panels> </q-tab-panels>
</div> </div>
</q-card> </q-card>

5
src/modules/15_development/components/Other.vue
View file

@ -39,15 +39,14 @@ const {
success, success,
} = useCounterMixin(); } = useCounterMixin();
const projectId = ref<string>(route.params.id.toLocaleString()); const projectId = ref<string>(route.params.id.toLocaleString()); //id route
const checkRoutePermission = ref<boolean>( const checkRoutePermission = ref<boolean>(
route.name == "developmentDetailPage" route.name == "developmentDetailPage"
); ); //check ชื่อ route
/** /**
* props * props
*/ */
const status = defineModel<string>("status", { required: true });
const isChangeData = defineModel<boolean>("isChangeData", { required: true }); const isChangeData = defineModel<boolean>("isChangeData", { required: true });
const props = defineProps({ const props = defineProps({
prevStep: { type: Function, required: true }, prevStep: { type: Function, required: true },

35
src/modules/15_development/components/ProjectDetail.vue
View file

@ -2,20 +2,27 @@
import { onMounted, reactive, ref, computed, watch } from "vue"; import { onMounted, reactive, ref, computed, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
/**importType*/ /**importType*/
import type { import type {
DataOptionTechnique, DataOptionTechnique,
FormProjectDetail, FormProjectDetail,
DataOption, DataOption,
StrategyNode
} from "@/modules/15_development/interface/index/Main"; } from "@/modules/15_development/interface/index/Main";
import type { DataStrategic } from "@/modules/15_development/interface/response/Main"; import type { DataStrategic } from "@/modules/15_development/interface/response/Main";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore"; const $q = useQuasar();
const store = useDevelopmentDataStore();
import http from "@/plugins/http"; const route = useRoute();
import config from "@/app.config"; const projectId = ref<string>(route.params.id.toLocaleString());
const { showLoader, hideLoader, messageError, date2Thai, diffDay, success } =
useCounterMixin();
const isChangeData = defineModel<boolean>("isChangeData", { required: true }); const isChangeData = defineModel<boolean>("isChangeData", { required: true });
const props = defineProps({ const props = defineProps({
@ -25,12 +32,12 @@ const props = defineProps({
}); });
const step = ref<string>(""); const step = ref<string>("");
const reasonPlanned70 = ref<string>(""); const reasonPlanned70 = ref<string>(""); //การเรียนรู้และการพัฒนาจากการลงมือทำ 70 เทคนิควิธีการที่ใช้ในการพัฒนา
const reasonPlanned20 = ref<string>(""); const reasonPlanned20 = ref<string>(""); // การเรียนรู้และการพัฒนาจากบุคคลอื่น 20 เทคนิควิธีการที่ใช้ในการพัฒนา
const reasonPlanned10 = ref<string>(""); const reasonPlanned10 = ref<string>(""); // การเรียนรู้และการพัฒนาจากการฝึกอบรม 10 เทคนิควิธีการที่ใช้ในการพัฒนา
const reasonActual70 = ref<string>(""); const reasonActual70 = ref<string>(""); //การเรียนรู้และการพัฒนาจากการลงมือทำ 70 รูปแบบโครงการตามจริง
const reasonActual20 = ref<string>(""); const reasonActual20 = ref<string>(""); // การเรียนรู้และการพัฒนาจากบุคคลอื่น 20 รูปแบบโครงการตามจริง
const reasonActual10 = ref<string>(""); const reasonActual10 = ref<string>(""); // การเรียนรู้และการพัฒนาจากการฝึกอบรม 10 รูปแบบโครงการตามจริง
const checkOtherBox11 = computed<boolean>(() => { const checkOtherBox11 = computed<boolean>(() => {
return formData.developmentProjectTechniquePlanneds.includes("other1"); return formData.developmentProjectTechniquePlanneds.includes("other1");
@ -52,12 +59,6 @@ const checkOtherBox23 = computed<boolean>(() => {
return formData.developmentProjectTechniqueActuals.includes("other3"); return formData.developmentProjectTechniqueActuals.includes("other3");
}); });
const $q = useQuasar();
const store = useDevelopmentDataStore();
const route = useRoute();
const projectId = ref<string>(route.params.id.toLocaleString());
const { showLoader, hideLoader, messageError, date2Thai, diffDay, success } =
useCounterMixin();
const checkRoutePermission = ref<boolean>( const checkRoutePermission = ref<boolean>(
route.name == "developmentDetailPage" route.name == "developmentDetailPage"
); );
@ -182,7 +183,7 @@ const formData = reactive<FormProjectDetail>({
developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด developmentAddresss: [{ address: "", provinceId: "" }], //ที่อยู่ ,จังหวัด
}); });
const nodes = ref<any>([]); const nodes = ref<StrategyNode[]>([]);
const filter = ref<string>(""); const filter = ref<string>("");
const filter2 = ref<string>(""); const filter2 = ref<string>("");
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา"); const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");

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

@ -2,34 +2,19 @@
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
/** import { useCounterMixin } from "@/stores/mixin";
* importType
*/
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { ResRecord } from "@/modules/15_development/interface/response/Main"; import type { ResRecord } from "@/modules/15_development/interface/response/Main";
/**
* importStore
*/
import { useCounterMixin } from "@/stores/mixin";
/** /**
* usec * usec
*/ */
const route = useRoute(); const route = useRoute();
const $q = useQuasar(); const $q = useQuasar();
const id = ref<string>(route.params.id.toString()); const id = ref<string>(route.params.id.toString());
const { const { date2Thai } = useCounterMixin();
success,
messageError,
showLoader,
hideLoader,
dialogConfirm,
date2Thai,
} = useCounterMixin();
/** /**
* prosp * prosp

13
src/modules/15_development/components/Risk.vue
View file

@ -2,26 +2,17 @@
import { onMounted, reactive, ref } from "vue"; import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/**
* importType
*/
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { FormRisk } from "@/modules/15_development/interface/request/Main"; import type { FormRisk } from "@/modules/15_development/interface/request/Main";
import type { ResRisk } from "@/modules/15_development/interface/response/Main"; import type { ResRisk } from "@/modules/15_development/interface/response/Main";
/**
* importComponents
*/
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
/**
* importstore
*/
import { useCounterMixin } from "@/stores/mixin";
/** /**
* use * use
*/ */

15
src/modules/15_development/components/Target.vue
View file

@ -2,12 +2,12 @@
import { onMounted, ref, reactive } from "vue"; import { onMounted, ref, reactive } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
/**
* importType
*/
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
import type { DataOption } from "@/modules/15_development/interface/index/Main"; import type { DataOption } from "@/modules/15_development/interface/index/Main";
import type { import type {
@ -22,17 +22,8 @@ import type {
ResActualGoals, ResActualGoals,
} from "@/modules/15_development/interface/response/Main"; } from "@/modules/15_development/interface/response/Main";
/**
* importComponents
*/
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
/**
* importStore
*/
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
/** /**
* use * use
*/ */

10
src/modules/15_development/components/history/AddPage.vue
View file

@ -2,16 +2,16 @@
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { import type {
FormAddHistory, FormAddHistory,
FormAddHistoryProject, FormAddHistoryProject,
} from "@/modules/15_development/interface/request/Main"; } from "@/modules/15_development/interface/request/Main";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin; const { showLoader, hideLoader, messageError, date2Thai } = mixin;
@ -19,9 +19,9 @@ const { showLoader, hideLoader, messageError, date2Thai } = mixin;
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const id = ref<string>(route.params.id as string); const id = ref<string>(route.params.id as string); // id route
const dateOrder = ref<Date | null>(null); const dateOrder = ref<Date | null>(null); // คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่
const order = ref<string>(""); const order = ref<string>(""); //เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ
/** ตัวแปรข้อมูลข้าราชการ */ /** ตัวแปรข้อมูลข้าราชการ */
const formMain = reactive<FormAddHistory>({ const formMain = reactive<FormAddHistory>({

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

@ -1,23 +1,30 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, computed, reactive } from "vue"; import { ref, watch, reactive } from "vue";
import Header from "@/components/DialogHeader.vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { import type {
DataOption, DataOption,
FormFilter, FormFilter,
NewPagination, NewPagination,
} from "@/modules/15_development/interface/index/Main"; } from "@/modules/15_development/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http"; import Header from "@/components/DialogHeader.vue";
import config from "@/app.config";
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
const rows = ref<any[]>([]); const rows = ref<any[]>([]);
const props = defineProps({ const props = defineProps({
upDate: { type: Function }, upDate: { type: Function },
}); });
const maxPage = ref<number>(1); const maxPage = ref<number>(1); // จำนวนหน้าสูงสุด
const formFilter = reactive<FormFilter>({ const formFilter = reactive<FormFilter>({
page: 1, page: 1,
@ -38,14 +45,10 @@ const pagination = ref({
rowsPerPage: 20, rowsPerPage: 20,
}); });
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
const selected = ref<any[]>([]); const selected = ref<any[]>([]); // checkbox
const search = ref<string>("citizenId"); const search = ref<string>("citizenId"); // กำหนดค่าเริ่มต้น ค้นหาจาก
const inputSearch = ref<any>(""); const inputSearch = ref<any>(""); //ตัวแปร ค้นหา
const govOp = ref<DataOption[]>([ const govOp = ref<DataOption[]>([
{ {
id: "citizenId", id: "citizenId",

342
src/modules/15_development/components/history/DialogProject.vue
View file

@ -1,342 +0,0 @@
<script setup lang="ts">
import { ref, watch, reactive } from "vue";
import Header from "@/components/DialogHeader.vue";
import type {
DataOption,
FormFilter,
NewPagination,
} from "@/modules/15_development/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const rows = ref<any[]>([]);
const props = defineProps({
upDate: { type: Function },
});
const year = ref<string>("");
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const maxPage = ref<number>(1);
const pagination = ref({
page: 1,
rowsPerPage: 20,
});
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 20,
keyword: "",
type: "",
year: new Date().getFullYear(),
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: null,
isProbation: null,
});
const selected = ref<any[]>([]);
const search = ref<string>("projectName");
const inputSearch = ref<string>("");
const projectOp = ref<DataOption[]>([
{
id: "projectName",
name: "ชื่อโครงการ",
},
{
id: "year",
name: "ปีงบประมาณ",
},
]);
const visibleColumns = ref<string[]>(["project", "year", "organizingTraining"]);
const columns = ref<QTableProps["columns"]>([
{
name: "project",
align: "left",
label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
sortable: true,
field: "project",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "year",
align: "left",
label: "ปีงบประมาณ",
sortable: true,
field: "year",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizingTraining",
align: "left",
label: "หน่วยงานที่รับผิดชอบ",
sortable: true,
field: "organizingTraining",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
/** save ข้อมูล */
function onSubmit() {
if (selected.value?.length == 0) {
dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
} else {
const data = selected.value[0];
const body = {
id: data.id,
year: data.year,
project: data.project,
dateStart: data.dateStart,
dateEnd: data.dateEnd,
totalDate: data.totalDate,
addressAcademic: data.addressAcademic,
topicAcademic: data.topicAcademic,
};
props.upDate?.(body);
closeDialog();
}
}
/** ปิด dialog */
function closeDialog() {
modal.value = false;
rows.value = [];
selected.value = [];
inputSearch.value = "";
}
/** class */
function getClass() {
return "inputgreen";
}
/** ค้นข้อมูลตาม ฟิลเตอร์ */
function searchFilter() {
let queryParams: any = {
page: formFilter.page,
pageSize: formFilter.pageSize,
searchField: search.value,
searchKeyword: search.value == "year" ? year.value : inputSearch.value,
};
showLoader();
http
.get(config.API.developmentProjectSearch(), { params: queryParams })
.then((res) => {
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,
year: item.year ? item.year : null,
project: item.projectName ? item.projectName : null,
dateStart: item.dateStart ? item.dateStart : null,
dateEnd: item.dateEnd ? item.dateEnd : null,
totalDate: item.totalDate ? item.totalDate : null,
addressAcademic: item.addressAcademic ? item.addressAcademic : null,
topicAcademic: item.topicAcademic ? item.topicAcademic : null,
}));
})
.catch((e) => {
messageError($q, e``);
})
.finally(() => {
hideLoader();
});
}
/** update ค่า เเถวข้อมูล */
function updatePage(val: number) {
formFilter.page = val;
searchFilter();
}
/** update ค่า เเถวข้อมูล */
function updatePageSize(newPagination: NewPagination) {
formFilter.page = 1;
formFilter.pageSize = newPagination.rowsPerPage;
}
/** เช็คเเถวข้อมูลว่ามีการเปลี่ยนแปลงไหม */
watch(
() => formFilter.pageSize,
() => {
searchFilter();
}
);
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 60%">
<Header :tittle="'เลือกโครงการ'" :close="closeDialog" />
<q-separator />
<q-card-section>
<div class="row q-col-gutter-x-sm">
<div class="col-2">
<q-select
dense
outlined
label="ค้นหาจาก"
v-model="search"
option-label="name"
option-value="id"
:options="projectOp"
map-options
emit-value
:class="getClass()"
/>
</div>
<div v-if="search == 'year'" class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="year"
class="col-2"
: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
lazy-rules
outlined
:model-value="year === '' ? null : Number(year) + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="year = ''"
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>
</div>
<div v-else class="col-8">
<q-input
dense
outlined
label="ค้นหา"
v-model="inputSearch"
:class="getClass()"
/>
</div>
<q-space v-if="search == 'year'" />
<div class="col-2">
<q-btn
label="ค้นหา"
class="full-width"
unelevated
color="teal"
@click="searchFilter()"
>
</q-btn>
</div>
</div>
<div class="q-mt-sm">
<d-table
selection="single"
v-model:selected="selected"
for="table"
ref="table"
:columns="columns"
:rows="rows"
row-key="id"
flat
bordered
dense
class="custom-header-table"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[20, 25, 50, 100]"
@update:pagination="updatePageSize"
>
<template v-slot:pagination="scope">
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="updatePage"
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th class="text-center"> </q-th>
<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 class="text-center">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'year'">
{{ col.value ? col.value + 543 : "-" }}
</div>
<div v-else class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
color="secondary"
type="submit"
@click="onSubmit()"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-card>
</q-dialog>
</template>

5
src/modules/15_development/components/historyEmployee/AddPage.vue
View file

@ -2,6 +2,7 @@
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
@ -15,9 +16,9 @@ import type {
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin; const { showLoader, hideLoader, messageError, date2Thai } = mixin;
@ -53,8 +54,6 @@ const formMainProject = reactive<FormAddHistoryProject>({
totalTraining: "", //รวมระยะเวลาในการฝึกอบรม totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
location: "", //สถานที่ไปศึกษาดูงาน location: "", //สถานที่ไปศึกษาดูงาน
topic: "", //หัวข้อการไปศึกษาดูงาน topic: "", //หัวข้อการไปศึกษาดูงาน
// studyStart: "", //วันเริ่มต้นการศึกษาดูงาน
// studyEnd: "", //วันสิ้นสุดการศึกษาดูงาน
organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
}); });

348
src/modules/15_development/components/historyEmployee/DialogGov.vue
View file

@ -1,348 +0,0 @@
<script setup lang="ts">
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 { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const rows = ref<any[]>([]);
const props = defineProps({
upDate: { type: Function },
});
const maxPage = ref<number>(1);
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 20,
keyword: "",
year: new Date().getFullYear(),
type: "",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: null,
isProbation: null,
});
const pagination = ref({
page: 1,
rowsPerPage: 20,
});
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const selected = ref<any[]>([]);
const search = ref<string>("citizenId");
const inputSearch = ref<any>("");
const govOp = ref<DataOption[]>([
{
id: "citizenId",
name: "เลขประจำตัวประชาชน",
},
{
id: "fullName",
name: "ชื่อ - นามสกุล",
},
]);
const visibleColumns = ref<string[]>([
"citizenId",
"name",
"position",
"type",
"level",
"positionSide",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "citizenId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: true,
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตําแหน่ง",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "type",
align: "left",
label: "กลุ่มงาน",
sortable: true,
field: "type",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "level",
align: "left",
label: "ระดับชั้นงาน",
sortable: true,
field: "level",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
/** save ข้อมูล */
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();
}
}
/** ปิด dialog */
function closeDialog() {
modal.value = false;
rows.value = [];
selected.value = [];
inputSearch.value = "";
}
/** class */
function getClass() {
return "inputgreen";
}
/** ดึงข้อมูลตาม keyword */
function searchFilter() {
let queryParams: any = {
page: formFilter.page,
pageSize: formFilter.pageSize,
searchField: search.value,
searchKeyword: inputSearch.value,
};
showLoader();
http
.get(config.API.developmentProjectSearchEmployee(), { params: queryParams })
.then((res) => {
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,
prefix: item.prefix ? item.prefix : null,
rank: item.rank ? item.rank : null,
name: item.firstName
? `${item.prefix}${item.firstName} ${item.lastName}`
: 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,
posTypeShortName: item.posTypeShortName ? item.posTypeShortName : null,
posLevelId: item.posLevelId ? item.posLevelId : null,
posTypeId: item.posTypeId ? item.posTypeId : null,
position: item.position ? item.position : null,
posNo: item.posNo ? item.posNo : null,
}));
})
.catch((e) => {
messageError($q, e``);
})
.finally(() => {
hideLoader();
});
}
/** update ค่า เเถวข้อมูล
* @param val ตัวเลขที่มีการเปลี่ยนค่า
*/
function updatePage(val: number) {
formFilter.page = val;
searchFilter();
}
/** update ค่า เเถวข้อมูล
* @param newPagination ตัวเลขที่มีการเปลี่ยนค่า
*/
function updatePageSize(newPagination: NewPagination) {
formFilter.page = 1;
formFilter.pageSize = newPagination.rowsPerPage;
}
/** เช็คเเถวข้อมูลว่ามีการเปลี่ยนแปลงไหม */
watch(
() => formFilter.pageSize,
() => {
searchFilter();
}
);
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 60%">
<Header :tittle="'เลือกลูกจ้าง'" :close="closeDialog" />
<q-separator />
<q-card-section>
<div class="row q-col-gutter-x-sm">
<div class="col-3">
<q-select
dense
outlined
label="ค้นหาจาก"
v-model="search"
option-label="name"
option-value="id"
:options="govOp"
map-options
emit-value
:class="getClass()"
@update:model-value="inputSearch = ''"
/>
</div>
<div class="col-7">
<q-input
dense
outlined
label="ค้นหา"
v-model="inputSearch"
:class="getClass()"
:mask="search === 'citizenId' ? '#############' : undefined"
/>
</div>
<div class="col-2">
<q-btn
label="ค้นหา"
class="full-width"
unelevated
color="teal"
@click="searchFilter()"
>
</q-btn>
</div>
</div>
<div class="q-mt-sm">
<d-table
style="max-height: 70vh"
virtual-scroll
selection="single"
v-model:selected="selected"
for="table"
ref="table"
:columns="columns"
:rows="rows"
row-key="id"
flat
bordered
dense
class="custom-header-table"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[20, 25, 50, 100]"
@update:pagination="updatePageSize"
>
<template v-slot:pagination="scope">
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="updatePage"
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th class="text-center"> </q-th>
<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 class="text-center">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'type'">
{{ col.value ? col.value : "-"
}}{{
props.row.posTypeShortName
? `(${props.row.posTypeShortName})`
: ""
}}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
color="secondary"
type="submit"
@click="onSubmit()"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-card>
</q-dialog>
</template>

340
src/modules/15_development/components/historyEmployee/DialogProject.vue
View file

@ -1,340 +0,0 @@
<script setup lang="ts">
import { ref, watch, reactive } from "vue";
import Header from "@/components/DialogHeader.vue";
import type {
DataOption,
FormFilter,
NewPagination,
} from "@/modules/15_development/interface/index/Main";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const rows = ref<any[]>([]);
const props = defineProps({
upDate: { type: Function },
});
const year = ref<string>("");
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
const modal = defineModel<boolean>("modal", { required: true });
const maxPage = ref<number>(1);
const pagination = ref({
page: 1,
rowsPerPage: 20,
});
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 20,
keyword: "",
type: "",
year: new Date().getFullYear(),
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: null,
isProbation: null,
});
const selected = ref<any[]>([]);
const search = ref<string>("projectName");
const inputSearch = ref<string>("");
const projectOp = ref<DataOption[]>([
{
id: "projectName",
name: "ชื่อโครงการ",
},
{
id: "year",
name: "ปีงบประมาณ",
},
]);
const visibleColumns = ref<string[]>(["project", "year", "organizingTraining"]);
const columns = ref<QTableProps["columns"]>([
{
name: "project",
align: "left",
label: "ชื่อโครงการ/กิจกรรม/หลักสูตร",
sortable: true,
field: "project",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "year",
align: "left",
label: "ปีงบประมาณ",
sortable: true,
field: "year",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizingTraining",
align: "left",
label: "หน่วยงานที่รับผิดชอบ",
sortable: true,
field: "organizingTraining",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
/** save ข้อมูล */
function onSubmit() {
if (selected.value?.length == 0) {
dialogMessageNotify($q, `กรุณาเลือก 1 รายการ`);
} else {
const data = selected.value[0];
const body = {
id: data.id,
year: data.year,
project: data.project,
dateStart: data.dateStart,
dateEnd: data.dateEnd,
totalDate: data.totalDate,
addressAcademic: data.addressAcademic,
topicAcademic: data.topicAcademic,
};
props.upDate?.(body);
closeDialog();
}
}
/** ปิด dialog */
function closeDialog() {
modal.value = false;
rows.value = [];
selected.value = [];
inputSearch.value = "";
}
/** class */
function getClass() {
return "inputgreen";
}
/** ค้นข้อมูลตาม ฟิลเตอร์ */
function searchFilter() {
let queryParams: any = {
page: formFilter.page,
pageSize: formFilter.pageSize,
searchField: search.value,
searchKeyword: search.value == "year" ? year.value : inputSearch.value,
};
showLoader();
http
.get(config.API.developmentProjectSearch(), { params: queryParams })
.then((res) => {
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,
year: item.year ? item.year : null,
project: item.projectName ? item.projectName : null,
dateStart: item.dateStart ? item.dateStart : null,
dateEnd: item.dateEnd ? item.dateEnd : null,
totalDate: item.totalDate ? item.totalDate : null,
addressAcademic: item.addressAcademic ? item.addressAcademic : null,
topicAcademic: item.topicAcademic ? item.topicAcademic : null,
}));
})
.catch((e) => {
messageError($q, e``);
})
.finally(() => {
hideLoader();
});
}
/** update ค่า เเถวข้อมูล */
function updatePage(val: number) {
formFilter.page = val;
searchFilter();
}
/** update ค่า เเถวข้อมูล */
function updatePageSize(newPagination: NewPagination) {
formFilter.page = 1;
formFilter.pageSize = newPagination.rowsPerPage;
}
/** เช็คเเถวข้อมูลว่ามีการเปลี่ยนแปลงไหม */
watch(
() => formFilter.pageSize,
() => {
searchFilter();
}
);
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 60%">
<Header :tittle="'เลือกโครงการ'" :close="closeDialog" />
<q-separator />
<q-card-section>
<div class="row q-col-gutter-x-sm">
<div class="col-2">
<q-select
dense
outlined
label="ค้นหาจาก"
v-model="search"
option-label="name"
option-value="id"
:options="projectOp"
map-options
emit-value
:class="getClass()"
/>
</div>
<div v-if="search == 'year'" class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="year"
class="col-2"
: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
lazy-rules
outlined
:model-value="year === '' ? null : Number(year) + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="year = ''"
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>
</div>
<div v-else class="col-8">
<q-input
dense
outlined
label="ค้นหา"
v-model="inputSearch"
:class="getClass()"
/>
</div>
<q-space v-if="search == 'year'" />
<div class="col-2">
<q-btn
label="ค้นหา"
class="full-width"
unelevated
color="teal"
@click="searchFilter()"
>
</q-btn>
</div>
</div>
<div class="q-mt-sm">
<d-table
selection="single"
v-model:selected="selected"
for="table"
ref="table"
:columns="columns"
:rows="rows"
row-key="id"
flat
bordered
dense
class="custom-header-table"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[20, 25, 50, 100]"
@update:pagination="updatePageSize"
>
<template v-slot:pagination="scope">
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
@update:model-value="updatePage"
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th class="text-center"> </q-th>
<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 class="text-center">
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'year'">
{{ col.value ? col.value + 543 : "-" }}
</div>
<div v-else class="table_ellipsis">
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
color="secondary"
type="submit"
@click="onSubmit()"
><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
>
</q-card-actions>
</q-card>
</q-dialog>
</template>

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

@ -2,26 +2,25 @@
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type { import type {
DataOption, DataOption,
DataPerson, DataPerson,
PersonData
} from "@/modules/15_development/interface/index/Main"; } from "@/modules/15_development/interface/index/Main";
import type { FormsSholarship } from "@/modules/15_development/interface/request/Scholarship"; import type { FormsSholarship } from "@/modules/15_development/interface/request/Scholarship";
import type { DataSholarship } from "@/modules/15_development/interface/response/Scholarship"; import type { DataSholarship } from "@/modules/15_development/interface/response/Scholarship";
import DialogGov from "@/modules/15_development/components/history/DialogGov.vue"; import DialogGov from "@/modules/15_development/components/history/DialogGov.vue";
import { useCounterMixin } from "@/stores/mixin";
const fileBackReceived = ref<string>(""); const fileBackReceived = ref<string>("");
const $q = useQuasar(); const $q = useQuasar();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const checkRouteDetail = ref<boolean>(
route.name == "developmentScholarshipidDetail"
);
const { const {
dialogConfirm, dialogConfirm,
showLoader, showLoader,
@ -32,12 +31,17 @@ const {
calculateDurationYmd, calculateDurationYmd,
} = useCounterMixin(); } = useCounterMixin();
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม"); const checkRouteDetail = ref<boolean>(
route.name == "developmentScholarshipidDetail"
); // check ชือ route
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม"); //หัวข้อหน้า
const scholarshipId = ref<string | null>( const scholarshipId = ref<string | null>(
route.params.id ? route.params.id.toLocaleString() : null route.params.id ? route.params.id.toLocaleString() : null
); ); // เก็บ id route.
const isStatus = ref<string>("");
const modalDialogGov = ref<boolean>(false); const isStatus = ref<string>(""); // สถานะ
const modalDialogGov = ref<boolean>(false); // popup เลือกข้าราชการ ฯ
const budgetSourceOp = ref<DataOption[]>([ const budgetSourceOp = ref<DataOption[]>([
{ id: "BKK", name: "งบประมาณ กทม." }, { id: "BKK", name: "งบประมาณ กทม." },
@ -74,10 +78,11 @@ const fundTypeOp = ref<DataOption[]>([
{ id: "FUND5", name: "ทุนส่วนตัว" }, { id: "FUND5", name: "ทุนส่วนตัว" },
]); ]);
const isGov = ref<boolean>(false); const isGov = ref<boolean>(false); // เก็บเช็คข้าราชการ ถ้ามี เลข ปชช. true/false
const isGuarantor = ref<boolean>(false); const isGuarantor = ref<boolean>(false); // ข้อมูลผู้ค้ำประกัน มี/ไม่มี
const isSelectGov = ref<boolean>(false); const isSelectGov = ref<boolean>(false); // เลือกข้าราชการ
const dataPerson = reactive({
const dataPerson = reactive<PersonData>({
id: "", id: "",
citizenId: "", citizenId: "",
name: "", name: "",
@ -87,7 +92,8 @@ const dataPerson = reactive({
positionSide: "", positionSide: "",
org: "-", org: "-",
}); });
const dataGuarantor = reactive({
const dataGuarantor = reactive<PersonData>({
id: "", id: "",
citizenId: "", citizenId: "",
name: "", name: "",

53
src/modules/15_development/interface/index/Main.ts
View file

@ -105,6 +105,56 @@ interface DataHistory {
year: number; year: number;
} }
interface OrgTree {
orgTreeId: string;
orgRootId: string;
orgLevel: number;
orgName: string;
orgTreeName: string;
orgTreeShortName: string;
orgTreeCode: string;
orgCode: string;
orgTreeRank: string;
orgTreeRankSub: string;
orgTreeOrder: number;
orgRootCode: string;
orgTreePhoneEx: string;
orgTreePhoneIn: string;
orgTreeFax: string;
orgRevisionId: string;
orgRootName: string;
responsibility: string;
labelName: string;
totalPosition: number;
totalPositionCurrentUse: number;
totalPositionCurrentVacant: number;
totalPositionNextUse: number;
totalPositionNextVacant: number;
totalRootPosition: number;
totalRootPositionCurrentUse: number;
totalRootPositionCurrentVacant: number;
totalRootPositionNextUse: number;
totalRootPositionNextVacant: number;
children: OrgTree[];
}
interface PersonData {
id: string;
citizenId: string;
name: string;
position: string;
type: string;
level: string;
positionSide: string;
org: string;
}
interface StrategyNode {
id: string;
level: number;
name: string;
children: StrategyNode[];
}
export type { export type {
DataOption, DataOption,
DataOptionCheckBox, DataOptionCheckBox,
@ -116,4 +166,7 @@ export type {
FormProjectDetail, FormProjectDetail,
DataOptionTechnique, DataOptionTechnique,
DataHistory, DataHistory,
OrgTree,
PersonData,
StrategyNode,
}; };

9
src/modules/15_development/router.ts
View file

@ -8,22 +8,15 @@ const employeeHistory = () =>
import("@/modules/15_development/views/EmployeeHistory.vue"); import("@/modules/15_development/views/EmployeeHistory.vue");
const Scholarship = () => const Scholarship = () =>
import("@/modules/15_development/views/Scholarship.vue"); import("@/modules/15_development/views/Scholarship.vue");
// const historyAdd = () =>
// import("@/modules/15_development/components/history/AddPage.vue");
const historyEdit = () => const historyEdit = () =>
import("@/modules/15_development/components/history/AddPage.vue"); import("@/modules/15_development/components/history/AddPage.vue");
// const historyEmployeeAdd = () =>
// import("@/modules/15_development/components/historyEmployee/AddPage.vue");
const historyEmployeeEdit = () => const historyEmployeeEdit = () =>
import("@/modules/15_development/components/historyEmployee/AddPage.vue"); import("@/modules/15_development/components/historyEmployee/AddPage.vue");
const ScholarshipDetail = () => const ScholarshipDetail = () =>
import("@/modules/15_development/components/scholarship/DetailView.vue"); import("@/modules/15_development/components/scholarship/DetailView.vue");
const ScholarshipDetailById = () => const ScholarshipDetailById = () =>
import("@/modules/15_development/components/scholarship/DetailView.vue"); import("@/modules/15_development/components/scholarship/DetailView.vue");
// const historyAdd = () =>
// import("@/modules/15_development/components/history/AddPage.vue");
// const StrategicView = () =>
// import("@/modules/15_development/views/Strategic.vue");
const RecordPage = () => const RecordPage = () =>
import("@/modules/15_development/views/RecordPage.vue"); import("@/modules/15_development/views/RecordPage.vue");

17
src/modules/15_development/views/EmployeeHistory.vue
View file

@ -1,27 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue"; import { ref, onMounted, reactive, watch } from "vue";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import genReportXLSX from "@/plugins/genreportxlsx"; import genReportXLSX from "@/plugins/genreportxlsx";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";
import type { import type {
NewPagination, NewPagination,
ItemsMenu, ItemsMenu,
} from "@/modules/15_development/interface/index/Main"; } from "@/modules/15_development/interface/index/Main";
/** importStore*/
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";
/** use*/ /** use*/
const $q = useQuasar();
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const store = useDevelopmentDataStore(); const store = useDevelopmentDataStore();
const $q = useQuasar();
const { showLoader, hideLoader, messageError } = useCounterMixin(); const { showLoader, hideLoader, messageError } = useCounterMixin();
const maxPage = ref<number>(1);
const maxPage = ref<number>(1); // จำนวนหน้า
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
const formFilter = reactive({ const formFilter = reactive({
root: null, root: null,
@ -317,10 +318,6 @@ onMounted(() => {
/> />
</template> </template>
</q-select> </q-select>
<!-- <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn> -->
</q-toolbar> </q-toolbar>
<q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm"> <q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm">
<q-space /> <q-space />

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

@ -2,9 +2,13 @@
import { ref, onMounted, reactive, watch } from "vue"; import { ref, onMounted, reactive, watch } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import genReportXLSX from "@/plugins/genreportxlsx"; import genReportXLSX from "@/plugins/genreportxlsx";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";
/** /**
* importType * importType
@ -17,17 +21,10 @@ import type {
} from "@/modules/15_development/interface/index/Main"; } from "@/modules/15_development/interface/index/Main";
import type { ResHistory } from "@/modules/15_development/interface/response/Main"; import type { ResHistory } from "@/modules/15_development/interface/response/Main";
/**
* importStore
*/
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";
/** use*/ /** use*/
const $q = useQuasar();
const router = useRouter(); const router = useRouter();
const store = useDevelopmentDataStore(); const store = useDevelopmentDataStore();
const $q = useQuasar();
const { showLoader, hideLoader, messageError } = useCounterMixin(); const { showLoader, hideLoader, messageError } = useCounterMixin();
const formFilter = reactive({ const formFilter = reactive({
@ -42,9 +39,8 @@ const agencyOp = ref<DataOption[]>([]); // หน่วยงาน
/** /**
* ข้อมูล Table * ข้อมูล Table
*/ */
const rows = ref<DataHistory[]>([]); const rows = ref<DataHistory[]>([]);
const maxPage = ref<number>(1); const maxPage = ref<number>(1); //จำนวนหน้าสูงสุด
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {

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

@ -1,18 +1,21 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue"; import { ref, onMounted, reactive, watch } from "vue";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
import genReportXLSX from "@/plugins/genreportxlsx";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { checkPermission } from "@/utils/permissions"; import { checkPermission } from "@/utils/permissions";
import { useStructureTree } from "@/stores/structureTree"; import { useStructureTree } from "@/stores/structureTree";
import genReportXLSX from "@/plugins/genreportxlsx";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
/**importType*/ /**importType*/
import type { import type {
DataOption, DataOption,
NewPagination, NewPagination,
OrgTree,
} from "@/modules/15_development/interface/index/Main"; } from "@/modules/15_development/interface/index/Main";
import type { import type {
FormQueryListProject, FormQueryListProject,
@ -23,14 +26,7 @@ import type {
DataTree, DataTree,
} from "@/modules/15_development/interface/response/Main"; } from "@/modules/15_development/interface/response/Main";
/**
* importComponents
*/
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();
@ -46,16 +42,16 @@ const {
dialogConfirm, dialogConfirm,
} = useCounterMixin(); } = useCounterMixin();
const node = ref<any>([]); const node = ref<OrgTree[]>([]); // หน่วยงาน/ส่วนราชการ
const expanded = ref<string[]>([]); const expanded = ref<string[]>([]);
const expandedDialog = ref<string[]>([]); const expandedDialog = ref<string[]>([]);
const filter = ref<string>(""); const filter = ref<string>(""); //ค้นหา เพิ่มโครงการ/หลักสูตรการฝึกอบรม
const filterMain = ref<string>(""); const filterMain = ref<string>(""); //ค้นหา หน่วยงาน/ส่วนราชการ
const splitterModel = ref<number>(60); const splitterModel = ref<number>(60); //แบ่ง ส่วน
const modal = ref<boolean>(false); const modal = ref<boolean>(false); // ตัวแปร dialog
const totalList = ref<number>(0); //จำนวนข้อมูลรายการ const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
const totalPage = ref<number>(1); const totalPage = ref<number>(1); // จำนวนข้อมูลที่มี
const statusOpt = ref<DataOption[]>([ const statusOpt = ref<DataOption[]>([
{ id: "ONGOING", name: "กำลังดำเนินการ" }, { id: "ONGOING", name: "กำลังดำเนินการ" },
@ -269,14 +265,6 @@ function onRedirectToRecordPage(id: string) {
router.push(`/development/record/${id}`); router.push(`/development/record/${id}`);
} }
/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
watch(
() => formQuery.pageSize,
() => {
fetchListProject();
}
);
/** /**
* function redirect หน้าบันทึกผล * function redirect หน้าบันทึกผล
* @param id โครงการ * @param id โครงการ
@ -285,6 +273,14 @@ function onDetail(id: string) {
router.push(`/development-detail/${id}`); router.push(`/development-detail/${id}`);
} }
/** callbackFunction ทำเมื่อมีการอัปเดท pageSize*/
watch(
() => formQuery.pageSize,
() => {
fetchListProject();
}
);
/** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */ /** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
onMounted(() => { onMounted(() => {
fetchActive(); fetchActive();

29
src/modules/15_development/views/RecordPage.vue
View file

@ -2,21 +2,16 @@
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import env from "@/api/index"; import { useCounterMixin } from "@/stores/mixin";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
/**
* importComponents
*/
import Record from "@/modules/15_development/components/Record.vue"; // บันทึกผล
import DialogRecordPerson from "@/modules/15_development/components/DialogRecordPerson.vue";
import type { ResRecord } from "@/modules/15_development/interface/response/Main"; import type { ResRecord } from "@/modules/15_development/interface/response/Main";
/** importStore*/ import Record from "@/modules/15_development/components/Record.vue";
import { useCounterMixin } from "@/stores/mixin"; import DialogRecordPerson from "@/modules/15_development/components/DialogRecordPerson.vue";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
/** /**
* use * use
@ -31,13 +26,13 @@ const { showLoader, hideLoader, messageError, dialogConfirm, success } =
/** /**
* ตัวแปร * ตัวแปร
*/ */
const projectId = ref<string>(route.params.id.toLocaleString()); const projectId = ref<string>(route.params.id.toLocaleString()); //id route
const tab = ref<string>("IN"); const tab = ref<string>("IN"); //tab
const title = ref<string>(""); const title = ref<string>(""); // หัวข้อ
const isLoadPage = ref<boolean>(false); const isLoadPage = ref<boolean>(false); // เช็คโหลดหน้า
const files = ref<any>(null); const files = ref<any>(null); // ไฟล์
const listPerson = ref<ResRecord[]>([]); const listPerson = ref<ResRecord[]>([]); // ตัวแปร เก็บบุคคล
const modalAddPerson = ref<boolean>(false); const modalAddPerson = ref<boolean>(false); // ตัวแปร dialog เพิ่มบุคคล
/** /**
* function fetch ข้อมูลเบื้องต้น * function fetch ข้อมูลเบื้องต้น

3
src/modules/15_development/views/Scholarship.vue
View file

@ -2,9 +2,11 @@
import { ref, reactive, onMounted, watch } from "vue"; import { ref, reactive, onMounted, watch } from "vue";
import { useQuasar, type QTableProps } from "quasar"; import { useQuasar, type QTableProps } from "quasar";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import { checkPermission } from "@/utils/permissions"; import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import genReportXLSX from "@/plugins/genreportxlsx"; import genReportXLSX from "@/plugins/genreportxlsx";
import type { import type {
@ -14,7 +16,6 @@ import type {
} from "@/modules/15_development/interface/index/Main"; } from "@/modules/15_development/interface/index/Main";
import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship"; import type { ListSholarship } from "@/modules/15_development/interface/response/Scholarship";
/** importStore*/ /** importStore*/
import { useCounterMixin } from "@/stores/mixin";
/** use*/ /** use*/
const $q = useQuasar(); const $q = useQuasar();