Add DRP document
This commit is contained in:
Mulia Nasution
parent
adb490bacc
commit
89577aa56e
8
src/store/jenis-dokumen.js
Normal file
8
src/store/jenis-dokumen.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
const jenisDokumens = [
|
||||||
|
{ id: 0, name: "Dokumen RKAP" },
|
||||||
|
{ id: 1, name: "Dokumen Pendukung" },
|
||||||
|
{ id: 2, name: "Dokumen Lain" },
|
||||||
|
{ id: 3, name: "Dokumen Pendukung Data Teknis" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default jenisDokumens;
|
||||||
45
src/utils/http.js
Normal file
45
src/utils/http.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
const http = {
|
||||||
|
async request(method, url, data, headers = {}) {
|
||||||
|
try {
|
||||||
|
const defaultHeaders = {
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
}
|
||||||
|
|
||||||
|
headers = Object.assign(defaultHeaders, headers);
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
method: method,
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
headers,
|
||||||
|
}
|
||||||
|
|
||||||
|
if (method === 'GET') {
|
||||||
|
delete options.body;
|
||||||
|
}
|
||||||
|
|
||||||
|
return await fetch(url, options)
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async get(url, headers = {}) {
|
||||||
|
return await this.request('GET', url, null, headers);
|
||||||
|
},
|
||||||
|
|
||||||
|
async post(url, data, headers) {
|
||||||
|
return await this.request('POST', url, data, headers);
|
||||||
|
},
|
||||||
|
|
||||||
|
async put(url, data, headers) {
|
||||||
|
return await this.request('PUT', url, data, headers);
|
||||||
|
},
|
||||||
|
|
||||||
|
async delete(url, data, headers) {
|
||||||
|
return await this.request('DELETE', url, data, headers);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default http;
|
||||||
@ -5,311 +5,34 @@
|
|||||||
<div class="content-block">
|
<div class="content-block">
|
||||||
<div class="dx-card responsive-paddings">
|
<div class="dx-card responsive-paddings">
|
||||||
<div id="app-container">
|
<div id="app-container">
|
||||||
<Popup
|
<DxPopup
|
||||||
v-model:visible="popupVisible"
|
v-model:visible="isPopupUploadDokumenPendukung"
|
||||||
:drag-enabled="false"
|
:drag-enabled="false"
|
||||||
:hide-on-outside-click="true"
|
:hide-on-outside-click="true"
|
||||||
:show-close-button="false"
|
:show-close-button="true"
|
||||||
:show-title="true"
|
:show-title="true"
|
||||||
:width="914"
|
@showing="onShowing"
|
||||||
:height="672"
|
title="Upload Dokumen Pendukung"
|
||||||
container=".dx-viewport"
|
|
||||||
:title="popupTitle"
|
|
||||||
>
|
>
|
||||||
<DxPosition at="center" my="center" collision="fit" />
|
|
||||||
<DxToolbarItem
|
|
||||||
widget="dxButton"
|
|
||||||
toolbar="top"
|
|
||||||
locate-in-menu="always"
|
|
||||||
:options="closeButtonOptions"
|
|
||||||
:visible="!isShowButton"
|
|
||||||
/>
|
|
||||||
<DxToolbarItem
|
|
||||||
widget="dxButton"
|
|
||||||
toolbar="bottom"
|
|
||||||
location="after"
|
|
||||||
:options="closeButtonOptions"
|
|
||||||
v-model:visible="isShowButton"
|
|
||||||
/>
|
|
||||||
<DxToolbarItem
|
|
||||||
widget="dxButton"
|
|
||||||
toolbar="bottom"
|
|
||||||
location="after"
|
|
||||||
:options="saveButtonOptions"
|
|
||||||
v-model:visible="isShowButton"
|
|
||||||
/>
|
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="dx-fieldset">
|
<PopUpUploadDokumenPendukung :key="id" :drpId="selectedDrpId" :drpTahun="selectedDrpTahun"/>
|
||||||
<div class="dx-field">
|
|
||||||
<div class="dx-field-label">Tahun DRP</div>
|
|
||||||
<div class="dx-field-value">
|
|
||||||
<DxSelectBox
|
|
||||||
:data-source="dropdown"
|
|
||||||
drop-down-button-template="imageIcon"
|
|
||||||
>
|
|
||||||
<template #imageIcon="{}">
|
|
||||||
<!-- <img
|
|
||||||
src="images/icons/custom-dropbutton-icon.svg"
|
|
||||||
class="custom-icon"
|
|
||||||
/> -->
|
|
||||||
</template>
|
</template>
|
||||||
</DxSelectBox>
|
<DxToolbarItem
|
||||||
</div>
|
widget="dxButton"
|
||||||
</div>
|
:options="saveButtonOptions"
|
||||||
</div>
|
location="after"
|
||||||
<DxScrollView width="100%" height="100%" padding="100px">
|
toolbar="bottom"
|
||||||
<div id="textBlock">
|
|
||||||
<div>
|
|
||||||
<div class="dx-fieldset-header">Dokumen RKAP *</div>
|
|
||||||
<DxDataGrid
|
|
||||||
ref="currDataGrid"
|
|
||||||
:data-source="dataDrpDokumen"
|
|
||||||
key-expr="id"
|
|
||||||
:allow-column-reordering="true"
|
|
||||||
:column-auto-width="true"
|
|
||||||
@row-inserting="
|
|
||||||
($event) => {
|
|
||||||
$event.data.filename = fileNames.map(
|
|
||||||
(name) => name.name
|
|
||||||
);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<DxEditing
|
|
||||||
v-if="isShowButton"
|
|
||||||
:allow-adding="true"
|
|
||||||
:allow-updating="true"
|
|
||||||
:allow-deleting="true"
|
|
||||||
:use-icons="true"
|
|
||||||
mode="popup"
|
|
||||||
>
|
|
||||||
<DxTexts
|
|
||||||
add-row="Tambah"
|
|
||||||
edit-row="Ubah"
|
|
||||||
delete-row="Hapus"
|
|
||||||
confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
|
|
||||||
save-row-changes="Simpan"
|
|
||||||
cancel-row-changes="Batal"
|
|
||||||
></DxTexts>
|
|
||||||
<DxForm label-location="top" :col-count="1">
|
|
||||||
<DxItem dataField="jenisDokumenId">
|
|
||||||
<DxRequiredRule
|
|
||||||
message="Jenis dokumen harus diisi"
|
|
||||||
/>
|
/>
|
||||||
</DxItem>
|
<DxToolbarItem
|
||||||
<DxItem dataField="filename">
|
widget="dxButton"
|
||||||
<div class="fileuploader-container">
|
:options="cancelButtonOptions"
|
||||||
<DxFileUploader
|
location="after"
|
||||||
select-button-text="Browse File"
|
toolbar="bottom"
|
||||||
label-text=""
|
|
||||||
accept="*"
|
|
||||||
upload-url=""
|
|
||||||
upload-mode="instantly"
|
|
||||||
@value-changed="onChangeUploadFile"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</DxItem>
|
|
||||||
<DxItem dataField="keterangan">
|
|
||||||
<DxRequiredRule message="Keterangan harus diisi">
|
|
||||||
<DxTextArea
|
|
||||||
v-model:height="height"
|
|
||||||
:max-length="maxLength"
|
|
||||||
v-model:value="value"
|
|
||||||
v-model:auto-resize-enabled="autoResizeEnabled"
|
|
||||||
/>
|
|
||||||
</DxRequiredRule>
|
|
||||||
</DxItem>
|
|
||||||
</DxForm>
|
|
||||||
<DxPopup
|
|
||||||
:hide-on-outside-click="true"
|
|
||||||
:show-title="true"
|
|
||||||
:width="400"
|
|
||||||
:height="400"
|
|
||||||
title="Form Jenis Pengadaan"
|
|
||||||
>
|
|
||||||
<DxPosition
|
|
||||||
at="center"
|
|
||||||
my="center"
|
|
||||||
v-model:of="positionOf"
|
|
||||||
collision="fit"
|
|
||||||
/>
|
/>
|
||||||
</DxPopup>
|
</DxPopup>
|
||||||
</DxEditing>
|
|
||||||
<DxToolbar>
|
|
||||||
<DxItem name="groupPanel" />
|
|
||||||
<DxItem name="searchPanel" location="before" />
|
|
||||||
<DxItem
|
|
||||||
name="addRowButton"
|
|
||||||
show-text="always"
|
|
||||||
css-class=""
|
|
||||||
>
|
|
||||||
<DxTexts add-row="Tambah"></DxTexts>
|
|
||||||
</DxItem>
|
|
||||||
<DxItem name="exportButton" />
|
|
||||||
<DxItem name="columnChooserButton" />
|
|
||||||
</DxToolbar>
|
|
||||||
<DxFilterRow :visible="false" />
|
|
||||||
<DxColumn
|
|
||||||
cell-template="row-cell-template"
|
|
||||||
caption="No"
|
|
||||||
:width="45"
|
|
||||||
></DxColumn>
|
|
||||||
<DxColumn
|
|
||||||
data-field="jenisDokumenId"
|
|
||||||
caption="Jenis Dokumen"
|
|
||||||
alignment="left"
|
|
||||||
>
|
|
||||||
<!-- <DxLookup
|
|
||||||
:data-source="jenisDokumen"
|
|
||||||
value-expr="ID"
|
|
||||||
display-expr="Name"
|
|
||||||
/> -->
|
|
||||||
</DxColumn>
|
|
||||||
<DxColumn data-field="filename" caption="File">
|
|
||||||
</DxColumn>
|
|
||||||
<DxColumn
|
|
||||||
data-field="keterangan"
|
|
||||||
caption="Keterangan"
|
|
||||||
></DxColumn>
|
|
||||||
<DxColumn type="buttons" caption="Aksi">
|
|
||||||
<DxButton text="edit" icon="edit" />
|
|
||||||
<DxButton text="remove" icon="trash" />
|
|
||||||
</DxColumn>
|
|
||||||
<template #row-cell-template="{ data }">
|
|
||||||
{{ data.rowIndex + 1 }}
|
|
||||||
</template>
|
|
||||||
</DxDataGrid>
|
|
||||||
|
|
||||||
<div class="dx-fieldset-header">Dokumen Pendukung *</div>
|
|
||||||
<DxDataGrid
|
|
||||||
ref="currDataGrid"
|
|
||||||
:data-source="dataDrpDokumenPendukung"
|
|
||||||
key-expr="id"
|
|
||||||
:allow-column-reordering="true"
|
|
||||||
:column-auto-width="true"
|
|
||||||
@row-inserting="
|
|
||||||
($event) => {
|
|
||||||
$event.data.filename = fileNames.map(
|
|
||||||
(name) => name.name
|
|
||||||
);
|
|
||||||
}
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<DxEditing
|
|
||||||
v-if="isShowButton"
|
|
||||||
:allow-adding="true"
|
|
||||||
:allow-updating="true"
|
|
||||||
:allow-deleting="true"
|
|
||||||
:use-icons="true"
|
|
||||||
mode="popup"
|
|
||||||
>
|
|
||||||
<DxTexts
|
|
||||||
add-row="Tambah"
|
|
||||||
edit-row="Ubah"
|
|
||||||
delete-row="Hapus"
|
|
||||||
confirm-delete-message="Apakah anda yakin untuk menghapus data ini?"
|
|
||||||
save-row-changes="Simpan"
|
|
||||||
cancel-row-changes="Batal"
|
|
||||||
></DxTexts>
|
|
||||||
<DxForm label-location="top" :col-count="1">
|
|
||||||
<DxItem dataField="jenisDokumenId">
|
|
||||||
<DxRequiredRule
|
|
||||||
message="Jenis dokumen harus diisi"
|
|
||||||
/>
|
|
||||||
</DxItem>
|
|
||||||
<DxItem dataField="filename">
|
|
||||||
<div class="fileuploader-container">
|
|
||||||
<DxFileUploader
|
|
||||||
select-button-text="Browse File"
|
|
||||||
label-text=""
|
|
||||||
accept="*"
|
|
||||||
upload-url=""
|
|
||||||
upload-mode="instantly"
|
|
||||||
@value-changed="onChangeUploadFile"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</DxItem>
|
|
||||||
<DxItem dataField="keterangan">
|
|
||||||
<DxRequiredRule message="Keterangan harus diisi">
|
|
||||||
<DxTextArea
|
|
||||||
v-model:height="height"
|
|
||||||
:max-length="maxLength"
|
|
||||||
v-model:value="keterangan"
|
|
||||||
v-model:auto-resize-enabled="autoResizeEnabled"
|
|
||||||
/>
|
|
||||||
</DxRequiredRule>
|
|
||||||
</DxItem>
|
|
||||||
</DxForm>
|
|
||||||
<DxPopup
|
|
||||||
:hide-on-outside-click="true"
|
|
||||||
:show-title="true"
|
|
||||||
:width="400"
|
|
||||||
:height="400"
|
|
||||||
title="Tambah"
|
|
||||||
>
|
|
||||||
<DxPosition
|
|
||||||
at="center"
|
|
||||||
my="center"
|
|
||||||
v-model:of="positionOf"
|
|
||||||
collision="fit"
|
|
||||||
/>
|
|
||||||
</DxPopup>
|
|
||||||
</DxEditing>
|
|
||||||
<DxToolbar>
|
|
||||||
<DxItem name="groupPanel" />
|
|
||||||
<DxItem name="searchPanel" location="before" />
|
|
||||||
<DxItem
|
|
||||||
name="addRowButton"
|
|
||||||
show-text="always"
|
|
||||||
css-class=""
|
|
||||||
>
|
|
||||||
<DxTexts add-row="Tambah"></DxTexts>
|
|
||||||
</DxItem>
|
|
||||||
<DxItem name="exportButton" />
|
|
||||||
<DxItem name="columnChooserButton" />
|
|
||||||
</DxToolbar>
|
|
||||||
<DxFilterRow :visible="false" />
|
|
||||||
<DxColumn
|
|
||||||
cell-template="row-cell-template"
|
|
||||||
caption="No"
|
|
||||||
:width="45"
|
|
||||||
></DxColumn>
|
|
||||||
|
|
||||||
<DxColumn
|
|
||||||
data-field="jenisDokumenId"
|
|
||||||
caption="Jenis Dokumen"
|
|
||||||
alignment="left"
|
|
||||||
>
|
|
||||||
<!-- <DxLookup
|
|
||||||
display-expr="name"
|
|
||||||
value-expr="value"
|
|
||||||
:data-source="jenisDokumen"
|
|
||||||
/> -->
|
|
||||||
</DxColumn>
|
|
||||||
<DxColumn data-field="filename" caption="File">
|
|
||||||
</DxColumn>
|
|
||||||
<DxColumn
|
|
||||||
data-field="keterangan"
|
|
||||||
caption="Keterangan"
|
|
||||||
></DxColumn>
|
|
||||||
<DxColumn type="buttons" caption="Aksi">
|
|
||||||
<DxButton text="edit" icon="edit" />
|
|
||||||
<DxButton text="remove" icon="trash" />
|
|
||||||
</DxColumn>
|
|
||||||
<template #row-cell-template="{ data }">
|
|
||||||
{{ data.rowIndex + 1 }}
|
|
||||||
</template>
|
|
||||||
</DxDataGrid>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</DxScrollView>
|
|
||||||
</template>
|
|
||||||
</Popup>
|
|
||||||
|
|
||||||
<DxDataGrid
|
<DxDataGrid
|
||||||
ref="currDataGrid"
|
ref="currDataGrid"
|
||||||
:data-source="dataSource"
|
:data-source="dataSource"
|
||||||
key-expr="id"
|
|
||||||
:allow-column-reordering="true"
|
:allow-column-reordering="true"
|
||||||
:column-auto-width="true"
|
:column-auto-width="true"
|
||||||
>
|
>
|
||||||
@ -333,20 +56,6 @@
|
|||||||
<DxRequiredRule message="Tahun harus diisi" />
|
<DxRequiredRule message="Tahun harus diisi" />
|
||||||
</DxItem>
|
</DxItem>
|
||||||
</DxForm>
|
</DxForm>
|
||||||
<DxPopup
|
|
||||||
:hide-on-outside-click="true"
|
|
||||||
:show-title="true"
|
|
||||||
:width="400"
|
|
||||||
:height="400"
|
|
||||||
title="Form Jenis Pengadaan"
|
|
||||||
>
|
|
||||||
<DxPosition
|
|
||||||
at="center"
|
|
||||||
my="center"
|
|
||||||
v-model:of="positionOf"
|
|
||||||
collision="fit"
|
|
||||||
/>
|
|
||||||
</DxPopup>
|
|
||||||
</DxEditing>
|
</DxEditing>
|
||||||
<DxToolbar>
|
<DxToolbar>
|
||||||
<DxItem name="groupPanel" />
|
<DxItem name="groupPanel" />
|
||||||
@ -442,18 +151,11 @@ import DxDataGrid, {
|
|||||||
DxButton,
|
DxButton,
|
||||||
DxRequiredRule,
|
DxRequiredRule,
|
||||||
// DxLookup,
|
// DxLookup,
|
||||||
DxPopup,
|
|
||||||
} from "devextreme-vue/data-grid";
|
} from "devextreme-vue/data-grid";
|
||||||
import CustomStore from "devextreme/data/custom_store";
|
import CustomStore from "devextreme/data/custom_store";
|
||||||
import {
|
import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup';
|
||||||
DxPopup as Popup,
|
|
||||||
DxToolbarItem,
|
import PopUpUploadDokumenPendukung from './drp-upload-dokumen-pendukung.vue'
|
||||||
DxPosition,
|
|
||||||
} from "devextreme-vue/popup";
|
|
||||||
import { DxScrollView } from "devextreme-vue/scroll-view";
|
|
||||||
import { DxSelectBox } from "devextreme-vue/select-box";
|
|
||||||
import { DxFileUploader } from "devextreme-vue/file-uploader";
|
|
||||||
import DxTextArea from "devextreme-vue/text-area";
|
|
||||||
|
|
||||||
const approveStatus = [
|
const approveStatus = [
|
||||||
{ name: "Penyusunan", value: 0 },
|
{ name: "Penyusunan", value: 0 },
|
||||||
@ -578,51 +280,28 @@ export default {
|
|||||||
DxRequiredRule,
|
DxRequiredRule,
|
||||||
// DxLookup,
|
// DxLookup,
|
||||||
DxPopup,
|
DxPopup,
|
||||||
DxScrollView,
|
|
||||||
Popup,
|
|
||||||
DxToolbarItem,
|
DxToolbarItem,
|
||||||
DxPosition,
|
PopUpUploadDokumenPendukung,
|
||||||
DxSelectBox,
|
|
||||||
DxFileUploader,
|
|
||||||
DxTextArea,
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
linkDokumen($event) {
|
linkDokumen(e) {
|
||||||
fetch(URL + "/" + $event.row.data.id)
|
this.isPopupUploadDokumenPendukung = !this.isPopupUploadDokumenPendukung;
|
||||||
.then((response) => response.json())
|
this.selectedDrpId = e.row.data.id;
|
||||||
.then((response) => {
|
this.selectedDrpTahun = e.row.data.tahun;
|
||||||
return (
|
|
||||||
(this.dataDrpDokumen = response.dataDrpDokumen),
|
|
||||||
(this.dataDrpDokumenPendukung = response.dataDrpDokumenPendukung)
|
|
||||||
);
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
throw new Error("Terdapat kesalahan memuat data");
|
|
||||||
});
|
|
||||||
// dataDrpDokumen.key($event.row.data.id)
|
|
||||||
// dataDrpDokumen.load($event.row.data.id);
|
|
||||||
|
|
||||||
this.popupVisible = true;
|
|
||||||
this.popupTitle = "Upload Dokumen Pendukung";
|
|
||||||
this.isShowButton = true;
|
|
||||||
},
|
},
|
||||||
linkDetail(e) {
|
linkDetail(e) {
|
||||||
location.href='#/drp/drp-pengadaan?drpid='+e.row.data.id;
|
location.href='#/drp/drp-pengadaan?drpid='+e.row.data.id;
|
||||||
},
|
},
|
||||||
linkKirim($event) {
|
linkKirim($event) {
|
||||||
console.log("event: ", $event.row.values);
|
console.log("event: ", $event.row.values);
|
||||||
this.popupVisible = true;
|
|
||||||
this.popupTitle = "Review & Approval DRP";
|
|
||||||
this.dataDrp = $event.row.values;
|
this.dataDrp = $event.row.values;
|
||||||
this.isShowButton = true;
|
|
||||||
console.log("drp: ", this.dataDrp);
|
|
||||||
},
|
},
|
||||||
onChangeUploadFile($event) {
|
onChangeUploadFile($event) {
|
||||||
this.fileNames = $event.value;
|
this.fileNames = $event.value;
|
||||||
console.log("file", this.fileNames);
|
console.log("file", this.fileNames);
|
||||||
},
|
},
|
||||||
logEvent(eventName) {
|
onShowing(e, d) {
|
||||||
console.log("event", eventName.value);
|
console.log(e, d)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@ -630,24 +309,23 @@ export default {
|
|||||||
//jsonUrl: URL,
|
//jsonUrl: URL,
|
||||||
dataSource,
|
dataSource,
|
||||||
dropdown: "",
|
dropdown: "",
|
||||||
popupVisible: false,
|
|
||||||
popupTitle: "",
|
|
||||||
isShowButton: true,
|
|
||||||
dataDrpDokumen,
|
dataDrpDokumen,
|
||||||
dataDrpDokumenPendukung,
|
dataDrpDokumenPendukung,
|
||||||
|
isPopupUploadDokumenPendukung: false,
|
||||||
|
selectedDrpId: null,
|
||||||
|
selectedDrpTahun: null,
|
||||||
fileNames: [],
|
fileNames: [],
|
||||||
saveButtonOptions: {
|
saveButtonOptions: {
|
||||||
text: "Simpan",
|
text: 'Simpan',
|
||||||
|
onClick: function(e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cancelButtonOptions: {
|
||||||
|
text: 'Batalkan',
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
this.popupVisible = false;
|
this.isPopupUploadDokumenPendukung = false;
|
||||||
console.log("simpan");
|
}
|
||||||
},
|
|
||||||
},
|
|
||||||
closeButtonOptions: {
|
|
||||||
text: "Batal",
|
|
||||||
onClick: () => {
|
|
||||||
this.popupVisible = false;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|||||||
19
src/views/drp/drp-upload-dokumen-pendukung.vue
Normal file
19
src/views/drp/drp-upload-dokumen-pendukung.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<div>Tahun DRP</div>
|
||||||
|
<div>{{ drpTahun }}</div>
|
||||||
|
|
||||||
|
<DxScrollView>
|
||||||
|
<ListDokumenRKAP :drpId="props.drpId" :drpTahun="props.drpTahun" />
|
||||||
|
<ListDokumenPendukung :drpId="props.drpId" :drpTahun="props.drpTahun" />
|
||||||
|
</DxScrollView>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {defineProps} from 'vue'
|
||||||
|
import {DxScrollView} from "devextreme-vue/scroll-view";
|
||||||
|
|
||||||
|
import ListDokumenRKAP from './drp-upload-dokumen-popup/list-dokumen-rkap.vue';
|
||||||
|
import ListDokumenPendukung from './drp-upload-dokumen-popup/list-dokumen-pendukung.vue';
|
||||||
|
|
||||||
|
const props = defineProps(['drpId', 'drpTahun']);
|
||||||
|
</script>
|
||||||
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user