569 lines
17 KiB
Vue
569 lines
17 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { onMounted, ref, reactive } from "vue";
|
||
|
|
import { useQuasar } from "quasar";
|
||
|
|
|
||
|
|
import type { QTableProps } from "quasar";
|
||
|
|
|
||
|
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||
|
|
|
||
|
|
import { useCounterMixin } from "@/stores/mixin";
|
||
|
|
|
||
|
|
const $q = useQuasar();
|
||
|
|
const { showLoader, hideLoader, dialogConfirm, dialogRemove, success } =
|
||
|
|
useCounterMixin();
|
||
|
|
|
||
|
|
const columnsGroup = ref<QTableProps["columns"]>([
|
||
|
|
{
|
||
|
|
name: "groupTarget",
|
||
|
|
align: "left",
|
||
|
|
label: "กลุ่มเป้าหมาย ",
|
||
|
|
sortable: true,
|
||
|
|
field: "groupTarget",
|
||
|
|
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: "amount",
|
||
|
|
align: "left",
|
||
|
|
label: "จำนวน(คน)",
|
||
|
|
sortable: true,
|
||
|
|
field: "amount",
|
||
|
|
headerStyle: "font-size: 14px",
|
||
|
|
style: "font-size: 14px",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
const columnsRelated = ref<QTableProps["columns"]>([
|
||
|
|
{
|
||
|
|
name: "related",
|
||
|
|
align: "left",
|
||
|
|
label: "ผู้เกี่ยวข้อง ",
|
||
|
|
sortable: true,
|
||
|
|
field: "related",
|
||
|
|
headerStyle: "font-size: 14px",
|
||
|
|
style: "font-size: 14px",
|
||
|
|
},
|
||
|
|
|
||
|
|
{
|
||
|
|
name: "amount",
|
||
|
|
align: "left",
|
||
|
|
label: "จำนวน(คน)",
|
||
|
|
sortable: true,
|
||
|
|
field: "amount",
|
||
|
|
headerStyle: "font-size: 14px",
|
||
|
|
style: "font-size: 14px",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
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>(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
|
||
|
|
|
||
|
|
const modalGroupTarget = ref<boolean>(false);
|
||
|
|
const modalRelate = ref<boolean>(false);
|
||
|
|
|
||
|
|
const formGroupTarget = reactive({
|
||
|
|
groupTarget: "",
|
||
|
|
groupTargetSub: "",
|
||
|
|
position: "",
|
||
|
|
posType: "",
|
||
|
|
level: "",
|
||
|
|
type: "",
|
||
|
|
amount: null,
|
||
|
|
});
|
||
|
|
|
||
|
|
const formGroupRelate = reactive({
|
||
|
|
relate: "",
|
||
|
|
amount: null,
|
||
|
|
});
|
||
|
|
|
||
|
|
function onClickOpenDialog(type: string) {
|
||
|
|
if (type === "group") {
|
||
|
|
modalGroupTarget.value = true;
|
||
|
|
} else {
|
||
|
|
modalRelate.value = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onSubmitGroup() {
|
||
|
|
dialogConfirm($q, () => {
|
||
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||
|
|
onClickCloseDialog();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function onSubmitRelate() {
|
||
|
|
dialogConfirm($q, () => {
|
||
|
|
success($q, "บันทึกข้อมูลสำเร็จ");
|
||
|
|
onClickCloseDialog();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function onclickDelete() {
|
||
|
|
dialogRemove($q, () => {
|
||
|
|
success($q, "ลบข้อมูลสำเร็จ");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function cleanFormData() {
|
||
|
|
formGroupTarget.groupTarget = "";
|
||
|
|
formGroupTarget.groupTargetSub = "";
|
||
|
|
formGroupTarget.position = "";
|
||
|
|
formGroupTarget.posType = "";
|
||
|
|
formGroupTarget.level = "";
|
||
|
|
formGroupTarget.type = "";
|
||
|
|
formGroupTarget.amount = null;
|
||
|
|
formGroupRelate.relate = "";
|
||
|
|
formGroupRelate.amount = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function onClickCloseDialog() {
|
||
|
|
modalGroupTarget.value = false;
|
||
|
|
modalRelate.value = false;
|
||
|
|
cleanFormData();
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
console.log("เป้าหมาย");
|
||
|
|
});
|
||
|
|
</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="onClickOpenDialog('group')">
|
||
|
|
<q-item-section>กลุ่มเป้าหมาย</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item
|
||
|
|
clickable
|
||
|
|
v-close-popup
|
||
|
|
@click="onClickOpenDialog('relate')"
|
||
|
|
>
|
||
|
|
<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="columnsGroup"
|
||
|
|
:rows="rows1"
|
||
|
|
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
|
||
|
|
flat
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
icon="delete"
|
||
|
|
color="red"
|
||
|
|
@click="onclickDelete"
|
||
|
|
>
|
||
|
|
<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="rows2"
|
||
|
|
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
|
||
|
|
flat
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
icon="delete"
|
||
|
|
color="red"
|
||
|
|
@click="onclickDelete"
|
||
|
|
>
|
||
|
|
<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')">
|
||
|
|
<q-item-section>กลุ่มเป้าหมาย</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item
|
||
|
|
clickable
|
||
|
|
v-close-popup
|
||
|
|
@click="onClickOpenDialog('relate')"
|
||
|
|
>
|
||
|
|
<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="columnsGroup"
|
||
|
|
:rows="rows3"
|
||
|
|
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
|
||
|
|
flat
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
icon="delete"
|
||
|
|
color="red"
|
||
|
|
@click="onclickDelete"
|
||
|
|
>
|
||
|
|
<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="rows4"
|
||
|
|
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
|
||
|
|
flat
|
||
|
|
round
|
||
|
|
dense
|
||
|
|
icon="delete"
|
||
|
|
color="red"
|
||
|
|
@click="onclickDelete"
|
||
|
|
>
|
||
|
|
<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="เพิ่มกลุ่มเป้าหมาย" :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="options"
|
||
|
|
label="กลุ่มเป้าหมาย"
|
||
|
|
hide-bottom-space
|
||
|
|
lazy-rules
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณาเลือกกลุ่มเป้าหมาย'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-6">
|
||
|
|
<q-select
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
v-model="formGroupTarget.groupTargetSub"
|
||
|
|
:options="options"
|
||
|
|
label="กลุ่มเป้าหมายย่อย"
|
||
|
|
hide-bottom-space
|
||
|
|
lazy-rules
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณาเลือกกลุ่มเป้าหมายย่อย'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-4">
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
hide-bottom-space
|
||
|
|
v-model="formGroupTarget.position"
|
||
|
|
label="ตำแหน่ง"
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณากรอกตำแหน่ง'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-4">
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
hide-bottom-space
|
||
|
|
v-model="formGroupTarget.posType"
|
||
|
|
label="ประเภทตำแหน่ง"
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณากรอกประเภทตำแหน่ง'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-4 col-md-4">
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
hide-bottom-space
|
||
|
|
v-model="formGroupTarget.level"
|
||
|
|
label="ระดับ"
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณากรอกระดับ'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-6 col-md-8">
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
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
|
||
|
|
v-model="formGroupTarget.amount"
|
||
|
|
label="จำนวน(คน)"
|
||
|
|
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="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
|
||
|
|
v-model="formGroupRelate.relate"
|
||
|
|
:options="options"
|
||
|
|
label="ผู้เกี่ยวข้อง"
|
||
|
|
hide-bottom-space
|
||
|
|
lazy-rules
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณาเลือกผู้เกี่ยวข้อง'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-6 col-sm-12 col-md-12">
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
hide-bottom-space
|
||
|
|
v-model="formGroupRelate.amount"
|
||
|
|
label="จำนวน(คน)"
|
||
|
|
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>
|