page รอ API // ui เมนู
This commit is contained in:
STW_TTTY\stwtt
parent
acdc6d19f7
commit
621f965151
8 changed files with 319 additions and 23 deletions
121
src/modules/15_development/components/FollowResult.vue
Normal file
121
src/modules/15_development/components/FollowResult.vue
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<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>
|
||||
|
|
@ -5,6 +5,8 @@ import { useRouter, useRoute } from "vue-router";
|
|||
import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
|
||||
import Target from "@/modules/15_development/components/Target.vue";
|
||||
import ProjectDetail from "@/modules/15_development/components/ProjectDetail.vue";
|
||||
import FollowResult from "@/modules/15_development/components/FollowResult.vue";
|
||||
import Other from "@/modules/15_development/components/Other.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
@ -40,6 +42,8 @@ const tab = ref<string>("BasicInfo");
|
|||
<q-tab name="BasicInfo" label="ข้อมูลเบื้องต้น" />
|
||||
<q-tab name="Target" label="เป้าหมาย" />
|
||||
<q-tab name="ProjectDetail" label="ลักษณะโครงการ" />
|
||||
<q-tab name="FollowResult" label="การติดตามการประเมินผล" />
|
||||
<q-tab name="Other" label="อื่นๆ" />
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
<div class="q-pa-sm" style="padding: 0px">
|
||||
|
|
@ -49,6 +53,8 @@ const tab = ref<string>("BasicInfo");
|
|||
</q-tab-panel>
|
||||
<q-tab-panel name="Target"> <Target /></q-tab-panel>
|
||||
<q-tab-panel name="ProjectDetail"> <ProjectDetail /> </q-tab-panel>
|
||||
<q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
|
||||
<q-tab-panel name="Other"> <Other /> </q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</div>
|
||||
</q-card>
|
||||
|
|
|
|||
121
src/modules/15_development/components/Other.vue
Normal file
121
src/modules/15_development/components/Other.vue
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue