ปรับ ui ประวัติฝึกอบรมดูงาน
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
d3d09809d6
commit
4ca5b7dbfe
3 changed files with 201 additions and 25 deletions
|
|
@ -1,12 +1,14 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted } from "vue";
|
import { ref, reactive, onMounted } from "vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
|
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import type { DataTrainingTopics } from "@/modules/15_development/interface/index/Main";
|
||||||
import type {
|
import type {
|
||||||
FormAddHistory,
|
FormAddHistory,
|
||||||
FormAddHistoryProject,
|
FormAddHistoryProject,
|
||||||
|
|
@ -55,9 +57,36 @@ const formMainProject = reactive<FormAddHistoryProject>({
|
||||||
organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
|
organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
|
||||||
});
|
});
|
||||||
|
|
||||||
function getClass() {
|
const rows = ref<DataTrainingTopics[]>([]);
|
||||||
return "inputgreen";
|
const columns = ref<QTableProps["columns"]>([
|
||||||
}
|
{
|
||||||
|
name: "topicAcademic",
|
||||||
|
align: "left",
|
||||||
|
label: "หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน",
|
||||||
|
sortable: false,
|
||||||
|
field: "topicAcademic",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "addressAcademic",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานที่ฝึกอบรม ศึกษาดูงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "addressAcademic",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "province",
|
||||||
|
align: "left",
|
||||||
|
label: "จังหวัด",
|
||||||
|
sortable: false,
|
||||||
|
field: "province",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
/** ดึงข้อมูล */
|
/** ดึงข้อมูล */
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
|
|
@ -94,6 +123,7 @@ async function fetchData() {
|
||||||
formMainProject.organizingTraining = data.org ? data.org : null;
|
formMainProject.organizingTraining = data.org ? data.org : null;
|
||||||
dateOrder.value = data.dateOrder;
|
dateOrder.value = data.dateOrder;
|
||||||
order.value = data.order;
|
order.value = data.order;
|
||||||
|
rows.value = data.academic
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
|
|
@ -123,7 +153,7 @@ onMounted(async () => {
|
||||||
class="q-mr-sm"
|
class="q-mr-sm"
|
||||||
@click="router.go(-1)"
|
@click="router.go(-1)"
|
||||||
/>
|
/>
|
||||||
<span> ประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ </span>
|
<span> ประวัติการฝึกอบรม/ดูงาน ข้าราชการกรุงเทพมหานครสามัญ </span>
|
||||||
</div>
|
</div>
|
||||||
<q-card flat bordered>
|
<q-card flat bordered>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
|
|
@ -240,6 +270,15 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row col-12">
|
<div class="row col-12">
|
||||||
|
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||||
|
หน่วยงานที่รับผิดชอบ
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-sm-12 col-md-7">
|
||||||
|
{{ formMainProject.organizingTraining ?? "-" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="row col-12">
|
||||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||||
หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
|
หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -256,7 +295,7 @@ onMounted(async () => {
|
||||||
<div class="col-12 col-sm-12 col-md-7">
|
<div class="col-12 col-sm-12 col-md-7">
|
||||||
{{ formMainProject.location ?? "-" }}
|
{{ formMainProject.location ?? "-" }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
|
|
@ -296,7 +335,7 @@ onMounted(async () => {
|
||||||
{{ formMainProject.totalTraining ?? "-" }}
|
{{ formMainProject.totalTraining ?? "-" }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row col-12">
|
<!-- <div class="row col-12">
|
||||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||||
หน่วยงานที่รับผิดชอบ
|
หน่วยงานที่รับผิดชอบ
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -304,12 +343,60 @@ onMounted(async () => {
|
||||||
<div class="col-12 col-sm-12 col-md-7">
|
<div class="col-12 col-sm-12 col-md-7">
|
||||||
{{ formMainProject.organizingTraining ?? "-" }}
|
{{ formMainProject.organizingTraining ?? "-" }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
|
<!--card หัวข้อและสถานที่ไปฝึกอบรม ศึกษาดูงาน -->
|
||||||
|
<q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
|
||||||
|
<div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
|
||||||
|
หัวข้อและสถานที่ไปฝึกอบรม ศึกษาดูงาน
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="row q-pa-md q-col-gutter-md">
|
||||||
|
<div class="col-12">
|
||||||
|
<d-table
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
row-key="id"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width> </q-th>
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<div class="table_ellipsis2">
|
||||||
|
{{ col.value ?? "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
<div class="row q-col-gutter-sm q-mt-md">
|
<div class="row q-col-gutter-sm q-mt-md">
|
||||||
<div class="col-3">
|
<div class="col-3">
|
||||||
<q-input
|
<q-input
|
||||||
|
|
@ -318,10 +405,9 @@ onMounted(async () => {
|
||||||
v-model="order"
|
v-model="order"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
:class="getClass()"
|
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
|
|
||||||
/>
|
/>
|
||||||
|
<!-- :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]" -->
|
||||||
</div>
|
</div>
|
||||||
<div class="col-3">
|
<div class="col-3">
|
||||||
<datepicker
|
<datepicker
|
||||||
|
|
@ -340,15 +426,14 @@ onMounted(async () => {
|
||||||
<template #year-overlay-value="{ value }">
|
<template #year-overlay-value="{ value }">
|
||||||
{{ parseInt(value + 543) }}
|
{{ parseInt(value + 543) }}
|
||||||
</template>
|
</template>
|
||||||
|
<!-- :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]" -->
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<q-input
|
<q-input
|
||||||
readonly
|
readonly
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
:class="getClass()"
|
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:model-value="dateOrder != null ? date2Thai(dateOrder) : null"
|
:model-value="dateOrder != null ? date2Thai(dateOrder) : null"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
|
|
||||||
label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
|
label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
<template v-slot:prepend>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,9 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, onMounted } from "vue";
|
import { ref, reactive, onMounted } from "vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
|
@ -11,9 +12,10 @@ import type {
|
||||||
FormAddHistoryEmployee,
|
FormAddHistoryEmployee,
|
||||||
FormAddHistoryProject,
|
FormAddHistoryProject,
|
||||||
} from "@/modules/15_development/interface/request/Main";
|
} from "@/modules/15_development/interface/request/Main";
|
||||||
|
import type { QTableProps } from "quasar";
|
||||||
|
import type { DataTrainingTopics } from "@/modules/15_development/interface/index/Main";
|
||||||
|
|
||||||
/** importStore*/
|
/** importStore*/
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
|
|
||||||
/** use*/
|
/** use*/
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
|
|
@ -57,10 +59,36 @@ const formMainProject = reactive<FormAddHistoryProject>({
|
||||||
organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
|
organizingTraining: "", //หน่วยงานที่รับผิดชอบจัดการอบรม
|
||||||
});
|
});
|
||||||
|
|
||||||
/** class */
|
const rows = ref<DataTrainingTopics[]>([]);
|
||||||
function getClass() {
|
const columns = ref<QTableProps["columns"]>([
|
||||||
return "inputgreen";
|
{
|
||||||
}
|
name: "topicAcademic",
|
||||||
|
align: "left",
|
||||||
|
label: "หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน",
|
||||||
|
sortable: false,
|
||||||
|
field: "topicAcademic",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "addressAcademic",
|
||||||
|
align: "left",
|
||||||
|
label: "สถานที่ฝึกอบรม ศึกษาดูงาน",
|
||||||
|
sortable: true,
|
||||||
|
field: "addressAcademic",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "province",
|
||||||
|
align: "left",
|
||||||
|
label: "จังหวัด",
|
||||||
|
sortable: false,
|
||||||
|
field: "province",
|
||||||
|
headerStyle: "font-size: 14px",
|
||||||
|
style: "font-size: 14px",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
/** ดึงข้อมูล */
|
/** ดึงข้อมูล */
|
||||||
function fetchDataDetail() {
|
function fetchDataDetail() {
|
||||||
|
|
@ -106,6 +134,7 @@ function fetchDataDetail() {
|
||||||
|
|
||||||
dateOrder.value = data.dateOrder;
|
dateOrder.value = data.dateOrder;
|
||||||
order.value = data.order;
|
order.value = data.order;
|
||||||
|
rows.value = data.academic;
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
messageError($q, e);
|
messageError($q, e);
|
||||||
|
|
@ -135,7 +164,7 @@ onMounted(() => {
|
||||||
class="q-mr-sm"
|
class="q-mr-sm"
|
||||||
@click="router.go(-1)"
|
@click="router.go(-1)"
|
||||||
/>
|
/>
|
||||||
<span> ประวัติฝึกอบรม/ดูงานลูกจ้าง </span>
|
<span> ประวัติฝึกอบรม/ดูงาน ลูกจ้าง </span>
|
||||||
</div>
|
</div>
|
||||||
<q-card flat bordered>
|
<q-card flat bordered>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
|
|
@ -243,6 +272,15 @@ onMounted(() => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row col-12">
|
<div class="row col-12">
|
||||||
|
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||||
|
หน่วยงานที่รับผิดชอบ
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-12 col-sm-12 col-md-7">
|
||||||
|
{{ formMainProject.organizingTraining ?? "-" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="row col-12">
|
||||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||||
หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
|
หัวข้อการไปฝึกอบรม/ศึกษาดูงาน
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -259,7 +297,7 @@ onMounted(() => {
|
||||||
<div class="col-12 col-sm-12 col-md-7">
|
<div class="col-12 col-sm-12 col-md-7">
|
||||||
{{ formMainProject.location ?? "-" }}
|
{{ formMainProject.location ?? "-" }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
|
|
@ -299,7 +337,7 @@ onMounted(() => {
|
||||||
{{ formMainProject.totalTraining ?? "-" }}
|
{{ formMainProject.totalTraining ?? "-" }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row col-12">
|
<!-- <div class="row col-12">
|
||||||
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
<div class="col-sm-12 col-md-5 text-grey-6 text-weight-medium">
|
||||||
หน่วยงานที่รับผิดชอบ
|
หน่วยงานที่รับผิดชอบ
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -307,12 +345,60 @@ onMounted(() => {
|
||||||
<div class="col-12 col-sm-12 col-md-7">
|
<div class="col-12 col-sm-12 col-md-7">
|
||||||
{{ formMainProject.organizingTraining ?? "-" }}
|
{{ formMainProject.organizingTraining ?? "-" }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
|
<!--card หัวข้อและสถานที่ไปฝึกอบรม ศึกษาดูงาน-->
|
||||||
|
<q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
|
||||||
|
<div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
|
||||||
|
หัวข้อและสถานที่ไปฝึกอบรม ศึกษาดูงาน
|
||||||
|
</div>
|
||||||
|
<div class="col-12"><q-separator /></div>
|
||||||
|
<div class="row q-pa-md q-col-gutter-md">
|
||||||
|
<div class="col-12">
|
||||||
|
<d-table
|
||||||
|
:columns="columns"
|
||||||
|
:rows="rows"
|
||||||
|
row-key="id"
|
||||||
|
flat
|
||||||
|
bordered
|
||||||
|
:paging="true"
|
||||||
|
dense
|
||||||
|
:rows-per-page-options="[10, 25, 50, 100]"
|
||||||
|
>
|
||||||
|
<template v-slot:header="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-th auto-width> </q-th>
|
||||||
|
<q-th
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<span class="text-weight-medium">{{ col.label }}</span>
|
||||||
|
</q-th>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
<template v-slot:body="props">
|
||||||
|
<q-tr :props="props">
|
||||||
|
<q-td
|
||||||
|
v-for="col in props.cols"
|
||||||
|
:key="col.name"
|
||||||
|
:props="props"
|
||||||
|
>
|
||||||
|
<div class="table_ellipsis2">
|
||||||
|
{{ col.value ?? "-" }}
|
||||||
|
</div>
|
||||||
|
</q-td>
|
||||||
|
</q-tr>
|
||||||
|
</template>
|
||||||
|
</d-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-card>
|
||||||
|
|
||||||
<div class="row q-col-gutter-sm q-mt-md">
|
<div class="row q-col-gutter-sm q-mt-md">
|
||||||
<div class="col-3">
|
<div class="col-3">
|
||||||
<q-input
|
<q-input
|
||||||
|
|
@ -321,7 +407,6 @@ onMounted(() => {
|
||||||
v-model="order"
|
v-model="order"
|
||||||
dense
|
dense
|
||||||
outlined
|
outlined
|
||||||
:class="getClass()"
|
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
|
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
|
||||||
/>
|
/>
|
||||||
|
|
@ -348,7 +433,6 @@ onMounted(() => {
|
||||||
readonly
|
readonly
|
||||||
outlined
|
outlined
|
||||||
dense
|
dense
|
||||||
:class="getClass()"
|
|
||||||
hide-bottom-space
|
hide-bottom-space
|
||||||
:model-value="dateOrder != null ? date2Thai(dateOrder) : null"
|
:model-value="dateOrder != null ? date2Thai(dateOrder) : null"
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
|
:rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
|
||||||
|
|
|
||||||
|
|
@ -166,6 +166,12 @@ interface DataItemsDevelopment {
|
||||||
label: string;
|
label: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface DataTrainingTopics {
|
||||||
|
topicAcademic: "";
|
||||||
|
addressAcademic: "";
|
||||||
|
province: "";
|
||||||
|
}
|
||||||
|
|
||||||
export type {
|
export type {
|
||||||
DataOption,
|
DataOption,
|
||||||
DataOptionCheckBox,
|
DataOptionCheckBox,
|
||||||
|
|
@ -181,4 +187,5 @@ export type {
|
||||||
PersonData,
|
PersonData,
|
||||||
StrategyNode,
|
StrategyNode,
|
||||||
DataItemsDevelopment,
|
DataItemsDevelopment,
|
||||||
|
DataTrainingTopics,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue