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

ปรับ fe sprint2

Browse source
This commit is contained in:
Kittapath 2023-06-19 15:50:50 +07:00
parent 8576f3c387
commit 0d6ff7be0a
83 changed files with 6932 additions and 2571 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/modules/04_registry/components/Information/Address.vue
View file

@ -311,10 +311,6 @@ const props = defineProps({
type: Boolean,
required: true,
},
notiNoEdit: {
type: Function,
default: () => console.log("not function"),
},
});
const emit = defineEmits(["update:statusEdit"]);
@ -323,7 +319,7 @@ const $q = useQuasar();
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
const { date2Thai, success, messageError } = mixin;
const edit = ref<boolean>(false);
const addressData = ref<Address>(defaultAddress);
const myform = ref<any>();
@ -561,7 +557,7 @@ const filterSelector = (val: any, update: Function, refData: string) => {
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
loaderPage(true);
await http
.get(config.API.profileAdrsHisId(route.params.id.toString()))
.then((res) => {
@ -589,7 +585,7 @@ const clickHistory = async () => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
};
@ -610,7 +606,7 @@ const getNewData = async () => {
};
const fetchData = async () => {
showLoader();
loaderPage(true);
await http
.get(config.API.profileAdrsId(route.params.id.toString()))
.then((res) => {
@ -629,7 +625,7 @@ const fetchData = async () => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
};
@ -661,7 +657,7 @@ const editData = async () => {
createdAt: new Date(),
createdFullName: "-",
};
showLoader();
loaderPage(true);
await http
.put(config.API.profileAdrsId(route.params.id.toString()), body)
.then((res) => {
@ -731,7 +727,7 @@ const selectSubDistrict = (e: string | null, name: string) => {
};
const fetchProvince = async () => {
showLoader();
loaderPage(true);
await http
.get(config.API.province)
.then((res) => {
@ -747,13 +743,13 @@ const fetchProvince = async () => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
};
const fetchDistrict = async (id: string | null, position: string) => {
if (id != null) {
showLoader();
loaderPage(true);
await http
.get(config.API.listDistrict(id))
.then((res) => {
@ -774,14 +770,14 @@ const fetchDistrict = async (id: string | null, position: string) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
}
};
const fetchSubDistrict = async (id: string | null, position: string) => {
if (id != null) {
showLoader();
loaderPage(true);
await http
.get(config.API.listSubDistrict(id))
.then((res) => {
@ -806,7 +802,7 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
}
};
@ -815,7 +811,6 @@ const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
props.notiNoEdit();
} else {
emit("update:statusEdit", true);
}

17
src/modules/04_registry/components/Information/Certicate.vue
View file

@ -293,8 +293,7 @@ const { profileData, changeProfileColumns } = store;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
const { date2Thai, success, dateToISO, messageError } = mixin;
const route = useRoute();
const id = ref<string>("");
const certificateNo = ref<string>();
@ -485,7 +484,7 @@ onMounted(async () => {
});
const fetchData = async () => {
showLoader();
loaderPage(true);
await http
.get(config.API.profileCertId(profileId.value))
.then((res) => {
@ -508,7 +507,7 @@ const fetchData = async () => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
};
@ -596,7 +595,7 @@ const clickSave = async () => {
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
showLoader();
loaderPage(true);
await http
.post(config.API.profileCertId(profileId.value), {
id: id.value,
@ -622,7 +621,7 @@ const saveData = async () => {
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
showLoader();
loaderPage(true);
await http
.put(config.API.profileCertId(id.value), {
id: id.value,
@ -656,7 +655,7 @@ const clickDelete = async () => {
persistent: true,
})
.onOk(async () => {
showLoader();
loaderPage(true);
await http
.delete(config.API.profileCertId(id.value))
.then((res) => {
@ -770,7 +769,7 @@ const clickHistory = async (row: RequestItemsObject) => {
? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
: "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
modalHistory.value = true;
showLoader();
loaderPage(true);
await http
.get(config.API.profileCertHisId(row.id))
.then((res) => {
@ -793,7 +792,7 @@ const clickHistory = async (row: RequestItemsObject) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
};

61
src/modules/04_registry/components/Information/Family.vue
View file

@ -774,7 +774,6 @@ import type {
import http from "@/plugins/http";
import config from "@/app.config";
import { useRoute } from "vue-router";
import { useManageDataStore } from "@/modules/01_metadata/store";
const props = defineProps({
statusEdit: {
@ -790,10 +789,10 @@ const emit = defineEmits(["update:statusEdit"]);
const route = useRoute();
const $q = useQuasar();
const store = useManageDataStore();
const { getPrefix } = store;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
const { date2Thai, success, messageError } = mixin;
const edit = ref<boolean>(false);
const fix = ref<boolean>(true);
const myform = ref<QForm | null>(null);
@ -858,34 +857,24 @@ const refreshData = async () => {
};
const fetchPrefix = async () => {
const result = await getPrefix(true, false);
const data = result.data;
let option: DataOption[] = [];
if (data.length > 0) {
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
loaderPage(true);
await http
.get(config.API.prefix)
.then((res) => {
const data = res.data.result;
let option: DataOption[] = [];
data.map((r: any) => {
option.push({ id: r.id.toString(), name: r.name.toString() });
});
Ops.value.prefixOps = option;
OpsFilter.value.prefixOps = option;
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
}
Ops.value.prefixOps = option;
OpsFilter.value.prefixOps = option;
// showLoader();
// await http
// .get(config.API.prefix)
// .then((res) => {
// const data = res.data.result;
// let option: DataOption[] = [];
// data.map((r: any) => {
// option.push({ id: r.id.toString(), name: r.name.toString() });
// });
// Ops.value.prefixOps = option;
// OpsFilter.value.prefixOps = option;
// })
// .catch((e) => {
// messageError($q, e);
// })
// .finally(() => {
// hideLoader();
// });
};
const addChildren = async () => {
@ -912,7 +901,7 @@ const deleteChildren = (items: childrenFamily) => {
const fetchHistory = async () => {
familyDataHistory.value = [];
showLoader();
loaderPage(true);
await http
.get(config.API.profileFamiHisId(route.params.id.toString()))
.then((res) => {
@ -944,7 +933,7 @@ const fetchHistory = async () => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
loaderPage(false);
if (familyDataHistory.value.length == 0) {
// modalError(
// $q,
@ -966,7 +955,7 @@ const fetchHistory = async () => {
};
const fetchData = async () => {
showLoader();
loaderPage(true);
await http
.get(config.API.profileFamiId(route.params.id.toString()))
.then((res) => {
@ -1011,12 +1000,12 @@ const fetchData = async () => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
loaderPage(false);
});
};
const editData = async () => {
showLoader();
loaderPage(true);
const body: ResponseObject = {
couple: familyData.value.same == "1",
couplePrefixId: familyData.value.prefixIdC,

129
src/modules/04_registry/components/Information/Government.vue
View file

@ -25,6 +25,18 @@
:label="`${'สังกัด'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.numberId"
:label="`${'ตำแหน่งเลขที่'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
@ -45,8 +57,8 @@
lazy-rules
readonly
borderless
:model-value="govermentData.numberId"
:label="`${'เลขที่ตำแหน่ง'}`"
:model-value="govermentData.positionPathSide"
:label="`${'ด้าน/สาขา'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
@ -57,7 +69,7 @@
lazy-rules
readonly
borderless
:model-value="govermentData.workId"
:model-value="govermentData.positionLine"
:label="`${'สายงาน'}`"
/>
</div>
@ -69,7 +81,7 @@
lazy-rules
readonly
borderless
:model-value="govermentData.typeId"
:model-value="govermentData.positionType"
:label="`${'ประเภท'}`"
/>
</div>
@ -81,7 +93,7 @@
lazy-rules
readonly
borderless
:model-value="govermentData.levelId"
:model-value="govermentData.positionLevel"
:label="`${'ระดับ'}`"
/>
</div>
@ -93,10 +105,22 @@
lazy-rules
readonly
borderless
:model-value="govermentData.businessId"
:model-value="govermentData.positionExecutive"
:label="`${'ตำแหน่งทางการบริหาร'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<q-input
:class="getClass(false)"
hide-bottom-space
dense
lazy-rules
readonly
borderless
:model-value="govermentData.positionExecutiveSide"
:label="`${'ด้านตำแหน่งทางการบริหาร'}`"
/>
</div>
<div class="col-12 q-py-md"><q-separator /></div>
<div class="col-xs-6 col-sm-3 col-md-3">
<datepicker
@ -125,8 +149,8 @@
:readonly="!edit"
:borderless="!edit"
:model-value="date2Thai(new Date(govermentData.containDate))"
:rules="[(val) => !!val || `${'กรุณาเลือก วันที่สั่งบรรจุ'}`]"
:label="`${'วันที่สั่งบรรจุ'}`"
:rules="[(val) => !!val || `${'กรุณาเลือก วันที่บรรจุ'}`]"
:label="`${'วันที่บรรจุ'}`"
>
<template v-slot:prepend>
<q-icon
@ -306,11 +330,6 @@ const props = defineProps({
type: Boolean,
required: true,
},
notiNoEdit: {
type: Function,
default: () => console.log("not function"),
},
});
const emit = defineEmits(["update:statusEdit"]);
@ -319,8 +338,7 @@ const $q = useQuasar();
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
mixin;
const { date2Thai, success, dateToISO, messageError } = mixin;
const profileStore = useProfileDataStore();
const { birthDate, retireText } = storeToRefs(profileStore);
const edit = ref<boolean>(false);
@ -343,10 +361,21 @@ const columnsHistory = ref<QTableProps["columns"]>([
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "position",
name: "positionPathSide",
align: "left",
label: "ตำแหน่ง",
sortable: true,
field: "positionPathSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "position",
align: "left",
label: "ด้าน/สาขา",
sortable: true,
field: "position",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -356,7 +385,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
{
name: "posNo",
align: "left",
label: "เลขที่ตำแหน่ง",
label: "ตำแหน่งเลขที่",
sortable: true,
field: "posNo",
headerStyle: "font-size: 14px",
@ -408,10 +437,21 @@ const columnsHistory = ref<QTableProps["columns"]>([
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "positionExecutiveSide",
align: "left",
label: "ด้านทางการบริหาร",
sortable: true,
field: "positionExecutiveSide",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "dateAppoint",
align: "left",
label: "วันที่สั่งบรรจุ",
label: "วันที่บรรจุ",
sortable: true,
field: "dateAppoint",
headerStyle: "font-size: 14px",
@ -511,11 +551,13 @@ const columnsHistory = ref<QTableProps["columns"]>([
const visibleColumnsHistory = ref<String[]>([
"oc",
"position",
"positionPathSide",
"posNo",
"positionLine",
"positionType",
"positionLevel",
"positionexecutive",
"positionExecutiveSide",
"dateAppoint",
"dateStart",
"retireDate",
@ -541,18 +583,20 @@ watch(retireText, async () => {
});
const fetchData = async () => {
showLoader();
loaderPage(true);
await http
.get(config.API.profileGovId(route.params.id.toString()))
.then((res) => {
const data: ResponseObject = res.data.result;
govermentData.value.ocId = data.oc;
govermentData.value.positionId = data.position;
govermentData.value.workId = data.work;
govermentData.value.typeId = data.type;
govermentData.value.levelId = data.level;
govermentData.value.positionPathSide = data.positionPathSide;
govermentData.value.positionLine = data.positionLine;
govermentData.value.positionType = data.positionType;
govermentData.value.positionLevel = data.positionLevel;
govermentData.value.numberId = data.posNo;
govermentData.value.businessId = data.business;
govermentData.value.positionExecutive = data.positionExecutive;
govermentData.value.positionExecutiveSide = data.positionExecutiveSide;
govermentData.value.containDate = new Date(data.dateAppoint);
govermentData.value.workDate = new Date(data.dateStart);
govermentData.value.retireDate = data.retireDate;
@ -565,7 +609,7 @@ const fetchData = async () => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
loaderPage(false);
});
};
@ -575,27 +619,13 @@ const refreshData = async () => {
};
const editData = async () => {
showLoader();
const body: ResponseObject = {
oc: govermentData.value.ocId,
business: govermentData.value.businessId,
dateAppoint: dateToISO(govermentData.value.containDate),
dateStart: dateToISO(govermentData.value.workDate),
govAge: govermentData.value.ageAll,
govAgeAbsent: govermentData.value.absent,
govAgePlus: govermentData.value.age,
level: govermentData.value.levelId,
posNo: govermentData.value.numberId,
position: govermentData.value.positionId,
retireDate: govermentData.value.retireDate,
type: govermentData.value.typeId,
work: govermentData.value.workId,
reasonSameDate: govermentData.value.reasonSameDate,
createdAt: new Date(),
createdFullName: "-",
};
loaderPage(true);
await http
.put(config.API.profileGovId(route.params.id.toString()), body)
.put(config.API.profileGovId(route.params.id.toString()), {
dateAppoint: dateToISO(govermentData.value.containDate),
dateStart: dateToISO(govermentData.value.workDate),
reasonSameDate: govermentData.value.reasonSameDate,
})
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
})
@ -624,7 +654,7 @@ const handleDate = async (modelData: Date) => {
};
const fetchCalAgeGov = async (date: Date) => {
showLoader();
loaderPage(true);
const body = {
dateAppoint: date,
};
@ -638,7 +668,7 @@ const fetchCalAgeGov = async (date: Date) => {
messageError($q, e);
})
.finally(async () => {
hideLoader();
loaderPage(false);
});
};
@ -647,7 +677,7 @@ const fetchCalAgeGov = async (date: Date) => {
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
loaderPage(true);
await http
.get(config.API.profileGovHisId(route.params.id.toString()))
.then((res) => {
@ -657,11 +687,13 @@ const clickHistory = async () => {
rowsHistory.value.push({
oc: e.oc,
position: e.position,
positionPathSide: e.positionPathSide,
posNo: e.posNo,
positionLine: e.positionLine,
positionType: e.positionType,
positionLevel: e.positionLevel,
positionExecutive: e.positionExecutive,
positionExecutiveSide: e.positionExecutiveSide,
dateAppoint: new Date(e.dateAppoint),
dateStart: new Date(e.dateStart),
retireDate: e.retireDate,
@ -678,7 +710,7 @@ const clickHistory = async () => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
};
@ -686,7 +718,6 @@ const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
props.notiNoEdit();
} else {
emit("update:statusEdit", true);
}

246
src/modules/04_registry/components/Information/Information.vue
View file

@ -23,6 +23,7 @@
:readonly="!edit"
:borderless="!edit"
v-model="informaData.cardid"
@update:model-value="changeCardID"
maxlength="13"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
@ -88,7 +89,7 @@
:label="`${'นามสกุล'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-2 col-md-2">
<datepicker
v-model="informaData.birthDate"
:locale="'th'"
@ -132,7 +133,7 @@
</template>
</datepicker>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(false)"
hide-bottom-space
@ -145,7 +146,7 @@
:label="`${'อายุ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
@ -170,7 +171,7 @@
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
@ -195,32 +196,7 @@
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก หมู่เลือด'}`]"
:outlined="edit"
dense
lazy-rules
v-model="informaData.bloodId"
emit-value
map-options
option-label="name"
:options="Ops.bloodOps"
option-value="id"
:label="`${'หมู่เลือด'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
@ -234,7 +210,7 @@
:label="`${'สัญชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
:class="getClass(edit)"
hide-bottom-space
@ -248,7 +224,7 @@
:label="`${'เชื้อชาติ'}`"
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
@ -273,7 +249,32 @@
) "
/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="col-xs-6 col-sm-2 col-md-2">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:outlined="edit"
dense
lazy-rules
v-model="informaData.bloodId"
emit-value
map-options
option-label="name"
:options="Ops.bloodOps"
option-value="id"
:label="`${'หมู่เลือด'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
) "
clearable
/>
</div>
<div class="col-xs-6 col-sm-2 col-md-2">
<q-input
hide-bottom-space
:outlined="edit"
@ -284,10 +285,6 @@
:readonly="!edit"
:borderless="!edit"
v-model="informaData.tel"
:rules="[
(val:string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
(val:string) => val.length >= 10 || `${'กรุณากรอกข้อมูลเบอร์โทรให้ครบ'}`,
]"
:label="`${'เบอร์โทร'}`"
mask="##########"
/>
@ -348,6 +345,35 @@
) "
/>
</div>
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
<div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
<label class="text-weight-bold">• เปลี่ยนชื่อ-นามสกุล</label>
<q-radio
v-model="same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="1"
label="มี"
dense
:disable="!edit"
/>
<q-radio
v-model="same"
checked-icon="task_alt"
unchecked-icon="panorama_fish_eye"
val="0"
label="ไม่มี"
dense
:disable="!edit"
/>
</div>
<div class="row col-12">
<OldName
v-if="same == '1'"
v-model:statusEdit="edit"
:fetchDataInformation="fetchDataComponent"
/>
</div>
</div>
</q-form>
</q-card>
@ -394,6 +420,7 @@ import type {
} from "@/modules/04_registry/interface/request/Information";
import type { ResponseObject } from "@/modules/04_registry/interface/response/Information";
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
import OldName from "@/modules/04_registry/components/Information/OldName.vue";
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
@ -407,7 +434,7 @@ const props = defineProps({
type: Boolean,
required: true,
},
notiNoEdit: {
fetchDataProfile: {
type: Function,
default: () => console.log("not function"),
},
@ -417,36 +444,31 @@ const emit = defineEmits(["update:statusEdit"]);
const route = useRoute();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
modalError,
showLoader,
hideLoader,
} = mixin;
const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const profileStore = useProfileDataStore();
const { changeRetireText, changeBirth } = profileStore;
const edit = ref<boolean>(false);
const defaultCitizenData = ref<string | null>("");
const informaData = ref<Information>(defaultInformation);
const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const age = ref<boolean>(true);
const myform = ref<QForm | null>(null);
const dateBefore = ref<Date>(new Date());
const same = ref<string>("0");
const Ops = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
{ id: "perm", name: "ลูกจ้างประจำ" },
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
],
employeeTypeOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
@ -455,13 +477,14 @@ const Ops = ref<InformationOps>({
});
const OpsFilter = ref<InformationOps>({
prefixOps: [],
prefixOldOps: [],
genderOps: [],
bloodOps: [],
statusOps: [],
religionOps: [],
employeeClassOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
{ id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
{ id: "perm", name: "ลูกจ้างประจำ" },
{ id: "temp", name: "ลูกจ้างชั่วคราว" },
],
employeeTypeOps: [
{ id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
@ -682,7 +705,7 @@ const onCancel = async () => {
* get รายการ ข้อมูลเกี่ยวกับบุคคล
*/
const fetchPerson = async () => {
showLoader();
loaderPage(true);
await http
.get(config.API.person)
.then((res) => {
@ -739,7 +762,58 @@ const fetchPerson = async () => {
})
.catch((e: any) => {})
.finally(() => {
hideLoader();
loaderPage(false);
});
};
const changeCardID = (value: string | number | null) => {
if (value != null && typeof value == "string") {
if (value.length == 13 && value != defaultCitizenData.value) {
dialogMessage(
$q,
"ข้อมูลมีการแก้ไข?",
"ยืนยันการเปลี่ยนเลขบัตรประชาชนใช่หรือไม่",
"info",
"ยืนยัน",
"public",
async () => {
await checkCitizen(value);
},
async () => {
informaData.value.cardid = defaultCitizenData.value;
}
);
}
}
};
const checkCitizen = async (id: string) => {
loaderPage(true);
await http
.get(config.API.profileCitizenId(id))
.then((res) => {
const data = res.data.result.citizen;
if (!data) {
dialogMessage(
$q,
"ข้อความแจ้งเตือน",
"เลขบัตรประจำตัวประชาชนนี้มีการใช้งานแล้ว",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
informaData.value.cardid = defaultCitizenData.value;
}
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
};
@ -748,7 +822,7 @@ const fetchPerson = async () => {
*/
const clickHistory = async () => {
modalHistory.value = true;
showLoader();
loaderPage(true);
await http
.get(config.API.profileInforHisId(route.params.id.toString()))
.then((res) => {
@ -789,7 +863,7 @@ const clickHistory = async () => {
messageError($q, e);
})
.finally(() => {
hideLoader();
loaderPage(false);
});
};
@ -855,36 +929,44 @@ const handleDate = async (modelData: Date) => {
await calRetire(modelData);
};
const fetchDataComponent = async (modelData: Date) => {
await props.fetchDataProfile();
await fetchData();
};
const calRetire = async (birth: Date) => {
const body = {
birthDate: dateToISO(birth),
};
showLoader();
await http
.post(config.API.profileCalRetire, body)
.then((res: any) => {
const data = res.data.result;
informaData.value.age = data.age;
changeRetireText(data.retireDate);
age.value = true;
})
.catch((e: any) => {
age.value = false;
messageError($q, e);
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
changeRetireText(date2Thai(retire));
})
.finally(() => {
hideLoader();
});
if (dateToISO(dateBefore.value) != dateToISO(birth)) {
loaderPage(true);
await http
.post(config.API.profileCalRetire, body)
.then((res: any) => {
const data = res.data.result;
informaData.value.age = data.age;
changeRetireText(data.retireDate);
dateBefore.value = birth;
})
.catch((e: any) => {
messageError($q, e);
const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
informaData.value.birthDate = dateBefore.value;
changeRetireText(date2Thai(retire));
})
.finally(() => {
loaderPage(false);
});
}
};
const fetchData = async () => {
showLoader();
loaderPage(true);
await http
.get(config.API.profileInforId(route.params.id.toString()))
.then(async (res: any) => {
const data: ResponseObject = res.data.result;
defaultCitizenData.value = data.citizenId;
informaData.value.cardid = data.citizenId;
informaData.value.prefix = "";
informaData.value.prefixId = data.prefixId;
@ -902,6 +984,8 @@ const fetchData = async () => {
informaData.value.employeeType = data.employeeType;
informaData.value.employeeClass = data.employeeClass;
informaData.value.profileType = data.profileType;
dateBefore.value = new Date(data.birthDate);
same.value = data.changeName == true ? "1" : "0";
await calRetire(new Date(dateToISO(new Date(data.birthDate))));
if (data.profileType == "officer" && columnsHistory.value.length >= 15) {
columnsHistory.value.splice(13, 1);
@ -911,16 +995,13 @@ const fetchData = async () => {
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
.finally(async () => {
// loaderPage(false);
await props.fetchDataProfile();
});
};
const editData = async () => {
if (age.value == false) {
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
return;
}
const body: any = {
citizenId: informaData.value.cardid,
prefixId: informaData.value.prefixId,
@ -941,7 +1022,7 @@ const editData = async () => {
profileType: informaData.value.profileType,
createdFullName: "-",
};
showLoader();
loaderPage(true);
await http
.put(config.API.profileInforId(route.params.id.toString()), body)
.then((res) => {
@ -973,7 +1054,6 @@ const changeBtn = async () => {
if (edit.value == true) {
if (props.statusEdit === true) {
edit.value = false;
props.notiNoEdit();
} else {
emit("update:statusEdit", true);
}

961
src/modules/04_registry/components/Information/OldName.vue Normal file
View file

@ -0,0 +1,961 @@
<!-- card ประวัติการเปลี่ยนชื่อ-นามสกุล -->
<template>
<div class="col-12">
<q-form ref="myForm">
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
<ProfileTable
:rows="rows"
:columns="columns"
:filter="filter"
:visible-columns="visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="visibleColumns"
:add="clickAdd"
name="ประวัติการเปลี่ยนชื่อ-นามสกุล"
icon="mdi-book"
:statusEdit="!statusEdit"
>
<template #columns="props">
<q-tr :props="props">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
@click="statusEdit ? selectData(props) : ''"
class="cursor-pointer"
>
<div v-if="col.name == 'status'" class="table_ellipsis">
{{ typeChangeName(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.file != null"
color="green"
flat
dense
round
size="14px"
icon="mdi-file-document-outline"
@click="openFile(props.row.file)"
/>
<q-btn
color="info"
flat
dense
round
size="14px"
icon="mdi-history"
@click="clickHistory(props.row)"
/>
</q-td>
</q-tr>
</template>
</ProfileTable>
</q-form>
</div>
<!-- popup Edit window-->
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form ref="myForm">
<DialogHeader tittle="เปลี่ยนชื่อ-นามสกุล" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
<div
class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
>
<div class="col-xs-6 col-sm-6 col-md-6">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก สถานะการเปลี่ยนชื่อ'}`]"
:outlined="edit"
dense
lazy-rules
v-model="status"
emit-value
map-options
option-label="name"
:options="Ops.statusOps"
option-value="id"
:label="`${'สถานะการเปลี่ยนชื่อ'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
) "
/>
</div>
<q-space class="col-6" />
<div class="col-xs-4 col-sm-4 col-md-4">
<selector
:hide-dropdown-icon="!edit"
hide-bottom-space
:class="getClass(edit)"
:readonly="!edit"
:borderless="!edit"
:rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
:outlined="edit"
dense
lazy-rules
v-model="prefixId"
emit-value
map-options
option-label="name"
:options="Ops.prefixOps"
option-value="id"
:label="`${'คำนำหน้า'}`"
use-input
input-debounce="0"
@filter="(inputValue:any,
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
) "
/>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="firstName"
:rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
hide-bottom-space
:label="`${'ชื่อ'}`"
@update:modelValue="clickEditRow"
/>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<q-input
:class="getClass(edit)"
:outlined="edit"
dense
lazy-rules
:readonly="!edit"
:borderless="!edit"
v-model="lastName"
:rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
hide-bottom-space
:label="`${'นามสกุล'}`"
@update:modelValue="clickEditRow"
/>
</div>
<q-btn
v-if="file != null && !edit"
color="green"
flat
dense
round
size="14px"
icon="mdi-file-document-outline"
@click="openFile(file)"
/>
<q-uploader
v-if="edit"
color="gray"
type="file"
flat
ref="uploader"
class="full-width"
text-color="white"
:max-size="10000000"
accept=".jpg,.png,.pdf,.csv,.doc"
bordered
label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
@added="fileAdd"
>
<template v-slot:header="scope">
<div class="row no-wrap items-center q-pa-sm q-gutter-xs">
<q-btn
v-if="scope.queuedFiles.length > 0"
icon="clear_all"
@click="scope.removeQueuedFiles"
round
dense
flat
>
<q-tooltip>ลบทั้งหมด</q-tooltip>
</q-btn>
<q-btn
v-if="scope.uploadedFiles.length > 0"
icon="done_all"
@click="scope.removeUploadedFiles"
round
dense
flat
>
<q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
</q-btn>
<q-spinner
v-if="scope.isUploading"
class="q-uploader__spinner"
/>
<div class="col">
<div class="q-uploader__title">
{{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
</div>
<div class="q-uploader__subtitle">
{{ scope.uploadSizeLabel }} /
{{ scope.uploadProgressLabel }}
</div>
</div>
<q-btn
v-if="scope.canAddFiles"
type="a"
icon="add_box"
@click="scope.pickFiles"
round
dense
flat
>
<q-uploader-add-trigger />
<q-tooltip>เลือกไฟล์</q-tooltip>
</q-btn>
<q-btn
v-if="scope.isUploading"
icon="clear"
@click="scope.abort"
round
dense
flat
>
<q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
</q-btn>
</div>
</template>
</q-uploader>
</div>
</q-card-section>
<q-separator />
<DialogFooter
:cancel="clickCancel"
:edit="clickEdit"
:save="clickSave"
:validate="validateData"
:clickNext="clickNext"
:clickPrevious="clickPrevious"
:clickDelete="clickDelete"
v-model:editvisible="edit"
v-model:next="next"
v-model:previous="previous"
v-model:modalEdit="modalEdit"
/>
</q-form>
</q-card>
</q-dialog>
<HistoryTable
:rows="rowsHistory"
:columns="columnsHistory"
:filter="filterHistory"
:visible-columns="visibleColumnsHistory"
v-model:modal="modalHistory"
v-model:inputfilter="filterHistory"
v-model:inputvisible="visibleColumnsHistory"
v-model:tittle="tittleHistory"
:history="true"
>
<template #columns="props">
<q-tr :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'createdAt'" class="table_ellipsis">
{{ date2Thai(col.value) }}
</div>
<div v-else-if="col.name == 'status'" class="table_ellipsis">
{{ typeChangeName(col.value) }}
</div>
<div v-else class="table_ellipsis">
{{ col.value }}
</div>
</q-td>
<q-td auto-width>
<q-btn
v-if="props.row.file != null"
color="green"
flat
dense
round
size="14px"
icon="mdi-file-document-outline"
@click="openFile(props.row.file)"
/>
</q-td>
</q-tr>
</template>
</HistoryTable>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { useProfileDataStore } from "@/modules/04_registry/store";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import ProfileTable from "@/modules/04_registry/components/Table.vue";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
import { useQuasar } from "quasar";
import type {
RequestItemsObject,
DataProps,
} from "@/modules/04_registry/interface/request/OldName";
import type { ResponseObject } from "@/modules/04_registry/interface/response/OldName";
import type {
OldNameOps,
DataOption,
} from "@/modules/04_registry/interface/index/Main";
import HistoryTable from "@/components/TableHistory.vue";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableProps } from "quasar";
const props = defineProps({
statusEdit: {
type: Boolean,
required: true,
},
fetchDataInformation: {
type: Function,
default: () => console.log("not function"),
},
});
const $q = useQuasar();
const store = useProfileDataStore();
const { profileData, changeProfileColumns } = store;
const dataStore = useDataStore();
const { loaderPage } = dataStore;
const mixin = useCounterMixin();
const {
date2Thai,
success,
dateToISO,
messageError,
typeChangeName,
dialogMessage,
} = mixin;
const route = useRoute();
const id = ref<string>("");
const prefixId = ref<string>();
const firstName = ref<string>();
const lastName = ref<string>();
const status = ref<string>();
const nameFile = ref<string>("");
const minDate = ref<Date>();
const myForm = ref<any>(); //form data input
const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
const modal = ref<boolean>(false); //modal add detail
const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
const rawItem = ref<RequestItemsObject>(); //ข้อมูลเดิมที่เลือกใน row นั้น
const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
const rowsHistory = ref<RequestItemsObject[]>([]); //select data history
const tittleHistory = ref<string>("ประวัติแก้ไขประวัติการเปลี่ยนชื่อ-นามสกุล"); //
const filterHistory = ref<string>(""); //search data table history
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
const profileId = ref<string>(route.params.id.toString());
const file = ref<string | null>(null);
const fileUpload = ref<any>([]);
const rows = ref<RequestItemsObject[]>([]);
const filter = ref<string>(""); //search data table
const visibleColumns = ref<String[]>([]);
const Ops = ref<OldNameOps>({
prefixOps: [],
statusOps: [
{
id: "firstName",
name: "เปลี่ยนชื่อ",
},
{
id: "lastName",
name: "เปลี่ยนนามสกุล",
},
{
id: "all",
name: "เปลี่ยนชื่อ-นามสกุล",
},
],
});
const OpsFilter = ref<OldNameOps>({
prefixOps: [],
statusOps: [
{
id: "firstName",
name: "เปลี่ยนชื่อ",
},
{
id: "lastName",
name: "เปลี่ยนนามสกุล",
},
{
id: "all",
name: "เปลี่ยนชื่อ-นามสกุล",
},
],
});
profileData.oldName.columns.length == 0
? (visibleColumns.value = ["prefix", "firstName", "lastName", "status"])
: (visibleColumns.value = profileData.oldName.columns);
const columns = ref<QTableProps["columns"]>([
{
name: "prefix",
align: "left",
label: "คำนำหน้า",
sortable: true,
field: "prefix",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "firstName",
align: "left",
label: "ชื่อ",
sortable: true,
field: "firstName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastName",
align: "left",
label: "นามสกุล",
sortable: true,
field: "lastName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
align: "left",
label: "สถานะการเปลี่ยนชื่อ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const columnsHistory = ref<QTableProps["columns"]>([
{
name: "prefix",
align: "left",
label: "คำนำหน้า",
sortable: true,
field: "prefix",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "firstName",
align: "left",
label: "ชื่อ",
sortable: true,
field: "firstName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "lastName",
align: "left",
label: "นามสกุล",
sortable: true,
field: "lastName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "status",
align: "left",
label: "สถานะการเปลี่ยนชื่อ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdFullName",
align: "left",
label: "ผู้ดำเนินการ",
sortable: true,
field: "createdFullName",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
{
name: "createdAt",
align: "left",
label: "วันที่แก้ไข",
sortable: true,
field: "createdAt",
headerStyle: "font-size: 14px",
style: "font-size: 14px",
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
]);
const visibleColumnsHistory = ref<String[]>([
"prefix",
"firstName",
"lastName",
"status",
"createdFullName",
"createdAt",
]);
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
await changeProfileColumns("oldName", count);
});
onMounted(async () => {
await fetchPerson();
await fetchData();
});
const fetchData = async () => {
loaderPage(true);
await http
.get(config.API.profileChangeNameId(profileId.value))
.then((res) => {
let data = res.data.result;
rows.value = [];
data.map((e: ResponseObject) => {
rows.value.push({
id: e.id,
prefix: e.prefix,
prefixId: e.prefixId,
firstName: e.firstName,
lastName: e.lastName,
status: e.status,
file: e.file,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
};
/**
* get รายการ ข้อมูลเกี่ยวกับบุคคล
*/
const fetchPerson = async () => {
loaderPage(true);
await http
.get(config.API.person)
.then((res) => {
const data = res.data.result;
let optionprefixs: DataOption[] = [];
data.prefixs.map((r: any) => {
optionprefixs.push({
id: r.id.toString(),
name: r.name.toString(),
});
});
Ops.value.prefixOps = optionprefixs;
OpsFilter.value.prefixOps = optionprefixs;
})
.catch((e: any) => {})
.finally(() => {
loaderPage(false);
});
};
/**
* กดดูข้อมูลก่อนหน้า
*/
const clickPrevious = async () => {
edit.value = false;
rowIndex.value -= 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const clickNext = async () => {
edit.value = false;
rowIndex.value += 1;
await getData();
await checkRowPage();
};
/**
* กดดูข้อมูลต่อไป
*/
const getData = () => {
const row = rows.value[rowIndex.value];
prefixId.value = row.prefixId;
firstName.value = row.firstName;
lastName.value = row.lastName;
status.value = row.status;
file.value = row.file;
id.value = row.id;
};
/**
* เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
*/
const checkRowPage = () => {
editRow.value = false;
next.value = true;
previous.value = true;
if (rowIndex.value + 1 >= rows.value.length) {
next.value = false;
}
if (rowIndex.value - 1 < 0) {
previous.value = false;
}
};
/**
* กดปุ่มแก้ไขใน dialog
*/
const clickEdit = () => {
editRow.value = false;
next.value = false;
previous.value = false;
};
/**
* กดปุ่มเพิ่มด้านบน table
*/
const clickAdd = async () => {
editRow.value = false;
await addData();
};
/**
* กดบันทึกใน dialog
*/
const clickSave = async () => {
myForm.value.validate().then(async (result: boolean) => {
if (result) {
if (modalEdit.value) {
await editData();
} else {
await saveData();
}
}
});
};
/**
* บันทึกเพิ่มข้อมูล
*/
const saveData = async () => {
if (fileUpload.value.length > 0) {
const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
const newFile = new File(blob, nameFile.value, {
type: fileUpload.value[0].type,
});
const formData = new FormData();
formData.append("", newFile);
if (prefixId.value != undefined)
formData.append("prefixId", prefixId.value);
if (firstName.value != undefined)
formData.append("firstName", firstName.value);
if (lastName.value != undefined)
formData.append("lastName", lastName.value);
if (status.value != undefined) formData.append("status", status.value);
loaderPage(true);
await http
.post(config.API.profileChangeNameId(profileId.value), formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetchDataInformation();
});
} else {
dialogMessage(
$q,
"ไม่สามารถบันทึกข้อมูลได้",
"กรุณาอัปโหลดเอกสารหลักฐาน",
"warning",
undefined,
"orange",
undefined,
undefined,
true
);
}
};
/**
* บันทึกแก้ไขข้อมูล
*/
const editData = async () => {
const formData = new FormData();
if (fileUpload.value.length > 0) {
const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
const newFile = new File(blob, nameFile.value, {
type: fileUpload.value[0].type,
});
formData.append("", newFile);
}
if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
if (firstName.value != undefined)
formData.append("firstName", firstName.value);
if (lastName.value != undefined) formData.append("lastName", lastName.value);
if (status.value != undefined) formData.append("status", status.value);
loaderPage(true);
await http
.put(config.API.profileChangeNameId(id.value), formData)
.then((res) => {
success($q, "บันทึกข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
await props.fetchDataInformation();
});
};
/**
* ลบลบข้อมูล
*/
const clickDelete = async () => {
$q.dialog({
title: `ลบข้อมูล`,
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
})
.onOk(async () => {
loaderPage(true);
await http
.delete(config.API.profileChangeNameId(id.value))
.then((res) => {
success($q, "ลบข้อมูลสำเร็จ");
modal.value = false;
})
.catch((e) => {
messageError($q, e);
})
.finally(async () => {
await fetchData();
});
})
.onCancel(async () => {
await fetchData();
});
};
/**
* กดปิด dialog
*/
const clickClose = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
modal.value = false;
next.value = false;
previous.value = false;
});
} else {
modal.value = false;
next.value = false;
previous.value = false;
}
};
/**
* กดเลือกข้อมูลที่จะแก้ไข
* @param props ค่า props ใน row ที่เลือก
*/
const selectData = async (props: DataProps) => {
modalEdit.value = true; //กดสำหรับแก้ไขข้อมูล
modal.value = true; //modal ที่เด้งขึ้นมา
edit.value = false; //ปุ่ม edit ใน modal
rawItem.value = props.row;
rowIndex.value = props.rowIndex;
prefixId.value = props.row.prefixId;
firstName.value = props.row.firstName;
lastName.value = props.row.lastName;
status.value = props.row.status;
file.value = props.row.file;
id.value = props.row.id;
await checkRowPage();
};
/**
* กดปุ่มเพิ่มบน table
*/
const addData = () => {
modalEdit.value = false;
modal.value = true;
edit.value = true;
prefixId.value = "";
firstName.value = "";
lastName.value = "";
status.value = "";
file.value = "";
};
/**
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
*/
const clickCancel = async () => {
if (editRow.value == true) {
$q.dialog({
title: `ข้อมูลมีการแก้ไข`,
message: `ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`,
cancel: "ยกเลิก",
ok: "ยืนยัน",
persistent: true,
}).onOk(async () => {
edit.value = false;
await checkRowPage();
await getData();
});
} else {
edit.value = false;
await checkRowPage();
}
};
/**
* เช็คว่ามีการแก้ไขข้อมูล
*/
const clickEditRow = () => {
editRow.value = true;
};
/**
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
* @param row ข้อมูล row ที่ดูประวัติการแก้ไข
*/
const clickHistory = async (row: RequestItemsObject) => {
modalHistory.value = true;
loaderPage(true);
await http
.get(config.API.profileChangeNameHisId(row.id))
.then((res) => {
let data = res.data.result;
rowsHistory.value = [];
data.map((e: ResponseObject) => {
rowsHistory.value.push({
id: e.id,
prefix: e.prefix,
prefixId: e.prefixId,
firstName: e.firstName,
lastName: e.lastName,
status: e.status,
file: e.file,
createdFullName: e.createdFullName,
createdAt: new Date(e.createdAt),
});
});
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
loaderPage(false);
});
};
const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) {
case "prefixOps":
update(() => {
Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
case "statusOps":
update(() => {
Ops.value.statusOps = OpsFilter.value.statusOps.filter(
(v: DataOption) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
};
const fileAdd = async (val: any) => {
nameFile.value = val[0].name;
fileUpload.value = val;
};
const openFile = async (val: string | null) => {
if (val != null) window.open(val);
};
/**
* validate input ใน dialog
*/
const validateData = async () => {
checkValidate.value = true;
await myForm.value.validate().then((result: boolean) => {
if (result == false) {
checkValidate.value = false;
}
});
};
/**
* class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
* @param val ข้อมูล input สำหรับแก้ไขหรือไม่
*/
const getClass = (val: boolean) => {
return {
"full-width inputgreen cursor-pointer": val,
"full-width cursor-pointer": !val,
};
};
</script>
<style lang="scss">
.modalfix {
position: fixed !important;
}
</style>

28
src/modules/04_registry/components/Information/top.vue
View file

@ -51,6 +51,22 @@
<q-tooltip>ยกเลิก</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else-if="iconAdd != '' && iconAdd != null">
<q-btn
size="12px"
flat
round
color="add"
@click="addleave"
icon="mdi-plus"
>
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
</q-btn>
<q-btn size="12px" flat round color="add" @click="add" :icon="iconAdd">
<q-tooltip>สรุปวันลา</q-tooltip>
</q-btn>
</div>
<div class="q-pl-sm" v-else>
<q-btn
size="12px"
@ -86,6 +102,10 @@ const props = defineProps({
default: "ข้อความ",
required: true,
},
iconAdd: {
type: String,
default: null,
},
icon: {
type: String,
default: "mdi-help",
@ -117,6 +137,10 @@ const props = defineProps({
type: Function,
default: () => console.log("not function"),
},
addleave: {
type: Function,
default: () => console.log("not function"),
},
save: {
type: Function,
default: () => console.log("not function"),
@ -163,5 +187,9 @@ const save = () => {
const add = () => {
props.add();
};
const addleave = () => {
props.addleave();
};
</script>
<style scoped></style>