149 lines
4.7 KiB
Vue
149 lines
4.7 KiB
Vue
<template>
|
|
<h4>Dokumen Pendukung <span style="color: red;">*</span></h4>
|
|
|
|
<div style="display: flex; justify-content: end;">
|
|
<DxButton styling-mode="contained" type="default" @click="addDokumen" icon="plus" text="Tambah" />
|
|
</div>
|
|
|
|
<DxPopup v-model:visible="isFormOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Dokumen Pendukung" :width="600" :height="450">
|
|
<template #content>
|
|
<PopupUploadDokumenPendukung v-if="isFormOpen" :drpId="drpId" :drpTahun="drpTahun" :dokumen-data="dokumenData" @close="isFormOpen = false" @addDokumenPendukung="addDokumenPendukung" />
|
|
</template>
|
|
</DxPopup>
|
|
|
|
<DxPopup v-model:visible="isRemoveConfirmationDialogOpen" :drag-enabled="false" :hide-on-outside-click="true" :show-close-button="true" :show-title="true" title="Hapus Dokumen Pendukung?" :width="400" :height="300">
|
|
<template #content>
|
|
Hapus Dokumen Pendukung?
|
|
</template>
|
|
<DxToolbarItem
|
|
widget="dxButton"
|
|
:options="removeDokumenButtonOptions"
|
|
location="after"
|
|
toolbar="bottom"
|
|
/>
|
|
<DxToolbarItem
|
|
widget="dxButton"
|
|
:options="cancelRemoveButtonOptions"
|
|
location="after"
|
|
toolbar="bottom"
|
|
/>
|
|
</DxPopup>
|
|
|
|
<DxDataGrid ref="datagrid" :data-source="dataSource" key-expr="filename" :column-auto-width="true">
|
|
<DxColumn data-field="jenisDokumenId" caption="Jenis Dokumen" alignment="left">
|
|
<DxLookup :data-source="jenisDokumens" display-expr="name" value-expr="id" :search-enabled="true" />
|
|
</DxColumn>
|
|
<DxColumn data-field="filename" caption="File" />
|
|
<DxColumn data-field="keterangan" caption="Keterangan" />
|
|
<DxColumn type="buttons" caption="Aksi" :fixed="true">
|
|
<DxDataButton text="Edit" hint="Edit Dokumen Pendukung" icon="edit" @click="editDokumen" />
|
|
<DxDataButton text="Delete" hint="Hapus Dokumen Pendukung" icon="trash" @click="removeDokumen" />
|
|
</DxColumn>
|
|
<DxToolbar>
|
|
<DxItem name="searchPanel" location="before" />
|
|
<DxItem name="addRowButton" show-text="always" css-class="">
|
|
<DxTexts add-row="Tambah"></DxTexts>
|
|
</DxItem>
|
|
</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)" />
|
|
</DxDataGrid>
|
|
</template>
|
|
|
|
<script setup>
|
|
import http from "@/utils/http";
|
|
import jenisDokumens from "@/store/jenis-dokumen";
|
|
import {
|
|
DxColumn,
|
|
DxDataGrid,
|
|
DxItem,
|
|
DxLookup,
|
|
DxPager,
|
|
DxPaging,
|
|
DxTexts,
|
|
DxToolbar,
|
|
DxButton as DxDataButton
|
|
} from "devextreme-vue/data-grid";
|
|
import PopupUploadDokumenPendukung from "@/views/drp/drp-upload-dokumen-popup/upload-dokumen-pendukung.vue";
|
|
import DxPopup, {DxToolbarItem} from "devextreme-vue/popup";
|
|
import DxButton from "devextreme-vue/button";
|
|
import {defineProps, defineEmits, ref, watch} from "vue";
|
|
import ArrayStore from "devextreme/data/array_store";
|
|
import DataSource from "devextreme/data/data_source";
|
|
|
|
const props = defineProps(['drpId', 'drpTahun']);
|
|
const emit = defineEmits(['addDokumenPendukung']);
|
|
|
|
|
|
// const URL = process.env.VUE_APP_ROOT_API + '/drp';
|
|
const URL_UPLOAD = process.env.VUE_APP_ROOT_API + '/drp/upload/dokumen';
|
|
|
|
const datagrid = ref(null)
|
|
const isFormOpen = ref(false);
|
|
const isRemoveConfirmationDialogOpen = ref(false);
|
|
const dokumenData = ref();
|
|
const documents = ref([])
|
|
|
|
const addDokumen = () => {
|
|
isFormOpen.value = !isFormOpen.value;
|
|
}
|
|
|
|
const editDokumen = (e) => {
|
|
dokumenData.value = e.row.data;
|
|
isFormOpen.value = !isFormOpen.value;
|
|
}
|
|
|
|
const removeDokumenButtonOptions = ref({
|
|
text: 'Hapus',
|
|
async onClick() {
|
|
await http.delete(URL_UPLOAD, {
|
|
filename: dokumenData.value.filename
|
|
})
|
|
isRemoveConfirmationDialogOpen.value = false;
|
|
documents.value.splice(dokumenData.value.id, 1);
|
|
datagrid.value.instance.refresh();
|
|
}
|
|
})
|
|
|
|
const removeDokumen = (e) => {
|
|
isRemoveConfirmationDialogOpen.value = true;
|
|
dokumenData.value = e.row.data;
|
|
};
|
|
|
|
const cancelRemoveButtonOptions = ref({
|
|
text: 'Batal',
|
|
onClick() {
|
|
isRemoveConfirmationDialogOpen.value = false;
|
|
}
|
|
})
|
|
|
|
const addDokumenPendukung = (payload) => {
|
|
emit('addDokumenPendukung', payload);
|
|
documents.value.push(payload)
|
|
isFormOpen.value = false;
|
|
datagrid.value.instance.refresh();
|
|
}
|
|
|
|
const dataSource = new DataSource({
|
|
store: new ArrayStore({
|
|
data: documents.value,
|
|
key: 'filename',
|
|
}),
|
|
});
|
|
|
|
|
|
watch(() => props.drpId, () => {
|
|
datagrid.value.instance.refresh();
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
a.dx-link.dx-icon-edit.dx-link-icon {
|
|
color: orange !important;
|
|
}
|
|
|
|
a.dx-link.dx-icon-trash.dx-link-icon {
|
|
color: red !important;
|
|
}
|
|
</style>
|