Update link pengadaan
This commit is contained in:
Titan Hadiyan
parent
2db0d25ad1
commit
0cd6aa1189
@ -1,13 +1,278 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="content-block">Drp Pengadaan</h2>
|
||||
<h3 class="content-block main-title">DRP Pengadaan</h3>
|
||||
<p class="content-block">Detil / Konten DRP</p>
|
||||
<div class="content-block">
|
||||
<div class="dx-card responsive-paddings">
|
||||
Put your content here
|
||||
<div id="app-container">
|
||||
<DxDataGrid ref="currDataGrid"
|
||||
:data-source="dataSource"
|
||||
key-expr="id"
|
||||
:allow-column-reordering="true"
|
||||
:column-auto-width="true"
|
||||
@exporting="onExporting">
|
||||
<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">
|
||||
<DxItem dataField="nomor">
|
||||
<DxRequiredRule message="Nomor PRK" />
|
||||
</DxItem>
|
||||
<DxItem dataField="metodePenyampaianId"/>
|
||||
<DxItem dataField="namaPengadaan">
|
||||
<DxRequiredRule message="Nama Pengadaan" />
|
||||
</DxItem>
|
||||
<DxItem dataField="supplyPositioningMatrixId"/>
|
||||
<DxItem dataField="unitInisiatorId"/>
|
||||
<DxItem dataField="jenisKontrakId"/>
|
||||
<DxItem dataField="sumberDanaId"/>
|
||||
<DxItem dataField="jenisPengadaanId"/>
|
||||
<DxItem dataField="metodePengadaanId"/>
|
||||
</DxForm>
|
||||
<DxPopup
|
||||
:hide-on-outside-click="true"
|
||||
:show-title="true"
|
||||
:width="800"
|
||||
:height="600"
|
||||
title="Form DRP Pengadaan">
|
||||
</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>
|
||||
<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)" />
|
||||
<DxFilterRow :visible="false" />
|
||||
<DxColumn cell-template="row-cell-template" caption="No" :width="45"></DxColumn>
|
||||
<DxColumn data-field="nomor" caption="Nomor PRK"></DxColumn>
|
||||
<DxColumn data-field="namaPengadaan" caption="Nama Pengadaan"></DxColumn>
|
||||
<DxColumn data-field="lokasiId" caption="Lokasi Pengadaan">
|
||||
<DxLookup display-expr="instansi" value-expr="id" :data-source="instansis" :search-enabled="true" />
|
||||
</DxColumn>
|
||||
<DxColumn data-field="unitInisiatorId" caption="Divisi / Unit Inisiator Pengadaan"></DxColumn>
|
||||
<DxColumn data-field="pagu" caption="Pagu Anggaran (Rp)"></DxColumn>
|
||||
<DxColumn data-field="sumberDanaId" caption="Sumber Dana"></DxColumn>
|
||||
<DxColumn data-field="supplyPositioningMatrixId" caption="Supply Positioning Matrix"></DxColumn>
|
||||
<DxColumn data-field="metodePengadaanId" caption="Metode Pengadaan"></DxColumn>
|
||||
<DxColumn data-field="metodePenyampaianId" caption="Metode Penyampaian Dokumen Penawaran"></DxColumn>
|
||||
<DxColumn data-field="jenisKontrakId" caption="Jenis Perjanjian/Kontrak"></DxColumn>
|
||||
<DxColumn data-field="strategiPengadaanId" caption="Strategi Pengadaan"></DxColumn>
|
||||
<DxColumn data-field="rencanaTanggal" caption="Rencana Pelaksanaan Pengadaan"></DxColumn>
|
||||
<DxColumn data-field="targetTanggal" caption="Target COD"></DxColumn>
|
||||
<DxColumn data-field="hpe" caption="Nilai HPE (Rp)"></DxColumn>
|
||||
<DxColumnFixing :enabled="true" />
|
||||
<DxColumn :allow-fixing="false" type="buttons" caption="Aksi">
|
||||
<DxButton name="edit"/>
|
||||
<DxButton name="delete"/>
|
||||
</DxColumn>
|
||||
<template #row-cell-template="{ data }">
|
||||
<DxText>{{ data.rowIndex + data.component.pageIndex() + 1 }}</DxText>
|
||||
</template>
|
||||
<DxSearchPanel :visible="true" :highlight-case-sensitive="true" :width="300" placeholder="Cari Pengadaan..."/>
|
||||
<!--<DxExport
|
||||
:enabled="true"
|
||||
:formats="['xlsx', 'pdf']"
|
||||
:allow-export-selected-data="true"
|
||||
/>-->
|
||||
</DxDataGrid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DxDataGrid, {
|
||||
DxEditing,
|
||||
DxItem,
|
||||
DxForm,
|
||||
DxPopup,
|
||||
DxColumn,
|
||||
DxFilterRow,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxToolbar,
|
||||
DxTexts,
|
||||
DxRequiredRule,
|
||||
DxLookup,
|
||||
DxColumnFixing
|
||||
} from "devextreme-vue/data-grid";
|
||||
import CustomStore from "devextreme/data/custom_store";
|
||||
import { Workbook } from 'exceljs';
|
||||
import { saveAs } from 'file-saver-es';
|
||||
import { exportDataGrid as exportDataGridToExcel } from 'devextreme/excel_exporter';
|
||||
import { jsPDF } from 'jspdf';
|
||||
import { exportDataGrid as exportDataGridToPDF } from 'devextreme/pdf_exporter';
|
||||
|
||||
//const URL = process.env.VUE_APP_ROOT_API+'/drp/pengadaan';
|
||||
const URL = process.env.VUE_APP_ROOT_API+'/jenisanggaran';
|
||||
const URL_instansi = process.env.VUE_APP_ROOT_API+'/instansi';
|
||||
|
||||
const instansiOptions = new CustomStore({
|
||||
key: 'id',
|
||||
|
||||
load:() => {
|
||||
return fetch(URL_instansi+'?size=1000')
|
||||
.then((response) => response.json())
|
||||
.then(response => {
|
||||
console.log(response.data);
|
||||
return {
|
||||
data: response.data
|
||||
};
|
||||
})
|
||||
// .then(data => {
|
||||
// console.log(JSON.parse(data));
|
||||
// })
|
||||
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
||||
},
|
||||
|
||||
byKey: (key) => {
|
||||
return fetch(URL_instansi+'/' + key)
|
||||
.then((response) => response.json())
|
||||
.then(response => {
|
||||
console.log(response.instansi);
|
||||
return {
|
||||
data: response.instansi
|
||||
};
|
||||
})
|
||||
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
||||
}
|
||||
});
|
||||
|
||||
const dataSource = new CustomStore({
|
||||
key: 'id',
|
||||
|
||||
load: () => {
|
||||
return fetch(URL+'?size=100')
|
||||
.then(response => response.json())
|
||||
.then(response => {
|
||||
return {
|
||||
data: response.data,
|
||||
totalCount: response.pagination.totalRecords
|
||||
};
|
||||
})
|
||||
.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': 'application/json'
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
remove: (key) => {
|
||||
return fetch(URL + "/" + encodeURIComponent(key), {
|
||||
method: "DELETE",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DxDataGrid,
|
||||
DxEditing,
|
||||
DxItem,
|
||||
DxForm,
|
||||
DxPopup,
|
||||
DxColumn,
|
||||
DxFilterRow,
|
||||
DxPager,
|
||||
DxPaging,
|
||||
DxSearchPanel,
|
||||
DxToolbar,
|
||||
DxTexts,
|
||||
DxRequiredRule,
|
||||
DxLookup,
|
||||
DxColumnFixing
|
||||
},
|
||||
methods: {
|
||||
onExporting(e) {
|
||||
e.cancel = true;
|
||||
|
||||
switch (e.format) {
|
||||
case "pdf": {
|
||||
const doc = new jsPDF();
|
||||
exportDataGridToPDF({
|
||||
jsPDFDocument: doc,
|
||||
component: e.component,
|
||||
indent: 5,
|
||||
}).then(() => {
|
||||
doc.save('Jenispengadaan.pdf');
|
||||
});
|
||||
}
|
||||
break;
|
||||
|
||||
case "xlsx": {
|
||||
const workbook = new Workbook();
|
||||
const worksheet = workbook.addWorksheet('DRP Pengadaan');
|
||||
|
||||
exportDataGridToExcel({
|
||||
component: e.component,
|
||||
worksheet: worksheet,
|
||||
autoFilterEnabled: true,
|
||||
}).then(() => {
|
||||
workbook.xlsx.writeBuffer().then((buffer) => {
|
||||
saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
|
||||
});
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
cloneIconClick(e) {
|
||||
e.event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
//jsonUrl: URL,
|
||||
dataSource,
|
||||
instansis: instansiOptions,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
||||
@ -137,7 +137,12 @@
|
||||
:allow-column-reordering="true"
|
||||
:column-auto-width="true"
|
||||
>
|
||||
<DxEditing :allow-adding="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"
|
||||
@ -215,7 +220,7 @@
|
||||
text="Kirim"
|
||||
icon="movetofolder"
|
||||
hint="Kirim DRP"
|
||||
:on-click="linkDetail"
|
||||
:on-click="linkKirim"
|
||||
/>
|
||||
</DxColumn>
|
||||
<DxColumn type="adaptive" :width="50">
|
||||
@ -349,15 +354,18 @@ export default {
|
||||
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() {
|
||||
location.href='#/drp/drp-pengadaan';
|
||||
},
|
||||
linkKirim : function() {
|
||||
location.href='#/drp/drp-pengadaan';
|
||||
}
|
||||
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);
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user