1226 lines
38 KiB
Vue
1226 lines
38 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref, reactive } from "vue";
|
|
import { useQuasar } from "quasar";
|
|
import http from "@/plugins/http";
|
|
import config from "@/app.config";
|
|
import { useRoute } from "vue-router";
|
|
import type { QTableProps } from "quasar";
|
|
import type { DataOption } from "@/modules/15_development/interface/index/Main";
|
|
import type {
|
|
FormGroupTarget,
|
|
FormGroupRelate,
|
|
FormGroupTargetPlannedGoal,
|
|
} from "@/modules/15_development/interface/request/Main";
|
|
import type {
|
|
ResGroup,
|
|
ResLevel,
|
|
ResPlannedGoals,
|
|
ResPeople,
|
|
ResActualGoals,
|
|
} from "@/modules/15_development/interface/response/Main";
|
|
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
|
|
|
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
|
|
import { useCounterMixin } from "@/stores/mixin";
|
|
const route = useRoute();
|
|
const projectId = ref<string>(route.params.id.toLocaleString());
|
|
const $q = useQuasar();
|
|
const store = useDevelopmentDataStore();
|
|
const mixin = useCounterMixin();
|
|
const {
|
|
dialogRemove,
|
|
dialogConfirm,
|
|
showLoader,
|
|
hideLoader,
|
|
messageError,
|
|
success,
|
|
date2Thai,
|
|
} = mixin;
|
|
const groupTargetData: any = reactive({
|
|
targetData: [{}],
|
|
});
|
|
const columnsPlannedGoals = 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: "posTypePlannedId",
|
|
align: "left",
|
|
label: "ตำแหน่ง",
|
|
sortable: true,
|
|
field: "posTypePlannedId",
|
|
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 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",
|
|
format: (val) => Number(val),
|
|
},
|
|
]);
|
|
|
|
const columnsRelated = ref<QTableProps["columns"]>([
|
|
{
|
|
name: "groupTarget",
|
|
align: "left",
|
|
label: "ผู้เกี่ยวข้อง ",
|
|
sortable: true,
|
|
field: "groupTarget",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
format: (val) => convertNamePeoples(val),
|
|
},
|
|
|
|
{
|
|
name: "amount",
|
|
align: "left",
|
|
label: "จำนวน(คน)",
|
|
sortable: true,
|
|
field: "amount",
|
|
headerStyle: "font-size: 14px",
|
|
style: "font-size: 14px",
|
|
format: (val) => Number(val),
|
|
},
|
|
]);
|
|
|
|
const plannedGoals = ref<ResPlannedGoals[]>([]);
|
|
const plannedPeoples = ref<ResPeople[]>([]);
|
|
const actualGoals = ref<ResActualGoals[]>([]);
|
|
const actualPeoples = ref<ResPeople[]>([]);
|
|
|
|
const peoplesOp = ref<DataOption[]>([
|
|
{ id: "OPERATOR", name: "เจ้าหน้าที่ดําเนินการ" },
|
|
{ id: "LECTURER", name: "วิทยากร" },
|
|
{ id: "OBSERVER", name: "ผู้สังเกตการณ์" },
|
|
]);
|
|
|
|
const groupOp = ref<DataOption[]>([
|
|
{ id: "OFFICER", name: "ข้าราชการกรุงเทพมหานคร" },
|
|
{ id: "PERSONNEL", name: "บุคลากรกรุงเทพมหานคร" },
|
|
{ id: "OUTSIDERS", name: "บุคคลภายนอก" },
|
|
]);
|
|
const groupSubOp = ref<DataOption[]>([
|
|
{ id: "OFFICER", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
|
|
{ id: "TEACHER", name: "ข้าราชการครู" },
|
|
{ id: "EMPLOYEE", name: "กรุงเทพมหานคร(ลูกจ้างประจำ)" },
|
|
{ id: "EMPLOYEETEMP", name: "กรุงเทพมหานคร(ลูกจ้างชั่วคราว)" },
|
|
{ id: "EDUCATIONAL", name: "บุคลากรทางการศึกษากรุงเทพมหานคร" },
|
|
]);
|
|
|
|
const isEdit = ref<boolean>(false);
|
|
const editId = ref<string>("");
|
|
const modalGroupTarget = ref<boolean>(false);
|
|
const newModalGroupTarget = ref<boolean>(false);
|
|
const modalRelate = ref<boolean>(false);
|
|
const isTarget = ref<string>("");
|
|
|
|
const formGroupTarget = reactive<FormGroupTargetPlannedGoal>({
|
|
groupTarget: "",
|
|
groupTargetSub: "",
|
|
position: "",
|
|
posType: "",
|
|
level: "",
|
|
type: null,
|
|
amount: null,
|
|
positions: [
|
|
{
|
|
position: "",
|
|
posTypePlannedId: "",
|
|
posLevelPlannedId: "",
|
|
},
|
|
],
|
|
});
|
|
|
|
const formGroupRelate = reactive<FormGroupRelate>({
|
|
relate: "",
|
|
amount: null,
|
|
});
|
|
|
|
const posTypeOp = ref<DataOption[]>([]);
|
|
const posLevelOp = ref<DataOption[]>([]);
|
|
const posTypeMain = ref<ResGroup[]>([]);
|
|
|
|
/** function เรียกข้อมูลประเภทตำแหน่ง*/
|
|
function fetchType() {
|
|
if (posTypeMain.value.length === 0) {
|
|
http
|
|
.get(config.API.orgPosType)
|
|
.then((res) => {
|
|
const data = res.data.result;
|
|
posTypeMain.value = data;
|
|
posTypeOp.value = data.map((e: ResGroup) => ({
|
|
id: e.id,
|
|
name: e.posTypeName,
|
|
}));
|
|
console.log(data);
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
});
|
|
}
|
|
}
|
|
|
|
async function fetchData(id: string) {
|
|
showLoader();
|
|
await http
|
|
.get(config.API.developmentMainTab("tab2", id))
|
|
.then(async (res) => {
|
|
const data = res.data.result;
|
|
actualGoals.value = data.actualGoals;
|
|
actualPeoples.value = data.actualPeoples;
|
|
plannedGoals.value = data.plannedGoals;
|
|
plannedPeoples.value = data.plannedPeoples;
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
|
|
function onClickOpenDialog(type: string, target: string) {
|
|
isTarget.value = target;
|
|
if (type === "group") {
|
|
if (target === "planned") {
|
|
(formGroupTarget.positions = [
|
|
{
|
|
position: "",
|
|
posTypePlannedId: "",
|
|
posLevelPlannedId: "",
|
|
},
|
|
]),
|
|
(newModalGroupTarget.value = true);
|
|
} else {
|
|
modalGroupTarget.value = true;
|
|
}
|
|
} else {
|
|
modalRelate.value = true;
|
|
}
|
|
}
|
|
|
|
async function onSubmitGroup() {
|
|
if (isTarget.value === "planned") {
|
|
await http
|
|
.put(
|
|
config.API.developmentMainTab(
|
|
isEdit.value ? "tab2_1_edit" : "tab2_1_add",
|
|
isEdit.value ? editId.value : projectId.value
|
|
),
|
|
{
|
|
groupTarget: formGroupTarget.groupTarget,
|
|
groupTargetSub: formGroupTarget.groupTargetSub,
|
|
positions: formGroupTarget.positions.map((v) => ({
|
|
position: v.position,
|
|
posTypePlannedId: v.posTypePlannedId,
|
|
posLevelPlannedId: v.posLevelPlannedId,
|
|
})),
|
|
type: formGroupTarget.type ? formGroupTarget.type : "",
|
|
amount: formGroupTarget.amount,
|
|
}
|
|
)
|
|
.then(() => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
} else {
|
|
await http
|
|
.put(
|
|
config.API.developmentMainTab(
|
|
isEdit.value ? "tab2_3_edit" : "tab2_3_add",
|
|
isEdit.value ? editId.value : projectId.value
|
|
),
|
|
{
|
|
groupTarget: formGroupTarget.groupTarget,
|
|
groupTargetSub: formGroupTarget.groupTargetSub,
|
|
position: formGroupTarget.position,
|
|
posTypeActualId: formGroupTarget.posType,
|
|
posLevelActualId: formGroupTarget.level,
|
|
type: formGroupTarget.type,
|
|
amount: formGroupTarget.amount,
|
|
}
|
|
)
|
|
.then(() => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
setTimeout(() => {
|
|
fetchData(projectId.value);
|
|
onClickCloseDialog();
|
|
}, 100);
|
|
}
|
|
|
|
async function onSubmitRelate() {
|
|
if (isTarget.value === "planned") {
|
|
await http
|
|
.put(
|
|
config.API.developmentMainTab(
|
|
isEdit.value ? "tab2_2_edit" : "tab2_2_add",
|
|
isEdit.value ? editId.value : projectId.value
|
|
),
|
|
{
|
|
groupTarget: formGroupRelate.relate,
|
|
amount: formGroupRelate.amount,
|
|
}
|
|
)
|
|
.then(() => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
} else {
|
|
await http
|
|
.put(
|
|
config.API.developmentMainTab(
|
|
isEdit.value ? "tab2_4_edit" : "tab2_4_add",
|
|
isEdit.value ? editId.value : projectId.value
|
|
),
|
|
{
|
|
groupTarget: formGroupRelate.relate,
|
|
amount: formGroupRelate.amount,
|
|
}
|
|
)
|
|
.then(() => {
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
})
|
|
.catch((err) => {
|
|
messageError($q, err);
|
|
})
|
|
.finally(() => {
|
|
hideLoader();
|
|
});
|
|
}
|
|
setTimeout(() => {
|
|
fetchData(projectId.value);
|
|
onClickCloseDialog();
|
|
}, 100);
|
|
}
|
|
|
|
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;
|
|
}
|
|
});
|
|
}
|
|
|
|
function cleanFormData() {
|
|
formGroupTarget.groupTarget = "";
|
|
formGroupTarget.groupTargetSub = "";
|
|
formGroupTarget.position = "";
|
|
formGroupTarget.posType = "";
|
|
formGroupTarget.level = "";
|
|
formGroupTarget.type = "";
|
|
formGroupTarget.amount = null;
|
|
formGroupRelate.relate = "";
|
|
formGroupRelate.amount = null;
|
|
isEdit.value = false;
|
|
}
|
|
|
|
function onClickCloseDialog() {
|
|
newModalGroupTarget.value = false;
|
|
modalGroupTarget.value = false;
|
|
groupTargetData.targetData = [{}];
|
|
modalRelate.value = false;
|
|
cleanFormData();
|
|
}
|
|
|
|
function updatePosTypeName(id: string) {
|
|
const posLevel = posTypeMain.value.find((e: ResGroup) => e.id === id);
|
|
posLevelOp.value =
|
|
posLevel?.posLevels.map((e: ResLevel) => ({
|
|
id: e.id,
|
|
name: e.posLevelName.toString(),
|
|
})) ?? [];
|
|
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;
|
|
}
|
|
|
|
const addGroupTargetData = async () => {
|
|
formGroupTarget.positions.push({
|
|
position: "",
|
|
posTypePlannedId: "",
|
|
posLevelPlannedId: "",
|
|
});
|
|
};
|
|
|
|
function deleteTargetData(index: any) {
|
|
formGroupTarget.positions.splice(index, 1);
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchType();
|
|
fetchData(projectId.value);
|
|
// 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>
|
|
<!-- CARD เป้าหมายตามแผน -->
|
|
<q-card bordered style="border: 1px solid #d6dee1">
|
|
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
|
เป้าหมายตามแผน
|
|
<q-btn flat round dense icon="add" color="primary">
|
|
<q-menu>
|
|
<q-list style="min-width: 100px">
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="
|
|
cleanFormData();
|
|
isEdit = false;
|
|
onClickOpenDialog('group', 'planned');
|
|
"
|
|
>
|
|
<q-item-section>กลุ่มเป้าหมาย</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="
|
|
isEdit = false;
|
|
onClickOpenDialog('relate', 'planned');
|
|
"
|
|
>
|
|
<q-item-section>ผู้เกี่ยวข้อง</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
</q-list>
|
|
</q-menu>
|
|
<q-tooltip>เพิ่ม</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="row col-12 q-col-gutter-md q-pa-md">
|
|
<div class="col-12">
|
|
<d-table
|
|
for="table"
|
|
ref="table"
|
|
:columns="columnsPlannedGoals"
|
|
:rows="plannedGoals"
|
|
row-key="id"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
hide-pagination
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
<span class="text-weight-medium">{{ col.label }}</span>
|
|
</q-th>
|
|
<q-th auto-width />
|
|
</q-tr>
|
|
</template>
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props" class="cursor-pointer">
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
<q-td>
|
|
<q-btn
|
|
round
|
|
flat
|
|
color="primary"
|
|
icon="mdi-pencil-outline"
|
|
size="14px"
|
|
@click="
|
|
() => {
|
|
isEdit = true;
|
|
isTarget = 'planned';
|
|
editId = props.row.id;
|
|
formGroupTarget.type = props.row.type;
|
|
formGroupTarget.groupTarget = props.row.groupTarget;
|
|
formGroupTarget.groupTargetSub = props.row.groupTargetSub;
|
|
formGroupTarget.amount = props.row.amount;
|
|
formGroupTarget.positions =
|
|
props.row.plannedGoalPositions;
|
|
|
|
newModalGroupTarget = true;
|
|
}
|
|
"
|
|
>
|
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<d-table
|
|
for="table"
|
|
ref="table"
|
|
:columns="columnsRelated"
|
|
:rows="plannedPeoples"
|
|
row-key="id"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
hide-pagination
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
<span class="text-weight-medium">{{ col.label }}</span>
|
|
</q-th>
|
|
<q-th auto-width />
|
|
</q-tr>
|
|
</template>
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props" class="cursor-pointer">
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
<q-td>
|
|
<q-btn
|
|
round
|
|
flat
|
|
color="primary"
|
|
icon="mdi-pencil-outline"
|
|
size="14px"
|
|
@click="
|
|
() => {
|
|
isEdit = true;
|
|
|
|
isTarget = 'planned';
|
|
editId = props.row.id;
|
|
formGroupRelate.relate = props.row.groupTarget;
|
|
formGroupRelate.amount = props.row.amount;
|
|
modalRelate = true;
|
|
}
|
|
"
|
|
>
|
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<!--CARD เป้าหมายตามจริง -->
|
|
<q-card bordered style="border: 1px solid #d6dee1" class="q-mt-md">
|
|
<div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
|
|
เป้าหมายตามจริง
|
|
<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', 'actual')"
|
|
>
|
|
<q-item-section>กลุ่มเป้าหมาย</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="onClickOpenDialog('relate', 'actual')"
|
|
>
|
|
<q-item-section>ผู้เกี่ยวข้อง</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
</q-list>
|
|
</q-menu>
|
|
<q-tooltip>เพิ่ม</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div class="col-12"><q-separator /></div>
|
|
<div class="row col-12 q-col-gutter-md q-pa-md">
|
|
<div class="col-12">
|
|
<d-table
|
|
for="table"
|
|
ref="table"
|
|
:columns="columnsActualGoals"
|
|
:rows="actualGoals"
|
|
row-key="id"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
hide-pagination
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
<span class="text-weight-medium">{{ col.label }}</span>
|
|
</q-th>
|
|
<q-th auto-width />
|
|
</q-tr>
|
|
</template>
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props" class="cursor-pointer">
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
<q-td>
|
|
<q-btn
|
|
round
|
|
flat
|
|
color="primary"
|
|
icon="mdi-pencil-outline"
|
|
size="14px"
|
|
@click="
|
|
() => {
|
|
isEdit = true;
|
|
isTarget = 'actual';
|
|
editId = props.row.id;
|
|
formGroupTarget.type = props.row.type;
|
|
formGroupTarget.groupTarget = props.row.groupTarget;
|
|
formGroupTarget.groupTargetSub = props.row.groupTargetSub;
|
|
formGroupTarget.amount = props.row.amount;
|
|
formGroupTarget.position = props.row.position;
|
|
formGroupTarget.posType = props.row.posTypeActualId;
|
|
formGroupTarget.level = props.row.posLevelActualId;
|
|
modalGroupTarget = true;
|
|
}
|
|
"
|
|
>
|
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<d-table
|
|
for="table"
|
|
ref="table"
|
|
:columns="columnsRelated"
|
|
:rows="actualPeoples"
|
|
row-key="id"
|
|
flat
|
|
bordered
|
|
dense
|
|
class="custom-header-table"
|
|
hide-pagination
|
|
>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
<span class="text-weight-medium">{{ col.label }}</span>
|
|
</q-th>
|
|
<q-th auto-width />
|
|
</q-tr>
|
|
</template>
|
|
<template v-slot:body="props">
|
|
<q-tr :props="props" class="cursor-pointer">
|
|
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
<div class="table_ellipsis">
|
|
{{ col.value ? col.value : "-" }}
|
|
</div>
|
|
</q-td>
|
|
<q-td>
|
|
<q-btn
|
|
round
|
|
flat
|
|
color="primary"
|
|
icon="mdi-pencil-outline"
|
|
size="14px"
|
|
@click="
|
|
() => {
|
|
isEdit = true;
|
|
isTarget = 'actual';
|
|
editId = props.row.id;
|
|
formGroupRelate.relate = props.row.groupTarget;
|
|
formGroupRelate.amount = props.row.amount;
|
|
modalRelate = true;
|
|
}
|
|
"
|
|
>
|
|
<q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
|
|
>
|
|
</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</d-table>
|
|
</div>
|
|
</div>
|
|
</q-card>
|
|
|
|
<q-dialog v-model="modalGroupTarget" persistent>
|
|
<q-card style="width: 700px">
|
|
<q-form greedy @submit.prevent @validation-success="onSubmitGroup">
|
|
<DialogHeader
|
|
:tittle="isEdit ? 'แก้ไขกลุ่มเป้าหมาย' : 'เพิ่มกลุ่มเป้าหมาย'"
|
|
:close="onClickCloseDialog"
|
|
/>
|
|
<q-separator />
|
|
<q-card-section class="q-p-sm">
|
|
<div class="row col-12 q-col-gutter-md">
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
v-model="formGroupTarget.groupTarget"
|
|
:options="groupOp"
|
|
label="กลุ่มเป้าหมาย"
|
|
hide-bottom-space
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
lazy-rules
|
|
class="inputgreen"
|
|
@update:model-value="updateGroupTarget"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-6 col-md-6"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.groupTargetSub"
|
|
:options="
|
|
formGroupTarget.groupTarget === 'OFFICER'
|
|
? groupSubOp.slice(0, 2)
|
|
: groupSubOp.slice(2, 5)
|
|
"
|
|
label="กลุ่มเป้าหมายย่อย"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="col-xs-6 col-sm-4 col-md-4"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.position"
|
|
label="ตำแหน่ง"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกตำแหน่ง'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-4 col-md-4"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
hide-bottom-space
|
|
lazy-rules
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.posType"
|
|
:options="posTypeOp"
|
|
option-label="name"
|
|
option-value="id"
|
|
emit-value
|
|
map-options
|
|
input-class="text-red"
|
|
label="ประเภทตำแหน่ง"
|
|
@update:model-value="updatePosTypeName"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-4 col-md-4"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
hide-bottom-space
|
|
lazy-rules
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.level"
|
|
:options="posLevelOp"
|
|
option-label="name"
|
|
option-value="id"
|
|
emit-value
|
|
map-options
|
|
input-class="text-red"
|
|
label="ระดับ"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกระดับ'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-6 col-md-8"
|
|
v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
|
|
>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
class="inputgreen"
|
|
hide-bottom-space
|
|
v-model="formGroupTarget.type"
|
|
label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6 col-md-4">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.amount"
|
|
label="จำนวน(คน)"
|
|
mask="#"
|
|
reverse-fill-mask
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกจำนวน(คน)'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<div class="text-right q-pa-sm">
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
label="บันทึก"
|
|
id="onSubmit"
|
|
type="submit"
|
|
color="public"
|
|
class="q-px-md"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="newModalGroupTarget" persistent>
|
|
<q-card style="width: 700px">
|
|
<q-form greedy @submit.prevent @validation-success="onSubmitGroup">
|
|
<DialogHeader
|
|
:tittle="isEdit ? 'แก้ไขกลุ่มเป้าหมาย' : 'เพิ่มกลุ่มเป้าหมาย'"
|
|
:close="onClickCloseDialog"
|
|
/>
|
|
<q-separator />
|
|
<q-card-section class="q-p-sm">
|
|
<div class="row col-12 q-col-gutter-md">
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
v-model="formGroupTarget.groupTarget"
|
|
:options="groupOp"
|
|
label="กลุ่มเป้าหมาย"
|
|
hide-bottom-space
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
lazy-rules
|
|
class="inputgreen"
|
|
@update:model-value="updateGroupTarget"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-6 col-md-6"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.groupTargetSub"
|
|
:options="
|
|
formGroupTarget.groupTarget === 'OFFICER'
|
|
? groupSubOp.slice(0, 2)
|
|
: groupSubOp.slice(2, 5)
|
|
"
|
|
label="กลุ่มเป้าหมายย่อย"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-xs-6 col-sm-6 col-md-8"
|
|
v-if="formGroupTarget.groupTarget === 'OUTSIDERS'"
|
|
>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
class="inputgreen"
|
|
hide-bottom-space
|
|
v-model="formGroupTarget.type"
|
|
label="ประเภท(กลุ่มอาชีพ คุณสมบัติ)"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกประเภท(กลุ่มอาชีพ คุณสมบัติ)'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-6 col-md-4">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="formGroupTarget.amount"
|
|
label="จำนวน(คน)"
|
|
mask="#"
|
|
reverse-fill-mask
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกจำนวน(คน)'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-12 row items-center"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<div class="text-weight-bold">เพิ่ม</div>
|
|
<q-btn
|
|
flat
|
|
round
|
|
color="primary"
|
|
icon="add"
|
|
size="14px"
|
|
@click="addGroupTargetData()"
|
|
>
|
|
<q-tooltip> เพิ่มข้อมูล </q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
<div
|
|
v-for="(items, index) in formGroupTarget.positions"
|
|
class="col-12 row q-col-gutter-md"
|
|
>
|
|
<div
|
|
class="col"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="items.position"
|
|
label="ตำแหน่ง"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกตำแหน่ง'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
hide-bottom-space
|
|
lazy-rules
|
|
class="inputgreen"
|
|
v-model="items.posTypePlannedId"
|
|
:options="posTypeOp"
|
|
option-label="name"
|
|
option-value="id"
|
|
emit-value
|
|
map-options
|
|
input-class="text-red"
|
|
label="ประเภทตำแหน่ง"
|
|
@update:model-value="updatePosTypeName"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-select
|
|
dense
|
|
outlined
|
|
hide-bottom-space
|
|
lazy-rules
|
|
class="inputgreen"
|
|
v-model="items.posLevelPlannedId"
|
|
:options="
|
|
posTypeMain.find((v) => items.posTypePlannedId === v.id)
|
|
?.posLevels || []
|
|
"
|
|
option-label="posLevelName"
|
|
option-value="id"
|
|
emit-value
|
|
map-options
|
|
input-class="text-red"
|
|
label="ระดับ"
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกระดับ'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-1 q-mt-sm"
|
|
v-if="formGroupTarget.groupTarget !== 'OUTSIDERS'"
|
|
>
|
|
<q-btn
|
|
flat
|
|
dense
|
|
size="12px"
|
|
round
|
|
color="red"
|
|
icon="mdi-delete"
|
|
@click="deleteTargetData(index)"
|
|
>
|
|
<q-tooltip>ลบข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<div class="text-right q-pa-sm">
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
label="บันทึก"
|
|
id="onSubmit"
|
|
type="submit"
|
|
color="public"
|
|
class="q-px-md"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="modalRelate" persistent>
|
|
<q-card style="width: 400px">
|
|
<q-form greedy @submit.prevent @validation-success="onSubmitRelate">
|
|
<DialogHeader tittle="เพิ่มผู้เกี่ยวข้อง" :close="onClickCloseDialog" />
|
|
<q-separator />
|
|
<q-card-section class="q-p-sm">
|
|
<div class="row col-12 q-col-gutter-md">
|
|
<div class="col-xs-6 col-sm-12 col-md-12">
|
|
<q-select
|
|
dense
|
|
outlined
|
|
class="inputgreen"
|
|
v-model="formGroupRelate.relate"
|
|
:options="peoplesOp"
|
|
label="ผู้เกี่ยวข้อง"
|
|
hide-bottom-space
|
|
lazy-rules
|
|
option-label="name"
|
|
option-value="id"
|
|
map-options
|
|
emit-value
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณาเลือกผู้เกี่ยวข้อง'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
<div class="col-xs-6 col-sm-12 col-md-12">
|
|
<q-input
|
|
outlined
|
|
dense
|
|
hide-bottom-space
|
|
class="inputgreen"
|
|
v-model="formGroupRelate.amount"
|
|
label="จำนวน(คน)"
|
|
mask="#"
|
|
reverse-fill-mask
|
|
:rules="[
|
|
(val:string) =>
|
|
!!val || `${'กรุณากรอกจำนวน(คน)'}`,
|
|
]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<div class="text-right q-pa-sm">
|
|
<q-btn
|
|
dense
|
|
unelevated
|
|
label="บันทึก"
|
|
id="onSubmit"
|
|
type="submit"
|
|
color="public"
|
|
class="q-px-md"
|
|
>
|
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped></style>
|