feat:Change Round Multiple
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
1d99705b65
commit
f899f05527
4 changed files with 358 additions and 189 deletions
|
|
@ -7,13 +7,17 @@ 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,
|
||||
|
|
@ -23,6 +27,7 @@ const {
|
|||
dialogConfirm,
|
||||
} = mixin;
|
||||
const dataStore = useChangeRoundDataStore();
|
||||
const { fetchStructureTree } = useStructureTree();
|
||||
|
||||
/** use */
|
||||
const $q = useQuasar();
|
||||
|
|
@ -38,8 +43,23 @@ const formData = reactive<DataPost>({
|
|||
lastName: "",
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
selectedNodeId: null,
|
||||
selectNode: "",
|
||||
});
|
||||
|
||||
/** โครงสร้างข้อมูลต้นไม้ขององค์กร **/
|
||||
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);
|
||||
|
||||
/** 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 +107,7 @@ async function OpenmodalFix(detail: any) {
|
|||
function closeDialog() {
|
||||
modal.value = false;
|
||||
modalFix.value = false;
|
||||
isMultiple.value = false;
|
||||
}
|
||||
|
||||
function save() {
|
||||
|
|
@ -120,11 +141,26 @@ function updatePagination(newPagination: any) {
|
|||
|
||||
/** Function ค้นหาข้อมูล */
|
||||
async function searchData() {
|
||||
if (formData.cardId || formData.firstName || formData.lastName) {
|
||||
await dataStore.fetchDataForCardId(formData);
|
||||
} else {
|
||||
dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
|
||||
}
|
||||
await dataStore.fetchDataForCardId(formData);
|
||||
}
|
||||
|
||||
function onSelectedOrgTree(data: any) {
|
||||
selected.value = [];
|
||||
orgTreeId.value = data.orgTreeId;
|
||||
formData.selectedNodeId = data.orgTreeId;
|
||||
formData.selectNode = data.orgLevel;
|
||||
formData.page = 1;
|
||||
searchData();
|
||||
}
|
||||
|
||||
function handleSelectMultiple() {
|
||||
modal.value = true;
|
||||
isMultiple.value = true;
|
||||
editCheck.value = "edit";
|
||||
}
|
||||
|
||||
function resetSelected() {
|
||||
selected.value = [];
|
||||
}
|
||||
|
||||
watch(
|
||||
|
|
@ -136,6 +172,7 @@ watch(
|
|||
);
|
||||
|
||||
onMounted(() => {
|
||||
fetchDataTree();
|
||||
dataStore.rows = [];
|
||||
});
|
||||
</script>
|
||||
|
|
@ -143,181 +180,266 @@ onMounted(() => {
|
|||
<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"
|
||||
v-if="orgTreeId"
|
||||
>
|
||||
<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"
|
||||
v-model="formData.cardId"
|
||||
outlined
|
||||
label="เลขประจำตัวประชาชน"
|
||||
class="col-6 col-md-4 bg-white inputgreen"
|
||||
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
|
||||
>
|
||||
</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>
|
||||
</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="dataStore.rows.length !== 0" class="col-12">
|
||||
<div class="row justify-between items-center q-mb-sm">
|
||||
<q-btn
|
||||
v-show="selected.length > 0"
|
||||
color="info"
|
||||
dense
|
||||
icon="mdi-shuffle-variant"
|
||||
label="เปลี่ยนรอบการลงเวลา"
|
||||
@click="handleSelectMultiple()"
|
||||
/>
|
||||
</div>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="dataStore.columns"
|
||||
:rows="dataStore.rows"
|
||||
row-key="profileId"
|
||||
flat
|
||||
bordered
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="dataStore.visibleColumns"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
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
|
||||
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
|
||||
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>
|
||||
<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-card-section>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
|
||||
<!-- popup เปลี่ยนรอบการปฏิบัติงาน ,ประวัติการเปลี่ยนรอบการปฏิบัติงาน -->
|
||||
|
|
@ -328,6 +450,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 +509,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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue