clone เมนูให้ "รายการให้ออก (ลูกจ้าง)"

This commit is contained in:
setthawutttty 2025-01-22 12:50:29 +07:00
parent 80e7d58b5d
commit b56808ceed
3 changed files with 389 additions and 1 deletions

View file

@ -130,6 +130,11 @@ const itemsMenuEmployee = ref<DataOptionSys[]>([
name: "ถึงแก่กรรม",
system: "SYS_PASSAWAY",
},
{
id: "3",
name: "ให้ออกจากราชการ",
system: "SYS_DISMISS_EMP",
},
]);
const uploadUrl = ref<string>(""); //URL
@ -842,7 +847,11 @@ onMounted(async () => {
v-if="
!storeRegistry.isLeave &&
empType === '-employee' &&
checkPermissionList(['SYS_PROMOTION_EMP', 'SYS_PASSAWAY'])
checkPermissionList([
'SYS_PROMOTION_EMP',
'SYS_PASSAWAY',
'SYS_DISMISS_EMP',
])
"
size="md"
rounded
@ -861,6 +870,8 @@ onMounted(async () => {
? appointEmployeePost()
: item.name == 'ถึงแก่กรรม'
? clickPassaway()
: item.name == 'ให้ออกจากราชการ'
? outPost()
: null
"
v-close-popup

View file

@ -54,6 +54,8 @@ const detaildeceasedByid = () =>
/** รายการให้ออก*/
const dismissOrder = () =>
import("@/modules/06_retirement/views/06_dismissOrder.vue");
const dismissOrderEmp = () =>
import("@/modules/06_retirement/views/08_dismissOrderEmp.vue");
const outDetail = () =>
import("@/modules/06_retirement/components/06_dismissOrder/Detail.vue");
const outDetailOnly = () =>
@ -289,6 +291,16 @@ export default [
Role: "STAFF",
},
},
{
path: "/retirementEmployee",
name: "dismiss-order-emp",
component: dismissOrderEmp,
meta: {
Auth: true,
Key: "SYS_DISMISS_EMP",
Role: "STAFF",
},
},
{
path: "/retirement/dismiss-order/:id",
name: "outDetail",

View file

@ -0,0 +1,365 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { QTableProps } from "quasar";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { checkPermission } from "@/utils/permissions";
import { useTransferDataStore } from "@/modules/05_placement/store";
import type { ResponseData } from "@/modules/06_retirement/interface/response/out";
import DialogSendToCommand from "@/modules/06_retirement/components/06_dismissOrder/DialogSendToCommand.vue";
/** use */
const $q = useQuasar();
const router = useRouter();
const mixin = useCounterMixin();
const transferStore = useTransferDataStore();
const {
date2Thai,
messageError,
showLoader,
hideLoader,
success,
onSearchDataTable,
dialogRemove,
} = mixin;
const { statusText } = transferStore;
const modal = ref<boolean>(false);
/** คอลัมน์ที่แสดง */
const visibleColumns = ref<string[]>([
"no",
"fullname",
"positionLevel",
"organizationPositionOld",
"createdAt",
"status",
]);
//
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
const filterRef = ref<any>(null);
//
const rows = ref<ResponseData[]>([]);
const rowsData = ref<ResponseData[]>([]);
const rows2 = ref<ResponseData[]>([]);
const rowsData2 = ref<ResponseData[]>([]);
const filters = ref<ResponseData[]>([]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: false,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
label: "ชื่อ-นามสกุล",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format(val, row) {
return `${row.prefix}${row.firstName} ${row.lastName}`;
},
},
{
name: "positionLevel",
align: "left",
label: "กลุ่มงาน",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format(val, row) {
let name = "";
if (row.positionTypeOld && row.positionLevelOld) {
name = `${row.positionTypeOld} (${row.positionLevelOld})`;
} else if (row.positionTypeOld) {
name = `${row.positionTypeOld}`;
} else if (row.positionLevelOld) {
name = `(${row.positionLevelOld})`;
} else name = "-";
return name;
},
},
{
name: "organizationPositionOld",
align: "left",
label: "ตำแหน่ง/สังกัดเดิม",
sortable: true,
field: "organizationPositionOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "createdAt",
align: "left",
label: "วันที่ดำเนินการ",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => date2Thai(val),
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (val) => statusText(val),
},
]);
const pagination = ref({
sortBy: "createdAt",
descending: true,
page: 1,
rowsPerPage: 10,
});
function openModalOrder() {
openModal();
const row = filters.value.filter(
(r: ResponseData) =>
(r.status == "WAITTING" ||
r.status == "PENDING" ||
r.status == "APPROVE") &&
r.organizationPositionOld &&
r.positionTypeOld &&
r.positionLevelOld &&
r.positionNumberOld &&
r.organization &&
r.date
);
rows2.value = row;
rowsData2.value = row;
}
//
async function getData() {
showLoader();
await http
.get(config.API.retirementOut)
.then((res: any) => {
const data = res.data.result;
rows.value = data;
rowsData.value = data;
filters.value = data;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
}
async function clickDelete(id: string) {
dialogRemove($q, async () => {
showLoader();
await http
.delete(config.API.outByid(id))
.then(async () => {
await getData();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
});
});
}
function openModal() {
modal.value = true;
}
function closeModal() {
modal.value = false;
}
function onSearch() {
rows.value = onSearchDataTable(
filterKeyword.value,
rowsData.value,
columns.value ? columns.value : []
);
}
onMounted(async () => {
await getData();
});
</script>
<template>
<div class="toptitle text-dark col-12 row items-center">รายการใหออก (กจาง)</div>
<q-card flat bordered class="col-12 q-mt-sm">
<q-separator />
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<q-btn
v-if="checkPermission($route)?.attrIsUpdate"
@click="openModalOrder"
size="14px"
flat
round
color="primary"
icon="mdi-account-arrow-right"
>
<q-tooltip>งไปออกคำสงใหออก</q-tooltip>
</q-btn>
<q-space />
<div class="row q-col-gutter-sm">
<q-input
standout
dense
v-model="filterKeyword"
ref="filterRef"
outlined
placeholder="ค้นหา"
@keydown.enter="onSearch"
>
<template v-slot:append>
<q-icon name="search" />
</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"
style="min-width: 140px"
/>
</div>
</div>
<div class="col-12 q-pt-sm">
<d-table
:columns="columns"
:rows="rows"
row-key="id"
:visible-columns="visibleColumns"
v-model:pagination="pagination"
>
<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">
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td auto-width>
<q-btn
v-if="checkPermission($route)?.attrIsGet"
flat
dense
round
color="info"
icon="mdi-eye"
@click="
router.push(
`/retirement/dismiss-order-detail/${props.row.id}`
)
"
>
<q-tooltip>รายละเอยด</q-tooltip>
</q-btn>
<q-btn
v-if="
checkPermission($route)?.attrIsGet &&
checkPermission($route)?.attrIsUpdate
"
flat
dense
round
color="edit"
icon="edit"
@click="
router.push(`/retirement/dismiss-order/${props.row.id}`)
"
>
<q-tooltip>แกไขขอม</q-tooltip>
</q-btn>
<q-btn
v-if="checkPermission($route)?.attrIsDelete"
dense
flat
round
:color="
props.row.status == 'REPORT' || props.row.status == 'DONE'
? 'grey'
: 'red-7'
"
@click="clickDelete(props.row.id)"
icon="mdi-delete"
:disable="
props.row.status == 'REPORT' || props.row.status == 'DONE'
"
>
<q-tooltip>ลบขอม</q-tooltip>
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.id">
<div v-if="col.name === 'no'">
{{ props.rowIndex + 1 }}
</div>
<div
v-else
:class="
col.name === 'organizationPositionOld'
? 'table_ellipsis2'
: ''
"
>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
</template>
</d-table>
</div>
</div>
</div>
</q-card>
<DialogSendToCommand
v-model:modal="modal"
:closeModal="closeModal"
v-model:rows="rows2"
v-model:rowsData="rowsData2"
v-model:filterKeyword2="filterKeyword2"
:fecthlistRecevice="getData"
/>
</template>
<style scoped lang="scss"></style>