UI สมรรถนะ 04,05
This commit is contained in:
oat_dev
parent
3a974e84cb
commit
e0a7c8e2be
2 changed files with 382 additions and 8 deletions
|
|
@ -1,5 +1,211 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mode = ref<string>("table");
|
||||||
|
const {
|
||||||
|
dialogRemove,
|
||||||
|
dialogConfirm,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
messageError,
|
||||||
|
success,
|
||||||
|
date2Thai,
|
||||||
|
} = mixin;
|
||||||
|
const L1Editor = ref<string>("");
|
||||||
|
const competencyName = ref<string>("");
|
||||||
|
async function onSubmit() {
|
||||||
|
dialogConfirm($q, async () => {});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="full-width">
|
||||||
สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต
|
<q-form @submit.prevent greedy @validation-success="onSubmit()">
|
||||||
</div>
|
<div class="col-12">
|
||||||
</template>
|
<q-input outlined v-model="competencyName" dense label="ชื่อสมรรถนะ" />
|
||||||
|
</div>
|
||||||
|
<q-card-section class="col-12 q-px-none">
|
||||||
|
<div>
|
||||||
|
<q-editor
|
||||||
|
v-model="L1Editor"
|
||||||
|
: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',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-card flat bordered>
|
||||||
|
<q-card-section class="bg-grey-4 q-py-sm">
|
||||||
|
<div class="row text-dark text-body2 text-weight-medium">
|
||||||
|
<div class="col-6 q-pl-xl">ระบบตำแหน่ง</div>
|
||||||
|
<div class="col-6">
|
||||||
|
คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<div class="row items-center">
|
||||||
|
<q-card-section class="q-pa-none q-pl-xl col-6">
|
||||||
|
<span class="text-dark text-subtitle1 text-weight-medium">
|
||||||
|
L1 ระดับ หัวหน้าฝ่ายในสังกัด
|
||||||
|
</span>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section class="q-pa-none col-6">
|
||||||
|
<div class="q-py-md q-mr-md">
|
||||||
|
<q-editor
|
||||||
|
v-model="L1Editor"
|
||||||
|
: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>
|
||||||
|
</q-card-section>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<q-card-section class="q-pa-none q-pl-xl col-6">
|
||||||
|
<span class="text-dark text-subtitle1 text-weight-medium">
|
||||||
|
L2 ระดับ ผู้ช่วยผู้อำนวยการเขต
|
||||||
|
</span>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section class="q-pa-none col-6">
|
||||||
|
<div class="q-py-md q-mr-md">
|
||||||
|
<q-editor
|
||||||
|
v-model="L1Editor"
|
||||||
|
: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>
|
||||||
|
</q-card-section>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<q-card-section class="q-pa-none q-pl-xl col-6">
|
||||||
|
<span class="text-dark text-subtitle1 text-weight-medium">
|
||||||
|
L3 ระดับ ผู้อำนวยการเขต
|
||||||
|
</span>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section class="q-pa-none col-6">
|
||||||
|
<div class="q-py-md q-mr-md">
|
||||||
|
<q-editor
|
||||||
|
v-model="L1Editor"
|
||||||
|
: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>
|
||||||
|
</q-card-section>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
<q-separator color="grey-4" />
|
||||||
|
<q-toolbar class="fit row wrap justify-end items-start content-start">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
|
color="public"
|
||||||
|
class="q-px-md"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-toolbar>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,173 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useQuasar } from "quasar";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
import http from "@/plugins/http";
|
||||||
|
import config from "@/app.config";
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const mixin = useCounterMixin();
|
||||||
|
const $q = useQuasar();
|
||||||
|
const mode = ref<string>("table");
|
||||||
|
const {
|
||||||
|
dialogRemove,
|
||||||
|
dialogConfirm,
|
||||||
|
showLoader,
|
||||||
|
hideLoader,
|
||||||
|
messageError,
|
||||||
|
success,
|
||||||
|
date2Thai,
|
||||||
|
} = mixin;
|
||||||
|
const L1Editor = ref<string>("");
|
||||||
|
const competencyName = ref<string>("");
|
||||||
|
async function onSubmit() {
|
||||||
|
dialogConfirm($q, async () => {});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="full-width">
|
||||||
สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ
|
<q-form @submit.prevent greedy @validation-success="onSubmit()">
|
||||||
</div>
|
<div class="col-12">
|
||||||
</template>
|
<q-input outlined v-model="competencyName" dense label="ชื่อสมรรถนะ" />
|
||||||
|
</div>
|
||||||
|
<q-card-section class="col-12 q-px-none">
|
||||||
|
<div>
|
||||||
|
<q-editor
|
||||||
|
v-model="L1Editor"
|
||||||
|
: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',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<div class="col-12">
|
||||||
|
<q-card flat bordered>
|
||||||
|
<q-card-section class="bg-grey-4 q-py-sm">
|
||||||
|
<div class="row text-dark text-body2 text-weight-medium">
|
||||||
|
<div class="col-6 q-pl-xl">ระบบตำแหน่ง</div>
|
||||||
|
<div class="col-6">
|
||||||
|
คำอธิบายระดับ/พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card-section>
|
||||||
|
<div class="row items-center">
|
||||||
|
<q-card-section class="q-pa-none q-pl-xl col-6">
|
||||||
|
<span class="text-dark text-subtitle1 text-weight-medium">
|
||||||
|
L1 ประเภทอำนวยการ ระดับสูง
|
||||||
|
</span>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section class="q-pa-none col-6">
|
||||||
|
<div class="q-py-md q-mr-md">
|
||||||
|
<q-editor
|
||||||
|
v-model="L1Editor"
|
||||||
|
: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>
|
||||||
|
</q-card-section>
|
||||||
|
</div>
|
||||||
|
<div class="row items-center">
|
||||||
|
<q-card-section class="q-pa-none q-pl-xl col-6">
|
||||||
|
<span class="text-dark text-subtitle1 text-weight-medium">
|
||||||
|
L2 ประเภทบริหาร ระดับสูง
|
||||||
|
</span>
|
||||||
|
</q-card-section>
|
||||||
|
<q-card-section class="q-pa-none col-6">
|
||||||
|
<div class="q-py-md q-mr-md">
|
||||||
|
<q-editor
|
||||||
|
v-model="L1Editor"
|
||||||
|
: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>
|
||||||
|
</q-card-section>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
<q-separator color="grey-4" />
|
||||||
|
<q-toolbar class="fit row wrap justify-end items-start content-start">
|
||||||
|
<q-btn
|
||||||
|
dense
|
||||||
|
unelevated
|
||||||
|
label="บันทึก"
|
||||||
|
id="onSubmit"
|
||||||
|
type="submit"
|
||||||
|
color="public"
|
||||||
|
class="q-px-md"
|
||||||
|
>
|
||||||
|
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||||
|
</q-btn>
|
||||||
|
</q-toolbar>
|
||||||
|
</div>
|
||||||
|
</q-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue