รายละเอียดงานที่ได้รับมอบหมาย (ส่วนนึง)
This commit is contained in:
STW_TTTY\stwtt
parent
a05b234339
commit
244524c0ca
27 changed files with 5092 additions and 8 deletions
41
src/modules/11_probation/pages/addPage.vue
Normal file
41
src/modules/11_probation/pages/addPage.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
/** component */
|
||||
import Assign from '@/modules/11_probation/component/01_Assign.vue'
|
||||
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle text-white col-12 row items-center no-wrap">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
<div>เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-card class="q-pa-md">
|
||||
<Assign/>
|
||||
</q-card>
|
||||
|
||||
</template>
|
||||
<style scoped>
|
||||
.mobileClass {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
294
src/modules/11_probation/pages/detailPage.vue
Normal file
294
src/modules/11_probation/pages/detailPage.vue
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useProbationStore } from "@/modules/11_probation/store/probation";
|
||||
|
||||
import Assign from "@/modules/11_probation/component/01_Assign.vue";
|
||||
import RecordCareker from "@/modules/11_probation/component/02_RecordCareker.vue";
|
||||
import RecordCommander from "@/modules/11_probation/component/03_RecordCommander.vue";
|
||||
import EvaluateCommander from "@/modules/11_probation/component/04_EvaluateCommander.vue";
|
||||
import EvaluateChairman from "@/modules/11_probation/component/05_EvaluateChairman.vue";
|
||||
import EvaluateResult from "@/modules/11_probation/component/06_EvaluateResult.vue";
|
||||
import EvaluateReport from "@/modules/11_probation/component/07_EvaluateReport.vue";
|
||||
import SurveyComment from "@/modules/11_probation/component/08_SurveyComment.vue";
|
||||
|
||||
const drawer = ref<boolean>(true);
|
||||
const activeTab = ref<string>("tab1");
|
||||
const store = useProbationStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const id = ref<string>(route.params.id as string)
|
||||
const profileId = ref<string>(route.params.profileId as string)
|
||||
|
||||
/**
|
||||
* เปลี่ยน tab เมนู
|
||||
* @param tab กำหนด tab
|
||||
*/
|
||||
function changeTab(tab: string) {
|
||||
store.mainTab = tab;
|
||||
activeTab.value = store.mainTab;
|
||||
}
|
||||
|
||||
function onMobile(type: string) {
|
||||
router.push(`/probation/${type}/${profileId.value}/${id.value}`);
|
||||
}
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="col-xs-12 col-sm-12 col-md-11">
|
||||
<div class="toptitle text-white col-12 row items-center">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
<div>การทดลองปฏิบัติหน้าที่ราชการ</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-card bordered :class='!$q.screen.gt.xs ? `borderRadius`:``'>
|
||||
<q-layout
|
||||
v-if="$q.screen.gt.xs"
|
||||
view="hHh Lpr lff"
|
||||
container
|
||||
class="shadow-2 rounded-borders page-relative"
|
||||
style="height: 82vh"
|
||||
>
|
||||
<q-header class="bg-grey-1"> </q-header>
|
||||
<q-drawer
|
||||
v-model="drawer"
|
||||
show-if-above
|
||||
:width="150"
|
||||
:breakpoint="500"
|
||||
class="bg-grey-1"
|
||||
bordered
|
||||
>
|
||||
<q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
|
||||
<q-list class="text-grey-9">
|
||||
<q-item
|
||||
active-class="text-primary bg-teal-1 text-weight-medium"
|
||||
clickable
|
||||
class="q-py-sm"
|
||||
dense
|
||||
v-ripple
|
||||
:active="activeTab == 'tab1'"
|
||||
@click="changeTab('tab1')"
|
||||
>
|
||||
<q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
dense
|
||||
class="q-py-sm"
|
||||
active-class="text-primary bg-teal-1 text-weight-medium"
|
||||
clickable
|
||||
v-ripple
|
||||
:active="activeTab == 'tab2'"
|
||||
@click="changeTab('tab2')"
|
||||
>
|
||||
<q-item-section>
|
||||
แบบบันทึกผล
|
||||
<br />
|
||||
<div class="text-caption text-grey-7">(ผู้ดูแล)</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
dense
|
||||
class="q-py-sm"
|
||||
active-class="text-primary bg-teal-1 text-weight-medium"
|
||||
clickable
|
||||
v-ripple
|
||||
:active="activeTab == 'tab3'"
|
||||
@click="changeTab('tab3')"
|
||||
>
|
||||
<q-item-section>
|
||||
แบบบันทึกผล
|
||||
<br />
|
||||
<div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
active-class="text-primary bg-teal-1 text-weight-medium"
|
||||
clickable
|
||||
class="q-py-sm"
|
||||
dense
|
||||
v-ripple
|
||||
:active="activeTab == 'tab4'"
|
||||
@click="changeTab('tab4')"
|
||||
>
|
||||
<q-item-section>
|
||||
แบบประเมินผล<br />
|
||||
<div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
active-class="text-primary bg-teal-1 text-weight-medium"
|
||||
clickable
|
||||
class="q-py-sm"
|
||||
dense
|
||||
v-ripple
|
||||
:active="activeTab == 'tab5'"
|
||||
@click="changeTab('tab5')"
|
||||
>
|
||||
<q-item-section>
|
||||
แบบประเมินผล<br />
|
||||
<div class="text-caption text-grey-7">(คณะกรรมการ)</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
active-class="text-primary bg-teal-1 text-weight-medium"
|
||||
clickable
|
||||
class="q-py-sm"
|
||||
dense
|
||||
v-ripple
|
||||
:active="activeTab == 'tab6'"
|
||||
@click="changeTab('tab6')"
|
||||
>
|
||||
<q-item-section> แบบรายงาน<br />การประเมินฯ </q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
active-class="text-primary bg-teal-1 text-weight-medium"
|
||||
clickable
|
||||
class="q-py-sm"
|
||||
dense
|
||||
v-ripple
|
||||
:active="activeTab == 'tab7'"
|
||||
@click="changeTab('tab7')"
|
||||
>
|
||||
<q-item-section> ผลการประเมินการ ฯ </q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
active-class="text-primary bg-teal-1 text-weight-medium"
|
||||
clickable
|
||||
class="q-py-sm"
|
||||
dense
|
||||
v-ripple
|
||||
:active="activeTab == 'tab8'"
|
||||
@click="changeTab('tab8')"
|
||||
>
|
||||
<q-item-section> แบบสํารวจ<br />ความคิดเห็น </q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<q-page-container>
|
||||
<q-layout view="hHh Lpr lFf" container style="height: 82vh">
|
||||
<q-tab-panels
|
||||
v-model="activeTab"
|
||||
animated
|
||||
class="shadow-2 rounded-borders"
|
||||
vertical
|
||||
>
|
||||
<q-tab-panel name="tab1">
|
||||
<Assign />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="tab2">
|
||||
<RecordCareker />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="tab3">
|
||||
<RecordCommander />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="tab4">
|
||||
<EvaluateCommander />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="tab5">
|
||||
<EvaluateChairman />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="tab6">
|
||||
<EvaluateResult />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="tab7">
|
||||
<EvaluateReport />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="tab8">
|
||||
<SurveyComment />
|
||||
</q-tab-panel>
|
||||
|
||||
</q-tab-panels>
|
||||
</q-layout>
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
<q-list v-else separator>
|
||||
<q-item clickable v-ripple @click="onMobile('assign-work')" style="border-radius: 20px 20px 0 0;">
|
||||
<q-item-section>แบบมอบหมายงาน ฯ</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple @click="onMobile('record-careker')">
|
||||
<q-item-section>
|
||||
<q-item-label>แบบบันทึกผล</q-item-label>
|
||||
<q-item-label class="text-grey-6">(ผู้ดูแล)</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple @click="onMobile('record-commander')">
|
||||
<q-item-section>
|
||||
<q-item-label>แบบบันทึกผล</q-item-label>
|
||||
<q-item-label class="text-grey-6">(ผู้บังคับบัญชา)</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple @click="onMobile('evaluate-commander')">
|
||||
<q-item-section>
|
||||
<q-item-label>แบบประเมินผล</q-item-label>
|
||||
<q-item-label class="text-grey-6">(ผู้บังคับบัญชา)</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple @click="onMobile('evaluate-chairman')">
|
||||
<q-item-section>
|
||||
<q-item-label>แบบประเมินผล</q-item-label>
|
||||
<q-item-label class="text-grey-6">(คณะกรรมการ)</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple @click="onMobile('evaluate-result')">
|
||||
<q-item-section>แบบรายงานการประเมิน ฯ</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple @click="onMobile('evaluate-report')">
|
||||
<q-item-section>ผลการประเมินการ ฯ</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple @click="onMobile('survey-comment')" style="border-radius: 0 0 20px 20px;">
|
||||
<q-item-section>แบบสํารวจความคิดเห็น</q-item-section>
|
||||
<q-item-section avatar>
|
||||
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</template>
|
||||
<style scoped>
|
||||
.text_left .q-tabs__content .q-tab {
|
||||
justify-content: start;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.borderRadius{
|
||||
border-radius: 20px!important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue