Add DRP document
This commit is contained in:
Mulia Nasution
@@ -5,311 +5,34 @@
|
||||
<div class="content-block">
|
||||
<div class="dx-card responsive-paddings">
|
||||
<div id="app-container">
|
||||
<Popup
|
||||
v-model:visible="popupVisible"
|
||||
<DxPopup
|
||||
v-model:visible="isPopupUploadDokumenPendukung"
|
||||
:drag-enabled="false"
|
||||
:hide-on-outside-click="true"
|
||||
:show-close-button="false"
|
||||
:show-close-button="true"
|
||||
:show-title="true"
|
||||
:width="914"
|
||||
:height="672"
|
||||
container=".dx-viewport"
|
||||
:title="popupTitle"
|
||||
@showing="onShowing"
|
||||
title="Upload Dokumen Pendukung"
|
||||
>
|
||||
<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>
|
||||
<div class="dx-fieldset">
|
||||
<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>
|
||||
</DxSelectBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DxScrollView width="100%" height="100%" padding="100px">
|
||||
<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>
|
||||
<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="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>
|
||||
</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>
|
||||
<PopUpUploadDokumenPendukung :key="id" :drpId="selectedDrpId" :drpTahun="selectedDrpTahun"/>
|
||||
</template>
|
||||
</Popup>
|
||||
|
||||
<DxToolbarItem
|
||||
widget="dxButton"
|
||||
:options="saveButtonOptions"
|
||||
location="after"
|
||||
toolbar="bottom"
|
||||
/>
|
||||
<DxToolbarItem
|
||||
widget="dxButton"
|
||||
:options="cancelButtonOptions"
|
||||
location="after"
|
||||
toolbar="bottom"
|
||||
/>
|
||||
</DxPopup>
|
||||
<DxDataGrid
|
||||
ref="currDataGrid"
|
||||
:data-source="dataSource"
|
||||
key-expr="id"
|
||||
:allow-column-reordering="true"
|
||||
:column-auto-width="true"
|
||||
>
|
||||
@@ -333,20 +56,6 @@
|
||||
<DxRequiredRule message="Tahun harus diisi" />
|
||||
</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>
|
||||
</DxEditing>
|
||||
<DxToolbar>
|
||||
<DxItem name="groupPanel" />
|
||||
@@ -442,18 +151,11 @@ import DxDataGrid, {
|
||||
DxButton,
|
||||
DxRequiredRule,
|
||||
// DxLookup,
|
||||
DxPopup,
|
||||
} from "devextreme-vue/data-grid";
|
||||
import CustomStore from "devextreme/data/custom_store";
|
||||
import {
|
||||
DxPopup as Popup,
|
||||
DxToolbarItem,
|
||||
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";
|
||||
import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup';
|
||||
|
||||
import PopUpUploadDokumenPendukung from './drp-upload-dokumen-pendukung.vue'
|
||||
|
||||
const approveStatus = [
|
||||
{ name: "Penyusunan", value: 0 },
|
||||
@@ -578,51 +280,28 @@ export default {
|
||||
DxRequiredRule,
|
||||
// DxLookup,
|
||||
DxPopup,
|
||||
DxScrollView,
|
||||
Popup,
|
||||
DxToolbarItem,
|
||||
DxPosition,
|
||||
DxSelectBox,
|
||||
DxFileUploader,
|
||||
DxTextArea,
|
||||
PopUpUploadDokumenPendukung,
|
||||
},
|
||||
methods: {
|
||||
linkDokumen($event) {
|
||||
fetch(URL + "/" + $event.row.data.id)
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
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;
|
||||
linkDokumen(e) {
|
||||
this.isPopupUploadDokumenPendukung = !this.isPopupUploadDokumenPendukung;
|
||||
this.selectedDrpId = e.row.data.id;
|
||||
this.selectedDrpTahun = e.row.data.tahun;
|
||||
},
|
||||
linkDetail(e) {
|
||||
location.href='#/drp/drp-pengadaan?drpid='+e.row.data.id;
|
||||
},
|
||||
linkKirim($event) {
|
||||
console.log("event: ", $event.row.values);
|
||||
this.popupVisible = true;
|
||||
this.popupTitle = "Review & Approval DRP";
|
||||
this.dataDrp = $event.row.values;
|
||||
this.isShowButton = true;
|
||||
console.log("drp: ", this.dataDrp);
|
||||
},
|
||||
onChangeUploadFile($event) {
|
||||
this.fileNames = $event.value;
|
||||
console.log("file", this.fileNames);
|
||||
},
|
||||
logEvent(eventName) {
|
||||
console.log("event", eventName.value);
|
||||
onShowing(e, d) {
|
||||
console.log(e, d)
|
||||
},
|
||||
},
|
||||
data() {
|
||||
@@ -630,24 +309,23 @@ export default {
|
||||
//jsonUrl: URL,
|
||||
dataSource,
|
||||
dropdown: "",
|
||||
popupVisible: false,
|
||||
popupTitle: "",
|
||||
isShowButton: true,
|
||||
dataDrpDokumen,
|
||||
dataDrpDokumenPendukung,
|
||||
isPopupUploadDokumenPendukung: false,
|
||||
selectedDrpId: null,
|
||||
selectedDrpTahun: null,
|
||||
fileNames: [],
|
||||
saveButtonOptions: {
|
||||
text: "Simpan",
|
||||
onClick: () => {
|
||||
this.popupVisible = false;
|
||||
console.log("simpan");
|
||||
},
|
||||
text: 'Simpan',
|
||||
onClick: function(e) {
|
||||
console.log(e);
|
||||
}
|
||||
},
|
||||
closeButtonOptions: {
|
||||
text: "Batal",
|
||||
cancelButtonOptions: {
|
||||
text: 'Batalkan',
|
||||
onClick: () => {
|
||||
this.popupVisible = false;
|
||||
},
|
||||
this.isPopupUploadDokumenPendukung = false;
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user