diff --git a/src/api/file/api.file.ts b/src/api/file/api.file.ts index e97ed7122..313474d5e 100644 --- a/src/api/file/api.file.ts +++ b/src/api/file/api.file.ts @@ -15,6 +15,9 @@ export default { file: (name: string, group: string, id: string) => `${url}/file/${name}/${group}/${id}`, + + fileByPath: (name: string) => + `${url}/file/${name}`, fileByFile: (name: string, group: string, id: string, fileName: string) => `${url}/file/${name}/${group}/${id}/${fileName}`, }; diff --git a/src/api/registry/api.profile.ts b/src/api/registry/api.profile.ts index ca388d7cd..75343c494 100644 --- a/src/api/registry/api.profile.ts +++ b/src/api/registry/api.profile.ts @@ -212,5 +212,8 @@ export default { /**ปรับรายการเงินเดือนขึ้น-ลง*/ salarySwap: (dierction: string, id: string) => `${profile}salary/swap/${dierction}/${id}`, - listProfileNew:(id:string,page:number,pageSize:number)=>`${profile}search/new-page/oc/${id}/officer?page=${page}&pageSize=${pageSize}` + listProfileNew:(id:string,page:number,pageSize:number)=>`${profile}search/new-page/oc/${id}/officer?page=${page}&pageSize=${pageSize}`, + + + orgProfileAvatar:`${registryNew}avatar` }; diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue index fcd5b1172..115e0a983 100644 --- a/src/modules/04_registryNew/views/detailView.vue +++ b/src/modules/04_registryNew/views/detailView.vue @@ -21,6 +21,8 @@ const dateDeath = ref(new Date()); const filePassaway = ref(null); const reasonDeath = ref(""); +const dialogImage = ref(false); + const mixin = useCounterMixin(); const $q = useQuasar(); const router = useRouter(); @@ -37,10 +39,6 @@ const { dialogMessageNotify, } = mixin; -const dialogImage = ref(false); -const images = ref([]); -const activeImage = ref(null); - const profileId = ref(route.params.id.toString()); const empType = ref( route.name === "registryNewByid" ? "" : "-employee" @@ -79,21 +77,44 @@ const fileName = ref(""); const profilePicture = ref(""); const profileFile = ref(); const input = document.createElement("input"); +const activeImage = ref(null); +const images = ref([]); + input.type = "file"; input.accept = ".jpg,.png,.tif,.pic"; input.addEventListener("change", (e) => { profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0]; - uploadProfile(); + uploadImg(); }); function selectFile() { input.click(); + imageActive(null); } -async function uploadProfile() { +function imageActive(n: any){ + activeImage.value = n; +}; + +function uploadImg(){ + http + .post(config.API.orgProfileAvatar,{ + profileId:profileId.value + }) + .then((res)=>{ + console.log(res.data) + uploadProfile(res.data.result.avatar) + }).catch((e)=>{ + messageError($q,e) + }).finally(()=>{ + + }) +} + +async function uploadProfile(path:string) { await http - .post(config.API.file("ทะเบียนประวัติ", "โปรไฟล์", profileId.value), { + .post(config.API.fileByPath(path), { replace: true, fileList: [ { @@ -104,6 +125,7 @@ async function uploadProfile() { .then(async (res) => { uploadUrl.value = res.data[fileName.value].uploadUrl; uploadFileURL(uploadUrl.value, profileFile.value); + dialogImage.value = false }) .catch((err) => { messageError($q, err); @@ -311,23 +333,42 @@ async function clickSaveDeceased() { }); } -function imageActive(n: any) { - activeImage.value = n; -} -function onImage() { +function openDialogImg() { dialogImage.value = true; + showLoader() + http + .get(config.API.orgProfileAvatar+`/${profileId.value}`) + .then((res)=>{ + let data = res.data.result; + for(let i = 0;i < data.length; i++){ + getImg(data[i]) + } + // images.value = data + }).catch((e)=>{ + messageError($q,e) + }).finally(()=>{ + hideLoader() + }) +} + +function getImg(dataList:any){ + http + .get(config.API.fileByPath(`${dataList.avatar}/${dataList.avatarName}`)) + .then((res)=>{ + console.log(res) + }).catch((e)=>{ + messageError($q,e) + }).finally(()=>{ + + }) } function closeImage() { dialogImage.value = false; } -function getClass(n: any) { - const val = n == activeImage.value; - return { - "rounded-borders border-green shadow-1": val, - "rounded-borders shadow-1": !val, - }; +async function deletePhoto(id: string) { + dialogRemove($q, () => {}, "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่"); } function imageClass(n: any) { @@ -338,38 +379,37 @@ function imageClass(n: any) { }; } -const selectAvatarHistory = async () => { +function getClass(n: any) { + const val = n == activeImage.value; + return { + "rounded-borders border-green shadow-1": val, + "rounded-borders shadow-1": !val, + }; +} + +async function selectAvatarHistory() { if (activeImage.value == null) { - dialogMessageNotify( - $q, - "ไม่สามารถเปลี่ยนรูปได้ กรุณาเลือกรูปที่ต้องการเปลี่ยน" - ); + dialogMessageNotify($q, "กรุณาเลือกรูปที่ต้องการเปลี่ยน"); return; } showLoader(); await http - .put(config.API.profileAvatarId(route.params.id.toString()), { + .put(config.API.profileAvatarId(profileId.value), { avatar: activeImage.value.avatarId, }) .then((res) => { dialogImage.value = false; + fileName.value = `profile-${profileId.value}`; + fetchProfile(profileId.value); + fetchDataPersonal(); }) .catch((e) => { messageError($q, e); }) - .finally(async () => { - fileName.value = `profile-${profileId.value}`; - await fetchProfile(profileId.value); - await fetchDataPersonal(); + .finally(() => { + hideLoader() }); - // *************************************************************************************************** - // ****************** fetch data เปลี่ยนรูปภาพ ส่ง ID กลับ****************** - // *************************************************************************************************** -}; - -const deletePhoto = async (id: string) => { - dialogRemove($q, () => {}, "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่"); -}; +} onMounted(async () => { fileName.value = `profile-${profileId.value}`; @@ -471,28 +511,14 @@ onMounted(async () => {
- - -
- - อัปเดตรูปภาพ - -
- + + - { + @@ -693,6 +720,19 @@ onMounted(async () => { :src="n.avatar" :class="imageClass(n)" > +
{ @click="deletePhoto(n.id)" class="bg-white" style="color: #ff8080" - /> + > + ลบรูปภาพ +
@@ -716,6 +758,15 @@ onMounted(async () => { +