AndriDiki/smartproc-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add popup 'tambah' in penyusunan drp table

Browse Source
This commit is contained in:
Mulia Nasution 2023-06-02 16:55:23 +07:00
parent 7ae5db711e
commit 6db5ac633c
1 changed files with 119 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/views/drp/drp-penyusunan.vue
View File

@ -67,9 +67,19 @@
key-expr="id" key-expr="id"
:allow-column-reordering="true" :allow-column-reordering="true"
:column-auto-width="true" :column-auto-width="true"
@row-inserting="
($event) => {
$event.data.filename = fileNames.map(
(name) => name.name
);
}
"
> >
<DxEditing <DxEditing
v-if="isShowButton"
:allow-adding="true" :allow-adding="true"
:allow-updating="true"
:allow-deleting="true"
:use-icons="true" :use-icons="true"
mode="popup" mode="popup"
> >
@ -82,8 +92,32 @@
cancel-row-changes="Batal" cancel-row-changes="Batal"
></DxTexts> ></DxTexts>
<DxForm label-location="top" :col-count="1"> <DxForm label-location="top" :col-count="1">
<DxItem dataField="tahun"> <DxItem dataField="jenisDokumenId">
<DxRequiredRule message="Tahun harus diisi" /> <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> </DxItem>
</DxForm> </DxForm>
<DxPopup <DxPopup
@ -124,7 +158,13 @@
data-field="jenisDokumenId" data-field="jenisDokumenId"
caption="Jenis Dokumen" caption="Jenis Dokumen"
alignment="left" alignment="left"
></DxColumn> >
<!-- <DxLookup
:data-source="jenisDokumen"
value-expr="ID"
display-expr="Name"
/> -->
</DxColumn>
<DxColumn data-field="filename" caption="File"> <DxColumn data-field="filename" caption="File">
</DxColumn> </DxColumn>
<DxColumn <DxColumn
@ -132,16 +172,8 @@
caption="Keterangan" caption="Keterangan"
></DxColumn> ></DxColumn>
<DxColumn type="buttons" caption="Aksi"> <DxColumn type="buttons" caption="Aksi">
<DxButton <DxButton text="edit" icon="edit" />
text="Dokumen" <DxButton text="remove" icon="trash" />
icon="edit"
hint="Dokumen Pendukung DRP"
/>
<DxButton
text="Detil"
icon="trash"
hint="Detil/Konten DRP "
/>
</DxColumn> </DxColumn>
<template #row-cell-template="{ data }"> <template #row-cell-template="{ data }">
{{ data.rowIndex + 1 }} {{ data.rowIndex + 1 }}
@ -155,9 +187,19 @@
key-expr="id" key-expr="id"
:allow-column-reordering="true" :allow-column-reordering="true"
:column-auto-width="true" :column-auto-width="true"
@row-inserting="
($event) => {
$event.data.filename = fileNames.map(
(name) => name.name
);
}
"
> >
<DxEditing <DxEditing
v-if="isShowButton"
:allow-adding="true" :allow-adding="true"
:allow-updating="true"
:allow-deleting="true"
:use-icons="true" :use-icons="true"
mode="popup" mode="popup"
> >
@ -170,8 +212,32 @@
cancel-row-changes="Batal" cancel-row-changes="Batal"
></DxTexts> ></DxTexts>
<DxForm label-location="top" :col-count="1"> <DxForm label-location="top" :col-count="1">
<DxItem dataField="tahun"> <DxItem dataField="jenisDokumenId">
<DxRequiredRule message="Tahun harus diisi" /> <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> </DxItem>
</DxForm> </DxForm>
<DxPopup <DxPopup
@ -179,7 +245,7 @@
:show-title="true" :show-title="true"
:width="400" :width="400"
:height="400" :height="400"
title="Form Jenis Pengadaan" title="Tambah"
> >
<DxPosition <DxPosition
at="center" at="center"
@ -214,26 +280,21 @@
caption="Jenis Dokumen" caption="Jenis Dokumen"
alignment="left" alignment="left"
> >
<DxLookup <!-- <DxLookup
display-expr="name" display-expr="name"
value-expr="value" value-expr="value"
:data-source="jenisDokumen" :data-source="jenisDokumen"
/> /> -->
</DxColumn> </DxColumn>
<DxColumn data-field="filename" caption="File"> <DxColumn data-field="filename" caption="File">
</DxColumn> </DxColumn>
<DxColumn data-field="" caption="Keterangan"></DxColumn> <DxColumn
data-field="keterangan"
caption="Keterangan"
></DxColumn>
<DxColumn type="buttons" caption="Aksi"> <DxColumn type="buttons" caption="Aksi">
<DxButton <DxButton text="edit" icon="edit" />
text="Dokumen" <DxButton text="remove" icon="trash" />
icon="edit"
hint="Dokumen Pendukung DRP"
/>
<DxButton
text="Detil"
icon="trash"
hint="Detil/Konten DRP "
/>
</DxColumn> </DxColumn>
<template #row-cell-template="{ data }"> <template #row-cell-template="{ data }">
{{ data.rowIndex + 1 }} {{ data.rowIndex + 1 }}
@ -257,7 +318,8 @@
:allow-updating="true" :allow-updating="true"
:allow-deleting="true" :allow-deleting="true"
:use-icons="true" :use-icons="true"
mode="popup"> mode="popup"
>
<DxTexts <DxTexts
add-row="Tambah" add-row="Tambah"
edit-row="Ubah" edit-row="Ubah"
@ -379,7 +441,7 @@ import DxDataGrid, {
DxTexts, DxTexts,
DxButton, DxButton,
DxRequiredRule, DxRequiredRule,
DxLookup, // DxLookup,
DxPopup, 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";
@ -390,6 +452,8 @@ import {
} from "devextreme-vue/popup"; } from "devextreme-vue/popup";
import { DxScrollView } from "devextreme-vue/scroll-view"; import { DxScrollView } from "devextreme-vue/scroll-view";
import { DxSelectBox } from "devextreme-vue/select-box"; 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 },
@ -512,13 +576,15 @@ export default {
DxTexts, DxTexts,
DxButton, DxButton,
DxRequiredRule, DxRequiredRule,
DxLookup, // DxLookup,
DxPopup, DxPopup,
DxScrollView, DxScrollView,
Popup, Popup,
DxToolbarItem, DxToolbarItem,
DxPosition, DxPosition,
DxSelectBox, DxSelectBox,
DxFileUploader,
DxTextArea,
}, },
methods: { methods: {
linkDokumen($event) { linkDokumen($event) {
@ -553,7 +619,13 @@ 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 {
@ -565,6 +637,7 @@ export default {
isShowButton: true, isShowButton: true,
dataDrpDokumen, dataDrpDokumen,
dataDrpDokumenPendukung, dataDrpDokumenPendukung,
fileNames: [],
saveButtonOptions: { saveButtonOptions: {
text: "Simpan", text: "Simpan",
onClick: () => { onClick: () => {
@ -606,4 +679,11 @@ export default {
z-index: 20; z-index: 20;
width: fit-content; width: fit-content;
} }
.fileuploader-container {
border: solid 1px #dbd203;
padding: 0;
}
.dx-fileuploader-wrapper {
padding: 0;
}
</style> </style>