Merge branch 'nice_dev' into develop

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-08-16 11:18:37 +07:00
commit 5d0305ca77
2 changed files with 494 additions and 244 deletions

View file

@ -5,17 +5,30 @@ import { useRoute, useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import type { ResponseTitle } from "@/modules/05_placement/interface/response/Receive";
import type {
TypeFile,
ResponseDataDetail,
} from "@/modules/05_placement/interface/response/Transfer";
import type { QTableProps, QForm } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import keycloak from "@/plugins/keycloak";
const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const mixin = useCounterMixin();
const paramsId = route.params.id;
const { messageError, showLoader, hideLoader } = mixin;
const {
messageError,
showLoader,
hideLoader,
date2Thai,
dialogConfirm,
success,
} = mixin;
const roleAdmin = ref<boolean>(false);
const title = ref<ResponseTitle>({
fullname: "",
@ -23,8 +36,37 @@ const title = ref<ResponseTitle>({
positionLevelOld: "",
positionTypeOld: "",
});
const responseData = ref<ResponseDataDetail>({
avataPath: "",
createdAt: new Date(),
date: new Date(),
id: "",
organization: "",
organizationPositionOld: "",
positionLevelOld: "",
positionNumberOld: "",
positionTypeOld: "",
reason: "",
salary: 0,
status: "",
fullname: "",
});
const edit = ref<boolean>(false);
const organizationPositionOld = ref<string>("");
const positionTypeOld = ref<string>("");
const positionLevelOld = ref<string>("");
const posNo = ref<string>("");
const salary = ref<number>(0);
const organization = ref<string>("");
const date = ref<Date | null>(null);
const reason = ref<string>("");
const Otherdata = ref<any>([]);
onMounted(async () => {
if (keycloak.tokenParsed != null) {
roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
console.log("roleAdmin===>", roleAdmin.value);
}
await fecthOther();
});
@ -32,22 +74,92 @@ const fecthOther = async () => {
showLoader();
await http
.get(config.API.otherByid(paramsId.toString()))
// .get(config.API.transferId(paramsId.toString()))
.then((res: any) => {
const data = res.data.result;
Otherdata.value = res.data.result;
console.log(data);
title.value.fullname = `${data.firstName ?? "-"} ${data.lastName ?? "-"}`;
title.value.organizationPositionOld = data.organizationPositionOld ?? "-";
title.value.positionLevelOld = data.positionLevelOld ?? "-";
title.value.positionTypeOld = data.positionTypeOld ?? "-";
responseData.value.createdAt = data.createdAt;
responseData.value.date =
data.date !== null ? new Date(data.date) : new Date();
responseData.value.id = data.id ?? "";
responseData.value.organization = data.organization ?? "";
responseData.value.organizationPositionOld =
data.organizationPositionOld ?? "";
responseData.value.positionLevelOld = data.positionLevelOld ?? "";
responseData.value.positionNumberOld = data.positionNumberOld ?? "";
responseData.value.positionTypeOld = data.positionTypeOld ?? "";
responseData.value.reason = data.reason ?? "";
responseData.value.salary = data.salary !== null ? data.salary : 0;
responseData.value.status = data.status ?? "";
responseData.value.avataPath = data.avataPath ?? "";
responseData.value.fullname = `${data.firstName ?? "-"} ${
data.lastName ?? "-"
}`;
organizationPositionOld.value = data.organizationPositionOld ?? "";
positionTypeOld.value = data.positionTypeOld ?? "";
positionLevelOld.value = data.positionLevelOld ?? "";
posNo.value = data.positionNumberOld ?? "";
salary.value = data.amountOld ?? "";
organization.value = data.organization ?? "";
date.value =
data.positionDate !== null ? new Date(data.positionDate) : null;
reason.value = data.reason ?? "";
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
edit.value = false;
});
};
const clickEdit = () => {
dialogConfirm($q, () => saveOther());
};
const saveOther = async () => {
// showLoader();
let data = {
citizenId: Otherdata.value.citizenId,
prefixId: Otherdata.value.prefixId,
firstname: Otherdata.value.firstname,
lastname: Otherdata.value.lastname,
reason: reason.value,
organizationPositionOld: organizationPositionOld.value,
positionDate: date.value,
positionTypeOld: positionTypeOld.value,
positionLevelOld: positionLevelOld.value,
positionNumberOld: posNo.value,
amountOld: Number(salary.value),
};
console.log(data);
await http
.put(config.API.otherByid(paramsId.toString()), data)
.then(() => {
success($q, "แก้ไข้ข้อมูลสำเร็จ");
})
.catch((e) => {
messageError($q, e);
console.log(e);
})
.finally(async () => {
await fecthOther();
});
};
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<template>
@ -117,6 +229,217 @@ const fecthOther = async () => {
</div>
</div>
</q-card>
<q-card bordered class="row col-12 text-dark q-mt-sm">
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
<div class="q-pl-sm text-weight-bold text-dark">
แกไขขอมลเพอลงบญชแนบทาย
</div>
<q-space />
<div class="q-gutter-sm" v-if="!edit">
<q-btn
outline
color="primary"
dense
icon-right="mdi-file-edit-outline"
class="q-px-sm"
label="แก้ไข"
style="width: 80px"
@click="edit = !edit"
/>
</div>
<div class="q-gutter-sm" v-else>
<q-btn
outline
color="public"
dense
class="q-px-sm"
label="บันทึก"
style="width: 80px"
@click="clickEdit"
/>
<q-btn
outline
color="red"
dense
class="q-px-sm"
label="ยกเลิก"
style="width: 80px"
@click="(edit = !edit), fecthOther()"
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<q-form ref="myForm">
<div class="row col-12 q-pa-md">
<div class="col-12 row bg-white q-col-gutter-md">
<div class="col-xs-12 row items-center">
<div class="col-12">
<div class="text-weight-bold text-grey">
ตำแหนงและหนวยงานเด
</div>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organizationPositionOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่ง/สังกัด'}`]"
hide-bottom-space
:label="`${'ตำแหน่ง/สังกัด'}`"
type="textarea"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionTypeOld"
:rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งประเภท'}`]"
hide-bottom-space
:label="`${'ตำแหน่งประเภท'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="positionLevelOld"
:rules="[(val) => !!val || `${'กรุณากรอกระดับ'}`]"
hide-bottom-space
:label="`${'ระดับ'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="posNo"
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่'}`]"
hide-bottom-space
:label="`${'เลขที่'}`"
/>
</div>
</div>
<div class="col-xs-6 col-sm-3 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="salary"
:rules="[(val) => !!val || `${'กรุณากรอกเงินเดือน'}`]"
hide-bottom-space
:label="`${'เงินเดือน'}`"
type="number"
/>
</div>
</div>
<div class="col-12"><q-separator /></div>
<!-- <div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="organization"
:rules="[(val) => !!val || `${'กรุณากรอกโอนไปสังกัด'}`]"
hide-bottom-space
:label="`${'โอนไปสังกัด'}`"
/>
</div>
</div> -->
<div class="col-xs-6 col-sm-6 row items-center">
<div class="col-12">
<datepicker
menu-class-name="modalfix"
:readonly="!edit"
v-model="date"
:locale="'th'"
autoApply
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger>
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:borderless="!edit"
:model-value="date !== null ? date2Thai(date) : null"
:rules="[(val) => !!val || `${'กรุณาเลือกตั้งแต่วัน'}`]"
hide-bottom-space
:label="`${'ตั้งแต่วัน'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
:style="
edit
? 'color: var(--q-primary)'
: 'color: var(--q-grey)'
"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div>
<div class="col-12">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="reason"
:rules="[(val) => !!val || `${'กรุณากรอกหมายเหตุ '}`]"
hide-bottom-space
:label="`${'หมายเหตุ '}`"
type="textarea"
/>
</div>
</div>
</div>
</q-form>
</q-card>
</template>
<style lang="scss" scope>

View file

@ -50,19 +50,22 @@ const personal = ref<any[]>([]);
const personalId = ref<string>("");
const visibleColumns = ref<string[]>([
"no",
"citizenId",
"fullname",
"organizationName",
"birthday",
"status",
"position",
"positionLevel",
"organizationPositionOld",
"organization",
"statustext",
]);
const visibleColumns2 = ref<string[]>([
"no",
"citizenId",
"fullname",
"organizationName",
"birthday",
"position",
"positionLevel",
"organizationPositionOld",
"organization",
"statustext",
]); //
const filterKeyword = ref<string>("");
const filterKeyword2 = ref<string>("");
@ -78,7 +81,7 @@ const type = ref<string>("");
onMounted(() => {
fecthlistOthet();
});
const listRecevice = ref<any>([]);
// const listRecevice = ref<any>([]);
const fecthlistOthet = async () => {
showLoader();
await http
@ -86,32 +89,36 @@ const fecthlistOthet = async () => {
.then((res) => {
console.log(res);
let response = res.data.result;
listRecevice.value = response;
// listRecevice.value = response;
console.log(response);
rows.value = response.map((e: any) => ({
personalId: e.id,
citizenId: e.citizenId,
fullname: e.firstName + " " + e.lastName,
organizationName:
e.organizationName +
" " +
e.organizationShortName +
" " +
e.positionNumber +
" " +
e.positionPath,
orgName: e.organizationName,
organizationShortName: e.organizationShortName,
positionNumber: e.positionNumberOld,
positionPath: e.positionPath,
birthday: date2Thai(e.dateOfBirth),
status: status(e.status),
rows.value = response.map((r: any) => ({
createdAt: new Date(),
date: new Date(),
firstName: r.firstName ?? "",
personalId: r.id ?? "",
isActive: r.isActive ? r.isActive : false,
lastName: r.lastName ?? "",
organization: r.organization ?? "",
organizationPositionOld: r.organizationPositionOld ?? "",
posNo: r.posNo ?? "",
position: r.position ?? "",
positionLevel: r.positionLevel ?? "",
positionLevelOld: r.positionLevelOld ?? "",
positionNumberOld: r.positionNumberOld ?? "",
positionTypeOld: r.positionTypeOld ?? "",
prefix: r.prefix ?? "",
reason: r.reason ?? "",
salary: r.salary ? r.salary : 0,
status: r.status ?? "",
statustext: status(r.status ?? ""),
fullname: `${r.prefix ?? ""} ${r.firstName ?? ""} ${r.lastName ?? ""}`,
}));
console.log(rows.value);
rows2.value = rows.value.filter((e: any) => e.orgName !== null);
})
.catch((e) => {
console.log(typeof e);
messageError($q);
console.log(e);
})
.finally(() => {
hideLoader();
@ -149,17 +156,17 @@ const rows = ref<any>([
// },
]);
const rows2 = ref<any>([
{
personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
citizenId: "1234444332222",
fullname: "นางสาวอย พชช",
organizationName: "นักจัดการงานทั่วไป",
orgName: "กลุ่มงานช่วยนักบริหาร",
organizationShortName: "สกจ.",
positionNumber: "กก. 1",
positionPath: "นักจัดการงานทั่วไป",
birthday: dateText(new Date("1989-09-03")),
},
// {
// personalId: "08db721d-add6-47b0-8a13-5f45d106e8d1",
// citizenId: "1234444332222",
// fullname: " ",
// organizationName: "",
// orgName: "",
// organizationShortName: ".",
// positionNumber: ". 1",
// positionPath: "",
// birthday: dateText(new Date("1989-09-03")),
// },
]);
const columns = ref<QTableProps["columns"]>([
{
@ -171,15 +178,6 @@ 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",
@ -190,31 +188,47 @@ const columns = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "organizationName",
name: "position",
align: "left",
label: "หน่วยงานที่รับโอน",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "organizationName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "birthday",
align: "left",
label: "วัน/เดือน/ปี เกิด",
sortable: true,
field: "birthday",
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "status",
name: "positionLevel",
align: "left",
label: "ระดับ",
sortable: true,
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationPositionOld",
align: "left",
label: "สังกัด",
sortable: true,
field: "organizationPositionOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "statustext",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
field: "statustext",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -229,15 +243,6 @@ 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",
@ -248,34 +253,59 @@ const columns2 = ref<QTableProps["columns"]>([
style: "font-size: 14px",
},
{
name: "organizationName",
name: "position",
align: "left",
label: "หน่วยงานที่รับโอน",
label: "ตำแหน่งในสายงาน",
sortable: true,
field: "organizationName",
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "birthday",
name: "positionLevel",
align: "left",
label: "วัน/เดือน/ปี เกิด",
label: "ระดับ",
sortable: true,
field: "birthday",
field: "positionLevel",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organizationPositionOld",
align: "left",
label: "สังกัด",
sortable: true,
field: "organizationPositionOld",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "organization",
align: "left",
label: "หน่วยงานที่ขอโอนไป",
sortable: true,
field: "organization",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "statustext",
align: "left",
label: "สถานะ",
sortable: true,
field: "statustext",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const openModalTree = (id: string) => {
personalId.value = id;
console.log(personalId.value);
// const openModalTree = (id: string) => {
// personalId.value = id;
// console.log(personalId.value);
personal.value = listRecevice.value.filter((e: any) => e.id === id);
modalTree.value = true;
};
// personal.value = listRecevice.value.filter((e: any) => e.id === id);
// modalTree.value = true;
// };
const clickDelete = (id: string) => {
dialogRemove($q, () => deleteOther(id));
@ -427,128 +457,52 @@ const status = (val: string) => {
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props" @click="nextPage(props.row)">
<q-tr
:props="props"
class="cursor-pointer"
@click="nextPage(props.row)"
>
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<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)"
>
<q-td key="fullname" :props="props">
{{ props.row.fullname }}
</q-td>
<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>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="positionLevel" :props="props">
{{ props.row.positionLevel }}
</q-td>
<q-td key="organizationPositionOld" :props="props">
<div class="table_ellipsis">
{{ props.row.organizationPositionOld }}
<!-- <q-tooltip>
{{ props.row.organizationPositionOld }}
</q-tooltip> -->
</div>
</q-td>
<q-td
key="birthday"
:props="props"
@click="nextPage(props.row)"
>
{{ props.row.birthday }}
<q-td key="organization" :props="props">
<div class="table_ellipsis">
{{ props.row.organization }}
<!-- <q-tooltip>
{{ props.row.organization }}
</q-tooltip> -->
</div>
</q-td>
<q-td key="status" :props="props" @click="nextPage(props.row)">
{{ props.row.status }}
<q-td key="statustext" :props="props">
{{ props.row.statustext }}
</q-td>
<q-td auto-width>
<q-td key="statustext" :props="props">
<q-btn
icon="mdi-dots-vertical"
size="12px"
color="grey-7"
flat
round
class="text-red-14"
icon="mdi-delete"
dense
@click.stop="clickDelete(props.row.personalId)"
><q-tooltip>ลบขอม</q-tooltip></q-btn
>
<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-section>
<q-item-section
>เลอกหนวยงานทบโอน</q-item-section
>
</q-item>
<q-item
clickable
v-close-popup
@click="clickDelete(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>
</q-btn>
</q-td>
</q-tr>
</template>
@ -659,54 +613,27 @@ const status = (val: string) => {
<q-td key="no" :props="props">
{{ props.rowIndex + 1 }}
</q-td>
<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)">
<q-td key="fullname" :props="props">
{{ props.row.fullname }}
</q-td>
<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>
<q-td key="position" :props="props">
{{ props.row.position }}
</q-td>
<q-td key="positionLevel" :props="props">
{{ props.row.positionLevel }}
</q-td>
<q-td key="organizationPositionOld" :props="props">
<div class="table_ellipsis">
{{ props.row.organizationPositionOld }}
</div>
</q-td>
<q-td key="birthday" :props="props" @click="nextPage(props.row)">
{{ props.row.birthday }}
<q-td key="organization" :props="props">
<div class="table_ellipsis">
{{ props.row.organization }}
</div>
</q-td>
<q-td key="statustext" :props="props">
{{ props.row.statustext }}
</q-td>
</q-tr>
</template>
@ -724,12 +651,12 @@ const status = (val: string) => {
</q-card>
</q-dialog>
<DialogOrgTree
<!-- <DialogOrgTree
v-model:modal="modalTree"
:close="closeModalTree"
:personal="personal"
:personalId="personalId"
/>
/> -->
<!-- :personalId="personalId" -->
</template>
<style scoped lang="scss"></style>