Refactoring code module 08_registryEmployee
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
bd33093d3e
commit
7091eaaeb9
31 changed files with 169 additions and 24405 deletions
|
|
@ -1,34 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
const props = defineProps({
|
|
||||||
header: {
|
|
||||||
type: String,
|
|
||||||
default: "ข้อความ",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: "mdi-help",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<q-icon
|
|
||||||
:name="props.icon"
|
|
||||||
size="1.5em"
|
|
||||||
color="grey-5"
|
|
||||||
class="q-mr-md"
|
|
||||||
v-if="props.icon != ''"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="text-bold text-subtitle2 col-12 row items-center"
|
|
||||||
v-if="props.header != ''"
|
|
||||||
>
|
|
||||||
{{ props.header }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,685 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import type { QForm } from "quasar";
|
|
||||||
|
|
||||||
import { useProfileDataStore } from "@/modules/08_registryEmployee/store";
|
|
||||||
import type {
|
|
||||||
Information,
|
|
||||||
DataOption,
|
|
||||||
} from "@/modules/04_registry/components/profileType";
|
|
||||||
import type { InformationOps } from "@/modules/04_registry/interface/index/Main";
|
|
||||||
import HeaderTop from "@/modules/08_registryEmployee/components/AddEmployee/HeaderTop.vue";
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const $q = useQuasar();
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
success,
|
|
||||||
dateToISO,
|
|
||||||
messageError,
|
|
||||||
dialogMessage,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
} = mixin;
|
|
||||||
|
|
||||||
const profileStore = useProfileDataStore();
|
|
||||||
const { changeRetireText, changeBirth } = profileStore;
|
|
||||||
|
|
||||||
const informaData = ref<Information>({
|
|
||||||
cardid: null,
|
|
||||||
age: null,
|
|
||||||
prefix: null,
|
|
||||||
prefixId: null,
|
|
||||||
firstname: null,
|
|
||||||
lastname: null,
|
|
||||||
birthDate: null,
|
|
||||||
genderId: null,
|
|
||||||
bloodId: null,
|
|
||||||
nationality: null,
|
|
||||||
ethnicity: null,
|
|
||||||
statusId: null,
|
|
||||||
religionId: null,
|
|
||||||
tel: null,
|
|
||||||
employeeType: null,
|
|
||||||
employeeClass: null,
|
|
||||||
profileType: null,
|
|
||||||
});
|
|
||||||
|
|
||||||
const myform = ref<QForm | null>(null);
|
|
||||||
const dateBefore = ref<Date>(new Date());
|
|
||||||
// รายการข้อมูลทั้งหมด
|
|
||||||
const Ops = ref<InformationOps>({
|
|
||||||
prefixOps: [],
|
|
||||||
prefixOldOps: [],
|
|
||||||
genderOps: [],
|
|
||||||
bloodOps: [],
|
|
||||||
statusOps: [],
|
|
||||||
religionOps: [],
|
|
||||||
employeeClassOps: [],
|
|
||||||
employeeTypeOps: [],
|
|
||||||
});
|
|
||||||
// ข้อมูลเมื่อเลือกแล้ว
|
|
||||||
const OpsFilter = ref<InformationOps>({
|
|
||||||
prefixOps: [],
|
|
||||||
prefixOldOps: [],
|
|
||||||
genderOps: [],
|
|
||||||
bloodOps: [],
|
|
||||||
statusOps: [],
|
|
||||||
religionOps: [],
|
|
||||||
employeeClassOps: [],
|
|
||||||
employeeTypeOps: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
// call function get รายการข้อมูลต่างๆ
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchPerson();
|
|
||||||
});
|
|
||||||
|
|
||||||
/*** get รายการข้อมูลเกี่ยวกับบุคคล (dropdown list) */
|
|
||||||
const fetchPerson = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.person)
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
let optionbloodGroups: DataOption[] = [];
|
|
||||||
data.bloodGroups.map((r: any) => {
|
|
||||||
optionbloodGroups.push({
|
|
||||||
id: r.id.toString(),
|
|
||||||
name: r.name.toString(),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Ops.value.bloodOps = optionbloodGroups;
|
|
||||||
OpsFilter.value.bloodOps = optionbloodGroups;
|
|
||||||
|
|
||||||
let optiongenders: DataOption[] = [];
|
|
||||||
data.genders.map((r: any) => {
|
|
||||||
optiongenders.push({
|
|
||||||
id: r.id.toString(),
|
|
||||||
name: r.name.toString(),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Ops.value.genderOps = optiongenders;
|
|
||||||
OpsFilter.value.genderOps = optiongenders;
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
let optionrelationships: DataOption[] = [];
|
|
||||||
data.relationships.map((r: any) => {
|
|
||||||
optionrelationships.push({
|
|
||||||
id: r.id.toString(),
|
|
||||||
name: r.name.toString(),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Ops.value.statusOps = optionrelationships;
|
|
||||||
OpsFilter.value.statusOps = optionrelationships;
|
|
||||||
|
|
||||||
let optionreligions: DataOption[] = [];
|
|
||||||
data.religions.map((r: any) => {
|
|
||||||
optionreligions.push({
|
|
||||||
id: r.id.toString(),
|
|
||||||
name: r.name.toString(),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Ops.value.religionOps = optionreligions;
|
|
||||||
OpsFilter.value.religionOps = optionreligions;
|
|
||||||
})
|
|
||||||
.catch((e: any) => {})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// รูป profile
|
|
||||||
const inputImage = ref<any>(null);
|
|
||||||
const image = ref<any>(null);
|
|
||||||
const fileData = ref<any>(null);
|
|
||||||
const uploadImage = async (e: any) => {
|
|
||||||
const input = e.target.files;
|
|
||||||
if (input.length > 0) {
|
|
||||||
const url = URL.createObjectURL(input[0]);
|
|
||||||
image.value = url;
|
|
||||||
fileData.value = input[0];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// คลิกแก้ไขรูป profile
|
|
||||||
const addNewImage = async () => {
|
|
||||||
inputImage.value.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
// ตรวจสอบเลขประจำตัวประชาชน
|
|
||||||
const defaultCitizenData = ref<string>("");
|
|
||||||
const changeCardID = async (value: string | number | null) => {
|
|
||||||
if (value != null && typeof value == "string") {
|
|
||||||
if (value.length == 13 && value != defaultCitizenData.value) {
|
|
||||||
await checkCitizen(value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const checkCitizen = async (id: string) => {
|
|
||||||
showLoader();
|
|
||||||
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(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// filter list ข้อมูลต่างๆ
|
|
||||||
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 "genderOps":
|
|
||||||
update(() => {
|
|
||||||
Ops.value.genderOps = OpsFilter.value.genderOps.filter(
|
|
||||||
(v: DataOption) => v.name.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "bloodOps":
|
|
||||||
update(() => {
|
|
||||||
Ops.value.bloodOps = OpsFilter.value.bloodOps.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;
|
|
||||||
case "religionOps":
|
|
||||||
update(() => {
|
|
||||||
Ops.value.religionOps = OpsFilter.value.religionOps.filter(
|
|
||||||
(v: DataOption) => v.name.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// เช็ควันที่ที่สามารถเลือกวันเกิดได้โดย max date น้อยกว่าวันปัจจุบัน เพื่อให้ฟังก์ชั่นการเช็คทำงานได้ปกติ
|
|
||||||
const calculateMaxDate = () => {
|
|
||||||
const today = new Date();
|
|
||||||
today.setDate(today.getDate() - 1);
|
|
||||||
return today;
|
|
||||||
};
|
|
||||||
|
|
||||||
// เช็คเรื่องการเกษียณ
|
|
||||||
const calRetire = async (birth: Date) => {
|
|
||||||
const body = {
|
|
||||||
birthDate: dateToISO(birth),
|
|
||||||
};
|
|
||||||
if (dateToISO(dateBefore.value) != dateToISO(birth)) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profileCalRetire, body)
|
|
||||||
.then((res: any) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
informaData.value.age = data.age;
|
|
||||||
informaData.value.birthDate = birth;
|
|
||||||
changeRetireText(data.retireDate);
|
|
||||||
dateBefore.value = birth;
|
|
||||||
})
|
|
||||||
.catch((e: any) => {
|
|
||||||
messageError($q, e);
|
|
||||||
informaData.value.birthDate = null;
|
|
||||||
informaData.value.age = "";
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// หลังจากกดปุ่มบันทึกเช็ค validate ก่อน
|
|
||||||
const saveData = async () => {
|
|
||||||
if (myform.value != null) {
|
|
||||||
await myform.value.validate().then(async (saveDataTest: Boolean) => {
|
|
||||||
if (saveDataTest) {
|
|
||||||
dialogConfirm($q, () => addData()); // validate ผ่านส่งไปบันทึกที่ api
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// post เพิ่มข้อมูลทะเบียนประวัติไปที่ api
|
|
||||||
const addData = async () => {
|
|
||||||
const formData = new FormData();
|
|
||||||
// if (fileData.value != null) formData.append("File", fileData.value); //แก้ไขรูป
|
|
||||||
if (informaData.value.cardid != undefined)
|
|
||||||
formData.append("citizenId", informaData.value.cardid);
|
|
||||||
if (informaData.value.prefixId != undefined)
|
|
||||||
formData.append("prefixId", informaData.value.prefixId);
|
|
||||||
if (informaData.value.firstname != undefined)
|
|
||||||
formData.append("firstName", informaData.value.firstname);
|
|
||||||
if (informaData.value.lastname != undefined)
|
|
||||||
formData.append("lastName", informaData.value.lastname);
|
|
||||||
if (informaData.value.genderId != undefined)
|
|
||||||
formData.append("genderId", informaData.value.genderId);
|
|
||||||
if (informaData.value.nationality != undefined)
|
|
||||||
formData.append("nationality", informaData.value.nationality);
|
|
||||||
if (informaData.value.ethnicity != undefined)
|
|
||||||
formData.append("race", informaData.value.ethnicity);
|
|
||||||
if (informaData.value.religionId != undefined)
|
|
||||||
formData.append("religionId", informaData.value.religionId);
|
|
||||||
if (informaData.value.birthDate != undefined)
|
|
||||||
formData.append(
|
|
||||||
"birthDate",
|
|
||||||
dateToISO(informaData.value.birthDate) ?? dateToISO(new Date())
|
|
||||||
);
|
|
||||||
if (informaData.value.bloodId != undefined)
|
|
||||||
formData.append("bloodGroupId", informaData.value.bloodId);
|
|
||||||
if (informaData.value.statusId != undefined)
|
|
||||||
formData.append("relationshipId", informaData.value.statusId);
|
|
||||||
if (informaData.value.tel != undefined)
|
|
||||||
formData.append("telephoneNumber", informaData.value.tel);
|
|
||||||
if (informaData.value.employeeType != undefined)
|
|
||||||
formData.append("employeeType", informaData.value.employeeType);
|
|
||||||
if (informaData.value.employeeClass != undefined)
|
|
||||||
formData.append("employeeClass", informaData.value.employeeClass);
|
|
||||||
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profileEmployeeIn, formData)
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await changeBirth(informaData.value.birthDate ?? new Date());
|
|
||||||
await clickBack();
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
hideLoader();
|
|
||||||
};
|
|
||||||
|
|
||||||
// ปุ่ม back
|
|
||||||
const clickBack = () => {
|
|
||||||
router.push("/registry-temp");
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
|
||||||
<HeaderTop header="ข้อมูลส่วนตัว" icon="mdi-account" />
|
|
||||||
<q-form ref="myform" class="col-12 q-pt-md">
|
|
||||||
<div class="row">
|
|
||||||
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<q-input
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
v-model="informaData.cardid"
|
|
||||||
dense
|
|
||||||
@update:model-value="changeCardID"
|
|
||||||
for="#cardId"
|
|
||||||
lazy-rules
|
|
||||||
:rules="[
|
|
||||||
(val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
|
|
||||||
(val: string) =>
|
|
||||||
val.length >= 13 ||
|
|
||||||
`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
|
|
||||||
]"
|
|
||||||
label="เลขประจำตัวประชาชน"
|
|
||||||
maxlength="13"
|
|
||||||
mask="#############"
|
|
||||||
/>
|
|
||||||
<!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,]" -->
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<selector
|
|
||||||
for="#prefixId"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="informaData.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-6 col-sm-3 col-md-3">
|
|
||||||
<q-input
|
|
||||||
for="#firstname"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="informaData.firstname"
|
|
||||||
:rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
|
|
||||||
:label="`${'ชื่อ'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<q-input
|
|
||||||
for="#lastname"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="informaData.lastname"
|
|
||||||
:rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
|
|
||||||
:label="`${'นามสกุล'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
|
||||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
||||||
<datepicker
|
|
||||||
v-model="informaData.birthDate"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
week-start="0"
|
|
||||||
:max-date="calculateMaxDate()"
|
|
||||||
@update:model-value="calRetire"
|
|
||||||
>
|
|
||||||
<template #year="{ year }">
|
|
||||||
{{ year + 543 }}
|
|
||||||
</template>
|
|
||||||
<template #year-overlay-value="{ value }">
|
|
||||||
{{ parseInt(value + 543) }}
|
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
for="#birthDate"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
:model-value="
|
|
||||||
informaData.birthDate == null
|
|
||||||
? null
|
|
||||||
: date2Thai(informaData.birthDate)
|
|
||||||
"
|
|
||||||
:rules="[(val: string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
|
|
||||||
:label="`${'วัน/เดือน/ปี เกิด'}`"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
||||||
<q-input
|
|
||||||
hide-bottom-space
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
readonly
|
|
||||||
borderless
|
|
||||||
style="padding: 0 12px"
|
|
||||||
:model-value="informaData.age"
|
|
||||||
:label="`${'อายุ'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
||||||
<selector
|
|
||||||
for="#genderId"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="informaData.genderId"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="Ops.genderOps"
|
|
||||||
option-value="id"
|
|
||||||
:label="`${'เพศ'}`"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue: any,
|
|
||||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
|
|
||||||
)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
||||||
<selector
|
|
||||||
for="#statusId"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="informaData.statusId"
|
|
||||||
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>
|
|
||||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
||||||
<q-input
|
|
||||||
for="#nationality"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="informaData.nationality"
|
|
||||||
:label="`${'สัญชาติ'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
||||||
<q-input
|
|
||||||
for="#ethnicity"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="informaData.ethnicity"
|
|
||||||
:label="`${'เชื้อชาติ'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row col-12 q-col-gutter-x-sm q-mb-xs">
|
|
||||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
||||||
<selector
|
|
||||||
for="#religionId"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="informaData.religionId"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="Ops.religionOps"
|
|
||||||
option-value="id"
|
|
||||||
:label="`${'ศาสนา'}`"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue: any,
|
|
||||||
doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
|
|
||||||
)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-2 col-md-2">
|
|
||||||
<selector
|
|
||||||
for="#bloodId"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
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
|
|
||||||
for="#tel"
|
|
||||||
hide-bottom-space
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
type="tel"
|
|
||||||
v-model="informaData.tel"
|
|
||||||
:label="`${'เบอร์โทร'}`"
|
|
||||||
:rules="[
|
|
||||||
(val: string) => !!val || `${'กรุณากรอก เบอร์โทร'}`,
|
|
||||||
(val: string) =>
|
|
||||||
val.length >= 10 ||
|
|
||||||
`${'กรุณากรอกเบอร์โทรให้ครบ'}`,
|
|
||||||
]"
|
|
||||||
mask="##########"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-form>
|
|
||||||
<div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
|
|
||||||
<div class="row col-12">
|
|
||||||
<q-space />
|
|
||||||
<q-btn
|
|
||||||
for="#submitForm"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
class="q-px-md items-center"
|
|
||||||
color="light-blue-10"
|
|
||||||
label="บันทึก"
|
|
||||||
@click="saveData"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<!-- Header -->
|
|
||||||
<q-page-sticky
|
|
||||||
position="top"
|
|
||||||
expand
|
|
||||||
class="bg-grey-2 text-white"
|
|
||||||
style="z-index: 99; padding: 0% 1% 0% 1%"
|
|
||||||
>
|
|
||||||
<div class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center">
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
class="bg-teal-1 full-height"
|
|
||||||
color="primary"
|
|
||||||
icon="mdi-chevron-left"
|
|
||||||
dense
|
|
||||||
@click="router.go(-1)"
|
|
||||||
>
|
|
||||||
</q-btn>
|
|
||||||
<q-avatar size="65px" rounded class="containerimage">
|
|
||||||
<img
|
|
||||||
v-if="image == null"
|
|
||||||
src="@/assets/avatar_user.jpg"
|
|
||||||
class="bg-grey-3"
|
|
||||||
style="object-fit: cover"
|
|
||||||
/>
|
|
||||||
<img :src="image" class="bg-grey-3" style="object-fit: cover" />
|
|
||||||
<div
|
|
||||||
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
|
||||||
@click="addNewImage()"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-camera" size="18px" color="blue">
|
|
||||||
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
|
||||||
</q-icon>
|
|
||||||
|
|
||||||
<input
|
|
||||||
for="#profile"
|
|
||||||
type="file"
|
|
||||||
style="display: none"
|
|
||||||
ref="inputImage"
|
|
||||||
accept="image/*"
|
|
||||||
@change="uploadImage"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-avatar>
|
|
||||||
|
|
||||||
<div class="row items-center text-dark q-ml-md">
|
|
||||||
<div class="column">
|
|
||||||
<div class="text-bold q-pb-xs text-name">
|
|
||||||
เพิ่มข้อมูลทะเบียนประวัติ
|
|
||||||
</div>
|
|
||||||
<div class="text-bold q-pb-xs text-sub">ลูกจ้างชั่วคราว</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<q-space />
|
|
||||||
</div>
|
|
||||||
</q-page-sticky>
|
|
||||||
<!-- End Header -->
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, watch, reactive } from "vue";
|
import { ref, watch, reactive } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
@ -36,35 +36,39 @@ const props = defineProps({
|
||||||
});
|
});
|
||||||
|
|
||||||
const formData = reactive<FormDataEmployee>({
|
const formData = reactive<FormDataEmployee>({
|
||||||
citizenId: "",
|
citizenId: "", //เลขประจำตัวประชาชน
|
||||||
prefix: "",
|
prefix: "", //คำนำหน้าชื่อ
|
||||||
rank: "",
|
rank: "", //ยศ
|
||||||
firstName: "",
|
firstName: "", //ชื่อ
|
||||||
lastName: "",
|
lastName: "", //นามสกุล
|
||||||
birthDate: null,
|
birthDate: null, //วัน/เดือน/ปี เกิด
|
||||||
gender: "",
|
gender: "", //เพศ
|
||||||
relationship: "",
|
relationship: "", //สถานภาพ
|
||||||
nationality: "",
|
nationality: "", //สัญชาติ
|
||||||
ethnicity: "",
|
ethnicity: "", //เชื้อชาติ
|
||||||
religion: "",
|
religion: "", //ศาสนา
|
||||||
bloodGroup: "",
|
bloodGroup: "", //หมู่เลือด
|
||||||
phone: "",
|
phone: "", //เบอร์โทร
|
||||||
employeeClass: "TEMP",
|
employeeClass: "TEMP",
|
||||||
});
|
});
|
||||||
|
|
||||||
const prefixOpsMain = ref<DataOption[]>([]);
|
//ตัวเลือก
|
||||||
const prefixOps = ref<DataOption[]>([]);
|
const prefixOpsMain = ref<DataOption[]>([]); //คำนำหน้าชื่อ
|
||||||
const rankOpsMain = ref<DataOption[]>([]);
|
const prefixOps = ref<DataOption[]>([]); //คำนำหน้าชื่อ
|
||||||
const rankOps = ref<DataOption[]>([]);
|
const rankOpsMain = ref<DataOption[]>([]); //ยศ
|
||||||
const genderOpsMain = ref<DataOption[]>([]);
|
const rankOps = ref<DataOption[]>([]); //ยศ
|
||||||
const genderOps = ref<DataOption[]>([]);
|
const genderOpsMain = ref<DataOption[]>([]); //เพศ
|
||||||
const statusOpsMain = ref<DataOption[]>([]);
|
const genderOps = ref<DataOption[]>([]); //เพศ
|
||||||
const statusOps = ref<DataOption[]>([]);
|
const statusOpsMain = ref<DataOption[]>([]); //สถานภาพ
|
||||||
const religionOpsMain = ref<DataOption[]>([]);
|
const statusOps = ref<DataOption[]>([]); //สถานภาพ
|
||||||
const religionOps = ref<DataOption[]>([]);
|
const religionOpsMain = ref<DataOption[]>([]); // ศาสนา
|
||||||
const bloodOpsMain = ref<DataOption[]>([]);
|
const religionOps = ref<DataOption[]>([]); //ศาสนา
|
||||||
const bloodOps = ref<DataOption[]>([]);
|
const bloodOpsMain = ref<DataOption[]>([]); //หมู่เลือด
|
||||||
|
const bloodOps = ref<DataOption[]>([]); //หมู่เลือด
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันดึงข้อมูลเกี่ยวกับข้อมูลส่วนตัว
|
||||||
|
*/
|
||||||
function fetchDataPerson() {
|
function fetchDataPerson() {
|
||||||
showLoader();
|
showLoader();
|
||||||
http
|
http
|
||||||
|
|
@ -134,6 +138,10 @@ function fetchDataPerson() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันเช็คเลขบัตรประจำตัวซ้ำ
|
||||||
|
* @param citizenId เลขบัตรประจำตัว
|
||||||
|
*/
|
||||||
function changeCardID(citizenId: string | number | null) {
|
function changeCardID(citizenId: string | number | null) {
|
||||||
if (citizenId != null && typeof citizenId == "string") {
|
if (citizenId != null && typeof citizenId == "string") {
|
||||||
if (citizenId.length == 13 && citizenId) {
|
if (citizenId.length == 13 && citizenId) {
|
||||||
|
|
@ -153,7 +161,13 @@ function changeCardID(citizenId: string | number | null) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const filterSelector = (val: string, update: Function, refData: string) => {
|
/**
|
||||||
|
* function ค้นหาข้อมูล Option
|
||||||
|
* @param val คำค้นหา
|
||||||
|
* @param update function
|
||||||
|
* @param refData ประเภท
|
||||||
|
*/
|
||||||
|
function filterSelector(val: string, update: Function, refData: string) {
|
||||||
switch (refData) {
|
switch (refData) {
|
||||||
case "prefix":
|
case "prefix":
|
||||||
update(() => {
|
update(() => {
|
||||||
|
|
@ -207,14 +221,20 @@ const filterSelector = (val: string, update: Function, refData: string) => {
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันคำนวนอายุ
|
||||||
|
*/
|
||||||
function calculateMaxDate() {
|
function calculateMaxDate() {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
today.setFullYear(today.getFullYear() - 18);
|
today.setFullYear(today.getFullYear() - 18);
|
||||||
return today;
|
return today;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันบันทึกข้อมูลลูกจ้างชั่วคราว
|
||||||
|
*/
|
||||||
function onSubmit() {
|
function onSubmit() {
|
||||||
dialogConfirm($q, async () => {
|
dialogConfirm($q, async () => {
|
||||||
showLoader();
|
showLoader();
|
||||||
|
|
@ -232,6 +252,9 @@ function onSubmit() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปืด popup
|
||||||
|
*/
|
||||||
function closeDialog() {
|
function closeDialog() {
|
||||||
modal.value = false;
|
modal.value = false;
|
||||||
formData.citizenId = "";
|
formData.citizenId = "";
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive, watch, onBeforeMount, onMounted } from "vue";
|
import { ref, watch, onBeforeMount } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
|
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useStructureTree } from "@/stores/structureTree";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
|
@ -17,10 +19,6 @@ import type {
|
||||||
/** importComponents*/
|
/** importComponents*/
|
||||||
import Header from "@/components/DialogHeader.vue";
|
import Header from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
/** importStore*/
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useStructureTree } from "@/stores/structureTree";
|
|
||||||
|
|
||||||
/** use*/
|
/** use*/
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const { fetchStructureTree } = useStructureTree();
|
const { fetchStructureTree } = useStructureTree();
|
||||||
|
|
@ -48,16 +46,16 @@ const props = defineProps({
|
||||||
});
|
});
|
||||||
|
|
||||||
/** Tree*/
|
/** Tree*/
|
||||||
const nodeId = ref<string>("");
|
const nodeId = ref<string>(""); //id หน่วยงาน/ส่วนราชการ
|
||||||
const nodeLevel = ref<number>(0);
|
const nodeLevel = ref<number>(0); // ระดับ หน่วยงาน/ส่วนราชการ
|
||||||
const filterTree = ref<string>("");
|
const filterTree = ref<string>(""); //คำค้นหาหน่วยงาน/ส่วนราชการ
|
||||||
const nodes = ref<Array<TreeMain>>([]);
|
const nodes = ref<Array<TreeMain>>([]); //ข้อมูล โครงสร้าง
|
||||||
const lazy = ref(nodes);
|
const lazy = ref(nodes);
|
||||||
const expanded = ref<string[]>([]);
|
const expanded = ref<string[]>([]);
|
||||||
|
|
||||||
/** Table*/
|
/** Table*/
|
||||||
const filters = ref<string>("");
|
const filters = ref<string>(""); // ค้นหาตำแหน่ง
|
||||||
const rowsPosition = ref<Position[]>([]);
|
const rowsPosition = ref<Position[]>([]); //รายการตำแหน่ง
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "isPosition",
|
name: "isPosition",
|
||||||
|
|
@ -198,12 +196,12 @@ const visibleColumns = ref<string[]>([
|
||||||
]);
|
]);
|
||||||
|
|
||||||
/** Position*/
|
/** Position*/
|
||||||
const positionNo = ref<PositionNo[]>([]);
|
const positionNo = ref<PositionNo[]>([]); //รายการตำแหน่ง
|
||||||
const positionId = ref<string>("");
|
const positionId = ref<string>(""); //id ตำแหน่ง
|
||||||
const seletcId = ref<string>("");
|
const seletcId = ref<string>(""); // id ที่ตเ้องการ
|
||||||
const selectedPos = ref<any[]>([]);
|
const selectedPos = ref<any[]>([]); //ตำแหน่ง ที่ต้องการ
|
||||||
const datePos = ref<Date>(new Date());
|
const datePos = ref<Date>(new Date());
|
||||||
const posMasterMain = ref<any>([]);
|
const posMasterMain = ref<any>([]); //รายการตำแหน่ง
|
||||||
const orgRevisionId = ref<string>("");
|
const orgRevisionId = ref<string>("");
|
||||||
const isLoad = ref<boolean>(false);
|
const isLoad = ref<boolean>(false);
|
||||||
/**
|
/**
|
||||||
|
|
@ -322,7 +320,9 @@ async function fetchPosFind(level: number, id: string) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/** function บันทึกข้อมูลตำแหน่ง*/
|
/**
|
||||||
|
* function บันทึกข้อมูลตำแหน่ง
|
||||||
|
*/
|
||||||
async function onClickSubmit() {
|
async function onClickSubmit() {
|
||||||
const dataPosMaster = await posMasterMain.value?.find(
|
const dataPosMaster = await posMasterMain.value?.find(
|
||||||
(e: any) => e.id === positionId.value
|
(e: any) => e.id === positionId.value
|
||||||
|
|
@ -365,13 +365,17 @@ async function onClickSubmit() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** function closePopup*/
|
/**
|
||||||
|
* function closePopup
|
||||||
|
*/
|
||||||
function closePopup() {
|
function closePopup() {
|
||||||
modal.value = !modal.value;
|
modal.value = !modal.value;
|
||||||
clearData();
|
clearData();
|
||||||
}
|
}
|
||||||
|
|
||||||
/** function clearData*/
|
/**
|
||||||
|
* function clearData
|
||||||
|
*/
|
||||||
async function clearData() {
|
async function clearData() {
|
||||||
nodeId.value = "";
|
nodeId.value = "";
|
||||||
expanded.value = [];
|
expanded.value = [];
|
||||||
|
|
@ -392,6 +396,10 @@ function filterItemsTaps(data: any[]) {
|
||||||
return orgTreeIds;
|
return orgTreeIds;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function เลือกตำแหน่ง
|
||||||
|
* @param id ที่ต้องการ
|
||||||
|
*/
|
||||||
async function onClickSelectPos(id: string) {
|
async function onClickSelectPos(id: string) {
|
||||||
positionId.value = id;
|
positionId.value = id;
|
||||||
selectedPos.value = [];
|
selectedPos.value = [];
|
||||||
|
|
@ -425,6 +433,9 @@ watch(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ทำงานเมื่อเลือก แสดงตำแหน่งทั้งหมด
|
||||||
|
*/
|
||||||
watch(
|
watch(
|
||||||
() => isAll.value,
|
() => isAll.value,
|
||||||
(value, oldVal) => {
|
(value, oldVal) => {
|
||||||
|
|
@ -434,6 +445,9 @@ watch(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ทำงานเมื่อเลือก แสดงเฉพาะตำแหน่งว่าง
|
||||||
|
*/
|
||||||
watch(
|
watch(
|
||||||
() => isBlank.value,
|
() => isBlank.value,
|
||||||
(value, oldVal) => {
|
(value, oldVal) => {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,11 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, watch, reactive } from "vue";
|
import { ref, watch } from "vue";
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
|
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
|
||||||
|
|
||||||
/** importType*/
|
/** importType*/
|
||||||
import type { QTableProps } from "quasar";
|
import type { QTableProps } from "quasar";
|
||||||
|
|
@ -11,10 +14,6 @@ import type { DataEmployee } from "@/modules/08_registryEmployee/interface/respo
|
||||||
/** importComponents*/
|
/** importComponents*/
|
||||||
import DialogHeader from "@/components/DialogHeader.vue";
|
import DialogHeader from "@/components/DialogHeader.vue";
|
||||||
|
|
||||||
/** inportStore*/
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const {
|
const {
|
||||||
success,
|
success,
|
||||||
|
|
@ -36,9 +35,9 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const filter = ref<string>("");
|
const filter = ref<string>(""); //ค้นหารายชื่อไปออกคำสั่ง
|
||||||
const rows = ref<DataEmployee[]>([]);
|
const rows = ref<DataEmployee[]>([]); //รายชื่อไปออกคำสั่ง
|
||||||
const selected = ref<DataEmployee[]>([]);
|
const selected = ref<DataEmployee[]>([]); //รายชื่อที่เลือกไปออกคำสั่ง
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "no",
|
name: "no",
|
||||||
|
|
@ -165,6 +164,9 @@ const visibleColumns = ref<String[]>([
|
||||||
"statustext",
|
"statustext",
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันยืนยันการส่งออกคำสั่ง
|
||||||
|
*/
|
||||||
function onClickSendOrder() {
|
function onClickSendOrder() {
|
||||||
if (selected.value.length == 0) {
|
if (selected.value.length == 0) {
|
||||||
dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
|
dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
|
||||||
|
|
@ -200,6 +202,9 @@ function onClickSendOrder() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันดึงข้อมูลราชชื่อส่งออกคำสั่ง
|
||||||
|
*/
|
||||||
function fetchList() {
|
function fetchList() {
|
||||||
showLoader();
|
showLoader();
|
||||||
http
|
http
|
||||||
|
|
@ -215,11 +220,19 @@ function fetchList() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันปิด Popup
|
||||||
|
*/
|
||||||
function closeDialog() {
|
function closeDialog() {
|
||||||
modal.value = false;
|
modal.value = false;
|
||||||
selected.value = [];
|
selected.value = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ทำเมื่อ modal เป็น true
|
||||||
|
*
|
||||||
|
* ทำการเรียก fetchList เพื่อข้อมูลราชชื่อส่งออกคำสั่ง
|
||||||
|
*/
|
||||||
watch(
|
watch(
|
||||||
() => modal.value,
|
() => modal.value,
|
||||||
() => {
|
() => {
|
||||||
|
|
|
||||||
|
|
@ -1,476 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, watch } from "vue";
|
|
||||||
import type { FormRegistryEmployee } from "../interface/request/Main";
|
|
||||||
import { useQuasar, type QTableProps, QInput } from "quasar";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
|
|
||||||
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
|
|
||||||
|
|
||||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
|
||||||
const {
|
|
||||||
success,
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
dialogMessageNotify,
|
|
||||||
} = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
modal: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
rows: {
|
|
||||||
type: Object,
|
|
||||||
default: [],
|
|
||||||
},
|
|
||||||
fetchNewList: {
|
|
||||||
type: Function,
|
|
||||||
default: () => {
|
|
||||||
/* ฟังก์ชั่น get รายการข้อมูลในหน้าหลักใหม่ */
|
|
||||||
},
|
|
||||||
},
|
|
||||||
closeDialog: {
|
|
||||||
type: Function,
|
|
||||||
default: () => {
|
|
||||||
/* ฟังก์ชั่นปิด dialog ส่งไปออกคำสั่ง */
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const filter = ref<string>("");
|
|
||||||
const filterRef = ref<QInput>();
|
|
||||||
// visible columns ตารางใน dialog ส่งไปออกคำสั่ง
|
|
||||||
const visibleColumnsOrder = ref<string[]>([
|
|
||||||
"no",
|
|
||||||
"fullname",
|
|
||||||
"fullnameOld",
|
|
||||||
"oc",
|
|
||||||
"positionEmployeePosition",
|
|
||||||
"positionEmployeePositionSide",
|
|
||||||
"positionLine",
|
|
||||||
"govAge",
|
|
||||||
"positionEmployeeGroup",
|
|
||||||
"dateAppoint",
|
|
||||||
"refSalary",
|
|
||||||
"dateStart",
|
|
||||||
"createdAt",
|
|
||||||
"salaryDate",
|
|
||||||
"age",
|
|
||||||
"amount",
|
|
||||||
"statustext",
|
|
||||||
"leaveDateOrder",
|
|
||||||
"newAgency",
|
|
||||||
"currentAgency",
|
|
||||||
]);
|
|
||||||
|
|
||||||
// คอลัมน์ในตาราง
|
|
||||||
const columnsOrder = 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; min-width: 200px",
|
|
||||||
style: "font-size: 14px; ",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "newAgency",
|
|
||||||
align: "left",
|
|
||||||
label: "หน่วยงานที่รับการบรรจุ",
|
|
||||||
sortable: true,
|
|
||||||
field: "newAgency",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, {
|
|
||||||
numeric: true,
|
|
||||||
sensitivity: "base",
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "currentAgency",
|
|
||||||
align: "left",
|
|
||||||
label: "หน่วยงานปัจจุบัน",
|
|
||||||
sortable: true,
|
|
||||||
field: "currentAgency",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, {
|
|
||||||
numeric: true,
|
|
||||||
sensitivity: "base",
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "amount",
|
|
||||||
align: "left",
|
|
||||||
label: "ค่าจ้าง",
|
|
||||||
sortable: true,
|
|
||||||
field: "amount",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, {
|
|
||||||
numeric: true,
|
|
||||||
sensitivity: "base",
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "govAge",
|
|
||||||
align: "left",
|
|
||||||
label: "อายุราชการ(ปี)",
|
|
||||||
sortable: true,
|
|
||||||
field: "govAge",
|
|
||||||
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: "วันที่จ้าง",
|
|
||||||
sortable: true,
|
|
||||||
field: "dateAppoint",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "dateStart",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่เริ่มปฎิบัติราชการ",
|
|
||||||
sortable: true,
|
|
||||||
field: "dateStart",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "salaryDate",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่แต่งตั้ง",
|
|
||||||
sortable: true,
|
|
||||||
field: "salaryDate",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refSalary",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง",
|
|
||||||
sortable: true,
|
|
||||||
field: "refSalary",
|
|
||||||
headerStyle: "font-size: 14px; min-width: 200px",
|
|
||||||
style: "font-size: 14px; ",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "age",
|
|
||||||
align: "left",
|
|
||||||
label: "อายุ",
|
|
||||||
sortable: true,
|
|
||||||
field: "age",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, {
|
|
||||||
numeric: true,
|
|
||||||
sensitivity: "base",
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "fullnameOld",
|
|
||||||
align: "left",
|
|
||||||
label: "ชื่อ-นามสกุล(เดิม)",
|
|
||||||
sortable: true,
|
|
||||||
field: "fullnameOld",
|
|
||||||
headerStyle: "font-size: 14px; min-width: 200px",
|
|
||||||
style: "font-size: 14px; ",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "createdAt",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่สร้าง",
|
|
||||||
sortable: true,
|
|
||||||
field: "createdAt",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "leaveDateOrder",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่พ้นราชการ",
|
|
||||||
sortable: true,
|
|
||||||
field: "leaveDateOrder",
|
|
||||||
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",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, {
|
|
||||||
numeric: true,
|
|
||||||
sensitivity: "base",
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
// checkbox เลือกคนไปออกคำสั่ง
|
|
||||||
const selected = ref<any>([]);
|
|
||||||
const save = () => {
|
|
||||||
if (selected.value.length == 0) {
|
|
||||||
dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
|
|
||||||
} else dialogConfirm($q, () => sendToCommand());
|
|
||||||
};
|
|
||||||
|
|
||||||
// post ส่งไปออกคำสั่ง
|
|
||||||
const sendToCommand = async () => {
|
|
||||||
let pId: string[] = [];
|
|
||||||
selected.value.forEach((e: any) => {
|
|
||||||
pId.push(e.id);
|
|
||||||
});
|
|
||||||
let data = {
|
|
||||||
id: pId,
|
|
||||||
};
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.organizationEmployeeSendOrder, data)
|
|
||||||
.then(async () => {
|
|
||||||
await props.fetchNewList();
|
|
||||||
await success($q, "บันทึกสำเร็จ");
|
|
||||||
props.closeDialog();
|
|
||||||
selected.value = [];
|
|
||||||
})
|
|
||||||
.catch((e: any) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// เลือกรายการเฉพาะคนที่มีสถานะ PENDING (เลือกตำแหน่งแล้ว)
|
|
||||||
const rowsOrder = ref<FormRegistryEmployee[]>([]);
|
|
||||||
const filterRowData = () => {
|
|
||||||
rowsOrder.value = props.rows.filter(
|
|
||||||
(r: FormRegistryEmployee) => r.status == "PENDING"
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// เช็ค props modal ทำการ filter เมื่อคลิก icon ส่งไปออกคำสั่ง
|
|
||||||
watch(props, () => {
|
|
||||||
if (props.modal === true && props.rows) {
|
|
||||||
filterRowData();
|
|
||||||
visibleColumnsOrder.value = [
|
|
||||||
"no",
|
|
||||||
"fullname",
|
|
||||||
"fullnameOld",
|
|
||||||
"oc",
|
|
||||||
"positionEmployeePosition",
|
|
||||||
"positionEmployeePositionSide",
|
|
||||||
"positionLine",
|
|
||||||
"govAge",
|
|
||||||
"positionEmployeeGroup",
|
|
||||||
"dateAppoint",
|
|
||||||
"refSalary",
|
|
||||||
"dateStart",
|
|
||||||
"createdAt",
|
|
||||||
"salaryDate",
|
|
||||||
"age",
|
|
||||||
"amount",
|
|
||||||
"statustext",
|
|
||||||
"leaveDateOrder",
|
|
||||||
"newAgency",
|
|
||||||
"currentAgency",
|
|
||||||
];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-dialog v-model="props.modal">
|
|
||||||
<q-card style="width: 900px; max-width: 80vw">
|
|
||||||
<DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="props.closeDialog" />
|
|
||||||
<q-separator />
|
|
||||||
<q-card-section class="q-pt-none">
|
|
||||||
<div class="row justify-end">
|
|
||||||
<div class="col-5">
|
|
||||||
<q-toolbar style="padding: 0">
|
|
||||||
<q-input
|
|
||||||
borderless
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
debounce="300"
|
|
||||||
v-model="filter"
|
|
||||||
ref="filterRef"
|
|
||||||
placeholder="ค้นหา"
|
|
||||||
style="width: 850px; max-width: auto"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon name="search" />
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
<q-select
|
|
||||||
v-model="visibleColumnsOrder"
|
|
||||||
multiple
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
options-dense
|
|
||||||
:display-value="$q.lang.table.columns"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
:options="columnsOrder"
|
|
||||||
option-value="name"
|
|
||||||
options-cover
|
|
||||||
style="min-width: 150px"
|
|
||||||
class="gt-xs q-ml-sm"
|
|
||||||
/>
|
|
||||||
</q-toolbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<d-table
|
|
||||||
:rows="rowsOrder"
|
|
||||||
:columns="columnsOrder"
|
|
||||||
:visible-columns="visibleColumnsOrder"
|
|
||||||
:filter="filter"
|
|
||||||
row-key="id"
|
|
||||||
selection="multiple"
|
|
||||||
v-model:selected="selected"
|
|
||||||
>
|
|
||||||
<template v-slot:header-selection="scope">
|
|
||||||
<q-checkbox
|
|
||||||
keep-color
|
|
||||||
color="primary"
|
|
||||||
dense
|
|
||||||
v-model="scope.selected"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<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-td>
|
|
||||||
|
|
||||||
<q-td key="no" :props="props">
|
|
||||||
{{ props.rowIndex + 1 }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="fullname" :props="props">
|
|
||||||
{{ props.row.fullname }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="newAgency" :props="props">
|
|
||||||
<div
|
|
||||||
class="col-12"
|
|
||||||
v-if="
|
|
||||||
props.row.draftOrganizationOrganization == null &&
|
|
||||||
props.row.draftPositionEmployee == null
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<div class="text-weight-medium">
|
|
||||||
{{ "-" }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12" v-else>
|
|
||||||
<div class="text-weight-medium">
|
|
||||||
{{ props.row.draftOrganizationOrganization ?? "-" }}
|
|
||||||
</div>
|
|
||||||
<div class="text-weight-light">
|
|
||||||
{{ props.row.draftPositionEmployee ?? "-" }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td key="currentAgency" :props="props">
|
|
||||||
<div
|
|
||||||
class="col-12"
|
|
||||||
v-if="props.row.oc == null && props.row.position == null"
|
|
||||||
>
|
|
||||||
<div class="text-weight-medium">
|
|
||||||
{{ "-" }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12" v-else>
|
|
||||||
<div class="text-weight-medium">
|
|
||||||
{{ props.row.oc ?? "-" }}
|
|
||||||
</div>
|
|
||||||
<div class="text-weight-light">
|
|
||||||
{{ props.row.position ?? "-" }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
|
|
||||||
<q-td key="amount" :props="props">
|
|
||||||
{{ props.row.amount }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="govAge" :props="props">
|
|
||||||
{{ props.row.govAge }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="dateAppoint" :props="props">
|
|
||||||
{{ props.row.dateAppoint }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="dateStart" :props="props">
|
|
||||||
{{ props.row.dateStart }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="salaryDate" :props="props">
|
|
||||||
{{ props.row.salaryDate }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="refSalary" :props="props">
|
|
||||||
{{ props.row.refSalary }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="age" :props="props">
|
|
||||||
{{ props.row.age }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="fullnameOld" :props="props">
|
|
||||||
{{ props.row.fullnameOld }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="createdAt" :props="props">
|
|
||||||
{{ props.row.createdAt }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="isLeave" :props="props">
|
|
||||||
{{ props.row.isLeave }}
|
|
||||||
</q-td>
|
|
||||||
|
|
||||||
<q-td key="leaveDateOrder" :props="props">
|
|
||||||
{{ props.row.leaveDateOrder }}
|
|
||||||
</q-td>
|
|
||||||
<q-td key="statustext" :props="props">
|
|
||||||
{{ props.row.statustext }}
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</d-table>
|
|
||||||
</q-card-section>
|
|
||||||
|
|
||||||
<q-card-actions align="right" class="bg-white text-teal">
|
|
||||||
<q-btn label="ส่งไปออกคำสั่ง" @click="save" color="public" />
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,989 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, ref, watch } from "vue";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useProfileDataStore } from "@/modules/04_registry/store";
|
|
||||||
|
|
||||||
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/Assessment";
|
|
||||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Assessment";
|
|
||||||
import type { 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,
|
|
||||||
},
|
|
||||||
profileType: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const store = useProfileDataStore();
|
|
||||||
const { profileData, changeProfileColumns } = store;
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
success,
|
|
||||||
dateToISO,
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
} = mixin;
|
|
||||||
const route = useRoute();
|
|
||||||
const id = ref<string>("");
|
|
||||||
const name = ref<string>();
|
|
||||||
const point1Total = ref<number>();
|
|
||||||
const point1 = ref<number>();
|
|
||||||
const point2Total = ref<number>();
|
|
||||||
const point2 = ref<number>();
|
|
||||||
const pointSumTotal = ref<number>();
|
|
||||||
const pointSum = ref<number>();
|
|
||||||
const date = ref<Date>(new 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 ? route.params.id.toString() : ""
|
|
||||||
);
|
|
||||||
const rows = ref<RequestItemsObject[]>([]);
|
|
||||||
const filter = ref<string>(""); //search data table
|
|
||||||
const visibleColumns = ref<String[]>([]);
|
|
||||||
profileData.assessment.columns.length == 0
|
|
||||||
? (visibleColumns.value = [
|
|
||||||
"point1Total",
|
|
||||||
"point1",
|
|
||||||
"point2Total",
|
|
||||||
"point2",
|
|
||||||
"pointSumTotal",
|
|
||||||
"pointSum",
|
|
||||||
"name",
|
|
||||||
"date",
|
|
||||||
])
|
|
||||||
: (visibleColumns.value = profileData.assessment.columns);
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "date",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่ได้รับ",
|
|
||||||
sortable: true,
|
|
||||||
field: "date",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "point1Total",
|
|
||||||
align: "left",
|
|
||||||
label: "ส่วนที่1 (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "point1Total",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "point1",
|
|
||||||
align: "left",
|
|
||||||
label: "ผลประเมินส่วนที่1 (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "point1",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "point2Total",
|
|
||||||
align: "left",
|
|
||||||
label: "ส่วนที่2 (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "point2Total",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "point2",
|
|
||||||
align: "left",
|
|
||||||
label: "ผลประเมินส่วนที่2 (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "point2",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "pointSumTotal",
|
|
||||||
align: "left",
|
|
||||||
label: "ผลรวม (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "pointSumTotal",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "pointSum",
|
|
||||||
align: "left",
|
|
||||||
label: "ผลประเมินรวม (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "pointSum",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "name",
|
|
||||||
align: "left",
|
|
||||||
label: "ผลประเมิน",
|
|
||||||
sortable: true,
|
|
||||||
field: "name",
|
|
||||||
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: "point1Total",
|
|
||||||
align: "left",
|
|
||||||
label: "ส่วนที่1 (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "point1Total",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "point1",
|
|
||||||
align: "left",
|
|
||||||
label: "ผลประเมินส่วนที่1 (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "point1",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "point2Total",
|
|
||||||
align: "left",
|
|
||||||
label: "ส่วนที่2 (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "point2Total",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "point2",
|
|
||||||
align: "left",
|
|
||||||
label: "ผลประเมินส่วนที่2 (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "point2",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "pointSumTotal",
|
|
||||||
align: "left",
|
|
||||||
label: "ผลรวม (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "pointSumTotal",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "pointSum",
|
|
||||||
align: "left",
|
|
||||||
label: "ผลประเมินรวม (คะแนน)",
|
|
||||||
sortable: true,
|
|
||||||
field: "pointSum",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "name",
|
|
||||||
align: "left",
|
|
||||||
label: "ผลประเมิน",
|
|
||||||
sortable: true,
|
|
||||||
field: "name",
|
|
||||||
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[]>([
|
|
||||||
"point1Total",
|
|
||||||
"point1",
|
|
||||||
"point2Total",
|
|
||||||
"point2",
|
|
||||||
"pointSumTotal",
|
|
||||||
"pointSum",
|
|
||||||
"name",
|
|
||||||
"date",
|
|
||||||
"createdFullName",
|
|
||||||
"createdAt",
|
|
||||||
]);
|
|
||||||
|
|
||||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
|
||||||
await changeProfileColumns("assessment", count);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileAssessmentId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rows.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rows.value.push({
|
|
||||||
id: e.id,
|
|
||||||
name: e.name,
|
|
||||||
point1Total: e.point1Total,
|
|
||||||
point1: e.point1,
|
|
||||||
point2Total: e.point2Total,
|
|
||||||
point2: e.point2,
|
|
||||||
pointSumTotal: e.pointSumTotal,
|
|
||||||
pointSum: e.pointSum,
|
|
||||||
date: new Date(e.date),
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดดูข้อมูลก่อนหน้า
|
|
||||||
*/
|
|
||||||
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];
|
|
||||||
name.value = row.name;
|
|
||||||
point1Total.value = row.point1Total;
|
|
||||||
point1.value = row.point1;
|
|
||||||
point2Total.value = row.point2Total;
|
|
||||||
point2.value = row.point2;
|
|
||||||
pointSumTotal.value = row.pointSumTotal;
|
|
||||||
pointSum.value = row.pointSum;
|
|
||||||
date.value = row.date;
|
|
||||||
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 = () => {
|
|
||||||
dialogConfirm($q, () => SaveData());
|
|
||||||
};
|
|
||||||
const SaveData = async () => {
|
|
||||||
await myForm.value.validate().then(async (result: boolean) => {
|
|
||||||
if (result) {
|
|
||||||
if (modalEdit.value) {
|
|
||||||
await editData();
|
|
||||||
} else {
|
|
||||||
await saveData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกเพิ่มข้อมูล
|
|
||||||
*/
|
|
||||||
const saveData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profileAssessmentId(profileId.value), {
|
|
||||||
id: id.value,
|
|
||||||
name: name.value,
|
|
||||||
point1Total: point1Total.value,
|
|
||||||
point1: point1.value,
|
|
||||||
point2Total: point2Total.value,
|
|
||||||
point2: point2.value,
|
|
||||||
pointSumTotal: pointSumTotal.value,
|
|
||||||
pointSum: pointSum.value,
|
|
||||||
date: dateToISO(date.value),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
const editData = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileAssessmentId(id.value), {
|
|
||||||
id: id.value,
|
|
||||||
name: name.value,
|
|
||||||
point1Total: point1Total.value,
|
|
||||||
point1: point1.value,
|
|
||||||
point2Total: point2Total.value,
|
|
||||||
point2: point2.value,
|
|
||||||
pointSumTotal: pointSumTotal.value,
|
|
||||||
pointSum: pointSum.value,
|
|
||||||
date: dateToISO(date.value),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ลบลบข้อมูล
|
|
||||||
*/
|
|
||||||
const clickDelete = async () => {
|
|
||||||
$q.dialog({
|
|
||||||
title: `ลบข้อมูล`,
|
|
||||||
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
|
||||||
cancel: "ยกเลิก",
|
|
||||||
ok: "ยืนยัน",
|
|
||||||
persistent: true,
|
|
||||||
})
|
|
||||||
.onOk(async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.delete(config.API.profileAssessmentId(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;
|
|
||||||
edit.value = false;
|
|
||||||
rawItem.value = props.row;
|
|
||||||
rowIndex.value = props.rowIndex;
|
|
||||||
name.value = props.row.name;
|
|
||||||
point1Total.value = props.row.point1Total;
|
|
||||||
point1.value = props.row.point1;
|
|
||||||
point2Total.value = props.row.point2Total;
|
|
||||||
point2.value = props.row.point2;
|
|
||||||
pointSumTotal.value = props.row.pointSumTotal;
|
|
||||||
pointSum.value = props.row.pointSum;
|
|
||||||
date.value = props.row.date;
|
|
||||||
id.value = props.row.id;
|
|
||||||
await checkRowPage();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดปุ่มเพิ่มบน table
|
|
||||||
*/
|
|
||||||
const addData = () => {
|
|
||||||
modalEdit.value = false;
|
|
||||||
modal.value = true;
|
|
||||||
edit.value = true;
|
|
||||||
name.value = "";
|
|
||||||
point1Total.value = 0;
|
|
||||||
point1.value = 0;
|
|
||||||
point2Total.value = 0;
|
|
||||||
point2.value = 0;
|
|
||||||
pointSumTotal.value = 0;
|
|
||||||
pointSum.value = 0;
|
|
||||||
date.value = new Date();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
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) => {
|
|
||||||
tittleHistory.value = "ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ";
|
|
||||||
modalHistory.value = true;
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileAssessmentHisId(row.id))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rowsHistory.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rowsHistory.value.push({
|
|
||||||
id: e.id,
|
|
||||||
name: e.name,
|
|
||||||
point1Total: e.point1Total,
|
|
||||||
point1: e.point1,
|
|
||||||
point2Total: e.point2Total,
|
|
||||||
point2: e.point2,
|
|
||||||
pointSumTotal: e.pointSumTotal,
|
|
||||||
pointSum: e.pointSum,
|
|
||||||
date: new Date(e.date),
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const textRangePoint = (val: number | undefined) => {
|
|
||||||
if (val == undefined) val = -1;
|
|
||||||
if (val >= 0 && val <= 60) return "(ต่ำกว่าร้อยละ 60)";
|
|
||||||
if (val >= 60 && val <= 69) return "(ร้อยละ 60 – 69)";
|
|
||||||
if (val >= 70 && val <= 79) return "(ร้อยละ 70 – 79)";
|
|
||||||
if (val >= 80 && val <= 89) return "(ร้อยละ 80 – 89)";
|
|
||||||
if (val >= 90 && val <= 100) return "(ร้อยละ 90 - 100)";
|
|
||||||
else return "";
|
|
||||||
};
|
|
||||||
|
|
||||||
const textPoint = (val: number | undefined) => {
|
|
||||||
if (val == undefined) val = -1;
|
|
||||||
if (val >= 0 && val <= 60) return "ต้องปรับปรุง";
|
|
||||||
if (val >= 60 && val <= 69) return "พอใช้";
|
|
||||||
if (val >= 70 && val <= 79) return "ดี";
|
|
||||||
if (val >= 80 && val <= 89) return "ดีมาก";
|
|
||||||
if (val >= 90 && val <= 100) return "ดีเด่น";
|
|
||||||
else return "-";
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- card ผลการประเมินการปฏิบัติราชการ -->
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-pa-md">
|
|
||||||
<q-form ref="myForm">
|
|
||||||
<ProfileTable
|
|
||||||
:rows="rows"
|
|
||||||
:columns="columns"
|
|
||||||
:filter="filter"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
v-model:inputfilter="filter"
|
|
||||||
v-model:inputvisible="visibleColumns"
|
|
||||||
:add="clickAdd"
|
|
||||||
name="ผลการประเมินการปฏิบัติราชการ"
|
|
||||||
icon="mdi-clipboard-text"
|
|
||||||
:statusEdit="statusEdit"
|
|
||||||
>
|
|
||||||
<template #columns="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-td
|
|
||||||
v-for="col in props.cols"
|
|
||||||
:key="col.name"
|
|
||||||
:props="props"
|
|
||||||
@click="selectData(props)"
|
|
||||||
class="cursor-pointer"
|
|
||||||
>
|
|
||||||
<div v-if="col.name == 'date'" class="table_ellipsis">
|
|
||||||
{{ date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else-if="col.name == 'name'" class="table_ellipsis">
|
|
||||||
{{ textPoint(props.row.pointSum) }}
|
|
||||||
{{ textRangePoint(props.row.pointSum) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
color="info"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
size="14px"
|
|
||||||
icon="mdi-history"
|
|
||||||
@click="clickHistory(props.row)"
|
|
||||||
/>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</ProfileTable>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
<!-- 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 q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
||||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
:readonly="!edit"
|
|
||||||
v-model="date"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="date2Thai(date)"
|
|
||||||
: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 class="col-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="point"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกคะแนน'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'คะแนน'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
<div class="col-6">
|
|
||||||
<q-input
|
|
||||||
input-class="text-right"
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="point1Total"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่1 (คะแนน)'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ส่วนที่1 (คะแนน)'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<q-input
|
|
||||||
input-class="text-right"
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="point1"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่1 (คะแนน)'}`,
|
|
||||||
]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ผลประเมินส่วนที่1 (คะแนน)'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<q-input
|
|
||||||
input-class="text-right"
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="point2Total"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกส่วนที่2 (คะแนน)'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ส่วนที่2 (คะแนน)'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<q-input
|
|
||||||
input-class="text-right"
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="point2"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณากรอกผลประเมินส่วนที่2 (คะแนน)'}`,
|
|
||||||
]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ผลประเมินส่วนที่2 (คะแนน)'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<q-input
|
|
||||||
input-class="text-right"
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="pointSumTotal"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกผลรวม (คะแนน)'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ผลรวม (คะแนน)'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<q-input
|
|
||||||
input-class="text-right"
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="pointSum"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณากรอกผลประเมินรวม (คะแนน)'}`,
|
|
||||||
]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ผลประเมินรวม (คะแนน)'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="text-subtitle2 col-12 row items-center">
|
|
||||||
<q-space></q-space>
|
|
||||||
ผลการประเมิน:
|
|
||||||
<div class="text-bold items-center q-px-sm">
|
|
||||||
{{ textPoint(pointSum) }}
|
|
||||||
</div>
|
|
||||||
{{ textRangePoint(pointSum) }}
|
|
||||||
</div>
|
|
||||||
<!-- <div class="col-12">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="name"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อแบบประเมิน'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ชื่อแบบประเมิน'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<DialogFooter
|
|
||||||
:cancel="clickCancel"
|
|
||||||
:edit="clickEdit"
|
|
||||||
:save="clickSave"
|
|
||||||
: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"
|
|
||||||
>
|
|
||||||
<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 == 'date' || col.name == 'createdAt'"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else-if="col.name == 'name'" class="table_ellipsis">
|
|
||||||
{{ textPoint(props.row.pointSum) }}
|
|
||||||
{{ textRangePoint(props.row.pointSum) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</HistoryTable>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.modalfix {
|
|
||||||
position: fixed !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,950 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, ref, watch } from "vue";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useProfileDataStore } from "@/modules/04_registry/store";
|
|
||||||
|
|
||||||
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/Discipline";
|
|
||||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Discipline";
|
|
||||||
import type {
|
|
||||||
DisciplineOps,
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const store = useProfileDataStore();
|
|
||||||
const { profileData, changeProfileColumns } = store;
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
success,
|
|
||||||
dateToISO,
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
} = mixin;
|
|
||||||
const route = useRoute();
|
|
||||||
const id = ref<string>("");
|
|
||||||
const level = ref<string>();
|
|
||||||
const Ops = ref<DisciplineOps>({
|
|
||||||
levelOptions: [
|
|
||||||
{
|
|
||||||
name: "ภาคทัณฑ์",
|
|
||||||
id: "ภาคทัณฑ์",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "ตัดเงินเดือน",
|
|
||||||
id: "ตัดเงินเดือน",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "ลดขั้นเงินเดือน",
|
|
||||||
id: "ลดขั้นเงินเดือน",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "ปลดออก",
|
|
||||||
id: "ปลดออก",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "ไล่ออก",
|
|
||||||
id: "ไล่ออก",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
const OpsFilter = ref<DisciplineOps>({
|
|
||||||
levelOptions: [
|
|
||||||
{
|
|
||||||
name: "ภาคทัณฑ์",
|
|
||||||
id: "ภาคทัณฑ์",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "ตัดเงินเดือน",
|
|
||||||
id: "ตัดเงินเดือน",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "ลดขั้นเงินเดือน",
|
|
||||||
id: "ลดขั้นเงินเดือน",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "ปลดออก",
|
|
||||||
id: "ปลดออก",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "ไล่ออก",
|
|
||||||
id: "ไล่ออก",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
const detail = ref<string>();
|
|
||||||
const unStigma = ref<string>();
|
|
||||||
const refCommandNo = ref<string>();
|
|
||||||
const refCommandDate = ref<Date | null>(new Date());
|
|
||||||
const date = ref<Date>(new 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 ? route.params.id.toString() : ""
|
|
||||||
);
|
|
||||||
const rows = ref<RequestItemsObject[]>([]);
|
|
||||||
const filter = ref<string>(""); //search data table
|
|
||||||
const visibleColumns = ref<String[]>([]);
|
|
||||||
profileData.discipline.columns.length == 0
|
|
||||||
? (visibleColumns.value = [
|
|
||||||
"level",
|
|
||||||
"detail",
|
|
||||||
"unStigma",
|
|
||||||
"refCommandNo",
|
|
||||||
"refCommandDate",
|
|
||||||
"date",
|
|
||||||
])
|
|
||||||
: (visibleColumns.value = profileData.discipline.columns);
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "date",
|
|
||||||
align: "left",
|
|
||||||
label: "วัน เดือน ปี",
|
|
||||||
sortable: true,
|
|
||||||
field: "date",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "detail",
|
|
||||||
align: "left",
|
|
||||||
label: "รายละเอียด",
|
|
||||||
sortable: true,
|
|
||||||
field: "detail",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "level",
|
|
||||||
align: "left",
|
|
||||||
label: "ระดับการลงโทษทางวินัย",
|
|
||||||
sortable: true,
|
|
||||||
field: "level",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "unStigma",
|
|
||||||
align: "left",
|
|
||||||
label: "ล้างมลทิน",
|
|
||||||
sortable: true,
|
|
||||||
field: "unStigma",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandNo",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขที่คำสั่ง",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandNo",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandDate",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง (ลงวันที่)",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandDate",
|
|
||||||
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: "date",
|
|
||||||
align: "left",
|
|
||||||
label: "วัน เดือน ปี",
|
|
||||||
sortable: true,
|
|
||||||
field: "date",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "detail",
|
|
||||||
align: "left",
|
|
||||||
label: "รายละเอียด",
|
|
||||||
sortable: true,
|
|
||||||
field: "detail",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "level",
|
|
||||||
align: "left",
|
|
||||||
label: "ระดับการลงโทษทางวินัย",
|
|
||||||
sortable: true,
|
|
||||||
field: "level",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "unStigma",
|
|
||||||
align: "left",
|
|
||||||
label: "ล้างมลทิน",
|
|
||||||
sortable: true,
|
|
||||||
field: "unStigma",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandNo",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขที่คำสั่ง",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandNo",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandDate",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง (ลงวันที่)",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandDate",
|
|
||||||
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[]>([
|
|
||||||
"level",
|
|
||||||
"detail",
|
|
||||||
"unStigma",
|
|
||||||
"refCommandNo",
|
|
||||||
"refCommandDate",
|
|
||||||
"date",
|
|
||||||
"createdFullName",
|
|
||||||
"createdAt",
|
|
||||||
]);
|
|
||||||
|
|
||||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
|
||||||
await changeProfileColumns("discipline", count);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
|
|
||||||
const filterSelector = (val: string, update: Function, refData: string) => {
|
|
||||||
switch (refData) {
|
|
||||||
case "levelOptions":
|
|
||||||
update(() => {
|
|
||||||
Ops.value.levelOptions = OpsFilter.value.levelOptions.filter(
|
|
||||||
(v: DataOption) => v.name.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileDisId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rows.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rows.value.push({
|
|
||||||
id: e.id,
|
|
||||||
level: e.level,
|
|
||||||
detail: e.detail,
|
|
||||||
unStigma: e.unStigma,
|
|
||||||
refCommandNo: e.refCommandNo,
|
|
||||||
refCommandDate:
|
|
||||||
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
|
||||||
date: new Date(e.date),
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดดูข้อมูลก่อนหน้า
|
|
||||||
*/
|
|
||||||
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];
|
|
||||||
level.value = row.level;
|
|
||||||
detail.value = row.detail;
|
|
||||||
unStigma.value = row.unStigma;
|
|
||||||
refCommandNo.value = row.refCommandNo;
|
|
||||||
refCommandDate.value = row.refCommandDate;
|
|
||||||
date.value = row.date;
|
|
||||||
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 = () => {
|
|
||||||
dialogConfirm($q, () => SaveData());
|
|
||||||
};
|
|
||||||
const SaveData = async () => {
|
|
||||||
await myForm.value.validate().then(async (result: boolean) => {
|
|
||||||
if (result) {
|
|
||||||
if (modalEdit.value) {
|
|
||||||
await editData();
|
|
||||||
} else {
|
|
||||||
await saveData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกเพิ่มข้อมูล
|
|
||||||
*/
|
|
||||||
const saveData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profileDisId(profileId.value), {
|
|
||||||
id: id.value,
|
|
||||||
level: level.value,
|
|
||||||
detail: detail.value,
|
|
||||||
unStigma: unStigma.value,
|
|
||||||
refCommandNo: refCommandNo.value,
|
|
||||||
refCommandDate:
|
|
||||||
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
|
||||||
date: dateToISO(date.value),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
const editData = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileDisId(id.value), {
|
|
||||||
id: id.value,
|
|
||||||
level: level.value,
|
|
||||||
detail: detail.value,
|
|
||||||
unStigma: unStigma.value,
|
|
||||||
refCommandNo: refCommandNo.value,
|
|
||||||
refCommandDate:
|
|
||||||
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
|
||||||
date: dateToISO(date.value),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ลบลบข้อมูล
|
|
||||||
*/
|
|
||||||
const clickDelete = async () => {
|
|
||||||
$q.dialog({
|
|
||||||
title: `ลบข้อมูล`,
|
|
||||||
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
|
||||||
cancel: "ยกเลิก",
|
|
||||||
ok: "ยืนยัน",
|
|
||||||
persistent: true,
|
|
||||||
})
|
|
||||||
.onOk(async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.delete(config.API.profileDisId(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;
|
|
||||||
edit.value = false;
|
|
||||||
rawItem.value = props.row;
|
|
||||||
rowIndex.value = props.rowIndex;
|
|
||||||
level.value = props.row.level;
|
|
||||||
detail.value = props.row.detail;
|
|
||||||
unStigma.value = props.row.unStigma;
|
|
||||||
refCommandNo.value = props.row.refCommandNo;
|
|
||||||
refCommandDate.value = props.row.refCommandDate;
|
|
||||||
date.value = props.row.date;
|
|
||||||
id.value = props.row.id;
|
|
||||||
await checkRowPage();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดปุ่มเพิ่มบน table
|
|
||||||
*/
|
|
||||||
const addData = () => {
|
|
||||||
modalEdit.value = false;
|
|
||||||
modal.value = true;
|
|
||||||
edit.value = true;
|
|
||||||
level.value = "";
|
|
||||||
detail.value = "";
|
|
||||||
unStigma.value = "";
|
|
||||||
refCommandNo.value = "";
|
|
||||||
refCommandDate.value = null;
|
|
||||||
date.value = new Date();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
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;
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileDisHisId(row.id))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rowsHistory.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rowsHistory.value.push({
|
|
||||||
id: e.id,
|
|
||||||
level: e.level,
|
|
||||||
detail: e.detail,
|
|
||||||
unStigma: e.unStigma,
|
|
||||||
refCommandNo: e.refCommandNo,
|
|
||||||
refCommandDate:
|
|
||||||
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
|
||||||
date: new Date(e.date),
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
const resetFilter = () => {};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- card วินัย -->
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
|
||||||
<q-form ref="myForm">
|
|
||||||
<ProfileTable
|
|
||||||
:rows="rows"
|
|
||||||
:columns="columns"
|
|
||||||
:filter="filter"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
v-model:inputfilter="filter"
|
|
||||||
v-model:inputvisible="visibleColumns"
|
|
||||||
:add="clickAdd"
|
|
||||||
name="วินัย"
|
|
||||||
icon="mdi-scale-balance"
|
|
||||||
:statusEdit="statusEdit"
|
|
||||||
>
|
|
||||||
<template #columns="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-td
|
|
||||||
v-for="col in props.cols"
|
|
||||||
:key="col.name"
|
|
||||||
:props="props"
|
|
||||||
@click="selectData(props)"
|
|
||||||
class="cursor-pointer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="col.name == 'refCommandDate' || col.name == 'date'"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ col.value == null ? null : date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
color="info"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
size="14px"
|
|
||||||
icon="mdi-history"
|
|
||||||
@click="clickHistory(props.row)"
|
|
||||||
/>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</ProfileTable>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
<!-- 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 q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
:readonly="!edit"
|
|
||||||
v-model="date"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="date2Thai(date)"
|
|
||||||
:rules="[(val:string) => !!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 class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="detail"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'รายละเอียด'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<selector
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="level"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ระดับการลงโทษทางวินัย'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="Ops.levelOptions"
|
|
||||||
option-value="id"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue:string,
|
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'levelOptions'
|
|
||||||
) "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="unStigma"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ล้างมลทิน'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="refCommandNo"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'เลขที่คำสั่ง'}`"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file"
|
|
||||||
class="cursor-pointer"
|
|
||||||
@click="resetFilter"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
:readonly="!edit"
|
|
||||||
v-model="refCommandDate"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="
|
|
||||||
refCommandDate == null ? null : date2Thai(refCommandDate)
|
|
||||||
"
|
|
||||||
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>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<DialogFooter
|
|
||||||
:cancel="clickCancel"
|
|
||||||
:edit="clickEdit"
|
|
||||||
:save="clickSave"
|
|
||||||
: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"
|
|
||||||
>
|
|
||||||
<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 == 'date' ||
|
|
||||||
col.name == 'refCommandDate' ||
|
|
||||||
col.name == 'createdAt'
|
|
||||||
"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ col.value == null ? null : date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</HistoryTable>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.modalfix {
|
|
||||||
position: fixed !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,300 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, computed, ref, watch } from "vue";
|
|
||||||
import { useQuasar, QForm } from "quasar";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
|
|
||||||
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
statusEdit: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
notiNoEdit: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
statusAdd: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const emit = defineEmits(["update:statusEdit"]);
|
|
||||||
|
|
||||||
const $q = useQuasar(); // show dialog
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const route = useRoute();
|
|
||||||
const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
|
|
||||||
const profileId = ref<string>(
|
|
||||||
route.params.id ? route.params.id.toString() : ""
|
|
||||||
);
|
|
||||||
const edit = ref<boolean>(false);
|
|
||||||
const uploader = ref<any>();
|
|
||||||
const files = ref<any>([]);
|
|
||||||
const file = ref<any>([]);
|
|
||||||
const name = ref<string>("");
|
|
||||||
const myform = ref<QForm | null>(null);
|
|
||||||
onMounted(async () => {
|
|
||||||
await getData();
|
|
||||||
});
|
|
||||||
|
|
||||||
const getData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profilePaperId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
files.value = data;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteData = async (id: string) => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.delete(config.API.profilePaperId(id))
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await getData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const uploadData = () => {
|
|
||||||
dialogConfirm($q, () => Datasave());
|
|
||||||
};
|
|
||||||
const Datasave = async () => {
|
|
||||||
if (myform.value != null) {
|
|
||||||
await myform.value.validate().then(async (success: boolean) => {
|
|
||||||
if (success) {
|
|
||||||
if (props.statusAdd) {
|
|
||||||
// await addData();
|
|
||||||
} else {
|
|
||||||
await Dataupload();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const onCancel = async () => {
|
|
||||||
if (myform.value != null) {
|
|
||||||
myform.value.reset();
|
|
||||||
}
|
|
||||||
await getData();
|
|
||||||
};
|
|
||||||
const Dataupload = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
if (file.value.length > 0) {
|
|
||||||
const blob = file.value.slice(0, file.value[0].size);
|
|
||||||
const newFile = new File(blob, name.value, {
|
|
||||||
type: file.value[0].type,
|
|
||||||
});
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("avatar", newFile);
|
|
||||||
formData.append("moss", "newFile");
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profilePaperId(profileId.value), formData)
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
uploader.value.reset();
|
|
||||||
name.value = "";
|
|
||||||
edit.value = false;
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
await getData();
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// modalError(
|
|
||||||
// $q,
|
|
||||||
// "ไม่สามารถอัปโหลดไฟล์ได้",
|
|
||||||
// "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
|
|
||||||
// );
|
|
||||||
getData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fileAdd = async (val: any) => {
|
|
||||||
name.value = val[0].name;
|
|
||||||
file.value = val;
|
|
||||||
};
|
|
||||||
|
|
||||||
const downloadData = async (path: string) => {
|
|
||||||
window.open(path);
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeBtn = async () => {
|
|
||||||
name.value = "";
|
|
||||||
if (edit.value == true) {
|
|
||||||
if (props.statusEdit === true) {
|
|
||||||
edit.value = false;
|
|
||||||
props.notiNoEdit();
|
|
||||||
} else {
|
|
||||||
emit("update:statusEdit", true);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 row q-px-lg q-py-md">
|
|
||||||
<q-form ref="myform" class="col-12">
|
|
||||||
<HeaderTop
|
|
||||||
v-model:edit="edit"
|
|
||||||
header="เอกสารหลักฐาน"
|
|
||||||
icon="mdi-file-document"
|
|
||||||
:history="false"
|
|
||||||
:changeBtn="changeBtn"
|
|
||||||
:cancel="onCancel"
|
|
||||||
:disable="statusEdit"
|
|
||||||
:save="uploadData"
|
|
||||||
/>
|
|
||||||
<div class="row col-12 q-pt-sm">
|
|
||||||
<q-card bordered flat class="full-width">
|
|
||||||
<q-list separator>
|
|
||||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label class="full-width ellipsis">
|
|
||||||
{{ file.fileName }}
|
|
||||||
</q-item-label>
|
|
||||||
|
|
||||||
<q-item-label caption> </q-item-label>
|
|
||||||
</q-item-section>
|
|
||||||
<q-item-section top side>
|
|
||||||
<div class="row col-12">
|
|
||||||
<q-btn
|
|
||||||
class="gt-xs"
|
|
||||||
size="12px"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
color="blue"
|
|
||||||
icon="mdi-download-outline"
|
|
||||||
@click="downloadData(file.file)"
|
|
||||||
/>
|
|
||||||
<q-btn
|
|
||||||
class="gt-xs"
|
|
||||||
size="12px"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
color="red"
|
|
||||||
icon="mdi-delete-outline"
|
|
||||||
v-show="edit"
|
|
||||||
@click="deleteData(file.id)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</q-list>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<q-input
|
|
||||||
v-if="edit"
|
|
||||||
class="q-mt-sm col-12 q-pb-xs"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="name"
|
|
||||||
hide-bottom-space
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อเอกสาร'}`]"
|
|
||||||
:label="`${'ชื่อเอกสาร'}`"
|
|
||||||
/>
|
|
||||||
<q-uploader
|
|
||||||
v-if="edit"
|
|
||||||
color="gray"
|
|
||||||
type="file"
|
|
||||||
flat
|
|
||||||
@factory="uploadData"
|
|
||||||
ref="uploader"
|
|
||||||
class="full-width"
|
|
||||||
text-color="white"
|
|
||||||
:max-size="10000000"
|
|
||||||
accept=".jpg,.png,.pdf,.csv,.doc,.docx"
|
|
||||||
bordered
|
|
||||||
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 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,docx ขนาดไม่เกิน 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-form>
|
|
||||||
</q-card>
|
|
||||||
</template>
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,625 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, reactive, onMounted } from "vue";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
|
|
||||||
import type { QTableProps } from "quasar";
|
|
||||||
import type {
|
|
||||||
FormEmployment,
|
|
||||||
FormEmploymentRef,
|
|
||||||
EmploymentList,
|
|
||||||
Respones,
|
|
||||||
} from "@/modules/08_registryEmployee/interface/response/Main";
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const route = useRoute();
|
|
||||||
const maxin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
dialogConfirm,
|
|
||||||
dialogRemove,
|
|
||||||
success,
|
|
||||||
messageError,
|
|
||||||
hideLoader,
|
|
||||||
showLoader,
|
|
||||||
} = maxin;
|
|
||||||
const profileId = ref<string>(route.params.id.toString());
|
|
||||||
|
|
||||||
const rows = ref<EmploymentList[]>([]);
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "dateEmployment",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่จ้าง",
|
|
||||||
sortable: false,
|
|
||||||
field: "dateEmployment",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "orderEmployment",
|
|
||||||
align: "left",
|
|
||||||
label: "คำสั่งจ้าง",
|
|
||||||
sortable: false,
|
|
||||||
field: "orderEmployment",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const visibleColumns = ref<string[]>(["dateEmployment", "orderEmployment"]);
|
|
||||||
const filter = ref<string>();
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchList();
|
|
||||||
});
|
|
||||||
|
|
||||||
async function fetchList() {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.employmentId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
const list: EmploymentList[] = data.map((e: Respones) => ({
|
|
||||||
id: e.id,
|
|
||||||
orderEmployment: e.command,
|
|
||||||
dateEmployment: date2Thai(e.date),
|
|
||||||
dataISO: e.date,
|
|
||||||
}));
|
|
||||||
rows.value = list;
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// เพิ่มข้อมูลการจ้าง
|
|
||||||
const modal = ref<boolean>(false);
|
|
||||||
const formData = reactive<FormEmployment>({
|
|
||||||
dateEmployment: null,
|
|
||||||
orderEmployment: "",
|
|
||||||
});
|
|
||||||
const dateEmploymentRef = ref<object | null>();
|
|
||||||
const orderEmploymentRef = ref<object | null>();
|
|
||||||
const formDataRef: FormEmploymentRef = {
|
|
||||||
dateEmployment: dateEmploymentRef,
|
|
||||||
orderEmployment: orderEmploymentRef,
|
|
||||||
};
|
|
||||||
|
|
||||||
function onClickAdd() {
|
|
||||||
modal.value = true;
|
|
||||||
actions.value = "";
|
|
||||||
formData.dateEmployment = null;
|
|
||||||
formData.orderEmployment = "";
|
|
||||||
}
|
|
||||||
function colsePopup() {
|
|
||||||
modal.value = false;
|
|
||||||
modalHistory.value = false;
|
|
||||||
}
|
|
||||||
// validateForm
|
|
||||||
function validateForm() {
|
|
||||||
const hasError = [];
|
|
||||||
for (const key in formDataRef) {
|
|
||||||
if (Object.prototype.hasOwnProperty.call(formDataRef, key)) {
|
|
||||||
const property = formDataRef[key];
|
|
||||||
if (property.value && typeof property.value.validate === "function") {
|
|
||||||
const isValid = property.value.validate();
|
|
||||||
hasError.push(isValid);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (hasError.every((result) => result === true)) {
|
|
||||||
console.log(formData);
|
|
||||||
if (actions.value == "edit") {
|
|
||||||
onSubmitEdit();
|
|
||||||
} else onSubmit();
|
|
||||||
} else {
|
|
||||||
console.log("ไม่ผ่าน ");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// การเพิ่ม
|
|
||||||
function onSubmit() {
|
|
||||||
dialogConfirm(
|
|
||||||
$q,
|
|
||||||
async () => {
|
|
||||||
const data = {
|
|
||||||
command: formData.orderEmployment,
|
|
||||||
date: formData.dateEmployment,
|
|
||||||
};
|
|
||||||
await http
|
|
||||||
.post(config.API.employmentId(profileId.value), data)
|
|
||||||
.then(async () => {
|
|
||||||
await fetchList();
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
colsePopup();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
"ยืนยันการบันทึกข้อมูล",
|
|
||||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// การลบ
|
|
||||||
function cilckDelete(id: string) {
|
|
||||||
dialogRemove(
|
|
||||||
$q,
|
|
||||||
async () => {
|
|
||||||
await http
|
|
||||||
.delete(config.API.employmentId(id))
|
|
||||||
.then(async () => {
|
|
||||||
await fetchList();
|
|
||||||
success($q, "ลบข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
"ยืนยันการลบข้อมูล",
|
|
||||||
"ต้องการยืนยันการลบข้อมูลนี้หรือไม่ ?"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// การแก้ไข
|
|
||||||
const actions = ref<string>("");
|
|
||||||
const employmentRowId = ref<string>("");
|
|
||||||
function clickEdit(data: any, actionstype: string) {
|
|
||||||
modal.value = true;
|
|
||||||
actions.value = actionstype;
|
|
||||||
employmentRowId.value = data.id;
|
|
||||||
formData.dateEmployment = data.dataISO;
|
|
||||||
formData.orderEmployment = data.orderEmployment;
|
|
||||||
}
|
|
||||||
function onSubmitEdit() {
|
|
||||||
dialogConfirm(
|
|
||||||
$q,
|
|
||||||
async () => {
|
|
||||||
const data = {
|
|
||||||
command: formData.orderEmployment,
|
|
||||||
date: formData.dateEmployment,
|
|
||||||
};
|
|
||||||
await http
|
|
||||||
.put(config.API.employmentId(employmentRowId.value), data)
|
|
||||||
.then(async () => {
|
|
||||||
await fetchList();
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
colsePopup();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
"ยืนยันการบันทึกข้อมูล",
|
|
||||||
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// ประวัติการแก้ไข
|
|
||||||
const modalHistory = ref<boolean>(false);
|
|
||||||
const rowsHis = ref<EmploymentList[]>([]);
|
|
||||||
const columnsHis = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "dateEmployment",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่จ้าง",
|
|
||||||
sortable: false,
|
|
||||||
field: "dateEmployment",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "orderEmployment",
|
|
||||||
align: "left",
|
|
||||||
label: "คำสั่งจ้าง",
|
|
||||||
sortable: false,
|
|
||||||
field: "orderEmployment",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// name: "createdFullName",
|
|
||||||
// align: "left",
|
|
||||||
// label: "ผู้สร้าง",
|
|
||||||
// sortable: false,
|
|
||||||
// field: "createdFullName",
|
|
||||||
// headerStyle: "font-size: 14px",
|
|
||||||
// style: "font-size: 14px",
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "createdAt",
|
|
||||||
// align: "left",
|
|
||||||
// label: "วันที่สร้าง",
|
|
||||||
// sortable: false,
|
|
||||||
// field: "createdAt",
|
|
||||||
// headerStyle: "font-size: 14px",
|
|
||||||
// style: "font-size: 14px",
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
name: "lastUpdateFullName",
|
|
||||||
align: "left",
|
|
||||||
label: "ผู้ดำเนินการ",
|
|
||||||
sortable: false,
|
|
||||||
field: "lastUpdateFullName",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "lastUpdatedAt",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่แก้ไข",
|
|
||||||
sortable: false,
|
|
||||||
field: "lastUpdatedAt",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const visibleColumnsHis = ref<string[]>([
|
|
||||||
"dateEmployment",
|
|
||||||
"orderEmployment",
|
|
||||||
// "createdFullName",
|
|
||||||
// "createdAt",
|
|
||||||
"lastUpdateFullName",
|
|
||||||
"lastUpdatedAt",
|
|
||||||
]);
|
|
||||||
const filterHis = ref<string>();
|
|
||||||
async function openPopupHistory(id: string) {
|
|
||||||
modalHistory.value = true;
|
|
||||||
filterHis.value = "";
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.employmentHistoryId(id))
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
const list: EmploymentList[] = data.map((e: Respones) => ({
|
|
||||||
id: e.id,
|
|
||||||
orderEmployment: e.command,
|
|
||||||
dateEmployment: date2Thai(e.date),
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: date2Thai(e.createdAt),
|
|
||||||
lastUpdateFullName: e.lastUpdateFullName,
|
|
||||||
lastUpdatedAt: date2Thai(e.lastUpdatedAt),
|
|
||||||
}));
|
|
||||||
rowsHis.value = list;
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
messageError($q, err);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const pagination = ref({
|
|
||||||
descending: true,
|
|
||||||
page: 1,
|
|
||||||
rowsPerPage: 10,
|
|
||||||
});
|
|
||||||
const paginationHis = ref({
|
|
||||||
descending: true,
|
|
||||||
page: 1,
|
|
||||||
rowsPerPage: 10,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<q-icon
|
|
||||||
name="mdi-clipboard"
|
|
||||||
size="1.5em"
|
|
||||||
color="grey-5"
|
|
||||||
class="q-mr-md"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="text-bold text-subtitle2 col-12 row items-center">
|
|
||||||
ข้อมูลการจ้าง
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="q-gutter-sm q-mx-sm">
|
|
||||||
<q-btn
|
|
||||||
size="12px"
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="primary"
|
|
||||||
@click="onClickAdd"
|
|
||||||
icon="mdi-plus"
|
|
||||||
>
|
|
||||||
<q-tooltip>เพิ่มข้อมูลการจ้าง</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-space />
|
|
||||||
<div class="q-gutter-sm" style="display: flex">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="filter"
|
|
||||||
label="ค้นหา"
|
|
||||||
style="min-width: 150px"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="q-mt-sm">
|
|
||||||
<d-table
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
id="table"
|
|
||||||
ref="table"
|
|
||||||
:columns="columns"
|
|
||||||
:rows="rows"
|
|
||||||
:filter="filter"
|
|
||||||
row-key="dateEmployment"
|
|
||||||
:paging="true"
|
|
||||||
dense
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
v-model:pagination="pagination"
|
|
||||||
>
|
|
||||||
<template v-slot:header="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
||||||
<span class="text-weight-medium">{{ col.label }}</span>
|
|
||||||
</q-th>
|
|
||||||
<q-th auto-width></q-th>
|
|
||||||
<q-th auto-width></q-th>
|
|
||||||
<q-th auto-width></q-th>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
<template v-slot:body="props">
|
|
||||||
<q-tr :props="props" class="cursor-pointer" style="height: 40px">
|
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
||||||
<div>
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td>
|
|
||||||
<q-btn
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="primary"
|
|
||||||
icon="mdi-pencil"
|
|
||||||
@click="clickEdit(props.row, 'edit')"
|
|
||||||
>
|
|
||||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
|
||||||
<q-td>
|
|
||||||
<q-btn
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="red"
|
|
||||||
icon="mdi-delete"
|
|
||||||
@click="cilckDelete(props.row.id)"
|
|
||||||
>
|
|
||||||
<q-tooltip>ลบข้อมูล</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</q-td>
|
|
||||||
<q-td>
|
|
||||||
<q-btn
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="info"
|
|
||||||
@click="openPopupHistory(props.row.id)"
|
|
||||||
icon="mdi-history"
|
|
||||||
>
|
|
||||||
<q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</d-table>
|
|
||||||
</div>
|
|
||||||
</q-card>
|
|
||||||
|
|
||||||
<q-dialog v-model="modal">
|
|
||||||
<q-card style="width: 700px; max-width: 80vw">
|
|
||||||
<q-toolbar>
|
|
||||||
<q-toolbar-title class="text-subtitle1 text-weight-bold">
|
|
||||||
<span style="margin-right: 0" v-if="actions == 'edit'">
|
|
||||||
แก้ข้อมูลการจ้าง
|
|
||||||
</span>
|
|
||||||
<span style="margin-right: 0" v-else> เพิ่มข้อมูลการจ้าง </span>
|
|
||||||
</q-toolbar-title>
|
|
||||||
<q-btn
|
|
||||||
for="closeDialog"
|
|
||||||
icon="close"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
style="color: #eb0505; background-color: #ffdede"
|
|
||||||
@click="colsePopup"
|
|
||||||
/>
|
|
||||||
</q-toolbar>
|
|
||||||
<q-separator />
|
|
||||||
<form @submit.prevent="validateForm">
|
|
||||||
<q-card-section class="q-pt-none">
|
|
||||||
<div class="col-12 row q-pa-md">
|
|
||||||
<div
|
|
||||||
class="col-xs-12 col-sm-12 row q-col-gutter-x-md q-col-gutter-y-xs"
|
|
||||||
>
|
|
||||||
<div class="col-xs-12 col-sm-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="formData.dateEmployment"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
borderless
|
|
||||||
:enableTimePicker="false"
|
|
||||||
week-start="0"
|
|
||||||
>
|
|
||||||
<template #year="{ year }">
|
|
||||||
{{ year + 543 }}
|
|
||||||
</template>
|
|
||||||
<template #year-overlay-value="{ value }">
|
|
||||||
{{ parseInt(value + 543) }}
|
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
for="inputdateEmployment"
|
|
||||||
ref="dateEmploymentRef"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
class="full-width datepicker"
|
|
||||||
:model-value="
|
|
||||||
formData.dateEmployment != null
|
|
||||||
? date2Thai(formData.dateEmployment)
|
|
||||||
: null
|
|
||||||
"
|
|
||||||
label="วันที่จ้าง"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 col-sm-6">
|
|
||||||
<q-input
|
|
||||||
for="inputOrderEmployment"
|
|
||||||
ref="orderEmploymentRef"
|
|
||||||
dense
|
|
||||||
outlined
|
|
||||||
v-model="formData.orderEmployment"
|
|
||||||
label="คำสั่งจ้าง"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
|
|
||||||
lazy-rules
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row col-12">
|
|
||||||
<q-space />
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<q-card-actions align="right" class="bg-white text-teal">
|
|
||||||
<q-btn
|
|
||||||
for="ButtonOnSubmit"
|
|
||||||
id="onSubmit"
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="secondary"
|
|
||||||
icon="mdi-content-save-outline"
|
|
||||||
type="submit"
|
|
||||||
><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
|
|
||||||
>
|
|
||||||
</q-card-actions>
|
|
||||||
</form>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
|
|
||||||
<q-dialog v-model="modalHistory">
|
|
||||||
<q-card style="width: 800px; max-width: 80vw">
|
|
||||||
<q-toolbar>
|
|
||||||
<q-toolbar-title class="text-subtitle1 text-weight-bold">
|
|
||||||
<span style="margin-right: 0"> ประวัติข้อมูลการจ้าง </span>
|
|
||||||
</q-toolbar-title>
|
|
||||||
<q-btn
|
|
||||||
for="closeDialog"
|
|
||||||
icon="close"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
style="color: #eb0505; background-color: #ffdede"
|
|
||||||
@click="colsePopup"
|
|
||||||
/>
|
|
||||||
</q-toolbar>
|
|
||||||
<q-separator />
|
|
||||||
|
|
||||||
<q-card-section class="q-pt-none q-mt-sm">
|
|
||||||
<q-toolbar class="q-pa-none">
|
|
||||||
<q-space />
|
|
||||||
<div class="q-gutter-sm" style="display: flex">
|
|
||||||
<q-input
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
v-model="filterHis"
|
|
||||||
label="ค้นหา"
|
|
||||||
style="min-width: 150px"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<q-select
|
|
||||||
v-model="visibleColumnsHis"
|
|
||||||
multiple
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
options-dense
|
|
||||||
:display-value="$q.lang.table.columns"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
:options="columnsHis"
|
|
||||||
option-value="name"
|
|
||||||
options-cover
|
|
||||||
style="min-width: 150px"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-toolbar>
|
|
||||||
<d-table
|
|
||||||
flat
|
|
||||||
bordered
|
|
||||||
id="table"
|
|
||||||
ref="table"
|
|
||||||
:columns="columnsHis"
|
|
||||||
:rows="rowsHis"
|
|
||||||
:filter="filterHis"
|
|
||||||
row-key="dateEmployment"
|
|
||||||
:paging="true"
|
|
||||||
dense
|
|
||||||
:visible-columns="visibleColumnsHis"
|
|
||||||
v-model:pagination="paginationHis"
|
|
||||||
>
|
|
||||||
<template v-slot:header="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<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" class="cursor-pointer" style="height: 40px">
|
|
||||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
|
||||||
<div>
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</d-table>
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|
@ -1,909 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
import type {
|
|
||||||
Address,
|
|
||||||
DataOption,
|
|
||||||
zipCodeOption,
|
|
||||||
} from "@/modules/04_registry/components/profileType";
|
|
||||||
import { defaultAddress } from "@/modules/04_registry/components/profileType";
|
|
||||||
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
|
|
||||||
import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Address";
|
|
||||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Address";
|
|
||||||
import HistoryTable from "@/components/TableHistory.vue";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
import type { AddressOps } from "@/modules/04_registry/interface/index/Main";
|
|
||||||
import type { QTableProps } from "quasar";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
statusEdit: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
statusAdd: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const emit = defineEmits(["update:statusEdit"]);
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const $q = useQuasar();
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
success,
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
} = mixin;
|
|
||||||
const edit = ref<boolean>(false);
|
|
||||||
const addressData = ref<Address>(defaultAddress);
|
|
||||||
const myform = ref<any>();
|
|
||||||
const codep = ref<string>("");
|
|
||||||
const codec = ref<string>("");
|
|
||||||
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 Ops = ref<AddressOps>({
|
|
||||||
provinceOps: [],
|
|
||||||
districtOps: [],
|
|
||||||
districtCOps: [],
|
|
||||||
subdistrictOps: [],
|
|
||||||
subdistrictCOps: [],
|
|
||||||
});
|
|
||||||
const OpsFilter = ref<AddressOps>({
|
|
||||||
provinceOps: [],
|
|
||||||
districtOps: [],
|
|
||||||
districtCOps: [],
|
|
||||||
subdistrictOps: [],
|
|
||||||
subdistrictCOps: [],
|
|
||||||
});
|
|
||||||
const columnsHistory = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "registrationAddress",
|
|
||||||
align: "left",
|
|
||||||
label: "ที่อยู่ตามทะเบียนบ้าน",
|
|
||||||
sortable: true,
|
|
||||||
field: "registrationAddress",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "registrationProvince",
|
|
||||||
align: "left",
|
|
||||||
label: "จังหวัดตามทะเบียนบ้าน",
|
|
||||||
sortable: true,
|
|
||||||
field: "registrationProvince",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "registrationDistrict",
|
|
||||||
align: "left",
|
|
||||||
label: "เขต/อำเภอตามทะเบียนบ้าน",
|
|
||||||
sortable: true,
|
|
||||||
field: "registrationDistrict",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "registrationSubDistrict",
|
|
||||||
align: "left",
|
|
||||||
label: "แขวง/ตำบลตามทะเบียนบ้าน",
|
|
||||||
sortable: true,
|
|
||||||
field: "registrationSubDistrict",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "registrationZipCode",
|
|
||||||
align: "left",
|
|
||||||
label: "รหัสไปรษณีย์ตามทะเบียนบ้าน",
|
|
||||||
sortable: true,
|
|
||||||
field: "registrationZipCode",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "registrationSame",
|
|
||||||
align: "left",
|
|
||||||
label: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
|
|
||||||
sortable: true,
|
|
||||||
field: "registrationSame",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "currentAddress",
|
|
||||||
align: "left",
|
|
||||||
label: "ที่อยู่ปัจจุบัน",
|
|
||||||
sortable: true,
|
|
||||||
field: "currentAddress",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "currentProvince",
|
|
||||||
align: "left",
|
|
||||||
label: "จังหวัดปัจจุบัน",
|
|
||||||
sortable: true,
|
|
||||||
field: "currentProvince",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "currentDistrict",
|
|
||||||
align: "left",
|
|
||||||
label: "เขต/อำเภอปัจจุบัน",
|
|
||||||
sortable: true,
|
|
||||||
field: "currentDistrict",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "currentSubDistrict",
|
|
||||||
align: "left",
|
|
||||||
label: "แขวง/ตำบลปัจจุบัน",
|
|
||||||
sortable: true,
|
|
||||||
field: "currentSubDistrict",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "currentZipCode",
|
|
||||||
align: "left",
|
|
||||||
label: "รหัสไปรษณีย์ปัจจุบัน",
|
|
||||||
sortable: true,
|
|
||||||
field: "currentZipCode",
|
|
||||||
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[]>([
|
|
||||||
"currentAddress",
|
|
||||||
"currentDistrict",
|
|
||||||
"currentProvince",
|
|
||||||
"currentSubDistrict",
|
|
||||||
"currentZipCode",
|
|
||||||
"registrationAddress",
|
|
||||||
"registrationDistrict",
|
|
||||||
"registrationProvince",
|
|
||||||
"registrationSame",
|
|
||||||
"registrationSubDistrict",
|
|
||||||
"registrationZipCode",
|
|
||||||
"createdFullName",
|
|
||||||
"createdAt",
|
|
||||||
]);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await getNewData();
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
defaultAdd();
|
|
||||||
});
|
|
||||||
|
|
||||||
const statusAdd = () => props.statusAdd;
|
|
||||||
|
|
||||||
const defaultAdd = () => {
|
|
||||||
if (props.statusAdd) {
|
|
||||||
edit.value = props.statusAdd;
|
|
||||||
addressData.value = {
|
|
||||||
address: null,
|
|
||||||
provinceId: null,
|
|
||||||
districtId: null,
|
|
||||||
subdistrictId: null,
|
|
||||||
addressC: null,
|
|
||||||
provinceIdC: null,
|
|
||||||
districtIdC: null,
|
|
||||||
subdistrictIdC: null,
|
|
||||||
codep: null,
|
|
||||||
codec: null,
|
|
||||||
same: "0",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
|
||||||
switch (refData) {
|
|
||||||
case "provinceOps":
|
|
||||||
update(() => {
|
|
||||||
Ops.value.provinceOps = OpsFilter.value.provinceOps.filter(
|
|
||||||
(v: DataOption) => v.name.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "districtOps":
|
|
||||||
update(() => {
|
|
||||||
Ops.value.districtOps = OpsFilter.value.districtOps.filter(
|
|
||||||
(v: DataOption) => v.name.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "districtCOps":
|
|
||||||
update(() => {
|
|
||||||
Ops.value.districtCOps = OpsFilter.value.districtCOps.filter(
|
|
||||||
(v: DataOption) => v.name.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "subdistrictOps":
|
|
||||||
update(() => {
|
|
||||||
Ops.value.subdistrictOps = OpsFilter.value.subdistrictOps.filter(
|
|
||||||
(v: DataOption) => v.name.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "subdistrictCOps":
|
|
||||||
update(() => {
|
|
||||||
Ops.value.subdistrictCOps = OpsFilter.value.subdistrictCOps.filter(
|
|
||||||
(v: DataOption) => v.name.indexOf(val) > -1
|
|
||||||
);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
|
||||||
*/
|
|
||||||
const clickHistory = async () => {
|
|
||||||
modalHistory.value = true;
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileAdrsHisId(route.params.id.toString()))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rowsHistory.value = [];
|
|
||||||
data.map((e: RequestItemsHistoryObject) => {
|
|
||||||
rowsHistory.value.push({
|
|
||||||
currentAddress: e.currentAddress,
|
|
||||||
currentDistrict: e.currentDistrict,
|
|
||||||
currentProvince: e.currentProvince,
|
|
||||||
currentSubDistrict: e.currentSubDistrict,
|
|
||||||
currentZipCode: e.currentZipCode,
|
|
||||||
registrationSame: e.registrationSame,
|
|
||||||
registrationAddress: e.registrationAddress,
|
|
||||||
registrationDistrict: e.registrationDistrict,
|
|
||||||
registrationProvince: e.registrationProvince,
|
|
||||||
registrationSubDistrict: e.registrationSubDistrict,
|
|
||||||
registrationZipCode: e.registrationZipCode,
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const refreshData = async () => {
|
|
||||||
myform.value.reset();
|
|
||||||
await getNewData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const getNewData = async () => {
|
|
||||||
await fetchData();
|
|
||||||
await fetchProvince();
|
|
||||||
await fetchDistrict(addressData.value.provinceId, "1");
|
|
||||||
await fetchDistrict(addressData.value.provinceIdC, "2");
|
|
||||||
await fetchSubDistrict(addressData.value.districtId, "1");
|
|
||||||
await fetchSubDistrict(addressData.value.districtIdC, "2");
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (route.params.id) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileAdrsId(route.params.id.toString()))
|
|
||||||
.then((res) => {
|
|
||||||
const data: ResponseObject = res.data.result;
|
|
||||||
|
|
||||||
addressData.value.address = data.registrationAddress;
|
|
||||||
addressData.value.addressC = data.currentAddress;
|
|
||||||
addressData.value.districtId =
|
|
||||||
data.registrationDistrictId !== "00000000-0000-0000-0000-000000000000"
|
|
||||||
? data.registrationDistrictId
|
|
||||||
: "";
|
|
||||||
addressData.value.districtIdC =
|
|
||||||
data.currentDistrictId !== "00000000-0000-0000-0000-000000000000"
|
|
||||||
? data.currentDistrictId
|
|
||||||
: "";
|
|
||||||
addressData.value.provinceId =
|
|
||||||
data.registrationProvinceId !== "00000000-0000-0000-0000-000000000000"
|
|
||||||
? data.registrationProvinceId
|
|
||||||
: "";
|
|
||||||
addressData.value.provinceIdC =
|
|
||||||
data.currentProvinceId !== "00000000-0000-0000-0000-000000000000"
|
|
||||||
? data.currentProvinceId
|
|
||||||
: "";
|
|
||||||
addressData.value.subdistrictId =
|
|
||||||
data.registrationSubDistrictId !==
|
|
||||||
"00000000-0000-0000-0000-000000000000"
|
|
||||||
? data.registrationSubDistrictId
|
|
||||||
: "";
|
|
||||||
addressData.value.subdistrictIdC =
|
|
||||||
data.currentSubDistrictId !== "00000000-0000-0000-0000-000000000000"
|
|
||||||
? data.currentSubDistrictId
|
|
||||||
: "";
|
|
||||||
addressData.value.same = data.registrationSame ? "1" : "0";
|
|
||||||
addressData.value.codec = data.currentZipCode;
|
|
||||||
addressData.value.codep = data.registrationZipCode;
|
|
||||||
})
|
|
||||||
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const editData = async () => {
|
|
||||||
const body: ResponseObject = {
|
|
||||||
registrationSame: addressData.value.same == "1",
|
|
||||||
registrationAddress: addressData.value.address,
|
|
||||||
registrationSubDistrictId: addressData.value.subdistrictId,
|
|
||||||
registrationDistrictId: addressData.value.districtId,
|
|
||||||
registrationProvinceId: addressData.value.provinceId,
|
|
||||||
registrationZipCode: codep.value,
|
|
||||||
currentAddress:
|
|
||||||
addressData.value.same == "1"
|
|
||||||
? addressData.value.address
|
|
||||||
: addressData.value.addressC,
|
|
||||||
currentSubDistrictId:
|
|
||||||
addressData.value.same == "1"
|
|
||||||
? addressData.value.subdistrictId
|
|
||||||
: addressData.value.subdistrictIdC,
|
|
||||||
currentDistrictId:
|
|
||||||
addressData.value.same == "1"
|
|
||||||
? addressData.value.districtId
|
|
||||||
: addressData.value.districtIdC,
|
|
||||||
currentProvinceId:
|
|
||||||
addressData.value.same == "1"
|
|
||||||
? addressData.value.provinceId
|
|
||||||
: addressData.value.provinceIdC,
|
|
||||||
currentZipCode: addressData.value.same == "1" ? codep.value : codec.value,
|
|
||||||
createdAt: new Date(),
|
|
||||||
createdFullName: "-",
|
|
||||||
};
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileAdrsId(route.params.id.toString()), body)
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
edit.value = false;
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
await getNewData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const addData = async () => {
|
|
||||||
// showLoader();
|
|
||||||
// await http
|
|
||||||
// .put(config.API.profileInforId(route.params.id.toString()), body)
|
|
||||||
// .then((res) => {
|
|
||||||
// success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
// })
|
|
||||||
// .catch((e) => {
|
|
||||||
// messageError($q, e);
|
|
||||||
// })
|
|
||||||
// .finally(async () => {
|
|
||||||
// edit.value = false;
|
|
||||||
// emit("update:statusEdit", false);
|
|
||||||
// await fetchData();
|
|
||||||
// await changeBirth(informaData.value.birthDate ?? new Date());
|
|
||||||
// });
|
|
||||||
};
|
|
||||||
const saveData = async () => {
|
|
||||||
dialogConfirm($q, () => Datasave());
|
|
||||||
};
|
|
||||||
const Datasave = async () => {
|
|
||||||
await myform.value.validate().then(async (success: boolean) => {
|
|
||||||
if (success) {
|
|
||||||
if (props.statusAdd) {
|
|
||||||
await addData();
|
|
||||||
} else {
|
|
||||||
await editData();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectProvince = async (e: string | null, name: string) => {
|
|
||||||
if (e != null) {
|
|
||||||
if (name == "1") {
|
|
||||||
addressData.value.districtId = "";
|
|
||||||
addressData.value.subdistrictId = "";
|
|
||||||
addressData.value.codep = "";
|
|
||||||
} else {
|
|
||||||
addressData.value.districtIdC = "";
|
|
||||||
addressData.value.subdistrictIdC = "";
|
|
||||||
addressData.value.codec = "";
|
|
||||||
}
|
|
||||||
myform.value.resetValidation();
|
|
||||||
await fetchDistrict(e, name);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectDistrict = async (e: string | null, name: string) => {
|
|
||||||
if (e != null) {
|
|
||||||
if (name == "1") {
|
|
||||||
addressData.value.subdistrictId = "";
|
|
||||||
addressData.value.codep = "";
|
|
||||||
} else {
|
|
||||||
addressData.value.subdistrictIdC = "";
|
|
||||||
addressData.value.codec = "";
|
|
||||||
}
|
|
||||||
myform.value.resetValidation();
|
|
||||||
await fetchSubDistrict(e, name);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectSubDistrict = (e: string | null, name: string) => {
|
|
||||||
if (e != null) {
|
|
||||||
if (name == "1") {
|
|
||||||
const findcode = Ops.value.subdistrictOps.filter((r) => r.id == e);
|
|
||||||
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
|
||||||
addressData.value.codep = namecode;
|
|
||||||
} else {
|
|
||||||
const findcode = Ops.value.subdistrictCOps.filter((r) => r.id == e);
|
|
||||||
const namecode = findcode.length > 0 ? findcode[0].zipCode : "";
|
|
||||||
addressData.value.codec = namecode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchProvince = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.province)
|
|
||||||
.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.provinceOps = option;
|
|
||||||
OpsFilter.value.provinceOps = option;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchDistrict = async (id: string | null, position: string) => {
|
|
||||||
if (id != null && id != "") {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.listDistrict(id))
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
let option: DataOption[] = [];
|
|
||||||
data.map((r: any) => {
|
|
||||||
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
||||||
});
|
|
||||||
if (position == "1") {
|
|
||||||
Ops.value.districtOps = option;
|
|
||||||
OpsFilter.value.districtOps = option;
|
|
||||||
} else {
|
|
||||||
Ops.value.districtCOps = option;
|
|
||||||
OpsFilter.value.districtCOps = option;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchSubDistrict = async (id: string | null, position: string) => {
|
|
||||||
if (id != null && id != "") {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.listSubDistrict(id))
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
let option: zipCodeOption[] = [];
|
|
||||||
data.map((r: any) => {
|
|
||||||
option.push({
|
|
||||||
id: r.id.toString(),
|
|
||||||
name: r.name.toString(),
|
|
||||||
zipCode: r.zipCode.toString(),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
if (position == "1") {
|
|
||||||
Ops.value.subdistrictOps = option;
|
|
||||||
OpsFilter.value.subdistrictOps = option;
|
|
||||||
} else {
|
|
||||||
Ops.value.subdistrictCOps = option;
|
|
||||||
OpsFilter.value.subdistrictCOps = option;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeBtn = async () => {
|
|
||||||
if (edit.value == true) {
|
|
||||||
if (props.statusEdit === true) {
|
|
||||||
edit.value = false;
|
|
||||||
} else {
|
|
||||||
emit("update:statusEdit", true);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getClass = (val: boolean) => {
|
|
||||||
return {
|
|
||||||
"full-width inputgreen cursor-pointer": val,
|
|
||||||
"full-width cursor-pointer": !val,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
|
|
||||||
<HeaderTop
|
|
||||||
v-model:edit="edit"
|
|
||||||
header="ข้อมูลที่อยู่"
|
|
||||||
icon="mdi-map-marker"
|
|
||||||
:save="saveData"
|
|
||||||
:history="!statusAdd()"
|
|
||||||
:changeBtn="changeBtn"
|
|
||||||
:disable="statusEdit"
|
|
||||||
:cancel="refreshData"
|
|
||||||
:historyClick="clickHistory"
|
|
||||||
:addEmployee="statusAdd()"
|
|
||||||
/>
|
|
||||||
<q-form ref="myform">
|
|
||||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
hide-bottom-space
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
type="textarea"
|
|
||||||
autogrow
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="addressData.address"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ตามทะเบียนบ้าน'}`]"
|
|
||||||
:label="`${'ที่อยู่ตามทะเบียนบ้าน'}`"
|
|
||||||
/>
|
|
||||||
</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="addressData.provinceId"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="Ops.provinceOps"
|
|
||||||
option-value="id"
|
|
||||||
:label="`${'จังหวัด'}`"
|
|
||||||
@update:model-value="(value:string) => selectProvince(value, '1')"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue:string,
|
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
|
|
||||||
) "
|
|
||||||
/>
|
|
||||||
</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="addressData.districtId"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="Ops.districtOps"
|
|
||||||
option-value="id"
|
|
||||||
:label="`${'เขต / อำเภอ'}`"
|
|
||||||
@update:model-value="(value:string) => selectDistrict(value, '1')"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue:string,
|
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'districtOps'
|
|
||||||
) "
|
|
||||||
/>
|
|
||||||
</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="addressData.subdistrictId"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="Ops.subdistrictOps"
|
|
||||||
option-value="id"
|
|
||||||
:label="`${'แขวง / ตำบล '}`"
|
|
||||||
@update:model-value="(value:string) => selectSubDistrict(value, '1')"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue:string,
|
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictOps'
|
|
||||||
) "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
hide-bottom-space
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
readonly
|
|
||||||
borderless
|
|
||||||
v-model="addressData.codep"
|
|
||||||
:style="!edit ? '' : 'padding:0 12px;'"
|
|
||||||
:label="`${'รหัสไปรษณีย์'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 q-pt-lg"><q-separator /></div>
|
|
||||||
<div class="col-xs-12 q-gutter-sm items-center flex q-my-sm">
|
|
||||||
<label class="text-bold"
|
|
||||||
>ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน</label
|
|
||||||
>
|
|
||||||
<q-radio
|
|
||||||
v-model="addressData.same"
|
|
||||||
checked-icon="task_alt"
|
|
||||||
unchecked-icon="panorama_fish_eye"
|
|
||||||
val="1"
|
|
||||||
label="ใช่"
|
|
||||||
dense
|
|
||||||
:disable="!edit"
|
|
||||||
/>
|
|
||||||
<q-radio
|
|
||||||
v-model="addressData.same"
|
|
||||||
checked-icon="task_alt"
|
|
||||||
unchecked-icon="panorama_fish_eye"
|
|
||||||
val="0"
|
|
||||||
label="ไม่"
|
|
||||||
dense
|
|
||||||
:disable="!edit"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12" v-if="addressData.same == '0'">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
hide-bottom-space
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
type="textarea"
|
|
||||||
autogrow
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="addressData.addressC"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณากรอก ที่อยู่ปัจจุบัน'}`]"
|
|
||||||
:label="`${'ที่อยู่ปัจจุบัน'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
|
|
||||||
<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="addressData.provinceIdC"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="Ops.provinceOps"
|
|
||||||
option-value="id"
|
|
||||||
:label="`${'จังหวัด'}`"
|
|
||||||
@update:model-value="(value:string) => selectProvince(value, '2')"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue:string,
|
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'provinceOps'
|
|
||||||
) "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
|
|
||||||
<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="addressData.districtIdC"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="Ops.districtCOps"
|
|
||||||
option-value="id"
|
|
||||||
:label="`${'เขต / อำเภอ'}`"
|
|
||||||
@update:model-value="(value:string) => selectDistrict(value, '2')"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue:string,
|
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'districtCOps'
|
|
||||||
) "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
|
|
||||||
<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="addressData.subdistrictIdC"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="Ops.subdistrictCOps"
|
|
||||||
option-value="id"
|
|
||||||
:label="`${'แขวง / ตำบล '}`"
|
|
||||||
@update:model-value="(value:string) => selectSubDistrict(value, '2')"
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
@filter="(inputValue:string,
|
|
||||||
doneFn:Function) => filterSelector(inputValue, doneFn,'subdistrictCOps'
|
|
||||||
) "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3" v-if="addressData.same == '0'">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
hide-bottom-space
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
readonly
|
|
||||||
borderless
|
|
||||||
v-model="addressData.codec"
|
|
||||||
:style="!edit ? '' : 'padding:0 12px;'"
|
|
||||||
:label="`${'รหัสไปรษณีย์'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
<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 == 'registrationSame'"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ col.value ? "ใช่" : "ไม่" }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</HistoryTable>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,837 +0,0 @@
|
||||||
<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 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/Certificate";
|
|
||||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Certificate";
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
profileType: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const store = useProfileDataStore();
|
|
||||||
const { profileData, changeProfileColumns } = store;
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
success,
|
|
||||||
dateToISO,
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
} = mixin;
|
|
||||||
const route = useRoute();
|
|
||||||
const id = ref<string>("");
|
|
||||||
const certificateNo = ref<string>();
|
|
||||||
const issuer = ref<string>();
|
|
||||||
const issueDate = ref<Date>(new Date());
|
|
||||||
const expireDate = ref<Date>(new Date());
|
|
||||||
const certificateType = 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 ? route.params.id.toString() : ""
|
|
||||||
);
|
|
||||||
const rows = ref<RequestItemsObject[]>([]);
|
|
||||||
const filter = ref<string>(""); //search data table
|
|
||||||
const visibleColumns = ref<String[]>([]);
|
|
||||||
profileData.certicate.columns.length == 0
|
|
||||||
? (visibleColumns.value = [
|
|
||||||
"certificateType",
|
|
||||||
"certificateNo",
|
|
||||||
"issuer",
|
|
||||||
"issueDate",
|
|
||||||
"expireDate",
|
|
||||||
])
|
|
||||||
: (visibleColumns.value = profileData.certicate.columns);
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "certificateType",
|
|
||||||
align: "left",
|
|
||||||
label: "ชื่อใบอนุญาต",
|
|
||||||
sortable: true,
|
|
||||||
field: "certificateType",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "issuer",
|
|
||||||
align: "left",
|
|
||||||
label: "หน่วยงานผู้ออกใบอนุญาต",
|
|
||||||
sortable: true,
|
|
||||||
field: "issuer",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "certificateNo",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขที่ใบอนุญาต",
|
|
||||||
sortable: true,
|
|
||||||
field: "certificateNo",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "issueDate",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่ออกใบอนุญาต",
|
|
||||||
sortable: true,
|
|
||||||
field: "issueDate",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "expireDate",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่หมดอายุ",
|
|
||||||
sortable: true,
|
|
||||||
field: "expireDate",
|
|
||||||
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: "certificateType",
|
|
||||||
align: "left",
|
|
||||||
label: "ชื่อใบอนุญาต",
|
|
||||||
sortable: true,
|
|
||||||
field: "certificateType",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "issuer",
|
|
||||||
align: "left",
|
|
||||||
label: "หน่วยงานผู้ออกใบอนุญาต",
|
|
||||||
sortable: true,
|
|
||||||
field: "issuer",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "certificateNo",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขที่ใบอนุญาต",
|
|
||||||
sortable: true,
|
|
||||||
field: "certificateNo",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "issueDate",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่ออกใบอนุญาต",
|
|
||||||
sortable: true,
|
|
||||||
field: "issueDate",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "expireDate",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่หมดอายุ",
|
|
||||||
sortable: true,
|
|
||||||
field: "expireDate",
|
|
||||||
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[]>([
|
|
||||||
"certificateType",
|
|
||||||
"certificateNo",
|
|
||||||
"issuer",
|
|
||||||
"issueDate",
|
|
||||||
"expireDate",
|
|
||||||
"createdFullName",
|
|
||||||
"createdAt",
|
|
||||||
]);
|
|
||||||
|
|
||||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
|
||||||
await changeProfileColumns("certicate", count);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileCertId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rows.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rows.value.push({
|
|
||||||
id: e.id,
|
|
||||||
certificateNo: e.certificateNo,
|
|
||||||
issuer: e.issuer,
|
|
||||||
issueDate: new Date(e.issueDate),
|
|
||||||
expireDate: new Date(e.expireDate),
|
|
||||||
certificateType: e.certificateType,
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดดูข้อมูลก่อนหน้า
|
|
||||||
*/
|
|
||||||
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];
|
|
||||||
certificateNo.value = row.certificateNo;
|
|
||||||
issuer.value = row.issuer;
|
|
||||||
issueDate.value = row.issueDate;
|
|
||||||
expireDate.value = row.expireDate;
|
|
||||||
certificateType.value = row.certificateType;
|
|
||||||
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 = () => {
|
|
||||||
dialogConfirm($q, () => SaveData());
|
|
||||||
};
|
|
||||||
const SaveData = async () => {
|
|
||||||
await myForm.value?.validate().then(async (result: boolean) => {
|
|
||||||
if (result) {
|
|
||||||
if (modalEdit.value) {
|
|
||||||
await editData();
|
|
||||||
} else {
|
|
||||||
await saveData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกเพิ่มข้อมูล
|
|
||||||
*/
|
|
||||||
const saveData = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profileCertId(profileId.value), {
|
|
||||||
id: id.value,
|
|
||||||
certificateNo: certificateNo.value,
|
|
||||||
issuer: issuer.value,
|
|
||||||
issueDate: dateToISO(issueDate.value),
|
|
||||||
expireDate: dateToISO(expireDate.value),
|
|
||||||
certificateType: certificateType.value,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
const editData = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileCertId(id.value), {
|
|
||||||
id: id.value,
|
|
||||||
certificateNo: certificateNo.value,
|
|
||||||
issuer: issuer.value,
|
|
||||||
issueDate: dateToISO(issueDate.value),
|
|
||||||
expireDate: dateToISO(expireDate.value),
|
|
||||||
certificateType: certificateType.value,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ลบลบข้อมูล
|
|
||||||
*/
|
|
||||||
const clickDelete = async () => {
|
|
||||||
$q.dialog({
|
|
||||||
title: `ลบข้อมูล`,
|
|
||||||
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
|
||||||
cancel: "ยกเลิก",
|
|
||||||
ok: "ยืนยัน",
|
|
||||||
persistent: true,
|
|
||||||
})
|
|
||||||
.onOk(async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.delete(config.API.profileCertId(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;
|
|
||||||
certificateNo.value = props.row.certificateNo;
|
|
||||||
issuer.value = props.row.issuer;
|
|
||||||
issueDate.value = props.row.issueDate;
|
|
||||||
expireDate.value = props.row.expireDate;
|
|
||||||
certificateType.value = props.row.certificateType;
|
|
||||||
id.value = props.row.id;
|
|
||||||
await checkRowPage();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดปุ่มเพิ่มบน table
|
|
||||||
*/
|
|
||||||
const addData = () => {
|
|
||||||
modalEdit.value = false;
|
|
||||||
modal.value = true;
|
|
||||||
edit.value = true;
|
|
||||||
certificateNo.value = "";
|
|
||||||
issuer.value = "";
|
|
||||||
issueDate.value = new Date();
|
|
||||||
expireDate.value = new Date();
|
|
||||||
certificateType.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) => {
|
|
||||||
tittleHistory.value =
|
|
||||||
props.profileType == "employee"
|
|
||||||
? "ประวัติแก้ไขใบอนุญาตของลูกจ้าง"
|
|
||||||
: "ประวัติแก้ไขใบอนุญาตประกอบอาชีพ";
|
|
||||||
modalHistory.value = true;
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileCertHisId(row.id))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rowsHistory.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rowsHistory.value.push({
|
|
||||||
id: e.id,
|
|
||||||
certificateNo: e.certificateNo,
|
|
||||||
issuer: e.issuer,
|
|
||||||
issueDate: new Date(e.issueDate),
|
|
||||||
expireDate: new Date(e.expireDate),
|
|
||||||
certificateType: e.certificateType,
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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>
|
|
||||||
|
|
||||||
<!-- card ใบอนุญาตประกอบอาชีพ -->
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
|
|
||||||
<q-form ref="myForm">
|
|
||||||
<ProfileTable
|
|
||||||
:rows="rows"
|
|
||||||
:columns="columns"
|
|
||||||
:filter="filter"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
v-model:inputfilter="filter"
|
|
||||||
v-model:inputvisible="visibleColumns"
|
|
||||||
:add="clickAdd"
|
|
||||||
:name="
|
|
||||||
profileType == 'employee'
|
|
||||||
? 'ใบอนุญาตของลูกจ้าง'
|
|
||||||
: 'ใบอนุญาตประกอบอาชีพ'
|
|
||||||
"
|
|
||||||
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="selectData(props)"
|
|
||||||
class="cursor-pointer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="col.name == 'issueDate' || col.name == 'expireDate'"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
color="info"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
size="14px"
|
|
||||||
icon="mdi-history"
|
|
||||||
@click="clickHistory(props.row)"
|
|
||||||
/>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</ProfileTable>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
<!-- popup Edit window-->
|
|
||||||
<q-dialog v-model="modal" persistent>
|
|
||||||
<q-card style="width: 600px">
|
|
||||||
<q-form ref="myForm">
|
|
||||||
<DialogHeader
|
|
||||||
:tittle="
|
|
||||||
profileType == 'employee'
|
|
||||||
? 'ใบอนุญาตของลูกจ้าง'
|
|
||||||
: 'ใบอนุญาตประกอบอาชีพ'
|
|
||||||
"
|
|
||||||
:close="clickClose"
|
|
||||||
/>
|
|
||||||
<q-separator />
|
|
||||||
<q-card-section class="q-p-sm">
|
|
||||||
<div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="certificateType"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ชื่อใบอนุญาต'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="issuer"
|
|
||||||
:rules="[
|
|
||||||
(val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
|
|
||||||
]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'หน่วยงานผู้ออกใบอนุญาต'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="certificateNo"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'เลขที่ใบอนุญาต'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
:readonly="!edit"
|
|
||||||
v-model="issueDate"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="date2Thai(issueDate)"
|
|
||||||
: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 class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="expireDate"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
:min-date="minDate"
|
|
||||||
:readonly="!edit"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="date2Thai(expireDate)"
|
|
||||||
: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>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<DialogFooter
|
|
||||||
:cancel="clickCancel"
|
|
||||||
:edit="clickEdit"
|
|
||||||
:save="clickSave"
|
|
||||||
: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"
|
|
||||||
>
|
|
||||||
<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 == 'expireDate' ||
|
|
||||||
col.name == 'issueDate' ||
|
|
||||||
col.name == 'createdAt'
|
|
||||||
"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</HistoryTable>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.modalfix {
|
|
||||||
position: fixed !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,762 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { onMounted, ref, watch } from "vue";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import type { Goverment } from "@/modules/04_registry/components/profileType";
|
|
||||||
import { defaultGoverment } from "@/modules/04_registry/components/profileType";
|
|
||||||
import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
import HistoryTable from "@/components/TableHistory.vue";
|
|
||||||
import type { RequestItemsHistoryObject } from "@/modules/04_registry/interface/request/Government";
|
|
||||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Government";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
import { useProfileDataStore } from "@/modules/04_registry/store";
|
|
||||||
import { storeToRefs } from "pinia";
|
|
||||||
import type { QTableProps } from "quasar";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
statusEdit: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
profileType: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
employeeClass: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const emit = defineEmits(["update:statusEdit"]);
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const $q = useQuasar();
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
|
||||||
mixin;
|
|
||||||
const profileStore = useProfileDataStore();
|
|
||||||
const { birthDate, retireText } = storeToRefs(profileStore);
|
|
||||||
const edit = ref<boolean>(false);
|
|
||||||
const govermentData = ref<Goverment>(defaultGoverment);
|
|
||||||
const myform = ref<any>();
|
|
||||||
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 columnsHistory = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "oc",
|
|
||||||
align: "left",
|
|
||||||
label: "สังกัด",
|
|
||||||
sortable: true,
|
|
||||||
field: "oc",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "posNo",
|
|
||||||
align: "left",
|
|
||||||
label: "ตำแหน่งเลขที่",
|
|
||||||
sortable: true,
|
|
||||||
field: "posNo",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "positionLine",
|
|
||||||
align: "left",
|
|
||||||
label: "สายงาน",
|
|
||||||
sortable: true,
|
|
||||||
field: "positionLine",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "positionType",
|
|
||||||
align: "left",
|
|
||||||
label: "ประเภท",
|
|
||||||
sortable: true,
|
|
||||||
field: "positionType",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "positionLevel",
|
|
||||||
align: "left",
|
|
||||||
label: "ระดับ",
|
|
||||||
sortable: true,
|
|
||||||
field: "positionLevel",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "positionExecutive",
|
|
||||||
align: "left",
|
|
||||||
label: "ตำแหน่งทางการบริหาร",
|
|
||||||
sortable: true,
|
|
||||||
field: "positionExecutive",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
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: "วันที่บรรจุ",
|
|
||||||
sortable: true,
|
|
||||||
field: "dateAppoint",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "dateStart",
|
|
||||||
align: "left",
|
|
||||||
label: "เริ่มปฎิบัติราชการ",
|
|
||||||
sortable: true,
|
|
||||||
field: "dateStart",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "retireDate",
|
|
||||||
align: "left",
|
|
||||||
label: "วันเกษียณอายุ",
|
|
||||||
sortable: true,
|
|
||||||
field: "retireDate",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "govAge",
|
|
||||||
align: "left",
|
|
||||||
label: "อายุราชการ",
|
|
||||||
sortable: true,
|
|
||||||
field: "govAge",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "govAgeAbsent",
|
|
||||||
align: "left",
|
|
||||||
label: "ขาดราชการ",
|
|
||||||
sortable: true,
|
|
||||||
field: "govAgeAbsent",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "govAgePlus",
|
|
||||||
align: "left",
|
|
||||||
label: "อายุราชการเกื้อกูล",
|
|
||||||
sortable: true,
|
|
||||||
field: "govAgePlus",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "reasonSameDate",
|
|
||||||
align: "left",
|
|
||||||
label: "เหตุผลกรณีไม่ตรงวัน",
|
|
||||||
sortable: true,
|
|
||||||
field: "reasonSameDate",
|
|
||||||
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[]>([
|
|
||||||
"oc",
|
|
||||||
"position",
|
|
||||||
"positionPathSide",
|
|
||||||
"posNo",
|
|
||||||
"positionLine",
|
|
||||||
"positionType",
|
|
||||||
"positionLevel",
|
|
||||||
"positionexecutive",
|
|
||||||
"positionExecutiveSide",
|
|
||||||
"dateAppoint",
|
|
||||||
"dateStart",
|
|
||||||
"retireDate",
|
|
||||||
"govAge",
|
|
||||||
"govAgeAbsent",
|
|
||||||
"govAgePlus",
|
|
||||||
"reasonSameDate",
|
|
||||||
"createdFullName",
|
|
||||||
"createdAt",
|
|
||||||
]);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchData();
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(birthDate, async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(retireText, async () => {
|
|
||||||
govermentData.value.retireDate = retireText.value;
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
showLoader();
|
|
||||||
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.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.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;
|
|
||||||
govermentData.value.absent = data.govAgeAbsent;
|
|
||||||
govermentData.value.age = data.govAgePlus;
|
|
||||||
govermentData.value.ageAll = data.govAge;
|
|
||||||
govermentData.value.reasonSameDate = data.reasonSameDate;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const refreshData = async () => {
|
|
||||||
myform.value.reset();
|
|
||||||
await fetchData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const editData = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.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, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
edit.value = false;
|
|
||||||
await refreshData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveData = async () => {
|
|
||||||
await myform.value.validate().then(async (success: boolean) => {
|
|
||||||
if (success) {
|
|
||||||
await editData();
|
|
||||||
} else {
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDate = async (modelData: Date) => {
|
|
||||||
govermentData.value.containDate = modelData;
|
|
||||||
await fetchCalAgeGov(modelData);
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchCalAgeGov = async (date: Date) => {
|
|
||||||
showLoader();
|
|
||||||
const body = {
|
|
||||||
dateAppoint: date,
|
|
||||||
};
|
|
||||||
await http
|
|
||||||
.post(config.API.profileCalGovId(route.params.id.toString()), body)
|
|
||||||
.then((res) => {
|
|
||||||
const result = res.data.result;
|
|
||||||
govermentData.value.ageAll = result;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
|
||||||
*/
|
|
||||||
const clickHistory = async () => {
|
|
||||||
modalHistory.value = true;
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileGovHisId(route.params.id.toString()))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rowsHistory.value = [];
|
|
||||||
data.map((e: RequestItemsHistoryObject) => {
|
|
||||||
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,
|
|
||||||
govAge: e.govAge,
|
|
||||||
govAgeAbsent: e.govAgeAbsent,
|
|
||||||
govAgePlus: e.govAgePlus,
|
|
||||||
reasonSameDate: e.reasonSameDate,
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeBtn = async () => {
|
|
||||||
if (edit.value == true) {
|
|
||||||
if (props.statusEdit === true) {
|
|
||||||
edit.value = false;
|
|
||||||
} else {
|
|
||||||
emit("update:statusEdit", true);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getClass = (val: boolean) => {
|
|
||||||
return {
|
|
||||||
"full-width inputgreen cursor-pointer": val,
|
|
||||||
"full-width cursor-pointer": !val,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
|
|
||||||
<HeaderTop
|
|
||||||
v-model:edit="edit"
|
|
||||||
header="ข้อมูลราชการ"
|
|
||||||
icon="mdi-account-tie"
|
|
||||||
:save="saveData"
|
|
||||||
:history="true"
|
|
||||||
:changeBtn="changeBtn"
|
|
||||||
:disable="statusEdit"
|
|
||||||
:cancel="refreshData"
|
|
||||||
:historyClick="clickHistory"
|
|
||||||
/>
|
|
||||||
<q-form ref="myform" class="col-12">
|
|
||||||
<div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(false)"
|
|
||||||
hide-bottom-space
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
readonly
|
|
||||||
borderless
|
|
||||||
:model-value="govermentData.ocId"
|
|
||||||
:label="`${'สังกัด'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
|
|
||||||
<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)"
|
|
||||||
hide-bottom-space
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
readonly
|
|
||||||
borderless
|
|
||||||
:model-value="govermentData.positionId"
|
|
||||||
: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.positionPathSide"
|
|
||||||
: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.positionLine"
|
|
||||||
: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.positionType"
|
|
||||||
:label="`${'ประเภท'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(false)"
|
|
||||||
hide-bottom-space
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
readonly
|
|
||||||
borderless
|
|
||||||
:model-value="govermentData.positionLevel"
|
|
||||||
: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.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
|
|
||||||
v-model="govermentData.containDate"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
week-start="0"
|
|
||||||
:max-date="new Date()"
|
|
||||||
:disabled="!edit"
|
|
||||||
@update:model-value="handleDate"
|
|
||||||
>
|
|
||||||
<template #year="{ year }">
|
|
||||||
{{ year + 543 }}
|
|
||||||
</template>
|
|
||||||
<template #year-overlay-value="{ value }">
|
|
||||||
{{ parseInt(value + 543) }}
|
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
hide-bottom-space
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="date2Thai(new Date(govermentData.containDate))"
|
|
||||||
:rules="[
|
|
||||||
(val) =>
|
|
||||||
!!val ||
|
|
||||||
`${
|
|
||||||
profileType == 'officer'
|
|
||||||
? 'กรุณาเลือกวันที่บรรจุ'
|
|
||||||
: 'กรุณาเลือกวันที่แต่งตั้ง'
|
|
||||||
}`,
|
|
||||||
]"
|
|
||||||
:label="`${
|
|
||||||
profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
|
|
||||||
}`"
|
|
||||||
>
|
|
||||||
<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 class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<datepicker
|
|
||||||
v-model="govermentData.workDate"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
week-start="0"
|
|
||||||
:max-date="new Date()"
|
|
||||||
:disabled="!edit"
|
|
||||||
>
|
|
||||||
<template #year="{ year }">
|
|
||||||
{{ year + 543 }}
|
|
||||||
</template>
|
|
||||||
<template #year-overlay-value="{ value }">
|
|
||||||
{{ parseInt(value + 543) }}
|
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
hide-bottom-space
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="date2Thai(new Date(govermentData.workDate))"
|
|
||||||
:rules="[
|
|
||||||
(val) =>
|
|
||||||
!!val ||
|
|
||||||
`${
|
|
||||||
profileType == 'officer'
|
|
||||||
? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
|
|
||||||
: 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
|
|
||||||
}`,
|
|
||||||
]"
|
|
||||||
:label="`${
|
|
||||||
profileType == 'officer'
|
|
||||||
? 'เริ่มปฎิบัติราชการ'
|
|
||||||
: 'วันที่จ้างและแต่งตั้งมีผล'
|
|
||||||
}`"
|
|
||||||
>
|
|
||||||
<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 class="col-xs-6 col-sm-6 col-md-6" v-if="profileType == 'officer'">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
hide-bottom-space
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
stack-label
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="govermentData.reasonSameDate"
|
|
||||||
: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.retireDate"
|
|
||||||
: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.ageAll"
|
|
||||||
: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.absent"
|
|
||||||
: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.age"
|
|
||||||
:label="`${'อายุราชการเกื้อกูล'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
<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 == 'dateStart' ||
|
|
||||||
col.name == 'dateAppoint' ||
|
|
||||||
col.name == 'createdAt'
|
|
||||||
"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</HistoryTable>
|
|
||||||
</template>
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,976 +0,0 @@
|
||||||
<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 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"),
|
|
||||||
},
|
|
||||||
perfixId: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
firstname: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
lastname: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const store = useProfileDataStore();
|
|
||||||
const { profileData, changeProfileColumns } = store;
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
success,
|
|
||||||
dateToISO,
|
|
||||||
messageError,
|
|
||||||
typeChangeName,
|
|
||||||
dialogMessage,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
} = 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 () => {
|
|
||||||
showLoader();
|
|
||||||
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(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* get รายการ ข้อมูลเกี่ยวกับบุคคล
|
|
||||||
*/
|
|
||||||
const fetchPerson = async () => {
|
|
||||||
showLoader();
|
|
||||||
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(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดดูข้อมูลก่อนหน้า
|
|
||||||
*/
|
|
||||||
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);
|
|
||||||
showLoader();
|
|
||||||
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);
|
|
||||||
showLoader();
|
|
||||||
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 () => {
|
|
||||||
showLoader();
|
|
||||||
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 = props.perfixId;
|
|
||||||
firstName.value = props.firstname;
|
|
||||||
lastName.value = props.lastname;
|
|
||||||
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;
|
|
||||||
showLoader();
|
|
||||||
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(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
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>
|
|
||||||
|
|
||||||
<!-- 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 || status == 'lastName'"
|
|
||||||
: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 || status == 'firstName'"
|
|
||||||
: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,.docx"
|
|
||||||
bordered
|
|
||||||
label="[ไฟล์ jpg,png,pdf,csv,doc,docx ขนาดไม่เกิน 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,docx ขนาดไม่เกิน 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>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.modalfix {
|
|
||||||
position: fixed !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,674 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
import type { DataOption } from "@/modules/04_registry/components/profileType";
|
|
||||||
import { defaultTempInformation } from "@/modules/04_registry/components/profileType";
|
|
||||||
import HeaderTop from "@/modules/08_registryEmployee/components/EditEmployee/TopEmployeeTemp.vue";
|
|
||||||
import HistoryTable from "@/components/TableHistory.vue";
|
|
||||||
import { useRoute } from "vue-router";
|
|
||||||
import type { QTableProps } from "quasar";
|
|
||||||
import CurrencyInput from "@/components/CurruncyInput.vue";
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
statusEdit: {
|
|
||||||
type: Boolean,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
fetchDataProfile: {
|
|
||||||
type: Function,
|
|
||||||
default: () => {
|
|
||||||
/* function */
|
|
||||||
},
|
|
||||||
},
|
|
||||||
statusAdd: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const emit = defineEmits(["update:statusEdit"]);
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const $q = useQuasar();
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
success,
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
} = mixin;
|
|
||||||
const edit = ref<boolean>(false);
|
|
||||||
const myform = ref<any>();
|
|
||||||
const employeeOc = ref<string>("");
|
|
||||||
const codec = ref<string>("");
|
|
||||||
const rows = ref<any[]>([]);
|
|
||||||
const positionEmployeeGroupId = ref<string>("");
|
|
||||||
const employeeGroupOptions = ref<DataOption[]>([]);
|
|
||||||
const positionEmployeeLineId = ref<string>("");
|
|
||||||
const positionEmployeeLineOptions = ref<DataOption[]>([]);
|
|
||||||
const positionEmployeePositionId = ref<string>("");
|
|
||||||
const positionEmployeePositionOptions = ref<DataOption[]>([]);
|
|
||||||
const employeeWage = ref<number>(0);
|
|
||||||
const employeeTypeIndividual = ref<string>("");
|
|
||||||
const employeeMoneyIncrease = ref<number>(0);
|
|
||||||
const employeeMoneyAllowance = ref<number>(0);
|
|
||||||
const employeeMoneyEmployee = ref<number>(0);
|
|
||||||
const employeeMoneyEmployer = ref<number>(0);
|
|
||||||
|
|
||||||
const informaTempData = ref<any>(defaultTempInformation);
|
|
||||||
const rowsHistory = ref<any[]>([]); //select data history
|
|
||||||
const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลที่อยู่"); //
|
|
||||||
const filterHistory = ref<string>(""); //search data table history
|
|
||||||
const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
|
|
||||||
const columnsHistory = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "positionEmployeeGroupId",
|
|
||||||
align: "left",
|
|
||||||
label: "กลุ่มงาน",
|
|
||||||
sortable: true,
|
|
||||||
field: "positionEmployeeGroupId",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "positionEmployeeLineId",
|
|
||||||
align: "left",
|
|
||||||
label: "สายงาน",
|
|
||||||
sortable: true,
|
|
||||||
field: "positionEmployeeLineId",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "positionEmployeePositionId",
|
|
||||||
align: "left",
|
|
||||||
label: "ชื่อตำแหน่งทางสายงาน",
|
|
||||||
sortable: true,
|
|
||||||
field: "positionEmployeePositionId",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "employeeOc",
|
|
||||||
align: "left",
|
|
||||||
label: "สังกัด",
|
|
||||||
sortable: true,
|
|
||||||
field: "employeeOc",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "employeeWage",
|
|
||||||
align: "left",
|
|
||||||
label: "ค่าจ้าง",
|
|
||||||
sortable: true,
|
|
||||||
field: "employeeWage",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "employeeTypeIndividual",
|
|
||||||
align: "left",
|
|
||||||
label: "ประเภทบุคคล",
|
|
||||||
sortable: true,
|
|
||||||
field: "employeeTypeIndividual",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "employeeMoneyIncrease",
|
|
||||||
align: "left",
|
|
||||||
label: "เงินช่วยเหลือการครองชีพชั่วคราว",
|
|
||||||
sortable: true,
|
|
||||||
field: "employeeMoneyIncrease",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "employeeMoneyAllowance",
|
|
||||||
align: "left",
|
|
||||||
label: "เงินช่วยเหลือการครองชีพชั่วคราว",
|
|
||||||
sortable: true,
|
|
||||||
field: "employeeMoneyAllowance",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "employeeMoneyEmployee",
|
|
||||||
align: "left",
|
|
||||||
label: "เงินสมทบประกันสังคม(ลูกจ้าง)",
|
|
||||||
sortable: true,
|
|
||||||
field: "employeeMoneyEmployee",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "employeeMoneyEmployer",
|
|
||||||
align: "left",
|
|
||||||
label: "เงินสมทบประกันสังคม(นายจ้าง)",
|
|
||||||
sortable: true,
|
|
||||||
field: "employeeMoneyEmployer",
|
|
||||||
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[]>([
|
|
||||||
"employeeMoneyIncrease",
|
|
||||||
"employeeMoneyAllowance",
|
|
||||||
"employeeMoneyEmployee",
|
|
||||||
"employeeMoneyEmployer",
|
|
||||||
"positionEmployeeGroupId",
|
|
||||||
"positionEmployeePositionId",
|
|
||||||
"positionEmployeeLineId",
|
|
||||||
"employeeTypeIndividual",
|
|
||||||
"employeeOc",
|
|
||||||
"employeeWage",
|
|
||||||
]);
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchData();
|
|
||||||
await fetchDataSelector();
|
|
||||||
});
|
|
||||||
|
|
||||||
const statusAdd = () => props.statusAdd;
|
|
||||||
|
|
||||||
const fetchDataSelector = async () => {
|
|
||||||
showLoader();
|
|
||||||
await fetchEmployeeGroup();
|
|
||||||
await fetchpositionEmployeeLine();
|
|
||||||
await fetchPositionEmployeePosition();
|
|
||||||
hideLoader();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
|
|
||||||
*/
|
|
||||||
// const clickHistory = async () => {
|
|
||||||
// modalHistory.value = true;
|
|
||||||
// showLoader();
|
|
||||||
// await http
|
|
||||||
// .get(config.API.profileEmployeeTempId(route.params.id.toString()))
|
|
||||||
// .then((res) => {
|
|
||||||
// let data = res.data.result;
|
|
||||||
// rowsHistory.value = [];
|
|
||||||
// data.map((e: any) => {
|
|
||||||
// rowsHistory.value.push({
|
|
||||||
// employeeMoneyIncrease: e.employeeMoneyIncrease,
|
|
||||||
// employeeMoneyAllowance: e.employeeMoneyAllowance,
|
|
||||||
// employeeMoneyEmployee: e.employeeMoneyEmployee,
|
|
||||||
// employeeMoneyEmployer: e.employeeMoneyEmployer,
|
|
||||||
// positionEmployeeGroupId: e.positionEmployeeGroupId,
|
|
||||||
// positionEmployeePositionId: e.positionEmployeePositionId,
|
|
||||||
// positionEmployeeLineId: e.positionEmployeeLineId,
|
|
||||||
// employeeTypeIndividual: e.employeeTypeIndividual,
|
|
||||||
// employeeOc: e.employeeOc,
|
|
||||||
// employeeWage: e.employeeWage,
|
|
||||||
// createdFullName: e.createdFullName,
|
|
||||||
// createdAt: new Date(e.createdAt),
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
// })
|
|
||||||
// .catch((e) => {
|
|
||||||
// messageError($q, e);
|
|
||||||
// })
|
|
||||||
// .finally(() => {
|
|
||||||
// hideLoader();
|
|
||||||
// });
|
|
||||||
// };
|
|
||||||
|
|
||||||
const refreshData = async () => {
|
|
||||||
myform.value.reset();
|
|
||||||
await getNewData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const getNewData = async () => {
|
|
||||||
await fetchData();
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (route.params.id) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileEmployeeTempId(route.params.id.toString()))
|
|
||||||
.then((res) => {
|
|
||||||
// const data: any = res.data.result;
|
|
||||||
// rows.value = [];
|
|
||||||
// data.map((e: any) => {
|
|
||||||
// rows.value.push({
|
|
||||||
// employeeMoneyIncrease: e.employeeMoneyIncrease,
|
|
||||||
// employeeMoneyAllowance: e.employeeMoneyAllowance,
|
|
||||||
// employeeMoneyEmployee: e.employeeMoneyEmployee,
|
|
||||||
// employeeMoneyEmployer: e.employeeMoneyEmployer,
|
|
||||||
// positionEmployeeGroupId: e.positionEmployeeGroupId,
|
|
||||||
// positionEmployeePositionId: e.positionEmployeePositionId,
|
|
||||||
// positionEmployeeLineId: e.positionEmployeeLineId,
|
|
||||||
// employeeTypeIndividual: e.employeeTypeIndividual,
|
|
||||||
// employeeOc: e.employeeOc,
|
|
||||||
// employeeWage: e.employeeWage,
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
const data: any = res.data.result;
|
|
||||||
informaTempData.value.employeeMoneyIncrease =
|
|
||||||
data.employeeMoneyIncrease;
|
|
||||||
informaTempData.value.employeeMoneyAllowance =
|
|
||||||
data.employeeMoneyAllowance;
|
|
||||||
informaTempData.value.employeeMoneyEmployee =
|
|
||||||
data.employeeMoneyEmployee;
|
|
||||||
informaTempData.value.employeeMoneyEmployer =
|
|
||||||
data.employeeMoneyEmployer;
|
|
||||||
informaTempData.value.positionEmployeeGroupId =
|
|
||||||
data.positionEmployeeGroupId !==
|
|
||||||
"00000000-0000-0000-0000-000000000000"
|
|
||||||
? data.positionEmployeeGroupId
|
|
||||||
: "";
|
|
||||||
informaTempData.value.positionEmployeePositionId =
|
|
||||||
data.positionEmployeePositionId !==
|
|
||||||
"00000000-0000-0000-0000-000000000000"
|
|
||||||
? data.positionEmployeePositionId
|
|
||||||
: "";
|
|
||||||
informaTempData.value.positionEmployeeLineId =
|
|
||||||
data.positionEmployeeLineId !== "00000000-0000-0000-0000-000000000000"
|
|
||||||
? data.positionEmployeeLineId
|
|
||||||
: "";
|
|
||||||
informaTempData.value.employeeTypeIndividual =
|
|
||||||
data.employeeTypeIndividual;
|
|
||||||
informaTempData.value.employeeOc = data.employeeOc;
|
|
||||||
informaTempData.value.employeeWage = data.employeeWage;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
hideLoader();
|
|
||||||
await props.fetchDataProfile();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// กลุ่มงาน
|
|
||||||
const fetchEmployeeGroup = async () => {
|
|
||||||
await http
|
|
||||||
.get(config.API.positionEmployeeGroup)
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
let option: DataOption[] = [];
|
|
||||||
data.map((r: DataOption) => {
|
|
||||||
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
||||||
});
|
|
||||||
|
|
||||||
employeeGroupOptions.value = option;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchpositionEmployeeLine = async () => {
|
|
||||||
await http
|
|
||||||
.get(config.API.positionEmployeeLine)
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
let option: DataOption[] = [];
|
|
||||||
data.map((r: DataOption) => {
|
|
||||||
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
||||||
});
|
|
||||||
|
|
||||||
positionEmployeeLineOptions.value = option;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
//ชื่อตำแหน่ง
|
|
||||||
|
|
||||||
const fetchPositionEmployeePosition = async () => {
|
|
||||||
await http
|
|
||||||
.get(config.API.positionEmployeePosition)
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
let option: DataOption[] = [];
|
|
||||||
data.map((r: DataOption) => {
|
|
||||||
option.push({ id: r.id.toString(), name: r.name.toString() });
|
|
||||||
});
|
|
||||||
|
|
||||||
positionEmployeePositionOptions.value = option;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const editData = async () => {
|
|
||||||
const body: any = {
|
|
||||||
employeeMoneyIncrease: informaTempData.value.employeeMoneyIncrease,
|
|
||||||
employeeMoneyAllowance: informaTempData.value.employeeMoneyAllowance,
|
|
||||||
employeeMoneyEmployee: informaTempData.value.employeeMoneyEmployee,
|
|
||||||
employeeMoneyEmployer: informaTempData.value.employeeMoneyEmployer,
|
|
||||||
positionEmployeeGroupId: informaTempData.value.positionEmployeeGroupId,
|
|
||||||
positionEmployeePositionId:
|
|
||||||
informaTempData.value.positionEmployeePositionId,
|
|
||||||
positionEmployeeLineId: informaTempData.value.positionEmployeeLineId,
|
|
||||||
employeeTypeIndividual: informaTempData.value.employeeTypeIndividual,
|
|
||||||
employeeOc: informaTempData.value.employeeOc,
|
|
||||||
employeeWage: informaTempData.value.employeeWage,
|
|
||||||
};
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileEmployeeTempId(route.params.id.toString()), body)
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
edit.value = false;
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
await getNewData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const addData = async () => {
|
|
||||||
const body: any = {
|
|
||||||
employeeMoneyIncrease: employeeMoneyIncrease.value,
|
|
||||||
employeeMoneyAllowance: employeeMoneyAllowance.value,
|
|
||||||
employeeMoneyEmployee: employeeMoneyEmployee.value,
|
|
||||||
employeeMoneyEmployer: employeeMoneyEmployer.value,
|
|
||||||
positionEmployeeGroupId: positionEmployeeGroupId.value,
|
|
||||||
positionEmployeePositionId: positionEmployeePositionId.value,
|
|
||||||
positionEmployeeLineId: positionEmployeeLineId.value,
|
|
||||||
employeeTypeIndividual: employeeTypeIndividual.value,
|
|
||||||
employeeOc: employeeOc.value,
|
|
||||||
employeeWage: employeeWage.value,
|
|
||||||
};
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileInforId(route.params.id.toString()), body)
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
edit.value = false;
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const saveData = async () => {
|
|
||||||
dialogConfirm($q, () => Datasave());
|
|
||||||
};
|
|
||||||
const Datasave = async () => {
|
|
||||||
await myform.value.validate().then(async (success: boolean) => {
|
|
||||||
if (success) {
|
|
||||||
if (props.statusAdd) {
|
|
||||||
await addData();
|
|
||||||
} else {
|
|
||||||
await editData();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeBtn = async () => {
|
|
||||||
if (edit.value == true) {
|
|
||||||
if (props.statusEdit === true) {
|
|
||||||
edit.value = false;
|
|
||||||
} else {
|
|
||||||
emit("update:statusEdit", true);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
emit("update:statusEdit", false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getClass = (val: boolean) => {
|
|
||||||
return {
|
|
||||||
"full-width inputgreen cursor-pointer": val,
|
|
||||||
"full-width cursor-pointer": !val,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md">
|
|
||||||
<HeaderTop
|
|
||||||
v-model:edit="edit"
|
|
||||||
header="ข้อมูลลูกจ้างชั่วคราว"
|
|
||||||
icon="mdi-account"
|
|
||||||
:save="saveData"
|
|
||||||
:changeBtn="changeBtn"
|
|
||||||
:disable="statusEdit"
|
|
||||||
:cancel="refreshData"
|
|
||||||
:addEmployee="statusAdd()"
|
|
||||||
:history="!statusAdd()"
|
|
||||||
/>
|
|
||||||
<q-form ref="myform">
|
|
||||||
<div class="row col-12 q-col-gutter-x-sm q-col-gutter-y-sm">
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<selector
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="informaTempData.positionEmployeeGroupId"
|
|
||||||
:label="`${'กลุ่มงาน'}`"
|
|
||||||
@update:modelValue="!edit"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="employeeGroupOptions"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
|
|
||||||
option-value="id"
|
|
||||||
hide-bottom-space
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<selector
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="informaTempData.positionEmployeeLineId"
|
|
||||||
:label="`${'สายงาน'}`"
|
|
||||||
@update:modelValue="!edit"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="positionEmployeeLineOptions"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกสายงาน'}`]"
|
|
||||||
option-value="id"
|
|
||||||
hide-bottom-space
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<selector
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="informaTempData.positionEmployeePositionId"
|
|
||||||
:label="`${'ชื่อตำแหน่งทางสายงาน'}`"
|
|
||||||
@update:modelValue="!edit"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="positionEmployeePositionOptions"
|
|
||||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อตำแหน่งทางสายงาน'}`]"
|
|
||||||
option-value="id"
|
|
||||||
hide-bottom-space
|
|
||||||
use-input
|
|
||||||
input-debounce="0"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
hide-bottom-space
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="informaTempData.employeeOc"
|
|
||||||
:label="`${'สังกัด'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
hide-bottom-space
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="informaTempData.employeeTypeIndividual"
|
|
||||||
:label="`${'ประเภทบุคคล'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<CurrencyInput
|
|
||||||
v-model="informaTempData.employeeWage"
|
|
||||||
:edit="edit"
|
|
||||||
:options="{
|
|
||||||
currency: 'THB',
|
|
||||||
}"
|
|
||||||
:label="`${'ค่าจ้าง'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<CurrencyInput
|
|
||||||
v-model="informaTempData.employeeMoneyIncrease"
|
|
||||||
:edit="edit"
|
|
||||||
:options="{
|
|
||||||
currency: 'THB',
|
|
||||||
}"
|
|
||||||
:label="`${'เงินเพิ่มการครองชีพชั่วคราว'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<CurrencyInput
|
|
||||||
v-model="informaTempData.employeeMoneyAllowance"
|
|
||||||
:edit="edit"
|
|
||||||
:options="{
|
|
||||||
currency: 'THB',
|
|
||||||
}"
|
|
||||||
:label="`${'เงินช่วยเหลือการครองชีพชั่วคราว'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<CurrencyInput
|
|
||||||
v-model="informaTempData.employeeMoneyEmployee"
|
|
||||||
:edit="edit"
|
|
||||||
:options="{
|
|
||||||
currency: 'THB',
|
|
||||||
}"
|
|
||||||
:label="`${'เงินสมทบประกันสังคม(ลูกจ้าง)'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-3 col-md-3">
|
|
||||||
<CurrencyInput
|
|
||||||
v-model="informaTempData.employeeMoneyEmployer"
|
|
||||||
:edit="edit"
|
|
||||||
:options="{
|
|
||||||
currency: 'THB',
|
|
||||||
}"
|
|
||||||
:label="`${'เงินสมทบประกันสังคม(นายจ้าง)'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
<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 == 'registrationSame'"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ col.value ? "ใช่" : "ไม่" }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</HistoryTable>
|
|
||||||
</template>
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,626 +0,0 @@
|
||||||
<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 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/Other";
|
|
||||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Other";
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const store = useProfileDataStore();
|
|
||||||
const { profileData, changeProfileColumns } = store;
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
success,
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
} = mixin;
|
|
||||||
const route = useRoute();
|
|
||||||
const id = ref<string>("");
|
|
||||||
const date = ref<Date>(new Date());
|
|
||||||
const detail = ref<string>();
|
|
||||||
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 ? route.params.id.toString() : ""
|
|
||||||
);
|
|
||||||
const rows = ref<RequestItemsObject[]>([]);
|
|
||||||
const filter = ref<string>(""); //search data table
|
|
||||||
const visibleColumns = ref<String[]>([]);
|
|
||||||
profileData.other.columns.length == 0
|
|
||||||
? (visibleColumns.value = ["date", "detail"])
|
|
||||||
: (visibleColumns.value = profileData.other.columns);
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "date",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่",
|
|
||||||
sortable: true,
|
|
||||||
field: "date",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px; width: 50px;",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "detail",
|
|
||||||
align: "left",
|
|
||||||
label: "รายละเอียด",
|
|
||||||
sortable: true,
|
|
||||||
field: "detail",
|
|
||||||
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: "date",
|
|
||||||
align: "left",
|
|
||||||
label: "วันที่",
|
|
||||||
sortable: true,
|
|
||||||
field: "date",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px; width: 50px;",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "detail",
|
|
||||||
align: "left",
|
|
||||||
label: "รายละเอียด",
|
|
||||||
sortable: true,
|
|
||||||
field: "detail",
|
|
||||||
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[]>([
|
|
||||||
"date",
|
|
||||||
"detail",
|
|
||||||
"createdFullName",
|
|
||||||
"createdAt",
|
|
||||||
]);
|
|
||||||
|
|
||||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
|
||||||
await changeProfileColumns("other", count);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileOtherId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rows.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rows.value.push({
|
|
||||||
id: e.id,
|
|
||||||
date: new Date(e.date),
|
|
||||||
detail: e.detail,
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดดูข้อมูลก่อนหน้า
|
|
||||||
*/
|
|
||||||
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];
|
|
||||||
date.value = row.date;
|
|
||||||
detail.value = row.detail;
|
|
||||||
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 = () => {
|
|
||||||
dialogConfirm($q, () => SaveData());
|
|
||||||
};
|
|
||||||
const SaveData = async () => {
|
|
||||||
myForm.value.validate().then(async (result: boolean) => {
|
|
||||||
if (result) {
|
|
||||||
if (modalEdit.value) {
|
|
||||||
await editData();
|
|
||||||
} else {
|
|
||||||
await saveData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกเพิ่มข้อมูล
|
|
||||||
*/
|
|
||||||
const saveData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profileOtherId(profileId.value), {
|
|
||||||
id: id.value,
|
|
||||||
date: date.value,
|
|
||||||
detail: detail.value,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
const editData = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileOtherId(id.value), {
|
|
||||||
id: id.value,
|
|
||||||
date: date.value,
|
|
||||||
detail: detail.value,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ลบลบข้อมูล
|
|
||||||
*/
|
|
||||||
const clickDelete = async () => {
|
|
||||||
$q.dialog({
|
|
||||||
title: `ลบข้อมูล`,
|
|
||||||
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
|
||||||
cancel: "ยกเลิก",
|
|
||||||
ok: "ยืนยัน",
|
|
||||||
persistent: true,
|
|
||||||
})
|
|
||||||
.onOk(async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.delete(config.API.profileOtherId(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;
|
|
||||||
edit.value = false;
|
|
||||||
rawItem.value = props.row;
|
|
||||||
rowIndex.value = props.rowIndex;
|
|
||||||
date.value = props.row.date;
|
|
||||||
detail.value = props.row.detail;
|
|
||||||
id.value = props.row.id;
|
|
||||||
await checkRowPage();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดปุ่มเพิ่มบน table
|
|
||||||
*/
|
|
||||||
const addData = () => {
|
|
||||||
modalEdit.value = false;
|
|
||||||
modal.value = true;
|
|
||||||
edit.value = true;
|
|
||||||
date.value = new Date();
|
|
||||||
detail.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;
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileOtherHisId(row.id))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rowsHistory.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rowsHistory.value.push({
|
|
||||||
id: e.id,
|
|
||||||
date: e.date,
|
|
||||||
detail: e.detail,
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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>
|
|
||||||
|
|
||||||
<!-- card อื่นๆ -->
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
|
||||||
<q-form ref="myForm">
|
|
||||||
<ProfileTable
|
|
||||||
:rows="rows"
|
|
||||||
:columns="columns"
|
|
||||||
:filter="filter"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
v-model:inputfilter="filter"
|
|
||||||
v-model:inputvisible="visibleColumns"
|
|
||||||
:add="clickAdd"
|
|
||||||
name="อื่นๆ"
|
|
||||||
icon="mdi-bookmark"
|
|
||||||
:statusEdit="statusEdit"
|
|
||||||
>
|
|
||||||
<template #columns="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-td
|
|
||||||
v-for="col in props.cols"
|
|
||||||
:key="col.name"
|
|
||||||
:props="props"
|
|
||||||
@click="selectData(props)"
|
|
||||||
class="cursor-pointer"
|
|
||||||
>
|
|
||||||
<div v-if="col.name == 'date'" class="table_ellipsis">
|
|
||||||
{{ date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
color="info"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
size="14px"
|
|
||||||
icon="mdi-history"
|
|
||||||
@click="clickHistory(props.row)"
|
|
||||||
/>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</ProfileTable>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
<!-- 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 q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
:readonly="!edit"
|
|
||||||
v-model="date"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="date2Thai(date)"
|
|
||||||
: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 class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
autogrow
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="detail"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'รายละเอียด'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<DialogFooter
|
|
||||||
:cancel="clickCancel"
|
|
||||||
:edit="clickEdit"
|
|
||||||
:save="clickSave"
|
|
||||||
: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"
|
|
||||||
>
|
|
||||||
<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 == 'date' || col.name == 'createdAt'"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</HistoryTable>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,827 +0,0 @@
|
||||||
<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 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/Record";
|
|
||||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Record";
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const store = useProfileDataStore();
|
|
||||||
const { profileData, changeProfileColumns } = store;
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
|
|
||||||
mixin;
|
|
||||||
const route = useRoute();
|
|
||||||
const id = ref<string>("");
|
|
||||||
const date = ref<Date>(new Date());
|
|
||||||
const detail = ref<string>();
|
|
||||||
const reference = ref<string>();
|
|
||||||
const refCommandNo = ref<string>();
|
|
||||||
const refCommandDate = ref<Date | null>(new 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 profileId = ref<string>(
|
|
||||||
route.params.id ? route.params.id.toString() : ""
|
|
||||||
);
|
|
||||||
const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
|
|
||||||
const rows = ref<RequestItemsObject[]>([]);
|
|
||||||
const filter = ref<string>(""); //search data table
|
|
||||||
const visibleColumns = ref<String[]>([]);
|
|
||||||
profileData.record.columns.length == 0
|
|
||||||
? (visibleColumns.value = [
|
|
||||||
"date",
|
|
||||||
"detail",
|
|
||||||
"reference",
|
|
||||||
"refCommandNo",
|
|
||||||
"refCommandDate",
|
|
||||||
])
|
|
||||||
: (visibleColumns.value = profileData.record.columns);
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "date",
|
|
||||||
align: "left",
|
|
||||||
label: "วัน เดือน ปี",
|
|
||||||
sortable: true,
|
|
||||||
field: "date",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "reference",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง",
|
|
||||||
sortable: true,
|
|
||||||
field: "reference",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "detail",
|
|
||||||
align: "left",
|
|
||||||
label: "รายละเอียด",
|
|
||||||
sortable: true,
|
|
||||||
field: "detail",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandNo",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขที่คำสั่ง",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandNo",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandDate",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง (ลงวันที่)",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandDate",
|
|
||||||
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: "date",
|
|
||||||
align: "left",
|
|
||||||
label: "วัน เดือน ปี",
|
|
||||||
sortable: true,
|
|
||||||
field: "date",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "reference",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง",
|
|
||||||
sortable: true,
|
|
||||||
field: "reference",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "detail",
|
|
||||||
align: "left",
|
|
||||||
label: "รายละเอียด",
|
|
||||||
sortable: true,
|
|
||||||
field: "detail",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandNo",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขที่คำสั่ง",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandNo",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandDate",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง (ลงวันที่)",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandDate",
|
|
||||||
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[]>([
|
|
||||||
"date",
|
|
||||||
"detail",
|
|
||||||
"reference",
|
|
||||||
"refCommandNo",
|
|
||||||
"refCommandDate",
|
|
||||||
"createdFullName",
|
|
||||||
"createdAt",
|
|
||||||
]);
|
|
||||||
|
|
||||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
|
||||||
await changeProfileColumns("record", count);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (profileId.value != "") {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileNopaidId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rows.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rows.value.push({
|
|
||||||
id: e.id,
|
|
||||||
date: new Date(e.date),
|
|
||||||
detail: e.detail,
|
|
||||||
reference: e.reference,
|
|
||||||
refCommandNo: e.refCommandNo,
|
|
||||||
refCommandDate:
|
|
||||||
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดดูข้อมูลก่อนหน้า
|
|
||||||
*/
|
|
||||||
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];
|
|
||||||
date.value = row.date;
|
|
||||||
detail.value = row.detail;
|
|
||||||
reference.value = row.reference;
|
|
||||||
refCommandNo.value = row.refCommandNo;
|
|
||||||
refCommandDate.value = row.refCommandDate;
|
|
||||||
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 (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profileNopaidId(profileId.value), {
|
|
||||||
id: id.value,
|
|
||||||
date: dateToISO(date.value),
|
|
||||||
detail: detail.value,
|
|
||||||
reference: reference.value,
|
|
||||||
refCommandNo: refCommandNo.value,
|
|
||||||
refCommandDate:
|
|
||||||
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
const editData = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileNopaidId(id.value), {
|
|
||||||
id: id.value,
|
|
||||||
date: dateToISO(date.value),
|
|
||||||
detail: detail.value,
|
|
||||||
reference: reference.value,
|
|
||||||
refCommandNo: refCommandNo.value,
|
|
||||||
refCommandDate:
|
|
||||||
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ลบลบข้อมูล
|
|
||||||
*/
|
|
||||||
const clickDelete = async () => {
|
|
||||||
$q.dialog({
|
|
||||||
title: `ลบข้อมูล`,
|
|
||||||
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
|
||||||
cancel: "ยกเลิก",
|
|
||||||
ok: "ยืนยัน",
|
|
||||||
persistent: true,
|
|
||||||
})
|
|
||||||
.onOk(async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.delete(config.API.profileNopaidId(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;
|
|
||||||
edit.value = false;
|
|
||||||
rawItem.value = props.row;
|
|
||||||
rowIndex.value = props.rowIndex;
|
|
||||||
date.value = props.row.date;
|
|
||||||
detail.value = props.row.detail;
|
|
||||||
reference.value = props.row.reference;
|
|
||||||
refCommandNo.value = props.row.refCommandNo;
|
|
||||||
refCommandDate.value = props.row.refCommandDate;
|
|
||||||
id.value = props.row.id;
|
|
||||||
await checkRowPage();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดปุ่มเพิ่มบน table
|
|
||||||
*/
|
|
||||||
const addData = () => {
|
|
||||||
modalEdit.value = false;
|
|
||||||
modal.value = true;
|
|
||||||
edit.value = true;
|
|
||||||
date.value = new Date();
|
|
||||||
detail.value = "";
|
|
||||||
reference.value = "";
|
|
||||||
refCommandNo.value = "";
|
|
||||||
refCommandDate.value = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
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;
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileNopaidHisId(row.id))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rowsHistory.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rowsHistory.value.push({
|
|
||||||
id: e.id,
|
|
||||||
date: new Date(e.date),
|
|
||||||
detail: e.detail,
|
|
||||||
reference: e.reference,
|
|
||||||
refCommandNo: e.refCommandNo,
|
|
||||||
refCommandDate:
|
|
||||||
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
const resetFilter = () => {};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- card บันทึกวันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็มหรือวันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประดาศใช้กฏอัยการศึก -->
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
|
||||||
<q-form ref="myForm">
|
|
||||||
<ProfileTable
|
|
||||||
:rows="rows"
|
|
||||||
:columns="columns"
|
|
||||||
:filter="filter"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
v-model:inputfilter="filter"
|
|
||||||
v-model:inputvisible="visibleColumns"
|
|
||||||
:add="clickAdd"
|
|
||||||
name="วันที่มิได้ปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก"
|
|
||||||
icon="mdi-calendar-remove"
|
|
||||||
:statusEdit="statusEdit"
|
|
||||||
>
|
|
||||||
<template #columns="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-td
|
|
||||||
v-for="col in props.cols"
|
|
||||||
:key="col.name"
|
|
||||||
:props="props"
|
|
||||||
@click="selectData(props)"
|
|
||||||
class="cursor-pointer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="col.name == 'date' || col.name == 'refCommandDate'"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ col.value == null ? null : date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
color="info"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
size="14px"
|
|
||||||
icon="mdi-history"
|
|
||||||
@click="clickHistory(props.row)"
|
|
||||||
/>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</ProfileTable>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
<!-- 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">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
:readonly="!edit"
|
|
||||||
v-model="date"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="date2Thai(date)"
|
|
||||||
: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 class="col-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
autogrow
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="reference"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'เอกสารอ้างอิง'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
autogrow
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="detail"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'รายละเอียด'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="refCommandNo"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'เลขที่คำสั่ง'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file"
|
|
||||||
class="cursor-pointer"
|
|
||||||
@click="resetFilter"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
:readonly="!edit"
|
|
||||||
v-model="refCommandDate"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="
|
|
||||||
refCommandDate == null ? null : date2Thai(refCommandDate)
|
|
||||||
"
|
|
||||||
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>
|
|
||||||
</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"
|
|
||||||
>
|
|
||||||
<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 == 'date' ||
|
|
||||||
col.name == 'createdAt' ||
|
|
||||||
col.name == 'refCommandDate'
|
|
||||||
"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ col.value == null ? null : date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</HistoryTable>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.modalfix {
|
|
||||||
position: fixed !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,692 +0,0 @@
|
||||||
<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 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/Talent";
|
|
||||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Talent";
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const store = useProfileDataStore();
|
|
||||||
const { profileData, changeProfileColumns } = store;
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
success,
|
|
||||||
dateToISO,
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
} = mixin;
|
|
||||||
const route = useRoute();
|
|
||||||
const id = ref<string>("");
|
|
||||||
const field = ref<string>();
|
|
||||||
const detail = ref<string>();
|
|
||||||
const remark = ref<string>();
|
|
||||||
const reference = ref<string>();
|
|
||||||
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 ? route.params.id.toString() : ""
|
|
||||||
);
|
|
||||||
const rows = ref<RequestItemsObject[]>([]);
|
|
||||||
const filter = ref<string>(""); //search data table
|
|
||||||
const visibleColumns = ref<String[]>([]);
|
|
||||||
profileData.talent.columns.length == 0
|
|
||||||
? (visibleColumns.value = ["field", "detail", "remark", "reference"])
|
|
||||||
: (visibleColumns.value = profileData.talent.columns);
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "field",
|
|
||||||
align: "left",
|
|
||||||
label: "ด้าน",
|
|
||||||
sortable: true,
|
|
||||||
field: "field",
|
|
||||||
headerStyle: "font-size: 14px; width: 50px;",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "detail",
|
|
||||||
align: "left",
|
|
||||||
label: "รายละเอียด",
|
|
||||||
sortable: true,
|
|
||||||
field: "detail",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "remark",
|
|
||||||
align: "left",
|
|
||||||
label: "หมายเหตุ",
|
|
||||||
sortable: true,
|
|
||||||
field: "remark",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "reference",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง",
|
|
||||||
sortable: true,
|
|
||||||
field: "reference",
|
|
||||||
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: "field",
|
|
||||||
align: "left",
|
|
||||||
label: "ด้าน",
|
|
||||||
sortable: true,
|
|
||||||
field: "field",
|
|
||||||
headerStyle: "font-size: 14px; width: 50px;",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "detail",
|
|
||||||
align: "left",
|
|
||||||
label: "รายละเอียด",
|
|
||||||
sortable: true,
|
|
||||||
field: "detail",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "remark",
|
|
||||||
align: "left",
|
|
||||||
label: "หมายเหตุ",
|
|
||||||
sortable: true,
|
|
||||||
field: "remark",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "reference",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง",
|
|
||||||
sortable: true,
|
|
||||||
field: "reference",
|
|
||||||
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[]>([
|
|
||||||
"field",
|
|
||||||
"detail",
|
|
||||||
"remark",
|
|
||||||
"reference",
|
|
||||||
"createdFullName",
|
|
||||||
"createdAt",
|
|
||||||
]);
|
|
||||||
|
|
||||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
|
||||||
await changeProfileColumns("talent", count);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileAbiliId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rows.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rows.value.push({
|
|
||||||
id: e.id,
|
|
||||||
field: e.field,
|
|
||||||
detail: e.detail,
|
|
||||||
remark: e.remark,
|
|
||||||
reference: e.reference,
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดดูข้อมูลก่อนหน้า
|
|
||||||
*/
|
|
||||||
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];
|
|
||||||
field.value = row.field;
|
|
||||||
detail.value = row.detail;
|
|
||||||
remark.value = row.remark;
|
|
||||||
reference.value = row.reference;
|
|
||||||
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 = () => {
|
|
||||||
dialogConfirm($q, () => SaveData());
|
|
||||||
};
|
|
||||||
const SaveData = async () => {
|
|
||||||
await myForm.value.validate().then(async (result: boolean) => {
|
|
||||||
if (result) {
|
|
||||||
if (modalEdit.value) {
|
|
||||||
await editData();
|
|
||||||
} else {
|
|
||||||
await saveData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกเพิ่มข้อมูล
|
|
||||||
*/
|
|
||||||
const saveData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profileAbiliId(profileId.value), {
|
|
||||||
id: id.value,
|
|
||||||
field: field.value,
|
|
||||||
detail: detail.value,
|
|
||||||
remark: remark.value,
|
|
||||||
reference: reference.value,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
const editData = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileAbiliId(id.value), {
|
|
||||||
id: id.value,
|
|
||||||
field: field.value,
|
|
||||||
detail: detail.value,
|
|
||||||
remark: remark.value,
|
|
||||||
reference: reference.value,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ลบลบข้อมูล
|
|
||||||
*/
|
|
||||||
const clickDelete = async () => {
|
|
||||||
$q.dialog({
|
|
||||||
title: `ลบข้อมูล`,
|
|
||||||
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
|
||||||
cancel: "ยกเลิก",
|
|
||||||
ok: "ยืนยัน",
|
|
||||||
persistent: true,
|
|
||||||
})
|
|
||||||
.onOk(async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.delete(config.API.profileAbiliId(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;
|
|
||||||
edit.value = false;
|
|
||||||
rawItem.value = props.row;
|
|
||||||
rowIndex.value = props.rowIndex;
|
|
||||||
field.value = props.row.field;
|
|
||||||
detail.value = props.row.detail;
|
|
||||||
remark.value = props.row.remark;
|
|
||||||
reference.value = props.row.reference;
|
|
||||||
id.value = props.row.id;
|
|
||||||
await checkRowPage();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดปุ่มเพิ่มบน table
|
|
||||||
*/
|
|
||||||
const addData = () => {
|
|
||||||
modalEdit.value = false;
|
|
||||||
modal.value = true;
|
|
||||||
edit.value = true;
|
|
||||||
field.value = "";
|
|
||||||
detail.value = "";
|
|
||||||
remark.value = "";
|
|
||||||
reference.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;
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileAbiliHisId(row.id))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rowsHistory.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rowsHistory.value.push({
|
|
||||||
id: e.id,
|
|
||||||
field: e.field,
|
|
||||||
detail: e.detail,
|
|
||||||
remark: e.remark,
|
|
||||||
reference: e.reference,
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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>
|
|
||||||
|
|
||||||
<!-- card ความสามารถพิเศษ -->
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
|
||||||
<q-form ref="myForm">
|
|
||||||
<ProfileTable
|
|
||||||
:rows="rows"
|
|
||||||
:columns="columns"
|
|
||||||
:filter="filter"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
v-model:inputfilter="filter"
|
|
||||||
v-model:inputvisible="visibleColumns"
|
|
||||||
:add="clickAdd"
|
|
||||||
name="ความสามารถพิเศษ"
|
|
||||||
icon="mdi-folder-star"
|
|
||||||
:statusEdit="statusEdit"
|
|
||||||
>
|
|
||||||
<template #columns="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-td
|
|
||||||
v-for="col in props.cols"
|
|
||||||
:key="col.name"
|
|
||||||
:props="props"
|
|
||||||
@click="selectData(props)"
|
|
||||||
class="cursor-pointer"
|
|
||||||
>
|
|
||||||
<div class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
color="info"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
size="14px"
|
|
||||||
icon="mdi-history"
|
|
||||||
@click="clickHistory(props.row)"
|
|
||||||
/>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</ProfileTable>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
<!-- 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 q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
||||||
<div class="col-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
autogrow
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="field"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกด้าน'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ด้าน'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
autogrow
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="detail"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'รายละเอียด'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
autogrow
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="remark"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'หมายเหตุ'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
autogrow
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="reference"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'เอกสารอ้างอิง'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<DialogFooter
|
|
||||||
:cancel="clickCancel"
|
|
||||||
:edit="clickEdit"
|
|
||||||
:save="clickSave"
|
|
||||||
: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"
|
|
||||||
>
|
|
||||||
<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 class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</HistoryTable>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,187 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
const props = defineProps({
|
|
||||||
header: {
|
|
||||||
type: String,
|
|
||||||
default: "ข้อความ",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
iconAdd: {
|
|
||||||
type: String,
|
|
||||||
default: null,
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
default: "mdi-help",
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
edit: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
history: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
addData: {
|
|
||||||
type: Boolean,
|
|
||||||
defualt: false,
|
|
||||||
},
|
|
||||||
disable: {
|
|
||||||
type: Boolean,
|
|
||||||
defualt: false,
|
|
||||||
},
|
|
||||||
historyClick: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
add: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
addleave: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
save: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
deleted: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
cancel: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
changeBtn: {
|
|
||||||
type: Function,
|
|
||||||
default: () => console.log("not function"),
|
|
||||||
},
|
|
||||||
addEmployee: {
|
|
||||||
type: Boolean,
|
|
||||||
defualt: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(["update:edit"]);
|
|
||||||
|
|
||||||
const updateEdit = (value: any) => {
|
|
||||||
emit("update:edit", value);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ClickEdit = () => {
|
|
||||||
updateEdit(!props.edit);
|
|
||||||
props.changeBtn();
|
|
||||||
};
|
|
||||||
|
|
||||||
const historyClick = async () => {
|
|
||||||
await props.historyClick();
|
|
||||||
};
|
|
||||||
|
|
||||||
const ClickCancel = () => {
|
|
||||||
updateEdit(!props.edit);
|
|
||||||
props.cancel();
|
|
||||||
props.changeBtn();
|
|
||||||
};
|
|
||||||
|
|
||||||
const save = () => {
|
|
||||||
props.save();
|
|
||||||
};
|
|
||||||
|
|
||||||
const add = () => {
|
|
||||||
props.add();
|
|
||||||
};
|
|
||||||
|
|
||||||
const addleave = () => {
|
|
||||||
props.addleave();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<q-icon
|
|
||||||
:name="icon"
|
|
||||||
size="1.5em"
|
|
||||||
color="grey-5"
|
|
||||||
class="q-mr-md"
|
|
||||||
v-if="icon != ''"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="text-bold text-subtitle2 col-12 row items-center"
|
|
||||||
v-if="header != ''"
|
|
||||||
>
|
|
||||||
{{ header }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="q-gutter-sm q-mx-sm" v-if="addData == false">
|
|
||||||
<q-btn
|
|
||||||
size="12px"
|
|
||||||
v-if="!edit"
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
:disabled="disable"
|
|
||||||
:color="edit ? 'grey-7' : 'primary'"
|
|
||||||
@click="ClickEdit"
|
|
||||||
icon="mdi-pencil-outline"
|
|
||||||
>
|
|
||||||
<q-tooltip>แก้ไขข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
size="12px"
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
v-if="edit"
|
|
||||||
:color="!edit ? 'grey-7' : 'public'"
|
|
||||||
@click="save"
|
|
||||||
icon="mdi-content-save-outline"
|
|
||||||
>
|
|
||||||
<q-tooltip>บันทึกข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
<q-btn
|
|
||||||
size="12px"
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
v-if="edit && !addEmployee"
|
|
||||||
:color="!edit ? 'grey-7' : 'red'"
|
|
||||||
@click="ClickCancel"
|
|
||||||
icon="mdi-undo"
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
:disabled="disable"
|
|
||||||
color="add"
|
|
||||||
@click="add"
|
|
||||||
icon="mdi-plus"
|
|
||||||
>
|
|
||||||
<q-tooltip>เพิ่มข้อมูล</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</div>
|
|
||||||
<q-space />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,914 +0,0 @@
|
||||||
<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 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/Work";
|
|
||||||
import type { ResponseObject } from "@/modules/04_registry/interface/response/Work";
|
|
||||||
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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const store = useProfileDataStore();
|
|
||||||
const { profileData, changeProfileColumns } = store;
|
|
||||||
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
success,
|
|
||||||
dateToISO,
|
|
||||||
messageError,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
dialogConfirm,
|
|
||||||
} = mixin;
|
|
||||||
const route = useRoute();
|
|
||||||
const id = ref<string>("");
|
|
||||||
const dateStart = ref<Date>(new Date());
|
|
||||||
const dateEnd = ref<Date>(new Date());
|
|
||||||
const detail = ref<string>();
|
|
||||||
const reference = ref<string>();
|
|
||||||
const minDate = ref<Date>();
|
|
||||||
const refCommandNo = ref<string>();
|
|
||||||
const refCommandDate = ref<Date | null>(new 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 ? route.params.id.toString() : ""
|
|
||||||
);
|
|
||||||
const rows = ref<RequestItemsObject[]>([]);
|
|
||||||
const filter = ref<string>(""); //search data table
|
|
||||||
const visibleColumns = ref<String[]>([]);
|
|
||||||
profileData.work.columns.length == 0
|
|
||||||
? (visibleColumns.value = [
|
|
||||||
"dateStart",
|
|
||||||
"dateEnd",
|
|
||||||
"detail",
|
|
||||||
"reference",
|
|
||||||
"refCommandNo",
|
|
||||||
"refCommandDate",
|
|
||||||
])
|
|
||||||
: (visibleColumns.value = profileData.work.columns);
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
|
||||||
{
|
|
||||||
name: "dateStart",
|
|
||||||
align: "left",
|
|
||||||
label: "เริ่มต้น",
|
|
||||||
sortable: true,
|
|
||||||
field: "dateStart",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "dateEnd",
|
|
||||||
align: "left",
|
|
||||||
label: "สิ้นสุด",
|
|
||||||
sortable: true,
|
|
||||||
field: "dateEnd",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "reference",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง",
|
|
||||||
sortable: true,
|
|
||||||
field: "reference",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "detail",
|
|
||||||
align: "left",
|
|
||||||
label: "รายละเอียด",
|
|
||||||
sortable: true,
|
|
||||||
field: "detail",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandNo",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขที่คำสั่ง",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandNo",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandDate",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง (ลงวันที่)",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandDate",
|
|
||||||
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: "dateStart",
|
|
||||||
align: "left",
|
|
||||||
label: "เริ่มต้น",
|
|
||||||
sortable: true,
|
|
||||||
field: "dateStart",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "dateEnd",
|
|
||||||
align: "left",
|
|
||||||
label: "สิ้นสุด",
|
|
||||||
sortable: true,
|
|
||||||
field: "dateEnd",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "reference",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง",
|
|
||||||
sortable: true,
|
|
||||||
field: "reference",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "detail",
|
|
||||||
align: "left",
|
|
||||||
label: "รายละเอียด",
|
|
||||||
sortable: true,
|
|
||||||
field: "detail",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandNo",
|
|
||||||
align: "left",
|
|
||||||
label: "เลขที่คำสั่ง",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandNo",
|
|
||||||
headerStyle: "font-size: 14px",
|
|
||||||
style: "font-size: 14px",
|
|
||||||
sort: (a: string, b: string) =>
|
|
||||||
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "refCommandDate",
|
|
||||||
align: "left",
|
|
||||||
label: "เอกสารอ้างอิง (ลงวันที่)",
|
|
||||||
sortable: true,
|
|
||||||
field: "refCommandDate",
|
|
||||||
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[]>([
|
|
||||||
"dateStart",
|
|
||||||
"dateEnd",
|
|
||||||
"detail",
|
|
||||||
"reference",
|
|
||||||
"refCommandNo",
|
|
||||||
"refCommandDate",
|
|
||||||
"createdFullName",
|
|
||||||
"createdAt",
|
|
||||||
]);
|
|
||||||
|
|
||||||
watch(dateStart, (count, prevCount) => {
|
|
||||||
minDate.value = new Date(dateStart.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
|
||||||
await changeProfileColumns("work", count);
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileDutyId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rows.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rows.value.push({
|
|
||||||
id: e.id,
|
|
||||||
dateStart: new Date(e.dateStart),
|
|
||||||
dateEnd: new Date(e.dateEnd),
|
|
||||||
detail: e.detail,
|
|
||||||
reference: e.reference,
|
|
||||||
refCommandNo: e.refCommandNo,
|
|
||||||
refCommandDate:
|
|
||||||
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดดูข้อมูลก่อนหน้า
|
|
||||||
*/
|
|
||||||
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];
|
|
||||||
dateStart.value = row.dateStart;
|
|
||||||
dateEnd.value = row.dateEnd;
|
|
||||||
detail.value = row.detail;
|
|
||||||
reference.value = row.reference;
|
|
||||||
refCommandNo.value = row.refCommandNo;
|
|
||||||
refCommandDate.value = row.refCommandDate;
|
|
||||||
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 = () => {
|
|
||||||
dialogConfirm($q, () => SaveData());
|
|
||||||
};
|
|
||||||
const SaveData = async () => {
|
|
||||||
await myForm.value.validate().then(async (result: boolean) => {
|
|
||||||
if (result) {
|
|
||||||
if (modalEdit.value) {
|
|
||||||
await editData();
|
|
||||||
} else {
|
|
||||||
await saveData();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกเพิ่มข้อมูล
|
|
||||||
*/
|
|
||||||
const saveData = async () => {
|
|
||||||
if (profileId.value) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profileDutyId(profileId.value), {
|
|
||||||
id: id.value,
|
|
||||||
dateStart: dateToISO(dateStart.value),
|
|
||||||
dateEnd: dateToISO(dateEnd.value),
|
|
||||||
detail: detail.value,
|
|
||||||
reference: reference.value,
|
|
||||||
refCommandNo: refCommandNo.value,
|
|
||||||
refCommandDate:
|
|
||||||
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* บันทึกแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
const editData = async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileDutyId(id.value), {
|
|
||||||
id: id.value,
|
|
||||||
dateStart: dateToISO(dateStart.value),
|
|
||||||
dateEnd: dateToISO(dateEnd.value),
|
|
||||||
detail: detail.value,
|
|
||||||
reference: reference.value,
|
|
||||||
refCommandNo: refCommandNo.value,
|
|
||||||
refCommandDate:
|
|
||||||
refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
|
||||||
modal.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ลบลบข้อมูล
|
|
||||||
*/
|
|
||||||
const clickDelete = async () => {
|
|
||||||
$q.dialog({
|
|
||||||
title: `ลบข้อมูล`,
|
|
||||||
message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
|
|
||||||
cancel: "ยกเลิก",
|
|
||||||
ok: "ยืนยัน",
|
|
||||||
persistent: true,
|
|
||||||
})
|
|
||||||
.onOk(async () => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.delete(config.API.profileDutyId(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;
|
|
||||||
edit.value = false;
|
|
||||||
rawItem.value = props.row;
|
|
||||||
rowIndex.value = props.rowIndex;
|
|
||||||
dateStart.value = props.row.dateStart;
|
|
||||||
dateEnd.value = props.row.dateEnd;
|
|
||||||
detail.value = props.row.detail;
|
|
||||||
reference.value = props.row.reference;
|
|
||||||
refCommandNo.value = props.row.refCommandNo;
|
|
||||||
refCommandDate.value = props.row.refCommandDate;
|
|
||||||
id.value = props.row.id;
|
|
||||||
await checkRowPage();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* กดปุ่มเพิ่มบน table
|
|
||||||
*/
|
|
||||||
const addData = () => {
|
|
||||||
modalEdit.value = false;
|
|
||||||
modal.value = true;
|
|
||||||
edit.value = true;
|
|
||||||
dateStart.value = new Date();
|
|
||||||
dateEnd.value = new Date();
|
|
||||||
detail.value = "";
|
|
||||||
reference.value = "";
|
|
||||||
refCommandNo.value = "";
|
|
||||||
refCommandDate.value = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
|
|
||||||
*/
|
|
||||||
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;
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileDutyHisId(row.id))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
rowsHistory.value = [];
|
|
||||||
data.map((e: ResponseObject) => {
|
|
||||||
rowsHistory.value.push({
|
|
||||||
id: e.id,
|
|
||||||
dateStart: new Date(e.dateStart),
|
|
||||||
dateEnd: new Date(e.dateEnd),
|
|
||||||
detail: e.detail,
|
|
||||||
reference: e.reference,
|
|
||||||
refCommandNo: e.refCommandNo,
|
|
||||||
refCommandDate:
|
|
||||||
e.refCommandDate == null ? null : new Date(e.refCommandDate),
|
|
||||||
createdFullName: e.createdFullName,
|
|
||||||
createdAt: new Date(e.createdAt),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
const resetFilter = () => {};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- card ปฏิบัติราชการพิเศษ -->
|
|
||||||
<template>
|
|
||||||
<q-card flat bordered class="col-12 q-px-lg q-py-md">
|
|
||||||
<q-form ref="myForm">
|
|
||||||
<ProfileTable
|
|
||||||
:rows="rows"
|
|
||||||
:columns="columns"
|
|
||||||
:filter="filter"
|
|
||||||
:visible-columns="visibleColumns"
|
|
||||||
v-model:inputfilter="filter"
|
|
||||||
v-model:inputvisible="visibleColumns"
|
|
||||||
:add="clickAdd"
|
|
||||||
name="ปฏิบัติราชการพิเศษ"
|
|
||||||
icon="mdi-bookmark"
|
|
||||||
:statusEdit="statusEdit"
|
|
||||||
>
|
|
||||||
<template #columns="props">
|
|
||||||
<q-tr :props="props">
|
|
||||||
<q-td
|
|
||||||
v-for="col in props.cols"
|
|
||||||
:key="col.name"
|
|
||||||
:props="props"
|
|
||||||
@click="selectData(props)"
|
|
||||||
class="cursor-pointer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
col.name == 'dateStart' ||
|
|
||||||
col.name == 'dateEnd' ||
|
|
||||||
col.name == 'refCommandDate'
|
|
||||||
"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ col.value == null ? null : date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
<q-td auto-width>
|
|
||||||
<q-btn
|
|
||||||
color="info"
|
|
||||||
flat
|
|
||||||
dense
|
|
||||||
round
|
|
||||||
size="14px"
|
|
||||||
icon="mdi-history"
|
|
||||||
@click="clickHistory(props.row)"
|
|
||||||
/>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</ProfileTable>
|
|
||||||
</q-form>
|
|
||||||
</q-card>
|
|
||||||
<!-- 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 q-col-gutter-x-xs q-col-gutter-y-xs">
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
:readonly="!edit"
|
|
||||||
v-model="dateStart"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="date2Thai(dateStart)"
|
|
||||||
: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 class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="dateEnd"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
:min-date="minDate"
|
|
||||||
:readonly="!edit"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="date2Thai(dateEnd)"
|
|
||||||
: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 class="col-12">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
autogrow
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="reference"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'เอกสารอ้างอิง'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
autogrow
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="detail"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'รายละเอียด'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
:class="getClass(edit)"
|
|
||||||
:outlined="edit"
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
:readonly="!edit"
|
|
||||||
:borderless="!edit"
|
|
||||||
v-model="refCommandNo"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'เลขที่คำสั่ง'}`"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
>
|
|
||||||
<template v-slot:append>
|
|
||||||
<q-icon
|
|
||||||
name="mdi-file"
|
|
||||||
class="cursor-pointer"
|
|
||||||
@click="resetFilter"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
:readonly="!edit"
|
|
||||||
v-model="refCommandDate"
|
|
||||||
:locale="'th'"
|
|
||||||
autoApply
|
|
||||||
:enableTimePicker="false"
|
|
||||||
@update:modelValue="clickEditRow"
|
|
||||||
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
|
|
||||||
:borderless="!edit"
|
|
||||||
:model-value="
|
|
||||||
refCommandDate == null ? null : date2Thai(refCommandDate)
|
|
||||||
"
|
|
||||||
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>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<DialogFooter
|
|
||||||
:cancel="clickCancel"
|
|
||||||
:edit="clickEdit"
|
|
||||||
:save="clickSave"
|
|
||||||
: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"
|
|
||||||
>
|
|
||||||
<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 == 'dateStart' ||
|
|
||||||
col.name == 'dateEnd' ||
|
|
||||||
col.name == 'createdAt' ||
|
|
||||||
col.name == 'refCommandDate'
|
|
||||||
"
|
|
||||||
class="table_ellipsis"
|
|
||||||
>
|
|
||||||
{{ col.value == null ? null : date2Thai(col.value) }}
|
|
||||||
</div>
|
|
||||||
<div v-else class="table_ellipsis">
|
|
||||||
{{ col.value }}
|
|
||||||
</div>
|
|
||||||
</q-td>
|
|
||||||
</q-tr>
|
|
||||||
</template>
|
|
||||||
</HistoryTable>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.modalfix {
|
|
||||||
position: fixed !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import AddEmployee from "@/modules/08_registryEmployee/components/AddEmployee/Main.vue";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="col-12 row">
|
|
||||||
<div class="row col-12" style="padding-top: 80px">
|
|
||||||
<div id="information" name="1" class="row col-12 information q-mt-sm">
|
|
||||||
<AddEmployee />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.image-size-default {
|
|
||||||
height: 150px;
|
|
||||||
max-width: 15vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-size-full {
|
|
||||||
height: 160px;
|
|
||||||
max-width: 15vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-green {
|
|
||||||
border: 5px solid #52c688;
|
|
||||||
}
|
|
||||||
|
|
||||||
.area-div {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-header {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.containerimage {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.containerimage:hover .overlay {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
background-color: #e4f2ffd2 !important;
|
|
||||||
opacity: 0;
|
|
||||||
padding: 2px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.information:target {
|
|
||||||
padding-top: 84px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-custom {
|
|
||||||
border: 0.5px solid #c3c3c3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-active-image {
|
|
||||||
background-color: #52c688;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-name {
|
|
||||||
font-size: 1.3em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-sub {
|
|
||||||
font-size: 1.2em;
|
|
||||||
overflow: hidden;
|
|
||||||
color: var(--q-primary);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,915 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { useRoute, useRouter } from "vue-router";
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useQuasar } from "quasar";
|
|
||||||
import EducationVue from "@/modules/08_registryEmployee/components/EditEmployee/Education.vue";
|
|
||||||
import TrainVue from "@/modules/08_registryEmployee/components/EditEmployee/Train.vue";
|
|
||||||
import AssessmentVue from "@/modules/08_registryEmployee/components/EditEmployee/Assessment.vue";
|
|
||||||
// import SalaryVue from "@/modules/08_registryEmployee/components/EditEmployee/Salary.vue";
|
|
||||||
import SalaryEmployeeVue from "@/modules/08_registryEmployee/components/EditEmployee/SalaryEmployee.vue";
|
|
||||||
import DisciplineVue from "@/modules/08_registryEmployee/components/EditEmployee/Discipline.vue";
|
|
||||||
import LeaveVue from "@/modules/08_registryEmployee/components/EditEmployee/Leave.vue";
|
|
||||||
import TalentVue from "@/modules/08_registryEmployee/components/EditEmployee/Talent.vue";
|
|
||||||
import WorkVue from "@/modules/08_registryEmployee/components/EditEmployee/Work.vue";
|
|
||||||
// import RecordVue from "@/modules/08_registryEmployee/components/EditEmployee/Record.vue";
|
|
||||||
import OtherVue from "@/modules/08_registryEmployee/components/EditEmployee/Other.vue";
|
|
||||||
import DocumentVue from "@/modules/08_registryEmployee/components/EditEmployee/Document.vue";
|
|
||||||
import Certicate from "@/modules/08_registryEmployee/components/EditEmployee/Information/Certicate.vue";
|
|
||||||
import Information from "@/modules/08_registryEmployee/components/EditEmployee/Information/Information.vue";
|
|
||||||
import TempInformation from "@/modules/08_registryEmployee/components/EditEmployee/Information/Tempinformation.vue";
|
|
||||||
import Address from "@/modules/08_registryEmployee/components/EditEmployee/Information/Address.vue";
|
|
||||||
import Family from "@/modules/08_registryEmployee/components/EditEmployee/Information/Family.vue";
|
|
||||||
import Employment from "@/modules/08_registryEmployee/components/EditEmployee/Employment.vue";
|
|
||||||
|
|
||||||
import type { DataOption } from "@/modules/04_registry/interface/index/Main";
|
|
||||||
import http from "@/plugins/http";
|
|
||||||
import config from "@/app.config";
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
|
||||||
const mixin = useCounterMixin();
|
|
||||||
const {
|
|
||||||
date2Thai,
|
|
||||||
dateToISO,
|
|
||||||
messageError,
|
|
||||||
dialogMessage,
|
|
||||||
success,
|
|
||||||
showLoader,
|
|
||||||
hideLoader,
|
|
||||||
} = mixin;
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
const imageUrl = ref<any>(null);
|
|
||||||
const inputImage = ref<any>(null);
|
|
||||||
const fullname = ref<string>("");
|
|
||||||
const position = ref<string>("นักจัดการงานทั่วไป");
|
|
||||||
const dialog = ref<boolean>(false);
|
|
||||||
const dialogShort = ref<boolean>(false);
|
|
||||||
const dialogLeave = ref<boolean>(false);
|
|
||||||
const dialogImage = ref<boolean>(false);
|
|
||||||
const statusEdit = ref<boolean>(false);
|
|
||||||
const activeImage = ref<any | null>(null);
|
|
||||||
const images = ref<any>([]);
|
|
||||||
const profileId = ref<string>(
|
|
||||||
route.params.id ? route.params.id.toString() : ""
|
|
||||||
);
|
|
||||||
const profileType = ref<string>("");
|
|
||||||
const leaveDate = ref<Date>(new Date());
|
|
||||||
const leaveDetail = ref<string>("");
|
|
||||||
const leaveNumberOrder = ref<string>("");
|
|
||||||
const leaveDateOrder = ref<Date>(new Date());
|
|
||||||
const reason = ref<string>("");
|
|
||||||
const reasonStatus = ref<boolean>(false);
|
|
||||||
const leaveReason = ref<string>("");
|
|
||||||
const reasonOptions = ref<DataOption[]>([
|
|
||||||
{
|
|
||||||
id: "retire",
|
|
||||||
name: "เกษียณอายุราชการ",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "resign",
|
|
||||||
name: "ลาออก",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "transfer",
|
|
||||||
name: "ให้โอน",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "death",
|
|
||||||
name: "ถึงแก่กรรม",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "layoff",
|
|
||||||
name: "ให้ออก",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "discharge",
|
|
||||||
name: "ปลดออก",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "dismiss",
|
|
||||||
name: "ไล่ออก",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "other",
|
|
||||||
name: "อื่นๆ",
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
// get ข้อมูลทั้งหมด
|
|
||||||
const fetchData = async () => {
|
|
||||||
if (profileId.value !== "") {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileAvatarId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
const data = res.data.result;
|
|
||||||
|
|
||||||
fullname.value = data.fullname;
|
|
||||||
imageUrl.value = data.avatar;
|
|
||||||
position.value = data.position;
|
|
||||||
profileType.value = data.profileType;
|
|
||||||
const reason = reasonOptions.value.filter(
|
|
||||||
(r: DataOption) => r.id == data.leaveReason
|
|
||||||
);
|
|
||||||
if (reason.length > 0) {
|
|
||||||
leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
|
|
||||||
} else {
|
|
||||||
leaveReason.value = "";
|
|
||||||
}
|
|
||||||
reasonStatus.value = reason.length > 0 ? true : false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchAvatarHistory = async () => {
|
|
||||||
if (profileId.value !== "") {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.get(config.API.profileAvatarHistoryId(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
let data = res.data.result;
|
|
||||||
images.value = [];
|
|
||||||
data.map((e: any) => {
|
|
||||||
images.value.push({
|
|
||||||
id: e.id,
|
|
||||||
avatar: e.avatar,
|
|
||||||
avatarId: e.avatarId,
|
|
||||||
createdDate: new Date(e.createdDate),
|
|
||||||
isActive: e.isActive,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
hideLoader();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const uploadImage = async (e: any) => {
|
|
||||||
if (profileId.value !== "") {
|
|
||||||
let input = e.target.files;
|
|
||||||
if (input.length > 0) {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("FileData", input[0]);
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.post(config.API.profileAvatarId(profileId.value), formData)
|
|
||||||
.then((res) => {})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
dialogImage.value = false;
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetchDataDelete = async (id: string) => {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.delete(config.API.profileAvatarHistoryId(id))
|
|
||||||
.then((res) => {
|
|
||||||
success($q, "ลบรูปภาพสำเร็จ");
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
await clickImage();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const deletePhoto = async (id: string) => {
|
|
||||||
dialogMessage(
|
|
||||||
$q,
|
|
||||||
"ลบข้อมูล",
|
|
||||||
"ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
|
|
||||||
"delete",
|
|
||||||
undefined,
|
|
||||||
"red",
|
|
||||||
() => fetchDataDelete(id),
|
|
||||||
undefined,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectAvatarHistory = async () => {
|
|
||||||
if (activeImage.value == null) {
|
|
||||||
dialogMessage(
|
|
||||||
$q,
|
|
||||||
"ไม่สามารถเปลี่ยนรูปได้",
|
|
||||||
"กรุณาเลือกรูปที่ต้องการเปลี่ยน",
|
|
||||||
"warning",
|
|
||||||
undefined,
|
|
||||||
"orange",
|
|
||||||
undefined,
|
|
||||||
undefined,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (profileId.value !== "") {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileAvatarId(profileId.value), {
|
|
||||||
avatar: activeImage.value.avatarId,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
dialogImage.value = false;
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(async () => {
|
|
||||||
await fetchData();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const imageActive = (n: any) => {
|
|
||||||
activeImage.value = n;
|
|
||||||
};
|
|
||||||
|
|
||||||
const imageClass = (n: any) => {
|
|
||||||
const val = n == activeImage.value;
|
|
||||||
return {
|
|
||||||
"rounded-borders bg-grey-2 image-size-default": val,
|
|
||||||
"rounded-borders bg-grey-2 image-size-full": !val,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const getClass = (n: any) => {
|
|
||||||
const val = n == activeImage.value;
|
|
||||||
return {
|
|
||||||
"rounded-borders border-green shadow-1": val,
|
|
||||||
"rounded-borders shadow-1": !val,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const addNewImage = async () => {
|
|
||||||
inputImage.value.click();
|
|
||||||
await imageActive(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const clickImage = async () => {
|
|
||||||
await fetchAvatarHistory();
|
|
||||||
dialogImage.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeImage = () => {
|
|
||||||
dialogImage.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeLeave = () => {
|
|
||||||
dialogLeave.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeKp7 = () => {
|
|
||||||
dialog.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeKp7Short = () => {
|
|
||||||
dialogShort.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const downloadKP7 = () => {};
|
|
||||||
|
|
||||||
const downloadKP7Short = () => {};
|
|
||||||
|
|
||||||
const downloadFilePDF = async (res: string, fileName: string) => {
|
|
||||||
const link = document.createElement("a");
|
|
||||||
// link.href = window.URL.createObjectURL(new Blob([res]));
|
|
||||||
link.href = window.URL.createObjectURL(
|
|
||||||
new Blob([res], {
|
|
||||||
type: "application/vnd.ms-excel",
|
|
||||||
})
|
|
||||||
);
|
|
||||||
link.setAttribute("download", fileName);
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
};
|
|
||||||
|
|
||||||
const clickKp7Short = async () => {
|
|
||||||
if (profileId.value !== "") {
|
|
||||||
window.open(config.API.profileKp7ShortId(profileId.value));
|
|
||||||
}
|
|
||||||
// showLoader();
|
|
||||||
// await http
|
|
||||||
// .get(config.API.profileKp7ShortId(profileId.value))
|
|
||||||
// .then((res) => {
|
|
||||||
// if (res.data) {
|
|
||||||
// pdfSrcShort.value = "g==";
|
|
||||||
// pdfCurrentPageShort.value = 1;
|
|
||||||
// pdfTotalPageShort.value = 7;
|
|
||||||
// dialogShort.value = true;
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// .catch((e) => {messageError($q, e);})
|
|
||||||
// .finally(() => {
|
|
||||||
// hideLoader();
|
|
||||||
// });
|
|
||||||
};
|
|
||||||
|
|
||||||
const clickRetire = async () => {
|
|
||||||
if (reasonStatus.value == true) {
|
|
||||||
dialogMessage(
|
|
||||||
$q,
|
|
||||||
"โปรดยืนยัน",
|
|
||||||
"ต้องการย้ายข้อมูลจากพ้นราชการไปถือครองใช่หรือไม่",
|
|
||||||
"info",
|
|
||||||
undefined,
|
|
||||||
"primary",
|
|
||||||
Retire,
|
|
||||||
undefined,
|
|
||||||
false
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
leaveDate.value = new Date();
|
|
||||||
leaveDetail.value = "";
|
|
||||||
leaveNumberOrder.value = "";
|
|
||||||
leaveDateOrder.value = new Date();
|
|
||||||
reason.value = "";
|
|
||||||
dialogLeave.value = true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const Retire = async () => {
|
|
||||||
if (profileId.value !== "") {
|
|
||||||
if (reasonStatus.value == true) {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileReactive(profileId.value))
|
|
||||||
.then((res) => {
|
|
||||||
if (res.data) {
|
|
||||||
dialogLeave.value = false;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
router.push("/registry");
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
showLoader();
|
|
||||||
await http
|
|
||||||
.put(config.API.profileDeactive(profileId.value), {
|
|
||||||
leaveDate: dateToISO(leaveDate.value),
|
|
||||||
leaveDetail: leaveDetail.value,
|
|
||||||
leaveNumberOrder: leaveNumberOrder.value,
|
|
||||||
leaveDateOrder: dateToISO(leaveDateOrder.value),
|
|
||||||
reason: reason.value,
|
|
||||||
})
|
|
||||||
.then((res) => {
|
|
||||||
if (res.data) {
|
|
||||||
dialogLeave.value = false;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((e) => {
|
|
||||||
messageError($q, e);
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
router.push("/registry");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="col-12 row">
|
|
||||||
<div class="row col-12" style="padding-top: 80px">
|
|
||||||
<div id="information" name="1" class="row col-12 information q-mt-sm">
|
|
||||||
<!-- <Informationvue
|
|
||||||
v-model:statusEdit="statusEdit"
|
|
||||||
:profileType="profileType"
|
|
||||||
/> -->
|
|
||||||
<Information
|
|
||||||
v-model:statusEdit="statusEdit"
|
|
||||||
:fetchDataProfile="fetchData"
|
|
||||||
:statusAdd="false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div id="government" name="16" class="row col-12">
|
|
||||||
<!-- <Government v-model:statusEdit="statusEdit" :statusAdd="false" /> -->
|
|
||||||
</div>
|
|
||||||
<div id="tempInformation" name="19" class="row col-12">
|
|
||||||
<TempInformation v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="Employment" name="20" class="row col-12 q-mt-md">
|
|
||||||
<Employment v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="address" name="17" class="row col-12">
|
|
||||||
<Address v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="family" name="18" class="row col-12">
|
|
||||||
<Family v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="certicate" name="15" class="row col-12">
|
|
||||||
<Certicate
|
|
||||||
v-model:statusEdit="statusEdit"
|
|
||||||
:statusAdd="false"
|
|
||||||
profileType="employee"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div id="education" name="2" class="row col-12 q-mt-md">
|
|
||||||
<EducationVue v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="training" name="3" class="row col-12 q-mt-md">
|
|
||||||
<TrainVue v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="assessment" name="6" class="row col-12 q-mt-md">
|
|
||||||
<AssessmentVue
|
|
||||||
v-model:statusEdit="statusEdit"
|
|
||||||
:statusAdd="false"
|
|
||||||
profileType="employee"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div id="position" name="7" class="row col-12 q-mt-md">
|
|
||||||
<!-- <SalaryVue
|
|
||||||
v-model:statusEdit="statusEdit" :statusAdd="false"
|
|
||||||
v-if="profileType === 'officer'"
|
|
||||||
/> -->
|
|
||||||
|
|
||||||
<SalaryEmployeeVue v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="rule" name="8" class="row col-12 q-mt-md">
|
|
||||||
<DisciplineVue v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="leave" name="9" class="row col-12 q-mt-md">
|
|
||||||
<LeaveVue v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="talent" name="10" class="row col-12 q-mt-md">
|
|
||||||
<TalentVue v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="work" name="11" class="row col-12 q-mt-md">
|
|
||||||
<WorkVue v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="other" name="13" class="row col-12 q-mt-md">
|
|
||||||
<OtherVue v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
<div id="document" name="14" class="row col-12 q-my-md">
|
|
||||||
<DocumentVue v-model:statusEdit="statusEdit" :statusAdd="false" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<q-page-sticky
|
|
||||||
position="top"
|
|
||||||
expand
|
|
||||||
class="bg-grey-2 text-white"
|
|
||||||
style="z-index: 99; padding: 0% 1% 0% 1%"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="row col-12 q-gutter-sm q-pb-sm text-dark no-wrap items-center"
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
class="bg-teal-1 full-height"
|
|
||||||
color="primary"
|
|
||||||
icon="mdi-chevron-left"
|
|
||||||
dense
|
|
||||||
@click="router.go(-1)"
|
|
||||||
>
|
|
||||||
</q-btn>
|
|
||||||
<q-avatar
|
|
||||||
v-if="imageUrl == null"
|
|
||||||
size="65px"
|
|
||||||
rounded
|
|
||||||
class="containerimage"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="@/assets/avatar_user.jpg"
|
|
||||||
class="bg-grey-3"
|
|
||||||
style="object-fit: cover"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
|
||||||
@click="clickImage()"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-camera" size="18px" color="blue">
|
|
||||||
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
|
||||||
</q-icon>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
style="display: none"
|
|
||||||
ref="inputImage"
|
|
||||||
accept="image/*"
|
|
||||||
@change="uploadImage"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-avatar>
|
|
||||||
<q-avatar v-else size="65px" rounded class="containerimage">
|
|
||||||
<img :src="imageUrl" class="bg-grey-3" style="object-fit: cover" />
|
|
||||||
<div
|
|
||||||
class="overlay absolute-bottom text-subtitle2 text-center cursor-pointer"
|
|
||||||
@click="clickImage()"
|
|
||||||
>
|
|
||||||
<q-icon name="mdi-camera" size="18px" color="blue">
|
|
||||||
<q-tooltip>อัปเดตรูปภาพ</q-tooltip>
|
|
||||||
</q-icon>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
style="display: none"
|
|
||||||
ref="inputImage"
|
|
||||||
accept="image/*"
|
|
||||||
@change="uploadImage"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-avatar>
|
|
||||||
<div class="row items-center text-dark q-ml-md">
|
|
||||||
<div class="column">
|
|
||||||
<div class="text-bold q-pb-xs text-name">
|
|
||||||
{{ fullname }}{{ leaveReason }}
|
|
||||||
</div>
|
|
||||||
<div>{{ position }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<q-space />
|
|
||||||
</div>
|
|
||||||
</q-page-sticky>
|
|
||||||
</div>
|
|
||||||
<q-dialog v-model="dialog" persistent>
|
|
||||||
<q-card style="width: 90vw; max-width: 80vw">
|
|
||||||
<q-card-section class="row items-center q-pb-xs col-12">
|
|
||||||
<q-space />
|
|
||||||
<q-btn
|
|
||||||
@click="downloadKP7()"
|
|
||||||
unelevated
|
|
||||||
class="btn_purple q-mr-sm"
|
|
||||||
label="ดาวน์โหลด ก.พ.7/ก.ก.1"
|
|
||||||
></q-btn>
|
|
||||||
<q-btn
|
|
||||||
icon="close"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
@click="closeKp7"
|
|
||||||
style="color: #ff8080; background-color: #ffdede"
|
|
||||||
/>
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
<q-dialog v-model="dialogShort" persistent>
|
|
||||||
<q-card style="width: 90vw; max-width: 80vw">
|
|
||||||
<q-card-section class="row items-center q-pb-xs col-12">
|
|
||||||
<q-space />
|
|
||||||
<q-btn
|
|
||||||
@click="downloadKP7Short()"
|
|
||||||
unelevated
|
|
||||||
class="btn_purple q-mr-sm"
|
|
||||||
label="ดาวน์โหลด ประวัติแบบย่อ"
|
|
||||||
></q-btn>
|
|
||||||
<q-btn
|
|
||||||
icon="close"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
@click="closeKp7Short"
|
|
||||||
style="color: #ff8080; background-color: #ffdede"
|
|
||||||
/>
|
|
||||||
</q-card-section>
|
|
||||||
<q-card-section class="q-p-sm">
|
|
||||||
<!-- <viewpdf
|
|
||||||
:src="pdfSrcShort"
|
|
||||||
:currentpage="pdfCurrentPageShort"
|
|
||||||
:totalpage="pdfTotalPageShort"
|
|
||||||
></viewpdf> -->
|
|
||||||
</q-card-section>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
<!-- Dialog เลือก Image -->
|
|
||||||
<q-dialog v-model="dialogImage" persistent>
|
|
||||||
<q-card style="width: 100vw; max-width: 60vw">
|
|
||||||
<q-card-section class="q-py-sm row">
|
|
||||||
<div class="text-h6">เลือกรูปภาพ</div>
|
|
||||||
<q-space />
|
|
||||||
<q-btn
|
|
||||||
icon="close"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
@click="closeImage"
|
|
||||||
style="color: #ff8080; background-color: #ffdede"
|
|
||||||
>
|
|
||||||
<q-tooltip>ปิดหน้านี้</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<q-card-section class="col-12 row">
|
|
||||||
<div
|
|
||||||
class="row wrap items-start col-12 q-col-gutter-sm"
|
|
||||||
style="height: 320px; overflow: auto"
|
|
||||||
>
|
|
||||||
<div class="col-3" @click="addNewImage">
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
height: 160px;
|
|
||||||
max-width: 15vw;
|
|
||||||
display: flex !important;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
class="column rounded-borders cursor-pointer bg-active-image text-white"
|
|
||||||
>
|
|
||||||
<q-icon name="add" size="60px" color="white" />
|
|
||||||
<strong>อัปโหลดรูปภาพ</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-for="n in images"
|
|
||||||
:key="n"
|
|
||||||
class="col-3"
|
|
||||||
@click="imageActive(n)"
|
|
||||||
>
|
|
||||||
<div :class="getClass(n)">
|
|
||||||
<q-img
|
|
||||||
v-if="n.avatar != null"
|
|
||||||
:src="n.avatar"
|
|
||||||
:class="imageClass(n)"
|
|
||||||
>
|
|
||||||
<!-- <div
|
|
||||||
class="absolute-top bg-transparent cursor-pointer text-right"
|
|
||||||
style="padding: 5px"
|
|
||||||
>
|
|
||||||
<q-btn
|
|
||||||
icon="delete"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
@click="deletePhoto"
|
|
||||||
style="color: #ff8080"
|
|
||||||
/>
|
|
||||||
</div> -->
|
|
||||||
<div
|
|
||||||
class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
|
|
||||||
style="padding: 5px"
|
|
||||||
>
|
|
||||||
{{ date2Thai(n.createdDate) }}
|
|
||||||
|
|
||||||
<q-btn
|
|
||||||
v-if="!n.isActive"
|
|
||||||
icon="delete"
|
|
||||||
unelevated
|
|
||||||
dense
|
|
||||||
@click="deletePhoto(n.id)"
|
|
||||||
class="bg-white"
|
|
||||||
style="color: #ff8080"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</q-img>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<q-card-actions align="right">
|
|
||||||
<!-- <q-btn
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
color="red"
|
|
||||||
@click="() => {}"
|
|
||||||
icon="mdi-delete-outline"
|
|
||||||
>
|
|
||||||
<q-tooltip>ลบรูปภาพ</q-tooltip>
|
|
||||||
</q-btn> -->
|
|
||||||
<q-btn
|
|
||||||
icon="check"
|
|
||||||
dense
|
|
||||||
flat
|
|
||||||
round
|
|
||||||
@click="selectAvatarHistory"
|
|
||||||
color="positive"
|
|
||||||
>
|
|
||||||
<q-tooltip>เลือกรูปภาพ</q-tooltip>
|
|
||||||
</q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
<!-- Dialog เลือก เกษียณ -->
|
|
||||||
<q-dialog v-model="dialogLeave" persistent>
|
|
||||||
<q-card style="width: 600px">
|
|
||||||
<q-toolbar>
|
|
||||||
<q-toolbar-title class="text-subtitle2 text-bold"
|
|
||||||
>ประเภทการพ้นราชการ
|
|
||||||
</q-toolbar-title>
|
|
||||||
<q-btn
|
|
||||||
icon="close"
|
|
||||||
unelevated
|
|
||||||
round
|
|
||||||
dense
|
|
||||||
@click="closeLeave"
|
|
||||||
style="color: #ff8080; background-color: #ffdede"
|
|
||||||
/>
|
|
||||||
</q-toolbar>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
<q-select
|
|
||||||
class="full-width inputgreen cursor-pointer"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
v-model="reason"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกประเภทการพ้นราชการ'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'ประเภทการพ้นราชการ'}`"
|
|
||||||
emit-value
|
|
||||||
map-options
|
|
||||||
option-label="name"
|
|
||||||
:options="reasonOptions"
|
|
||||||
option-value="id"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="leaveDate"
|
|
||||||
: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="full-width inputgreen cursor-pointer"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
:model-value="date2Thai(leaveDate)"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่พ้นราชการ'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'วันที่พ้นราชการ'}`"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
class="full-width inputgreen cursor-pointer"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
autogrow
|
|
||||||
v-model="leaveDetail"
|
|
||||||
:rules="[
|
|
||||||
(val) =>
|
|
||||||
!!val || `${'กรุณากรอกสาเหตุ/เหตุผลของการพ้นจากราชการ'}`,
|
|
||||||
]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'สาเหตุ/เหตุผลของการพ้นจากราชการ'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<q-input
|
|
||||||
class="full-width inputgreen cursor-pointer"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
lazy-rules
|
|
||||||
autogrow
|
|
||||||
v-model="leaveNumberOrder"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณากรอกคำสั่ง/เอกสารอ้างอิง'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'คำสั่ง/เอกสารอ้างอิง'}`"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-6 col-sm-6 col-md-6">
|
|
||||||
<datepicker
|
|
||||||
menu-class-name="modalfix"
|
|
||||||
v-model="leaveDateOrder"
|
|
||||||
: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="full-width inputgreen cursor-pointer"
|
|
||||||
outlined
|
|
||||||
dense
|
|
||||||
:model-value="date2Thai(leaveDateOrder)"
|
|
||||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ออกคำสั่ง'}`]"
|
|
||||||
hide-bottom-space
|
|
||||||
:label="`${'วันที่ออกคำสั่ง'}`"
|
|
||||||
>
|
|
||||||
<template v-slot:prepend>
|
|
||||||
<q-icon
|
|
||||||
name="event"
|
|
||||||
class="cursor-pointer"
|
|
||||||
style="color: var(--q-primary)"
|
|
||||||
>
|
|
||||||
</q-icon>
|
|
||||||
</template>
|
|
||||||
</q-input>
|
|
||||||
</template>
|
|
||||||
</datepicker>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
<q-separator />
|
|
||||||
<q-card-actions align="right">
|
|
||||||
<q-btn unelevated label="บันทึก" color="public" @click="Retire"
|
|
||||||
><!-- icon="mdi-content-save-outline"
|
|
||||||
<q-tooltip>บันทึก</q-tooltip> -->
|
|
||||||
</q-btn>
|
|
||||||
</q-card-actions>
|
|
||||||
</q-card>
|
|
||||||
</q-dialog>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.image-size-default {
|
|
||||||
height: 150px;
|
|
||||||
max-width: 15vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-size-full {
|
|
||||||
height: 160px;
|
|
||||||
max-width: 15vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-green {
|
|
||||||
border: 5px solid #52c688;
|
|
||||||
}
|
|
||||||
|
|
||||||
.area-div {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-header {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.containerimage {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.containerimage:hover .overlay {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
background-color: #e4f2ffd2 !important;
|
|
||||||
opacity: 0;
|
|
||||||
padding: 2px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.information:target {
|
|
||||||
padding-top: 84px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border-custom {
|
|
||||||
border: 0.5px solid #c3c3c3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-active-image {
|
|
||||||
background-color: #52c688;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-name {
|
|
||||||
font-size: 1.3em;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-sub {
|
|
||||||
font-size: 1.3em;
|
|
||||||
overflow: hidden;
|
|
||||||
color: var(--q-primary);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, reactive, watch } from "vue";
|
import { ref, onMounted, reactive, watch } from "vue";
|
||||||
import { checkPermission } from "@/utils/permissions";
|
|
||||||
import { useQuasar } from "quasar";
|
import { useQuasar } from "quasar";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
import { checkPermission } from "@/utils/permissions";
|
||||||
|
import { useCounterMixin } from "@/stores/mixin";
|
||||||
|
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
|
||||||
import http from "@/plugins/http";
|
import http from "@/plugins/http";
|
||||||
import config from "@/app.config";
|
import config from "@/app.config";
|
||||||
|
|
||||||
|
|
@ -15,13 +17,9 @@ import type {
|
||||||
import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
|
import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
|
||||||
|
|
||||||
/** importComponents*/
|
/** importComponents*/
|
||||||
import DialogAddEmployee from "@/modules/08_registryEmployee/components/DialogAddEmployee.vue";
|
import DialogAddEmployee from "@/modules/08_registryEmployee/components/DialogAddEmployee.vue"; //เพิ่มข้อมูลลูกจ้างชั่วคราว
|
||||||
import DialogSelectPos from "@/modules/08_registryEmployee/components/DialogSelectPos.vue";
|
import DialogSelectPos from "@/modules/08_registryEmployee/components/DialogSelectPos.vue"; //เลือกหน่วยงานที่รับบรรจุ
|
||||||
import DialogSendOrder from "@/modules/08_registryEmployee/components/DialogSendOrder.vue";
|
import DialogSendOrder from "@/modules/08_registryEmployee/components/DialogSendOrder.vue"; //ส่งรายชื่อไปออกคำสั่ง
|
||||||
|
|
||||||
/** inportStore*/
|
|
||||||
import { useCounterMixin } from "@/stores/mixin";
|
|
||||||
import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
|
|
||||||
|
|
||||||
const $q = useQuasar();
|
const $q = useQuasar();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
@ -35,10 +33,15 @@ const {
|
||||||
} = useCounterMixin();
|
} = useCounterMixin();
|
||||||
const { statusText } = useRegistryEmp();
|
const { statusText } = useRegistryEmp();
|
||||||
|
|
||||||
|
const modalAddEmployee = ref<boolean>(false); // popup เพิ่มข้อมูลลูกจ้างชั่วคราว
|
||||||
|
const modalPos = ref<boolean>(false); //popup กำหนดตำแหน่ง
|
||||||
|
const modalSendOrder = ref<boolean>(false); //popup ส่งไปออกคำสั่ง
|
||||||
|
const dataRow = ref<DataEmployee>(); //ข้อมูลรายชื่อลูกจ้างชั่วคราวที่ต้องการกำหนดตำแหน่ง
|
||||||
|
|
||||||
/** Table*/
|
/** Table*/
|
||||||
const rows = ref<DataEmployee[]>([]);
|
const rows = ref<DataEmployee[]>([]); //รายชื่อลูกจ้างชั่วคราว
|
||||||
const maxPage = ref<number>(0);
|
const maxPage = ref<number>(0); //จำนวนหน้า
|
||||||
const total = ref<number>(0);
|
const total = ref<number>(0); //จำนวนข้อมูล
|
||||||
const queryParams = reactive({
|
const queryParams = reactive({
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
|
|
@ -46,11 +49,11 @@ const queryParams = reactive({
|
||||||
searchField: "fullName",
|
searchField: "fullName",
|
||||||
searchKeyword: "",
|
searchKeyword: "",
|
||||||
});
|
});
|
||||||
|
//ประเภทการค้นหา
|
||||||
const searchTypeOption = ref<DataOption[]>([
|
const searchTypeOption = ref<DataOption[]>([
|
||||||
{ id: "fullName", name: "ชื่อ-นามสกุล" },
|
{ id: "fullName", name: "ชื่อ-นามสกุล" },
|
||||||
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
|
{ id: "citizenId", name: "เลขประจำตัวประชาชน" },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const columns = ref<QTableProps["columns"]>([
|
const columns = ref<QTableProps["columns"]>([
|
||||||
{
|
{
|
||||||
name: "no",
|
name: "no",
|
||||||
|
|
@ -123,15 +126,7 @@ const columns = ref<QTableProps["columns"]>([
|
||||||
headerStyle: "font-size: 14px",
|
headerStyle: "font-size: 14px",
|
||||||
style: "font-size: 14px",
|
style: "font-size: 14px",
|
||||||
},
|
},
|
||||||
// {
|
|
||||||
// name: "dateStart",
|
|
||||||
// align: "left",
|
|
||||||
// label: "วันที่เริ่มปฎิบัติราชการ",
|
|
||||||
// sortable: true,
|
|
||||||
// field: "dateStart",
|
|
||||||
// headerStyle: "font-size: 14px",
|
|
||||||
// style: "font-size: 14px",
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
name: "salaryDate",
|
name: "salaryDate",
|
||||||
align: "left",
|
align: "left",
|
||||||
|
|
@ -192,7 +187,6 @@ const visibleColumns = ref<String[]>([
|
||||||
"draftPositionEmployee",
|
"draftPositionEmployee",
|
||||||
"govAge",
|
"govAge",
|
||||||
"dateEmployment",
|
"dateEmployment",
|
||||||
// "dateStart",
|
|
||||||
"age",
|
"age",
|
||||||
"createdAt",
|
"createdAt",
|
||||||
"dateRetireLaw",
|
"dateRetireLaw",
|
||||||
|
|
@ -200,24 +194,11 @@ const visibleColumns = ref<String[]>([
|
||||||
]);
|
]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* function updatePagination
|
* ฟังก์ชันดึงข้อมูลรายชื่อลูกจ้างชั่วคราว
|
||||||
* @param newPagination ข้อมูล Pagination ใหม่
|
|
||||||
*/
|
*/
|
||||||
function updatePagination(newPagination: NewPagination) {
|
|
||||||
queryParams.page = 1;
|
|
||||||
queryParams.pageSize = newPagination.rowsPerPage;
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => queryParams.pageSize,
|
|
||||||
() => {
|
|
||||||
fetchList();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
async function fetchList() {
|
async function fetchList() {
|
||||||
showLoader();
|
showLoader();
|
||||||
http
|
await http
|
||||||
.get(config.API.registryNew("-temp"), { params: queryParams })
|
.get(config.API.registryNew("-temp"), { params: queryParams })
|
||||||
.then(async (res) => {
|
.then(async (res) => {
|
||||||
rows.value = await res.data.result.data;
|
rows.value = await res.data.result.data;
|
||||||
|
|
@ -232,6 +213,10 @@ async function fetchList() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันลบข้อมูลรายชื่อลูกจ้างชั่วคราว
|
||||||
|
* @param id รายชื่อลูกจ้างชั่วคราวที่ต้องการลบ
|
||||||
|
*/
|
||||||
function onClickDelete(id: string) {
|
function onClickDelete(id: string) {
|
||||||
dialogRemove($q, async () => {
|
dialogRemove($q, async () => {
|
||||||
showLoader();
|
showLoader();
|
||||||
|
|
@ -243,36 +228,65 @@ function onClickDelete(id: string) {
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
messageError($q, err);
|
messageError($q, err);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
hideLoader();
|
hideLoader();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ฟังก์ชันดูข้อมูลรายชื่อลูกจ้างชั่วคราว ไปยัง ทะเบียนประวัติลูกจ้างชั่วคราว
|
||||||
|
* @param id รายชื่อลูกจ้างชั่วคราวที่ต้องการ
|
||||||
|
*/
|
||||||
function redirectToPageDetail(id: string) {
|
function redirectToPageDetail(id: string) {
|
||||||
router.push(`/registry-temp/${id}`);
|
router.push(`/registry-temp/${id}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** เพิ่มข้อมูลลูกจ้างชั่วคราว*/
|
/**
|
||||||
const modalAddEmployee = ref<boolean>(false);
|
* ฟังก์ชันเปิด popup เพิ่มข้อมูลลูกจ้างชั่วคราว
|
||||||
|
*/
|
||||||
function onClickAddEmployee() {
|
function onClickAddEmployee() {
|
||||||
modalAddEmployee.value = true;
|
modalAddEmployee.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** เกำหนดตำแหน่ง */
|
/**
|
||||||
const modalPos = ref<boolean>(false);
|
* ฟังก์ชันเปิด popup เลือกหน่วยงานที่รับบรรจุ
|
||||||
const dataRow = ref<DataEmployee>();
|
*/
|
||||||
function onClickSelectPos(data: DataEmployee) {
|
function onClickSelectPos(data: DataEmployee) {
|
||||||
modalPos.value = true;
|
modalPos.value = true;
|
||||||
dataRow.value = data;
|
dataRow.value = data;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** ส่งไปออกคำสั่ง*/
|
/**
|
||||||
const modalSendOrder = ref<boolean>(false);
|
* ฟังก์ชันเปิด popup ส่งรายชื่อไปออกคำสั่ง
|
||||||
|
*/
|
||||||
function onClickSendOrder() {
|
function onClickSendOrder() {
|
||||||
modalSendOrder.value = true;
|
modalSendOrder.value = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* function updatePagination
|
||||||
|
* @param newPagination ข้อมูล Pagination ใหม่
|
||||||
|
*/
|
||||||
|
function updatePagination(newPagination: NewPagination) {
|
||||||
|
queryParams.page = 1;
|
||||||
|
queryParams.pageSize = newPagination.rowsPerPage;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า
|
||||||
|
*/
|
||||||
|
watch(
|
||||||
|
() => queryParams.pageSize,
|
||||||
|
() => {
|
||||||
|
fetchList();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ทำงานเมื่อมีการเรียกใข้ Components
|
||||||
|
*/
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fetchList();
|
await fetchList();
|
||||||
});
|
});
|
||||||
|
|
@ -505,13 +519,13 @@ onMounted(async () => {
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|
||||||
<DialogAddEmployee v-model:modal="modalAddEmployee" :fetchData="fetchList" />
|
<DialogAddEmployee v-model:modal="modalAddEmployee" :fetch-data="fetchList" />
|
||||||
|
|
||||||
<DialogSelectPos
|
<DialogSelectPos
|
||||||
v-model:modal="modalPos"
|
v-model:modal="modalPos"
|
||||||
:dataRow="dataRow"
|
:data-row="dataRow"
|
||||||
:fetchData="fetchList"
|
:fetch-data="fetchList"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<DialogSendOrder v-model:modal="modalSendOrder" :fetchData="fetchList" />
|
<DialogSendOrder v-model:modal="modalSendOrder" :fetch-data="fetchList" />
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue