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

แก้ไข จัดสรรเครื่องราช

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-08-28 11:07:26 +07:00
parent 1ca73e1c59
commit c272838c5f
3 changed files with 751 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/modules/07_insignia/components/4_Allocate/DialogEdit.vue Normal file
View file

@ -0,0 +1,117 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;
const $q = useQuasar();
const title = ref<string>("");
const amount = ref<number>();
const props = defineProps({
modal: Boolean,
save: {
type: Function,
default: () => console.log("not function"),
},
close: {
type: Function,
default: () => console.log("not function"),
},
insigniadata: {
type: Object,
default: [],
},
actionType: {
type: String,
},
});
watch(props, () => {
if (props.modal === true) {
console.log(props.insigniadata);
amount.value = props.insigniadata.total;
if (props.actionType === "insignia") {
title.value = props.insigniadata.insignia;
} else title.value = props.insigniadata.organization;
}
});
const closeModal = () => {
props.close();
};
const clickSave = () => {
dialogConfirm($q, () => {
if (props.actionType === "insignia") {
props.save(
props.insigniadata.insigniaId,
amount.value,
props.insigniadata.year
);
} else {
props.save(props.insigniadata.id, amount.value);
}
});
};
</script>
<template>
<q-dialog v-model="props.modal" persistent>
<q-card style="width: 800px">
<q-toolbar class="q-py-sm">
<q-toolbar-title class="text-h6"
>แก้ไขการจัดสรรเครื่องราชฯ
</q-toolbar-title>
<q-btn
icon="close"
unelevated
round
dense
@click="closeModal"
style="color: #ff8080; background-color: #ffdede"
/>
</q-toolbar>
<q-separator />
<q-form ref="myForm">
<div class="q-pa-md">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-12 col-sm-6">
<q-input
hide-bottom-space
outlined
class="inputgreen"
v-model="title"
dense
lazy-rules
type="text"
label="จำนวน"
disable
/>
</div>
<div class="col-xs-12 col-sm-6">
<q-input
hide-bottom-space
outlined
class="inputgreen"
v-model="amount"
dense
lazy-rules
type="number"
label="จำนวน"
/>
</div>
</div>
</div>
</q-form>
<q-separator />
<div class="row justify-end q-py-sm">
<div class="q-px-md">
<q-btn label="บันทึก" @click="clickSave" color="public" />
</div>
</div>
</q-card>
</q-dialog>
</template>
<style lang="scss" scoped></style>

487
src/modules/07_insignia/components/4_Allocate/Main.vue
View file

@ -8,6 +8,7 @@ import { useResultDataStore } from "@/modules/07_insignia/storeAllocate";
import type { FormProprsalsRound } from "@/modules/07_insignia/interface/request/Main";
import router from "@/router";
import DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.vue";
import DialogEdit from "@/modules/07_insignia/components/4_Allocate/DialogEdit.vue";
import type { OptionDataYear } from "@/modules/07_insignia/interface/index/Main";
import type { QTableProps, QInput } from "quasar";
@ -15,15 +16,10 @@ import { useQuasar } from "quasar";
const DataStore = useResultDataStore();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
} = mixin;
const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
const redirectToPage = (id: string, name: string) => {
DataStore.insigniaName = name
DataStore.insigniaName = name;
router.push(`/insignia/allocate/org/${id}`);
};
const paging = ref<boolean>(true);
@ -63,7 +59,7 @@ const fecthRound = async () => {
selectRoundOption.value = data.map((e: any) => ({
id: e.id,
name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + " " + (e.year + 543),
year: e.year
year: e.year,
}));
selectRound.value = data[0].id;
roundYear.value = data[0].year;
@ -82,10 +78,13 @@ const fecthInsignia = async () => {
DataStore.fetchDatainsignia(data);
})
.catch((err) => {
messageError($q, err)
}).finally(async () => {
insigniaOp.value = await DataStore.insigniaOp.filter((x: any) => x.type == tab.value)
messageError($q, err);
})
.finally(async () => {
insigniaOp.value = await DataStore.insigniaOp.filter(
(x: any) => x.type == tab.value
);
});
};
const fecthInsigniaType = async () => {
@ -96,7 +95,7 @@ const fecthInsigniaType = async () => {
DataStore.fetchDatainsigniaType(data);
tab.value = DataStore.insigniaType[0].name;
fecthlistInsignia()
fecthlistInsignia();
fecthInsignia();
})
.catch((err) => {
@ -162,7 +161,9 @@ const columns = ref<QTableProps["columns"]>([
const rows = ref<FormProprsalsRound[]>([]);
watch(tab, () => {
insigniaOp.value = DataStore.insigniaOp.filter((x: any) => x.type == tab.value)
insigniaOp.value = DataStore.insigniaOp.filter(
(x: any) => x.type == tab.value
);
fecthlistInsignia();
});
@ -171,7 +172,7 @@ const selectorInsignia = () => {
};
const selectorRound = (round: string) => {
selectRound.value = round;
const yearFilter = selectRoundOption.value.find((x: any) => x.id == round)
const yearFilter = selectRoundOption.value.find((x: any) => x.id == round);
roundYear.value = yearFilter?.year;
};
@ -190,6 +191,7 @@ const fecthlistInsignia = async () => {
total: e.total,
allocate: e.allocate,
remain: e.remain,
year: e.year,
// status: DataStore.status(e.status),
}));
})
@ -202,12 +204,12 @@ const fecthlistInsignia = async () => {
});
};
const filterRef = ref<QInput>();
const filter = ref<string>("");
const close = () => {
modal.value = false;
modalEdit.value = false;
};
const addData = () => {
@ -222,24 +224,74 @@ const editData = (data: any) => {
modal.value = true;
};
const modalEdit = ref<boolean>(false);
const rowData = ref<any>([]);
const actionType = ref<string>("");
const clickEditrow = (data: any) => {
rowData.value = data;
modalEdit.value = true;
actionType.value = "insignia";
console.log(data);
};
const save = async (insigniaId: string, total: string) => {
showLoader()
showLoader();
await http
.post(config.API.insigniaManageAdd(), {
insignia: insigniaId,
year: `${roundYear.value}`,
total: total,
})
.then((res) => {
fecthlistInsignia();
.then(async () => {
success($q, "บันทึกข้อมูลสำเร็จ");
await fecthlistInsignia();
})
.catch((err) => {
messageError($q, err)
}).finally(() => {
messageError($q, err);
})
.finally(() => {
hideLoader();
close();
});
};
const saveEdit = async (insigniaId: string, total: Number, year: Number) => {
showLoader();
let body = {
insignia: insigniaId,
year: year,
total: Number(total),
};
await http
.put(config.API.insigniaManageById(insigniaId), body)
.then(async () => {
success($q, "แก้ไขข้อมูลสำเร็จ");
await fecthlistInsignia();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
close();
});
};
const clickDelete = async (insigniaId: string) => {
dialogRemove($q, async () => {
showLoader();
await http
.delete(config.API.insigniaManageById(insigniaId))
.then(async () => {
success($q, "ลบข้อมูลสำเร็จ");
await fecthlistInsignia();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
};
const resetFilter = () => {
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
@ -255,13 +307,34 @@ const resetFilter = () => {
<q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
<div class="bg-grey-1 col-12 row items-center">
<div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
<selector hide-bottom-space borderless dense lazy-rules emit-value map-options options-dense option-label="name"
option-value="id" v-model="selectRound" :options="selectRoundOption" use-input input-debounce="0"
input-class="text-bold text-grey" @update:emit-value="selectorRound">
<selector
hide-bottom-space
borderless
dense
lazy-rules
emit-value
map-options
options-dense
option-label="name"
option-value="id"
v-model="selectRound"
:options="selectRoundOption"
use-input
input-debounce="0"
input-class="text-bold text-grey"
@update:emit-value="selectorRound"
>
</selector>
</div>
<q-separator />
<q-tabs dense v-model="tab" align="left" class="bg-white text-grey" active-color="primary" indicator-color="primary">
<q-tabs
dense
v-model="tab"
align="left"
class="bg-white text-grey"
active-color="primary"
indicator-color="primary"
>
<div v-for="item in DataStore.insigniaType">
<q-tab :name="item.name" :label="item.label" />
</div>
@ -274,14 +347,34 @@ const resetFilter = () => {
<div v-if="tab == item.name" class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<div>
<q-select v-model="DataStore.insignia" dense outlined lazy-rules hide-bottom-space
:label="`${'เครื่องราชฯ'}`" emit-value map-options option-label="name" :options="insigniaOp"
option-value="id" :readonly="false" :borderless="false" style="min-width: 150px"
@update:model-value="selectorInsignia" />
<q-select
v-model="DataStore.insignia"
dense
outlined
lazy-rules
hide-bottom-space
:label="`${'เครื่องราชฯ'}`"
emit-value
map-options
option-label="name"
:options="insigniaOp"
option-value="id"
:readonly="false"
:borderless="false"
style="min-width: 150px"
@update:model-value="selectorInsignia"
/>
</div>
<div>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-btn
@click="addData()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
@ -290,31 +383,74 @@ const resetFilter = () => {
<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">
<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="filter == ''" name="search" />
<q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
<q-icon
v-if="filter !== ''"
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" />
<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>
<d-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" flat bordered
:paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" v-model:pagination="pagination">
<d-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
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-th auto-width />
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id, props.row.insignia)">
<q-tr
:props="props"
class="cursor-pointer"
@click="redirectToPage(props.row.id, props.row.insignia)"
>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
@ -333,22 +469,103 @@ const resetFilter = () => {
<q-td key="remain" :props="props">
{{ props.row.remain }}
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
@click.stop
>
<q-menu
transition-show="jump-down"
transition-hide="jump-up"
>
<q-list dense style="min-width: auto">
<q-item
clickable
v-close-popup
@click.stop="clickEditrow(props.row)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>แก้ไข</q-tooltip>
<q-icon
color="primary"
size="xs"
name="mdi-pencil"
/>
</q-item-section>
<q-item-section>แก้ไข</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click.stop="clickDelete(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ลบ</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</d-table>
</div>
<div v-else-if="tab == item.name" class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
input-debounce="0" style="min-width: 150px" />
<selector
outlined
dense
lazy-rules
v-model="DataStore.insignia"
hide-bottom-space
:label="`${'เครื่องราชฯ'}`"
emit-value
map-options
option-label="name"
:options="DataStore.insigniaOp"
option-value="id"
use-input
input-debounce="0"
style="min-width: 150px"
/>
<div>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-btn
@click="addData()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
@ -358,11 +575,17 @@ const resetFilter = () => {
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-item-section>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section
>บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-item-section
>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
</q-item>
</q-list>
@ -374,21 +597,52 @@ const resetFilter = () => {
<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">
<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="filter == ''" name="search" />
<q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
<q-icon
v-if="filter !== ''"
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" />
<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>
<d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
@ -396,8 +650,15 @@ const resetFilter = () => {
</div>
<div v-else-if="props.col.name == 'action'">
<q-btn dense size="12px" flat round color="primary" @click="editData(props.row)"
icon="mdi-pencil-outline">
<q-btn
dense
size="12px"
flat
round
color="primary"
@click="editData(props.row)"
icon="mdi-pencil-outline"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</div>
@ -412,11 +673,31 @@ const resetFilter = () => {
<div v-else-if="tab == item.name" class="q-pa-md">
<div class="row col-12 q-pb-sm q-col-gutter-x-xs">
<selector outlined dense lazy-rules v-model="DataStore.insignia" hide-bottom-space :label="`${'เครื่องราชฯ'}`"
emit-value map-options option-label="name" :options="DataStore.insigniaOp" option-value="id" use-input
input-debounce="0" style="min-width: 150px" />
<selector
outlined
dense
lazy-rules
v-model="DataStore.insignia"
hide-bottom-space
:label="`${'เครื่องราชฯ'}`"
emit-value
map-options
option-label="name"
:options="DataStore.insigniaOp"
option-value="id"
use-input
input-debounce="0"
style="min-width: 150px"
/>
<div>
<q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
<q-btn
@click="addData()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>เพิ่ม</q-tooltip>
</q-btn>
</div>
@ -426,11 +707,17 @@ const resetFilter = () => {
<q-menu>
<q-list style="min-width: 150px">
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section>บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-item-section>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section
>บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-item-section
>
</q-item>
<q-item clickable v-close-popup>
<q-item-section avatar><q-icon color="green-7" name="mdi-file-excel" /></q-item-section>
<q-item-section avatar
><q-icon color="green-7" name="mdi-file-excel"
/></q-item-section>
<q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
</q-item>
</q-list>
@ -441,21 +728,52 @@ const resetFilter = () => {
<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">
<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="filter == ''" name="search" />
<q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
<q-icon
v-if="filter !== ''"
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" />
<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>
<d-table :rows="rows" :columns="columns" :visible-columns="visibleColumns" :filter="filter" row-key="name">
<d-table
:rows="rows"
:columns="columns"
:visible-columns="visibleColumns"
:filter="filter"
row-key="name"
>
<template v-slot:body-cell="props">
<q-td :props="props">
<div v-if="props.col.name == 'no'">
@ -463,8 +781,15 @@ const resetFilter = () => {
</div>
<div v-else-if="props.col.name == 'action'">
<q-btn dense size="12px" flat round color="primary" @click="editData(props.row)"
icon="mdi-pencil-outline">
<q-btn
dense
size="12px"
flat
round
color="primary"
@click="editData(props.row)"
icon="mdi-pencil-outline"
>
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
</div>
@ -477,11 +802,23 @@ const resetFilter = () => {
</d-table>
</div>
</div>
</div>
<DialogForm :modal="modal" :save="save" :close="close" :insignia-list="insigniaOp" />
<DialogForm
:modal="modal"
:save="save"
:close="close"
:insignia-list="insigniaOp"
/>
</q-card>
<DialogEdit
:modal="modalEdit"
:save="saveEdit"
:close="close"
:insigniadata="rowData"
:actionType="actionType"
/>
</template>
<style lang="scss" scoped>
.arrow {

270
src/modules/07_insignia/components/4_Allocate/OrgList.vue
View file

@ -10,14 +10,11 @@ import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useResultDataStore } from "@/modules/07_insignia/storeAllocate";
import DialogEdit from "@/modules/07_insignia/components/4_Allocate/DialogEdit.vue";
const DataStore = useResultDataStore();
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
} = mixin;
const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
const name = ref<string>("");
const $q = useQuasar(); //ใช้ noti quasar
@ -40,13 +37,13 @@ const stat = ref<any>({
onMounted(async () => {
fecthDashboard();
fecthListData();
name.value = DataStore.insigniaName
name.value = DataStore.insigniaName;
fetchOrgList()
fetchOrgList();
});
const fecthDashboard = async () => {
showLoader()
showLoader();
await http
.get(config.API.insigniaManageOrgDashboard(id.value))
.then((res) => {
@ -54,16 +51,16 @@ const fecthDashboard = async () => {
total: res.data.result.total,
allocate: res.data.result.allocate,
remain: res.data.result.remain,
}
};
})
.catch((err) => {
messageError($q, err)
messageError($q, err);
})
.finally(() => hideLoader())
.finally(() => hideLoader());
};
const fecthListData = async () => {
showLoader()
showLoader();
await http
.get(config.API.insigniaManageOrg(id.value))
.then((res) => {
@ -74,12 +71,12 @@ const fecthListData = async () => {
total: e.total,
allocate: e.allocate,
remain: e.remain,
}))
}));
})
.catch((err) => {
messageError($q, err)
messageError($q, err);
})
.finally(() => hideLoader())
.finally(() => hideLoader());
};
const fetchOrgList = async () => {
@ -87,46 +84,90 @@ const fetchOrgList = async () => {
await http
.get(config.API.typeOc())
.then(async (response: any) => {
orgList.value = response.data.result.map((e: any)=>({
orgList.value = response.data.result.map((e: any) => ({
id: e.organizationId,
name: e.organizationName
}))
name: e.organizationName,
}));
})
.catch((err) => {
messageError($q, err)
messageError($q, err);
})
.finally(() => {
hideLoader();
});
.finally(() => {
hideLoader();
});
};
const backHistory = () => {
router.push(`/insignia/allocate`)
}
router.push(`/insignia/allocate`);
};
const close = () => {
modal.value = false;
modalEdit.value = false;
};
const save = async (organizationId: string, total: string) => {
showLoader()
showLoader();
await http
.post(config.API.insigniaManageOrgAdd(), {
"organizationOrganizationId": organizationId,
"insigniaManageId": id.value,
"total": total
organizationOrganizationId: organizationId,
insigniaManageId: id.value,
total: total,
})
.then((res) => {
fecthListData();
fecthDashboard();
})
.catch((err) => {
messageError($q, err)
}).finally(() => {
messageError($q, err);
})
.finally(() => {
hideLoader();
close();
});
};
const saveEdit = async (organizationId: string, amount: number) => {
showLoader();
await http
.put(config.API.insigniaManageOrg(organizationId), { total: Number(amount) })
.then(async () => {
success($q, "แก้ไขมูลสำเร็จ");
await fecthDashboard();
await fecthListData();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
close();
});
};
const rowData = ref<any>([]);
const modalEdit = ref<boolean>(false);
const clickEditrow = (data: any) => {
rowData.value = data;
modalEdit.value = true;
};
const clickDelete = async (insigniaId: string) => {
dialogRemove($q, async () => {
showLoader();
await http
.delete(config.API.insigniaManageOrg(insigniaId))
.then(async () => {
success($q, "ลบข้อมูลสำเร็จ");
await fecthDashboard();
await fecthListData();
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
};
const visibleColumns = ref<string[]>([
"no",
@ -189,7 +230,7 @@ const columns = ref<QTableProps["columns"]>([
const rows = ref<any[]>([]);
const clickAdd = () => {
modal.value = true
modal.value = true;
};
// ค้นหาในตาราง
@ -218,16 +259,37 @@ const paginationLabel = (start: string, end: string, total: string) => {
<template>
<div class="toptitle text-dark col-12 row items-center">
<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="backHistory" />
<q-btn
icon="mdi-arrow-left"
unelevated
round
dense
flat
color="primary"
class="q-mr-sm"
@click="backHistory"
/>
หน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ {{ name }}
</div>
<q-card bordered class="q-py-sm row col-12">
<div class="col-12 row bg-white">
<div class="fit q-px-md q-py-sm">
<div class="row col-12 q-col-gutter-md fit">
<cardTop :amount="stat.total" label="จำนวนเครื่องราช ฯ ทั้งหมด" color="#016987" />
<cardTop :amount="stat.allocate" label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว" color="#02A998" />
<cardTop :amount="stat.remain" label="จำนวนเครื่องราช ฯ คงเหลือ" color="#2EA0FF" />
<cardTop
:amount="stat.total"
label="จำนวนเครื่องราช ฯ ทั้งหมด"
color="#016987"
/>
<cardTop
:amount="stat.allocate"
label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว"
color="#02A998"
/>
<cardTop
:amount="stat.remain"
label="จำนวนเครื่องราช ฯ คงเหลือ"
color="#2EA0FF"
/>
</div>
</div>
</div>
@ -236,33 +298,79 @@ const paginationLabel = (start: string, end: string, total: string) => {
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<div>
<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
<q-btn
@click="clickAdd()"
size="12px"
flat
round
color="add"
icon="mdi-plus"
>
<q-tooltip>จัดสรรเครื่องราชอิสริยาภรณ์ให้หน่วยงาน</q-tooltip>
</q-btn>
</div>
<q-space />
<q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
debounce="300" placeholder="ค้นหา">
<q-input
class="col-xs-12 col-sm-3 col-md-2"
standout
dense
v-model="filterKeyword"
ref="filterRef"
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="resetFilter" />
<q-icon
v-if="filterKeyword !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
</template>
</q-input>
<q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2" />
<q-select
v-model="visibleColumns"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
class="col-xs-12 col-sm-3 col-md-2"
/>
</div>
<div class="col-12">
<q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" flat bordered
:paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
:pagination-label="paginationLabel" v-model:pagination="pagination">
<q-table
ref="table"
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="id"
flat
bordered
:paging="true"
dense
class="custom-header-table"
v-bind="attrs"
:visible-columns="visibleColumns"
:pagination-label="paginationLabel"
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-th auto-width></q-th>
</q-tr>
</template>
<template v-slot:body="props">
@ -286,18 +394,84 @@ const paginationLabel = (start: string, end: string, total: string) => {
<!-- @click="redirectToPage(props.row.id)" -->
{{ props.row.remain }}
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
@click.stop
>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: auto">
<q-item
clickable
v-close-popup
@click.stop="clickEditrow(props.row)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>แก้ไข</q-tooltip>
<q-icon color="primary" size="xs" name="mdi-pencil" />
</q-item-section>
<q-item-section>แก้ไข</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
@click.stop="clickDelete(props.row.id)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-tooltip>ลบ</q-tooltip>
<q-icon color="red" size="xs" name="mdi-delete" />
</q-item-section>
<q-item-section>ลบ</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
:max-pages="5" size="sm" boundary-links direction-links></q-pagination>
<q-pagination
v-model="pagination.page"
active-color="primary"
color="dark"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</div>
</div>
</q-card>
<DialogForm :modal="modal" :close="close" :save="save" :insignia-list="orgList" />
<DialogForm
:modal="modal"
:close="close"
:save="save"
:insignia-list="orgList"
/>
<DialogEdit
:modal="modalEdit"
:save="saveEdit"
:close="close"
:insigniadata="rowData"
/>
</template>
<style lang="scss" scope>