modal-detail
This commit is contained in:
setthawutttty
parent
fa6d916e36
commit
ca91efbaa5
6 changed files with 634 additions and 433 deletions
90
src/modules/05_placement/components/DialogFooter.vue
Normal file
90
src/modules/05_placement/components/DialogFooter.vue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<q-card-actions class="text-primary">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!editvisible"
|
||||
flat
|
||||
round
|
||||
:disabled="editvisible"
|
||||
:color="editvisible ? 'grey-7' : 'primary'"
|
||||
@click="edit"
|
||||
icon="mdi-pencil-outline"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<div v-else>
|
||||
<!-- <q-btn
|
||||
flat
|
||||
round
|
||||
:disabled="!editvisible"
|
||||
:outline="!editvisible"
|
||||
:color="!editvisible ? 'grey-7' : 'red'"
|
||||
@click="cancel()"
|
||||
icon="mdi-undo"
|
||||
v-if="modalEdit == true"
|
||||
>
|
||||
<q-tooltip>ยกเลิก</q-tooltip>
|
||||
</q-btn> -->
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
:disabled="!editvisible"
|
||||
:color="!editvisible ? 'grey-7' : 'public'"
|
||||
@click="checkSave"
|
||||
icon="mdi-content-save-outline"
|
||||
>
|
||||
<q-tooltip>บันทึก</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card-actions>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
editvisible: Boolean,
|
||||
modalEdit: Boolean,
|
||||
cancel: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
edit: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
save: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
validate: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits([
|
||||
"update:editvisible",
|
||||
"update:next",
|
||||
"update:previous",
|
||||
]);
|
||||
|
||||
const updateEdit = (value: Boolean) => {
|
||||
emit("update:editvisible", value);
|
||||
};
|
||||
const cancel = async () => {
|
||||
props.cancel();
|
||||
};
|
||||
const edit = async () => {
|
||||
updateEdit(!props.editvisible);
|
||||
props.edit();
|
||||
};
|
||||
const checkSave = () => {
|
||||
props.validate();
|
||||
props.save();
|
||||
// if (myForm.value !== null) {
|
||||
// myForm.value.validate().then((success) => {
|
||||
// if (success) {
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
27
src/modules/05_placement/components/DialogHeader.vue
Normal file
27
src/modules/05_placement/components/DialogHeader.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<q-toolbar>
|
||||
<q-toolbar-title class="text-subtitle2 text-bold">{{ tittle }}</q-toolbar-title>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="close"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
tittle: String,
|
||||
close: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const close = async () => {
|
||||
props.close();
|
||||
};
|
||||
</script>
|
||||
|
|
@ -3,11 +3,65 @@ import { ref, defineComponent, h } from "vue";
|
|||
import Table from "@/modules/05_placement/components/PlacementTableView.vue";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import type { TableName } from "@/modules/05_placement/interface/request/placement";
|
||||
import { usePlacementDataStore } from "@/modules/05_placement/store";
|
||||
import type { QTableProps } from "quasar";
|
||||
import DialogHeader from "@/modules/05_placement/components/DialogHeader.vue";
|
||||
import DialogFooter from "@/modules/05_placement/components/DialogFooter.vue";
|
||||
const editvisible = ref<boolean>(false);
|
||||
const myForm = ref<QForm | null>(null);
|
||||
const edit = ref<boolean>(false);
|
||||
const visibleColumns = ref<String[]>([]);
|
||||
const store = usePlacementDataStore();
|
||||
const filter = ref<string>("");
|
||||
const { placementData } = store;
|
||||
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
|
||||
const modal = ref<boolean>(false); //modal add detail
|
||||
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
|
||||
const position = ref<number>();
|
||||
const Name = ref<string>();
|
||||
const ExamOrder = ref<number>();
|
||||
const Unit = ref<string>();
|
||||
const ReportingDate = ref<string>();
|
||||
const BMAOfficer = ref<boolean>();
|
||||
const Status = ref<string>();
|
||||
const checkList = ref<string>();
|
||||
|
||||
const $q = useQuasar(); // show dialog
|
||||
|
||||
const selectData = (props: TableName) => {
|
||||
if (editvisible.value == true) {
|
||||
editRow.value = false;
|
||||
modalEdit.value = true;
|
||||
modal.value = false;
|
||||
edit.value = true;
|
||||
position.value = props.position;
|
||||
Name.value = props.Name;
|
||||
ExamOrder.value = props.ExamOrder;
|
||||
Unit.value = props.Unit;
|
||||
ReportingDate.value = props.ReportingDate;
|
||||
BMAOfficer.value = props.BMAOfficer;
|
||||
Status.value = props.Status;
|
||||
checkList.value = props.checkList;
|
||||
}else{
|
||||
editRow.value = false;
|
||||
modalEdit.value = true;
|
||||
modal.value = true;
|
||||
edit.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
placementData.mappingPosition.columns.length == 0
|
||||
? (visibleColumns.value = [
|
||||
"position",
|
||||
"Name",
|
||||
"ExamOrder",
|
||||
"Unit",
|
||||
"ReportingDate",
|
||||
"BMAOfficer",
|
||||
"Status",
|
||||
"checkList",
|
||||
])
|
||||
: (visibleColumns.value = placementData.mappingPosition.columns);
|
||||
const columns = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "position",
|
||||
|
|
@ -66,7 +120,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
{
|
||||
name: "BMAOfficer",
|
||||
align: "center",
|
||||
align: "left",
|
||||
label: "ข้าราชการฯ กทม.",
|
||||
sortable: true,
|
||||
field: "BMAOfficer",
|
||||
|
|
@ -77,7 +131,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
},
|
||||
{
|
||||
name: "Status",
|
||||
align: "center",
|
||||
align: "left",
|
||||
label: "สถานะการบรรจุ",
|
||||
sortable: true,
|
||||
field: "Status",
|
||||
|
|
@ -87,7 +141,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
||||
},
|
||||
]);
|
||||
const rows = [
|
||||
const rows = ref<TableName[]>([
|
||||
{
|
||||
position: 1,
|
||||
Name: "setthawut",
|
||||
|
|
@ -96,6 +150,7 @@ const rows = [
|
|||
ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "บรรจุเเล้ว",
|
||||
checkList:null
|
||||
},
|
||||
{
|
||||
position: 1,
|
||||
|
|
@ -105,6 +160,7 @@ const rows = [
|
|||
ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "ยังไม่บรรจุ",
|
||||
checkList:null
|
||||
},
|
||||
{
|
||||
position: 1,
|
||||
|
|
@ -114,8 +170,9 @@ const rows = [
|
|||
ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "เตรียมบรรจุ",
|
||||
checkList:null
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
position: 1,
|
||||
Name: "setthawut",
|
||||
|
|
@ -124,17 +181,20 @@ const rows = [
|
|||
ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "เตรียมบรรจุ",
|
||||
checkList:null
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
position: 1,
|
||||
Name: "setthawut",
|
||||
Name: "tee",
|
||||
ExamOrder: 1,
|
||||
Unit: "chamomind",
|
||||
ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "เตรียมบรรจุ",
|
||||
},{
|
||||
checkList:null
|
||||
},
|
||||
{
|
||||
position: 1,
|
||||
Name: "setthawut",
|
||||
ExamOrder: 1,
|
||||
|
|
@ -142,18 +202,37 @@ const rows = [
|
|||
ReportingDate: "30 พ.ค. 2566", //วันที่รายงานตัว
|
||||
BMAOfficer: true,
|
||||
Status: "บรรจุเเล้ว",
|
||||
checkList:null
|
||||
},
|
||||
|
||||
];
|
||||
]);
|
||||
const clickCancel = async () => {
|
||||
editvisible.value = false;
|
||||
};
|
||||
const clickClose = async () => {
|
||||
if (editRow.value == true) {
|
||||
$q.dialog({
|
||||
title: `ข้อมูลมีการแก้ไข`,
|
||||
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
|
||||
cancel: "ยกเลิก",
|
||||
ok: "ยืนยัน",
|
||||
persistent: true,
|
||||
}).onOk(async () => {
|
||||
modal.value = false;
|
||||
});
|
||||
} else {
|
||||
modal.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<q-form ref="myForm">
|
||||
<Table
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:filter="filter"
|
||||
:visible-columns="visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="visibleColumns"
|
||||
v-model:editvisible="editvisible"
|
||||
:cancel="clickCancel"
|
||||
:history="true"
|
||||
|
|
@ -208,7 +287,7 @@ const clickCancel = async () => {
|
|||
</q-td>
|
||||
<q-td auto-width>
|
||||
<div v-if="props.row.Status === 'บรรจุเเล้ว'">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div v-else-if="props.row.Status === 'ยังไม่บรรจุ'">
|
||||
<q-btn
|
||||
|
|
@ -218,7 +297,6 @@ const clickCancel = async () => {
|
|||
round
|
||||
size="14px"
|
||||
icon="mdi-account-alert"
|
||||
|
||||
/>
|
||||
<q-btn
|
||||
color="red"
|
||||
|
|
@ -227,11 +305,9 @@ const clickCancel = async () => {
|
|||
round
|
||||
size="14px"
|
||||
icon="mdi-account-remove"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div v-else align="right">
|
||||
|
||||
<q-btn
|
||||
color="red"
|
||||
flat
|
||||
|
|
@ -239,7 +315,6 @@ const clickCancel = async () => {
|
|||
round
|
||||
size="14px"
|
||||
icon="mdi-account-remove"
|
||||
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
|
|
@ -247,4 +322,25 @@ const clickCancel = async () => {
|
|||
</template>
|
||||
</Table>
|
||||
</q-form>
|
||||
<q-dialog v-model="modal" persistent>
|
||||
<q-card style="width: 800px">
|
||||
<q-form ref="myForm">
|
||||
<!-- :tittle="`${modalEdit ? 'แก้ไข' : 'สร้าง'}รายละเอียดของ...`" -->
|
||||
<DialogHeader
|
||||
:tittle="`รายละเอียดของ`"
|
||||
:close="clickClose"
|
||||
/>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-sm">
|
||||
text
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<DialogFooter
|
||||
:save="clickSave"
|
||||
v-model:editvisible="edit"
|
||||
v-model:modalEdit="modalEdit"
|
||||
/>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,425 +1,398 @@
|
|||
<template>
|
||||
<div class="q-px-md q-pb-md">
|
||||
<div class="col-12 row q-py-sm" v-if="nornmalData == false">
|
||||
<div class="q-px-md q-pb-md">
|
||||
<div class="col-12 row q-py-sm" v-if="nornmalData == false">
|
||||
<q-btn
|
||||
size="12px"
|
||||
v-if="!editvisible"
|
||||
flat
|
||||
round
|
||||
:disabled="editvisible"
|
||||
:color="editvisible ? 'grey-7' : 'primary'"
|
||||
@click="clickEdit"
|
||||
icon="mdi-pencil-outline"
|
||||
>
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
size="12px"
|
||||
flat
|
||||
round
|
||||
v-if="editvisible"
|
||||
:disabled="!editvisible"
|
||||
:color="!editvisible ? 'grey-7' : 'red'"
|
||||
@click="clickCancel"
|
||||
icon="mdi-undo"
|
||||
>
|
||||
<q-tooltip>ยกเลิก</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="q-px-sm">
|
||||
<q-btn
|
||||
v-if="!editvisible == true && publicNoBtn == false"
|
||||
flat
|
||||
round
|
||||
:disabled="editvisible == true"
|
||||
:color="editvisible == true ? 'grey-7' : 'primary'"
|
||||
@click="edit"
|
||||
icon="mdi-pencil-outline"
|
||||
>
|
||||
|
||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-else
|
||||
flat
|
||||
round
|
||||
:disabled="editvisible == false"
|
||||
:outline="editvisible == false"
|
||||
:color="editvisible == false ? 'grey-7' : 'red'"
|
||||
@click="cancel()"
|
||||
icon="mdi-undo"
|
||||
:color="editvisible == false ? 'grey-7' : 'public'"
|
||||
@click="add"
|
||||
icon="mdi-content-save-outline"
|
||||
>
|
||||
<q-tooltip>ยกเลิก</q-tooltip>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
<div class="q-px-sm">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
:disabled="editvisible == false"
|
||||
:color="editvisible == false ? 'grey-7' : 'public'"
|
||||
@click="add"
|
||||
icon="mdi-content-save-outline"
|
||||
>
|
||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
|
||||
<div
|
||||
class="row items-center"
|
||||
style="display: flex"
|
||||
v-if="publicData == false && publicNoBtn == false"
|
||||
>
|
||||
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
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
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- header บน table มี ค้นหา แสดงคอลัมน์ (status nornmalData true) -->
|
||||
<div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
|
||||
<span class="text-subtitle1">{{ titleText }}</span>
|
||||
<!-- <q-select
|
||||
:model-value="inputvisibleFilter"
|
||||
:options="optionsFilter"
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/> -->
|
||||
<q-select
|
||||
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<div
|
||||
class="row items-center"
|
||||
style="display: flex"
|
||||
v-if="publicData == false && publicNoBtn == false"
|
||||
></div>
|
||||
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
:model-value="inputvisibleFilter"
|
||||
:options="optionsFilter"
|
||||
class="col-xs-12 col-sm-4 col-md-3"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
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
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
@update:model-value="updateVisibleFilter"
|
||||
v-if="optionsFilter != undefined && optionsFilter.length > 0"
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
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
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
:pagination="initialPagination"
|
||||
:rows-per-page-options="paging == true ? [25, 50, 100, 500] : []"
|
||||
>
|
||||
<!-- :pagination="initialPagination" -->
|
||||
<!-- :rows-per-page-options="[0]" -->
|
||||
<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-th
|
||||
auto-width
|
||||
v-if="
|
||||
editvisible == true || nextPageVisible == true || history == true
|
||||
"
|
||||
/>
|
||||
|
||||
</q-tr>
|
||||
|
||||
</template>
|
||||
<!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
|
||||
<template #body="props" >
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const { dialogMessage } = mixin;
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const table = ref<any>(null);
|
||||
const filterRef = ref<any>(null);
|
||||
const modalPublish = ref<boolean>(false);
|
||||
const modalDelete = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
inputfilter: String,
|
||||
inputvisible: Array,
|
||||
inputvisibleFilter: String,
|
||||
editvisible: Boolean,
|
||||
titleText: String,
|
||||
optionsFilter: {
|
||||
type: Array,
|
||||
defualt: [],
|
||||
},
|
||||
boss: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
saveNoDraft: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
history: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
paging: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
nornmalData: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
nextPageVisible: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
publicData: {
|
||||
type: Boolean,
|
||||
defualt: true,
|
||||
required: false,
|
||||
},
|
||||
updateData: {
|
||||
type: Boolean,
|
||||
defualt: true,
|
||||
required: false,
|
||||
},
|
||||
publicNoBtn: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
add: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
edit: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
save: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
deleted: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
cancel: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
publish: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
validate: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const initialPagination = ref<any>({
|
||||
// descending: false,
|
||||
rowsPerPage: props.paging == true ? 25 : 0,
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
"update:inputfilter",
|
||||
"update:inputvisible",
|
||||
"update:editvisible",
|
||||
"update:titleText",
|
||||
"update:inputvisibleFilter",
|
||||
]);
|
||||
|
||||
const updateEdit = (value: any) => {
|
||||
emit("update:editvisible", value);
|
||||
};
|
||||
const updateInput = (value: any) => {
|
||||
emit("update:inputfilter", value);
|
||||
};
|
||||
const updateVisible = (value: any) => {
|
||||
emit("update:inputvisible", value);
|
||||
};
|
||||
const updateVisibleFilter = (value: any) => {
|
||||
emit("update:inputvisibleFilter", value);
|
||||
};
|
||||
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (props.paging == true)
|
||||
return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
const checkSave = () => {
|
||||
props.validate();
|
||||
props.save();
|
||||
// if (myForm.value !== null) {
|
||||
// myForm.value.validate().then((success) => {
|
||||
// if (success) {
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
};
|
||||
|
||||
const publishModal = () => {
|
||||
props.validate();
|
||||
const filter = attrs.value.rows.filter((r: any) => r.name == "");
|
||||
|
||||
if (filter.length == 0 || attrs.value.rows.length == 0) {
|
||||
// modalPublish.value = true;
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
|
||||
"ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
|
||||
"public",
|
||||
"เผยแพร่",
|
||||
"public",
|
||||
props.publish,
|
||||
undefined
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const DeleteModal = () => {
|
||||
// modalDelete.value = true;
|
||||
|
||||
<div class="col-12 row q-py-sm items-center" v-if="nornmalData == true">
|
||||
<span class="text-subtitle1">{{ titleText }}</span>
|
||||
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
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
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
:pagination="initialPagination"
|
||||
:rows-per-page-options="[0]"
|
||||
>
|
||||
<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-th auto-width v-if="history == true" />
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const { dialogMessage } = mixin;
|
||||
const editvisible = ref<boolean>(false);
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const table = ref<any>(null);
|
||||
const filterRef = ref<any>(null);
|
||||
const modalPublish = ref<boolean>(false);
|
||||
const modalDelete = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
inputfilter: String,
|
||||
inputvisible: Array,
|
||||
inputvisibleFilter: String,
|
||||
editvisible: Boolean,
|
||||
titleText: String,
|
||||
optionsFilter: {
|
||||
type: Array,
|
||||
defualt: [],
|
||||
},
|
||||
boss: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
saveNoDraft: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
history: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
paging: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
nornmalData: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
nextPageVisible: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
publicData: {
|
||||
type: Boolean,
|
||||
defualt: true,
|
||||
required: false,
|
||||
},
|
||||
updateData: {
|
||||
type: Boolean,
|
||||
defualt: true,
|
||||
required: false,
|
||||
},
|
||||
publicNoBtn: {
|
||||
type: Boolean,
|
||||
defualt: false,
|
||||
},
|
||||
add: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
edit: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
save: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
deleted: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
cancel: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
publish: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
validate: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const initialPagination = ref<any>({
|
||||
// descending: false,
|
||||
rowsPerPage: props.paging == true ? 25 : 0,
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
"update:inputfilter",
|
||||
"update:inputvisible",
|
||||
"update:editvisible",
|
||||
"update:titleText",
|
||||
"update:inputvisibleFilter",
|
||||
]);
|
||||
|
||||
const updateEdit = (value: any) => {
|
||||
emit("update:editvisible", value);
|
||||
};
|
||||
const updateInput = (value: any) => {
|
||||
emit("update:inputfilter", value);
|
||||
};
|
||||
const updateVisible = (value: any) => {
|
||||
emit("update:inputvisible", value);
|
||||
};
|
||||
const updateVisibleFilter = (value: any) => {
|
||||
emit("update:inputvisibleFilter", value);
|
||||
};
|
||||
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
if (props.paging == true)
|
||||
return " " + start + " ใน " + end + " จากจำนวน " + total + " รายการ";
|
||||
else return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
const checkSave = () => {
|
||||
props.validate();
|
||||
props.save();
|
||||
// if (myForm.value !== null) {
|
||||
// myForm.value.validate().then((success) => {
|
||||
// if (success) {
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
};
|
||||
const clickEdit = () => {
|
||||
updateEdit(!props.editvisible);
|
||||
editvisible.value = !editvisible.value;
|
||||
props.edit();
|
||||
};
|
||||
const clickCancel = () => {
|
||||
updateEdit(!props.editvisible);
|
||||
editvisible.value = !editvisible.value;
|
||||
props.cancel();
|
||||
};
|
||||
const publishModal = () => {
|
||||
props.validate();
|
||||
const filter = attrs.value.rows.filter((r: any) => r.name == "");
|
||||
|
||||
if (filter.length == 0 || attrs.value.rows.length == 0) {
|
||||
// modalPublish.value = true;
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
|
||||
"ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
|
||||
"mdi-file-remove-outline",
|
||||
"ลบบันทึก",
|
||||
"red",
|
||||
props.deleted,
|
||||
"ต้องการเผยแพร่ข้อมูลนี้หรือไม่?",
|
||||
"ข้อมูลที่กำลังถูกเผยแพร่นี้จะมีผลใช้งานทันที",
|
||||
"public",
|
||||
"เผยแพร่",
|
||||
"public",
|
||||
props.publish,
|
||||
undefined
|
||||
);
|
||||
};
|
||||
|
||||
const edit = async () => {
|
||||
updateEdit(!props.editvisible);
|
||||
props.edit();
|
||||
};
|
||||
|
||||
const add = async () => {
|
||||
// if (myForm.value !== null) {
|
||||
// myForm.value.validate();
|
||||
// }
|
||||
props.validate();
|
||||
props.add();
|
||||
await table.value.lastPage();
|
||||
await table.value.scrollTo(attrs.value.rows.length - 1);
|
||||
};
|
||||
|
||||
const deleted = async () => {
|
||||
// const deletedF = () => {
|
||||
if (props.publicNoBtn === false) {
|
||||
updateEdit(false);
|
||||
}
|
||||
props.deleted();
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
emit("update:inputfilter", "");
|
||||
filterRef.value.focus();
|
||||
};
|
||||
</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;
|
||||
}
|
||||
};
|
||||
|
||||
const DeleteModal = () => {
|
||||
// modalDelete.value = true;
|
||||
dialogMessage(
|
||||
$q,
|
||||
"ต้องการลบข้อมูลบันทึกร่างนี้หรือไม่?",
|
||||
"ข้อมูลบันทึกร่างที่กำลังถูกลบนี้จะมีผลใช้งานทันที",
|
||||
"mdi-file-remove-outline",
|
||||
"ลบบันทึก",
|
||||
"red",
|
||||
props.deleted,
|
||||
undefined
|
||||
);
|
||||
};
|
||||
|
||||
const edit = async () => {
|
||||
updateEdit(!props.editvisible);
|
||||
props.edit();
|
||||
};
|
||||
|
||||
const add = async () => {
|
||||
// if (myForm.value !== null) {
|
||||
// myForm.value.validate();
|
||||
// }
|
||||
props.validate();
|
||||
props.add();
|
||||
await table.value.lastPage();
|
||||
await table.value.scrollTo(attrs.value.rows.length - 1);
|
||||
};
|
||||
|
||||
const deleted = async () => {
|
||||
// const deletedF = () => {
|
||||
if (props.publicNoBtn === false) {
|
||||
updateEdit(false);
|
||||
}
|
||||
</style>
|
||||
|
||||
props.deleted();
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
emit("update:inputfilter", "");
|
||||
filterRef.value.focus();
|
||||
};
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
interface TableName {
|
||||
position: string;
|
||||
position: number;
|
||||
Name: string;
|
||||
ExamOrder: number;
|
||||
Unit: string;
|
||||
|
|
@ -10,20 +10,8 @@ interface TableName {
|
|||
|
||||
}
|
||||
|
||||
interface RequestReport2 {
|
||||
organizationShortNameId: string;
|
||||
organizationOrganizationId: string;
|
||||
positionNumId: string;
|
||||
positionTypeId: string;
|
||||
positionExecutiveId: string;
|
||||
positionExecutiveSideId: string;
|
||||
positionPathId: string;
|
||||
positionPathSideId: string;
|
||||
positionLevelId: string;
|
||||
status: string | null;
|
||||
}
|
||||
|
||||
export type {
|
||||
TableName,
|
||||
RequestReport2,
|
||||
|
||||
};
|
||||
|
|
@ -1,5 +1,32 @@
|
|||
import { defineStore } from "pinia";
|
||||
|
||||
import { ref, computed } from "vue";
|
||||
export const useProfileDataStore = defineStore("placement", () => {
|
||||
return {};
|
||||
});
|
||||
export const usePlacementDataStore = defineStore("placement", () => {
|
||||
interface placement {
|
||||
mappingPosition: { columns: String[] };
|
||||
}
|
||||
const placementData = ref<placement>({
|
||||
mappingPosition: { columns: [] },
|
||||
});
|
||||
const changePlacementColumns = (system: String, val: String[]) => {
|
||||
if (system == "mappingPosition")
|
||||
placementData.value.mappingPosition.columns = val;
|
||||
localStorage.setItem(
|
||||
"placement",
|
||||
JSON.stringify(placementData.value)
|
||||
);
|
||||
};
|
||||
|
||||
if (localStorage.getItem("placement") !== null) {
|
||||
placementData.value = JSON.parse(
|
||||
localStorage.getItem("placement") || "{}"
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
placementData,
|
||||
changePlacementColumns,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue