แก้ สืบ สอบ

This commit is contained in:
setthawutttty 2023-12-15 17:29:47 +07:00
parent 749113a3cc
commit 480393efe3
8 changed files with 375 additions and 31 deletions

View file

@ -17,6 +17,7 @@ import type {
FormRef,
DataOption,
DataOptionRes,
FileArray,
} from "@/modules/11_discipline/interface/request/result";
const mainStore = useDisciplineMainStore();
@ -56,9 +57,20 @@ const props = defineProps({
},
});
const ArrayFile = reactive<FileArray>({
id: "",
fileName: "",
pathName: "",
});
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
resultDescription: "",
disciplineType: "",
titleType: "",
oc: "",
file: null,
disciplineComplaint_Appeal_Docs: [ArrayFile],
year: new Date().getFullYear(),
});
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@ -184,11 +196,61 @@ function changeFormData() {
/**
* งขอมลจำลองไปย store
*/
function uploadFile() {
/** uploadFile */
// const Data = new FormData();
// Data.append("file", formData.file);
// showLoader();
// http
// .put(config.API.appealUpLoadFile(formData.id), Data)
// .then((res) => {
// console.log(res);
// success($q, "");
// props.getData();
// // router.push(`/discipline/complaints`);
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(async () => {
// hideLoader();
// formData.file = null;
// });
}
function downloadFile(link: string) {
// window.open(link, "_blank");
}
function deleteFile(id: string) {
// dialogRemove($q, () => confirmDelete(id));
}
/**
* นย ลบ ไฟล
* @param id id file
*/
function confirmDelete(id: string) {
// showLoader();
// http
// .delete(config.API.appealDeleteFile(formData.id, id))
// .then((res) => {
// success($q, ``);
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// props.getData();
// });
}
onMounted(async () => {});
</script>
<template>
<div class="row col-12">
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-sm-12 col-md-9">
<div v-if="isSave" class="q-pa-sm q-gutter-sm">
<q-banner
inline-actions
@ -200,7 +262,7 @@ onMounted(async () => {});
</q-banner>
</div>
<form @submit.prevent="validateForm">
<q-card>
<q-card bordered>
<div class="q-pa-md">
<div class="row col-12 q-gutter-sm">
<div class="col-xs-12 col-sm-2">
@ -383,6 +445,72 @@ onMounted(async () => {});
@update:model-value="changeFormData()"
/>
</div>
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-3">
<q-input
v-model="formData.disciplineType"
dense
outlined
label="ประเภทวินัย"
/>
</div>
<div class="col-3">
<q-input
v-model="formData.titleType"
dense
outlined
label="ประเภทของเรื่อง"
/>
</div>
<div class="col-4">
<q-input
v-model="formData.oc"
dense
outlined
label="หน่วยงาน/ส่วนราชการ"
/>
</div>
<div class="col-2">
<datepicker
menu-class-name="modalfix"
v-model="formData.year"
class="col-2"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
:model-value="
formData.year === 0
? null
: Number(formData.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
</div>
</div>
</div>
<q-separator />
@ -409,5 +537,89 @@ onMounted(async () => {});
/> -->
</form>
</div>
<!-- พโหลดไฟล -->
<div class="col-sm-12 col-md-3">
<q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
<div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
ปโหลดไฟลเอกสารหลกฐาน
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 q-pa-sm row">
<q-file
for="inputFiles"
class="col-11"
outlined
dense
v-model="formData.file"
@added="uploadFile"
label="ไฟล์เอกสารหลักฐาน"
hide-bottom-space
lazy-rules
accept=".pdf,.xlsx,.doc"
clearable
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<div class="col-1 self-center text-center">
<q-btn
v-if="formData.file && isReadonly"
size="14px"
flat
round
dense
color="add"
icon="mdi-upload"
@click="uploadFile"
><q-tooltip>ปโหลดไฟล</q-tooltip></q-btn
>
</div>
</div>
<div
v-if="formData.disciplineComplaint_Appeal_Docs.length > 0"
class="col-xs-12 q-pa-sm row"
>
<q-list
v-for="data in formData.disciplineComplaint_Appeal_Docs"
:key="data.id"
class="full-width"
bordered
separator
>
<q-item clickable v-ripple>
<q-item-section>{{ data.fileName }}</q-item-section>
<q-space />
<q-btn
size="12px"
flat
round
dense
color="blue"
icon="mdi-download"
@click="downloadFile(data.pathName)"
><q-tooltip>ดาวนโหลดไฟล</q-tooltip></q-btn
>
<q-btn
size="12px"
flat
round
dense
color="red"
class="q-ml-sm"
icon="mdi-delete-outline"
@click="deleteFile(data.id)"
><q-tooltip>ลบไฟล</q-tooltip></q-btn
>
</q-item>
</q-list>
</div>
<div class="col-12 q-pa-sm" v-else>
<q-card class="q-pa-md" bordered> ไมรายการเอกสาร </q-card>
</div>
</q-card>
</div>
</div>
</template>