Files
fe-accone/test/vuex/acc-one-po-asset/components/form-order-asset.vue
2026-07-20 13:14:28 +07:00

153 lines
6.1 KiB
Vue

<template>
<div>
<!-- first row -->
<v-layout row wrap>
<v-flex xs4 pa-1>
<v-menu
v-model="menuPOdate" offset-y lazy min-width="290px"
transition="scale-transition" max-width="290px" full-width
:nudge-right="40" :close-on-content-click="false"
>
<template v-slot:activator="{on}">
<v-text-field
v-model="formatPOdate" label="Tanggal PO"
hide-details readonly v-on="on" outline
></v-text-field>
</template>
<v-date-picker
v-model="form_order_asset.podate" no-title
@input="menuPOdate = false" :readonly="viewonlymode"
></v-date-picker>
</v-menu>
</v-flex>
<v-flex xs4 pa-1>
<v-autocomplete
:items="list_supplier" hide-details outline :readonly="viewonlymode"
v-model="form_order_asset.supplierID" label="Supplier"
item-text="SupplierName" item-value="SupplierID"
></v-autocomplete>
</v-flex>
<v-flex xs4 pa-1>
<v-text-field
v-model="form_order_asset.reference" hide-details outline
label="Referensi" placeholder="nomor request" readonly
></v-text-field>
</v-flex>
</v-layout>
<!-- 2nd row -->
<v-layout row wrap>
<v-flex xs2 pa-1>
<v-autocomplete
:items="list_cabang" hide-details outline
v-model="form_order_asset.branchID" label="Cabang"
item-text="M_BranchName" item-value="M_BranchID"
@change="onChangeCabang" :readonly="viewonlymode"
></v-autocomplete>
</v-flex>
<v-flex xs2 pa-1>
<v-autocomplete
:items="list_gudang" hide-details outline :readonly="viewonlymode"
v-model="form_order_asset.gudangID" label="Gudang"
item-text="WarehouseName" item-value="WarehouseID"
></v-autocomplete>
</v-flex>
<v-flex xs2 pa-1>
<v-autocomplete
:items="['nominal', 'percent']" label="Tipe Nilai" :readonly="viewonlymode"
v-model="form_order_asset.typepajak" hide-details outline
@change="$store.dispatch('orderAsset/recalculateOrderSummary')"
></v-autocomplete>
</v-flex>
<v-flex xs2 pa-1>
<v-text-field
v-if="form_order_asset.typepajak == 'percent'" label="Pajak"
v-model="form_order_asset.valuepajak" hide-details outline
placeholder="besar pajak dalam persen" suffix="%"
@input="$store.dispatch('orderAsset/recalculateOrderSummary')"
></v-text-field>
<v-text-field
v-else label="Pajak" outline prefix="Rp." :readonly="viewonlymode"
v-model="form_order_asset.valuepajak" hide-details
placeholder="besar pajak dalam rupiah"
@input="$store.dispatch('orderAsset/recalculateOrderSummary')"
></v-text-field>
</v-flex>
<v-flex xs2 pa-1>
<v-autocomplete
:items="['nominal', 'percent']" hide-details outline :readonly="viewonlymode"
v-model="form_order_asset.typediskon" label="Tipe Nilai"
@change="$store.dispatch('orderAsset/recalculateOrderSummary')"
></v-autocomplete>
</v-flex>
<v-flex xs2 pa-1>
<v-text-field
v-if="form_order_asset.typediskon == 'percent'" label="Diskon"
v-model="form_order_asset.valuediskon" hide-details outline
placeholder="besar diskon dalam persen" suffix="%"
@input="$store.dispatch('orderAsset/recalculateOrderSummary')"
></v-text-field>
<v-text-field
v-else label="Diskon" outline prefix="Rp."
v-model="form_order_asset.valuediskon" hide-details
placeholder="besar diskon dalam rupiah" :readonly="viewonlymode"
@input="$store.dispatch('orderAsset/recalculateOrderSummary')"
></v-text-field>
</v-flex>
<v-flex xs12 pa-1>
<v-textarea
v-model="form_order_asset.catatan" auto-grow :readonly="viewonlymode"
rows="1" outline label="Catatan" hide-details
></v-textarea>
</v-flex>
</v-layout>
</div>
</template>
<script>
module.exports = {
data() {
return {
menuPOdate: false,
}
},
computed: {
form_order_asset: {
get() {
return this.$store.state.orderAsset.form_order_asset;
},
set(val) {
this.$store.commit('orderAsset/update_form_order_asset', val);
}
},
formatPOdate() {
return this.formatDate(this.form_order_asset.podate);
},
list_supplier() {
return this.$store.state.orderAsset.list_supplier;
},
list_cabang() {
return this.$store.state.orderAsset.list_cabang;
},
list_gudang() {
return this.$store.state.orderAsset.list_gudang;
},
viewonlymode() {
return this.$store.state.common.viewonlymode;
}
},
methods: {
formatDate(date) {
if (!date) return null;
const [year, month, day] = date.split('-');
return `${day}-${month}-${year}`;
},
onChangeCabang(branchID) {
if (!branchID) return;
this.$store.dispatch("orderAsset/listingGudang", branchID);
}
}
}
</script>