diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue index db50b1e5..f55e1bdc 100644 --- a/src/pages/02_personnel-management/MainPage.vue +++ b/src/pages/02_personnel-management/MainPage.vue @@ -98,6 +98,15 @@ const userStats = ref(); const typeStats = ref(); const age = ref(); +const profileFile = ref(undefined); +const inputFile = document.createElement('input'); +inputFile.type = 'file'; +inputFile.accept = 'image/*'; + +inputFile.addEventListener('change', (e) => { + profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0]; +}); + const userTypeOpts = [ { label: 'พนักงาน', value: 'USER' }, { label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' }, @@ -131,11 +140,6 @@ async function createKeycloak() { return res.data; } -function selectFile() { - // const fileInput = this.$refs.file; - // fileInput.pickFiles(); -} - async function fetchHqOption() { if (userOption.value.hqOpts.length === 0) { const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' }); @@ -232,16 +236,17 @@ function onClose() { async function onSubmit() { console.log('enter'); + formData.value.profileImage = profileFile.value as File; if (isEdit.value === true && userId.value) { console.log('edit'); await userStore.editById(userId.value, formData.value); } else { console.log('post'); formData.value.keycloakId = await createKeycloak(); - if (formData.value.keycloakId) { + if (formData.value.keycloakId !== '') { + console.log('keycloakOk'); const result = await userStore.create(formData.value); console.log('Result after create:', result); - console.log('bb'); if (result) { console.log('hi3'); console.log(result.id); @@ -507,7 +512,7 @@ watch( class="upload-img-btn q-my-md full-width" label="อัปโหลดรูปภาพ" :class="{ dark: $q.dark.isActive }" - @click="selectFile()" + @click="inputFile.click()" />