122 lines
3.3 KiB
Vue
122 lines
3.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { onMounted, reactive, ref } from "vue";
|
||
|
|
import { useQuasar } from "quasar";
|
||
|
|
|
||
|
|
import type { FormFollowResult } from "@/modules/15_development/interface/request/Main";
|
||
|
|
import type { DataOption } from "@/modules/15_development/interface/index/Main";
|
||
|
|
|
||
|
|
import { useCounterMixin } from "@/stores/mixin";
|
||
|
|
|
||
|
|
const $q = useQuasar();
|
||
|
|
const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
|
||
|
|
|
||
|
|
const formData = reactive<FormFollowResult>({
|
||
|
|
metricType: "",
|
||
|
|
indicators: "",
|
||
|
|
target: "",
|
||
|
|
calculation: "",
|
||
|
|
});
|
||
|
|
|
||
|
|
const metricTypeOp = ref<DataOption[]>([
|
||
|
|
{
|
||
|
|
id: "id1",
|
||
|
|
name: "name1",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "id2",
|
||
|
|
name: "name2",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "id3",
|
||
|
|
name: "name3",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
const options = ref<any>([
|
||
|
|
"สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
|
||
|
|
"สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
|
||
|
|
]);
|
||
|
|
function onSubmit() {
|
||
|
|
dialogConfirm($q, () => {});
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
console.log("ข้อมูลเบื้องต้น");
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<q-form greedy @submit.prevent @validation-success="onSubmit">
|
||
|
|
<div class="row q-pa-md q-col-gutter-sm">
|
||
|
|
<div class="col-12 col-sm-6 col-md-4">
|
||
|
|
<q-select
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
label="ประเภทตัวชี้วัด"
|
||
|
|
v-model="formData.metricType"
|
||
|
|
:options="metricTypeOp"
|
||
|
|
option-label="name"
|
||
|
|
option-value="id"
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณากรอกประเภทตัวชี้วัด'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 col-sm-6 col-md-4">
|
||
|
|
<q-input
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
label="ตัวชี้วัด"
|
||
|
|
v-model="formData.indicators"
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณากรอกตัวชี้วัด'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 col-sm-6 col-md-4">
|
||
|
|
<q-input
|
||
|
|
dense
|
||
|
|
outlined
|
||
|
|
label="เป้าหมาย"
|
||
|
|
v-model="formData.target"
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณากรอกเป้าหมาย'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col-12">
|
||
|
|
<q-input
|
||
|
|
outlined
|
||
|
|
dense
|
||
|
|
v-model="formData.calculation"
|
||
|
|
label="วิธีการคำนวณ/เครื่องมือ"
|
||
|
|
type="textarea"
|
||
|
|
:rules="[
|
||
|
|
(val:string) =>
|
||
|
|
!!val || `${'กรุณากรอกวิธีการคำนวณ/เครื่องมือ'}`,
|
||
|
|
]"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|