Refactoring code module 05_placement
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
202fbf27b6
commit
4678ead38e
75 changed files with 3110 additions and 10795 deletions
|
|
@ -1,17 +1,15 @@
|
|||
<!-- card ข้อมูลที่อยู่ -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
|
||||
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import { AddressDataDefualt } from "@/modules//05_placement/interface/index/Main";
|
||||
import type { zipCodeOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
import type {
|
||||
AddressOps,
|
||||
Address as AddressType,
|
||||
|
|
@ -20,6 +18,16 @@ import type {
|
|||
} from "@/modules/05_placement/interface/index/Main";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
|
|
@ -40,21 +48,11 @@ const props = defineProps({
|
|||
});
|
||||
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 onEdit = ref<boolean>(false);
|
||||
const addressData = ref<AddressType>(props.data);
|
||||
const myform = ref<any>();
|
||||
const myform = ref<any>(); //refForm
|
||||
const edit = ref<boolean>(false); //การแก้ไข
|
||||
const onEdit = ref<boolean>(false); //การแก้ไข
|
||||
const addressData = ref<AddressType>(props.data); //ข้อมูลที่อยู่
|
||||
//ตัวเลือกข้อมูลที่อยู่
|
||||
const Ops = ref<AddressOps>({
|
||||
provinceOps: [],
|
||||
districtOps: [],
|
||||
|
|
@ -62,6 +60,7 @@ const Ops = ref<AddressOps>({
|
|||
subdistrictOps: [],
|
||||
subdistrictCOps: [],
|
||||
});
|
||||
//ข้อมูลที่อยู่
|
||||
const OpsFilter = ref<AddressOps>({
|
||||
provinceOps: [],
|
||||
districtOps: [],
|
||||
|
|
@ -69,14 +68,14 @@ const OpsFilter = ref<AddressOps>({
|
|||
subdistrictOps: [],
|
||||
subdistrictCOps: [],
|
||||
});
|
||||
|
||||
//ที่อยู่ตามทะเบียนบ้าน
|
||||
const registAddress = reactive<AddressData>({
|
||||
subDistrictId: "",
|
||||
zipCode: "",
|
||||
districtId: "",
|
||||
provinceId: "",
|
||||
});
|
||||
|
||||
//ที่อยู่ปัจบัน
|
||||
const currentAddress = reactive<AddressData>({
|
||||
subDistrictId: "",
|
||||
zipCode: "",
|
||||
|
|
@ -84,12 +83,13 @@ const currentAddress = reactive<AddressData>({
|
|||
provinceId: "",
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await getNewData();
|
||||
emit("update:statusEdit", false);
|
||||
});
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
/**
|
||||
* ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
|
||||
* @param val คำค้นหา
|
||||
* @param update ฟังก์ชัน
|
||||
* @param refData ประเภทของตัวเลือก
|
||||
*/
|
||||
function filterSelector(val: string, update: Function, refData: string) {
|
||||
switch (refData) {
|
||||
case "provinceOps":
|
||||
update(() => {
|
||||
|
|
@ -130,9 +130,9 @@ const filterSelector = (val: any, update: Function, refData: string) => {
|
|||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const refreshData = async () => {
|
||||
function refreshData() {
|
||||
myform.value.reset();
|
||||
if (onEdit.value) {
|
||||
dialogConfirm(
|
||||
|
|
@ -150,15 +150,21 @@ const refreshData = async () => {
|
|||
} else {
|
||||
edit.value = false;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const getNewData = async () => {
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลใหม่
|
||||
*/
|
||||
async function getNewData() {
|
||||
await fetchProvince();
|
||||
};
|
||||
}
|
||||
|
||||
// บันทึกข้อมูล
|
||||
const editData = async () => {
|
||||
/**
|
||||
* ฟังก์ชันบันทึกการแก้ไข
|
||||
*/
|
||||
async function editData() {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
const body = {
|
||||
registrationSame: addressData.value.registSame == "1",
|
||||
registrationAddress: addressData.value.registAddress,
|
||||
|
|
@ -201,13 +207,19 @@ const editData = async () => {
|
|||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
// เลือกข้อมูลจังหวัด
|
||||
const selectProvince = async (e: string | null, name: string) => {
|
||||
/**
|
||||
* ฟังก์ชันเลือกข้อมูลจังหวัด
|
||||
* @param e id จังหวัด
|
||||
* @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
async function selectProvince(e: string | null, name: string) {
|
||||
onEdit.value = true;
|
||||
if (e != null) {
|
||||
if (name == "1") {
|
||||
|
|
@ -222,10 +234,14 @@ const selectProvince = async (e: string | null, name: string) => {
|
|||
myform.value.resetValidation();
|
||||
await fetchDistrict(e, name);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// เลือกข้อมูลอำเภอ
|
||||
const selectDistrict = async (e: string | null, name: string) => {
|
||||
/**
|
||||
* ฟังก์ชันลือกข้อมูลอำเภอ
|
||||
* @param e id อำเภอ
|
||||
* @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
async function selectDistrict(e: string | null, name: string) {
|
||||
onEdit.value = true;
|
||||
if (e != null) {
|
||||
if (name == "1") {
|
||||
|
|
@ -238,10 +254,14 @@ const selectDistrict = async (e: string | null, name: string) => {
|
|||
myform.value.resetValidation();
|
||||
await fetchSubDistrict(e, name);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// เลือกข้อมูลตำบล
|
||||
const selectSubDistrict = (e: string | null, name: string) => {
|
||||
/**
|
||||
* ฟังก์ชันเลือกข้อมูลตำบล
|
||||
* @param e id ตำบล
|
||||
* @param name ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
async function selectSubDistrict(e: string | null, name: string) {
|
||||
onEdit.value = true;
|
||||
if (e != null) {
|
||||
if (name == "1") {
|
||||
|
|
@ -254,10 +274,12 @@ const selectSubDistrict = (e: string | null, name: string) => {
|
|||
currentAddress.zipCode = namecode;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// ดึงข้อมูลจังหวัด
|
||||
const fetchProvince = async () => {
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลจังหวัด
|
||||
*/
|
||||
async function fetchProvince() {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.orgProvince)
|
||||
|
|
@ -330,10 +352,14 @@ const fetchProvince = async () => {
|
|||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {});
|
||||
};
|
||||
}
|
||||
|
||||
// ดึงข้อมูลอำเภอ
|
||||
const fetchDistrict = async (id: string | null, position: string) => {
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลอำเภอ
|
||||
* @param id จังหวัด
|
||||
* @param position ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
async function fetchDistrict(id: string | null, position: string) {
|
||||
if (id != null && id != "") {
|
||||
await http
|
||||
.get(config.API.orgProvince + `/${id}`)
|
||||
|
|
@ -373,10 +399,14 @@ const fetchDistrict = async (id: string | null, position: string) => {
|
|||
})
|
||||
.finally(() => {});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// ดึงข้อมูลตำบล
|
||||
const fetchSubDistrict = async (id: string | null, position: string) => {
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลตำบล
|
||||
* @param id อำเภอ
|
||||
* @param position ที่อยู่ตามทะเบียนบ้าน , ที่อยู่ปัจจุบัน
|
||||
*/
|
||||
async function fetchSubDistrict(id: string | null, position: string) {
|
||||
if (id != null && id != "") {
|
||||
await http
|
||||
.get(config.API.orgDistrict + `/${id}`)
|
||||
|
|
@ -422,9 +452,12 @@ const fetchSubDistrict = async (id: string | null, position: string) => {
|
|||
hideLoader();
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const changeBtn = async () => {
|
||||
/**
|
||||
* ฟังก์ชันการแก้ไขข้อมูล
|
||||
*/
|
||||
function changeBtn() {
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
props.notiNoEdit();
|
||||
|
|
@ -434,18 +467,33 @@ const changeBtn = async () => {
|
|||
} else {
|
||||
emit("update:statusEdit", false);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const getClass = (val: boolean) => {
|
||||
/**
|
||||
* ฟังก์ชันแก้ไขข้อมูล
|
||||
*/
|
||||
function checkEdit() {
|
||||
onEdit.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันสำหรับคืนค่าชื่อคลาสตามค่าที่กำหนด
|
||||
* @param val ค่าที่ใช้กำหนดคลาส
|
||||
*/
|
||||
function getClass(val: boolean) {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
|
||||
function checkEdit() {
|
||||
onEdit.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* ทำงานเมื่อมีการเรียกใช้ Components
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await getNewData();
|
||||
emit("update:statusEdit", false);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,30 @@
|
|||
<!-- card ใบอนุญาตประกอบอาชีพ -->
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useProfileDataStore } from "@/modules/05_placement/store";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useDataStore } from "@/stores/data";
|
||||
import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Table.vue";
|
||||
import DialogHeader from "@/modules/05_placement/components/PersonalDetail/DialogHeader.vue";
|
||||
import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/05_placement/store";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
RequestItemsObject,
|
||||
DataProps,
|
||||
} from "@/modules/05_placement/interface/request/Certificate";
|
||||
import type { ResponseObject } from "@/modules/05_placement/interface/response/Certificate";
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import type { QTableProps } from "quasar";
|
||||
import type { PropType } from "vue";
|
||||
import type { Certificate } from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
import HistoryTable from "@/components/TableHistory.vue";
|
||||
import ProfileTable from "@/modules/05_placement/components/PersonalDetail/Information/TableEducation.vue";
|
||||
import DialogHeader from "@/components/DialogHeader.vue";
|
||||
import DialogFooter from "@/modules/05_placement/components/PersonalDetail/DialogFooter.vue";
|
||||
|
||||
/**
|
||||
* props
|
||||
*/
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
|
|
@ -48,7 +52,7 @@ const mixin = useCounterMixin();
|
|||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
|
|
@ -75,10 +79,7 @@ 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 profileId = ref<string>("");
|
||||
const rows = ref<Certificate[]>([]);
|
||||
const filter = ref<string>(""); //search data table
|
||||
|
|
@ -238,19 +239,6 @@ const visibleColumnsHistory = ref<String[]>([
|
|||
"createdAt",
|
||||
]);
|
||||
|
||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||
await changeProfileColumns("certicate", count);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
// await fetchData();
|
||||
if (route.params.id) {
|
||||
profileId.value = route.params.personalId.toString();
|
||||
}
|
||||
// await props.fetch();
|
||||
rows.value = props.data;
|
||||
});
|
||||
|
||||
/**
|
||||
* กดดูข้อมูลก่อนหน้า
|
||||
*/
|
||||
|
|
@ -489,55 +477,6 @@ 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 สำหรับแก้ไขหรือไม่
|
||||
|
|
@ -548,6 +487,17 @@ const getClass = (val: boolean) => {
|
|||
"full-width cursor-pointer": !val,
|
||||
};
|
||||
};
|
||||
|
||||
watch(visibleColumns, async (count: String[], prevCount: String[]) => {
|
||||
changeProfileColumns("certicate", count);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (route.params.id) {
|
||||
profileId.value = route.params.personalId.toString();
|
||||
}
|
||||
rows.value = props.data;
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md q-mt-md no-border">
|
||||
|
|
@ -587,17 +537,6 @@ const getClass = (val: boolean) => {
|
|||
{{ 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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted, computed, ref, watch } from "vue";
|
||||
import { useQuasar, QForm } from "quasar";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useRoute } from "vue-router";
|
||||
import axios from "axios";
|
||||
|
|
@ -15,6 +15,18 @@ interface ArrayFileList {
|
|||
fileName: string;
|
||||
}
|
||||
|
||||
const $q = useQuasar(); // show dialog
|
||||
const mixin = useCounterMixin();
|
||||
const route = useRoute();
|
||||
const {
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
dialogConfirm,
|
||||
hideLoader,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
|
|
@ -41,72 +53,13 @@ const emit = defineEmits(["update:statusEdit"]);
|
|||
const documentFile = ref<any>(null);
|
||||
const fileList = ref<ArrayFileList[]>([]);
|
||||
|
||||
const $q = useQuasar(); // show dialog
|
||||
const mixin = useCounterMixin();
|
||||
const route = useRoute();
|
||||
const {
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
dialogConfirm,
|
||||
hideLoader,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
const profileId = ref<string>(
|
||||
route.params.personalId ? route.params.personalId.toString() : ""
|
||||
);
|
||||
const edit = ref<boolean>(false);
|
||||
const uploader = ref<any>();
|
||||
const files = ref<any>([]);
|
||||
const file = ref<any>([]);
|
||||
const edit = ref<boolean>(false); //การแก้ไขข้อมูล
|
||||
const uploader = ref<any>(); //
|
||||
const file = ref<any>([]); //ไฟล์์
|
||||
const name = ref<string>("");
|
||||
const dataMain = ref<any>([]);
|
||||
|
||||
// const getData = async () => {
|
||||
// if (props.datainformation) {
|
||||
// dataMain.value = props.datainformation;
|
||||
// files.value = dataMain.value.docs;
|
||||
// }
|
||||
|
||||
// โค้ดเก่ายังไม่ได้ใช้
|
||||
// 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) => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.delete(config.API.documentDelid(profileId.value, id))
|
||||
.then(() => {
|
||||
success($q, "ลบไฟล์เอกสารสำเร็จ");
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
await props.fetch();
|
||||
});
|
||||
},
|
||||
"ยืนยันการลบเอกสารหลักฐาน",
|
||||
"ต้องการยืนยันการลบเอกสารหลักฐานนี้หรือไม่ ?"
|
||||
);
|
||||
};
|
||||
|
||||
const uploadData = async () => {
|
||||
if (profileId.value) {
|
||||
|
|
@ -117,7 +70,6 @@ const uploadData = async () => {
|
|||
});
|
||||
const formData = new FormData();
|
||||
formData.append("file", newFile);
|
||||
// formData.append("moss", "newFile");
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.documentByid(profileId.value), formData)
|
||||
|
|
@ -134,26 +86,10 @@ const uploadData = async () => {
|
|||
edit.value = false;
|
||||
emit("update:statusEdit", false);
|
||||
});
|
||||
// } 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) {
|
||||
|
|
@ -171,7 +107,6 @@ const changeBtn = async () => {
|
|||
/** ฟังชั่นใหม่ */
|
||||
function clickUpload(file: any) {
|
||||
const fileName = { fileName: file.name };
|
||||
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
|
|
@ -295,6 +230,9 @@ function deleteFile(fileName: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันดึงข้อมูลรายการไฟล์
|
||||
*/
|
||||
async function getData() {
|
||||
showLoader();
|
||||
await http
|
||||
|
|
@ -312,6 +250,9 @@ async function getData() {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ทำงานเมื่อมีการเรียกใช้ Components
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await getData();
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,115 @@
|
|||
<script setup lang="ts">
|
||||
import type { PropType } from "vue";
|
||||
import type { PointExam } from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object as PropType<PointExam>,
|
||||
default: {
|
||||
pointA: 0,
|
||||
pointB: 0,
|
||||
pointC: 0,
|
||||
pointTotalA: 0,
|
||||
pointTotalB: 0,
|
||||
pointTotalC: 0,
|
||||
point: 0,
|
||||
pointTotal: 0,
|
||||
examNumber: 0,
|
||||
examRound: 0,
|
||||
pass: "",
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
|
||||
<q-icon
|
||||
name="mdi-briefcase-edit"
|
||||
size="1.5em"
|
||||
color="grey-5"
|
||||
class="q-pr-md"
|
||||
/>
|
||||
<span class="text-bold text-subtitle2">ผลการสอบ</span>
|
||||
</div>
|
||||
<div class="row q-px-md">
|
||||
<div class="col q-pl-xl">
|
||||
<q-card class="q-pt-xs">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="header-text-right q-px-xs">ผลการสอบ</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">
|
||||
{{ props.data.pass ? props.data.pass : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="header-text-right q-px-xs">ลำดับที่สอบได้</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">
|
||||
{{ props.data.examNumber ? props.data.examNumber : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="header-text-right q-px-xs">จำนวนครั้งที่สมัครสอบ</div>
|
||||
<div class="sub-text-right q-px-xs q-pb-sm">
|
||||
{{ props.data.examRound ? props.data.examRound : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.header-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.header-text-right {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 150%;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
.sub-text-right {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 150%;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.0025em;
|
||||
color: #35373c;
|
||||
}
|
||||
|
||||
.card-exam {
|
||||
border-radius: 5px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.header-sub-text-exam {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 150%;
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
.header-sub-text-exam-2 {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 150%;
|
||||
color: #00aa86;
|
||||
}
|
||||
|
||||
.sub-text-exam {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +1,24 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import type { QForm } from "quasar";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { DataOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import { FamilyDataDefualt } from "@/modules/05_placement/interface/index/Main";
|
||||
import type { QForm } from "quasar";
|
||||
import type { PropType } from "vue";
|
||||
import type { Family } from "@/modules/05_placement/interface/index/Main";
|
||||
import { FamilyDataDefualt } from "@/modules/05_placement/interface/index/Main";
|
||||
import type { DataOption } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
|
||||
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const mixin = useCounterMixin();
|
||||
const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
|
|
@ -38,29 +46,25 @@ const props = defineProps({
|
|||
});
|
||||
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 onEdit = ref<boolean>(false);
|
||||
|
||||
const myform = ref<QForm | null>(null);
|
||||
const familyData = ref<Family>(props.data);
|
||||
const edit = ref<boolean>(false); //การแก้ไขข้อมูล
|
||||
const onEdit = ref<boolean>(false); //การแก้ไขข้อมูล
|
||||
const familyData = ref<Family>(props.data); //ข้อมูลครอบครัว
|
||||
|
||||
/**
|
||||
* ฟังก์ชันแก้ไขข้อมูล
|
||||
*/
|
||||
function checkEdit() {
|
||||
onEdit.value = true;
|
||||
}
|
||||
|
||||
function filterSelector(val: any, update: Function, refData: string) {
|
||||
/**
|
||||
* ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
|
||||
* @param val คำค้นหา
|
||||
* @param update ฟังก์ชัน
|
||||
* @param refData ประเภทของตัวเลือก
|
||||
*/
|
||||
function filterSelector(val: string, update: Function, refData: string) {
|
||||
update(() => {
|
||||
props.Ops[`${refData}`] = props.OpsFilter[`${refData}`].filter(
|
||||
(v: DataOption) => v.name.indexOf(val) > -1
|
||||
|
|
@ -121,32 +125,30 @@ async function editData() {
|
|||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
})
|
||||
.finally(async () => {});
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function saveData() {
|
||||
await myform.value?.validate().then(async (success: boolean) => {
|
||||
if (success) {
|
||||
await editData();
|
||||
} else {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectRadio(e: boolean, i: any) {
|
||||
/**
|
||||
* ฟังก์ชันเลือกคู่สมรส
|
||||
* @param e มี, ไม่มีคู่สมรส
|
||||
*/
|
||||
function selectRadio(e: boolean) {
|
||||
onEdit.value = true;
|
||||
if (e) {
|
||||
familyData.value.marryPrefixId = "";
|
||||
familyData.value.marryFirstName = "";
|
||||
familyData.value.marryLastName = "";
|
||||
// familyData.value.lastnameCOld = "";
|
||||
familyData.value.marryOccupation = "";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันการแก้ไขข้อมูล
|
||||
*/
|
||||
async function changeBtn() {
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
|
|
@ -159,6 +161,10 @@ async function changeBtn() {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันสำหรับคืนค่าชื่อคลาสตามค่าที่กำหนด
|
||||
* @param val ค่าที่ใช้กำหนดคลาส
|
||||
*/
|
||||
function getClass(val: boolean) {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
|
|
@ -166,6 +172,9 @@ function getClass(val: boolean) {
|
|||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* ทำงานเมื่อมีการเรียกใช้ Components
|
||||
*/
|
||||
onMounted(async () => {
|
||||
emit("update:statusEdit", false);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,25 +1,40 @@
|
|||
<!-- card ข้อมูลส่วนตัว -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useQuasar } from "quasar";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useProfileDataStore } from "@/modules/05_placement/store";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type {
|
||||
Information,
|
||||
DataOption,
|
||||
} from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
import type { QForm } from "quasar";
|
||||
import { defaultInformation } from "@/modules/05_placement/components/PersonalDetail/profileType";
|
||||
|
||||
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useProfileDataStore } from "@/modules/05_placement/store";
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const profileStore = useProfileDataStore();
|
||||
const { changeRetireText, changeBirth } = profileStore;
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
modalError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
|
||||
import type { QForm } from "quasar";
|
||||
import type { PropType } from "vue";
|
||||
|
||||
const onEdit = ref<boolean>(false);
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
|
|
@ -46,30 +61,11 @@ const props = defineProps({
|
|||
});
|
||||
const emit = defineEmits(["update:statusEdit"]);
|
||||
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
success,
|
||||
dateToISO,
|
||||
messageError,
|
||||
modalError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
|
||||
const profileStore = useProfileDataStore();
|
||||
const { changeRetireText, changeBirth } = profileStore;
|
||||
const edit = ref<boolean>(false);
|
||||
const informaData = ref<Information>(props.data);
|
||||
const age = ref<boolean>(true);
|
||||
const myform = ref<QForm | null>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
emit("update:statusEdit", false);
|
||||
});
|
||||
const onEdit = ref<boolean>(false); //การแก้ไขข้อมูล
|
||||
const edit = ref<boolean>(false); //การแก้ไขข้อมูล
|
||||
const informaData = ref<Information>(props.data); //ข้อมูลส่วนตัว
|
||||
const age = ref<boolean>(true); //อายุ
|
||||
|
||||
const onCancel = async () => {
|
||||
if (myform.value != null) {
|
||||
|
|
@ -92,7 +88,13 @@ const onCancel = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
const filterSelector = (val: any, update: Function, refData: string) => {
|
||||
/**
|
||||
* ฟังก์ชันค้นหาข้อมูลในรายการตัวเลือก
|
||||
* @param val คำค้นหา
|
||||
* @param update ฟังก์ชัน
|
||||
* @param refData ประเภทของตัวเลือก
|
||||
*/
|
||||
const filterSelector = (val: string, update: Function, refData: string) => {
|
||||
switch (refData) {
|
||||
case "prefixOps":
|
||||
update(() => {
|
||||
|
|
@ -149,12 +151,20 @@ const filterSelector = (val: any, update: Function, refData: string) => {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์เลือกวันเดือนปีเกิด
|
||||
* @param modelData วันเดือนปีเกิด
|
||||
*/
|
||||
const handleDate = async (modelData: Date) => {
|
||||
informaData.value.dateOfBirth = modelData;
|
||||
await calRetire(modelData);
|
||||
onEdit.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์ชันคำนวนวันเกษียณอายุราชการ
|
||||
* @param birth วันเดือนปีเกิด
|
||||
*/
|
||||
const calRetire = async (birth: Date) => {
|
||||
const body = {
|
||||
birthDate: dateToISO(birth),
|
||||
|
|
@ -179,13 +189,16 @@ const calRetire = async (birth: Date) => {
|
|||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* บันทึกการแก้ไขข้อมูล
|
||||
*/
|
||||
const editData = async () => {
|
||||
dialogConfirm($q, async () => {
|
||||
if (age.value == false) {
|
||||
modalError($q, "พบข้อผิดพลาด", "วันเกิดไม่ถูกต้อง");
|
||||
return;
|
||||
}
|
||||
|
||||
showLoader();
|
||||
const body: any = {
|
||||
citizenId: informaData.value.idCard,
|
||||
prefix: informaData.value.prefixId,
|
||||
|
|
@ -215,11 +228,16 @@ const editData = async () => {
|
|||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์ชันการแก้ไขข้อมูล
|
||||
*/
|
||||
const changeBtn = async () => {
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
|
|
@ -232,6 +250,17 @@ const changeBtn = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์ชันแก้ไขข้อมูล
|
||||
*/
|
||||
function checkEdit() {
|
||||
onEdit.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันสำหรับคืนค่าชื่อคลาสตามค่าที่กำหนด
|
||||
* @param val ค่าที่ใช้กำหนดคลาส
|
||||
*/
|
||||
const getClass = (val: boolean) => {
|
||||
return {
|
||||
"full-width inputgreen cursor-pointer": val,
|
||||
|
|
@ -239,9 +268,12 @@ const getClass = (val: boolean) => {
|
|||
};
|
||||
};
|
||||
|
||||
function checkEdit() {
|
||||
onEdit.value = true;
|
||||
}
|
||||
/**
|
||||
* ทำงานเมื่อมีการเรียกใช้ Components
|
||||
*/
|
||||
onMounted(async () => {
|
||||
emit("update:statusEdit", false);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card flat bordered class="col-12 q-px-lg q-py-md no-border">
|
||||
|
|
@ -300,7 +332,7 @@ function checkEdit() {
|
|||
:label="`${'คำนำหน้า'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
|
||||
) "
|
||||
/>
|
||||
|
|
@ -417,7 +449,7 @@ function checkEdit() {
|
|||
:label="`${'เพศ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'genderOps'
|
||||
) "
|
||||
/>
|
||||
|
|
@ -443,7 +475,7 @@ function checkEdit() {
|
|||
:label="`${'สถานภาพ'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'statusOps'
|
||||
) "
|
||||
/>
|
||||
|
|
@ -468,7 +500,7 @@ function checkEdit() {
|
|||
:label="`${'หมู่เลือด'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'bloodOps'
|
||||
) "
|
||||
/>
|
||||
|
|
@ -524,7 +556,7 @@ function checkEdit() {
|
|||
:label="`${'ศาสนา'}`"
|
||||
use-input
|
||||
input-debounce="0"
|
||||
@filter="(inputValue:any,
|
||||
@filter="(inputValue:string,
|
||||
doneFn:Function) => filterSelector(inputValue, doneFn,'religionOps'
|
||||
) "
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
import type { PropType } from "vue";
|
||||
import type { Property } from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const route = useRoute();
|
||||
const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array as PropType<Property[]>,
|
||||
default: [],
|
||||
},
|
||||
fetch: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update:statusEdit", "update:data"]);
|
||||
|
||||
const edit = ref<boolean>(false); //การแก้ไขข้อมูล
|
||||
const onEdit = ref<boolean>(false); //การแก้ไขข้อมูล
|
||||
|
||||
/**
|
||||
* ฟังก์ชันบันทึกการแก้ไขข้อมูล
|
||||
*/
|
||||
const saveData = async () => {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.put(
|
||||
config.API.placementPropertyId(route.params.personalId.toString()),
|
||||
props.data
|
||||
)
|
||||
.then(async () => {
|
||||
await props.fetch("Qualification");
|
||||
await success($q, "แก้ไขข้อมูลสำเร็จ");
|
||||
changeBtn();
|
||||
onEdit.value = false;
|
||||
edit.value = false;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์ชันการแก้ไขข้อมูล
|
||||
*/
|
||||
const changeBtn = async () => {
|
||||
if (edit.value == true) {
|
||||
if (props.statusEdit === true) {
|
||||
} else {
|
||||
emit("update:statusEdit", true);
|
||||
}
|
||||
} else {
|
||||
emit("update:statusEdit", false);
|
||||
}
|
||||
};
|
||||
|
||||
const onCancel = async () => {
|
||||
if (onEdit.value) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
emit("update:statusEdit", false);
|
||||
await props.fetch("Qualification");
|
||||
edit.value = false;
|
||||
onEdit.value = false;
|
||||
},
|
||||
`ข้อมูลมีการแก้ไข`,
|
||||
`ยืนยันยกเลิกการแก้ไขใช่หรือไม่?`
|
||||
);
|
||||
} else {
|
||||
edit.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์ชันแก้ไขข้อมูล
|
||||
*/
|
||||
function checkEdit() {
|
||||
onEdit.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* ทำงานเมื่อมีการเรียกใช้ Components
|
||||
*/
|
||||
onMounted(() => {
|
||||
emit("update:statusEdit", false);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-form ref="myform" greedy @submit.prevent @validation-success="saveData">
|
||||
<div class="row col-12 q-px-lg q-pt-lg q-pb-sm no-border">
|
||||
<HeaderTop
|
||||
v-model:edit="edit"
|
||||
header="การคัดกรองคุณสมบัติ"
|
||||
icon="mdi-account-search"
|
||||
:history="false"
|
||||
:changeBtn="changeBtn"
|
||||
:disable="statusEdit"
|
||||
:cancel="onCancel"
|
||||
/>
|
||||
</div>
|
||||
<div class="row q-px-lg">
|
||||
<div v-for="item of props.data" :key="item.name" class="col-12 q-pt-sm">
|
||||
<q-checkbox
|
||||
size="xs"
|
||||
v-model="item.value"
|
||||
:label="item.name"
|
||||
keep-color
|
||||
@update:modelValue="checkEdit"
|
||||
color="gray-5"
|
||||
:disable="!statusEdit"
|
||||
/>
|
||||
<q-separator />
|
||||
</div>
|
||||
</div>
|
||||
</q-form>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, useAttrs } from "vue";
|
||||
import HeaderTop from "@/modules/05_placement/components/PersonalDetail/Information/top.vue";
|
||||
import type { Pagination } from "@/modules/05_placement/interface/index/Main";
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const table = ref<any>(null);
|
||||
const filterRef = ref<any>(null);
|
||||
const editBtn = ref<boolean>(false);
|
||||
const initialPagination = ref<Pagination>({
|
||||
rowsPerPage: 0,
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
inputfilter: String,
|
||||
name: String,
|
||||
icon: String,
|
||||
inputvisible: Array,
|
||||
editvisible: Boolean,
|
||||
headerShow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
edit: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
add: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
cancel: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
validate: {
|
||||
type: Function,
|
||||
default: () => console.log("not function"),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
"update:inputfilter",
|
||||
"update:inputvisible",
|
||||
"update:editvisible",
|
||||
]);
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัปเดทคำค้นหา
|
||||
* @param value คำค้นหา
|
||||
*/
|
||||
const updateInput = (value: string | number | null) => {
|
||||
emit("update:inputfilter", value);
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์ชันอัปเดท Visible
|
||||
* @param value Visible
|
||||
*/
|
||||
const updateVisible = (value: []) => {
|
||||
emit("update:inputvisible", value);
|
||||
};
|
||||
|
||||
const paginationLabel = (start: string, end: string, total: string) => {
|
||||
return start + "-" + end + " ใน " + total;
|
||||
};
|
||||
|
||||
/**
|
||||
* ฟังก์ชันเพิ่มข้อมูล
|
||||
*/
|
||||
const checkAdd = () => {
|
||||
props.add();
|
||||
};
|
||||
|
||||
const resetFilter = () => {
|
||||
// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
|
||||
emit("update:inputfilter", "");
|
||||
filterRef.value.focus();
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="q-pb-sm row">
|
||||
<HeaderTop
|
||||
v-model:edit="editBtn"
|
||||
:header="name"
|
||||
:icon="icon"
|
||||
:add="checkAdd"
|
||||
:addData="true"
|
||||
:history="false"
|
||||
:disable="statusEdit"
|
||||
/>
|
||||
<q-space />
|
||||
<div class="items-center" style="display: flex" v-if="headerShow">
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-input
|
||||
standout
|
||||
dense
|
||||
:model-value="inputfilter"
|
||||
ref="filterRef"
|
||||
@update:model-value="updateInput"
|
||||
outlined
|
||||
debounce="300"
|
||||
placeholder="ค้นหา"
|
||||
style="max-width: 200px"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon v-if="inputfilter == ''" name="search" />
|
||||
<q-icon
|
||||
v-if="inputfilter !== ''"
|
||||
name="clear"
|
||||
class="cursor-pointer"
|
||||
@click="resetFilter"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs q-ml-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-header-table"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:pagination-label="paginationLabel"
|
||||
:pagination="initialPagination"
|
||||
:rows-per-page-options="[0]"
|
||||
>
|
||||
<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 #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
|
||||
.custom-header-table {
|
||||
max-height: 64vh;
|
||||
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<!-- card รวม ข้อมูลส่วนตัว กับ ที่อยู่ -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import Information from "@/modules/05_placement/components/PersonalDetail/Information/Information.vue";
|
||||
import Address from "@/modules/05_placement/components/PersonalDetail/Information/Address.vue";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const props = defineProps({
|
||||
statusEdit: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
profileType: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["update:statusEdit"]);
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader } = mixin;
|
||||
const statusEdit = ref<boolean>(false);
|
||||
const modalNoEdit = ref<boolean>(false);
|
||||
const modalNoEditTittle = ref<string>("ไม่สามารถไม่สามารถแก้ไขข้อมูลได้?");
|
||||
const modalNoEditDetail = ref<string>("มีข้อมูลที่ยังไม่ถูกบันทึกข้อมูล");
|
||||
|
||||
watch(statusEdit, (count: boolean, prevCount: boolean) => {
|
||||
emit("update:statusEdit", count);
|
||||
});
|
||||
|
||||
watch(props, (count: any, prevCount: any) => {
|
||||
statusEdit.value = props.statusEdit;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// hideLoader();
|
||||
});
|
||||
|
||||
const notiNoEdit = () => {
|
||||
modalNoEdit.value = true;
|
||||
};
|
||||
|
||||
const closeModalError = () => {
|
||||
modalNoEdit.value = false;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="row col-12 items-center">
|
||||
<div>
|
||||
<Information :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
|
||||
</div>
|
||||
|
||||
<div class="col-12 q-px-md"><q-separator size="4px" /></div>
|
||||
|
||||
<div>
|
||||
<Address :notiNoEdit="notiNoEdit" v-model:statusEdit="statusEdit" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.horizontal-line {
|
||||
background-color: #f4f4f4;
|
||||
height: 5px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue