ui ประวัติการศึกษา

This commit is contained in:
Kittapath 2023-03-16 00:35:08 +07:00
parent 792f30d606
commit 0157bf51b9
46 changed files with 1500 additions and 1642 deletions

View file

@ -0,0 +1,4 @@
<template>
<div></div>
</template>
<script setup lang="ts"></script>

View file

@ -0,0 +1,554 @@
<!-- card ประวการศกษา -->
<template>
<q-card flat bordered class="col-12 q-px-lg q-py-md">
<q-form ref="myForm">
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
:nameHeader="false"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="selectData(props)"
class="cursor-pointer"
>
<div v-if="col.name == 'start'" class="">
{{ col.value + 543 }}
</div>
<div v-else-if="col.name == 'end'" class="">
{{ col.value + 543 }}
</div>
<div v-else class="">
{{ col.value }}
</div>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</q-card>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="ประวัติการศึกษา" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
<div class="col-xs-6 col-sm-6 col-md-6">
<q-select
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="qualificationId"
:rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
:label="`${'ระดับการศึกษา'}`"
@update:modelValue="clickEditRow"
emit-value
map-options
option-label="name"
:options="qualificationOptions"
option-value="id"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="name"
:rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
:label="`${'สถานศึกษา'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<q-input
:class="getClass(edit)"
hide-bottom-space
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="major"
:rules="[(val) => !!val || `${'กรุณากรอกสาขา/วิชาเอก'}`]"
:label="`${'สาขา/วิชาเอก'}`"
@update:modelValue="clickEditRow"
/>
</div>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<notifyError
:modalError="modalError"
:modalErrorTittle="modalErrorTittle"
:modalErrorDetail="modalErrorDetail"
:close="closeModalError"
></notifyError>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useExamDataStore } from '@/modules/01_exam/store'
import ProfileTable from '@/components/Table.vue'
import DialogHeader from '@/components/DialogHeader.vue'
import DialogFooter from '@/components/DialogFooter.vue'
import { useQuasar } from 'quasar'
import type {
RequestItemsObject,
Columns,
DataProps
} from '@/modules/01_exam/interface/request/Education'
import type { ResponseObject } from '@/modules/01_exam/interface/response/Education'
import type { DataOption } from '@/modules/01_exam/interface/index/Main'
import http from '@/plugins/http'
import config from '@/app.config'
const props = defineProps({
loader: {
// main refresh data
type: Boolean,
required: true
}
})
const $q = useQuasar()
const store = useExamDataStore()
const { examData, changeExamColumns } = store
const loader = ref<boolean>(false)
const id = ref<string>()
const qualification = ref<string>()
const qualificationId = ref<string>()
const qualificationOptions = ref<DataOption[]>([])
const major = ref<string>()
const scores = ref<number | null>()
const name = ref<string>()
const duration = ref<any>()
const myForm = ref<any>() //form data input
const edit = ref<boolean>(false) // dialog
const modal = ref<boolean>(false) //modal add detail
const modalEdit = ref<boolean>(false) //modal
const rawItem = ref<RequestItemsObject>() // row
const rowIndex = ref<number>(0) //index row
const previous = ref<boolean>() //
const next = ref<boolean>() //
const editRow = ref<boolean>(false) //
const rawHistory = ref<RequestItemsObject[]>([]) //raw data history
const modalError = ref<boolean>(false) // modal error
const modalErrorTittle = ref<string>('') // tittle modal error
const modalErrorDetail = ref<string>('') // detail modal error
const statusCode = ref<number>()
const checkValidate = ref<boolean>(false) //validate data
const closeModalError = () => {
modalError.value = false
if (statusCode.value != 404) {
// fetchData();
}
}
const emit = defineEmits(['update:loader'])
const rows = ref<RequestItemsObject[]>([
{
id: '1',
qualificationId: 'ปริญญาตรี',
qualification: 'ปริญญาตรี',
major: 'คอมพิวเตอร์',
scores: 3.99,
name: 'มหาลัยเอ',
duration: 2015
},
{
id: '2',
qualificationId: 'ปริญญาเอก',
qualification: 'ปริญญาเอก',
major: 'คอมพิวเตอร์',
scores: 3.54,
name: 'มหาลัยบี',
duration: 2015
}
])
const filter = ref<string>('') //search data table
const visibleColumns = ref<String[]>([])
examData.education.columns.length == 0
? (visibleColumns.value = ['qualification', 'major', 'scores', 'name', 'duration'])
: (visibleColumns.value = examData.education.columns)
const columns = ref<Columns>([
{
name: 'qualification',
align: 'left',
label: 'วุฒิที่ได้รับ',
sortable: true,
field: 'qualification',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
},
{
name: 'major',
align: 'left',
label: 'สาขาวิชา/วิชาเอก',
sortable: true,
field: 'major',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
},
{
name: 'scores',
align: 'left',
label: 'คะแนนเฉลี่ยตลอดหลักสูตร',
sortable: true,
field: 'scores',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
},
{
name: 'name',
align: 'left',
label: 'ชื่อสถานศึกษา',
sortable: true,
field: 'name',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
},
{
name: 'duration',
align: 'left',
label: 'ระยะเวลา',
sortable: true,
field: 'duration',
headerStyle: 'font-size: 14px',
style: 'font-size: 14px'
}
])
watch(loader, (count: boolean, prevCount: boolean) => {
emit('update:loader', count)
})
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeExamColumns('education', count)
})
onMounted(async () => {
// await fetchData()
// await fetchQualification()
rawHistory.value = rows.value
})
const fetchQualification = async () => {
// loader.value = true;
await http
.get(config.API.educationQualification)
.then((res) => {
const data = res.data.result
let option: DataOption[] = []
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() })
})
qualificationOptions.value = option
})
.catch((e: any) => {})
.finally(() => {
// loader.value = false;
})
}
const fetchData = async () => {}
/**
* กดดอมลกอนหน
*/
const clickPrevious = () => {
edit.value = false
rowIndex.value -= 1
const row = rows.value[rowIndex.value]
qualification.value = row.qualification
qualificationId.value = row.qualificationId
major.value = row.major
scores.value = row.scores
name.value = row.name
duration.value = row.duration
id.value = row.id
checkRowPage()
}
/**
* กดดอมลตอไป
*/
const clickNext = () => {
edit.value = false
rowIndex.value += 1
const row = rows.value[rowIndex.value]
qualification.value = row.qualification
qualificationId.value = row.qualificationId
major.value = row.major
scores.value = row.scores
name.value = row.name
duration.value = row.duration
id.value = row.id
checkRowPage()
}
/**
* กดดอมลตอไป
*/
const getData = () => {
const row = rows.value[rowIndex.value]
qualification.value = row.qualification
qualificationId.value = row.qualificationId
major.value = row.major
scores.value = row.scores
name.value = row.name
duration.value = row.duration
id.value = row.id
}
/**
* เชคปมดอม อน อไป าตองแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false
next.value = true
previous.value = true
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false
}
if (rowIndex.value - 1 < 0) {
previous.value = false
}
}
/**
* กดปมแกไขใน dialog
*/
const clickEdit = () => {
next.value = false
previous.value = false
}
/**
* กดปมเพมดานบน table
*/
const clickAdd = () => {
addData()
}
/**
* กดบนทกใน dialog
*/
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData()
} else {
await saveData()
}
}
})
}
/**
* นทกเพมขอม
*/
const saveData = async () => {
modal.value = false
// loader.value = true;
// await http
// .post(config.API.xxxxxxxxxxxxxxx, {
// xxx: "xxx",
// })
// .then((res) => {
// success($q, "");
// })
// .catch((e) => {
// modalError.value = true;
// modalErrorTittle.value = "";
// modalErrorDetail.value = e.response.data.message;
// statusCode.value = e.response.data.status;
// })
// .finally(async () => {
// modal.value = false;
// await fetchData();
// });
}
/**
* นทกแกไขขอม
*/
const editData = async () => {
edit.value = false
// loader.value = true;
// await http
// .post(config.API.xxxxxxxxxxxxxxx(id.value), {
// xxx: "xxx",
// })
// .then((res) => {
// success($q, "");
// })
// .catch((e) => {
// modalError.value = true;
// modalErrorTittle.value = "";
// modalErrorDetail.value = e.response.data.message;
// statusCode.value = e.response.data.status;
// })
// .finally(async () => {
// edit.value = false;
// await fetchData();
// });
}
/**
* กดป dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
cancel: 'ยกเลิก',
ok: 'ยืนยัน',
persistent: true
}).onOk(async () => {
modal.value = false
next.value = false
previous.value = false
await getData()
})
} else {
modal.value = false
next.value = false
previous.value = false
}
}
/**
* กดเลอกขอมลทจะแกไข
* @param props props ใน row เลอก
*/
const selectData = (props: DataProps) => {
modalEdit.value = true
modal.value = true
edit.value = false
rawItem.value = props.row
rowIndex.value = props.rowIndex
qualification.value = props.row.qualification
qualificationId.value = props.row.qualificationId
major.value = props.row.major
scores.value = props.row.scores
name.value = props.row.name
duration.value = props.row.duration
id.value = props.row.id
checkRowPage()
}
/**
* กดปมเพมบน table
*/
const addData = () => {
modalEdit.value = false
modal.value = true
edit.value = true
qualification.value = ''
qualificationId.value = ''
major.value = ''
scores.value = null
name.value = ''
duration.value = ''
}
/**
* งกนปมยกเลกการแกไขขอม
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันการบันทึกข้อมูลใช่หรือไม่?`,
cancel: 'ยกเลิก',
ok: 'ยืนยัน',
persistent: true
}).onOk(async () => {
edit.value = false
checkRowPage()
await getData()
})
} else {
edit.value = false
checkRowPage()
}
}
/**
* เชความการแกไขขอม
*/
const clickEditRow = () => {
editRow.value = true
}
/**
* validate input ใน dialog
*/
const validateData = async () => {
checkValidate.value = true
await myForm.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false
}
})
}
/**
* class ดรปแบบแสดงระหวางขอมลทแกไขหรอแสดงเฉยๆ
* @param val อม input สำหรบแกไขหรอไม
*/
const getClass = (val: boolean) => {
return {
'full-width inputgreen cursor-pointer': val,
'full-width cursor-pointer': !val
}
}
</script>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,4 @@
<template>
<div></div>
</template>
<script setup lang="ts"></script>

View file

@ -1,29 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
name: string;
certiNumber: string;
start: Date;
end: Date;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,27 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
receiveDate: Date;
detail: string;
agency: string;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,29 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
date: Date;
status: string;
level: string;
refNo: string;
refDate: Date;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,19 +0,0 @@
//ข้อมูล
interface RequestItemsObject {
name: String;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns };

View file

@ -1,31 +1,30 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
row: RequestItemsObject
rowIndex: number
}
//ข้อมูล
interface RequestItemsObject {
id: string;
level: string;
levelId: string;
name: string;
start: number;
end: number;
education: string;
major: string;
id: string
qualificationId: string
qualification: string
major: string
scores: number | null
name: string
duration: any
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
name: String
align: String
label: String
sortable: Boolean
field: String
headerStyle: String
style: String
}
}
export type { RequestItemsObject, Columns, DataProps };
export type { RequestItemsObject, Columns, DataProps }

View file

@ -1,36 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
year: number;
receiveDate: Date;
insigniaType: string;
insigniaTypeId: string;
insignia: string;
insigniaId: string;
no: string;
gazetteNo: string;
volume: string;
book: string;
section: string;
page: string;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,38 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
year: number;
holiday: string;
sick: string;
government: string;
late: string;
other: string;
business: string;
maternity: string;
helpMaternity: string;
ordination: string;
study: string;
international: string;
spouse: string;
rehabilitation: string;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,25 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
detail: string;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,27 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
date: Date;
detail: string;
reference: string;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,33 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
date: Date;
position: string;
positionId: string;
posNo: string;
posNoId: string;
level: string;
levelId: string;
salary: string;
reference: string;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,27 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
side: string;
detail: string;
note: string;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,31 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
course: string;
start: Date;
end: Date;
location: string;
detail: string;
organize: string;
gen: string;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,28 +0,0 @@
interface DataProps {
row: RequestItemsObject;
rowIndex: number;
}
//ข้อมูล
interface RequestItemsObject {
id: string;
start: Date;
end: Date;
detail: string;
reference: string;
}
//columns
interface Columns {
[index: number]: {
name: String;
align: String;
label: String;
sortable: Boolean;
field: String;
headerStyle: String;
style: String;
};
}
export type { RequestItemsObject, Columns, DataProps };

View file

@ -1,11 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
date: Date;
status: string;
level: string;
refNo: string;
refDate: Date;
}
export type { ResponseObject };

View file

@ -1,9 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
receiveDate: Date;
detail: string;
agency: string;
}
export type { ResponseObject };

View file

@ -1,11 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
date: Date;
status: string;
level: string;
refNo: string;
refDate: Date;
}
export type { ResponseObject };

View file

@ -1,6 +0,0 @@
//ข้อมูล
interface ResponseObject {
name: String;
}
export type { ResponseObject };

View file

@ -1,13 +1,12 @@
//ข้อมูล
interface ResponseObject {
id: string;
level: string;
levelId: string;
name: string;
start: number;
end: number;
education: string;
major: string;
id: string
qualificationId: string
qualification: string
major: string
scores: number | null
name: string
duration: any
}
export type { ResponseObject };
export type { ResponseObject }

View file

@ -1,18 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
year: number;
receiveDate: Date;
insigniaType: string;
insigniaTypeId: string;
insignia: string;
insigniaId: string;
no: string;
gazetteNo: string;
volume: string;
book: string;
section: string;
page: string;
}
export type { ResponseObject };

View file

@ -1,20 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
year: number;
holiday: string;
sick: string;
government: string;
late: string;
other: string;
business: string;
maternity: string;
helpMaternity: string;
ordination: string;
study: string;
international: string;
spouse: string;
rehabilitation: string;
}
export type { ResponseObject };

View file

@ -1,7 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
detail: string;
}
export type { ResponseObject };

View file

@ -1,9 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
date: Date;
detail: string;
reference: string;
}
export type { ResponseObject };

View file

@ -1,15 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
date: Date;
position: string;
positionId: string;
posNo: string;
posNoId: string;
level: string;
levelId: string;
salary: string;
reference: string;
}
export type { ResponseObject };

View file

@ -1,9 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
side: string;
detail: string;
note: string;
}
export type { ResponseObject };

View file

@ -1,13 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
course: string;
start: Date;
end: Date;
location: string;
detail: string;
organize: string;
gen: string;
}
export type { ResponseObject };

View file

@ -1,10 +0,0 @@
//ข้อมูล
interface ResponseObject {
id: string;
start: Date;
end: Date;
detail: string;
reference: string;
}
export type { ResponseObject };

View file

@ -4,14 +4,17 @@ import { defineStore } from 'pinia'
export const useExamDataStore = defineStore('exam', () => {
interface exam {
main: { columns: String[] }
education: { columns: String[] }
}
const examData = ref<exam>({
main: { columns: [] }
main: { columns: [] },
education: { columns: [] }
})
const changeExamColumns = (system: String, val: String[]) => {
if (system == 'main') examData.value.main.columns = val
if (system == 'education') examData.value.education.columns = val
localStorage.setItem('exam', JSON.stringify(examData.value))
}