hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Merge branch 'develop' of github.com:Frappet/bma-ehr-frontend into develop

Browse source
This commit is contained in:
Kittapath 2023-11-10 16:25:19 +07:00
commit eb80e5e267
14 changed files with 423 additions and 224 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/modules/11_discipline/components/4_Order/MainPage.vue
View file

@ -3,23 +3,15 @@ import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import type { DataList, DataListRes } from "../../interface/response/order";
// importStroe
import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
// importComponents
import tableOrder from "@/modules/11_discipline/components/4_Order/TableOrder.vue";
const router = useRouter();
const OrderStore = useOrderStore();
const { fetchOrder } = OrderStore; // function จาก stores
// filter ข้อมูลใน table
const filterTable = ref<string>("");
onMounted(async () => {
await fetchListOrder();
});
// เรียกรายการคำสั่ง จาก API
/** เรียกรายการคำสั่ง จาก API */
async function fetchListOrder() {
const listData: DataListRes[] = [
{
@ -50,10 +42,15 @@ async function fetchListOrder() {
await fetchOrder(listData); // ส่งข้อมูลไปยัง stores
}
// redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย
/** redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย */
function redirectToPageadd() {
router.push(`/discipline-order/add`);
}
/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
onMounted(async () => {
await fetchListOrder();
});
</script>
<template>
@ -71,10 +68,12 @@ function redirectToPageadd() {
color="primary"
icon="mdi-plus"
@click="redirectToPageadd()"
><q-tooltip>เพิ่มรายการออกคำสั่งลงโทษทางวินัย </q-tooltip></q-btn
>
<q-tooltip>เพิ่มรายการออกคำสั่งลงโทษทางวินัย </q-tooltip>
</q-btn>
</div>
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
for="inputFilterTable"
@ -87,6 +86,7 @@ function redirectToPageadd() {
<q-icon name="search" />
</template>
</q-input>
<q-select
for="selectVisibleColumns"
class="col-xs-12 col-sm-3 col-md-2"
@ -103,6 +103,7 @@ function redirectToPageadd() {
options-cover
/>
</div>
<div class="col-12">
<tableOrder :filterTable="filterTable" />
</div>

9
src/modules/11_discipline/components/4_Order/OrderPage.vue
View file

@ -2,20 +2,21 @@
import { ref } from "vue";
import { useRouter } from "vue-router";
// import step
/** import step */
import step01 from "@/modules/11_discipline/components/4_Order/Step01.vue";
import step02 from "@/modules/11_discipline/components/4_Order/Step02.vue";
import step03 from "@/modules/11_discipline/components/4_Order/Step03.vue";
const router = useRouter();
const step = ref<number>(1);
// nextStep
/** nextStep */
const nextStep = async () => {
localStorage.setItem("currentStep", step.value.toString());
step.value++;
};
// previousStep
/** previousStep */
const previousStep = async () => {
localStorage.setItem("currentStep", step.value.toString());
step.value--;

30
src/modules/11_discipline/components/4_Order/Step01.vue
View file

@ -14,6 +14,8 @@ const mixin = useCounterMixin();
const { date2Thai, dialogConfirm } = mixin;
const $q = useQuasar();
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
next: {
type: Function,
@ -24,8 +26,8 @@ const props = defineProps({
default: () => console.log("not function"),
},
});
const next = () => props.next();
// Options ต่างๆ
/** Options ต่างๆ */
const orderTypeOptions = ref<DataOption[]>([
{ id: "0", name: "ประเภทคำสั่ง 1" },
{ id: "1", name: "ประเภทคำสั่ง 2" },
@ -41,7 +43,8 @@ const listInvestigationOptions = ref<DataOption[]>([
{ id: "1", name: "รายการสอบสวนความผิดทางวินัย 2" },
{ id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
]);
// ตัวแปรทั้งหมด
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
orderType: "",
orderBy: "",
@ -55,7 +58,7 @@ const formData = reactive<FormData>({
mistakeDetail: "",
});
// validateForm
/** ตัวแปร ref สำหรับแสดง validate */
const orderTypeRef = ref<Object | null>(null);
const orderByRef = ref<Object | null>(null);
const listInvestigationRef = ref<Object | null>(null);
@ -66,6 +69,8 @@ const dateRef = ref<Object | null>(null);
const authorityPositionRef = ref<Object | null>(null);
const subjectRef = ref<Object | null>(null);
const mistakeDetailRef = ref<Object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const myObjectRef: MyObjectRef = {
orderType: orderTypeRef,
orderBy: orderByRef,
@ -78,6 +83,13 @@ const myObjectRef: MyObjectRef = {
subject: subjectRef,
mistakeDetail: mistakeDetailRef,
};
/**ฟังชั่น ไป step ต่อไป */
function next() {
props.next();
}
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function validateForm() {
const hasError = [];
for (const key in myObjectRef) {
@ -96,6 +108,7 @@ function validateForm() {
}
}
/** ฟังชั่น บันทึก */
function onSubmit() {
console.log(formData);
dialogConfirm(
@ -131,6 +144,7 @@ function onSubmit() {
use-input
/>
</div>
<div class="col-xs-12 col-sm-6">
คำสั่งโดย
<q-select
@ -149,6 +163,7 @@ function onSubmit() {
use-input
/>
</div>
<div class="col-xs-12 col-sm-6">
เลือกรายการสอบสวนความผิดทางวินัย
<q-select
@ -169,6 +184,7 @@ function onSubmit() {
use-input
/>
</div>
<div class="col-xs-12 col-sm-6">
ผู้มีอำนาจลงนาม
<q-input
@ -182,6 +198,7 @@ function onSubmit() {
lazy-rules
/>
</div>
<div class="row col-xs-7 col-sm-3">
<div class="col-6">
คำสั่งที่
@ -197,6 +214,7 @@ function onSubmit() {
>
</q-input>
</div>
<label class="col-1 flex justify-center items-center text-bold"
>/</label
>
@ -229,6 +247,7 @@ function onSubmit() {
</datepicker>
</div>
</div>
<div class="col-xs-5 col-sm-3">
วันที่มีผลคำสั่ง
<datepicker
@ -270,6 +289,7 @@ function onSubmit() {
</template>
</datepicker>
</div>
<div class="col-xs-12 col-sm-6">
ตำแหน่งผู้มีอำนาจลงนาม
<q-input
@ -283,6 +303,7 @@ function onSubmit() {
lazy-rules
/>
</div>
<div class="col-xs-12 col-sm-6">
คำสั่งเรื่อง
<q-input
@ -296,6 +317,7 @@ function onSubmit() {
lazy-rules
/>
</div>
<div class="col-xs-12 col-sm-12">
รายละเอียดการกระทำความผิด
<q-input

24
src/modules/11_discipline/components/4_Order/Step02.vue
View file

@ -1,5 +1,7 @@
<script setup lang="ts">
import { ref } from "vue";
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
next: {
type: Function,
@ -10,21 +12,25 @@ const props = defineProps({
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
const name = ref<string>("");
const lastname = ref<string>("");
const age = ref<string>("");
/** ตัวแปร ref สำหรับแสดง validate */
const nameRef = ref<any>(null);
const ageRef = ref<any>(null);
const lastnameRef = ref<any>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const myObject: MyObject = {
name: nameRef,
lastname: lastnameRef,
age: ageRef,
};
/** กำหนด type */
interface MyObject {
name: any;
lastname: any;
@ -32,6 +38,17 @@ interface MyObject {
[key: string]: any;
}
/**ฟังชั่น ไป step ต่อไป */
function next() {
props.next();
}
/**ฟังชั่น ไป step ก่อนหน้า */
function previous() {
props.previous();
}
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onSubmit() {
const hasError = [];
for (const key in myObject) {
@ -63,6 +80,7 @@ function onSubmit() {
lazy-rules
:rules="[(val) => !!val || `${'Name and surname'}`]"
/>
<q-input
ref="lastnameRef"
filled
@ -71,6 +89,7 @@ function onSubmit() {
lazy-rules
:rules="[(val) => !!val || `${'lastname'}`]"
/>
<q-input
ref="ageRef"
filled
@ -94,6 +113,7 @@ function onSubmit() {
@click="previous()"
class="q-px-md"
/>
<q-btn
dense
unelevated

9
src/modules/11_discipline/components/4_Order/Step03.vue
View file

@ -1,4 +1,6 @@
<script setup lang="ts">
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
next: {
type: Function,
@ -9,8 +11,11 @@ const props = defineProps({
default: () => console.log("not function"),
},
});
const next = () => props.next();
const previous = () => props.previous();
/**ฟังชั่น ไป step ก่อนหน้า */
function previous() {
props.previous();
}
</script>
<template>

11
src/modules/11_discipline/components/4_Order/TableOrder.vue
View file

@ -1,12 +1,13 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
// importType
/** importType */
import type { QTableProps } from "quasar";
// importStroe
/** importStroe */
import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
const OrderStore = useOrderStore();
/** รับ props มาจากหน้าหลัก */
const props = defineProps({
filterTable: {
type: String,
@ -14,6 +15,7 @@ const props = defineProps({
},
});
/** ข้อมูลที่เเสดงใน คอลัม */
const columns = ref<QTableProps["columns"]>([
{
name: "subject",
@ -70,6 +72,8 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
]);
/** หัวตาราง */
const visibleColumns = ref<string[]>([
"subject",
"ordernumber",
@ -79,12 +83,13 @@ const visibleColumns = ref<string[]>([
"statusorder",
]);
/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
onMounted(() => {
OrderStore.columns = columns.value;
OrderStore.visibleColumns = visibleColumns.value;
});
//pagination
/** pagination */
const pagination = ref({
descending: true,
page: 1,

39
src/modules/11_discipline/components/5_Report/DetailPage.vue
View file

@ -9,14 +9,17 @@ import { useReportDataStore } from "@/modules/11_discipline/store/ReportStore";
import http from "@/plugins/http";
import config from "@/app.config";
const date = ref<Date>();
const dateEnd = ref<Date>();
const route = useRoute();
const typeReport = route.params.type.toString();
const store = useReportDataStore();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, date2Thai } = mixin;
const { filterFnOptionsType } = store;
const $q = useQuasar();
const ocSelect = ref<string>("");
const government = ref<string>("");
@ -25,18 +28,15 @@ const pdfSrc = ref<any>();
const numOfPages = ref<number>(0);
const page = ref<number>(1);
const titleReport = ref<string>("");
onMounted(async () => {
let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
report && (titleReport.value = report.name);
});
const splitterModel = ref(14);
const backHistory = () => {
/** กลับหน้าหลัก */
function backHistory(){
window.history.back();
};
const showDocument = (url: any) => {
/** แสดงรายงาน */
function showDocument(url: any){
const pdfData = usePDF(url);
setTimeout(() => {
@ -44,16 +44,26 @@ const showDocument = (url: any) => {
numOfPages.value = pdfData.pages.value;
}, 1000);
};
const nextPage = () => {
/** ไปหน้าต่อไปของรายงาน */
function nextPage(){
if (page.value < numOfPages.value) {
page.value++;
}
};
const backPage = () => {
/** กลับหน้าก่อนหน้าของรายงาน */
function backPage(){
if (page.value !== 1) {
page.value--;
}
};
/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
onMounted(async () => {
let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
report && (titleReport.value = report.name);
});
</script>
<template>
<div class="toptitle">
@ -103,6 +113,7 @@ const backPage = () => {
</q-input>
</template>
</datepicker>
</div>
<div class="q-pl-xs">
<datepicker
@ -134,6 +145,7 @@ const backPage = () => {
</q-input>
</template>
</datepicker>
</div>
<q-space />
<div class="q-py-xs">
@ -143,6 +155,7 @@ const backPage = () => {
</q-btn>
</div>
</q-toolbar>
<q-toolbar
v-if="typeReport > '1'"
class="q-pa-sm bg-grey-2"
@ -172,6 +185,7 @@ const backPage = () => {
</q-item>
</template>
</q-select>
</div>
<div class="q-pl-xs">
<q-select
@ -197,6 +211,7 @@ const backPage = () => {
</q-item>
</template>
</q-select>
</div>
<div v-if="typeReport > '2'" class="q-pl-xs">
<q-select
@ -222,6 +237,7 @@ const backPage = () => {
</q-item>
</template>
</q-select>
</div>
</q-toolbar>
<q-splitter
@ -249,6 +265,7 @@ const backPage = () => {
@click="backPage"
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
@ -265,6 +282,7 @@ const backPage = () => {
@click="nextPage"
:disable="page === numOfPages"
/>
</div>
</div>
</div>
@ -289,6 +307,7 @@ const backPage = () => {
:disable="page == 1"
/>
</div>
<div class="col-12 col-md-auto">
<div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }}

56
src/modules/11_discipline/components/5_Report/MainPage.vue
View file

@ -4,9 +4,14 @@ import { useRouter } from "vue-router";
const router = useRouter();
// const store = useInsigniaDataStore();
const nextPage = (type: string, title: string) => {
/**
* เข้าสู้หน้าของรายการ เเต่ละ ประเภท
* @param type ประเภท
* @param title ชื่อประเภท
*/
function nextPage(type: string, title: string) {
router.push(`/discipline/report/${type}`);
};
}
</script>
<template>
@ -18,12 +23,7 @@ const nextPage = (type: string, title: string) => {
<div class="q-pa-md">
<q-item
clickable
@click="
nextPage(
'1',
'รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี'
)
"
@click=" nextPage('1', 'รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี') "
dense
class="hover-green"
>
@ -37,9 +37,7 @@ const nextPage = (type: string, title: string) => {
<q-item
clickable
@click="
nextPage('2', 'รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน')
"
@click=" nextPage( '2', 'รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน' ) "
dense
class="hover-green"
>
@ -47,13 +45,14 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน
รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร
แยกตามหน่วยงาน
</q-item-section>
</q-item>
<q-item
clickable
@click="nextPage('3', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด')"
@click=" nextPage( '3', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด' ) "
dense
class="hover-green"
>
@ -61,12 +60,14 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย
แยกตามลักษณะความผิด
</q-item-section>
</q-item>
<q-item
clickable
@click="nextPage('4', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด')"
@click=" nextPage( '4', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด' ) "
dense
class="hover-green"
>
@ -74,12 +75,14 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
รายงานรายชื่อข้าราชการสามัญฯ
ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
</q-item-section>
</q-item>
<q-item
clickable
@click="nextPage('5', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด')"
@click=" nextPage( '5', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด' ) "
dense
class="hover-green"
>
@ -90,9 +93,10 @@ const nextPage = (type: string, title: string) => {
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด
</q-item-section>
</q-item>
<q-item
clickable
@click="nextPage('6', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด')"
@click=" nextPage( '6', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด' ) "
dense
class="hover-green"
>
@ -100,12 +104,14 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
รายงานรายชื่อข้าราชการสามัญฯ
ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
</q-item-section>
</q-item>
<q-item
clickable
@click="nextPage('7', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด')"
@click=" nextPage( '7', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด' ) "
dense
class="hover-green"
>
@ -113,12 +119,14 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง
แยกลักษณะความผิด
</q-item-section>
</q-item>
<q-item
clickable
@click="nextPage('8', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง')"
@click=" nextPage( '8', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง' ) "
dense
class="hover-green"
>
@ -126,10 +134,10 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section>
<q-item-section class="text-dark">
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง
แยกตามตำแหน่ง
</q-item-section>
</q-item>
</div>
</q-card>
</div>

39
src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue
View file

@ -5,6 +5,9 @@ import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
/**
* รวมตัวแปร
*/
const mixin = useCounterMixin();
const {
date2Thai,
@ -22,23 +25,36 @@ const myForm = ref<QForm | null>(null); //form data input
const edit = ref<boolean>(false);
const channel = ref<string>("");
/**
* เรียกข้อมูลจากรายการ
*/
onMounted(async () => {});
// เรียกข้อมูลของรอบการเสนอขอ
const fetchData = async () => {};
/**
* ลบข้อมูล
* @param id ไอดีของข้อมูลที่ต้องการลบ
*/
const deleteData = async (id: string) => {};
// แก้ไขข้อมูล
// คลิกบันทึก
const checkSave = () => {};
// บันทึกข้อมูล
/* บันทึกข้อมูล**/
const SaveData = async () => {};
// เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ
const checkSave = () => {};
/**
* เพิ่มข้อมูล
*/
const addData = async () => {};
// แก้ไขข้อมูล
/**
* แก้ไขข้อมูล
* @param id ช่องทาง
*/
const editData = async (id: string) => {};
/**
* ย้อนกลับหน้ารายการ
*/
const clickBack = () => {
router.push(`/discipline/channel`);
};
@ -81,12 +97,7 @@ const clickBack = () => {
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
label="บันทึก"
color="public"
@click="checkSave"
>
</q-btn>
<q-btn label="บันทึก" color="public" @click="checkSave"> </q-btn>
</div>
</q-card>
</div>

21
src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
View file

@ -5,15 +5,17 @@ import router from "@/router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useDisciplineChannelDataStore } from "@/modules/11_discipline/store/ChannelStore";
import config from "@/app.config";
import http from "@/plugins/http";
const dataStore = useDisciplineChannelDataStore();
const mixin = useCounterMixin();
const { dialogRemove } = mixin;
const $q = useQuasar(); //ใช้ noti quasar
// ค้นหาในตาราง
/**
* ค้นหาในตาราง
*/
const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null);
const resetFilter = () => {
@ -22,7 +24,10 @@ const resetFilter = () => {
filterRef.value.focus();
}
};
const dataStore = useDisciplineChannelDataStore();
/**
*pagination ของตาราง
*/
const pagination = ref({
// sortBy: "desc",
descending: false,
@ -30,10 +35,17 @@ const pagination = ref({
rowsPerPage: 10,
});
/**
* clickไปหน้าเพิ่มchanel
*/
const clickAdd = () => {
router.push(`/discipline/channel/add`);
};
/**
* ลบข้อมู,
* @param id ไอดีของข้อมูล
*/
const clickDelete = (id: string) => {
dialogRemove(
$q,
@ -46,6 +58,9 @@ const clickDelete = (id: string) => {
);
};
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
onMounted(() => {
// get ข้อมูลแล้วโยนใส่ store
dataStore.fetchData([

30
src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
View file

@ -1,34 +1,34 @@
<script setup lang="ts">
import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue"
import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
const mixin = useCounterMixin();
const {
messageError,
showLoader,
hideLoader,
dialogConfirm,
success,
} = mixin;
const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
const router = useRouter();
// บันทึกข้อมูล
/** บันทึกข้อมูลเเละ route กลับหน้าหลัก */
const onSubmit = async () => {
// post
router.push(`/discipline/director`)
router.push(`/discipline/director`);
};
</script>
<template>
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
@click="$router.push(`/discipline/director`)" />
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="$router.push(`/discipline/director`)"
/>
เพิ่มรายชื่อกรรมการ
</div>
<Form :on-submit="onSubmit" />
</div>
</template>
</template>

65
src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue
View file

@ -1,22 +1,22 @@
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue"
import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue";
import type { FormData } from "@/modules/11_discipline/interface/request/director";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const {
messageError,
showLoader,
hideLoader,
dialogConfirm,
success,
} = mixin;
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
/**เมื่อเริ่มโหลดหน้า
* เรียกใช้งาน fetchData เพื่อดึงข้อมูล
*/
onMounted(() => {
fetchData()
fetchData();
});
// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
/**
* get ข้อมูลเก่ากรณีแก้ไขข้อมูล
*/
const data = reactive<FormData>({
prefix: "",
firstname: "",
@ -25,32 +25,45 @@ const data = reactive<FormData>({
phone: "",
responsibilities: "",
email: "",
})
});
/**
* ดึงค่าจาก api
*/
const fetchData = async () => {
// ดึงค่าจาก api
data.prefix = "นาง"
data.firstname = "เกสินี"
data.lastname = "เจียรสุมัย"
data.position = "ครู"
data.phone = "0800808080"
data.responsibilities = "ประธาน"
data.email = "e@email.com"
data.prefix = "นาง";
data.firstname = "เกสินี";
data.lastname = "เจียรสุมัย";
data.position = "ครู";
data.phone = "0800808080";
data.responsibilities = "ประธาน";
data.email = "e@email.com";
};
// แก้ไขข้อมูล
/**
* บันทึกข้อมูลที่เเก้ไข
* @param id ระบุ บุคคล
*/
const onSubmit = async (id: string) => {
// put
// put
};
</script>
<template>
<div class="col-xs-12 col-sm-12 col-md-11">
<div class="toptitle col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
@click="$router.push(`/discipline/director`)" />
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="$router.push(`/discipline/director`)"
/>
แก้ไขรายชื่อกรรมการ
</div>
<Form @onSubmit="onSubmit" :data="data" />
</div>
</template>
</template>

68
src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
View file

@ -5,7 +5,9 @@ import type {
FormRef,
} from "@/modules/11_discipline/interface/request/director";
// รับ props มาจาก page หลัก
/**
* รับ props มาจาก page หลัก
*/
const props = defineProps({
data: {
type: Object,
@ -17,11 +19,16 @@ const props = defineProps({
},
});
// ข้อมูลรหัสบัตรประชาชน
/**
* ข้อมูลรหัสบัตรประชาชน
*/
//
const idCard = ref<string>("");
const idCardRef = ref<any>(null);
// ข้อมูลทั้งก้อน form
/**
* ข้อมูลทั้งก้อน form
*/
const formData = reactive<FormData>({
prefix: "",
firstname: "",
@ -29,8 +36,14 @@ const formData = reactive<FormData>({
position: "",
phone: "",
email: "",
responsibilities: "",
});
/**
* เช็คข้อมูลจาก props
* เมื่อมีข้อมูล
* เก็บข้อมูลลง formData
*/
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.prefix = props.data.prefix;
@ -41,14 +54,18 @@ watch(props.data, async () => {
formData.email = props.data.email;
});
// เพิ่มบุคลากร
/**
* เพิ่มบุคลากร
*/
function addEmployee() {
if (idCardRef.value.validate()) {
console.log("idCard===>", idCard.value);
}
}
// ตรวจสอบข้อมูลก่อนส่งไปยัง api
/**
* ตรวจสอบข้อมูลก่อนส่งไปยัง api
*/
const prefixRef = ref<object | null>(null);
const firstnameRef = ref<object | null>(null);
const lastnameRef = ref<object | null>(null);
@ -64,6 +81,7 @@ const formRef: FormRef = {
email: emailRef,
};
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = [];
for (const key in formRef) {
@ -81,13 +99,19 @@ function onValidate() {
}
</script>
<template>
<form @submit.prevent.stop="onValidate">
<form @submit.prevent.stop="onValidate">
<q-card bordered>
<div class="col-12 row q-pa-md">
<div class="row q-col-gutter-md">
<div class="row col-12" v-if="data === null">
<q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
<div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
<q-card
bordered
class="row col-12"
style="border: 1px solid #d6dee1"
>
<div
class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
>
ค้นหาบุคคลากรที่อยู่ในระบบ
</div>
<div class="col-12"><q-separator /></div>
@ -192,18 +216,18 @@ function onValidate() {
</div>
</div>
</div>
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
for="ButtonOnSubmit"
id="formSubmit"
color="secondary"
label="บันทึก"
type="submit"
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
>
</div>
</q-card>
</form>
<q-separator />
<div class="row col-12 q-pa-sm">
<q-space />
<q-btn
for="ButtonOnSubmit"
id="formSubmit"
color="secondary"
label="บันทึก"
type="submit"
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
>
</div>
</q-card>
</form>
</template>

223
src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
View file

@ -4,22 +4,19 @@ import type { QTableProps } from "quasar";
import router from "@/router";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import { useDisciplineDirectorDataStore } from '@/modules/11_discipline/store/DirectorStore'
import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
import config from "@/app.config";
import http from "@/plugins/http";
const $q = useQuasar();
const dataStore = useDisciplineDirectorDataStore()
const dataStore = useDisciplineDirectorDataStore();
const mixin = useCounterMixin();
const {
messageError,
showLoader,
hideLoader,
dialogConfirm,
dialogRemove,
} = mixin;
const { messageError, showLoader, hideLoader, dialogConfirm, dialogRemove } =
mixin;
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
onMounted(() => {
// get ข้อมูลแล้วโยนใส่ store
dataStore.fetchData([
@ -35,10 +32,12 @@ onMounted(() => {
email: "g@gmail.com",
phone: "0614565145",
},
])
]);
});
// ค้นหาในตาราง
/**
* ค้นหาในตาราง
*/
const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null);
function resetFilter() {
@ -46,9 +45,11 @@ function resetFilter() {
if (filterRef.value) {
filterRef.value.focus();
}
};
}
// กำหนด pagination
/**
*pagination ของตาราง
*/
const pagination = ref({
// sortBy: "desc",
descending: false,
@ -56,84 +57,138 @@ const pagination = ref({
rowsPerPage: 25,
});
/**
* ลบข้อมูล
* @param id ของกรรมการแต่ละบุคคล
*/
function clickDelete(id: string) {
dialogRemove(
$q,
async () => {
// ยืนยันการลบข้อมูล
// showLoader();
// await http
// .delete(config.API.periodExamId(id))
// .then((res) => {
// success($q, "ลบข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// hideLoader();
// });
}
);
};
dialogRemove($q, async () => {
// ยืนยันการลบข้อมูล
// showLoader();
// await http
// .delete(config.API.periodExamId(id))
// .then((res) => {
// success($q, "ลบข้อมูลสำเร็จ");
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// hideLoader();
// });
});
}
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
รายการชื่อกรรมการ
</div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn @click="$router.push(`/discipline/director/add`)" size="12px" flat round color="add" icon="mdi-plus">
<q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
debounce="300" placeholder="ค้นหา">
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</template>
</q-input>
<q-select v-model="dataStore.visibleColumns" multiple outlined dense options-dense
:display-value="$q.lang.table.columns" emit-value map-options :options="dataStore.columns" option-value="name"
options-cover style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2" />
<div class="row col-12 q-col-gutter-sm q-mb-sm">
<div>
<q-btn
@click="$router.push(`/discipline/director/add`)"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
</q-btn>
</div>
<q-space />
<div class="col-12">
<d-table :columns="dataStore.columns" :rows="dataStore.rows" :filter="filterKeyword" row-key="tb-list" flat
bordered :paging="true" dense v-model:pagination="pagination" :visible-columns="dataStore.visibleColumns">
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.name" :props="props"
@click="$router.push(`/discipline/director/${props.row.no}`)">
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn dense size="12px" flat round color="red" @click="clickDelete(props.row.id)" icon="mdi-delete">
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
</div>
<q-select
v-model="dataStore.visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="dataStore.columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<d-table
:columns="dataStore.columns"
:rows="dataStore.rows"
:filter="filterKeyword"
row-key="tb-list"
flat
bordered
:paging="true"
dense
v-model:pagination="pagination"
:visible-columns="dataStore.visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="$router.push(`/discipline/director/${props.row.no}`)"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
dense
size="12px"
flat
round
color="red"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
>
<q-tooltip>ลบข้อมูล</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</q-card>
</template>
</template>