เพิ่ม ui อัพโหลดไฟล์ / detail file
This commit is contained in:
AnandaTon
parent
72529c5d6c
commit
38e7c6b56a
2 changed files with 180 additions and 3 deletions
|
|
@ -49,7 +49,36 @@ const status = ref<string>("");
|
|||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const edit = ref<boolean>(false);
|
||||
|
||||
const rows = ref<any[]>([]);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: true,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fileName",
|
||||
align: "left",
|
||||
label: "ชื่อไฟล์",
|
||||
sortable: true,
|
||||
field: "fileName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "btnMicrosoft",
|
||||
align: "right",
|
||||
label: "ปุ่ม",
|
||||
sortable: true,
|
||||
field: "btnMicrosoft",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const profileId = ref<string>("");
|
||||
const educationOld = ref<string>("");
|
||||
const organizationPositionOld = ref<string>("");
|
||||
|
|
@ -170,7 +199,17 @@ const getData = async () => {
|
|||
.get(config.API.receiveDataId(paramsId.toString()))
|
||||
.then(async (res: any) => {
|
||||
const data = res.data.result;
|
||||
|
||||
// console.log(data);
|
||||
let list: any[] = [];
|
||||
if (data.docs.length > 0) {
|
||||
data.docs.map((doc: any) => {
|
||||
list.push({
|
||||
pathName: doc.pathName ?? "",
|
||||
fileName: doc.fileName ?? "",
|
||||
});
|
||||
});
|
||||
}
|
||||
rows.value = list;
|
||||
profileId.value = data.profileId;
|
||||
title.value.fullname = `${data.firstname ?? "-"} ${data.lastname ?? "-"}`;
|
||||
title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
|
||||
|
|
@ -1012,6 +1051,37 @@ const getClass = (val: boolean) => {
|
|||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-12">
|
||||
<d-table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
row-key="fileName"
|
||||
hide-header
|
||||
hide-bottom
|
||||
>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td key="no" :props="props">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td key="fileName" :props="props">
|
||||
{{ props.row.fileName }}
|
||||
</q-td>
|
||||
<q-td key="btnMicrosoft" :props="props">
|
||||
<q-btn type="a" target="_blank" :href="props.row.pathName" flat dense round color="red" icon="picture_as_pdf">
|
||||
<q-tooltip>ไฟล์ PDF</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -45,6 +45,8 @@ const popup = () => {
|
|||
modal.value = true;
|
||||
};
|
||||
|
||||
const modalupload = ref<boolean>(false);
|
||||
|
||||
const modalTree = ref<boolean>(false);
|
||||
const personal = ref<any[]>([]);
|
||||
const personalId = ref<string>("");
|
||||
|
|
@ -70,7 +72,8 @@ const visibleColumns2 = ref<string[]>([
|
|||
const filterKeyword = ref<string>("");
|
||||
const filterKeyword2 = ref<string>("");
|
||||
const filterRef = ref<any>(null);
|
||||
|
||||
const files = ref<any>();
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const listRecevice = ref<any[]>([]);
|
||||
const filters = ref<ResponseRow[]>([]);
|
||||
const rows = ref<ResponseRow[]>([
|
||||
|
|
@ -309,6 +312,32 @@ const fecthlistRecevice = async () => {
|
|||
});
|
||||
};
|
||||
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
};
|
||||
|
||||
const addUpload= async () => {
|
||||
// showLoader();
|
||||
// await http
|
||||
// .post(config.API.listRoundInsignia())
|
||||
// .then(() => {
|
||||
// success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// messageError($q, e);
|
||||
// })
|
||||
// .finally(async () => {
|
||||
// hideLoader();
|
||||
// });
|
||||
};
|
||||
|
||||
const SaveData = async () => {
|
||||
await addUpload();
|
||||
await clickCloseUpload();
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
filterKeyword.value = "";
|
||||
filterKeyword2.value = "";
|
||||
|
|
@ -328,6 +357,9 @@ const add = () => {
|
|||
const clickClose = () => {
|
||||
modal.value = false;
|
||||
};
|
||||
const clickCloseUpload = () => {
|
||||
modalupload.value = false;
|
||||
};
|
||||
|
||||
const openModalTree = (id: string) => {
|
||||
personalId.value = id;
|
||||
|
|
@ -337,6 +369,11 @@ const openModalTree = (id: string) => {
|
|||
modalTree.value = true;
|
||||
};
|
||||
|
||||
const openUpload = (id: string) => {
|
||||
personalId.value = id;
|
||||
modalupload.value = true;
|
||||
};
|
||||
|
||||
const openDelete = (id: string) => {
|
||||
dialogRemove($q, async () => await fetchDataDelete(id));
|
||||
};
|
||||
|
|
@ -594,6 +631,35 @@ const saveOrder = async () => {
|
|||
>เลือกหน่วยงานที่รับโอน</q-item-section
|
||||
>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="openUpload(props.row.personalId)"
|
||||
:disable="
|
||||
props.row.status == 'REPORT' ||
|
||||
props.row.status == 'DONE'
|
||||
"
|
||||
>
|
||||
<q-item-section
|
||||
style="min-width: 0px"
|
||||
avatar
|
||||
class="q-py-sm"
|
||||
>
|
||||
<q-icon
|
||||
:color="
|
||||
props.row.status == 'REPORT' ||
|
||||
props.row.status == 'DONE'
|
||||
? 'grey'
|
||||
: 'blue'
|
||||
"
|
||||
size="xs"
|
||||
name="attach_file"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section
|
||||
>อัพโหลดเอกสาร</q-item-section
|
||||
>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
|
|
@ -794,6 +860,47 @@ const saveOrder = async () => {
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-dialog v-model="modalupload">
|
||||
<q-card style="width: 600px">
|
||||
<DialogHeader title="อัพโหลดเอกสาร" :close="clickCloseUpload" />
|
||||
<q-separator />
|
||||
<q-separator />
|
||||
<q-card-section class="q-pt-none">
|
||||
<div class="col-12 row items-center q-col-gutter-sm">
|
||||
<div class="col-12">
|
||||
<q-file
|
||||
outlined
|
||||
dense
|
||||
v-model="files"
|
||||
@added="fileUploadDoc"
|
||||
label="อัพโหลดเอกสาร"
|
||||
lazy-rules
|
||||
>
|
||||
<!-- :rules="[
|
||||
(val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
|
||||
]" -->
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-actions class="text-primary q-py-sm">
|
||||
<q-space />
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="public"
|
||||
@click="SaveData"
|
||||
icon="mdi-content-save-outline"
|
||||
>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<DialogOrgTree
|
||||
v-model:modal="modalTree"
|
||||
:close="closeModalTree"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue