hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

no message

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-08-23 16:00:32 +07:00
parent cc3f375ca9
commit 8c9760bb83
4 changed files with 641 additions and 444 deletions
Download patch file Download diff file Expand all files Collapse all files

204
src/modules/07_insignia/components/3_result/fileUpload.vue Normal file
View file

@ -0,0 +1,204 @@
<script setup lang="ts">
import { ref } from "vue";
import type { QTableProps } from "quasar";
const fileUpload = ref<any>(null);
const reason = ref<string>("");
const documentTitle = ref<string>("");
const filterKeyword = ref<string>("");
const filterDoc = ref<any>(null);
const visibleColumnsReference = ref<String[]>([
"no",
"fileName",
"annotation",
"file",
]);
const colums2 = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
field: "no",
sortable: true,
},
{
name: "fileName",
align: "left",
label: "ชื่อเอกสาร",
field: "fileName",
sortable: true,
},
{
name: "annotation",
align: "left",
label: "หมายเหตุ",
field: "annotation",
sortable: true,
},
{
name: "file",
align: "left",
label: "ไฟล์เอกสาร",
field: "file",
sortable: true,
},
]);
const rows2 = ref<any>([
{
no: "1",
fileName: "test1",
annotation: "ทดสอบ",
file: "",
},
{
no: "2",
fileName: "test2",
annotation: "ทดสอบ",
file: "",
},
]);
const resetFilterRef = () => {
filterKeyword.value = "";
filterDoc.value.focus();
};
const pagination = ref({
sortBy: "filename",
descending: true,
page: 1,
rowsPerPage: 10,
});
</script>
<template>
<Transition>
<div class="bg-base rounded-borders q-pa-md q-mb-md">
<div class="row col-12 q-col-gutter-x-lg q-col-gutter-y-md">
<div class="col-xs-6 col-md-4">
<q-file
class="bg-white"
outlined
dense
v-model="fileUpload"
label="ไฟล์เอกสาร"
hide-bottom-space
lazy-rules
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
</div>
<div class="col-xs-6 col-md-3">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="documentTitle"
:label="`${'ชื่อเอกสาร'}`"
hide-bottom-space
/>
</div>
<div class="col-xs-12 col-md-5">
<q-input
class="bg-white"
outlined
dense
lazy-rules
v-model="reason"
:label="`${'หมายเหตุ'}`"
hide-bottom-space
/>
</div>
<div class="row col-12">
<q-space />
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterDoc"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="filterKeyword == ''" name="search" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilterRef"
/>
</template>
</q-input>
<q-select
v-model="visibleColumnsReference"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="colums2"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2 q-ml-sm"
/>
</div>
<div class="col-12 q-pt-sm">
<d-table
:columns="colums2"
:rows="rows2"
:filter="filterKeyword"
row-key="fileName"
:visible-columns="visibleColumnsReference"
v-model:pagination="pagination"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<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="annotation" :props="props">
{{ props.row.annotation }}
</q-td>
<q-td auto-width>
<q-btn
dense
size="14px"
flat
round
color="deep-orange-6"
icon="picture_as_pdf"
>
<q-tooltip>ดาว์โหลด PDF</q-tooltip>
</q-btn>
</q-td>
</q-tr>
</template>
</d-table>
</div>
<div class="col-xs-12 col-md-9"></div>
<div class="col-xs-12 col-md-3 flexsave"></div>
</div>
</div>
</Transition>
</template>
<style scoped></style>