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

no message

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-09-04 18:19:08 +07:00
parent 542f4d332e
commit d83af4cf05
2 changed files with 541 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

178
src/modules/10_order/components/Main.vue
View file

@ -12,11 +12,18 @@ import router from "@/router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import PopupHistory from "./PopupHistory.vue";
const $q = useQuasar(); //ใช้ noti quasar
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, dateText, success, dialogRemove } =
mixin;
const {
showLoader,
hideLoader,
messageError,
date2Thai,
dateText,
success,
dialogRemove,
} = mixin;
const DataStore = useOrderPlacementDataStore();
const pagination = ref({
@ -151,7 +158,8 @@ const OriginalDataFetch = async () => {
rows.value = res.data.result.map((e: any) => ({
orderId: e.orderId,
Order: e.orderName,
OrderNum: e.orderNo == '' ? '-' : `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
OrderNum:
e.orderNo == "" ? "-" : `${e.orderNo}/${Number(e.fiscalYear) + 543}`,
fiscalYear: Number(e.fiscalYear),
OrderDate: date2Thai(e.orderDate),
OrderBy: e.orderBy,
@ -176,13 +184,13 @@ const OriginalDataFetch = async () => {
const redirectToPage = (id?: string, status?: string) => {
let step = 1;
switch (status) {
case 'จัดทำร่างคำสั่ง':
case "จัดทำร่างคำสั่ง":
step = 1;
break;
case 'บัญชีแนบท้าย':
case "บัญชีแนบท้าย":
step = 2;
break;
case 'เลือกผู้ได้รับสำเนาคำสั่ง':
case "เลือกผู้ได้รับสำเนาคำสั่ง":
step = 3;
break;
default:
@ -336,47 +344,136 @@ const paginationLabel = (start: string, end: string, total: string) => {
<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
<div class="row q-col-gutter-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="fiscalyear" label="ปีงบประมาณ" dense emit-value
map-options :options="fiscalyearOP" option-value="id" option-label="name" lazy-rules hide-bottom-space
:readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
@update:model-value="searchFilterTable" />
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="fiscalyear"
label="ปีงบประมาณ"
dense
emit-value
map-options
:options="fiscalyearOP"
option-value="id"
option-label="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
<div>
<q-btn size="12px" flat round color="add" icon="mdi-plus" @click="clickAdd">
<q-btn
size="12px"
flat
round
color="add"
icon="mdi-plus"
@click="clickAdd"
>
<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-card bordered class="col-12 filter-card q-pa-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderType" label="ประเภท" dense emit-value
map-options option-label="name" :options="OrderTypeOption" option-value="name" lazy-rules
hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
@update:model-value="searchFilterTable" />
<q-select class="col-xs-12 col-sm-3 col-md-2" v-model="OrderStatus" label="สถานะ" dense emit-value
map-options option-label="name" :options="OrderStatusOption" option-value="name" lazy-rules
hide-bottom-space :readonly="false" :borderless="false" :outlined="true" :hide-dropdown-icon="false"
@update:model-value="searchFilterTable" />
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderType"
label="ประเภท"
dense
emit-value
map-options
option-label="name"
:options="OrderTypeOption"
option-value="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
<q-select
class="col-xs-12 col-sm-3 col-md-2"
v-model="OrderStatus"
label="สถานะ"
dense
emit-value
map-options
option-label="name"
:options="OrderStatusOption"
option-value="name"
lazy-rules
hide-bottom-space
:readonly="false"
:borderless="false"
:outlined="true"
:hide-dropdown-icon="false"
@update:model-value="searchFilterTable"
/>
<q-space />
<PopupHistory :OrderTypeOption="OrderTypeOption" />
</div>
</q-card>
</div>
<div class="col-12">
<q-table ref="table" :columns="columns" :rows="UpdataData" :filter="filterKeyword" row-key="Order" 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="UpdataData"
:filter="filterKeyword"
row-key="Order"
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">
@ -386,8 +483,13 @@ const paginationLabel = (start: string, end: string, total: string) => {
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer"
@click="redirectToPage(props.row.orderId, props.row.OrderStatus)">
<q-tr
:props="props"
class="cursor-pointer"
@click="
redirectToPage(props.row.orderId, props.row.OrderStatus)
"
>
<q-td key="Order" :props="props">
{{ props.row.Order }}
</q-td>
@ -418,8 +520,16 @@ const paginationLabel = (start: string, end: string, total: string) => {
</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>
@ -475,4 +585,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
top: 0;
}
}
</style>
</style>

397
src/modules/10_order/components/PopupHistory.vue Normal file
View file

@ -0,0 +1,397 @@
<script setup lang="ts">
import { ref } from "vue";
import type { DataOption } from "@/modules/04_registry/components/profileType";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QForm } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
const myForm = ref<QForm>();
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, notifyError } = mixin;
const $q = useQuasar();
const props = defineProps({
OrderTypeOption: Object,
});
const OrderTypeOption = ref<any>([]);
const modal = ref<boolean>(false);
const employeeClass = ref<string>("");
const typeKeyword = ref<string>("");
const Keyword = ref<string>("");
const positionKeyword = ref<string>("");
const reportType = ref<string>("");
const reportYear = ref<number | null>();
const reportNo = ref<string>("");
const positionOps = ref<DataOption[]>([]);
const columns = ref<any["columns"]>([
{
name: "no",
label: "ลำดับ",
field: "no",
align: "left",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขบัตรประชาชน",
field: "citizenId",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "name",
align: "left",
label: "ชื่อ - นามสกุล",
field: "name",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "posNo",
align: "left",
label: "เลขที่ตำแหน่ง",
field: "posNo",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่ง",
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const rows = ref<any>([]);
const clickOpenpopup = () => {
modal.value = true;
employeeClass.value = "";
if (props.OrderTypeOption != undefined) {
OrderTypeOption.value = props.OrderTypeOption.filter(
(e: any) => e.name !== "ทั้งหมด"
);
}
};
// const fecthPositionOfficer = async () => {
// await http
// .get(config.API.listPositionPathHistory)
// .then((res) => {
// let data = res.data.result.items;
// console.log(data);
// positionOps.value = data.map((e: any) => ({ id: e.id, name: e.name }));
// options.value = positionOps.value;
// })
// .catch((err) => {
// messageError($q, err);
// });
// };
// const fetchPositionPerm = async () => {
// await http
// .get(config.API.listPositionEmployeePositionHistory)
// .then((res) => {
// let data = res.data.result.items;
// positionOps.value = data.map((e: any) => ({ id: e.id, name: e.name }));
// options.value = positionOps.value;
// })
// .catch((err) => {
// messageError($q, err);
// });
// };
const clickSearch = async (type: string) => {
console.log(reportType.value);
console.log(reportYear.value);
console.log(reportNo.value);
// await myForm.value!.validate().then((result: boolean) => {
// if (result) {
// showLoader();
// let body = {};
// if (typeKeyword.value === "no") {
// Object.assign(body, {
// posNo: Keyword.value,
// });
// } else if (typeKeyword.value === "position") {
// Object.assign(body, {
// positionId: positionKeyword.value,
// });
// }
// http
// .post(config.API.profileHistory(type), body)
// .then((res) => {
// let data = res.data.result;
// if (data.length !== 0) {
// rows.value = data.map((e: any) => ({
// id: e.id,
// citizenId: e.citizenId,
// name: e.firstName + " " + e.lastName,
// posNo: e.posNo,
// position: e.position,
// date: date2Thai(e.date),
// }));
// } else {
// notifyError($q, "ไม่มีข้อมูลที่ต้องการค้นหา");
// rows.value = [];
// }
// })
// .catch((err) => {
// messageError($q, err);
// rows.value = [];
// })
// .finally(() => {
// hideLoader();
// });
// }
// });
};
const options = ref<any>([]);
const filterFn = (val: string, update: any) => {
if (val === "") {
update(() => {
options.value = OrderTypeOption.value;
});
return;
} else {
update(() => {
options.value = OrderTypeOption.value.filter(
(e: any) => e.name.search(val) !== -1
);
});
}
console.log(options.value);
};
const paging = ref<boolean>(true);
const pagination = ref({
sortBy: "order",
descending: false,
page: 1,
rowsPerPage: 10,
});
const paginationLabel = (start: number, end: number, total: number) => {
if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
else return start + "-" + end + " ใน " + total;
};
</script>
<template>
<q-btn round flat color="blue" icon="mdi-history" @click="clickOpenpopup">
<q-tooltip>แสดงประวัติออกคำสั่ง</q-tooltip></q-btn
>
<q-dialog v-model="modal">
<q-card style="width: 850px; max-width: 80vw">
<q-card-section>
<div class="my-content">
<div
class="row q-pa-xs items-center bg-blue-1"
style="border-radius: 4px 4px 0px 0px"
>
<q-icon
size="20px"
color="blue-9"
name="mdi-filter-variant"
class="q-mx-sm"
/>
<div class="text-blue-9 text-subtitle2 text-weight-medium">
<span>ประวัติออกคำสั่ง</span>
</div>
<q-space />
<q-btn
color="blue-9"
icon="mdi-close"
size="12px"
flat
round
dense
v-close-popup
/>
</div>
<q-separator color="blue-1" />
<div class="dialog-card-contain">
<q-card-section class="q-pa-sm">
<q-form ref="myForm">
<div class="row col-12 q-col-gutter-xs">
<q-select
class="col-4"
hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
outlined
dense
v-model="reportType"
emit-value
map-options
:options="options"
option-label="name"
option-value="id"
:label="`${' ประเภท'}`"
use-input
input-debounce="0"
@filter="filterFn"
behavior="menu"
>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
ไม่มีข้อมูล
</q-item-section>
</q-item>
</template></q-select
>
<datepicker
class="col-4"
menu-class-name="modalfix"
v-model="reportYear"
:locale="'th'"
autoApply
year-picker
:enableTimePicker="false"
clearable
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
class="inputgreen cursor-pointer q-mb-sm"
hide-bottom-space
outlined
dense
lazy-rules
borderless
:model-value="
reportYear == null ? null : reportYear + 543
"
:label="`${'ปีงบประมาณ'}`"
clearable
>
</q-input>
</template>
</datepicker>
<q-input
class="col-4"
clearable
dense
outlined
lazy-rules
v-model="reportNo"
hide-bottom-space
label="เลขที่คำสั่ง"
/>
<q-space />
<div>
<q-btn
dense
color="primary"
icon="mdi-magnify"
label="ค้นหา"
class="q-px-md"
@click="clickSearch(employeeClass)"
/>
</div>
</div>
</q-form>
</q-card-section>
</div>
</div>
</q-card-section>
<q-card-section class="q-pt-none">
<q-table
flat
dense
bordered
:rows="rows"
:columns="columns"
row-key="order"
class="custom-header-table"
no-data-label="ไม่มีข้อมูล"
: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">
<div class="text-grey-7 text-weight-medium">
<span class="row">{{ col.label }}</span>
</div>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props"> {{ props.rowIndex + 1 }}</q-td>
<q-td key="order" :props="props">{{ props.row.order }} </q-td>
<q-td key="citizenId" :props="props">{{
props.row.citizenId
}}</q-td>
<q-td key="name" :props="props">{{ props.row.name }}</q-td>
<q-td key="posNo" :props="props">{{ props.row.posNo }}</q-td>
<q-td key="position" :props="props">{{
props.row.position
}}</q-td>
<q-td key="date" :props="props">{{ props.row.date }}</q-td>
</q-tr>
</template>
<template v-slot:pagination="scope">
<q-pagination
v-model="pagination.page"
color="primary"
:max="scope.pagesNumber"
:max-pages="5"
size="sm"
boundary-links
direction-links
></q-pagination>
</template>
</q-table>
</q-card-section>
<!-- <q-card-actions align="right">
<q-btn flat label="OK" color="primary" v-close-popup />
</q-card-actions> -->
</q-card>
</q-dialog>
</template>
<style scoped>
.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;
}
.q-table thead tr:last-child th {
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>