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

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

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

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

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

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

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

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

@ -1,12 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
// importType /** importType */
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
// importStroe /** importStroe */
import { useOrderStore } from "@/modules/11_discipline/store/OrderStore"; import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
const OrderStore = useOrderStore(); const OrderStore = useOrderStore();
/** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
filterTable: { filterTable: {
type: String, type: String,
@ -14,6 +15,7 @@ const props = defineProps({
}, },
}); });
/** ข้อมูลที่เเสดงใน คอลัม */
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "subject", name: "subject",
@ -70,6 +72,8 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px", style: "font-size: 14px",
}, },
]); ]);
/** หัวตาราง */
const visibleColumns = ref<string[]>([ const visibleColumns = ref<string[]>([
"subject", "subject",
"ordernumber", "ordernumber",
@ -79,12 +83,13 @@ const visibleColumns = ref<string[]>([
"statusorder", "statusorder",
]); ]);
/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
onMounted(() => { onMounted(() => {
OrderStore.columns = columns.value; OrderStore.columns = columns.value;
OrderStore.visibleColumns = visibleColumns.value; OrderStore.visibleColumns = visibleColumns.value;
}); });
//pagination /** pagination */
const pagination = ref({ const pagination = ref({
descending: true, descending: true,
page: 1, 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 http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
const date = ref<Date>(); const date = ref<Date>();
const dateEnd = ref<Date>(); const dateEnd = ref<Date>();
const route = useRoute(); const route = useRoute();
const typeReport = route.params.type.toString(); const typeReport = route.params.type.toString();
const store = useReportDataStore(); const store = useReportDataStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader, date2Thai } = mixin; const { messageError, showLoader, hideLoader, date2Thai } = mixin;
const { filterFnOptionsType } = store; const { filterFnOptionsType } = store;
const $q = useQuasar(); const $q = useQuasar();
const ocSelect = ref<string>(""); const ocSelect = ref<string>("");
const government = ref<string>(""); const government = ref<string>("");
@ -25,18 +28,15 @@ const pdfSrc = ref<any>();
const numOfPages = ref<number>(0); const numOfPages = ref<number>(0);
const page = ref<number>(1); const page = ref<number>(1);
const titleReport = ref<string>(""); 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 splitterModel = ref(14);
const backHistory = () => {
/** กลับหน้าหลัก */
function backHistory(){
window.history.back(); window.history.back();
}; };
const showDocument = (url: any) => { /** แสดงรายงาน */
function showDocument(url: any){
const pdfData = usePDF(url); const pdfData = usePDF(url);
setTimeout(() => { setTimeout(() => {
@ -44,16 +44,26 @@ const showDocument = (url: any) => {
numOfPages.value = pdfData.pages.value; numOfPages.value = pdfData.pages.value;
}, 1000); }, 1000);
}; };
const nextPage = () => {
/** ไปหน้าต่อไปของรายงาน */
function nextPage(){
if (page.value < numOfPages.value) { if (page.value < numOfPages.value) {
page.value++; page.value++;
} }
}; };
const backPage = () => {
/** กลับหน้าก่อนหน้าของรายงาน */
function backPage(){
if (page.value !== 1) { if (page.value !== 1) {
page.value--; page.value--;
} }
}; };
/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
onMounted(async () => {
let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
report && (titleReport.value = report.name);
});
</script> </script>
<template> <template>
<div class="toptitle"> <div class="toptitle">
@ -103,6 +113,7 @@ const backPage = () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div> </div>
<div class="q-pl-xs"> <div class="q-pl-xs">
<datepicker <datepicker
@ -134,6 +145,7 @@ const backPage = () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div> </div>
<q-space /> <q-space />
<div class="q-py-xs"> <div class="q-py-xs">
@ -143,6 +155,7 @@ const backPage = () => {
</q-btn> </q-btn>
</div> </div>
</q-toolbar> </q-toolbar>
<q-toolbar <q-toolbar
v-if="typeReport > '1'" v-if="typeReport > '1'"
class="q-pa-sm bg-grey-2" class="q-pa-sm bg-grey-2"
@ -172,6 +185,7 @@ const backPage = () => {
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
</div> </div>
<div class="q-pl-xs"> <div class="q-pl-xs">
<q-select <q-select
@ -197,6 +211,7 @@ const backPage = () => {
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
</div> </div>
<div v-if="typeReport > '2'" class="q-pl-xs"> <div v-if="typeReport > '2'" class="q-pl-xs">
<q-select <q-select
@ -222,6 +237,7 @@ const backPage = () => {
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
</div> </div>
</q-toolbar> </q-toolbar>
<q-splitter <q-splitter
@ -249,6 +265,7 @@ const backPage = () => {
@click="backPage" @click="backPage"
:disable="page == 1" :disable="page == 1"
/> />
</div> </div>
<div class="col-12 col-md-auto"> <div class="col-12 col-md-auto">
<div class="q-pa-md flex"> <div class="q-pa-md flex">
@ -265,6 +282,7 @@ const backPage = () => {
@click="nextPage" @click="nextPage"
:disable="page === numOfPages" :disable="page === numOfPages"
/> />
</div> </div>
</div> </div>
</div> </div>
@ -289,6 +307,7 @@ const backPage = () => {
:disable="page == 1" :disable="page == 1"
/> />
</div> </div>
<div class="col-12 col-md-auto"> <div class="col-12 col-md-auto">
<div class="q-pa-md flex"> <div class="q-pa-md flex">
หน้าที่ {{ page }} จาก {{ numOfPages }} หน้าที่ {{ 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 router = useRouter();
// const store = useInsigniaDataStore(); // const store = useInsigniaDataStore();
const nextPage = (type: string, title: string) => { /**
* เข้าสู้หน้าของรายการ เเต่ละ ประเภท
* @param type ประเภท
* @param title ชื่อประเภท
*/
function nextPage(type: string, title: string) {
router.push(`/discipline/report/${type}`); router.push(`/discipline/report/${type}`);
}; }
</script> </script>
<template> <template>
@ -18,12 +23,7 @@ const nextPage = (type: string, title: string) => {
<div class="q-pa-md"> <div class="q-pa-md">
<q-item <q-item
clickable clickable
@click=" @click=" nextPage('1', 'รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี') "
nextPage(
'1',
'รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี'
)
"
dense dense
class="hover-green" class="hover-green"
> >
@ -37,9 +37,7 @@ const nextPage = (type: string, title: string) => {
<q-item <q-item
clickable clickable
@click=" @click=" nextPage( '2', 'รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน' ) "
nextPage('2', 'รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน')
"
dense dense
class="hover-green" class="hover-green"
> >
@ -47,13 +45,14 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" /> <q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section> </q-item-section>
<q-item-section class="text-dark"> <q-item-section class="text-dark">
รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร
แยกตามหน่วยงาน
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item <q-item
clickable clickable
@click="nextPage('3', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด')" @click=" nextPage( '3', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด' ) "
dense dense
class="hover-green" class="hover-green"
> >
@ -61,12 +60,14 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" /> <q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section> </q-item-section>
<q-item-section class="text-dark"> <q-item-section class="text-dark">
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย
แยกตามลักษณะความผิด
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item <q-item
clickable clickable
@click="nextPage('4', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด')" @click=" nextPage( '4', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด' ) "
dense dense
class="hover-green" class="hover-green"
> >
@ -74,12 +75,14 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" /> <q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section> </q-item-section>
<q-item-section class="text-dark"> <q-item-section class="text-dark">
รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด รายงานรายชื่อข้าราชการสามัญฯ
ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item <q-item
clickable clickable
@click="nextPage('5', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด')" @click=" nextPage( '5', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด' ) "
dense dense
class="hover-green" class="hover-green"
> >
@ -90,9 +93,10 @@ const nextPage = (type: string, title: string) => {
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item <q-item
clickable clickable
@click="nextPage('6', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด')" @click=" nextPage( '6', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด' ) "
dense dense
class="hover-green" class="hover-green"
> >
@ -100,12 +104,14 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" /> <q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section> </q-item-section>
<q-item-section class="text-dark"> <q-item-section class="text-dark">
รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด รายงานรายชื่อข้าราชการสามัญฯ
ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item <q-item
clickable clickable
@click="nextPage('7', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด')" @click=" nextPage( '7', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด' ) "
dense dense
class="hover-green" class="hover-green"
> >
@ -113,12 +119,14 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" /> <q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section> </q-item-section>
<q-item-section class="text-dark"> <q-item-section class="text-dark">
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง
แยกลักษณะความผิด
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item <q-item
clickable clickable
@click="nextPage('8', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง')" @click=" nextPage( '8', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง' ) "
dense dense
class="hover-green" class="hover-green"
> >
@ -126,10 +134,10 @@ const nextPage = (type: string, title: string) => {
<q-icon color="primary" name="mdi-file" size="xs" /> <q-icon color="primary" name="mdi-file" size="xs" />
</q-item-section> </q-item-section>
<q-item-section class="text-dark"> <q-item-section class="text-dark">
รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง
แยกตามตำแหน่ง
</q-item-section> </q-item-section>
</q-item> </q-item>
</div> </div>
</q-card> </q-card>
</div> </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 { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar";
/**
* รวมตัวแปร
*/
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
date2Thai, date2Thai,
@ -22,23 +25,36 @@ const myForm = ref<QForm | null>(null); //form data input
const edit = ref<boolean>(false); const edit = ref<boolean>(false);
const channel = ref<string>(""); const channel = ref<string>("");
/**
* เรียกข้อมูลจากรายการ
*/
onMounted(async () => {}); onMounted(async () => {});
// เรียกข้อมูลของรอบการเสนอขอ
const fetchData = async () => {}; const fetchData = async () => {};
/**
* ลบข้อมูล
* @param id ไอดีของข้อมูลที่ต้องการลบ
*/
const deleteData = async (id: string) => {}; const deleteData = async (id: string) => {};
// แก้ไขข้อมูล /* บันทึกข้อมูล**/
// คลิกบันทึก
const checkSave = () => {};
// บันทึกข้อมูล
const SaveData = async () => {}; const SaveData = async () => {};
// เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ const checkSave = () => {};
/**
* เพิ่มข้อมูล
*/
const addData = async () => {}; const addData = async () => {};
// แก้ไขข้อมูล
/**
* แก้ไขข้อมูล
* @param id ช่องทาง
*/
const editData = async (id: string) => {}; const editData = async (id: string) => {};
/**
* ย้อนกลับหน้ารายการ
*/
const clickBack = () => { const clickBack = () => {
router.push(`/discipline/channel`); router.push(`/discipline/channel`);
}; };
@ -81,12 +97,7 @@ const clickBack = () => {
<q-separator /> <q-separator />
<div class="row col-12 q-pa-sm"> <div class="row col-12 q-pa-sm">
<q-space /> <q-space />
<q-btn <q-btn label="บันทึก" color="public" @click="checkSave"> </q-btn>
label="บันทึก"
color="public"
@click="checkSave"
>
</q-btn>
</div> </div>
</q-card> </q-card>
</div> </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 { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useDisciplineChannelDataStore } from "@/modules/11_discipline/store/ChannelStore"; import { useDisciplineChannelDataStore } from "@/modules/11_discipline/store/ChannelStore";
import config from "@/app.config"; import config from "@/app.config";
import http from "@/plugins/http"; import http from "@/plugins/http";
const dataStore = useDisciplineChannelDataStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { dialogRemove } = mixin; const { dialogRemove } = mixin;
const $q = useQuasar(); //ใช้ noti quasar const $q = useQuasar(); //ใช้ noti quasar
// ค้นหาในตาราง /**
* ค้นหาในตาราง
*/
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null); const filterRef = ref<HTMLInputElement | null>(null);
const resetFilter = () => { const resetFilter = () => {
@ -22,7 +24,10 @@ const resetFilter = () => {
filterRef.value.focus(); filterRef.value.focus();
} }
}; };
const dataStore = useDisciplineChannelDataStore();
/**
*pagination ของตาราง
*/
const pagination = ref({ const pagination = ref({
// sortBy: "desc", // sortBy: "desc",
descending: false, descending: false,
@ -30,10 +35,17 @@ const pagination = ref({
rowsPerPage: 10, rowsPerPage: 10,
}); });
/**
* clickไปหน้าเพิ่มchanel
*/
const clickAdd = () => { const clickAdd = () => {
router.push(`/discipline/channel/add`); router.push(`/discipline/channel/add`);
}; };
/**
* ลบข้อมู,
* @param id ไอดีของข้อมูล
*/
const clickDelete = (id: string) => { const clickDelete = (id: string) => {
dialogRemove( dialogRemove(
$q, $q,
@ -46,6 +58,9 @@ const clickDelete = (id: string) => {
); );
}; };
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
onMounted(() => { onMounted(() => {
// get ข้อมูลแล้วโยนใส่ store // get ข้อมูลแล้วโยนใส่ store
dataStore.fetchData([ dataStore.fetchData([

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

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

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

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

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

@ -5,7 +5,9 @@ import type {
FormRef, FormRef,
} from "@/modules/11_discipline/interface/request/director"; } from "@/modules/11_discipline/interface/request/director";
// รับ props มาจาก page หลัก /**
* รับ props มาจาก page หลัก
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
@ -17,11 +19,16 @@ const props = defineProps({
}, },
}); });
// ข้อมูลรหัสบัตรประชาชน /**
* ข้อมูลรหัสบัตรประชาชน
*/
//
const idCard = ref<string>(""); const idCard = ref<string>("");
const idCardRef = ref<any>(null); const idCardRef = ref<any>(null);
// ข้อมูลทั้งก้อน form /**
* ข้อมูลทั้งก้อน form
*/
const formData = reactive<FormData>({ const formData = reactive<FormData>({
prefix: "", prefix: "",
firstname: "", firstname: "",
@ -29,8 +36,14 @@ const formData = reactive<FormData>({
position: "", position: "",
phone: "", phone: "",
email: "", email: "",
responsibilities: "",
}); });
/**
* เช็คข้อมูลจาก props
* เมื่อมีข้อมูล
* เก็บข้อมูลลง formData
*/
watch(props.data, async () => { watch(props.data, async () => {
// console.log("data==>", props.data) // console.log("data==>", props.data)
formData.prefix = props.data.prefix; formData.prefix = props.data.prefix;
@ -41,14 +54,18 @@ watch(props.data, async () => {
formData.email = props.data.email; formData.email = props.data.email;
}); });
// เพิ่มบุคลากร /**
* เพิ่มบุคลากร
*/
function addEmployee() { function addEmployee() {
if (idCardRef.value.validate()) { if (idCardRef.value.validate()) {
console.log("idCard===>", idCard.value); console.log("idCard===>", idCard.value);
} }
} }
// ตรวจสอบข้อมูลก่อนส่งไปยัง api /**
* ตรวจสอบข้อมูลก่อนส่งไปยัง api
*/
const prefixRef = ref<object | null>(null); const prefixRef = ref<object | null>(null);
const firstnameRef = ref<object | null>(null); const firstnameRef = ref<object | null>(null);
const lastnameRef = ref<object | null>(null); const lastnameRef = ref<object | null>(null);
@ -64,6 +81,7 @@ const formRef: FormRef = {
email: emailRef, email: emailRef,
}; };
/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() { function onValidate() {
const hasError = []; const hasError = [];
for (const key in formRef) { for (const key in formRef) {
@ -81,13 +99,19 @@ function onValidate() {
} }
</script> </script>
<template> <template>
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered> <q-card bordered>
<div class="col-12 row q-pa-md"> <div class="col-12 row q-pa-md">
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<div class="row col-12" v-if="data === null"> <div class="row col-12" v-if="data === null">
<q-card bordered class="row col-12" style="border:1px solid #d6dee1;"> <q-card
<div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"> 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>
<div class="col-12"><q-separator /></div> <div class="col-12"><q-separator /></div>
@ -192,18 +216,18 @@ function onValidate() {
</div> </div>
</div> </div>
</div> </div>
<q-separator /> <q-separator />
<div class="row col-12 q-pa-sm"> <div class="row col-12 q-pa-sm">
<q-space /> <q-space />
<q-btn <q-btn
for="ButtonOnSubmit" for="ButtonOnSubmit"
id="formSubmit" id="formSubmit"
color="secondary" color="secondary"
label="บันทึก" label="บันทึก"
type="submit" type="submit"
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
> >
</div> </div>
</q-card> </q-card>
</form> </form>
</template> </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 router from "@/router";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar"; 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 config from "@/app.config";
import http from "@/plugins/http"; import http from "@/plugins/http";
const $q = useQuasar(); const $q = useQuasar();
const dataStore = useDisciplineDirectorDataStore() const dataStore = useDisciplineDirectorDataStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const { messageError, showLoader, hideLoader, dialogConfirm, dialogRemove } =
messageError, mixin;
showLoader,
hideLoader,
dialogConfirm,
dialogRemove,
} = mixin;
/**เมื่อเริ่มโหลดหน้า
* ส่งข้อมูลจำลองไปยัง store
*/
onMounted(() => { onMounted(() => {
// get ข้อมูลแล้วโยนใส่ store // get ข้อมูลแล้วโยนใส่ store
dataStore.fetchData([ dataStore.fetchData([
@ -35,10 +32,12 @@ onMounted(() => {
email: "g@gmail.com", email: "g@gmail.com",
phone: "0614565145", phone: "0614565145",
}, },
]) ]);
}); });
// ค้นหาในตาราง /**
* ค้นหาในตาราง
*/
const filterKeyword = ref<string>(""); const filterKeyword = ref<string>("");
const filterRef = ref<HTMLInputElement | null>(null); const filterRef = ref<HTMLInputElement | null>(null);
function resetFilter() { function resetFilter() {
@ -46,9 +45,11 @@ function resetFilter() {
if (filterRef.value) { if (filterRef.value) {
filterRef.value.focus(); filterRef.value.focus();
} }
}; }
// กำหนด pagination /**
*pagination ของตาราง
*/
const pagination = ref({ const pagination = ref({
// sortBy: "desc", // sortBy: "desc",
descending: false, descending: false,
@ -56,84 +57,138 @@ const pagination = ref({
rowsPerPage: 25, rowsPerPage: 25,
}); });
/**
* ลบข้อมูล
* @param id ของกรรมการแต่ละบุคคล
*/
function clickDelete(id: string) { function clickDelete(id: string) {
dialogRemove( dialogRemove($q, async () => {
$q, // ยืนยันการลบข้อมูล
async () => { // showLoader();
// ยืนยันการลบข้อมูล // await http
// showLoader(); // .delete(config.API.periodExamId(id))
// await http // .then((res) => {
// .delete(config.API.periodExamId(id)) // success($q, "ลบข้อมูลสำเร็จ");
// .then((res) => { // })
// success($q, "ลบข้อมูลสำเร็จ"); // .catch((e) => {
// }) // messageError($q, e);
// .catch((e) => { // })
// messageError($q, e); // .finally(async () => {
// }) // hideLoader();
// .finally(async () => { // });
// hideLoader(); });
// }); }
}
);
};
</script> </script>
<template> <template>
<div class="toptitle text-dark col-12 row items-center"> <div class="toptitle text-dark col-12 row items-center">
รายการชื่อกรรมการ รายการชื่อกรรมการ
</div> </div>
<q-card flat bordered class="col-12 q-mt-sm q-pa-md"> <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 class="row col-12 q-col-gutter-sm q-mb-sm">
<div> <div>
<q-btn @click="$router.push(`/discipline/director/add`)" size="12px" flat round color="add" icon="mdi-plus"> <q-btn
<q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip> @click="$router.push(`/discipline/director/add`)"
</q-btn> size="12px"
</div> flat
<q-space /> round
color="add"
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined icon="mdi-plus"
debounce="300" placeholder="ค้นหา"> >
<template v-slot:append> <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
<q-icon v-if="filterKeyword == ''" name="search" /> </q-btn>
<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> </div>
<q-space />
<div class="col-12"> <q-input
<d-table :columns="dataStore.columns" :rows="dataStore.rows" :filter="filterKeyword" row-key="tb-list" flat class="col-xs-12 col-sm-3 col-md-2"
bordered :paging="true" dense v-model:pagination="pagination" :visible-columns="dataStore.visibleColumns"> standout
<template v-slot:header="props"> dense
<q-tr :props="props"> v-model="filterKeyword"
<q-th v-for="col in props.cols" :key="col.name" :props="props"> ref="filterRef"
<span class="text-weight-medium">{{ col.label }}</span> outlined
</q-th> debounce="300"
<q-th auto-width /> placeholder="ค้นหา"
</q-tr> >
</template> <template v-slot:append>
<template v-slot:body="props"> <q-icon v-if="filterKeyword == ''" name="search" />
<q-tr :props="props" class="cursor-pointer"> <q-icon
<q-td v-for="col in props.cols" :key="col.name" :props="props" v-if="filterKeyword !== ''"
@click="$router.push(`/discipline/director/${props.row.no}`)"> name="clear"
<div v-if="col.name == 'no'"> class="cursor-pointer"
{{ props.rowIndex + 1 }} @click="resetFilter"
</div> />
<div v-else> </template>
{{ col.value }} </q-input>
</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-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> </q-card>
</template> </template>