เพิ่ม UI เลือกรายชื่อส่งสำเนาคำสั่ง
This commit is contained in:
AnandaTon
parent
5144effebd
commit
7481826705
2 changed files with 335 additions and 3 deletions
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
<q-step
|
||||
:name="3"
|
||||
title="เลือก"
|
||||
title="เลือกรายชื่อส่งสำเนาคำสั่ง"
|
||||
prefix="3"
|
||||
:done="step > 3"
|
||||
:header-nav="step > 3"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,119 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">03</div>
|
||||
<div class="q-pa-md" style="min-height: 70vh; overflow-y: scroll">
|
||||
<div class="col-12 row q-py-sm items-center">
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
color="add"
|
||||
@click="clickAdd"
|
||||
icon="mdi-plus"
|
||||
>
|
||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<!-- การ์ดเพิ่มหน่วยงาน-->
|
||||
<q-form ref="myForm"> </q-form>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
v-model="filter"
|
||||
ref="filterRef"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
v-model="visibleColumns"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-pt-sm q-pl-md q-pr-md q-pb-md">
|
||||
<q-table
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:visible-columns="visibleColumns"
|
||||
:filter="filter"
|
||||
row-key="name"
|
||||
v-model:selected="selected"
|
||||
class="custom-header-table"
|
||||
:pagination-label="paginationLabel"
|
||||
v-model:pagination="pagination"
|
||||
>
|
||||
<template v-slot:body-cell="props">
|
||||
<q-td :props="props">
|
||||
<div v-if="props.col.name == 'no'">
|
||||
{{ props.rowIndex + 1 }}
|
||||
</div>
|
||||
<div v-else-if="props.col.name == 'notification'">
|
||||
<q-select
|
||||
:class="getClass(true)"
|
||||
hide-bottom-space
|
||||
multiple
|
||||
:outlined="true"
|
||||
dense
|
||||
use-chips
|
||||
lazy-rules
|
||||
:readonly="!true"
|
||||
:borderless="!true"
|
||||
v-model="props.value"
|
||||
:rules="[(val:any) => !!val || `${'กรุณาเลือกช่องทาง'}`,(val:any) => val.length > 0 || `${'กรุณาเลือกช่องทาง'}`]"
|
||||
:label="`${'เลือกช่องทาง'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="notificationOption"
|
||||
option-value="id"
|
||||
input-debounce="0"
|
||||
color="primary"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-black">
|
||||
ไม่พบข้อมูลที่ค้นหา
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div v-else @click="click(props)">
|
||||
{{ props.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="flex justify-end q-px-md q-gutter-sm">
|
||||
<q-btn
|
||||
|
|
@ -22,7 +135,10 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { ref, reactive } from "vue";
|
||||
import { useQuasar, QInput, QForm } from "quasar";
|
||||
import type { DataOption } from "@/modules/05_placement/interface/index/Main";
|
||||
import router from "@/router";
|
||||
|
||||
const props = defineProps({
|
||||
next: {
|
||||
|
|
@ -37,4 +153,220 @@ const props = defineProps({
|
|||
|
||||
const next = () => props.next();
|
||||
const previous = () => props.previous();
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const filterRef = ref<QInput>();
|
||||
const filter = ref<string>("");
|
||||
const visibleColumns = ref<String[]>([
|
||||
"no",
|
||||
"idcard",
|
||||
"name",
|
||||
"position",
|
||||
"department",
|
||||
"notification",
|
||||
]);
|
||||
const columns = [
|
||||
{ name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
|
||||
{
|
||||
name: "idcard",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
field: "idcard",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
align: "left",
|
||||
label: "ชื่อ-สกุล",
|
||||
field: "name",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
field: "position",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: "department",
|
||||
align: "left",
|
||||
label: "หน่วยงาน",
|
||||
field: "department",
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: "notification",
|
||||
align: "left",
|
||||
label: "ช่องทางการส่งสำเนา",
|
||||
field: "notification",
|
||||
sortable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const rows = [
|
||||
{
|
||||
no: "0ac56905-1a74-4606-a120-233340adde95",
|
||||
name: "นางนัทธ์ เหล่าสกุล",
|
||||
idcard: "9158455632145",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Email ",
|
||||
},
|
||||
{
|
||||
no: "0de607a0-b094-4a6d-9e30-979343ab5e53",
|
||||
name: "นางขรรค์ จันทรสมบัติ",
|
||||
idcard: "8558455632126",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Inbox",
|
||||
},
|
||||
{
|
||||
no: "93ca7366-2a35-4f94-a331-9c23c9ea78d3",
|
||||
name: "นางโอภาส จรัสวงศ์",
|
||||
idcard: "8158455635425",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Notification",
|
||||
},
|
||||
{
|
||||
no: "d3777c19-2bd0-42df-90ce-c3eeeee55ac6",
|
||||
name: "นางธิญา หงษ์ทอง",
|
||||
idcard: "4558455632145",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Notification",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางธนวิทย์ พิกุลเทพ",
|
||||
idcard: "5542455632145",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Inbox ",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางหนึ่ง สตาภิรมย์",
|
||||
idcard: "7448455632145",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Inbox ",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางสัจพร คมคาย",
|
||||
idcard: "1236455632145",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Inbox ",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางตุลยากร ปรีดาศิริกุล",
|
||||
idcard: "1523455632145",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Inbox ",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางบัลลังค์ จิรวาณิชย์",
|
||||
idcard: "1258455632145",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Inbox ",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางคมคาย เรืองรังสรรค์",
|
||||
idcard: "8548455632145",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Inbox ",
|
||||
},
|
||||
{
|
||||
no: "1ccead6f-a851-4291-b3ab-a20757ecddbd",
|
||||
name: "นางพรทิพา คมคาย",
|
||||
idcard: "6598455632145",
|
||||
position: "ผู้อำนวยการ",
|
||||
department: "กลุ่มงานช่วยบริหาร",
|
||||
notification: "Inbox ",
|
||||
},
|
||||
];
|
||||
// const clickAdd = () => {
|
||||
// router.push({ name: "OrderplacementDetail" });
|
||||
// };
|
||||
const selected = ref([]);
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 10,
|
||||
});
|
||||
const notificationOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
|
||||
|
||||
const click = (e: any) => {
|
||||
console.log(e);
|
||||
};
|
||||
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const clickAdd = async () => {
|
||||
await myForm.value!.validate().then(async (result: boolean) => {
|
||||
// console.log(result);
|
||||
});
|
||||
};
|
||||
|
||||
const selectData = (row: any) => {};
|
||||
|
||||
const paging = ref<boolean>(true);
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
filter.value = "";
|
||||
filterRef.value!.focus();
|
||||
};
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
.custom-header-table {
|
||||
max-height: 64vh;
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue