fixing popup tambah
This commit is contained in:
Mulia Nasution
398
src/views/drp/drp-penyusunan-dokumen.vue
Normal file
398
src/views/drp/drp-penyusunan-dokumen.vue
Normal file
@@ -0,0 +1,398 @@
|
|||||||
|
<template>
|
||||||
|
<DxScrollView width="100%" height="100%" padding="100px">
|
||||||
|
<div id="textBlock">
|
||||||
|
<div>
|
||||||
|
<div class="dx-fieldset-header">Dokumen RKAP *</div>
|
||||||
|
<DxDataGrid
|
||||||
|
ref="currDataGrid"
|
||||||
|
:data-source="dsDrpDokumen"
|
||||||
|
key-expr="id"
|
||||||
|
:allow-column-reordering="true"
|
||||||
|
:column-auto-width="true"
|
||||||
|
@editor-preparing="onEditorPreparing"
|
||||||
|
>
|
||||||
|
<DxEditing
|
||||||
|
: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">
|
||||||
|
<DxRequiredRule message="File dokumen harus diisi" />
|
||||||
|
</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="dsDrpDokumenPendukung"
|
||||||
|
key-expr="id"
|
||||||
|
:allow-column-reordering="true"
|
||||||
|
:column-auto-width="true"
|
||||||
|
@editor-preparing="onEditorPreparing"
|
||||||
|
>
|
||||||
|
<DxEditing
|
||||||
|
: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>@editor-preparing="onEditorPreparing"
|
||||||
|
<DxItem dataField="filename">
|
||||||
|
<DxRequiredRule message="File dokumen harus diisi" />
|
||||||
|
</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>
|
||||||
|
<script>
|
||||||
|
import CustomStore from "devextreme/data/custom_store";
|
||||||
|
import { DxScrollView } from "devextreme-vue/scroll-view";
|
||||||
|
import DxTextArea from "devextreme-vue/text-area";
|
||||||
|
import {
|
||||||
|
DxDataGrid,
|
||||||
|
DxEditing,
|
||||||
|
DxTexts,
|
||||||
|
DxForm,
|
||||||
|
DxColumn,
|
||||||
|
DxItem,
|
||||||
|
DxRequiredRule,
|
||||||
|
DxToolbar,
|
||||||
|
DxPopup,
|
||||||
|
} from "devextreme-vue/data-grid";
|
||||||
|
|
||||||
|
const URL = process.env.VUE_APP_ROOT_API + "/drp";
|
||||||
|
|
||||||
|
const dsDrpDokumen = new CustomStore({
|
||||||
|
key: "id",
|
||||||
|
load() {
|
||||||
|
return fetch(URL + "/3" + process.env.VUE_APP_PAGE_SIZE)
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => ({
|
||||||
|
data: data.dataDrpDokumen,
|
||||||
|
totalCount: data.totalCount,
|
||||||
|
}))
|
||||||
|
.catch(() => {
|
||||||
|
throw new Error("Data Loading Error");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
insert: (values) => {
|
||||||
|
return fetch(URL + "/upload/dokumen", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(values),
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
update: (key, values) => {
|
||||||
|
return fetch(URL + "/upload/dokumen/" + encodeURIComponent(key), {
|
||||||
|
method: "PUT",
|
||||||
|
body: JSON.stringify(values),
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
remove: (key) => {
|
||||||
|
return fetch(URL + "/upload/dokumen/" + encodeURIComponent(key), {
|
||||||
|
method: "DELETE",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const dsDrpDokumenPendukung = new CustomStore({
|
||||||
|
key: "id",
|
||||||
|
load() {
|
||||||
|
return fetch(URL + "/3" + process.env.VUE_APP_PAGE_SIZE)
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => ({
|
||||||
|
data: data.dataDrpDokumenPendukung,
|
||||||
|
totalCount: data.totalCount,
|
||||||
|
}))
|
||||||
|
.catch(() => {
|
||||||
|
throw new Error("Data Loading Error");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
insert: (values) => {
|
||||||
|
return fetch(URL + "/upload/dokumen", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(values),
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
update: (key, values) => {
|
||||||
|
return fetch(URL + "/upload/dokumen/" + encodeURIComponent(key), {
|
||||||
|
method: "PUT",
|
||||||
|
body: JSON.stringify(values),
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
remove: (key) => {
|
||||||
|
return fetch(URL + "/upload/dokumen/" + encodeURIComponent(key), {
|
||||||
|
method: "DELETE",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
DxScrollView,
|
||||||
|
DxTextArea,
|
||||||
|
DxDataGrid,
|
||||||
|
DxEditing,
|
||||||
|
DxTexts,
|
||||||
|
DxForm,
|
||||||
|
DxColumn,
|
||||||
|
DxItem,
|
||||||
|
DxRequiredRule,
|
||||||
|
DxToolbar,
|
||||||
|
DxPopup,
|
||||||
|
},
|
||||||
|
// created() {
|
||||||
|
// this.$watch(
|
||||||
|
// () => this.$route.params,
|
||||||
|
// () => {
|
||||||
|
// this.fetchData();
|
||||||
|
// },
|
||||||
|
// { immediate: true }
|
||||||
|
// );
|
||||||
|
// },
|
||||||
|
methods: {
|
||||||
|
// fetchData() {
|
||||||
|
// return fetch(URL + "/3" + process.env.VUE_APP_PAGE_SIZE)
|
||||||
|
// .then((response) => response.json())
|
||||||
|
// .then((data) => {
|
||||||
|
// return (this.dsDrpDokumen = data.dataDrpDokumen);
|
||||||
|
// })
|
||||||
|
// .catch(() => {
|
||||||
|
// throw new Error("Data Loading Error");
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
onChangeUploadFile($event) {
|
||||||
|
console.log("upload file value", $event);
|
||||||
|
this.fileNames = $event.value;
|
||||||
|
console.log("file", this.fileNames);
|
||||||
|
console.log("changes ", this.changes);
|
||||||
|
},
|
||||||
|
formAction($event) {
|
||||||
|
console.log("Form: ", $event);
|
||||||
|
},
|
||||||
|
onFilesUploaded($event) {
|
||||||
|
console.log("file uploaded", $event);
|
||||||
|
},
|
||||||
|
|
||||||
|
onEditorPreparing(e) {
|
||||||
|
/*
|
||||||
|
same case reference: https://supportcenter.devexpress.com/ticket/details/t963821/how-to-add-fileuploader-in-a-datagrid-popup-edit-insert-form
|
||||||
|
official document: https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Editing/#Customize_Editors
|
||||||
|
*/
|
||||||
|
|
||||||
|
// temporary solution
|
||||||
|
if (e.dataField == "filename" && e.parentType === "dataRow") {
|
||||||
|
// const defaultValueChangeHandler = e.editorOptions.onValueChanged;
|
||||||
|
e.editorName = "dxFileUploader"; // Change the editor's type
|
||||||
|
e.editorOptions.uploadMode = "Instantly";
|
||||||
|
e.editorOptions.Multiple = false;
|
||||||
|
|
||||||
|
e.editorOptions.onValueChanged = function (args) {
|
||||||
|
var formData = new FormData();
|
||||||
|
|
||||||
|
formData.append(args.value[0].name, args.value[0]);
|
||||||
|
|
||||||
|
|
||||||
|
console.log("form data", formData);
|
||||||
|
console.log("args form,", args.value);
|
||||||
|
// Override the default handler
|
||||||
|
// ...
|
||||||
|
// Custom commands go here
|
||||||
|
// ...
|
||||||
|
// If you want to modify the editor value, call the setValue function:
|
||||||
|
// e.setValue(newValue);
|
||||||
|
e.setValue(formData)
|
||||||
|
// Otherwise, call the default handler:
|
||||||
|
// defaultValueChangeHandler(args);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dsDrpDokumen,
|
||||||
|
dsDrpDokumenPendukung,
|
||||||
|
formRefName: "tree-view",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.dx-overlay-content .dx-popup-content {
|
||||||
|
height: 517px;
|
||||||
|
min-height: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -43,266 +43,11 @@
|
|||||||
<div class="dx-field">
|
<div class="dx-field">
|
||||||
<div class="dx-field-label">Tahun DRP</div>
|
<div class="dx-field-label">Tahun DRP</div>
|
||||||
<div class="dx-field-value">
|
<div class="dx-field-value">
|
||||||
<DxSelectBox
|
{{ year }}
|
||||||
: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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<DxScrollView width="100%" height="100%" padding="100px">
|
<PopupUploadDokumen :id="passId" />
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
</Popup>
|
</Popup>
|
||||||
|
|
||||||
@@ -450,10 +195,7 @@ import {
|
|||||||
DxToolbarItem,
|
DxToolbarItem,
|
||||||
DxPosition,
|
DxPosition,
|
||||||
} from "devextreme-vue/popup";
|
} from "devextreme-vue/popup";
|
||||||
import { DxScrollView } from "devextreme-vue/scroll-view";
|
import PopupUploadDokumen from './drp-penyusunan-dokumen.vue'
|
||||||
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 },
|
||||||
@@ -510,51 +252,6 @@ const dataSource = new CustomStore({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// const dataDrpDokumen = new CustomStore({
|
|
||||||
// key: "id",
|
|
||||||
// load: (key) => {
|
|
||||||
// return fetch(URL + "/" + encodeURIComponent(key) + "?size=100")
|
|
||||||
// .then((response) => response.json())
|
|
||||||
// .then((response) => {
|
|
||||||
// console.log("res", response.dataDrpDokumen);
|
|
||||||
// console.log("key: ", key);
|
|
||||||
// return {
|
|
||||||
// data: response.dataDrpDokumen,
|
|
||||||
// };
|
|
||||||
// })
|
|
||||||
// .catch(() => {
|
|
||||||
// throw new Error("Terdapat kesalahan memuat data");
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
|
|
||||||
// insert: (values) => {
|
|
||||||
// return fetch(URL, {
|
|
||||||
// method: "POST",
|
|
||||||
// body: JSON.stringify(values),
|
|
||||||
// headers: {
|
|
||||||
// "Content-Type": "application/json",
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
|
|
||||||
// update: (key, values) => {
|
|
||||||
// return fetch(URL + "/" + encodeURIComponent(key), {
|
|
||||||
// method: "PUT",
|
|
||||||
// body: JSON.stringify(values),
|
|
||||||
// headers: {
|
|
||||||
// "Content-Type": "applicatoin/json",
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
|
|
||||||
// remove: (key) => {
|
|
||||||
// return fetch(URL + "/" + encodeURIComponent(key), {
|
|
||||||
// method: "DELETE",
|
|
||||||
// });
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
let dataDrpDokumen = [];
|
|
||||||
let dataDrpDokumenPendukung = [];
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
@@ -578,30 +275,16 @@ export default {
|
|||||||
DxRequiredRule,
|
DxRequiredRule,
|
||||||
// DxLookup,
|
// DxLookup,
|
||||||
DxPopup,
|
DxPopup,
|
||||||
DxScrollView,
|
|
||||||
Popup,
|
Popup,
|
||||||
DxToolbarItem,
|
DxToolbarItem,
|
||||||
DxPosition,
|
DxPosition,
|
||||||
DxSelectBox,
|
PopupUploadDokumen,
|
||||||
DxFileUploader,
|
|
||||||
DxTextArea,
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
linkDokumen($event) {
|
linkDokumen($event) {
|
||||||
fetch(URL + "/" + $event.row.data.id)
|
// console.log($event);
|
||||||
.then((response) => response.json())
|
this.year = $event.row.data.tahun
|
||||||
.then((response) => {
|
this.passId = $event.row.key
|
||||||
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.popupVisible = true;
|
||||||
this.popupTitle = "Upload Dokumen Pendukung";
|
this.popupTitle = "Upload Dokumen Pendukung";
|
||||||
this.isShowButton = true;
|
this.isShowButton = true;
|
||||||
@@ -617,30 +300,21 @@ export default {
|
|||||||
this.isShowButton = true;
|
this.isShowButton = true;
|
||||||
console.log("drp: ", this.dataDrp);
|
console.log("drp: ", this.dataDrp);
|
||||||
},
|
},
|
||||||
onChangeUploadFile($event) {
|
|
||||||
this.fileNames = $event.value;
|
|
||||||
console.log("file", this.fileNames);
|
|
||||||
},
|
|
||||||
logEvent(eventName) {
|
|
||||||
console.log("event", eventName.value);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
//jsonUrl: URL,
|
//jsonUrl: URL,
|
||||||
|
passId: '',
|
||||||
dataSource,
|
dataSource,
|
||||||
dropdown: "",
|
year: "200",
|
||||||
popupVisible: false,
|
popupVisible: false,
|
||||||
popupTitle: "",
|
popupTitle: "",
|
||||||
isShowButton: true,
|
isShowButton: true,
|
||||||
dataDrpDokumen,
|
|
||||||
dataDrpDokumenPendukung,
|
|
||||||
fileNames: [],
|
|
||||||
saveButtonOptions: {
|
saveButtonOptions: {
|
||||||
text: "Simpan",
|
text: "Simpan",
|
||||||
onClick: () => {
|
onClick: ($event) => {
|
||||||
this.popupVisible = false;
|
this.popupVisible = false;
|
||||||
console.log("simpan");
|
console.log("simpan", $event);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
closeButtonOptions: {
|
closeButtonOptions: {
|
||||||
@@ -664,9 +338,6 @@ export default {
|
|||||||
.dx-link.dx-icon-movetofolder.dx-link-icon {
|
.dx-link.dx-icon-movetofolder.dx-link-icon {
|
||||||
color: #0996c2;
|
color: #0996c2;
|
||||||
}
|
}
|
||||||
.dx-scrollable {
|
|
||||||
padding-bottom: 50px;
|
|
||||||
}
|
|
||||||
.dx-field {
|
.dx-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Reference in New Issue
Block a user