Add DRP document
This commit is contained in:
Mulia Nasution
@@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<h4>Dokumen Pendukung <span style="color: red;">*</span></h4>
|
||||
|
||||
<div style="display: flex; justify-content: end;">
|
||||
<DxButton styling-mode="contained" type="default" @click="addDokumen" icon="plus" text="Tambah" />
|
||||
</div>
|
||||
|
||||
<DxPopup v-model:visible="isFormOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Dokumen Pendukung" :width="600" :height="450">
|
||||
<PopupUploadDokumenPendukung :drpId="drpId" :drpTahun="drpTahun" :dokumen-data="dokumenData" @close="isFormOpen = false" />
|
||||
</DxPopup>
|
||||
|
||||
<DxPopup v-model:visible="isRemoveConfirmationDialogOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Hapus Dokumen Pendukung?" :width="400" :height="300">
|
||||
<template #content>
|
||||
Hapus Dokumen Pendukung?
|
||||
</template>
|
||||
<DxToolbarItem
|
||||
widget="dxButton"
|
||||
:options="removeDokumenButtonOptions"
|
||||
location="after"
|
||||
toolbar="bottom"
|
||||
/>
|
||||
<DxToolbarItem
|
||||
widget="dxButton"
|
||||
:options="cancelRemoveButtonOptions"
|
||||
location="after"
|
||||
toolbar="bottom"
|
||||
/>
|
||||
</DxPopup>
|
||||
|
||||
<DxDataGrid ref="datagrid" :data-source="dataSource" :remote-operations="true" :column-auto-width="true">
|
||||
<DxColumn data-field="jenisDokumenId" caption="Jenis Dokumen" alignment="left">
|
||||
<DxLookup :data-source="jenisDokumens" display-expr="name" value-expr="id" :search-enabled="true" />
|
||||
</DxColumn>
|
||||
<DxColumn data-field="filename" caption="File" />
|
||||
<DxColumn data-field="keterangan" caption="Keterangan" />
|
||||
<DxColumn type="buttons" caption="Aksi" :fixed="true">
|
||||
<DxDataButton text="Edit" hint="Edit Dokumen Pendukung" icon="edit" @click="editDokumen" />
|
||||
<DxDataButton text="Delete" hint="Hapus Dokumen Pendukung" icon="trash" @click="removeDokumen" />
|
||||
</DxColumn>
|
||||
<DxToolbar>
|
||||
<DxItem name="searchPanel" location="before" />
|
||||
<DxItem name="addRowButton" show-text="always" css-class="">
|
||||
<DxTexts add-row="Tambah"></DxTexts>
|
||||
</DxItem>
|
||||
</DxToolbar>
|
||||
<DxPaging :page-size="5" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 50]" display-mode="compact" :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" info-text="Hal {0} dari {1} ({2} data)" />
|
||||
</DxDataGrid>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import http from "@/utils/http";
|
||||
import jenisDokumens from "@/store/jenis-dokumen";
|
||||
import {
|
||||
DxColumn,
|
||||
DxDataGrid,
|
||||
DxItem,
|
||||
DxLookup,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxTexts,
|
||||
DxToolbar,
|
||||
DxButton as DxDataButton
|
||||
} from "devextreme-vue/data-grid";
|
||||
import PopupUploadDokumenPendukung from "@/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue";
|
||||
import DxPopup, {DxToolbarItem} from "devextreme-vue/popup";
|
||||
import DxButton from "devextreme-vue/button";
|
||||
import {defineProps, ref} from "vue";
|
||||
import CustomStore from "devextreme/data/custom_store";
|
||||
|
||||
const props = defineProps(['drpId', 'drpTahun']);
|
||||
|
||||
const URL = process.env.VUE_APP_ROOT_API + '/drp';
|
||||
const URL_UPLOAD = process.env.VUE_APP_ROOT_API + '/drp/upload/dokumen';
|
||||
|
||||
const datagrid = ref(null)
|
||||
const isFormOpen = ref(false);
|
||||
const isRemoveConfirmationDialogOpen = ref(false);
|
||||
const dokumenData = ref();
|
||||
|
||||
const addDokumen = () => {
|
||||
isFormOpen.value = !isFormOpen.value;
|
||||
}
|
||||
|
||||
const editDokumen = (e) => {
|
||||
dokumenData.value = e.row.data;
|
||||
isFormOpen.value = !isFormOpen.value;
|
||||
}
|
||||
|
||||
const removeDokumenButtonOptions = ref({
|
||||
text: 'Hapus',
|
||||
async onClick() {
|
||||
await http.delete(URL_UPLOAD, {
|
||||
filename: dokumenData.value.filename
|
||||
})
|
||||
isRemoveConfirmationDialogOpen.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const removeDokumen = (e) => {
|
||||
isRemoveConfirmationDialogOpen.value = true;
|
||||
dokumenData.value = e.row.data;
|
||||
datagrid.value.instance.refresh();
|
||||
};
|
||||
|
||||
const cancelRemoveButtonOptions = ref({
|
||||
text: 'Batal',
|
||||
onClick() {
|
||||
isRemoveConfirmationDialogOpen.value = false;
|
||||
}
|
||||
})
|
||||
|
||||
function isNotEmpty(value) {
|
||||
return value !== undefined && value !== null && value !== '';
|
||||
}
|
||||
|
||||
const dataSource = new CustomStore({
|
||||
key: 'id',
|
||||
load(loadOptions) {
|
||||
let params = '?';
|
||||
[
|
||||
'skip',
|
||||
'take',
|
||||
'requireTotalCount',
|
||||
'requireGroupCount',
|
||||
'sort',
|
||||
'filter',
|
||||
'totalSummary',
|
||||
'group',
|
||||
'groupSummary',
|
||||
].forEach((i) => {
|
||||
if (i in loadOptions && isNotEmpty(loadOptions[i])) {
|
||||
params += `${i}=${JSON.stringify(loadOptions[i])}&`;
|
||||
}
|
||||
});
|
||||
params = params.slice(0, -1);
|
||||
return fetch(`${URL}/${props.drpId}/${params}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${window.localStorage.getItem('access_token')}`,
|
||||
}
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
return {
|
||||
data: data.dataDrpDokumenPendukung,
|
||||
totalCount: 100,
|
||||
summary: 100,
|
||||
groupCount: 100,
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
throw new Error('Data Loading Error');
|
||||
});
|
||||
},
|
||||
|
||||
insert: (values) => {
|
||||
return fetch(`${URL}/${props.drpId}`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(values),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
update: (key, values) => {
|
||||
return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(values),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
remove: (key) => {
|
||||
return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
|
||||
method: "DELETE",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
a.dx-link.dx-icon-edit.dx-link-icon {
|
||||
color: orange !important;
|
||||
}
|
||||
|
||||
a.dx-link.dx-icon-trash.dx-link-icon {
|
||||
color: red !important;
|
||||
}
|
||||
</style>
|
||||
194
src/views/drp/drp-upload-dokumen-popup/list-dokumen-rkap.vue
Normal file
194
src/views/drp/drp-upload-dokumen-popup/list-dokumen-rkap.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<h4>Dokumen RKAP <span style="color: red;">*</span></h4>
|
||||
|
||||
<div style="display: flex; justify-content: end;">
|
||||
<DxButton styling-mode="contained" type="default" @click="addDokumen" icon="plus" text="Tambah" />
|
||||
</div>
|
||||
|
||||
<DxPopup v-model:visible="isFormOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Dokumen RKAP" :width="600" :height="450">
|
||||
<PopupUploadDokumenRkap :drpId="drpId" :drpTahun="drpTahun" :dokumenData="dokumenData" @close="isFormOpen = false" />
|
||||
</DxPopup>
|
||||
|
||||
<DxPopup v-model:visible="isRemoveConfirmationDialogOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Hapus Dokumen RKAP?" :width="400" :height="300">
|
||||
<template #content>
|
||||
Hapus Dokumen RKAP?
|
||||
</template>
|
||||
<DxToolbarItem
|
||||
widget="dxButton"
|
||||
:options="removeDokumenButtonOptions"
|
||||
location="after"
|
||||
toolbar="bottom"
|
||||
/>
|
||||
<DxToolbarItem
|
||||
widget="dxButton"
|
||||
:options="cancelRemoveButtonOptions"
|
||||
location="after"
|
||||
toolbar="bottom"
|
||||
/>
|
||||
</DxPopup>
|
||||
|
||||
<DxDataGrid ref="datagrid" :data-source="dataSource" :remote-operations="true" :column-auto-width="true">
|
||||
<DxColumn data-field="jenisDokumenId" caption="Jenis Dokumen" alignment="left">
|
||||
<DxLookup :data-source="jenisDokumens" display-expr="name" value-expr="id" :search-enabled="true" />
|
||||
</DxColumn>
|
||||
<DxColumn data-field="filename" caption="File" />
|
||||
<DxColumn data-field="keterangan" caption="Keterangan" />
|
||||
<DxColumn type="buttons" caption="Aksi" :fixed="true">
|
||||
<DxDataButton text="Edit" hint="Edit Dokumen RKAP" icon="edit" @click="editDokumen" />
|
||||
<DxDataButton text="Delete" hint="Hapus Dokumen RKAP" icon="trash" @click="removeDokumen" />
|
||||
</DxColumn>
|
||||
<DxToolbar>
|
||||
<DxItem name="searchPanel" location="before" />
|
||||
<DxItem name="addRowButton" show-text="always" css-class="">
|
||||
<DxTexts add-row="Tambah"></DxTexts>
|
||||
</DxItem>
|
||||
</DxToolbar>
|
||||
<DxPaging :page-size="5" />
|
||||
<DxPager :visible="true" :allowed-page-sizes="[5, 10, 50]" display-mode="compact" :show-page-size-selector="true" :show-info="true" :show-navigation-buttons="true" info-text="Hal {0} dari {1} ({2} data)" />
|
||||
</DxDataGrid>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import http from "@/utils/http";
|
||||
import jenisDokumens from "@/store/jenis-dokumen";
|
||||
import {
|
||||
DxColumn,
|
||||
DxDataGrid,
|
||||
DxItem,
|
||||
DxLookup,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxTexts,
|
||||
DxToolbar,
|
||||
DxButton as DxDataButton
|
||||
} from "devextreme-vue/data-grid";
|
||||
import PopupUploadDokumenRkap from "@/views/drp/drp-upload-dokumen-popup/upload-dokumen-rkap.vue";
|
||||
import DxPopup, {DxToolbarItem} from "devextreme-vue/popup";
|
||||
import DxButton from "devextreme-vue/button";
|
||||
import {defineProps, ref} from "vue";
|
||||
import CustomStore from "devextreme/data/custom_store";
|
||||
|
||||
const props = defineProps(['drpId', 'drpTahun']);
|
||||
|
||||
const URL = process.env.VUE_APP_ROOT_API + '/drp';
|
||||
const URL_UPLOAD = process.env.VUE_APP_ROOT_API + '/drp/upload/dokumen';
|
||||
|
||||
const datagrid = ref(null)
|
||||
const isRemoveConfirmationDialogOpen = ref(false);
|
||||
const isFormOpen = ref(false);
|
||||
const dokumenData = ref();
|
||||
|
||||
const addDokumen = () => {
|
||||
isFormOpen.value = !isFormOpen.value;
|
||||
}
|
||||
|
||||
const editDokumen = (e) => {
|
||||
dokumenData.value = e.row.data;
|
||||
isFormOpen.value = !isFormOpen.value;
|
||||
}
|
||||
|
||||
const removeDokumenButtonOptions = ref({
|
||||
text: 'Hapus',
|
||||
async onClick() {
|
||||
await http.delete(URL_UPLOAD, {
|
||||
filename: dokumenData.value.filename
|
||||
})
|
||||
isRemoveConfirmationDialogOpen.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const removeDokumen = (e) => {
|
||||
isRemoveConfirmationDialogOpen.value = true;
|
||||
dokumenData.value = e.row.data;
|
||||
datagrid.value.instance.refresh();
|
||||
};
|
||||
|
||||
|
||||
const cancelRemoveButtonOptions = ref({
|
||||
text: 'Batal',
|
||||
onClick() {
|
||||
isRemoveConfirmationDialogOpen.value = false;
|
||||
}
|
||||
})
|
||||
|
||||
function isNotEmpty(value) {
|
||||
return value !== undefined && value !== null && value !== '';
|
||||
}
|
||||
|
||||
const dataSource = new CustomStore({
|
||||
key: 'id',
|
||||
load(loadOptions) {
|
||||
let params = '?';
|
||||
[
|
||||
'skip',
|
||||
'take',
|
||||
'requireTotalCount',
|
||||
'requireGroupCount',
|
||||
'sort',
|
||||
'filter',
|
||||
'totalSummary',
|
||||
'group',
|
||||
'groupSummary',
|
||||
].forEach((i) => {
|
||||
if (i in loadOptions && isNotEmpty(loadOptions[i])) {
|
||||
params += `${i}=${JSON.stringify(loadOptions[i])}&`;
|
||||
}
|
||||
});
|
||||
params = params.slice(0, -1);
|
||||
return fetch(`${URL}/${props.drpId}/${params}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${window.localStorage.getItem('access_token')}`,
|
||||
}
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
return {
|
||||
data: data.dataDrpDokumen,
|
||||
totalCount: 100,
|
||||
summary: 100,
|
||||
groupCount: 100,
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
throw new Error('Data Loading Error');
|
||||
});
|
||||
},
|
||||
|
||||
insert: (values) => {
|
||||
return fetch(`${URL}/${props.drpId}`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(values),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
update: (key, values) => {
|
||||
return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(values),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
remove: (key) => {
|
||||
return fetch(`${URL}/${props.drpId}` + "/" + encodeURIComponent(key), {
|
||||
method: "DELETE",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
a.dx-link.dx-icon-edit.dx-link-icon {
|
||||
color: orange !important;
|
||||
}
|
||||
|
||||
a.dx-link.dx-icon-trash.dx-link-icon {
|
||||
color: red !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<form ref="popupUploadDokumenPendukungRef" method="post" :action="uploadUrl" enctype="multipart/form-data" @submit.prevent="handleSubmit">
|
||||
<input type="hidden" name="drpId" :value="drpId" />
|
||||
<div class="dx-field">
|
||||
<div class="dx-field-label">Jenis Dokumen</div>
|
||||
<DxSelectBox name="jenisDokumenId" :data-source="jenisDokumens" display-expr="name" value-expr="id" :search-enabled="true" search-mode="contains" />
|
||||
</div>
|
||||
<div class="dx-field">
|
||||
<DxFileUploader name="file" label-text="" accept="*" upload-mode="useForm" />
|
||||
</div>
|
||||
<div class="dx-field">
|
||||
<div class="dx-field-label">Keterangan</div>
|
||||
<DxTextBox name="keterangan" value="" class="dx-field-value" />
|
||||
</div>
|
||||
<DxButton class="button" text="Simpan" type="success" :use-submit-behavior="true" />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jenisDokumens from '@/store/jenis-dokumen.js';
|
||||
import { DxSelectBox } from 'devextreme-vue/select-box';
|
||||
import { DxTextBox } from 'devextreme-vue/text-box';
|
||||
import { DxButton } from 'devextreme-vue/button';
|
||||
import { DxFileUploader } from 'devextreme-vue/file-uploader';
|
||||
import http from "@/utils/http";
|
||||
|
||||
const URL = process.env.VUE_APP_ROOT_API + '/drp';
|
||||
const URL_UPLOAD = process.env.VUE_APP_ROOT_API + '/drp/upload/dokumen';
|
||||
|
||||
export default {
|
||||
name: 'PopupUploadDokumenPendukung',
|
||||
|
||||
components: {
|
||||
DxTextBox,
|
||||
DxButton,
|
||||
DxFileUploader,
|
||||
DxSelectBox,
|
||||
},
|
||||
|
||||
props: ['drpId', 'drpTahun', 'dokumenData'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
uploadUrl: `${URL_UPLOAD}`,
|
||||
jenisDokumens,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
this.uploadFile();
|
||||
this.saveDocument();
|
||||
},
|
||||
|
||||
saveDocument() {
|
||||
const form = this.$refs.popupUploadDokumenPendukungRef;
|
||||
|
||||
const filename = form.file.files[0].name;
|
||||
|
||||
const data = {
|
||||
id: this.$props.drpId,
|
||||
approveStatus: 'Penyusunan',
|
||||
'isApprove': false,
|
||||
"dataDrpDokumen": [
|
||||
{
|
||||
"jenisDokumenId": form.jenisDokumenId.value,
|
||||
"filename": filename,
|
||||
"keterangan": form.keterangan.value,
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
http.post(URL, data)
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
console.log(json)
|
||||
|
||||
this.$emit('close');
|
||||
})
|
||||
.catch(e => {
|
||||
console.error(e);
|
||||
})
|
||||
},
|
||||
|
||||
uploadFile() {
|
||||
const form = this.$refs.popupUploadDokumenPendukungRef;
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
const file = form.file.files[0];
|
||||
|
||||
formData.append('drpId', form.drpId.value);
|
||||
formData.append('jenisDokumenId', form.jenisDokumenId.value);
|
||||
formData.append('keterangan', form.keterangan.value);
|
||||
formData.append('file', file);
|
||||
|
||||
console.log(this.uploadUrl, 'this.uploadUrl')
|
||||
|
||||
fetch(this.uploadUrl, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
console.log(json)
|
||||
})
|
||||
.catch(e => {
|
||||
alert('fail')
|
||||
console.error(e);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
126
src/views/drp/drp-upload-dokumen-popup/upload-dokumen-rkap.vue
Normal file
126
src/views/drp/drp-upload-dokumen-popup/upload-dokumen-rkap.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div>
|
||||
<form ref="popupUploadDokumenRkapRef" method="post" :action="uploadUrl" enctype="multipart/form-data" @submit.prevent="handleSubmit">
|
||||
<input type="hidden" name="drpId" :value="drpId" />
|
||||
<div class="dx-field">
|
||||
<div class="dx-field-label">Jenis Dokumen</div>
|
||||
<DxSelectBox
|
||||
name="jenisDokumenId"
|
||||
:data-source="jenisDokumens"
|
||||
display-expr="name"
|
||||
value-expr="id"
|
||||
:search-enabled="true"
|
||||
search-mode="contains"
|
||||
/>
|
||||
</div>
|
||||
<div class="dx-field">
|
||||
<DxFileUploader name="file" label-text="" accept="*" upload-mode="useForm" />
|
||||
</div>
|
||||
<div class="dx-field">
|
||||
<div class="dx-field-label">Keterangan</div>
|
||||
<DxTextBox name="keterangan" value="" class="dx-field-value" />
|
||||
</div>
|
||||
<DxButton class="button" text="Simpan" type="success" :use-submit-behavior="true" />
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import jenisDokumens from '@/store/jenis-dokumen.js';
|
||||
import { DxSelectBox } from 'devextreme-vue/select-box';
|
||||
import { DxTextBox } from 'devextreme-vue/text-box';
|
||||
import { DxButton } from 'devextreme-vue/button';
|
||||
import { DxFileUploader } from 'devextreme-vue/file-uploader';
|
||||
import http from "@/utils/http";
|
||||
|
||||
const URL = process.env.VUE_APP_ROOT_API + '/drp';
|
||||
const URL_UPLOAD = process.env.VUE_APP_ROOT_API + '/drp/upload/dokumen';
|
||||
|
||||
export default {
|
||||
name: 'PopupUploadDokumenRkap',
|
||||
|
||||
components: {
|
||||
DxTextBox,
|
||||
DxButton,
|
||||
DxFileUploader,
|
||||
DxSelectBox,
|
||||
},
|
||||
|
||||
props: ['drpId', 'drpTahun', 'dokumenData'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
uploadUrl: `${URL_UPLOAD}`,
|
||||
jenisDokumens,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
//
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
this.uploadFile();
|
||||
this.saveDocument();
|
||||
},
|
||||
|
||||
saveDocument() {
|
||||
const form = this.$refs.popupUploadDokumenRkapRef;
|
||||
|
||||
const filename = form.file.files[0].name;
|
||||
|
||||
const data = {
|
||||
id: this.$props.drpId,
|
||||
approveStatus: 'Penyusunan',
|
||||
'isApprove': false,
|
||||
"dataDrpDokumen": [
|
||||
{
|
||||
"jenisDokumenId": form.jenisDokumenId.value,
|
||||
"filename": filename,
|
||||
"keterangan": form.keterangan.value,
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
http.post(URL, data)
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
console.log(json, 'success');
|
||||
|
||||
this.$emit('close');
|
||||
})
|
||||
.catch(e => {
|
||||
console.error(e);
|
||||
})
|
||||
},
|
||||
|
||||
uploadFile() {
|
||||
const form = this.$refs.popupUploadDokumenRkapRef;
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
const file = form.file.files[0];
|
||||
|
||||
formData.append('drpId', form.drpId.value);
|
||||
formData.append('jenisDokumenId', form.jenisDokumenId.value);
|
||||
formData.append('keterangan', form.keterangan.value);
|
||||
formData.append('file', file);
|
||||
|
||||
fetch(this.uploadUrl, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((json) => {
|
||||
console.log(json)
|
||||
})
|
||||
.catch(e => {
|
||||
alert('fail')
|
||||
console.error(e);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user