add popup 'tambah' in penyusunan drp table
This commit is contained in:
Mulia Nasution
parent
7ae5db711e
commit
6db5ac633c
@ -67,9 +67,19 @@
|
||||
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"
|
||||
>
|
||||
@ -82,8 +92,32 @@
|
||||
cancel-row-changes="Batal"
|
||||
></DxTexts>
|
||||
<DxForm label-location="top" :col-count="1">
|
||||
<DxItem dataField="tahun">
|
||||
<DxRequiredRule message="Tahun harus diisi" />
|
||||
<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
|
||||
@ -124,7 +158,13 @@
|
||||
data-field="jenisDokumenId"
|
||||
caption="Jenis Dokumen"
|
||||
alignment="left"
|
||||
></DxColumn>
|
||||
>
|
||||
<!-- <DxLookup
|
||||
:data-source="jenisDokumen"
|
||||
value-expr="ID"
|
||||
display-expr="Name"
|
||||
/> -->
|
||||
</DxColumn>
|
||||
<DxColumn data-field="filename" caption="File">
|
||||
</DxColumn>
|
||||
<DxColumn
|
||||
@ -132,16 +172,8 @@
|
||||
caption="Keterangan"
|
||||
></DxColumn>
|
||||
<DxColumn type="buttons" caption="Aksi">
|
||||
<DxButton
|
||||
text="Dokumen"
|
||||
icon="edit"
|
||||
hint="Dokumen Pendukung DRP"
|
||||
/>
|
||||
<DxButton
|
||||
text="Detil"
|
||||
icon="trash"
|
||||
hint="Detil/Konten DRP "
|
||||
/>
|
||||
<DxButton text="edit" icon="edit" />
|
||||
<DxButton text="remove" icon="trash" />
|
||||
</DxColumn>
|
||||
<template #row-cell-template="{ data }">
|
||||
{{ data.rowIndex + 1 }}
|
||||
@ -155,9 +187,19 @@
|
||||
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"
|
||||
>
|
||||
@ -170,8 +212,32 @@
|
||||
cancel-row-changes="Batal"
|
||||
></DxTexts>
|
||||
<DxForm label-location="top" :col-count="1">
|
||||
<DxItem dataField="tahun">
|
||||
<DxRequiredRule message="Tahun harus diisi" />
|
||||
<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
|
||||
@ -179,7 +245,7 @@
|
||||
:show-title="true"
|
||||
:width="400"
|
||||
:height="400"
|
||||
title="Form Jenis Pengadaan"
|
||||
title="Tambah"
|
||||
>
|
||||
<DxPosition
|
||||
at="center"
|
||||
@ -214,26 +280,21 @@
|
||||
caption="Jenis Dokumen"
|
||||
alignment="left"
|
||||
>
|
||||
<DxLookup
|
||||
<!-- <DxLookup
|
||||
display-expr="name"
|
||||
value-expr="value"
|
||||
:data-source="jenisDokumen"
|
||||
/>
|
||||
/> -->
|
||||
</DxColumn>
|
||||
<DxColumn data-field="filename" caption="File">
|
||||
</DxColumn>
|
||||
<DxColumn data-field="" caption="Keterangan"></DxColumn>
|
||||
<DxColumn
|
||||
data-field="keterangan"
|
||||
caption="Keterangan"
|
||||
></DxColumn>
|
||||
<DxColumn type="buttons" caption="Aksi">
|
||||
<DxButton
|
||||
text="Dokumen"
|
||||
icon="edit"
|
||||
hint="Dokumen Pendukung DRP"
|
||||
/>
|
||||
<DxButton
|
||||
text="Detil"
|
||||
icon="trash"
|
||||
hint="Detil/Konten DRP "
|
||||
/>
|
||||
<DxButton text="edit" icon="edit" />
|
||||
<DxButton text="remove" icon="trash" />
|
||||
</DxColumn>
|
||||
<template #row-cell-template="{ data }">
|
||||
{{ data.rowIndex + 1 }}
|
||||
@ -252,12 +313,13 @@
|
||||
:allow-column-reordering="true"
|
||||
:column-auto-width="true"
|
||||
>
|
||||
<DxEditing
|
||||
:allow-adding="true"
|
||||
:allow-updating="true"
|
||||
:allow-deleting="true"
|
||||
:use-icons="true"
|
||||
mode="popup">
|
||||
<DxEditing
|
||||
:allow-adding="true"
|
||||
:allow-updating="true"
|
||||
:allow-deleting="true"
|
||||
:use-icons="true"
|
||||
mode="popup"
|
||||
>
|
||||
<DxTexts
|
||||
add-row="Tambah"
|
||||
edit-row="Ubah"
|
||||
@ -379,7 +441,7 @@ import DxDataGrid, {
|
||||
DxTexts,
|
||||
DxButton,
|
||||
DxRequiredRule,
|
||||
DxLookup,
|
||||
// DxLookup,
|
||||
DxPopup,
|
||||
} from "devextreme-vue/data-grid";
|
||||
import CustomStore from "devextreme/data/custom_store";
|
||||
@ -390,6 +452,8 @@ import {
|
||||
} 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 = [
|
||||
{ name: "Penyusunan", value: 0 },
|
||||
@ -406,7 +470,7 @@ const dataSource = new CustomStore({
|
||||
key: "id",
|
||||
|
||||
load: () => {
|
||||
return fetch(URL+process.env.VUE_APP_PAGE_SIZE)
|
||||
return fetch(URL + process.env.VUE_APP_PAGE_SIZE)
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
return {
|
||||
@ -512,13 +576,15 @@ export default {
|
||||
DxTexts,
|
||||
DxButton,
|
||||
DxRequiredRule,
|
||||
DxLookup,
|
||||
// DxLookup,
|
||||
DxPopup,
|
||||
DxScrollView,
|
||||
Popup,
|
||||
DxToolbarItem,
|
||||
DxPosition,
|
||||
DxSelectBox,
|
||||
DxFileUploader,
|
||||
DxTextArea,
|
||||
},
|
||||
methods: {
|
||||
linkDokumen($event) {
|
||||
@ -553,7 +619,13 @@ export default {
|
||||
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);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -565,6 +637,7 @@ export default {
|
||||
isShowButton: true,
|
||||
dataDrpDokumen,
|
||||
dataDrpDokumenPendukung,
|
||||
fileNames: [],
|
||||
saveButtonOptions: {
|
||||
text: "Simpan",
|
||||
onClick: () => {
|
||||
@ -606,4 +679,11 @@ export default {
|
||||
z-index: 20;
|
||||
width: fit-content;
|
||||
}
|
||||
.fileuploader-container {
|
||||
border: solid 1px #dbd203;
|
||||
padding: 0;
|
||||
}
|
||||
.dx-fileuploader-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user