Refactoring code module 04_registryPerson

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-09-18 17:24:21 +07:00
parent 1164d79122
commit eeb92dfb5d
46 changed files with 1935 additions and 2230 deletions

View file

@ -1,15 +1,20 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { checkPermission } from "@/utils/permissions";
import dialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { QForm, useQuasar } from "quasar";
import { useRoute } from "vue-router";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ProfesLicense";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ProfesLicense";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ProfesLicense";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ProfesLicense";
import dialogHeader from "@/components/DialogHeader.vue";
const route = useRoute();
const mixin = useCounterMixin();
const $q = useQuasar();
const {
@ -22,17 +27,18 @@ const {
pathRegistryEmp,
} = mixin;
const historyDialog = ref<boolean>(false);
const mode = ref<string>("table");
const dialog = ref<boolean>(false);
const route = useRoute();
const id = ref<string>(route.params.id.toString());
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const dialogStatus = ref<string>("create");
const editId = ref<string>("");
const keyword = ref<string>("");
const historyKeyword = ref<string>("");
const mode = ref<string>("table"); // Table,Card
const dialog = ref<boolean>(false); // popup
const historyDialog = ref<boolean>(false); // popup
const dialogStatus = ref<string>("create"); //
const editId = ref<string>(""); //id
//Table Main
const rows = ref<ResponseObject[]>([]); //
const keyword = ref<string>(""); //
const columns = ref<QTableProps["columns"]>([
{
name: "certificateType",
@ -92,7 +98,21 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumns = ref<string[]>([
"certificateType",
"issuer",
"certificateNo",
"issueDate",
"expireDate",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
//Table
const historyRows = ref<ResponseObject[]>([]); //
const historyKeyword = ref<string>(""); //
const historyColumns = ref<QTableProps["columns"]>([
{
name: "certificateType",
@ -175,37 +195,6 @@ const historyColumns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const profesLicenseData = reactive<RequestItemsObject>({
certificateType: "",
issuer: "",
certificateNo: "",
issueDate: new Date(),
expireDate: null,
profileId: id.value,
});
const rows = ref<ResponseObject[]>([]);
const historyRows = ref<ResponseObject[]>([]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const visibleColumns = ref<string[]>([
"certificateType",
"issuer",
"certificateNo",
"issueDate",
"expireDate",
]);
const historyVisibleColumns = ref<string[]>([
"certificateType",
"issuer",
@ -215,6 +204,19 @@ const historyVisibleColumns = ref<string[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const profesLicenseData = reactive<RequestItemsObject>({
certificateType: "", //
issuer: "", //
certificateNo: "", //
issueDate: new Date(), //
expireDate: null, //
profileId: id.value,
});
/**
* นยนการบนทกขอม
@ -242,17 +244,18 @@ function closeDialog() {
*/
function closeHistoryDialog() {
historyDialog.value = false;
historyRows.value = [];
}
/**
* fetch อมลรายการใบอนญาตประกอบวชาช
*/
function fetchData(id: string) {
async function fetchData(id: string) {
showLoader();
http
await http
.get(config.API.profileNewCertificateByProfileId(id, empType.value))
.then(async (res) => {
rows.value = res.data.result;
rows.value = await res.data.result;
})
.catch((err) => {
messageError($q, err);
@ -357,6 +360,9 @@ function fetchHistoryData(id: string) {
});
}
/**
* ทำงานเม Components กเรยกใชงาน
*/
onMounted(() => {
fetchData(id.value);
});
@ -433,6 +439,7 @@ onMounted(() => {
</template>
</q-btn-toggle>
</div>
<d-table
:grid="mode === 'card'"
ref="table"
@ -569,7 +576,7 @@ onMounted(() => {
bg-color="white"
dense
class="inputgreen"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
hide-bottom-space
/>
</div>
@ -582,7 +589,7 @@ onMounted(() => {
dense
class="inputgreen"
:rules="[
(val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
(val:string) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
]"
hide-bottom-space
/>
@ -597,7 +604,7 @@ onMounted(() => {
bg-color="white"
class="inputgreen"
dense
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
hide-bottom-space
/>
</div>
@ -628,7 +635,7 @@ onMounted(() => {
: ''
"
:rules="[
(val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
(val:string) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
]"
:label="`${'วันที่ออกใบอนุญาต'}`"
>

View file

@ -1,20 +1,23 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { QForm, useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import dialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Training";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Training";
import { QForm, useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
const mixin = useCounterMixin();
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Training";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Training";
import dialogHeader from "@/components/DialogHeader.vue";
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
dialogRemove,
dialogConfirm,
showLoader,
hideLoader,
@ -24,12 +27,36 @@ const {
pathRegistryEmp,
} = mixin;
const route = useRoute();
const id = ref<string>(route.params.id.toString());
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const dialog = ref<boolean>(false);
const mode = ref<string>("table");
const mode = ref<string>("table"); // Table,Card
const dialog = ref<boolean>(false); // popup /
const dialogStatus = ref<string>("create"); //
const editId = ref<string>(""); //id
const historyDialog = ref<boolean>(false); // popup
const isDate = ref<string>("false"); // ,//
const trainData = reactive<RequestItemsObject>({
profileId: id.value,
name: "", ///
topic: "", ///
startYear: new Date().getFullYear(), ///
finishYear: new Date().getFullYear(), ///
startDate: new Date(), ///
endDate: new Date(), ///
yearly: null, //
place: "", ///
duration: "", ///
department: "", ///
numberOrder: "", ///
dateOrder: null, ///
isDate: isDate.value === "false" ? false : true,
});
//Table Main
const rows = ref<ResponseObject[]>([]);
const keyword = ref<string>("");
const columns = ref<QTableProps["columns"]>([
{
name: "name",
@ -148,6 +175,26 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumns = ref<string[]>([
"name", //
"topic", //
"yearly", //
"place", //
"duration", //
"department", //
"numberOrder", //
"dateOrder", //
"startDate", //
"endDate", //
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
//Table
const historyRows = ref<ResponseObject[]>([]);
const historyKeyword = ref<string>("");
const historyColumns = ref<QTableProps["columns"]>([
{
name: "name",
@ -289,55 +336,6 @@ const historyColumns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const isDate = ref<string>("false");
const dialogStatus = ref<string>("create");
const historyDialog = ref<boolean>(false);
const editId = ref<string>("");
const keyword = ref<string>("");
const historyKeyword = ref<string>("");
const trainData = reactive<RequestItemsObject>({
profileId: id.value,
name: "",
topic: "",
yearly: null,
place: "",
duration: "",
department: "",
numberOrder: "",
dateOrder: null,
startDate: new Date(),
endDate: new Date(),
startYear: new Date().getFullYear(),
finishYear: new Date().getFullYear(),
isDate: isDate.value === "false" ? false : true,
});
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const rows = ref<ResponseObject[]>([]);
const historyRows = ref<ResponseObject[]>([]);
const visibleColumns = ref<string[]>([
"name", //
"topic", //
"yearly", //
"place", //
"duration", //
"department", //
"numberOrder", //
"dateOrder", //
"startDate", //
"endDate", //
]);
const historyVisibleColumns = ref<string[]>([
"name", //
"topic", //
@ -352,6 +350,10 @@ const historyVisibleColumns = ref<string[]>([
"lastUpdateFullName", //
"lastUpdatedAt", //
]);
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
/**
* นยนการบนทกขอม
@ -422,8 +424,8 @@ function addData() {
})
.then(async () => {
await fetchData(id.value);
closeDialog();
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((err) => {
messageError($q, err);
@ -449,8 +451,8 @@ function editData(idData: string) {
})
.then(async () => {
await fetchData(id.value);
closeDialog();
await success($q, "บันทึกข้อมูลสำเร็จ");
closeDialog();
})
.catch((err) => {
messageError($q, err);
@ -473,17 +475,18 @@ function closeDialog() {
*/
function closeHistoryDialog() {
historyDialog.value = false;
historyRows.value = [];
}
/**
* fetch รายการการฝกอบรม/งาน
*/
function fetchData(id: string) {
async function fetchData(id: string) {
showLoader();
http
await http
.get(config.API.profileNewTrainingByProfileId(id, empType.value))
.then((res) => {
rows.value = res.data.result;
.then(async (res) => {
rows.value = await res.data.result;
})
.catch((err) => {
messageError($q, err);
@ -511,6 +514,9 @@ function fetchHistoryData(id: string) {
});
}
/**
* ทำงานเม Components กเรยกใชงาน
*/
onMounted(() => {
fetchData(id.value);
});
@ -725,7 +731,7 @@ onMounted(() => {
dense
class="inputgreen"
:rules="[
(val) =>
(val:string) =>
!!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
]"
hide-bottom-space
@ -740,7 +746,7 @@ onMounted(() => {
bg-color="white"
dense
:rules="[
(val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
(val:string) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
]"
hide-bottom-space
/>

View file

@ -1,15 +1,15 @@
<script setup lang="ts">
import { onMounted, ref, watch, reactive } from "vue";
import { onMounted, ref, reactive } from "vue";
import { useQuasar } from "quasar";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useInsigniaDataStore } from "@/modules/04_registryPerson/stores/insignia";
import DialogHeader from "@/components/DialogHeader.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import type {
DataOption,
DataOptionInsignia,
@ -18,6 +18,8 @@ import type {
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Insignia";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Insignia";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const route = useRoute();
const store = useInsigniaDataStore();
@ -32,54 +34,46 @@ const {
dialogConfirm,
pathRegistryEmp,
} = mixin;
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const id = ref<string>("");
const insigniaType = ref<string>("");
const id = ref<string>(""); //id
const insigniaType = ref<string>(""); //
const insigniaForm = reactive<RequestItemsObject>({
year: 0,
no: "",
volume: "",
section: "",
page: "",
receiveDate: null,
insigniaId: "",
dateAnnounce: null,
issue: "",
volumeNo: "",
refCommandDate: null,
refCommandNo: "",
note: "",
year: 0, //
receiveDate: null, //
insigniaId: "", //
no: "", //
issue: "", //
volumeNo: "", //
volume: "", //
section: "", //
page: "", //
dateAnnounce: null, //
refCommandNo: "", //
refCommandDate: null, //' ( //)'
note: "", //
});
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const isEdit = ref<boolean>(false);
const modal = ref<boolean>(false);
const modeView = ref<string>("table");
const filterSearch = ref("");
const filterHistory = ref<string>("");
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<RequestItemsObject[]>([]);
const Ops = ref<InsigniaOps>({
insigniaOptions: [],
});
const isEdit = ref<boolean>(false); //
const modal = ref<boolean>(false); // popup
const modeView = ref<string>("table"); // Table,Card
const modalHistory = ref<boolean>(false); // popup
//
const OpsFilter = ref<InsigniaOps>({
insigniaOptions: [],
});
//
const Ops = ref<InsigniaOps>({
insigniaOptions: [],
});
//Table Main
const rows = ref<ResponseObject[]>([]);
const filterSearch = ref("");
const columns = ref<QTableProps["columns"]>([
{
name: "year",
@ -239,6 +233,30 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumns = ref<String[]>([
"insignia",
"insigniaType",
"year",
"no",
"issue",
"volumeNo",
"volume",
"section",
"page",
"receiveDate",
"dateAnnounce",
"refCommandNo",
"refCommandDate",
"note",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
//Table
const rowsHistory = ref<RequestItemsObject[]>([]);
const filterHistory = ref<string>("");
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "year",
@ -410,22 +428,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumns = ref<String[]>([
"insignia",
"insigniaType",
"year",
"no",
"issue",
"volumeNo",
"volume",
"section",
"page",
"receiveDate",
"dateAnnounce",
"refCommandNo",
"refCommandDate",
"note",
]);
const visibleColumnsHistory = ref<String[]>([
"insignia",
"insigniaType",
@ -443,6 +445,10 @@ const visibleColumnsHistory = ref<String[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
});
/**
* fetch อมลรายการเครองราชอสรยาภรณ
@ -629,6 +635,9 @@ function clearData() {
insigniaForm.note = "";
}
/**
* ทำงานเม Components กเรยกใชงาน
*/
onMounted(async () => {
await fetchData();
store.insigniaOption.length === 0 ? await fetchInsignia() : "";
@ -1145,7 +1154,7 @@ onMounted(async () => {
<q-card style="min-width: 80%">
<DialogHeader
tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
:close="() => (modalHistory = false)"
:close="() => ((modalHistory = false), (rowsHistory = []))"
/>
<q-separator />

View file

@ -1,17 +1,19 @@
<script setup lang="ts">
import { ref, onMounted, reactive, watch } from "vue";
import { ref, onMounted, reactive } from "vue";
import { useQuasar } from "quasar";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import DialogHeader from "@/components/DialogHeader.vue";
import type { QTableProps } from "quasar";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/DeclarationHonor";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/DeclarationHonor";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
@ -24,32 +26,31 @@ const {
dialogConfirm,
pathRegistryEmp,
} = mixin;
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const id = ref<string>("");
const issueDateYear = ref<number>(0);
const id = ref<string>(""); //id
const issueDateYear = ref<number>(0); //
const declHonorForm = reactive<RequestItemsObject>({
isDate: "false",
issuer: "",
detail: "",
issueDate: null,
refCommandNo: "",
refCommandDate: null,
isDate: "false", //
issuer: "", //
detail: "", //
issueDate: null, //
refCommandNo: "", //
refCommandDate: null, //' ()'
});
const isEdit = ref<boolean>(false);
const modal = ref<boolean>(false);
const modeView = ref<string>("table");
const filterSearch = ref("");
const filterHistory = ref<string>("");
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<ResponseObject[]>([]);
const isEdit = ref<boolean>(false); //
const modal = ref<boolean>(false); // popup
const modeView = ref<string>("table"); // Table,Card
const modalHistory = ref<boolean>(false); // popup
//Table Main
const rows = ref<ResponseObject[]>([]);
const filterSearch = ref("");
const columns = ref<QTableProps["columns"]>([
{
name: "issueDate",
@ -109,6 +110,21 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumns = ref<String[]>([
"issuer",
"detail",
"issueDate",
"refCommandNo",
"refCommandDate",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
//Table
const rowsHistory = ref<ResponseObject[]>([]);
const filterHistory = ref<string>("");
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "issueDate",
@ -191,15 +207,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumns = ref<String[]>([
"issuer",
"detail",
"issueDate",
"refCommandNo",
"refCommandDate",
]);
const visibleColumnsHistory = ref<String[]>([
"issuer",
"detail",
@ -209,12 +216,6 @@ const visibleColumnsHistory = ref<String[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
@ -354,6 +355,9 @@ function clearData() {
declHonorForm.isDate = "false";
}
/**
* ทำงานเม Components กเรยกใชงาน
*/
onMounted(() => {
fetchData();
});
@ -767,7 +771,7 @@ onMounted(() => {
<q-card-section class="flex justify-between" style="padding: 0">
<DialogHeader
tittle="ประวัติแก้ไขประกาศเกียรติคุณ"
:close="() => (modalHistory = false)"
:close="() => ((modalHistory = false), (rowsHistory = []))"
/>
</q-card-section>

View file

@ -1,20 +1,21 @@
<script setup lang="ts">
import { onMounted, ref, watch, reactive } from "vue";
import { checkPermission } from "@/utils/permissions";
import { useRoute } from "vue-router";
import { onMounted, ref, reactive } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps, QForm } from "quasar";
import { useRoute } from "vue-router";
import { checkPermission } from "@/utils/permissions";
import { useCounterMixin } from "@/stores/mixin";
import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogDevelop from "@/modules/04_registryPerson/components/DialogDevelopmant.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ResultsPerformance";
import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ResultsPerformance";
import DialogHeader from "@/components/DialogHeader.vue";
import DialogDevelop from "@/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue";
const $q = useQuasar();
const route = useRoute();
const store = useResultsPerformDataStore();
@ -29,38 +30,36 @@ const {
dialogConfirm,
pathRegistryEmp,
} = mixin;
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
const id = ref<string>("");
const id = ref<string>(""); //id
const isEdit = ref<boolean>(false); //
const modal = ref<boolean>(false); // popup
const modalDevelop = ref<boolean>(false); // popup
const modeView = ref<string>("table"); // Table,Card
const modeViewPlan = ref<string>("table"); // Table,Card
const modalHistory = ref<boolean>(false); // popup
const kpiDevelopmentId = ref<string>(""); // id
const resPerformForm = reactive<RequestItemsObject>({
name: "",
point1Total: 0,
point1: 0,
point2Total: 0,
point2: 0,
pointSumTotal: 0,
pointSum: 0,
date: null,
point1Total: 0, //1 ()
point1: 0, //1 ()
point2Total: 0, // 2 ()
point2: 0, //2 ()
pointSumTotal: 0, // ()
pointSum: 0, // ()
date: null, //
});
const isEdit = ref<boolean>(false);
const modal = ref<boolean>(false);
const modalDevelop = ref<boolean>(false);
const modeView = ref<string>("table");
const modeViewPlan = ref<string>("table");
const filterSearch = ref("");
const kpiDevelopmentId = ref<string>("");
const filterHistory = ref<string>("");
const modalHistory = ref<boolean>(false);
const rowsHistory = ref<ResponseObject[]>([]);
const filterSearchPlan = ref("");
//Table
const rows = ref<ResponseObject[]>([]);
const rowsPlan = ref<any[]>([]);
const filterSearch = ref<string>("");
const columns = ref<QTableProps["columns"]>([
{
name: "date",
@ -150,6 +149,107 @@ const columns = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumns = ref<String[]>([
"point1Total",
"point1",
"point2Total",
"point2",
"pointSumTotal",
"pointSum",
"name",
"date",
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
//Table (Individual Development Plan)
const rowsPlan = ref<any[]>([]);
const filterSearchPlan = ref<string>("");
const columnsPlan = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => date2Thai(v),
},
{
name: "name",
align: "left",
label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentProjects",
align: "left",
label: "วิธีการพัฒนา",
sortable: true,
field: "developmentProjects",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "target",
align: "left",
label: "เป้าหมายการพัฒนา",
sortable: true,
field: "target",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentResults",
align: "left",
label: "วิธีการวัดผลการพัฒนา",
sortable: true,
field: "developmentResults",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point",
align: "left",
label: "รายงานผลการพัฒนา",
sortable: true,
field: "point",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsPlan = ref<String[]>([
"no",
"name",
"developmentProjects",
"target",
"developmentResults",
"point",
]);
const paginationPlan = ref({
page: 1,
rowsPerPage: 10,
});
//Table
const rowsHistory = ref<ResponseObject[]>([]);
const filterHistory = ref<string>("");
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "date",
@ -272,103 +372,6 @@ const visibleColumnsHistory = ref<String[]>([
"lastUpdateFullName",
"lastUpdatedAt",
]);
const visibleColumns = ref<String[]>([
"point1Total",
"point1",
"point2Total",
"point2",
"pointSumTotal",
"pointSum",
"name",
"date",
]);
const visibleColumnsPlan = ref<String[]>([
"no",
"name",
"developmentProjects",
"target",
"developmentResults",
"point",
]);
const columnsPlan = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => date2Thai(v),
},
{
name: "name",
align: "left",
label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
sortable: true,
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentProjects",
align: "left",
label: "วิธีการพัฒนา",
sortable: true,
field: "developmentProjects",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "target",
align: "left",
label: "เป้าหมายการพัฒนา",
sortable: true,
field: "target",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "developmentResults",
align: "left",
label: "วิธีการวัดผลการพัฒนา",
sortable: true,
field: "developmentResults",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "point",
align: "left",
label: "รายงานผลการพัฒนา",
sortable: true,
field: "point",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const paginationPlan = ref({
page: 1,
rowsPerPage: 10,
});
const historyPagination = ref({
page: 1,
rowsPerPage: 10,
@ -379,7 +382,6 @@ const historyPagination = ref({
*/
async function fetchData() {
if (!profileId.value) return;
showLoader();
try {
const res = await http.get(
@ -396,12 +398,14 @@ async function fetchData() {
}
}
/**
* fetch รายการการพฒนารายบคคล (Individual Development Plan)
*/
async function getDevelop() {
if (!profileId.value) return;
await http
.get(config.API.developMentPlan + `/${profileId.value}`)
.then((res) => {
console.log(res.data.result);
const data = res.data.result;
rowsPlan.value = data;
})
@ -450,7 +454,6 @@ async function addEditData(editStatus: boolean = false) {
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
modal.value = true;
isEdit.value = editStatus;
if (editStatus && row) {
id.value = row.id;
resPerformForm.name = row.name;
@ -480,7 +483,6 @@ async function clickClose() {
async function clickHistory(row: ResponseObject) {
modalHistory.value = true;
filterSearch.value = "";
showLoader();
try {
const res = await http.get(
@ -1177,7 +1179,7 @@ onMounted(async () => {
<q-card style="min-width: 80%">
<DialogHeader
tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
:close="() => (modalHistory = false)"
:close="() => ((modalHistory = false), (rowsHistory = []))"
/>
<q-separator />
<q-card-section style="max-height: 60vh" class="scroll">

View file

@ -0,0 +1,619 @@
<script setup lang="ts">
import { ref, reactive, watch, computed } 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 type {
DataOptionTechnique,
ProjectYearOp,
} from "@/modules/14_KPI/interface/index/Main";
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const route = useRoute();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError } = mixin;
/**
* props
*/
const modal = defineModel<boolean>("modal", { required: true });
const id = defineModel<string>("id", { required: true });
const props = defineProps({
getAll: Function,
});
const development = ref<any[]>([]);
const reasonDevelopment70 = ref<string>("");
const reasonDevelopment20 = ref<string>("");
const reasonDevelopment10 = ref<string>("");
const checkOtherBox11 = computed<boolean>(() => {
return development.value.includes("other1");
});
const checkOtherBox12 = computed<boolean>(() => {
return development.value.includes("other2");
});
const checkOtherBox13 = computed<boolean>(() => {
return development.value.includes("other3");
});
const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
{
value: "on_the_job_training",
label: "การฝึกปฏิบัติในงาน (On the job training)",
},
{
value: "job_project_assignment",
label: "การมอบหมายงาน/โครงการ (Job/Project assignment)",
},
{
value: "job_shadowing",
label: "การติดตามเรียนรู้รูปแบบการทำงานของผู้บริหาร (Job shadowing)",
},
{
value: "job_enlargement",
label: "การมอบหมายงานเพิ่มขึ้น (Job enlargement)",
},
{
value: "internal_trainer",
label: "การเป็นวิทยากรภายในหน่วยงาน (Internal trainer)",
},
{ value: "rotation", label: "การหมุนเวียนงาน (Rotation)" },
{ value: "activity", label: "การทำกิจกรรม (Activity)" },
{ value: "site_visit", label: "การศึกษาดูงานนอกสถานที่ (Site visit)" },
{
value: "benchmarking",
label: "การแลกเปลี่ยน เทียบเคียงความรู้ ประสมการณ์ (Benchmarking)",
},
{ value: "problem_solving", label: "การแก้ปัญหา (Problem-solving)" },
{ value: "team_working", label: "การทำงานเป็นทีม (Team working)" },
{ value: "other1", label: "อื่น ๆ (ระบุ)" },
]);
const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
{ value: "coaching", label: "การสอนงาน (Coaching)" },
{ value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
{ value: "team_meeting", label: "การประชุมทีม (Team meeting)" },
{ value: "consulting", label: "การให้คำปรึกษา (Consulting)" },
{ value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
{ value: "other2", label: "อื่น ๆ (ระบุ)" },
]);
const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
{
value: "self_learning",
label: "การเรียนรู้ด้วยตนเอง แบบ online/offline (Self learning)",
},
{ value: "classroom_training", label: "การฝึกอบรม (Classroom training)" },
{
value: "in_house_training",
label: "การฝึกอบรมภายในองค์กร (In house training)",
},
{
value: "public_training",
label: "การฝึกอบรมจากองค์กรภายนอก (Public training)",
},
{
value: "e_training",
label: "การฝึกอบรมผ่าน online (e training / e learning)",
},
{ value: "meeting", label: "การประชุม (Meeting)" },
{ value: "seminar", label: "การสัมมนา (Seminar)" },
{ value: "other3", label: "อื่น ๆ (ระบุ)" },
]);
const choice = ref<string>("MANUAL");
const projectName = ref<any>("");
const projectOp = ref<ProjectYearOp[]>([]);
const projectOpMain = ref<ProjectYearOp[]>([]);
const choiceOp = ref<DataOptionTechnique[]>([
{ value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" },
{ value: "MANUAL", label: "กรอกเอง" },
]);
const emType = computed(() => {
return route.name
? route.name === "registryNewByid"
? "officer"
: route.name === "registry-employeeId"
? "temp"
: "employee"
: "";
});
const formData = reactive<{
year: number | null;
point: number | null;
name: string;
group: any[];
target: string;
isDevelopment70: boolean;
isDevelopment20: boolean;
isDevelopment10: boolean;
achievement10: string;
achievement5: string;
achievement0: string;
}>({
year: null,
name: "",
group: [],
point: 0,
target: "",
isDevelopment70: false,
isDevelopment20: false,
isDevelopment10: false,
achievement10: "มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
achievement5: "มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน",
achievement0: "ไม่ได้ดำเนินการพัฒนา",
});
function close() {
modal.value = false;
id.value = "";
formData.name = "";
formData.point = 0;
formData.group = [];
formData.target = "";
formData.isDevelopment70 = false;
formData.isDevelopment20 = false;
formData.isDevelopment10 = false;
formData.achievement10 =
"มีผลการพัฒนาและมีการดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
formData.achievement5 =
"มีผลการพัฒนาแต่ยังไม่ได้ดำเนินการตามเป้าหมายการนำไปพัฒนางาน";
formData.achievement0 = "ไม่ได้ดำเนินการพัฒนา";
choice.value = "MANUAL";
formData.year = null;
projectName.value = "";
reasonDevelopment70.value = "";
reasonDevelopment20.value = "";
reasonDevelopment10.value = "";
development.value = [];
props.getAll?.();
id.value = "";
}
const customPosition = () => ({ top: "385px", left: "410px" });
async function getDataByYear() {
if (formData.year) {
showLoader();
http
.get(config.API.developmentMain + `/done?year=${formData.year}`)
.then(async (res) => {
const data = await res.data.result.data;
projectOpMain.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
}
function getProjectDetail(val: any) {
showLoader();
http
.get(config.API.developmentMain + `/tab3_1/${val.id}`)
.then((res) => {
const data = res.data.result;
formData.name = val.projectName;
formData.group = data.group;
formData.isDevelopment70 = data.isDevelopment70;
formData.isDevelopment20 = data.isDevelopment20;
formData.isDevelopment10 = data.isDevelopment10;
development.value = data.developmentProjectTechniqueActuals;
reasonDevelopment70.value =
data.developmentProjectTechniqueActuals.includes("other1")
? data.reasonDevelopment70
: "";
reasonDevelopment20.value =
data.developmentProjectTechniqueActuals.includes("other2")
? data.reasonDevelopment20
: "";
reasonDevelopment10.value =
data.developmentProjectTechniqueActuals.includes("other3")
? data.reasonDevelopment10
: "";
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
/**
* function นหาขอมลใน option
* @param val คำคนหา
* @param update function
*/
function filterOptionFn(val: string, update: Function) {
projectName.value = "";
update(() => {
projectOp.value = projectOpMain.value.filter(
(e: any) => e.projectName.search(val) !== -1
);
});
}
watch(
() => id.value,
(i) => {
if (i) {
showLoader();
http
.get(
config.API.kpiAchievementDevelop +
`/registry/${emType.value}/${id.value}`
)
.then(async (res) => {
const data = res.data.result;
formData.year = data.selectTypeYear;
await getDataByYear();
setTimeout(() => {
choice.value = data.selectType;
projectName.value = projectOpMain.value.find(
(i: any) => i.id == data.selectTypeId
);
formData.name = data.name;
formData.group = data.group;
formData.target = data.target;
formData.isDevelopment70 = data.isDevelopment70;
formData.isDevelopment20 = data.isDevelopment20;
formData.isDevelopment10 = data.isDevelopment10;
formData.achievement10 = data.achievement10;
formData.achievement5 = data.achievement5;
formData.achievement0 = data.achievement0;
development.value = data.developmentProjects;
reasonDevelopment70.value = data.developmentProjects.includes(
"other1"
)
? data.reasonDevelopment70
: "";
reasonDevelopment20.value = data.developmentProjects.includes(
"other2"
)
? data.reasonDevelopment20
: "";
reasonDevelopment10.value = data.developmentProjects.includes(
"other3"
)
? data.reasonDevelopment10
: "";
}, 500);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
}
);
</script>
<template>
<q-dialog persistent v-model="modal">
<q-card style="min-width: 90vw">
<DialogHeader
tittle="การพัฒนารายบุคคล (Individual Development Plan)"
:close="close"
/>
<q-separator />
<q-card-section>
<div class="row q-col-gutter-sm">
<div class="col-3">
<q-select
class="inputgreen"
outlined
dense
label="ตัวเลือก"
:options="choiceOp"
emit-value
readonly
map-options
option-label="label"
option-value="value"
v-model="choice"
>
</q-select>
</div>
<div class="col-3" v-if="choice == 'PROJECT'">
<datepicker
menu-class-name="modalfix"
v-model="formData.year"
readonly
:locale="'th'"
autoApply
position="center"
year-picker
:alt-position="customPosition"
:enableTimePicker="false"
@update:model-value="getDataByYear(), (projectName = '')"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
readonly
outlined
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
class="inputgreen"
:model-value="
formData.year === null ? null : Number(formData.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<div class="col-3" v-if="choice == 'PROJECT'">
<q-select
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
class="inputgreen"
label="โครงการ/หลักสูตรการฝึกอบรม"
:options="projectOp"
option-label="projectName"
option-value="id"
map-options
hide-bottom-space
use-input
:readonly="!formData.year"
v-model="projectName"
@update:model-value="getProjectDetail(projectName)"
@filter="filterOptionFn"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไมอม
</q-item-section>
</q-item>
</template>
</q-select>
</div>
<div class="col-12">
<q-input
v-model="formData.name"
readonly
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา'}`,]"
lazy-rules
hide-bottom-space
class="inputgreen"
label="ชื่อเรื่อง / เนื้อเรื่อง / หัวข้อการพัฒนา"
>
</q-input>
</div>
<div class="col-12">
<span class="text-weight-medium">การพฒนา</span>
</div>
<div class="row q-col-gutter-md full-width">
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<span class="text-weight-medium"
>70 การลงมอปฏ (โดยผงคบบญชามอบหมาย)</span
>
<q-option-group
class="check_box q-mt-sm"
keep-color
color="primary"
dense
disable
v-model="development"
:options="projectTechniquesOp1"
type="checkbox"
/>
<div class="row q-pb-md" v-if="checkOtherBox11">
<div class="offset-4 col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
v-model="reasonDevelopment70"
dense
readonly
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<span class="text-weight-medium"
>20 การเรยนรจากผ (Coach/Mentor/Consulting)</span
>
<q-option-group
class="check_box q-mt-sm"
keep-color
color="primary"
dense
v-model="development"
disable
:options="projectTechniquesOp2"
type="checkbox"
/>
<div class="row q-pb-md" v-if="checkOtherBox12">
<div class="offset-4 col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
v-model="reasonDevelopment20"
dense
readonly
outlined
class="inputgreen"
label="กรุณาระบุ"
></q-input>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
<span class="text-weight-medium">10 การฝกอบรมอนๆ</span>
<q-option-group
class="check_box q-mt-sm"
keep-color
color="primary"
disable
dense
v-model="development"
:options="projectTechniquesOp3"
type="checkbox"
/>
<div class="row q-pb-md" v-if="checkOtherBox13">
<div class="offset-4 col-8 q-mt-sm relative-position">
<div class="other_custom_input">
<q-input
v-model="reasonDevelopment10"
dense
outlined
readonly
class="inputgreen"
label="กรุณาระบุ"
></q-input>
</div>
</div>
</div>
</div>
<!-- <q-checkbox
v-model="formData.isDevelopment70"
label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
/>
<q-checkbox
v-model="formData.isDevelopment20"
label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
/>
<q-checkbox
v-model="formData.isDevelopment10"
label="10 การฝึกอบรมอื่นๆ"
/> -->
</div>
<div class="col-12">
<q-input
label="เป้าหมายการนำไปพัฒนางาน"
v-model="formData.target"
outlined
readonly
type="textarea"
dense
class="inputgreen"
:rules="[(val:string) => !!val || `${'กรุณากรอกเป้าหมายการนำไปพัฒนางาน'}`,]"
lazy-rules
hide-bottom-space
></q-input>
</div>
<div class="col-12">
<q-card bordered>
<div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
<div class="col-4 text-center">
<span>ระดบคะแนน</span>
</div>
<div class="col-8 text-start">
<span>เกณฑการประเม</span>
</div>
</div>
<div class="row q-pa-sm">
<div class="col-4 text-center self-start text-body1">
<span>10</span>
</div>
<div class="col-8">
<q-input
class="inputgreen"
v-model="formData.achievement10"
outlined
readonly
dense
label="เกณฑ์การประเมิน"
:rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
lazy-rules
hide-bottom-space
></q-input>
</div>
</div>
<q-separator />
<div class="row q-pa-sm bg-grey-2">
<div class="col-4 text-center self-start text-body1">
<span>5</span>
</div>
<div class="col-8">
<q-input
class="inputgreen"
v-model="formData.achievement5"
outlined
readonly
dense
label="เกณฑ์การประเมิน"
:rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
lazy-rules
hide-bottom-space
></q-input>
</div>
</div>
<q-separator />
<div class="row q-pa-sm">
<div class="col-4 text-center self-start text-body1">
<span>0</span>
</div>
<div class="col-8">
<q-input
class="inputgreen"
v-model="formData.achievement0"
outlined
readonly
dense
label="เกณฑ์การประเมิน"
:rules="[(val:string) => !!val || `${'กรุณากรอกเกณฑ์การประเมิน'}`,]"
lazy-rules
hide-bottom-space
></q-input>
</div>
</div>
</q-card>
</div>
</div>
<div class="row q-pa-sm justify-center">
<span class="text-body2 text-weight-bold">ผลการพฒนา </span>
<div class="text-primary q-pl-md">
{{ formData.point }}
</div>
</div>
</q-card-section>
</q-card>
</q-dialog>
</template>
<style scoped>
:deep(.check_box .q-checkbox) {
align-items: start;
}
.other_custom_input {
position: absolute;
top: -25px;
width: 100%;
}
</style>