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

add drp list and popup detail drp

Browse Source
This commit is contained in:
Mulia Nasution 2023-05-31 16:07:56 +07:00
parent 1a70792368
commit 09cc5f1a68
5 changed files with 587 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app-navigation.js
View File

@ -123,6 +123,10 @@ export default [
{
text: 'List Rekomendasi',
path: '/drp/drp-approval/list-rekomendasi'
},
{
text: 'List DRP',
path: '/drp/drp-approval/drp-list'
}
]
},

10
src/router.js
View File

@ -29,6 +29,7 @@ import DrpPengadaan from './views/drp/drp-pengadaan';
import DrpDokumen from './views/drp/drp-dokumen';
import DrpApproval from './views/drp/drp-approval'
import RecomendationList from './views/drp/recomendation-list.vue'
import DrpList from './views/drp/drp-list.vue';
/* General */
import auth from "./auth";
@ -343,6 +344,15 @@ const router = new createRouter({
},
component: RecomendationList
},
{
path: "/drp/drp-approval/drp-list",
name: "list-drp",
meta: {
requiresAuth: true,
layout: defaultLayout
},
component: DrpList
},
],
history: createWebHashHistory()
});

249
src/views/drp/drp-list.vue Normal file
View File

@ -0,0 +1,249 @@
<template>
<div>
<h3 class="content-block main-title">Approval DRP</h3>
<p class="content-block">Approval DRP>List 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="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>
</DxEditing>
<DxToolbar>
<DxItem name="groupPanel" />
<DxItem name="searchPanel" location="before" />
<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"
:fixed="true"
></DxColumn>
<DxColumn
data-field="nomor"
:fixed="true"
caption="Nomor PRK"
></DxColumn>
<DxColumn
:fixed="true"
:width="300"
data-field="namaPengadaan"
caption="Nama Pengadaan"
></DxColumn>
<DxColumn data-field="lokasi" caption="Lokasi Pengadaan"></DxColumn>
<DxColumn
data-field="jenisPengadaan"
caption="Jenis Pengadaan"
></DxColumn>
<DxColumn
data-field="unitInisiator"
caption="Divisi/Unit Inisiator Pengadaan"
></DxColumn>
<DxColumn data-field="pagu" caption="Pagu Anggaran (Rp)"></DxColumn>
<DxColumn data-field="sumberDana" caption="Sumber Dana"></DxColumn>
<DxColumn
data-field="supplyPositioningMatrix"
caption="Supply Positioning Matrix"
></DxColumn>
<DxColumn
data-field="metodePengadaan"
caption="Metode Pengadaan"
></DxColumn>
<DxColumn
data-field="metodePenyampaian"
caption="Metode Penyampaian Dokumen Penawaran"
></DxColumn>
<DxColumn
data-field="jenisKontrak"
caption="Jenis Perjanjian/Kontrak"
></DxColumn>
<DxColumn
data-field="strategiPengadaan"
caption="Strategi Pemgadaan"
></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 (Rupiah)"></DxColumn>
<DxColumn type="buttons" caption="Aksi">
<DxButton
text="Detail"
icon="search"
hint="Detail"
:on-click="linkDetail"
/>
<DxButton
text="Dokumen"
icon="attach"
hint="Dokumen Pendukung DRP"
:on-click="linkDokumen"
/>
</DxColumn>
<DxColumn type="adaptive" :width="50">
<DxButton hint="detail" icon="copy" />
</DxColumn>
<template #row-cell-template="{ data }">
<DxText>{{ data.rowIndex + 1 }}</DxText>
</template>
<DxSearchPanel
:visible="true"
:highlight-case-sensitive="true"
:width="300"
placeholder="Cari DRP..."
/>
</DxDataGrid>
</div>
</div>
</div>
</div>
</template>
<script>
import DxDataGrid, {
DxEditing,
DxItem,
DxForm,
DxPopup,
DxColumn,
DxFilterRow,
DxPager,
DxPaging,
DxSearchPanel,
DxToolbar,
DxTexts,
DxButton,
} from "devextreme-vue/data-grid";
import CustomStore from "devextreme/data/custom_store";
const URL = process.env.VUE_APP_ROOT_API + "/drp/pengadaan";
const dataSource = new CustomStore({
key: "id",
load: () => {
return fetch(URL + "?size=100")
.then((response) => response.json())
.then((response) => {
console.log("drp pengadaan:", response.data);
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,
DxButton,
},
methods: {
linkDetail: function () {
location.href = "#/drp/drp-dokumen";
},
linkDokumen: function () {
location.href = "#/drp/drp-dokumen";
},
},
data() {
return {
//jsonUrl: URL,
dataSource,
};
},
};
</script>
<style lang="scss" scoped>
</style>

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

@ -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>

83
src/views/drp/recomendation-list.vue
View File

@ -7,7 +7,7 @@
<div id="app-container">
<DxDataGrid
ref="currDataGrid"
:data-source="dataSource"
:data-source="formData"
key-expr="id"
:allow-column-reordering="true"
:column-auto-width="true"
@ -63,16 +63,29 @@
caption="No"
:width="45"
></DxColumn>
<DxColumn data-field="" caption="Nama Pengadaan"></DxColumn>
<DxColumn data-field="nomorRkp" caption="Nomor RKP"></DxColumn>
<DxColumn
data-field=""
caption="Approval"
editor-type="dxCheckBox"
data-field="namaPengadaan"
caption="Nama Pengadaan"
:width="252"
></DxColumn>
<DxColumn
data-field="approval"
caption="Approval"
></DxColumn>
<DxColumn data-field="status" caption="Status"></DxColumn>
<DxColumn
data-field="tanggalStatus"
caption="Tanggal Status"
></DxColumn>
<DxColumn
data-field="catatanRekomendasi"
caption="Catatan Rekomendasi"
></DxColumn>
<DxColumn
data-field="tanggalRekomendasi"
caption="Tanggal Rekomendasi"
></DxColumn>
<DxColumn data-field="" caption="Status"></DxColumn>
<DxColumn data-field="" caption="Tanggal Status"></DxColumn>
<DxColumn data-field="" caption="Catatan Rekomendasi"></DxColumn>
<DxColumn data-field="" caption="Tanggal Rekomendasi"></DxColumn>
<DxColumn type="buttons" caption="Aksi">
<DxButton name="edit" />
<DxButton name="delete" />
@ -93,7 +106,7 @@
:visible="true"
:highlight-case-sensitive="true"
:width="300"
placeholder="Cari Penyusunan DRP..."
placeholder="Cari Rekomendasi DRP..."
/>
</DxDataGrid>
</div>
@ -181,17 +194,57 @@ export default {
DxTexts,
DxButton,
},
methods: {
linkDetail: function () {
location.href = "master-data/strategi-pengadaan";
},
},
data() {
return {
//jsonUrl: URL,
dataSource,
};
},
setup() {
const formData = [
{
id: 1,
nomorRkp: "PRK/2023/1/001",
namaPengadaan:
"Pengadaan Jasa Konsultansi Penyusunan Feasibility Study, Basic Design, dan HPE Proyek Gasifikasi Wilayah Sumatra Utara",
approval: "Approval VP",
status: "Tolak",
tanggalStatus: "11/01/2022",
catatanRekomendasi: "Lorem Insum ",
tanggalRekomendasi: "11/01/2022",
},
{
id: 2,
nomorRkp: "PRK/2023/1/002",
namaPengadaan:
"Pengadaan Jasa Konsultansi Penyusunan Feasibility Study, Basic Design, dan HPE Proyek Gasifikasi Wilayah Aceh",
approval: "Approval VP",
status: "Setuju",
tanggalStatus: "11/01/2022",
catatanRekomendasi: "Lorem Insum ",
tanggalRekomendasi: "11/01/2022",
},
{
id: 3,
nomorRkp: "PRK/2023/1/001",
namaPengadaan:
"Pengadaan Jasa Konsultansi Penyusunan Feasibility Study, Basic Design, dan HPE Proyek Gasifikasi Wilayah Aceh",
approval: "Approval VP",
status: "Tolak",
tanggalStatus: "11/01/2022",
catatanRekomendasi: "Lorem Insum ",
tanggalRekomendasi: "11/01/2022",
},
];
return {
formData,
};
},
methods: {
linkDetail: function () {
location.href = "master-data/strategi-pengadaan";
},
},
};
</script>