add drp list and popup detail drp
This commit is contained in:
Mulia Nasution
@@ -5,65 +5,199 @@
|
||||
<div class="content-block">
|
||||
<div class="dx-card responsive-paddings">
|
||||
<div id="app-container">
|
||||
<DxDataGrid ref="currDataGrid"
|
||||
<DxPopup
|
||||
v-model:visible="popupVisible"
|
||||
:drag-enabled="false"
|
||||
:hide-on-outside-click="true"
|
||||
:show-close-button="false"
|
||||
:show-title="true"
|
||||
:width="914"
|
||||
:height="672"
|
||||
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>
|
||||
<div class="dx-fieldset">
|
||||
<div class="dx-field">
|
||||
<div class="dx-field-label">Image as the icon</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%">
|
||||
<div class="label">Options</div>
|
||||
<DxDataGrid
|
||||
ref="currDataGrid"
|
||||
:data-source="dataSource"
|
||||
key-expr="id"
|
||||
:allow-column-reordering="true"
|
||||
:column-auto-width="true"
|
||||
>
|
||||
<DxEditing
|
||||
:allow-adding="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="tahun">
|
||||
<DxRequiredRule message="Tahun harus diisi" />
|
||||
</DxItem>
|
||||
</DxForm>
|
||||
</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=""
|
||||
caption="Jenis Dokumen"
|
||||
alignment="left"
|
||||
></DxColumn>
|
||||
<DxColumn data-field="" caption="File"> </DxColumn>
|
||||
<DxColumn data-field="" caption="Keterangan"></DxColumn>
|
||||
<DxColumn type="buttons" caption="Aksi">
|
||||
<DxButton
|
||||
text="Dokumen"
|
||||
icon="edit"
|
||||
hint="Dokumen Pendukung DRP"
|
||||
on-click=""
|
||||
/>
|
||||
<DxButton
|
||||
text="Detil"
|
||||
icon="trash"
|
||||
hint="Detil/Konten DRP "
|
||||
on-click=""
|
||||
/>
|
||||
</DxColumn>
|
||||
<template #row-cell-template="{ data }">
|
||||
{{ data.rowIndex + 1 }}
|
||||
</template>
|
||||
</DxDataGrid>
|
||||
<div id="textBlock"> </div>
|
||||
</DxScrollView>
|
||||
</template>
|
||||
</DxPopup>
|
||||
|
||||
<DxDataGrid
|
||||
ref="currDataGrid"
|
||||
:data-source="dataSource"
|
||||
key-expr="id"
|
||||
:allow-column-reordering="true"
|
||||
:column-auto-width="true">
|
||||
<DxEditing
|
||||
:allow-adding="true"
|
||||
:use-icons="true"
|
||||
mode="popup">
|
||||
<DxTexts
|
||||
:column-auto-width="true"
|
||||
>
|
||||
<DxEditing :allow-adding="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="tahun">
|
||||
<DxRequiredRule message="Tahun harus diisi" />
|
||||
</DxItem>
|
||||
</DxForm>
|
||||
<DxPopup
|
||||
:hide-on-outside-click="true"
|
||||
:show-title="true"
|
||||
:width="400"
|
||||
:height="400"
|
||||
title="Form Penyusunan DRP">
|
||||
</DxPopup>
|
||||
></DxTexts>
|
||||
<DxForm label-location="top" :col-count="1">
|
||||
<DxItem dataField="tahun">
|
||||
<DxRequiredRule message="Tahun harus diisi" />
|
||||
</DxItem>
|
||||
</DxForm>
|
||||
</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" />
|
||||
<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>
|
||||
<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)" />
|
||||
: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)"
|
||||
/>
|
||||
<DxFilterRow :visible="false" />
|
||||
<DxColumn cell-template="row-cell-template" caption="No" :width="45"></DxColumn>
|
||||
<DxColumn data-field="tahun" caption="Tahun DRP" alignment="left"></DxColumn>
|
||||
<DxColumn data-field="approveStatus" caption="Status Approve" editor-type="dxCheckBox">
|
||||
<DxColumn
|
||||
cell-template="row-cell-template"
|
||||
caption="No"
|
||||
:width="45"
|
||||
></DxColumn>
|
||||
<DxColumn
|
||||
data-field="tahun"
|
||||
caption="Tahun DRP"
|
||||
alignment="left"
|
||||
></DxColumn>
|
||||
<DxColumn
|
||||
data-field="approveStatus"
|
||||
caption="Status Approve"
|
||||
editor-type="dxCheckBox"
|
||||
>
|
||||
<DxLookup
|
||||
display-expr="name"
|
||||
value-expr="value"
|
||||
:data-source="approveStatus"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn data-field="approveDate" caption="Tanggal Approve" data-type="date"></DxColumn>
|
||||
<DxColumn
|
||||
data-field="approveDate"
|
||||
caption="Tanggal Approve"
|
||||
data-type="date"
|
||||
></DxColumn>
|
||||
<DxColumn type="buttons" caption="Aksi">
|
||||
<DxButton
|
||||
text="Dokumen"
|
||||
@@ -85,12 +219,17 @@
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn type="adaptive" :width="50">
|
||||
<DxButton hint="detail" icon="copy"/>
|
||||
<DxButton hint="detail" icon="copy" />
|
||||
</DxColumn>
|
||||
<template #row-cell-template="{ data }">
|
||||
{{ data.rowIndex +1 }}
|
||||
{{ data.rowIndex + 1 }}
|
||||
</template>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Penyusunan DRP..."/>
|
||||
<DxSearchPanel
|
||||
:visible="true"
|
||||
:highlight-case-sensitive="true"
|
||||
:width="300"
|
||||
placeholder="Cari Penyusunan DRP..."
|
||||
/>
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,7 +242,6 @@ import DxDataGrid, {
|
||||
DxEditing,
|
||||
DxItem,
|
||||
DxForm,
|
||||
DxPopup,
|
||||
DxColumn,
|
||||
DxFilterRow,
|
||||
DxPager,
|
||||
@@ -116,7 +254,9 @@ import DxDataGrid, {
|
||||
DxLookup,
|
||||
} from "devextreme-vue/data-grid";
|
||||
import CustomStore from "devextreme/data/custom_store";
|
||||
|
||||
import { DxPopup, DxToolbarItem, DxPosition } from "devextreme-vue/popup";
|
||||
import { DxScrollView } from "devextreme-vue/scroll-view";
|
||||
import { DxSelectBox } from "devextreme-vue/select-box";
|
||||
|
||||
const approveStatus = [
|
||||
{ name: "Penyusunan", value: 0 },
|
||||
@@ -124,57 +264,59 @@ const approveStatus = [
|
||||
{ name: "Rekomendasi Komite", value: 2 },
|
||||
{ name: "Approval DIRUT", value: 3 },
|
||||
{ name: "Approved", value: 4 },
|
||||
{ name: "Revisi DRP", value: 1 }
|
||||
{ name: "Revisi DRP", value: 1 },
|
||||
];
|
||||
|
||||
const URL = process.env.VUE_APP_ROOT_API+'/drp';
|
||||
const URL = process.env.VUE_APP_ROOT_API + "/drp";
|
||||
|
||||
const dataSource = new CustomStore({
|
||||
key: 'id',
|
||||
key: "id",
|
||||
|
||||
load: () => {
|
||||
return fetch(URL+'?size=100')
|
||||
.then(response => response.json())
|
||||
.then(response => {
|
||||
return fetch(URL + "?size=100")
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
return {
|
||||
data: response.data,
|
||||
totalCount: response.pagination.totalRecords
|
||||
totalCount: response.pagination.totalRecords,
|
||||
};
|
||||
})
|
||||
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
||||
.catch(() => {
|
||||
throw new Error("Terdapat kesalahan memuat data");
|
||||
});
|
||||
},
|
||||
|
||||
insert: (values) => {
|
||||
return fetch(URL, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(values),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
},
|
||||
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': 'application/json'
|
||||
}
|
||||
});
|
||||
return fetch(URL + "/" + encodeURIComponent(key), {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(values),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
remove: (key) => {
|
||||
return fetch(URL + "/" + encodeURIComponent(key), {
|
||||
method: "DELETE",
|
||||
});
|
||||
return fetch(URL + "/" + encodeURIComponent(key), {
|
||||
method: "DELETE",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
return {
|
||||
approveStatus
|
||||
approveStatus,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
@@ -182,7 +324,6 @@ export default {
|
||||
DxEditing,
|
||||
DxItem,
|
||||
DxForm,
|
||||
DxPopup,
|
||||
DxColumn,
|
||||
DxFilterRow,
|
||||
DxPager,
|
||||
@@ -193,32 +334,63 @@ export default {
|
||||
DxButton,
|
||||
DxRequiredRule,
|
||||
DxLookup,
|
||||
DxScrollView,
|
||||
DxPopup,
|
||||
DxToolbarItem,
|
||||
DxPosition,
|
||||
DxSelectBox,
|
||||
},
|
||||
methods: {
|
||||
linkDokumen : function() {
|
||||
location.href='#/drp/drp-dokumen';
|
||||
linkDokumen($event) {
|
||||
console.log("event: ", $event.row.values);
|
||||
this.popupVisible = true;
|
||||
this.popupTitle = "Upload Dokumen Pendukung";
|
||||
this.dataDrp = $event.row.values;
|
||||
this.isShowButton = true;
|
||||
console.log("drp: ", this.dataDrp);
|
||||
},
|
||||
linkDetail($event) {
|
||||
this.popupVisible = true;
|
||||
this.popupTitle = "Lihat Dokumen Pendukung";
|
||||
this.dataDrp = $event.row.values.target;
|
||||
this.isShowButton = false;
|
||||
},
|
||||
linkDetail : function() {
|
||||
location.href='#/drp/drp-dokumen';
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//jsonUrl: URL,
|
||||
dataSource,
|
||||
}
|
||||
return {
|
||||
//jsonUrl: URL,
|
||||
dataSource,
|
||||
dropdown: "",
|
||||
popupVisible: false,
|
||||
popupTitle: "",
|
||||
dataDrp: "",
|
||||
isShowButton: true,
|
||||
saveButtonOptions: {
|
||||
text: "SIMPAN",
|
||||
onClick: () => {
|
||||
this.popupVisible = false;
|
||||
console.log("simpan");
|
||||
},
|
||||
},
|
||||
closeButtonOptions: {
|
||||
text: "BATAL",
|
||||
onClick: () => {
|
||||
this.popupVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.dx-link.dx-icon-attach.dx-link-icon {
|
||||
color: #DBD203;
|
||||
color: #dbd203;
|
||||
}
|
||||
.dx-link.dx-icon-search.dx-link-icon {
|
||||
color: #FF9A62;
|
||||
color: #ff9a62;
|
||||
}
|
||||
.dx-link.dx-icon-movetofolder.dx-link-icon {
|
||||
color: #0996C2;
|
||||
color: #0996c2;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user