Merge branch 'develop' into dev
* develop: update selected and load data fix: insigniaForm.year refactor(ui): apply +543 year formatting to columns fix: payload multiple fix: rowsPerPage 100 fix fix:add filter rowsPerPage = 3000 fix : orgTreeDnaId feat:Change Round Multiple
This commit is contained in:
commit
6967d90c25
12 changed files with 511 additions and 220 deletions
|
|
@ -112,7 +112,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format(val, row) {
|
||||
return `${row.year + 543}`;
|
||||
return `${row.year ? row.year + 543 : "-"}`;
|
||||
},
|
||||
sort: (a: number, b: number) => b - a,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ const baseColumns = ref<QTableColumn[]>([
|
|||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => v + 543,
|
||||
format: (v) => (v ? v + 543 : "-"),
|
||||
sort: (a: string, b: string) =>
|
||||
a
|
||||
.toString()
|
||||
|
|
@ -920,9 +920,11 @@ onMounted(async () => {
|
|||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year="{ year }">{{
|
||||
year ? year + 543 : "-"
|
||||
}}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
value ? parseInt(value + 543) : "-"
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
|
|
@ -930,7 +932,7 @@ onMounted(async () => {
|
|||
outlined
|
||||
hide-bottom-space
|
||||
class="inputgreen"
|
||||
:model-value="insigniaForm.year !== 0 ? (insigniaForm.year as number) + 543 : null"
|
||||
:model-value="insigniaForm.year != null && insigniaForm.year !== 0 ? (insigniaForm.year as number) + 543 : null"
|
||||
:rules="[
|
||||
(val:string) =>
|
||||
!!val ||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => v + 543,
|
||||
format: (v) => (v ? v + 543 : "-"),
|
||||
},
|
||||
{
|
||||
name: "receiveDate",
|
||||
|
|
|
|||
|
|
@ -27,7 +27,11 @@ const {
|
|||
convertDateToAPI,
|
||||
} = mixin;
|
||||
|
||||
const emit = defineEmits(["update:change-page"]);
|
||||
const emit = defineEmits(["update:change-page", "update:selected"]);
|
||||
|
||||
const isMultiple = defineModel<boolean>("isMultiple", {
|
||||
default: false,
|
||||
});
|
||||
|
||||
/**Props */
|
||||
const props = defineProps({
|
||||
|
|
@ -40,6 +44,10 @@ const props = defineProps({
|
|||
type: String,
|
||||
default: "",
|
||||
},
|
||||
selectedMultiple: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
/**FormData */
|
||||
|
|
@ -118,18 +126,43 @@ function onSubmit() {
|
|||
async function changeRound() {
|
||||
const formattedDateForAPI = await convertDateToAPI(formData.effectiveDate);
|
||||
|
||||
const url =
|
||||
const urlAPI =
|
||||
props.type == "emp" ? config.API.leaveRoundEMP() : config.API.leaveRound();
|
||||
showLoader();
|
||||
await http
|
||||
.post(url, {
|
||||
|
||||
const urlFull = isMultiple.value ? urlAPI + `/multiple ` : urlAPI;
|
||||
let payload: any;
|
||||
if (isMultiple.value && props.selectedMultiple.length > 0) {
|
||||
payload = props.selectedMultiple.map((item: any) => ({
|
||||
profileId: item.profileId,
|
||||
roundId: formData.round,
|
||||
effectiveDate: formattedDateForAPI,
|
||||
remark: formData.reson,
|
||||
firstName: item.firstName,
|
||||
lastName: item.lastName,
|
||||
prefix: item.prefix,
|
||||
rootDnaId: item.rootDnaId,
|
||||
child1DnaId: item.child1DnaId,
|
||||
child2DnaId: item.child2DnaId,
|
||||
child3DnaId: item.child3DnaId,
|
||||
child4DnaId: item.child4DnaId,
|
||||
}));
|
||||
} else {
|
||||
payload = {
|
||||
profileId: props.personId,
|
||||
roundId: formData.round,
|
||||
effectiveDate: formattedDateForAPI,
|
||||
remark: formData.reson,
|
||||
})
|
||||
};
|
||||
}
|
||||
await http
|
||||
.post(urlFull, payload)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลเปลี่ยนรอบเวลา");
|
||||
if (isMultiple.value) {
|
||||
emit("update:selected");
|
||||
isMultiple.value = false;
|
||||
}
|
||||
props.closeDialog?.();
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -242,10 +275,10 @@ watch(
|
|||
? "เปลี่ยนรอบการปฏิบัติงาน"
|
||||
: "ประวัติการเปลี่ยนรอบการปฏิบัติงาน"
|
||||
}}
|
||||
<span class="text-teal-6">{{
|
||||
props.DataRow ? props.DataRow.fullName : ""
|
||||
}}</span></q-toolbar-title
|
||||
>
|
||||
<span class="text-teal-6" v-if="!isMultiple">
|
||||
{{ props.DataRow ? props.DataRow.fullName : "" }}
|
||||
</span>
|
||||
</q-toolbar-title>
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
|
|
@ -259,7 +292,7 @@ watch(
|
|||
<q-separator />
|
||||
<q-card-section style="max-height: 50vh" class="scroll q-pa-none">
|
||||
<div class="q-pa-md">
|
||||
<div class="row">
|
||||
<div class="row" v-if="!isMultiple">
|
||||
<q-icon
|
||||
name="mdi-label-variant"
|
||||
class="cursor-pointer self-center"
|
||||
|
|
@ -267,12 +300,12 @@ watch(
|
|||
size="md"
|
||||
>
|
||||
</q-icon>
|
||||
<span class="self-center text-bold text-blue text-subtitle1"
|
||||
>รอบปัจจุบัน</span
|
||||
>
|
||||
<span class="self-center text-subtitle1 q-ml-sm">{{
|
||||
props.DataRow ? `${props.DataRow.currentRound} น.` : ""
|
||||
}}</span>
|
||||
<span class="self-center text-bold text-blue text-subtitle1">
|
||||
รอบปัจจุบัน
|
||||
</span>
|
||||
<span class="self-center text-subtitle1 q-ml-sm">
|
||||
{{ props.DataRow ? `${props.DataRow.currentRound} น.` : "" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="row q-mt-sm q-col-gutter-sm">
|
||||
<div class="col-6">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ interface DataPost {
|
|||
lastName: string;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
selectedNodeId: string | null;
|
||||
selectedNode: string;
|
||||
}
|
||||
|
||||
interface DataOption {
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export const useChangeRoundDataStore = defineStore(
|
|||
|
||||
async function fetchDataForCardId(dataDetail: any, type?: string) {
|
||||
if (dataDetail) {
|
||||
showLoader();
|
||||
// showLoader();
|
||||
const url =
|
||||
type && type == "emp"
|
||||
? config.API.leaveSearchEMP()
|
||||
|
|
@ -138,6 +138,8 @@ export const useChangeRoundDataStore = defineStore(
|
|||
page: dataDetail.page, //หน้า
|
||||
pageSize: dataDetail.pageSize || 10, //จำนวนแถวต่อหน้า
|
||||
keyword: dataDetail.keyword || "", //keyword ค้นหา
|
||||
selectedNodeId: dataDetail.selectedNodeId, //id ต้นไม้ที่เลือก
|
||||
selectedNode: dataDetail.selectedNode, //ระดับต้นไม้ที่เลือก
|
||||
})
|
||||
.then((res) => {
|
||||
const apiData = res.data.result.data;
|
||||
|
|
@ -148,6 +150,7 @@ export const useChangeRoundDataStore = defineStore(
|
|||
if (apiData.length > 0) {
|
||||
checkCilck.value = false;
|
||||
rows.value = apiData.map((e: any) => ({
|
||||
...e,
|
||||
profileId: e.profileId,
|
||||
cardId: e.citizenId,
|
||||
fullName: e.fullName,
|
||||
|
|
@ -167,7 +170,7 @@ export const useChangeRoundDataStore = defineStore(
|
|||
console.log(e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
// hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, reactive, onMounted } from "vue";
|
||||
import { ref, watch, reactive, onMounted, nextTick } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -7,22 +7,20 @@ import config from "@/app.config";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { useStructureTree } from "@/stores/structureTree";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import type { DataPost } from "@/modules/09_leave/interface/request/changeRound";
|
||||
|
||||
import Dialogform from "@/modules/09_leave/components/03_ChangeRound/DialogForm.vue";
|
||||
|
||||
/** useStore */
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
success,
|
||||
messageError,
|
||||
dialogMessageNotify,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
|
||||
const { showLoader, hideLoader, success, messageError, dialogConfirm } = mixin;
|
||||
const dataStore = useChangeRoundDataStore();
|
||||
const { fetchStructureTree } = useStructureTree();
|
||||
|
||||
/** use */
|
||||
const $q = useQuasar();
|
||||
|
|
@ -37,9 +35,42 @@ const formData = reactive<DataPost>({
|
|||
firstName: "",
|
||||
lastName: "",
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 100,
|
||||
selectedNodeId: null,
|
||||
selectedNode: "",
|
||||
});
|
||||
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
|
||||
/** โครงสร้างข้อมูลต้นไม้ขององค์กร **/
|
||||
const nodeTree = ref<any[]>([]);
|
||||
const expanded = ref<string[]>([]);
|
||||
const orgTreeId = ref<string | null>(null);
|
||||
const filter = ref<string>("");
|
||||
const selected = ref<any[]>([]);
|
||||
const isMultiple = ref<boolean>(false);
|
||||
|
||||
/** client-side data & batch loading **/
|
||||
const allRows = ref<any[]>([]);
|
||||
const isLoadingAll = ref<boolean>(false);
|
||||
const loadAllProgress = ref<number>(0);
|
||||
const totalToLoad = ref<number | null>(null);
|
||||
const BATCH_SIZE = 250;
|
||||
|
||||
function waitForUi() {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, 0);
|
||||
});
|
||||
}
|
||||
|
||||
/** function fetch ข้อมูลของ Tree*/
|
||||
async function fetchDataTree() {
|
||||
nodeTree.value = await fetchStructureTree(route.meta.Key as string, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Function openPopup
|
||||
* @param check action edit,history
|
||||
|
|
@ -87,6 +118,7 @@ async function OpenmodalFix(detail: any) {
|
|||
function closeDialog() {
|
||||
modal.value = false;
|
||||
modalFix.value = false;
|
||||
isMultiple.value = false;
|
||||
}
|
||||
|
||||
function save() {
|
||||
|
|
@ -110,214 +142,415 @@ function save() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param newPagination ข้อมูล Pagination ใหม่
|
||||
*/
|
||||
function updatePagination(newPagination: any) {
|
||||
formData.pageSize = newPagination.rowsPerPage;
|
||||
/** Function โหลดข้อมูลทั้งหมดแบบ batch แล้วให้ QTable ทำ pagination เอง */
|
||||
async function fetchAllData() {
|
||||
isLoadingAll.value = true;
|
||||
allRows.value = [];
|
||||
loadAllProgress.value = 0;
|
||||
totalToLoad.value = null;
|
||||
selected.value = [];
|
||||
|
||||
// ให้ UI แสดงสถานะกำลังโหลดทันที ก่อนรอผล API แรก
|
||||
await nextTick();
|
||||
await waitForUi();
|
||||
|
||||
try {
|
||||
await dataStore.fetchDataForCardId({
|
||||
...formData,
|
||||
page: 1,
|
||||
pageSize: BATCH_SIZE,
|
||||
});
|
||||
allRows.value = dataStore.rows.slice();
|
||||
|
||||
const total = dataStore.totalListMain;
|
||||
totalToLoad.value = total;
|
||||
const totalPages = Math.ceil(total / BATCH_SIZE);
|
||||
loadAllProgress.value =
|
||||
totalPages <= 1 ? 100 : Math.round(100 / totalPages);
|
||||
await nextTick();
|
||||
|
||||
for (let page = 2; page <= totalPages; page++) {
|
||||
await dataStore.fetchDataForCardId({
|
||||
...formData,
|
||||
page,
|
||||
pageSize: BATCH_SIZE,
|
||||
});
|
||||
allRows.value.push(...dataStore.rows);
|
||||
loadAllProgress.value = Math.round((page / totalPages) * 100);
|
||||
await nextTick();
|
||||
await waitForUi();
|
||||
}
|
||||
} finally {
|
||||
isLoadingAll.value = false;
|
||||
totalToLoad.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
/** Function ค้นหาข้อมูล */
|
||||
async function searchData() {
|
||||
if (formData.cardId || formData.firstName || formData.lastName) {
|
||||
await dataStore.fetchDataForCardId(formData);
|
||||
} else {
|
||||
dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
|
||||
}
|
||||
await fetchAllData();
|
||||
}
|
||||
|
||||
function submitSearchByEnter() {
|
||||
if (isLoadingAll.value) return;
|
||||
if (!checkPermission(route)?.attrIsGet) return;
|
||||
formData.page = 1;
|
||||
searchData();
|
||||
}
|
||||
|
||||
/** Function เลือกทั้งหมด */
|
||||
function selectAllRows() {
|
||||
selected.value = [...allRows.value];
|
||||
}
|
||||
|
||||
function onSelectedOrgTree(data: any) {
|
||||
if (isLoadingAll.value) return;
|
||||
selected.value = [];
|
||||
allRows.value = [];
|
||||
orgTreeId.value = data.orgTreeId;
|
||||
formData.selectedNodeId = data.orgTreeDnaId;
|
||||
formData.selectedNode = data.orgLevel;
|
||||
formData.page = 1;
|
||||
}
|
||||
|
||||
function handleSelectMultiple() {
|
||||
modal.value = true;
|
||||
isMultiple.value = true;
|
||||
editCheck.value = "edit";
|
||||
}
|
||||
|
||||
function resetSelected() {
|
||||
selected.value = [];
|
||||
}
|
||||
|
||||
watch(
|
||||
() => formData.pageSize,
|
||||
() => {
|
||||
formData.page = 1;
|
||||
searchData();
|
||||
// pageSize ถูกควบคุมโดย QTable (client-side) ไม่ต้อง fetch API ใหม่
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchDataTree();
|
||||
dataStore.rows = [];
|
||||
allRows.value = [];
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
เปลี่ยนแปลงรอบการปฏิบัติงานของข้าราชการ
|
||||
</div>
|
||||
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
|
||||
<div class="row col-12 q-mb-sm">
|
||||
<q-card flat bordered class="bg-grey-2 col-12 bg-white q-pa-lg">
|
||||
<div class="text-dark col-12 text-weight-bold text-subtitle1">
|
||||
ค้นหารายชื่อ
|
||||
|
||||
<q-card>
|
||||
<q-card-section :horizontal="$q.screen.gt.xs">
|
||||
<q-card-section class="col-lg-3 col-md-4 col-xs-12 q-gutter-sm">
|
||||
<div>
|
||||
<q-input dense outlined v-model="filter" label="ค้นหา">
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="row justify-between q-gutter-y-sm">
|
||||
<q-input
|
||||
:readonly="!checkPermission($route)?.attrIsGet"
|
||||
v-model="formData.cardId"
|
||||
outlined
|
||||
label="เลขประจำตัวประชาชน"
|
||||
class="col-6 col-md-4 bg-white inputgreen"
|
||||
<div class="bg-white tree-container q-pa-xs">
|
||||
<q-tree
|
||||
class="q-pa-sm q-gutter-sm"
|
||||
dense
|
||||
hide-bottom-space
|
||||
maxlength="13"
|
||||
/>
|
||||
<q-input
|
||||
:readonly="!checkPermission($route)?.attrIsGet"
|
||||
v-model="formData.firstName"
|
||||
outlined
|
||||
label="ชื่อ"
|
||||
class="col-5 col-md-3 bg-white inputgreen"
|
||||
dense
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
:readonly="!checkPermission($route)?.attrIsGet"
|
||||
v-model="formData.lastName"
|
||||
outlined
|
||||
label="นามสกุล"
|
||||
class="col-6 col-md-3 bg-white inputgreen"
|
||||
dense
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-btn
|
||||
v-if="checkPermission($route)?.attrIsGet"
|
||||
@click="(formData.page = 1), searchData()"
|
||||
for="#search"
|
||||
dense
|
||||
unelevated
|
||||
color="primary"
|
||||
class="q-px-sm col-5 col-md-1"
|
||||
style="max-height: 40px"
|
||||
>ค้นหา</q-btn
|
||||
:nodes="nodeTree"
|
||||
node-key="orgTreeId"
|
||||
label-key="labelName"
|
||||
:filter="filter.trim()"
|
||||
no-results-label="ไม่พบข้อมูลที่ค้นหา"
|
||||
no-nodes-label="ไม่มีข้อมูล"
|
||||
v-model:expanded="expanded"
|
||||
>
|
||||
<template v-slot:default-header="prop">
|
||||
<q-item
|
||||
clickable
|
||||
:active="orgTreeId == prop.node.orgTreeId"
|
||||
@click.stop="onSelectedOrgTree(prop.node)"
|
||||
active-class="my-list-link text-primary text-weight-medium"
|
||||
class="row col-12 text-dark items-center q-py-xs q-pl-sm rounded-borders my-list"
|
||||
>
|
||||
<div>
|
||||
<div class="text-weight-medium">
|
||||
{{ prop.node.orgTreeName }}
|
||||
</div>
|
||||
<div class="text-weight-light text-grey-8">
|
||||
{{ prop.node.orgCode == null ? null : prop.node.orgCode }}
|
||||
{{
|
||||
prop.node.orgTreeShortName == null
|
||||
? null
|
||||
: prop.node.orgTreeShortName
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-tree>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator :vertical="$q.screen.gt.xs" />
|
||||
<q-card-section
|
||||
class="col-lg-9 col-md-8 col-xs-12 q-gutter-sm scroll"
|
||||
style="height: 80vh"
|
||||
>
|
||||
<div class="row col-xs-12 col-sm-9">
|
||||
<q-card flat bordered class="bg-grey-2 col-12 bg-white q-pa-lg">
|
||||
<div class="text-dark col-12 text-weight-bold text-subtitle1">
|
||||
ค้นหารายชื่อ
|
||||
</div>
|
||||
<div class="row justify-between q-gutter-y-sm">
|
||||
<q-input
|
||||
:readonly="!checkPermission($route)?.attrIsGet || isLoadingAll"
|
||||
v-model="formData.cardId"
|
||||
outlined
|
||||
label="เลขประจำตัวประชาชน"
|
||||
class="col-6 col-md-4 bg-white inputgreen"
|
||||
dense
|
||||
hide-bottom-space
|
||||
maxlength="13"
|
||||
@keyup.enter="submitSearchByEnter"
|
||||
/>
|
||||
<q-input
|
||||
:readonly="!checkPermission($route)?.attrIsGet || isLoadingAll"
|
||||
v-model="formData.firstName"
|
||||
outlined
|
||||
label="ชื่อ"
|
||||
class="col-5 col-md-3 bg-white inputgreen"
|
||||
dense
|
||||
hide-bottom-space
|
||||
@keyup.enter="submitSearchByEnter"
|
||||
/>
|
||||
<q-input
|
||||
:readonly="!checkPermission($route)?.attrIsGet || isLoadingAll"
|
||||
v-model="formData.lastName"
|
||||
outlined
|
||||
label="นามสกุล"
|
||||
class="col-6 col-md-3 bg-white inputgreen"
|
||||
dense
|
||||
hide-bottom-space
|
||||
@keyup.enter="submitSearchByEnter"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="checkPermission($route)?.attrIsGet"
|
||||
@click="(formData.page = 1), searchData()"
|
||||
:disable="isLoadingAll"
|
||||
for="#search"
|
||||
dense
|
||||
unelevated
|
||||
color="primary"
|
||||
class="q-px-sm col-5 col-md-1"
|
||||
style="max-height: 40px"
|
||||
>ค้นหา</q-btn
|
||||
>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
allRows.length === 0 &&
|
||||
dataStore.checkCilck === true &&
|
||||
!isLoadingAll
|
||||
"
|
||||
>
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold"
|
||||
>ไม่พบข้อมูล</q-card
|
||||
>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-if="dataStore.rows.length === 0 && dataStore.checkCilck === true">
|
||||
<q-card
|
||||
flat
|
||||
bordered
|
||||
class="bg-grey-2 col-12 q-pa-lg text-center text-subtitle1 text-bold"
|
||||
>ไม่พบข้อมูล</q-card
|
||||
>
|
||||
</div>
|
||||
<div v-if="dataStore.rows.length !== 0" class="col-12 q-mt-xl">
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="dataStore.columns"
|
||||
:rows="dataStore.rows"
|
||||
row-key="interrogated"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="dataStore.visibleColumns"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
>
|
||||
<!-- :paging="true" -->
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width />
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
style="color: #000000; font-weight: 500"
|
||||
>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td>
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
icon="mdi-dots-horizontal-circle-outline"
|
||||
color="secondary"
|
||||
for="#cancel"
|
||||
dense
|
||||
round
|
||||
<div v-if="allRows.length !== 0 || isLoadingAll" class="col-12">
|
||||
<q-banner
|
||||
v-if="isLoadingAll"
|
||||
rounded
|
||||
class="bg-blue-1 text-primary q-mb-sm"
|
||||
>
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<q-spinner color="primary" size="22px" />
|
||||
<div v-if="totalToLoad === null || totalToLoad <= 500">
|
||||
กำลังค้นหาข้อมูล กรุณารอสักครู่
|
||||
</div>
|
||||
<div v-else>
|
||||
กำลังโหลดข้อมูลจำนวนมาก กรุณารอสักครู่
|
||||
<div class="text-caption text-grey-7">
|
||||
ระบบกำลังดึงข้อมูลทั้งหมด
|
||||
{{ totalToLoad.toLocaleString() }} รายการ
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-banner>
|
||||
<q-linear-progress
|
||||
v-if="isLoadingAll && totalToLoad === null"
|
||||
indeterminate
|
||||
color="primary"
|
||||
class="q-mb-xs"
|
||||
/>
|
||||
<q-linear-progress
|
||||
v-if="isLoadingAll && totalToLoad !== null"
|
||||
:value="loadAllProgress / 100"
|
||||
color="primary"
|
||||
class="q-mb-xs"
|
||||
/>
|
||||
<div
|
||||
v-if="isLoadingAll && totalToLoad !== null"
|
||||
class="text-caption text-grey-6 q-mb-xs"
|
||||
>
|
||||
กำลังโหลด... {{ allRows.length.toLocaleString() }} /
|
||||
{{ totalToLoad.toLocaleString() }} รายการ
|
||||
</div>
|
||||
<div class="row justify-between items-center q-mb-sm">
|
||||
<div class="row q-gutter-sm">
|
||||
<!-- <q-btn
|
||||
color="secondary"
|
||||
dense
|
||||
icon="mdi-checkbox-multiple-marked-outline"
|
||||
label="เลือกทั้งหมด"
|
||||
:disable="isLoadingAll || allRows.length === 0"
|
||||
@click="selectAllRows()"
|
||||
/> -->
|
||||
<q-btn
|
||||
:disable="selected.length === 0 || isLoadingAll"
|
||||
:color="selected.length === 0 ? 'grey' : 'info'"
|
||||
dense
|
||||
icon="mdi-shuffle-variant"
|
||||
:label="`เปลี่ยนรอบการลงเวลา${
|
||||
selected.length > 0 ? ` (${selected.length})` : ''
|
||||
}`"
|
||||
@click="handleSelectMultiple()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="dataStore.columns"
|
||||
:rows="allRows"
|
||||
row-key="profileId"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
virtual-scroll
|
||||
table-style="max-height: 58vh"
|
||||
class="custom-header-table"
|
||||
:visible-columns="dataStore.visibleColumns"
|
||||
hide-pagination
|
||||
v-model:pagination="pagination"
|
||||
selection="multiple"
|
||||
v-model:selected="selected"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width>
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
:disable="isLoadingAll"
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</q-th>
|
||||
<q-th auto-width />
|
||||
<q-th
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
style="color: #000000; font-weight: 500"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-if="checkPermission($route)?.attrIsUpdate"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="Openmodal('edit', props.row)"
|
||||
>
|
||||
<q-item-section style="min-width: 0px" avatar>
|
||||
<q-icon
|
||||
color="primary"
|
||||
name="mdi-shuffle-variant"
|
||||
size="xs"
|
||||
/>
|
||||
</q-item-section>
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td class="text-center">
|
||||
<q-checkbox
|
||||
keep-color
|
||||
color="primary"
|
||||
dense
|
||||
:disable="isLoadingAll"
|
||||
v-model="props.selected"
|
||||
/>
|
||||
</q-td>
|
||||
<q-td>
|
||||
<div>
|
||||
<q-btn
|
||||
flat
|
||||
icon="mdi-dots-horizontal-circle-outline"
|
||||
color="secondary"
|
||||
for="#cancel"
|
||||
dense
|
||||
round
|
||||
>
|
||||
<q-menu>
|
||||
<q-list>
|
||||
<q-item
|
||||
v-if="checkPermission($route)?.attrIsUpdate"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="Openmodal('edit', props.row)"
|
||||
>
|
||||
<q-item-section style="min-width: 0px" avatar>
|
||||
<q-icon
|
||||
color="primary"
|
||||
name="mdi-shuffle-variant"
|
||||
size="xs"
|
||||
/>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label>เปลี่ยนรอบการลงเวลา</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-if="checkPermission($route)?.attrIsUpdate"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="OpenmodalFix(props.row)"
|
||||
>
|
||||
<q-item-section style="min-width: 0px" avatar>
|
||||
<q-icon color="edit" name="edit" size="xs" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>เปลี่ยนรอบการลงเวลา</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-if="checkPermission($route)?.attrIsUpdate"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="OpenmodalFix(props.row)"
|
||||
>
|
||||
<q-item-section style="min-width: 0px" avatar>
|
||||
<q-icon color="edit" name="edit" size="xs" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label>แก้ไขปฏิทินวันทำงาน</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="Openmodal('history', props.row)"
|
||||
>
|
||||
<q-item-section style="min-width: 0px" avatar>
|
||||
<q-icon
|
||||
color="deep-purple"
|
||||
name="mdi-history"
|
||||
size="xs"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div>
|
||||
{{ col.value ?? "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ dataStore.totalListMain }} รายการ
|
||||
<q-pagination
|
||||
v-model="formData.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(dataStore.maxPageMain)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="dataStore.fetchDataForCardId(formData)"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</div>
|
||||
<q-item-section>
|
||||
<q-item-label>แก้ไขปฏิทินวันทำงาน</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="Openmodal('history', props.row)"
|
||||
>
|
||||
<q-item-section style="min-width: 0px" avatar>
|
||||
<q-icon
|
||||
color="deep-purple"
|
||||
name="mdi-history"
|
||||
size="xs"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>ประวัติการเปลี่ยนรอบ</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div>
|
||||
{{ col.value ?? "-" }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</d-table>
|
||||
<div class="text-caption text-grey-7 q-mt-sm">
|
||||
ทั้งหมด {{ allRows.length }} รายการ
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<!-- popup เปลี่ยนรอบการปฏิบัติงาน ,ประวัติการเปลี่ยนรอบการปฏิบัติงาน -->
|
||||
|
|
@ -328,6 +561,9 @@ onMounted(() => {
|
|||
:DataRow="DataRow"
|
||||
:personId="DataRow == null ? '' : DataRow.profileId"
|
||||
@update:change-page="dataStore.changePage"
|
||||
v-model:isMultiple="isMultiple"
|
||||
:selectedMultiple="selected"
|
||||
@update:selected="resetSelected"
|
||||
/>
|
||||
|
||||
<!-- แก้ไขปฏิทินวันทำงาน -->
|
||||
|
|
@ -384,4 +620,19 @@ onMounted(() => {
|
|||
.q-table tbody td:before.no-background {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.tree-container {
|
||||
overflow: auto;
|
||||
height: 75vh;
|
||||
border: 1px solid #e6e6e7;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.my-list-link {
|
||||
color: rgb(118, 168, 222);
|
||||
border-radius: 5px;
|
||||
background: #a3d3fb48 !important;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(175, 185, 196, 0.217);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (val) => val + 543,
|
||||
format: (val) => (val ? val + 543 : "-"),
|
||||
},
|
||||
{
|
||||
name: "durationKPI",
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => v + 543,
|
||||
format: (v) => (v ? v + 543 : "-"),
|
||||
},
|
||||
{
|
||||
name: "citizenId",
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format: (v) => v + 543,
|
||||
format: (v) => (v ? v + 543 : "-"),
|
||||
},
|
||||
{
|
||||
name: "citizenId",
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
field: "year",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px ; width:10%",
|
||||
format: (val) => val + 543,
|
||||
format: (val) => (val ? val + 543 : "-"),
|
||||
},
|
||||
{
|
||||
name: "projectName",
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const columns = ref<QTableProps["columns"]>([
|
|||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
format(val) {
|
||||
return val + 543;
|
||||
return val ? val + 543 : "-";
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue