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

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

@ -2,8 +2,10 @@
import { onMounted, reactive, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/**
* importType
@ -11,11 +13,6 @@ import config from "@/app.config";
import type { DataOption } from "@/modules/15_development/interface/index/Main";
import type { FormBudget } from "@/modules/15_development/interface/request/Main";
/**
* importstor
*/
import { useCounterMixin } from "@/stores/mixin";
/**
* use
*/
@ -33,11 +30,11 @@ const props = defineProps({
nextStep: { 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>(
route.name == "developmentDetailPage"
);
); // check ชื่อ route
const step = ref<string>("");
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 { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
/**
* importType
@ -16,7 +18,6 @@ import type { ResPrefix } from "@/modules/15_development/interface/response/Main
import DialogHeader from "@/components/DialogHeader.vue";
/** importStore*/
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const route = useRoute();
@ -33,27 +34,27 @@ const {
/**
* props
*/
const modal = defineModel<boolean>("modal", { required: true });
const tab = defineModel<string>("tab", { required: true });
const modal = defineModel<boolean>("modal", { required: true }); //รับ ตัวแปร popup
const tab = defineModel<string>("tab", { required: true }); //รับข้อมูล tab
const props = defineProps({
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({
type: "",
citizenId: "",
prefix: "",
firstName: "",
lastName: "",
position: "",
org: "",
dateStart: null,
dateEnd: null,
trainingDays: "",
commandNumber: "",
commandDate: null,
type: "", //ประเภท
citizenId: "", // เลข ปชช
prefix: "", //คำนำหน้า
firstName: "", //ชื่อ
lastName: "", //นามสกุล
position: "", //ตำแหน่ง
org: "", //หน่วยงาน
dateStart: null, //วันที่เริ่ม
dateEnd: null, //วันที่สิ้นสุด
trainingDays: "", //จำนวนวันที่ อบรม
commandNumber: "", //เลขที่คำสั่ง
commandDate: null, //ลงวันที่
});
/** Option*/
@ -67,9 +68,9 @@ const typeOpsMain = ref<DataOption[]>([
name: "ลูกจ้างประจำ",
},
]);
const typeOps = ref<DataOption[]>(typeOpsMain.value);
const prefixOpsMain = ref<DataOption[]>([]);
const prefixOps = ref<DataOption[]>([]);
const typeOps = ref<DataOption[]>(typeOpsMain.value); // ตัวเลือกประเภท
const prefixOpsMain = ref<DataOption[]>([]); //ตัวเลือกคำนำหน้า หลัก
const prefixOps = ref<DataOption[]>([]); //ตัวเลือกคำนำหน้า
/**
* function บันทึกข้อมูลการเพิ่มราชชื่อ
@ -100,7 +101,7 @@ function onSubmit() {
* @param update function
* @param refData ประเภท
*/
const filterSelector = (val: string, update: Function, refData: string) => {
function filterSelector(val: string, update: Function, refData: string) {
switch (refData) {
case "type":
update(() => {
@ -121,7 +122,7 @@ const filterSelector = (val: string, update: Function, refData: string) => {
default:
break;
}
};
}
/**
* 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 modalDialog = ref<boolean>(false);
const isEdit = ref<boolean>(false);
const indicatorId = ref<string>("");
const typeAction = ref<string>("");
const modalDialog = ref<boolean>(false); //popup ตัวชี้วัด
const isEdit = ref<boolean>(false); // check edit
const indicatorId = ref<string>(""); //id ตัวชี้วัด
const typeAction = ref<string>(""); //แยกประเภท ผลการดำเนินการ /แก้ไขตัวชี้วัด /เพิ่มตัวชี้วัด
const formIndicators = reactive<FormIndicators>({
indicators: "",
target: null,
metricType: "",
calculation: "",
measuRement: "",
results: "",
indicators: "", //ตัวชี้วัด
target: null, //เป้าหมาย
metricType: "", //ประเภทตัวชี้วัด
calculation: "", //วิธีการคำนวณ/เครื่องมือ
measuRement: "", //ระยะเวลาวัดผล
results: "", //ผลการดำเนิดการ
obstacles: "",
suggestions: "",
});
/** ข้อมูล Table */
const rows = ref<DevelopmentEvaluations[]>([]); // ข้อมูลรายการ
const progressTracking = ref<string>(""); //การติดตามความก้าวหน้า
const projectEvaluation = ref<string>(""); // การประเมินผลโครงการ
const columns = ref<QTableProps["columns"]>([
{
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 { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
/** importComponents*/
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 FollowResult from "@/modules/15_development/components/FollowResult.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*/
const $q = useQuasar();
@ -31,9 +29,9 @@ const checkRoutePermission = ref<boolean>(
route.name == "developmentDetailPage"
);
const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
const projectId = ref<string>(route.params.id.toLocaleString());
const tab = ref<string>("BasicInfo");
const status = ref<string>("ONGOING");
const projectId = ref<string>(route.params.id.toLocaleString()); //id route
const tab = ref<string>("BasicInfo"); //tab เริ่มต้น
const status = ref<string>("ONGOING"); //สถานะเริ่มต้น
const step = ref<string[]>([
"BasicInfo",
"Target",
@ -45,12 +43,28 @@ const step = ref<string[]>([
"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() {
const index = step.value.indexOf(tab.value);
if (index > 0) {
tab.value = step.value[index - 1];
}
}
// ไปข้างหน้า
function nextStep() {
const index = step.value.indexOf(tab.value);
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 เช็คการแกไข้ข้อมูล
*/
@ -113,17 +121,6 @@ function onCheckChangeData() {
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) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
if (isChangeData.value) {
@ -143,6 +140,11 @@ watch(tab, (newValue, oldValue) => {
}
}
});
/** hooklifecycle*/
onMounted(() => {
projectId.value && getStatus(projectId.value);
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
@ -209,8 +211,8 @@ watch(tab, (newValue, oldValue) => {
<BasicInfo
ref="childBasicInfoRef"
:next-step="nextStep"
:onCheckChangeData="onCheckChangeData"
v-model:isChangeData.value="isChangeData"
:on-check-change-data="onCheckChangeData"
v-model:is-change-data.value="isChangeData"
/>
</q-tab-panel>
@ -225,8 +227,8 @@ watch(tab, (newValue, oldValue) => {
ref="childProjectDetailRef"
:prev-step="prevStep"
:next-step="nextStep"
:onCheckChangeData="onCheckChangeData"
v-model:isChangeData.value="isChangeData"
:on-check-change-data="onCheckChangeData"
v-model:is-change-data.value="isChangeData"
/>
</q-tab-panel>
@ -237,8 +239,8 @@ watch(tab, (newValue, oldValue) => {
:status="status"
:prev-step="prevStep"
:next-step="nextStep"
:onCheckChangeData="onCheckChangeData"
v-model:isChangeData.value="isChangeData"
:on-check-change-data="onCheckChangeData"
v-model:is-change-data.value="isChangeData"
/>
</q-tab-panel>
@ -248,8 +250,8 @@ watch(tab, (newValue, oldValue) => {
ref="childRiskRef"
:prev-step="prevStep"
:next-step="nextStep"
:onCheckChangeData="onCheckChangeData"
v-model:isChangeData.value="isChangeData"
:on-check-change-data="onCheckChangeData"
v-model:is-change-data.value="isChangeData"
/>
</q-tab-panel>
<q-tab-panel name="FollowResult" style="padding: 0px">
@ -258,8 +260,8 @@ watch(tab, (newValue, oldValue) => {
:status="status"
:prev-step="prevStep"
:next-step="nextStep"
:onCheckChangeData="onCheckChangeData"
v-model:isChangeData.value="isChangeData"
:on-check-change-data="onCheckChangeData"
v-model:is-change-data.value="isChangeData"
/>
</q-tab-panel>
<q-tab-panel name="Other" style="padding: 0px">
@ -267,11 +269,10 @@ watch(tab, (newValue, oldValue) => {
ref="childOtherRef"
:status="status"
:prev-step="prevStep"
:onCheckChangeData="onCheckChangeData"
v-model:isChangeData.value="isChangeData"
:on-check-change-data="onCheckChangeData"
v-model:is-change-data.value="isChangeData"
/>
</q-tab-panel>
<!-- <q-tab-panel name="Record"> <Record /> </q-tab-panel> -->
</q-tab-panels>
</div>
</q-card>

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

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

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

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

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

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

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

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

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

@ -1,23 +1,30 @@
<script setup lang="ts">
import { ref, watch, computed, reactive } from "vue";
import Header from "@/components/DialogHeader.vue";
import { ref, watch, reactive } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
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";
import Header from "@/components/DialogHeader.vue";
const $q = useQuasar();
const mixin = useCounterMixin();
const { messageError, dialogMessageNotify, showLoader, hideLoader } = mixin;
const rows = ref<any[]>([]);
const props = defineProps({
upDate: { type: Function },
});
const maxPage = ref<number>(1);
const maxPage = ref<number>(1); // จำนวนหน้าสูงสุด
const formFilter = reactive<FormFilter>({
page: 1,
@ -38,14 +45,10 @@ const pagination = ref({
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 selected = ref<any[]>([]); // checkbox
const search = ref<string>("citizenId"); // กำหนดค่าเริ่มต้น ค้นหาจาก
const inputSearch = ref<any>(""); //ตัวแปร ค้นหา
const govOp = ref<DataOption[]>([
{
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 { useRoute, useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
@ -15,9 +16,9 @@ import type {
import { useCounterMixin } from "@/stores/mixin";
/** use*/
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai } = mixin;
@ -53,8 +54,6 @@ const formMainProject = reactive<FormAddHistoryProject>({
totalTraining: "", //รวมระยะเวลาในการฝึกอบรม
location: "", //สถานที่ไปศึกษาดูงาน
topic: "", //หัวข้อการไปศึกษาดูงาน
// studyStart: "", //วันเริ่มต้นการศึกษาดูงาน
// studyEnd: "", //วันสิ้นสุดการศึกษาดูงาน
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 { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import type {
DataOption,
DataPerson,
PersonData
} from "@/modules/15_development/interface/index/Main";
import type { FormsSholarship } from "@/modules/15_development/interface/request/Scholarship";
import type { DataSholarship } from "@/modules/15_development/interface/response/Scholarship";
import DialogGov from "@/modules/15_development/components/history/DialogGov.vue";
import { useCounterMixin } from "@/stores/mixin";
const fileBackReceived = ref<string>("");
const $q = useQuasar();
const router = useRouter();
const route = useRoute();
const checkRouteDetail = ref<boolean>(
route.name == "developmentScholarshipidDetail"
);
const {
dialogConfirm,
showLoader,
@ -32,12 +31,17 @@ const {
calculateDurationYmd,
} = 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>(
route.params.id ? route.params.id.toLocaleString() : null
);
const isStatus = ref<string>("");
const modalDialogGov = ref<boolean>(false);
); // เก็บ id route.
const isStatus = ref<string>(""); // สถานะ
const modalDialogGov = ref<boolean>(false); // popup เลือกข้าราชการ ฯ
const budgetSourceOp = ref<DataOption[]>([
{ id: "BKK", name: "งบประมาณ กทม." },
@ -74,10 +78,11 @@ const fundTypeOp = ref<DataOption[]>([
{ id: "FUND5", name: "ทุนส่วนตัว" },
]);
const isGov = ref<boolean>(false);
const isGuarantor = ref<boolean>(false);
const isSelectGov = ref<boolean>(false);
const dataPerson = reactive({
const isGov = ref<boolean>(false); // เก็บเช็คข้าราชการ ถ้ามี เลข ปชช. true/false
const isGuarantor = ref<boolean>(false); // ข้อมูลผู้ค้ำประกัน มี/ไม่มี
const isSelectGov = ref<boolean>(false); // เลือกข้าราชการ
const dataPerson = reactive<PersonData>({
id: "",
citizenId: "",
name: "",
@ -87,7 +92,8 @@ const dataPerson = reactive({
positionSide: "",
org: "-",
});
const dataGuarantor = reactive({
const dataGuarantor = reactive<PersonData>({
id: "",
citizenId: "",
name: "",