add modules folder based on s_menu

This commit is contained in:
2026-06-30 10:16:11 +07:00
parent 315b657ee3
commit a1aab09ac9
625 changed files with 192283 additions and 794 deletions

View File

@@ -0,0 +1,40 @@
const URL = "/one-api/mockup/masterdata/accounting/Ruangan";
async function request(endpoint, param) {
try {
const resp = await axios.post(URL + endpoint, param);
if (resp.status !== 200) {
throw new Error(resp.statusText);
}
return resp.data;
} catch (e) {
return {
status: "ERR",
message: e.message
}
}
}
export async function searchRuangan(param) {
return request("/lookupRuangan", param);
}
export async function insertRuangan(param) {
return request("/insertRuangan", param);
}
export async function updateRuangan(param) {
return request("/updateRuangan", param);
}
export async function deleteRuangan(param) {
return request("/deleteRuangan", param);
}
export async function listingCabang(param) {
return request("/listingCabang", param);
}
export async function listingRegional(param) {
return request("/listingRegional", param);
}

View File

@@ -0,0 +1,154 @@
<template>
<div>
<v-toolbar color="white">
<v-toolbar-title class="black--text">DETAIL RUANGAN</v-toolbar-title>
<v-spacer></v-spacer>
<h3>STATUS: {{ form_status }}</h3>
</v-toolbar>
<v-card class="pa-2">
<v-layout row wrap>
<v-flex xs6 pr-1>
<v-autocomplete :items="form_listreg" hide-details outline label="Regional"
item-text="S_RegionalName" item-value="S_RegionalID" @change="onChangeReg"
v-model="form_detail.regional"></v-autocomplete>
</v-flex>
<v-flex xs6 pl-1>
<v-autocomplete :items="form_listcab" label="Cabang" hide-details outline item-text="M_BranchName"
item-value="M_BranchID" :readonly="user.loginLevel == 'branch'"
v-model="form_detail.cabang"></v-autocomplete>
</v-flex>
<v-flex xs6 class="pr-1 mt-2">
<v-text-field hide-details label="Nama Ruangan" outline v-model="form_detail.nama"></v-text-field>
</v-flex>
<v-flex xs6 class="pl-1 mt-2">
<v-text-field hide-details label="Kode Ruangan" outline v-model="form_detail.kode"></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap class="mt-2">
<v-flex grow></v-flex>
<v-flex shrink pa-1>
<v-btn @click="hapusDetail()" outline color="error" :disabled="form_status == 'BARU'">HAPUS</v-btn>
</v-flex>
<v-flex shrink pa-1>
<v-btn @click="saveDetail()" block color="primary">SIMPAN</v-btn>
</v-flex>
</v-layout>
</v-card>
<v-dialog v-model="dialog_confirm" persistent width="40vw">
<v-card>
<v-card-title class="headline grey lighten-2">KONFIRMASI {{ form_status }}</v-card-title>
<v-card-text>
{{
form_status == 'BARU'
? 'Apakah anda yakin akan membuat data detail ruangan baru?'
: form_status == 'EDIT'
? 'Apakah anda yakin akan menyimpan perubahan data detail ruangan?'
: form_status == 'HAPUS'
? 'Apakah anda yakin akan menghapus data detail ruangan?'
: ''
}}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="dialog_confirm = false" color="error" class="white--text">Batal</v-btn>
<v-btn @click="konfirmasi()" color="primary" class="white--text">Ya</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
module.exports = {
data() {
return {
dialog_confirm: false
};
},
computed: {
user() {
return this.$store.state.ruangan.user;
},
form_listreg() {
return this.$store.state.ruangan.form_listreg;
},
form_listcab() {
return this.$store.state.ruangan.form_listcab;
},
form_status: {
get() {
return this.$store.state.ruangan.form_status;
},
set(val) {
this.$store.commit("ruangan/update_form_status", val);
}
},
form_detail: {
get() {
return this.$store.state.ruangan.form_detail;
},
set(val) {
this.$store.commit("ruangan/update_form_detail", val);
}
},
snackbar: {
get() {
return this.$store.state.ruangan.snackbar;
},
set(val) {
this.$store.commit("ruangan/update_snackbar", val);
}
}
},
methods: {
onChangeReg(value) {
this.form_detail.regional = value;
this.$store.dispatch('ruangan/listingCabang', 'right', value);
},
saveDetail() {
const detail = this.form_detail;
const isFilled = ["nama", "kode", "cabang", "regional"].every(field => {
return String(detail[field]).trim() !== "";
});
if (!isFilled) {
const snac = { color: 'error', msg: "form belum lengkap", state: true };
this.snackbar = snac;
} else {
this.dialog_confirm = true
}
},
hapusDetail() {
const detail = this.form_detail;
if (detail.id != 0) {
this.form_status = 'HAPUS';
this.dialog_confirm = true;
} else {
const snac = { color: 'error', msg: "unknown id detail", state: true };
this.snackbar = snac;
}
},
konfirmasi() {
let status = this.form_status
let form = this.form_detail
if (status == "BARU") {
this.$store.dispatch("ruangan/insertRuangan");
}
if (status == "EDIT" && form.id != 0) {
this.$store.dispatch("ruangan/updateRuangan", form.id);
}
if (status == "HAPUS" && form.id != 0) {
this.$store.dispatch("ruangan/deleteRuangan", form.id);
}
}
}
}
</script>

View File

@@ -0,0 +1,190 @@
<template>
<div>
<v-toolbar color="primary" dark>
<v-toolbar-title class="white--text">MASTER DATA RUANGAN</v-toolbar-title>
<v-spacer></v-spacer>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn v-on="on" icon @click="insertNewRuangan()">
<v-icon large>add_box</v-icon>
</v-btn>
</template>
<span>TAMBAH RUANGAN BARU</span>
</v-tooltip>
</v-toolbar>
<v-card class="pa-2">
<v-layout row align-center>
<v-flex xs4 pr-1>
<v-autocomplete :items="list_regional" label="Regional" hide-details outline
:readonly="user.loginLevel != 'pusat'" item-text="S_RegionalName" item-value="S_RegionalID"
v-model="filter_listing.regional" @change="onChangeReg"></v-autocomplete>
</v-flex>
<v-flex xs4 px-1>
<v-autocomplete :items="list_cabang" label="Cabang" item-text="M_BranchName" item-value="M_BranchID"
v-model="filter_listing.cabang" :readonly="user.loginLevel == 'branch'" hide-details
outline></v-autocomplete>
</v-flex>
<v-flex grow px-1>
<v-text-field v-model="filter_listing.keyword" label="Cari nama, kode" outline
hide-details></v-text-field>
</v-flex>
<v-flex shrink pl-1>
<v-btn color="primary" @click="search()">
<v-icon>search</v-icon>
</v-btn>
</v-flex>
</v-layout>
</v-card>
<v-card class="pa-2 mt-2">
<v-data-table :headers="headers" :items="list_ruangan.records" item-key="id" class="elevation-1"
hide-actions>
<template v-slot:items="props">
<tr @click="openDetailRuangan(props.item)" :class="{ 'yellow lighten-4': isSelected(props.item) }">
<td class="text-xs-center pa-1">
{{ props.index + 1 }}
</td>
<td class="text-xs-center pa-1">
{{ props.item.name }}
</td>
<td class="text-xs-center pa-1">
{{ props.item.code }}
</td>
<td class="text-xs-left pa-1">
<p class="mb-0">{{ props.item.branch_name }}</p>
<p class="mb-0">{{ props.item.regional_name }}</p>
</td>
</tr>
</template>
</v-data-table>
<v-divider class="my-1"></v-divider>
<div class="pa-2 mt-1 text-xs-center">
<v-pagination v-model="list_pagination" :length="len_page" :total-visible="10"></v-pagination>
</div>
</v-card>
<v-snackbar v-model="snackbar.state" multi-line top :timeout="3000" :color="snackbar.color">
{{ snackbar.msg }}
<v-btn class="ml-2" round flat @click="snackbar.state = false">Tutup</v-btn>
</v-snackbar>
</div>
</template>
<script>
module.exports = {
async mounted() {
await this.$store.dispatch('ruangan/listingRegional', 'left');
await this.$store.dispatch('ruangan/listingCabang', 'left');
await this.$store.dispatch('ruangan/searchRuangan');
await this.$store.dispatch('ruangan/listingRegional', 'right');
},
data() {
return {
headers: [
{
text: "NO", align: "center", sortable: false, value: "no",
width: "10%", class: "pa-1 blue lighten-3 white--text",
},
{
text: "NAMA", align: "center", sortable: false, value: "name",
width: "35%", class: "pa-1 blue lighten-3 white--text",
},
{
text: "KODE", align: "center", sortable: false, value: "code",
width: "25%", class: "pa-1 blue lighten-3 white--text",
},
{
text: "LOKASI", align: "center", sortable: false, value: "loc",
width: "30%", class: "pa-1 blue lighten-3 white--text",
}
]
};
},
computed: {
user() {
return this.$store.state.ruangan.user;
},
list_regional() {
return this.$store.state.ruangan.filter_listreg;
},
list_cabang() {
return this.$store.state.ruangan.filter_listcab;
},
list_ruangan() {
return this.$store.state.ruangan.list_ruangan;
},
len_page() {
const total = this.list_ruangan.total;
if (total == undefined || total < 1) return 1;
return Math.ceil(total / 10);
},
list_pagination: {
get() {
return this.$store.state.ruangan.list_pagination;
},
set(val) {
this.$store.commit("ruangan/update_list_pagination", val);
this.$store.dispatch('ruangan/searchRuangan');
}
},
filter_listing: {
get() {
return this.$store.state.ruangan.filter_listing;
},
set(val) {
this.$store.commit("ruangan/update_filter_listing", val);
}
},
snackbar: {
get() {
return this.$store.state.ruangan.snackbar;
},
set(val) {
this.$store.commit("ruangan/update_snackbar", val);
}
}
},
methods: {
onChangeReg(value) {
this.filter_listing.regional = value;
this.$store.dispatch('ruangan/listingCabang', 'left');
},
search() {
this.$store.dispatch('ruangan/searchRuangan');
},
insertNewRuangan() {
let detail = {
id: 0,
kode: "",
nama: "",
cabang: "",
regional: ""
};
this.$store.commit("ruangan/update_form_status", 'BARU');
this.$store.commit("ruangan/update_form_detail", detail);
},
async openDetailRuangan(item) {
let detail = {
id: item.id,
kode: item.code,
nama: item.name,
cabang: item.branch_id,
regional: item.regional_id
};
let cabs = this.list_cabang.filter((cab) => cab.M_BranchID != 0);
this.$store.commit("ruangan/update_form_listcab", cabs);
this.$store.commit("ruangan/update_form_status", 'EDIT');
this.$store.commit("ruangan/update_form_detail", detail);
},
isSelected(item) {
let form = this.$store.state.ruangan.form_detail;
return item.id === form.id
}
}
}
</script>

View File

@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../../libs/vendor/css/google-fonts.css">
<link rel="stylesheet" href="../../../libs/vendor/css/icomoon-fonts.css">
<link rel="stylesheet" href="../../../libs/vendor/css/vuetify.min.css">
<title>ONE</title>
</head>
<body>
<div v-cloak id="app">
<v-app id="smartApp">
<one-navbar></one-navbar>
<v-content style="background: #F5E8DF!important">
<v-container fluid fill-height class="px-1 py-2">
<v-flex xs6 fill-height pa-1>
<left-layout></left-layout>
</v-flex>
<v-flex xs6 fill-height pa-1>
<right-layout></right-layout>
</v-flex>
</v-container>
</v-content>
<one-footer></one-footer>
</v-app>
</div>
<!-- Vendor -->
<script src="../../../libs/vendor/moment.min.js"></script>
<script src="../../../libs/vendor/numeral.min.js"></script>
<script src="../../../libs/vendor/moment-locale-id.js"></script>
<script src="../../../libs/vendor/lodash.js"></script>
<script src="../../../libs/vendor/axios.min.js"></script>
<script src="../../../libs/vendor/vue.js"></script>
<script src="../../../libs/vendor/vuex.js"></script>
<script src="../../../libs/vendor/vuetify.js"></script>
<script src="../../../libs/vendor/httpVueLoader.js"></script>
<script src="../../../libs/one_global.js"></script>
<!-- App Script -->
<script type="module">
import { store } from './store.js';
window.store = store;
new Vue({
store,
el: "#app",
methods: {},
components: {
'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
'left-layout': httpVueLoader('./components/listing-layout.vue'),
'right-layout': httpVueLoader('./components/detail-layout.vue')
}
})
</script>
<style>
[v-cloak] {
display: none;
}
</style>
</body>
</html>

View File

@@ -0,0 +1,228 @@
import * as api from "../api/api.js";
export default {
namespaced: true,
state: {
user: one_user(),
snackbar: {
color: "success",
msg: "",
state: false
},
// left side
filter_listreg: [],
filter_listcab: [],
filter_listing: {
regional: "",
cabang: 0,
keyword: ""
},
list_ruangan: {
total: 0,
records: []
},
list_pagination: 1,
// right side
form_status: "BARU",
form_listreg: [],
form_listcab: [],
form_detail: {
id: 0,
nama: "",
kode: "",
cabang: "",
regional: ""
}
},
mutations: {
update_snackbar(state, val) {
state.snackbar = val;
},
// left side
update_filter_listreg(state, val) {
state.filter_listreg = val;
},
update_filter_listcab(state, val) {
state.filter_listcab = val;
},
update_filter_listing(state, val) {
state.filter_listing = val;
},
update_list_ruangan(state, val) {
state.list_ruangan = val;
},
update_list_pagination(state, val) {
state.list_pagination = val;
},
// right side
update_form_status(state, val) {
state.form_status = val
},
update_form_listreg(state, val) {
state.form_listreg = val;
},
update_form_listcab(state, val) {
state.form_listcab = val;
},
update_form_detail(state, val) {
state.form_detail = val
}
},
actions: {
async listingRegional(context, side) {
try {
const param = { token: one_token() }
const resp = await api.listingRegional(param);
if (resp.status != "OK") {
throw new Error(resp.message);
}
const datas = resp.data.records;
const users = context.state.user;
if (side == 'left') {
const sel_reg = datas.find((reg) => reg.S_RegionalID == users.S_RegionalID);
let filter = context.state.filter_listing;
filter.regional = sel_reg.S_RegionalID;
context.commit("update_filter_listing", filter);
context.commit("update_filter_listreg", datas);
} else {
let reg = users.loginlevel == 'pusat'
? datas
: datas.filter((r) => r.S_RegionalID == users.S_RegionalID);
context.commit("update_form_listreg", reg);
}
} catch (e) {
const snac = { color: 'error', msg: e.message, state: true };
context.commit("update_snackbar", snac);
}
},
async listingCabang(context, side) {
try {
let param = {
token: one_token(),
regionalID: side == "left"
? context.state.filter_listing.regional
: context.state.form_detail.regional
}
const resp = await api.listingCabang(param);
if (resp.status != "OK") {
throw new Error(resp.message);
}
const users = context.state.user;
if (side == "left") {
let datas = [{ M_BranchID: 0, M_BranchName: "SEMUA" }, ...resp.data.records]
const usr_cab = datas.find((cab) => cab.M_BranchID == users.M_BranchID);
let filter = context.state.filter_listing;
filter.cabang = usr_cab.M_BranchID;
context.commit("update_filter_listing", filter);
context.commit("update_filter_listcab", datas);
} else {
context.commit("update_form_listcab", resp.data.records);
}
} catch (e) {
const snac = { color: 'error', msg: e.message, state: true };
context.commit("update_snackbar", snac);
}
},
async searchRuangan(context) {
try {
const param = {
token: one_token(),
latestPage: context.state.list_pagination,
regionalID: context.state.filter_listing.regional,
branchID: context.state.filter_listing.cabang ?? 0
}
const resp = await api.searchRuangan(param);
if (resp.status != "OK") {
throw new Error(resp.message);
}
context.commit("update_list_ruangan", resp.data);
} catch (e) {
const snac = { color: 'error', msg: e.message, state: true };
context.commit("update_snackbar", snac);
}
},
async insertRuangan(context) {
try {
const param = {
token: one_token(),
regionalID: context.state.form_detail.regional,
branchID: context.state.form_detail.cabang,
ruanganName: context.state.form_detail.nama,
ruanganCode: context.state.form_detail.kode
}
const resp = await api.insertRuangan(param);
if (resp.status != "OK") {
throw new Error(resp.message);
}
const snac = { color: 'success', msg: "sukses insert data ruangan", state: true };
context.commit("update_snackbar", snac);
} catch (e) {
const snac = { color: 'error', msg: e.message, state: true };
context.commit("update_snackbar", snac);
}
},
async updateRuangan(context, id) {
try {
const param = {
token: one_token(),
ruanganID: id,
regionalID: context.state.form_detail.regional,
branchID: context.state.form_detail.cabang,
ruanganName: context.state.form_detail.nama,
ruanganCode: context.state.form_detail.kode
}
console.log(param);
const resp = await api.updateRuangan(param);
if (resp.status != "OK") {
throw new Error(resp.message);
}
const snac = { color: 'success', msg: "sukses update data ruangan", state: true };
context.commit("update_snackbar", snac);
} catch (e) {
const snac = { color: 'error', msg: e.message, state: true };
context.commit("update_snackbar", snac);
}
},
async deleteRuangan(context, id) {
try {
const param = {
token: one_token(),
ruanganID: id
}
const resp = await api.deleteRuangan(param);
if (resp.status != "OK") {
throw new Error(resp.message);
}
const snac = { color: 'success', msg: "sukses delete data ruangan", state: true };
context.commit("update_snackbar", snac);
} catch (e) {
const snac = { color: 'error', msg: e.message, state: true };
context.commit("update_snackbar", snac);
}
},
}
}

View File

@@ -0,0 +1,12 @@
import system from "../../../apps/modules/system/system.js";
import ruangan from "./modules/ruangan.js";
export const store = new Vuex.Store({
modules: {
system: system,
ruangan: ruangan
},
state: {},
mutations: {},
actions: {}
});