แก้ไขตาม task

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-10-06 13:32:54 +07:00
parent bf8fb777cf
commit 90a47d43ad
26 changed files with 2652 additions and 228 deletions

View file

@ -67,15 +67,26 @@ const props = defineProps({
</div> -->
<div class="col q-pl-xl">
<q-card class="q-pt-xs">
<div class="header-text-right q-px-xs">ผลการสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">{{ props.data.pass }}</div>
<div class="header-text-right q-px-xs">ลำดบทสอบได</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.examNumber }}
</div>
<div class="header-text-right q-px-xs">จำนวนครงทสมครสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.examRound }}
<div class="row">
<div class="col">
<div class="header-text-right q-px-xs">ผลการสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.pass ? props.data.pass : "-" }}
</div>
</div>
<div class="col">
<div class="header-text-right q-px-xs">ลำดบทสอบได</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.examNumber ? props.data.examNumber : "-" }}
</div>
</div>
<div class="col">
<div class="header-text-right q-px-xs">จำนวนครงทสมครสอบ</div>
<div class="sub-text-right q-px-xs q-pb-sm">
{{ props.data.examRound ? props.data.examRound : "-" }}
</div>
</div>
</div>
</q-card>
</div>

View file

@ -0,0 +1,276 @@
<template>
<q-card flat bordered class="col-12 row q-px-lg q-py-md">
<HeaderTop
v-model:edit="edit"
header="เอกสารหลักฐาน"
icon="mdi-file-document"
:history="false"
:changeBtn="changeBtn"
:disable="statusEdit"
:save="uploadData"
/>
<div class="row col-12 q-pt-sm">
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.fileName }}
</q-item-label>
<q-item-label caption> </q-item-label>
</q-item-section>
<q-item-section top side>
<div class="row col-12">
<q-btn
class="gt-xs"
size="12px"
flat
dense
round
color="blue"
icon="mdi-download-outline"
@click="downloadData(file.file)"
>
<q-tooltip>ดาวนโหลดเอกสารหลกฐาน</q-tooltip>
</q-btn>
<q-btn
class="gt-xs"
size="12px"
flat
dense
round
color="red"
icon="mdi-delete-outline"
v-show="edit"
@click="deleteData(file.id)"
>
<q-tooltip>ลบเอกสารหลกฐาน</q-tooltip>
</q-btn>
</div>
</q-item-section>
</q-item>
</q-list>
</q-card>
<q-input
v-if="edit"
class="q-mt-sm col-12 q-pb-xs"
outlined
dense
lazy-rules
v-model="name"
hide-bottom-space
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
:label="`${'ชื่อเอกสาร'}`"
/>
<q-uploader
v-if="edit"
color="gray"
type="file"
flat
@factory="uploadData"
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.docx,.doc"
bordered
@added="fileAdd"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทงหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟลปโหลด</q-tooltip>
</q-btn>
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,docx ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลอกไฟล</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลกการอปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
</q-card>
</template>
<script setup lang="ts">
import { onMounted, computed, ref, watch } from "vue";
import { useQuasar, QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute } from "vue-router";
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
import http from "@/plugins/http";
import config from "@/app.config";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
notiNoEdit: {
type: Function,
default: () => console.log("not function"),
},
fetch: {
type: Function,
default: () => console.log("not function"),
},
});
const emit = defineEmits(["update:statusEdit"]);
const $q = useQuasar(); // show dialog
const mixin = useCounterMixin();
const route = useRoute();
const { success, messageError, showLoader, hideLoader } = mixin;
const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const edit = ref<boolean>(false);
const uploader = ref<any>();
const files = ref<any>([]);
const file = ref<any>([]);
const name = ref<string>("");
onMounted(async () => {
await getData();
// props.fetch()
});
const getData = async () => {
if (profileId.value) {
showLoader();
await http
.get(config.API.profilePaperId(profileId.value))
.then((res) => {
const data = res.data.result;
files.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
};
const deleteData = async (id: string) => {
showLoader();
await http
.delete(config.API.profilePaperId(id))
.then((res) => {
const data = res.data.result;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await getData();
});
};
const uploadData = async () => {
if (profileId.value) {
if (file.value.length > 0) {
const blob = file.value.slice(0, file.value[0].size);
const newFile = new File(blob, name.value, {
type: file.value[0].type,
});
const formData = new FormData();
formData.append("avatar", newFile);
formData.append("moss", "newFile");
showLoader();
await http
.post(config.API.profilePaperId(profileId.value), formData)
.then((res) => {
const data = res.data.result;
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
uploader.value.reset();
name.value = "";
edit.value = false;
emit("update:statusEdit", false);
await getData();
});
} else {
// modalError(
// $q,
// "",
// ""
// );
getData();
}
}
};
const fileAdd = async (val: any) => {
name.value = val[0].name;
file.value = val;
};
const downloadData = async (path: string) => {
window.open(path);
};
const changeBtn = async () => {
name.value = "";
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
props.notiNoEdit();
} else {
emit("update:statusEdit", true);
}
} else {
emit("update:statusEdit", false);
}
};
</script>

View file

@ -342,8 +342,9 @@ onMounted(async () => {
<span class="text-primary q-pr-sm">{{
"ครั้งที่ " + round
}}</span>
ระหวางวนท
<span class="text-black q-px-sm">
</div>
<div class="col-12 text-top0 row items-center">
<div class="col-6 q-px-sm">
<datepicker
menu-class-name="modalfix"
v-model="start_date"
@ -367,8 +368,8 @@ onMounted(async () => {
:model-value="
start_date != null ? date2Thai(start_date) : null
"
:label="`${'งวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
:label="`${'ระหว่างวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
@ -381,9 +382,8 @@ onMounted(async () => {
</q-input>
</template>
</datepicker>
</span>
งวนท
<span class="text-black q-px-sm">
</div>
<div class="col-6 q-px-sm">
<datepicker
menu-class-name="modalfix"
v-model="date_finish"
@ -407,8 +407,8 @@ onMounted(async () => {
:model-value="
date_finish != null ? date2Thai(date_finish) : null
"
:label="`${'งวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
:label="`${'ถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
@ -421,7 +421,7 @@ onMounted(async () => {
</q-input>
</template>
</datepicker>
</span>
</div>
</div>
<div class="col-12 q-pt-md">
<q-separator size="3px" color="grey-2" />

View file

@ -453,8 +453,9 @@ watch(lengthdiscipline_level, (newLength) => {
<span class="text-primary q-pr-sm">{{
`ครั้งที่ ${evaluate_no}`
}}</span>
ระหวางวนท
<span class="text-black q-px-sm">
</div>
<div class="col-12 text-top0 row items-center">
<div class="col-6 q-px-sm">
<datepicker
menu-class-name="modalfix"
v-model="start_date"
@ -478,8 +479,8 @@ watch(lengthdiscipline_level, (newLength) => {
:model-value="
start_date != null ? date2Thai(start_date) : null
"
:label="`${'งวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
:label="`${'ระหว่างวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
@ -492,9 +493,8 @@ watch(lengthdiscipline_level, (newLength) => {
</q-input>
</template>
</datepicker>
</span>
งวนท
<span class="text-black q-px-sm">
</div>
<div class="col-6 q-px-sm">
<datepicker
menu-class-name="modalfix"
v-model="date_finish"
@ -518,8 +518,8 @@ watch(lengthdiscipline_level, (newLength) => {
:model-value="
date_finish != null ? date2Thai(date_finish) : null
"
:label="`${'งวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
:label="`${'ถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
@ -532,7 +532,7 @@ watch(lengthdiscipline_level, (newLength) => {
</q-input>
</template>
</datepicker>
</span>
</div>
</div>
<div class="col-12 q-pt-md">
<q-separator size="3px" color="grey-2" />

View file

@ -398,8 +398,9 @@ const getBordered = (i: boolean) => {
นทกผล<span class="text-primary q-pr-sm">{{
"ครั้งที่ " + round
}}</span>
ระหวางวนท
<span class="text-black q-px-sm">
</div>
<div class="col-12 text-top0 row items-center">
<div class="col-6 q-px-sm">
<datepicker
menu-class-name="modalfix"
v-model="start_date"
@ -423,8 +424,8 @@ const getBordered = (i: boolean) => {
:model-value="
start_date != null ? date2Thai(start_date) : null
"
:label="`${'งวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
:label="`${'ระหว่างวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
@ -437,9 +438,8 @@ const getBordered = (i: boolean) => {
</q-input>
</template>
</datepicker>
</span>
งวนท
<span class="text-black q-px-sm">
</div>
<div class="col-6 q-px-sm">
<datepicker
menu-class-name="modalfix"
v-model="date_finish"
@ -463,8 +463,8 @@ const getBordered = (i: boolean) => {
:model-value="
date_finish != null ? date2Thai(date_finish) : null
"
:label="`${'งวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
:label="`${'ถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
@ -477,7 +477,7 @@ const getBordered = (i: boolean) => {
</q-input>
</template>
</datepicker>
</span>
</div>
</div>
<div class="col-12 q-pt-md">
<q-separator size="3px" color="grey-2" />

View file

@ -406,8 +406,9 @@ onMounted(async () => {
นทกผล<span class="text-primary q-pr-sm">{{
"ครั้งที่ " + round
}}</span>
ระหวางวนท
<span class="text-black q-px-sm">
</div>
<div class="col-12 text-top0 row items-center">
<div class="col-6 q-px-sm">
<datepicker
menu-class-name="modalfix"
v-model="start_date"
@ -431,8 +432,8 @@ onMounted(async () => {
:model-value="
start_date != null ? date2Thai(start_date) : null
"
:label="`${'งวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
:label="`${'ระหว่างวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
@ -445,9 +446,8 @@ onMounted(async () => {
</q-input>
</template>
</datepicker>
</span>
งวนท
<span class="text-black q-px-sm">
</div>
<div class="col-6 q-px-sm">
<datepicker
menu-class-name="modalfix"
v-model="date_finish"
@ -471,8 +471,8 @@ onMounted(async () => {
:model-value="
date_finish != null ? date2Thai(date_finish) : null
"
:label="`${'งวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
:label="`${'ถึงวันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
>
<template v-slot:prepend>
<q-icon
@ -485,7 +485,7 @@ onMounted(async () => {
</q-input>
</template>
</datepicker>
</span>
</div>
</div>
<div class="col-12 q-pt-md">
<q-separator size="3px" color="grey-2" />