no message

This commit is contained in:
STW_TTTY\stwtt 2024-04-04 12:38:48 +07:00
parent 5c1747262f
commit b130568ef4
12 changed files with 938 additions and 472 deletions

View file

@ -1,18 +1,44 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, onMounted, reactive } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import type { DataOption } from "@/modules/15_development/interface/index/Main";
import type {
DataOption,
FormFilter,
} from "@/modules/15_development/interface/index/Main";
import http from "@/plugins/http";
import config from "@/app.config";
/** importStore*/
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useDevelopmentDataStoreHistory } from "@/modules/15_development/store/developmentStoreHistory";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
const maxPage = ref<number>(1);
const pagination = ref({
page: 1,
rowsPerPage: 10,
});
const formFilter = reactive<FormFilter>({
page: 1,
pageSize: 20,
keyword: "",
year: new Date().getFullYear(),
type: "",
posType: "",
posLevel: "",
retireYear: "",
rangeYear: { min: 0, max: 60 },
isShowRetire: null,
isProbation: null,
});
/** use*/
const router = useRouter()
const store = useDevelopmentDataStore();
const router = useRouter();
const store = useDevelopmentDataStoreHistory();
const $q = useQuasar();
const { showLoader, hideLoader } = useCounterMixin();
const { showLoader, hideLoader, messageError } = useCounterMixin();
const rows = ref<any>([]);
const agency = ref<string>("");
@ -88,15 +114,6 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionSide",
align: "left",
label: "ตําแหน่งทางการบริหาร",
sortable: true,
field: "positionSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "projectName",
align: "left",
@ -108,126 +125,184 @@ const columns = ref<QTableProps["columns"]>([
},
]);
function onAdd(){
router.push(`/development/employee-history/add`)
function onAdd() {
store.status = false;
router.push(`/development/employee-history/add`);
}
function onDownload(){
function onDownload() {}
function onEdit(id: string) {
store.status = true;
router.push(`/development/employee-history/${id}`);
}
function onEdit(){
function getData() {
let queryParams: any = {
page: formFilter.page,
pageSize: formFilter.pageSize,
keyword: formFilter.keyword,
year: formFilter.year,
};
showLoader();
http
.get(config.API.developmentHistoryList("employee"), { params: queryParams })
.then((res) => {
console.log(res.data.result.data);
const data = res.data.result.data;
rows.value = data.map((item: any) => ({
id: item.id ? item.id : null,
citizenId: item.citizenId ? item.citizenId : null,
name: item.firstName
? `${item.prefix}${item.firstName} ${item.lastName}`
: null,
prefix: item.prefix ? item.prefix : null,
firstName: item.firstName ? item.firstName : null,
lastName: item.lastName ? item.lastName : null,
position: item.position ? item.position : null,
type: item.type ? item.type : null,
level: item.level ? item.level : null,
positionSide: item.posExecutive ? item.posExecutive : null,
projectName: item.projectName ? item.projectName : null,
}));
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
function yearAll() {
formFilter.year = 0;
getData();
}
onMounted(() => {
getData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">
ประวกอบรม/งานลกจาง
รายการประวกอบรม/งานลกจาง
</div>
<q-card flat bordered class="q-pa-md">
<q-toolbar style="padding: 0px">
<div class="row q-gutter-sm">
<datepicker
menu-class-name="modalfix"
v-model="store.formFilter.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
:model-value="Number(store.formFilter.year) + 543"
:label="`${'ปีงบประมาณ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-select
dense
outlined
label="หน่วยงาน"
v-model="agency"
:options="agencyOp"
option-value="id"
option-label="name"
style="width: 200px"
/>
</div>
<div class="row no-wrap shadow-1 justify-between">
<q-toolbar class="row col-8 q-pa-none q-gutter-x-sm">
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formFilter.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="getData()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
:model-value="
formFilter.year === 0 ? null : Number(formFilter.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="formFilter.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="yearAll"
class="cursor-pointer"
/>
</template>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<q-btn
flat
round
dense
icon="add"
color="primary"
@click="onAdd()"
>
<q-tooltip>เพ</q-tooltip>
</q-btn>
<q-space />
<q-btn
flat
round
dense
icon="mdi-arrow-down-bold-circle-outline"
color="blue"
@click="onAdd()"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<div class="row q-gutter-sm">
<q-input
standout
dense
v-model="store.formFilter.keyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
>
<template v-slot:append>
<q-icon v-if="store.formFilter.keyword == ''" name="search" />
<q-icon
v-if="store.formFilter.keyword !== ''"
name="clear"
class="cursor-pointer"
@click="store.formFilter.keyword = ''"
/>
</template>
</q-input>
<div class="col-3">
<q-select
dense
outlined
label="หน่วยงาน"
v-model="agency"
:options="agencyOp"
option-value="id"
option-label="name"
/>
</div>
<q-select
v-model="visibleColumns"
multiple
outlined
<q-btn flat round dense icon="add" color="primary" @click="onAdd()">
<q-tooltip>เพ</q-tooltip>
</q-btn>
</q-toolbar>
<q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm">
<q-space />
<q-btn
flat
round
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns"
option-value="name"
options-cover
style="min-width: 150px"
/>
</div>
</q-toolbar>
icon="mdi-arrow-down-bold-circle-outline"
color="blue"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<div class="col-4">
<q-input
standout
dense
v-model="formFilter.keyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
@keydown.enter.prevent="getData()"
>
<template v-slot:append>
<q-icon v-if="formFilter.keyword == ''" name="search" />
<q-icon
v-if="formFilter.keyword !== ''"
name="clear"
class="cursor-pointer"
@click="
formFilter.keyword = '';
getData();
"
/>
</template>
</q-input>
</div>
<div class="col-4">
<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
/>
</div>
</q-toolbar>
</div>
<div class="col-12">
<d-table
@ -241,7 +316,21 @@ function onEdit(){
dense
class="custom-header-table"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
:rows-per-page-options="[10, 25, 50, 100]"
>
<template v-slot:pagination="scope">
<q-pagination
v-model="formFilter.page"
active-color="primary"
color="dark"
:max="Number(maxPage)"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -255,7 +344,7 @@ function onEdit(){
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="onEdit()"
@click="onEdit(props.row.id)"
>
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}

View file

@ -10,7 +10,7 @@ import http from "@/plugins/http";
import config from "@/app.config";
/** importStore*/
import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
import { useDevelopmentDataStoreHistory } from "@/modules/15_development/store/developmentStoreHistory";
import { useCounterMixin } from "@/stores/mixin";
import { useRoute, useRouter } from "vue-router";
@ -36,7 +36,7 @@ const formFilter = reactive<FormFilter>({
/** use*/
const router = useRouter();
const store = useDevelopmentDataStore();
const store = useDevelopmentDataStoreHistory();
const $q = useQuasar();
const { showLoader, hideLoader, messageError } = useCounterMixin();
@ -135,11 +135,13 @@ const columns = ref<QTableProps["columns"]>([
]);
function onAdd() {
store.status = false;
router.push(`/development/history/add`);
}
function onDownload() {}
function onEdit(id:string) {
function onEdit(id: string) {
store.status = true;
router.push(`/development/history/${id}`);
}
@ -156,20 +158,17 @@ function getData() {
.get(config.API.developmentHistoryList("officer"), { params: queryParams })
.then((res) => {
console.log(res.data.result.data);
const data = res.data.result.data
rows.value = data.map((item:any)=>({
id:item.id ? item.id : null,
citizenId:item.citizenId ? item.citizenId :null,
name:item.firstName ? `${item.prefix}${item.firstName} ${item.lastName}` :null,
prefix:item.prefix ? item.prefix : null,
firstName:item.firstName ? item.firstName : null,
lastName:item.lastName ? item.lastName : null,
position:item.position ? item.position :null,
type:item.type ? item.type :null,
level:item.level ? item.level :null,
positionSide:item.posExecutive ? item.posExecutive :null,
projectName:item.projectName ? item.projectName :null,
}))
const data = res.data.result.data;
rows.value = data.map((item: any) => ({
id: item.id ? item.id : null,
citizenId: item.citizenId ? item.citizenId : null,
name: item.fullName ? item.fullName : null,
position: item.position ? item.position : null,
type: item.posType ? item.posType : null,
level: item.posLevel ? item.posLevel : null,
projectName: item.projectName ? item.projectName : null,
positionSide: item.posExecutive ? item.posExecutive : null,
}));
})
.catch((e) => {
messageError($q, e);
@ -192,118 +191,123 @@ onMounted(() => {
รายการประวการฝกอบรม/งานของขาราชการกรงเทพมหานครสาม
</div>
<q-card flat bordered class="q-pa-md">
<q-toolbar style="padding: 0px">
<div class="row q-gutter-sm">
<datepicker
menu-class-name="modalfix"
v-model="formFilter.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="getData()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
:model-value="
formFilter.year === 0
? null
: Number(formFilter.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="formFilter.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="yearAll"
class="cursor-pointer"
/>
</template>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<q-select
dense
outlined
label="หน่วยงาน"
v-model="agency"
:options="agencyOp"
option-value="id"
option-label="name"
style="width: 200px"
/>
</div>
<div class="row no-wrap shadow-1 justify-between">
<q-toolbar class="row col-8 q-pa-none q-gutter-x-sm">
<div class="col-3">
<datepicker
menu-class-name="modalfix"
v-model="formFilter.year"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
@update:model-value="getData()"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
dense
lazy-rules
outlined
:model-value="
formFilter.year === 0 ? null : Number(formFilter.year) + 543
"
:label="`${'ปีงบประมาณ'}`"
>
<template v-if="formFilter.year" v-slot:append>
<q-icon
name="cancel"
@click.stop.prevent="yearAll"
class="cursor-pointer"
/>
</template>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
<q-btn flat round dense icon="add" color="primary" @click="onAdd()">
<q-tooltip>เพ</q-tooltip>
</q-btn>
<q-space />
<q-btn
flat
round
dense
icon="mdi-arrow-down-bold-circle-outline"
color="blue"
@click="onAdd()"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<q-input
standout
dense
v-model="formFilter.keyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
@keydown.enter.prevent="getData()"
>
<template v-slot:append>
<q-icon v-if="formFilter.keyword == ''" name="search" />
<q-icon
v-if="formFilter.keyword !== ''"
name="clear"
class="cursor-pointer"
@click="
formFilter.keyword = '';
getData();
"
<div class="col-3">
<q-select
dense
outlined
label="หน่วยงาน"
v-model="agency"
:options="agencyOp"
option-value="id"
option-label="name"
/>
</template>
</q-input>
</div>
<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"
/>
</q-toolbar>
<q-btn flat round dense icon="add" color="primary" @click="onAdd()">
<q-tooltip>เพ</q-tooltip>
</q-btn>
</q-toolbar>
<q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm">
<q-space />
<q-btn
flat
round
dense
icon="mdi-arrow-down-bold-circle-outline"
color="blue"
>
<q-tooltip>ดาวนโหลด</q-tooltip>
</q-btn>
<div class="col-4">
<q-input
standout
dense
v-model="formFilter.keyword"
ref="filterRef"
outlined
debounce="300"
placeholder="ค้นหา"
@keydown.enter.prevent="getData()"
>
<template v-slot:append>
<q-icon v-if="formFilter.keyword == ''" name="search" />
<q-icon
v-if="formFilter.keyword !== ''"
name="clear"
class="cursor-pointer"
@click="
formFilter.keyword = '';
getData();
"
/>
</template>
</q-input>
</div>
<div class="col-4">
<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
/>
</div>
</q-toolbar>
</div>
<div class="col-12">
<d-table
for="table"