๊UI - รายละเอียดของ "หน่วยกก."
This commit is contained in:
watcharanondh
parent
dd27104a88
commit
c8808a69b2
8 changed files with 114 additions and 66 deletions
|
|
@ -36,24 +36,29 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<q-card flat bordered>
|
||||
<q-card flat bordered class="q-px-lg q-pb-lg">
|
||||
<div id="information" name="1" class="row col-12 information">
|
||||
<Informationvue v-model:statusEdit="statusEdit" :profileType="profileType" />
|
||||
</div>
|
||||
<div class="horizontal-line"></div>
|
||||
<div id="education" name="2" class="row col-12 q-mt-md">
|
||||
<EducationVue v-model:statusEdit="statusEdit" />
|
||||
</div>
|
||||
<div class="horizontal-line"></div>
|
||||
<div id="certicate" name="15" class="row col-12 q-mt-md">
|
||||
<Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
|
||||
</div>
|
||||
<div class="horizontal-line"></div>
|
||||
<div id="insignia" name="4" class="row col-12 q-mt-md">
|
||||
<InsigniaVue v-model:statusEdit="statusEdit" />
|
||||
</div>
|
||||
<div class="horizontal-line"></div>
|
||||
<div id="examresult" name="0" class="q-px-lg q-py-lg">
|
||||
<ExamResult />
|
||||
</div>
|
||||
<div class="horizontal-line"></div>
|
||||
<div id="qualification" name="0" class="q-px-lg q-py-lg">
|
||||
<Qualification />
|
||||
<Qualification v-model:statusEdit="statusEdit" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
@ -70,4 +75,9 @@ onMounted(async () => {
|
|||
.information:target {
|
||||
padding-top: 84px;
|
||||
}
|
||||
|
||||
.horizontal-line {
|
||||
background-color: #F4F4F4;
|
||||
height: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -942,7 +942,7 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md no-border">
|
||||
<q-form ref="myForm">
|
||||
<ProfileTable
|
||||
:rows="rows"
|
||||
|
|
@ -1378,4 +1378,9 @@ const getClass = (val: boolean) => {
|
|||
.modalfix {
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.no-border {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -546,7 +546,7 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<q-card flat class="col-12 q-px-lg q-py-md q-mt-md">
|
||||
<q-card flat class="col-12 q-px-lg q-py-md q-mt-md no-border">
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="ข้อมูลที่อยู่"
|
||||
|
|
|
|||
|
|
@ -565,7 +565,7 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md no-border">
|
||||
<q-form ref="myForm">
|
||||
<ProfileTable
|
||||
:rows="rows"
|
||||
|
|
|
|||
|
|
@ -611,7 +611,7 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md no-border">
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="ข้อมูลส่วนตัว"
|
||||
|
|
|
|||
|
|
@ -46,6 +46,18 @@ const closeModalError = () => {
|
|||
|
||||
</script>
|
||||
<template>
|
||||
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
|
||||
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
|
||||
<div>
|
||||
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
|
||||
</div>
|
||||
<div class="horizontal-line"></div>
|
||||
<div>
|
||||
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.horizontal-line {
|
||||
background-color: #F4F4F4;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -811,7 +811,7 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
||||
<q-card class="col-12 q-px-lg q-py-md no-border">
|
||||
<q-form ref="myForm">
|
||||
<ProfileTable
|
||||
:rows="rows"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,65 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import type { CheckboxItem } from "@/modules/05_placement/interface/index/Main";
|
||||
import type { QForm } from 'quasar';
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import HeaderTop from "@/modules/05_placement/components/exams_other/Information/top.vue";
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
modalError,
|
||||
} = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
notiNoEdit: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update:statusEdit"]);
|
||||
|
||||
const edit = ref<boolean>(false);
|
||||
const myform = ref<QForm | null>(null);
|
||||
const saveData = async () => {
|
||||
if (myform.value != null) {
|
||||
await myform.value.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
await editData();
|
||||
} else {
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const changeBtn = async () => {
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
edit.value = false;
|
||||
props.notiNoEdit();
|
||||
} else {
|
||||
emit("update:statusEdit", true);
|
||||
}
|
||||
} else {
|
||||
emit("update:statusEdit", false);
|
||||
}
|
||||
};
|
||||
|
||||
const editData = async () => {
|
||||
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
|
||||
}
|
||||
|
||||
const onCancel = async () => {
|
||||
if (myform.value != null) {
|
||||
myform.value.reset();
|
||||
}
|
||||
// await fetchData();
|
||||
};
|
||||
|
||||
|
||||
const selection = ref([]);
|
||||
const checkboxItems: CheckboxItem[] = [
|
||||
|
|
@ -19,66 +78,28 @@ const checkboxItems: CheckboxItem[] = [
|
|||
</script>
|
||||
<template>
|
||||
<div class="row">
|
||||
<q-icon name="mdi-briefcase-edit" size="1.5em" color="grey-5" class="q-pr-md" />
|
||||
<span class="text-bold text-subtitle2 ">การคัดกรองคุณสมบัติ</span>
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="การคัดกรองคุณสมบัติ"
|
||||
icon="mdi-briefcase-edit"
|
||||
:save="saveData"
|
||||
:history="false"
|
||||
:changeBtn="changeBtn"
|
||||
:disable="statusEdit"
|
||||
:cancel="onCancel"
|
||||
/>
|
||||
</div>
|
||||
<div class="contanier-box-mini">
|
||||
<q-card bordered class="card-panding">
|
||||
<div class="col-12 row items-center q-pa-sm header-text">
|
||||
การคัดกรองคุณสมบัติ
|
||||
</div>
|
||||
<div v-for="item of checkboxItems" :key="item.id" class="q-pa-sm">
|
||||
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="teal"
|
||||
class="checkbox-group" />
|
||||
<q-separator />
|
||||
</div>
|
||||
</q-card>
|
||||
<div class="contanier-checkbox">
|
||||
<div v-for="item of checkboxItems" :key="item.id" class="q-pt-md">
|
||||
<q-checkbox size="xs" v-model="selection" :val="item.id" :label="item.label" keep-color color="teal"
|
||||
:disable="false" />
|
||||
<q-separator />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.header-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #4F4F4F;
|
||||
}
|
||||
|
||||
.sub-text-right {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 150%;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.0025em;
|
||||
color: #35373C;
|
||||
}
|
||||
|
||||
.card-exam {
|
||||
border-radius: 5px;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
.header-sub-text-exam {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 150%;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
.header-sub-text-exam-2 {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 150%;
|
||||
color: #00AA86;
|
||||
}
|
||||
|
||||
.sub-text-exam {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
.contanier-checkbox {
|
||||
padding-left: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue