update ขอโอนรับโอน

This commit is contained in:
Warunee Tamkoo 2023-08-04 22:15:59 +07:00
parent c613d3743e
commit 01f0ef0062
6 changed files with 1947 additions and 333 deletions

View file

@ -6,6 +6,17 @@ import { useRouter } from "vue-router";
import DialogFooter from "@/modules/05_placement/components/Receive/DialogFooter.vue";
import DialogHeader from "@/modules/05_placement/components/Receive/DialogHeader.vue";
import DialogOrgTree from "@/modules/05_placement/components/Receive/receiveModal.vue";
import { useCounterMixin } from "@/stores/mixin";
import { config } from "@fullcalendar/core/internal";
import http from "@/plugins/http";
const mixin = useCounterMixin(); //
const {
showLoader,
hideLoader,
dateText,
success,
messageError
} = mixin;
const selected = ref([]);
const checkSelected = computed(() => {
@ -13,6 +24,11 @@ const checkSelected = computed(() => {
return true;
}
});
const add = () => {
router.push(`/receive/add`);
};
const clickClose = () => {
modal.value = false;
};
@ -29,21 +45,18 @@ const personal = ref<any[]>([]);
const personalId = ref<string>("");
const visibleColumns = ref<string[]>([
"no",
"citizenId",
"fullname",
"position",
"positionLevel",
"oc",
"agency",
"status",
"organizationName",
"birthday"
]);
const visibleColumns2 = ref<string[]>([
"no",
"citizenId",
"fullname",
"position",
"positionLevel",
"oc",
"agency",
"status",
"organizationName",
"birthday"
]); //
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
@ -60,95 +73,49 @@ const resetFilter = () => {
const rows = ref<any>([
{
personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
citizenId: "1234444332222",
fullname: "นางสาวอย พชช",
position: "นักบริหาร",
positionLevel: "ต้น",
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
agency: "กลุ่มงานกุมารเวชกรรม",
status: "รออนุมัติ",
organizationName: "นักจัดการงานทั่วไป",
orgName: "กลุ่มงานช่วยนักบริหาร",
organizationShortName: "สกจ.",
positionNumber: "กก. 1",
positionPath: "นักจัดการงานทั่วไป",
birthday: dateText(new Date("1989-09-03"))
},
{
personalId: "08db721d-adf2-4842-8056-1abb1539356e",
citizenId: "0000222333333",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-ae3d-4b8c-8cf0-b86b5a2ed8bb",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-afde-4ed4-8bc6-f0ad83e61c4d",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-b24e-45d7-8a65-3f28ef4948a4",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
organizationName: "นักจัดการงานทั่วไป",
orgName: "กลุ่มงานช่วยนักบริหาร",
organizationShortName: "สกจ.",
positionNumber: "กก. 1",
positionPath: "นักจัดการงานทั่วไป",
birthday: dateText(new Date("1990-09-03")),
},
]);
const rows2 = ref<any>([
{
personalId: "0a846508-4932-40de-9a9e-5b519492217c",
fullname: "นางสาวอย พชช",
position: "นักบริหาร",
positionLevel: "ต้น",
oc: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
agency: "กลุ่มงานกุมารเวชกรรม",
status: "รออนุมัติ",
},
{
personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
citizenId: "1234444332222",
fullname: "นางสาวอย พชช",
organizationName: "นักจัดการงานทั่วไป",
orgName: "กลุ่มงานช่วยนักบริหาร",
organizationShortName: "สกจ.",
positionNumber: "กก. 1",
positionPath: "นักจัดการงานทั่วไป",
birthday: dateText(new Date("1989-09-03")),
},
{
personalId: "08db721d-adf2-4842-8056-1abb1539356e",
citizenId: "0000222333333",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-adff-47b0-8762-41cd5c991001",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
},
{
personalId: "08db721d-ae22-424d-8f4a-87ba30cc3ee7",
fullname: "นางสาววญ สพ",
position: "นักจัดการงานทั่วไป",
positionLevel: "ปฏิบัติการ",
oc: "กลุ่มงานช่วยนักบริหาร",
agency: "กลุ่มงานข้อมูลเมือง",
status: "รออนุมัติ",
organizationName: "นักจัดการงานทั่วไป",
orgName: "กลุ่มงานช่วยนักบริหาร",
organizationShortName: "สกจ.",
positionNumber: "กก. 1",
positionPath: "นักจัดการงานทั่วไป",
birthday: dateText(new Date("1990-09-03")),
},
]);
const columns = ref<QTableProps["columns"]>([
@ -161,6 +128,15 @@ const columns = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
@ -171,47 +147,22 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "position",
align: "left",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "oc",
align: "left",
label: "สังกัด",
sortable: true,
field: "oc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "agency",
name: "organizationName",
align: "left",
label: "หน่วยงานที่รับโอน",
sortable: true,
field: "agency",
field: "organizationName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
name: "birthday",
align: "left",
label: "สถานะ",
label: "วัน/เดือน/ปี เกิด",
sortable: true,
field: "status",
field: "birthday",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -226,6 +177,15 @@ const columns2 = ref<QTableProps["columns"]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "citizenId",
align: "left",
label: "เลขประจำตัวประชาชน",
sortable: true,
field: "fullname",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "fullname",
align: "left",
@ -236,47 +196,22 @@ const columns2 = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "position",
name: "organizationName",
align: "left",
label: "ตำแหน่งในสายงาน",
label: "หน่วยงานที่รับโอน",
sortable: true,
field: "position",
field: "organizationName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionLevel",
name: "birthday",
align: "left",
label: "ระดับ",
label: "วัน/เดือน/ปี เกิด",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "oc",
align: "left",
label: "สังกัด",
sortable: true,
field: "oc",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "agency",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
sortable: true,
field: "agency",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
field: "birthday",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -288,6 +223,33 @@ const openModalTree = (id: string) => {
modalTree.value = true;
};
const openDelete = (id: string) => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(async () => {
showLoader();
await http
.delete(config.API.receiveData(id))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
});
})
.onCancel(() => {
});
};
const closeModalTree = async () => {
// await getTable();
modalTree.value = false;
@ -306,64 +268,31 @@ const nextPage = (row: any) => {
<div class="row q-pa-md">
<div class="col-12">
<div class="row col-12">
<q-btn
@click="popup()"
size="14px"
flat
round
color="add"
icon="mdi-account-arrow-right"
>
<q-btn flat round color="primary" @click="add" icon="mdi-plus">
<q-tooltip>เพมขอม</q-tooltip>
</q-btn>
<q-btn @click="popup()" size="14px" flat round color="add" icon="mdi-account-arrow-right">
<q-tooltip>งไปออกคำสงรบโอน</q-tooltip>
</q-btn>
<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-ml-sm"
/>
<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-ml-sm" />
</div>
<div class="col-12 q-pt-sm">
<d-table
:columns="columns"
:rows="rows"
:filter="filterKeyword"
row-key="fullname"
:visible-columns="visibleColumns"
>
<d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="fullname"
:visible-columns="visibleColumns">
<template v-slot:header="props">
<q-tr :props="props">
<q-th v-for="col in props.cols" :key="col.name" :props="props">
@ -377,69 +306,63 @@ const nextPage = (row: any) => {
<q-td key="no" :props="props" @click="nextPage(props.row)">
{{ props.rowIndex + 1 }}
</q-td>
<q-td
key="fullname"
:props="props"
@click="nextPage(props.row)"
>
<q-td key="citizenId" :props="props" @click="nextPage(props.row)">
{{ props.row.citizenId }}
</q-td>
<q-td key="fullname" :props="props" @click="nextPage(props.row)">
{{ props.row.fullname }}
</q-td>
<q-td
key="position"
:props="props"
@click="nextPage(props.row)"
>
{{ props.row.position }}
<q-td key="organizationName" :props="props" @click="nextPage(props.row)">
<div v-if="props.row.orgName !== null || props.row.positionPath !== null
">
<div class="col-4">
<div class="text-weight-medium">
{{ props.row.orgName !== null ? props.row.orgName : "-" }}
{{
props.row.organizationShortName !== null
? `(${props.row.organizationShortName})`
: ""
}}
</div>
<div class="text-weight-light">
{{
props.row.positionPath !== null
? props.row.positionPath
: "-"
}}
{{
props.row.positionNumber !== null
? `(${props.row.positionNumber})`
: ""
}}
</div>
</div>
</div>
<div v-else>
<div class="col-4">
<div class="text-weight-medium">-</div>
</div>
</div>
</q-td>
<q-td
key="positionLevel"
:props="props"
@click="nextPage(props.row)"
>
{{ props.row.positionLevel }}
</q-td>
<q-td key="oc" :props="props" @click="nextPage(props.row)">
{{ props.row.oc }}
</q-td>
<q-td key="agency" :props="props" @click="nextPage(props.row)">
{{ props.row.agency }}
</q-td>
<q-td key="status" :props="props" @click="nextPage(props.row)">
{{ props.row.status }}
<q-td key="birthday" :props="props" @click="nextPage(props.row)">
{{ props.row.birthday }}
</q-td>
<q-td auto-width>
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
dense
>
<q-menu
transition-show="jump-down"
transition-hide="jump-up"
>
<q-btn icon="mdi-dots-vertical" size="12px" color="grey-7" flat round dense>
<q-menu transition-show="jump-down" transition-hide="jump-up">
<q-list dense style="min-width: 100px">
<q-item
clickable
v-close-popup
@click="openModalTree(props.row.personalId)"
>
<q-item-section
style="min-width: 0px"
avatar
class="q-py-sm"
>
<q-icon
color="primary"
size="xs"
name="mdi-bookmark-outline"
/>
<q-item clickable v-close-popup @click="openModalTree(props.row.personalId)">
<q-item-section style="min-width: 0px" avatar class="q-py-sm">
<q-icon color="primary" size="xs" name="mdi-bookmark-outline" />
</q-item-section>
<q-item-section
>เลอกหนวยงานทบโอน</q-item-section
>
<q-item-section>เลอกหนวยงานทบโอน</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="openDelete(props.row.personalId)">
<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>
@ -461,61 +384,24 @@ const nextPage = (row: any) => {
<div class="row justify-end">
<div class="col-5">
<q-toolbar style="padding: 0">
<q-input
borderless
outlined
dense
debounce="300"
v-model="filterKeyword2"
placeholder="ค้นหา"
style="width: 850px; max-width: auto"
>
<q-input borderless outlined dense debounce="300" v-model="filterKeyword2" placeholder="ค้นหา"
style="width: 850px; max-width: auto">
<template v-slot:append>
<q-icon v-if="filterKeyword2 == ''" name="search" />
<q-icon
v-if="filterKeyword2 !== ''"
name="clear"
class="cursor-pointer"
@click="resetFilter"
/>
<q-icon v-if="filterKeyword2 !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
</template>
</q-input>
<q-select
v-model="visibleColumns2"
multiple
outlined
dense
options-dense
:display-value="$q.lang.table.columns"
emit-value
map-options
:options="columns2"
option-value="name"
options-cover
style="min-width: 150px"
class="gt-xs q-ml-sm"
/>
<q-select v-model="visibleColumns2" multiple outlined dense options-dense
:display-value="$q.lang.table.columns" emit-value map-options :options="columns2" option-value="name"
options-cover style="min-width: 150px" class="gt-xs q-ml-sm" />
</q-toolbar>
</div>
</div>
<d-table
:columns="columns2"
:rows="rows2"
:filter="filterKeyword2"
row-key="personalId"
flat
:visible-columns="visibleColumns2"
selection="multiple"
v-model:selected="selected"
>
<d-table :columns="columns2" :rows="rows2" :filter="filterKeyword2" row-key="personalId" flat
:visible-columns="visibleColumns2" selection="multiple" v-model:selected="selected">
<template v-slot:header-selection="scope">
<q-checkbox
keep-color
color="primary"
dense
v-model="scope.selected"
/>
<q-checkbox keep-color color="primary" dense v-model="scope.selected" />
</template>
<!-- <template v-slot:body-selection="scope">
<q-checkbox
@ -528,33 +414,51 @@ const nextPage = (row: any) => {
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td>
<q-checkbox
keep-color
color="primary"
dense
v-model="props.selected"
/>
<q-checkbox keep-color color="primary" dense v-model="props.selected" />
</q-td>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<q-td key="fullname" :props="props">
<q-td key="citizenId" :props="props" @click="nextPage(props.row)">
{{ props.row.citizenId }}
</q-td>
<q-td key="fullname" :props="props" @click="nextPage(props.row)">
{{ props.row.fullname }}
</q-td>
<q-td key="position" :props="props">
{{ props.row.position }}
<q-td key="organizationName" :props="props" @click="nextPage(props.row)">
<div v-if="props.row.orgName !== null || props.row.positionPath !== null
">
<div class="col-4">
<div class="text-weight-medium">
{{ props.row.orgName !== null ? props.row.orgName : "-" }}
{{
props.row.organizationShortName !== null
? `(${props.row.organizationShortName})`
: ""
}}
</div>
<div class="text-weight-light">
{{
props.row.positionPath !== null
? props.row.positionPath
: "-"
}}
{{
props.row.positionNumber !== null
? `(${props.row.positionNumber})`
: ""
}}
</div>
</div>
</div>
<div v-else>
<div class="col-4">
<div class="text-weight-medium">-</div>
</div>
</div>
</q-td>
<q-td key="positionLevel" :props="props">
{{ props.row.positionLevel }}
</q-td>
<q-td key="oc" :props="props">
{{ props.row.oc }}
</q-td>
<q-td key="agency" :props="props">
{{ props.row.agency }}
</q-td>
<q-td key="status" :props="props">
{{ props.row.status }}
<q-td key="birthday" :props="props" @click="nextPage(props.row)">
{{ props.row.birthday }}
</q-td>
</q-tr>
</template>
@ -562,21 +466,11 @@ const nextPage = (row: any) => {
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn
label="บันทึก"
@click=""
:disable="checkSelected"
color="public"
/>
<q-btn label="บันทึก" @click="" :disable="checkSelected" color="public" />
</q-card-actions>
</q-card>
</q-dialog>
<DialogOrgTree
v-model:modal="modalTree"
:personalId="personalId"
:close="closeModalTree"
:personal="personal"
/>
<DialogOrgTree v-model:modal="modalTree" :personalId="personalId" :close="closeModalTree" :personal="personal" />
</template>
<style scoped lang="scss"></style>