439 lines
16 KiB
Vue
439 lines
16 KiB
Vue
<template>
|
|
<div>
|
|
<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">
|
|
<div id="app-container">
|
|
<DxDataGrid ref="currDataGrid"
|
|
:data-source="dataSource"
|
|
key-expr="id"
|
|
:allow-column-reordering="true"
|
|
:column-auto-width="true">
|
|
<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="4">
|
|
<DxItem dataField="nomor" :col-span="2">
|
|
<DxRequiredRule message="Masukan Nomor PRK" />
|
|
</DxItem>
|
|
<DxItem dataField="metodePenyampaianId" :col-span="2">
|
|
<DxRequiredRule message="Pilih Metode Penyampaian Dokumen Penawaran" />
|
|
</DxItem>
|
|
<DxItem dataField="namaPengadaan" :col-span="2">
|
|
<DxRequiredRule message="Masukan Nama Pengadaan" :col-span="2"/>
|
|
</DxItem>
|
|
<DxItem dataField="supplyPositioningMatrixId" :col-span="2">
|
|
<DxRequiredRule message="Pilih Supply Positioning Matrix" />
|
|
</DxItem>
|
|
<DxItem dataField="unitInisiatorId" :col-span="2">
|
|
<DxRequiredRule message="Pilih Nama Divisi/Inisiator Pengadaan" />
|
|
</DxItem>
|
|
<DxItem dataField="jenisKontrakId" :col-span="2">
|
|
<DxRequiredRule message="Pilih Jenis Perjanjian / Kontrak" />
|
|
</DxItem>
|
|
<DxItem dataField="lokasiId" :col-span="2">
|
|
<DxRequiredRule message="Pilih Lokasi Pengadaan" />
|
|
</DxItem>
|
|
<DxItem dataField="sumberDanaId" :col-span="2">
|
|
<DxRequiredRule message="Pilih Sumber Dana" />
|
|
</DxItem>
|
|
<DxItem dataField="jenisPengadaanId" :col-span="2">
|
|
<DxRequiredRule message="Pilih Jenis Pengadaan" />
|
|
</DxItem>
|
|
<DxItem dataField="rencanaTanggal">
|
|
<DxRequiredRule message="Masukan Tanggal Rencana" />
|
|
</DxItem>
|
|
<DxItem dataField="targetTanggal">
|
|
<DxRequiredRule message="Masukan Tanggal COD" />
|
|
</DxItem>
|
|
<DxItem dataField="metodePengadaanId" :col-span="2">
|
|
<DxRequiredRule message="Pilih Metode Pengadaan" />
|
|
</DxItem>
|
|
<DxItem dataField="pagu" :col-span="2">
|
|
<DxRequiredRule message="Masukkan Nilai Pagu Anggaran" />
|
|
</DxItem>>
|
|
<DxItem dataField="strategiPengadaanId" :col-span="2">
|
|
<DxRequiredRule message="Pilih Strategi Pengadaan" />
|
|
</DxItem>
|
|
<DxItem dataField="hpe" :col-span="2">
|
|
<DxRequiredRule message="Masukkan Nilai HPE" />
|
|
</DxItem>
|
|
</DxForm>
|
|
<DxPopup
|
|
:hide-on-outside-click="true"
|
|
:show-title="true"
|
|
|
|
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="metodePenyampaianId" caption="Metode Penyampaian Dokumen Penawaran">
|
|
<DxLookup display-expr="metodePenyampaian" value-expr="id" :data-source="metodepenyampaian"/>
|
|
</DxColumn>
|
|
<DxColumn data-field="namaPengadaan" caption="Nama Pengadaan"></DxColumn>
|
|
<DxColumn data-field="lokasiId" caption="Lokasi Pengadaan">
|
|
<DxLookup display-expr="lokasi" value-expr="id" :data-source="lokasi"/>
|
|
</DxColumn>
|
|
<DxColumn data-field="jenisPengadaanId" caption="Jenis Pengadaan">
|
|
<DxLookup display-expr="jenisPengadaan" value-expr="id" :data-source="jenispengadaan"/>
|
|
</DxColumn>
|
|
<DxColumn data-field="unitInisiatorId" caption="Divisi / Unit Inisiator Pengadaan">
|
|
<DxLookup display-expr="unitInisiator" value-expr="id" :data-source="unitinisiator"/>
|
|
</DxColumn>
|
|
<DxColumn data-field="pagu" caption="Pagu Anggaran (Rp)">
|
|
<DxFormat
|
|
type="fixedPoint"
|
|
format="$ #,##0.##"
|
|
:precision="2"
|
|
/>
|
|
</DxColumn>
|
|
<DxColumn data-field="sumberDanaId" caption="Sumber Dana">
|
|
<DxLookup display-expr="sumberDana" value-expr="id" :data-source="sumberdana"/>
|
|
</DxColumn>
|
|
<DxColumn data-field="supplyPositioningMatrixId" caption="Supply Positioning Matrix">
|
|
<DxLookup display-expr="supplyPositioningMatrix" value-expr="id" :data-source="supplypositioningmatrix"/>
|
|
</DxColumn>
|
|
<DxColumn data-field="metodePengadaanId" caption="Metode Pengadaan">
|
|
<DxLookup display-expr="metodePengadaan" value-expr="id" :data-source="metodepengadaan"/>
|
|
</DxColumn>
|
|
<DxColumn data-field="jenisKontrakId" caption="Jenis Perjanjian/Kontrak">
|
|
<DxLookup display-expr="jenisKontrak" value-expr="id" :data-source="jeniskontrak"/>
|
|
</DxColumn>
|
|
<DxColumn data-field="strategiPengadaanId" caption="Strategi Pengadaan">
|
|
<DxLookup display-expr="strategiPengadaan" value-expr="id" :data-source="strategipengadaan"/>
|
|
</DxColumn>
|
|
<DxColumn data-field="rencanaTanggal" caption="Rencana Pelaksanaan Pengadaan" data-type="date"></DxColumn>
|
|
<DxColumn data-field="targetTanggal" caption="Target COD" data-type="date"></DxColumn>
|
|
<DxColumn data-field="hpe" caption="Nilai HPE (Rp)">
|
|
<DxFormat
|
|
type="fixedPoint"
|
|
:precision="2"
|
|
/>
|
|
</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,
|
|
DxFormat
|
|
} from "devextreme-vue/data-grid";
|
|
import CustomStore from "devextreme/data/custom_store";
|
|
|
|
const URL = process.env.VUE_APP_ROOT_API+'/drp/pengadaan/list';
|
|
const URL_metodepenyampaian = process.env.VUE_APP_ROOT_API+'/metodepenyampaian';
|
|
const URL_supplypositioningmatrix = process.env.VUE_APP_ROOT_API+'/supplypositioningmatrix';
|
|
const URL_unitinisiator = process.env.VUE_APP_ROOT_API+'/unitinisiator';
|
|
const URL_jeniskontrak = process.env.VUE_APP_ROOT_API+'/jeniskontrak';
|
|
const URL_lokasi = process.env.VUE_APP_ROOT_API+'/lokasi';
|
|
const URL_sumberdana = process.env.VUE_APP_ROOT_API+'/sumberdana';
|
|
const URL_jenispengadaan = process.env.VUE_APP_ROOT_API+'/jenispengadaan';
|
|
const URL_metodepengadaan = process.env.VUE_APP_ROOT_API+'/metodepengadaan';
|
|
const URL_strategipengadaan = process.env.VUE_APP_ROOT_API+'/strategipengadaan';
|
|
|
|
const metodepenyampaianOptions = new CustomStore({
|
|
key: 'id',
|
|
|
|
load:() => {
|
|
return fetch(URL_metodepenyampaian+process.env.VUE_APP_PAGE_SIZE)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
},
|
|
|
|
byKey: (key) => {
|
|
return fetch(URL_metodepenyampaian+'/' + key)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
}
|
|
});
|
|
|
|
const supplypositioningmatrixOptions = new CustomStore({
|
|
key: 'id',
|
|
|
|
load:() => {
|
|
return fetch(URL_supplypositioningmatrix+process.env.VUE_APP_PAGE_SIZE)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
},
|
|
|
|
byKey: (key) => {
|
|
return fetch(URL_supplypositioningmatrix+'/' + key)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
}
|
|
});
|
|
|
|
const unitinisiatorOptions = new CustomStore({
|
|
key: 'id',
|
|
|
|
load:() => {
|
|
return fetch(URL_unitinisiator+process.env.VUE_APP_PAGE_SIZE)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
},
|
|
|
|
byKey: (key) => {
|
|
return fetch(URL_unitinisiator+'/' + key)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
}
|
|
});
|
|
|
|
const jeniskontrakOptions = new CustomStore({
|
|
key: 'id',
|
|
|
|
load:() => {
|
|
return fetch(URL_jeniskontrak+process.env.VUE_APP_PAGE_SIZE)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
},
|
|
|
|
byKey: (key) => {
|
|
return fetch(URL_jeniskontrak+'/' + key)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
}
|
|
});
|
|
|
|
const lokasiOptions = new CustomStore({
|
|
key: 'id',
|
|
|
|
load:() => {
|
|
return fetch(URL_lokasi+process.env.VUE_APP_PAGE_SIZE)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
},
|
|
|
|
byKey: (key) => {
|
|
return fetch(URL_lokasi+'/' + key)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
}
|
|
});
|
|
|
|
const sumberdanaOptions = new CustomStore({
|
|
key: 'id',
|
|
|
|
load:() => {
|
|
return fetch(URL_sumberdana+process.env.VUE_APP_PAGE_SIZE)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
},
|
|
|
|
byKey: (key) => {
|
|
return fetch(URL_sumberdana+'/' + key)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
}
|
|
});
|
|
|
|
const jenispengadaanOptions = new CustomStore({
|
|
key: 'id',
|
|
|
|
load:() => {
|
|
return fetch(URL_jenispengadaan+process.env.VUE_APP_PAGE_SIZE)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
},
|
|
|
|
byKey: (key) => {
|
|
return fetch(URL_jenispengadaan+'/' + key)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
}
|
|
});
|
|
|
|
const metodepengadaanOptions = new CustomStore({
|
|
key: 'id',
|
|
|
|
load:() => {
|
|
return fetch(URL_metodepengadaan+process.env.VUE_APP_PAGE_SIZE)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
},
|
|
|
|
byKey: (key) => {
|
|
return fetch(URL_metodepengadaan+'/' + key)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
}
|
|
});
|
|
|
|
const strategipengadaanOptions = new CustomStore({
|
|
key: 'id',
|
|
|
|
load:() => {
|
|
return fetch(URL_strategipengadaan+process.env.VUE_APP_PAGE_SIZE)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
},
|
|
|
|
byKey: (key) => {
|
|
return fetch(URL_strategipengadaan+'/' + key)
|
|
.then((response) => response.json())
|
|
.catch(() => { throw new Error('Terdapat kesalahan memuat data'); });
|
|
}
|
|
});
|
|
|
|
const dataSource = new CustomStore({
|
|
key: 'id',
|
|
|
|
load: () => {
|
|
let uri = window.location.href.split('?');
|
|
let drpid = '';
|
|
if(uri.length == 2) {
|
|
let vars = uri[1].split('&');
|
|
let getVars = {};
|
|
let tmp = '';
|
|
vars.forEach(function(v) {
|
|
tmp = v.split('=');
|
|
if(tmp.length == 2)
|
|
getVars[tmp[0]] = tmp[1];
|
|
});
|
|
//console.log(getVars['drpid']);
|
|
drpid = getVars['drpid'];
|
|
}
|
|
|
|
return fetch(URL+'/'+drpid)
|
|
.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,
|
|
DxFormat
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
//jsonUrl: URL,
|
|
dataSource,
|
|
metodepenyampaian: metodepenyampaianOptions,
|
|
supplypositioningmatrix: supplypositioningmatrixOptions,
|
|
unitinisiator: unitinisiatorOptions,
|
|
jeniskontrak: jeniskontrakOptions,
|
|
lokasi: lokasiOptions,
|
|
sumberdana: sumberdanaOptions,
|
|
jenispengadaan: jenispengadaanOptions,
|
|
metodepengadaan: metodepengadaanOptions,
|
|
strategipengadaan: strategipengadaanOptions
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
</style>
|