Merge branch 'nice_dev' into develop
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
commit
7f855984c3
5 changed files with 467 additions and 37 deletions
|
|
@ -86,33 +86,33 @@ function onSubmit() {
|
|||
<span class="toptitle text-dark">เพิ่มสมรรถนะ</span>
|
||||
</div>
|
||||
<q-card flat bordered>
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
v-model="formData.competencyType"
|
||||
outlined
|
||||
label="เลือกประเภทสมรรถนะ"
|
||||
dense
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="competencyTypeOp"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<FormMain v-if="formData.competencyType === 'ID1'" />
|
||||
<FormGroup v-else-if="formData.competencyType === 'ID2'" />
|
||||
<FormExecutive v-else-if="formData.competencyType === 'ID3'" />
|
||||
<FormExecutivePosition
|
||||
v-else-if="formData.competencyType === 'ID4'"
|
||||
<!-- @submit.prevent @validation-success="onSubmit" -->
|
||||
<!-- <q-form greedy> -->
|
||||
<q-card-section>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-select
|
||||
v-model="formData.competencyType"
|
||||
outlined
|
||||
label="เลือกประเภทสมรรถนะ"
|
||||
dense
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="competencyTypeOp"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<FormExecutiveLevel v-else-if="formData.competencyType === 'ID5'" />
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12">
|
||||
<FormMain v-if="formData.competencyType === 'ID1'" />
|
||||
<FormGroup v-else-if="formData.competencyType === 'ID2'" />
|
||||
<FormExecutive v-else-if="formData.competencyType === 'ID3'" />
|
||||
<FormExecutivePosition v-else-if="formData.competencyType === 'ID4'" />
|
||||
<FormExecutiveLevel v-else-if="formData.competencyType === 'ID5'" />
|
||||
|
||||
<!-- <div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.competencyName"
|
||||
dense
|
||||
|
|
@ -208,7 +208,7 @@ function onSubmit() {
|
|||
</q-card>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="col-12">
|
||||
<!-- <div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.definition"
|
||||
label="กำหนดเกณฑ์การประเมิน"
|
||||
|
|
@ -219,10 +219,9 @@ function onSubmit() {
|
|||
hide-bottom-space
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<!-- <div class="text-right q-pa-sm">
|
||||
</div>
|
||||
</q-card-section>
|
||||
<!-- <div class="text-right q-pa-sm">
|
||||
<q-btn
|
||||
dense
|
||||
unelevated
|
||||
|
|
@ -235,6 +234,6 @@ function onSubmit() {
|
|||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div> -->
|
||||
</q-form>
|
||||
<!-- </q-form> -->
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,160 @@
|
|||
div
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
const formData = reactive({
|
||||
competencyType: "",
|
||||
competencyName: "",
|
||||
definition: "",
|
||||
levels: [
|
||||
{
|
||||
level: "1",
|
||||
description: "",
|
||||
},
|
||||
],
|
||||
|
||||
evaluation: "",
|
||||
});
|
||||
|
||||
function ocClickAdd() {
|
||||
if (formData.levels.length !== 6) {
|
||||
const levelName = formData.levels.length + 1;
|
||||
const data = {
|
||||
level: levelName.toString(),
|
||||
description: "",
|
||||
};
|
||||
formData.levels.push(data);
|
||||
}
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
console.log(formData);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
สมรรถนะหลัก
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<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 formData.levels"
|
||||
key="index"
|
||||
>
|
||||
<div
|
||||
class="col-3 text-center self-center text-body1 text-weight-medium"
|
||||
>
|
||||
<span>{{ items.level }}</span>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<q-editor
|
||||
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',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.evaluation"
|
||||
label="กำหนดเกณฑ์การประเมิน"
|
||||
dense
|
||||
type="textarea"
|
||||
outlined
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12"><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>
|
||||
</template>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,275 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const $q = useQuasar();
|
||||
const { dialogConfirm, showLoader, success, hideLoader, messageError } =
|
||||
useCounterMixin();
|
||||
|
||||
const formData = reactive({
|
||||
competencyType: "",
|
||||
competencyName: "",
|
||||
definition: "",
|
||||
level: ["", "", "", "", "", ""],
|
||||
form: [
|
||||
{
|
||||
posType: "",
|
||||
posLevel: "",
|
||||
description: "",
|
||||
description2: "",
|
||||
},
|
||||
],
|
||||
evaluation: "",
|
||||
});
|
||||
|
||||
const dataLevel = ref<any>([]);
|
||||
const typeOp = ref<any>([]);
|
||||
const levelOp = ref<any>([]);
|
||||
const typeOpsMain = ref<any>([]);
|
||||
const levelOpsMain = ref<any>([]);
|
||||
|
||||
function ocClickAdd() {
|
||||
if (formData.form.length !== 6) {
|
||||
const data = {
|
||||
posType: "",
|
||||
posLevel: "",
|
||||
description: "",
|
||||
description2: "",
|
||||
};
|
||||
formData.form.push(data);
|
||||
}
|
||||
}
|
||||
|
||||
/** function เรียกรายการประเภทตำแหน่ง */
|
||||
function fetchType() {
|
||||
showLoader();
|
||||
http
|
||||
.get(config.API.orgPosType)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
dataLevel.value = data;
|
||||
typeOpsMain.value = data.map((e: any) => ({
|
||||
id: e.id,
|
||||
name: e.posTypeName,
|
||||
}));
|
||||
typeOp.value = typeOpsMain.value;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function updateSelectType(val: string, index: number) {
|
||||
const listLevel = dataLevel.value.find((e: any) => e.id === val);
|
||||
levelOpsMain.value = listLevel.posLevels.map((e: any) => ({
|
||||
id: e.id,
|
||||
name: e.posLevelName,
|
||||
}));
|
||||
levelOp.value = levelOpsMain.value;
|
||||
formData.form[index].posLevel = "";
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
dialogConfirm($q, () => {
|
||||
console.log(formData);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchType();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
สมรรถนะประจำผู้บริหารกรุงเทพมหานคร
|
||||
<q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<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-3 text-center">
|
||||
<span>ระดับตำแห่นง</span>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<span>คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div
|
||||
class="row q-pa-sm q-col-gutter-sm"
|
||||
v-for="(items, index) in formData.form"
|
||||
key="index"
|
||||
>
|
||||
<div class="col-3 text-center">
|
||||
<q-select
|
||||
v-model="formData.form[index].posType"
|
||||
outlined
|
||||
label="ประเภทตำแหน่ง"
|
||||
dense
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="typeOp"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,]"
|
||||
hide-bottom-space
|
||||
@update:model-value="
|
||||
updateSelectType(formData.form[index].posType, index)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-3 text-center">
|
||||
<q-select
|
||||
v-model="formData.form[index].posLevel"
|
||||
outlined
|
||||
label="ระดับตำแหน่ง"
|
||||
dense
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
:options="levelOp"
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`,]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<q-editor
|
||||
v-model="formData.form[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',
|
||||
}"
|
||||
/>
|
||||
<q-editor
|
||||
v-model="formData.form[index].description2"
|
||||
: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 class="col-12"><q-separator /></div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-input
|
||||
v-model="formData.evaluation"
|
||||
label="กำหนดเกณฑ์การประเมิน"
|
||||
dense
|
||||
type="textarea"
|
||||
outlined
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกกำหนดเกณฑ์การประเมิน'}`,]"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12"><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>
|
||||
</template>
|
||||
</q-form>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue