ปรับฟอร์มสมรรถนะ
This commit is contained in:
parent
029f261f98
commit
a2279a234a
4 changed files with 262 additions and 142 deletions
|
|
@ -18,23 +18,23 @@ const rows = ref<any>();
|
|||
|
||||
const competencyTypeOp = ref<DataOption[]>([
|
||||
{
|
||||
id: "ID1",
|
||||
id: "HEAD",
|
||||
name: "สมรรถนะหลัก",
|
||||
},
|
||||
{
|
||||
id: "ID2",
|
||||
id: "GROUP",
|
||||
name: "สมรรถนะประจำกลุ่มงาน",
|
||||
},
|
||||
{
|
||||
id: "ID3",
|
||||
id: "EXECUTIVE",
|
||||
name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
|
||||
},
|
||||
{
|
||||
id: "ID4",
|
||||
id: "DIRECTOR",
|
||||
name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
|
||||
},
|
||||
{
|
||||
id: "ID5",
|
||||
id: "INSPECTOR",
|
||||
name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
|
||||
},
|
||||
]);
|
||||
|
|
@ -64,11 +64,11 @@ const visibleColumns = ref<string[]>(["competency"]);
|
|||
async function getData() {
|
||||
const data = [
|
||||
{
|
||||
id: "ID1",
|
||||
id: "1",
|
||||
competency: "รายการสมรรถะ 1",
|
||||
},
|
||||
{
|
||||
id: "ID2",
|
||||
id: "2",
|
||||
competency: "รายการสมรรถะ 2",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@
|
|||
import { ref, reactive } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import FormMain from "@/modules/14_KPI/components/competency/Forms/01_FormMain.vue";
|
||||
import FormGroup from "@/modules/14_KPI/components/competency/Forms/02_FormGroup.vue";
|
||||
import FormExecutive from "@/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue";
|
||||
import FormExecutivePosition from "@/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue";
|
||||
import FormExecutiveLevel from "@/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue";
|
||||
import Main from "@/modules/14_KPI/components/competency/Forms/Main.vue";
|
||||
// import FormMain from "@/modules/14_KPI/components/competency/Forms/01_FormMain.vue";
|
||||
// import FormGroup from "@/modules/14_KPI/components/competency/Forms/02_FormGroup.vue";
|
||||
// import FormExecutive from "@/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue";
|
||||
// import FormExecutivePosition from "@/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue";
|
||||
// import FormExecutiveLevel from "@/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
|
||||
import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
|
||||
|
|
@ -29,23 +30,23 @@ const formData = reactive<FormCompetency>({
|
|||
|
||||
const competencyTypeOp = ref<DataOption[]>([
|
||||
{
|
||||
id: "ID1",
|
||||
id: "HEAD",
|
||||
name: "สมรรถนะหลัก",
|
||||
},
|
||||
{
|
||||
id: "ID2",
|
||||
id: "GROUP",
|
||||
name: "สมรรถนะประจำกลุ่มงาน",
|
||||
},
|
||||
{
|
||||
id: "ID3",
|
||||
id: "EXECUTIVE",
|
||||
name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
|
||||
},
|
||||
{
|
||||
id: "ID4",
|
||||
id: "DIRECTOR",
|
||||
name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
|
||||
},
|
||||
{
|
||||
id: "ID5",
|
||||
id: "INSPECTOR",
|
||||
name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
|
||||
},
|
||||
]);
|
||||
|
|
@ -108,134 +109,13 @@ function onSubmit() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<FormMain v-if="store.competencyType === 'ID1'" />
|
||||
<Main />
|
||||
<!-- <FormMain v-if="store.competencyType === 'ID1'" />
|
||||
<FormGroup v-else-if="store.competencyType === 'ID2'" />
|
||||
<FormExecutive v-else-if="store.competencyType === 'ID3'" />
|
||||
<FormExecutivePosition v-else-if="store.competencyType === 'ID4'" />
|
||||
<FormExecutiveLevel v-else-if="store.competencyType === 'ID5'" />
|
||||
|
||||
<!-- <div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.competencyName"
|
||||
dense
|
||||
outlined
|
||||
label="ชื่อสมรรถนะ"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.definition"
|
||||
label="คำจำกัดความ"
|
||||
dense
|
||||
type="textarea"
|
||||
outlined
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกคำจำกัดความ'}`,]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="bg-grey-4">
|
||||
<div
|
||||
class="row items-center text-dark text-body2 text-weight-medium"
|
||||
>
|
||||
<div class="col-3">
|
||||
<div class="row items-center">
|
||||
<div class="col-1">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="ocClickAdd"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col-11 text-center">
|
||||
<span>ระดับสมรรถนะ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<span>คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div
|
||||
class="row q-pa-sm"
|
||||
v-for="(items, index) in itemsFormCard"
|
||||
key="index"
|
||||
>
|
||||
<div
|
||||
class="col-3 text-center self-center text-body1 text-weight-medium"
|
||||
>
|
||||
<span>{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<q-editor
|
||||
v-model="formData.level_1[index]"
|
||||
:dense="$q.screen.lt.md"
|
||||
min-height="5rem"
|
||||
:toolbar="[
|
||||
[
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'underline',
|
||||
'subscript',
|
||||
'superscript',
|
||||
],
|
||||
|
||||
['unordered', 'ordered'],
|
||||
]"
|
||||
:fonts="{
|
||||
arial: 'Arial',
|
||||
arial_black: 'Arial Black',
|
||||
comic_sans: 'Comic Sans MS',
|
||||
courier_new: 'Courier New',
|
||||
impact: 'Impact',
|
||||
lucida_grande: 'Lucida Grande',
|
||||
times_new_roman: 'Times New Roman',
|
||||
verdana: 'Verdana',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.definition"
|
||||
label="กำหนดเกณฑ์การประเมิน"
|
||||
dense
|
||||
type="textarea"
|
||||
outlined
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div> -->
|
||||
<FormExecutiveLevel v-else-if="store.competencyType === 'ID5'" /> -->
|
||||
</div>
|
||||
</q-card-section>
|
||||
<!-- <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>
|
||||
</template>
|
||||
|
|
|
|||
240
src/modules/14_KPI/components/competency/Forms/Main.vue
Normal file
240
src/modules/14_KPI/components/competency/Forms/Main.vue
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
div
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { dialogConfirm, showLoader, hideLoader, success, messageError } = mixin;
|
||||
const router = useRouter();
|
||||
const store = useKPIDataStore();
|
||||
|
||||
const formData = reactive({
|
||||
competencyType: "",
|
||||
competencyName: "",
|
||||
definition: "",
|
||||
levels: [
|
||||
{
|
||||
level: "1",
|
||||
description: "",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
function ocClickAdd() {
|
||||
// if (formData.levels.length !== 6) {
|
||||
const levelName = formData.levels.length + 1;
|
||||
const data = {
|
||||
level: levelName.toString(),
|
||||
description: "",
|
||||
};
|
||||
formData.levels.push(data);
|
||||
formData.levels[formData.levels.length].level = levelName.toString();
|
||||
// }
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
const body = {
|
||||
competencyType: store.competencyType,
|
||||
competencyName: formData.competencyName,
|
||||
definition: formData.definition,
|
||||
levels: formData.levels,
|
||||
};
|
||||
// showLoader()
|
||||
// http
|
||||
// .put(config.API.???,body)
|
||||
// .then((res)=>{
|
||||
// success($q,'บันทึกสำเร็จ')
|
||||
// router.push(`/KPI-competency`)
|
||||
// }).catch((e)=>{
|
||||
// messageError($q,e)
|
||||
// }).finally(()=>{
|
||||
// hideLoader()
|
||||
// })
|
||||
console.log(body);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.competencyName"
|
||||
dense
|
||||
outlined
|
||||
label="ชื่อสมรรถนะ"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<q-card-section class="col-12 q-px-none">
|
||||
<div>
|
||||
<q-field
|
||||
class="q_field_p_none"
|
||||
ref="fieldRef"
|
||||
v-model="formData.definition"
|
||||
label-slot
|
||||
borderless
|
||||
:rules="[(val) => !!val || 'กรุณากรอกคำจำกัดความสมรรถนะ']"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #control>
|
||||
<q-editor
|
||||
class="full-width"
|
||||
v-model="formData.definition"
|
||||
:dense="$q.screen.lt.md"
|
||||
min-height="7rem"
|
||||
placeholder="คำจำกัดความสมรรถนะ"
|
||||
:toolbar="[
|
||||
[
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'underline',
|
||||
'subscript',
|
||||
'superscript',
|
||||
],
|
||||
|
||||
['unordered', 'ordered'],
|
||||
]"
|
||||
:fonts="{
|
||||
arial: 'Arial',
|
||||
arial_black: 'Arial Black',
|
||||
comic_sans: 'Comic Sans MS',
|
||||
courier_new: 'Courier New',
|
||||
impact: 'Impact',
|
||||
lucida_grande: 'Lucida Grande',
|
||||
times_new_roman: 'Times New Roman',
|
||||
verdana: 'Verdana',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<div class="col-12">
|
||||
<q-card flat bordered>
|
||||
<q-card-section class="bg-grey-4">
|
||||
<div
|
||||
class="row items-center text-dark text-body2 text-weight-medium"
|
||||
>
|
||||
<div class="col-3">
|
||||
<div class="row items-center">
|
||||
<div class="col-1">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
color="primary"
|
||||
icon="add"
|
||||
@click="ocClickAdd"
|
||||
>
|
||||
<q-tooltip>เพิ่ม</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col-11 text-center">
|
||||
<span>ระดับสมรรถนะ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<span>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div
|
||||
class="row q-pa-sm"
|
||||
v-for="(items, index) in formData.levels"
|
||||
key="index"
|
||||
>
|
||||
<div class="col-3 align-center q-pr-lg">
|
||||
<q-input
|
||||
:readonly="
|
||||
store.competencyType === 'HEAD' ||
|
||||
store.competencyType === 'GROUP'
|
||||
"
|
||||
v-model="formData.levels[index].level"
|
||||
dense
|
||||
outlined
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกระดับสมรรถนะ'}`,]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<q-field
|
||||
class="q_field_p_none"
|
||||
ref="fieldRef"
|
||||
v-model="formData.levels[index].description"
|
||||
label-slot
|
||||
borderless
|
||||
:rules="[
|
||||
(val) =>
|
||||
!!val || 'กรุณากรอกพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย',
|
||||
]"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #control>
|
||||
<q-editor
|
||||
class="full-width"
|
||||
v-model="formData.levels[index].description"
|
||||
:dense="$q.screen.lt.md"
|
||||
min-height="5rem"
|
||||
:toolbar="[
|
||||
[
|
||||
'bold',
|
||||
'italic',
|
||||
'strike',
|
||||
'underline',
|
||||
'subscript',
|
||||
'superscript',
|
||||
],
|
||||
|
||||
['unordered', 'ordered'],
|
||||
]"
|
||||
:fonts="{
|
||||
arial: 'Arial',
|
||||
arial_black: 'Arial Black',
|
||||
comic_sans: 'Comic Sans MS',
|
||||
courier_new: 'Courier New',
|
||||
impact: 'Impact',
|
||||
lucida_grande: 'Lucida Grande',
|
||||
times_new_roman: 'Times New Roman',
|
||||
verdana: 'Verdana',
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12 q-my-sm"><q-separator /></div>
|
||||
<div class="col-12 row justify-end">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
label="บันทึก"
|
||||
color="public"
|
||||
class="q-px-md"
|
||||
type="submit"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -3,7 +3,7 @@ import { ref } from "vue";
|
|||
|
||||
// store
|
||||
export const useKPIDataStore = defineStore("KPIDataStore", () => {
|
||||
const competencyType = ref<string>("ID1");
|
||||
const competencyType = ref<string>("HEAD");
|
||||
|
||||
return { competencyType };
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue