This commit is contained in:
STW_TTTY\stwtt 2024-04-09 15:22:23 +07:00
parent cf66659b9a
commit 59aa022bab
15 changed files with 1629 additions and 6 deletions

View file

@ -0,0 +1,281 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
const modal = defineModel<boolean>("modal", { required: true });
const numpage = defineModel<number>("numpage", { required: true });
const splitterModel = ref<number>(30);
const search = ref<string>("");
const define = ref<string>("");
const formula = ref<string>("");
const listCheck = ref<number | null>();
const listTarget = ref<any>([
{
id: "ID1",
metricCode: "1กก",
indicatorName: "ตัวชี้วัด 1",
},
{
id: "ID2",
metricCode: "2กก",
indicatorName: "ตัวชี้วัด 2",
},
]);
const formDetail = reactive<any>({
oc: `สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร/กองบริหารทั่วไป/กลุ่มงานช่วยนักบริหาร`,
indicators: "1",
code: "1กก",
name: "ตัวชี้วัด 1",
target: "",
unit: "",
weight: "100",
});
const formScore = reactive<any>({
score5: "5",
score4: "4",
score3: "3",
score2: "2",
score1: "1",
});
const fieldDetailLabels = {
oc: "หน่วยงาน/ส่วนราชการ",
indicators: "ลำดับตัวชี้วัด",
code: "รหัสตัวชี้วัด",
name: "ชื่อตัวชี้วัด",
target: "ค่าเป้าหมาย",
unit: "หน่วยนับ",
weight: "น้ำหนัก (ร้อยละ)",
};
const fieldLabels = {
score5: "5",
score4: "4",
score3: "3",
score2: "2",
score1: "1",
};
function clickList(index: number, data: any) {
listCheck.value = index;
// dataList.value = data.map((i: any) => ({
// commandNo: i.commandNo,
// duty: i.duty,
// prefix: i.prefix,
// firstName: i.firstName,
// lastName: i.lastName,
// fullName:`${i.prefix}${i.firstName} ${i.lastName}`
// }));
}
/** ปิด dialog */
function closeDialog() {
modal.value = false;
search.value = ''
define.value = ''
formula.value = ''
}
/** เรียกใช้ class */
function getclass() {
return "inputgreen";
}
function onSubmit() {}
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
:tittle="
numpage == 1
? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
: 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
"
:close="closeDialog"
/>
<q-separator />
<q-card-section class="q-pa-none scroll" style="max-height: 80vh">
<q-splitter v-model="splitterModel" disable>
<template v-slot:before>
<div class="bg-grey-1 q-pa-md">
<q-input
v-model="search"
outlined
dense
label="ค้นหา"
bg-color="white"
:class="getclass()"
>
<template v-slot:append>
<q-icon v-if="search == ''" name="search" />
<q-icon
v-if="search !== ''"
name="clear"
class="cursor-pointer"
@click="search = ''"
/>
</template>
</q-input>
<q-card flat bordered class="q-mt-sm">
<div class="row q-px-md q-py-sm items-center bg-grey-1">
<div class="col-4">
<span>รหสตวช</span>
</div>
<div class="col-4">
<span>อตวช</span>
</div>
</div>
<q-separator />
<q-card-section class="q-pa-none">
<q-scroll-area
style="height: 71vh"
class="bg-white row col-12"
>
<q-list
v-for="(item, index) in listTarget"
:key="index"
bordered
separator
>
<q-item
clickable
v-ripple
:active="listCheck === index"
active-class="my-menu-link"
@click="clickList(index, item.id)"
>
<q-item-section class="q-pa-none">
<div class="row items-center" style="height: 20px">
<div class="col-4">
<span>{{ item.metricCode }}</span>
</div>
<div class="col-4">
<span>{{ item.indicatorName }}</span>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</q-card-section>
</q-card>
</div>
</template>
<template v-slot:after>
<div class="row q-pa-md q-col-gutter-md">
<div class="col-12">
<span class="text-body1 text-weight-bold"
>รายละเอยดตวช</span
>
</div>
<div class="col-8">
<q-card bordered class="full-height">
<div
v-for="(field, index) in Object.keys(fieldDetailLabels)"
:key="index + 1"
>
<div class="row q-pa-md">
<div class="col-3 text-grey-6 text-weight-medium">
{{
fieldDetailLabels[
field as keyof typeof fieldDetailLabels
]
}}
</div>
<div class="col-7">
<span>{{
formDetail[field] ? formDetail[field] : "-"
}}</span>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-4">
<q-card bordered>
<div class="bg-grey-2 row q-py-sm text-weight-bold">
<div class="col-6 text-center">ระดบคะแนน</div>
<div class="col-6 text-center">ผลสำเรจของงาน</div>
</div>
<div
v-for="(field, index) in Object.keys(fieldLabels)"
:key="index + 1"
>
<div class="row q-py-lg">
<div
class="col-6 text-center text-body1 text-weight-bold"
>
{{ fieldLabels[field as keyof typeof fieldLabels] }}
</div>
<div class="col-6 text-center">
<span>{{
formScore[field] ? formScore[field] : "-"
}}</span>
</div>
</div>
<div
class="col-12"
v-if="index !== Object.keys(fieldLabels).length - 1"
>
<q-separator />
</div>
</div>
</q-card>
</div>
<div class="col-12">
<q-input
v-model="define"
label="นิยามหรือความหมายของตัวชี้วัด"
type="textarea"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
<div class="col-12">
<q-input
v-model="formula"
label="สูตรคำนวณ"
type="textarea"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
</div>
</template>
</q-splitter>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
color="secondary"
type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped>
.my-menu-link {
background: #ebf9f7 !important;
color: #1bb19ab8 !important;
}
</style>

View file

@ -0,0 +1,122 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type { FormDataAssigned } from '@/modules/08_KPI/interface/request/index'
const modal = defineModel<boolean>("modal", { required: true });
const formData = reactive<FormDataAssigned>({
indicator:'',//
target:'',//
unit:'',//
weigth:'',// ()
definition:'',//
})
/** ปิด dialog */
function closeDialog() {
modal.value = false;
formData.indicator = ''
formData.target = ''
formData.unit = ''
formData.weigth = ''
formData.definition = ''
}
/** เรียกใช้ class */
function getclass() {
return "inputgreen";
}
function onSubmit() {}
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 50%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader
:tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
:close="closeDialog"
/>
<q-separator />
<q-card-section >
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-input
v-model="formData.indicator"
label="ชื่อตัวชี้วัด"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
<div class="col-4">
<q-input
v-model="formData.target"
label="ค่าเป้าหมาย"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
<div class="col-4">
<q-input
v-model="formData.unit"
label="หน่วยนับ"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
<div class="col-4">
<q-input
v-model="formData.weigth"
label="น้ำหนัก (ร้อยละ)"
outlined
dense
:rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
<div class="col-12">
<q-input
v-model="formData.definition"
label="นิยามหรือความหมายของตัวชี้วัด"
outlined
dense
type="textarea"
:rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
hide-bottom-space
:class="getclass()"
/>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
color="secondary"
type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped>
.my-menu-link {
background: #ebf9f7 !important;
color: #1bb19ab8 !important;
}
</style>

View file

@ -0,0 +1,282 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import DialogHeader from "@/components/DialogHeader.vue";
import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
const modal = defineModel<boolean>("modal", { required: true });
const numpage = defineModel<number>("numpage", { required: true });
const splitterModel = ref<number>(30);
const search = ref<string>("");
const define = ref<string>("");
const formula = ref<string>("");
const type = ref<string>("");
const listCheck = ref<number | null>();
const listTarget = ref<any>([
{
id: "ID1",
metricCode: "1กก",
indicatorName: "ตัวชี้วัด 1",
},
{
id: "ID2",
metricCode: "2กก",
indicatorName: "ตัวชี้วัด 2",
},
]);
const formDetail = reactive<any>({
type: "สมรรถนะหลัก",
name: "สมรรถนะ 1",
definition: "",
criteria: "",
});
const formScore = reactive<any>({
score1: "1",
score2: "2",
score3: "3",
score4: "",
score5: "5",
});
const fieldDetailLabels = {
type: "ประเภทสมรรถนะ",
name: "ชื่อสมรรถนะ",
definition: "คำจำกัดความ",
criteria: "กำหนดเกณฑ์การประเมิน",
};
const fieldLabels = {
score1: "1",
score2: "2",
score3: "3",
score4: "4",
score5: "5",
};
const competencyTypeOp = ref<DataOptions[]>([
{
id: "ID1",
name: "สมรรถนะหลัก",
},
{
id: "ID2",
name: "สมรรถนะประจำกลุ่มงาน",
},
{
id: "ID3",
name: "สมรรถนะประจำกลุ่มงาน",
},
{
id: "ID4",
name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
},
{
id: "ID5",
name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
},
{
id: "ID6",
name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
},
]);
function clickList(index: number, data: any) {
listCheck.value = index;
// dataList.value = data.map((i: any) => ({
// commandNo: i.commandNo,
// duty: i.duty,
// prefix: i.prefix,
// firstName: i.firstName,
// lastName: i.lastName,
// fullName:`${i.prefix}${i.firstName} ${i.lastName}`
// }));
}
/** ปิด dialog */
function closeDialog() {
modal.value = false;
type.value = ''
search.value = ''
}
/** เรียกใช้ class */
function getclass() {
return "inputgreen";
}
function onSubmit() {}
</script>
<template>
<q-dialog v-model="modal" persistent>
<q-card class="col-12" style="width: 80%">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" />
<q-separator />
<q-card-section class="q-pa-none scroll" style="max-height: 80vh">
<q-splitter v-model="splitterModel" disable>
<template v-slot:before>
<div class="bg-grey-1 q-pa-md q-gutter-sm">
<q-select
v-model="type"
outlined
label="ประเภทสมรรถนะ"
dense
bg-color="white"
option-label="name"
option-value="id"
:options="competencyTypeOp"
emit-value
:class="getclass()"
map-options
/>
<q-input
v-model="search"
outlined
dense
label="ค้นหา"
bg-color="white"
:class="getclass()"
>
<template v-slot:append>
<q-icon v-if="search == ''" name="search" />
<q-icon
v-if="search !== ''"
name="clear"
class="cursor-pointer"
@click="search = ''"
/>
</template>
</q-input>
<q-card flat bordered>
<div class="row q-px-md q-py-sm items-center bg-grey-1">
<div class="col-4">
<span>รหสตวช</span>
</div>
<div class="col-4">
<span>อตวช</span>
</div>
</div>
<q-separator />
<q-card-section class="q-pa-none">
<q-scroll-area
style="height: 33vh"
class="bg-white row col-12"
>
<q-list
v-for="(item, index) in listTarget"
:key="index"
bordered
separator
>
<q-item
clickable
v-ripple
:active="listCheck === index"
active-class="my-menu-link"
@click="clickList(index, item.id)"
>
<q-item-section class="q-pa-none">
<div class="row items-center" style="height: 20px">
<div class="col-4">
<span>{{ item.metricCode }}</span>
</div>
<div class="col-4">
<span>{{ item.indicatorName }}</span>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
</q-scroll-area>
</q-card-section>
</q-card>
</div>
</template>
<template v-slot:after>
<div class="row q-pa-md q-col-gutter-md">
<div class="col-12">
<span class="text-body1 text-weight-bold"
>รายละเอยดตวช</span
>
</div>
<div class="col-8">
<q-card bordered class="full-height">
<div
v-for="(field, index) in Object.keys(fieldDetailLabels)"
:key="index + 1"
>
<div class="row q-pa-md">
<div class="col-3 text-grey-6 text-weight-medium">
{{
fieldDetailLabels[
field as keyof typeof fieldDetailLabels
]
}}
</div>
<div class="col-7">
<span>{{
formDetail[field] ? formDetail[field] : "-"
}}</span>
</div>
</div>
</div>
</q-card>
</div>
<div class="col-4">
<q-card bordered>
<div class="bg-grey-2 row q-py-sm text-weight-bold">
<div class="col-6 text-center">ระดบคะแนน</div>
<div class="col-6 text-center">ผลสำเรจของงาน</div>
</div>
<div
v-for="(field, index) in Object.keys(fieldLabels)"
:key="index + 1"
>
<div class="row q-py-lg">
<div
class="col-6 text-center text-body1 text-weight-bold"
>
{{ fieldLabels[field as keyof typeof fieldLabels] }}
</div>
<div class="col-6 text-center">
<span>{{
formScore[field] ? formScore[field] : "-"
}}</span>
</div>
</div>
<div
class="col-12"
v-if="index !== Object.keys(fieldLabels).length - 1"
>
<q-separator />
</div>
</div>
</q-card>
</div>
</div>
</template>
</q-splitter>
</q-card-section>
<q-separator />
<q-card-actions align="right" class="bg-white text-teal">
<q-btn label="บันทึก" color="secondary" type="submit"
><q-tooltip>นทกขอม</q-tooltip></q-btn
>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
</template>
<style scoped>
.my-menu-link {
background: #ebf9f7 !important;
color: #1bb19ab8 !important;
}
</style>