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

เพิ่มโครงการ/หลักสูตรการฝึกอบรม => ข้อมูลเบื้องต้น,เป้าหมาย

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-04-03 17:51:00 +07:00
parent 80d48c9f1b
commit e022451d75
8 changed files with 588 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,9 +17,11 @@ import type {
import DialogHeader from "@/components/DialogHeader.vue";
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useCounterMixin } from "@/stores/mixin";
const $q = useQuasar();
const store = useDevelopmentDataStore();
const {
showLoader,
hideLoader,
@ -29,7 +31,7 @@ const {
messageError,
} = useCounterMixin();
const columnsGroup = ref<QTableProps["columns"]>([
const columnsPlannedGoals = ref<QTableProps["columns"]>([
{
name: "groupTarget",
align: "left",
@ -38,15 +40,17 @@ const columnsGroup = ref<QTableProps["columns"]>([
field: "groupTarget",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => convertNameGoals(val),
},
{
name: "type",
name: "posTypePlannedId",
align: "left",
label: "ประเภท",
sortable: true,
field: "type",
field: "posTypePlannedId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => convertTypeGoals(val),
},
{
@ -59,15 +63,50 @@ const columnsGroup = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
]);
const columnsActualGoals = ref<QTableProps["columns"]>([
{
name: "groupTarget",
align: "left",
label: "กลุ่มเป้าหมาย ",
sortable: true,
field: "groupTarget",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => convertNameGoals(val),
},
{
name: "posTypeActualId",
align: "left",
label: "ประเภท",
sortable: true,
field: "posTypeActualId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => convertTypeGoals(val),
},
{
name: "amount",
align: "left",
label: "จำนวน(คน)",
sortable: true,
field: "amount",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const columnsRelated = ref<QTableProps["columns"]>([
{
name: "related",
name: "groupTarget",
align: "left",
label: "ผู้เกี่ยวข้อง ",
sortable: true,
field: "related",
field: "groupTarget",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => convertNamePeoples(val),
},
{
@ -81,40 +120,32 @@ const columnsRelated = ref<QTableProps["columns"]>([
},
]);
const rows1 = ref<any>([
{
groupTarget: "ข้าราชการ",
type: "บริหาร",
amount: 20,
},
]);
const rows2 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
const rows3 = ref<any>([
{
groupTarget: "ข้าราชการ",
type: "บริหาร",
amount: 20,
},
]);
const rows4 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
const options = ref<any>([
// "ข้าราชการกรุงเทพมหานคร",
// "ข้าราชการกรุงเทพมหานครสามัญ",
// "เจ้าหน้าที่ดำเนิดการ",
const plannedGoals = ref<any>([]);
const plannedPeoples = ref<any>([]);
const actualGoals = ref<any>([]);
const actualPeoples = ref<any>([]);
const peoplesOp = ref<DataOption[]>([
{ id: "OPERATOR", name: "เจ้าหน้าที่ดําเนินการ" },
{ id: "LECTURER", name: "วิทยากร" },
{ id: "OBSERVER", name: "ผู้สังเกตการณ์" },
]);
const groupOp = ref<DataOption[]>([
{ id: "1", name: "ข้าราชการกรุงเทพมหานคร" },
{ id: "2", name: "บุคลากรกรุงเทพมหานคร" },
{ id: "3", name: "บุคคลภายนอก" },
{ id: "OFFICER", name: "ข้าราชการกรุงเทพมหานคร" },
{ id: "PERSONNEL", name: "บุคลากรกรุงเทพมหานคร" },
{ id: "OUTSIDERS", name: "บุคคลภายนอก" },
]);
const groupSubOp = ref<DataOption[]>([
{ id: "1", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
{ id: "2", name: "ข้าราชการครู" },
{ id: "OFFICER", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
{ id: "TEACHER", name: "ข้าราชการครู" },
{ id: "EMPLOYEE", name: "กรุงเทพมหานคร(ลูกจ้างประจำ ลูกจ้างชั่วคราว)" },
{ id: "EDUCATIONAL", name: "บุคลากรทางการศึกษากรุงเทพมหานคร" },
]);
const modalGroupTarget = ref<boolean>(false);
const modalRelate = ref<boolean>(false);
const isTarget = ref<string>("");
const formGroupTarget = reactive<FormGroupTarget>({
groupTarget: "",
@ -154,10 +185,10 @@ function fetchType() {
}
}
function onClickOpenDialog(type: string) {
function onClickOpenDialog(type: string, target: string) {
isTarget.value = target;
if (type === "group") {
modalGroupTarget.value = true;
fetchType();
} else {
modalRelate.value = true;
}
@ -165,20 +196,88 @@ function onClickOpenDialog(type: string) {
function onSubmitGroup() {
dialogConfirm($q, () => {
success($q, "บันทึกข้อมูลสำเร็จ");
onClickCloseDialog();
if (isTarget.value === "planned") {
const data = [];
data.push(formGroupTarget);
const list = data.map((e) => ({
groupTarget: e.groupTarget,
groupTargetSub: e.groupTargetSub,
position: e.position,
posTypePlannedId: e.posType,
posLevelPlannedId: e.level,
type: e.type,
amount: Number(e.amount),
}));
plannedGoals.value.push(...list);
store.formAddProject.plannedGoals = plannedGoals.value;
} else {
const data = [];
data.push(formGroupTarget);
const list = data.map((e) => ({
groupTarget: e.groupTarget,
groupTargetSub: e.groupTargetSub,
position: e.position,
posTypeActualId: e.posType,
posLevelActualId: e.level,
type: e.type,
amount: Number(e.amount),
}));
actualGoals.value.push(...list);
store.formAddProject.actualGoals = actualGoals.value;
}
setTimeout(() => {
success($q, "บันทึกข้อมูลสำเร็จ");
onClickCloseDialog();
}, 500);
});
}
function onSubmitRelate() {
dialogConfirm($q, () => {
success($q, "บันทึกข้อมูลสำเร็จ");
if (isTarget.value === "planned") {
const data = [];
data.push(formGroupRelate);
const list = data.map((e) => ({
groupTarget: e.relate,
amount: Number(e.amount),
}));
plannedPeoples.value.push(...list);
store.formAddProject.plannedPeoples = plannedPeoples.value;
} else {
const data = [];
data.push(formGroupRelate);
const list = data.map((e) => ({
groupTarget: e.relate,
amount: Number(e.amount),
}));
actualPeoples.value.push(...list);
store.formAddProject.actualPeoples = actualPeoples.value;
}
onClickCloseDialog();
});
}
function onclickDelete() {
function onclickDelete(index: number, type: string) {
dialogRemove($q, () => {
switch (type) {
case "plannedGoals":
plannedGoals.value.splice(index, 1);
break;
case "plannedPeoples":
plannedPeoples.value.splice(index, 1);
break;
case "actualGoals":
actualGoals.value.splice(index, 1);
break;
case "actualPeoples":
actualPeoples.value.splice(index, 1);
break;
default:
break;
}
success($q, "ลบข้อมูลสำเร็จ");
});
}
@ -211,8 +310,47 @@ function updatePosTypeName(id: string) {
formGroupTarget.level = "";
}
function updateGroupTarget(val: string) {
if (val === "OUTSIDERS") {
formGroupTarget.groupTargetSub = "NONE";
formGroupTarget.position = "";
formGroupTarget.posType = null;
formGroupTarget.level = null;
} else formGroupTarget.groupTargetSub = "";
}
function convertNameGoals(id: string) {
const data = groupOp.value.find((e: DataOption) => e.id === id);
return data && data?.name;
}
function convertNamePeoples(id: string) {
const data = peoplesOp.value.find((e: DataOption) => e.id === id);
return data && data?.name;
}
function convertTypeGoals(id: string) {
const data = posTypeMain.value.find((e: ResGroup) => e.id === id);
return data && data?.posTypeName;
}
onMounted(() => {
console.log("เป้าหมาย");
fetchType();
plannedGoals.value = store.formAddProject.plannedGoals
? store.formAddProject.plannedGoals
: [];
plannedPeoples.value = store.formAddProject.plannedPeoples
? store.formAddProject.plannedPeoples
: [];
actualGoals.value = store.formAddProject.actualGoals
? store.formAddProject.actualGoals
: [];
actualPeoples.value = store.formAddProject.actualPeoples
? store.formAddProject.actualPeoples
: [];
});
</script>
<template>
@ -223,13 +361,17 @@ onMounted(() => {
<q-btn flat round dense icon="add" color="primary">
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="onClickOpenDialog('group')">
<q-item
clickable
v-close-popup
@click="onClickOpenDialog('group', 'planned')"
>
<q-item-section>กลุ่มเป้าหมาย</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="onClickOpenDialog('relate')"
@click="onClickOpenDialog('relate', 'planned')"
>
<q-item-section>ผู้เกี่ยวข้อง</q-item-section>
</q-item>
@ -245,8 +387,8 @@ onMounted(() => {
<d-table
for="table"
ref="table"
:columns="columnsGroup"
:rows="rows1"
:columns="columnsPlannedGoals"
:rows="plannedGoals"
row-key="id"
flat
bordered
@ -276,7 +418,7 @@ onMounted(() => {
dense
icon="delete"
color="red"
@click="onclickDelete"
@click="onclickDelete(props.rowIndex, 'plannedGoals')"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
@ -291,7 +433,7 @@ onMounted(() => {
for="table"
ref="table"
:columns="columnsRelated"
:rows="rows2"
:rows="plannedPeoples"
row-key="id"
flat
bordered
@ -321,7 +463,7 @@ onMounted(() => {
dense
icon="delete"
color="red"
@click="onclickDelete"
@click="onclickDelete(props.rowIndex, 'plannedPeoples')"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
@ -340,13 +482,17 @@ onMounted(() => {
<q-btn flat round dense icon="add" color="primary">
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="onClickOpenDialog('group')">
<q-item
clickable
v-close-popup
@click="onClickOpenDialog('group', 'actual')"
>
<q-item-section>กลุ่มเป้าหมาย</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click="onClickOpenDialog('relate')"
@click="onClickOpenDialog('relate', 'actual')"
>
<q-item-section>ผู้เกี่ยวข้อง</q-item-section>
</q-item>
@ -362,8 +508,8 @@ onMounted(() => {
<d-table
for="table"
ref="table"
:columns="columnsGroup"
:rows="rows3"
:columns="columnsActualGoals"
:rows="actualGoals"
row-key="id"
flat
bordered
@ -393,7 +539,7 @@ onMounted(() => {
dense
icon="delete"
color="red"
@click="onclickDelete"
@click="onclickDelete(props.rowIndex, 'actualGoals')"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
@ -408,7 +554,7 @@ onMounted(() => {
for="table"
ref="table"
:columns="columnsRelated"
:rows="rows4"
:rows="actualPeoples"
row-key="id"
flat
bordered
@ -438,7 +584,7 @@ onMounted(() => {
dense
icon="delete"
color="red"
@click="onclickDelete"
@click="onclickDelete(props.rowIndex, 'actualPeoples')"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
@ -470,18 +616,26 @@ onMounted(() => {
map-options
emit-value
lazy-rules
@update:model-value="updateGroupTarget"
:rules="[
(val:string) =>
!!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
]"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div
class="col-xs-6 col-sm-6 col-md-6"
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
>
<q-select
dense
outlined
v-model="formGroupTarget.groupTargetSub"
:options="groupSubOp"
:options="
formGroupTarget.groupTarget === 'OFFICER'
? groupSubOp.slice(0, 2)
: groupSubOp.slice(2, 4)
"
label="กลุ่มเป้าหมายย่อย"
hide-bottom-space
lazy-rules
@ -495,7 +649,11 @@ onMounted(() => {
]"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div
class="col-xs-6 col-sm-4 col-md-4"
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
>
<q-input
outlined
dense
@ -508,7 +666,10 @@ onMounted(() => {
]"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div
class="col-xs-6 col-sm-4 col-md-4"
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
>
<q-select
dense
outlined
@ -529,7 +690,10 @@ onMounted(() => {
]"
/>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div
class="col-xs-6 col-sm-4 col-md-4"
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
>
<q-select
dense
outlined
@ -549,7 +713,10 @@ onMounted(() => {
]"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-8">
<div
class="col-xs-6 col-sm-6 col-md-8"
v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
>
<q-input
outlined
dense
@ -609,10 +776,14 @@ onMounted(() => {
dense
outlined
v-model="formGroupRelate.relate"
:options="options"
:options="peoplesOp"
label="ผู้เกี่ยวข้อง"
hide-bottom-space
lazy-rules
option-label="name"
option-value="id"
map-options
emit-value
:rules="[
(val:string) =>
!!val || `${'กรุณาเลือกผู้เกี่ยวข้อง'}`,